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/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` 遮罩层，点击可关闭侧边栏