Cursor rule

1---
2description: CodeSpirit CSS 样式规范 - 命名约定、主题系统、动画效果、AMIS样式覆盖
3globs: *.css
4alwaysApply: false
5---
6 
7# CSS 样式规范
8 
9## AMIS 主题集成
10 
11- 样式编写结合 AMIS 官方样式指南：https://aisuda.bce.baidu.com/amis/zh-CN/style/index
12- 项目使用 **antd** 主题，覆盖样式使用 `.antd-*` 前缀
13- cxd 主题样式使用 `.cxd-*` 前缀
14 
15## CSS 变量系统
16 
17使用 `:root` 统一定义设计令牌，便于主题切换和一致性维护：
18 
19```css
20:root {
21    /* 颜色系统 */
22    --primary-color: #007bff;
23    --success-color: #28a745;
24    --warning-color: #ffc107;
25    --danger-color: #dc3545;
26    --info-color: #17a2b8;
27    
28    /* 灰色色阶 */
29    --gray-100: #f8f9fa;
30    --gray-200: #e9ecef;
31    --gray-300: #dee2e6;
32    --gray-600: #6c757d;
33    --gray-800: #343a40;
34    
35    /* 间距系统 */
36    --spacing-xs: 0.25rem;   /* 4px */
37    --spacing-sm: 0.5rem;    /* 8px */
38    --spacing-md: 1rem;      /* 16px */
39    --spacing-lg: 1.5rem;    /* 24px */
40    
41    /* 字体系统 */
42    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
43    --font-size-sm: 0.875rem;
44    --font-size-md: 1rem;
45    --font-size-lg: 1.125rem;
46    
47    /* 阴影系统 */
48    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
49    --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
50    --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
51    
52    /* 边框系统 */
53    --border-radius: 0.375rem;
54    --border-radius-sm: 0.25rem;
55    --border-radius-lg: 0.5rem;
56    
57    /* 过渡动画 */
58    --transition: all 0.3s ease;
59    --transition-fast: all 0.15s ease;
60}
61```
62 
63## 命名约定
64 
65### 模块前缀命名
66 
67使用模块/功能前缀避免样式冲突：
68 
69| 模块 | 前缀 | 示例 |
70|-----|-----|------|
71| 考试系统 | `exam-` | `.exam-container`, `.exam-timer` |
72| 问卷系统 | `survey-` | `.survey-participate-page` |
73| 租户管理 | `tenant-` | `.tenant-admin-wrapper` |
74| 聊天功能 | `chat-` | `.chat-container`, `.chat-message` |
75| AMIS 卡片 | `amis-cards-` | `.amis-cards-page`, `.amis-cards-card` |
76 
77### BEM-like 命名
78 
79```css
80/* 块 */
81.exam-container { }
82 
83/* 元素 */
84.exam-container .exam-header { }
85.exam-container .exam-body { }
86 
87/* 修饰符 */
88.exam-container--compact { }
89.exam-timer--urgent { }
90```
91 
92### 状态类命名
93 
94```css
95.is-active { }
96.is-checked { }
97.is-loading { }
98.is-error { }
99.is-focused { }
100.has-error { }
101```
102 
103## 动画效果
104 
105### 过渡动画
106 
107动效要自然、高效，推荐使用 `cubic-bezier` 缓动函数：
108 
109```css
110/* 标准过渡 */
111transition: all 0.3s ease;
112 
113/* 弹性过渡 */
114transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
115 
116/* 回弹效果 */
117transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
118```
119 
120### 关键帧动画
121 
122```css
123/* 渐入动画 */
124@keyframes fadeIn {
125    from { opacity: 0; transform: translateY(20px); }
126    to { opacity: 1; transform: translateY(0); }
127}
128 
129/* 脉冲动画 */
130@keyframes pulse {
131    0%, 100% { transform: scale(1); opacity: 1; }
132    50% { transform: scale(1.05); opacity: 0.8; }
133}
134 
135/* 旋转加载 */
136@keyframes spin {
137    to { transform: rotate(360deg); }
138}
139 
140/* 光晕效果 */
141@keyframes shimmer {
142    0% { left: -100%; }
143    100% { left: 100%; }
144}
145```
146 
147### 悬停交互
148 
149```css
150.card:hover {
151    transform: translateY(-3px) scale(1.01);
152    box-shadow: var(--shadow-lg);
153}
154 
155.button:hover {
156    transform: translateY(-2px);
157    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
158}
159 
160.button:active {
161    transform: translateY(0);
162}
163```
164 
165## 主题系统
166 
167### 亮色/暗色主题
168 
169```css
170/* 系统偏好检测 */
171@media (prefers-color-scheme: dark) {
172    :root {
173        --bg-color: #1f2937;
174        --text-color: #e5e7eb;
175        --border-color: #374151;
176    }
177}
178 
179/* 强制暗色主题类 */
180.theme-dark {
181    --bg-color: #1f2937;
182    --text-color: #e5e7eb;
183}
184```
185 
186### 主题变体类
187 
188```css
189.theme-primary { --theme-color: var(--primary-color); }
190.theme-success { --theme-color: var(--success-color); }
191.theme-warning { --theme-color: var(--warning-color); }
192.theme-danger { --theme-color: var(--danger-color); }
193```
194 
195## 响应式设计
196 
197### 标准断点
198 
199```css
200/* 超小屏幕 (手机) */
201@media (max-width: 480px) { }
202 
203/* 小屏幕 (大手机/小平板) */
204@media (max-width: 768px) { }
205 
206/* 中等屏幕 (平板) */
207@media (max-width: 992px) { }
208 
209/* 大屏幕 (笔记本) */
210@media (max-width: 1200px) { }
211 
212/* 超大屏幕 (桌面) */
213@media (max-width: 1400px) { }
214```
215 
216### 移动优先示例
217 
218```css
219.container {
220    padding: 1rem;
221}
222 
223@media (min-width: 768px) {
224    .container {
225        padding: 1.5rem;
226    }
227}
228 
229@media (min-width: 1200px) {
230    .container {
231        padding: 2rem;
232    }
233}
234```
235 
236## AMIS 样式覆盖
237 
238### antd 主题覆盖
239 
240```css
241/* 表单项 */
242.antd-Form-item {
243    margin-bottom: 24px;
244    padding: 20px;
245    background: #fafbfc;
246    border-radius: 8px;
247}
248 
249/* 按钮 */
250.antd-Button--primary {
251    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
252    border: none;
253    border-radius: 8px;
254}
255 
256/* 表格 */
257.antd-Table-table thead th {
258    background: var(--gray-100) !important;
259    font-weight: 600 !important;
260}
261```
262 
263### cxd 主题覆盖
264 
265```css
266.cxd-Panel {
267    background: var(--card-bg);
268    border-radius: var(--border-radius-lg);
269    box-shadow: var(--shadow-md);
270}
271 
272.cxd-Panel-header {
273    padding: 16px 24px;
274    border-bottom: 1px solid var(--border-color);
275}
276```
277 
278## 性能优化
279 
280### GPU 加速
281 
282```css
283/* 开启硬件加速 */
284.animated-element {
285    will-change: transform, opacity;
286    backface-visibility: hidden;
287    transform: translateZ(0);
288}
289```
290 
291### 减少重绘
292 
293```css
294/* 避免使用 */
295.avoid {
296    box-shadow: /* 复杂阴影 */;
297    filter: blur(10px);
298}
299 
300/* 推荐使用 transform 代替 */
301.recommended {
302    transform: translateY(-2px);
303}
304```
305 
306### 减少动画（无障碍）
307 
308```css
309@media (prefers-reduced-motion: reduce) {
310    * {
311        animation: none !important;
312        transition: opacity 0.3s ease !important;
313    }
314}
315```
316 
317## 渐变和装饰效果
318 
319### 常用渐变
320 
321```css
322/* 主色渐变 */
323background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
324 
325/* 柔和背景渐变 */
326background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
327 
328/* 卡片头部渐变 */
329background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
330```
331 
332### 装饰伪元素
333 
334```css
335.card::before {
336    content: '';
337    position: absolute;
338    top: 0;
339    left: 0;
340    right: 0;
341    height: 3px;
342    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
343    transform: scaleX(0);
344    transition: transform 0.3s ease;
345}
346 
347.card:hover::before {
348    transform: scaleX(1);
349}
350```
351 
352## 工具类
353 
354### 常用工具类
355 
356```css
357/* 文本对齐 */
358.text-left { text-align: left !important; }
359.text-center { text-align: center !important; }
360.text-right { text-align: right !important; }
361 
362/* 显示控制 */
363.d-none { display: none !important; }
364.d-block { display: block !important; }
365.d-flex { display: flex !important; }
366 
367/* 间距 */
368.m-0 { margin: 0 !important; }
369.mt-1 { margin-top: 0.25rem !important; }
370.mb-2 { margin-bottom: 0.5rem !important; }
371.p-2 { padding: 0.5rem !important; }
372```
373 
374## 滚动条样式
375 
376```css
377/* Webkit 浏览器滚动条 */
378::-webkit-scrollbar {
379    width: 6px;
380    height: 6px;
381}
382 
383::-webkit-scrollbar-track {
384    background: rgba(0, 0, 0, 0.03);
385    border-radius: 10px;
386}
387 
388::-webkit-scrollbar-thumb {
389    background: rgba(0, 0, 0, 0.1);
390    border-radius: 10px;
391}
392 
393::-webkit-scrollbar-thumb:hover {
394    background: rgba(0, 0, 0, 0.2);
395}
396 
397/* Firefox 滚动条 */
398* {
399    scrollbar-width: thin;
400    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
401}
402```
403 
404## 禁止事项
405 
406- ❌ 不要使用 `!important` 覆盖 AMIS 核心功能样式（除非必要）
407- ❌ 不要使用内联样式代替 CSS 类
408- ❌ 不要使用绝对单位 `px` 定义字体大小（使用 `rem`）
409- ❌ 不要创建过于复杂的选择器（超过 3 层嵌套）
410- ❌ 不要在动画中使用会触发重排的属性（`width`, `height`, `top`, `left`）
411- ❌ 不要忽略暗色主题适配
412