Comparison

A · AGENTS.md · xin-lai/CodeSpirit B · Cursor rules · xin-lai/CodeSpirit

What each file covers, counted
Dimension	Shared	Only in A	Only in B	Overlap
Sections	1	14	6	5%
Commands	0	2	0	0%
Section tags	0	3	1	0%

What each file covers

Sections

1 shared · 14 only in A · 6 only in B

− Copilot instructions
− General recommendations for working with Aspire
− Running the application
− Checking resources
− Listing integrations
− Debugging issues
− Other Aspire MCP tools
− Playwright MCP server
− Updating the app host
− Persistent containers
− Aspire workload
− Official documentation
− BMAD AI 工作流
− 与 CodeSpirit 规范集成
+ CSS 变量系统
+ AMIS 样式覆盖
+ BEM-like 命名
+ antd 主题覆盖
+ cxd 主题覆盖
+ GPU 加速
获取帮助

Commands

0 shared · 2 only in A · 0 only in B

− dotnet tool install --global dotnet-outdated-tool
− dotnet-outdated

Section tags

0 shared · 3 only in A · 1 only in B

− code-style
− agent-behaviour
− docs
+ ui

Line diff

+378 added−68 removed34 unchanged8.3% identical

xin-lai/CodeSpirit · AGENTS.md

@@ −1 @@

1# Copilot instructions

3This repository is set up to use Aspire. Aspire is an orchestrator for the entire application and will take care of configuring dependencies, building, and running the application. The resources that make up the application are defined in `apphost.cs` including application code and external dependencies.

5## General recommendations for working with Aspire

61. Before making any changes always run the apphost using `aspire run` and inspect the state of resources to make sure you are building from a known state.

71. Changes to the _apphost.cs_ file will require a restart of the application to take effect.

82. Make changes incrementally and run the aspire application using the `aspire run` command to validate changes.

93. Use the Aspire MCP tools to check the status of resources and debug issues.

11## Running the application

12To run the application run the following command:

14```

15aspire run

16```

18If there is already an instance of the application running it will prompt to stop the existing instance. You only need to restart the application if code in `apphost.cs` is changed, but if you experience problems it can be useful to reset everything to the starting state.

20## Checking resources

21To check the status of resources defined in the app model use the _list resources_ tool. This will show you the current state of each resource and if there are any issues. If a resource is not running as expected you can use the _execute resource command_ tool to restart it or perform other actions.

23## Listing integrations

24IMPORTANT! When a user asks you to add a resource to the app model you should first use the _list integrations_ tool to get a list of the current versions of all the available integrations. You should try to use the version of the integration which aligns with the version of the Aspire.AppHost.Sdk. Some integration versions may have a preview suffix. Once you have identified the correct integration you should always use the _get integration docs_ tool to fetch the latest documentation for the integration and follow the links to get additional guidance.

26## Debugging issues

27IMPORTANT! Aspire is designed to capture rich logs and telemetry for all resources defined in the app model. Use the following diagnostic tools when debugging issues with the application before making changes to make sure you are focusing on the right things.

291. _list structured logs_; use this tool to get details about structured logs.

302. _list console logs_; use this tool to get details about console logs.

313. _list traces_; use this tool to get details about traces.

324. _list trace structured logs_; use this tool to get logs related to a trace

34## Other Aspire MCP tools

361. _select apphost_; use this tool if working with multiple app hosts within a workspace.

372. _list apphosts_; use this tool to get details about active app hosts.

39## Playwright MCP server

41The playwright MCP server has also been configured in this repository and you should use it to perform functional investigations of the resources defined in the app model as you work on the codebase. To get endpoints that can be used for navigation using the playwright MCP server use the list resources tool.

43## Updating the app host

44The user may request that you update the Aspire apphost. You can do this using the `aspire update` command. This will update the apphost to the latest version and some of the Aspire specific packages in referenced projects, however you may need to manually update other packages in the solution to ensure compatibility. You can consider using the `dotnet-outdated` with the users consent. To install the `dotnet-outdated` tool use the following command:

46```

47dotnet tool install --global dotnet-outdated-tool

48```

50## Persistent containers

51IMPORTANT! Consider avoiding persistent containers early during development to avoid creating state management issues when restarting the app.

