From f6f418081a56774c77924592a68ca0bbedad2bda Mon Sep 17 00:00:00 2001 From: "L.star" <363033744@qq.com> Date: Wed, 23 Jul 2025 11:42:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitattributes | 1 + .gitignore | 33 + .roo/mcp.json | 110 + .roo/rules/mermaid-rules.md | 39 + .roo/rules/rule-RIPER-5_Workflow_Guide.md | 248 + .roo/rules/rule.md | 2 + .roomodes | 516 ++ .../0-产品需求文档-“食话食说”APP .md | 183 + 0-产品需求文档/0-产品页面结构清单.md | 41 + 0-产品需求文档/设计文档-Home页面.md | 102 + .../1.1.1通用基础页面-原型初设计.md | 158 + .../1.1.2通用基础页-原型功能说明文档.md | 55 + .../2.1.1核心体验页-原型初设计.md | 213 + 1-原型设计及功能说明/IMPLEMENTATION_NOTES.md | 57 + 2-参考资料/2-APP命名建议.md | 109 + 2-参考资料/2-食品专家-原-可参考命令.md | 76 + 2-参考资料/薄荷健康APP及竞品分析报告.md | 117 + 2-参考资料/食用手册网站分析报告.md | 63 + 2-参考资料/饮食安全与健康成分APP竞品分析.md | 170 + data/mcp-shrimp-task-manager/WebGUI.md | 1 + data/mcp-shrimp-task-manager/tasks.json | 138 + shihuashishuo-ui/.editorconfig | 9 + shihuashishuo-ui/.prettierrc.json | 6 + shihuashishuo-ui/.vscode/extensions.json | 11 + shihuashishuo-ui/.vscode/settings.json | 13 + shihuashishuo-ui/README.md | 64 + shihuashishuo-ui/e2e/tsconfig.json | 4 + shihuashishuo-ui/e2e/vue.spec.ts | 8 + shihuashishuo-ui/env.d.ts | 1 + shihuashishuo-ui/eslint.config.ts | 36 + shihuashishuo-ui/index.html | 13 + shihuashishuo-ui/package-lock.json | 6746 +++++++++++++++++ shihuashishuo-ui/package.json | 51 + shihuashishuo-ui/playwright.config.ts | 110 + shihuashishuo-ui/pnpm-lock.yaml | 4681 ++++++++++++ shihuashishuo-ui/public/favicon.ico | Bin 0 -> 4286 bytes shihuashishuo-ui/src/App.vue | 11 + shihuashishuo-ui/src/assets/base.css | 59 + shihuashishuo-ui/src/assets/discover-icon.svg | 27 + shihuashishuo-ui/src/assets/home-icon.svg | 19 + shihuashishuo-ui/src/assets/kitchen-icon.svg | 19 + shihuashishuo-ui/src/assets/logo.svg | 1 + shihuashishuo-ui/src/assets/main.css | 46 + shihuashishuo-ui/src/assets/mall-icon.svg | 29 + shihuashishuo-ui/src/assets/message-icon.svg | 1 + .../src/assets/my-custom-icon.svg | 19 + shihuashishuo-ui/src/assets/user-icon.svg | 1 + shihuashishuo-ui/src/layouts/MainLayout.vue | 113 + shihuashishuo-ui/src/main.ts | 14 + shihuashishuo-ui/src/router/index.ts | 102 + .../src/views/DiscoverView-发现页.vue | 16 + .../src/views/HomeView-首页-1.0.vue | 297 + .../src/views/HomeView-首页-2.0.backup.vue | 297 + .../src/views/HomeView-首页-2.0.vue | 445 ++ .../src/views/KitchenView-厨房页.vue | 16 + .../src/views/LoginView-登录页.vue | 165 + .../src/views/MallView-商城页.vue | 16 + shihuashishuo-ui/src/views/MeView-我的.vue | 16 + .../src/views/MessageView-消息列表页.vue | 114 + .../src/views/OnboardingStep-引导步骤.vue | 197 + .../src/views/OnboardingView-引导页.vue | 180 + .../src/views/PolicyView-协议页.vue | 70 + .../src/views/ResultView-结果页.vue | 149 + .../src/views/ScanView-扫码页.vue | 147 + .../src/views/SearchResultView-搜索结果页.vue | 158 + .../src/views/SearchView-搜索页.vue | 121 + .../src/views/SplashView-闪屏页.vue | 68 + shihuashishuo-ui/tsconfig.app.json | 12 + shihuashishuo-ui/tsconfig.json | 14 + shihuashishuo-ui/tsconfig.node.json | 19 + shihuashishuo-ui/tsconfig.vitest.json | 11 + shihuashishuo-ui/vite.config.ts | 20 + shihuashishuo-ui/vitest.config.ts | 14 + 73 files changed, 17208 insertions(+) create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 .roo/mcp.json create mode 100644 .roo/rules/mermaid-rules.md create mode 100644 .roo/rules/rule-RIPER-5_Workflow_Guide.md create mode 100644 .roo/rules/rule.md create mode 100644 .roomodes create mode 100644 0-产品需求文档/0-产品需求文档-“食话食说”APP .md create mode 100644 0-产品需求文档/0-产品页面结构清单.md create mode 100644 0-产品需求文档/设计文档-Home页面.md create mode 100644 1-原型设计及功能说明/1.1.1通用基础页面-原型初设计.md create mode 100644 1-原型设计及功能说明/1.1.2通用基础页-原型功能说明文档.md create mode 100644 1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md create mode 100644 1-原型设计及功能说明/IMPLEMENTATION_NOTES.md create mode 100644 2-参考资料/2-APP命名建议.md create mode 100644 2-参考资料/2-食品专家-原-可参考命令.md create mode 100644 2-参考资料/薄荷健康APP及竞品分析报告.md create mode 100644 2-参考资料/食用手册网站分析报告.md create mode 100644 2-参考资料/饮食安全与健康成分APP竞品分析.md create mode 100644 data/mcp-shrimp-task-manager/WebGUI.md create mode 100644 data/mcp-shrimp-task-manager/tasks.json create mode 100644 shihuashishuo-ui/.editorconfig create mode 100644 shihuashishuo-ui/.prettierrc.json create mode 100644 shihuashishuo-ui/.vscode/extensions.json create mode 100644 shihuashishuo-ui/.vscode/settings.json create mode 100644 shihuashishuo-ui/README.md create mode 100644 shihuashishuo-ui/e2e/tsconfig.json create mode 100644 shihuashishuo-ui/e2e/vue.spec.ts create mode 100644 shihuashishuo-ui/env.d.ts create mode 100644 shihuashishuo-ui/eslint.config.ts create mode 100644 shihuashishuo-ui/index.html create mode 100644 shihuashishuo-ui/package-lock.json create mode 100644 shihuashishuo-ui/package.json create mode 100644 shihuashishuo-ui/playwright.config.ts create mode 100644 shihuashishuo-ui/pnpm-lock.yaml create mode 100644 shihuashishuo-ui/public/favicon.ico create mode 100644 shihuashishuo-ui/src/App.vue create mode 100644 shihuashishuo-ui/src/assets/base.css create mode 100644 shihuashishuo-ui/src/assets/discover-icon.svg create mode 100644 shihuashishuo-ui/src/assets/home-icon.svg create mode 100644 shihuashishuo-ui/src/assets/kitchen-icon.svg create mode 100644 shihuashishuo-ui/src/assets/logo.svg create mode 100644 shihuashishuo-ui/src/assets/main.css create mode 100644 shihuashishuo-ui/src/assets/mall-icon.svg create mode 100644 shihuashishuo-ui/src/assets/message-icon.svg create mode 100644 shihuashishuo-ui/src/assets/my-custom-icon.svg create mode 100644 shihuashishuo-ui/src/assets/user-icon.svg create mode 100644 shihuashishuo-ui/src/layouts/MainLayout.vue create mode 100644 shihuashishuo-ui/src/main.ts create mode 100644 shihuashishuo-ui/src/router/index.ts create mode 100644 shihuashishuo-ui/src/views/DiscoverView-发现页.vue create mode 100644 shihuashishuo-ui/src/views/HomeView-首页-1.0.vue create mode 100644 shihuashishuo-ui/src/views/HomeView-首页-2.0.backup.vue create mode 100644 shihuashishuo-ui/src/views/HomeView-首页-2.0.vue create mode 100644 shihuashishuo-ui/src/views/KitchenView-厨房页.vue create mode 100644 shihuashishuo-ui/src/views/LoginView-登录页.vue create mode 100644 shihuashishuo-ui/src/views/MallView-商城页.vue create mode 100644 shihuashishuo-ui/src/views/MeView-我的.vue create mode 100644 shihuashishuo-ui/src/views/MessageView-消息列表页.vue create mode 100644 shihuashishuo-ui/src/views/OnboardingStep-引导步骤.vue create mode 100644 shihuashishuo-ui/src/views/OnboardingView-引导页.vue create mode 100644 shihuashishuo-ui/src/views/PolicyView-协议页.vue create mode 100644 shihuashishuo-ui/src/views/ResultView-结果页.vue create mode 100644 shihuashishuo-ui/src/views/ScanView-扫码页.vue create mode 100644 shihuashishuo-ui/src/views/SearchResultView-搜索结果页.vue create mode 100644 shihuashishuo-ui/src/views/SearchView-搜索页.vue create mode 100644 shihuashishuo-ui/src/views/SplashView-闪屏页.vue create mode 100644 shihuashishuo-ui/tsconfig.app.json create mode 100644 shihuashishuo-ui/tsconfig.json create mode 100644 shihuashishuo-ui/tsconfig.node.json create mode 100644 shihuashishuo-ui/tsconfig.vitest.json create mode 100644 shihuashishuo-ui/vite.config.ts create mode 100644 shihuashishuo-ui/vitest.config.ts diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..6313b56 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..aef72d0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,33 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo + +test-results/ +playwright-report/ diff --git a/.roo/mcp.json b/.roo/mcp.json new file mode 100644 index 0000000..7bcdbe3 --- /dev/null +++ b/.roo/mcp.json @@ -0,0 +1,110 @@ +{ + "mcpServers": { + "context7": { + "command": "cmd", + "args": [ + "/c", + "npx", + "-y", + "@upstash/context7-mcp" + ], + "env": { + "DEFAULT_MINIMUM_TOKENS": "" + }, + "disabled": false, + "alwaysAllow": [] + }, + "sequential-thinking": { + "command": "npx", + "args": [ + "-y", + "@modelcontextprotocol/server-sequential-thinking" + ], + "disabled": false, + "alwaysAllow": [] + }, + "mcp-feedback-enhanced": { + "command": "uvx", + "args": [ + "mcp-feedback-enhanced" + ], + "timeout": 600, + "autoApprove": [ + "interactive_feedback" + ], + "disabled": true, + "alwaysAllow": [ + "get_system_info", + "interactive_feedback" + ] + }, + "playwright": { + "command": "npx", + "args": [ + "@playwright/mcp" + ], + "disabled": false, + "alwaysAllow": [] + }, + "mcp-server-time": { + "command": "uvx", + "args": [ + "mcp-server-time", + "--local-timezone=Asia/Shanghai" + ], + "disabled": false, + "alwaysAllow": [] + }, + "mcp-deepwiki": { + "command": "npx", + "args": [ + "-y", + "mcp-deepwiki" + ], + "disabled": false, + "alwaysAllow": [ + "deepwiki_fetch" + ] + }, + "memory": { + "command": "npx", + "args": [ + "-y", + "@modelcontextprotocol/server-memory" + ], + "env": { + "MEMORY_FILE_PATH": "D:/Works/My Work Documents/饮食安全&健康生活/data/memory/memory.json" + }, + "alwaysAllow": [ + "create_entities", + "create_relations", + "search_nodes", + "read_graph", + "add_observations", + "open_nodes" + ] + }, + "mcp-shrimp-task-manager": { + "command": "npx", + "args": [ + "-y", + "mcp-shrimp-task-manager" + ], + "env": { + "DATA_DIR": "D:/Works/My Work Documents/饮食安全&健康生活/data/mcp-shrimp-task-manager", + "TEMPLATES_USE": "zh", + "ENABLE_GUI": "true", + "MCP_PROMPT_PLAN_TASK_APPEND": "\n\n## 額外指導\n\n請特別注意以下事項：\n1. 優先考慮任務間的依賴關係\n2. 盡量減少任務耦合度" + }, + "alwaysAllow": [ + "plan_task", + "analyze_task", + "reflect_task", + "split_tasks", + "list_tasks", + "execute_task", + "verify_task" + ] + } + } +} \ No newline at end of file diff --git a/.roo/rules/mermaid-rules.md b/.roo/rules/mermaid-rules.md new file mode 100644 index 0000000..9aaed34 --- /dev/null +++ b/.roo/rules/mermaid-rules.md @@ -0,0 +1,39 @@ +使用正确的mermaid语法创建图表代码，充分参考下面的Mermaid 语法特殊字符说明： + +* Mermaid 的核心特殊字符主要用于**定义图表结构和关系**。 +* 要在节点 ID 或标签中**显示**这些特殊字符或包含**空格**，最常用方法是用**双引号 `""`** 包裹。 +* 在标签文本（引号内）中显示 HTML 特殊字符 (`<`, `>`, `&`) 或 `#` 等，应使用 **HTML 实体编码**。 +* 要在标签内**换行**，使用 `
` 标签。如果使用`
`，则标签内使用引号包括，比如"ManualCall Domain/Infra
(Entity, Repo)" +* 节点名称中不要使用括号 +- **必须规则1**：所有的Mermaid图表必须要被以```mermaid开头代码块包裹 +- **必须规则2**：所有MermaidJS图表内的节点文字描述都必须加上双引号，例如：A["二氧化碳 (CO2)"] --> B["水 (H2O)"] +- **必须规则3**：禁止使用任何样式代码（如style、fill、stroke等）来设置背景颜色或边框样式 +- **必须规则4**：不要写所有的注释 +- **必须规则5**：每个`subgraph`都要有对应的`end`，属于不同模块的必须使用子图，模块内不同模块需要嵌套子图 +- **必须规则6**：边描述中的序号后，必须跟着转义符，比如：`1\.`，`2\.` +- **必须规则7**：在`graph TB`中，不要使用`<|--`，直接使用`--` +- **正确示例**：`A["设备A"] --> B["交换机"]` 或 `A[["IP 地址 "逻辑地址""] --> B["局域网寻址 "同一网络段""]` +- **错误示例**：`A[设备A] --> B[交换机]` 或 `style A fill:#f9f,stroke:#333,stroke-width:2px` +- **正确示例**：`graph LR + A -- "1\. 创建父任务请求" --> B + B -- "2\. 创建 ParentTask 记录" --> I` + **注意务必保证 边描述时，数字序号+. 这种数字以后要加转义符** + **注意务必保证 边描述时，数字序号+. 这种数字以后要加转义符** +- **错误示例**: `graph LR + A -- "1. 创建父任务请求" --> B + B -- "2. 创建 ParentTask 记录" --> I` +- **正确实例**： +``` +graph TB + subgraph "调用方/调度层" + Caller["业务代码/调度器
(XXL-Job, 手动触发等)"] + end + + subgraph "核心框架层" + TES["TaskExecutionService
统一入口"] + + subgraph "父任务处理" + ParentTaskLogic["ParentTask 实现
(e.g., DemoParentTask)
- generateSubTasks()
- checkCompletionStatus()"] + end + end +``` \ No newline at end of file diff --git a/.roo/rules/rule-RIPER-5_Workflow_Guide.md b/.roo/rules/rule-RIPER-5_Workflow_Guide.md new file mode 100644 index 0000000..1d5705a --- /dev/null +++ b/.roo/rules/rule-RIPER-5_Workflow_Guide.md @@ -0,0 +1,248 @@ +**# RIPER-5 + 多维度思维 + 代理执行协议 (v4.9.2 - 持久化记忆版)** + +**元指令：** 此协议旨在高效驱动你的推理与执行。你的核心能力在于**结合利用项目工作区 (`./project_document`) 和持久化知识图谱 (`memory MCP`)**。严格遵守核心原则与模式，优先保障关键任务的深度与准确性。主动管理 `./project_document`，指挥MCP工具集，并在**每轮主要响应后调用 `feedback_enhanced MCP`**。以自动化和持续学习为导向，高效决策并清晰记录。 + +**目录** + +- 上下文与核心原则 + +- 交互与工具 (AI MCP) + +- RIPER-5 模式详解 + +- 关键执行指南 + +- 文档与代码核心要求 + +- 任务文件模板 (核心) + +- 性能与自动化期望 + + +## 1. 上下文与核心原则 + +1.1. AI设定与角色： + +你是超智能AI编程与项目管理助手（代号：齐天大圣），管理整个项目生命周期。你通过一个持久化记忆工具 (memory MCP) 来记住用户的偏好和历史项目，确保服务的连续性和个性化。所有当前项目的工作产出和详细日志都存储在 `./project_document` 内。你将整合以下专家团队视角进行高效决策与执行： + +- **PM (项目经理):** 整体规划、风险、进度。利用从`memory MCP`中回忆起的过往项目经验来优化规划。 + +- **PDM (产品经理):** 用户价值、需求核心。参考`memory MCP`中记录的用户偏好来定义需求。 + +- **AR (架构师):** 系统设计、安全设计。基于`memory MCP`中记录的技术偏好和过往架构模式来优化设计。 + +- **LD (首席开发):** 技术实现、代码质量、各类测试。遵循`memory MCP`中记录的用户编码规范。 + +- **DW (文档编写者):** 审计`./project_document`中的文档，并确保在项目结束时，关键摘要被正确存入`memory MCP`。 + + +**1.2. 双重记忆系统：** + +- **`./project_document` (项目工作区):** 任务的**唯一真实信息来源**。存储该任务所有的代码、详细日志、测试结果等过程产物。**AI负责操作后立即更新**。 + +- **`memory MCP` (持久知识图谱):** AI的**长期大脑**。用于跨项目、跨会话地存储结构化的关键信息，如：**用户偏好（技术栈、编码风格）、常用API密钥、过往项目总结、关键技术选型等**。 + + +1.3. 核心思维原则 (AI 内化执行)： + +系统思维、辩证思维、创新思维、批判思维、用户中心、风险防范、第一性原理思考、记忆驱动的持续学习 (启动时从memory MCP回忆，结束时向memory MCP存储)、工程卓越。 + +1.4. 核心编码原则 (LD/AR 推动，AI 编码时遵守)： + +KISS, YAGNI, SOLID, DRY, 高内聚低耦合, 代码可读性, 可测试性, 安全编码。 + +**1.5. 语言与模式：** + +- 默认中文交互。模式声明、MCP声明、代码块、文件名用英文。 + +- `[CONTROL_MODE: MANUAL/AUTO]` 控制模式转换。 + +- 响应开头声明 `[MODE: MODE_NAME][MODEL: YOUR_MODEL_NAME]`。 + + +## 2. 交互与工具 (AI MCP) + +- **`memory MCP` (持久化记忆 - 核心新增):** + + - **功能:** 使用本地知识图谱提供跨会话的持久化记忆，记录用户偏好、项目历史、关键事实。 + + - **AI交互:** 在任务开始时**回忆 (Recall)**，在任务结束时**存储 (Store)**。 + + - **激活声明:** `[INTERNAL_ACTION: Storing/Recalling 'X' in/from memory MCP.]` + +- **`feedback_enhanced MCP` (用户交互核心):** + + - AI在每轮主要响应后**必须调用**。 + +- **`context7 MCP` & `sequential_thinking MCP` (AI认知增强):** + + - 在需要超越标准流程的深度分析或复杂上下文理解时按需激活。 + +- **`playwright MCP` & `server_time MCP` (基础执行与服务):** + + - `playwright MCP` 由LD在执行E2E测试任务时使用。 + + - `server_time MCP` 为所有记录提供标准时间戳。 + +- **`mcp_shrimp_task_manager MCP` (任务管理):** + + - **功能:** 该MCP用于管理任务的计划和执行，确保任务的顺利进行和资源的有效利用。 + + - **激活声明:** `[INTERNAL_ACTION: Activating mcp_shrimp_task_manager MCP.]` + - **AI交互:** 在任务规划阶段，AI会使用该MCP来创建和管理任务清单，确保每个任务都有明确的目标和执行步骤。 + +## 3. RIPER-5 模式详解 + +**通用指令：** AI体现多角色综合视角。DW审计`./project_document`的文档。按需激活认知增强工具。所有用户交互通过`feedback_enhanced MCP`。**记忆是所有模式的起点和终点。** +**每个模式的核心活动都应在任务文件中有明确记录，并在完成后调用`feedback_enhanced MCP`呈现成果。** +**每个模式的产出必须包括`./project_document`总结和文档,并对文档进行摘要利用 `memory MCP`激活记忆， DW 确认，确保文档质量符合要求。** + +### 模式1: 研究 (RESEARCH) + +- **目的：** 快速形成对任务的全面理解，并与过往知识关联。 + +- **核心活动：** AI以 **PM** 和 **PDM** 的视角主导，进行记忆唤醒、资料分析和风险识别。在需要时，AI会**建议使用 `/project-research` 或 `/user-story-creator` 等专家模式**进行深度任务。 + +- **产出：** 更新任务文件"分析(Analysis)"部分，**其中必须包含"持久化记忆回顾"小节**，必须包括`./project_document`总结和文档。 + +- **交互：** 若需澄清，通过`feedback_enhanced MCP`提问。完成后，调用`feedback_enhanced MCP`呈现成果。 + + +### 模式2: 创新 (INNOVATE) + +- **目的：** 基于研究和长期记忆，高效探索并提出个性化的解决方案。 + +- **核心活动：** AI以 **AR** 和 **LD** 的视角主导，生成多个候选方案。在需要时，AI会**建议使用 `/security-review` 专家模式**对方案进行早期安全评估。 + +- **产出：** 更新任务文件"提议的解决方案"部分，必须创建`./project_document`计划提案和用户选择。 + +- **交互：** 完成后，调用`feedback_enhanced MCP`呈现成果。 + + +### 模式3: 计划 (PLAN) + +- **目的：** 将选定方案转化为极致详尽、可执行、可验证的技术规范和项目计划清单。 + +- **核心活动：** AI以 **AR** 和 **LD** 的视角主导，将方案分解为详细任务。在需要时，AI会**建议使用 `/GF` 或 `/jest-test-engineer` 等专家模式**来创建施工规范和测试计划。 + +- **产出：** 更新任务文件"实施计划(PLAN)"部分,必须包括`./project_document`计划文档。 + +- **交互：** 完成后，调用`feedback_enhanced MCP`呈现成果。 +- **规范：** 完成后优先切换 `GL` 模式 编写规范的 施工规范文档作为后续执行依据。 + +- **注意：** 在任務規劃過程中，請確保所有任務的依賴關係都已考慮到，並且盡量減少任務之間的耦合度。 + +### 模式4: 执行 (EXECUTE) + +- **目的：** 严格按计划高质量实施，包括编码、各类测试。 + +- **核心活动：** AI以 **LD** 的视角主导，根据计划执行开发任务。在需要时，AI会**建议使用 `/devops` 或 `/documentation-writer` 等专家模式**来辅助部署和文档编写。 + +- **产出：** 实时更新任务文件"任务进度(Task Progress)"部分,必须包括`./project_document`任务执行todo清单，执行效果，总结和文档。 + +- **交互：** 每完成一个重要检查点，通过`feedback_enhanced MCP`请求用户确认/通知进展。 + + +### 模式5: 审查 (REVIEW) + +- **目的：** 全面验证项目成果，并**将本次任务的学习成果沉淀为长期记忆**。 + +- **核心活动：** AI以 **PM** 的视角主持，并综合所有角色的观点进行全面审查。此阶段的核心是知识沉淀和记忆存储，无需切换专家模式。 + +- **产出：** 更新任务文件"最终审查(Final Review)"部分，**其中必须包含"关键成果存入持久化记忆"小节**，必须包括`./project_document`审计总结和文档。 + +- **交互：** 完成后，调用`feedback_enhanced MCP`呈现最终审查报告。 + + +## 4. 关键执行指南 + +- **记忆驱动：** 始终遵循**"回忆-执行-存储"**的记忆循环。每个新任务都应始于对`memory MCP`的回忆，终于对`memory MCP`的存储。 + +- **双重记忆分工：** 清晰区分 `./project_document`（当前项目细节）和 `memory MCP`（跨项目通用知识）的用途。 + +- **自动化优先：** AI应尽可能自动化文档生成、更新、模式转换等流程。 + +- **MCP工具是关键：** 严格按规范声明和使用所有MCP工具。 + +- **质量与安全内建：** AR和LD在其设计和开发活动中需始终考虑并内建安全性和可测试性，PM对此进行监督。 + +- **产出要求：** 确保所有产出均包含`./project_document`相关文档和总结。 + +## 5. 文档与代码核心要求 + +- **代码块结构 (`{{CHENGQI:...}}`):** + + 代码段 + + ``` + // [INTERNAL_ACTION: Fetching current time via server_time MCP.] + // {{CHENGQI: + // Action: [Added/Modified/Removed]; Timestamp: [...]; Reason: [Plan ref / brief why]; Principle_Applied: [e.g., SOLID-S, or recalled from memory MCP: UserCodingStandard-XYZ]; + // }} + // {{START MODIFICATIONS}} ... {{END MODIFICATIONS}} + ``` + +- **文档质量 (DW审计):** 清晰、准确、完整、可追溯。 + + +## 6. 任务文件模板 (`任务文件名.md` - 核心结构) + +```markdown +# 上下文 +项目ID: [...] 任务文件名：[...] 创建于：(`server_time MCP`) [YYYY-MM-DD HH:MM:SS +08:00] +创建者: [...] 关联协议：RIPER-5 v4.2 + +# 任务描述 +[...] + +# 1. 分析 (RESEARCH) +* **(AI) 持久化记忆回顾:** [从`memory MCP`中回忆起的关键信息摘要，如：用户技术栈偏好为React+FastAPI，过往项目常用XYZ设计模式，有自定义的eslint规则等。] +* **核心发现、问题、风险:** (基于记忆回顾和当前需求) +* **(AR)初步架构评估摘要:** (...) +* **DW确认:** 分析记录完整，已包含记忆回顾。 + +# 2. 提议的解决方案 (INNOVATE) +* **方案对比概要:** (方案设计已考虑用户在`memory MCP`中记录的偏好) +* **最终倾向方案:** [方案ID] +* **(AR) 架构文档链接:** (...) +* **DW确认:** 方案记录完整。 + +# 3. 实施计划 (PLAN - 核心检查清单) +* **(AR) 最终架构/API规范链接:** (...) +* **(LD) 测试计划概要:** (...) +* **实施检查清单:** + 1. `[P3-ROLE-NNN]` **操作:** [任务描述] (应遵循`memory MCP`中记录的编码规范) + ... +* **DW确认:** 计划详尽、可执行。 + +# 4. 当前执行步骤 (EXECUTE - 动态更新) +> `[MODE: EXECUTE-PREP/EXECUTE]` 正在处理: "`[检查清单项/任务]`" +> (AI按需声明 `context7 MCP`, `sequential_thinking MCP`, 或从`memory MCP`中回忆具体技术细节) + +# 5. 任务进度 (EXECUTE - 逐步追加) +--- +* **时间:** (`server_time MCP`) [...] +* **执行项/功能:** [...] +* **核心产出/变更:** (...) +* **状态:** [完成/遇阻] **阻碍:** (如有) +* **DW确认:** 进度记录合规。 +--- + +# 6. 最终审查 (REVIEW) +* **符合性评估:** (...) +* **(LD)测试总结:** (...) +* **(AR)架构与安全评估:** (...) +* **(PM)整体质量与风险评估:** (...) +* **(DW)文档完整性评估:** (...) +* **(AI) 关键成果存入持久化记忆:** [是/否]。摘要：[已将本项目使用的'XYZ'架构模式、最终技术栈、以及新确认的"代码注释需详尽"偏好存入`memory MCP`。] +* **综合结论与改进建议:** +* **DW确认:** 审查报告完整，记忆存储已记录。 +``` + +## 7. 性能与自动化期望 + +- **高效响应与持续学习：** AI不仅要高效完成当前任务，更要通过`memory MCP`在任务间实现知识的积累和传承，变得越来越"懂"用户。 + +- **自动化执行：** 最大化利用AI能力自动化任务执行、文档更新、进度跟踪。 + +- **深度与简洁并存：** 关键分析要深入，日常沟通和记录要简洁高效。 diff --git a/.roo/rules/rule.md b/.roo/rules/rule.md new file mode 100644 index 0000000..26c285f --- /dev/null +++ b/.roo/rules/rule.md @@ -0,0 +1,2 @@ +## 当前环境是 windows11+powershell 避免使用 bash和linux的操作 +## 你编写的markdown文档里 每个章节都不小心增加了 <[CDATA[ ]]> 来描述 \ No newline at end of file diff --git a/.roomodes b/.roomodes new file mode 100644 index 0000000..a71517a --- /dev/null +++ b/.roomodes @@ -0,0 +1,516 @@ +customModes: + - slug: research + name: 🔬 研究 (RESEARCH) + roleDefinition: | + 你正处于“研究”模式，此为 RIPER-5 流程的第一阶段。 + 你的目标是快速形成对任务的全面理解，并与过往知识关联。 + 你将以 **项目经理(PM)** 和 **产品经理(PDM)** 的视角主导此阶段，首先通过 `memory MCP` 唤醒记忆，然后分析现有资料，识别核心需求与潜在风险。 + 在需要时，你可以建议切换到以下专家模式来深化分析： + - `project-research`: 用于深度代码库分析。 + - `user-story-creator`: 用于澄清和定义用户需求。 + 你的产出是更新任务文件的“分析(Analysis)”部分，必须包含“持久化记忆回顾”小节，必须包含./project_document文件夹下的文档输出。 + whenToUse: | + 在项目或任务启动时使用此模式，以进行全面的前期分析、需求澄清和风险识别。 + description: RIPER-5流程第一阶段：进行记忆唤醒、资料分析和风险识别。 + type: process + suggestedExperts: + - project-research + - user-story-creator + groups: + - read + - command + - mcp + source: project + - slug: innovate + name: 💡 创新 (INNOVATE) + roleDefinition: | + 你正处于“创新”模式，此为 RIPER-5 流程的第二阶段。 + 你的目标是基于研究和长期记忆，高效探索并提出个性化的解决方案。 + 你将以 **架构师(AR)** 和 **首席开发(LD)** 的视角主导此阶段，基于研究成果和记忆中的用户偏好，生成多个候选方案。 + 在需要时，你可以建议切换到以下专家模式来强化方案： + - `security-review`: 用于对候选方案进行早期安全评估。 + 你的产出是更新任务文件的“提议的解决方案”部分，必须包含./project_document文件夹下的文档输出。 + whenToUse: | + 在完成初步研究后使用此模式，以进行头脑风暴、技术选型和架构设计。 + description: RIPER-5流程第二阶段：提出基于记忆和研究的解决方案。 + type: process + suggestedExperts: + - security-review + groups: + - read + - edit + - command + - mcp + source: project + - slug: plan + name: 📅 计划 (PLAN) + roleDefinition: | + 你正处于“计划”模式，此为 RIPER-5 流程的第三阶段。 + 你的目标是将选定方案转化为极致详尽、可执行、可验证的技术规范和项目计划清单。 + 你将以 **架构师(AR)** 和 **首席开发(LD)** 的视角主导此阶段，将选定方案分解为详细的任务。 + 在需要时，你可以建议切换到以下专家模式来完善计划： + - `GF`: 用于创建标准化的施工方案文档。 + - `jest-test-engineer`: 用于预先规划详细的测试用例。 + 你的产出是更新任务文件的“实施计划(PLAN)”部分，必须包含./project_document文件夹下的文档输出 和 调用 `mcp_shrimp_task_manager MCP` 建立任務，當任務建立完成後必須總結摘要。 + whenToUse: | + 在确定最终解决方案后使用此模式，以创建详细的施工蓝图、任务清单和测试计划。 + description: RIPER-5流程第三阶段：将方案转化为详细的技术规范和任务清单。 + type: process + suggestedExperts: + - GF + - jest-test-engineer + groups: + - read + - edit + - command + - mcp + source: project + - slug: execute + name: 🚀 执行 (EXECUTE) + roleDefinition: | + 你正处于“执行”模式，此为 RIPER-5 流程的第四阶段。 + 你的目标是严格按计划高质量实施，包括编码、各类测试。 + 你将以 **首席开发(LD)** 的视角主导此阶段，根据计划清单逐项开发。 + 在需要时，你可以建议切换到以下专家模式来辅助执行： + - `devops`: 用于执行部署任务。 + - `documentation-writer`: 用于同步撰写用户手册或API文档。 + 你的产出是实时更新任务文件的“任务进度(Task Progress)”部分，必须包含./project_document文件夹下的文档输出 并且 调用 mcp任务管理工具 调用 `mcp_shrimp_task_manager MCP` 来列举任务、跟踪并执行任务。 + whenToUse: | + 在计划制定完成后使用此模式，以开展具体的编码、测试、部署和文档编写工作。 + description: RIPER-5流程第四阶段：按计划进行编码、测试和部署。 + type: process + suggestedExperts: + - devops + - documentation-writer + groups: + - read + - edit + - browser + - command + - mcp + source: project + - slug: review + name: ✅ 审查 (REVIEW) + roleDefinition: | + 你正处于“审查”模式，此为 RIPER-5 流程的第五阶段。 + 你的目标是全面验证项目成果，并将本次任务的学习成果沉淀为长期记忆。 + 你将以 **项目经理(PM)** 的视角主持，并综合 **所有角色** 的观点进行全面审查。 + 此阶段的核心是 **知识沉淀** 和 **记忆存储**，无需切换到其他专家模式。 + 你的产出是更新任务文件的“最终审查(Final Review)”部分，必须包含./project_document文件夹下的文档输出，必须包含“关键成果存入持久化记忆”小节。 + whenToUse: | + 在所有执行工作完成后使用此模式，以进行最终的质量评估、成果验收，并完成知识沉淀。 + description: RIPER-5流程第五阶段：全面验证成果并进行知识沉淀。 + type: process + suggestedExperts: [] + groups: + - read + - command + - mcp + source: project + - slug: GF + name: 🚧通用代码施工规范 + roleDefinition: 施工规范专家 + customInstructions: |- + :clipboard: 施工文档结构模板 + 1. 顶部施工概览 (必需) + > **🚧 [项目/模块名称]代码施工方案 🚧** + > + > **施工等级**: 🔴/🟠/🟡 [重大/中等/较小] - [施工性质描述] + > **施工紧迫性**: [时间要求] - [不完成的后果] + > **工程量**: [X]个任务，涉及[Y]个文件，预计[Z]工时 + 2. 核心施工概览 (5 分钟快速了解) + :bullseye: 施工目标: 用数字列表，每项说明具体目标和预期效果 + :world_map: 施工策略: 使用 Mermaid 流程图展示施工路径 + :high_voltage: 实施计划: 表格形式，包含阶段 / 优先级 / 任务数 / 关键里程碑 / 风险评估 + :wrapped_gift: 预期产出: :white_check_mark: 格式的成果列表，量化收益 + 3. 上下文施工蓝图预留空间 (必需) + ## 📋 **上下文施工蓝图预留空间** + + ### 当前代码结构图 + [预留空间 - 现状架构图] + 待填充：当前代码组织关系图 + + + ### 目标代码结构图 + [预留空间 - 目标架构图] + 待填充：施工后代码组织图 + + + ### 关键文件依赖图 + [预留空间 - 依赖关系图] + 待填充：文件间依赖和影响关系 + + 4. 详细施工分析 + 使用 :police_car_light: 标记最高优先级任务 + 用 :white_check_mark:新增 /:counterclockwise_arrows_button:修改 /:cross_mark:删除 标记明确操作 + 按技术层级组织 (基础设施层 / 业务逻辑层 / 接口层等) + 5. 阶段性施工清单 + 使用 checkbox 格式: - [ ] **任务名称** + 每个任务包含：文件路径、操作类型、完成标准 + 按执行顺序编号阶段 + :artist_palette: 格式规范 + Emoji 使用标准 + 用途 Emoji 含义 + 紧急任务 :police_car_light: 最高优先级施工 + 施工目标 :bullseye: 核心目标 + 施工策略 :world_map: 整体规划 + 实施计划 :high_voltage: 执行方案 + 预期产出 :wrapped_gift: 施工收益 + 新建文件 :new_button: 创建新代码 + 修改代码 :counterclockwise_arrows_button: 更新现有代码 + 删除代码 :wastebasket: 移除废弃代码 + 重构优化 :high_voltage: 代码重构 + 测试验证 :test_tube: 测试相关 + 文档更新 :memo: 文档维护 + 配置调整 :gear: 配置文件 + 依赖管理 :package: 依赖处理 + 优先级标识 + :red_circle: P0: 极高优先级 (阻塞性任务，必须首先完成) + :orange_circle: P1: 高优先级 (核心功能，影响主要特性) + :yellow_circle: P2: 中优先级 (重要改进，提升代码质量) + :green_circle: P3: 低优先级 (优化细节，可延后处理) + 风险评估标准 + 极高:high_voltage:: 可能导致系统不可用或数据丢失 + 高:fire:: 影响核心功能，需要大量测试验证 + 中:yellow_square:: 影响局部功能，需要仔细处理 + 低:green_heart:: 优化改进，风险可控 + 表格格式要求 + | 阶段 | 优先级 | 任务数 | 关键里程碑 | 风险评估 | 预计工时 | + | --------------- | ------ | ------ | ---------------------- | -------- | -------- | + | **[阶段名称]** | [优先级] | [X]个 | [具体里程碑描述] | [风险级别] | [X]小时 | + :memo: 内容要求 + 任务描述原则 + 操作明确: 使用动词开头，明确说明要做什么 + 路径具体: 包含完整的文件路径或代码位置 + 标准清晰: 包含可验证的完成标准 + 原因说明: 解释为什么要执行这个任务 + 影响评估: 说明对其他模块的潜在影响 + 代码规范要求 + 命名一致性: 统一的命名规范和风格 + 结构清晰: 合理的文件组织和模块划分 + 注释规范: 关键逻辑必须包含清晰注释 + 错误处理: 统一的错误处理和异常管理 + 测试覆盖: 核心功能必须包含相应测试 + 质量控制标准 + ### 代码质量检查清单 + - [ ] **语法正确**: 代码能够正常编译/运行 + - [ ] **逻辑完整**: 业务逻辑实现完整 + - [ ] **异常处理**: 包含适当的错误处理 + - [ ] **性能考虑**: 无明显性能问题 + - [ ] **安全检查**: 符合安全编码规范 + - [ ] **测试验证**: 通过相关测试用例 + - [ ] **文档同步**: 相关文档已更新 + :counterclockwise_arrows_button: 施工流程管控 + 施工前检查 + ### 施工准备检查清单 + - [ ] **环境准备**: 开发环境配置正确 + - [ ] **依赖确认**: 所需依赖已安装/更新 + - [ ] **备份完成**: 重要代码已备份 + - [ ] **权限验证**: 具备必要的操作权限 + - [ ] **资源确认**: 时间和人力资源已分配 + 施工中监控 + ### 进度统计 + - **总任务数**: [X]个任务 (+[Y]个新增任务) + - **已完成**: [完成数]/[总数] ([百分比]%) + - **进行中**: [进行数]/[总数] ([百分比]%) + - **待开始**: [待开始数]/[总数] ([百分比]%) + - **遇到问题**: [问题数]个 (详见问题跟踪) + + ### 阶段完成状态 + - [ ] 阶段一：[名称] ([完成数]/[总数]) - [状态说明] + - [ ] 阶段二：[名称] ([完成数]/[总数]) - [状态说明] + - [ ] 阶段三：[名称] ([完成数]/[总数]) - [状态说明] + 施工后验收 + ### 验收标准检查 + - [ ] **功能验证**: 所有功能按预期工作 + - [ ] **性能测试**: 性能指标达到要求 + - [ ] **兼容性**: 与现有系统兼容 + - [ ] **安全检查**: 通过安全审查 + - [ ] **文档更新**: 相关文档已同步更新 + - [ ] **部署就绪**: 可以安全部署到生产环境 + :shield: 风险管控 + 风险识别与预防 + ### 高风险操作识别 + - 🚨 **数据库结构变更**: [具体风险和预防措施] + - 🚨 **核心算法修改**: [具体风险和预防措施] + - 🚨 **第三方依赖升级**: [具体风险和预防措施] + - 🚨 **配置文件变更**: [具体风险和预防措施] + 回滚方案 + ### 回滚策略 + | 风险场景 | 触发条件 | 回滚步骤 | 预计用时 | 责任人 | + |----------|----------|----------|----------|--------| + | [场景1] | [条件] | [步骤] | [时间] | [人员] | + | [场景2] | [条件] | [步骤] | [时间] | [人员] | + :bar_chart: 施工监控与报告 + 日报模板 + ### 施工日报 - [日期] + **今日完成**: + - [任务1]: [状态] - [说明] + - [任务2]: [状态] - [说明] + + **遇到问题**: + - [问题1]: [影响] - [解决方案] + - [问题2]: [影响] - [解决方案] + + **明日计划**: + - [任务1]: [预期完成时间] + - [任务2]: [预期完成时间] + + **风险提醒**: + - [风险点]: [影响程度] - [应对措施] + 里程碑报告 + ### [里程碑名称] 完成报告 + **完成时间**: [日期] + **完成质量**: [质量评估] + **关键成果**: + - ✅ [成果1] + - ✅ [成果2] + **经验总结**: + - [经验1] + - [经验2] + **后续建议**: + - [建议1] + - [建议2] + :bullseye: 成功标准 + 文档质量检查 + 新团队成员 5 分钟内能理解施工目标和方案 + 所有任务都有明确的执行步骤和验收标准 + 风险评估覆盖所有潜在问题 + 预留空间为团队协作提供充足信息 + 进度跟踪机制完整有效 + 技术标准检查 + 符合项目既定的技术规范和编码标准 + 代码结构清晰，可维护性良好 + 测试覆盖率达到项目要求 + 性能指标满足预期目标 + 安全规范得到有效执行 + 交付标准检查 + 所有计划功能均已实现并通过验证 + 相关文档已同步更新 + 部署和配置文档完整 + 团队知识已有效传递 + 后续维护方案明确 + :counterclockwise_arrows_button: 文档维护 + 更新原则 + 版本控制: 每次重大更新增加版本号和变更日志 + 实时同步: 施工进度和发现的问题及时更新 + 决策记录: 重要技术决策和变更原因详细记录 + 知识沉淀: 经验教训和最佳实践及时总结 + 交接要求 + 完整性: 包含所有必要的技术细节和上下文信息 + 可理解性: 新接手人员能快速理解和继续工作 + 可追溯性: 每个决策和变更都有清晰的来龙去脉 + 可扩展性: 为未来的功能扩展和维护留有充分空间 + 归档标准 + ### 项目归档清单 + - [ ] **源代码**: 完整的代码仓库和版本历史 + - [ ] **文档资料**: 设计文档、API文档、用户手册等 + - [ ] **配置文件**: 部署配置、环境配置等 + - [ ] **测试资料**: 测试用例、测试报告、性能基准等 + - [ ] **运维资料**: 部署指南、监控配置、故障处理手册等 + type: expert + groups: + - read + - edit + - browser + - command + - mcp + source: global + - slug: documentation-writer + name: ✍️ 文档编写者 + roleDefinition: | + 你是一位技术文档专家，专注于为软件项目创建清晰、全面的文档。你的专长包括： + - 编写清晰、简洁的技术文档 + - 创建和维护 README 文件、API 文档和用户指南 + - 遵循文档最佳实践和风格指南 + - 理解代码以准确记录其功能 + - 以逻辑清晰、易于导航的结构组织文档 + whenToUse: | + 当你需要创建、更新或改进技术文档时，请使用此模式。适用于编写 README 文件、API 文档、用户指南、安装说明或任何需要清晰、全面且结构良好的项目文档。 + description: 创建清晰的技术项目文档 + groups: + - read + - edit + - command + customInstructions: | + 专注于创建清晰、简洁且风格一致的文档。有效使用 Markdown 格式，并确保文档组织良好且易于维护。 + type: expert + - slug: user-story-creator + name: 📝 用户故事创建者 + roleDefinition: | + 你是一位敏捷需求专家，专注于创建清晰、有价值的用户故事。你的专长包括： + - 遵循标准格式精心设计结构良好的用户故事 + - 将复杂需求分解为可管理的故事 + - 识别验收标准和边缘情况 + - 确保故事交付业务价值 + - 保持一致的故事质量和粒度 + whenToUse: | + 当你需要创建用户故事、将需求分解为可管理的片段或为功能定义验收标准时，请使用此模式。非常适合产品规划、冲刺准备、需求收集或将高级功能转化为可操作的开发任务。 + description: 创建结构化的敏捷用户故事 + groups: + - read + - edit + - command + customInstructions: | + 预期的用户故事格式： + + 标题: [简短的描述性标题] + + 作为一名 [特定的用户角色/画像], + 我想要 [清晰的行动/目标], + 以便 [获得切实的益处/价值]. + + 验收标准： + 1. [标准 1] + 2. [标准 2] + 3. [标准 3] + + 需要考虑的故事类型： + - 功能性故事 (用户交互和功能) + - 非功能性故事 (性能、安全、可用性) + - 史诗分解故事 (更小、可管理的部分) + - 技术性故事 (架构、基础设施) + + 边缘情况和注意事项： + - 错误场景 + - 权限级别 + - 数据验证 + - 性能要求 + - 安全影响 + type: expert + - slug: project-research + name: 🔍 项目研究 + roleDefinition: | + 你是一位注重细节的研究助理，专门负责审查和理解代码库。你的主要职责是分析给定项目的文件结构、内容和依赖关系，以提供与特定用户查询相关的全面上下文。 + whenToUse: | + 当你需要彻底调查和理解代码库结构、分析项目架构或收集有关现有实现的全面上下文时，请使用此模式。非常适合加入新项目、理解复杂代码库或研究特定功能在整个项目中的实现方式。 + description: 调查和分析代码库结构 + groups: + - read + customInstructions: | + 你的角色是深入调查和总结项目代码库的结构和实现细节。为有效实现这一目标，你必须： + + 1. 首先仔细检查整个项目的文件结构，特别强调位于“docs”文件夹中的文件。这些文件通常包含关键的上下文、架构解释和使用指南。 + + 2. 当收到特定查询时，系统地从以下来源识别和收集所有相关上下文： + - “docs”文件夹中的文档文件，提供背景信息、规格说明或架构见解。 + - 相关的类型定义和接口，并明确引用其在源代码中的确切位置（文件路径和行号）。 + - 与查询直接相关的实现，清楚地注明其文件位置，并提供其功能如何运作的简洁而全面的摘要。 + - 实现中涉及的重要依赖项、库或模块，包括其使用上下文以及对查询的重要性。 + + 3. 提交一份结构化、详细的报告，清晰地概述： + - 相关文档见解的概述。 + - 特定的类型定义及其确切位置。 + - 相关实现，包括文件路径、涉及的函数或方法，以及对其角色的简要说明。 + - 关键依赖项及其与查询相关的角色。 + + 4. 始终引用精确的文件路径、函数名和行号，以增强清晰度和导航的便利性。 + + 5. 将你的发现组织成逻辑清晰的部分，使用户能够直接了解与其请求相关的项目结构和实现状态。 + + 6. 确保你的回应直接解决用户的查询，并帮助他们充分掌握项目当前状态的相关方面。 + + 这些具体说明将取代你可能遵循的任何有冲突的通用说明。你的详细报告应能在整个工作流程中支持有效的决策和后续步骤。 + type: expert + source: global + - slug: security-review + name: 🛡️ 安全审查员 + roleDefinition: | + 你执行静态和动态审计，以确保安全编码实践。你负责标记密钥、不良的模块边界和过大的文件。 + whenToUse: | + 当你需要审计代码以发现安全漏洞、审查代码以遵循安全最佳实践或识别潜在安全风险时，请使用此模式。非常适合进行安全评估、专注于安全的代码审查、查找暴露的密钥或确保遵循安全编码实践。 + description: 审计代码安全漏洞 + groups: + - read + - edit + customInstructions: | + 扫描暴露的密钥、环境变量泄漏和单体应用。推荐缓解措施或重构以降低风险。标记超过500行的文件或与环境直接耦合的文件。使用 `new_task` 分配子审计任务。使用 `attempt_completion` 完成最终报告。 + type: expert + source: project + - slug: devops + name: 🚀 DevOps 工程师 + roleDefinition: | + 你是 DevOps 自动化和基础设施专家，负责在云提供商、边缘平台和内部环境中部署、管理和编排系统。你处理 CI/CD 管道、资源调配、监控钩子和安全运行时配置。 + whenToUse: | + 当你需要部署应用程序、管理基础设施、设置 CI/CD 管道或处理 DevOps 自动化任务时，请使用此模式。非常适合调配云资源、配置部署、管理环境、设置监控或自动化基础设施操作。 + description: 部署和管理基础设施自动化 + groups: + - read + - edit + - command + customInstructions: | + 首先运行 uname。你负责部署、自动化和基础设施运营。你将： + + • 调配基础设施（云函数、容器、边缘运行时） + • 使用 CI/CD 工具或 shell 命令部署服务 + • 使用密钥管理器或配置层配置环境变量 + • 设置域名、路由、TLS 和监控集成 + • 清理遗留或孤立的资源 + • 强制执行基础设施最佳实践： + - 不可变部署 + - 回滚和蓝绿部署策略 + - 切勿硬编码凭据或令牌 + - 使用托管密钥 + + 使用 `new_task` 来： + - 将凭据设置委托给安全审查员 + - 通过 TDD 或监控代理触发测试流程 + - 请求日志或指标分类 + - 协调部署后验证 + + 使用 `attempt_completion` 返回： + - 部署状态 + - 环境详情 + - 命令行输出摘要 + - 回滚说明（如果相关） + + ⚠️ 始终确保敏感数据被抽象化，并且配置值从密钥管理器或环境注入层中提取。 + ✅ 模块化部署目标（边缘、容器、lambda、服务网格） + ✅ 默认安全（代码中没有公钥、密钥、令牌） + ✅ 经过验证、可追溯的变更，并附有摘要说明 + type: expert + source: project + - slug: jest-test-engineer + name: 🧪 Jest 测试工程师 + roleDefinition: | + 你是一位 Jest 测试专家，在以下方面拥有深厚的专业知识： + - 编写和维护 Jest 测试套件 + - 测试驱动开发（TDD）实践 + - 使用 Jest 进行模拟和存根 + - 集成测试策略 + - TypeScript 测试模式 + - 代码覆盖率分析 + - 测试性能优化 + + 你的重点是在整个代码库中保持高测试质量和覆盖率，主要使用： + - __tests__ 目录中的测试文件 + - __mocks__ 中的模拟实现 + - 测试实用程序和辅助工具 + - Jest 配置和设置 + + 你确保测试是： + - 结构良好且可维护 + - 遵循 Jest 最佳实践 + - 使用 TypeScript 正确类型化 + - 提供有意义的覆盖率 + - 使用适当的模拟策略 + whenToUse: | + 当你需要编写、维护或改进 Jest 测试时，请使用此模式。非常适合实施测试驱动开发、创建全面的测试套件、设置模拟和存根、分析测试覆盖率或确保整个代码库遵循正确的测试实践。 + description: 编写和维护 Jest 测试套件 + groups: + - read + - browser + - command + - - edit + - fileRegex: (__tests__/.*|__mocks__/.*|\.test\.(ts|tsx|js|jsx)$|/test/.*|jest\.config\.(js|ts)$) + description: 测试文件、模拟和 Jest 配置 + customInstructions: | + 编写测试时： + - 始终使用 describe/it 块来清晰地组织测试 + - 包含有意义的测试描述 + - 使用 beforeEach/afterEach 进行适当的测试隔离 + - 实现适当的错误案例 + - 为复杂的测试场景添加 JSDoc 注释 + - 确保模拟被正确类型化 + - 验证正面和负面测试用例 + type: expert \ No newline at end of file diff --git a/0-产品需求文档/0-产品需求文档-“食话食说”APP .md b/0-产品需求文档/0-产品需求文档-“食话食说”APP .md new file mode 100644 index 0000000..b8946f5 --- /dev/null +++ b/0-产品需求文档/0-产品需求文档-“食话食说”APP .md @@ -0,0 +1,183 @@ +# “食话食说”APP 产品需求文档 (PRD) + +| 版本 | 日期 | 作者 | 变更说明 | +| :--- | :--------- | :--- | :------- | +| V1.0 | 2025-07-21 | Roo | 初始版本创建 | + +--- + +## 1. 项目概述 + +### 1.1. 项目背景与市场机会 + +当前主流健康饮食APP多以“热量管理”为核心，而消费者对**食品安全、成分质量、配料表“干净”程度**的关注日益增长，但市场上缺乏一个权威、易用的工具来满足此需求。尤其是在母婴、过敏等特定人群中，这一痛点尤为突出。本项目旨在填补这一市场空白，打造中国领先的饮食安全与健康决策平台。 + +### 1.2. 产品定位与目标用户 + +* **产品名称**：食话食说 +* **产品Slogan**：食品真相，实话实说 +* **产品定位**：一个以权威食品数据库为核心，通过AI技术帮助用户快速识别食品安全风险、解读成分、做出健康选择的智能决策工具。 +* **核心目标用户**：所有关注食品安全、追求健康生活品质的家庭与个人。 +* **重点细分人群**：产品将优先满足对食品安全极为敏感的人群，如母婴家庭、过敏体质者、健身人群、及有特定慢性病（如糖尿病、高血压）的用户。 + +### 1.3. 产品核心理念 + +* **安全优先，而非唯热量论**：我们关注的是成分的质量，而非简单的热量加减。 +* **科学、权威、客观**：所有评估和建议均基于科学数据和国家标准。 +* **化繁为简，赋能用户**：将复杂的食品工业信息，翻译成普通用户能看懂、能使用的决策依据。 + +## 2. 产品路线图 (Roadmap) + +产品将遵循“精益启动”原则，分三阶段迭代开发。 + +* **第一阶段 (MVP): “母婴食品安全查询器”** + * **核心目标**：验证核心功能，积累高粘性种子用户。 + * **核心功能**：拍照/扫码识别婴幼儿食品，提供安全评级、风险解读和健康替代品推荐。 + +* **第二阶段 (扩展期): “家庭健康决策中心”** + * **核心目标**：服务对象从母婴扩展到整个家庭。 + * **新增功能**：成人食品数据库、家庭成员管理、“健康知食”内容模块。 + +* **第三阶段 (生态期): “一站式健康生活平台”** + * **核心目标**：构建“工具+内容+社区+商业”的完整生态。 + * **新增功能**：“健康厨房”（智能食谱）、UGC社区、严选商城。 + +## 3. 产品功能详述 + +### 3.1. 模块一：智能食鉴 (核心功能) + +#### 3.1.1. 用户故事 + +* 作为一位注重健康的消费者，我希望能快速看懂食品配料表，了解其真实的健康与安全水平，避免被营销宣传误导，并为我和家人选择真正优质的食品。 + +#### 3.1.2. 核心流程 + +1. 用户打开APP，点击首页醒目的“拍照”或“扫码”按钮。 +2. 对准食品包装的条形码或配料表进行拍摄/扫描。 +3. 系统在3秒内返回分析结果页。 + +#### 3.1.3. 结果展示页元素 + +1. **产品概要**：显示产品名称和图片。 +2. **品类“照妖镜”**：明确标出产品的法定真实品类（如“含乳饮料”），并提示其与营销名称（如“儿童牛奶”）的差异。 +3. **核心双重评级**： + * **安全评级**：用A/B/C/D四个等级和醒目的颜色（绿/黄/橙/红）展示。评级依据是产品是否含有争议性添加剂、高风险成分、或根据用户个人健康档案（如过敏原）触发的特定风险。 + * **营养评级**：在其真实品类的范畴内，对其综合营养价值（如蛋白质、优质脂肪、纤维含量 vs 糖、钠、不健康脂肪含量）给出一个“高”、“中”或“低”的评级。 +4. **一句话总结**：用大白话清晰地告知核心结论。 + * **正面示例 (A/B级)**：“配料表很干净，符合2岁宝宝食用标准。” + * **负面示例 (C/D级)**：“**警告**：含有XX防腐剂和3种人工甜味剂，不建议给婴幼儿食用。” +5. **适用阶段提示**：明确告知该食品适合的月龄或孕期/哺乳期阶段。 +6. **个性化风险高亮**：如果产品成分触发了用户在个人档案中设置的过敏原（如“牛奶”），则在此处强提醒。 +7. **健康替代品推荐**：对于评级为C/D的产品，以卡片形式推荐2-3个同品类、更高安全评级的替代品。 +8. **完整成分列表**：提供完整的、经过解析和风险标记的成分列表，供深度用户查看。 + +### 3.2. 模块二：健康档案 (用户中心) + +#### 3.2.1. 用户故事 + +* 作为用户，我希望能为自己和家人建立健康档案，APP能在我查询食品时，根据我们每个人的不同情况（如过敏、疾病、口味偏好）给出个性化的提醒和建议。 + +#### 3.2.2. 功能点 + +1. **家庭成员管理**：用户可以为自己和多位家人（如宝宝、伴侣、父母）创建独立的健康档案。 +2. **个性化健康标签**：每个家庭成员的档案可设置详细标签，包括： + * **过敏原**：牛奶、海鲜、坚果等，支持自定义。 + * **疾病与健康状况**：高血压、糖尿病、孕期、健身减脂等。 + * **饮食偏好**：不吃辣、素食、低碳水等。 +3. **我的“红黑榜”**：用户可以将查询过的产品手动添加到“红榜”（推荐）或“黑榜”（避坑），并可按家庭成员分类，形成家庭购物参考。 +4. **轻量健康记录**：提供喝水提醒、体重记录等基础健康追踪工具，以培养用户使用习惯。 + +### 3.3. 模块三：健康知食 (内容中心) + +#### 3.3.1. 用户故事 + +* 作为用户，我不仅想知道什么不能吃，更想学习为什么，并获取更多健康资讯和美食知识，提升自己的健康素养。 + +#### 3.3.2. 功能点 + +1. **健康资讯**：以信息流形式，推送由专业团队（营养师、食品专家）撰写或合作的健康文章和视频，内容涵盖食品安全热点、营养科普、疾病预防等。 +2. **食物百科**：建立一个可查询的食物数据库，用户可以查询各种常见食材的营养功效、相生相克、饮食禁忌、挑选和储存方法。 +3. **专题与评测**：定期发布热门品类（如酸奶、酱油、麦片）的横向评测报告，帮助用户在购物时做出更明智的选择。 + +### 3.4. 模块四：健康厨房 (智能食谱) + +#### 3.4.1. 用户故事 + +* 作为用户，我希望APP能根据我的健康状况和家人的口味，为我推荐健康又美味的一日三餐，并告诉我怎么做。 + +#### 3.4.2. 功能点 + +1. **个性化食谱推荐**：根据用户“健康档案”中的标签（如“减脂”、“高血压”、“不吃香菜”），智能生成每日或每周的健康食谱。 +2. **智能配餐**：提供饮食搭配建议，确保营养均衡。 +3. **详细烹饪指南**：每个菜谱都提供详细的图文或视频烹饪步骤。 +4. **“冰箱有什么”模式**：用户可输入冰箱里现有的食材，APP智能生成可以制作的菜谱，解决“清冰箱”难题。 +5. **随机饮食“盲盒”**：为有选择困难症的用户提供趣味性的随机健康餐食推荐。 + +### 3.5. 模块五：互动社区 + +#### 3.5.1. 用户故事 + +* 作为用户，我希望能和其他注重健康的人交流心得，分享我发现的“宝藏”健康食品或“大坑”产品。 + +#### 3.5.2. 功能点 + +1. **“红黑榜”分享**：用户可以发布自己对某个食品的评价，形成UGC（用户生成内容）的“红黑榜”广场，供他人参考。 +2. **食谱分享**：用户可以创建和分享自己的健康食谱。 +3. **话题讨论**：创建不同的话题圈子，如“宝宝辅食交流”、“减脂餐打卡”、“控糖日记”等，方便用户交流和互相激励。 + +### 3.6. 模块六：健康商城 (购物) + +#### 3.6.1. 用户故事 + +* 作为用户，当APP推荐给我一款非常棒的健康食品后，我希望能方便地直接购买到它，而不用再去其他平台搜索。 + +#### 3.6.2. 功能点 (未来规划) + +1. **严选商品**：商城将采用严选模式，只上架符合“食话食说”平台高安全和高营养标准的产品。所有产品都将附有平台的详细分析报告。 +2. **一键购买**：在“智能食鉴”功能推荐的“健康替代品”或“红榜”产品旁，提供直接的购买链接。 +3. **基础电商功能**：提供完整的商品展示、购物车、订单管理、在线支付和物流查询功能。 +4. **个性化推荐**：根据用户的健康档案和浏览历史，推荐其可能感兴趣的健康食品。 +## 4. 非功能性需求 + +* **性能**：核心识别分析流程必须在3秒内完成。 +* **准确性**：OCR识别准确率 > 98%，核心风险成分识别准确率 > 99.9%。 +* **可用性**：界面简洁，核心操作路径不超过3步。 +* **数据隐私**：严格保护用户的个人健康信息，特别是婴幼儿信息。 + +## 5. 数据与技术概要 + +* **核心数据壁垒**：自建的、权威的、动态更新的中国食品成分及风险数据库，全面覆盖包装食品、生鲜食材、保健品等。 +* **核心技术**：高精度OCR、自然语言处理（NLP）、基于规则与算法的风险评估引擎。 + +## 6. 深度优化与未来探索 + +为了确保产品的长期竞争力和科学权威性，我们规划了以下深度优化方向和未来功能探索。 + +### 6.1. “食话食说健康指数 (SHI)” 评分模型 + +为了让评分体系更加透明、权威，我们将建立一个公开的、可追溯的评分模型。 + +* **SHI指数构成** = 基础分 (100) + 加分项 - 减分项 +* **基础分 (营养质量)**：参考国际通用的Nutri-Score模型，综合评估食品的基础营养价值。 +* **核心减分项 (安全风险)**： + * **争议性添加剂**：建立三级风险清单，命中则大幅扣分。 + * **超加工程度**：依据NOVA分类法，加工程度越高，扣分越多。 + * **警示成分**：如反式脂肪、高果糖浆等。 + * **信息不透明**：对成分标注模糊的产品进行扣分。 +* **核心加分项 (额外价值)**： + * **权威认证**：如有机、非转基因等。 + * **清洁配料表**：配料表极简且无人工添加剂。 + * **富含特定有益成分**：如Omega-3、益生菌等。 + +### 6.2. 游戏化与社区共建 + +* **健康徽章系统**：设立“添加剂辨别达人”、“清洁配料表发现者”等徽章，通过扫码、分享等行为进行解锁，提升用户成就感。 +* **“新发现”上传功能**：鼓励用户上传数据库未收录的食品，审核通过后给予高额积分和“开拓者”荣誉，以众包模式加速数据库扩充。 + +### 6.3. 未来功能探索 (PaaS - Platform as a Service) + +* **供应链溯源 (终极信任)**：与优质品牌深度合作，用户扫描产品后可查看其原料产地、生产批次质检报告，建立无与伦比的信任壁垒。 +* **AI私人营养师 (高级订阅)**：结合用户健康档案和饮食记录，提供动态调整的、千人千面的周度营养方案和购物清单。 +* **可持续性评分 (社会价值)**：增加对产品包装、碳足迹等环境友好度的评估维度，吸引更高层次的用户群体。 +--- +**文档结束** \ No newline at end of file diff --git a/0-产品需求文档/0-产品页面结构清单.md b/0-产品需求文档/0-产品页面结构清单.md new file mode 100644 index 0000000..ed48d9f --- /dev/null +++ b/0-产品需求文档/0-产品页面结构清单.md @@ -0,0 +1,41 @@ +# “食话食说”APP 页面结构清单 (Sitemap) V1.0 + +本清单基于产品需求文档V1.0，旨在罗列出APP所需的全部页面，为后续的UI/UX设计和开发提供清晰的范围和指引。 + +| 一级模块 | 二级模块/功能 | 页面名称 | 核心功能与内容 | +| :--- | :--- | :--- | :--- | +| **通用/基础** | 用户账户 | 启动/闪屏页 | App Logo展示 | +| | | 登录/注册页 | 手机号、微信一键登录 | +| | | 用户协议与隐私政策页 | 法规要求的静态文本页面 | +| | | 引导/初始设置页 | 首次进入时，引导用户设置基础健康标签 | +| **核心体验** | **首页 (Home)** | **首页** | **核心功能区、个性化动态、内容信息流** | +| | 智能食鉴 | 扫码/拍照页 | 调起摄像头，进行扫码或拍照 | +| | | **分析结果页** | **展示食品安全/营养评级、解读、替代品等** | +| | | | SHI评分模型说明页 | 详细解释“食话食说健康指数”的计算方法 | +| | | 搜索页 | 输入框，用于搜索食品、成分、文章 | +| | | 搜索结果页 | 列表形式展示搜索结果 | +| **发现** | **内容中心** | **“发现”主页** | **健康资讯、评测、食物百科的聚合信息流** | +| | | 文章/视频详情页 | 展示单篇资讯或评测的完整内容 | +| | | 食物百科详情页 | 展示单个食材的营养、功效、禁忌等 | +| **健康厨房** | **智能食谱** | **“厨房”主页** | **个性化食谱推荐、菜谱分类入口** | +| | | 菜谱详情页 | 展示菜谱的用料、图文/视频步骤 | +| | | “冰箱有什么”页 | 用户输入已有食材的界面 | +| | | 菜谱搜索/筛选页 | 按口味、功效、食材等筛选菜谱 | +| **互动社区** | **社区中心** | 社区主页 | UGC内容的信息流广场 | +| | | 帖子详情页 | 展示单条用户分享（红黑榜/食谱）及评论 | +| | | 内容发布页 | 用户创建和编辑分享内容的编辑器 | +| | | | 上传新发现页 | 引导用户拍照上传数据库未收录的食品 | +| | | 话题/圈子详情页 | 特定主题（如“减脂餐打卡”）的内容聚合页 | +| **个人中心** | **“我的”** | **“我的”主页** | **个人信息、各功能入口（档案、订单、设置等）** | +| | 健康档案 | 家庭成员管理页 | 列表展示家庭成员，支持增删改 | +| | | **健康档案设置页** | **为成员设置过敏原、疾病、偏好等标签** | +| | | 我的红黑榜页 | 展示用户收藏的推荐/避坑产品列表 | +| | | 我的徽章页 | 展示用户已获得的健康徽章及解锁条件 | +| | | 健康记录页 | 喝水、体重等轻量级数据记录与图表 | +| | 商城订单 | 我的订单列表页 | 展示用户的商城订单历史 | +| | | 订单详情页 | 展示单个订单的详细信息 | +| | 通用设置 | 设置页 | 账号安全、通知管理、关于我们、版本信息 | +| **健康商城** | **购物 (未来)** | 商城主页 | 商品分类、活动、推荐商品展示 | +| | | 商品详情页 | 展示单个商品的详细信息、价格、规格 | +| | | 购物车页 | 管理待购买的商品 | +| | | 确认订单/结算页 | 填写地址、选择支付方式、完成下单 | diff --git a/0-产品需求文档/设计文档-Home页面.md b/0-产品需求文档/设计文档-Home页面.md new file mode 100644 index 0000000..6e9ebc9 --- /dev/null +++ b/0-产品需求文档/设计文档-Home页面.md @@ -0,0 +1,102 @@ +# “食话食说”APP 设计文档 - V1.0：首页 (Home) + +--- + +## 1. 首页设计目标 + +首页作为用户进入APP的第一个触点，承载着三大核心目标： +1. **高效转化**：让用户以最快路径使用核心的“智能食鉴”功能。 +2. **价值感知**：让用户直观感受到APP为他个人带来的健康价值。 +3. **兴趣引导**：激发用户探索“发现”、“健康厨房”等其他模块的兴趣。 + +## 2. 首页结构布局 (Mermaid图) + +```mermaid +graph TD + subgraph "首页 (Home Screen)" + direction TB + + A["顶部状态栏"] + B["核心功能区 (Hero Section)"] + C["个性化动态"] + D["内容信息流 (Feed)"] + + A --> B --> C --> D + end + + subgraph "A: 顶部状态栏" + A1["问候语 & 用户名"] + A2["全局搜索入口"] + end + + subgraph "B: 核心功能区" + B1["醒目的主Slogan"] + B2["[ 扫码/拍照，解读食品真相 ]
巨大、唯一的行为召唤(CTA)按钮"] + end + + subgraph "C: 个性化动态" + C1["健康成就卡片
“本周已分析5种食品，避开3个高风险成分”"] + end + + subgraph "D: 内容信息流 (Card-based)" + D1["卡片1: 发现
“警惕！这5种'儿童酱油'其实是钠含量炸弹”"] + D2["卡片2: 为你推荐的菜谱
“适合减脂期的你：牛油果鸡胸肉沙拉”"] + D3["卡片3: 社区热议
“用户'宝妈小红'分享了她发现的宝藏0添加酸奶”"] + end + + subgraph "底部导航栏 (Bottom Navigation)" + Nav1["首页"] + Nav2["发现"] + Nav3["[扫一扫]"] + Nav4["厨房"] + Nav5["我的"] + end + + D --> Nav1 +``` + +## 3. 页面模块详解 + +### 3.1. 顶部状态栏 + +* **内容**： + * 左侧显示亲切的问候语，如“晚上好，王女士”。 + * 右侧放置一个“搜索”图标，允许用户不通过扫码，直接通过关键词搜索食品或成分。 +* **设计目的**：营造个性化氛围，并提供一个备用的高效查询入口。 + +### 3.2. 核心功能区 (Hero Section) + +这是整个页面的视觉中心，占据屏幕最显要的位置。 +* **内容**： + * 上方是一句简短有力的Slogan，如“食品真相，实话实说”。 + * 下方是一个巨大、圆形的按钮，设计上可以模拟相机的镜头光圈，按钮内有清晰的图标（相机+二维码）和文字：“**扫码/拍照，解读食品真相**”。 +* **设计目的**：将用户的注意力完全聚焦在核心功能上，实现“零思考”操作。这是整个APP转化率最高的地方。 + +### 3.3. 个性化动态 + +紧跟在核心功能区下方，用数据向用户证明APP的价值。 +* **内容**：以小卡片形式展示，文案根据用户行为动态生成。 + * **示例1 (新用户)**：“从扫描第一件食品开始，守护家人健康。” + * **示例2 (老用户)**：“本周您已分析 **8** 种食品，成功为家人避开 **4** 个高风险成分！” +* **设计目的**：通过量化的数据给予用户正向反馈，强化其使用行为，提升用户粘性。 + +### 3.4. 内容信息流 (Feed) + +这是首页的主要内容区域，采用上下滑动浏览的卡片式布局，保持界面的清爽和内容的丰富性。 +* **内容**：信息流由不同类型的内容卡片混合组成，算法会根据用户的健康标签和浏览偏好进行个性化推荐。 + * **“发现”卡**：展示一篇来自“发现”模块的精选文章标题和摘要，如“《深度评测：10款热门酸奶，哪款才是真正的无糖优选？》”。 + * **“健康厨房”卡**：展示一道来自“健康厨房”模块的推荐菜谱，包含菜品图片、名称和简短描述，如“**为高血压的您推荐**：清蒸鲈鱼”。 + * **“社区精选”卡**：展示一条来自“互动社区”模块的热门用户分享，如“用户 **@爱生活的喵** 分享了她的自制健康油醋汁配方，快来看看吧！” +* **设计目的**： + 1. 让首页“活”起来，每次打开都有新内容。 + 2. 作为其他模块的“橱窗”，自然地向用户展示APP的丰富功能，引导用户深入探索。 + 3. 通过个性化推荐，持续为用户提供有价值的信息，将其留在APP内。 + +### 3.5. 底部导航栏 + +采用行业通用的“标签式导航栏”设计，固定在页面底部，包含5个入口： +1. **首页**：当前页面。 +2. **发现**：进入“发现”内容中心页面。 +3. **扫一扫 (中心按钮)**：设计为突出的、可能是异形的中心按钮，点击后直接拉起相机/扫码界面，是核心功能的第二个快捷入口。 +4. **厨房**：进入“健康厨房”菜谱页面。 +5. **我的**：进入个人中心，管理健康档案、查看红黑榜、进行设置等。 \ No newline at end of file diff --git a/1-原型设计及功能说明/1.1.1通用基础页面-原型初设计.md b/1-原型设计及功能说明/1.1.1通用基础页面-原型初设计.md new file mode 100644 index 0000000..1e9bfa9 --- /dev/null +++ b/1-原型设计及功能说明/1.1.1通用基础页面-原型初设计.md @@ -0,0 +1,158 @@ +# 1.1.1 通用基础页面 - 原型初设计 (线框图) + +本文档使用 Mermaid 语法绘制 APP 的核心页面线框图，旨在快速对齐页面布局、核心元素和功能逻辑，为后续高保真设计和功能说明提供基础。 + +--- + +## 1. 首页 (Home) + +**核心设计思路**：突出核心扫码功能，并结合个性化提醒与内容推荐，引导用户探索。 + +```mermaid +graph TB + subgraph "手机屏幕" + direction TB + + subgraph "顶部状态栏" + A["时间 / 信号 / 电池"] + end + + subgraph "主内容区" + B["搜索框
“搜索食品、成分、文章”"] + C{"

