ADR-001: 前端技术栈选型

Status

Accepted

Date

2026-03-18

Context

StormFlow 需要一个支撑画布 + 节点编排交互的前端技术栈。核心需求：

• 画布性能：50+ 节点流畅运行
• 丰富的 UI 组件库：减少自定义 UI 工作量
• TypeScript 支持：项目复杂度较高，需要类型安全
• 快速迭代：MVP 阶段需要快速实现和验证

Options Considered

Option A: Next.js + React Flow + shadcn/ui

• Pros: 社区最大、React Flow 成熟
• Cons: React 对于画布类应用的性能开销较大，shadcn 需要较多自定义

Option B: Nuxt 4 + Vue Flow + Nuxt UI v4

• Pros: Vue 的响应式系统适合实时交互、Nuxt UI 开箱即用、Vue Flow 基于 D3 性能好
• Cons: 社区相对较小

Option C: 纯 Vue 3 + Vite + 自建 UI

• Pros: 最大灵活性
• Cons: 缺少 SSR/SSG、路由等框架级能力，UI 组件需要大量自建

Decision

选择 Option B: Nuxt 4 + Vue Flow + Nuxt UI v4。

理由：

1. Vue 的细粒度响应式系统对画布实时交互更友好
2. Nuxt UI v4 提供完善的深色主题和组件体系，与产品设计方向匹配
3. Nuxt 4 内置文件路由、自动导入、模块系统，加速 MVP 开发
4. Tailwind CSS 4 作为样式基础，与 Nuxt UI 深度集成

Consequences

• Vue Flow 作为画布引擎，节点组件使用 Vue SFC 开发
• Pinia 作为全局状态管理（Nuxt 生态标准方案）
• 所有 UI 优先使用 Nuxt UI 组件，仅在必要时自定义
• 测试使用 Vitest + Playwright（Nuxt 生态标准方案）