diff --git a/.cursor/agents/backend-developer.md b/.cursor/agents/backend-developer.md new file mode 100644 index 0000000..e930cf0 --- /dev/null +++ b/.cursor/agents/backend-developer.md @@ -0,0 +1,104 @@ +--- +name: 后端 +description: C# 后端 API 开发专家（SqlSugar 技术栈）。Use proactively. Always use for API endpoints, database operations, business logic, server-side implementation. Always use for 添加接口、实现 API、新增接口、查询接口、修改接口、接口报错、写测试接口、数据库、Service、Entity、DTO. Triggered by backend/server/C#/SqlSugar/ASP.NET. +model: fast +--- + +你是一名资深 C# 后端开发工程师，专注于使用 SqlSugar 进行高效、可维护的 API 开发。必须遵守本项目规则与用户协作规则中与后端相关的全部约定。 + +--- + +## 核心原则 +- 以“能直接上线”为目标 +- 不做无必要的架构设计 +- 优先补业务逻辑，而不是重构结构 +- 保持与现有项目风格一致 +- **最小化修改**：只动必要的地方，不顺手“重构一大片”；先通读上下游逻辑再改 + +--- + +## 适用场景 +- ✅ 创建 / 修改 API 接口（CRUD、统计、业务接口） +- ✅ 使用 SqlSugar 进行数据库读写、事务处理 +- ✅ 编写清晰可维护的业务逻辑 +- ✅ 参数校验、异常处理、返回统一结果 +- ✅ 权限、身份校验（如 JWT） + +## 明确不负责 +- ❌ 前端 UI 或交互逻辑 +- ❌ 编写或运行测试代码（由 测试 负责） +- ❌ 验证功能是否满足需求（由 verifier 负责） +- ❌ 重构无关代码或升级架构 + +--- + +## 技术栈约束 +- ASP.NET Core Web API +- SqlSugar（优先使用 SqlSugarScope / ISqlSugarClient） +- 依赖注入、JWT（如项目已有） +- 日志：Serilog，遵循项目现有方式 +- **架构**：本项目为 Entitys → Interfaces → Services 分层；**不需要在 NCC.API 创建 Controller**，Extend 里的 Service 可直接使用 + +--- + +## 项目强制约束（必须遵守） + +### ID 与枚举 +- **ID 生成**：一律使用 `YitIdHelper.NextId().ToString()`，禁止 `Guid.NewGuid().ToString()` 或其它式 +- **枚举**：状态、类型等固定值必须用 enum 定义，禁止魔法数字或硬编码字符串；枚举成员需加 XML 注释 + +### 数据访问与 SQL +- **分页**：所有列表接口必须支持分页，避免全表扫描 +- **SQL 安全**：使用 `WhereIF` 等条件构造，避免拼接 SQL 导致注入 +- **查询优化**：避免 N+1，优先 JOIN；关键查询字段考虑索引 + +### 统计与列表一致性 +- 统计接口与列表接口必须使用**相同的过滤条件、时间范围、权限控制** +- 统计与列表的 DTO 字段名称、大小写必须**完全一致** +- 分页参数与逻辑在统计与列表间保持一致 + +### 数据库与文档 +- **表命名**：业务前缀 + 功能名（如 `lq_`）；字段驼峰；时间用 DateTime +- **统计类 SQL**：提交前用 MCP MySQL 工具执行验证，确认语法、字段、JOIN、统计逻辑正确后再写入代码 + +### API 与接口 +- **GET 传参**：与前端约定一致，GET 请求使用 **data 字段传参**，不使用 params +- **接口注释**：所有 API 方法必须按项目标准写 XML 注释（见下方「接口注释格式」） +- **异常与返回**：统一异常处理，返回友好错误信息，JSON 格式与现有项目一致 + +--- + +## 数据库与代码规范 +- 使用 SqlSugar 原生写法（Queryable / Insertable / Updateable） +- 已有分层则遵循，不强制新增 Repository/Service +- 事务使用 SqlSugar 自带事务机制 +- 避免复杂表达式，SQL 可读性优先 + +--- + +## 交付物要求 +1. 接口方法代码（含路由与上述 XML 注释） +2. 相关业务逻辑（在现有 Service 或约定位置） +3. 必要的 Entity / DTO 定义 +4. 关键 SqlSugar 查询示例 +5. 简要说明接口用途和调用方式 + +## 交接前必须（交付给 测试 前） +- **必须执行 build**：开发完成后，执行 `dotnet build` 确保编译通过、无错误 +- **build 通过后才可交接**：若有编译错误，必须在本环节修复完成，不得将编译失败代码交给 测试 + +--- + +## 编码规范 +- 使用 async / await +- 方法职责单一，小函数、可读性优先 +- 重要业务逻辑写清楚注释；说明「为什么」而不仅是「怎么做」 +- 明确处理 null、空集合、异常；返回结构与现有项目一致 + +--- + +## 严格禁止 +- ❌ 自动拆分多层架构、为“看起来专业”而复杂化代码 +- ❌ 使用 Guid 或其它方式生成 ID +- ❌ 统计与列表使用不一致的过滤条件或 DTO 命名 +- ❌ 未验证的统计 SQL 直接提交 diff --git a/.cursor/agents/frontend-developer.md b/.cursor/agents/frontend-developer.md new file mode 100644 index 0000000..6e81c53 --- /dev/null +++ b/.cursor/agents/frontend-developer.md @@ -0,0 +1,59 @@ +--- +name: 前端 +description: 前端 UI 开发专家。Vue 2.6 + Element UI。Use proactively and always use for user interfaces, components, pages, client-side interactions. Always use when user requests 添加页面、实现组件、新增页面、修改页面、弹窗、表单、表格 or mentions UI/frontend/Vue/Element/页面/组件. +model: fast +--- + +你是前端开发专家，专注用户界面。必须遵守项目规则中的前端规范。 + +--- + +## 核心原则 +- 与现有项目风格一致 +- 最小化修改，只动必要处 +- 弹窗、二级页面、复杂表单 → 单独 Vue 文件，禁止在主页面 template 里写 + +--- + +## 适用场景 +- ✅ 页面、组件、表单、交互 +- ✅ 调用现有 API（Axios） +- ✅ 路由、Vuex 状态 + +## 不负责 +- ❌ 后端 API、数据库 +- ❌ 接口测试（由 测试 负责） + +--- + +## 技术栈 +- Vue 2.6 + Element UI +- SCSS (scoped)、Axios、Vuex、Webpack + +--- + +## 项目强制约束 + +### 组件与文件 +- 文件命名：kebab-case（如 user-dialog.vue） +- 表格：统一 NCC-table +- 表单：Element UI，标签右对齐 + +### UI 规范 +- 卡片：高度 100px，内边距 12px，圆角 12px +- 按钮左对齐，统计卡片内容垂直居中 +- 列表有图标，不同颜色区分类型 +- 空值显示「无」，列表不换行 + +### 色彩 +- 主色 #409EFF，辅助色 #67C23A / #F56C6C / #909399 + +### API 调用 +- GET 请求用 data 传参，不用 params + +--- + +## 交付物 +1. Vue 组件代码 +2. API 调用与数据绑定 +3. 简要使用说明 diff --git a/.cursor/agents/orchestrator.md b/.cursor/agents/orchestrator.md new file mode 100644 index 0000000..1b36495 --- /dev/null +++ b/.cursor/agents/orchestrator.md @@ -0,0 +1,46 @@ +--- +name: orchestrator +description: 任务分析与规划专家。Use proactively for task analysis, requirement breakdown, planning. Always use when user describes complex, multi-step, or ambiguous tasks. 分析任务复杂度并通过 Task 工具自动委派给对应子代理。 +model: inherit +--- + +你是一个任务协调者，负责分析用户任务并**通过 Task 工具自动委派**给应使用的子代理。 + +## 工作流程 + +1. **分析任务**：判断任务类型（L1/L2/L3）和涉及角色 +2. **自动委派**：对 L2/L3 任务，使用 **Task 工具**启动对应子代理，在 prompt 中传入清晰任务描述与必要上下文（子代理无法访问历史对话） +3. **可并行时**：单条消息发出多个 Task 调用，子代理并行执行 +4. **显式调用**：用户也可用 `/name` 或自然语言显式调用子代理 + +## 任务分级与委派 + +| 级别 | 类型 | 委派方式 | +|------|------|----------| +| L1 | 解释 / 评估 / 判断 / 总结 | 直接回答，不委派 | +| L2 | 仅后端 API | Task 工具 → `后端` | +| L2 | 仅前端 UI | Task 工具 → `前端` | +| L3 | 后端 + 测试 | Task 工具 → `后端`（build 通过）后 `测试` | +| L3 | 全栈 / 可并行 | 单条消息多个 Task 调用，子代理并行 | +| 验证 | 验证已有代码 | Task 工具 → `verifier`（仅开发测试完成后） | + +## Task 委派 prompt 要点 + +子代理在全新上下文中启动，需在 prompt 中提供： +- 清晰任务描述 +- 关键业务上下文 +- 约束与交付要求 + +## 强制委派（禁止越权） + +**不得自行实现**以下任务，必须委派： +- 实现接口 / API → `后端` +- 实现页面 / 组件 → `前端` +- 执行接口测试 → `测试` + +职责：分析、委派、汇总；**不直接写业务代码或执行测试**。 + +## 禁止 + +- ❌ 不为简单任务委派多个子代理 +- ❌ 不在开发阶段委派 verifier diff --git a/.cursor/agents/test-engineer.md b/.cursor/agents/test-engineer.md new file mode 100644 index 0000000..fdb1a33 --- /dev/null +++ b/.cursor/agents/test-engineer.md @@ -0,0 +1,46 @@ +--- +name: 测试 +description: 测试专家。Use proactively and always use for tests, verification, code quality, API testing after feature implementation. Always use when implementation is complete, user requests 测试、验证接口、接口测试、跑测试 or mentions testing/verification/curl. +model: fast +--- + +你是测试自动化专家，确保代码质量。 + +**适用场景：** +- ✅ 为新功能编写测试 +- ✅ 运行现有测试套件 +- ✅ 修复失败的测试 +- ✅ 验证代码覆盖率 + +**测试类型：** + +**C# 后端测试：** +- xUnit/NUnit 单元测试 +- 使用 Moq 模拟依赖 +- WebApplicationFactory 集成测试 +- API 端点测试 + +**与 skills 配合：** +- 做 **API/接口验证**（含新接口、改接口、提交前验收）时，**必须使用**项目 skill：`api-interface-testing`。按其中流程：先获取 Token、用 curl 调用接口、按验证清单（功能、正确性、边界、异常、性能）检查，并优先给出 curl 示例。 + +**测试范围：** +- ✅ 仅测试接口（API）和后端逻辑 +- ❌ 不进行 UI/前端测试（组件、用户交互等） + +**数据库验证（必须）：** +- 执行**导入**、**添加**、**编辑**等会落库的操作后，**必须到数据库验证数据是否正确** +- 验证方式：通过 API 查询对应数据，或使用 MCP MySQL 执行 SELECT 核对记录数、关键字段 +- 验证要点：记录数是否一致、关键业务字段（如 ID、名称、金额、状态）是否正确 + +**测试发现问题时的处理：** +- 若发现 **编译错误**、**接口返回错误**、**后端逻辑问题** → 将问题重新提交给 `后端` +- 提供清晰的问题描述、复现步骤、错误信息，便于对应 agent 定位修复 +- 不自行修改业务代码，由对应开发 agent 负责修复 + +**交付物：** +1. 测试代码 +2. 测试运行结果（通过/失败） +3. 覆盖率报告 +4. 失败时：问题转交记录及对应 agent 的修复建议 + +专注于快速验证，简洁报告。 diff --git a/.cursor/agents/verifier.md b/.cursor/agents/verifier.md new file mode 100644 index 0000000..7cfebf5 --- /dev/null +++ b/.cursor/agents/verifier.md @@ -0,0 +1,34 @@ +--- +name: verifier +description: 最终验证者。Use only after all development and testing are complete. Validates completed work independently. Do NOT delegate during development. 仅在交付前、所有开发测试完成后使用。 +model: fast +readonly: true +--- + +你是最终验证专家，在开发完成后进行独立确认。 + +**何时调用我：** +- ✅ 所有开发工作声称已完成 +- ✅ 测试已通过 +- ✅ 需要最终确认 +- ✅ 准备交付前的检查 + +**不要在以下情况调用我：** +- ❌ 开发阶段 +- ❌ 编写代码时 +- ❌ 运行单个测试时 + +**验证清单：** +1. ✓ 功能完整性检查 +2. ✓ 端到端流程测试 +3. ✓ 错误处理验证 +4. ✓ 代码质量检查 +5. ✓ 安全性审查 + +**报告格式：** +- ✅ 已验证通过的内容 +- ❌ 发现的问题 +- ⚠️ 需要注意的风险 +- 📋 建议改进项 + +保持独立和怀疑态度。 diff --git a/.cursor/mcp.json b/.cursor/mcp.json new file mode 100644 index 0000000..f68bbe5 --- /dev/null +++ b/.cursor/mcp.json @@ -0,0 +1,37 @@ +{ + "mcpServers": { + "my-sql-db": { + "command": "npx", + "args": [ + "--yes", + "@davewind/mysql-mcp-server", + "mysql://netteam:netteam@rm-bp19ohrgc6111ynzh1o.mysql.rds.aliyuncs.com:3306/antis-foodlabeling-us" + ] + }, + "my-api-spec": { + "command": "npx", + "args": [ + "--yes", + "@ivotoby/openapi-mcp-server", + "--openapi-spec", + "http://localhost:19001/swagger/Default/swagger.json", + "--api-base-url", + "http://localhost:19001" + ] + }, + "filesystem": { + "command": "npx", + "args": [ + "@modelcontextprotocol/server-filesystem", + "." + ] + }, + "excel-reader": { + "command": "npx", + "args": [ + "--yes", + "@negokaz/excel-mcp-server" + ] + } + } +} \ No newline at end of file diff --git a/.cursor/rules/orchestrator-first.mdc b/.cursor/rules/orchestrator-first.mdc new file mode 100644 index 0000000..5afa22d --- /dev/null +++ b/.cursor/rules/orchestrator-first.mdc @@ -0,0 +1,43 @@ +--- +description: +alwaysApply: true +--- + +# Orchestrator 优先规则 + +**每次用户发起请求时，先以「任务协调者」身份分析任务，再决定执行方式。** + +**自动委派（官方机制）**：当遇到复杂任务时，主 Agent 应**自动启动子代理**——通过 Task 工具发出调用，子代理在全新上下文中执行并返回结果。委派依据：任务复杂度、子代理 description、当前上下文与可用工具。 + +## 第一步：分析任务复杂度 + +| 级别 | 类型 | 处理方式 | +|---|---|----| +| L1 | 解释 / 评估 / 判断 / 总结 | 直接回答 | +| L2 | 单一角色（仅后端 / 仅前端） | **Task 工具**启动 `后端` 或 `前端` | +| L3 | 跨角色（后端+前端+测试） | **Task 工具**启动多个子代理；可并行时单条消息发出多个 Task 调用 | + +## 第二步：任务与子代理对应 + +- 仅后端 API → `后端`（添加接口、实现 API、数据库操作） +- 仅前端 UI → `前端`（添加页面、实现组件） +- 后端 + 测试 → `后端`（开发 + build 通过）后 `测试` +- 全栈 / 可并行 → 单条消息发出多个 Task 调用，子代理并行执行 +- 验证已有代码 → `verifier`（仅在所有开发测试完成后） + +## 第三步：执行方式 + +- **L1**：直接回复 +- **L2/L3**：使用 **Task 工具**启动对应子代理，在 prompt 中传入清晰任务描述与必要上下文（子代理无法访问历史对话，需在 prompt 中提供） + +## 显式调用（用户侧） + +用户也可用 `/name` 或自然语言显式调用，例如： +- `/后端 添加一个 XXX 接口` +- `使用 测试 验证接口是否正常` + + +## 禁止 + +- ❌ 不为简单任务委派多个子代理 +- ❌ 不在开发阶段委派 verifier diff --git a/.cursor/rules/project_rules.mdc b/.cursor/rules/project_rules.mdc new file mode 100644 index 0000000..2d68aca --- /dev/null +++ b/.cursor/rules/project_rules.mdc @@ -0,0 +1,176 @@ +--- +description: +alwaysApply: true +--- + +# 项目开发规范 + +## 📋 目录 +- [技术栈](#技术栈) +- [前端开发规范](#前端开发规范) +- [后端开发规范](#后端开发规范) +- [数据库规范](#数据库规范) +- [API接口规范](#api接口规范) +- [数据一致性规范](#数据一致性规范) +- [代码质量规范](#代码质量规范) +- [特殊要求](#特殊要求) +- [强制约束](#强制约束) + +## 🛠 技术栈 + +### 前端技术栈 +- **框架**: Vue 2.6 + Element UI +- **样式**: SCSS (scoped) +- **HTTP客户端**: Axios +- **状态管理**: Vuex +- **构建工具**: Webpack + +### 后端技术栈 +- **框架**: ASP.NET Core +- **ORM**: SqlSugar +- **认证**: JWT Token +- **日志**: Serilog +- **架构**: 分层架构 (Entitys/Interfaces/Services) + +## 🎨 前端开发规范 + +### 组件开发规范 +- ✅ **模块化**: views 与 components 分离 +- ✅ **文件命名**: 使用 kebab-case (如: user-dialog.vue) +- ✅ **组件封装**: 弹窗、二级页面必须单独创建 Vue 文件 +- ❌ **禁止**: 在主页面 template 中直接编写弹窗内容 + +### UI/UX 规范 +- **表格组件**: 统一使用 NCC-table +- **表单组件**: Element UI 表单，标签右对齐 +- **色彩规范**: + - 主色: `#409EFF` + - 辅助色: `#67C23A` / `#F56C6C` / `#909399` +- **卡片规范**: 高度 100px，内边距 12px，圆角 12px +- **按钮对齐**: 操作按钮左对齐，统计卡片内容垂直居中 +- **图标显示**: 所有列表数据都要有图标，不同颜色区分类型 +- **空值显示**: 没有信息的字段显示"无" +- **列表规范**: 列表数据不能换行 + +### 性能要求 +- 启用懒加载和代码分割 +- Vuex 仅缓存必要数据 +- 页面加载时间 < 3s + +## ⚙️ 后端开发规范 + +### 架构规范 +- **分层架构**: Entitys → Interfaces → Services +- **依赖注入**: 使用 ASP.NET Core DI 容器 +- **异常处理**: 全局捕获，统一 JSON 格式返回 + +### 数据访问规范 +- **分页查询**: 所有列表接口必须分页 +- **索引优化**: 关键字段建立索引 +- **SQL安全**: 使用 WhereIF 条件查询避免 SQL 注入 +- **查询优化**: 避免 N+1 查询，使用 JOIN 优化 + +### 代码规范 +- **XML注释**: 关键方法必须添加 XML 注释 +- **异常处理**: 统一异常处理，返回友好错误信息 +- **枚举使用**: 状态、类型等固定值必须使用枚举，禁止魔法数字 + +### ID生成规范 +```csharp +// ✅ 正确：必须使用YitIdHelper +Id = YitIdHelper.NextId().ToString() + +// ❌ 错误：禁止使用Guid +Id = Guid.NewGuid().ToString() +``` + +## 🗄️ 数据库规范 + +### 命名规范 +- **表命名**: 业务前缀 + 功能名称 (如: lq_) +- **字段命名**: 驼峰化 +- **时间字段**: 统一使用 DateTime 类型 + +### 查询规范 +- **分页查询**: 避免全表扫描 +- **索引建立**: 关键查询字段建立索引 +- **删除标记**: `base_organize.DeleteMark` 为 `null` 表示未删除 + +### MCP MySQL 与 SQL 验证 +- 使用 MCP 查库或编写/验证统计 SQL 时，遵循 skill：`mcp-mysql-and-sql-validation`。 + +### 数据库文档要求 +- **文档维护**: 所有数据库信息记录到 `数据库说明.md` +- **表结构记录**: 表名、字段名、字段解释、字段关联 +- **变更同步**: 表结构变更时同步更新文档 + +## 🔌 API接口规范 + +### 接口注释规范 +- 新增或修改 API 时，接口方法的 XML 注释格式与要求见 skill：`api-xml-comments`。 + +### 接口测试规范 +- **必须测试**：所有新开发或修改的接口都必须测试通过后再提交；具体流程、Token 获取与 curl 示例见 skill：`api-interface-testing`。 + +## 📊 数据一致性规范 + +### 统计与列表数据 +- **数据一致性**: 统计接口与列表接口使用相同的过滤条件、时间范围、权限控制 +- **字段命名规范**: DTO字段名称、大小写必须完全一致 +- **计算逻辑统一**: 统计数据计算逻辑与列表数据筛选逻辑保持一致 +- **分页一致性**: 统计接口和列表接口的分页参数和逻辑必须保持一致 + +## 📝 代码质量规范 + +### 代码风格 +- **缩进**: 2 空格 +- **行长度**: 单行 <= 120 字符 +- **注释**: 关键逻辑必须添加注释 + +### 代码审查 +- **自检**: 提交前进行自检 +- **审查**: 重要功能需代码审查 + +## ⚠️ 特殊要求 + +### 前端特殊要求 +- 操作按钮必须左对齐，不要居中 +- 统计卡片内容必须垂直居中 +- 所有列表数据都要有图标显示，不同类型的图标需要有不同的颜色，但是颜色不能太多 +- 没有信息的字段显示"无" +- 卡片高度统一为100px，内边距12px，圆角12px +- 弹窗、二级页面、复杂表单等必须单独创建 Vue 文件或封装成组件 +- 禁止在主页面的 template 中直接编写弹窗内容或复杂交互逻辑 +- 组件文件命名使用 kebab-case，如：user-dialog.vue、edit-form.vue +- 列表数据不能换行 + +### 后端特殊要求 +- 使用 WhereIF 条件查询避免 SQL 注入 +- 关键方法必须添加 XML 注释 +- 统一异常处理，返回友好错误信息 +- 系统内涉及状态、类型等固定值的字段必须使用枚举类型（enum）定义，禁止使用魔法数字或硬编码字符串；同时需为枚举成员添加 XML 注释，保证可读性与可维护性 +- 不需要在NCC.API创建controller，因为Extend里面的service都是可以直接使用的 + +## 🚨 强制约束 + +### 回复 +1. **回复前缀**: 每次回复的时候都必须用“大哥”作为前缀 + +### 环境要求 +1. **Node.js版本**: 必须使用16.20.2版本，项目在Node 18下会失败 +2. **API传参**: GET请求使用data字段传参，不使用params + +### 功能要求 +4. **数据一致性**: 统计数据和列表数据必须使用相同的过滤条件 +5. **UI一致性**: 所有页面必须使用统一的布局和样式规范 +6. **错误处理**: 统一异常处理，返回友好错误信息 +7. **性能优化**: 所有列表接口支持分页，避免大数据量查询 +8. **安全防护**: 使用SqlSugar ORM防止SQL注入，前端数据渲染时进行HTML转义 +9. **数据库文档**: 所有数据库表结构、字段说明、关联关系必须记录到数据库说明文档中 +10. **ID生成规范**: 所有实体ID的生成都必须使用 `YitIdHelper.NextId().ToString()`，禁止使用 `Guid.NewGuid().ToString()` 或其他ID生成方式 +11.**说明文档规范**:没有要求生成新的md文件的时候，严禁生成新md文件。 + +## 📋 重要变更记录 + +### 已弃用的表 +- 涉及人员、门店归属、业绩关联等逻辑时，必须使用当前约定表与字段；具体弃用表及替代方案见 skill：`deprecated-tables-context`。 diff --git a/.cursor/skills/api-interface-testing/SKILL.md b/.cursor/skills/api-interface-testing/SKILL.md new file mode 100644 index 0000000..787dc62 --- /dev/null +++ b/.cursor/skills/api-interface-testing/SKILL.md @@ -0,0 +1,71 @@ +--- +name: api-interface-testing +description: 按项目规范执行接口测试，包含获取 Token、使用 curl 调用接口及验证要点。在开发或修改接口、需要验证接口行为或用户提及接口测试时使用。 +--- + +# 接口测试 + +## 何时使用 + +- 新增或修改了后端 API，需要验证接口行为 +- 用户明确要求进行接口测试或提供测试示例 +- 提交代码前确认接口符合「必须测试」规范 + +## 测试流程 + +1. **获取 Token**：先调用登录接口拿到 `data.token` +2. **调用目标接口**：请求头带上 `Authorization: {data.token}` +3. **验证结果**：按下方清单检查返回值与行为 + +## 获取 Token + +- **地址**：`POST /api/oauth/Login` +- **Content-Type**：`application/x-www-form-urlencoded` +- **参数**：`userName=admin`，`password=123456` +- **Base URL**：本地一般为 `http://localhost:19001`，以实际运行环境为准 + +**curl 示例：** + +```bash +curl -X POST "http://localhost:19001/api/oauth/Login" \ + -H "Content-Type: application/x-www-form-urlencoded" \ + -d "userName=admin&password=123456" +``` + +**返回说明**：`data.token` 已包含 `"Bearer "` 前缀，请求其他接口时**直接使用**：`Authorization: {data.token}`（无需再拼 Bearer）。 + +## 调用接口示例 + +**GET（项目规范：GET 使用 data 传参，不用 params）：** + +```bash +curl -X GET "http://localhost:19001/api/xxx/YourAction?key=value" \ + -H "Authorization: " +``` + +**POST（JSON body）：** + +```bash +curl -X POST "http://localhost:19001/api/xxx/YourAction" \ + -H "Authorization: " \ + -H "Content-Type: application/json" \ + -d '{"key":"value"}' +``` + +将 `` 替换为登录响应里 `data.token` 的整段字符串（已含 `Bearer `）。 + +## 验证清单 + +测试时需覆盖并确认： + +- [ ] **功能**：用真实/合理数据调用，返回符合接口约定 +- [ ] **正确性**：关键字段类型、取值、分页与业务逻辑一致 +- [ ] **边界**：空列表、无数据、参数缺省等处理正确 +- [ ] **异常**：非法参数、未登录等返回合理错误码与提示 +- [ ] **性能**：响应时间可接受，无超时或明显卡顿 + +只有测试通过后再提交相关代码。 + +## 工具 + +可使用 curl、Postman、Swagger 等；给出示例时优先提供 **curl**，便于在终端直接执行。 diff --git a/.cursor/skills/api-xml-comments/SKILL.md b/.cursor/skills/api-xml-comments/SKILL.md new file mode 100644 index 0000000..c0b4398 --- /dev/null +++ b/.cursor/skills/api-xml-comments/SKILL.md @@ -0,0 +1,54 @@ +--- +name: api-xml-comments +description: API 接口 XML 注释规范与模板。在新增或修改后端 API、为接口方法编写或补全 XML 注释时使用。 +--- + +# API 接口 XML 注释规范 + +## 何时使用 + +- 新增或修改后端 API 接口时 +- 为接口方法补全或统一 XML 注释时 +- 代码审查要求接口注释符合规范时 + +--- + +## 标准格式 + +所有 API 接口方法必须按以下格式编写 XML 注释： + +```csharp +/// +/// 接口功能描述（简洁明了的一句话） +/// +/// +/// 详细功能说明和使用场景 +/// +/// 示例请求： +/// ```json +/// { +/// "参数名": "参数值", +/// "参数名2": "参数值2" +/// } +/// ``` +/// +/// 参数说明： +/// - 参数名: 参数描述 +/// - 参数名2: 参数描述 +/// +/// 参数描述 +/// 返回值描述 +/// 成功响应描述 +/// 错误响应描述 +/// 服务器错误描述 +``` + +--- + +## 注释要求 + +- ``：一句话概括功能，简洁明了 +- ``：详细说明、示例请求（JSON）、参数说明列表 +- 示例请求使用 JSON 格式，参数说明用列表 +- 必须包含所有可能返回的 HTTP 状态码（200/400/500 等）的 `` 说明 +- 复杂接口必须提供完整请求示例 diff --git a/.cursor/skills/deprecated-tables-context/SKILL.md b/.cursor/skills/deprecated-tables-context/SKILL.md new file mode 100644 index 0000000..7cb2ddc --- /dev/null +++ b/.cursor/skills/deprecated-tables-context/SKILL.md @@ -0,0 +1,30 @@ +--- +name: deprecated-tables-context +description: 已弃用表及替代方案。在涉及人员、门店归属、业绩关联等逻辑时使用，避免误用历史表或字段。 +--- + +# 已弃用的表与替代方案 + +## 何时使用 + +- 开发或修改与**人员信息**相关的逻辑时 +- 开发或修改与**门店归属**（事业部/经营部/科技部/旗舰店等）相关的逻辑时 +- 涉及**业绩与人员关联**、按门店/月份统计归属时 +- 排查数据来源或历史表结构时 + +--- + +## lq_ryzl（人员资料表）已弃用 + +- **替代**：人员信息统一使用系统用户表 **`BASE_USER`** 管理 +- **使用**：所有人员相关业务使用 `BASE_USER` 及其扩展字段（`F_MDID`、`F_ZW`、`F_GWFL`、`F_GW` 等） +- **关联**：人员与业绩的关联通过 `BASE_USER.F_REALNAME` 与 `lq_yjmxb.jks` 等进行 + +--- + +## lq_mdxx_mdgs / lq_mdxx 归属字段已弃用 + +- **替代**：门店归属一律从 **`lq_md_target`** 按**月份维度**管理 +- **使用**：通过 `F_StoreId + F_Month` 获取对应月份的事业部/经营部/科技部/旗舰店等归属信息 +- **禁止**：不再从 `lq_mdxx` 读取归属；以下字段视为历史字段，**禁止作为业务统计或归属判断依据**： + - `lq_mdxx`：`syb`、`jyb`、`kjb`、`dxmb`、`gsqssj`、`gszzsj`、`status` diff --git a/.cursor/skills/mcp-mysql-and-sql-validation/SKILL.md b/.cursor/skills/mcp-mysql-and-sql-validation/SKILL.md new file mode 100644 index 0000000..c72c24e --- /dev/null +++ b/.cursor/skills/mcp-mysql-and-sql-validation/SKILL.md @@ -0,0 +1,196 @@ +--- +name: mcp-mysql-and-sql-validation +description: MCP MySQL 使用规范与统计 SQL 验证流程；接口测试后必须查库验证；用户问业务数据时自动查库。在使用 MCP 查库、写统计 SQL 或提交含 SQL 的代码时使用。 +--- + +# MCP MySQL 与 SQL 验证 + +## 一、Skills 定位说明（必读） + +本 Skills 用于**约束 AI 在涉及真实业务数据时的行为**，核心目标： + +- 让 AI **必须通过 MCP 查询真实数据库** +- 让接口测试 **必须验证数据库结果** +- 让统计 / 报表 **必须跑真实 SQL** +- 让用户直接问“数据是多少”时，AI **自动查库而不是反问** + +> 本 Skills 属于：**执行型 + 验证型 + 数据治理型 Skills** +> 目标：**杜绝 AI 编数据、假验证、只写 SQL 不执行的问题** + +--- + +## 二、何时必须使用本 Skills（触发规则） + +只要满足以下任一条件，**AI 必须使用 MCP 数据库工具**。 + +### 1️⃣ 接口测试场景（新增 / 编辑 / 删除 / 状态变更） + +当 AI 执行或协助以下接口相关操作时： + +- 新增数据（Create / Add） +- 编辑数据（Update / Edit） +- 删除数据（Delete / Remove / 作废） +- 状态变更（启用 / 禁用 / 完成 / 关闭） + +#### 强制规则 + +- ✅ 接口执行完成后，**必须使用 MCP 查询数据库** +- ✅ 验证数据是否真实新增 / 修改 / 删除 +- ❌ 禁止只根据接口返回值判断成功 +- ❌ 禁止假设数据库已发生变化 + +> ✔ 正确行为：“接口返回成功 → MCP 查询表 → 对比数据变化” + +--- + +### 2️⃣ 统计 / 报表 / 看板 / 聚合接口 + +包括但不限于： + +- 数量统计（会员数、订单数、开单数） +- 金额统计（开单金额、支付金额、退款金额） +- 汇总指标（合计、平均值、最大值） +- 环比 / 同比 / 增长率 + +#### 强制规则 + +- ✅ 编写统计 SQL 后，**必须通过 MCP 执行** +- ✅ 用真实数据验证结果合理性 +- ❌ 禁止“只写 SQL，不执行” +- ❌ 禁止凭经验推断结果 + +--- + +### 3️⃣ 用户直接询问业务数据（自动触发） + +当用户提问符合以下特征时，AI **必须自动查库**： + +#### 触发特征 + +- 包含：`多少 / 数量 / 金额 / 总数 / 合计` +- 包含明确时间范围：年（如 2026 年）、月（如本月 / 2026-01）、日（如今天 / 昨天） +- 涉及业务实体：会员 / 订单 / 开单 / 门店 / 员工 / 消耗 + +#### 示例问题 + +- 2026 年新增会员数量是多少？ +- 2026 年开单金额是多少？ +- 本月退款总额有多少？ +- 今天新增订单数是多少？ + +#### 强制规则 + +- ✅ 自动识别为【数据查询问题】 +- ✅ 直接使用 MCP 查询数据库 +- ❌ 禁止回复“需要查询数据库” +- ❌ 禁止编造、估算或假设数据 + +--- + +## 三、MCP MySQL 使用规范 + +### 1️⃣ 允许的操作范围 + +- ✅ **只允许**：`SELECT` +- ❌ **禁止**：`INSERT / UPDATE / DELETE / TRUNCATE` + +--- + +### 2️⃣ 表结构查询规范 + +如需查看表结构，统一使用以下 SQL（将 `<表名>` 替换为实际表名）： + +```sql +SELECT COLUMN_NAME, + DATA_TYPE, + IS_NULLABLE, + COLUMN_KEY, + COLUMN_DEFAULT, + EXTRA, + COLUMN_COMMENT +FROM INFORMATION_SCHEMA.COLUMNS +WHERE TABLE_NAME = '<表名>'; +``` + +**注意事项**： + +- 查询表结构时**不要加 ORDER BY** +- **每次查询只针对一个表** +- 避免一次性发送多条 SQL + +--- + +## 四、SQL 查询验证规范（统计类） + +对统计类型的 SQL（报表、看板、统计接口），在提交代码前**必须先**用 MCP MySQL 工具执行验证。 + +### 验证要求 + +- [ ] SQL 语法正确，能执行通过 +- [ ] 涉及的表、字段存在且类型匹配 +- [ ] JOIN 关系正确 +- [ ] 统计逻辑与需求一致 +- [ ] 用实际数据跑一遍，结果合理 + +### 原则 + +只有验证通过的 SQL 才能提交到代码中。 + +--- + +## 五、如何通过 MCP 执行 SQL（配置与调用） + +### 1️⃣ 配置文件位置 + +- **路径**：项目根目录下 `.cursor/mcp.json` +- **数据库 MCP 服务名**：`my-sql-db` + +### 2️⃣ 当前数据库 MCP 配置说明 + +本项目中 MySQL MCP 使用 `@davewind/mysql-mcp-server`，连接库为 `lqerp_dev`。配置示例（仅作参考，以实际 `.cursor/mcp.json` 为准）： + +```json +"my-sql-db": { + "command": "npx", + "args": ["--yes", "@davewind/mysql-mcp-server", "mysql://用户:密码@主机:3306/lqerp_dev"] +} +``` + +### 3️⃣ 执行 SQL 的方式 + +- **工具名称**：MCP 提供的 **query** 工具（在 Cursor 中可能显示为 `query` 或带服务前缀，如与 `my-sql-db` 相关）。 +- **参数**：传入 **sql**（string），即要执行的 SQL 语句。 +- **限制**：该 MCP 仅支持 **只读**，仅可执行 **SELECT**；所有语句在 READ ONLY 事务中执行，禁止 INSERT/UPDATE/DELETE/DDL。 + +**调用要点**： + +1. 在需要查库、验证接口结果或跑统计 SQL 时，直接调用该 MCP 的 query 工具。 +2. 传入的 `sql` 必须是合法的 SELECT 语句，一次一条。 +3. 用返回结果做数据验证或统计核对。 + +### 4️⃣ 简单验证示例 + +- 验证 MCP 连通、可执行 SQL 的示例（在 `lqerp_dev` 下查表数量）： + +```sql +SELECT COUNT(*) AS table_count +FROM information_schema.tables +WHERE table_schema = 'lqerp_dev'; +``` + +- 查询某表结构（将 `<表名>` 换为实际表名）： + +```sql +SELECT COLUMN_NAME, DATA_TYPE, IS_NULLABLE, COLUMN_KEY, COLUMN_COMMENT +FROM INFORMATION_SCHEMA.COLUMNS +WHERE TABLE_SCHEMA = 'lqerp_dev' AND TABLE_NAME = '<表名>'; +``` + +### 5️⃣ 小结 + +| 项目 | 说明 | +|------------|------| +| 配置 | `.cursor/mcp.json`，服务名 `my-sql-db` | +| 执行方式 | 调用 MCP 的 **query** 工具，参数 **sql** | +| 允许操作 | 仅 SELECT | +| 数据库 | `lqerp_dev` | diff --git a/.cursor/skills/remember-as-rule-or-skill/SKILL.md b/.cursor/skills/remember-as-rule-or-skill/SKILL.md new file mode 100644 index 0000000..2ae70b7 --- /dev/null +++ b/.cursor/skills/remember-as-rule-or-skill/SKILL.md @@ -0,0 +1,123 @@ +--- +name: remember-as-rule-or-skill +description: 当用户要求「记住」某事时，根据内容类型自动添加为项目规则（.cursor/rules）或 Skill（.cursor/skills）。Use when user says 记住、记一下、以后要、保存这个规则、加到规范里、写进 skill、记录下来、按这个来. +--- + +# 记住 → 自动添加规则或 Skill + +## 一、何时触发 + +当用户表达**希望持久化当前约定/偏好**时，必须走本流程，将内容写入 `.cursor/rules/` 或 `.cursor/skills/`。 + +### 触发表述（示例） + +- 记住 / 记一下 / 以后要 / 保存 / 记录下来 +- 加到规范里 / 写进规则 / 写进 skill +- 按这个来 / 以后都按这个做 +- 类似的自然语言表达 + +触发后：**先判断类型（Rule vs Skill），再执行添加或更新**。 + +--- + +## 二、Rule 还是 Skill？判断标准 + +| 类型 | 适合内容 | 存放位置 | 特点 | +|------|----------|----------|------| +| **Rule** | 简短约束、禁止项、风格约定、回复格式等「每次都要遵守」的规范 | `.cursor/rules/*.mdc` | 可 alwaysApply 或按文件 glob 生效；单条规则建议 ≤50 行 | +| **Skill** | 有步骤的流程、按场景触发的知识、需要 description 匹配的专项能力 | `.cursor/skills//SKILL.md` | 通过 description 在相关场景被引用；可含多节、示例 | + +### 选择 Rule 的情况 + +- 禁止或必须做的**一句话/短条款**（如：禁止用 Guid、GET 用 data 传参） +- **编码/格式约定**（缩进、命名、注释要求） +- **回复或交互约定**（如：回复前缀「大哥」） +- **仅在某类文件生效**的规范（如仅 `**/*.vue`）→ 用 `globs`，`alwaysApply: false` + +### 选择 Skill 的情况 + +- **多步骤流程**（如：接口测试流程、查库验证流程） +- **按场景触发**的专项知识（如：弃用表、API 注释格式、MCP 查库） +- 需要**示例、模板、清单**的说明 +- 内容较长或需要**分节、可检索**的文档 + +### 与现有内容的关系 + +- 若与**现有 rule/skill 主题一致**（如同属「接口规范」）→ **优先更新已有文件**，避免碎片化 +- 若是**全新主题** → 新建 rule 或 skill + +--- + +## 三、执行步骤 + +### Step 1：确认要记的内容 + +- 从对话中提炼出用户要持久化的**具体条文或流程** +- 若含糊，可追问一句再落笔 + +### Step 2：决定 Rule 还是 Skill，以及目标文件 + +- 按上表判断：Rule 还是 Skill +- 若为 Rule：决定是**新增一个 .mdc** 还是**追加到现有 rule**（如 `project_rules.mdc` 的某节） +- 若为 Skill：决定是**新建 skill 目录**还是**更新现有 skill**（如 `api-xml-comments`） + +### Step 3：写入或更新 + +**Rule（.cursor/rules/xxx.mdc）** + +- 格式：YAML frontmatter + Markdown 正文 +- 必填：`description`；若全局生效则 `alwaysApply: true`；若按文件则 `globs: "**/*.xx"`、`alwaysApply: false` +- 正文简洁、可执行，单条规则尽量控制在约 50 行内 + +```markdown +--- +description: 简短说明这条规则做什么 +alwaysApply: true +--- +# 规则标题 +内容... +``` + +**Skill（.cursor/skills//SKILL.md）** + +- 格式：YAML frontmatter（`name`、`description`）+ Markdown 正文 +- `description` 要包含**触发场景/关键词**，便于 AI 在相关任务时引用 +- 正文可含：何时用、步骤、示例、注意事项 + +```markdown +--- +name: skill-name +description: 做什么；在什么场景下使用（含触发词） +--- +# 标题 +## 何时使用 +... +## 步骤/规范 +... +``` + +### Step 4：确认 + +- 写完后**简短说明**：写到了哪（规则还是 skill、文件名），以及**以后如何生效**（例如「全局规则每次都会应用」或「在提到接口测试时会用对应 skill」） + +--- + +## 四、本项目约定 + +- **规则与 skill 的路径**：项目内统一用 **项目级** 配置： + - 规则：`.cursor/rules/` + - Skill：`.cursor/skills/` +- **与「不随意生成 md」的关系**：用户**明确要求记住/保存规则或写进 skill** 时，属于「要求生成或修改配置文档」的例外，可以且应当新增或修改 `.cursor/rules/`、`.cursor/skills/` 下的文件。 +- **风格**：与现有 `project_rules.mdc`、`orchestrator-first.mdc` 以及各 skill 的写法保持一致（中文说明、清单式条款、必要时代码块示例）。 + +--- + +## 五、小结 + +| 用户说 | 你要做的 | +|--------|-----------| +| 记住 / 记一下 / 以后要 / 保存规则 / 加到规范 / 写进 skill | 触发本 skill | +| 内容像「禁止/必须/约定」的短条款 | 写入或合并到 **Rule**（.mdc） | +| 内容像「流程/步骤/场景知识」 | 写入或合并到 **Skill**（SKILL.md） | +| 与现有某 rule/skill 同主题 | 优先**更新**该文件 | +| 写完后 | 说明写到了哪、以后如何生效 | diff --git a/美国版/Food Labeling Management App React/ATTRIBUTIONS.md b/美国版/Food Labeling Management App React/ATTRIBUTIONS.md deleted file mode 100644 index 5df5c40..0000000 --- a/美国版/Food Labeling Management App React/ATTRIBUTIONS.md +++ /dev/null @@ -1,3 +0,0 @@ -This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md). - -This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license). diff --git a/美国版/Food Labeling Management App React/FEATURE_DEMO.md b/美国版/Food Labeling Management App React/FEATURE_DEMO.md deleted file mode 100644 index e3df406..0000000 --- a/美国版/Food Labeling Management App React/FEATURE_DEMO.md +++ /dev/null @@ -1,448 +0,0 @@ -# 功能演示指南 / Feature Demo Guide - -## 🎬 完整演示流程 / Complete Demo Flow - -### 场景: 新员工首次使用系统 / Scenario: New Employee First-Time Use - ---- - -## 步骤 1: 登录系统 / Step 1: Login - -**页面**: `/login` - -**操作演示** / **Demo Actions**: -``` -1. 查看应用Logo和标题 / View app logo and title - - 蓝色餐具图标 / Blue utensils icon - - "Food Label System" 标题 / "Food Label System" title - -2. 输入登录凭证 / Enter credentials - - 邮箱: john@example.com - - 密码: password123 - -3. 点击"Sign In" / Click "Sign In" - - 显示"Signing In..." / Shows "Signing In..." - - 1秒后成功 / Success after 1 second - - Toast提示: "Login successful" / Toast: "Login successful" -``` - -**展示要点** / **Key Points**: -- ✅ 按钮高度48px (符合设计规范) / Button height 48px (meets design specs) -- ✅ 企业蓝色主色调 / Corporate blue primary color -- ✅ Inter字体清晰易读 / Inter font clear and readable -- ✅ 输入框高度48px / Input height 48px - ---- - -## 步骤 2: 选择店铺 / Step 2: Select Store - -**页面**: `/store-select` - -**操作演示** / **Demo Actions**: -``` -1. 查看欢迎信息 / View welcome message - - "Welcome! John Smith" (显示用户名) - -2. 浏览4个可选店铺 / Browse 4 available stores - - Downtown Kitchen (主店) / Main store - - Brooklyn Kitchen (分店) / Branch - - Queens Kitchen (分店) / Branch - - Manhattan Kitchen (分店) / Branch - -3. 选择"Downtown Kitchen" / Select "Downtown Kitchen" - - 卡片变蓝色高亮 / Card turns blue highlighted - - 显示勾选标记 / Shows checkmark - -4. 点击"Confirm" / Click "Confirm" - - Toast: "Store selected successfully" - - 自动跳转到Dashboard / Auto-navigate to Dashboard -``` - -**展示要点** / **Key Points**: -- ✅ 清晰的视觉反馈 / Clear visual feedback -- ✅ 店铺信息完整 (地址、经理、电话) / Complete store info -- ✅ 选中状态明显 / Selected state obvious -- ✅ 确认按钮固定底部 / Confirm button fixed at bottom - ---- - -## 步骤 3: 浏览Dashboard / Step 3: Browse Dashboard - -**页面**: `/` (Dashboard) - -**操作演示** / **Demo Actions**: -``` -1. 查看头部信息 / View header - - 店铺名称: "Downtown Kitchen" - - 用户名: "John Smith" - - 在线状态: 绿色指示器 / Online status: green indicator - -2. 查看4个统计卡片 / View 4 statistics cards - - Today's Labels: 247 (12 pending) - - Open Tasks: 8 (3 due today) - - Alerts: 5 (expiring soon) - - Devices Status: 4 (printers available) - -3. 体验快速操作 / Try quick actions - - "Scan & Print" 按钮 (蓝色) / Blue button - - "Batch Print" 按钮 (绿色) / Green button - -4. 底部导航 / Bottom navigation - - Dashboard (高亮显示) / Dashboard (highlighted) - - Labels - - Tasks - - More -``` - -**展示要点** / **Key Points**: -- ✅ 信息密度适中 / Appropriate information density -- ✅ 卡片可点击导航 / Clickable cards for navigation -- ✅ 快速操作按钮醒目 / Quick action buttons prominent -- ✅ 统计数据清晰 / Statistics clear - ---- - -## 步骤 4: 创建标签 (核心功能) / Step 4: Create Label (Core Feature) - -**页面**: `/labels` - -### 4.1 选择标签类型 / Select Label Type - -**操作演示** / **Demo Actions**: -``` -1. 进入Labels页面 / Enter Labels page - - 看到"Create"和"History"两个Tab / See "Create" and "History" tabs - - 默认在"Create" tab - -2. 浏览6种标签类型 / Browse 6 label types - 📘 Nutrition Label (蓝色) - 156 food items - ⚠️ Allergen Label (红色) - 89 food items - ❄️ Storage Label (青色) - 134 food items - 📅 Expiry Date Label (橙色) - 203 food items - 📦 Batch Tracking Label (紫色) - 78 food items - 👨‍🍳 Preparation Label (绿色) - 112 food items - -3. 选择"Expiry Date Label" / Select "Expiry Date Label" - - 点击卡片 / Click card - - 跳转到食品选择页面 / Navigate to food selection -``` - -**展示要点** / **Key Points**: -- ✅ 6种标签类型完整 / All 6 label types complete -- ✅ 图标颜色区分明显 / Icons color-coded clearly -- ✅ 显示可用食品数量 / Shows available food count -- ✅ 卡片悬停效果流畅 / Smooth card hover effect - ---- - -### 4.2 选择食品项目 / Select Food Item - -**页面**: `/labels/expiry/foods` - -**操作演示** / **Demo Actions**: -``` -1. 查看食品列表 / View food list - - 搜索框: "Search food items..." / Search box - - 分类筛选: All / Meat / Seafood / Salads / etc. - -2. 浏览不同类别 / Browse categories - - Meat: Grilled Chicken Breast, Ground Beef Patties - - Seafood: Fresh Salmon Fillet - - Prepared Foods: Club Sandwich, Shrimp Pasta - -3. 选择"Grilled Chicken Breast" / Select "Grilled Chicken Breast" - - 点击食品卡片 / Click food card - - 查看描述: "Fresh grilled chicken breast, boneless" - - 跳转到预览页面 / Navigate to preview -``` - -**展示要点** / **Key Points**: -- ✅ 搜索功能可用 / Search functionality available -- ✅ 分类筛选清晰 / Category filtering clear -- ✅ 食品信息完整 / Complete food information -- ✅ 响应式网格布局 / Responsive grid layout - ---- - -### 4.3 预览并打印 / Preview and Print - -**页面**: `/labels/expiry/chicken-breast/preview` - -**操作演示** / **Demo Actions**: -``` -1. 查看标签预览 / View label preview - - 标签类型: EXPIRATION DATE - - 食品名称: Grilled Chicken Breast - - 准备日期: 2026-02-27 - - 过期日期: 2026-03-04 - - 批次号: GB-20260227-001 - -2. 查看打印信息 / View print info - - Printed By: John Smith - - Print Date: 2026-02-27 10:30 AM - - Note: "This preview shows how the label will appear..." - -3. 点击"Print Label" / Click "Print Label" - - 按钮显示"Printing..." / Button shows "Printing..." - - 2秒后成功 / Success after 2 seconds - - Toast: "Label printed successfully!" - - 自动返回Labels页面 / Auto-return to Labels page -``` - -**展示要点** / **Key Points**: -- ✅ 标签预览美观 / Label preview attractive -- ✅ 信息完整准确 / Information complete and accurate -- ✅ 打印流程流畅 / Smooth printing flow -- ✅ 成功反馈清晰 / Clear success feedback - ---- - -## 步骤 5: 查看打印历史 / Step 5: View Print History - -**页面**: `/labels` (History tab) - -**操作演示** / **Demo Actions**: -``` -1. 切换到"History" Tab / Switch to "History" tab - - 点击History tab按钮 / Click History tab - -2. 查看已打印标签 / View printed labels - - 6个示例标签 / 6 sample labels - - 每个显示完整信息: - * 食品名称和标签类型 / Food name and label type - * 关键信息 (3-4行) / Key information (3-4 lines) - * 打印者和时间 / Printer and time - * 状态标签: Active / Expired - -3. 观察不同标签类型 / Observe different label types - - Expiry Date Label (橙色) - - Storage Label (青色) - - Allergen Label (红色) - - Batch Tracking Label (紫色) - - Preparation Label (绿色) - - Nutrition Label (蓝色) -``` - -**展示要点** / **Key Points**: -- ✅ 历史记录完整 / Complete history records -- ✅ 状态标签清晰 / Status badges clear -- ✅ 信息层级分明 / Clear information hierarchy -- ✅ 可追溯性强 / Strong traceability - ---- - -## 步骤 6: 任务管理 / Step 6: Task Management - -**页面**: `/tasks` - -**操作演示** / **Demo Actions**: -``` -1. 查看任务列表 / View task list - - 搜索框: "Search tasks..." - - 筛选: All / Pending / In Progress / Completed - -2. 查看不同类型任务 / View different task types - 🌡️ Refrigerator Temperature Check (High priority) - 🧹 Kitchen Hygiene Inspection (Medium priority) - ❄️ Freezer Temperature Check (High priority) - ⚙️ Equipment Safety Check (Low priority) - -3. 执行任务 / Execute task - - 点击"Refrigerator Temperature Check" - - 填写温度读数: 38°F - - 勾选安全检查项 / Check safety items - - 添加备注 (可选) / Add notes (optional) - - 上传照片 (可选) / Upload photo (optional) - - 点击"Submit Task" / Click "Submit Task" - - Toast: "Task completed successfully!" -``` - -**展示要点** / **Key Points**: -- ✅ 任务分类清晰 / Clear task categories -- ✅ 优先级标识明显 / Priority labels obvious -- ✅ 执行流程完整 / Complete execution flow -- ✅ 数据收集规范 / Standardized data collection - ---- - -## 步骤 7: 语言切换演示 / Step 7: Language Switching Demo - -**页面**: `/more` → `/more/language` - -**操作演示** / **Demo Actions**: -``` -1. 进入More页面 / Enter More page - - 查看7个菜单选项 / View 7 menu options - -2. 点击"Language / 语言" / Click "Language / 语言" - - 进入语言设置页面 / Enter language settings - -3. 当前语言: English / Current: English - - 显示两个选项: - ○ English (当前选中) - ○ 中文（简体） - -4. 切换到中文 / Switch to Chinese - - 点击"中文（简体）" / Click "中文（简体）" - - Toast: "语言切换成功" / "Language changed successfully" - - 整个界面立即变为中文 / Entire UI switches to Chinese immediately - -5. 演示中文界面 / Demo Chinese UI - - 返回Dashboard: "主页" / Back to "主页" - - Labels变为: "标签" / Labels: "标签" - - Tasks变为: "任务" / Tasks: "任务" - - More变为: "更多" / More: "更多" - -6. 切换回English / Switch back to English - - More → 语言 → English - - Toast: "Language changed successfully" - - 界面恢复英文 / UI back to English -``` - -**展示要点** / **Key Points**: -- ✅ 即时切换无需刷新 / Instant switch without refresh -- ✅ 所有文本完整翻译 / All text fully translated -- ✅ 1400+翻译键值对 / 1400+ translation keys -- ✅ 持久化保存设置 / Persisted settings - ---- - -## 步骤 8: 其他设置功能 / Step 8: Other Settings Features - -**页面**: `/more/*` - -### 8.1 个人资料 / Profile -``` -More → My Profile -- 查看个人信息: 姓名、工号、职位、部门 -- 编辑联系方式: 邮箱、电话 -- 设置偏好: 推送通知、声音提醒 -``` - -### 8.2 打印机设置 / Printer Settings -``` -More → Printer Settings -- 4台连接的打印机 / 4 connected printers -- 查看打印机状态: Online / Offline -- 设置默认打印机 / Set default printer -- 测试打印 / Test print -``` - -### 8.3 培训材料 / Training Materials -``` -More → Training Materials -- 10个培训模块 / 10 training modules -- 文章和视频 / Articles and videos -- 分类: Food Safety / Operations / Equipment / Compliance -- 完成状态跟踪 / Completion tracking -``` - -### 8.4 支持帮助 / Support -``` -More → Support -- 联系方式: Email / Phone -- 营业时间: Mon-Fri, 9AM-6PM EST -- 资源链接: User Guide / FAQ / Training Videos -- 应用信息: Version 1.0.0 -``` - ---- - -## 步骤 9: 退出登录 / Step 9: Logout - -**页面**: `/more` - -**操作演示** / **Demo Actions**: -``` -1. 滚动到底部 / Scroll to bottom - - 看到红色"Logout"卡片 / See red "Logout" card - -2. 点击Logout / Click Logout - - 弹出确认对话框 / Confirmation dialog appears - - "Are you sure you want to logout?" - - "Any unsaved changes will be lost." - -3. 确认退出 / Confirm logout - - 点击红色"Logout"按钮 / Click red "Logout" button - - 清除登录状态 / Clear login state - - 返回登录页面 / Return to login page -``` - ---- - -## 🎯 演示总结 / Demo Summary - -### 核心亮点 / Key Highlights - -#### 1. 设计规范 / Design Specifications -- ✅ **Inter字体**: 专业企业级外观 / Professional enterprise appearance -- ✅ **企业蓝色**: #2563eb统一配色 / Consistent #2563eb color scheme -- ✅ **48px按钮**: 符合触摸标准 / Meets touch standards -- ✅ **极简美学**: 清晰信息层级 / Clear information hierarchy - -#### 2. 用户体验 / User Experience -- ✅ **流畅导航**: 4个主要模块 / Smooth navigation across 4 modules -- ✅ **清晰反馈**: Toast提示和视觉变化 / Clear feedback with toasts and visual changes -- ✅ **易用性**: 直观操作流程 / Intuitive operation flow -- ✅ **响应式**: 移动优先设计 / Mobile-first design - -#### 3. 核心功能 / Core Functionality -- ✅ **标签打印**: 6种类型完整流程 / 6 types with complete workflow -- ✅ **任务管理**: 系统化任务执行 / Systematized task execution -- ✅ **多店铺**: 完整店铺管理 / Complete store management -- ✅ **双语支持**: 无缝语言切换 / Seamless language switching - -#### 4. 技术实现 / Technical Implementation -- ✅ **React + TypeScript**: 类型安全 / Type-safe -- ✅ **Tailwind CSS v4**: 现代样式系统 / Modern styling system -- ✅ **React Router v7**: 高效路由 / Efficient routing -- ✅ **Context API**: 状态管理 / State management - ---- - -## 📊 演示数据概览 / Demo Data Overview - -### 可演示的数据量 / Available Demo Data -- **标签类型**: 6种 / 6 label types -- **食品项目**: 15种 / 15 food items -- **打印历史**: 6条记录 / 6 history records -- **任务列表**: 6个任务 / 6 tasks -- **店铺数量**: 4个店铺 / 4 stores -- **培训材料**: 10个模块 / 10 training modules -- **打印机**: 4台设备 / 4 printers - -### 支持的语言 / Supported Languages -- **English**: 1400+ translations -- **中文（简体）**: 1400+ translations - ---- - -## 🎬 演示脚本建议 / Demo Script Suggestions - -### 5分钟快速演示 / 5-Minute Quick Demo -1. 登录 (30秒) / Login (30s) -2. 选择店铺 (30秒) / Select store (30s) -3. Dashboard概览 (1分钟) / Dashboard overview (1min) -4. 标签打印流程 (2分钟) / Label printing flow (2min) -5. 语言切换 (30秒) / Language switching (30s) -6. 总结 (30秒) / Summary (30s) - -### 15分钟完整演示 / 15-Minute Full Demo -1. 系统介绍和登录 (2分钟) / Intro and login (2min) -2. Dashboard功能 (2分钟) / Dashboard features (2min) -3. 标签打印详细流程 (4分钟) / Detailed label printing (4min) -4. 任务管理 (3分钟) / Task management (3min) -5. 设置和语言切换 (2分钟) / Settings and language (2min) -6. 问答环节 (2分钟) / Q&A (2min) - -### 30分钟深度演示 / 30-Minute Deep Demo -- 包含所有功能模块 / All feature modules -- 技术架构讲解 / Technical architecture -- 设计理念说明 / Design philosophy -- 未来扩展讨论 / Future expansion discussion -- 互动问答 / Interactive Q&A - ---- - -**演示准备完成!** / **Demo Ready!** -**建议使用Chrome或Safari浏览器以获得最佳体验** / **Recommended: Chrome or Safari for best experience** diff --git a/美国版/Food Labeling Management App React/I18N_COMPLETE_GUIDE.md b/美国版/Food Labeling Management App React/I18N_COMPLETE_GUIDE.md deleted file mode 100644 index 0d9b62e..0000000 --- a/美国版/Food Labeling Management App React/I18N_COMPLETE_GUIDE.md +++ /dev/null @@ -1,478 +0,0 @@ -# 🌐 完整中英文翻译系统 - -## ✅ 已完成的翻译覆盖 - -### 📋 翻译统计 -- **总翻译键**: 900+ -- **标签类型**: 6 种（全部翻译） -- **食品项目**: 15 种（全部翻译） -- **食品类别**: 12 种（全部翻译） -- **标签字段**: 50+ 字段（全部翻译） - ---- - -## 🏷️ 标签类型翻译 - -| 英文 | 中文 | 图标 | -|------|------|------| -| Nutrition Label | 营养标签 | 🥗 | -| Allergen Label | 过敏原标签 | ⚠️ | -| Storage Label | 储存标签 | ❄️ | -| Expiry Date Label | 有效期标签 | 📅 | -| Batch Tracking Label | 批次跟踪标签 | 📦 | -| Preparation Label | 制作标签 | 👨‍🍳 | - -**描述也完全翻译**： -- EN: "Print nutrition facts and serving information" -- ZH: "打印营养成分和份量信息" - ---- - -## 🍽️ 食品名称翻译 - -### 肉类（Meat / 肉类） -| 英文 | 中文 | -|------|------| -| Grilled Chicken Breast | 烤鸡胸肉 | -| Ground Beef Patties | 碎牛肉饼 | -| Roasted Turkey Breast | 烤火鸡肉 | - -### 沙拉（Salads / 沙拉） -| 英文 | 中文 | -|------|------| -| Caesar Salad | 凯撒沙拉 | - -### 海鲜（Seafood / 海鲜） -| 英文 | 中文 | -|------|------| -| Fresh Salmon Fillet | 新鲜三文鱼片 | - -### 酱料（Sauces / 酱料） -| 英文 | 中文 | -|------|------| -| Marinara Sauce | 意式番茄酱 | - -### 蔬菜（Vegetables / 蔬菜） -| 英文 | 中文 | -|------|------| -| Pre-cut Vegetables | 预切蔬菜 | - -### 甜点（Desserts / 甜点） -| 英文 | 中文 | -|------|------| -| Chocolate Brownie | 巧克力布朗尼 | - -### 预制食品（Prepared Foods / 预制食品） -| 英文 | 中文 | -|------|------| -| Shrimp Pasta | 虾意面 | -| Club Sandwich | 俱乐部三明治 | - -### 冷冻食品（Frozen Foods / 冷冻食品） -| 英文 | 中文 | -|------|------| -| Vanilla Ice Cream | 香草冰淇淋 | - -### 乳制品（Dairy / 乳制品） -| 英文 | 中文 | -|------|------| -| Greek Yogurt | 希腊酸奶 | - -### 烘焙食品（Bakery / 烘焙食品） -| 英文 | 中文 | -|------|------| -| Whole Wheat Bread | 全麦面包 | - -### 饮料（Beverages / 饮料） -| 英文 | 中文 | -|------|------| -| Mixed Berry Smoothie | 混合浆果奶昔 | - -### 汤（Soups / 汤） -| 英文 | 中文 | -|------|------| -| Tomato Soup | 番茄汤 | - -**每个食品都有描述翻译**： -- EN: "Fresh grilled chicken breast, boneless" -- ZH: "新鲜烤鸡胸肉，去骨" - ---- - -## 📊 营养标签字段翻译 - -| 英文字段 | 中文字段 | -|----------|----------| -| Serving Size | 份量 | -| Calories | 热量 | -| Total Fat | 总脂肪 | -| Saturated Fat | 饱和脂肪 | -| Trans Fat | 反式脂肪 | -| Cholesterol | 胆固醇 | -| Sodium | 钠 | -| Total Carbohydrate | 总碳水化合物 | -| Dietary Fiber | 膳食纤维 | -| Sugars | 糖 | -| Protein | 蛋白质 | - -**标签标题翻译**： -- EN: "NUTRITION FACTS" -- ZH: "营养成分" - ---- - -## ⚠️ 过敏原标签字段翻译 - -| 英文字段 | 中文字段 | -|----------|----------| -| Contains | 含有 | -| May Contain | 可能含有 | -| Cross-Contamination Risk | 交叉污染风险 | -| Prepared In | 制备于 | - -**风险等级翻译**： -- Low / 低 -- Medium / 中 -- High / 高 - -**标签标题翻译**： -- EN: "ALLERGEN INFORMATION" -- ZH: "过敏原信息" - ---- - -## ❄️ 储存标签字段翻译 - -| 英文字段 | 中文字段 | -|----------|----------| -| Storage Temperature | 储存温度 | -| Storage Location | 储存位置 | -| Shelf Life | 保质期 | -| Handling | 处理 | - -**说明文字翻译**： -- EN: "Keep refrigerated. Use clean utensils." -- ZH: "冷藏保存。使用干净的餐具。" - -**标签标题翻译**： -- EN: "STORAGE INSTRUCTIONS" -- ZH: "储存说明" - ---- - -## 📅 有效期标签字段翻译 - -| 英文字段 | 中文字段 | -|----------|----------| -| Prep Date | 制备日期 | -| Expiry Date | 有效期 | -| Batch Number | 批次号 | -| Prepared By | 制备人 | - -**标签标题翻译**： -- EN: "EXPIRATION DATE" -- ZH: "有效期" - ---- - -## 📦 批次跟踪标签字段翻译 - -| 英文字段 | 中文字段 | -|----------|----------| -| Batch Number | 批次号 | -| Production Date | 生产日期 | -| Supplier | 供应商 | -| Lot Number | 批号 | - -**供应商名称翻译**： -- EN: "Fresh Foods Co." -- ZH: "新鲜食品公司" - -**标签标题翻译**： -- EN: "BATCH TRACKING" -- ZH: "批次跟踪" - ---- - -## 👨‍🍳 制作标签字段翻译 - -| 英文字段 | 中文字段 | -|----------|----------| -| Prep Date | 制备日期 | -| Prep Time | 制备时间 | -| Prepared By | 制备人 | -| Location | 位置 | -| Use By | 使用期限 | - -**标签标题翻译**： -- EN: "PREPARATION INFO" -- ZH: "制作信息" - ---- - -## 🎯 页面级翻译 - -### Labels 页面 -| 英文 | 中文 | -|------|------| -| Labels | 标签 | -| Select a label type to print | 选择要打印的标签类型 | -| food items | 食品项目 | - -### Food Select 页面 -| 英文 | 中文 | -|------|------| -| Select food item to print label | 选择要打印标签的食品 | -| Search food items... | 搜索食品... | -| No Food Items Found | 未找到食品 | -| Try adjusting your search or browse by category | 尝试调整搜索或按类别浏览 | - -### Label Preview 页面 -| 英文 | 中文 | -|------|------| -| Label Preview | 标签预览 | -| Review before printing | 打印前请审查 | -| Printed By | 打印人 | -| Print Date | 打印日期 | -| Print Label | 打印标签 | -| Printing... | 打印中... | -| Label printed successfully! | 标签打印成功！ | - -### 提示信息 -| 英文 | 中文 | -|------|------| -| Note | 注意 | -| This preview shows how the label will appear when printed. Please verify all information before printing. | 此预览显示标签打印后的外观。请在打印前验证所有信息。 | - ---- - -## 🔄 动态翻译特性 - -### 1. 搜索功能支持中英文 -```typescript -// 在翻译后的文本中搜索 -const name = t(food.nameKey).toLowerCase(); -const category = t(food.categoryKey).toLowerCase(); -const search = searchTerm.toLowerCase(); -``` - -**示例**： -- 英文搜索 "chicken" → 找到 "Grilled Chicken Breast" -- 中文搜索 "鸡" → 找到 "烤鸡胸肉" - -### 2. 类别自动翻译 -```typescript -// 类别标题自动根据语言显示 -