53## Aspire workload

54IMPORTANT! The aspire workload is obsolete. You should never attempt to install or use the Aspire workload.

56## Official documentation

57IMPORTANT! Always prefer official documentation when available. The following sites contain the official documentation for Aspire and related components

591. https://aspire.dev

602. https://learn.microsoft.com/dotnet/aspire

613. https://nuget.org (for specific integration package details)

63## BMAD AI 工作流

65本项目已集成 BMAD (Breakthrough Method of Agile AI-Driven Development) 完整工作流，用于结构化的软件开发生命周期管理。

67### 快速开始

691. **小型任务/Bug 修复** (Quick Flow):

70 - `/quick-spec` - 创建技术规范

71 - `/quick-dev` - 实现变更

72 - `/code-review` - 代码审查

742. **完整功能开发** (Full Flow):

75 - `/product-brief` - 产品需求简报

76 - `/create-prd` - 创建 PRD

77 - `/create-architecture` - 架构设计

78 - `/create-epics-and-stories` - 拆分为 Epic 和 Story

79 - `/sprint-planning` - Sprint 规划

80 - `/dev-story` - 实现 Story

81 - `/code-review` - 代码审查

82 - `/retrospective` - 复盘

84### 与 CodeSpirit 规范集成

86BMAD 工作流已配置为自动遵循 CodeSpirit 的所有开发规范（位于 `.cursor/rules/`）。在使用 BMAD 时：

88- PRD 会自动考虑多租户、多数据库、AI 功能等项目特性

89- 架构设计会遵循依赖注入、缓存策略等规范

90- Story 实现会应用正确的命名约定、DTO 设计、控制器规范等

91- 代码审查会执行 CodeSpirit 特定的审查清单

93### 获取帮助

95任何时候，输入 `/bmad-help` 可获取上下文相关的指导。

97详细使用指南请参考：

98- **[BMAD 使用教程](Docs/bmad/bmad-tutorial.md)** - 完整的综合教程（推荐新手阅读）

99- [BMAD 工作流指南](Docs/bmad/bmad-workflow-guide.md) - 详细的工作流使用指南

100- [BMAD 团队培训指南](Docs/bmad/bmad-team-guide.md) - 团队培训材料

101- [BMAD 集成技能](.cursor/skills/bmad-integration/SKILL.md) - BMAD 与 CodeSpirit 集成

102- [项目上下文文档](project-context.md) - 项目上下文和规范引用

xin-lai/CodeSpirit · .cursor/rules/css.mdc

@@ +1 @@

1---

2description: CodeSpirit CSS 样式规范 - 命名约定、主题系统、动画效果、AMIS样式覆盖

3globs: *.css

4alwaysApply: false

5---

7# CSS 样式规范

9## AMIS 主题集成

11- 样式编写结合 AMIS 官方样式指南：https://aisuda.bce.baidu.com/amis/zh-CN/style/index

12- 项目使用 **antd** 主题，覆盖样式使用 `.antd-*` 前缀

13- cxd 主题样式使用 `.cxd-*` 前缀

15## CSS 变量系统

17使用 `:root` 统一定义设计令牌，便于主题切换和一致性维护：

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;

28 /* 灰色色阶 */

29 --gray-100: #f8f9fa;

30 --gray-200: #e9ecef;

31 --gray-300: #dee2e6;

32 --gray-600: #6c757d;

33 --gray-800: #343a40;

35 /* 间距系统 */

36 --spacing-xs: 0.25rem; /* 4px */

37 --spacing-sm: 0.5rem; /* 8px */

38 --spacing-md: 1rem; /* 16px */

39 --spacing-lg: 1.5rem; /* 24px */

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;

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);

52 /* 边框系统 */

53 --border-radius: 0.375rem;

54 --border-radius-sm: 0.25rem;

55 --border-radius-lg: 0.5rem;

57 /* 过渡动画 */

58 --transition: all 0.3s ease;

59 --transition-fast: all 0.15s ease;

60}

61```

63## 命名约定

65### 模块前缀命名

67使用模块/功能前缀避免样式冲突：

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` |

77### BEM-like 命名

