ironweave 1.0.0

package/skills/engineering-principles/references/design-patterns.md

@@ -0,0 +1,34 @@
+# 设计模式指南
+
+> 核心理念：**设计服务于约束，不服务于教科书**。复杂度必须有回报——如果简单代码能解决，不引入模式。
+
+## 模式选型总表
+
+| 信号 | 推荐模式 | 避免 |
+|------|---------|------|
+| 多个 `if/else` 选择不同行为 | 策略模式 / 多态 | 平铺 switch-case |
+| 创建逻辑复杂或需要灵活切换 | 工厂模式 | 每处重复 new |
+| 多步骤构造，参数 > 5 个 | 建造者模式 | 超长构造函数 |
+| 多对象响应同一事件 | 观察者 / Event Bus | 直接调用紧耦合 |
+| 接口不兼容需要适配 | 适配器模式 | 修改第三方源码 |
+| 不修改原类增加功能 | 装饰器 / HOC | 继承链加深 |
+| 控制创建数量（连接池） | 对象池 / DI 容器 | 手动全局单例 |
+| 树形结构统一操作 | 组合模式 | 每层特殊处理 |
+| 状态转换有明确规则 | 状态机 | 散落 if-else |
+| 操作需要撤销/重做 | 命令模式 | 手动逆向 |
+| 深层嵌套条件 | Guard Clause 提前返回 | 多层 if-else |
+| 线性数据变换流程 | Pipe/Compose | 临时变量链 |
+| 外部调用可能失败 | 断路器 + 指数退避 | 无限重试 |
+
+## 按尺度查阅
+
+| 尺度 | 文件 | 内容 |
+|------|------|------|
+| 函数级 | `patterns-small-scale.md` | Guard Clause、Pipe/Compose、表驱动、Null Object、惰性求值、闭包 |
+| 类/对象级 | `patterns-classic.md` | GoF 创建型（Factory/Builder/Singleton）、结构型（Decorator/Composite/Facade/Adapter/Proxy）、行为型（Strategy/Observer/State Machine/Command/责任链） |
+| 模块级 | `patterns-module.md` | Pipeline/Middleware、Worker Pool、Circuit Breaker、Repository、FSM |
+| 前端 | `patterns-frontend.md` | React/Vue 模式选型、样式/路由/错误边界 |
+| 后端 | `patterns-backend.md` | CQRS、Saga、Event Sourcing、Specification、RBAC/ABAC |
+| 跨域 | `patterns-crosscut.md` | 插件系统、指数退避重试、缓存策略、结构化日志、DI |
+| 系统级 | `patterns-architecture.md` | 分层/六边形/Clean Architecture/微内核/模块化单体/微服务/事件驱动/Serverless |
+| 代码质量 | `anti-patterns.md` | 10 种反模式识别信号 + 改进策略 + 重构优先级 |

package/skills/engineering-principles/references/patterns-architecture.md

