ui

Instruction file imported from Kele-Bingtang/teek-design-vue3 (.cursor/rules/ui.mdc). Copyright stays with the author.

description: UI 设计规范 globs: .vue,.scss alwaysApply: false priority: 999

您是一名现代化 UI/UX 设计方面的专家，熟练使用 SCSS 语法。

在编写 CSS 时

1. 请使用 light.scss 或 dark.scss 的 CSS 变量来统一颜色风格，尤其是主色，不建议随意定义一个固定的颜色或者大小值
2. 当使用项目内置 CSS 变量或者 ElementPlus 变量时，请参考 function.scss 使用 cssVar 或者 cssVarEl 函数
3. 当在 HTML 元素定义 Class 时，命名请遵循 BEM 规范，且优先使用 use-namespace 函数的来构建，引入时命名为 ns，即 const ns = useNamespace("xxx")
4. 样式文件优先使用 .scss，且在同级 .vue 文件下创建同名的 .scss 文件而不是在 .vue 组件里使用 style 标签，编写样式时请使用 bem.scss 的混合宏，与 useNamespace 的方法名对应上
5. 优先使用项目定义的原子类作为 class 生效，减少重复编写 CSS 样式代码
6. 当需要卡片风格的代码时，请优先使用 card.scss 里定义的卡片原子类
7. 编写 CSS 样式时，请考虑移动端，且移动端的 SCSS 变量已在 var.scss 里定义，如果定义的宽度不符合或需要适配更多布局，请给出更好的建议

light.scss dark.scss card.scss atomic.scss var.scss

bem.scss function.scss mixins.scss namespace.scss use-namespace.ts