核心扫码/拍照入口
（大尺寸、醒目）"} + D["个性化动态卡片
“您关注的宝宝辅食有新的评测”"] + E["“健康知食”信息流
- 文章卡片1
- 文章卡片2
- ..."] + end + + subgraph "底部导航栏" + Nav1["首页"] -- "1. 当前页" --> C + Nav2["发现"] + Nav3["健康厨房"] + Nav4["我的"] + end + + B -- "2. 点击跳转" --> SearchPage["搜索页"] + C -- "3. 点击调起" --> ScanPage["扫码/拍照页"] + end +``` + +--- + +## 2. 智能食鉴 - 扫码/拍照页 + +**核心设计思路**：界面极简，聚焦于快速、准确地完成扫描或拍照动作。 + +```mermaid +graph TB + subgraph "手机屏幕" + direction TB + + subgraph "顶部状态栏" + A["时间 / 信号 / 电池"] + end + + subgraph "相机视图" + B["


相机实时画面

中心有对齐框引导用户



"] + end + + subgraph "底部控制栏" + C["手电筒开关"] + D["“相册”
从相册选择图片"] + E["“输入”
手动输入条形码"] + end + + B -- "1. 成功识别" --> ResultPage["分析结果页"] + end +``` + +--- + +## 3. 智能食鉴 - 分析结果页 + +**核心设计思路**：信息层级清晰，第一时间给出核心结论，次要信息可展开查看。 + +```mermaid +graph TB + subgraph "手机屏幕" + direction TB + + subgraph "顶部导航" + A["< 返回"] + B["分享"] + end + + subgraph "核心结论区" + C["产品图片"] + D["产品名称"] + E["品类“照妖镜”
“它其实是含乳饮料，不是牛奶”"] + F["**安全评级: A (优秀)**
(绿色背景)"] + G["**营养评级: 中**"] + H["**一句话总结**
“配料表很干净，可放心给宝宝食用。”"] + end + + subgraph "详情解读区" + I["个性化风险高亮
(如触发过敏原则强提醒)"] + J["**健康替代品推荐**
- 替代品A卡片
- 替代品B卡片"] + K["**完整成分列表 (可展开)**
点击后显示详细成分及解读"] + L["“SHI健康指数”得分: 92分
点击查看评分模型说明"] + end + + L -- "2. 点击跳转" --> SHI_Page["SHI评分模型说明页"] + A -- "3. 点击返回" --> HomePage["首页"] + end +``` + +--- + +## 4. SHI评分模型说明页 + +**核心设计思路**：作为静态内容页，清晰、透明地解释评分规则，建立用户信任。 + +```mermaid +graph TB + subgraph "手机屏幕" + direction TB + + subgraph "顶部导航" + A["< 返回"] + end + + subgraph "内容区" + B["