@@ -0,0 +1,301 @@
+# 架构模式（系统级）
+
+系统或应用级别的架构决策。选择架构前先回答：**团队规模、部署约束、业务复杂度、变化频率**。
+
+## 架构选型决策表
+
+| 场景 | 推荐架构 | 不推荐 |
+|------|---------|--------|
+| 小团队，业务简单，快速上线 | **模块化单体** | 微服务（运维成本高） |
+| 业务逻辑复杂，领域边界清晰 | **六边形 / Clean Architecture** | 传统分层（领域逻辑泄漏） |
+| 需要第三方扩展，核心稳定 | **微内核（插件架构）** | 硬编码扩展点 |
+| 团队 > 30 人，独立部署需求 | **微服务** | 单体（团队协作瓶颈） |
+| 高吞吐，异步处理为主 | **事件驱动架构** | 同步 RPC 链 |
+| 流量波动大，按需计费 | **Serverless** | 长连接/有状态服务 |
+| 遗留系统渐进重构 | **模块化单体 → 渐进拆分** | 全量重写 |
+
+---
+
+## 分层架构 (Layered / N-Tier)
+
+最基础的架构，适合大多数中小项目。
+
+```mermaid
+graph TB
+    P["Presentation\nController / API Route"] --> A["Application\nUse Case / Service"]
+    A --> D["Domain\nEntity / Value Object"]
+    D --> I["Infrastructure\nDB / External API / File"]
+    style P fill:#e3f2fd,stroke:#1565c0
+    style A fill:#e8eaf6,stroke:#283593
+    style D fill:#e8f5e9,stroke:#2e7d32
+    style I fill:#fff3e0,stroke:#e65100
+```
+
+**核心规则**: 依赖只能向下，不能跨层或向上依赖。
+
+**适用**: 业务逻辑不复杂、团队对 DDD 不熟悉的项目。
+
+**注意**: 容易退化为"所有逻辑都写在 Service 层"的贫血架构。
+
+---
+
+## 六边形架构 / 端口与适配器 (Hexagonal / Ports & Adapters)
+
+领域逻辑在中心，外部依赖通过端口/适配器接入。
+
+```mermaid
+graph LR
+    REST["Adapter\n(REST API)"] --> Domain
+    CLI["Adapter\n(CLI)"] --> Domain
+    Mock["Adapter\n(Test Mock)"] --> Domain
+    Domain["Domain\n(Ports)"] --> DB["Adapter\n(DB)"]
+    Domain --> MQ["Adapter\n(Message Queue)"]
+    style Domain fill:#e8f5e9,stroke:#2e7d32,stroke-width:3px
+```
+
+**核心概念**:
+- **Port**: 领域定义的接口（如 `UserRepository`、`PaymentGateway`）
+- **Adapter**: 外部实现（如 `PostgresUserRepository`、`StripePaymentAdapter`）
+- 领域层不依赖任何框架或基础设施
+
+```typescript
+// Port（领域定义）
+interface OrderRepository {
+  save(order: Order): Promise<void>
+  findById(id: OrderId): Promise<Order | null>
+}
+
+// Adapter（基础设施实现）
+class TypeORMOrderRepository implements OrderRepository {
+  async save(order: Order) { /* TypeORM 实现 */ }
+  async findById(id: OrderId) { /* TypeORM 实现 */ }
+}
+
+// 领域服务只依赖 Port，不知道具体实现
+class PlaceOrderUseCase {
+  constructor(
+    private orderRepo: OrderRepository,   // Port
+    private payment: PaymentGateway,      // Port
+  ) {}
+}
+```
+
+**适用**: 业务逻辑复杂、需要高可测试性、可能更换基础设施（换数据库、换消息队列）。
+
+---
+
+## Clean Architecture（整洁架构）
+
+同心圆依赖规则：内层不知道外层的存在。
+
+```mermaid
+graph TB
+    subgraph FW["Frameworks & Drivers (Web, DB, UI)"]
+        subgraph IA["Interface Adapters (Controllers, Gateways, Presenters)"]
+            subgraph APP["Application (Use Cases)"]
+                ENT["Entities (Domain)"]
+            end
+        end
+    end
+    style ENT fill:#e8f5e9,stroke:#2e7d32,stroke-width:3px
+    style APP fill:#c8e6c9,stroke:#388e3c
+    style IA fill:#e3f2fd,stroke:#1565c0
+    style FW fill:#fff3e0,stroke:#e65100
+```
+
+**依赖规则**: 依赖方向只能从外向内。内层定义接口，外层实现。
+
+**与六边形的区别**: Clean Architecture 更强调 Use Case 层的独立性，明确区分 Entity（领域规则）和 Use Case（应用规则）。
+
+**适用**: 大型项目、长期维护、多团队协作。引入成本较高，小项目慎用。
+
+---
+
+## 微内核 / 插件架构 (Microkernel / Plugin)
+
+稳定核心 + 可插拔扩展。
+
+```mermaid
+graph TB
+    subgraph Core["Core System"]
+        direction LR
+        PA["Plugin A"] ~~~ PB["Plugin B"] ~~~ PC["Plugin C"]
+    end
+    REG["Plugin Registry + Lifecycle"] --> Core
+    style Core fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
+```
+
+**核心结构**:
+
+```typescript
+// 插件契约
+interface Plugin {
+  name: string
+  version: string
+  install(core: CoreAPI): void
+  destroy?(): void
+}
+
+// 核心系统
+class PluginManager {
+  private plugins = new Map<string, Plugin>()
+
+  register(plugin: Plugin) {
+    plugin.install(this.coreAPI)
+    this.plugins.set(plugin.name, plugin)
+  }
+
+  unregister(name: string) {
+    this.plugins.get(name)?.destroy?.()
+    this.plugins.delete(name)
+  }
+}
+
+// 核心 API（暴露给插件的受控接口）
+interface CoreAPI {
+  registerRoute(path: string, handler: Handler): void
+  registerHook(event: string, callback: Function): void
+  getConfig(key: string): unknown
+}
+```
+
+**适用场景**:
+- IDE / 编辑器（VS Code 就是微内核）
+- 低代码平台（组件即插件）
+- 工具链（Webpack/Vite 的 Plugin 系统）
+- 需要第三方扩展但核心保持稳定
+
+**关键决策**: 核心 API 的粒度——太粗则插件无法做有用的事，太细则核心变动会破坏所有插件。
+
+---
+
+## 模块化单体 (Modular Monolith)
+
+单部署单元，但内部模块边界清晰。微服务的前序架构。
+
+```mermaid
+graph TB
+    subgraph Deploy["单一部署单元"]
+        subgraph OM["Order Module"]
+            O1["api/"] ~~~ O2["domain/"] ~~~ O3["infra/"]
+        end
+        subgraph PM["Payment Module"]
+            P1["api/"] ~~~ P2["domain/"] ~~~ P3["infra/"]
+        end
+        subgraph UM["User Module"]
+            U1["api/"] ~~~ U2["domain/"] ~~~ U3["infra/"]
+        end
+        OM <--->|"公开 API 通信"| PM
+        PM <--->|"公开 API 通信"| UM
+    end
+    style Deploy fill:#f3e5f5,stroke:#6a1b9a,stroke-width:2px
+```
+
+**核心规则**:
+- 每个模块有独立的 `api/`（对外接口）、`domain/`、`infra/`
+- 模块间只通过公开 API 或事件通信，**禁止直接 import 另一个模块的内部类**
+- 可共享数据库，但表归属明确（或每个模块独立 schema）
+
+```typescript
+// 模块公开 API
+// modules/order/api/order.facade.ts
+export class OrderFacade {
+  async createOrder(dto: CreateOrderDto): Promise<OrderId> { ... }
+  async getOrderStatus(id: OrderId): Promise<OrderStatus> { ... }
+}
+
+// 其他模块通过 Facade 调用，不直接访问 Order 的 domain/infra
+// modules/payment/domain/payment.service.ts
+class PaymentService {
+  constructor(private orderFacade: OrderFacade) {} // 通过 API 而非内部类
+}
+```
+
+**适用**: 大多数项目的最佳起点。比单体有更好的边界，比微服务少运维负担。未来可按模块拆分为微服务。
+
+---
+
+## 微服务 (Microservices)
+
+独立部署、独立数据存储、通过网络通信。
+
+**引入条件**（全部满足才考虑）:
+- 团队 > 30 人，需要独立发布节奏
+- 不同服务有显著不同的扩展需求（如搜索需要弹性扩容）
+- 已验证过模块化单体，边界足够清晰
+
+**关键决策**:
+
+| 决策点 | 选项 |
+|-------|------|
+| 通信 | 同步 REST/gRPC vs 异步消息队列 |
+| 数据 | 每服务独立数据库 vs 共享数据库（不推荐） |
+| 事务 | Saga vs 最终一致性 |
+| 发现 | 服务注册 vs DNS vs API Gateway |
+| 观测 | 分布式追踪 + 集中日志 + 健康检查 |
+
+**常见陷阱**:
+- 分布式单体：服务间强依赖，改一个要发多个
+- 过度拆分：每个 CRUD 一个服务
+- 忽略运维成本：CI/CD、监控、日志、链路追踪的复杂度
+
+---
+
+## 事件驱动架构 (Event-Driven Architecture)
+
+以事件为核心的异步通信模式。
+
+```mermaid
+graph LR
+    P["Producer"] --> EB["Event Broker"]
+    EB --> C["Consumer"]
+    EB --> ES["Event Store (可选)"]
+```
+
+**两种模式**:
+
+| 模式 | 描述 | 适用 |
+|------|------|------|
+| **Event Notification** | 事件只携带 ID，消费者回查详情 | 简单通知，不关心历史 |
+| **Event-Carried State Transfer** | 事件携带完整数据 | 消费者需要自治，减少回查 |
+
+**适用**: 高吞吐异步处理、服务间解耦、审计日志、实时数据管道。
+
+**注意**: 事件顺序、幂等性、最终一致性是必须解决的问题。
+
+---
+
+## Serverless / FaaS
+
+函数即服务，按调用计费。
+
+**适用场景**:
+- Webhook 处理、定时任务、文件处理
+- 流量极不均匀（高峰/低谷差异大）
+- 无状态计算
+
+**不适用**:
+- 长时间运行的任务（超时限制）
+- 需要 WebSocket/长连接
+- 冷启动敏感的低延迟场景
+
+---
+
+## 架构演进路径
+
+```mermaid
+graph LR
+    A["单体"] --> B["模块化单体"]
+    B --> C{"需要独立部署?"}
+    C -->|是| D["微服务"]
+    C -->|否| B
+
+    A --> E{"需要扩展性?"}
+    E -->|插件式| F["微内核"]
+    E -->|领域驱动| G["六边形/Clean"]
+
+    style B fill:#e8f5e9,stroke:#388e3c
+    style D fill:#fff3e0,stroke:#f57c00
+```
+
+> **默认推荐路径**: 单体 → 模块化单体 → 按需拆微服务。不要跳过模块化单体直接上微服务。

