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

- 建立 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>

openspec/config.yaml

@@ -5,12 +5,12 @@ context: |
     - 纯前端展示原型项目（非功能原型），无后端交互，供内部开发人员参考UI界面使用，目标在于展示页面布局、样式和组件能力
     - 允许轻量级交互展示（如表单验证、弹框），状态展示策略：不重叠的状态通过静态数据驱动展示，重叠/覆盖类状态（弹框、下拉、抽屉等）允许简单交互切换
     - 示例数据应精心设计，展示不同的页面元素状态
-    - 新增代码要遵循原有代码的设计风格和模式
+    - 新增代码要遵循原有代码的设计风格和模式，优先考虑复用已有页面或组件的布局，优先考虑复用已有样式（src/styles）
     - 不引入UI库，使用当前SCSS样式方案
     - 使用pnpm作为包管理器，javascript作为开发语言，不引入typescript或eslint
     - 不构建测试，使用pnpm build验证打包即可，AI禁止运行pnpm dev（会挂起流程）
     - 不做性能优化，保持vite-plugin-singlefile单文件打包
     - 不做安全防御性编程，eval/dangerouslySetInnerHTML等按需使用
-    - README.md是项目的开发文档，记录代码结构和关键开发模式，优先读取获取上下文
+    - **优先阅读README.md**，README.md文档是项目的开发文档，记录代码结构和关键开发模式，优先读取获取上下文
     - 涉及页面/路由/组件/功能模块变更或技术栈调整时，同步更新README.md
     - Git提交: 仅中文; 格式为"类型: 简短描述",类型可选: feat(新功能)/fix(修复)/refactor(重构)/docs(文档)/style(格式)/test(测试)/chore(构建/工具); 多行描述空行后加详细说明; 禁创建git操作task

openspec/specs/component-library/spec.md

