AI.rules

1. 技术栈

React

• 优先使用 Function Components + Hooks
• Class Components 仅用于：
  • Error Boundary
  • 特殊生命周期控制
• 遵循 React 最佳实践（状态提升、受控组件、依赖管理）

Vue

• 使用 Vue 3 + Composition API
• 禁止 Options API（除历史项目）
• 逻辑统一抽离为 useXxx 组合函数

TypeScript

• 禁止使用 any
• 必须完整类型定义或类型推断
• Props 必须定义接口

---

2. 样式规范

• 使用 Tailwind CSS（非uniapp的情况下）
• 禁止随意自定义样式
• 禁止滥用 inline style
• 遵循设计系统（Design Tokens）
• 原则：原子化 / 可复用 / 可维护

---

3. 代码规范

• 使用 ES6+

---

4. 命名规范

类型	规范
变量/函数	camelCase
类/接口	PascalCase
常量	UPPER_SNAKE_CASE
组件	PascalCase
文件	kebab-case

---

5. 组件设计

• 遵循 单一职责原则（SRP）
• 禁止巨型组件
• UI 与业务逻辑分离
• 组件必须具备复用性

---

6. 代码复用

React

• Custom Hooks（优先）
• HOC（横切逻辑）

Vue

• Composition Functions（useXxx）

通用原则

• 遵循 DRY
• 公共逻辑抽取到：
  • hooks / composables
  • utils
  • services

---

7. API 规范

• 所有请求必须封装在 Service 层
• 禁止在组件中直接调用 API
• 请求与业务逻辑解耦

---

8. 错误处理

• 所有异步操作必须 try/catch
• 必须有统一错误处理机制
• 推荐：
  • 全局拦截（Axios）
  • 错误上报 + 用户提示

---

9. 跨端（uni-app）

• 必须兼容：
  • iOS / Android
  • H5
  • 小程序
• 使用条件编译

10. 性能优化

• 减少无效渲染：
  • React：memo / useMemo / useCallback
  • Vue：computed 精准依赖
• 路由懒加载
• 大列表使用虚拟滚动

---