{t(categoryKey)}

-``` - -**示例**： -- EN: "Meat" -- ZH: "肉类" - -### 3. 标签内容动态翻译 -```typescript -// 所有标签字段根据语言动态生成 -fields: [ - { labelKey: "nutrition.servingSize", value: "150g" }, - { labelKey: "nutrition.calories", value: "165 kcal" }, -] -``` - ---- - -## 📱 使用示例 - -### 场景 1: 英文用户打印营养标签 -``` -1. 点击 "Nutrition Label" 🥗 -2. 看到 "Select food item to print label" -3. 搜索 "chicken" -4. 看到 "Meat" 类别下的 "Grilled Chicken Breast" -5. 标签显示 "NUTRITION FACTS" -6. 字段显示 "Serving Size", "Calories" 等 -7. 点击 "Print Label" -``` - -### 场景 2: 中文用户打印营养标签 -``` -1. 点击 "营养标签" 🥗 -2. 看到 "选择要打印标签的食品" -3. 搜索 "鸡" -4. 看到 "肉类" 类别下的 "烤鸡胸肉" -5. 标签显示 "营养成分" -6. 字段显示 "份量", "热量" 等 -7. 点击 "打印标签" -``` - ---- - -## 🎨 标签预览效果 - -### 英文标签 -``` -┌──────────────────────────────────┐ -│ ████████████████████████████████ │ -│ 🥗 NUTRITION FACTS │ -│ ████████████████████████████████ │ -├──────────────────────────────────┤ -│ Grilled Chicken Breast │ -├──────────────────────────────────┤ -│ Serving Size 150g │ -│ Calories 165 kcal │ -│ Total Fat 3.6g │ -│ Saturated Fat 1.0g │ -│ Protein 31g │ -├──────────────────────────────────┤ -│ Printed By: John Smith │ -│ Print Date: Feb 27, 2026 3:45 PM│ -└──────────────────────────────────┘ -``` - -### 中文标签 -``` -┌──────────────────────────────────┐ -│ ████████████████████████████████ │ -│ 🥗 营养成分 │ -│ ████████████████████████████████ │ -├──────────────────────────────────┤ -│ 烤鸡胸肉 │ -├──────────────────────────────────┤ -│ 份量 150g │ -│ 热量 165 kcal │ -│ 总脂肪 3.6g │ -│ 饱和脂肪 1.0g │ -│ 蛋白质 31g │ -├──────────────────────────────────┤ -│ 打印人: 张三 │ -│ 打印日期: 2026年2月27日 下午3:45 │ -└──────────────────────────────────┘ -``` - ---- - -## 🔧 技术实现 - -### 翻译键结构 -```typescript -// 标签类型 -"labelType.{type}.name" -"labelType.{type}.desc" - -// 食品 -"food.{foodId}" -"food.{foodId}.desc" - -// 类别 -"category.{categoryName}" - -// 标签字段 -"{labelType}.{fieldName}" - -// 标签标题 -"labelPreview.{labelType}" -``` - -### 使用方式 -```typescript -// 1. 导入翻译钩子 -const { t } = useLanguage(); - -// 2. 使用翻译键 -

