feat: update documentation and component demos for backend layered architecture
- Add new LanguageScopeDemo component for backend languages overview - Refactor and simplify existing demo components (ControllerLayerDemo, DtoFlowDemo, DependencyDirectionDemo) - Update .gitignore to exclude .claude/skills directory - Modify backend-related sections in documentation from "后端与全栈" to "后端开发" - Add new backend layered architecture demo components (CleanArchitectureDemo, DependencyDirectionDemo) - Improve documentation structure and content for stage-3 core skills - Fix component initialization timing in CompileVsInterpretDemo and RateLimiterDemo - Add design style prompt reference in frontend documentation
This commit is contained in:
sanbuphy
+183
-644
@@ -1,123 +1,57 @@
|
||||
<template>
|
||||
<div class="service-layer-demo">
|
||||
<div class="demo-header">
|
||||
<h4>⚙️ Service 层：业务逻辑的"指挥家"</h4>
|
||||
<p class="subtitle">
|
||||
Service 层编排业务逻辑，协调多个 Repository，管理事务边界
|
||||
</p>
|
||||
<div class="service-demo">
|
||||
<div class="header">
|
||||
<div class="title">Service 层：业务逻辑的"指挥家"</div>
|
||||
<div class="subtitle">选择业务场景，查看 Service 层如何编排逻辑</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景选择器 -->
|
||||
<div class="scenario-selector">
|
||||
<div class="selector-label">
|
||||
选择业务场景：
|
||||
</div>
|
||||
<div class="scenario-buttons">
|
||||
<button
|
||||
v-for="scenario in scenarios"
|
||||
:key="scenario.id"
|
||||
:class="['scenario-btn', { active: currentScenario === scenario.id }]"
|
||||
@click="currentScenario = scenario.id"
|
||||
>
|
||||
{{ scenario.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<button
|
||||
v-for="s in scenarios" :key="s.id"
|
||||
:class="['tab', { active: current === s.id }]"
|
||||
@click="current = s.id; expanded = []"
|
||||
>{{ s.name }}</button>
|
||||
</div>
|
||||
|
||||
<!-- 流程图 -->
|
||||
<div class="flow-diagram">
|
||||
<div class="flow-header">
|
||||
<span class="flow-title">{{ currentScenarioData.title }}</span>
|
||||
<span class="flow-desc">{{ currentScenarioData.description }}</span>
|
||||
</div>
|
||||
<div class="flow-box">
|
||||
<div class="flow-title">{{ data.title }}</div>
|
||||
<div class="flow-desc">{{ data.desc }}</div>
|
||||
|
||||
<div class="flow-steps">
|
||||
<div class="steps">
|
||||
<div
|
||||
v-for="(step, index) in currentScenarioData.steps"
|
||||
:key="index"
|
||||
class="flow-step"
|
||||
:class="{ 'has-sub-steps': step.subSteps }"
|
||||
@click="toggleStep(index)"
|
||||
v-for="(step, i) in data.steps" :key="i"
|
||||
class="step" @click="toggleStep(i)"
|
||||
>
|
||||
<div class="step-header">
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-head">
|
||||
<span class="step-num">{{ i + 1 }}</span>
|
||||
<div class="step-info">
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-layer">
|
||||
{{ step.layer }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="step.subSteps"
|
||||
class="expand-icon"
|
||||
>
|
||||
{{ expandedSteps.includes(index) ? '▼' : '▶' }}
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-layer">{{ step.layer }}</div>
|
||||
</div>
|
||||
<span v-if="step.subs" class="expand">{{ expanded.includes(i) ? '▼' : '▶' }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="step.code"
|
||||
class="step-code"
|
||||
>
|
||||
<pre><code>{{ step.code }}</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- 子步骤（事务管理） -->
|
||||
<div
|
||||
v-if="step.subSteps && expandedSteps.includes(index)"
|
||||
class="sub-steps"
|
||||
>
|
||||
<div
|
||||
v-for="(subStep, subIndex) in step.subSteps"
|
||||
:key="subIndex"
|
||||
class="sub-step"
|
||||
:class="subStep.status"
|
||||
>
|
||||
<div class="sub-step-icon">
|
||||
{{ subStep.icon }}
|
||||
</div>
|
||||
<div class="sub-step-content">
|
||||
<div class="sub-step-name">
|
||||
{{ subStep.name }}
|
||||
</div>
|
||||
<div class="sub-step-desc">
|
||||
{{ subStep.desc }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-step-status">
|
||||
{{ subStep.statusText }}
|
||||
<pre v-if="step.code" class="step-code"><code>{{ step.code }}</code></pre>
|
||||
<div v-if="step.subs && expanded.includes(i)" class="subs">
|
||||
<div v-for="(sub, j) in step.subs" :key="j" class="sub">
|
||||
<span class="sub-icon">{{ sub.icon }}</span>
|
||||
<div class="sub-info">
|
||||
<div class="sub-name">{{ sub.name }}</div>
|
||||
<div class="sub-desc">{{ sub.desc }}</div>
|
||||
</div>
|
||||
<span class="sub-status">{{ sub.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 设计原则 -->
|
||||
<div class="design-principles">
|
||||
<h5>🎯 Service 层设计原则</h5>
|
||||
<div class="principles-grid">
|
||||
<div
|
||||
v-for="principle in principles"
|
||||
:key="principle.id"
|
||||
class="principle-card"
|
||||
>
|
||||
<div class="principle-icon">
|
||||
{{ principle.icon }}
|
||||
</div>
|
||||
<div class="principle-title">
|
||||
{{ principle.title }}
|
||||
</div>
|
||||
<div class="principle-desc">
|
||||
{{ principle.desc }}
|
||||
</div>
|
||||
<div class="principle-example">
|
||||
<code>{{ principle.example }}</code>
|
||||
</div>
|
||||
<div class="principles">
|
||||
<div class="principles-title">Service 层设计原则</div>
|
||||
<div class="principle-grid">
|
||||
<div v-for="p in principles" :key="p.title" class="principle">
|
||||
<div class="p-title">{{ p.title }}</div>
|
||||
<div class="p-desc">{{ p.desc }}</div>
|
||||
<code class="p-example">{{ p.example }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,8 +61,8 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const currentScenario = ref('order')
|
||||
const expandedSteps = ref([])
|
||||
const current = ref('order')
|
||||
const expanded = ref([])
|
||||
|
||||
const scenarios = [
|
||||
{ id: 'order', name: '下单流程' },
|
||||
@@ -136,596 +70,201 @@ const scenarios = [
|
||||
{ id: 'report', name: '报表生成' }
|
||||
]
|
||||
|
||||
const scenarioData = {
|
||||
const allData = {
|
||||
order: {
|
||||
title: '🛒 电商下单流程',
|
||||
description: '用户下单涉及库存扣减、订单创建、支付记录等多个操作，需要保证事务一致性',
|
||||
title: '电商下单流程',
|
||||
desc: '用户下单涉及库存扣减、订单创建、支付记录，需保证事务一致性',
|
||||
steps: [
|
||||
{
|
||||
name: '参数校验与DTO转换',
|
||||
layer: 'Controller',
|
||||
{ name: '参数校验与DTO转换', layer: 'Controller',
|
||||
code: `@PostMapping("/orders")
|
||||
public ResponseEntity<OrderDTO> createOrder(
|
||||
@RequestBody @Valid CreateOrderRequest request
|
||||
) {
|
||||
// 调用 Service
|
||||
public ResponseEntity<OrderDTO> createOrder(
|
||||
@RequestBody @Valid CreateOrderRequest request) {
|
||||
OrderDTO order = orderService.createOrder(request);
|
||||
return ResponseEntity.ok(order);
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: '业务逻辑编排（事务管理）',
|
||||
layer: 'Service',
|
||||
code: `@Service
|
||||
@Transactional // 关键：事务管理
|
||||
public class OrderService {
|
||||
|
||||
public OrderDTO createOrder(CreateOrderRequest request) {
|
||||
// 1. 检查库存
|
||||
inventoryService.checkAndDeduct(request.getSkuId(),
|
||||
request.getQuantity());
|
||||
|
||||
// 2. 创建订单
|
||||
Order order = new Order();
|
||||
order.setUserId(request.getUserId());
|
||||
order.setTotalAmount(calculateTotal(request));
|
||||
orderRepository.save(order);
|
||||
|
||||
// 3. 创建支付记录
|
||||
Payment payment = createPayment(order);
|
||||
paymentRepository.save(payment);
|
||||
|
||||
// 任一失败都会回滚
|
||||
return convertToDTO(order);
|
||||
}
|
||||
}` },
|
||||
{ name: '业务逻辑编排（事务管理）', layer: 'Service',
|
||||
code: `@Transactional
|
||||
public OrderDTO createOrder(CreateOrderRequest request) {
|
||||
inventoryService.checkAndDeduct(request.getSkuId(), request.getQuantity());
|
||||
Order order = new Order();
|
||||
order.setUserId(request.getUserId());
|
||||
order.setTotalAmount(calculateTotal(request));
|
||||
orderRepository.save(order);
|
||||
Payment payment = createPayment(order);
|
||||
paymentRepository.save(payment);
|
||||
return convertToDTO(order);
|
||||
}`,
|
||||
subSteps: [
|
||||
{
|
||||
icon: '✅',
|
||||
name: '检查并扣减库存',
|
||||
desc: '确保库存充足，预先锁定',
|
||||
status: 'success',
|
||||
statusText: '成功'
|
||||
},
|
||||
{
|
||||
icon: '📝',
|
||||
name: '创建订单记录',
|
||||
desc: '生成订单主表数据',
|
||||
status: 'success',
|
||||
statusText: '成功'
|
||||
},
|
||||
{
|
||||
icon: '💳',
|
||||
name: '创建支付记录',
|
||||
desc: '初始化待支付状态',
|
||||
status: 'success',
|
||||
statusText: '成功'
|
||||
},
|
||||
{
|
||||
icon: '🔄',
|
||||
name: '事务提交',
|
||||
desc: '所有操作原子性提交',
|
||||
status: 'success',
|
||||
statusText: '已提交'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '数据持久化',
|
||||
layer: 'Repository',
|
||||
code: `public interface OrderRepository extends JpaRepository<Order, Long> {
|
||||
// 基本的 CRUD 已内置
|
||||
}
|
||||
|
||||
// 实际执行：INSERT INTO orders (...) VALUES (...)`
|
||||
}
|
||||
subs: [
|
||||
{ icon: '✅', name: '检查并扣减库存', desc: '确保库存充足', status: '成功' },
|
||||
{ icon: '📝', name: '创建订单记录', desc: '生成订单主表', status: '成功' },
|
||||
{ icon: '💳', name: '创建支付记录', desc: '初始化待支付', status: '成功' },
|
||||
{ icon: '🔄', name: '事务提交', desc: '原子性提交', status: '已提交' }
|
||||
] },
|
||||
{ name: '数据持久化', layer: 'Repository',
|
||||
code: `public interface OrderRepository extends JpaRepository<Order, Long> {
|
||||
// 基本 CRUD 已内置
|
||||
}` }
|
||||
]
|
||||
},
|
||||
refund: {
|
||||
title: '💰 退款处理流程',
|
||||
description: '退款涉及订单状态变更、支付原路返回、库存回滚等操作',
|
||||
title: '退款处理流程',
|
||||
desc: '退款涉及订单状态变更、支付原路返回、库存回滚',
|
||||
steps: [
|
||||
{
|
||||
name: '接收退款申请',
|
||||
layer: 'Controller',
|
||||
{ name: '接收退款申请', layer: 'Controller',
|
||||
code: `@PostMapping("/orders/{orderId}/refund")
|
||||
public ResponseEntity<RefundDTO> applyRefund(
|
||||
@PathVariable Long orderId,
|
||||
@RequestBody @Valid RefundRequest request
|
||||
) {
|
||||
RefundDTO refund = refundService.processRefund(orderId, request);
|
||||
return ResponseEntity.ok(refund);
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: '退款业务处理',
|
||||
layer: 'Service',
|
||||
code: `@Service
|
||||
@Transactional
|
||||
public class RefundService {
|
||||
|
||||
public RefundDTO processRefund(Long orderId, RefundRequest request) {
|
||||
// 1. 验证订单状态
|
||||
Order order = orderRepository.findById(orderId)
|
||||
.orElseThrow(() -> new OrderNotFoundException("订单不存在"));
|
||||
|
||||
if (order.getStatus() != OrderStatus.PAID) {
|
||||
throw new InvalidOrderStateException("订单状态不允许退款");
|
||||
}
|
||||
|
||||
// 2. 计算退款金额
|
||||
BigDecimal refundAmount = calculateRefundAmount(order, request);
|
||||
|
||||
// 3. 调用支付渠道退款
|
||||
PaymentRefundResult result = paymentService.refund(
|
||||
order.getPaymentNo(),
|
||||
refundAmount,
|
||||
request.getReason()
|
||||
);
|
||||
|
||||
// 4. 更新订单状态
|
||||
order.setStatus(OrderStatus.REFUNDING);
|
||||
orderRepository.save(order);
|
||||
|
||||
// 5. 保存退款记录
|
||||
RefundRecord record = new RefundRecord();
|
||||
record.setOrderId(orderId);
|
||||
record.setAmount(refundAmount);
|
||||
record.setReason(request.getReason());
|
||||
record.setStatus(RefundStatus.PROCESSING);
|
||||
refundRecordRepository.save(record);
|
||||
|
||||
// 6. 异步恢复库存
|
||||
inventoryService.restoreStockAsync(order.getItems());
|
||||
|
||||
return convertToDTO(record);
|
||||
}
|
||||
public ResponseEntity<RefundDTO> applyRefund(
|
||||
@PathVariable Long orderId, @RequestBody @Valid RefundRequest request) {
|
||||
return ResponseEntity.ok(refundService.processRefund(orderId, request));
|
||||
}` },
|
||||
{ name: '退款业务处理', layer: 'Service',
|
||||
code: `@Transactional
|
||||
public RefundDTO processRefund(Long orderId, RefundRequest request) {
|
||||
Order order = orderRepository.findById(orderId).orElseThrow();
|
||||
if (order.getStatus() != OrderStatus.PAID)
|
||||
throw new InvalidOrderStateException("不允许退款");
|
||||
BigDecimal amount = calculateRefundAmount(order, request);
|
||||
paymentService.refund(order.getPaymentNo(), amount, request.getReason());
|
||||
order.setStatus(OrderStatus.REFUNDING);
|
||||
orderRepository.save(order);
|
||||
inventoryService.restoreStockAsync(order.getItems());
|
||||
return convertToDTO(saveRefundRecord(orderId, amount, request));
|
||||
}`,
|
||||
subSteps: [
|
||||
{ icon: '🔍', name: '验证订单状态', desc: '检查订单是否存在且可退款', status: 'success', statusText: '通过' },
|
||||
{ icon: '💰', name: '计算退款金额', desc: '根据规则计算应退金额', status: 'success', statusText: '完成' },
|
||||
{ icon: '🏦', name: '调用支付渠道', desc: '请求第三方支付退款', status: 'success', statusText: '处理中' },
|
||||
{ icon: '📝', name: '更新订单状态', desc: '标记为退款中', status: 'success', statusText: '已更新' },
|
||||
{ icon: '📊', name: '保存退款记录', desc: '记录退款流水', status: 'success', statusText: '已保存' },
|
||||
{ icon: '🔄', name: '异步恢复库存', desc: '后台恢复商品库存', status: 'success', statusText: '已提交' }
|
||||
]
|
||||
}
|
||||
subs: [
|
||||
{ icon: '🔍', name: '验证订单状态', desc: '检查是否可退款', status: '通过' },
|
||||
{ icon: '💰', name: '计算退款金额', desc: '根据规则计算', status: '完成' },
|
||||
{ icon: '🏦', name: '调用支付渠道', desc: '请求第三方退款', status: '处理中' },
|
||||
{ icon: '📝', name: '更新订单状态', desc: '标记为退款中', status: '已更新' },
|
||||
{ icon: '🔄', name: '异步恢复库存', desc: '后台恢复库存', status: '已提交' }
|
||||
] }
|
||||
]
|
||||
},
|
||||
report: {
|
||||
title: '📊 报表生成流程',
|
||||
description: '复杂的报表通常涉及多个数据源查询、数据聚合计算、异步导出等',
|
||||
title: '报表生成流程',
|
||||
desc: '复杂报表涉及多数据源查询、数据聚合、异步导出',
|
||||
steps: [
|
||||
{
|
||||
name: '接收报表请求',
|
||||
layer: 'Controller',
|
||||
{ name: '接收报表请求', layer: 'Controller',
|
||||
code: `@GetMapping("/reports/sales")
|
||||
public ResponseEntity<ReportTaskDTO> generateSalesReport(
|
||||
@RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
|
||||
LocalDate startDate,
|
||||
@RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
|
||||
LocalDate endDate,
|
||||
@RequestParam(required = false) List<Long> regionIds
|
||||
) {
|
||||
// 大报表采用异步生成
|
||||
ReportTaskDTO task = reportService.createReportTask(
|
||||
ReportType.SALES, startDate, endDate, regionIds
|
||||
);
|
||||
@RequestParam LocalDate startDate, @RequestParam LocalDate endDate) {
|
||||
ReportTaskDTO task = reportService.createReportTask(startDate, endDate);
|
||||
return ResponseEntity.accepted().body(task);
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: '复杂报表业务编排',
|
||||
layer: 'Service',
|
||||
code: `@Service
|
||||
public class ReportService {
|
||||
|
||||
@Async("reportExecutor")
|
||||
public void generateReportAsync(Long taskId) {
|
||||
ReportTask task = reportTaskRepository.findById(taskId)
|
||||
.orElseThrow();
|
||||
|
||||
try {
|
||||
task.setStatus(TaskStatus.RUNNING);
|
||||
reportTaskRepository.save(task);
|
||||
|
||||
// 1. 从多个数据源聚合数据
|
||||
SalesReportData data = aggregateSalesData(task);
|
||||
|
||||
// 2. 计算各项指标
|
||||
calculateMetrics(data);
|
||||
|
||||
// 3. 生成图表数据
|
||||
generateChartData(data);
|
||||
|
||||
// 4. 导出为 Excel
|
||||
String fileUrl = exportToExcel(data, task);
|
||||
|
||||
task.setStatus(TaskStatus.COMPLETED);
|
||||
task.setFileUrl(fileUrl);
|
||||
task.setCompletedAt(LocalDateTime.now());
|
||||
|
||||
} catch (Exception e) {
|
||||
task.setStatus(TaskStatus.FAILED);
|
||||
task.setErrorMessage(e.getMessage());
|
||||
}
|
||||
|
||||
reportTaskRepository.save(task);
|
||||
}
|
||||
|
||||
private SalesReportData aggregateSalesData(ReportTask task) {
|
||||
// 协调多个 Repository 查询数据
|
||||
List<Order> orders = orderRepository
|
||||
.findByCreatedAtBetween(task.getStartDate(), task.getEndDate());
|
||||
|
||||
List<Payment> payments = paymentRepository
|
||||
.findByPaidAtBetween(task.getStartDate(), task.getEndDate());
|
||||
|
||||
List<RefundRecord> refunds = refundRecordRepository
|
||||
.findByCreatedAtBetween(task.getStartDate(), task.getEndDate());
|
||||
|
||||
// 数据聚合逻辑...
|
||||
return new SalesReportData(orders, payments, refunds);
|
||||
}
|
||||
}` },
|
||||
{ name: '异步报表编排', layer: 'Service',
|
||||
code: `@Async("reportExecutor")
|
||||
public void generateReportAsync(Long taskId) {
|
||||
ReportTask task = reportTaskRepository.findById(taskId).orElseThrow();
|
||||
task.setStatus(TaskStatus.RUNNING);
|
||||
reportTaskRepository.save(task);
|
||||
SalesReportData data = aggregateSalesData(task);
|
||||
calculateMetrics(data);
|
||||
String fileUrl = exportToExcel(data, task);
|
||||
task.setStatus(TaskStatus.COMPLETED);
|
||||
task.setFileUrl(fileUrl);
|
||||
reportTaskRepository.save(task);
|
||||
}`,
|
||||
subSteps: [
|
||||
{ icon: '📥', name: '从多个数据源查询', desc: 'Orders/Payments/Refunds', status: 'success', statusText: '已查询' },
|
||||
{ icon: '🔄', name: '数据聚合与清洗', desc: '关联数据、处理缺失值', status: 'success', statusText: '已完成' },
|
||||
{ icon: '📊', name: '计算业务指标', desc: 'GMV、订单数、客单价等', status: 'success', statusText: '已计算' },
|
||||
{ icon: '📈', name: '生成图表数据', desc: '趋势图、占比图数据结构', status: 'success', statusText: '已生成' },
|
||||
{ icon: '📄', name: '导出 Excel 文件', desc: '生成并上传至 OSS', status: 'success', statusText: '已完成' }
|
||||
]
|
||||
}
|
||||
subs: [
|
||||
{ icon: '📥', name: '多数据源查询', desc: 'Orders/Payments/Refunds', status: '已查询' },
|
||||
{ icon: '🔄', name: '数据聚合清洗', desc: '关联数据、处理缺失值', status: '已完成' },
|
||||
{ icon: '📊', name: '计算业务指标', desc: 'GMV、订单数、客单价', status: '已计算' },
|
||||
{ icon: '📄', name: '导出 Excel', desc: '生成并上传至 OSS', status: '已完成' }
|
||||
] }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const currentScenarioData = computed(() => scenarioData[currentScenario.value])
|
||||
const data = computed(() => allData[current.value])
|
||||
|
||||
const toggleStep = (index) => {
|
||||
const i = expandedSteps.value.indexOf(index)
|
||||
if (i > -1) {
|
||||
expandedSteps.value.splice(i, 1)
|
||||
} else {
|
||||
expandedSteps.value.push(index)
|
||||
}
|
||||
const toggleStep = (i) => {
|
||||
const idx = expanded.value.indexOf(i)
|
||||
if (idx > -1) expanded.value.splice(idx, 1)
|
||||
else expanded.value.push(i)
|
||||
}
|
||||
|
||||
const principles = [
|
||||
{
|
||||
id: 1,
|
||||
icon: '🎯',
|
||||
title: '单一职责',
|
||||
desc: '一个 Service 类只负责一块业务领域',
|
||||
example: 'UserService 只管用户，OrderService 只管订单'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '🔄',
|
||||
title: '事务边界',
|
||||
desc: '在 Service 层声明式管理事务',
|
||||
example: '@Transactional 放在 Service 方法上'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '🔗',
|
||||
title: '避免循环依赖',
|
||||
desc: 'Service 之间不要互相调用',
|
||||
example: 'A 调用 B，B 又调用 A 会导致循环'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '📦',
|
||||
title: 'DTO 转换',
|
||||
desc: '返回前转换为 DTO，不暴露实体',
|
||||
example: 'return new UserDTO(user)'
|
||||
}
|
||||
{ title: '单一职责', desc: '一个 Service 只负责一块业务领域', example: 'UserService 只管用户，OrderService 只管订单' },
|
||||
{ title: '事务边界', desc: '在 Service 层声明式管理事务', example: '@Transactional 放在 Service 方法上' },
|
||||
{ title: '避免循环依赖', desc: 'Service 之间不要互相调用', example: 'A→B→A 会导致循环' },
|
||||
{ title: 'DTO 转换', desc: '返回前转换为 DTO，不暴露实体', example: 'return new UserDTO(user)' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.service-layer-demo {
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #fff9f0 0%, #fff0e6 100%);
|
||||
border-radius: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
.service-demo { padding: 20px; background: var(--vp-c-bg-soft); border-radius: 12px; }
|
||||
.header { text-align: center; margin-bottom: 20px; }
|
||||
.title { font-size: 16px; font-weight: 600; color: var(--vp-c-text-1); }
|
||||
.subtitle { font-size: 13px; color: var(--vp-c-text-3); margin-top: 4px; }
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
.tab {
|
||||
padding: 7px 16px; border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg);
|
||||
border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--vp-c-text-2); transition: all .2s;
|
||||
}
|
||||
.tab:hover { border-color: #f59e0b; color: #f59e0b; }
|
||||
.tab.active { background: #f59e0b; border-color: #f59e0b; color: #fff; }
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #1a1a2e;
|
||||
font-size: 18px;
|
||||
.flow-box {
|
||||
padding: 18px; border-radius: 10px;
|
||||
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); margin-bottom: 16px;
|
||||
}
|
||||
.flow-title { font-size: 15px; font-weight: 600; color: var(--vp-c-text-1); text-align: center; }
|
||||
.flow-desc { font-size: 12px; color: var(--vp-c-text-3); text-align: center; margin: 4px 0 16px; }
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
.steps { display: flex; flex-direction: column; gap: 10px; }
|
||||
.step {
|
||||
background: var(--vp-c-bg-soft); border-radius: 6px; border-left: 3px solid #f59e0b;
|
||||
cursor: pointer; transition: all .2s; overflow: hidden;
|
||||
}
|
||||
.step:hover { transform: translateX(3px); }
|
||||
|
||||
.scenario-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scenario-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scenario-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #dcdfe6;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scenario-btn:hover {
|
||||
border-color: #e6a23c;
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.scenario-btn.active {
|
||||
background: #e6a23c;
|
||||
border-color: #e6a23c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.flow-diagram {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.flow-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.flow-desc {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid #e6a23c;
|
||||
}
|
||||
|
||||
.flow-step:hover {
|
||||
background: #fff8f0;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e6a23c;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-layer {
|
||||
font-size: 12px;
|
||||
color: #e6a23c;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
.step-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
|
||||
.step-num {
|
||||
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
|
||||
background: #f59e0b; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.step-info { flex: 1; }
|
||||
.step-name { font-weight: 600; font-size: 13px; color: var(--vp-c-text-1); }
|
||||
.step-layer { font-size: 11px; color: #f59e0b; }
|
||||
.expand { color: var(--vp-c-text-3); font-size: 11px; }
|
||||
|
||||
.step-code {
|
||||
padding: 0 16px 16px 56px;
|
||||
margin: 0 14px 14px 48px; padding: 10px; border-radius: 6px; overflow-x: auto;
|
||||
background: var(--vp-code-block-bg); font-size: 11px; line-height: 1.5;
|
||||
}
|
||||
.step-code code { color: var(--vp-c-text-1); font-family: var(--vp-font-family-mono); }
|
||||
|
||||
.step-code pre {
|
||||
margin: 0;
|
||||
background: #2d2d2d;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
.subs { padding: 0 14px 14px 48px; }
|
||||
.sub {
|
||||
display: flex; align-items: center; gap: 8px; padding: 8px 10px;
|
||||
background: var(--vp-c-bg); border-radius: 6px; margin-bottom: 6px;
|
||||
border-left: 2px solid var(--vp-c-green-1);
|
||||
}
|
||||
.sub-icon { font-size: 14px; }
|
||||
.sub-info { flex: 1; }
|
||||
.sub-name { font-size: 12px; font-weight: 500; color: var(--vp-c-text-1); }
|
||||
.sub-desc { font-size: 11px; color: var(--vp-c-text-3); }
|
||||
.sub-status { font-size: 10px; padding: 2px 6px; border-radius: 8px; background: var(--vp-c-green-soft); color: var(--vp-c-green-1); }
|
||||
|
||||
.step-code code {
|
||||
color: #f8f8f2;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
.principles {
|
||||
padding: 16px; border-radius: 10px;
|
||||
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.sub-steps {
|
||||
padding: 0 16px 16px 56px;
|
||||
.principles-title { text-align: center; font-weight: 600; font-size: 14px; color: var(--vp-c-text-1); margin-bottom: 12px; }
|
||||
.principle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||||
.principle {
|
||||
padding: 12px; background: var(--vp-c-bg-soft); border-radius: 6px;
|
||||
border-left: 3px solid #f59e0b;
|
||||
}
|
||||
|
||||
.sub-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
border-left: 3px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.sub-step.success {
|
||||
border-left-color: #67c23a;
|
||||
background: #f6ffed;
|
||||
}
|
||||
|
||||
.sub-step-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sub-step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sub-step-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.sub-step-desc {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sub-step-status {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: #f0f9ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.sub-step.success .sub-step-status {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.design-principles {
|
||||
margin-top: 24px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.design-principles h5 {
|
||||
margin: 0 0 16px 0;
|
||||
color: #1a1a2e;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.principles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.principle-card {
|
||||
padding: 14px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #e6a23c;
|
||||
}
|
||||
|
||||
.principle-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.principle-title {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.principle-desc {
|
||||
color: #606266;
|
||||
font-size: 11px;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.principle-example {
|
||||
background: #2d2d2d;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.principle-example code {
|
||||
color: #f8f8f2;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
.p-title { font-weight: 600; font-size: 13px; color: var(--vp-c-text-1); margin-bottom: 4px; }
|
||||
.p-desc { font-size: 11px; color: var(--vp-c-text-2); margin-bottom: 6px; }
|
||||
.p-example {
|
||||
display: block; padding: 6px; border-radius: 4px; overflow-x: auto;
|
||||
background: var(--vp-code-block-bg); font-size: 10px; color: var(--vp-c-text-2);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.principles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scenario-selector {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step-code {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.principle-grid { grid-template-columns: 1fr; }
|
||||
.tabs { flex-wrap: wrap; }
|
||||
.step-code { margin-left: 14px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user