79```css

80/* 块 */

81.exam-container { }

83/* 元素 */

84.exam-container .exam-header { }

85.exam-container .exam-body { }

87/* 修饰符 */

88.exam-container--compact { }

89.exam-timer--urgent { }

90```

92### 状态类命名

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

@@ −1 +1 @@

1−# Copilot instructions

1+---

2+description: CodeSpirit CSS 样式规范 - 命名约定、主题系统、动画效果、AMIS样式覆盖

3+globs: *.css

4+alwaysApply: false

5+---

3−This repository is set up to use Aspire. Aspire is an orchestrator for the entire application and will take care of configuring dependencies, building, and running the application. The resources that make up the application are defined in `apphost.cs` including application code and external dependencies.

7+# CSS 样式规范

5−## General recommendations for working with Aspire

6−1. Before making any changes always run the apphost using `aspire run` and inspect the state of resources to make sure you are building from a known state.

7−1. Changes to the _apphost.cs_ file will require a restart of the application to take effect.

8−2. Make changes incrementally and run the aspire application using the `aspire run` command to validate changes.

9−3. Use the Aspire MCP tools to check the status of resources and debug issues.

9+## AMIS 主题集成

1010

11−## Running the application

12−To run the application run the following command:

11+- 样式编写结合 AMIS 官方样式指南：https://aisuda.bce.baidu.com/amis/zh-CN/style/index

12+- 项目使用 **antd** 主题，覆盖样式使用 `.antd-*` 前缀

13+- cxd 主题样式使用 `.cxd-*` 前缀

1314

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+}

1461 ```

15−aspire run

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 { }

1690 ```

1791

18−If there is already an instance of the application running it will prompt to stop the existing instance. You only need to restart the application if code in `apphost.cs` is changed, but if you experience problems it can be useful to reset everything to the starting state.

92+### 状态类命名

1993

20−## Checking resources

21−To check the status of resources defined in the app model use the _list resources_ tool. This will show you the current state of each resource and if there are any issues. If a resource is not running as expected you can use the _execute resource command_ tool to restart it or perform other actions.

94+```css

95+.is-active { }

96+.is-checked { }

97+.is-loading { }

98+.is-error { }

99+.is-focused { }

100+.has-error { }

101+```

22102

23−## Listing integrations

24−IMPORTANT! When a user asks you to add a resource to the app model you should first use the _list integrations_ tool to get a list of the current versions of all the available integrations. You should try to use the version of the integration which aligns with the version of the Aspire.AppHost.Sdk. Some integration versions may have a preview suffix. Once you have identified the correct integration you should always use the _get integration docs_ tool to fetch the latest documentation for the integration and follow the links to get additional guidance.

103+## 动画效果

25104

26−## Debugging issues

27−IMPORTANT! Aspire is designed to capture rich logs and telemetry for all resources defined in the app model. Use the following diagnostic tools when debugging issues with the application before making changes to make sure you are focusing on the right things.

105+### 过渡动画

28106

29−1. _list structured logs_; use this tool to get details about structured logs.

30−2. _list console logs_; use this tool to get details about console logs.

31−3. _list traces_; use this tool to get details about traces.

32−4. _list trace structured logs_; use this tool to get logs related to a trace

107+动效要自然、高效，推荐使用 `cubic-bezier` 缓动函数：

33108

34−## Other Aspire MCP tools

109+```css

110+/* 标准过渡 */

111+transition: all 0.3s ease;

35112

36−1. _select apphost_; use this tool if working with multiple app hosts within a workspace.

37−2. _list apphosts_; use this tool to get details about active app hosts.

113+/* 弹性过渡 */

114+transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

38115

39−## Playwright MCP server

116+/* 回弹效果 */

117+transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

118+```

40119

41−The playwright MCP server has also been configured in this repository and you should use it to perform functional investigations of the resources defined in the app model as you work on the codebase. To get endpoints that can be used for navigation using the playwright MCP server use the list resources tool.

120+### 关键帧动画

42121

43−## Updating the app host

44−The user may request that you update the Aspire apphost. You can do this using the `aspire update` command. This will update the apphost to the latest version and some of the Aspire specific packages in referenced projects, however you may need to manually update other packages in the solution to ensure compatibility. You can consider using the `dotnet-outdated` with the users consent. To install the `dotnet-outdated` tool use the following command:

122+```css

123+/* 渐入动画 */

124+@keyframes fadeIn {

125+ from { opacity: 0; transform: translateY(20px); }

126+ to { opacity: 1; transform: translateY(0); }

127+}

45128

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+}

46145 ```

47−dotnet tool install --global dotnet-outdated-tool

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+}

48163 ```

49164

50−## Persistent containers

51−IMPORTANT! Consider avoiding persistent containers early during development to avoid creating state management issues when restarting the app.

165+## 主题系统

52166

53−## Aspire workload

54−IMPORTANT! The aspire workload is obsolete. You should never attempt to install or use the Aspire workload.

167+### 亮色/暗色主题

55168

56−## Official documentation

57−IMPORTANT! Always prefer official documentation when available. The following sites contain the official documentation for Aspire and related components

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+}

58178

59−1. https://aspire.dev

60−2. https://learn.microsoft.com/dotnet/aspire

61−3. https://nuget.org (for specific integration package details)

179+/* 强制暗色主题类 */

180+.theme-dark {

181+ --bg-color: #1f2937;

182+ --text-color: #e5e7eb;

183+}

184+```

62185

63−## BMAD AI 工作流

186+### 主题变体类

64187

65−本项目已集成 BMAD (Breakthrough Method of Agile AI-Driven Development) 完整工作流，用于结构化的软件开发生命周期管理。

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+```

66194

67−### 快速开始

195+## 响应式设计

68196

69−1. **小型任务/Bug 修复** (Quick Flow):

70− - `/quick-spec` - 创建技术规范

71− - `/quick-dev` - 实现变更

72− - `/code-review` - 代码审查

197+### 标准断点

73198

74−2. **完整功能开发** (Full Flow):

75− - `/product-brief` - 产品需求简报

76− - `/create-prd` - 创建 PRD

77− - `/create-architecture` - 架构设计

78− - `/create-epics-and-stories` - 拆分为 Epic 和 Story

79− - `/sprint-planning` - Sprint 规划

80− - `/dev-story` - 实现 Story

81− - `/code-review` - 代码审查

82− - `/retrospective` - 复盘

199+```css

200+/* 超小屏幕 (手机) */

201+@media (max-width: 480px) { }

83202

84−### 与 CodeSpirit 规范集成

203+/* 小屏幕 (大手机/小平板) */

204+@media (max-width: 768px) { }

85205

86−BMAD 工作流已配置为自动遵循 CodeSpirit 的所有开发规范（位于 `.cursor/rules/`）。在使用 BMAD 时：

206+/* 中等屏幕 (平板) */

207+@media (max-width: 992px) { }

87208

88−- PRD 会自动考虑多租户、多数据库、AI 功能等项目特性

89−- 架构设计会遵循依赖注入、缓存策略等规范

90−- Story 实现会应用正确的命名约定、DTO 设计、控制器规范等

91−- 代码审查会执行 CodeSpirit 特定的审查清单

209+/* 大屏幕 (笔记本) */

210+@media (max-width: 1200px) { }

92211

93−### 获取帮助

212+/* 超大屏幕 (桌面) */

213+@media (max-width: 1400px) { }

214+```

94215

95−任何时候，输入 `/bmad-help` 可获取上下文相关的指导。

216+### 移动优先示例

96217

97−详细使用指南请参考：

98−- **[BMAD 使用教程](Docs/bmad/bmad-tutorial.md)** - 完整的综合教程（推荐新手阅读）

99−- [BMAD 工作流指南](Docs/bmad/bmad-workflow-guide.md) - 详细的工作流使用指南

100−- [BMAD 团队培训指南](Docs/bmad/bmad-team-guide.md) - 团队培训材料

101−- [BMAD 集成技能](.cursor/skills/bmad-integration/SKILL.md) - BMAD 与 CodeSpirit 集成

102−- [项目上下文文档](project-context.md) - 项目上下文和规范引用

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+/* 主色渐变 */

323+background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);

324+

325+/* 柔和背景渐变 */

326+background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

327+

328+/* 卡片头部渐变 */

329+background: 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+