sanbuphy
0eba9e87e9
- Disable formatting rules (handled by Prettier) - Relaxed strict Vue/JS rules for demo code compatibility - Fix syntax errors in ApiPlayground and VoiceCloningDemo - Fix duplicate else-if condition in ApiPlayground - Fix Promise executor async pattern in AutoregressiveAudioDemo - Add TypeScript file support to ESLint config Warnings reduced from 295 to 251 problems. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
526 lines
13 KiB
Vue
526 lines
13 KiB
Vue
<template>
|
||
<div class="domain-model-demo">
|
||
<div class="demo-header">
|
||
<h4>📦 Domain 层：领域模型设计</h4>
|
||
<p class="subtitle">
|
||
Domain 是业务概念的载体，所有层的依赖基础
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 领域模型对比 -->
|
||
<div class="model-comparison">
|
||
<div class="comparison-tabs">
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
:class="['tab-btn', { active: currentTab === tab.id }]"
|
||
@click="currentTab = tab.id"
|
||
>
|
||
{{ tab.name }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="comparison-content">
|
||
<!-- 贫血模型 vs 充血模型 -->
|
||
<div
|
||
v-if="currentTab === 'comparison'"
|
||
class="tab-panel"
|
||
>
|
||
<div class="model-cards">
|
||
<div class="model-card anemic">
|
||
<div class="card-header">
|
||
<span class="card-icon">📄</span>
|
||
<span class="card-title">贫血模型 (Anemic)</span>
|
||
<span class="card-badge">传统做法</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="code-section">
|
||
<div class="code-label">
|
||
Entity（只有 getter/setter）
|
||
</div>
|
||
<pre><code>@Entity
|
||
public class Order {
|
||
@Id
|
||
private Long id;
|
||
private Long userId;
|
||
private BigDecimal totalAmount;
|
||
private OrderStatus status;
|
||
private LocalDateTime createdAt;
|
||
|
||
// 只有 getter/setter，没有业务逻辑
|
||
public Long getId() { return id; }
|
||
public void setId(Long id) { this.id = id; }
|
||
// ... 其他 getter/setter
|
||
}</code></pre>
|
||
</div>
|
||
|
||
<div class="code-section">
|
||
<div class="code-label">
|
||
Service（所有业务逻辑都在这里）
|
||
</div>
|
||
<pre><code>@Service
|
||
public class OrderService {
|
||
|
||
public void cancelOrder(Long orderId) {
|
||
Order order = orderRepository.findById(orderId)
|
||
.orElseThrow();
|
||
|
||
// 贫血模型：业务逻辑散落在 Service 里
|
||
if (order.getStatus() == OrderStatus.SHIPPED) {
|
||
throw new IllegalStateException("已发货订单不能取消");
|
||
}
|
||
if (order.getStatus() == OrderStatus.CANCELLED) {
|
||
throw new IllegalStateException("订单已取消");
|
||
}
|
||
|
||
// 修改状态
|
||
order.setStatus(OrderStatus.CANCELLED);
|
||
orderRepository.save(order);
|
||
}
|
||
}</code></pre>
|
||
</div>
|
||
|
||
<div class="problems">
|
||
<div class="problem-title">
|
||
😫 贫血模型的问题
|
||
</div>
|
||
<ul>
|
||
<li><strong>违背面向对象</strong>：对象只有数据没有行为，变成了 "数据结构"</li>
|
||
<li><strong>逻辑分散</strong>：同样的业务规则可能在多个 Service 重复</li>
|
||
<li><strong>难以维护</strong>：改一个规则要找所有用到的地方</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="model-card rich">
|
||
<div class="card-header">
|
||
<span class="card-icon">🧠</span>
|
||
<span class="card-title">充血模型 (Rich Domain)</span>
|
||
<span class="card-badge tag-green">推荐做法</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="code-section">
|
||
<div class="code-label">
|
||
Entity（包含业务逻辑）
|
||
</div>
|
||
<pre><code>@Entity
|
||
public class Order {
|
||
@Id
|
||
private Long id;
|
||
private Long userId;
|
||
private BigDecimal totalAmount;
|
||
private OrderStatus status;
|
||
private LocalDateTime createdAt;
|
||
|
||
// 🎯 业务行为封装在实体里
|
||
|
||
/**
|
||
* 取消订单
|
||
*/
|
||
public void cancel() {
|
||
// 状态校验内聚在方法里
|
||
if (this.status == OrderStatus.SHIPPED) {
|
||
throw new IllegalStateException("已发货订单不能取消");
|
||
}
|
||
if (this.status == OrderStatus.CANCELLED) {
|
||
throw new IllegalStateException("订单已取消");
|
||
}
|
||
|
||
this.status = OrderStatus.CANCELLED;
|
||
// 可以触发领域事件
|
||
registerEvent(new OrderCancelledEvent(this.id));
|
||
}
|
||
|
||
/**
|
||
* 支付订单
|
||
*/
|
||
public void pay(Payment payment) {
|
||
if (this.status != OrderStatus.PENDING_PAYMENT) {
|
||
throw new IllegalStateException("订单状态不正确");
|
||
}
|
||
if (!payment.getAmount().equals(this.totalAmount)) {
|
||
throw new IllegalArgumentException("支付金额不匹配");
|
||
}
|
||
|
||
this.status = OrderStatus.PAID;
|
||
this.paymentTime = LocalDateTime.now();
|
||
}
|
||
|
||
// ... 其他业务方法
|
||
}</code></pre>
|
||
</div>
|
||
|
||
<div class="code-section">
|
||
<div class="code-label">
|
||
Service（只做协调，不做业务判断）
|
||
</div>
|
||
<pre><code>@Service
|
||
@RequiredArgsConstructor
|
||
public class OrderService {
|
||
|
||
private final OrderRepository orderRepository;
|
||
private final DomainEventPublisher eventPublisher;
|
||
|
||
@Transactional
|
||
public void cancelOrder(Long orderId) {
|
||
// 1. 加载聚合根
|
||
Order order = orderRepository.findById(orderId)
|
||
.orElseThrow(() -> new OrderNotFoundException(orderId));
|
||
|
||
// 2. 💡 调用领域对象的业务方法
|
||
// 业务规则封装在 Order 里，Service 只做协调
|
||
order.cancel();
|
||
|
||
// 3. 保存变更
|
||
orderRepository.save(order);
|
||
|
||
// 4. 发布领域事件
|
||
order.getDomainEvents().forEach(eventPublisher::publish);
|
||
order.clearDomainEvents();
|
||
}
|
||
}</code></pre>
|
||
</div>
|
||
|
||
<div class="benefits">
|
||
<div class="benefit-title">
|
||
😊 充血模型的优势
|
||
</div>
|
||
<ul>
|
||
<li><strong>符合面向对象</strong>：数据和行为封装在一起，是真正的 "对象"</li>
|
||
<li><strong>业务内聚</strong>：规则跟着对象走，改一处处处生效</li>
|
||
<li><strong>可复用可测试</strong>：领域对象是纯内存对象，单元测试不需要数据库</li>
|
||
<li><strong>表达力强</strong>：order.cancel() 比 orderService.cancel(order) 更自然</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 值对象 -->
|
||
<div
|
||
v-else-if="currentTab === 'valueobject'"
|
||
class="tab-panel"
|
||
>
|
||
<div class="value-object-content">
|
||
<div class="concept-intro">
|
||
<h5>💎 什么是值对象（Value Object）？</h5>
|
||
<p>值对象是没有唯一标识、不可变的对象，它描述了某种特征或属性。两个值对象如果所有属性相等，就被认为是同一个对象。</p>
|
||
</div>
|
||
|
||
<div class="vo-examples">
|
||
<div class="example-card">
|
||
<div class="example-title">
|
||
📍 地址 Address
|
||
</div>
|
||
<pre><code>// 值对象：不可变、无 ID
|
||
public record Address(
|
||
String province, // 省
|
||
String city, // 市
|
||
String district, // 区
|
||
String street, // 街道
|
||
String zipCode // 邮编
|
||
) {
|
||
// 值对象的方法通常是转换或计算
|
||
public String toDisplayString() {
|
||
return String.format("%s%s%s%s",
|
||
province, city, district, street);
|
||
}
|
||
|
||
// 校验逻辑
|
||
public boolean isValid() {
|
||
return StringUtils.isNotBlank(province)
|
||
&& StringUtils.isNotBlank(city);
|
||
}
|
||
}
|
||
|
||
// 使用：地址相等只要属性相同
|
||
Address addr1 = new Address("广东", "深圳", "南山", "科技园", "518000");
|
||
Address addr2 = new Address("广东", "深圳", "南山", "科技园", "518000");
|
||
|
||
System.out.println(addr1.equals(addr2)); // true - 值对象比较的是值</code></pre>
|
||
</div>
|
||
|
||
<div class="example-card">
|
||
<div class="example-title">
|
||
💰 金钱 Money
|
||
</div>
|
||
<pre><code>// 金钱是经典的值对象
|
||
public record Money(
|
||
BigDecimal amount,
|
||
Currency currency
|
||
) {
|
||
|
||
// 工厂方法
|
||
public static Money of(BigDecimal amount, String currencyCode) {
|
||
return new Money(amount, Currency.getInstance(currencyCode));
|
||
}
|
||
|
||
public static Money yuan(BigDecimal amount) {
|
||
return new Money(amount, Currency.getInstance("CNY"));
|
||
}
|
||
|
||
// 值对象的核心：运算返回新的值对象
|
||
public Money add(Money other) {
|
||
if (!this.currency.equals(other.currency)) {
|
||
throw new IllegalArgumentException("Cannot add different currencies");
|
||
}
|
||
return new Money(this.amount.add(other.amount), this.currency);
|
||
}
|
||
|
||
public Money multiply(int factor) {
|
||
return new Money(this.amount.multiply(BigDecimal.valueOf(factor)), currency);
|
||
}
|
||
|
||
public boolean isGreaterThan(Money other) {
|
||
return this.amount.compareTo(other.amount) > 0;
|
||
}
|
||
|
||
// 格式化显示
|
||
public String toDisplayString() {
|
||
return currency.getSymbol() + amount.setScale(2, RoundingMode.HALF_UP);
|
||
}
|
||
}
|
||
|
||
// 使用示例
|
||
Money price = Money.yuan(new BigDecimal("199.99"));
|
||
Money shipping = Money.yuan(new BigDecimal("10.00"));
|
||
Money discount = Money.yuan(new BigDecimal("20.00"));
|
||
|
||
Money total = price.add(shipping).add(discount.negate());
|
||
System.out.println(total.toDisplayString()); // ¥189.99</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const currentTab = ref('comparison')
|
||
|
||
const tabs = [
|
||
{ id: 'comparison', name: '贫血 vs 充血' },
|
||
{ id: 'valueobject', name: '值对象设计' }
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.domain-model-demo {
|
||
padding: 24px;
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
|
||
border-radius: 12px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
}
|
||
|
||
.demo-header {
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.demo-header h4 {
|
||
margin: 0 0 8px 0;
|
||
color: #1a1a2e;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.subtitle {
|
||
margin: 0;
|
||
color: #666;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.model-comparison {
|
||
background: white;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.comparison-tabs {
|
||
display: flex;
|
||
background: #f5f7fa;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.tab-btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
background: transparent;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
color: #409eff;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
color: #409eff;
|
||
background: white;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-btn.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: #409eff;
|
||
}
|
||
|
||
.comparison-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.tab-panel {
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.model-cards {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.model-card {
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
border: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.model-card.anemic {
|
||
border-left: 4px solid #ff4d4f;
|
||
}
|
||
|
||
.model-card.rich {
|
||
border-left: 4px solid #52c41a;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: white;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.card-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: 600;
|
||
color: #303133;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card-badge {
|
||
margin-left: auto;
|
||
padding: 2px 8px;
|
||
background: #ff4d4f;
|
||
color: white;
|
||
border-radius: 10px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.card-badge.tag-green {
|
||
background: #52c41a;
|
||
}
|
||
|
||
.card-content {
|
||
padding: 16px;
|
||
}
|
||
|
||
.code-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.code-label {
|
||
font-size: 11px;
|
||
color: #909399;
|
||
margin-bottom: 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.code-section pre {
|
||
background: #2d2d2d;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
.code-section code {
|
||
color: #f8f8f2;
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
font-size: 10px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.problems, .benefits {
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.problems {
|
||
background: #fff1f0;
|
||
border-left: 3px solid #ff4d4f;
|
||
}
|
||
|
||
.benefits {
|
||
background: #f6ffed;
|
||
border-left: 3px solid #52c41a;
|
||
}
|
||
|
||
.problem-title, .benefit-title {
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.problem-title {
|
||
color: #cf1322;
|
||
}
|
||
|
||
.benefit-title {
|
||
color: #389e0d;
|
||
}
|
||
|
||
.problems ul, .benefits ul {
|
||
margin: 0;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.problems li, .benefits li {
|
||
margin: 6px 0;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: #595959;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.model-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|