@zeyue0329/xiaoma-cli 1.0.49 → 6.0.0-alpha.13

package/xiaoma-core/templates/front-end-architecture-tmpl.yaml

@@ -1,272 +0,0 @@
-template:
-  id: frontend-architecture-template-v2
-  name: 前端架构文档
-  version: 2.0
-  output:
-    format: markdown
-    filename: docs/ui-architecture.md
-    title: "{{project_name}} Frontend Architecture Document"
-
-workflow:
-  mode: interactive
-  elicitation: advanced-elicitation
-
-sections:
-  - id: template-framework-selection
-    title: 模板与框架选型
-    instruction: |
-      审阅所提供的文档，包括产品需求文档（PRD）、用户体验与界面规范（UX-UI Specification）和主架构文档。重点提取 AI 前端工具和开发者代理所需的技术实现细节。如果你无法找到且未被提供这些文档，请向用户索取。
-
-      在进行前端架构设计之前，请检查项目是否正在使用前端启动模板或现有代码库：
-
-      1. 审阅 PRD、主架构文档和头脑风暴简报，查找是否提及：
-         - 前端启动模板（例如：Create React App, Next.js, Vite, Vue CLI, Angular CLI 等）
-         - UI 套件或组件库启动器
-         - 被用作基础的现有前端项目
-         - 后台管理仪表盘模板或其他专用启动器
-         - 设计系统的实现
-
-      2. 如果提到了前端启动模板或现有项目：
-         - 要求用户通过以下方式之一提供访问权限：
-           - 启动模板的文档链接
-           - 上传/附加项目文件（适用于小型项目）
-           - 分享项目仓库的链接
-         - 分析该启动器/现有项目以了解：
-           - 预装的依赖项及其版本
-           - 文件夹结构和文件组织方式
-           - 内置组件和实用工具
-           - 样式方案（例如：CSS modules, 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: Store 结构
-        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 Modules, 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: 使用框架推荐的测试库，提供一个基本的组件测试模板。其中应包含渲染测试、用户交互测试和模拟（mocking）的示例。
-        type: code
-        language: typescript
-      - id: testing-best-practices
-        title: 测试最佳实践
-        type: numbered-list
-        items:
-          - "**单元测试**: 独立测试单个组件"
-          - "**集成测试**: 测试组件间的交互"
-          - "**端到端测试 (E2E Tests)**: 测试关键用户流程（使用 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: |
-          创建一个针对特定框架的速查表，包含以下内容：
-          - 常用命令（例如启动开发服务器、构建、测试）
-          - 关键的导入模式
-          - 文件命名约定
-          - 项目特定的模式和实用工具

package/xiaoma-core/templates/front-end-spec-tmpl.yaml

