Skip to content

Commit f1b9349

Browse files
YuchenWellYuchenWell
committed
chore: 完善 cursor rules
1 parent d720dde commit f1b9349

File tree

6 files changed

+437
-172
lines changed

6 files changed

+437
-172
lines changed

‎.cursor/rules/architecture.mdc

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: false
5+
---
6+
# 项目架构指南
7+
8+
## 整体架构
9+
10+
项目遵循前后端分离架构，采用 Monorepo 组织代码，按功能模块划分包。
11+
12+
## 前端架构
13+
14+
前端采用 Vue 3 + TypeScript 技术栈，遵循以下架构原则：
15+
16+
- 使用组合式 API 和 `<script setup>` 语法
17+
- 采用分层架构：
18+
- 视图层 (Views)
19+
- 组件层 (Components)
20+
- 状态管理层 (Stores)
21+
- 服务层 (Services)
22+
- 适配器层 (Adapters)
23+
- API 层 (API)
24+
25+
## 状态管理
26+
27+
- 使用 Pinia 进行状态管理
28+
- 状态按领域划分，保持 Store 职责单一
29+
- 全局状态存放在 `packages/stores`
30+
- 局部状态放在对应的应用中
31+
32+
## 组件设计
33+
34+
- 遵循原子设计思想，按复杂度分类组件：
35+
- 原子组件 (Atoms)：最基本 UI 元素
36+
- 分子组件 (Molecules)：由多个原子组件组成
37+
- 有机体组件 (Organisms)：由多个分子组件组合成的复杂 UI 部分
38+
- 模板 (Templates)：页面布局
39+
- 页面 (Pages)：具体页面实现
40+
41+
## 数据流
42+
43+
- 采用单向数据流
44+
- Props 向下传递，Events 向上触发
45+
- 使用 Pinia 管理跨组件共享状态
46+
- 复杂组件使用依赖注入 (provide/inject)
47+
48+
## 路由组织
49+
50+
- 使用 Vue Router 管理路由
51+
- 按功能模块组织路由配置
52+
- 实现路由懒加载
53+
54+
## API 调用
55+
56+
- 使用 Axios 封装 API 请求
57+
- API 请求统一在 API 层处理
58+
- 使用拦截器处理请求/响应
59+
- 错误处理统一管理

‎.cursor/rules/component-development.mdc

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: false
5+
---
6+
# 组件开发指南
7+
8+
## 组件创建
9+
10+
创建新组件时，请遵循以下步骤：
11+
12+
1. 确定组件类型（原子、分子、有机体）
13+
2. 确定组件所属的域（全局、业务）
14+
3. 使用适当的命名规范
15+
4. 使用 TypeScript 定义类型
16+
5. 实现组件逻辑和模板
17+
18+
## 组件结构
19+
20+
每个组件文件应包含以下部分：
21+
22+
```vue
23+
<script setup lang="ts">
24+
// 1. 定义 Props 和 Emits
25+
const props = defineProps<{
26+
// 属性定义
27+
}>();
28+
29+
const emit = defineEmits<{
30+
// 事件定义
31+
}>();
32+
33+
// 2. 引入依赖
34+
import { ref, computed, onMounted } from 'vue';
35+
import { useXXX } from '@/composables/xxx';
36+
37+
// 3. 组件状态
38+
const state = ref(...);
39+
40+
// 4. 计算属性
41+
const computedValue = computed(() => {...});
42+
43+
// 5. 生命周期钩子
44+
onMounted(() => {...});
45+
46+
// 6. 方法
47+
const handleEvent = () => {...};
48+
49+
// 7. 副作用
50+
watch(state, () => {...});
51+
</script>
52+
53+
<template>
54+
<!-- 组件模板 -->
55+
</template>
56+
57+
<style scoped>
58+
/* 组件样式（如果需要） */
59+
</style>
60+
```
61+
62+
## 组件命名
63+
64+
- 组件文件名：使用 kebab-case（如 `user-profile.vue`）
65+
- 组件名：使用 PascalCase（如 `UserProfile`）
66+
- 组件导入：使用 PascalCase（如 `import UserProfile from './user-profile.vue'`）
67+
- 组件使用：使用 PascalCase（如 `<UserProfile />`）
68+
69+
## Props 和 Events
70+
71+
- Props 使用驼峰命名（如 `userName`）
72+
- 事件使用驼峰命名并使用主动语态（如 `onClick`、`onSubmit`）
73+
- 为所有 Props 提供类型定义
74+
- 为所有事件提供详细类型定义
75+
76+
## 组件复用
77+
78+
- 尽可能提高组件的复用性
79+
- 使用组合式函数抽取复杂逻辑
80+
- 使用插槽提供灵活的内容结构
81+
- 考虑使用继承或组合模式
82+
83+
## 性能考虑
84+
85+
- 使用 `shallowRef` 优化大型对象
86+
- 为重复渲染的组件提供 key
87+
- 使用 `v-once` 优化静态内容
88+
- 使用 `v-memo` 优化条件渲染
89+
- 大型列表考虑虚拟滚动
90+
91+
## 可访问性
92+
93+
- 确保键盘可访问性
94+
- 遵循颜色对比度标准