@@ -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` 属性

openspec/specs/design-tokens/spec.md

@@ -0,0 +1,62 @@
+## ADDED Requirements
+
+### Requirement: 颜色令牌定义
+设计系统 SHALL 提供统一的颜色令牌，包括品牌色、功能色、中性色、背景色、边框色。
+
+#### Scenario: 品牌色使用
+- **WHEN** 开发者需要应用主色调
+- **THEN** 系统 SHALL 提供 `--color-primary`、`--color-primary-light`、`--color-primary-dark` 等变量
+
+#### Scenario: 功能色使用
+- **WHEN** 开发者需要表示状态（成功、警告、错误）
+- **THEN** 系统 SHALL 提供 `--color-success`、`--color-warning`、`--color-danger` 及其浅色变体
+
+#### Scenario: 中性色使用
+- **WHEN** 开发者需要文本、边框、背景色
+- **THEN** 系统 SHALL 提供 `--color-text-1` 到 `--color-text-4`、`--color-border-1` 到 `--color-border-3`、`--color-bg-1` 到 `--color-bg-4`
+
+### Requirement: 间距令牌定义
+设计系统 SHALL 提供统一的间距令牌，基于 4px 基数网格。
+
+#### Scenario: 间距应用
+- **WHEN** 开发者需要设置 margin、padding、gap
+- **THEN** 系统 SHALL 提供标准化的间距值（4, 8, 12, 16, 20, 24, 32, 40, 48px）
+
+### Requirement: 阴影令牌定义
+设计系统 SHALL 提供统一的阴影令牌，用于表达层级和深度。
+
+#### Scenario: 阴影应用
+- **WHEN** 开发者需要为卡片、弹窗、下拉菜单添加阴影
+- **THEN** 系统 SHALL 提供 `--shadow-1`、`--shadow-2`、`--shadow-3`、`--shadow-card` 四级阴影
+
+### Requirement: 圆角令牌定义
+设计系统 SHALL 提供统一的圆角令牌。
+
+#### Scenario: 圆角应用
+- **WHEN** 开发者需要设置组件圆角
+- **THEN** 系统 SHALL 提供 `--radius-sm`（6px）、`--radius-md`（8px）、`--radius-lg`（12px）、`--radius-xl`（16px）
+
+### Requirement: 过渡动画令牌定义
+设计系统 SHALL 提供统一的过渡动画参数。
+
+#### Scenario: 过渡动画应用
+- **WHEN** 开发者需要为交互状态添加过渡效果
+- **THEN** 系统 SHALL 提供 `--transition` 标准过渡参数（0.2s cubic-bezier(0.4, 0, 0.2, 1)）
+
+### Requirement: 布局尺寸令牌定义
+设计系统 SHALL 提供统一的布局尺寸令牌。
+
+#### Scenario: 布局尺寸应用
+- **WHEN** 开发者需要设置侧边栏宽度、顶部栏高度
+- **THEN** 系统 SHALL 提供 `--sidebar-width`、`--header-height` 等变量
+
+### Requirement: SCSS 变量与 CSS 变量映射
+设计系统 SHALL 同时提供 SCSS 变量和 CSS 变量，满足不同场景需求。
+
+#### Scenario: 编译时使用
+- **WHEN** 开发者在 SCSS 中需要引用变量
+- **THEN** 系统 SHALL 提供 `$primary`、`$spacing-4` 等 SCSS 变量
+
+#### Scenario: 运行时使用
+- **WHEN** 开发者需要在运行时动态获取变量值
+- **THEN** 系统 SHALL 在 `:root` 中定义对应的 CSS 自定义属性

openspec/specs/layout-system/spec.md

@@ -0,0 +1,90 @@
+## ADDED Requirements
+
+### Requirement: 应用外壳布局
+布局系统 SHALL 提供应用级外壳布局，包含侧边栏、顶部栏、主内容区。
+
+#### Scenario: 基础应用布局
+- **WHEN** 开发者需要管理控制台布局
+- **THEN** 系统 SHALL 提供 `.app-shell` 类，包含 `.app-shell__sidebar`、`.app-shell__header`、`.app-shell__main` 区域
+
+#### Scenario: 侧边栏结构
+- **WHEN** 侧边栏需要品牌区、导航区、用户区
+- **THEN** 系统 SHALL 提供 `.sidebar__brand`、`.sidebar__nav`、`.sidebar__user` 元素类
+
+#### Scenario: 导航项
+- **WHEN** 侧边栏需要导航菜单
+- **THEN** 系统 SHALL 提供 `.nav-item` 类和 `.nav-item--active` 状态类
+
+#### 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__text` 和 `.nav-item__meta` 元素类
+
+#### Scenario: 顶部栏结构
+- **WHEN** 顶部栏需要左侧标题区和右侧操作区
+- **THEN** 系统 SHALL 提供 `.header__left`、`.header__right` 元素类
+
+### Requirement: 聊天页面布局
+布局系统 SHALL 提供聊天页面专用布局。
+
+#### Scenario: 聊天布局容器
+- **WHEN** 开发者需要聊天界面布局
+- **THEN** 系统 SHALL 提供 `.chat-layout` 类，包含 `.chat-layout__header`、`.chat-layout__sidebar`、`.chat-layout__content`
+
+#### Scenario: 会话列表
+- **WHEN** 侧边栏需要展示会话列表
+- **THEN** 系统 SHALL 提供 `.conversation-list` 容器和 `.conversation-item` 项类
+
+#### Scenario: 聊天内容区
+- **WHEN** 需要展示消息和输入区
+- **THEN** 系统 SHALL 提供 `.chat-content__messages` 和 `.chat-content__input` 区域
+
+### Requirement: 管理台布局
+布局系统 SHALL 提供管理台页面布局。
+
+#### Scenario: 管理台侧边栏
+- **WHEN** 管理台需要独立导航结构
+- **THEN** 系统 SHALL 提供 `.admin-layout` 类，包含 `.admin-layout__sidebar` 和 `.admin-layout__content`
+
+### Requirement: 页面内容区
+布局系统 SHALL 提供标准化的页面内容容器。
+
+#### Scenario: 标准页面内容
+- **WHEN** 页面需要标准内边距和滚动
+- **THEN** 系统 SHALL 提供 `.page-content` 类，包含标准 padding 和 overflow 设置
+
+#### Scenario: 全宽页面内容
+- **WHEN** 页面需要无内边距全宽布局
+- **THEN** 系统 SHALL 提供 `.page-content--full` 修饰符
+
+### Requirement: 搜索栏布局
+布局系统 SHALL 提供搜索过滤区域布局。
+
+#### Scenario: 搜索表单
+- **WHEN** 列表页面需要搜索过滤
+- **THEN** 系统 SHALL 提供 `.search-bar` 类，支持多列网格布局
+
+### Requirement: 统计卡片网格
+布局系统 SHALL 提供统计数据展示网格。
+
+#### Scenario: 统计展示
+- **WHEN** 概览页面需要展示关键指标
+- **THEN** 系统 SHALL 提供 `.stats-grid` 和 `.stat-card` 类
+
+### Requirement: 响应式断点
+布局系统 SHALL 提供响应式布局支持。
+
+#### Scenario: 移动端适配
+- **WHEN** 屏幕宽度小于 768px
+- **THEN** 系统 SHALL 隐藏侧边栏（可通过 `.sidebar--open` 手动展开）、调整网格为单列、减小间距
+
+#### Scenario: 侧边栏遮罩
+- **WHEN** 移动端侧边栏展开时
+- **THEN** 系统 SHALL 显示 `.sidebar__overlay` 遮罩层，点击可关闭侧边栏