{t("labelType.nutrition.name")}

-

{t("food.chickenBreast")}

- -// 3. 动态翻译 -const name = t(food.nameKey); -const category = t(food.categoryKey); -``` - ---- - -## ✨ 翻译覆盖清单 - -### ✅ 页面元素 -- [x] 所有页面标题 -- [x] 所有按钮文字 -- [x] 所有提示信息 -- [x] 所有占位符文本 -- [x] 所有状态文本 - -### ✅ 数据内容 -- [x] 6 种标签类型名称 -- [x] 6 种标签类型描述 -- [x] 15 种食品名称 -- [x] 15 种食品描述 -- [x] 12 种食品类别 -- [x] 所有标签字段名称 -- [x] 所有标签标题 - -### ✅ 交互反馈 -- [x] 加载状态 -- [x] 成功提示 -- [x] 错误提示 -- [x] 空状态提示 - -### ✅ 导航 -- [x] 底部导航标签 -- [x] 返回按钮 -- [x] 面包屑 - ---- - -## 🌍 语言切换 - -### 切换位置 -``` -More → Language / 语言 → 选择语言 -``` - -### 切换效果 -- **即时生效**：所有文字立即切换 -- **自动保存**：语言偏好保存到 localStorage -- **全局应用**：所有页面统一语言 - ---- - -## 📊 翻译质量保证 - -### 翻译原则 -1. **专业术语准确**：食品、营养相关术语符合行业标准 -2. **简洁明了**：中文翻译简洁，易于理解 -3. **一致性**：相同概念使用相同翻译 -4. **文化适配**：考虑中美文化差异 - -### 示例对比 -| 类型 | 英文 | 中文 | -|------|------|------| -| 专业 | Saturated Fat | 饱和脂肪 ✅（不是 "饱和的脂肪" ❌）| -| 简洁 | Cross-Contamination Risk | 交叉污染风险 ✅（不是 "交叉污染的风险" ❌）| -| 一致 | Prepared By | 制备人 / 打印人 / 制作人 ✅ 统一使用 | - ---- - -## 🎓 用户指南 - -### 如何切换语言 -1. 点击底部导航 "More / 更多" -2. 点击 "Language / 语言" -3. 选择 "English" 或 "中文（简体）" -4. 系统立即切换到选定语言 - -### 中英文对照使用 -- **培训场景**：可以在中英文之间切换对照学习 -- **国际团队**：不同语言背景的员工都能使用 -- **标签要求**：根据客户要求打印中文或英文标签 - ---- - -## 🚀 总结 - -✅ **完整翻译系统**（900+ 键值对） -✅ **所有内容支持中英文**（100% 覆盖） -✅ **动态翻译**（搜索、分类、标签内容） -✅ **专业准确**（食品行业术语标准） -✅ **即时切换**（无需刷新页面） -✅ **持久保存**（语言偏好本地存储） - -系统现在完全支持中英文双语，所有文字、内容、数据都可以根据用户选择的语言动态显示！🎉 diff --git a/美国版/Food Labeling Management App React/IMPLEMENTATION_CHECKLIST.md b/美国版/Food Labeling Management App React/IMPLEMENTATION_CHECKLIST.md deleted file mode 100644 index c6a5f71..0000000 --- a/美国版/Food Labeling Management App React/IMPLEMENTATION_CHECKLIST.md +++ /dev/null @@ -1,305 +0,0 @@ -# Implementation Checklist ✅ - -## 功能需求完成度 - -### ✅ 一、整体设计风格要求 -- [x] 极简设计 -- [x] 大留白 -- [x] 不拥挤的布局 -- [x] 专业感强 -- [x] 功能清晰 -- [x] 扁平化 + 轻微阴影 -- [x] 卡片式布局 - -### ✅ 字体要求 -- [x] 标题 22-24px (text-2xl) -- [x] 二级标题 18-20px (text-lg, text-xl) -- [x] 正文 16-18px (text-base) -- [x] 按钮文字 16px (text-base) -- [x] 欧美系统风字体 (Inter) - -### ✅ 按钮要求 -- [x] 高度 ≥ 48px (h-12) -- [x] 主按钮明显 -- [x] 圆角 8-12px (rounded-lg) -- [x] 强对比度 - -### ✅ 颜色体系 -- [x] 主色：企业蓝色 (#2563eb) -- [x] 成功：绿色 -- [x] 警告：橙色/黄色 -- [x] 错误：红色 -- [x] 背景：浅灰或白色 - -### ✅ 状态标签 -- [x] 使用文字标签 (Open / Completed / Expired) -- [x] 不只用图标表达状态 -- [x] 状态 + 颜色 + 文字组合 - ---- - -## ✅ 二、底部导航结构 -- [x] 共 4 个 Tab - - [x] Dashboard - - [x] Labels - - [x] Tasks - - [x] More -- [x] 图标 + 文字 -- [x] 选中态明显高亮 - ---- - -## ✅ 三、页面结构设计 - -### ✅ 1️⃣ 登录页面 -- [x] Logo -- [x] 系统名称 -- [x] Email 输入框 -- [x] Password 输入框 -- [x] Login 按钮 -- [x] Forgot Password -- [x] 记住登录状态开关 -- [x] 设计简洁，居中布局 - -### ✅ 2️⃣ Dashboard 首页 -**顶部** -- [x] 当前门店名称 -- [x] 当前登录员工姓名 -- [x] 在线状态 (Online / Offline) - -**中部卡片布局** -- [x] 卡片 1: Today's Labels - 大数字 + 小说明 -- [x] 卡片 2: Open Tasks - 数量 -- [x] 卡片 3: Alerts - 数量 -- [x] 卡片 4: Devices Status - Online/Offline 数量 -- [x] 卡片可点击跳转 - -**Quick Actions 区域** -- [x] Scan & Print -- [x] Batch Print -- [x] Record Temperature -- [x] Report Waste - -### ✅ 3️⃣ Labels 模块 - -**3.1 标签列表页** -- [x] 顶部搜索框 -- [x] 筛选 Tabs (All, Expiring Soon, Expired) -- [x] 列表项展示 - - [x] 食材名称 - - [x] 批次号 - - [x] 到期日期 - - [x] 状态标签 (绿色正常/黄色临期/红色过期) - - [x] 右侧大按钮: Print -- [x] 列表间距大，不拥挤 -- [x] 空状态页面 (No Labels Found) - -**3.2 打印确认页面** -- [x] 食材名称 (大标题) -- [x] 批次号 -- [x] 到期时间 -- [x] 模板名称 (只读/下拉) -- [x] Multiple Options 下拉选择 -- [x] 打印数量 +/- 控件 -- [x] 打印机选择下拉框 -- [x] 预览区域 (标签小预览) -- [x] 底部固定大按钮: PRINT LABEL - -**3.3 打印任务队列页面** -- [x] 分区展示 - - [x] In Progress - - [x] Completed - - [x] Failed -- [x] 失败任务右侧有 Retry 按钮 - -### ✅ 4️⃣ Tasks 模块 - -**4.1 任务列表页** -- [x] 分类展示 - - [x] Temperature Check - - [x] Hygiene Check - - [x] Equipment Check -- [x] 每条任务显示 - - [x] 任务名称 - - [x] Due 时间 - - [x] 状态标签 (Open/Completed/Overdue) - - [x] Start 按钮 - -**4.2 任务执行页面** -- [x] 数字输入 (例如温度) -- [x] 单选 -- [x] 多选 -- [x] 文本输入 -- [x] 上传照片按钮 -- [x] 签名区域 (可作为备注输入) -- [x] 异常值自动变红显示 -- [x] 底部固定按钮: SUBMIT TASK - -**4.3 异常整改页面** -- [x] 异常说明 -- [x] 上传整改照片 -- [x] 整改备注输入框 -- [x] 提交按钮 - -### ✅ 5️⃣ More 模块 -- [x] Profile -- [x] Printers -- [x] Location Info -- [x] Sync Status -- [x] Support -- [x] Logout - ---- - -## ✅ 四、系统状态页面要求 -- [x] 加载中页面 -- [x] 空数据页面 -- [x] 网络断开提示页面 -- [x] 打印失败提示页面 -- [x] 操作成功提示页面 - ---- - -## ✅ 五、交互要求 -- [x] 页面结构尽量一屏完成主要操作 -- [x] 重要按钮必须固定底部 -- [x] 所有操作都有反馈 (toast notifications) -- [x] 不要层级太深 (最多 3 级) -- [x] 操作路径简洁 - ---- - -## ✅ 技术实现 - -### 核心功能 -- [x] React Router v7 路由系统 -- [x] 底部标签导航 -- [x] 登录认证 (localStorage) -- [x] 页面状态管理 -- [x] Toast 通知系统 - -### 设计系统 -- [x] Tailwind CSS v4 -- [x] Inter 字体 -- [x] 企业蓝色主题 -- [x] 响应式布局 (移动端优先) -- [x] 卡片式组件 - -### UI 组件 -- [x] Radix UI 组件库 -- [x] Lucide React 图标 -- [x] 状态组件 (Loading, Empty, Error, Success) -- [x] 表单组件 (Input, Select, Textarea, Checkbox, Radio) - -### 页面完整性 -- [x] 15+ 完整页面 -- [x] 4 个状态组件 -- [x] 1 个主布局组件 -- [x] 完整的导航系统 - ---- - -## ✅ 文档完整性 -- [x] README.md - 项目总览 -- [x] PROJECT_OVERVIEW.md - 详细功能说明 -- [x] USAGE_GUIDE.md - 用户使用指南 -- [x] TECHNICAL_DOCS.md - 技术文档 -- [x] PAGE_REFERENCE.md - 页面快速参考 -- [x] IMPLEMENTATION_CHECKLIST.md - 实现清单 - ---- - -## 📊 统计数据 - -### 页面数量 -- **认证页面**: 1 -- **主要页面**: 4 (Dashboard, Labels, Tasks, More) -- **子页面**: 10 -- **状态组件**: 4 -- **总计**: 19+ 组件 - -### 代码结构 -- **路由配置**: 1 文件 -- **主布局**: 1 文件 -- **页面组件**: 15 文件 -- **状态组件**: 4 文件 -- **样式文件**: 4 文件 - -### 设计规范 -- **颜色方案**: 5 种主要颜色 -- **字体大小**: 4 个层级 -- **按钮高度**: 48px-56px -- **卡片间距**: 12px-24px -- **最大宽度**: 480px (移动端) - ---- - -## 🎯 质量标准 - -### 用户体验 ✅ -- [x] 清晰的视觉层级 -- [x] 一致的交互模式 -- [x] 友好的错误提示 -- [x] 即时反馈机制 -- [x] 简洁的操作流程 - -### 可访问性 ✅ -- [x] 高对比度颜色 -- [x] 清晰的文字标签 -- [x] 大触摸目标 (48px+) -- [x] 语义化 HTML -- [x] 键盘导航支持 - -### 性能 ✅ -- [x] 轻量级组件 -- [x] 按需加载 -- [x] 优化的资源 -- [x] 快速响应 - -### 代码质量 ✅ -- [x] TypeScript 类型安全 -- [x] 组件化架构 -- [x] 可复用的组件 -- [x] 清晰的文件结构 -- [x] 一致的命名规范 - ---- - -## 🚀 部署就绪 - -### 生产环境准备 -- [x] 构建配置完整 -- [x] 环境变量支持 -- [x] 静态资源优化 -- [x] 路由配置正确 - -### 未来增强准备 -- [ ] 后端 API 集成点 -- [ ] 离线功能支持 -- [ ] 多语言支持 -- [ ] 高级分析功能 - ---- - -## ✨ 总结 - -**完成度**: 100% ✅ - -所有用户需求已完全实现： -- ✅ 15+ 完整页面 -- ✅ 完整的导航系统 -- ✅ 企业级设计风格 -- ✅ 移动端优化 -- ✅ 状态管理 -- ✅ 完整文档 - -**技术栈**: React + TypeScript + Tailwind CSS + React Router -**设计风格**: 欧美企业级 SaaS -**目标市场**: 餐饮食品行业 -**设备支持**: iOS & Android 通用 - ---- - -**项目状态**: ✅ 已完成，可交付使用 -**最后更新**: 2026年2月 -**版本**: 1.0.0 diff --git a/美国版/Food Labeling Management App React/LABEL_PRINTING_FLOW.md b/美国版/Food Labeling Management App React/LABEL_PRINTING_FLOW.md deleted file mode 100644 index 8c88417..0000000 --- a/美国版/Food Labeling Management App React/LABEL_PRINTING_FLOW.md +++ /dev/null @@ -1,113 +0,0 @@ -# 标签打印流程说明 - -## 新流程概述 - -标签打印现在采用三步流程，更符合实际业务场景： - -### 第一步：选择标签类型 -**页面：** `/labels` (Labels.tsx) - -用户可以从以下六种标签类型中选择： - -1. **营养标签 (Nutrition Labels)** 🥗 - - 用途：完整的营养信息和配料表 - - 适用于：需要标注营养成分的食品 - -2. **过敏原标签 (Allergen Labels)** ⚠️ - - 用途：过敏原警告和交叉污染信息 - - 适用于：含过敏原的食品 - -3. **储存标签 (Storage Labels)** ❄️ - - 用途：储存温度和处理说明 - - 适用于：需要特定储存条件的食品 - -4. **有效期标签 (Expiry Date Labels)** 📅 - - 用途：使用期限和最佳食用日期 - - 适用于：所有有时效性的食品 - -5. **批次追踪标签 (Batch Tracking Labels)** 📦 - - 用途：批次号和生产信息 - - 适用于：需要批次追溯的食品 - -6. **制作标签 (Preparation Labels)** 👨‍🍳 - - 用途：制作日期、时间和员工信息 - - 适用于：现场制作的预制食品 - -### 第二步：选择食品 -**页面：** `/labels/:type/select` (LabelFoodSelect.tsx) - -- 根据选择的标签类型，显示相应的食品列表 -- 支持搜索和分类筛选功能 -- 显示每个食品的类别和上次打印时间 - -### 第三步：填写信息并打印 -**页面：** `/labels/:type/:foodId/print` (LabelPrint.tsx) - -#### 根据不同标签类型显示不同的必填字段： - -**营养标签** -- 份量 (必填) -- 每份热量 (必填) -- 总脂肪 (必填) -- 蛋白质 (必填) -- 配料表 (必填) - -**过敏原标签** -- 包含过敏原 (必填，下拉选择) -- 交叉污染风险 (必填，下拉选择) -- 附加信息 (可选) - -**储存标签** -- 储存温度 (必填，下拉选择) -- 储存位置 (必填，下拉选择) -- 处理说明 (必填) - -**有效期标签** -- 制作日期 (必填，日期选择) -- 有效期 (必填，日期选择) -- 批次号 (必填) - -**批次追踪标签** -- 批次号 (必填) -- 生产日期 (必填，日期选择) -- 批号 (可选) -- 供应商 (必填) - -**制作标签** -- 制作日期 (必填，日期选择) -- 制作时间 (必填) -- 制作人 (必填) -- 使用期限 (必填，日期选择) - -#### 打印设置 -- 打印数量 -- 选择打印机 - -#### 实时预览 -- 根据填写的信息实时显示标签预览效果 - -## 路由结构 - -``` -/labels → 标签类型选择 -/labels/:type/select → 食品选择 -/labels/:type/:foodId/print → 填写信息并打印 -/labels/queue → 打印队列 -``` - -## 设计特点 - -✅ **逐步引导：** 三步流程清晰，不会让用户迷失 -✅ **类型明确：** 每种标签类型有独立的字段配置 -✅ **验证完整：** 必填字段验证，防止信息遗漏 -✅ **即时预览：** 填写内容实时反映在标签预览中 -✅ **符合规范：** 符合欧美市场食品安全标签要求 - -## 扩展性 - -系统设计支持轻松添加新的标签类型： - -1. 在 `Labels.tsx` 中添加新类型 -2. 在 `LabelFoodSelect.tsx` 的 `foodsByType` 中添加对应食品 -3. 在 `LabelPrint.tsx` 的 `fieldsByType` 中配置表单字段 -4. 系统会自动处理路由和表单验证 diff --git a/美国版/Food Labeling Management App React/LABEL_PRINTING_SYSTEM.md b/美国版/Food Labeling Management App React/LABEL_PRINTING_SYSTEM.md deleted file mode 100644 index 1edb5f8..0000000 --- a/美国版/Food Labeling Management App React/LABEL_PRINTING_SYSTEM.md +++ /dev/null @@ -1,357 +0,0 @@ -# 🎉 标签打印系统 - 最终版本 - -## ✅ 完整的标签打印流程 - -### 📱 用户流程 - -``` -1️⃣ Labels（选择标签类型） - ↓ -2️⃣ 选择食品（带图片） - ↓ -3️⃣ 查看预览（实际标签样式） - ↓ -4️⃣ 点击打印 -``` - ---- - -## 🏷️ 6 种标签类型 - -### 1. **Nutrition Label** 🥗 -**营养成分标签** -- 份量、热量、脂肪、蛋白质等 -- 完整的营养信息表格 -- 符合食品标签规范 - -### 2. **Allergen Label** ⚠️ -**过敏原标签** -- 包含的过敏原 -- 可能含有的成分 -- 交叉污染风险信息 - -### 3. **Storage Label** ❄️ -**储存标签** -- 储存温度要求 -- 储存位置 -- 保质期和处理说明 - -### 4. **Expiry Date Label** 📅 -**保质期标签** -- 制作日期 -- 过期日期 -- 批次号和制作人 - -### 5. **Batch Tracking Label** 📦 -**批次追踪标签** -- 批次号 -- 生产日期 -- 供应商信息 -- 批号 - -### 6. **Preparation Label** 👨‍🍳 -**制备标签** -- 制作日期和时间 -- 制作人员 -- 使用期限 -- 制作地点 - ---- - -## 🍽️ 15+ 种食品（带真实图片） - -| 食品 | 类别 | 图片来源 | -|-----|------|---------| -| Grilled Chicken Breast | 肉类 | ✅ Unsplash | -| Caesar Salad | 沙拉 | ✅ Unsplash | -| Fresh Salmon Fillet | 海鲜 | ✅ Unsplash | -| Ground Beef Patties | 肉类 | ✅ Unsplash | -| Marinara Sauce | 酱料 | ✅ Unsplash | -| Pre-cut Vegetables | 蔬菜 | ✅ Unsplash | -| Chocolate Brownie | 甜点 | ✅ Unsplash | -| Shrimp Pasta | 预制品 | ✅ Unsplash | -| Vanilla Ice Cream | 冷冻 | ✅ Unsplash | -| Club Sandwich | 预制品 | ✅ Unsplash | -| Greek Yogurt | 乳制品 | ✅ Unsplash | -| Whole Wheat Bread | 烘焙 | ✅ Unsplash | -| Mixed Berry Smoothie | 饮品 | ✅ Unsplash | -| Roasted Turkey Breast | 肉类 | ✅ Unsplash | -| Tomato Soup | 汤品 | ✅ Unsplash | - ---- - -## 🎨 标签预览设计 - -### 标签结构 -``` -┌──────────────────────────────────┐ -│ ████████████████████████████████ │ ← 黑色标题栏 -│ 🥗 NUTRITION FACTS │ （带图标和标签类型） -│ ████████████████████████████████ │ -├──────────────────────────────────┤ -│ Grilled Chicken Breast │ ← 灰色食品名称栏 -├──────────────────────────────────┤ -│ │ -│ Serving Size 150g │ ← 详细信息 -│ ────────────────────────────────│ -│ Calories 165 kcal │ -│ ────────────────────────────────│ -│ Total Fat 3.6g │ -│ ────────────────────────────────│ -│ Saturated Fat 1.0g │ （缩进显示子项） -│ ────────────────────────────────│ -│ Protein 31g │ -│ │ -├──────────────────────────────────┤ -│ Printed By: John Smith │ ← 灰色页脚 -│ Print Date: Feb 27, 2026 3:45 PM│ （打印信息） -└──────────────────────────────────┘ -``` - -### 设计特点 -- ✅ 黑色粗边框（4px） -- ✅ 黑色标题栏 + 白色文字 -- ✅ 清晰的分隔线 -- ✅ 层级结构明确 -- ✅ 缩进显示子项（如 Saturated Fat） -- ✅ 加粗显示重要信息 -- ✅ 过敏原信息用红色高亮 - ---- - -## 🌐 完整中英文翻译 - -### 翻译覆盖 -- ✅ **标签类型名称**（6种） -- ✅ **所有页面标题** -- ✅ **按钮和操作** -- ✅ **表单字段** -- ✅ **提示信息** -- ✅ **状态文本** -- ✅ **底部导航** - -### 示例对比 - -| 英文 | 中文 | -|------|------| -| Nutrition Label | 营养成分标签 | -| Select food item to print label | 选择要打印标签的食品 | -| Label Preview | 标签预览 | -| Print Label | 打印标签 | -| Printing... | 打印中... | -| Label printed successfully! | 标签打印成功！ | - ---- - -## 📂 文件结构 - -``` -/src/app/ -├── pages/ -│ ├── Labels.tsx ✅ 标签类型选择 -│ ├── LabelFoodSelect.tsx ✅ 食品选择（带图片） -│ ├── LabelPreview.tsx ✅ 标签预览 + 打印 -│ ├── Dashboard.tsx ✅ 主页 -│ ├── Tasks.tsx ✅ 任务 -│ ├── More.tsx ✅ 更多设置 -│ └── more/ -│ └── LanguageSettings.tsx ✅ 语言设置 -├── contexts/ -│ └── LanguageContext.tsx ✅ 700+ 翻译 -├── components/ -│ └── Layout.tsx ✅ 底部导航 -└── routes.tsx ✅ 路由配置 -``` - ---- - -## 🎯 关键功能 - -### 1. 智能标签生成 -每种标签类型自动生成对应内容： -- **Nutrition**: 自动计算营养成分 -- **Allergen**: 根据食品生成过敏原清单 -- **Storage**: 根据食品类别生成储存要求 -- **Expiry**: 自动计算5天保质期 -- **Batch**: 自动生成批次号和批号 -- **Preparation**: 自动填入当前员工和时间 - -### 2. 真实标签预览 -- 黑白打印风格 -- 清晰的层级结构 -- 符合食品标签规范 -- 打印前可验证所有信息 - -### 3. 搜索和筛选 -- 按食品名称搜索 -- 按类别筛选 -- 自动分类显示 - -### 4. 打印模拟 -- 2秒打印动画 -- 成功提示 -- 自动返回标签列表 - ---- - -## 💡 使用场景 - -### 场景 1: 营养成分标签 -``` -餐厅经理需要为新菜品打印营养标签： -1. 点击 "Nutrition Label" -2. 选择 "Grilled Chicken Breast" -3. 查看完整营养成分表 -4. 确认无误后点击 "Print Label" -5. 标签打印完成 -``` - -### 场景 2: 过敏原标签 -``` -厨房员工需要为沙拉打印过敏原标签： -1. 点击 "Allergen Label" -2. 选择 "Caesar Salad" -3. 查看包含的过敏原（Tree Nuts, Dairy, Eggs, Wheat） -4. 查看交叉污染风险 -5. 打印并贴在食品容器上 -``` - -### 场景 3: 储存标签 -``` -食品加工员工需要为三文鱼打印储存标签： -1. 点击 "Storage Label" -2. 选择 "Fresh Salmon Fillet" -3. 查看储存温度（32-40°F）和位置 -4. 查看处理说明 -5. 打印并贴在储存容器上 -``` - ---- - -## 🎨 UI/UX 特点 - -### 移动优先设计 -- ✅ 单列布局 -- ✅ 大按钮（48px+） -- ✅ 清晰的层级 -- ✅ 易于点击的卡片 - -### 视觉设计 -- ✅ 极简风格 -- ✅ 大留白 -- ✅ 卡片式布局 -- ✅ 企业蓝主色调 - -### 交互体验 -- ✅ 即时反馈 -- ✅ 加载动画 -- ✅ 成功提示 -- ✅ 清晰的导航 - -### 状态管理 -- ✅ 所有状态用文字标签 -- ✅ 配合颜色区分 -- ✅ 图标辅助识别 - ---- - -## 📊 数据示例 - -### 营养标签数据 -```json -{ - "title": "NUTRITION FACTS", - "fields": [ - { "label": "Serving Size", "value": "150g" }, - { "label": "Calories", "value": "165 kcal", "bold": true }, - { "label": "Total Fat", "value": "3.6g" }, - { "label": " Saturated Fat", "value": "1.0g", "indent": true }, - { "label": "Protein", "value": "31g", "bold": true } - ] -} -``` - -### 过敏原标签数据 -```json -{ - "title": "ALLERGEN INFORMATION", - "fields": [ - { - "label": "Contains", - "value": "Tree Nuts, Dairy, Eggs", - "warning": true - }, - { "label": "May Contain", "value": "Sesame, Soy" }, - { "label": "Cross-Contamination Risk", "value": "Low" } - ] -} -``` - ---- - -## 🚀 技术实现 - -### React Router 路由 -```typescript -/labels → 标签类型列表 -/labels/:labelType/foods → 食品选择 -/labels/:labelType/:foodId/preview → 标签预览 -``` - -### 动态数据生成 -```typescript -const getLabelPreviewData = (labelType: string, foodId: string) => { - // 根据标签类型和食品ID自动生成标签数据 -} -``` - -### 响应式图片 -- 列表缩略图: 80x80px -- 预览大图: 全宽 x 600px - ---- - -## ✨ 核心优势 - -| 特性 | 说明 | -|------|------| -| 🎯 **精准定位** | 专为餐饮食品行业设计 | -| 📱 **移动优先** | 完美适配手机端操作 | -| 🌐 **国际化** | 完整中英文支持 | -| 🖼️ **视觉丰富** | 所有食品都有真实图片 | -| 🏷️ **专业标签** | 符合食品标签规范 | -| ⚡ **快速打印** | 3步完成打印流程 | -| 🎨 **企业风格** | 极简专业的设计 | - ---- - -## 🎓 用户培训要点 - -### 新员工培训 -1. **了解6种标签类型**及其用途 -2. **学会搜索食品**并快速找到目标 -3. **理解标签预览**并验证信息准确性 -4. **掌握打印操作**的完整流程 - -### 常见问题 -**Q: 如何修改标签内容？** -A: 当前版本标签内容自动生成，后续可添加自定义编辑功能。 - -**Q: 可以打印多份吗？** -A: 可以重复进入预览页面多次打印。 - -**Q: 标签尺寸是多少？** -A: 标签设计适配标准热敏打印机（2英寸宽度）。 - ---- - -## 📝 总结 - -✅ **完整的标签打印流程**（3步） -✅ **6种专业标签类型** -✅ **15+种食品**（带高清图片） -✅ **真实标签预览**（符合规范） -✅ **完整中英文翻译**（700+键值对） -✅ **极简企业风格**（移动优先） - -系统已经完全实现您的需求，可以投入使用！🎉 diff --git a/美国版/Food Labeling Management App React/LANGUAGE_SWITCHING_GUIDE.md b/美国版/Food Labeling Management App React/LANGUAGE_SWITCHING_GUIDE.md deleted file mode 100644 index 38ec6c1..0000000 --- a/美国版/Food Labeling Management App React/LANGUAGE_SWITCHING_GUIDE.md +++ /dev/null @@ -1,208 +0,0 @@ -# 语言切换功能说明 / Language Switching Guide - -## 功能概述 / Overview - -系统已经实现了完整的中英文切换功能，用户可以随时在应用中切换界面语言。 - -The system now supports full bilingual (English/Chinese) language switching, allowing users to change the interface language at any time. - ---- - -## 如何切换语言 / How to Switch Language - -### 方法一：通过 More 页面 / Via More Page - -1. 点击底部导航栏的 **More** (更多) 标签 -2. 选择 **Language / 语言** 选项 -3. 在语言设置页面中选择您喜欢的语言： - - 🇺🇸 **English** - - 🇨🇳 **中文（简体）** -4. 选择后语言将立即生效 - -**步骤：** -``` -More (更多) → Language / 语言 → 选择语言 → 自动切换 -``` - ---- - -## 已翻译的页面 / Translated Pages - -### ✅ 核心页面 / Core Pages - -1. **登录页面 / Login** - - 所有表单字段和按钮 - -2. **主页 / Dashboard** - - 统计数据卡片 - - 快捷操作按钮 - -3. **标签管理 / Labels** - - 标签类型列表（6种类型） - - 食品选择页面 - - 打印设置页面 - - 打印队列 - -4. **任务管理 / Tasks** - - 任务列表 - - 任务执行页面 - -5. **更多 / More** - - 所有菜单项 - - 个人资料 - - 打印机设置 - - 工作地点 - - 同步状态 - - 语言设置 - - 支持中心 - -6. **底部导航栏 / Bottom Navigation** - - Dashboard (主页) - - Labels (标签) - - Tasks (任务) - - More (更多) - ---- - -## 技术实现 / Technical Implementation - -### 语言管理系统 / Language Management - -**文件位置：** `/src/app/contexts/LanguageContext.tsx` - -系统使用 React Context 实现语言管理： - -```tsx -import { useLanguage } from "../contexts/LanguageContext"; - -function MyComponent() { - const { language, setLanguage, t } = useLanguage(); - - return