package/skills/engineering-principles/references/patterns-backend.md

@@ -0,0 +1,77 @@
+# 后端特定模式
+
+## 选型速查
+
+| 场景 | 方案 | 引入条件 |
+|------|------|---------|
+| 读写模型差异大 | **CQRS** | 读写比 > 10:1 或查询/写入模型显著不同 |
+| 多步骤异步事务 | **Saga** | 步骤 ≥ 3 且含补偿逻辑 |
+| 完整变更历史 | **Event Sourcing** | 需要审计/回放/时间旅行 |
+| 业务规则复用 | **Specification** | 规则可组合（and/or/not） |
+| API 版本管理 | 路径版本 / Header 版本 | 公共 API 有外部消费者 |
+| 权限控制 | **RBAC / ABAC** | 角色 > 3 种 或 需要属性级权限 |
+
+## CQRS（命令与查询分离）
+
+```typescript
+// 读写分离：写入走命令服务，读取走查询服务
+class OrderCommandService {
+  async createOrder(cmd: CreateOrderCommand) { /* 写入主库 */ }
+}
+class OrderQueryService {
+  async getOrderDetail(id: string) { /* 读取，可走缓存/读库 */ }
+}
+```
+
+## Saga（多步骤异步事务）
+
+```typescript
+// 每个步骤有执行和补偿
+interface SagaStep {
+  execute(): Promise<void>
+  compensate(): Promise<void>
+}
+
+// 执行链：成功则继续 → 失败则反向补偿
+async function runSaga(steps: SagaStep[]) {
+  const completed: SagaStep[] = []
+  for (const step of steps) {
+    try {
+      await step.execute()
+      completed.push(step)
+    } catch (e) {
+      for (const s of completed.reverse()) await s.compensate()
+      throw e
+    }
+  }
+}
+```
+
+## Specification（规约模式）
+
+```typescript
+// 业务规则可组合
+interface Specification<T> {
+  isSatisfiedBy(candidate: T): boolean
+  and(other: Specification<T>): Specification<T>
+  or(other: Specification<T>): Specification<T>
+  not(): Specification<T>
+}
+
+// 使用：
+const eligible = new AgeSpec(18).and(new RegionSpec('CN')).and(new VipSpec())
+const users = await userRepo.findAll(eligible)
+```
+
+## Domain Service
+
+```typescript
+// 业务逻辑不属于单个实体时，放入领域服务
+class TransferService {
+  transfer(from: Account, to: Account, amount: Money) {
+    if (!from.canWithdraw(amount)) throw new InsufficientFundsError()
+    from.withdraw(amount)
+    to.deposit(amount)
+  }
+}
+```