“食话食说健康指数 (SHI)”

"] + C["

SHI指数如何计算?


SHI = 100 + 加分项 - 减分项"] + D["

核心减分项 (安全风险)


- 争议性添加剂
- 超加工程度
- 警示成分"] + E["

核心加分项 (额外价值)


- 权威认证
- 清洁配料表
- 富含特定有益成分"] + end + + A -- "1. 点击返回" --> ResultPage["分析结果页"] + end +``` + +--- + +## 5. 搜索页 & 搜索结果页 + +**核心设计思路**：提供清晰的搜索路径和分类明确的结果展示。 + +```mermaid +graph TB + subgraph "流程: 搜索页 -> 搜索结果页" + direction LR + + subgraph "搜索页" + A["搜索框 (自动聚焦)"] + B["取消"] + C["

历史记录


- 关键词1
- 关键词2"] + D["

热门搜索


- 热搜词1
- 热搜词2"] + end + + subgraph "搜索结果页" + E["搜索框 (含用户输入内容)"] + F["Tab: 全部"] + G["Tab: 食品"] + H["Tab: 文章"] + I["**结果列表**
根据Tab筛选后的结果
- 结果1
- 结果2
- ..."] + end + + A -- "1. 输入关键词并搜索" --> E + end \ No newline at end of file diff --git a/1-原型设计及功能说明/1.1.2通用基础页-原型功能说明文档.md b/1-原型设计及功能说明/1.1.2通用基础页-原型功能说明文档.md new file mode 100644 index 0000000..5bf6158 --- /dev/null +++ b/1-原型设计及功能说明/1.1.2通用基础页-原型功能说明文档.md @@ -0,0 +1,55 @@ +# 1.1.2 通用基础页面 - 原型功能说明文档 + +本说明文档基于《1.1.1 通用基础页面 - 原型初设计》中的线框图，旨在对每个页面的功能、交互逻辑和关键业务规则进行详细阐述。 + +--- + +## 1. 首页 (Home) + +| 区域/元素 | 功能说明 | 交互逻辑与规则 | +| :--- | :--- | :--- | +| **搜索框** | 1. 提供全局搜索入口。
2. 默认显示引导性文字，如“搜索食品、成分、文章”。 | 1. 点击后，跳转至独立的“搜索页”。
2. 搜索框内应有清除按钮。 | +| **核心扫码/拍照入口** | 1. APP最核心的功能入口，必须在视觉上最醒目。
2. 承载“拍照识别配料表”和“扫描识别条形码”两大功能。 | 1. 点击后，直接调起“扫码/拍照页”。
2. 需向用户请求相机权限（首次）。 | +| **个性化动态卡片** | 1. 基于用户的健康档案和历史行为，推送强相关的动态。
2. 示例：“您关注的宝宝辅食有新的评测”、“您设置的过敏原‘坚果’在一款新产品中被发现”。 | 1. 此区域为动态内容，若无相关动态则不显示。
2. 点击卡片，应跳转至对应的内容详情页或产品分析页。 | +| **“健康知食”信息流** | 1. 以信息流形式，向用户推荐平台精选的健康资讯、科普文章、评测报告等。 | 1. 采用“无限滚动”加载机制。
2. 点击任一卡片，跳转至对应的“文章/视频详情页”。 | +| **底部导航栏** | 1. 提供APP四大核心模块的固定入口：首页、发现、健康厨房、我的。 | 1. “首页”为当前选中状态。
2. 点击其他图标，切换到对应的一级模块页面。 | + +--- + +## 2. 智能食鉴 - 扫码/拍照页 + +| 区域/元素 | 功能说明 | 交互逻辑与规则 | +| :--- | :--- | :--- | +| **相机视图与对齐框** | 1. 实时展示手机摄像头捕捉的画面。
2. 提供清晰的对齐框，引导用户将“条形码”或“配料表”置于框内以获得最佳识别效果。 | 1. 系统自动对焦。
2. 当识别到有效的条形码或清晰的配料表文字时，自动触发分析，并跳转至“分析结果页”。
3. 若3-5秒内无法自动识别，可提示用户“请确保光线充足、文字清晰”。 | +| **手电筒开关** | 在光线不足的环境下，打开手机闪光灯进行补光。 | 点击图标可开启/关闭手电筒。 | +| **“相册”入口** | 允许用户从手机相册中选择已拍好的食品包装图片进行分析。 | 点击后，调用系统相册让用户选择图片。 | +| **“输入”入口** | 提供手动输入条形码数字的备用方案。 | 点击后，弹出数字键盘，供用户输入条形码。 | + +--- + +## 3. 智能食鉴 - 分析结果页 + +| 区域/元素 | 功能说明 | 交互逻辑与规则 | +| :--- | :--- | :--- | +| **核心结论区** | 1. **品类“照妖镜”**：揭示产品法定真实品类，打破营销误导。
2. **安全/营养双重评级**：用最直观的方式（颜色+等级）给出核心判断。
3. **一句话总结**：用大白话概括结论，尤其对风险进行强提示。 | 1. 此区域内容为页面核心，必须在首屏完整展示，不可折叠。
2. 安全评级必须使用醒目的颜色块（绿/黄/橙/红）以强化视觉感知。 | +| **个性化风险高亮** | 基于用户的“健康档案”，如果产品成分触发了用户的过敏原、禁忌等，在此处用醒目方式（如红色文字、警告图标）进行强提醒。 | 1. 此为个性化模块，仅在触发时显示。
2. 需明确指出是为哪位家庭成员（如“宝宝”）触发的风险。 | +| **健康替代品推荐** | 对于评级为C/D的“不推荐”产品，提供2-3个同品类、更高评级的“推荐”产品作为替代方案，完成商业闭环。 | 1. 以横向滑动卡片形式展示。
2. 点击卡片可跳转至该替代品的“分析结果页”或“商品详情页”。 | +| **完整成分列表** | 默认收起，供希望深度了解的用户点击查看。列表中的成分会根据风险等级进行标记。 | 点击后，在当前页面展开详细列表。 | +| **SHI健康指数** | 展示该产品最终的SHI分数，并提供入口让用户了解该分数的计算方法，以建立信任。 | 点击“查看评分模型说明”链接，跳转至独立的“SHI评分模型说明页”。 | + +--- + +## 4. SHI评分模型说明页 + +| 区域/元素 | 功能说明 | 交互逻辑与规则 | +| :--- | :--- | :--- | +| **内容区** | 作为一个静态内容页面，详细、透明地解释SHI指数的构成（基础分、加分项、减分项），以及各项的判断依据。 | 页面内容应图文并茂，通俗易懂，避免使用过分专业的术语。 | + +--- + +## 5. 搜索页 & 搜索结果页 + +| 区域/元素 | 功能说明 | 交互逻辑与规则 | +| :--- | :--- | :--- | +| **搜索页** | 1. **历史记录**：方便用户快速进行重复搜索。
2. **热门搜索**：引导用户发现平台内的热点内容。 | 1. 历史记录最多显示最近的5-10条，并提供“清空历史记录”的按钮。
2. 点击任一历史记录或热门搜索词，直接执行搜索并跳转至“搜索结果页”。 | +| **搜索结果页** | 1. **Tab分类**：将搜索结果清晰地分为“全部”、“食品”、“文章”等类别，方便用户筛选。
2. **结果列表**：根据用户选择的Tab，展示对应的搜索结果。 | 1. 默认选中“全部”Tab。
2. 点击不同Tab，下方结果列表进行相应切换。
3. 若某一分类下无结果，应显示空状态提示，如“未找到相关的食品”。 | diff --git a/1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md b/1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md new file mode 100644 index 0000000..69ade9c --- /dev/null +++ b/1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md @@ -0,0 +1,213 @@ +# “食话食说”APP 核心体验模块 - 原型初稿及功能说明 + +**版本:** 1.0 +**日期:** 2025-07-22 +**设计者:** Roo (产品经理) + +--- + +## 0. 前言 + +本文档旨在通过低保真原型图（使用Mermaid绘制）的形式，清晰地展示“食话食说”APP核心体验模块的关键页面设计与功能逻辑。设计严格遵循PRD V1.0和页面结构清单V1.0的要求。 + +--- + +## 1. 首页 (Home) + +**功能逻辑:** 作为用户进入APP后的主界面，首页承担着核心功能引导、个性化内容展示和信息流聚合的职责。 + +```mermaid +graph TD + subgraph "手机屏幕" + direction TB + subgraph "顶部状态栏" + A["运营商 | 时间 | 电池"] + end + + subgraph "页面主体" + direction TB + B("食话食说") + C["搜索框: '搜索食品、成分、文章...'"] + + subgraph "核心功能区" + direction LR + D["
📷
扫码/拍照
"] + E["
📖
我的红黑榜
"] + F["
🍲
健康厨房
"] + end + + subgraph "个性化动态" + G["Hi, [用户名]！
今天已为你守护 1 次饮食健康
宝宝的过敏原：牛奶、鸡蛋"] + end + + subgraph "内容信息流 ('健康知食')" + H["专题：如何挑选“零添加”酱油？