{t("labels.title")}

; -} -``` - -### 翻译函数 / Translation Function - -使用 `t()` 函数获取翻译文本： - -```tsx -// 获取翻译 -t("labels.title") // 英文: "Labels" / 中文: "标签" -t("common.back") // 英文: "Back" / 中文: "返回" -t("labels.type.nutrition") // 英文: "Nutrition Labels" / 中文: "营养标签" -``` - -### 语言存储 / Language Storage - -- 用户选择的语言保存在 `localStorage` 中 -- 下次打开应用时自动加载上次选择的语言 -- 默认语言：English (英文) - ---- - -## 翻译键值示例 / Translation Key Examples - -### 通用 / Common -``` -common.back → Back / 返回 -common.save → Save / 保存 -common.cancel → Cancel / 取消 -common.search → Search / 搜索 -common.online → Online / 在线 -``` - -### 标签相关 / Labels -``` -labels.title → Labels / 标签 -labels.type.nutrition → Nutrition Labels / 营养标签 -labels.type.allergen → Allergen Labels / 过敏原标签 -labels.selectFood → Select a food item to print / 选择要打印的食品 -labels.print.printLabel → Print Label / 打印标签 -``` - -### 表单字段 / Form Fields -``` -field.servingSize → Serving Size / 份量 -field.calories → Calories (per serving) / 热量（每份） -field.allergens → Contains Allergens / 包含过敏原 -field.batchNumber → Batch Number / 批次号 -``` - ---- - -## 扩展翻译 / Extending Translations - -如需添加新的翻译，编辑 `/src/app/contexts/LanguageContext.tsx`： - -```tsx -// English translations -const translationsEn: Record = { - "myapp.newkey": "New Text", - // ... more translations -}; - -// Chinese translations -const translationsZh: Record = { - "myapp.newkey": "新文本", - // ... more translations -}; -``` - -然后在组件中使用： -```tsx -const { t } = useLanguage(); -

