Cursor rule

1---
2description:
3globs:
4alwaysApply: false
5---
6 
7# 样式开发规范
8 
9## 1. UnoCSS 使用规范
10- 优先使用 UnoCSS 原子类
11- 复杂布局使用 CSS Modules
12- 响应式设计使用断点前缀
13```typescript
14// 基础样式
15<div className="flex items-center justify-between p-4 bg-white">
16  <h1 className="text-lg font-bold">标题</h1>
17  <Button className="btn-primary">操作</Button>
18</div>
19 
20// 响应式样式
21<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
22  {/* 内容 */}
23</div>
24```
25 
26## 2. CSS Modules 规范
27- 文件命名：`Component.module.scss`
28- 类名使用 camelCase
29```scss
30// UserCard.module.scss
31.userCard {
32  @apply bg-white rounded-lg shadow-md p-4;
33 
34  .header {
35    @apply flex items-center justify-between mb-4;
36 
37    .title {
38      @apply text-lg font-bold text-gray-800;
39    }
40  }
41 
42  .content {
43    @apply text-gray-600;
44  }
45}
46```
47 
48## 3. 主题系统
49- 使用 CSS 变量定义主题色
50- 支持暗色模式切换
51```scss
52:root {
53  --primary-color: #1890ff;
54  --success-color: #52c41a;
55  --warning-color: #faad14;
56  --error-color: #ff4d4f;
57}
58 
59[data-theme='dark'] {
60  --primary-color: #177ddc;
61  --bg-color: #141414;
62  --text-color: #ffffff;
63}
64```
65 
66 
67## 暗色模式
68 
69- 所有组件必须支持暗色模式
70- 暗色模式应通过 Token 系统实现，不应硬编码
71- 测试暗色模式下的颜色对比度，确保可访问性
72- 在设计暗色模式时考虑降低亮度和饱和度
73- 确保文本在暗色背景上有足够的对比度
74- 图片和图标应提供适合暗色模式的版本
75 
76## 可访问性样式
77 
78- 遵循 WCAG 2.1 AA 级别标准
79- 确保焦点状态有明显的视觉提示
80- 提供足够的色彩对比度
81- 不依赖颜色来传达信息
82- 支持用户放大页面至 200% 时的正常布局
83- 避免使用会导致闪烁的动画
84