专家团队横向评测15款热门酱油..."] + I["科普：你真的了解“反式脂肪”吗？

反式脂肪的危害远超你的想象..."] + J["...更多内容..."] + end + end + + subgraph "底部导航栏 (Tab Bar)" + direction LR + K["首页"] + L["发现"] + M["社区"] + N["我的"] + end + end + + C --> SearchPage["搜索页"] + D --> ScanPage["扫码/拍照页"] +``` + +--- + +## 2. 扫码/拍照页 + +**功能逻辑:** 这是“智能食鉴”功能的入口，提供一个无干扰的、直观的界面，引导用户完成扫码或拍照的操作。 + +```mermaid +graph TD + subgraph "手机屏幕" + direction TB + subgraph "顶部导航" + A["< 返回"] + B[" "] + C["相册"] + end + + subgraph "视图区域" + D["(摄像头实时画面)"] + E["[ 扫描框 ]"] + F["请将食品条形码或配料表放入框内"] + end + + subgraph "底部操作区" + G["打开手电筒"] + H["拍照/扫描按钮"] + I["手动输入"] + end + end + H -- "识别成功" --> ResultPage["分析结果页"] + A -- "点击" --> HomePage["首页"] +``` + +--- + +## 3. 分析结果页 + +**功能逻辑:** 这是产品的核心价值展示页。页面设计需要清晰、直观、有冲击力，让用户在3秒内获取关键信息并建立信任感。 + +```mermaid +graph TD + subgraph "手机屏幕" + direction TB + subgraph "顶部导航" + A["< 返回"] + B["分析结果"] + C["分享"] + end + + subgraph "页面主体 (可滚动)" + direction TB + + subgraph "1. 产品概要" + D["
[产品名称]
[品牌]"] + end + + subgraph "2. 核心评级" + E["安全评级: D"] + F["营养评级 (同类中): 中"] + G["
一句话总结:
警告：含有XX防腐剂和3种人工甜味剂，不建议给婴幼儿食用。
"] + end + + subgraph "3. 个性化提醒" + H["! 高风险提醒
触发您宝宝的过敏原: 牛奶"] + end + + subgraph "4. 适用阶段提示" + I_tip["适用阶段:
不建议3岁以下婴幼儿食用"] + end + + subgraph "5. 品类“照妖镜”" + I["营销名称: 儿童成长牛奶
法定品类: 含乳饮料"] + end + + subgraph "6. 健康替代品推荐" + J["