‎.cursor/rules/development-workflow.mdc

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: false
5+
---
6+
# 开发工作流指南
7+
8+
## 开发环境设置
9+
10+
1. 使用 pnpm 安装依赖：
11+
```bash
12+
pnpm install
13+
```
14+
15+
2. 项目使用 Turbo 管理构建流程，通过 [turbo.json](mdc:turbo.json) 配置任务。
16+
17+
## 开发命令
18+
19+
- 启动 Web 开发服务器：
20+
```bash
21+
pnpm dev
22+
# 或
23+
pnpm dev:web
24+
```
25+
26+
- 启动 Electron 应用开发：
27+
```bash
28+
pnpm dev:app
29+
```
30+
31+
- 构建所有项目：
32+
```bash
33+
pnpm build
34+
```
35+
36+
- 打包 Electron 应用：
37+
```bash
38+
# 开发环境
39+
pnpm pack:dev
40+
41+
# 生产环境
42+
pnpm pack:prod
43+
```
44+
45+
- 代码检查：
46+
```bash
47+
pnpm check
48+
```
49+
50+
- 格式化和Lint：
51+
```bash
52+
# 格式化
53+
pnpm format
54+
55+
# Lint检查
56+
pnpm lint
57+
```
58+
59+
- 测试：
60+
```bash
61+
pnpm test:unit
62+
```
63+
64+
## 分支管理
65+
66+
- 主分支：`main`
67+
- 功能分支：`feature/功能名称`
68+
- 修复分支：`fix/问题描述`
69+
- 发布分支：`release/版本号`
70+
71+
## 提交规范
72+
73+
遵循 [Conventional Commits](https://www.conventionalcommits.org/zh-hans/) 规范：
74+
75+
- `feat`: 新功能
76+
- `fix`: 修复 Bug
77+
- `docs`: 文档更新
78+
- `style`: 代码风格修改
79+
- `refactor`: 重构代码
80+
- `perf`: 性能优化
81+
- `test`: 测试相关
82+
- `build`: 构建系统相关
83+
- `ci`: CI 配置相关
84+
- `chore`: 其他修改
85+
86+
使用交互式提交工具：
87+
```bash
88+
pnpm commit
89+
```
90+
91+
## 代码审查
92+
93+
- 每个拉取请求至少需要一个审查者
94+
- 审查重点：
95+
- 功能正确性
96+
- 代码质量
97+
- 性能影响
98+
- 代码风格
99+
100+
## 测试
101+
102+
- 所有新功能必须有对应的单元测试
103+
- 使用 Vitest 进行测试
104+
- 运行测试命令：
105+
```bash
106+
pnpm test:unit
107+
```
108+
109+
## 发布流程
110+
111+
1. 更新版本号
112+
2. 创建发布分支
113+
3. 构建项目
114+
4. 测试构建结果
115+
5. 合并到主分支
116+
6. 创建发布标签

‎.cursor/rules/project-structure.mdc

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: false
5+
---
6+
# 项目结构指南
7+
8+
## Monorepo 结构
9+
10+
这是一个基于 pnpm workspace 的 Monorepo 项目，包含以下主要目录：
11+
12+
- `apps/` - 包含所有应用程序
13+
- `web/` - Vue 3 Web 应用
14+
- `electron/` - Electron 桌面应用
15+
- `main/` - 主进程
16+
- `preload/` - 预加载脚本
17+
- `backend-mock/` - 模拟后端服务
18+
- `packages/` - 包含所有共享包
19+
- `@core/` - 核心功能和组件
20+
- `base/` - 基础包
21+
- `design/` - 设计相关
22+
- `icons/` - 图标
23+
- `shared/` - 共享
24+
- `typings/` - 类型定义
25+
- `composables/` - 组合式 API
26+
- `preferences/` - 偏好设置
27+
- `ui-kit/` - UI 组件集合
28+
- `layout-ui/` - 布局 UI
29+
- `menu-ui/` - 菜单 UI
30+
- `shadcn-ui/` - shadcn UI
31+
- `tabs-ui/` - 标签页 UI
32+
- `effects/` - 副作用相关包
33+
- `access/` - 访问控制
34+
- `plugins/` - 第三方大型依赖插件
35+
- `common-ui/` - 通用 UI
36+
- `hooks/` - 组合式 API
37+
- `layouts/` - 布局
38+
- `request/` - 请求
39+
- `types/` - 全局类型定义
40+
- `utils/` - 通用工具函数
41+
- `stores/` - 共享状态管理
42+
- `constants/` - 全局常量
43+
- `locales/` - 国际化资源
44+
- `icons/` - 图标资源
45+
- `styles/` - 共享样式
46+
- `preferences/` - 用户偏好设置
47+
- `internal/` - 内部工具目录
48+
- `lint-configs/` - 代码检查配置
49+
- `commitlint-config/` - Commitlint 配置
50+
- `eslint-config/` - ESLint 配置
51+
- `prettier-config/` - Prettier 配置
52+
- `stylelint-config/` - Stylelint 配置
53+
- `node-utils/` - Node.js 工具
54+
- `tailwind-config/` - Tailwind 配置
55+
- `tsconfig/` - 通用 tsconfig 配置
56+
- `vite-config/` - 通用Vite 配置
57+
- `playground/` - 演示目录
58+
- `scripts/` - 脚本目录
59+
- `vsh/` - VSH 脚本
60+
- `run-app-dev/` - 应用开发运行脚本
61+
- `clean.mjs` - 清理脚本
62+
63+
## Web 应用结构
64+
65+
Web 应用 [apps/web/src/main.ts](mdc:apps/web/src/main.ts) 结构如下：
66+
67+
- `components/` - 应用级组件
68+
- `views/` - 页面视图
69+
- `store/` - 应用状态管理
70+
- `router/` - 路由配置
71+
- `api/` - API 请求封装
72+
- `layouts/` - 布局组件
73+
- `locales/` - 本地化资源
74+
- `adapter/` - 适配器层
75+
76+
## Electron 应用结构
77+
78+
Electron 应用包含两个主要部分：
79+
80+
- `main/` - 主进程代码
81+
- `preload/` - 预加载脚本
82+
83+
## 构建与任务管理
84+
85+
项目使用 [turbo.json](mdc:turbo.json) 进行构建和任务管理，工作区配置位于 [pnpm-workspace.yaml](mdc:pnpm-workspace.yaml)。
86+
87+
## 根目录文件
88+
89+
- `README.md` - 项目说明文档
90+
- `cspell.json` - CSpell 配置文件
91+
- `eslint.config.mjs` - ESLint 配置文件
92+
- `stylelint.config.mjs` - Stylelint 配置文件
93+
- `turbo.json` - Turbo 配置文件
94+
- `vitest.config.ts` - Vitest 配置文件

0 commit comments

Comments
 (0)