package/skills/engineering-principles/references/patterns-classic.md

@@ -0,0 +1,200 @@
+# 经典模式（GoF）
+
+## 创建型
+
+### 工厂模式 (Factory)
+
+```typescript
+// DO: 封装复杂创建逻辑
+class NotificationFactory {
+  static create(channel: Channel): Notification {
+    const map: Record<Channel, () => Notification> = {
+      email: () => new EmailNotification(config.smtp),
+      sms: () => new SmsNotification(config.smsGateway),
+      push: () => new PushNotification(config.firebase),
+    }
+    const creator = map[channel]
+    if (!creator) throw new Error(`Unknown channel: ${channel}`)
+    return creator()
+  }
+}
+```
+
+### 建造者模式 (Builder)
+
+```typescript
+// DO: 多步骤构造，可选参数多
+const query = new QueryBuilder('users')
+  .where('age', '>', 18)
+  .orderBy('name')
+  .limit(10)
+  .build()
+
+// DON'T: 超长构造函数
+new Query('users', null, [['age', '>', 18]], null, 'name', 'asc', 10)
+```
+
+### 单例 / DI 容器
+
+```typescript
+// DO: 通过 DI 容器管理生命周期（NestJS 示例）
+@Injectable({ scope: Scope.DEFAULT }) // 默认单例
+class DatabaseService { ... }
+
+// DON'T: 手动全局单例
+let instance: DatabaseService | null = null
+export function getDatabase() {
+  if (!instance) instance = new DatabaseService()
+  return instance  // 测试无法替换
+}
+```
+
+## 结构型
+
+### 装饰器 (Decorator / HOC / Composable)
+
+```typescript
+// DO: 不修改原对象，透明增加功能
+function withLogging<T extends (...args: any[]) => any>(fn: T): T {
+  return ((...args: Parameters<T>) => {
+    console.log(`Calling ${fn.name}`, args)
+    return fn(...args)
+  }) as T
+}
+
+// React HOC
+const withAuth = (Component: FC) => (props: any) => {
+  const { user } = useAuth()
+  if (!user) return <Redirect to="/login" />
+  return <Component {...props} user={user} />
+}
+```
+
+### 组合模式 (Composite)
+
+```typescript
+// DO: 统一接口处理树形结构
+interface MenuItem {
+  render(): string
+  getPermissions(): string[]
+}
+class MenuGroup implements MenuItem {
+  constructor(private children: MenuItem[]) {}
+  render() { return this.children.map(c => c.render()).join('\n') }
+  getPermissions() { return this.children.flatMap(c => c.getPermissions()) }
+}
+```
+
+### 门面模式 (Facade)
+
+```typescript
+// DO: 简化复杂子系统交互
+class OrderFacade {
+  async placeOrder(dto: CreateOrderDto) {
+    const inventory = await this.inventoryService.check(dto.items)
+    const payment = await this.paymentService.charge(dto.payment)
+    const order = await this.orderService.create(dto, payment.id)
+    await this.notificationService.sendConfirmation(order)
+    return order
+  }
+}
+```
+
+### 适配器 (Adapter) & 代理 (Proxy)
+
+```typescript
+// 适配器: 统一不同三方接口
+interface StorageAdapter {
+  upload(file: Buffer, key: string): Promise<string>
+}
+class S3Adapter implements StorageAdapter { ... }
+class OSSAdapter implements StorageAdapter { ... }
+
+// 代理: 控制访问（缓存/延迟/权限）
+class CachedUserService implements UserService {
+  constructor(private real: UserService, private cache: Cache) {}
+  async getById(id: string) {
+    return this.cache.get(id) ?? this.cache.set(id, await this.real.getById(id))
+  }
+}
+```
+
+## 行为型
+
+### 策略模式 (Strategy)
+
+```typescript
+// DO: 算法家族可互换
+interface PaymentStrategy {
+  pay(amount: number): Promise<PaymentResult>
+}
+class AlipayStrategy implements PaymentStrategy { ... }
+class WechatPayStrategy implements PaymentStrategy { ... }
+
+// 运行时选择
+const strategy = paymentStrategies.get(order.paymentMethod)
+await strategy.pay(order.totalAmount)
+```
+
+### 观察者 / Event Bus
+
+```typescript
+// DO: 事件驱动解耦
+orderService.on('orderCreated', (order) => {
+  inventoryService.decrease(order.items)
+  notificationService.notify(order.userId)
+})
+
+// DON'T: 创建订单函数里直接调用库存和通知
+function createOrder() {
+  // ...创建订单...
+  inventoryService.decrease(items)   // 紧耦合
+  notificationService.notify(userId) // 紧耦合
+}
+```
+
+### 状态机 (State Machine)
+
+```typescript
+// DO: 状态+转换规则明确、可预测
+const orderFSM = {
+  initial: 'draft',
+  states: {
+    draft:     { on: { SUBMIT: 'pending' } },
+    pending:   { on: { APPROVE: 'confirmed', REJECT: 'draft' } },
+    confirmed: { on: { SHIP: 'shipped', CANCEL: 'cancelled' } },
+    shipped:   { on: { DELIVER: 'completed' } },
+    completed: { type: 'final' },
+    cancelled: { type: 'final' },
+  }
+}
+```
+
+### 命令模式 (Command)
+
+```typescript
+// DO: 操作对象化，支持撤销/重做/队列
+interface Command { execute(): void; undo(): void }
+class MoveCommand implements Command {
+  constructor(private element: Element, private dx: number, private dy: number) {}
+  execute() { this.element.move(this.dx, this.dy) }
+  undo() { this.element.move(-this.dx, -this.dy) }
+}
+```
+
+### 责任链 (Chain of Responsibility)
+
+```typescript
+// DO: 请求沿链条传递直到被处理
+abstract class Handler<T> {
+  private next?: Handler<T>
+  setNext(handler: Handler<T>) { this.next = handler; return handler }
+  handle(request: T): T {
+    if (this.canHandle(request)) return this.process(request)
+    if (this.next) return this.next.handle(request)
+    return request
+  }
+  abstract canHandle(request: T): boolean
+  abstract process(request: T): T
+}
+```