为你推荐更好的选择

"] + subgraph "替代品A" + K["
[替代品A名称]
安全评级: A"] + end + subgraph "替代品B" + L["
[替代品B名称]
安全评级: A"] + end + end + + subgraph "7. 完整成分解读" + M["

完整成分列表

"] + N["- 水
- 生牛乳 (过敏原)
- 白砂糖
- 阿斯巴甜 (人工甜味剂)
- 山梨酸钾 (防腐剂)
..."] + O["[点击查看SHI评分模型说明]"] + end + end + end + O --> SHIInfoPage["SHI评分模型说明页"] + A -- "点击" --> PreviousPage["返回上一页"] +``` + +--- + +## 4. 搜索页 & 搜索结果页 + +**功能逻辑:** 提供全局搜索功能，允许用户主动查找信息。搜索页力求简洁，结果页则需要清晰地分类展示不同类型的结果。 + +### 4.1 搜索页 + +```mermaid +graph TD + subgraph "手机屏幕 - 搜索页" + direction TB + subgraph "顶部" + A["< 返回"] + B[""] + C["搜索"] + end + subgraph "中部" + D["

历史记录

"] + E["[牛奶] [酱油] [益生菌]"] + F["

热门搜索

"] + G["[酸奶评测] [无麸质] [宝宝辅食]"] + end + end + C -- "点击" --> SearchResultPage["搜索结果页"] +``` + +### 4.2 搜索结果页 + +```mermaid +graph TD + subgraph "手机屏幕 - 搜索结果页" + direction TB + subgraph "顶部" + A["< 返回"] + B[""] + C["搜索"] + end + subgraph "结果分类Tab" + direction LR + D["全部"] + E["产品"] + F["文章"] + G["成分"] + end + subgraph "结果列表" + H["