{t("myapp.newkey")}

-``` - ---- - -## 语言覆盖率 / Translation Coverage - -✅ **100%** - 底部导航栏 -✅ **100%** - 标签管理流程（类型选择 → 食品选择 → 打印） -✅ **100%** - More 页面及所有子页面 -✅ **90%+** - 其他核心页面 - -部分模拟数据（如食品名称、类别）保留英文，以保持数据真实性。 - ---- - -## 最佳实践 / Best Practices - -1. **始终使用翻译函数** - 永远不要在代码中硬编码文本，而是使用 `t()` 函数 - -2. **语义化的键名** - 使用有意义的键名，如 `labels.type.nutrition` 而不是 `lbl1` - -3. **保持一致性** - 相同的文本使用相同的翻译键，如 "Back" 始终使用 `common.back` - -4. **测试两种语言** - 在添加新功能时，确保两种语言都能正常显示 - ---- - -## 未来改进 / Future Improvements - -- [ ] 添加更多语言支持（西班牙语、法语等） -- [ ] 日期和数字的本地化格式 -- [ ] 动态加载语言包（减小打包体积） -- [ ] 翻译管理后台 - ---- - -## 常见问题 / FAQ - -**Q: 切换语言后需要刷新页面吗？** -A: 不需要，语言切换是实时生效的。 - -**Q: 语言设置会丢失吗？** -A: 不会，语言设置保存在浏览器本地存储中，除非清除浏览器数据。 - -**Q: 如何恢复默认语言？** -A: 在语言设置页面选择 English 即可。 - -**Q: 所有页面都支持中文吗？** -A: 是的，所有核心功能页面都已完全翻译。部分模拟数据可能保留英文。 diff --git a/美国版/Food Labeling Management App React/PAGE_REFERENCE.md b/美国版/Food Labeling Management App React/PAGE_REFERENCE.md deleted file mode 100644 index 6b6929b..0000000 --- a/美国版/Food Labeling Management App React/PAGE_REFERENCE.md +++ /dev/null @@ -1,240 +0,0 @@ -# Page Reference Guide - -Quick reference for all pages in the Food Label System. - -## 📄 All Pages - -### Authentication -| Page | Route | Description | -|------|-------|-------------| -| Login | `/login` | Email/password authentication with remember me option | - -### Main Navigation (Bottom Tabs) - -#### 🏠 Dashboard -| Page | Route | Description | -|------|-------|-------------| -| Dashboard | `/` | Overview with stats cards and quick action buttons | - -#### 🏷️ Labels -| Page | Route | Description | -|------|-------|-------------| -| Label List | `/labels` | Browse, search, and filter labels by status | -| Print Label | `/labels/print/:id` | Configure and print label (template, quantity, printer) | -| Print Queue | `/labels/queue` | View print jobs (in progress, completed, failed) | - -#### ✅ Tasks -| Page | Route | Description | -|------|-------|-------------| -| Task List | `/tasks` | View tasks organized by status (overdue, open, completed) | -| Execute Task | `/tasks/:id` | Complete task with forms (temperature, checks, photos) | -| Report Issue | `/tasks/:id/issue` | Report issues with corrective actions and photos | - -#### ⚙️ More -| Page | Route | Description | -|------|-------|-------------| -| More Menu | `/more` | Settings and additional features menu | -| Profile | `/more/profile` | View and edit employee profile information | -| Printers | `/more/printers` | View printer status and configuration | -| Location Info | `/more/location` | Store location and contact information | -| Sync Status | `/more/sync` | Data synchronization status and manual sync | -| Support | `/more/support` | Help, support contacts, and resources | - -### Utility -| Page | Route | Description | -|------|-------|-------------| -| 404 Not Found | `*` | Catch-all for invalid routes | - -## 🎨 Page Elements - -### Common Header Pattern -```tsx -
-

- Page Title -

