.cursorrules (deprecated)

1# 代码编写规范
2 
3## 组件格式
4- 使用 `<script setup lang="ts">` 语法
5- 使用 `defineOptions({ name: "Xxx" })` 定义组件名
6- 使用 `const ns = useNamespace("xx-xx")` 创建命名空间
7- 样式文件使用 `@use "./index"` 引入
8- 使用 `import { useNamespace } from "@/composables"` 创建命名空间
9 
10## 类型定义规范
11- Props 和 Emits 使用 TypeScript interface 定义
12- 所有函数参数都要加类型注解
13- 类型文件放在组件同级目录的 `types.ts` 中
14 
15## 导入规范
161. 先引入所有 type 类型（按照导入规范顺序引入，不允许类型和函数的引入混杂在一起）
172. 引入第三方依赖（Vue 相关生态优先，如 vue、vue-router、vuex、vue-i18n、vue-use，然后是组件库如 Element Plus，@element-plus/icons-vue，最后是第三方插件）
183. 引入项目目录的其他依赖（@/路径，路径按照 src 目录结构顺序引入）
194. 引入项目目录的其他组件（@/路径，路径按照 src 目录结构顺序引入）
205. 引入相对路径的依赖（@/路径，路径按照 src 目录结构顺序引入）
216. 引入相对路径的组件（@/路径，路径按照 src 目录结构顺序引入）
227. 直接引入第三方库（如 import "vue-cropper/dist/index.css"）
238. 直接引入绝对路径（如 import "@/common/styles/common/var.scss"）
249. 直接引入相对路径（如 import "./index.scss"）
25 
26## 组件内 Composables 使用
27- 不推荐直接在组件中写响应式变量、computed、watch、function、生命周期
28- 将关联性高的代码放到 `function useXx` 里然后暴露出来使用
29- 使用 `defineModel` 代替 `props.modelValue`
30 
31## 文件组织
32- 通用组件放在 `src/components/` 目录下，按功能分子文件夹
33- 通用可复用逻辑放在 `src/composables/`
34- 通用样式放在 `src/common/styles/`
35- 通用 API 请求相关文件放在 `src/common/api/`
36- 通用工具函数放在 `src/common/utils/`
37 
38## 命名规范
39- 所有文件使用 `kebab-case` 风格
40- 引入组件的命名为 `Camel-Case`，如 `import ProTable from "pro-table.vue"`
41- TypeScript 接口和类型用 PascalCase
42- 每个组件目录下用 `index.ts` 统一导出
43 
44## UI 设计规范
45- 使用 `light.scss` 或 `dark.scss` 的 CSS 变量来统一颜色风格
46- 使用 `varCss` 或 `varCssEl` 函数引用 CSS 变量（cssVar 引入 `--tk-` 开头，cssVarEl 引入 `--el-` 开头）
47- 遵循 BEM 规范，优先使用 useNamespace 函数（如 `ns.b()`、`ns.e()`、`ns.em()`、`ns.is()`、`ns.has()`）
48- 组件的样式优先创建并使用 `.scss` 文件，且在同级 `.vue` 文件下创建同名的 `.scss` 文件
49- 使用 `bem.scss` 的混合宏（如 `@include b(xx) { @include e(xx) { @include m(xx) { @include is(xx) { @include has(xx) { } } } } }`），如果 `@include e(xx){}` 里使用 `@include e{}` 则第二个参数加上 true，即 `@include e(xx, true){}`，否则 `@include e(xx){}` 建议同级写
50- 优先使用项目定义的原子类，在 `atomic.scss` 中定义
51- 请适配移动端，部分移动端宽度变量在 `var.scss` 中定义
52 
53## 代码结构
54- props、emits、composables 写在 script 顶部
55- 适当换行，如变量与函数之间，script、template、style 标签之间必须换行
56- 使用 ESLint 和 Prettier 保证代码风格统一
57- composable 和函数用 JSDoc 或 TypeScript 注释说明用途