lanyuanxiaoyao/GrandClaw-prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构样式系统为五层分层架构

Browse Source 
- 建立 tokens/core/layouts/components/pages 五层样式架构
- 所有组件采用 BEM 命名规范（.block__element--modifier）
- 16 个组件目录，每个组件独立 _index.scss
- 清理表格操作列内联样式，统一使用 .col-actions/.table-actions
- 更新 README 样式开发规范文档
- 同步 3 个 delta spec 到主 specs

Co-Authored-By: opencode <noreply@opencode.ai>
This commit is contained in:
兰缘小妖
2026-03-26 14:14:52 +08:00
parent b00d75de8a
commit f1d5e77285
61 changed files with 4796 additions and 4277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
openspec/specs/component-library/spec.md Normal file
View File

@@ -0,0 +1,238 @@
## ADDED Requirements
### Requirement: 按钮组件
组件库 SHALL 提供完整的按钮组件系统，支持多种变体和尺寸。
#### Scenario: 基础按钮
- **WHEN** 开发者需要标准按钮
- **THEN** 系统 SHALL 提供 `.btn` 类，包含基础样式（flex布局、居中、间距、过渡动画）
#### Scenario: 颜色变体
- **WHEN** 开发者需要不同用途的按钮
- **THEN** 系统 SHALL 提供 `.btn--primary`、`.btn--success`、`.btn--danger`、`.btn--warning`、`.btn--ghost` 等变体
#### Scenario: 尺寸变体
- **WHEN** 开发者需要不同大小的按钮
- **THEN** 系统 SHALL 提供 `.btn--sm`、`.btn--lg` 尺寸变体
#### Scenario: 图标按钮
- **WHEN** 开发者需要仅含图标的按钮
- **THEN** 系统 SHALL 提供 `.btn--icon-only` 修饰符
#### Scenario: 块级按钮
- **WHEN** 开发者需要宽度占满的按钮
- **THEN** 系统 SHALL 提供 `.btn--block` 修饰符
#### Scenario: 加载状态
- **WHEN** 按钮处于加载中状态
- **THEN** 系统 SHALL 提供 `.btn--loading` 修饰符，显示加载动画并禁用点击
### Requirement: 卡片组件
组件库 SHALL 提供卡片容器组件。
#### Scenario: 基础卡片
- **WHEN** 开发者需要内容容器
- **THEN** 系统 SHALL 提供 `.card` 类，包含背景、边框、圆角、阴影
#### Scenario: 卡片区块
- **WHEN** 卡片需要头部、主体、底部结构
- **THEN** 系统 SHALL 提供 `.card__header`、`.card__body`、`.card__footer` 元素类
#### Scenario: 卡片变体
- **WHEN** 开发者需要不同视觉风格的卡片
- **THEN** 系统 SHALL 提供 `.card--flat`（无阴影）、`.card--elevated`（高阴影）等变体
### Requirement: 表格组件
组件库 SHALL 提供数据表格组件。
#### Scenario: 基础表格
- **WHEN** 开发者需要展示数据列表
- **THEN** 系统 SHALL 提供 `.table` 类，包含表头、行、单元格样式
#### Scenario: 表格包装器
- **WHEN** 表格需要横向滚动
- **THEN** 系统 SHALL 提供 `.table__wrapper` 类，处理溢出和滚动
#### Scenario: 行悬停效果
- **WHEN** 表格需要行悬停反馈
- **THEN** 系统 SHALL 在 `.table tbody tr` 上提供悬停背景色变化
### Requirement: 表单组件
组件库 SHALL 提供表单元素组件。
#### Scenario: 表单组
- **WHEN** 开发者需要将标签和输入框组合
- **THEN** 系统 SHALL 提供 `.form-group` 类，设置间距
#### Scenario: 标签
- **WHEN** 表单需要字段标签
- **THEN** 系统 SHALL 提供 `.form__label` 类，包含必填标记样式
#### Scenario: 输入框
- **WHEN** 开发者需要文本输入
- **THEN** 系统 SHALL 提供 `.form__input` 类，包含聚焦、错误状态样式
#### Scenario: 表单行
- **WHEN** 表单项需要横向排列
- **THEN** 系统 SHALL 提供 `.form__row` 和 `.form__col` 类
### Requirement: 状态标签组件
组件库 SHALL 提供状态指示标签。
#### Scenario: 状态展示
- **WHEN** 开发者需要展示运行/停止/错误等状态
- **THEN** 系统 SHALL 提供 `.tag` 类和 `.tag--running`、`.tag--stopped`、`.tag--error`、`.tag--warning` 等变体
#### Scenario: 角色标签
- **WHEN** 开发者需要展示用户角色
- **THEN** 系统 SHALL 提供 `.tag--admin`、`.tag--member`、`.tag--developer` 等变体
### Requirement: 弹窗组件
组件库 SHALL 提供模态弹窗组件。
#### Scenario: 弹窗容器
- **WHEN** 开发者需要显示模态弹窗
- **THEN** 系统 SHALL 提供 `.modal` 和 `.modal__overlay` 类
#### Scenario: 弹窗结构
- **WHEN** 弹窗需要标题、内容、操作区
- **THEN** 系统 SHALL 提供 `.modal__header`、`.modal__body`、`.modal__footer` 元素类
### Requirement: 提示组件
组件库 SHALL 提供 Toast 提示组件。
#### Scenario: 提示消息
- **WHEN** 开发者需要显示操作反馈
- **THEN** 系统 SHALL 提供 `.toast` 类和 `.toast--success`、`.toast--error`、`.toast--warning`、`.toast--info` 等变体
### Requirement: 分页组件
组件库 SHALL 提供分页导航组件。
#### Scenario: 分页导航
- **WHEN** 列表需要分页
- **THEN** 系统 SHALL 提供 `.pagination` 类和 `.pagination__item`、`.pagination__item--active` 元素类
### Requirement: 空状态组件
组件库 SHALL 提供空状态展示组件。
#### Scenario: 无数据展示
- **WHEN** 列表或页面无数据时
- **THEN** 系统 SHALL 提供 `.empty-state` 类，包含图标、文字、可选操作按钮区域
### Requirement: 开关组件
组件库 SHALL 提供切换开关组件。
#### Scenario: 布尔切换
- **WHEN** 开发者需要开关控件
- **THEN** 系统 SHALL 提供 `.switch` 类，包含滑块和选中状态样式
### Requirement: 技能卡片组件
组件库 SHALL 提供技能展示专用卡片。
#### Scenario: 技能展示
- **WHEN** 工作台需要展示技能列表
- **THEN** 系统 SHALL 提供 `.skill-card` 类，包含图标区、信息区、统计区布局
### Requirement: 导航项组件
组件库 SHALL 提供统一的侧边栏导航项组件。
#### Scenario: 导航菜单
- **WHEN** 侧边栏需要导航菜单项
- **THEN** 系统 SHALL 提供 `.nav-item` 类，统一替换 `.menu-item`、`.chat-nav-item`、`.admin-nav-item`
#### Scenario: 导航图标
- **WHEN** 导航项需要图标
- **THEN** 系统 SHALL 提供 `.nav-item__icon` 元素类
#### Scenario: 激活状态
- **WHEN** 导航项需要显示激活状态
- **THEN** 系统 SHALL 提供 `.nav-item--active` 修饰符类
### Requirement: 详情页头部组件
组件库 SHALL 提供详情页头部布局组件。
#### Scenario: 详情头部布局
- **WHEN** 详情页需要展示标题、图标、标签、统计
- **THEN** 系统 SHALL 提供 `.detail-header` 类，替换内联样式 `display: flex; gap: 20px; align-items: flex-start`
#### Scenario: 详情图标
- **WHEN** 详情头部需要大图标
- **THEN** 系统 SHALL 提供 `.detail-header__icon` 元素类
#### Scenario: 详情标签组
- **WHEN** 详情头部需要展示标签
- **THEN** 系统 SHALL 提供 `.detail-tags` 类，替换内联样式
#### Scenario: 详情统计
- **WHEN** 详情头部需要展示统计信息
- **THEN** 系统 SHALL 提供 `.detail-stats` 类，替换内联样式
### Requirement: 文件列表组件
组件库 SHALL 提供文件列表展示组件。
#### Scenario: 文件列表项
- **WHEN** 详情页需要展示文件列表
- **THEN** 系统 SHALL 提供 `.file-list__item` 类，包含图标、文件名、文件大小布局
#### Scenario: 文件图标
- **WHEN** 文件项需要类型图标
- **THEN** 系统 SHALL 提供 `.file-list__icon` 元素类
#### Scenario: 文件信息
- **WHEN** 文件项需要展示名称和大小
- **THEN** 系统 SHALL 提供 `.file-list__info`、`.file-list__name`、`.file-list__size` 元素类
### Requirement: 版本列表组件
组件库 SHALL 提供版本历史列表组件。
#### Scenario: 版本列表项
- **WHEN** 详情页需要展示版本历史
- **THEN** 系统 SHALL 提供 `.version-list__item` 类，包含版本号、描述、日期布局
#### Scenario: 版本标签
- **WHEN** 需要标记当前版本
- **THEN** 系统 SHALL 提供 `.version-list__tag` 和 `.version-list__tag--current` 类
### Requirement: 返回按钮组件
组件库 SHALL 提供统一的返回按钮样式。
#### Scenario: 返回按钮
- **WHEN** 详情页需要返回按钮
- **THEN** 系统 SHALL 提供 `.back-btn` 类，替换内联样式 `display: inline-flex; align-items: center; gap: 6px; color: #3B82F6`
### Requirement: 表单提示组件
组件库 SHALL 提供表单辅助提示样式。
#### Scenario: 表单提示文字
- **WHEN** 表单字段需要辅助说明
- **THEN** 系统 SHALL 提供 `.form__hint` 类，替换内联样式 `font-size: 12px; color: #6B7280; margin-top: 4px`
### Requirement: 密码输入框组件
组件库 SHALL 提供密码输入框组件，支持显示/隐藏切换功能。
#### Scenario: 基础密码输入框
- **WHEN** 表单需要密码输入
- **THEN** 系统 SHALL 提供 `type="password"` 的 `.form__input` 输入框
#### Scenario: 带切换的密码输入框
- **WHEN** 表单需要密码输入并支持显示/隐藏切换
- **THEN** 系统 SHALL 提供 `.password-input` 容器，包含 `.form__input` 和 `.password-toggle` 按钮
#### Scenario: 切换按钮样式
- **WHEN** 用户需要切换密码可见性
- **THEN** 系统 SHALL 提供 `.password-toggle` 类，定位在输入框右侧，包含眼睛图标
#### Scenario: 输入框错误状态
- **WHEN** 密码验证失败
- **THEN** 系统 SHALL 提供 `.form__input--error` 修饰符，输入框边框变红，并通过 `.form__error` 显示错误提示
### Requirement: 类名规范检查
组件库 SHALL 确保所有样式类名符合 BEM 规范，无分散的内联样式。
#### Scenario: BEM 命名验证
- **WHEN** 检查组件类名
- **THEN** 所有类名 SHALL 遵循 `.block__element--modifier` 格式
#### Scenario: 分散样式收拢
- **WHEN** 检查 HTML/JSX 文件
- **THEN** 所有样式定义 SHALL 集中在样式文件中，无独立 `<style>` 标签或内联 `style` 属性