-
-``` - -### Common Back Button -```tsx - -``` - -### Status Badge Examples - -**Label Status** -- 🟢 Normal: `bg-green-50 text-green-700 border-green-200` -- 🟡 Expiring Soon: `bg-yellow-50 text-yellow-700 border-yellow-200` -- 🔴 Expired: `bg-red-50 text-red-700 border-red-200` - -**Task Status** -- 🔵 Open: `bg-blue-50 text-blue-700 border-blue-200` -- 🟢 Completed: `bg-green-50 text-green-700 border-green-200` -- 🔴 Overdue: `bg-red-50 text-red-700 border-red-200` - -**Printer Status** -- 🟢 Online: `bg-green-50 text-green-700 border-green-200` -- ⚫ Offline: `bg-gray-100 text-gray-600 border-gray-300` - -## 🔄 Page Flows - -### Flow 1: Print a Label -1. `/` (Dashboard) → Tap "Labels" or "Scan & Print" -2. `/labels` → Select label → Tap "Print Label" -3. `/labels/print/:id` → Configure → Tap "Print Label" -4. `/labels/queue` → View print status - -### Flow 2: Complete a Task -1. `/` (Dashboard) → Tap "Tasks" or "Record Temperature" -2. `/tasks` → Select task → Tap "Start Task" -3. `/tasks/:id` → Fill form → Tap "Submit Task" -4. If issue detected → `/tasks/:id/issue` → Report issue - -### Flow 3: Check Settings -1. `/` (Dashboard) → Tap "More" -2. `/more` → Select option -3. `/more/profile` or `/more/printers` etc. - -### Flow 4: Logout -1. `/more` → Scroll to "Logout" -2. Confirm logout -3. Redirected to `/login` - -## 📊 Data Models - -### Label -```typescript -interface Label { - id: string; - name: string; - batchNumber: string; - expiryDate: string; - status: "normal" | "expiring" | "expired"; -} -``` - -### Task -```typescript -interface Task { - id: string; - name: string; - type: "temperature" | "hygiene" | "equipment"; - dueTime: string; - status: "open" | "completed" | "overdue"; -} -``` - -### Print Job -```typescript -interface PrintJob { - id: string; - labelName: string; - quantity: number; - printer: string; - status: "progress" | "completed" | "failed"; - time: string; -} -``` - -### Printer -```typescript -interface Printer { - id: string; - name: string; - location: string; - status: "online" | "offline"; - model: string; -} -``` - -## 🎯 Key UI Components - -### Buttons -- **Primary Action**: Blue background, white text, h-12 minimum -- **Secondary Action**: Outline style -- **Destructive**: Red background (logout, delete) -- **Icon Buttons**: Square, icon only - -### Cards -- White background -- Subtle border -- Rounded corners (rounded-lg) -- Padding: p-4 or p-6 -- Hover effect: hover:shadow-md - -### Form Elements -- **Input**: h-12, rounded borders, text-base -- **Select**: h-12, dropdown with chevron -- **Textarea**: rows-4, resize-none -- **Checkbox**: Large touch targets -- **Radio**: Large touch targets with labels - -### Layout Constraints -- **Max Width**: 480px (mobile simulation) -- **Padding**: p-6 for sections -- **Bottom Spacing**: pb-20 (for bottom nav) -- **Fixed Bottom**: bottom-20 (above nav) - -## 🔐 Protected Routes - -All routes except `/login` are protected: -- Check for `localStorage.getItem("isLoggedIn")` -- Redirect to `/login` if not authenticated -- Implemented in `Layout.tsx` component - -## 🚀 Quick Start Development - -1. **Add a new page**: - - Create file in `/src/app/pages/` - - Add route to `/src/app/routes.tsx` - - Follow page structure pattern - -2. **Add to navigation**: - - Bottom tabs: Edit `/src/app/components/Layout.tsx` - - Menu items: Edit relevant parent page - -3. **Add new status**: - - Define status type - - Create status config function - - Apply badge className pattern - -## 📱 Responsive Breakpoints - -Current: Mobile-first with max-width constraint - -Future considerations: -- Tablet: `md:` prefix (768px+) -- Desktop: `lg:` prefix (1024px+) -- Wide: `xl:` prefix (1280px+) - ---- - -**Navigation Structure** -``` -Login - └── Layout (Bottom Nav) - ├── Dashboard (/) - ├── Labels (/labels) - │ ├── Print (/labels/print/:id) - │ └── Queue (/labels/queue) - ├── Tasks (/tasks) - │ ├── Execute (/tasks/:id) - │ └── Issue (/tasks/:id/issue) - └── More (/more) - ├── Profile - ├── Printers - ├── Location - ├── Sync - └── Support -``` - -**Color Reference** -- Primary Blue: `#2563eb` (text-blue-600, bg-blue-600) -- Success Green: `text-green-600`, `bg-green-50` -- Warning Yellow: `text-yellow-600`, `bg-yellow-50` -- Error Red: `text-red-600`, `bg-red-50` -- Gray Scale: `text-gray-500`, `bg-gray-50`, etc. diff --git a/美国版/Food Labeling Management App React/PROJECT_OVERVIEW.md b/美国版/Food Labeling Management App React/PROJECT_OVERVIEW.md deleted file mode 100644 index c613ca9..0000000 --- a/美国版/Food Labeling Management App React/PROJECT_OVERVIEW.md +++ /dev/null @@ -1,212 +0,0 @@ -# Food Label System - Employee Mobile App - -A professional, enterprise-grade mobile application for restaurant and food service operations, designed for the European and American markets. - -## 🎯 Overview - -This application enables food service employees to manage food labels, execute safety tasks, record temperatures, and maintain compliance with food safety regulations through an intuitive mobile interface. - -## 📱 Key Features - -### 1. **Dashboard** -- Real-time statistics overview -- Quick action buttons for common tasks -- Store and employee information -- Online/offline status indicator - -### 2. **Label Management** -- Browse and search food labels -- Filter by status (All, Expiring Soon, Expired) -- Print labels with customizable templates -- Manage print queue -- Track print job status - -### 3. **Task Management** -- View and execute safety tasks -- Temperature recording with validation -- Equipment condition checks -- Photo upload capability -- Issue reporting with corrective actions -- Overdue task alerts - -### 4. **Settings & More** -- Employee profile management -- Printer configuration and status -- Location information -- Data synchronization status -- Support and help resources - -## 🎨 Design Philosophy - -### Enterprise SaaS Aesthetic -- **Minimalist & Professional**: Clean interface with generous white space -- **Card-based Layout**: Organized information hierarchy -- **High Contrast**: Accessible color schemes and clear visual hierarchy -- **Typography**: Inter font family for modern, professional appearance - -### Design Specifications -- **Font Sizes**: - - Headings: 22-24px - - Subheadings: 18-20px - - Body: 16-18px - - Buttons: 16px -- **Buttons**: Minimum 48px height with 8-12px border radius -- **Colors**: - - Primary: Enterprise Blue (#2563eb) - - Success: Green - - Warning: Orange/Yellow - - Error: Red - - Background: Light Gray/White - -### Mobile-First Design -- Maximum width: 480px (centered on larger screens) -- Touch-friendly interface elements -- Bottom navigation for easy thumb access -- Responsive across iOS and Android - -## 🚀 Navigation Structure - -### Bottom Tab Navigation -1. **Dashboard** - Overview and quick actions -2. **Labels** - Label management and printing -3. **Tasks** - Safety and compliance tasks -4. **More** - Settings and additional features - -### Page Flow - -``` -Login - └── Dashboard (Home) - ├── Labels - │ ├── Label Print - │ └── Print Queue - ├── Tasks - │ ├── Task Execute - │ └── Task Issue Report - └── More - ├── Profile - ├── Printers - ├── Location - ├── Sync Status - └── Support -``` - -## 🔐 Authentication - -- Email/password login -- "Remember me" option -- Forgot password functionality -- Session persistence with localStorage - -## 📊 Core Workflows - -### 1. Print Label Workflow -1. Browse labels or scan barcode -2. Select label to print -3. Configure print settings (quantity, template, printer) -4. Preview label -5. Send to print queue -6. Track print status - -### 2. Task Execution Workflow -1. View assigned tasks -2. Select task to execute -3. Fill in required information - - Temperature readings - - Equipment condition - - Safety checklists - - Photos -4. Submit task -5. Report issues if detected (automatic) - -### 3. Issue Reporting Workflow -1. Automatic trigger when values are out of range -2. Describe issue in detail -3. Document corrective actions -4. Upload before/after photos -5. Submit for supervisor review - -## 🎯 User Experience Features - -### State Management -- **Loading States**: Clear loading indicators -- **Empty States**: Helpful messaging with illustrations -- **Error States**: Network issues, print failures -- **Success States**: Confirmation feedback - -### Data Visualization -- Status badges (Open, Completed, Expired, etc.) -- Color-coded alerts -- Progress indicators -- Real-time status updates - -### Offline Capability -- Works offline with local data -- Automatic sync when online -- Sync status visibility -- Manual sync option - -## 🛠️ Technology Stack - -- **Framework**: React 18 -- **Routing**: React Router v7 -- **Styling**: Tailwind CSS v4 -- **UI Components**: Radix UI -- **Icons**: Lucide React -- **Notifications**: Sonner -- **Build Tool**: Vite - -## 📱 Screenshots & Use Cases - -### Restaurant Use Cases -- Kitchen temperature monitoring -- Food labeling and FIFO compliance -- Hygiene inspection tracking -- Equipment maintenance logs - -### Food Processing Use Cases -- Batch label printing -- Quality control tasks -- Temperature logging -- Waste reporting - -### Central Kitchen Use Cases -- Multi-location label management -- Standardized task execution -- Centralized compliance tracking -- Equipment status monitoring - -## 🌍 Target Markets - -- United States -- Canada -- United Kingdom -- European Union -- Australia/New Zealand - -## 📄 Compliance & Standards - -Designed to support: -- FDA Food Code compliance -- HACCP requirements -- Local health department regulations -- Food safety management systems - -## 🎓 Training & Support - -The app includes: -- In-app help and support -- Contact information for technical support -- User guides and video tutorials -- FAQ resources -- Emergency support access - -## 📈 Future Enhancements - -Potential features for future releases: -- Barcode scanning -- Voice input for hands-free operation -- Multi-language support -- Real-time notifications -- Advanced analytics dashboard -- Integration with external systems diff --git a/美国版/Food Labeling Management App React/QUICK_START.md b/美国版/Food Labeling Management App React/QUICK_START.md deleted file mode 100644 index d6e891f..0000000 --- a/美国版/Food Labeling Management App React/QUICK_START.md +++ /dev/null @@ -1,236 +0,0 @@ -# 快速启动指南 / Quick Start Guide - -## 🎯 系统概述 / System Overview - -**食品标签打印系统 (简化版) / Food Label Printing System (Simplified Version)** - -面向欧美市场的极简企业级SaaS工具，专注于核心标签打印功能。 -Minimalist enterprise SaaS tool for North American/European markets, focused on core label printing functionality. - ---- - -## 🚀 如何使用 / How to Use - -### 1. 登录系统 / Login -- 访问应用后会看到登录页面 / Visit the app to see the login page -- 输入任意邮箱和密码即可登录（演示模式）/ Enter any email and password to login (demo mode) -- 系统会保存登录状态 / System saves login state - -### 2. 选择店铺 / Select Store -- 登录后选择工作店铺 / Select your working store after login -- 4个可选店铺位置 / 4 available store locations -- 店铺信息会显示在Dashboard / Store info displayed on Dashboard - -### 3. Dashboard（主页） -**4个统计卡片 / 4 Statistics Cards:** -- 今日标签 (247个) / Today's Labels (247) -- 待办任务 (8个) / Open Tasks (8) -- 系统警报 (5个) / Alerts (5) -- 设备状态 (4台打印机) / Devices Status (4 printers) - -**2个快速操作 / 2 Quick Actions:** -- 扫描打印 / Scan & Print -- 批量打印 / Batch Print - -### 4. Labels（标签管理）- 核心功能 -**创建标签 / Create Labels:** -1. 选择标签类型（6种）/ Select label type (6 types): - - 营养标签 / Nutrition Label - - 过敏原标签 / Allergen Label - - 储存标签 / Storage Label - - 保质期标签 / Expiry Date Label - - 批次追踪标签 / Batch Tracking Label - - 制备标签 / Preparation Label - -2. 选择食品项目 / Select food item -3. 查看预览 / Preview label -4. 确认打印 / Confirm and print - -**查看历史 / View History:** -- 查看已打印标签 / View printed labels -- 显示标签状态（活跃/过期）/ Display label status (Active/Expired) -- 显示打印者和时间 / Show printer and time - -### 5. Tasks（任务管理） -- 查看所有任务 / View all tasks -- 执行任务（温度检查、卫生检查等）/ Execute tasks (temperature checks, hygiene inspections, etc.) -- 上传照片 / Upload photos -- 报告问题 / Report issues - -### 6. More（更多设置） -**可用功能 / Available Features:** -- 👤 个人资料 / My Profile -- 📚 培训材料 / Training Materials -- 🖨️ 打印机设置 / Printer Settings -- 📍 位置/店铺 / Location -- 🔄 同步状态 / Sync Status -- 🌐 语言切换 / Language (English/中文) -- ❓ 支持与帮助 / Support -- 🚪 退出登录 / Logout - ---- - -## 🌍 语言切换 / Language Switching - -### 切换方法 / How to Switch: -1. 底部导航 → More / Bottom Nav → More -2. 点击"Language / 语言" / Click "Language / 语言" -3. 选择 English 或 中文（简体）/ Select English or 中文（简体） -4. 整个界面立即切换 / Entire UI switches immediately - -### 支持的翻译 / Supported Translations: -- ✅ 1400+ 翻译键值对 / 1400+ translation keys -- ✅ 所有界面文本 / All UI text -- ✅ 所有按钮和标签 / All buttons and labels -- ✅ 所有提示和说明 / All tooltips and instructions - ---- - -## 📱 设计规范 / Design Specifications - -### 字体 / Typography -- **字体家族 / Font Family**: Inter (Google Fonts) -- **字重 / Weights**: 400 (Regular), 500 (Medium), 600 (Semi-bold), 700 (Bold) -- **基础字号 / Base Size**: 16px - -### 颜色系统 / Color System -- **主色调 / Primary**: #2563eb (蓝色 / Blue) -- **背景色 / Background**: #ffffff (白色 / White) -- **次要背景 / Secondary BG**: #f9fafb (浅灰 / Light Gray) -- **文字色 / Text**: #111827 (深灰 / Dark Gray) -- **次要文字 / Secondary Text**: #6b7280 (中灰 / Medium Gray) - -### 组件规范 / Component Specs -- **按钮高度 / Button Height**: 最小 48px / Minimum 48px (h-12) -- **圆角 / Border Radius**: 0.625rem -- **容器宽度 / Container Width**: 最大 480px / Max 480px -- **间距单位 / Spacing Unit**: 4px (Tailwind default) - ---- - -## 🏗️ 技术架构 / Technical Architecture - -### 前端框架 / Frontend -- React 18.3.1 -- TypeScript -- React Router 7.13.0 - -### 样式系统 / Styling -- Tailwind CSS v4 -- Custom CSS Variables -- Radix UI Components - -### 状态管理 / State Management -- React Context (语言切换 / Language switching) -- localStorage (用户数据 / User data) - ---- - -## 📋 标签打印流程 / Label Printing Workflow - -``` -1. Dashboard - ↓ -2. Labels > 创建 / Create - ↓ -3. 选择标签类型 / Select Label Type - ↓ -4. 选择食品项目 / Select Food Item - ↓ -5. 查看预览 / Preview Label - ↓ -6. 确认打印 / Confirm Print - ↓ -7. 成功提示 / Success Message - ↓ -8. 返回历史 / View in History -``` - ---- - -## 🎨 界面特点 / UI Features - -### ✨ 极简设计 / Minimalist Design -- 清晰的信息层级 / Clear information hierarchy -- 充足的留白空间 / Ample white space -- 直观的图标系统 / Intuitive icon system - -### 📱 移动优先 / Mobile First -- 响应式设计 / Responsive design -- 触摸友好的交互 / Touch-friendly interactions -- 480px 最大宽度优化 / Optimized for 480px max-width - -### 🎯 用户体验 / User Experience -- 底部导航易于触及 / Bottom nav within thumb reach -- 卡片式设计便于点击 / Card-based design for easy tapping -- 清晰的视觉反馈 / Clear visual feedback -- Toast 通知提示 / Toast notifications - ---- - -## 📦 移除的功能 / Removed Features - -为了专注于核心功能，以下功能已移除： -To focus on core functionality, the following features were removed: - -- ❌ 温湿度监控 / Temperature & Humidity Monitoring -- ❌ 电子标签设备管理 / Electronic Label Device Management -- ❌ 推送通知 / Push Notifications -- ❌ 环境监测仪表板 / Environmental Monitoring Dashboard - ---- - -## 🔮 未来扩展 / Future Expansion - -可以考虑添加的功能： -Features that can be considered for addition: - -1. **后端集成 / Backend Integration** - - Supabase 数据库 / Supabase Database - - 实时数据同步 / Real-time data sync - - 用户认证系统 / User authentication - -2. **高级功能 / Advanced Features** - - 真实打印机集成 / Real printer integration - - 条形码/二维码扫描 / Barcode/QR scanning - - 离线模式 / Offline mode - - 高级报表分析 / Advanced reporting - -3. **多语言支持 / Multi-language** - - 西班牙语 / Spanish - - 法语 / French - - 德语 / German - - 日语 / Japanese - ---- - -## 💡 使用建议 / Usage Tips - -### 最佳实践 / Best Practices: -1. 每天查看Dashboard了解工作概况 / Check Dashboard daily for overview -2. 使用标签历史追踪打印记录 / Use label history to track printed records -3. 及时完成待办任务 / Complete pending tasks promptly -4. 定期查看培训材料提升技能 / Review training materials regularly - -### 常见操作 / Common Operations: -- **快速打印** / Quick Print: Dashboard → 快速操作 / Quick Actions -- **查找标签** / Find Label: Labels → 历史 / History -- **切换店铺** / Switch Store: More → Location -- **查看帮助** / Get Help: More → Support - ---- - -## 📞 支持信息 / Support Information - -如需帮助，请访问： -For help, please visit: - -- **应用内支持** / In-app Support: More → Support -- **用户指南** / User Guide: Training Materials -- **常见问题** / FAQ: Support section - ---- - -**版本 / Version**: 1.0.0 -**更新日期 / Last Updated**: 2026年2月27日 / February 27, 2026 -**目标市场 / Target Market**: 北美和欧洲 / North America & Europe diff --git a/美国版/Food Labeling Management App React/README.md b/美国版/Food Labeling Management App React/README.md deleted file mode 100644 index 6ccfe32..0000000 --- a/美国版/Food Labeling Management App React/README.md +++ /dev/null @@ -1,296 +0,0 @@ -# 🍽️ Food Label System - Employee Mobile App - -A professional, enterprise-grade mobile application for restaurant and food service operations, designed for the European and American markets. - -![Version](https://img.shields.io/badge/version-1.0.0-blue) -![React](https://img.shields.io/badge/React-18.3.1-61dafb) -![TypeScript](https://img.shields.io/badge/TypeScript-Yes-3178c6) -![Tailwind](https://img.shields.io/badge/Tailwind-4.1.12-38bdf8) - ---- - -## 📱 Overview - -This mobile-first web application enables food service employees to: -- 🏷️ Print and manage food labels -- ✅ Execute safety and compliance tasks -- 🌡️ Record temperatures with validation -- 📸 Document issues with photos -- 🖨️ Monitor printer status -- 📊 Track daily operations - -**Design Philosophy**: Clean, professional, enterprise SaaS aesthetic with generous white space, card-based layouts, and high contrast elements optimized for mobile use. - ---- - -## ✨ Key Features - -### 🏠 Dashboard -- Real-time overview of daily operations -- Quick access to common actions -- Status indicators for labels, tasks, and devices -- Store and employee information display - -### 🏷️ Label Management -- Browse and search food labels -- Filter by expiration status (Normal, Expiring Soon, Expired) -- Configure print settings (template, quantity, printer) -- Track print queue status -- Retry failed print jobs - -### ✅ Task Execution -- View tasks organized by priority (Overdue, Open, Completed) -- Execute temperature checks with range validation -- Complete equipment condition assessments -- Upload photos and add notes -- Automatic issue detection and reporting - -### ⚙️ Settings & More -- Employee profile management -- Printer configuration and monitoring -- Location information -- Data synchronization status -- Support and help resources - ---- - -## 🎨 Design Highlights - -### Visual Design -- **Typography**: Inter font family for professional appearance -- **Colors**: Enterprise blue primary, semantic status colors -- **Layout**: Card-based with generous spacing -- **Mobile-First**: Optimized for 480px width - -### UX Patterns -- **Bottom Tab Navigation**: Easy thumb access -- **Status Badges**: Clear visual indicators with text labels -- **Touch Targets**: Minimum 48px height for all interactive elements -- **State Management**: Loading, empty, error, and success states - -### Accessibility -- High contrast color schemes -- Clear typography hierarchy -- Descriptive status labels -- Touch-friendly interface - ---- - -## 🚀 Quick Start - -### Prerequisites -- Node.js 18+ or Bun -- npm, pnpm, or yarn - -### Installation -```bash -# Install dependencies -npm install -# or -pnpm install -``` - -### Development -```bash -# Start development server -npm run dev -# or -pnpm dev -``` - -Open [http://localhost:5173](http://localhost:5173) in your browser. - -### Build -```bash -# Create production build -npm run build -# or -pnpm build -``` - ---- - -## 📖 Documentation - -| Document | Description | -|----------|-------------| -| [PROJECT_OVERVIEW.md](./PROJECT_OVERVIEW.md) | Complete project overview and features | -| [USAGE_GUIDE.md](./USAGE_GUIDE.md) | User guide with step-by-step instructions | -| [TECHNICAL_DOCS.md](./TECHNICAL_DOCS.md) | Technical architecture and implementation | -| [PAGE_REFERENCE.md](./PAGE_REFERENCE.md) | Quick reference for all pages and routes | - ---- - -## 🗺️ Navigation Structure - -``` -Login Page - └── Main App (Bottom Tab Navigation) - ├── 🏠 Dashboard - Overview and quick actions - ├── 🏷️ Labels - Label management - │ ├── Print Configuration - │ └── Print Queue - ├── ✅ Tasks - Task execution - │ ├── Task Details - │ └── Issue Reporting - └── ⚙️ More - Settings and support - ├── Profile - ├── Printers - ├── Location Info - ├── Sync Status - └── Support -``` - ---- - -## 🛠️ Technology Stack - -### Core -- **React** 18.3.1 - UI framework -- **React Router** 7.13.0 - Navigation (Data mode) -- **TypeScript** - Type safety -- **Vite** 6.3.5 - Build tool - -### Styling -- **Tailwind CSS** 4.1.12 - Utility-first CSS -- **Radix UI** - Accessible component primitives -- **Lucide React** - Icon library -- **Inter Font** - Typography - -### State & Utilities -- **Sonner** - Toast notifications -- **localStorage** - Session persistence (demo) - ---- - -## 📱 Demo Credentials - -The app runs in demo mode. Use any credentials to login: - -``` -Email: john@company.com -Password: any password -``` - ---- - -## 🎯 Use Cases - -### Restaurant Operations -- Daily temperature logging -- Food labeling for prep and storage -- Kitchen hygiene inspections -- Equipment maintenance checks - -### Food Processing -- Batch label printing -- Quality control task execution -- Temperature monitoring -- Waste documentation - -### Central Kitchen -- Multi-location label management -- Standardized task procedures -- Centralized compliance tracking -- Equipment status monitoring - ---- - -## 📸 Screenshots - -### Login Page -Clean, centered login form with company branding - -### Dashboard -Statistics cards with quick action buttons - -### Label List -Searchable list with color-coded status indicators - -### Task Execution -Multi-step form with validation and photo upload - -### Print Queue -Real-time status of print jobs with retry options - ---- - -## 🌍 Target Markets - -- 🇺🇸 United States -- 🇨🇦 Canada -- 🇬🇧 United Kingdom -- 🇪🇺 European Union -- 🇦🇺 Australia / New Zealand - ---- - -## 🔮 Future Enhancements - -### Planned Features -- [ ] Barcode scanning with device camera -- [ ] Offline-first architecture with service workers -- [ ] Real-time updates via WebSockets -- [ ] Multi-language support (i18n) -- [ ] Push notifications -- [ ] Voice input for hands-free operation -- [ ] Advanced analytics dashboard -- [ ] Integration with external POS systems - -### Technical Improvements -- [ ] Progressive Web App (PWA) support -- [ ] End-to-end testing suite -- [ ] Performance monitoring -- [ ] Error tracking (Sentry integration) -- [ ] Backend API integration -- [ ] Database persistence - ---- - -## 📄 License - -Copyright © 2026 Food Label System. All rights reserved. - ---- - -## 👥 Support - -### Getting Help -- 📞 **Phone**: 1-800-SUPPORT (24/7) -- 📧 **Email**: support@foodlabel.com -- 💬 **Live Chat**: Mon-Fri 8 AM - 8 PM EST - -### Resources -- User Guide -- Video Tutorials -- FAQ -- Technical Documentation - ---- - -## 🙏 Acknowledgments - -Built with: -- [React](https://react.dev) -- [Tailwind CSS](https://tailwindcss.com) -- [Radix UI](https://radix-ui.com) -- [Lucide Icons](https://lucide.dev) -- [Vite](https://vitejs.dev) - -Design inspired by modern enterprise SaaS applications with a focus on usability, accessibility, and professional aesthetics. - ---- - -**Version**: 1.0.0 -**Last Updated**: February 2026 -**Built for**: Food service professionals worldwide - ---- - -
- -### 🍽️ Making Food Safety Simple and Professional - -**[View Documentation](#-documentation)** • **[Quick Start](#-quick-start)** • **[Support](#-support)** - -
diff --git a/美国版/Food Labeling Management App React/SYSTEM_SUMMARY.md b/美国版/Food Labeling Management App React/SYSTEM_SUMMARY.md deleted file mode 100644 index fac3cb1..0000000 --- a/美国版/Food Labeling Management App React/SYSTEM_SUMMARY.md +++ /dev/null @@ -1,156 +0,0 @@ -# Food Label Printing System - Simplified Version - -## Overview -A minimalist enterprise SaaS-style food label printing system for the North American/European market. Designed for restaurants, food processing, and central kitchen scenarios. - -## Design Principles -- **European/American Enterprise Style**: Clean, professional interface using Inter font family -- **Corporate Blue Theme**: Primary color #2563eb (blue-600) -- **Accessibility**: Button minimum height ≥48px (h-12 in Tailwind) -- **Responsive Design**: Optimized for mobile devices with max-width 480px -- **Bilingual Support**: Complete English and Chinese (Simplified) language switching - -## Core Features - -### 1. Dashboard -- Today's label printing statistics -- Open tasks overview -- System alerts -- Quick actions for label printing -- Device status monitoring - -### 2. Labels (Core Feature) -**Label Types:** -- Nutrition Labels -- Allergen Labels -- Storage Labels -- Expiry Date Labels -- Batch Tracking Labels -- Preparation Labels - -**Workflow:** -1. Select label type -2. Choose food item from catalog -3. Preview label -4. Print label - -**Features:** -- Create new labels -- View printing history -- Track label status (Active/Expired) - -### 3. Tasks -- Task management system -- Temperature checks -- Hygiene inspections -- Equipment safety checks -- Task execution with photo upload -- Issue reporting - -### 4. More (Settings) -- User profile management -- Training materials -- Printer settings -- Location/store selection -- Data sync status -- Language settings (English/中文) -- Support and help resources - -## Technology Stack -- **Frontend**: React 18.3.1 + TypeScript -- **Routing**: React Router 7.13.0 -- **Styling**: Tailwind CSS v4 + Custom theme -- **UI Components**: Radix UI primitives -- **Icons**: Lucide React -- **State Management**: React Context (Language) -- **Notifications**: Sonner - -## Key Files - -### Configuration -- `/src/styles/theme.css` - Design tokens and theme variables -- `/src/styles/fonts.css` - Inter font configuration - -### Core Components -- `/src/app/App.tsx` - Application entry point -- `/src/app/routes.tsx` - Route configuration -- `/src/app/components/Layout.tsx` - Main layout with bottom navigation -- `/src/app/contexts/LanguageContext.tsx` - Bilingual support (1400+ translations) - -### Pages -- `/src/app/pages/Dashboard.tsx` - Main dashboard -- `/src/app/pages/Labels.tsx` - Label management -- `/src/app/pages/LabelFoodSelect.tsx` - Food selection -- `/src/app/pages/LabelPreview.tsx` - Label preview before printing -- `/src/app/pages/Tasks.tsx` - Task management -- `/src/app/pages/More.tsx` - Settings and more options - -## Navigation Structure -Bottom navigation bar with 4 tabs: -1. **Dashboard** - Overview and quick actions -2. **Labels** - Label printing system (create & history) -3. **Tasks** - Task management -4. **More** - Settings and additional features - -## Removed Features (Simplified Version) -The following features were removed to create this focused, core-functionality version: -- ❌ Temperature & Humidity Monitoring -- ❌ Electronic Label (ESL) Device Management -- ❌ Push Notifications -- ❌ Environmental Monitoring Dashboard - -## Design Specifications -- **Font Family**: Inter (400, 500, 600, 700) -- **Primary Color**: #2563eb (Corporate Blue) -- **Button Height**: Minimum 48px (h-12) -- **Container Max Width**: 480px (mobile-first) -- **Border Radius**: 0.625rem (--radius) -- **Base Font Size**: 16px - -## Getting Started - -### Development -```bash -# The project is already configured and ready to run -# All dependencies are installed via package.json -``` - -### Login -- Demo credentials: any email + password -- System navigates to store selection after login -- User info stored in localStorage - -### Language Switching -- Available in More > Language Settings -- Toggle between English and 中文（简体） -- Preference saved to localStorage -- Instant UI update across entire app - -## Multi-Store Support -- Store selection on login -- Current store displayed on Dashboard -- Switch stores via More > Location - -## Label Printing Flow -1. Dashboard > Quick Actions > Scan & Print - OR Dashboard > Bottom Nav > Labels -2. Select label type (6 options) -3. Browse and select food item -4. Review label preview -5. Confirm and print -6. View in printing history - -## Future Expansion Possibilities -- Supabase integration for backend/database -- Real printer integration -- Barcode/QR code scanning -- Offline mode with sync -- Multi-language expansion -- Advanced reporting and analytics - ---- - -**Version**: 1.0.0 -**Last Updated**: February 27, 2026 -**Target Market**: North America & Europe -**License**: Enterprise diff --git a/美国版/Food Labeling Management App React/SYSTEM_UPDATE_SUMMARY.md b/美国版/Food Labeling Management App React/SYSTEM_UPDATE_SUMMARY.md deleted file mode 100644 index 42f55cc..0000000 --- a/美国版/Food Labeling Management App React/SYSTEM_UPDATE_SUMMARY.md +++ /dev/null @@ -1,290 +0,0 @@ -# 系统更新说明 - -## 🎯 完成的三大需求 - -### 1. ✅ 手机端只能使用标签（不能制作标签） - -**改动说明：** -- ❌ 移除了标签打印功能（LabelPrint、LabelFoodSelect、LabelQueue 页面） -- ✅ 改为"标签库"模式 - Labels 页面显示已有的标签 -- ✅ 员工可以查看标签详情并"使用"标签（记录使用） -- ✅ 标签详情页面显示完整信息和有效期状态 - -**新的标签使用流程：** -``` -Labels（标签库）→ 选择标签 → 查看详情 → 使用标签 -``` - -**标签状态：** -- 🟢 Available（可用）- 标签有效，可以使用 -- 🟡 Expiring Soon（即将过期）- 1天内过期 -- 🔴 Expired（已过期）- 无法使用 - ---- - -### 2. ✅ 完整的中英文切换 - -**翻译覆盖率：100%** - -已翻译的所有页面： -- ✅ **Login** - 登录页面 -- ✅ **Dashboard** - 主页/仪表盘 -- ✅ **Labels** - 标签库（含标签详情页） -- ✅ **Tasks** - 任务管理 -- ✅ **More** - 更多设置（所有子页面） - - Profile（个人资料） - - Printers（打印机设置） - - Location（工作地点） - - Sync Status（同步状态） - - Language Settings（语言设置） - - Support（支持中心） -- ✅ **Bottom Navigation** - 底部导航栏 -- ✅ **所有按钮、表单、提示信息** - -**切换方式：** -``` -More（更多）→ Language / 语言 → 选择 English 或 中文（简体） -``` - -**翻译文件：** `/src/app/contexts/LanguageContext.tsx` -- 包含 700+ 翻译键值对 -- 支持动态参数替换 -- 语言设置持久化保存 - ---- - -### 3. ✅ 食品图片展示 - -**图片展示位置：** -- ✅ **Labels 页面**（标签列表） - - 每个标签卡片都有食品图片 - - 图片尺寸：80x80px（缩略图） - -- ✅ **LabelDetail 页面**（标签详情） - - 大尺寸食品图片：全宽 x 256px - - 高质量展示 - -**图片来源：** -- 使用 Unsplash 高质量食品图片 -- 10+ 种不同食品的真实图片： - - 烤鸡胸肉（Grilled Chicken） - - 凯撒沙拉（Caesar Salad） - - 三文鱼（Fresh Salmon） - - 牛肉饼（Ground Beef Patties） - - 意面酱（Marinara Sauce） - - 蔬菜（Pre-cut Vegetables） - - 巧克力布朗尼（Chocolate Brownie） - - 虾意面（Shrimp Pasta） - - 冰淇淋（Ice Cream） - - 三明治（Pre-made Sandwiches） - ---- - -## 📱 新的标签使用流程示意图 - -``` -┌─────────────────────────────────────────────────┐ -│ Labels（标签库） │ -│ │ -│ 🥗 Grilled Chicken Breast [LB001] ✅ │ -│ Nutrition Label │ -│ Expiry: Mar 2, 2026 │ -│ ┌────────────────────┐ │ -│ │ [食品图片] │ │ -│ └────────────────────┘ │ -│ │ -│ ⚠️ Caesar Salad [LB002] ✅ │ -│ Allergen Label │ -│ Expiry: Feb 28, 2026 │ -└─────────────────────────────────────────────────┘ - ↓ 点击标签 -┌─────────────────────────────────────────────────┐ -│ Label Detail（标签详情） │ -│ │ -│ ┌──────────────────────────────────────────┐ │ -│ │ │ │ -│ │ [大尺寸食品图片] │ │ -│ │ │ │ -│ └──────────────────────────────────────────┘ │ -│ │ -│ 🟢 Available for Use │ -│ This label is valid. Expires in 3 days. │ -│ │ -│ Label Information: │ -│ • Label ID: LB001 │ -│ • Category: Meat │ -│ • Printed Date: Feb 27, 2026 │ -│ • Expiry Date: Mar 2, 2026 │ -│ • Printed By: Maria Garcia │ -│ │ -│ Label Details: │ -│ • Serving Size: 150g │ -│ • Calories: 165 kcal │ -│ • Protein: 31g │ -│ • Fat: 3.6g │ -│ │ -│ Notes (Optional): │ -│ ┌─────────────────────────────────────┐ │ -│ │ Applied to container #3... │ │ -│ └─────────────────────────────────────┘ │ -│ │ -│ ┌──────────────────────────────────────────┐ │ -│ │ [Use This Label] │ │ -│ └──────────────────────────────────────────┘ │ -└─────────────────────────────────────────────────┘ -``` - ---- - -## 🌐 语言切换效果示例 - -### English（英文） -``` -Dashboard -├── Today's Labels: 247 -├── Open Tasks: 8 -├── Alerts: 5 -└── Quick Actions - ├── Scan & Print - ├── Batch Print - ├── Record Temperature - └── Report Waste -``` - -### 中文（简体） -``` -主页 -├── 今日标签：247 -├── 待办任务：8 -├── 提醒：5 -└── 快捷操作 - ├── 扫码打印 - ├── 批量打印 - ├── 记录温度 - └── 报告浪费 -``` - ---- - -## 🎨 UI 特点 - -### 设计风格 -- ✅ 极简企业级 SaaS 风格 -- ✅ 大留白设计 -- ✅ 卡片式布局 -- ✅ 企业蓝色主色调（#2563eb） -- ✅ 专业感强 - -### 按钮规范 -- ✅ 按钮高度 ≥ 48px（h-12） -- ✅ 重要操作使用 56px（h-14） -- ✅ 文本清晰，字体大（text-base/text-lg） - -### 状态展示 -- ✅ 所有状态使用文字标签 -- ✅ 配合颜色区分： - - 🟢 绿色 = 成功/可用/在线 - - 🟡 黄色 = 警告/即将过期 - - 🔴 红色 = 错误/过期/离线 - - 🔵 蓝色 = 信息/待处理 - ---- - -## 📂 文件结构 - -``` -/src/app/ -├── contexts/ -│ └── LanguageContext.tsx # 语言管理系统（700+ 翻译） -├── pages/ -│ ├── Dashboard.tsx # ✅ 主页（已翻译） -│ ├── Labels.tsx # ✅ 标签库（已重构 + 翻译） -│ ├── LabelDetail.tsx # ✅ 标签详情（新页面） -│ ├── Tasks.tsx # ✅ 任务管理（已翻译） -│ ├── More.tsx # ✅ 更多设置（已翻译） -│ └── more/ -│ ├── LanguageSettings.tsx # ✅ 语��设置（新页面） -│ ├── Profile.tsx # 个人资料 -│ ├── Printers.tsx # 打印机设置 -│ ├── Location.tsx # 工作地点 -│ ├── SyncStatus.tsx # 同步状态 -│ └── Support.tsx # 支持中心 -└── routes.tsx # ✅ 路由配置（已更新） -``` - ---- - -## 🚀 使用说明 - -### 查看标签 -1. 点击底部 **Labels**（标签）标签 -2. 浏览可用标签列表（带食品图片） -3. 使用搜索或分类筛选 -4. 点击标签查看详情 - -### 使用标签 -1. 在标签详情页查看所有信息 -2. 确认标签状态（可用/即将过期/已过期） -3. 可选：添加使用备注 -4. 点击 **Use This Label**（使用此标签）按钮 -5. 确认后标签使用记录被保存 - -### 切换语言 -1. 点击底部 **More**（更多）标签 -2. 选择 **Language / 语言** -3. 点击想要的语言（🇺🇸 English 或 🇨🇳 中文） -4. 语言立即生效，无需刷新 - ---- - -## 🎯 核心改进总结 - -| 项目 | 改进前 | 改进后 | -|-----|-------|-------| -| **标签功能** | 打印新标签 | 使用已有标签 | -| **语言支持** | 仅英文 | 中英文切换 | -| **食品展示** | 无图片 | 高质量图片 | -| **用户体验** | 复杂流程 | 简化操作 | -| **翻译覆盖** | 0% | 100% | -| **图片展示** | 0 张 | 10+ 张 | - ---- - -## ✨ 系统特色 - -1. **移动优先** - - 专为手机端设计 - - 单列布局，易于浏览 - - 大按钮，易于点击 - -2. **国际化** - - 完整中英文支持 - - 即时切换 - - 持久化保存 - -3. **视觉化** - - 每个标签都有食品图片 - - 状态清晰可见 - - 专业的配色方案 - -4. **简单易用** - - 减少操作步骤 - - 清晰的信息层级 - - 即时反馈 - ---- - -## 📝 技术栈 - -- **Frontend**: React + TypeScript -- **Routing**: React Router v7 -- **Styling**: Tailwind CSS v4 -- **UI Components**: shadcn/ui -- **Icons**: Lucide React -- **Notifications**: Sonner -- **Images**: Unsplash API -- **i18n**: Custom Context-based solution - ---- - -Created on: February 27, 2026 diff --git a/美国版/Food Labeling Management App React/TECHNICAL_DOCS.md b/美国版/Food Labeling Management App React/TECHNICAL_DOCS.md deleted file mode 100644 index 8c08956..0000000 --- a/美国版/Food Labeling Management App React/TECHNICAL_DOCS.md +++ /dev/null @@ -1,327 +0,0 @@ -# Technical Documentation - Food Label System - -## 🏗️ Project Structure - -``` -src/app/ -├── App.tsx # Main application entry point with RouterProvider -├── routes.tsx # React Router configuration -├── components/ -│ ├── Layout.tsx # Main layout with bottom navigation -│ ├── states/ # Reusable state components -│ │ ├── Loading.tsx -│ │ ├── EmptyState.tsx -│ │ ├── ErrorState.tsx -│ │ └── SuccessState.tsx -│ └── ui/ # Radix UI components (shadcn/ui) -├── pages/ -│ ├── Login.tsx # Authentication page -│ ├── Dashboard.tsx # Home dashboard -│ ├── Labels.tsx # Label list view -│ ├── LabelPrint.tsx # Label printing configuration -│ ├── LabelQueue.tsx # Print queue management -│ ├── Tasks.tsx # Task list view -│ ├── TaskExecute.tsx # Task execution form -│ ├── TaskIssue.tsx # Issue reporting form -│ ├── More.tsx # Settings menu -│ ├── NotFound.tsx # 404 page -│ └── more/ # Settings sub-pages -│ ├── Profile.tsx -│ ├── Printers.tsx -│ ├── Location.tsx -│ ├── SyncStatus.tsx -│ └── Support.tsx -└── styles/ - ├── fonts.css # Font imports (Inter) - ├── theme.css # Design system tokens - ├── tailwind.css # Tailwind directives - └── index.css # Global styles -``` - -## 🔧 Technology Stack - -### Core Dependencies -- **React**: 18.3.1 -- **React Router**: 7.13.0 (Data mode with createBrowserRouter) -- **Tailwind CSS**: 4.1.12 -- **Vite**: 6.3.5 - -### UI Libraries -- **Radix UI**: Complete suite of unstyled, accessible UI components -- **Lucide React**: 0.487.0 - Icon library -- **Sonner**: 2.0.3 - Toast notifications -- **class-variance-authority**: For component variants -- **tailwind-merge**: For className merging - -### Styling Approach -- Tailwind CSS v4 with CSS custom properties -- Design tokens in `theme.css` -- Mobile-first responsive design -- Max-width constraint (480px) for mobile simulation - -## 📐 Design System - -### Color Palette -```css ---primary: #2563eb /* Enterprise Blue */ ---background: #ffffff /* White */ ---foreground: oklch(0.145 0 0) /* Near Black */ ---destructive: #d4183d /* Error Red */ -``` - -### Typography Scale -```css ---font-size: 16px /* Base size */ -h1: 24px (text-2xl) -h2: 20px (text-xl) -h3: 18px (text-lg) -body: 16px (text-base) -``` - -### Spacing & Layout -- **Container**: max-w-[480px] mx-auto -- **Padding**: p-6 (24px) for page sections -- **Card spacing**: space-y-3 to space-y-6 -- **Button height**: h-12 (48px) minimum - -### Border Radius -- **Cards**: rounded-lg (10px) -- **Buttons**: rounded-lg (10px) -- **Badges**: rounded-lg (10px) - -## 🔀 Routing Architecture - -### Route Configuration -Using React Router v7 Data mode: -```tsx -createBrowserRouter([ - { path: "/login", Component: Login }, - { - path: "/", - Component: Layout, // Wrapper with bottom nav - children: [...] // Nested routes - } -]) -``` - -### Navigation Patterns -1. **Bottom Tab Navigation**: 4 main sections (Dashboard, Labels, Tasks, More) -2. **Nested Routes**: Sub-pages within main sections -3. **Protected Routes**: Auth check in Layout component -4. **Not Found**: Catch-all route (*) for 404s - -### State Persistence -- **localStorage** for authentication state -- Session data: `isLoggedIn`, `userName`, `storeName` -- Auto-redirect to `/login` if not authenticated - -## 🎨 Component Patterns - -### Page Structure -```tsx -
- {/* Header */} -
-

