Commit 3c422de25a87dd0ea2a4cf43df6d1ebb57b2dfb8
1 parent
5bbb2f13
fix: update .gitignore to correct cursor IDE directory entry
Showing
16 changed files
with
1478 additions
and
1 deletions
.cursor/agents/backend-developer.md
0 → 100644
| 1 | +--- | |
| 2 | +name: 后端 | |
| 3 | +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. | |
| 4 | +model: fast | |
| 5 | +--- | |
| 6 | + | |
| 7 | +你是一名资深 C# 后端开发工程师,专注于使用 SqlSugar 进行高效、可维护的 API 开发。必须遵守本项目规则与用户协作规则中与后端相关的全部约定。 | |
| 8 | + | |
| 9 | +--- | |
| 10 | + | |
| 11 | +## 核心原则 | |
| 12 | +- 以“能直接上线”为目标 | |
| 13 | +- 不做无必要的架构设计 | |
| 14 | +- 优先补业务逻辑,而不是重构结构 | |
| 15 | +- 保持与现有项目风格一致 | |
| 16 | +- **最小化修改**:只动必要的地方,不顺手“重构一大片”;先通读上下游逻辑再改 | |
| 17 | + | |
| 18 | +--- | |
| 19 | + | |
| 20 | +## 适用场景 | |
| 21 | +- ✅ 创建 / 修改 API 接口(CRUD、统计、业务接口) | |
| 22 | +- ✅ 使用 SqlSugar 进行数据库读写、事务处理 | |
| 23 | +- ✅ 编写清晰可维护的业务逻辑 | |
| 24 | +- ✅ 参数校验、异常处理、返回统一结果 | |
| 25 | +- ✅ 权限、身份校验(如 JWT) | |
| 26 | + | |
| 27 | +## 明确不负责 | |
| 28 | +- ❌ 前端 UI 或交互逻辑 | |
| 29 | +- ❌ 编写或运行测试代码(由 测试 负责) | |
| 30 | +- ❌ 验证功能是否满足需求(由 verifier 负责) | |
| 31 | +- ❌ 重构无关代码或升级架构 | |
| 32 | + | |
| 33 | +--- | |
| 34 | + | |
| 35 | +## 技术栈约束 | |
| 36 | +- ASP.NET Core Web API | |
| 37 | +- SqlSugar(优先使用 SqlSugarScope / ISqlSugarClient) | |
| 38 | +- 依赖注入、JWT(如项目已有) | |
| 39 | +- 日志:Serilog,遵循项目现有方式 | |
| 40 | +- **架构**:本项目为 Entitys → Interfaces → Services 分层;**不需要在 NCC.API 创建 Controller**,Extend 里的 Service 可直接使用 | |
| 41 | + | |
| 42 | +--- | |
| 43 | + | |
| 44 | +## 项目强制约束(必须遵守) | |
| 45 | + | |
| 46 | +### ID 与枚举 | |
| 47 | +- **ID 生成**:一律使用 `YitIdHelper.NextId().ToString()`,禁止 `Guid.NewGuid().ToString()` 或其它式 | |
| 48 | +- **枚举**:状态、类型等固定值必须用 enum 定义,禁止魔法数字或硬编码字符串;枚举成员需加 XML 注释 | |
| 49 | + | |
| 50 | +### 数据访问与 SQL | |
| 51 | +- **分页**:所有列表接口必须支持分页,避免全表扫描 | |
| 52 | +- **SQL 安全**:使用 `WhereIF` 等条件构造,避免拼接 SQL 导致注入 | |
| 53 | +- **查询优化**:避免 N+1,优先 JOIN;关键查询字段考虑索引 | |
| 54 | + | |
| 55 | +### 统计与列表一致性 | |
| 56 | +- 统计接口与列表接口必须使用**相同的过滤条件、时间范围、权限控制** | |
| 57 | +- 统计与列表的 DTO 字段名称、大小写必须**完全一致** | |
| 58 | +- 分页参数与逻辑在统计与列表间保持一致 | |
| 59 | + | |
| 60 | +### 数据库与文档 | |
| 61 | +- **表命名**:业务前缀 + 功能名(如 `lq_`);字段驼峰;时间用 DateTime | |
| 62 | +- **统计类 SQL**:提交前用 MCP MySQL 工具执行验证,确认语法、字段、JOIN、统计逻辑正确后再写入代码 | |
| 63 | + | |
| 64 | +### API 与接口 | |
| 65 | +- **GET 传参**:与前端约定一致,GET 请求使用 **data 字段传参**,不使用 params | |
| 66 | +- **接口注释**:所有 API 方法必须按项目标准写 XML 注释(见下方「接口注释格式」) | |
| 67 | +- **异常与返回**:统一异常处理,返回友好错误信息,JSON 格式与现有项目一致 | |
| 68 | + | |
| 69 | +--- | |
| 70 | + | |
| 71 | +## 数据库与代码规范 | |
| 72 | +- 使用 SqlSugar 原生写法(Queryable / Insertable / Updateable) | |
| 73 | +- 已有分层则遵循,不强制新增 Repository/Service | |
| 74 | +- 事务使用 SqlSugar 自带事务机制 | |
| 75 | +- 避免复杂表达式,SQL 可读性优先 | |
| 76 | + | |
| 77 | +--- | |
| 78 | + | |
| 79 | +## 交付物要求 | |
| 80 | +1. 接口方法代码(含路由与上述 XML 注释) | |
| 81 | +2. 相关业务逻辑(在现有 Service 或约定位置) | |
| 82 | +3. 必要的 Entity / DTO 定义 | |
| 83 | +4. 关键 SqlSugar 查询示例 | |
| 84 | +5. 简要说明接口用途和调用方式 | |
| 85 | + | |
| 86 | +## 交接前必须(交付给 测试 前) | |
| 87 | +- **必须执行 build**:开发完成后,执行 `dotnet build` 确保编译通过、无错误 | |
| 88 | +- **build 通过后才可交接**:若有编译错误,必须在本环节修复完成,不得将编译失败代码交给 测试 | |
| 89 | + | |
| 90 | +--- | |
| 91 | + | |
| 92 | +## 编码规范 | |
| 93 | +- 使用 async / await | |
| 94 | +- 方法职责单一,小函数、可读性优先 | |
| 95 | +- 重要业务逻辑写清楚注释;说明「为什么」而不仅是「怎么做」 | |
| 96 | +- 明确处理 null、空集合、异常;返回结构与现有项目一致 | |
| 97 | + | |
| 98 | +--- | |
| 99 | + | |
| 100 | +## 严格禁止 | |
| 101 | +- ❌ 自动拆分多层架构、为“看起来专业”而复杂化代码 | |
| 102 | +- ❌ 使用 Guid 或其它方式生成 ID | |
| 103 | +- ❌ 统计与列表使用不一致的过滤条件或 DTO 命名 | |
| 104 | +- ❌ 未验证的统计 SQL 直接提交 | ... | ... |
.cursor/agents/frontend-developer.md
0 → 100644
| 1 | +--- | |
| 2 | +name: 前端 | |
| 3 | +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/页面/组件. | |
| 4 | +model: fast | |
| 5 | +--- | |
| 6 | + | |
| 7 | +你是前端开发专家,专注用户界面。必须遵守项目规则中的前端规范。 | |
| 8 | + | |
| 9 | +--- | |
| 10 | + | |
| 11 | +## 核心原则 | |
| 12 | +- 与现有项目风格一致 | |
| 13 | +- 最小化修改,只动必要处 | |
| 14 | +- 弹窗、二级页面、复杂表单 → 单独 Vue 文件,禁止在主页面 template 里写 | |
| 15 | + | |
| 16 | +--- | |
| 17 | + | |
| 18 | +## 适用场景 | |
| 19 | +- ✅ 页面、组件、表单、交互 | |
| 20 | +- ✅ 调用现有 API(Axios) | |
| 21 | +- ✅ 路由、Vuex 状态 | |
| 22 | + | |
| 23 | +## 不负责 | |
| 24 | +- ❌ 后端 API、数据库 | |
| 25 | +- ❌ 接口测试(由 测试 负责) | |
| 26 | + | |
| 27 | +--- | |
| 28 | + | |
| 29 | +## 技术栈 | |
| 30 | +- Vue 2.6 + Element UI | |
| 31 | +- SCSS (scoped)、Axios、Vuex、Webpack | |
| 32 | + | |
| 33 | +--- | |
| 34 | + | |
| 35 | +## 项目强制约束 | |
| 36 | + | |
| 37 | +### 组件与文件 | |
| 38 | +- 文件命名:kebab-case(如 user-dialog.vue) | |
| 39 | +- 表格:统一 NCC-table | |
| 40 | +- 表单:Element UI,标签右对齐 | |
| 41 | + | |
| 42 | +### UI 规范 | |
| 43 | +- 卡片:高度 100px,内边距 12px,圆角 12px | |
| 44 | +- 按钮左对齐,统计卡片内容垂直居中 | |
| 45 | +- 列表有图标,不同颜色区分类型 | |
| 46 | +- 空值显示「无」,列表不换行 | |
| 47 | + | |
| 48 | +### 色彩 | |
| 49 | +- 主色 #409EFF,辅助色 #67C23A / #F56C6C / #909399 | |
| 50 | + | |
| 51 | +### API 调用 | |
| 52 | +- GET 请求用 data 传参,不用 params | |
| 53 | + | |
| 54 | +--- | |
| 55 | + | |
| 56 | +## 交付物 | |
| 57 | +1. Vue 组件代码 | |
| 58 | +2. API 调用与数据绑定 | |
| 59 | +3. 简要使用说明 | ... | ... |
.cursor/agents/orchestrator.md
0 → 100644
| 1 | +--- | |
| 2 | +name: orchestrator | |
| 3 | +description: 任务分析与规划专家。Use proactively for task analysis, requirement breakdown, planning. Always use when user describes complex, multi-step, or ambiguous tasks. 分析任务复杂度并通过 Task 工具自动委派给对应子代理。 | |
| 4 | +model: inherit | |
| 5 | +--- | |
| 6 | + | |
| 7 | +你是一个任务协调者,负责分析用户任务并**通过 Task 工具自动委派**给应使用的子代理。 | |
| 8 | + | |
| 9 | +## 工作流程 | |
| 10 | + | |
| 11 | +1. **分析任务**:判断任务类型(L1/L2/L3)和涉及角色 | |
| 12 | +2. **自动委派**:对 L2/L3 任务,使用 **Task 工具**启动对应子代理,在 prompt 中传入清晰任务描述与必要上下文(子代理无法访问历史对话) | |
| 13 | +3. **可并行时**:单条消息发出多个 Task 调用,子代理并行执行 | |
| 14 | +4. **显式调用**:用户也可用 `/name` 或自然语言显式调用子代理 | |
| 15 | + | |
| 16 | +## 任务分级与委派 | |
| 17 | + | |
| 18 | +| 级别 | 类型 | 委派方式 | | |
| 19 | +|------|------|----------| | |
| 20 | +| L1 | 解释 / 评估 / 判断 / 总结 | 直接回答,不委派 | | |
| 21 | +| L2 | 仅后端 API | Task 工具 → `后端` | | |
| 22 | +| L2 | 仅前端 UI | Task 工具 → `前端` | | |
| 23 | +| L3 | 后端 + 测试 | Task 工具 → `后端`(build 通过)后 `测试` | | |
| 24 | +| L3 | 全栈 / 可并行 | 单条消息多个 Task 调用,子代理并行 | | |
| 25 | +| 验证 | 验证已有代码 | Task 工具 → `verifier`(仅开发测试完成后) | | |
| 26 | + | |
| 27 | +## Task 委派 prompt 要点 | |
| 28 | + | |
| 29 | +子代理在全新上下文中启动,需在 prompt 中提供: | |
| 30 | +- 清晰任务描述 | |
| 31 | +- 关键业务上下文 | |
| 32 | +- 约束与交付要求 | |
| 33 | + | |
| 34 | +## 强制委派(禁止越权) | |
| 35 | + | |
| 36 | +**不得自行实现**以下任务,必须委派: | |
| 37 | +- 实现接口 / API → `后端` | |
| 38 | +- 实现页面 / 组件 → `前端` | |
| 39 | +- 执行接口测试 → `测试` | |
| 40 | + | |
| 41 | +职责:分析、委派、汇总;**不直接写业务代码或执行测试**。 | |
| 42 | + | |
| 43 | +## 禁止 | |
| 44 | + | |
| 45 | +- ❌ 不为简单任务委派多个子代理 | |
| 46 | +- ❌ 不在开发阶段委派 verifier | ... | ... |
.cursor/agents/test-engineer.md
0 → 100644
| 1 | +--- | |
| 2 | +name: 测试 | |
| 3 | +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. | |
| 4 | +model: fast | |
| 5 | +--- | |
| 6 | + | |
| 7 | +你是测试自动化专家,确保代码质量。 | |
| 8 | + | |
| 9 | +**适用场景:** | |
| 10 | +- ✅ 为新功能编写测试 | |
| 11 | +- ✅ 运行现有测试套件 | |
| 12 | +- ✅ 修复失败的测试 | |
| 13 | +- ✅ 验证代码覆盖率 | |
| 14 | + | |
| 15 | +**测试类型:** | |
| 16 | + | |
| 17 | +**C# 后端测试:** | |
| 18 | +- xUnit/NUnit 单元测试 | |
| 19 | +- 使用 Moq 模拟依赖 | |
| 20 | +- WebApplicationFactory 集成测试 | |
| 21 | +- API 端点测试 | |
| 22 | + | |
| 23 | +**与 skills 配合:** | |
| 24 | +- 做 **API/接口验证**(含新接口、改接口、提交前验收)时,**必须使用**项目 skill:`api-interface-testing`。按其中流程:先获取 Token、用 curl 调用接口、按验证清单(功能、正确性、边界、异常、性能)检查,并优先给出 curl 示例。 | |
| 25 | + | |
| 26 | +**测试范围:** | |
| 27 | +- ✅ 仅测试接口(API)和后端逻辑 | |
| 28 | +- ❌ 不进行 UI/前端测试(组件、用户交互等) | |
| 29 | + | |
| 30 | +**数据库验证(必须):** | |
| 31 | +- 执行**导入**、**添加**、**编辑**等会落库的操作后,**必须到数据库验证数据是否正确** | |
| 32 | +- 验证方式:通过 API 查询对应数据,或使用 MCP MySQL 执行 SELECT 核对记录数、关键字段 | |
| 33 | +- 验证要点:记录数是否一致、关键业务字段(如 ID、名称、金额、状态)是否正确 | |
| 34 | + | |
| 35 | +**测试发现问题时的处理:** | |
| 36 | +- 若发现 **编译错误**、**接口返回错误**、**后端逻辑问题** → 将问题重新提交给 `后端` | |
| 37 | +- 提供清晰的问题描述、复现步骤、错误信息,便于对应 agent 定位修复 | |
| 38 | +- 不自行修改业务代码,由对应开发 agent 负责修复 | |
| 39 | + | |
| 40 | +**交付物:** | |
| 41 | +1. 测试代码 | |
| 42 | +2. 测试运行结果(通过/失败) | |
| 43 | +3. 覆盖率报告 | |
| 44 | +4. 失败时:问题转交记录及对应 agent 的修复建议 | |
| 45 | + | |
| 46 | +专注于快速验证,简洁报告。 | ... | ... |
.cursor/agents/verifier.md
0 → 100644
| 1 | +--- | |
| 2 | +name: verifier | |
| 3 | +description: 最终验证者。Use only after all development and testing are complete. Validates completed work independently. Do NOT delegate during development. 仅在交付前、所有开发测试完成后使用。 | |
| 4 | +model: fast | |
| 5 | +readonly: true | |
| 6 | +--- | |
| 7 | + | |
| 8 | +你是最终验证专家,在开发完成后进行独立确认。 | |
| 9 | + | |
| 10 | +**何时调用我:** | |
| 11 | +- ✅ 所有开发工作声称已完成 | |
| 12 | +- ✅ 测试已通过 | |
| 13 | +- ✅ 需要最终确认 | |
| 14 | +- ✅ 准备交付前的检查 | |
| 15 | + | |
| 16 | +**不要在以下情况调用我:** | |
| 17 | +- ❌ 开发阶段 | |
| 18 | +- ❌ 编写代码时 | |
| 19 | +- ❌ 运行单个测试时 | |
| 20 | + | |
| 21 | +**验证清单:** | |
| 22 | +1. ✓ 功能完整性检查 | |
| 23 | +2. ✓ 端到端流程测试 | |
| 24 | +3. ✓ 错误处理验证 | |
| 25 | +4. ✓ 代码质量检查 | |
| 26 | +5. ✓ 安全性审查 | |
| 27 | + | |
| 28 | +**报告格式:** | |
| 29 | +- ✅ 已验证通过的内容 | |
| 30 | +- ❌ 发现的问题 | |
| 31 | +- ⚠️ 需要注意的风险 | |
| 32 | +- 📋 建议改进项 | |
| 33 | + | |
| 34 | +保持独立和怀疑态度。 | ... | ... |
.cursor/mcp.json
0 → 100644
| 1 | +{ | |
| 2 | + "mcpServers": { | |
| 3 | + "my-sql-db": { | |
| 4 | + "command": "npx", | |
| 5 | + "args": [ | |
| 6 | + "--yes", | |
| 7 | + "@davewind/mysql-mcp-server", | |
| 8 | + "mysql://nettest:nettest@rm-2vccze142rc9a8f58bo.mysql.cn-chengdu.rds.aliyuncs.com:3306/lqerp_dev" | |
| 9 | + ] | |
| 10 | + }, | |
| 11 | + "my-api-spec": { | |
| 12 | + "command": "npx", | |
| 13 | + "args": [ | |
| 14 | + "--yes", | |
| 15 | + "@ivotoby/openapi-mcp-server", | |
| 16 | + "--openapi-spec", | |
| 17 | + "http://localhost:2011/swagger/Default/swagger.json", | |
| 18 | + "--api-base-url", | |
| 19 | + "http://localhost:2011" | |
| 20 | + ] | |
| 21 | + }, | |
| 22 | + "filesystem": { | |
| 23 | + "command": "npx", | |
| 24 | + "args": [ | |
| 25 | + "@modelcontextprotocol/server-filesystem", | |
| 26 | + "." | |
| 27 | + ] | |
| 28 | + }, | |
| 29 | + "excel-reader": { | |
| 30 | + "command": "npx", | |
| 31 | + "args": [ | |
| 32 | + "--yes", | |
| 33 | + "@negokaz/excel-mcp-server" | |
| 34 | + ] | |
| 35 | + } | |
| 36 | + } | |
| 37 | +} | |
| 0 | 38 | \ No newline at end of file | ... | ... |
.cursor/rules/orchestrator-first.mdc
0 → 100644
| 1 | +--- | |
| 2 | +description: | |
| 3 | +alwaysApply: true | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# Orchestrator 优先规则 | |
| 7 | + | |
| 8 | +**每次用户发起请求时,先以「任务协调者」身份分析任务,再决定执行方式。** | |
| 9 | + | |
| 10 | +**自动委派(官方机制)**:当遇到复杂任务时,主 Agent 应**自动启动子代理**——通过 Task 工具发出调用,子代理在全新上下文中执行并返回结果。委派依据:任务复杂度、子代理 description、当前上下文与可用工具。 | |
| 11 | + | |
| 12 | +## 第一步:分析任务复杂度 | |
| 13 | + | |
| 14 | +| 级别 | 类型 | 处理方式 | | |
| 15 | +|---|---|----| | |
| 16 | +| L1 | 解释 / 评估 / 判断 / 总结 | 直接回答 | | |
| 17 | +| L2 | 单一角色(仅后端 / 仅前端) | **Task 工具**启动 `后端` 或 `前端` | | |
| 18 | +| L3 | 跨角色(后端+前端+测试) | **Task 工具**启动多个子代理;可并行时单条消息发出多个 Task 调用 | | |
| 19 | + | |
| 20 | +## 第二步:任务与子代理对应 | |
| 21 | + | |
| 22 | +- 仅后端 API → `后端`(添加接口、实现 API、数据库操作) | |
| 23 | +- 仅前端 UI → `前端`(添加页面、实现组件) | |
| 24 | +- 后端 + 测试 → `后端`(开发 + build 通过)后 `测试` | |
| 25 | +- 全栈 / 可并行 → 单条消息发出多个 Task 调用,子代理并行执行 | |
| 26 | +- 验证已有代码 → `verifier`(仅在所有开发测试完成后) | |
| 27 | + | |
| 28 | +## 第三步:执行方式 | |
| 29 | + | |
| 30 | +- **L1**:直接回复 | |
| 31 | +- **L2/L3**:使用 **Task 工具**启动对应子代理,在 prompt 中传入清晰任务描述与必要上下文(子代理无法访问历史对话,需在 prompt 中提供) | |
| 32 | + | |
| 33 | +## 显式调用(用户侧) | |
| 34 | + | |
| 35 | +用户也可用 `/name` 或自然语言显式调用,例如: | |
| 36 | +- `/后端 添加一个 XXX 接口` | |
| 37 | +- `使用 测试 验证接口是否正常` | |
| 38 | + | |
| 39 | + | |
| 40 | +## 禁止 | |
| 41 | + | |
| 42 | +- ❌ 不为简单任务委派多个子代理 | |
| 43 | +- ❌ 不在开发阶段委派 verifier | ... | ... |
.cursor/rules/project_rules.mdc
0 → 100644
| 1 | +--- | |
| 2 | +description: | |
| 3 | +alwaysApply: true | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# 项目开发规范 | |
| 7 | + | |
| 8 | +## 📋 目录 | |
| 9 | +- [技术栈](#技术栈) | |
| 10 | +- [前端开发规范](#前端开发规范) | |
| 11 | +- [后端开发规范](#后端开发规范) | |
| 12 | +- [数据库规范](#数据库规范) | |
| 13 | +- [API接口规范](#api接口规范) | |
| 14 | +- [数据一致性规范](#数据一致性规范) | |
| 15 | +- [代码质量规范](#代码质量规范) | |
| 16 | +- [特殊要求](#特殊要求) | |
| 17 | +- [强制约束](#强制约束) | |
| 18 | + | |
| 19 | +## 🛠 技术栈 | |
| 20 | + | |
| 21 | +### 前端技术栈 | |
| 22 | +- **框架**: Vue 2.6 + Element UI | |
| 23 | +- **样式**: SCSS (scoped) | |
| 24 | +- **HTTP客户端**: Axios | |
| 25 | +- **状态管理**: Vuex | |
| 26 | +- **构建工具**: Webpack | |
| 27 | + | |
| 28 | +### 后端技术栈 | |
| 29 | +- **框架**: ASP.NET Core | |
| 30 | +- **ORM**: SqlSugar | |
| 31 | +- **认证**: JWT Token | |
| 32 | +- **日志**: Serilog | |
| 33 | +- **架构**: 分层架构 (Entitys/Interfaces/Services) | |
| 34 | + | |
| 35 | +## 🎨 前端开发规范 | |
| 36 | + | |
| 37 | +### 组件开发规范 | |
| 38 | +- ✅ **模块化**: views 与 components 分离 | |
| 39 | +- ✅ **文件命名**: 使用 kebab-case (如: user-dialog.vue) | |
| 40 | +- ✅ **组件封装**: 弹窗、二级页面必须单独创建 Vue 文件 | |
| 41 | +- ❌ **禁止**: 在主页面 template 中直接编写弹窗内容 | |
| 42 | + | |
| 43 | +### UI/UX 规范 | |
| 44 | +- **表格组件**: 统一使用 NCC-table | |
| 45 | +- **表单组件**: Element UI 表单,标签右对齐 | |
| 46 | +- **色彩规范**: | |
| 47 | + - 主色: `#409EFF` | |
| 48 | + - 辅助色: `#67C23A` / `#F56C6C` / `#909399` | |
| 49 | +- **卡片规范**: 高度 100px,内边距 12px,圆角 12px | |
| 50 | +- **按钮对齐**: 操作按钮左对齐,统计卡片内容垂直居中 | |
| 51 | +- **图标显示**: 所有列表数据都要有图标,不同颜色区分类型 | |
| 52 | +- **空值显示**: 没有信息的字段显示"无" | |
| 53 | +- **列表规范**: 列表数据不能换行 | |
| 54 | + | |
| 55 | +### 性能要求 | |
| 56 | +- 启用懒加载和代码分割 | |
| 57 | +- Vuex 仅缓存必要数据 | |
| 58 | +- 页面加载时间 < 3s | |
| 59 | + | |
| 60 | +## ⚙️ 后端开发规范 | |
| 61 | + | |
| 62 | +### 架构规范 | |
| 63 | +- **分层架构**: Entitys → Interfaces → Services | |
| 64 | +- **依赖注入**: 使用 ASP.NET Core DI 容器 | |
| 65 | +- **异常处理**: 全局捕获,统一 JSON 格式返回 | |
| 66 | + | |
| 67 | +### 数据访问规范 | |
| 68 | +- **分页查询**: 所有列表接口必须分页 | |
| 69 | +- **索引优化**: 关键字段建立索引 | |
| 70 | +- **SQL安全**: 使用 WhereIF 条件查询避免 SQL 注入 | |
| 71 | +- **查询优化**: 避免 N+1 查询,使用 JOIN 优化 | |
| 72 | + | |
| 73 | +### 代码规范 | |
| 74 | +- **XML注释**: 关键方法必须添加 XML 注释 | |
| 75 | +- **异常处理**: 统一异常处理,返回友好错误信息 | |
| 76 | +- **枚举使用**: 状态、类型等固定值必须使用枚举,禁止魔法数字 | |
| 77 | + | |
| 78 | +### ID生成规范 | |
| 79 | +```csharp | |
| 80 | +// ✅ 正确:必须使用YitIdHelper | |
| 81 | +Id = YitIdHelper.NextId().ToString() | |
| 82 | + | |
| 83 | +// ❌ 错误:禁止使用Guid | |
| 84 | +Id = Guid.NewGuid().ToString() | |
| 85 | +``` | |
| 86 | + | |
| 87 | +## 🗄️ 数据库规范 | |
| 88 | + | |
| 89 | +### 命名规范 | |
| 90 | +- **表命名**: 业务前缀 + 功能名称 (如: lq_) | |
| 91 | +- **字段命名**: 驼峰化 | |
| 92 | +- **时间字段**: 统一使用 DateTime 类型 | |
| 93 | + | |
| 94 | +### 查询规范 | |
| 95 | +- **分页查询**: 避免全表扫描 | |
| 96 | +- **索引建立**: 关键查询字段建立索引 | |
| 97 | +- **删除标记**: `base_organize.DeleteMark` 为 `null` 表示未删除 | |
| 98 | + | |
| 99 | +### MCP MySQL 与 SQL 验证 | |
| 100 | +- 使用 MCP 查库或编写/验证统计 SQL 时,遵循 skill:`mcp-mysql-and-sql-validation`。 | |
| 101 | + | |
| 102 | +### 数据库文档要求 | |
| 103 | +- **文档维护**: 所有数据库信息记录到 `数据库说明.md` | |
| 104 | +- **表结构记录**: 表名、字段名、字段解释、字段关联 | |
| 105 | +- **变更同步**: 表结构变更时同步更新文档 | |
| 106 | + | |
| 107 | +## 🔌 API接口规范 | |
| 108 | + | |
| 109 | +### 接口注释规范 | |
| 110 | +- 新增或修改 API 时,接口方法的 XML 注释格式与要求见 skill:`api-xml-comments`。 | |
| 111 | + | |
| 112 | +### 接口测试规范 | |
| 113 | +- **必须测试**:所有新开发或修改的接口都必须测试通过后再提交;具体流程、Token 获取与 curl 示例见 skill:`api-interface-testing`。 | |
| 114 | + | |
| 115 | +## 📊 数据一致性规范 | |
| 116 | + | |
| 117 | +### 统计与列表数据 | |
| 118 | +- **数据一致性**: 统计接口与列表接口使用相同的过滤条件、时间范围、权限控制 | |
| 119 | +- **字段命名规范**: DTO字段名称、大小写必须完全一致 | |
| 120 | +- **计算逻辑统一**: 统计数据计算逻辑与列表数据筛选逻辑保持一致 | |
| 121 | +- **分页一致性**: 统计接口和列表接口的分页参数和逻辑必须保持一致 | |
| 122 | + | |
| 123 | +## 📝 代码质量规范 | |
| 124 | + | |
| 125 | +### 代码风格 | |
| 126 | +- **缩进**: 2 空格 | |
| 127 | +- **行长度**: 单行 <= 120 字符 | |
| 128 | +- **注释**: 关键逻辑必须添加注释 | |
| 129 | + | |
| 130 | +### 代码审查 | |
| 131 | +- **自检**: 提交前进行自检 | |
| 132 | +- **审查**: 重要功能需代码审查 | |
| 133 | + | |
| 134 | +## ⚠️ 特殊要求 | |
| 135 | + | |
| 136 | +### 前端特殊要求 | |
| 137 | +- 操作按钮必须左对齐,不要居中 | |
| 138 | +- 统计卡片内容必须垂直居中 | |
| 139 | +- 所有列表数据都要有图标显示,不同类型的图标需要有不同的颜色,但是颜色不能太多 | |
| 140 | +- 没有信息的字段显示"无" | |
| 141 | +- 卡片高度统一为100px,内边距12px,圆角12px | |
| 142 | +- 弹窗、二级页面、复杂表单等必须单独创建 Vue 文件或封装成组件 | |
| 143 | +- 禁止在主页面的 template 中直接编写弹窗内容或复杂交互逻辑 | |
| 144 | +- 组件文件命名使用 kebab-case,如:user-dialog.vue、edit-form.vue | |
| 145 | +- 列表数据不能换行 | |
| 146 | + | |
| 147 | +### 后端特殊要求 | |
| 148 | +- 使用 WhereIF 条件查询避免 SQL 注入 | |
| 149 | +- 关键方法必须添加 XML 注释 | |
| 150 | +- 统一异常处理,返回友好错误信息 | |
| 151 | +- 系统内涉及状态、类型等固定值的字段必须使用枚举类型(enum)定义,禁止使用魔法数字或硬编码字符串;同时需为枚举成员添加 XML 注释,保证可读性与可维护性 | |
| 152 | +- 不需要在NCC.API创建controller,因为Extend里面的service都是可以直接使用的 | |
| 153 | + | |
| 154 | +## 🚨 强制约束 | |
| 155 | + | |
| 156 | +### 回复 | |
| 157 | +1. **回复前缀**: 每次回复的时候都必须用“大哥”作为前缀 | |
| 158 | + | |
| 159 | +### 环境要求 | |
| 160 | +1. **Node.js版本**: 必须使用16.20.2版本,项目在Node 18下会失败 | |
| 161 | +2. **API传参**: GET请求使用data字段传参,不使用params | |
| 162 | + | |
| 163 | +### 功能要求 | |
| 164 | +4. **数据一致性**: 统计数据和列表数据必须使用相同的过滤条件 | |
| 165 | +5. **UI一致性**: 所有页面必须使用统一的布局和样式规范 | |
| 166 | +6. **错误处理**: 统一异常处理,返回友好错误信息 | |
| 167 | +7. **性能优化**: 所有列表接口支持分页,避免大数据量查询 | |
| 168 | +8. **安全防护**: 使用SqlSugar ORM防止SQL注入,前端数据渲染时进行HTML转义 | |
| 169 | +9. **数据库文档**: 所有数据库表结构、字段说明、关联关系必须记录到数据库说明文档中 | |
| 170 | +10. **ID生成规范**: 所有实体ID的生成都必须使用 `YitIdHelper.NextId().ToString()`,禁止使用 `Guid.NewGuid().ToString()` 或其他ID生成方式 | |
| 171 | +11.**说明文档规范**:没有要求生成新的md文件的时候,严禁生成新md文件。 | |
| 172 | + | |
| 173 | +## 📋 重要变更记录 | |
| 174 | + | |
| 175 | +### 已弃用的表 | |
| 176 | +- 涉及人员、门店归属、业绩关联等逻辑时,必须使用当前约定表与字段;具体弃用表及替代方案见 skill:`deprecated-tables-context`。 | ... | ... |
.cursor/skills/api-interface-testing/SKILL.md
0 → 100644
| 1 | +--- | |
| 2 | +name: api-interface-testing | |
| 3 | +description: 按项目规范执行接口测试,包含获取 Token、使用 curl 调用接口及验证要点。在开发或修改接口、需要验证接口行为或用户提及接口测试时使用。 | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# 接口测试 | |
| 7 | + | |
| 8 | +## 何时使用 | |
| 9 | + | |
| 10 | +- 新增或修改了后端 API,需要验证接口行为 | |
| 11 | +- 用户明确要求进行接口测试或提供测试示例 | |
| 12 | +- 提交代码前确认接口符合「必须测试」规范 | |
| 13 | + | |
| 14 | +## 测试流程 | |
| 15 | + | |
| 16 | +1. **获取 Token**:先调用登录接口拿到 `data.token` | |
| 17 | +2. **调用目标接口**:请求头带上 `Authorization: {data.token}` | |
| 18 | +3. **验证结果**:按下方清单检查返回值与行为 | |
| 19 | + | |
| 20 | +## 获取 Token | |
| 21 | + | |
| 22 | +- **地址**:`POST /api/oauth/Login` | |
| 23 | +- **Content-Type**:`application/x-www-form-urlencoded` | |
| 24 | +- **参数**:`account=admin`,`password=e10adc3949ba59abbe56e057f20f883e` | |
| 25 | +- **Base URL**:本地一般为 `http://localhost:2011`,以实际运行环境为准 | |
| 26 | + | |
| 27 | +**curl 示例:** | |
| 28 | + | |
| 29 | +```bash | |
| 30 | +curl -X POST "http://localhost:2011/api/oauth/Login" \ | |
| 31 | + -H "Content-Type: application/x-www-form-urlencoded" \ | |
| 32 | + -d "account=admin&password=e10adc3949ba59abbe56e057f20f883e" | |
| 33 | +``` | |
| 34 | + | |
| 35 | +**返回说明**:`data.token` 已包含 `"Bearer "` 前缀,请求其他接口时**直接使用**:`Authorization: {data.token}`(无需再拼 Bearer)。 | |
| 36 | + | |
| 37 | +## 调用接口示例 | |
| 38 | + | |
| 39 | +**GET(项目规范:GET 使用 data 传参,不用 params):** | |
| 40 | + | |
| 41 | +```bash | |
| 42 | +curl -X GET "http://localhost:2011/api/xxx/YourAction?key=value" \ | |
| 43 | + -H "Authorization: <data.token 完整值>" | |
| 44 | +``` | |
| 45 | + | |
| 46 | +**POST(JSON body):** | |
| 47 | + | |
| 48 | +```bash | |
| 49 | +curl -X POST "http://localhost:2011/api/xxx/YourAction" \ | |
| 50 | + -H "Authorization: <data.token 完整值>" \ | |
| 51 | + -H "Content-Type: application/json" \ | |
| 52 | + -d '{"key":"value"}' | |
| 53 | +``` | |
| 54 | + | |
| 55 | +将 `<data.token 完整值>` 替换为登录响应里 `data.token` 的整段字符串(已含 `Bearer `)。 | |
| 56 | + | |
| 57 | +## 验证清单 | |
| 58 | + | |
| 59 | +测试时需覆盖并确认: | |
| 60 | + | |
| 61 | +- [ ] **功能**:用真实/合理数据调用,返回符合接口约定 | |
| 62 | +- [ ] **正确性**:关键字段类型、取值、分页与业务逻辑一致 | |
| 63 | +- [ ] **边界**:空列表、无数据、参数缺省等处理正确 | |
| 64 | +- [ ] **异常**:非法参数、未登录等返回合理错误码与提示 | |
| 65 | +- [ ] **性能**:响应时间可接受,无超时或明显卡顿 | |
| 66 | + | |
| 67 | +只有测试通过后再提交相关代码。 | |
| 68 | + | |
| 69 | +## 工具 | |
| 70 | + | |
| 71 | +可使用 curl、Postman、Swagger 等;给出示例时优先提供 **curl**,便于在终端直接执行。 | ... | ... |
.cursor/skills/api-xml-comments/SKILL.md
0 → 100644
| 1 | +--- | |
| 2 | +name: api-xml-comments | |
| 3 | +description: API 接口 XML 注释规范与模板。在新增或修改后端 API、为接口方法编写或补全 XML 注释时使用。 | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# API 接口 XML 注释规范 | |
| 7 | + | |
| 8 | +## 何时使用 | |
| 9 | + | |
| 10 | +- 新增或修改后端 API 接口时 | |
| 11 | +- 为接口方法补全或统一 XML 注释时 | |
| 12 | +- 代码审查要求接口注释符合规范时 | |
| 13 | + | |
| 14 | +--- | |
| 15 | + | |
| 16 | +## 标准格式 | |
| 17 | + | |
| 18 | +所有 API 接口方法必须按以下格式编写 XML 注释: | |
| 19 | + | |
| 20 | +```csharp | |
| 21 | +/// <summary> | |
| 22 | +/// 接口功能描述(简洁明了的一句话) | |
| 23 | +/// </summary> | |
| 24 | +/// <remarks> | |
| 25 | +/// 详细功能说明和使用场景 | |
| 26 | +/// | |
| 27 | +/// 示例请求: | |
| 28 | +/// ```json | |
| 29 | +/// { | |
| 30 | +/// "参数名": "参数值", | |
| 31 | +/// "参数名2": "参数值2" | |
| 32 | +/// } | |
| 33 | +/// ``` | |
| 34 | +/// | |
| 35 | +/// 参数说明: | |
| 36 | +/// - 参数名: 参数描述 | |
| 37 | +/// - 参数名2: 参数描述 | |
| 38 | +/// </remarks> | |
| 39 | +/// <param name="参数名">参数描述</param> | |
| 40 | +/// <returns>返回值描述</returns> | |
| 41 | +/// <response code="200">成功响应描述</response> | |
| 42 | +/// <response code="400">错误响应描述</response> | |
| 43 | +/// <response code="500">服务器错误描述</response> | |
| 44 | +``` | |
| 45 | + | |
| 46 | +--- | |
| 47 | + | |
| 48 | +## 注释要求 | |
| 49 | + | |
| 50 | +- `<summary>`:一句话概括功能,简洁明了 | |
| 51 | +- `<remarks>`:详细说明、示例请求(JSON)、参数说明列表 | |
| 52 | +- 示例请求使用 JSON 格式,参数说明用列表 | |
| 53 | +- 必须包含所有可能返回的 HTTP 状态码(200/400/500 等)的 `<response>` 说明 | |
| 54 | +- 复杂接口必须提供完整请求示例 | ... | ... |
.cursor/skills/deprecated-tables-context/SKILL.md
0 → 100644
| 1 | +--- | |
| 2 | +name: deprecated-tables-context | |
| 3 | +description: 已弃用表及替代方案。在涉及人员、门店归属、业绩关联等逻辑时使用,避免误用历史表或字段。 | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# 已弃用的表与替代方案 | |
| 7 | + | |
| 8 | +## 何时使用 | |
| 9 | + | |
| 10 | +- 开发或修改与**人员信息**相关的逻辑时 | |
| 11 | +- 开发或修改与**门店归属**(事业部/经营部/科技部/旗舰店等)相关的逻辑时 | |
| 12 | +- 涉及**业绩与人员关联**、按门店/月份统计归属时 | |
| 13 | +- 排查数据来源或历史表结构时 | |
| 14 | + | |
| 15 | +--- | |
| 16 | + | |
| 17 | +## lq_ryzl(人员资料表)已弃用 | |
| 18 | + | |
| 19 | +- **替代**:人员信息统一使用系统用户表 **`BASE_USER`** 管理 | |
| 20 | +- **使用**:所有人员相关业务使用 `BASE_USER` 及其扩展字段(`F_MDID`、`F_ZW`、`F_GWFL`、`F_GW` 等) | |
| 21 | +- **关联**:人员与业绩的关联通过 `BASE_USER.F_REALNAME` 与 `lq_yjmxb.jks` 等进行 | |
| 22 | + | |
| 23 | +--- | |
| 24 | + | |
| 25 | +## lq_mdxx_mdgs / lq_mdxx 归属字段已弃用 | |
| 26 | + | |
| 27 | +- **替代**:门店归属一律从 **`lq_md_target`** 按**月份维度**管理 | |
| 28 | +- **使用**:通过 `F_StoreId + F_Month` 获取对应月份的事业部/经营部/科技部/旗舰店等归属信息 | |
| 29 | +- **禁止**:不再从 `lq_mdxx` 读取归属;以下字段视为历史字段,**禁止作为业务统计或归属判断依据**: | |
| 30 | + - `lq_mdxx`:`syb`、`jyb`、`kjb`、`dxmb`、`gsqssj`、`gszzsj`、`status` | ... | ... |
.cursor/skills/mcp-mysql-and-sql-validation/SKILL.md
0 → 100644
| 1 | +--- | |
| 2 | +name: mcp-mysql-and-sql-validation | |
| 3 | +description: MCP MySQL 使用规范与统计 SQL 验证流程;接口测试后必须查库验证;用户问业务数据时自动查库。在使用 MCP 查库、写统计 SQL 或提交含 SQL 的代码时使用。 | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# MCP MySQL 与 SQL 验证 | |
| 7 | + | |
| 8 | +## 一、Skills 定位说明(必读) | |
| 9 | + | |
| 10 | +本 Skills 用于**约束 AI 在涉及真实业务数据时的行为**,核心目标: | |
| 11 | + | |
| 12 | +- 让 AI **必须通过 MCP 查询真实数据库** | |
| 13 | +- 让接口测试 **必须验证数据库结果** | |
| 14 | +- 让统计 / 报表 **必须跑真实 SQL** | |
| 15 | +- 让用户直接问“数据是多少”时,AI **自动查库而不是反问** | |
| 16 | + | |
| 17 | +> 本 Skills 属于:**执行型 + 验证型 + 数据治理型 Skills** | |
| 18 | +> 目标:**杜绝 AI 编数据、假验证、只写 SQL 不执行的问题** | |
| 19 | + | |
| 20 | +--- | |
| 21 | + | |
| 22 | +## 二、何时必须使用本 Skills(触发规则) | |
| 23 | + | |
| 24 | +只要满足以下任一条件,**AI 必须使用 MCP 数据库工具**。 | |
| 25 | + | |
| 26 | +### 1️⃣ 接口测试场景(新增 / 编辑 / 删除 / 状态变更) | |
| 27 | + | |
| 28 | +当 AI 执行或协助以下接口相关操作时: | |
| 29 | + | |
| 30 | +- 新增数据(Create / Add) | |
| 31 | +- 编辑数据(Update / Edit) | |
| 32 | +- 删除数据(Delete / Remove / 作废) | |
| 33 | +- 状态变更(启用 / 禁用 / 完成 / 关闭) | |
| 34 | + | |
| 35 | +#### 强制规则 | |
| 36 | + | |
| 37 | +- ✅ 接口执行完成后,**必须使用 MCP 查询数据库** | |
| 38 | +- ✅ 验证数据是否真实新增 / 修改 / 删除 | |
| 39 | +- ❌ 禁止只根据接口返回值判断成功 | |
| 40 | +- ❌ 禁止假设数据库已发生变化 | |
| 41 | + | |
| 42 | +> ✔ 正确行为:“接口返回成功 → MCP 查询表 → 对比数据变化” | |
| 43 | + | |
| 44 | +--- | |
| 45 | + | |
| 46 | +### 2️⃣ 统计 / 报表 / 看板 / 聚合接口 | |
| 47 | + | |
| 48 | +包括但不限于: | |
| 49 | + | |
| 50 | +- 数量统计(会员数、订单数、开单数) | |
| 51 | +- 金额统计(开单金额、支付金额、退款金额) | |
| 52 | +- 汇总指标(合计、平均值、最大值) | |
| 53 | +- 环比 / 同比 / 增长率 | |
| 54 | + | |
| 55 | +#### 强制规则 | |
| 56 | + | |
| 57 | +- ✅ 编写统计 SQL 后,**必须通过 MCP 执行** | |
| 58 | +- ✅ 用真实数据验证结果合理性 | |
| 59 | +- ❌ 禁止“只写 SQL,不执行” | |
| 60 | +- ❌ 禁止凭经验推断结果 | |
| 61 | + | |
| 62 | +--- | |
| 63 | + | |
| 64 | +### 3️⃣ 用户直接询问业务数据(自动触发) | |
| 65 | + | |
| 66 | +当用户提问符合以下特征时,AI **必须自动查库**: | |
| 67 | + | |
| 68 | +#### 触发特征 | |
| 69 | + | |
| 70 | +- 包含:`多少 / 数量 / 金额 / 总数 / 合计` | |
| 71 | +- 包含明确时间范围:年(如 2026 年)、月(如本月 / 2026-01)、日(如今天 / 昨天) | |
| 72 | +- 涉及业务实体:会员 / 订单 / 开单 / 门店 / 员工 / 消耗 | |
| 73 | + | |
| 74 | +#### 示例问题 | |
| 75 | + | |
| 76 | +- 2026 年新增会员数量是多少? | |
| 77 | +- 2026 年开单金额是多少? | |
| 78 | +- 本月退款总额有多少? | |
| 79 | +- 今天新增订单数是多少? | |
| 80 | + | |
| 81 | +#### 强制规则 | |
| 82 | + | |
| 83 | +- ✅ 自动识别为【数据查询问题】 | |
| 84 | +- ✅ 直接使用 MCP 查询数据库 | |
| 85 | +- ❌ 禁止回复“需要查询数据库” | |
| 86 | +- ❌ 禁止编造、估算或假设数据 | |
| 87 | + | |
| 88 | +--- | |
| 89 | + | |
| 90 | +## 三、MCP MySQL 使用规范 | |
| 91 | + | |
| 92 | +### 1️⃣ 允许的操作范围 | |
| 93 | + | |
| 94 | +- ✅ **只允许**:`SELECT` | |
| 95 | +- ❌ **禁止**:`INSERT / UPDATE / DELETE / TRUNCATE` | |
| 96 | + | |
| 97 | +--- | |
| 98 | + | |
| 99 | +### 2️⃣ 表结构查询规范 | |
| 100 | + | |
| 101 | +如需查看表结构,统一使用以下 SQL(将 `<表名>` 替换为实际表名): | |
| 102 | + | |
| 103 | +```sql | |
| 104 | +SELECT COLUMN_NAME, | |
| 105 | + DATA_TYPE, | |
| 106 | + IS_NULLABLE, | |
| 107 | + COLUMN_KEY, | |
| 108 | + COLUMN_DEFAULT, | |
| 109 | + EXTRA, | |
| 110 | + COLUMN_COMMENT | |
| 111 | +FROM INFORMATION_SCHEMA.COLUMNS | |
| 112 | +WHERE TABLE_NAME = '<表名>'; | |
| 113 | +``` | |
| 114 | + | |
| 115 | +**注意事项**: | |
| 116 | + | |
| 117 | +- 查询表结构时**不要加 ORDER BY** | |
| 118 | +- **每次查询只针对一个表** | |
| 119 | +- 避免一次性发送多条 SQL | |
| 120 | + | |
| 121 | +--- | |
| 122 | + | |
| 123 | +## 四、SQL 查询验证规范(统计类) | |
| 124 | + | |
| 125 | +对统计类型的 SQL(报表、看板、统计接口),在提交代码前**必须先**用 MCP MySQL 工具执行验证。 | |
| 126 | + | |
| 127 | +### 验证要求 | |
| 128 | + | |
| 129 | +- [ ] SQL 语法正确,能执行通过 | |
| 130 | +- [ ] 涉及的表、字段存在且类型匹配 | |
| 131 | +- [ ] JOIN 关系正确 | |
| 132 | +- [ ] 统计逻辑与需求一致 | |
| 133 | +- [ ] 用实际数据跑一遍,结果合理 | |
| 134 | + | |
| 135 | +### 原则 | |
| 136 | + | |
| 137 | +只有验证通过的 SQL 才能提交到代码中。 | |
| 138 | + | |
| 139 | +--- | |
| 140 | + | |
| 141 | +## 五、如何通过 MCP 执行 SQL(配置与调用) | |
| 142 | + | |
| 143 | +### 1️⃣ 配置文件位置 | |
| 144 | + | |
| 145 | +- **路径**:项目根目录下 `.cursor/mcp.json` | |
| 146 | +- **数据库 MCP 服务名**:`my-sql-db` | |
| 147 | + | |
| 148 | +### 2️⃣ 当前数据库 MCP 配置说明 | |
| 149 | + | |
| 150 | +本项目中 MySQL MCP 使用 `@davewind/mysql-mcp-server`,连接库为 `lqerp_dev`。配置示例(仅作参考,以实际 `.cursor/mcp.json` 为准): | |
| 151 | + | |
| 152 | +```json | |
| 153 | +"my-sql-db": { | |
| 154 | + "command": "npx", | |
| 155 | + "args": ["--yes", "@davewind/mysql-mcp-server", "mysql://用户:密码@主机:3306/lqerp_dev"] | |
| 156 | +} | |
| 157 | +``` | |
| 158 | + | |
| 159 | +### 3️⃣ 执行 SQL 的方式 | |
| 160 | + | |
| 161 | +- **工具名称**:MCP 提供的 **query** 工具(在 Cursor 中可能显示为 `query` 或带服务前缀,如与 `my-sql-db` 相关)。 | |
| 162 | +- **参数**:传入 **sql**(string),即要执行的 SQL 语句。 | |
| 163 | +- **限制**:该 MCP 仅支持 **只读**,仅可执行 **SELECT**;所有语句在 READ ONLY 事务中执行,禁止 INSERT/UPDATE/DELETE/DDL。 | |
| 164 | + | |
| 165 | +**调用要点**: | |
| 166 | + | |
| 167 | +1. 在需要查库、验证接口结果或跑统计 SQL 时,直接调用该 MCP 的 query 工具。 | |
| 168 | +2. 传入的 `sql` 必须是合法的 SELECT 语句,一次一条。 | |
| 169 | +3. 用返回结果做数据验证或统计核对。 | |
| 170 | + | |
| 171 | +### 4️⃣ 简单验证示例 | |
| 172 | + | |
| 173 | +- 验证 MCP 连通、可执行 SQL 的示例(在 `lqerp_dev` 下查表数量): | |
| 174 | + | |
| 175 | +```sql | |
| 176 | +SELECT COUNT(*) AS table_count | |
| 177 | +FROM information_schema.tables | |
| 178 | +WHERE table_schema = 'lqerp_dev'; | |
| 179 | +``` | |
| 180 | + | |
| 181 | +- 查询某表结构(将 `<表名>` 换为实际表名): | |
| 182 | + | |
| 183 | +```sql | |
| 184 | +SELECT COLUMN_NAME, DATA_TYPE, IS_NULLABLE, COLUMN_KEY, COLUMN_COMMENT | |
| 185 | +FROM INFORMATION_SCHEMA.COLUMNS | |
| 186 | +WHERE TABLE_SCHEMA = 'lqerp_dev' AND TABLE_NAME = '<表名>'; | |
| 187 | +``` | |
| 188 | + | |
| 189 | +### 5️⃣ 小结 | |
| 190 | + | |
| 191 | +| 项目 | 说明 | | |
| 192 | +|------------|------| | |
| 193 | +| 配置 | `.cursor/mcp.json`,服务名 `my-sql-db` | | |
| 194 | +| 执行方式 | 调用 MCP 的 **query** 工具,参数 **sql** | | |
| 195 | +| 允许操作 | 仅 SELECT | | |
| 196 | +| 数据库 | `lqerp_dev` | | ... | ... |
.cursor/skills/remember-as-rule-or-skill/SKILL.md
0 → 100644
| 1 | +--- | |
| 2 | +name: remember-as-rule-or-skill | |
| 3 | +description: 当用户要求「记住」某事时,根据内容类型自动添加为项目规则(.cursor/rules)或 Skill(.cursor/skills)。Use when user says 记住、记一下、以后要、保存这个规则、加到规范里、写进 skill、记录下来、按这个来. | |
| 4 | +--- | |
| 5 | + | |
| 6 | +# 记住 → 自动添加规则或 Skill | |
| 7 | + | |
| 8 | +## 一、何时触发 | |
| 9 | + | |
| 10 | +当用户表达**希望持久化当前约定/偏好**时,必须走本流程,将内容写入 `.cursor/rules/` 或 `.cursor/skills/`。 | |
| 11 | + | |
| 12 | +### 触发表述(示例) | |
| 13 | + | |
| 14 | +- 记住 / 记一下 / 以后要 / 保存 / 记录下来 | |
| 15 | +- 加到规范里 / 写进规则 / 写进 skill | |
| 16 | +- 按这个来 / 以后都按这个做 | |
| 17 | +- 类似的自然语言表达 | |
| 18 | + | |
| 19 | +触发后:**先判断类型(Rule vs Skill),再执行添加或更新**。 | |
| 20 | + | |
| 21 | +--- | |
| 22 | + | |
| 23 | +## 二、Rule 还是 Skill?判断标准 | |
| 24 | + | |
| 25 | +| 类型 | 适合内容 | 存放位置 | 特点 | | |
| 26 | +|------|----------|----------|------| | |
| 27 | +| **Rule** | 简短约束、禁止项、风格约定、回复格式等「每次都要遵守」的规范 | `.cursor/rules/*.mdc` | 可 alwaysApply 或按文件 glob 生效;单条规则建议 ≤50 行 | | |
| 28 | +| **Skill** | 有步骤的流程、按场景触发的知识、需要 description 匹配的专项能力 | `.cursor/skills/<name>/SKILL.md` | 通过 description 在相关场景被引用;可含多节、示例 | | |
| 29 | + | |
| 30 | +### 选择 Rule 的情况 | |
| 31 | + | |
| 32 | +- 禁止或必须做的**一句话/短条款**(如:禁止用 Guid、GET 用 data 传参) | |
| 33 | +- **编码/格式约定**(缩进、命名、注释要求) | |
| 34 | +- **回复或交互约定**(如:回复前缀「大哥」) | |
| 35 | +- **仅在某类文件生效**的规范(如仅 `**/*.vue`)→ 用 `globs`,`alwaysApply: false` | |
| 36 | + | |
| 37 | +### 选择 Skill 的情况 | |
| 38 | + | |
| 39 | +- **多步骤流程**(如:接口测试流程、查库验证流程) | |
| 40 | +- **按场景触发**的专项知识(如:弃用表、API 注释格式、MCP 查库) | |
| 41 | +- 需要**示例、模板、清单**的说明 | |
| 42 | +- 内容较长或需要**分节、可检索**的文档 | |
| 43 | + | |
| 44 | +### 与现有内容的关系 | |
| 45 | + | |
| 46 | +- 若与**现有 rule/skill 主题一致**(如同属「接口规范」)→ **优先更新已有文件**,避免碎片化 | |
| 47 | +- 若是**全新主题** → 新建 rule 或 skill | |
| 48 | + | |
| 49 | +--- | |
| 50 | + | |
| 51 | +## 三、执行步骤 | |
| 52 | + | |
| 53 | +### Step 1:确认要记的内容 | |
| 54 | + | |
| 55 | +- 从对话中提炼出用户要持久化的**具体条文或流程** | |
| 56 | +- 若含糊,可追问一句再落笔 | |
| 57 | + | |
| 58 | +### Step 2:决定 Rule 还是 Skill,以及目标文件 | |
| 59 | + | |
| 60 | +- 按上表判断:Rule 还是 Skill | |
| 61 | +- 若为 Rule:决定是**新增一个 .mdc** 还是**追加到现有 rule**(如 `project_rules.mdc` 的某节) | |
| 62 | +- 若为 Skill:决定是**新建 skill 目录**还是**更新现有 skill**(如 `api-xml-comments`) | |
| 63 | + | |
| 64 | +### Step 3:写入或更新 | |
| 65 | + | |
| 66 | +**Rule(.cursor/rules/xxx.mdc)** | |
| 67 | + | |
| 68 | +- 格式:YAML frontmatter + Markdown 正文 | |
| 69 | +- 必填:`description`;若全局生效则 `alwaysApply: true`;若按文件则 `globs: "**/*.xx"`、`alwaysApply: false` | |
| 70 | +- 正文简洁、可执行,单条规则尽量控制在约 50 行内 | |
| 71 | + | |
| 72 | +```markdown | |
| 73 | +--- | |
| 74 | +description: 简短说明这条规则做什么 | |
| 75 | +alwaysApply: true | |
| 76 | +--- | |
| 77 | +# 规则标题 | |
| 78 | +内容... | |
| 79 | +``` | |
| 80 | + | |
| 81 | +**Skill(.cursor/skills/<name>/SKILL.md)** | |
| 82 | + | |
| 83 | +- 格式:YAML frontmatter(`name`、`description`)+ Markdown 正文 | |
| 84 | +- `description` 要包含**触发场景/关键词**,便于 AI 在相关任务时引用 | |
| 85 | +- 正文可含:何时用、步骤、示例、注意事项 | |
| 86 | + | |
| 87 | +```markdown | |
| 88 | +--- | |
| 89 | +name: skill-name | |
| 90 | +description: 做什么;在什么场景下使用(含触发词) | |
| 91 | +--- | |
| 92 | +# 标题 | |
| 93 | +## 何时使用 | |
| 94 | +... | |
| 95 | +## 步骤/规范 | |
| 96 | +... | |
| 97 | +``` | |
| 98 | + | |
| 99 | +### Step 4:确认 | |
| 100 | + | |
| 101 | +- 写完后**简短说明**:写到了哪(规则还是 skill、文件名),以及**以后如何生效**(例如「全局规则每次都会应用」或「在提到接口测试时会用对应 skill」) | |
| 102 | + | |
| 103 | +--- | |
| 104 | + | |
| 105 | +## 四、本项目约定 | |
| 106 | + | |
| 107 | +- **规则与 skill 的路径**:项目内统一用 **项目级** 配置: | |
| 108 | + - 规则:`.cursor/rules/` | |
| 109 | + - Skill:`.cursor/skills/` | |
| 110 | +- **与「不随意生成 md」的关系**:用户**明确要求记住/保存规则或写进 skill** 时,属于「要求生成或修改配置文档」的例外,可以且应当新增或修改 `.cursor/rules/`、`.cursor/skills/` 下的文件。 | |
| 111 | +- **风格**:与现有 `project_rules.mdc`、`orchestrator-first.mdc` 以及各 skill 的写法保持一致(中文说明、清单式条款、必要时代码块示例)。 | |
| 112 | + | |
| 113 | +--- | |
| 114 | + | |
| 115 | +## 五、小结 | |
| 116 | + | |
| 117 | +| 用户说 | 你要做的 | | |
| 118 | +|--------|-----------| | |
| 119 | +| 记住 / 记一下 / 以后要 / 保存规则 / 加到规范 / 写进 skill | 触发本 skill | | |
| 120 | +| 内容像「禁止/必须/约定」的短条款 | 写入或合并到 **Rule**(.mdc) | | |
| 121 | +| 内容像「流程/步骤/场景知识」 | 写入或合并到 **Skill**(SKILL.md) | | |
| 122 | +| 与现有某 rule/skill 同主题 | 优先**更新**该文件 | | |
| 123 | +| 写完后 | 说明写到了哪、以后如何生效 | | ... | ... |
.cursor/skills/ui-ux-pro-max/SKILL.md
0 → 100644
| 1 | +--- | |
| 2 | +name: ui-ux-pro-max | |
| 3 | +description: Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices | |
| 4 | +disable-model-invocation: true | |
| 5 | +--- | |
| 6 | + | |
| 7 | +# ui-ux-pro-max | |
| 8 | + | |
| 9 | +Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. | |
| 10 | + | |
| 11 | +## Prerequisites | |
| 12 | + | |
| 13 | +Check if Python is installed: | |
| 14 | + | |
| 15 | +```bash | |
| 16 | +python3 --version || python --version | |
| 17 | +``` | |
| 18 | + | |
| 19 | +If Python is not installed, install it based on user's OS: | |
| 20 | + | |
| 21 | +**macOS:** | |
| 22 | +```bash | |
| 23 | +brew install python3 | |
| 24 | +``` | |
| 25 | + | |
| 26 | +**Ubuntu/Debian:** | |
| 27 | +```bash | |
| 28 | +sudo apt update && sudo apt install python3 | |
| 29 | +``` | |
| 30 | + | |
| 31 | +**Windows:** | |
| 32 | +```powershell | |
| 33 | +winget install Python.Python.3.12 | |
| 34 | +``` | |
| 35 | + | |
| 36 | +--- | |
| 37 | + | |
| 38 | +## How to Use This Workflow | |
| 39 | + | |
| 40 | +When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: | |
| 41 | + | |
| 42 | +### Step 1: Analyze User Requirements | |
| 43 | + | |
| 44 | +Extract key information from user request: | |
| 45 | +- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. | |
| 46 | +- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. | |
| 47 | +- **Industry**: healthcare, fintech, gaming, education, etc. | |
| 48 | +- **Stack**: React, Vue, Next.js, or default to `html-tailwind` | |
| 49 | + | |
| 50 | +### Step 2: Search Relevant Domains | |
| 51 | + | |
| 52 | +Use `search.py` multiple times to gather comprehensive information. Search until you have enough context. | |
| 53 | + | |
| 54 | +```bash | |
| 55 | +python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] | |
| 56 | +``` | |
| 57 | + | |
| 58 | +**Recommended search order:** | |
| 59 | + | |
| 60 | +1. **Product** - Get style recommendations for product type | |
| 61 | +2. **Style** - Get detailed style guide (colors, effects, frameworks) | |
| 62 | +3. **Typography** - Get font pairings with Google Fonts imports | |
| 63 | +4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border) | |
| 64 | +5. **Landing** - Get page structure (if landing page) | |
| 65 | +6. **Chart** - Get chart recommendations (if dashboard/analytics) | |
| 66 | +7. **UX** - Get best practices and anti-patterns | |
| 67 | +8. **Stack** - Get stack-specific guidelines (default: html-tailwind) | |
| 68 | + | |
| 69 | +### Step 3: Stack Guidelines (Default: html-tailwind) | |
| 70 | + | |
| 71 | +If user doesn't specify a stack, **default to `html-tailwind`**. | |
| 72 | + | |
| 73 | +```bash | |
| 74 | +python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind | |
| 75 | +``` | |
| 76 | + | |
| 77 | +Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter` | |
| 78 | + | |
| 79 | +--- | |
| 80 | + | |
| 81 | +## Search Reference | |
| 82 | + | |
| 83 | +### Available Domains | |
| 84 | + | |
| 85 | +| Domain | Use For | Example Keywords | | |
| 86 | +|--------|---------|------------------| | |
| 87 | +| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | | |
| 88 | +| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | | |
| 89 | +| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | | |
| 90 | +| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | | |
| 91 | +| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | | |
| 92 | +| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | | |
| 93 | +| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | | |
| 94 | +| `prompt` | AI prompts, CSS keywords | (style name) | | |
| 95 | + | |
| 96 | +### Available Stacks | |
| 97 | + | |
| 98 | +| Stack | Focus | | |
| 99 | +|-------|-------| | |
| 100 | +| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | | |
| 101 | +| `react` | State, hooks, performance, patterns | | |
| 102 | +| `nextjs` | SSR, routing, images, API routes | | |
| 103 | +| `vue` | Composition API, Pinia, Vue Router | | |
| 104 | +| `svelte` | Runes, stores, SvelteKit | | |
| 105 | +| `swiftui` | Views, State, Navigation, Animation | | |
| 106 | +| `react-native` | Components, Navigation, Lists | | |
| 107 | +| `flutter` | Widgets, State, Layout, Theming | | |
| 108 | + | |
| 109 | +--- | |
| 110 | + | |
| 111 | +## Example Workflow | |
| 112 | + | |
| 113 | +**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" | |
| 114 | + | |
| 115 | +**AI should:** | |
| 116 | + | |
| 117 | +```bash | |
| 118 | +# 1. Search product type | |
| 119 | +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product | |
| 120 | + | |
| 121 | +# 2. Search style (based on industry: beauty, elegant) | |
| 122 | +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style | |
| 123 | + | |
| 124 | +# 3. Search typography | |
| 125 | +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography | |
| 126 | + | |
| 127 | +# 4. Search color palette | |
| 128 | +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color | |
| 129 | + | |
| 130 | +# 5. Search landing page structure | |
| 131 | +python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing | |
| 132 | + | |
| 133 | +# 6. Search UX guidelines | |
| 134 | +python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux | |
| 135 | +python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux | |
| 136 | + | |
| 137 | +# 7. Search stack guidelines (default: html-tailwind) | |
| 138 | +python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind | |
| 139 | +``` | |
| 140 | + | |
| 141 | +**Then:** Synthesize all search results and implement the design. | |
| 142 | + | |
| 143 | +--- | |
| 144 | + | |
| 145 | +## Tips for Better Results | |
| 146 | + | |
| 147 | +1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" | |
| 148 | +2. **Search multiple times** - Different keywords reveal different insights | |
| 149 | +3. **Combine domains** - Style + Typography + Color = Complete design system | |
| 150 | +4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues | |
| 151 | +5. **Use stack flag** - Get implementation-specific best practices | |
| 152 | +6. **Iterate** - If first search doesn't match, try different keywords | |
| 153 | +7. **Split Into Multiple Files** - For better maintainability: | |
| 154 | + - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`) | |
| 155 | + - Extract reusable styles into dedicated files | |
| 156 | + - Keep each file focused and under 200-300 lines | |
| 157 | + | |
| 158 | +--- | |
| 159 | + | |
| 160 | +## Common Rules for Professional UI | |
| 161 | + | |
| 162 | +These are frequently overlooked issues that make UI look unprofessional: | |
| 163 | + | |
| 164 | +### Icons & Visual Elements | |
| 165 | + | |
| 166 | +| Rule | Do | Don't | | |
| 167 | +|------|----|----- | | |
| 168 | +| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | | |
| 169 | +| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | | |
| 170 | +| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | | |
| 171 | +| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | | |
| 172 | + | |
| 173 | +### Interaction & Cursor | |
| 174 | + | |
| 175 | +| Rule | Do | Don't | | |
| 176 | +|------|----|----- | | |
| 177 | +| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | | |
| 178 | +| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | | |
| 179 | +| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | | |
| 180 | + | |
| 181 | +### Light/Dark Mode Contrast | |
| 182 | + | |
| 183 | +| Rule | Do | Don't | | |
| 184 | +|------|----|----- | | |
| 185 | +| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | | |
| 186 | +| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | | |
| 187 | +| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | | |
| 188 | +| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | | |
| 189 | + | |
| 190 | +### Layout & Spacing | |
| 191 | + | |
| 192 | +| Rule | Do | Don't | | |
| 193 | +|------|----|----- | | |
| 194 | +| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | | |
| 195 | +| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | | |
| 196 | +| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | | |
| 197 | + | |
| 198 | +--- | |
| 199 | + | |
| 200 | +## Pre-Delivery Checklist | |
| 201 | + | |
| 202 | +Before delivering UI code, verify these items: | |
| 203 | + | |
| 204 | +### Visual Quality | |
| 205 | +- [ ] No emojis used as icons (use SVG instead) | |
| 206 | +- [ ] All icons from consistent icon set (Heroicons/Lucide) | |
| 207 | +- [ ] Brand logos are correct (verified from Simple Icons) | |
| 208 | +- [ ] Hover states don't cause layout shift | |
| 209 | + | |
| 210 | +### Interaction | |
| 211 | +- [ ] All clickable elements have `cursor-pointer` | |
| 212 | +- [ ] Hover states provide clear visual feedback | |
| 213 | +- [ ] Transitions are smooth (150-300ms) | |
| 214 | +- [ ] Focus states visible for keyboard navigation | |
| 215 | + | |
| 216 | +### Light/Dark Mode | |
| 217 | +- [ ] Light mode text has sufficient contrast (4.5:1 minimum) | |
| 218 | +- [ ] Glass/transparent elements visible in light mode | |
| 219 | +- [ ] Borders visible in both modes | |
| 220 | +- [ ] Test both modes before delivery | |
| 221 | + | |
| 222 | +### Layout | |
| 223 | +- [ ] Floating elements have proper spacing from edges | |
| 224 | +- [ ] No content hidden behind fixed navbars | |
| 225 | +- [ ] Responsive at 320px, 768px, 1024px, 1440px | |
| 226 | +- [ ] No horizontal scroll on mobile | |
| 227 | + | |
| 228 | +### Accessibility | |
| 229 | +- [ ] All images have alt text | |
| 230 | +- [ ] Form inputs have labels | |
| 231 | +- [ ] Color is not the only indicator | |
| 232 | +- [ ] `prefers-reduced-motion` respected | ... | ... |
.gitignore
antis-ncc-admin/.cursor/commands/ui-ux-pro-max.md
0 → 100644
| 1 | +# ui-ux-pro-max | |
| 2 | + | |
| 3 | +Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. | |
| 4 | + | |
| 5 | +## Prerequisites | |
| 6 | + | |
| 7 | +Check if Python is installed: | |
| 8 | + | |
| 9 | +```bash | |
| 10 | +python3 --version || python --version | |
| 11 | +``` | |
| 12 | + | |
| 13 | +If Python is not installed, install it based on user's OS: | |
| 14 | + | |
| 15 | +**macOS:** | |
| 16 | +```bash | |
| 17 | +brew install python3 | |
| 18 | +``` | |
| 19 | + | |
| 20 | +**Ubuntu/Debian:** | |
| 21 | +```bash | |
| 22 | +sudo apt update && sudo apt install python3 | |
| 23 | +``` | |
| 24 | + | |
| 25 | +**Windows:** | |
| 26 | +```powershell | |
| 27 | +winget install Python.Python.3.12 | |
| 28 | +``` | |
| 29 | + | |
| 30 | +--- | |
| 31 | + | |
| 32 | +## How to Use This Workflow | |
| 33 | + | |
| 34 | +When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: | |
| 35 | + | |
| 36 | +### Step 1: Analyze User Requirements | |
| 37 | + | |
| 38 | +Extract key information from user request: | |
| 39 | +- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. | |
| 40 | +- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. | |
| 41 | +- **Industry**: healthcare, fintech, gaming, education, etc. | |
| 42 | +- **Stack**: React, Vue, Next.js, or default to `html-tailwind` | |
| 43 | + | |
| 44 | +### Step 2: Search Relevant Domains | |
| 45 | + | |
| 46 | +Use `search.py` multiple times to gather comprehensive information. Search until you have enough context. | |
| 47 | + | |
| 48 | +```bash | |
| 49 | +python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] | |
| 50 | +``` | |
| 51 | + | |
| 52 | +**Recommended search order:** | |
| 53 | + | |
| 54 | +1. **Product** - Get style recommendations for product type | |
| 55 | +2. **Style** - Get detailed style guide (colors, effects, frameworks) | |
| 56 | +3. **Typography** - Get font pairings with Google Fonts imports | |
| 57 | +4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border) | |
| 58 | +5. **Landing** - Get page structure (if landing page) | |
| 59 | +6. **Chart** - Get chart recommendations (if dashboard/analytics) | |
| 60 | +7. **UX** - Get best practices and anti-patterns | |
| 61 | +8. **Stack** - Get stack-specific guidelines (default: html-tailwind) | |
| 62 | + | |
| 63 | +### Step 3: Stack Guidelines (Default: html-tailwind) | |
| 64 | + | |
| 65 | +If user doesn't specify a stack, **default to `html-tailwind`**. | |
| 66 | + | |
| 67 | +```bash | |
| 68 | +python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind | |
| 69 | +``` | |
| 70 | + | |
| 71 | +Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter` | |
| 72 | + | |
| 73 | +--- | |
| 74 | + | |
| 75 | +## Search Reference | |
| 76 | + | |
| 77 | +### Available Domains | |
| 78 | + | |
| 79 | +| Domain | Use For | Example Keywords | | |
| 80 | +|--------|---------|------------------| | |
| 81 | +| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | | |
| 82 | +| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | | |
| 83 | +| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | | |
| 84 | +| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | | |
| 85 | +| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | | |
| 86 | +| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | | |
| 87 | +| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | | |
| 88 | +| `prompt` | AI prompts, CSS keywords | (style name) | | |
| 89 | + | |
| 90 | +### Available Stacks | |
| 91 | + | |
| 92 | +| Stack | Focus | | |
| 93 | +|-------|-------| | |
| 94 | +| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | | |
| 95 | +| `react` | State, hooks, performance, patterns | | |
| 96 | +| `nextjs` | SSR, routing, images, API routes | | |
| 97 | +| `vue` | Composition API, Pinia, Vue Router | | |
| 98 | +| `svelte` | Runes, stores, SvelteKit | | |
| 99 | +| `swiftui` | Views, State, Navigation, Animation | | |
| 100 | +| `react-native` | Components, Navigation, Lists | | |
| 101 | +| `flutter` | Widgets, State, Layout, Theming | | |
| 102 | + | |
| 103 | +--- | |
| 104 | + | |
| 105 | +## Example Workflow | |
| 106 | + | |
| 107 | +**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" | |
| 108 | + | |
| 109 | +**AI should:** | |
| 110 | + | |
| 111 | +```bash | |
| 112 | +# 1. Search product type | |
| 113 | +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product | |
| 114 | + | |
| 115 | +# 2. Search style (based on industry: beauty, elegant) | |
| 116 | +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style | |
| 117 | + | |
| 118 | +# 3. Search typography | |
| 119 | +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography | |
| 120 | + | |
| 121 | +# 4. Search color palette | |
| 122 | +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color | |
| 123 | + | |
| 124 | +# 5. Search landing page structure | |
| 125 | +python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing | |
| 126 | + | |
| 127 | +# 6. Search UX guidelines | |
| 128 | +python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux | |
| 129 | +python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux | |
| 130 | + | |
| 131 | +# 7. Search stack guidelines (default: html-tailwind) | |
| 132 | +python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind | |
| 133 | +``` | |
| 134 | + | |
| 135 | +**Then:** Synthesize all search results and implement the design. | |
| 136 | + | |
| 137 | +--- | |
| 138 | + | |
| 139 | +## Tips for Better Results | |
| 140 | + | |
| 141 | +1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" | |
| 142 | +2. **Search multiple times** - Different keywords reveal different insights | |
| 143 | +3. **Combine domains** - Style + Typography + Color = Complete design system | |
| 144 | +4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues | |
| 145 | +5. **Use stack flag** - Get implementation-specific best practices | |
| 146 | +6. **Iterate** - If first search doesn't match, try different keywords | |
| 147 | +7. **Split Into Multiple Files** - For better maintainability: | |
| 148 | + - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`) | |
| 149 | + - Extract reusable styles into dedicated files | |
| 150 | + - Keep each file focused and under 200-300 lines | |
| 151 | + | |
| 152 | +--- | |
| 153 | + | |
| 154 | +## Common Rules for Professional UI | |
| 155 | + | |
| 156 | +These are frequently overlooked issues that make UI look unprofessional: | |
| 157 | + | |
| 158 | +### Icons & Visual Elements | |
| 159 | + | |
| 160 | +| Rule | Do | Don't | | |
| 161 | +|------|----|----- | | |
| 162 | +| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | | |
| 163 | +| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | | |
| 164 | +| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | | |
| 165 | +| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | | |
| 166 | + | |
| 167 | +### Interaction & Cursor | |
| 168 | + | |
| 169 | +| Rule | Do | Don't | | |
| 170 | +|------|----|----- | | |
| 171 | +| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | | |
| 172 | +| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | | |
| 173 | +| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | | |
| 174 | + | |
| 175 | +### Light/Dark Mode Contrast | |
| 176 | + | |
| 177 | +| Rule | Do | Don't | | |
| 178 | +|------|----|----- | | |
| 179 | +| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | | |
| 180 | +| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | | |
| 181 | +| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | | |
| 182 | +| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | | |
| 183 | + | |
| 184 | +### Layout & Spacing | |
| 185 | + | |
| 186 | +| Rule | Do | Don't | | |
| 187 | +|------|----|----- | | |
| 188 | +| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | | |
| 189 | +| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | | |
| 190 | +| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | | |
| 191 | + | |
| 192 | +--- | |
| 193 | + | |
| 194 | +## Pre-Delivery Checklist | |
| 195 | + | |
| 196 | +Before delivering UI code, verify these items: | |
| 197 | + | |
| 198 | +### Visual Quality | |
| 199 | +- [ ] No emojis used as icons (use SVG instead) | |
| 200 | +- [ ] All icons from consistent icon set (Heroicons/Lucide) | |
| 201 | +- [ ] Brand logos are correct (verified from Simple Icons) | |
| 202 | +- [ ] Hover states don't cause layout shift | |
| 203 | + | |
| 204 | +### Interaction | |
| 205 | +- [ ] All clickable elements have `cursor-pointer` | |
| 206 | +- [ ] Hover states provide clear visual feedback | |
| 207 | +- [ ] Transitions are smooth (150-300ms) | |
| 208 | +- [ ] Focus states visible for keyboard navigation | |
| 209 | + | |
| 210 | +### Light/Dark Mode | |
| 211 | +- [ ] Light mode text has sufficient contrast (4.5:1 minimum) | |
| 212 | +- [ ] Glass/transparent elements visible in light mode | |
| 213 | +- [ ] Borders visible in both modes | |
| 214 | +- [ ] Test both modes before delivery | |
| 215 | + | |
| 216 | +### Layout | |
| 217 | +- [ ] Floating elements have proper spacing from edges | |
| 218 | +- [ ] No content hidden behind fixed navbars | |
| 219 | +- [ ] Responsive at 320px, 768px, 1024px, 1440px | |
| 220 | +- [ ] No horizontal scroll on mobile | |
| 221 | + | |
| 222 | +### Accessibility | |
| 223 | +- [ ] All images have alt text | |
| 224 | +- [ ] Form inputs have labels | |
| 225 | +- [ ] Color is not the only indicator | |
| 226 | +- [ ] `prefers-reduced-motion` respected | ... | ... |