项目架构与交付

┌──────────────────────────────┐
│  视图层（View）               │  ← 页面、组件、样式
│  只做渲染和用户交互            │
├──────────────────────────────┤
│  逻辑层（Logic）              │  ← Composable / Hook / Store
│  业务逻辑、状态管理、数据转换  │
├──────────────────────────────┤
│  数据层（Data）               │  ← API 封装、缓存、Mock
│  接口调用、数据适配、错误处理  │
└──────────────────────────────┘
  依赖方向：上 → 下（视图依赖逻辑，逻辑依赖数据）

src/
├── api/                # 数据层 — 接口封装 + 类型定义
│   ├── user.ts         # 用户相关 API
│   └── types.ts        # 接口返回值类型
├── composables/        # 逻辑层 — 组合式函数（Vue）/ hooks（React）
│   └── useUser.ts      # 用户业务逻辑
├── store/              # 逻辑层 — 全局状态（Pinia / Zustand）
├── components/         # 视图层 — 可复用组件
│   ├── ui/             # 基础 UI 组件（Button、Input）
│   └── business/       # 业务组件（UserCard、OrderList）
├── pages/              # 视图层 — 页面组件
├── router/             # 路由配置
├── types/              # 全局 TypeScript 类型
├── utils/              # 工具函数（纯函数，无副作用）
└── styles/             # 全局样式

# Monorepo 典型结构（pnpm workspace）
packages/
├── ui/          # 组件库
├── utils/       # 工具库
├── app-admin/   # 管理后台
└── app-h5/      # H5 应用

// api/user.ts — 数据层
import type { User, UserProfile } from './types'
import { request } from '@/utils/request'

export function getUser(id: string): Promise<User> {
  return request.get(`/users/${id}`)
}

export function updateUser(id: string, data: Partial<UserProfile>) {
  return request.patch(`/users/${id}`, data)
}

// composables/useUser.ts — 逻辑层
export function useUser(id: Ref<string>) {
  const user = ref<User>()
  const loading = ref(false)

  async function fetchUser() {
    loading.value = true
    try {
      user.value = await getUser(id.value)
    } finally {
      loading.value = false
    }
  }

  watch(id, fetchUser, { immediate: true })
  return { user, loading, fetchUser }
}

<!-- pages/UserProfile.vue — 视图层 -->
<script setup lang="ts">
const { id } = defineProps<{ id: string }>()
const { user, loading } = useUser(toRef(() => id))
</script>

<template>
  <Spinner v-if="loading" />
  <UserCard v-else-if="user" :user="user" />
</template>

type(scope): subject

feat(user): 添加用户头像上传功能
fix(order): 修复订单金额计算精度问题
refactor(api): 统一接口错误处理逻辑
perf(list): 虚拟滚动优化长列表渲染

        E2E 测试（10%）  — 关键链路验证
       ─────────────
     集成测试（20%）   — 组件交互、API 对接
    ─────────────────
   单元测试（70%）    — 函数、Composable、Utils

代码提交 → Lint 检查 → 类型检查 → 单元测试 → 构建产物 → 部署预览环境