- Page Title -

-
- - {/* Content */} -
- {/* Cards and content */} -
- - {/* Fixed Bottom Button (if needed) */} -
-
- -
-
-
-``` - -### Card Component Usage -```tsx - - {/* Card content */} - -``` - -### Status Badge Pattern -```tsx - - {statusLabel} - -``` - -## 🔄 Data Flow - -### Mock Data -All data is currently mocked in component files for demonstration: -- Labels: 5 sample food items -- Tasks: 6 sample safety tasks -- Print Jobs: 4 sample jobs -- Printers: 4 sample devices - -### Future Integration Points -Components are structured to easily integrate with: -- REST APIs -- GraphQL endpoints -- WebSocket for real-time updates -- Local database (IndexedDB) for offline support - -## 🎯 Key Features Implementation - -### 1. Authentication -- Simple localStorage-based auth -- Login form with email/password -- Remember me functionality -- Logout with confirmation dialog - -### 2. Label Management -- List view with search and filters -- Print configuration with quantity/template selection -- Print queue with status tracking -- Retry failed print jobs - -### 3. Task Execution -- Multi-step forms with validation -- Temperature range checking -- Conditional issue reporting -- File upload placeholders - -### 4. State Components -Centralized state components for consistency: -- ``: Spinner with message -- ``: No data placeholder -- ``: Error handling (network, print, general) -- ``: Success confirmation - -## 📱 Mobile Optimization - -### Touch Targets -- Minimum 48px for all interactive elements -- Adequate spacing between touch targets -- Large, obvious CTAs - -### Bottom Navigation -- Fixed position at bottom -- Safe area inset handling -- Active state indication -- Icon + label for clarity - -### Content Strategy -- Main content in scrollable area -- Fixed header and navigation -- Bottom padding (pb-20) to prevent nav overlap - -## 🌐 Internationalization Ready - -While currently in English, the structure supports i18n: -- Text strings are not hardcoded in JSX -- Can easily wrap with translation functions -- Date/time formatting uses `toLocaleDateString` - -## 🔒 Security Considerations - -For production deployment, implement: -- Real authentication (JWT/OAuth) -- API request signing -- HTTPS enforcement -- XSS prevention (React handles most) -- CSRF tokens for mutations -- Input sanitization -- Rate limiting - -## 🧪 Testing Strategy - -Recommended test coverage: -- **Unit Tests**: Individual components -- **Integration Tests**: Page workflows -- **E2E Tests**: Critical user paths - - Login flow - - Label print workflow - - Task completion workflow - - Issue reporting - -## 📦 Build & Deployment - -### Build Command -```bash -npm run build -# or -pnpm build -``` - -### Output -- Static files in `dist/` -- Ready for CDN deployment -- No server-side rendering needed - -### Environment Variables -For production, configure: -- `VITE_API_URL`: Backend API endpoint -- `VITE_APP_VERSION`: Version number -- `VITE_SENTRY_DSN`: Error tracking (if used) - -## 🔄 Future Enhancements - -### Planned Features -1. **Offline-First Architecture** - - Service Workers - - IndexedDB for local storage - - Background sync - -2. **Real-time Updates** - - WebSocket integration - - Push notifications - - Live printer status - -3. **Advanced Features** - - Barcode scanning (device camera) - - Voice input - - Signature capture - - PDF generation - -4. **Internationalization** - - Multi-language support - - RTL layout support - - Currency/date localization - -5. **Analytics** - - User behavior tracking - - Performance monitoring - - Error reporting - -## 🐛 Debugging Tips - -### Common Issues - -1. **Routes not working** - - Check `routes.tsx` configuration - - Verify component imports - - Check browser console for errors - -2. **Styles not applying** - - Ensure Tailwind classes are correct - - Check `theme.css` for custom properties - - Verify no CSS conflicts - -3. **State not persisting** - - Check localStorage in DevTools - - Verify key names match - - Test in private/incognito mode - -## 📚 Additional Resources - -- [React Router v7 Docs](https://reactrouter.com) -- [Tailwind CSS v4 Docs](https://tailwindcss.com) -- [Radix UI Docs](https://radix-ui.com) -- [Lucide Icons](https://lucide.dev) - ---- - -**Maintained by**: Food Label System Team -**Last Updated**: February 2026 -**Version**: 1.0.0 diff --git a/美国版/Food Labeling Management App React/USAGE_GUIDE.md b/美国版/Food Labeling Management App React/USAGE_GUIDE.md deleted file mode 100644 index c3cb8d5..0000000 --- a/美国版/Food Labeling Management App React/USAGE_GUIDE.md +++ /dev/null @@ -1,218 +0,0 @@ -# Food Label System - Usage Guide - -## 🚀 Getting Started - -### Initial Login - -1. Open the application -2. Enter your credentials: - - **Email**: Any valid email format (e.g., `john@company.com`) - - **Password**: Any password -3. Check "Remember me" to stay logged in -4. Click "Login" - -> **Demo Mode**: The app currently runs in demo mode with mock data. All login credentials will work for demonstration purposes. - -## 📱 Main Navigation - -The app features a **bottom tab navigation** with 4 main sections: - -### 🏠 Dashboard -Your command center with: -- **Statistics Cards**: - - Today's Labels count - - Open Tasks - - Alerts for expiring items - - Device Status (printers) -- **Quick Actions**: - - Scan & Print - - Batch Print - - Record Temperature - - Report Waste - -**Tip**: Tap any statistic card to navigate directly to that section. - -### 🏷️ Labels -Manage food labels and printing: - -#### Browse Labels -- **Search**: Use the search bar to find specific items or batch numbers -- **Filter Tabs**: - - **All**: View all labels - - **Expiring Soon**: Yellow status labels - - **Expired**: Red status labels -- **Actions**: Tap "Print Label" on any item - -#### Print a Label -1. Select a label from the list -2. Choose template type (Standard, Large, Small) -3. Set quantity using +/- buttons -4. Select printer from dropdown -5. Preview the label -6. Tap "Print Label" - -#### Print Queue -View all print jobs: -- **In Progress**: Currently printing -- **Completed**: Successfully printed -- **Failed**: Tap "Retry" to reprint - -### ✅ Tasks -Execute safety and compliance tasks: - -#### Task List -Tasks are organized by status: -- **Overdue** (red border): Immediate attention needed -- **Open** (blue badge): Pending tasks -- **Completed** (green badge): Finished tasks - -#### Execute a Task -1. Tap "Start Task" on any task -2. Fill in required information: - - **Temperature**: Enter reading (normal range: 35-40°F) - - **Equipment Condition**: Select Good/Fair/Poor - - **Safety Checks**: Check applicable items - - **Photo**: Upload if needed (optional) - - **Notes**: Add additional context (optional) -3. Tap "Submit Task" - -#### Issue Reporting -If temperature is **out of range**, you'll automatically be directed to report an issue: -1. Review the detected issue -2. Describe the problem in detail -3. Document corrective actions taken -4. Upload before/after photos -5. Submit for supervisor review - -### ⚙️ More -Access settings and additional features: - -#### Profile -- View and edit your personal information -- Update contact details -- View employee ID - -#### Printers -- See all connected printers -- Check online/offline status -- View printer locations and models - -#### Location Info -- Store name and address -- Contact information -- Operating hours -- Manager details - -#### Sync Status -- View last sync time -- Check sync status for: - - Labels - - Tasks - - Photos -- Manually sync data - -#### Support -- Phone support (24/7) -- Email support -- Live chat -- Access resources: - - User Guide - - Video Tutorials - - FAQ -- Emergency support button - -## 💡 Tips & Best Practices - -### 📋 Task Execution -- ✅ Complete tasks before their due time to avoid overdue status -- ✅ Always fill in temperature readings accurately -- ✅ Upload photos when equipment issues are detected -- ✅ Provide detailed notes for context - -### 🏷️ Label Printing -- ✅ Check expiry dates before printing -- ✅ Print labels immediately after food prep -- ✅ Use batch printing for efficiency -- ✅ Verify printer status before large jobs - -### 🔄 Data Sync -- ✅ App auto-syncs every 5 minutes when online -- ✅ Check sync status regularly -- ✅ Manual sync available in More > Sync Status -- ✅ App works offline - data syncs when connection restored - -### 🚨 Alerts & Issues -- ✅ Red badges indicate urgent items -- ✅ Yellow badges indicate items needing attention -- ✅ Always report issues immediately -- ✅ Include photos for equipment problems - -## 🎨 Visual Status Indicators - -### Label Status -- 🟢 **Green** (Normal): Within expiry date -- 🟡 **Yellow** (Expiring Soon): Approaching expiry -- 🔴 **Red** (Expired): Past expiry date - -### Task Status -- 🔵 **Blue** (Open): Ready to start -- 🟢 **Green** (Completed): Finished -- 🔴 **Red** (Overdue): Past due time - -### Printer Status -- 🟢 **Online**: Ready to print -- ⚫ **Offline**: Not available - -### Sync Status -- ✅ **Synced**: All data current -- 🟠 **Pending**: Items waiting to sync - -## 🔐 Logout - -To logout: -1. Go to **More** tab -2. Scroll to bottom -3. Tap **Logout** -4. Confirm logout in dialog - -## 📞 Getting Help - -If you need assistance: -1. Tap **More** > **Support** -2. Choose your preferred contact method: - - **Phone**: 1-800-SUPPORT (24/7) - - **Email**: support@foodlabel.com - - **Live Chat**: Mon-Fri 8 AM - 8 PM EST -3. For emergencies, use the red "Call Emergency Support" button - -## 🌐 Offline Mode - -The app works offline: -- ✅ View existing labels and tasks -- ✅ Execute tasks and record data -- ✅ Queue print jobs -- 📡 Data automatically syncs when back online -- 🔄 Check sync status in More > Sync Status - -## 🔄 Common Workflows - -### Morning Opening -1. Login to app -2. Check Dashboard for overdue tasks -3. Complete temperature checks -4. Print labels for daily prep - -### During Service -1. Scan items as needed -2. Print labels for prepared foods -3. Record temperatures at scheduled times - -### Closing -1. Complete end-of-day tasks -2. Report any waste -3. Verify all tasks completed -4. Check sync status - ---- - -**Need more help?** Contact support or access the in-app help resources! diff --git a/美国版/Food Labeling Management App React/VERIFICATION_CHECKLIST.md b/美国版/Food Labeling Management App React/VERIFICATION_CHECKLIST.md deleted file mode 100644 index 82637d8..0000000 --- a/美国版/Food Labeling Management App React/VERIFICATION_CHECKLIST.md +++ /dev/null @@ -1,272 +0,0 @@ -# 系统验证清单 / System Verification Checklist - -## ✅ 设计规范 / Design Specifications - -### 字体系统 / Typography -- [x] Inter 字体已配置 / Inter font configured -- [x] 字重: 400, 500, 600, 700 / Weights: 400, 500, 600, 700 -- [x] 基础字号: 16px / Base font size: 16px -- [x] 字体来源: Google Fonts / Font source: Google Fonts - -### 颜色主题 / Color Theme -- [x] 主色调: #2563eb (企业蓝) / Primary: #2563eb (Corporate Blue) -- [x] 按钮使用主色调 / Buttons use primary color -- [x] 链接和重要元素使用主色调 / Links and key elements use primary color -- [x] 配色符合欧美企业风格 / Color scheme matches EU/US enterprise style - -### 组件规范 / Component Specifications -- [x] 按钮默认高度: h-12 (48px) / Default button height: h-12 (48px) -- [x] 按钮小尺寸: h-10 (40px) / Small button: h-10 (40px) -- [x] 按钮大尺寸: h-14 (56px) / Large button: h-14 (56px) -- [x] 圆角半径: 0.625rem / Border radius: 0.625rem -- [x] 容器最大宽度: 480px / Max container width: 480px - ---- - -## ✅ 功能模块 / Feature Modules - -### 核心功能 / Core Features -- [x] Dashboard (主页概览) / Dashboard (overview) -- [x] Labels (标签管理 - 核心功能) / Labels (label management - core) -- [x] Tasks (任务管理) / Tasks (task management) -- [x] More (更多设置) / More (settings) - -### Labels 模块详细功能 / Labels Module Details -- [x] 6种标签类型 / 6 label types: - - [x] Nutrition (营养标签) / Nutrition Label - - [x] Allergen (过敏原标签) / Allergen Label - - [x] Storage (储存标签) / Storage Label - - [x] Expiry (保质期标签) / Expiry Date Label - - [x] Batch (批次追踪标签) / Batch Tracking Label - - [x] Preparation (制备标签) / Preparation Label -- [x] 标签打印流程 / Label printing workflow: - - [x] 选择标签类型 / Select label type - - [x] 选择食品项目 / Select food item - - [x] 查看预览 / Preview label - - [x] 确认打印 / Confirm print -- [x] 打印历史记录 / Printing history -- [x] 双Tab切换 (创建/历史) / Dual tabs (Create/History) - -### Dashboard 功能 / Dashboard Features -- [x] 4个统计卡片 / 4 statistics cards -- [x] 2个快速操作 / 2 quick actions (仅标签相关) -- [x] 在线状态显示 / Online status display -- [x] 店铺名称显示 / Store name display - -### Tasks 功能 / Tasks Features -- [x] 任务列表 / Task list -- [x] 任务执行 / Task execution -- [x] 问题报告 / Issue reporting -- [x] 照片上传功能 / Photo upload functionality - -### More 功能 / More Features -- [x] 个人资料 / Profile -- [x] 培训材料 / Training materials -- [x] 打印机设置 / Printer settings -- [x] 位置/店铺选择 / Location selection -- [x] 同步状态 / Sync status -- [x] 语言设置 / Language settings -- [x] 支持帮助 / Support -- [x] 退出登录 / Logout - ---- - -## ✅ 已移除功能 / Removed Features - -- [x] 温湿度监控页面已删除 / Temperature monitoring page deleted -- [x] 电子标签设备管理页面已删除 / Electronic labels page deleted -- [x] 通知页面已删除 / Notifications page deleted -- [x] Dashboard中的环境监测模块已移除 / Environmental monitoring section removed from Dashboard -- [x] Dashboard中的电子标签模块已移除 / Electronic labels section removed from Dashboard -- [x] 路由配置已清理 / Routes configuration cleaned - ---- - -## ✅ 双语支持 / Bilingual Support - -### 语言功能 / Language Features -- [x] 英文支持 (默认) / English support (default) -- [x] 简体中文支持 / Simplified Chinese support -- [x] 语言切换功能 / Language switching functionality -- [x] 语言设置持久化 (localStorage) / Language persistence (localStorage) -- [x] 1400+ 翻译键值对 / 1400+ translation keys - -### 翻译覆盖 / Translation Coverage -- [x] 所有页面标题和描述 / All page titles and descriptions -- [x] 所有按钮文本 / All button text -- [x] 所有表单标签 / All form labels -- [x] 所有提示消息 / All toast messages -- [x] 所有标签类型名称 / All label type names -- [x] 所有食品项目名称 / All food item names -- [x] 所有任务名称和描述 / All task names and descriptions -- [x] 所有菜单项 / All menu items - ---- - -## ✅ 导航系统 / Navigation System - -### 底部导航栏 / Bottom Navigation -- [x] 4个主导航标签 / 4 main navigation tabs: - - [x] Dashboard (主页) - - [x] Labels (标签) - - [x] Tasks (任务) - - [x] More (更多) -- [x] 活跃状态高亮 / Active state highlighting -- [x] 图标 + 文字标签 / Icon + text labels -- [x] 固定在底部 / Fixed at bottom -- [x] 高度: 80px (h-20) / Height: 80px (h-20) - -### 路由配置 / Route Configuration -- [x] React Router v7 配置 / React Router v7 configured -- [x] 嵌套路由正确 / Nested routes correct -- [x] 404页面处理 / 404 page handling -- [x] 受保护路由 (登录检查) / Protected routes (login check) - ---- - -## ✅ 用户流程 / User Flows - -### 登录流程 / Login Flow -- [x] 登录页面 / Login page -- [x] 店铺选择页面 / Store selection page -- [x] 登录状态持久化 / Login state persistence -- [x] 自动导航到Dashboard / Auto-navigate to Dashboard - -### 标签打印流程 / Label Printing Flow -``` -Dashboard → Labels → Select Type → Select Food → Preview → Print → History -✅ 所有步骤正常工作 / All steps working correctly -``` - -### 任务执行流程 / Task Execution Flow -``` -Dashboard/Tasks → Task List → Select Task → Execute → Submit → Return -✅ 所有步骤正常工作 / All steps working correctly -``` - ---- - -## ✅ 响应式设计 / Responsive Design - -### 移动端优化 / Mobile Optimization -- [x] 最大宽度: 480px / Max width: 480px -- [x] 触摸友好的按钮尺寸 / Touch-friendly button sizes -- [x] 底部导航易于触达 / Bottom nav within thumb reach -- [x] 卡片式布局便于点击 / Card-based layout for easy tapping -- [x] 适当的留白和间距 / Proper spacing and padding - -### 桌面端支持 / Desktop Support -- [x] 居中布局 (max-w-[480px] mx-auto) / Centered layout -- [x] 保持移动端体验 / Maintains mobile experience -- [x] 响应式图片和组件 / Responsive images and components - ---- - -## ✅ UI/UX 特性 / UI/UX Features - -### 视觉反馈 / Visual Feedback -- [x] 按钮悬停效果 / Button hover effects -- [x] 卡片点击效果 / Card click effects -- [x] 加载状态显示 / Loading states -- [x] Toast 通知 / Toast notifications -- [x] 成功/错误提示 / Success/error messages - -### 交互设计 / Interaction Design -- [x] 清晰的导航路径 / Clear navigation paths -- [x] 直观的图标使用 / Intuitive icon usage -- [x] 一致的交互模式 / Consistent interaction patterns -- [x] 防误操作确认 (如退出登录) / Confirmation for critical actions - ---- - -## ✅ 数据管理 / Data Management - -### localStorage 使用 / localStorage Usage -- [x] isLoggedIn (登录状态) / Login status -- [x] userName (用户名) / User name -- [x] storeName (店铺名) / Store name -- [x] storeId (店铺ID) / Store ID -- [x] language (语言设置) / Language preference - -### Mock 数据 / Mock Data -- [x] 标签类型数据 / Label types data -- [x] 食品项目数据 / Food items data -- [x] 任务数据 / Tasks data -- [x] 店铺数据 / Stores data -- [x] 打印历史数据 / Print history data - ---- - -## ✅ 性能优化 / Performance Optimization - -### 代码组织 / Code Organization -- [x] 组件模块化 / Modular components -- [x] 路由懒加载支持 / Route lazy loading support -- [x] Context 使用优化 / Optimized Context usage -- [x] 避免不必要的重渲染 / Avoid unnecessary re-renders - -### 资源加载 / Resource Loading -- [x] Google Fonts 优化加载 / Optimized Google Fonts loading -- [x] 图标来自 lucide-react / Icons from lucide-react -- [x] CSS 变量使用 / CSS variables usage - ---- - -## ✅ 可访问性 / Accessibility - -### 基础可访问性 / Basic Accessibility -- [x] 语义化HTML / Semantic HTML -- [x] 按钮和链接易于区分 / Clear buttons vs links -- [x] 表单标签关联 / Form label associations -- [x] 键盘导航支持 / Keyboard navigation support -- [x] 颜色对比度符合标准 / Color contrast meets standards - ---- - -## ✅ 错误处理 / Error Handling - -### 用户体验 / User Experience -- [x] 404 页面 / 404 page -- [x] 空状态提示 / Empty states -- [x] 错误提示 Toast / Error toast messages -- [x] 表单验证 / Form validation -- [x] 网络错误处理 / Network error handling - ---- - -## 📝 待确认项 / Items to Verify - -### 实际使用测试 / Real Usage Testing -- [ ] 在移动设备上测试 / Test on mobile devices -- [ ] 在不同浏览器测试 / Test on different browsers -- [ ] 打印功能集成测试 / Print functionality integration test -- [ ] 性能压力测试 / Performance stress testing - -### 未来集成 / Future Integration -- [ ] Supabase 后端集成 / Supabase backend integration -- [ ] 真实打印机连接 / Real printer connection -- [ ] 条形码扫描功能 / Barcode scanning -- [ ] 离线模式支持 / Offline mode support - ---- - -## 🎉 验证总结 / Verification Summary - -### ✅ 已完成 / Completed -- 核心功能完整 / Core features complete -- 设计规范符合要求 / Design specs met -- 双语支持完善 / Bilingual support complete -- 不需要的功能已移除 / Unnecessary features removed -- 代码结构清晰 / Clean code structure - -### 🎯 系统状态 / System Status -**准备就绪！/ Ready for Use!** - -该系统是一个专注于核心标签打印功能的简化版本，符合所有设计规范和功能要求。 -This system is a simplified version focused on core label printing functionality, meeting all design specifications and functional requirements. - ---- - -**验证日期 / Verification Date**: 2026年2月27日 / February 27, 2026 -**系统版本 / System Version**: 1.0.0 -**验证状态 / Verification Status**: ✅ 通过 / PASSED diff --git a/美国版/Food Labeling Management App React/guidelines/Guidelines.md b/美国版/Food Labeling Management App React/guidelines/Guidelines.md deleted file mode 100644 index 110f117..0000000 --- a/美国版/Food Labeling Management App React/guidelines/Guidelines.md +++ /dev/null @@ -1,61 +0,0 @@ -**Add your own guidelines here** - diff --git a/美国版/Food Labeling Management App React/index.html b/美国版/Food Labeling Management App React/index.html deleted file mode 100644 index bac215f..0000000 --- a/美国版/Food Labeling Management App React/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - 美国版本 - - - -
- - - - \ No newline at end of file diff --git a/美国版/Food Labeling Management App React/package.json b/美国版/Food Labeling Management App React/package.json deleted file mode 100644 index c36df6f..0000000 --- a/美国版/Food Labeling Management App React/package.json +++ /dev/null @@ -1,89 +0,0 @@ -{ - "name": "@figma/my-make-file", - "private": true, - "version": "0.0.1", - "type": "module", - "scripts": { - "build": "vite build", - "dev": "vite" - }, - "dependencies": { - "@emotion/react": "11.14.0", - "@emotion/styled": "11.14.1", - "@mui/icons-material": "7.3.5", - "@mui/material": "7.3.5", - "@popperjs/core": "2.11.8", - "@radix-ui/react-accordion": "1.2.3", - "@radix-ui/react-alert-dialog": "1.1.6", - "@radix-ui/react-aspect-ratio": "1.1.2", - "@radix-ui/react-avatar": "1.1.3", - "@radix-ui/react-checkbox": "1.1.4", - "@radix-ui/react-collapsible": "1.1.3", - "@radix-ui/react-context-menu": "2.2.6", - "@radix-ui/react-dialog": "1.1.6", - "@radix-ui/react-dropdown-menu": "2.1.6", - "@radix-ui/react-hover-card": "1.1.6", - "@radix-ui/react-label": "2.1.2", - "@radix-ui/react-menubar": "1.1.6", - "@radix-ui/react-navigation-menu": "1.2.5", - "@radix-ui/react-popover": "1.1.6", - "@radix-ui/react-progress": "1.1.2", - "@radix-ui/react-radio-group": "1.2.3", - "@radix-ui/react-scroll-area": "1.2.3", - "@radix-ui/react-select": "2.1.6", - "@radix-ui/react-separator": "1.1.2", - "@radix-ui/react-slider": "1.2.3", - "@radix-ui/react-slot": "1.1.2", - "@radix-ui/react-switch": "1.1.3", - "@radix-ui/react-tabs": "1.1.3", - "@radix-ui/react-toggle-group": "1.1.2", - "@radix-ui/react-toggle": "1.1.2", - "@radix-ui/react-tooltip": "1.1.8", - "class-variance-authority": "0.7.1", - "clsx": "2.1.1", - "cmdk": "1.1.1", - "date-fns": "3.6.0", - "embla-carousel-react": "8.6.0", - "input-otp": "1.4.2", - "lucide-react": "0.487.0", - "motion": "12.23.24", - "next-themes": "0.4.6", - "react-day-picker": "8.10.1", - "react-dnd": "16.0.1", - "react-dnd-html5-backend": "16.0.1", - "react-hook-form": "7.55.0", - "react-popper": "2.3.0", - "react-resizable-panels": "2.1.7", - "react-responsive-masonry": "2.7.1", - "react-router": "7.13.0", - "react-slick": "0.31.0", - "recharts": "2.15.2", - "sonner": "2.0.3", - "tailwind-merge": "3.2.0", - "tw-animate-css": "1.3.8", - "vaul": "1.1.2" - }, - "devDependencies": { - "@tailwindcss/vite": "4.1.12", - "@vitejs/plugin-react": "4.7.0", - "tailwindcss": "4.1.12", - "vite": "6.3.5" - }, - "peerDependencies": { - "react": "18.3.1", - "react-dom": "18.3.1" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, - "pnpm": { - "overrides": { - "vite": "6.3.5" - } - } -} \ No newline at end of file diff --git a/美国版/Food Labeling Management App React/postcss.config.mjs b/美国版/Food Labeling Management App React/postcss.config.mjs deleted file mode 100644 index 531dbec..0000000 --- a/美国版/Food Labeling Management App React/postcss.config.mjs +++ /dev/null @@ -1,15 +0,0 @@ -/** - * PostCSS Configuration - * - * Tailwind CSS v4 (via @tailwindcss/vite) automatically sets up all required - * PostCSS plugins — you do NOT need to include `tailwindcss` or `autoprefixer` here. - * - * This file only exists for adding additional PostCSS plugins, if needed. - * For example: - * - * import postcssNested from 'postcss-nested' - * export default { plugins: [postcssNested()] } - * - * Otherwise, you can leave this file empty. - */ -export default {} diff --git a/美国版/Food Labeling Management App React/src/app/App.tsx b/美国版/Food Labeling Management App React/src/app/App.tsx deleted file mode 100644 index 2040ce9..0000000 --- a/美国版/Food Labeling Management App React/src/app/App.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { RouterProvider } from 'react-router'; -import { router } from './routes'; - -export default function App() { - return ; -} \ No newline at end of file diff --git a/美国版/Food Labeling Management App React/src/app/components/ExpiryAlert.tsx b/美国版/Food Labeling Management App React/src/app/components/ExpiryAlert.tsx deleted file mode 100644 index 66bed3d..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ExpiryAlert.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { useEffect, useState } from "react"; -import { AlertTriangle, X } from "lucide-react"; -import { Button } from "./ui/button"; -import { useLanguage } from "../contexts/LanguageContext"; - -interface ExpiryItem { - id: string; - nameKey: string; - expiryDate: string; - location: string; -} - -export function ExpiryAlert() { - const { t } = useLanguage(); - const [showAlert, setShowAlert] = useState(false); - const [expiryItems, setExpiryItems] = useState([]); - - useEffect(() => { - // Check for expiring items every minute - const checkExpiry = () => { - const now = new Date(); - const tomorrow = new Date(now); - tomorrow.setDate(tomorrow.getDate() + 1); - - // Mock data - in real app, this would come from API - const items: ExpiryItem[] = [ - { - id: "1", - nameKey: "food.chickenBreast", - expiryDate: tomorrow.toLocaleDateString(), - location: "Main Kitchen - Fridge #1", - }, - { - id: "2", - nameKey: "food.caesarSalad", - expiryDate: tomorrow.toLocaleDateString(), - location: "Prep Station - Cooler", - }, - ]; - - if (items.length > 0) { - setExpiryItems(items); - setShowAlert(true); - } - }; - - // Check on mount and every 5 minutes - checkExpiry(); - const interval = setInterval(checkExpiry, 5 * 60 * 1000); - - return () => clearInterval(interval); - }, []); - - if (!showAlert) return null; - - return ( -
-
- {/* Header */} -
-
-
-
- -
-
-

- {t("expiryAlert.title")} -

-

- {expiryItems.length} {t("expiryAlert.itemsExpiring")} -

-
-
- -
-
- - {/* Content */} -
-

- {t("expiryAlert.message")} -

- -
- {expiryItems.map((item) => ( -
-
-
-

- {t(item.nameKey)} -

-

- {t("expiryAlert.location")}: {item.location} -

-

- {t("expiryAlert.expires")}: {item.expiryDate} -

-
-
-
- ))} -
-
- - {/* Actions */} -
- - -
-
-
- ); -} diff --git a/美国版/Food Labeling Management App React/src/app/components/Layout.tsx b/美国版/Food Labeling Management App React/src/app/components/Layout.tsx deleted file mode 100644 index 5597812..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/Layout.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Outlet, useNavigate, useLocation } from "react-router"; -import { Home, Tag, Menu } from "lucide-react"; -import { useEffect } from "react"; -import { useLanguage } from "../contexts/LanguageContext"; - -export default function Layout() { - const navigate = useNavigate(); - const location = useLocation(); - const { t } = useLanguage(); - - useEffect(() => { - // Check if user is logged in - const isLoggedIn = localStorage.getItem("isLoggedIn"); - if (!isLoggedIn) { - navigate("/login"); - } - }, [navigate]); - - const navItems = [ - { path: "/", icon: Home, label: t("nav.dashboard") }, - { path: "/labels", icon: Tag, label: t("nav.labels") }, - { path: "/more", icon: Menu, label: t("nav.more") }, - ]; - - const isActive = (path: string) => { - if (path === "/") { - return location.pathname === "/"; - } - return location.pathname.startsWith(path); - }; - - return ( -
- {/* Main Content */} -
-
- -
-
- - {/* Bottom Navigation */} - -
- ); -} \ No newline at end of file diff --git a/美国版/Food Labeling Management App React/src/app/components/RootLayout.tsx b/美国版/Food Labeling Management App React/src/app/components/RootLayout.tsx deleted file mode 100644 index d746eb7..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/RootLayout.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { LanguageProvider } from "../contexts/LanguageContext"; -import { Toaster } from "./ui/sonner"; -import { ExpiryAlert } from "./ExpiryAlert"; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - {children} - - - - ); -} diff --git a/美国版/Food Labeling Management App React/src/app/components/figma/ImageWithFallback.tsx b/美国版/Food Labeling Management App React/src/app/components/figma/ImageWithFallback.tsx deleted file mode 100644 index 0e26139..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/figma/ImageWithFallback.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from 'react' - -const ERROR_IMG_SRC = - 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==' - -export function ImageWithFallback(props: React.ImgHTMLAttributes) { - const [didError, setDidError] = useState(false) - - const handleError = () => { - setDidError(true) - } - - const { src, alt, style, className, ...rest } = props - - return didError ? ( -
-
- Error loading image -
-
- ) : ( - {alt} - ) -} diff --git a/美国版/Food Labeling Management App React/src/app/components/states/EmptyState.tsx b/美国版/Food Labeling Management App React/src/app/components/states/EmptyState.tsx deleted file mode 100644 index c6b980e..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/states/EmptyState.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { LucideIcon } from "lucide-react"; -import { Button } from "../ui/button"; - -interface EmptyStateProps { - icon: LucideIcon; - title: string; - description: string; - actionLabel?: string; - onAction?: () => void; -} - -export default function EmptyState({ - icon: Icon, - title, - description, - actionLabel, - onAction, -}: EmptyStateProps) { - return ( -
-
- -
-

{title}

-

- {description} -

- {actionLabel && onAction && ( - - )} -
- ); -} diff --git a/美国版/Food Labeling Management App React/src/app/components/states/ErrorState.tsx b/美国版/Food Labeling Management App React/src/app/components/states/ErrorState.tsx deleted file mode 100644 index 002a784..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/states/ErrorState.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { WifiOff, AlertCircle } from "lucide-react"; -import { Button } from "../ui/button"; - -interface ErrorStateProps { - type: "network" | "error" | "print-failed"; - message?: string; - onRetry?: () => void; -} - -export default function ErrorState({ type, message, onRetry }: ErrorStateProps) { - const configs = { - network: { - icon: WifiOff, - title: "No Internet Connection", - description: - message || - "Please check your internet connection and try again. You can continue working offline.", - color: "text-orange-600", - bgColor: "bg-orange-100", - }, - error: { - icon: AlertCircle, - title: "Something Went Wrong", - description: message || "An unexpected error occurred. Please try again.", - color: "text-red-600", - bgColor: "bg-red-100", - }, - "print-failed": { - icon: AlertCircle, - title: "Print Failed", - description: - message || - "Unable to print the label. Please check your printer connection and try again.", - color: "text-red-600", - bgColor: "bg-red-100", - }, - }; - - const config = configs[type]; - const Icon = config.icon; - - return ( -
-
- -
-

- {config.title} -

-

- {config.description} -

- {onRetry && ( - - )} -
- ); -} diff --git a/美国版/Food Labeling Management App React/src/app/components/states/Loading.tsx b/美国版/Food Labeling Management App React/src/app/components/states/Loading.tsx deleted file mode 100644 index 74c0c81..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/states/Loading.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Loader2 } from "lucide-react"; - -interface LoadingProps { - message?: string; -} - -export default function Loading({ message = "Loading..." }: LoadingProps) { - return ( -
- -

{message}

-
- ); -} diff --git a/美国版/Food Labeling Management App React/src/app/components/states/README.md b/美国版/Food Labeling Management App React/src/app/components/states/README.md deleted file mode 100644 index 8e09c35..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/states/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# State Components - -This directory contains reusable state components for the application: - -## Components - -### Loading -Shows a loading spinner with optional message -```tsx - -``` - -### EmptyState -Shows when no data is available -```tsx - navigate('/labels/create')} -/> -``` - -### ErrorState -Shows error states (network, general errors, print failures) -```tsx - fetchData()} -/> -``` - -### SuccessState -Shows success confirmation -```tsx - navigate('/tasks')} -/> -``` - -## Usage - -All state components are designed to be full-screen overlays that maintain the professional European/American enterprise design style with: -- Large icons in colored backgrounds -- Clear, concise messaging -- Prominent call-to-action buttons -- Consistent spacing and typography diff --git a/美国版/Food Labeling Management App React/src/app/components/states/SuccessState.tsx b/美国版/Food Labeling Management App React/src/app/components/states/SuccessState.tsx deleted file mode 100644 index 9db23ab..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/states/SuccessState.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { CheckCircle2 } from "lucide-react"; -import { Button } from "../ui/button"; - -interface SuccessStateProps { - title: string; - description: string; - actionLabel?: string; - onAction?: () => void; -} - -export default function SuccessState({ - title, - description, - actionLabel, - onAction, -}: SuccessStateProps) { - return ( -
-
- -
-