@@ -1,354 +0,0 @@
-template:
-  id: frontend-spec-template-v2
-  name: UI/UX 规范
-  version: 2.0
-  output:
-    format: markdown
-    filename: docs/front-end-spec.md
-    title: "{{project_name}} UI/UX Specification"
-
-workflow:
-  mode: 交互式
-  elicitation: 高级引导
-
-sections:
-  - id: introduction
-    title: 引言
-    instruction: |
-      审阅提供的项目简介、PRD 和任何用户研究等文档以收集背景信息。在开始编写规范之前，重点理解用户需求、痛点和期望的成果。
-
-      确立本文档的目标和范围。保留以下内容，但确保项目名称被正确替换。
-    content: |
-      本文档定义了 {{project_name}} 用户界面的用户体验目标、信息架构、用户流程和视觉设计规范。它将作为视觉设计和前端开发的基础，确保提供一个内聚且以用户为中心的体验。
-    sections:
-      - id: ux-goals-principles
-        title: 整体 UX 目标与原则
-        instruction: |
-          与用户合作，建立并记录以下内容。如果尚未定义，则引导一次讨论来确定：
-
-          1. 目标用户画像 - 从 PRD 中引导细节或确认现有画像
-          2. 关键可用性目标 - 理解用户眼中的成功是什么样的
-          3. 核心设计原则 - 建立 3-5 条指导原则
-        elicit: true
-        sections:
-          - id: user-personas
-            title: 目标用户画像
-            template: "{{persona_descriptions}}"
-            examples:
-              - "**高级用户 (Power User):** 需要高级功能和高效率的技术专业人员"
-              - "**普通用户 (Casual User):** 偶尔使用，优先考虑易用性和清晰指引的用户"
-              - "**管理员 (Administrator):** 需要控制和监督能力的系统管理人员"
-          - id: usability-goals
-            title: 可用性目标
-            template: "{{usability_goals}}"
-            examples:
-              - "易学性：新用户能在 5 分钟内完成核心任务"
-              - "使用效率：高级用户能以最少的点击次数完成频繁任务"
-              - "容错性：为破坏性操作提供清晰的验证和确认提示"
-              - "可记忆性：非频繁用户返回时无需重新学习"
-          - id: design-principles
-            title: 设计原则
-            template: "{{design_principles}}"
-            type: numbered-list
-            examples:
-              - "**清晰胜于新奇** - 优先考虑清晰的沟通，而非美学上的创新"
-              - "**渐进式披露** - 在需要时，仅展示必要的信息"
-              - "**模式一致** - 在整个应用中使用用户熟悉的 UI 模式"
-              - "**即时反馈** - 每个操作都应有清晰、即时的响应"
-              - "**默认可访问** - 从一开始就为所有用户设计"
-      - id: changelog
-        title: 变更日志
-        type: table
-        columns: [日期, 版本, 描述, 作者]
-        instruction: 跟踪文档版本和变更
-
-  - id: information-architecture
-    title: 信息架构 (IA)
-    instruction: |
-      与用户合作，创建一个全面的信息架构：
-
-      1. 构建一个站点地图或屏幕清单，展示所有主要区域
-      2. 定义导航结构（主导航、次导航、面包屑导航）
-      3. 使用 Mermaid 图表进行可视化表示
-      4. 考虑用户心智模型和预期的信息分组
-    elicit: true
-    sections:
-      - id: sitemap
-        title: 站点地图 / 屏幕清单
-        type: mermaid
-        mermaid_type: graph
-        template: "{{sitemap_diagram}}"
-        examples:
-          - |
-            graph TD
-                A[Homepage] --> B[Dashboard]
-                A --> C[Products]
-                A --> D[Account]
-                B --> B1[Analytics]
-                B --> B2[Recent Activity]
-                C --> C1[Browse]
-                C --> C2[Search]
-                C --> C3[Product Details]
-                D --> D1[Profile]
-                D --> D2[Settings]
-                D --> D3[Billing]
-      - id: navigation-structure
-        title: 导航结构
-        template: |
-          **主导航:** {{primary_nav_description}}
-
-          **次导航:** {{secondary_nav_description}}
-
-          **面包屑策略:** {{breadcrumb_strategy}}
-
-  - id: user-flows
-    title: 用户流程
-    instruction: |
-      针对 PRD 中识别的每个关键用户任务：
-
-      1. 清晰地定义用户目标
-      2. 规划出所有步骤，包括决策点
-      3. 考虑边缘情况和错误状态
-      4. 使用 Mermaid 流程图以保证清晰
-      5. 如果存在更详细的流程图，可链接到外部工具 (如 Figma/Miro)
-
-      为每个主要流程创建子章节。
-    elicit: true
-    repeatable: true
-    sections:
-      - id: flow
-        title: "{{flow_name}}"
-        template: |
-          **用户目标:** {{flow_goal}}
-
-          **入口点:** {{entry_points}}
-
-          **成功标准:** {{success_criteria}}
-        sections:
-          - id: flow-diagram
-            title: 流程图
-            type: mermaid
-            mermaid_type: graph
-            template: "{{flow_diagram}}"
-          - id: edge-cases
-            title: "边缘情况与错误处理:"
-            type: bullet-list
-            template: "- {{edge_case}}"
-          - id: notes
-            template: "**备注:** {{flow_notes}}"
-
-  - id: wireframes-mockups
-    title: 线框图与模型
-    instruction: |
-      明确详细的视觉设计将在何处创建（如 Figma、Sketch 等）以及如何引用它们。如果需要低保真线框图，可协助构思关键屏幕的布局。
-    elicit: true
-    sections:
-      - id: design-files
-        template: "**主要设计文件:** {{design_tool_link}}"
-      - id: key-screen-layouts
-        title: 关键屏幕布局
-        repeatable: true
-        sections:
-          - id: screen
-            title: "{{screen_name}}"
-            template: |
-              **目的:** {{screen_purpose}}
-
-              **关键元素:**
-              - {{element_1}}
-              - {{element_2}}
-              - {{element_3}}
-
-              **交互说明:** {{interaction_notes}}
-
-              **设计文件引用:** {{specific_frame_link}}
-
-  - id: component-library
-    title: 组件库 / 设计系统
-    instruction: |
-      讨论是使用现有设计系统还是创建新系统。如果创建新的，需确定基础组件及其关键状态。注意：详细的技术规范属于前端架构的范畴。
-    elicit: true
-    sections:
-      - id: design-system-approach
-        template: "**设计系统方案:** {{design_system_approach}}"
-      - id: core-components
-        title: 核心组件
-        repeatable: true
-        sections:
-          - id: component
-            title: "{{component_name}}"
-            template: |
-              **目的:** {{component_purpose}}
-
-              **变体:** {{component_variants}}
-
-              **状态:** {{component_states}}
-
-              **使用指南:** {{usage_guidelines}}
-
-  - id: branding-style
-    title: 品牌与风格指南
-    instruction: 链接到现有风格指南或定义关键品牌元素。如果存在公司品牌指南，请确保与其保持一致。
-    elicit: true
-    sections:
-      - id: visual-identity
-        title: 视觉识别
-        template: "**品牌指南:** {{brand_guidelines_link}}"
-      - id: color-palette
-        title: 调色板
-        type: table
-        columns: ["颜色类型", "十六进制代码", "用途"]
-        rows:
-          - ["主色", "{{primary_color}}", "{{primary_usage}}"]
-          - ["次色", "{{secondary_color}}", "{{secondary_usage}}"]
-          - ["强调色", "{{accent_color}}", "{{accent_usage}}"]
-          - ["成功色", "{{success_color}}", "用于积极反馈、确认"]
-          - ["警告色", "{{warning_color}}", "用于提醒、重要通知"]
-          - ["错误色", "{{error_color}}", "用于错误提示、破坏性操作"]
-          - ["中性色", "{{neutral_colors}}", "用于文本、边框、背景"]
-      - id: typography
-        title: 字体排印
-        sections:
-          - id: font-families
-            title: 字体族
-            template: |
-              - **主字体:** {{primary_font}}
-              - **次字体:** {{secondary_font}}
-              - **等宽字体:** {{mono_font}}
-          - id: type-scale
-            title: 字号规范
-            type: table
-            columns: ["元素", "字号", "字重", "行高"]
-            rows:
-              - ["H1", "{{h1_size}}", "{{h1_weight}}", "{{h1_line}}"]
-              - ["H2", "{{h2_size}}", "{{h2_weight}}", "{{h2_line}}"]
-              - ["H3", "{{h3_size}}", "{{h3_weight}}", "{{h3_line}}"]
-              - ["正文", "{{body_size}}", "{{body_weight}}", "{{body_line}}"]
-              - ["小号", "{{small_size}}", "{{small_weight}}", "{{small_line}}"]
-      - id: iconography
-        title: 图标系统
-        template: |
-          **图标库:** {{icon_library}}
-
-          **使用指南:** {{icon_guidelines}}
-      - id: spacing-layout
-        title: 间距与布局
-        template: |
-          **网格系统:** {{grid_system}}
-
-          **间距规范:** {{spacing_scale}}
-
-  - id: accessibility
-    title: 无障碍性要求
-    instruction: 根据目标合规级别和用户需求，定义具体的无障碍性要求。要求应全面且切合实际。
-    elicit: true
-    sections:
-      - id: compliance-target
-        title: 合规目标
-        template: "**标准:** {{compliance_standard}}"
-      - id: key-requirements
-        title: 关键要求
-        template: |
-          **视觉:**
-          - 颜色对比度: {{contrast_requirements}}
-          - 焦点指示器: {{focus_requirements}}
-          - 文本大小: {{text_requirements}}
-
-          **交互:**
-          - 键盘导航: {{keyboard_requirements}}
-          - 屏幕阅读器支持: {{screen_reader_requirements}}
-          - 触摸目标: {{touch_requirements}}
-
-          **内容:**
-          - 替代文本: {{alt_text_requirements}}
-          - 标题结构: {{heading_requirements}}
-          - 表单标签: {{form_requirements}}
-      - id: testing-strategy
-        title: 测试策略
-        template: "{{accessibility_testing}}"
-
-  - id: responsiveness
-    title: 响应式策略
-    instruction: 定义不同设备尺寸的断点和适配策略。需同时考虑技术约束和用户场景。
-    elicit: true
-    sections:
-      - id: breakpoints
-        title: 断点
-        type: table
-        columns: ["断点", "最小宽度", "最大宽度", "目标设备"]
-        rows:
-          - ["移动端", "{{mobile_min}}", "{{mobile_max}}", "{{mobile_devices}}"]
-          - ["平板", "{{tablet_min}}", "{{tablet_max}}", "{{tablet_devices}}"]
-          - [
-              "桌面端",
-              "{{desktop_min}}",
-              "{{desktop_max}}",
-              "{{desktop_devices}}",
-            ]
-          - ["宽屏", "{{wide_min}}", "-", "{{wide_devices}}"]
-      - id: adaptation-patterns
-        title: 适配模式
-        template: |
-          **布局变更:** {{layout_adaptations}}
-
-          **导航变更:** {{nav_adaptations}}
-
-          **内容优先级:** {{content_adaptations}}
-
-          **交互变更:** {{interaction_adaptations}}
-
-  - id: animation
-    title: 动画与微交互
-    instruction: 定义动效设计原则和关键交互。注意性能和无障碍性。
-    elicit: true
-    sections:
-      - id: motion-principles
-        title: 动效原则
-        template: "{{motion_principles}}"
-      - id: key-animations
-        title: 关键动画
-        repeatable: true
-        template: "- **{{animation_name}}:** {{animation_description}} (持续时间: {{duration}}, 缓动函数: {{easing}})"
-
-  - id: performance
-    title: 性能考量
-    instruction: 定义影响 UX 设计决策的性能目标和策略。
-    sections:
-      - id: performance-goals
-        title: 性能目标
-        template: |
-          - **页面加载:** {{load_time_goal}}
-          - **交互响应:** {{interaction_goal}}
-          - **动画帧率:** {{animation_goal}}
-      - id: design-strategies
-        title: 设计策略
-        template: "{{performance_strategies}}"
-
-  - id: next-steps
-    title: 后续步骤
-    instruction: |
-      完成 UI/UX 规范后：
-
-      1. 建议与利益相关者进行评审
-      2. 建议在设计工具中创建/更新视觉设计
-      3. 准备移交给设计架构师以进行前端架构设计
-      4. 记录任何悬而未决的问题或需要作出的决策
-    sections:
-      - id: immediate-actions
-        title: 立即行动
-        type: numbered-list
-        template: "{{action}}"
-      - id: design-handoff-checklist
-        title: 设计移交清单
-        type: checklist
-        items:
-          - "所有用户流程已文档化"
-          - "组件清单已完成"
-          - "无障碍性要求已定义"
-          - "响应式策略已明确"
-          - "品牌指南已融入"
-          - "性能目标已确立"
-
-  - id: checklist-results
-    title: 清单检查结果
-    instruction: 如果存在 UI/UX 清单，请用其检查本文档并在此处报告结果。