package/skills/engineering-principles/references/patterns-crosscut.md

@@ -0,0 +1,67 @@
+# 跨域模式
+
+前后端都会遇到的通用场景。
+
+## 选型速查
+
+| 场景 | 推荐方案 | 要点 |
+|------|---------|------|
+| 插件系统 | 注册 + 生命周期钩子 | 第三方需扩展行为时使用 |
+| 重试与容错 | 指数退避 + 熔断器 | `delay = base * 2^attempt`，最大 3-5 次 |
+| 缓存策略 | Cache-aside / Write-through | 读多写少用 Cache-aside |
+| 日志与可观测 | 结构化日志 + 链路追踪 | 生产环境必须有 |
+| 依赖注入 | 构造函数注入 / DI 容器 | 需可测试性的场景 |
+| 并发控制 | 锁 / 信号量 / 队列 | 识别临界资源再选方案 |
+
+## 指数退避重试
+
+```typescript
+async function withRetry<T>(fn: () => Promise<T>, maxRetries = 3): Promise<T> {
+  for (let i = 0; i <= maxRetries; i++) {
+    try { return await fn() }
+    catch (e) {
+      if (i === maxRetries) throw e
+      await sleep(Math.min(1000 * Math.pow(2, i), 30000))
+    }
+  }
+  throw new Error('unreachable')
+}
+```
+
+## 插件系统
+
+```typescript
+interface Plugin {
+  name: string
+  install(app: App): void
+  destroy?(): void
+}
+
+class PluginManager {
+  private plugins: Plugin[] = []
+
+  register(plugin: Plugin) {
+    plugin.install(this.app)
+    this.plugins.push(plugin)
+  }
+
+  destroyAll() {
+    this.plugins.reverse().forEach(p => p.destroy?.())
+  }
+}
+```
+
+## 结构化日志
+
+```typescript
+// DO: 结构化字段，便于检索
+logger.info('Order created', {
+  orderId: order.id,
+  userId: order.userId,
+  total: order.total,
+  traceId: ctx.traceId,
+})
+
+// DON'T: 拼接字符串
+logger.info(`Order ${order.id} created by ${order.userId} total ${order.total}`)
+```

