# <!-- 由 BMAD™ Core 驱动 -->
template:
  id: frontend-architecture-template-v2
  name: 前端架构文档
  version: 2.0
  output:
    format: markdown
    filename: docs/ui-architecture.md
    title: "{{project_name}} 前端架构文档"

workflow:
  mode: interactive
  elicitation: advanced-elicitation

sections:
  - id: template-framework-selection
    title: 模板和框架选择
    instruction: |
      审查提供的文档，包括PRD、UX-UI规范和主架构文档。重点提取AI前端工具和开发代理所需的技术实现细节。如果您无法找到或未提供任何这些文档，请向用户索取。

      在继续进行前端架构设计之前，请检查项目是否使用前端入门模板或现有代码库：

      1. 审查PRD、主架构文档和头脑风暴简报中是否提及：
         - 前端入门模板（例如，Create React App、Next.js、Vite、Vue CLI、Angular CLI等）
         - UI工具包或组件库入门模板
         - 用作基础的现有前端项目
         - 管理仪表板模板或其他专业入门模板
         - 设计系统实现

      2. 如果提及了前端入门模板或现有项目：
         - 要求用户通过以下方法之一提供访问权限：
           - 指向入门模板文档的链接
           - 上传/附加项目文件（对于小项目）
           - 共享项目存储库的链接
         - 分析入门/现有项目以了解：
           - 预安装的依赖项和版本
           - 文件夹结构和文件组织
           - 内置组件和实用程序
           - 样式方法（CSS模块、styled-components、Tailwind等）
           - 状态管理设置（如果有）
           - 路由配置
           - 测试设置和模式
           - 构建和开发脚本
         - 使用此分析来确保您的前端架构与入门模板的模式保持一致

      3. 如果未提及前端入门模板但这是一个新的UI，请确保我们知道UI语言和框架是什么：
         - 根据框架选择，建议合适的入门模板：
           - React: Create React App, Next.js, Vite + React
           - Vue: Vue CLI, Nuxt.js, Vite + Vue
           - Angular: Angular CLI
           - 或者如果适用，建议流行的UI模板
         - 解释特定于前端开发的好处

      4. 如果用户确认不使用入门模板：
         - 注意所有工具、打包和配置都需要手动设置
         - 从头开始进行前端架构设计

      在继续之前，记录入门模板的决定及其施加的任何约束。
    sections:
      - id: changelog
        title: 变更日志
        type: table
        columns: [日期, 版本, 描述, 作者]
        instruction: 跟踪文档版本和变更

  - id: frontend-tech-stack
    title: 前端技术栈
    instruction: 从主架构的技术栈表中提取。此部分必须与主架构文档保持同步。
    elicit: true
    sections:
      - id: tech-stack-table
        title: 技术栈表
        type: table
        columns: [类别, 技术, 版本, 目的, 理由]
        instruction: 根据所选框架和项目要求，填写适当的技术选择。
        rows:
          - ["框架", "{{framework}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - ["UI库", "{{ui_library}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - [
              "状态管理",
              "{{state_management}}",
              "{{version}}",
              "{{purpose}}",
              "{{why_chosen}}",
            ]
          - ["路由", "{{routing_library}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - ["构建工具", "{{build_tool}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - ["样式", "{{styling_solution}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - ["测试", "{{test_framework}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - [
              "组件库",
              "{{component_lib}}",
              "{{version}}",
              "{{purpose}}",
              "{{why_chosen}}",
            ]
          - ["表单处理", "{{form_library}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - ["动画", "{{animation_lib}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
          - ["开发工具", "{{dev_tools}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]

  - id: project-structure
    title: 项目结构
    instruction: 根据所选框架为AI工具定义确切的目录结构。具体说明每种类型的文件放在哪里。生成一个遵循框架最佳实践和约定的结构。
    elicit: true
    type: code
    language: plaintext

  - id: component-standards
    title: 组件标准
    instruction: 根据所选框架定义组件创建的确切模式。
    elicit: true
    sections:
      - id: component-template
        title: 组件模板
        instruction: 生成一个遵循框架最佳实践的最小但完整的组件模板。包括TypeScript类型、正确的导入和基本结构。
        type: code
        language: typescript
      - id: naming-conventions
        title: 命名约定
        instruction: 为组件、文件、服务、状态管理和其他架构元素提供特定于所选框架的命名约定。

  - id: state-management
    title: 状态管理
    instruction: 根据所选框架定义状态管理模式。
    elicit: true
    sections:
      - id: store-structure
        title: 存储结构
        instruction: 生成适合所选框架和状态管理解决方案的状态管理目录结构。
        type: code
        language: plaintext
      - id: state-template
        title: 状态管理模板
        instruction: 提供一个遵循框架推荐模式的基本状态管理模板/示例。包括TypeScript类型和常见的操作，如设置、更新和清除状态。
        type: code
        language: typescript

  - id: api-integration
    title: API集成
    instruction: 根据所选框架定义API服务模式。
    elicit: true
    sections:
      - id: service-template
        title: 服务模板
        instruction: 提供一个遵循框架约定的API服务模板。包括正确的TypeScript类型、错误处理和异步模式。
        type: code
        language: typescript
      - id: api-client-config
        title: API客户端配置
        instruction: 展示如何为所选框架配置HTTP客户端，包括身份验证拦截器/中间件和错误处理。
        type: code
        language: typescript

  - id: routing
    title: 路由
    instruction: 根据所选框架定义路由结构和模式。
    elicit: true
    sections:
      - id: route-configuration
        title: 路由配置
        instruction: 提供适合所选框架的路由配置。包括受保护的路由模式、适用时的延迟加载以及身份验证守卫/中间件。
        type: code
        language: typescript

  - id: styling-guidelines
    title: 样式指南
    instruction: 根据所选框架定义样式方法。
    elicit: true
    sections:
      - id: styling-approach
        title: 样式方法
        instruction: 描述适合所选框架的样式方法（CSS模块、Styled Components、Tailwind等）并提供基本模式。
      - id: global-theme
        title: 全局主题变量
        instruction: 提供一个适用于所有框架的CSS自定义属性（CSS变量）主题系统。包括颜色、间距、排版、阴影和暗黑模式支持。
        type: code
        language: css

  - id: testing-requirements
    title: 测试要求
    instruction: 根据所选框架定义最低测试要求。
    elicit: true
    sections:
      - id: component-test-template
        title: 组件测试模板
        instruction: 提供一个使用框架推荐的测试库的基本组件测试模板。包括渲染测试、用户交互测试和模拟的示例。
        type: code
        language: typescript
      - id: testing-best-practices
        title: 测试最佳实践
        type: numbered-list
        items:
          - "**单元测试**：独立测试单个组件"
          - "**集成测试**：测试组件交互"
          - "**端到端测试**：测试关键用户流程（使用Cypress/Playwright）"
          - "**覆盖目标**：目标是80%的代码覆盖率"
          - "**测试结构**：Arrange-Act-Assert模式"
          - "**模拟外部依赖**：API调用、路由、状态管理"

  - id: environment-configuration
    title: 环境配置
    instruction: 根据所选框架列出所需的环境变量。显示框架的适当格式和命名约定。
    elicit: true

  - id: frontend-developer-standards
    title: 前端开发者标准
    sections:
      - id: critical-coding-rules
        title: 关键编码规则
        instruction: 列出防止常见AI错误的基本规则，包括通用规则和特定于框架的规则。
        elicit: true
      - id: quick-reference
        title: 快速参考
        instruction: |
          创建一个特定于框架的备忘单，包含：
          - 常用命令（开发服务器、构建、测试）
          - 关键导入模式
          - 文件命名约定
          - 特定于项目的模式和实用程序