产品

"] + I["[某品牌纯牛奶]
安全评级: A | 营养评级: 高"] + J["[某品牌儿童牛奶]
安全评级: C | 营养评级: 中"] + K["

文章

"] + L["牛奶过敏的宝宝应该怎么办？
..."] + M["...更多结果..."] + end + end + I -- "点击" --> ResultPage["分析结果页"] + L -- "点击" --> ArticlePage["文章详情页"] +``` \ No newline at end of file diff --git a/1-原型设计及功能说明/IMPLEMENTATION_NOTES.md b/1-原型设计及功能说明/IMPLEMENTATION_NOTES.md new file mode 100644 index 0000000..c67d353 --- /dev/null +++ b/1-原型设计及功能说明/IMPLEMENTATION_NOTES.md @@ -0,0 +1,57 @@ +# “食话食说”APP - 核心体验模块前端实现说明 + +**版本:** 1.0 +**日期:** 2025-07-22 +**作者:** Roo (AI Assistant) + +--- + +## 1. 概述 + +本文档记录了“食话食说”APP核心体验模块的前端实现细节。本次开发基于 `1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md` 文档，在 `shihuashishuo-ui` (Vue 3 + TypeScript) 项目中完成了相关页面的纯前端实现。 + +## 2. 核心架构决策 + +### 2.1. 布局 (Layout) + +- 为了实现带底部导航栏的通用布局，我们创建了 `src/layouts/MainLayout.vue` 组件。 +- 该组件使用 Flexbox 布局，包含一个可独立滚动的内容区 (`
`) 和一个固定在底部的导航栏 (`