package/skills/engineering-principles/references/patterns-frontend.md

@@ -0,0 +1,27 @@
+# 前端特定模式
+
+## React
+
+| 场景 | 推荐 | 避免 |
+|------|------|------|
+| 跨组件状态 | Context + useReducer / Zustand | props drilling > 3 层 |
+| 逻辑复用 | Custom Hooks | HOC 链 / render props 嵌套 |
+| 异步数据 | React Query / SWR | 手写 loading/error/data |
+| 复杂表单 | react-hook-form / FSM | 散落 useState |
+| 大列表 | 虚拟化 (react-window) | 全量渲染 |
+| 跨页通信 | URL 状态 / 路由参数 | 全局 store 存页面状态 |
+
+## Vue
+
+| 场景 | 推荐 | 避免 |
+|------|------|------|
+| 逻辑复用 | Composables | Mixins |
+| 跨组件状态 | Pinia | Vuex（已过时） |
+| 响应式转换 | computed / watchEffect | 能推导的存 state |
+| 组件通信 | props + emit / provide-inject | 超 2 层用 provide-inject |
+
+## 通用前端
+
+- **样式组织**: CSS Modules / SCSS + BEM / Tailwind — 按团队统一
+- **路由**: 按功能域分组，懒加载路由组件
+- **错误边界**: React ErrorBoundary / Vue onErrorCaptured