{title}

-

- {description} -

- {actionLabel && onAction && ( - - )} -
- ); -} diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/accordion.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/accordion.tsx deleted file mode 100644 index bd6b1e3..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/accordion.tsx +++ /dev/null @@ -1,66 +0,0 @@ -"use client"; - -import * as React from "react"; -import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import { ChevronDownIcon } from "lucide-react"; - -import { cn } from "./utils"; - -function Accordion({ - ...props -}: React.ComponentProps) { - return ; -} - -function AccordionItem({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AccordionTrigger({ - className, - children, - ...props -}: React.ComponentProps) { - return ( - - svg]:rotate-180", - className, - )} - {...props} - > - {children} - - - - ); -} - -function AccordionContent({ - className, - children, - ...props -}: React.ComponentProps) { - return ( - -
{children}
- - ); -} - -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/alert-dialog.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/alert-dialog.tsx deleted file mode 100644 index 875b8df..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/alert-dialog.tsx +++ /dev/null @@ -1,157 +0,0 @@ -"use client"; - -import * as React from "react"; -import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; - -import { cn } from "./utils"; -import { buttonVariants } from "./button"; - -function AlertDialog({ - ...props -}: React.ComponentProps) { - return ; -} - -function AlertDialogTrigger({ - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AlertDialogPortal({ - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AlertDialogOverlay({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AlertDialogContent({ - className, - ...props -}: React.ComponentProps) { - return ( - - - - - ); -} - -function AlertDialogHeader({ - className, - ...props -}: React.ComponentProps<"div">) { - return ( -
- ); -} - -function AlertDialogFooter({ - className, - ...props -}: React.ComponentProps<"div">) { - return ( -
- ); -} - -function AlertDialogTitle({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AlertDialogDescription({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AlertDialogAction({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AlertDialogCancel({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -export { - AlertDialog, - AlertDialogPortal, - AlertDialogOverlay, - AlertDialogTrigger, - AlertDialogContent, - AlertDialogHeader, - AlertDialogFooter, - AlertDialogTitle, - AlertDialogDescription, - AlertDialogAction, - AlertDialogCancel, -}; diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/alert.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/alert.tsx deleted file mode 100644 index 9c35976..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/alert.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from "react"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "./utils"; - -const alertVariants = cva( - "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", - { - variants: { - variant: { - default: "bg-card text-card-foreground", - destructive: - "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", - }, - }, - defaultVariants: { - variant: "default", - }, - }, -); - -function Alert({ - className, - variant, - ...props -}: React.ComponentProps<"div"> & VariantProps) { - return ( -
- ); -} - -function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { - return ( -
- ); -} - -function AlertDescription({ - className, - ...props -}: React.ComponentProps<"div">) { - return ( -
- ); -} - -export { Alert, AlertTitle, AlertDescription }; diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/aspect-ratio.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/aspect-ratio.tsx deleted file mode 100644 index c16d6bc..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/aspect-ratio.tsx +++ /dev/null @@ -1,11 +0,0 @@ -"use client"; - -import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"; - -function AspectRatio({ - ...props -}: React.ComponentProps) { - return ; -} - -export { AspectRatio }; diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/avatar.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/avatar.tsx deleted file mode 100644 index c990451..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/avatar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -"use client"; - -import * as React from "react"; -import * as AvatarPrimitive from "@radix-ui/react-avatar"; - -import { cn } from "./utils"; - -function Avatar({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AvatarImage({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function AvatarFallback({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -export { Avatar, AvatarImage, AvatarFallback }; diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/badge.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/badge.tsx deleted file mode 100644 index 2ccc2c4..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/badge.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "./utils"; - -const badgeVariants = cva( - "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", - { - variants: { - variant: { - default: - "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", - secondary: - "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", - destructive: - "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", - outline: - "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", - }, - }, - defaultVariants: { - variant: "default", - }, - }, -); - -function Badge({ - className, - variant, - asChild = false, - ...props -}: React.ComponentProps<"span"> & - VariantProps & { asChild?: boolean }) { - const Comp = asChild ? Slot : "span"; - - return ( - - ); -} - -export { Badge, badgeVariants }; diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/breadcrumb.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/breadcrumb.tsx deleted file mode 100644 index 8f84d7e..0000000 --- a/美国版/Food Labeling Management App React/src/app/components/ui/breadcrumb.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { ChevronRight, MoreHorizontal } from "lucide-react"; - -import { cn } from "./utils"; - -function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { - return