feat: 统一三端账号管理页面

- 新增共享账号管理组件 src/components/account/AccountPage.jsx - 管理台新增账号管理入口（修复 SidebarUser onClick） - 开发台使用共享组件替换占位符页面 - 扩展 api.user 支持 updateProfile 和 changePassword - 新增 account-management 规格文件 - 更新 page-navigation 规格文件
refactor: 统一二级页面返回按钮样式
2026-03-26 19:33:58 +08:00 · 2026-03-26 18:10:08 +08:00 · 2026-03-26 15:00:32 +08:00 · 2026-03-26 14:14:52 +08:00 · 2026-03-26 11:14:42 +08:00
87 changed files with 5894 additions and 4796 deletions
--- a/README.md
+++ b/README.md
--- a/openspec/config.yaml
+++ b/openspec/config.yaml
@@ -5,11 +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
--- a/openspec/specs/account-management/spec.md
+++ b/openspec/specs/account-management/spec.md
@@ -0,0 +1,93 @@
+# Capability: 账号管理
+
+提供账号管理功能，允许用户查看和编辑个人信息、修改密码。
+
+## Purpose
+
+账号管理页面允许当前登录用户管理自己的个人信息，包括查看账号信息、编辑基本信息、修改密码。三端（工作台、管理台、开发台）共享同一个账号管理组件。
+
+## Requirements
+
+### Requirement: 账号信息展示
+
+系统 SHALL 在账号管理页面展示当前登录用户的账号信息，包括头像、用户名、姓名、邮箱、手机号、所属部门。
+
+#### Scenario: 展示用户头像
+- **WHEN** 用户进入账号管理页面
+- **THEN** 系统显示用户头像（首字母）
+- **AND** 头像使用渐变背景色
+
+#### Scenario: 展示基本信息
+- **WHEN** 用户进入账号管理页面
+- **THEN** 系统显示用户名、姓名、邮箱、手机号、所属部门
+- **AND** 用户名字段为只读状态
+- **AND** 所属部门字段为只读状态
+
+### Requirement: 编辑基本信息
+
+系统 SHALL 允许用户编辑姓名、邮箱、手机号等可修改的基本信息。
+
+#### Scenario: 编辑姓名
+- **WHEN** 用户修改姓名字段
+- **THEN** 输入框可编辑
+- **AND** 点击保存按钮后显示保存成功提示
+
+#### Scenario: 编辑邮箱
+- **WHEN** 用户修改邮箱字段
+- **THEN** 输入框可编辑
+- **AND** 点击保存按钮后显示保存成功提示
+
+#### Scenario: 编辑手机号
+- **WHEN** 用户修改手机号字段
+- **THEN** 输入框可编辑
+- **AND** 点击保存按钮后显示保存成功提示
+
+#### Scenario: 保存成功提示
+- **WHEN** 用户点击"保存修改"按钮
+- **THEN** 系统显示 Toast 提示"保存成功"
+- **AND** Toast 在 3 秒后自动消失
+
+### Requirement: 修改密码
+
+系统 SHALL 允许用户通过输入当前密码和新密码来修改登录密码。
+
+#### Scenario: 显示修改密码表单
+- **WHEN** 用户进入账号管理页面
+- **THEN** 系统显示修改密码卡片
+- **AND** 包含当前密码、新密码、确认密码三个输入框
+
+#### Scenario: 密码验证 - 当前密码为空
+- **WHEN** 用户未输入当前密码
+- **AND** 用户点击"更新密码"按钮
+- **THEN** 系统显示错误提示"请输入当前密码"
+
+#### Scenario: 密码验证 - 新密码为空
+- **WHEN** 用户未输入新密码
+- **AND** 用户点击"更新密码"按钮
+- **THEN** 系统显示错误提示"请输入新密码"
+
+#### Scenario: 密码验证 - 确认密码为空
+- **WHEN** 用户未输入确认密码
+- **AND** 用户点击"更新密码"按钮
+- **THEN** 系统显示错误提示"请再次输入新密码"
+
+#### Scenario: 密码验证 - 两次密码不一致
+- **WHEN** 用户输入的新密码与确认密码不一致
+- **AND** 用户点击"更新密码"按钮
+- **THEN** 系统显示错误提示"两次输入的密码不一致"
+
+### Requirement: 三端统一入口
+
+系统 SHALL 在工作台、管理台、开发台的侧边栏用户信息区域提供账号管理入口。
+
+#### Scenario: 工作台入口
+- **WHEN** 用户在工作台点击侧边栏用户信息区域
+- **THEN** 系统导航到账号管理页面
+
+#### Scenario: 管理台入口
+- **WHEN** 用户在管理台点击侧边栏用户信息区域
+- **THEN** 系统导航到账号管理页面
+
+#### Scenario: 开发台入口
+- **WHEN** 用户在开发台点击侧边栏用户信息区域
+- **THEN** 系统导航到账号管理页面
--- a/openspec/specs/admin-model-config/spec.md
+++ b/openspec/specs/admin-model-config/spec.md
@@ -0,0 +1,115 @@
+## Purpose
+
+管理台模型配置管理功能，支持管理员管理多组 AI 模型接入配置，并可选择其中一组作为平台默认配置生效。
+
+## Requirements
+
+### Requirement: 配置列表展示
+系统 SHALL 在管理台展示模型配置列表，包括当前生效配置卡片和所有配置表格。
+
+#### Scenario: 查看配置列表页
+- **WHEN** 管理员进入模型配置管理页面
+- **THEN** 系统展示当前生效配置卡片（包含名称、类型、关键信息）
+- **AND** 系统展示配置列表表格（包含名称、类型、关键信息摘要、状态、操作按钮）
+
+#### Scenario: 区分配置状态
+- **WHEN** 配置列表中有多个配置
+- **THEN** 当前生效配置在表格中显示"生效中"状态标签
+- **AND** 其他配置显示"未生效"状态标签
+
+### Requirement: 设为默认配置
+系统 SHALL 允许管理员将非生效配置设为平台默认配置，操作需二次确认。
+
+#### Scenario: 成功切换默认配置
+- **WHEN** 管理员点击某未生效配置的"设为默认"按钮
+- **THEN** 系统显示二次确认弹窗
+- **AND** 管理员确认后，该配置变为生效状态
+- **AND** 原生效配置变为未生效状态
+
+#### Scenario: 取消切换默认配置
+- **WHEN** 管理员点击"设为默认"按钮后
+- **AND** 在二次确认弹窗中点击取消
+- **THEN** 系统关闭弹窗，配置状态保持不变
+
+### Requirement: 删除配置
+系统 SHALL 允许管理员删除非生效的配置，删除前需二次确认。
+
+#### Scenario: 成功删除配置
+- **WHEN** 管理员点击某未生效配置的"删除"按钮
+- **THEN** 系统显示二次确认弹窗
+- **AND** 管理员确认后，该配置从列表中移除
+
+#### Scenario: 无法删除生效配置
+- **WHEN** 某配置是当前生效配置
+- **THEN** 其删除按钮被禁用
+- **AND** 鼠标悬停时显示提示"生效中的配置不可删除"
+
+### Requirement: 新增配置
+系统 SHALL 提供独立页面供管理员新增模型配置，支持选择配置类型并填写对应字段。
+
+#### Scenario: 成功新增基础类型配置
+- **WHEN** 管理员点击"新增配置"按钮进入新增页面
+- **AND** 选择配置类型为"OpenAI 兼容接口"
+- **AND** 填写配置名称、API 地址、API 密钥、模型名称
+- **AND** 填写常用参数（Temperature、Max Tokens、Top P）
+- **AND** 点击保存
+- **THEN** 系统创建新配置并返回列表页
+- **AND** 新配置默认状态为"未生效"
+
+#### Scenario: 成功新增智算平台配置
+- **WHEN** 管理员在新增页面选择配置类型为"智算管理平台"
+- **THEN** 表单动态切换为智算平台字段（API 地址、App ID、App Secret）
+- **AND** 管理员填写完成后保存
+- **THEN** 系统创建新配置并返回列表页
+
+#### Scenario: 新增时切换类型清空字段
+- **WHEN** 管理员在新增页面已填写某类型的部分字段
+- **AND** 切换配置类型为另一种类型
+- **THEN** 系统清空已填写的类型特定字段
+- **AND** 保留通用字段（配置名称）
+
+#### Scenario: 新增配置表单验证失败
+- **WHEN** 管理员提交表单时未填写必填项
+- **THEN** 系统高亮显示未填写的必填字段
+- **AND** 阻止表单提交
+
+### Requirement: 编辑配置
+系统 SHALL 提供独立页面供管理员编辑现有配置，仅允许编辑非生效配置。
+
+#### Scenario: 成功编辑配置
+- **WHEN** 管理员点击某未生效配置的"编辑"按钮
+- **THEN** 系统进入编辑页面，预填充该配置的当前值
+- **AND** 配置类型字段显示为只读
+- **AND** 管理员修改其他字段后保存
+- **THEN** 系统更新配置并返回列表页
+
+#### Scenario: 无法编辑生效配置
+- **WHEN** 某配置是当前生效配置
+- **THEN** 其编辑按钮被禁用
+- **AND** 鼠标悬停时显示提示"生效中的配置不可编辑"
+
+#### Scenario: 编辑时类型字段只读
+- **WHEN** 管理员在编辑配置页面
+- **THEN** 配置类型选择器被禁用
+- **AND** 显示提示"配置类型不可修改"
+
+### Requirement: 配置类型注册表
+系统 SHALL 使用可扩展的注册表机制定义配置类型，每种类型包含独立的字段定义和验证规则。
+
+#### Scenario: 扩展新配置类型
+- **WHEN** 需要添加新的配置类型（如"阿里云百炼"）
+- **THEN** 开发者只需在注册表中添加类型定义
+- **AND** 无需修改配置表单页面的核心逻辑
+- **AND** 新类型自动在类型选择器和表单中生效
+
+### Requirement: 密钥字段掩码显示
+系统 SHALL 对所有敏感字段（API 密钥、App Secret 等）使用掩码显示。
+
+#### Scenario: 列表页密钥掩码
+- **WHEN** 配置列表展示配置信息
+- **THEN** API 密钥、App Secret 字段显示为掩码格式（如"sk-****xxxx"）
+
+#### Scenario: 表单页密钥掩码
+- **WHEN** 编辑配置时表单显示已保存的密钥
+- **THEN** 密钥输入框显示为掩码格式
+- **AND** 管理员可点击显示/隐藏按钮切换明文/密文
--- a/openspec/specs/component-library/spec.md
+++ b/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` 属性
--- a/openspec/specs/design-tokens/spec.md
+++ b/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 自定义属性
--- a/openspec/specs/layout-system/spec.md
+++ b/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` 遮罩层，点击可关闭侧边栏
--- a/openspec/specs/page-navigation/spec.md
+++ b/openspec/specs/page-navigation/spec.md
@@ -0,0 +1,80 @@
+# Capability: 页面导航返回按钮
+
+提供统一的二级页面返回按钮样式规范，确保用户界面一致性。
+
+### Requirement: 二级页面返回按钮样式统一
+
+所有二级页面必须使用统一的 `page-back-btn` 样式类名作为返回按钮。
+
+#### Scenario: 返回按钮位于页面左上角
+- **WHEN** 用户访问任意二级页面
+- **THEN** 返回按钮显示在页面内容区左上角
+- **AND** 返回按钮使用 `page-back-btn` 类名
+
+#### Scenario: 返回按钮样式一致性
+- **WHEN** 用户查看返回按钮
+- **THEN** 按钮显示为蓝色主题色文字
+- **AND** 按钮带有左箭头图标
+- **AND** 文字为粗体
+- **AND** 与上级页面名称关联（如"返回技能市场"）
+
+### Requirement: 表单页面按钮组合完整
+
+表单类二级页面必须同时具有左上角返回按钮和底部取消按钮。
+
+#### Scenario: 表单页面包含返回和取消按钮
+- **WHEN** 用户访问表单类二级页面（如新增、编辑页面）
+- **THEN** 页面左上角显示返回按钮
+- **AND** 页面底部显示"取消"和"确定/保存"按钮组合
+
+#### Scenario: 点击返回按钮返回上级
+- **WHEN** 用户点击左上角返回按钮
+- **THEN** 页面返回至上级页面
+- **AND** 不触发任何保存操作
+
+#### Scenario: 点击取消按钮返回上级
+- **WHEN** 用户点击底部取消按钮
+- **THEN** 页面返回至上级页面
+- **AND** 不触发任何保存操作
+
+### Requirement: 详情页面仅保留返回按钮
+
+只读详情类二级页面仅需左上角返回按钮，无需底部取消按钮。
+
+#### Scenario: 详情页返回按钮
+- **WHEN** 用户访问详情类二级页面（如任务详情、审核详情）
+- **THEN** 页面左上角显示返回按钮
+- **AND** 页面底部不显示取消按钮
+
+### Requirement: 废弃旧样式类名
+
+`dev-back-btn` 和 `console-back-btn` 样式类名不再使用，全部替换为 `page-back-btn`。
+
+#### Scenario: 样式类名替换
+- **WHEN** 代码中使用返回按钮
+- **THEN** 必须使用 `page-back-btn` 类名
+- **AND** 不再使用 `dev-back-btn` 或 `console-back-btn`
+
+### Requirement: 样式定义位置
+
+`page-back-btn` 样式定义在组件样式层，而非页面样式层。
+
+#### Scenario: 样式文件位置
+- **WHEN** 开发者查找返回按钮样式定义
+- **THEN** 样式定义位于 `src/styles/components/_index.scss`
+- **AND** 不位于任何页面级样式文件
+
+### Requirement: 管理台账号管理页面导航
+
+管理台 SHALL 在页面配置中包含账号管理页面配置。
+
+#### Scenario: 管理台页面配置
+- **WHEN** 用户查看管理台页面配置
+- **THEN** 系统包含 account 页面配置
+- **AND** account 页面标题为"账号管理"
+- **AND** account 页面图标为 FiUser
+
+#### Scenario: 管理台侧边栏用户点击
+- **WHEN** 用户在管理台侧边栏点击用户信息区域
+- **THEN** 系统导航到账号管理页面
+- **AND** 页面标题显示为"账号管理"
--- a/src/components/account/AccountPage.jsx
+++ b/src/components/account/AccountPage.jsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
-import Toast from '../../components/common/Toast.jsx';
+import { useUserContext } from '../../contexts/UserContext.jsx';
+import Toast from '../common/Toast.jsx';

 function AccountPage() {
+    const { user } = useUserContext();
    const [profileToast, setProfileToast] = useState(null);
    const [passwordErrors, setPasswordErrors] = useState({});
    const [passwordForm, setPasswordForm] = useState({
@@ -43,7 +45,6 @@ function AccountPage() {
                    <div className="card-title">账号信息</div>
                </div>
                <div className="card-body">
-                    {/* 头像区域 */}
                    <div style={{ textAlign: 'center', marginBottom: '24px', paddingBottom: '24px', borderBottom: '1px solid var(--color-border-2)' }}>
                        <div style={{
                            width: '100px',
@@ -56,10 +57,9 @@ function AccountPage() {
                            color: '#fff',
                            fontSize: '36px',
                            margin: '0 auto 12px'
-                        }}>张</div>
+                        }}>{user.avatar}</div>
                        <button className="btn btn-sm">更换头像</button>
                    </div>
-                    {/* 表单区域 */}
                    <div className="form-row">
                        <div className="form-col">
                            <div className="form-group">
@@ -70,7 +70,7 @@ function AccountPage() {
                        <div className="form-col">
                            <div className="form-group">
                                <label className="form-label">姓名</label>
-                                <input type="text" className="form-control" defaultValue="张三" />
+                                <input type="text" className="form-control" defaultValue={user.name} />
                            </div>
                        </div>
                    </div>
@@ -90,7 +90,7 @@ function AccountPage() {
                    </div>
                    <div className="form-group">
                        <label className="form-label">所属部门</label>
-                        <input type="text" className="form-control" defaultValue="AI 产品部" readOnly style={{ background: '#F8FAFC' }} />
+                        <input type="text" className="form-control" defaultValue={user.role} readOnly style={{ background: '#F8FAFC' }} />
                    </div>
                    <button className="btn btn-primary" onClick={handleProfileSave}>保存修改</button>
                </div>
@@ -152,4 +152,4 @@ function AccountPage() {
    );
 }

-export default AccountPage;
+export default AccountPage;
--- a/src/components/account/index.js
+++ b/src/components/account/index.js
@@ -0,0 +1,2 @@
+export { default as AccountPage } from './AccountPage.jsx';
+export { default } from './AccountPage.jsx';
--- a/src/constants/pages.js
+++ b/src/constants/pages.js
@@ -7,6 +7,8 @@ export const CONSOLE_PAGES = {
  chat: { title: '智能助手', icon: 'FiMessageSquare' },
  skills: { title: '技能市场', icon: 'FaPuzzlePiece' },
  skillDetail: { title: '技能详情', icon: null },
+  mySkills: { title: '我的技能', icon: 'FiBox' },
+  skillConfig: { title: '技能配置', icon: null },
  logs: { title: '日志查询', icon: 'FiList' },
  scheduledTasks: { title: '定时任务', icon: 'FiClock' },
  taskDetail: { title: '任务详情', icon: null },
@@ -24,12 +26,15 @@ export const ADMIN_PAGES = {
  departments: { title: '部门管理', icon: 'FiBarChart2' },
  users: { title: '用户管理', icon: 'FiUsers' },
  projects: { title: '项目管理', icon: 'FiList' },
+  modelConfigs: { title: '模型配置', icon: 'FiSettings' },
  adminLogs: { title: '日志查询', icon: 'FiActivity' },
  reviewList: { title: '审核管理', icon: 'FiCheckCircle' },
  reviewDetail: { title: '审核详情', icon: null },
  addDepartment: { title: '新增部门', icon: null },
  addUser: { title: '新增用户', icon: null },
  addProject: { title: '新增项目', icon: null },
+  addModelConfig: { title: '新增配置', icon: null },
+  account: { title: '账号管理', icon: 'FiUser' },
 };

 /**
@@ -41,7 +46,7 @@ export const DEVELOPER_PAGES = {
  uploadSkill: { title: '创建技能', icon: 'FiPlus' },
  newVersion: { title: '上传新版本', icon: null },
  devDocs: { title: '开发文档', icon: 'FiTerminal' },
-  devAccount: { title: '开发者设置', icon: 'FiSettings' },
+  devAccount: { title: '账号管理', icon: 'FiSettings' },
  skillEditor: { title: '技能详情', icon: null },
 };

--- a/src/constants/storageKeys.js
+++ b/src/constants/storageKeys.js
@@ -13,6 +13,7 @@ export const CONSOLE_KEYS = {
 */
 export const ADMIN_KEYS = {
  CURRENT_PAGE: 'admin_currentPage',
+  MODEL_CONFIG_EDIT_DATA: 'admin_modelConfigEditData',
 };

 /**
--- a/src/data/adminData.js
+++ b/src/data/adminData.js
@@ -52,6 +52,8 @@ export const adminOverview = {
 };

 export const adminLogs = [
+    { time: '2026-03-26 15:30:22', user: '管理员', department: '系统管理部', type: '配置变更', action: '切换默认模型配置', status: '成功', detail: '从"智算平台生产环境"切换至"阿里云百炼主账号"' },
+    { time: '2026-03-26 10:15:33', user: '张三', department: 'AI 产品部', type: '配置变更', action: '新增模型配置', status: '成功', detail: '新增配置"智算平台测试环境"' },
    { time: '2026-03-19 16:42:33', user: '张三', department: 'AI 产品部', type: '实例操作', action: '启动实例', status: '成功', detail: '实例 teleclaw-zhangsan 启动成功' },
    { time: '2026-03-19 15:28:17', user: '张三', department: 'AI 产品部', type: '技能', action: '调用 代码生成助手', status: '成功', detail: 'Token 消耗: 1,234' },
    { time: '2026-03-19 14:55:02', user: '李四', department: '技术研发部', type: '文件上传', action: '上传数据文件', status: '成功', detail: '文件 sales_2026_q1.xlsx 上传完成' },
@@ -86,3 +88,65 @@ export const availableDepartments = [
    { id: 5, name: '测试部', description: '负责产品质量保障', head: '周九', memberCount: 5 },
    { id: 6, name: '客户服务部', description: '负责客户支持与服务', head: '吴十', memberCount: 12 }
 ];
+
+// 模型配置数据
+export const modelConfigs = [
+    {
+        id: 'cfg_001',
+        name: '阿里云百炼主账号',
+        type: 'basic',
+        isActive: true,
+        createdAt: '2026-03-20T10:30:00',
+        updatedAt: '2026-03-26T14:30:00',
+        basic: {
+            apiUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+            apiKey: 'sk-ds-abc123xyz789',
+            modelName: 'qwen-max',
+            temperature: 0.7,
+            maxTokens: 4096,
+            topP: 0.9
+        }
+    },
+    {
+        id: 'cfg_002',
+        name: '智算平台生产环境',
+        type: 'zhisuan',
+        isActive: false,
+        createdAt: '2026-03-25T09:00:00',
+        updatedAt: '2026-03-25T09:00:00',
+        zhisuan: {
+            apiUrl: 'https://zhisuan.internal.company.com/api/v1',
+            appId: 'app_prod_001',
+            appSecret: 'secret_prod_xyz123abc'
+        }
+    },
+    {
+        id: 'cfg_003',
+        name: 'DeepSeek 备用',
+        type: 'basic',
+        isActive: false,
+        createdAt: '2026-03-24T16:00:00',
+        updatedAt: '2026-03-24T16:00:00',
+        basic: {
+            apiUrl: 'https://api.deepseek.com/v1',
+            apiKey: 'sk-ds-deepseek456',
+            modelName: 'deepseek-chat',
+            temperature: 0.5,
+            maxTokens: 8192,
+            topP: 1.0
+        }
+    },
+    {
+        id: 'cfg_004',
+        name: '智算平台测试环境',
+        type: 'zhisuan',
+        isActive: false,
+        createdAt: '2026-03-23T11:00:00',
+        updatedAt: '2026-03-23T11:00:00',
+        zhisuan: {
+            apiUrl: 'https://zhisuan-test.internal.company.com/api/v1',
+            appId: 'app_test_001',
+            appSecret: 'secret_test_abc789xyz'
+        }
+    }
+];
--- a/src/data/configTypes.js
+++ b/src/data/configTypes.js
@@ -0,0 +1,93 @@
+/**
+ * 模型配置类型注册表
+ * 定义支持的配置类型及其字段元数据
+ */
+
+export const MODEL_CONFIG_TYPES = {
+  basic: {
+    key: 'basic',
+    label: 'OpenAI 兼容接口',
+    description: '支持标准的 OpenAI API 格式',
+    fields: [
+      { key: 'apiUrl', label: 'API 地址', type: 'url', required: true },
+      { key: 'apiKey', label: 'API 密钥', type: 'password', required: true },
+      { key: 'modelName', label: '模型名称', type: 'text', required: true },
+      { key: 'temperature', label: 'Temperature', type: 'number', min: 0, max: 2, step: 0.1, default: 0.7 },
+      { key: 'maxTokens', label: 'Max Tokens', type: 'number', min: 1, max: 128000, step: 1, default: 4096 },
+      { key: 'topP', label: 'Top P', type: 'number', min: 0, max: 1, step: 0.1, default: 0.9 },
+    ]
+  },
+  zhisuan: {
+    key: 'zhisuan',
+    label: '智算管理平台',
+    description: '内部智算平台接入',
+    fields: [
+      { key: 'apiUrl', label: 'API 地址', type: 'url', required: true },
+      { key: 'appId', label: 'App ID', type: 'text', required: true },
+      { key: 'appSecret', label: 'App Secret', type: 'password', required: true },
+    ]
+  }
+};
+
+/**
+ * 获取所有配置类型列表
+ * @returns {Array} 配置类型列表
+ */
+export const getConfigTypeList = () => {
+  return Object.values(MODEL_CONFIG_TYPES).map(type => ({
+    key: type.key,
+    label: type.label,
+    description: type.description
+  }));
+};
+
+/**
+ * 根据 key 获取配置类型定义
+ * @param {string} key - 配置类型 key
+ * @returns {Object|undefined} 配置类型定义
+ */
+export const getConfigTypeByKey = (key) => {
+  return MODEL_CONFIG_TYPES[key];
+};
+
+/**
+ * 获取配置类型的字段定义
+ * @param {string} key - 配置类型 key
+ * @returns {Array} 字段定义数组
+ */
+export const getConfigFields = (key) => {
+  const configType = MODEL_CONFIG_TYPES[key];
+  return configType ? configType.fields : [];
+};
+
+/**
+ * 生成配置摘要信息
+ * @param {Object} config - 配置对象
+ * @returns {string} 摘要字符串
+ */
+export const getConfigSummary = (config) => {
+  if (!config) return '-';
+
+  const type = MODEL_CONFIG_TYPES[config.type];
+  if (!type) return '-';
+
+  if (config.type === 'basic') {
+    return config.basic?.modelName || '-';
+  }
+
+  if (config.type === 'zhisuan') {
+    return '智算平台接入';
+  }
+
+  return '-';
+};
+
+/**
+ * 掩码显示敏感信息
+ * @param {string} value - 原始值
+ * @returns {string} 掩码后的值
+ */
+export const maskSensitiveValue = (value) => {
+  if (!value || value.length < 8) return '****';
+  return value.substring(0, 4) + '****' + value.substring(value.length - 4);
+};
--- a/src/data/conversations.js
+++ b/src/data/conversations.js
@@ -290,51 +290,51 @@ data = [<span style="color: #A78BFA;">1</span>, <span style="color: #A78BFA;">2<
                    </div>
                    <div class="message-bubble">
                        <p><strong>本月各部门销售业绩汇总：</strong></p>
-                        <table style="margin-top: 12px; width: 100%; border-collapse: collapse; font-size: 13px;">
+                        <table class="msg-table">
                            <thead>
-                                <tr style="background: #F1F5F9;">
-                                    <th style="padding: 10px 12px; text-align: left; border: 1px solid #E2E8F0; font-weight: 600;">部门</th>
-                                    <th style="padding: 10px 12px; text-align: right; border: 1px solid #E2E8F0; font-weight: 600;">销售额</th>
-                                    <th style="padding: 10px 12px; text-align: right; border: 1px solid #E2E8F0; font-weight: 600;">订单数</th>
-                                    <th style="padding: 10px 12px; text-align: right; border: 1px solid #E2E8F0; font-weight: 600;">完成率</th>
+                                <tr>
+                                    <th>部门</th>
+                                    <th class="text-right">销售额</th>
+                                    <th class="text-right">订单数</th>
+                                    <th class="text-right">完成率</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0;">华东区</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600; color: #10B981;">¥528,600</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">186</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #10B981;">112%</span></td>
-                                </tr>
-                                <tr style="background: #FAFAFA;">
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0;">华南区</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600;">¥412,300</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">142</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #F59E0B;">98%</span></td>
+                                    <td>华东区</td>
+                                    <td class="text-right value-success">¥528,600</td>
+                                    <td class="text-right">186</td>
+                                    <td class="text-right"><span class="value-success">112%</span></td>
                                </tr>
                                <tr>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0;">华北区</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600;">¥385,900</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">128</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #10B981;">105%</span></td>
+                                    <td>华南区</td>
+                                    <td class="text-right">¥412,300</td>
+                                    <td class="text-right">142</td>
+                                    <td class="text-right"><span class="value-warning">98%</span></td>
                                </tr>
-                                <tr style="background: #FAFAFA;">
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0;">西南区</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600; color: #EF4444;">¥267,400</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">95</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #EF4444;">76%</span></td>
+                                <tr>
+                                    <td>华北区</td>
+                                    <td class="text-right">¥385,900</td>
+                                    <td class="text-right">128</td>
+                                    <td class="text-right"><span class="value-success">105%</span></td>
+                                </tr>
+                                <tr>
+                                    <td>西南区</td>
+                                    <td class="text-right value-danger">¥267,400</td>
+                                    <td class="text-right">95</td>
+                                    <td class="text-right"><span class="value-danger">76%</span></td>
                                </tr>
                            </tbody>
                            <tfoot>
-                                <tr style="background: #F1F5F9; font-weight: 600;">
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0;">合计</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; color: #3B82F6;">¥1,594,200</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">551</td>
-                                    <td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #3B82F6;">98%</span></td>
+                                <tr>
+                                    <td>合计</td>
+                                    <td class="text-right value-primary">¥1,594,200</td>
+                                    <td class="text-right">551</td>
+                                    <td class="text-right"><span class="value-primary">98%</span></td>
                                </tr>
                            </tfoot>
                        </table>
-                        <p style="margin-top: 12px; font-size: 13px; color: #64748B;">数据更新时间：2026-03-19 11:30</p>
+                        <p class="msg-meta">数据更新时间：2026-03-19 11:30</p>
                    </div>
                    <div class="message-time">11:31</div>
                </div>
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { FiHome, FiBarChart2, FiUsers, FiList, FiCheckCircle, FiActivity } from 'react-icons/fi';
+import { FiHome, FiBarChart2, FiUsers, FiList, FiCheckCircle, FiActivity, FiSettings } from 'react-icons/fi';
 import Layout from '../components/Layout.jsx';
 import SidebarBrand from '../components/layout/SidebarBrand.jsx';
 import SidebarUser from '../components/layout/SidebarUser.jsx';
@@ -18,6 +18,9 @@ import AddProjectPage from './admin/AddProjectPage.jsx';
 import AdminLogsPage from './admin/AdminLogsPage.jsx';
 import ConsoleReviewListPage from './console/ConsoleReviewListPage.jsx';
 import ConsoleReviewDetailPage from './console/ConsoleReviewDetailPage.jsx';
+import ModelConfigsPage from './admin/ModelConfigsPage.jsx';
+import AddModelConfigPage from './admin/AddModelConfigPage.jsx';
+import AccountPage from '../components/account/AccountPage.jsx';

 function AdminPage() {
    const location = useLocation();
@@ -94,15 +97,27 @@ function AdminPage() {
                    onBack={() => navigateTo('projects')}
                    editData={editData}
                />;
+            case 'modelConfigs':
+                return <ModelConfigsPage
+                    onAdd={() => navigateTo('addModelConfig')}
+                    onEdit={(config) => navigateTo('addModelConfig', config)}
+                />;
+            case 'addModelConfig':
+                return <AddModelConfigPage
+                    onBack={() => navigateTo('modelConfigs')}
+                    editData={editData}
+                />;
+            case 'account':
+                return <AccountPage />;
            default:
                return <div>Page not found</div>;
        }
    };

    const getPageTitle = () => {
-        if (editData && (currentPage === 'addDepartment' || currentPage === 'addUser' || currentPage === 'addProject')) {
+        if (editData && (currentPage === 'addDepartment' || currentPage === 'addUser' || currentPage === 'addProject' || currentPage === 'addModelConfig')) {
            const prefix = '编辑';
-            const nameMap = { addDepartment: '部门', addUser: '用户', addProject: '项目' };
+            const nameMap = { addDepartment: '部门', addUser: '用户', addProject: '项目', addModelConfig: '配置' };
            return prefix + nameMap[currentPage];
        }
        if (currentPage === 'reviewDetail') {
@@ -171,9 +186,18 @@ function AdminPage() {
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
+                <SidebarNavItem
+                    icon={<FiSettings />}
+                    label="模型配置"
+                    active={currentPage === 'modelConfigs' || currentPage === 'addModelConfig'}
+                    onClick={() => navigateTo('modelConfigs')}
+                    itemClassName="admin-nav-item"
+                    iconClassName="admin-nav-icon"
+                    textClassName="admin-nav-text"
+                />
            </nav>
            <SidebarUser
-                onClick={() => {}}
+                onClick={() => navigateTo('account')}
                wrapperClassName="admin-sidebar-user"
                infoClassName="admin-sidebar-user-info"
                nameClassName="admin-sidebar-user-name"
--- a/src/pages/ConsolePage.jsx
+++ b/src/pages/ConsolePage.jsx
@@ -18,7 +18,7 @@ import SkillConfigPage from './console/SkillConfigPage.jsx';
 import LogsPage from './console/LogsPage.jsx';
 import TasksPage from './console/TasksPage.jsx';
 import TaskDetailPage from './console/TaskDetailPage.jsx';
-import AccountPage from './console/AccountPage.jsx';
+import AccountPage from '../components/account/AccountPage.jsx';
 import ProjectsPage from './console/ProjectsPage.jsx';
 import MemberConfigPage from './console/MemberConfigPage.jsx';
 import AddMemberPage from './console/AddMemberPage.jsx';
--- a/src/pages/DeveloperPage.jsx
+++ b/src/pages/DeveloperPage.jsx
@@ -15,7 +15,7 @@ import MySkillsPage from './developer/MySkillsPage.jsx';
 import UploadSkillPage from './developer/UploadSkillPage.jsx';
 import NewVersionPage from './developer/NewVersionPage.jsx';
 import DevDocsPage from './developer/DevDocsPage.jsx';
-import DevAccountPage from './developer/DevAccountPage.jsx';
+import AccountPage from '../components/account/AccountPage.jsx';
 import SkillEditorPage from './developer/SkillEditorPage.jsx';
 import UpdateSkillInfoPage from './developer/UpdateSkillInfoPage.jsx';
 import UploadVersionPage from './developer/UploadVersionPage.jsx';
@@ -104,7 +104,7 @@ function DeveloperPage() {
            case 'devDocs':
                return <DevDocsPage />;
            case 'devAccount':
-                return <DevAccountPage />;
+                return <AccountPage />;
            case 'skillEditor':
                return <SkillEditorPage
                    skillId={currentSkillId}
--- a/src/pages/admin/AddDepartmentPage.jsx
+++ b/src/pages/admin/AddDepartmentPage.jsx
@@ -21,10 +21,15 @@ function AddDepartmentPage({ onBack, editData }) {
        : null;

    return (
-        <div className="card">
-            <div className="card-header">
-                <div className="card-title">{isEdit ? '编辑部门' : '新增部门'}</div>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回部门列表</span>
            </div>
+            <div className="card">
+                <div className="card-header">
+                    <div className="card-title">{isEdit ? '编辑部门' : '新增部门'}</div>
+                </div>
            <div className="card-body">
                <div className="form-group">
                    <label className="form-label required">部门名称</label>
@@ -52,7 +57,8 @@ function AddDepartmentPage({ onBack, editData }) {
                    <button className="btn btn-primary">确定</button>
                </div>
            </div>
-        </div>
+            </div>
+        </>
    );
 }

--- a/src/pages/admin/AddModelConfigPage.jsx
+++ b/src/pages/admin/AddModelConfigPage.jsx
@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'react';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
+import { api } from '../../services/api.js';
+import { MODEL_CONFIG_TYPES, getConfigFields, getConfigTypeList } from '../../data/configTypes.js';
+
+function AddModelConfigPage({ onBack, editData }) {
+  const isEdit = !!editData;
+
+  // 基础信息
+  const [configName, setConfigName] = useState('');
+  const [configType, setConfigType] = useState('basic');
+
+  // 类型特定字段值
+  const [fieldValues, setFieldValues] = useState({});
+
+  // 密码显示/隐藏状态
+  const [showPasswords, setShowPasswords] = useState({});
+
+  // 初始化编辑数据
+  useEffect(() => {
+    if (editData) {
+      setConfigName(editData.name || '');
+      setConfigType(editData.type || 'basic');
+
+      // 加载类型特定字段值
+      const typeData = editData[editData.type] || {};
+      const initialValues = {};
+      const fields = getConfigFields(editData.type);
+      fields.forEach(field => {
+        initialValues[field.key] = typeData[field.key] ?? field.default ?? '';
+      });
+      setFieldValues(initialValues);
+    } else {
+      // 新增时初始化默认值
+      const fields = getConfigFields('basic');
+      const initialValues = {};
+      fields.forEach(field => {
+        initialValues[field.key] = field.default ?? '';
+      });
+      setFieldValues(initialValues);
+    }
+  }, [editData]);
+
+  // 处理类型切换（仅新增时可用）
+  const handleTypeChange = (newType) => {
+    if (isEdit) return; // 编辑时不可切换类型
+
+    setConfigType(newType);
+
+    // 清空类型特定字段，保留默认值
+    const fields = getConfigFields(newType);
+    const newValues = {};
+    fields.forEach(field => {
+      newValues[field.key] = field.default ?? '';
+    });
+    setFieldValues(newValues);
+  };
+
+  // 处理字段值变化
+  const handleFieldChange = (key, value) => {
+    setFieldValues(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  // 切换密码显示/隐藏
+  const togglePasswordVisibility = (key) => {
+    setShowPasswords(prev => ({
+      ...prev,
+      [key]: !prev[key]
+    }));
+  };
+
+  // 保存配置
+  const handleSave = () => {
+    // 构建类型特定数据
+    const typeData = {};
+    const fields = getConfigFields(configType);
+    fields.forEach(field => {
+      let value = fieldValues[field.key];
+      // 数字类型转换
+      if (field.type === 'number' && value !== '') {
+        value = Number(value);
+      }
+      typeData[field.key] = value;
+    });
+
+    const configData = {
+      name: configName.trim(),
+      type: configType,
+      [configType]: typeData
+    };
+
+    if (isEdit) {
+      api.admin.modelConfigs.update(editData.id, configData);
+    } else {
+      api.admin.modelConfigs.create(configData);
+    }
+
+    onBack();
+  };
+
+  // 获取当前类型的字段定义
+  const currentFields = getConfigFields(configType);
+  const configTypeList = getConfigTypeList();
+
+  return (
+    <>
+      <div className="page-back-btn" onClick={onBack}>
+        <span>←</span>
+        <span>返回配置列表</span>
+      </div>
+      <div className="card">
+        <div className="card-header">
+          <div className="card-title">{isEdit ? '编辑配置' : '新增配置'}</div>
+        </div>
+      <div className="card-body">
+        {/* 基础信息 */}
+        <div className="form-group">
+          <label className="form-label required">配置名称</label>
+          <input
+            type="text"
+            className="form-control"
+            placeholder="请输入配置名称"
+            value={configName}
+            onChange={(e) => setConfigName(e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label className="form-label required">配置类型</label>
+          <select
+            className="form-control"
+            value={configType}
+            onChange={(e) => handleTypeChange(e.target.value)}
+            disabled={isEdit}
+          >
+            {configTypeList.map(type => (
+              <option key={type.key} value={type.key}>
+                {type.label}
+              </option>
+            ))}
+          </select>
+          {isEdit && (
+            <div style={{ fontSize: '12px', color: '#6B7280', marginTop: '4px' }}>
+              配置类型不可修改
+            </div>
+          )}
+        </div>
+
+        {/* 类型特定配置 */}
+        <div style={{ marginTop: '24px', marginBottom: '16px' }}>
+          <div style={{ fontSize: '14px', fontWeight: 600, color: '#111827', marginBottom: '16px' }}>
+            {MODEL_CONFIG_TYPES[configType]?.label} 配置
+          </div>
+
+          {currentFields.map(field => (
+            <div key={field.key} className="form-group">
+              <label className={`form-label ${field.required ? 'required' : ''}`}>
+                {field.label}
+              </label>
+
+              {field.type === 'password' ? (
+                <div style={{ position: 'relative' }}>
+                  <input
+                    type={showPasswords[field.key] ? 'text' : 'password'}
+                    className="form-control"
+                    style={{ paddingRight: '40px' }}
+                    placeholder={`请输入${field.label}`}
+                    value={fieldValues[field.key] || ''}
+                    onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => togglePasswordVisibility(field.key)}
+                    style={{
+                      position: 'absolute',
+                      right: '8px',
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      background: 'none',
+                      border: 'none',
+                      padding: '6px',
+                      cursor: 'pointer',
+                      color: '#6B7280'
+                    }}
+                  >
+                    {showPasswords[field.key] ? <FiEyeOff size={16} /> : <FiEye size={16} />}
+                  </button>
+                </div>
+              ) : field.type === 'number' ? (
+                <input
+                  type="number"
+                  className="form-control"
+                  placeholder={`请输入${field.label}`}
+                  value={fieldValues[field.key] || ''}
+                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                  min={field.min}
+                  max={field.max}
+                  step={field.step}
+                />
+              ) : (
+                <input
+                  type={field.type === 'url' ? 'url' : 'text'}
+                  className="form-control"
+                  placeholder={`请输入${field.label}`}
+                  value={fieldValues[field.key] || ''}
+                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* 操作按钮 */}
+        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end', marginTop: '24px' }}>
+          <button className="btn" onClick={onBack}>取消</button>
+          <button className="btn btn-primary" onClick={handleSave}>保存</button>
+        </div>
+      </div>
+      </div>
+    </>
+  );
+}
+
+export default AddModelConfigPage;
--- a/src/pages/admin/AddProjectPage.jsx
+++ b/src/pages/admin/AddProjectPage.jsx
@@ -21,10 +21,15 @@ function AddProjectPage({ onBack, editData }) {
        : null;

    return (
-        <div className="card">
-            <div className="card-header">
-                <div className="card-title">{isEdit ? '编辑项目' : '新增项目'}</div>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回项目列表</span>
            </div>
+            <div className="card">
+                <div className="card-header">
+                    <div className="card-title">{isEdit ? '编辑项目' : '新增项目'}</div>
+                </div>
            <div className="card-body">
                <div className="form-group">
                    <label className="form-label required">项目名称</label>
@@ -52,7 +57,8 @@ function AddProjectPage({ onBack, editData }) {
                    <button className="btn btn-primary">确定</button>
                </div>
            </div>
-        </div>
+            </div>
+        </>
    );
 }

--- a/src/pages/admin/AddUserPage.jsx
+++ b/src/pages/admin/AddUserPage.jsx
@@ -23,10 +23,15 @@ function AddUserPage({ onBack, editData }) {
        : null;

    return (
-        <div className="card">
-            <div className="card-header">
-                <div className="card-title">{isEdit ? '编辑用户' : '新增用户'}</div>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回用户列表</span>
            </div>
+            <div className="card">
+                <div className="card-header">
+                    <div className="card-title">{isEdit ? '编辑用户' : '新增用户'}</div>
+                </div>
            <div className="card-body">
                <div className="form-group">
                    <label className="form-label required">姓名</label>
@@ -66,7 +71,8 @@ function AddUserPage({ onBack, editData }) {
                    <button className="btn btn-primary">确定</button>
                </div>
            </div>
-        </div>
+            </div>
+        </>
    );
 }

--- a/src/pages/admin/AdminProjectsPage.jsx
+++ b/src/pages/admin/AdminProjectsPage.jsx
@@ -84,7 +84,7 @@ function AdminProjectsPage({ onAdd, onEdit }) {
                                    <th>成员数</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
-                                    <th style={{ width: '200px' }}>操作</th>
+                                    <th className="col-actions">操作</th>
                                </tr>
                            </thead>
                            <tbody>
@@ -96,8 +96,8 @@ function AdminProjectsPage({ onAdd, onEdit }) {
                                        <td>{project.members} 人</td>
                                        <td><StatusTag status={project.status} /></td>
                                        <td>{project.createTime}</td>
-                                        <td style={{ width: '200px' }}>
-                                            <div style={{ display: 'flex', gap: '8px' }}>
+                                        <td className="col-actions">
+                                            <div className="table-actions">
                                                <button className={`text-btn ${project.status === '正常' ? 'text-btn-danger' : 'text-btn-primary'}`}>{project.status === '正常' ? '禁用' : '启用'}</button>
                                                <button className="text-btn text-btn-primary" onClick={() => onEdit(project)}>编辑</button>
                                                <button className="text-btn text-btn-danger" onClick={() => setDeleteTarget(project)}>删除</button>
--- a/src/pages/admin/DepartmentsPage.jsx
+++ b/src/pages/admin/DepartmentsPage.jsx
@@ -84,7 +84,7 @@ function DepartmentsPage({ onAdd, onEdit }) {
                                    <th>成员数</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
-                                    <th style={{ width: '200px' }}>操作</th>
+                                    <th className="col-actions">操作</th>
                                </tr>
                            </thead>
                            <tbody>
@@ -96,8 +96,8 @@ function DepartmentsPage({ onAdd, onEdit }) {
                                        <td>{dept.members} 人</td>
                                        <td><StatusTag status={dept.status} /></td>
                                        <td>{dept.createTime}</td>
-                                        <td style={{ width: '200px' }}>
-                                            <div style={{ display: 'flex', gap: '8px' }}>
+                                        <td className="col-actions">
+                                            <div className="table-actions">
                                                <button className={`text-btn ${dept.status === '正常' ? 'text-btn-danger' : 'text-btn-primary'}`}>{dept.status === '正常' ? '禁用' : '启用'}</button>
                                                <button className="text-btn text-btn-primary" onClick={() => onEdit(dept)}>编辑</button>
                                                <button className="text-btn text-btn-danger" onClick={() => setDeleteTarget(dept)}>删除</button>
--- a/src/pages/admin/ModelConfigsPage.jsx
+++ b/src/pages/admin/ModelConfigsPage.jsx
@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { FiPlus } from 'react-icons/fi';
+import { api } from '../../services/api.js';
+import { MODEL_CONFIG_TYPES, getConfigSummary } from '../../data/configTypes.js';
+import Modal from '../../components/common/Modal.jsx';
+
+function ModelConfigsPage({ onAdd, onEdit }) {
+  const [configs, setConfigs] = useState(api.admin.modelConfigs.list());
+  const [showSetActiveModal, setShowSetActiveModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedConfig, setSelectedConfig] = useState(null);
+
+  const handleSetActiveClick = (config) => {
+    setSelectedConfig(config);
+    setShowSetActiveModal(true);
+  };
+
+  const handleSetActiveConfirm = () => {
+    if (selectedConfig) {
+      api.admin.modelConfigs.setActive(selectedConfig.id);
+      setConfigs([...api.admin.modelConfigs.list()]);
+    }
+    setShowSetActiveModal(false);
+    setSelectedConfig(null);
+  };
+
+  const handleDeleteClick = (config) => {
+    setSelectedConfig(config);
+    setShowDeleteModal(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (selectedConfig) {
+      api.admin.modelConfigs.delete(selectedConfig.id);
+      setConfigs([...api.admin.modelConfigs.list()]);
+    }
+    setShowDeleteModal(false);
+    setSelectedConfig(null);
+  };
+
+  return (
+    <div className="model-configs-page">
+      {/* 配置列表 */}
+      <div className="card">
+        <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div className="card-title">配置列表</div>
+          <button className="btn btn-primary btn-sm" onClick={onAdd}>
+            <FiPlus /> 新增配置
+          </button>
+        </div>
+        <div className="card-body">
+          <div className="table-wrapper">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>配置名称</th>
+                  <th>配置类型</th>
+                  <th>关键信息</th>
+                  <th>状态</th>
+                  <th className="col-actions">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {configs.map(config => (
+                  <tr key={config.id} className={config.isActive ? 'active-row' : ''}>
+                    <td><strong>{config.name}</strong></td>
+                    <td>{MODEL_CONFIG_TYPES[config.type]?.label || config.type}</td>
+                    <td>{getConfigSummary(config)}</td>
+                    <td>
+                      {config.isActive ? (
+                        <span className="status status-running">生效中</span>
+                      ) : (
+                        <span className="status status-stopped">未生效</span>
+                      )}
+                    </td>
+                    <td className="col-actions">
+                      <div className="table-actions">
+                        {!config.isActive && (
+                          <button
+                            className="text-btn text-btn-primary"
+                            onClick={() => handleSetActiveClick(config)}
+                          >
+                            设为默认
+                          </button>
+                        )}
+                        <button
+                          className="text-btn text-btn-primary"
+                          onClick={() => onEdit(config)}
+                          disabled={config.isActive}
+                          title={config.isActive ? '生效中的配置不可编辑' : ''}
+                          style={config.isActive ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
+                        >
+                          编辑
+                        </button>
+                        <button
+                          className="text-btn text-btn-danger"
+                          onClick={() => handleDeleteClick(config)}
+                          disabled={config.isActive}
+                          title={config.isActive ? '生效中的配置不可删除' : ''}
+                          style={config.isActive ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
+                        >
+                          删除
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {/* 设为默认确认弹窗 */}
+      <Modal
+        visible={showSetActiveModal}
+        title="确认切换默认配置"
+        onConfirm={handleSetActiveConfirm}
+        onCancel={() => {
+          setShowSetActiveModal(false);
+          setSelectedConfig(null);
+        }}
+        confirmText="确认切换"
+        cancelText="取消"
+      >
+        <p>确定将"{selectedConfig?.name}"设为平台默认模型配置吗？</p>
+        <p>切换后，原生效配置将变为备用状态。</p>
+      </Modal>
+
+      {/* 删除确认弹窗 */}
+      <Modal
+        visible={showDeleteModal}
+        title="确认删除"
+        onConfirm={handleDeleteConfirm}
+        onCancel={() => {
+          setShowDeleteModal(false);
+          setSelectedConfig(null);
+        }}
+        confirmText="删除"
+        cancelText="取消"
+      >
+        <p>确定要删除配置"{selectedConfig?.name}"吗？</p>
+        <p>此操作不可恢复。</p>
+      </Modal>
+    </div>
+  );
+}
+
+export default ModelConfigsPage;
--- a/src/pages/admin/UsersPage.jsx
+++ b/src/pages/admin/UsersPage.jsx
@@ -108,7 +108,7 @@ function UsersPage({ onAdd, onEdit }) {
                                    <th>手机号</th>
                                    <th>状态</th>
                                    <th>最后登录</th>
-                                    <th style={{ width: '200px' }}>操作</th>
+                                    <th className="col-actions">操作</th>
                                </tr>
                            </thead>
                            <tbody>
@@ -121,8 +121,8 @@ function UsersPage({ onAdd, onEdit }) {
                                        <td>{user.phone}</td>
                                        <td><StatusTag status={user.status} /></td>
                                        <td>{user.lastLogin}</td>
-                                        <td style={{ width: '200px' }}>
-                                            <div style={{ display: 'flex', gap: '8px' }}>
+                                        <td className="col-actions">
+                                            <div className="table-actions">
                                                <button className={`text-btn ${user.status === '正常' ? 'text-btn-danger' : 'text-btn-primary'}`}>{user.status === '正常' ? '禁用' : '启用'}</button>
                                                <button className="text-btn text-btn-primary" onClick={() => onEdit(user)}>编辑</button>
                                                <button className="text-btn text-btn-danger" onClick={() => setDeleteTarget(user)}>删除</button>
--- a/src/pages/console/AddMemberPage.jsx
+++ b/src/pages/console/AddMemberPage.jsx
@@ -30,29 +30,35 @@ function AddMemberPage({ onBack }) {
    };

    return (
-        <div className="card">
-            <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <div className="card-title">增加成员</div>
-                <button className="btn btn-primary btn-sm" onClick={onBack}>返回列表</button>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回成员列表</span>
            </div>
-            <div className="card-body">
-                <ListSelector
-                    data={availableMembers}
-                    selectedIds={selectedMembers}
-                    onChange={setSelectedMembers}
-                    searchPlaceholder="搜索成员姓名、部门、邮箱..."
-                    columns={memberColumns}
-                    multiSelect={true}
-                    selectedLabel={selectedLabel}
-                    onClearSelected={() => setSelectedMembers([])}
-                />
-                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
-                    <button className="btn btn-primary" onClick={handleAdd} disabled={selectedMembers.length === 0}>
-                        添加选中成员 ({selectedMembers.length})
-                    </button>
+            <div className="card">
+                <div className="card-header">
+                    <div className="card-title">增加成员</div>
+                </div>
+                <div className="card-body">
+                    <ListSelector
+                        data={availableMembers}
+                        selectedIds={selectedMembers}
+                        onChange={setSelectedMembers}
+                        searchPlaceholder="搜索成员姓名、部门、邮箱..."
+                        columns={memberColumns}
+                        multiSelect={true}
+                        selectedLabel={selectedLabel}
+                        onClearSelected={() => setSelectedMembers([])}
+                    />
+                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '16px' }}>
+                        <button className="btn btn-secondary" onClick={onBack}>取消</button>
+                        <button className="btn btn-primary" onClick={handleAdd} disabled={selectedMembers.length === 0}>
+                            添加选中成员 ({selectedMembers.length})
+                        </button>
+                    </div>
                </div>
            </div>
-        </div>
+        </>
    );
 }

--- a/src/pages/console/ConsoleReviewDetailPage.jsx
+++ b/src/pages/console/ConsoleReviewDetailPage.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FiChevronLeft, FiFile } from 'react-icons/fi';
+import { FiFile } from 'react-icons/fi';
 import { pendingVersionReviews, pendingUnlistReviews, skillFiles } from '../../data/skills.js';
 import Toast from '../../components/common/Toast.jsx';

@@ -34,8 +34,9 @@ function ConsoleReviewDetailPage({ type, reviewId, onBack }) {

    return (
        <>
-            <div className="console-back-btn" onClick={onBack}>
-                <FiChevronLeft /> 返回审核列表
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回审核列表</span>
            </div>

            <div className="card">
--- a/src/pages/console/ConsoleReviewListPage.jsx
+++ b/src/pages/console/ConsoleReviewListPage.jsx
@@ -37,13 +37,13 @@ function ConsoleReviewListPage({ onReviewClick }) {
                                        <th>版本号</th>
                                        <th>提交时间</th>
                                        <th>开发者</th>
-                                        <th style={{ width: '100px' }}>操作</th>
+                                        <th className="col-actions--narrow">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {pendingVersionReviews.map(review => (
                                        <tr key={review.id}>
-                                            <td style={{ fontWeight: 600 }}>{review.skillName}</td>
+                                            <td><strong>{review.skillName}</strong></td>
                                            <td>{review.version}</td>
                                            <td>{review.date}</td>
                                            <td>{review.developer}</td>
@@ -71,13 +71,13 @@ function ConsoleReviewListPage({ onReviewClick }) {
                                        <th>当前版本</th>
                                        <th>申请时间</th>
                                        <th>开发者</th>
-                                        <th style={{ width: '100px' }}>操作</th>
+                                        <th className="col-actions--narrow">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {pendingUnlistReviews.map(review => (
                                        <tr key={review.id}>
-                                            <td style={{ fontWeight: 600 }}>{review.skillName}</td>
+                                            <td><strong>{review.skillName}</strong></td>
                                            <td>{review.currentVersion}</td>
                                            <td>{review.date}</td>
                                            <td>{review.developer}</td>
--- a/src/pages/console/MemberConfigPage.jsx
+++ b/src/pages/console/MemberConfigPage.jsx
@@ -1,16 +1,19 @@
 function MemberConfigPage({ onBack }) {
    return (
-        <div className="card">
-            <div className="card-header">
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回成员列表</span>
+            </div>
+            <div className="card">
+                <div className="card-header">
                    <div className="card-title">成员配置</div>
-                    <button className="btn btn-primary" onClick={onBack}>返回列表</button>
+                </div>
+                <div className="card-body">
+                    <p>成员配置页面内容</p>
                </div>
            </div>
-            <div className="card-body">
-                <p>成员配置页面内容</p>
-            </div>
-        </div>
+        </>
    );
 }

--- a/src/pages/console/MySkillsPage.jsx
+++ b/src/pages/console/MySkillsPage.jsx
@@ -203,7 +203,7 @@ function MySkillsPage({ onConfig, onBack }) {
                                        <th>描述</th>
                                        <th>分类</th>
                                        <th>状态</th>
-                                        <th style={{ width: '200px' }}>操作</th>
+                                        <th className="col-actions">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
@@ -221,7 +221,7 @@ function MySkillsPage({ onConfig, onBack }) {
                                                        <span>{cv?.publicName || skill?.name || '未知技能'}</span>
                                                    </div>
                                                </td>
-                                                <td style={{ color: '#64748B' }}>{cv?.publicDesc || skill?.desc || '-'}</td>
+                                                <td className="cell-muted">{cv?.publicDesc || skill?.desc || '-'}</td>
                                                <td>{cv?.category || '-'}</td>
                                                <td>
                                                    <span className={`status ${statusInfo.className}`}>
@@ -229,7 +229,7 @@ function MySkillsPage({ onConfig, onBack }) {
                                                    </span>
                                                </td>
                                                <td>
-                                                    <div style={{ display: 'flex', gap: '8px' }}>
+                                                    <div className="table-actions">
                                                        {!delisted && (
                                                            <>
                                                                {item.enabled ? (
--- a/src/pages/console/ProjectsPage.jsx
+++ b/src/pages/console/ProjectsPage.jsx
@@ -93,7 +93,7 @@ function ProjectsPage({ onAddMember }) {
                                        <tr>
                                            <th>成员</th>
                                            <th style={{ width: '100px' }}>角色</th>
-                                            <th style={{ width: '120px' }}>操作</th>
+                                            <th className="col-actions--narrow">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
@@ -108,9 +108,11 @@ function ProjectsPage({ onAddMember }) {
                                                    </div>
                                                </td>
                                                <td><span className={`status ${member.role === '管理员' ? 'role-admin' : 'role-member'}`}>{member.role}</span></td>
-                                                <td style={{ width: '120px' }}>
-                                                    <button className="text-btn text-btn-primary">配置</button>
-                                                    <button className="text-btn text-btn-danger" style={{ marginLeft: '8px' }} onClick={() => handleRemoveClick(member)}>移除</button>
+                                                <td className="col-actions--narrow">
+                                                    <div className="table-actions">
+                                                        <button className="text-btn text-btn-primary">配置</button>
+                                                        <button className="text-btn text-btn-danger" onClick={() => handleRemoveClick(member)}>移除</button>
+                                                    </div>
                                                </td>
                                            </tr>
                                        ))}
--- a/src/pages/console/SkillConfigPage.jsx
+++ b/src/pages/console/SkillConfigPage.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { FiChevronLeft, FiPlus, FiX, FiUsers, FiStar, FiPackage } from 'react-icons/fi';
+import { FiPlus, FiX, FiUsers, FiStar, FiPackage } from 'react-icons/fi';
 import { skills, userSubscriptions } from '../../data/skills.js';
 import Toast from '../../components/common/Toast.jsx';

@@ -94,8 +94,9 @@ function SkillConfigPage({ subscriptionId, onBack }) {

    return (
        <>
-            <div className="dev-back-btn" onClick={onBack} style={{ marginBottom: '16px' }}>
-                <FiChevronLeft /> 返回我的技能
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回我的技能</span>
            </div>

            {/* 技能基本信息卡片 */}
@@ -153,7 +154,7 @@ function SkillConfigPage({ subscriptionId, onBack }) {
                                    <tr>
                                        <th>Key</th>
                                        <th>Value</th>
-                                        <th style={{ width: '80px' }}>操作</th>
+                                        <th className="col-actions--tiny">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
@@ -205,7 +206,10 @@ function SkillConfigPage({ subscriptionId, onBack }) {
                            暂无配置项，点击右上角"新增配置"添加
                        </div>
                    )}
-                    <div style={{ marginTop: '16px', textAlign: 'right' }}>
+                    <div style={{ marginTop: '16px', textAlign: 'right', display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
+                        <button className="btn btn-secondary" onClick={onBack}>
+                            取消
+                        </button>
                        <button className="btn btn-primary" onClick={handleSave}>
                            保存
                        </button>
--- a/src/pages/console/TaskDetailPage.jsx
+++ b/src/pages/console/TaskDetailPage.jsx
@@ -5,24 +5,33 @@ function TaskDetailPage({ taskId, onBack }) {

    if (!task) {
        return (
-            <div className="card">
-                <div className="card-header">
-                    <div className="card-title">任务详情</div>
+            <>
+                <div className="page-back-btn" onClick={onBack}>
+                    <span>←</span>
+                    <span>返回任务列表</span>
                </div>
-                <div className="card-body">
-                    <p>任务不存在</p>
-                    <button className="btn btn-primary btn-sm" onClick={onBack} style={{ marginTop: '16px' }}>返回列表</button>
+                <div className="card">
+                    <div className="card-header">
+                        <div className="card-title">任务详情</div>
+                    </div>
+                    <div className="card-body">
+                        <p>任务不存在</p>
+                    </div>
                </div>
-            </div>
+            </>
        );
    }

    return (
-        <div className="card">
-            <div className="card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <div className="card-title">任务详情</div>
-                <button className="btn btn-primary btn-sm" onClick={onBack}>返回列表</button>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回任务列表</span>
            </div>
+            <div className="card">
+                <div className="card-header">
+                    <div className="card-title">任务详情</div>
+                </div>
            <div className="card-body">
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px', marginBottom: '24px' }}>
                    <div>
@@ -57,7 +66,7 @@ function TaskDetailPage({ taskId, onBack }) {
                <div>
                    <div style={{ fontSize: '14px', fontWeight: '600', color: '#1E293B', marginBottom: '12px' }}>执行日志</div>
                    <div style={{ border: '1px solid #E2E8F0', borderRadius: '8px', overflow: 'hidden' }}>
-                        <table className="table" style={{ marginBottom: '0' }}>
+                        <table className="table no-margin-bottom">
                            <thead>
                                <tr>
                                    <th style={{ width: '180px', whiteSpace: 'nowrap' }}>执行时间</th>
@@ -68,13 +77,13 @@ function TaskDetailPage({ taskId, onBack }) {
                            <tbody>
                                {task.logs.map((log, index) => (
                                    <tr key={index}>
-                                        <td style={{ color: '#64748B', fontSize: '13px', whiteSpace: 'nowrap' }}>{log.time}</td>
+                                        <td className="cell-muted">{log.time}</td>
                                        <td>
                                            <span className={`status ${log.status === '成功' ? 'status-running' : 'status-error'}`}>
                                                {log.status}
                                            </span>
                                        </td>
-                                        <td style={{ fontSize: '14px', color: '#475569' }}>{log.message}</td>
+                                        <td>{log.message}</td>
                                    </tr>
                                ))}
                            </tbody>
@@ -82,7 +91,8 @@ function TaskDetailPage({ taskId, onBack }) {
                    </div>
                </div>
            </div>
-        </div>
+            </div>
+        </>
    );
 }

--- a/src/pages/developer/DevAccountPage.jsx
+++ b/src/pages/developer/DevAccountPage.jsx
@@ -1,24 +0,0 @@
-function DevAccountPage() {
-    return (
-        <div className="card">
-            <div className="card-header">
-                <div className="card-title">开发者设置</div>
-            </div>
-            <div className="card-body">
-                <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
-                    <div className="user-avatar" style={{ width: '72px', height: '72px', fontSize: '32px' }}>张</div>
-                    <div>
-                        <h2 style={{ marginBottom: '8px' }}>张三</h2>
-                        <div style={{ color: '#64748B', marginBottom: '12px' }}>开发者</div>
-                        <div style={{ display: 'flex', gap: '8px' }}>
-                            <button className="btn btn-primary">编辑资料</button>
-                            <button className="btn">API 密钥管理</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default DevAccountPage;
--- a/src/pages/developer/MySkillsPage.jsx
+++ b/src/pages/developer/MySkillsPage.jsx
@@ -95,12 +95,12 @@ function MySkillsPage({ onSkillClick }) {
                                    <th>内部名称</th>
                                    <th>内部描述</th>
                                    <th>状态</th>
-                                    <th style={{ width: '200px' }}>操作</th>
+                                    <th className="col-actions">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                 {filteredList.map(skill => (
-                                     <tr key={skill.id} onClick={() => onSkillClick(skill.id)} style={{ cursor: 'pointer' }}>
+                                     <tr key={skill.id} className="tr-clickable" onClick={() => onSkillClick(skill.id)}>
                                         <td>{skill.name}</td>
                                         <td>{skill.desc}</td>
                                         <td>
@@ -109,7 +109,7 @@ function MySkillsPage({ onSkillClick }) {
                                             </span>
                                         </td>
                                        <td>
-                                            <div style={{ display: 'flex', gap: '8px' }}>
+                                            <div className="table-actions">
                                                <button className="text-btn text-btn-primary" onClick={e => { e.stopPropagation(); onSkillClick(skill.id); }}>
                                                    编辑
                                                </button>
--- a/src/pages/developer/NewVersionPage.jsx
+++ b/src/pages/developer/NewVersionPage.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FiUpload, FiChevronLeft } from 'react-icons/fi';
+import { FiUpload } from 'react-icons/fi';
 import Toast from '../../components/common/Toast.jsx';

 function NewVersionPage({ skillName, onBack }) {
@@ -14,8 +14,9 @@ function NewVersionPage({ skillName, onBack }) {

    return (
        <>
-            <div className="dev-back-btn" onClick={onBack}>
-                <FiChevronLeft /> 返回技能详情
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回技能详情</span>
            </div>
            <div className="card">
                <div className="card-header">
--- a/src/pages/developer/SkillEditorPage.jsx
+++ b/src/pages/developer/SkillEditorPage.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FiChevronLeft, FiUpload, FiUsers, FiPackage, FiStar, FiRotateCcw } from 'react-icons/fi';
+import { FiUpload, FiUsers, FiPackage, FiStar, FiRotateCcw } from 'react-icons/fi';
 import { api } from '../../services/api.js';
 import Modal from '../../components/common/Modal.jsx';
 import Toast from '../../components/common/Toast.jsx';
@@ -50,8 +50,9 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })

    return (
        <>
-            <div className="dev-back-btn" onClick={onBack}>
-                <FiChevronLeft /> 返回我的技能
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回我的技能</span>
            </div>

            {/* 1. 开发者内部信息概览卡片 */}
--- a/src/pages/developer/UpdateSkillInfoPage.jsx
+++ b/src/pages/developer/UpdateSkillInfoPage.jsx
@@ -1,4 +1,3 @@
-import { FiChevronLeft } from 'react-icons/fi';
 import { useState } from 'react';
 import Toast from '../../components/common/Toast.jsx';

@@ -16,8 +15,9 @@ function UpdateSkillInfoPage({ skill, onBack }) {

    return (
        <>
-            <div className="dev-back-btn" onClick={onBack}>
-                <FiChevronLeft /> 返回技能详情
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回技能详情</span>
            </div>
            <div className="card">
                <div className="card-header">
--- a/src/pages/developer/UploadSkillPage.jsx
+++ b/src/pages/developer/UploadSkillPage.jsx
@@ -9,10 +9,15 @@ function UploadSkillPage({ onBack }) {
    };

    return (
-        <div className="card">
-            <div className="card-header">
-                <div className="card-title">创建技能</div>
+        <>
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回技能管理</span>
            </div>
+            <div className="card">
+                <div className="card-header">
+                    <div className="card-title">创建技能</div>
+                </div>
            <div className="card-body">
                <div style={{ marginBottom: '20px', padding: '12px', background: '#EFF6FF', borderRadius: '8px', color: '#1E40AF', fontSize: '14px' }}>
                    <strong>提示：</strong>此处填写的信息仅供开发者自己管理使用，不会在技能商店展示。商店展示信息需要在上传版本时填写。
@@ -30,13 +35,14 @@ function UploadSkillPage({ onBack }) {
                    <button className="btn btn-primary" onClick={handleCreate}>创建技能</button>
                </div>
            </div>
+            </div>
            <Toast
                visible={showToast}
                type="success"
                message="创建成功"
                onClose={() => setShowToast(false)}
            />
-        </div>
+        </>
    );
 }

--- a/src/pages/developer/UploadVersionPage.jsx
+++ b/src/pages/developer/UploadVersionPage.jsx
@@ -1,4 +1,4 @@
-import { FiUpload, FiChevronLeft, FiX } from 'react-icons/fi';
+import { FiUpload, FiX } from 'react-icons/fi';
 import { useState } from 'react';
 import { api } from '../../services/api.js';
 import Toast from '../../components/common/Toast.jsx';
@@ -44,8 +44,9 @@ function UploadVersionPage({ skill, onBack }) {

    return (
        <>
-            <div className="dev-back-btn" onClick={onBack}>
-                <FiChevronLeft /> 返回技能详情
+            <div className="page-back-btn" onClick={onBack}>
+                <span>←</span>
+                <span>返回技能详情</span>
            </div>
            <div className="card">
                <div className="card-header">
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -10,7 +10,7 @@ import { logs } from '../data/logs.js';
 import { mySkills, skillCategories, devDocs, developerOverview } from '../data/developerData.js';
 import { projectMembers } from '../data/members.js';
 import { scheduledTasks } from '../data/tasks.js';
-import { adminDepartments, adminUsers, adminProjects, adminOverview, adminLogs } from '../data/adminData.js';
+import { adminDepartments, adminUsers, adminProjects, adminOverview, adminLogs, modelConfigs } from '../data/adminData.js';

 /**
 * 用户相关 API
@@ -25,6 +25,27 @@ export const user = {
    avatar: '张',
    role: 'AI 产品部',
  }),
+
+  /**
+   * 更新用户资料
+   * @param {Object} profile - 用户资料
+   * @returns {Object} 更新后的用户信息
+   */
+  updateProfile: (profile) => {
+    console.log('updateProfile:', profile);
+    return { success: true };
+  },
+
+  /**
+   * 修改密码
+   * @param {string} currentPassword - 当前密码
+   * @param {string} newPassword - 新密码
+   * @returns {Object} 修改结果
+   */
+  changePassword: (currentPassword, newPassword) => {
+    console.log('changePassword:', { currentPassword, newPassword });
+    return { success: true };
+  },
 };

 /**
@@ -262,6 +283,97 @@ export const adminApi = {
      });
    },
  },
+
+  /**
+   * 模型配置相关 API
+   */
+  modelConfigs: {
+    /**
+     * 获取所有模型配置
+     * @returns {Array} 配置列表
+     */
+    list: () => modelConfigs,
+
+    /**
+     * 根据 ID 获取模型配置
+     * @param {string} id - 配置 ID
+     * @returns {Object|undefined} 配置对象
+     */
+    getById: (id) => modelConfigs.find(c => c.id === id),
+
+    /**
+     * 创建新配置
+     * @param {Object} data - 配置数据
+     * @returns {Object} 创建的配置
+     */
+    create: (data) => {
+      const newConfig = {
+        ...data,
+        id: `cfg_${String(modelConfigs.length + 1).padStart(3, '0')}`,
+        isActive: false,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+      modelConfigs.push(newConfig);
+      return newConfig;
+    },
+
+    /**
+     * 更新配置
+     * @param {string} id - 配置 ID
+     * @param {Object} data - 更新数据
+     * @returns {Object|undefined} 更新后的配置
+     */
+    update: (id, data) => {
+      const index = modelConfigs.findIndex(c => c.id === id);
+      if (index === -1) return undefined;
+      modelConfigs[index] = {
+        ...modelConfigs[index],
+        ...data,
+        updatedAt: new Date().toISOString(),
+      };
+      return modelConfigs[index];
+    },
+
+    /**
+     * 删除配置
+     * @param {string} id - 配置 ID
+     * @returns {boolean} 是否删除成功
+     */
+    delete: (id) => {
+      const index = modelConfigs.findIndex(c => c.id === id);
+      if (index === -1) return false;
+      modelConfigs.splice(index, 1);
+      return true;
+    },
+
+    /**
+     * 获取当前生效的配置
+     * @returns {Object|undefined} 生效的配置
+     */
+    getActive: () => modelConfigs.find(c => c.isActive),
+
+    /**
+     * 设为默认配置
+     * @param {string} id - 配置 ID
+     * @returns {Object|undefined} 新生效的配置
+     */
+    setActive: (id) => {
+      const target = modelConfigs.find(c => c.id === id);
+      if (!target) return undefined;
+
+      // 将所有配置设为非生效
+      modelConfigs.forEach(c => {
+        c.isActive = false;
+      });
+
+      // 将目标设为生效
+      target.isActive = true;
+      target.updatedAt = new Date().toISOString();
+
+      return target;
+    },
+  },
 };

 /**
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -1,188 +0,0 @@
-// 通用组件样式
-// 按钮、卡片、表单、状态标签等
-
-@use 'variables' as *;
-@use 'mixins' as *;
-
-// 按钮
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 8px 16px;
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: var(--radius-md);
-    border: 1px solid transparent;
-    cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    text-decoration: none;
-    
-    &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-}
-
-// 主要按钮
-.btn-primary {
-    background: var(--color-primary);
-    color: white;
-    border-color: var(--color-primary);
-    
-    &:hover {
-        background: var(--color-primary-dark);
-        border-color: var(--color-primary-dark);
-    }
-}
-
-// 小按钮
-.btn-sm {
-    padding: 6px 12px;
-    font-size: 13px;
-}
-
-// 按钮组
-.btn-group {
-    display: flex;
-    gap: 8px;
-}
-
-// 卡片
-.card {
-    background: var(--color-bg-1);
-    border: 1px solid var(--color-border-2);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-card);
-    overflow: hidden;
-}
-
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--color-border-2);
-}
-
-.card-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--color-text-1);
-}
-
-.card-body {
-    padding: 20px;
-}
-
-// 表单
-.form-group {
-    margin-bottom: 16px;
-}
-
-.form-label {
-    display: block;
-    margin-bottom: 6px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-1);
-}
-
-.form-control {
-    width: 100%;
-    padding: 8px 12px;
-    font-size: 14px;
-    border: 1px solid var(--color-border-3);
-    border-radius: var(--radius-md);
-    background: var(--color-bg-1);
-    color: var(--color-text-1);
-    transition: border-color 0.2s;
-    
-    &:focus {
-        outline: none;
-        border-color: var(--color-primary);
-        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-    }
-    
-    &::placeholder {
-        color: var(--color-text-3);
-    }
-}
-
-.form-row {
-    display: flex;
-    gap: 20px;
-}
-
-.form-col {
-    flex: 1;
-}
-
-// 状态标签
-.status {
-    display: inline-flex;
-    align-items: center;
-    padding: 2px 8px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 999px;
-    
-    &.status-running {
-        background: var(--color-success-light);
-        color: var(--color-success);
-    }
-    
-    &.status-stopped {
-        background: var(--color-bg-3);
-        color: var(--color-text-3);
-    }
-    
-    &.status-error {
-        background: var(--color-danger-light);
-        color: var(--color-danger);
-    }
-    
-    &.status-warning {
-        background: var(--color-warning-light);
-        color: var(--color-warning);
-    }
-    
-    &.role-admin {
-        background: var(--color-primary-light);
-        color: var(--color-primary);
-    }
-    
-    &.role-member {
-        background: var(--color-bg-3);
-        color: var(--color-text-2);
-    }
-}
-
-// 文本按钮
-.text-btn {
-    padding: 4px 8px;
-    font-size: 13px;
-    font-weight: 500;
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-radius: var(--radius-sm);
-    transition: background 0.2s;
-    
-    &:hover {
-        background: var(--color-bg-2);
-    }
-}
-
-.text-btn-primary {
-    color: var(--color-primary);
-}
-
-.text-btn-success {
-    color: var(--color-success);
-}
-
-.text-btn-danger {
-    color: var(--color-danger);
-}
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,37 +0,0 @@
-// 布局样式
-// 侧边栏、主内容区、页眉等
-
-@use 'variables' as *;
-@use 'mixins' as *;
-
-// 主布局
-.layout {
-    display: flex;
-    height: 100vh;
-    overflow: hidden;
-}
-
-// 侧边栏
-.sidebar {
-    width: var(--sidebar-width);
-    background: var(--color-bg-1);
-    border-right: 1px solid var(--color-border-2);
-    position: fixed;
-    height: 100vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-    z-index: 101;
-    display: flex;
-    flex-direction: column;
-}
-
-.sidebar-header {
-    height: var(--header-height);
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    border-bottom: 1px solid var(--color-border-2);
-    flex-shrink: 0;
-}
-
-// 其他布局样式...
--- a/src/styles/_pages.scss
+++ b/src/styles/_pages.scss
@@ -1,52 +0,0 @@
-// 页面特定样式
-// 首页、管理台、开发台、技能市场等
-
-@use 'variables' as *;
-@use 'mixins' as *;
-
-// 首页样式（从内联样式迁移）
-.home-layout {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
-    position: relative;
-    overflow: hidden;
-    
-    &::before {
-        content: '';
-        position: absolute;
-        top: -30%;
-        right: -20%;
-        width: 800px;
-        height: 800px;
-        background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
-        pointer-events: none;
-    }
-    
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: -20%;
-        left: -10%;
-        width: 600px;
-        height: 600px;
-        background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
-        pointer-events: none;
-    }
-}
-
-.home-header {
-    padding: 0 48px;
-    height: 68px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    z-index: 1;
-    border-bottom: 1px solid var(--color-border-2);
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(12px);
-}
-
-// 其他页面样式将逐步添加...
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,54 +0,0 @@
-// SCSS Variables - 设计系统变量
-// 注意：这些是SCSS变量，用于开发时引用
-// CSS变量定义在:root中，供运行时使用
-
-// 品牌主色
-$primary: #3B82F6;
-$primary-light: #EFF6FF;
-$primary-lighter: #F8FAFC;
-$primary-dark: #2563EB;
-
-// 功能色
-$success: #10B981;
-$success-light: #ECFDF5;
-$warning: #F59E0B;
-$warning-light: #FFFBEB;
-$danger: #EF4444;
-$danger-light: #FEF2F2;
-
-// 中性色
-$text-1: #1E293B;
-$text-2: #475569;
-$text-3: #94A3B8;
-$text-4: #CBD5E1;
-
-// 边框/分割线
-$border-1: #F8FAFC;
-$border-2: #F1F5F9;
-$border-3: #E2E8F0;
-
-// 背景色
-$bg-1: #FFFFFF;
-$bg-2: #F8FAFC;
-$bg-3: #F1F5F9;
-$bg-4: #E2E8F0;
-
-// 阴影
-$shadow-1: 0 1px 3px rgba(15, 23, 42, 0.04);
-$shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
-$shadow-3: 0 8px 24px rgba(15, 23, 42, 0.08);
-$shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04);
-
-// 布局尺寸
-$sidebar-width: 240px;
-$header-height: 60px;
-$radius-sm: 6px;
-$radius-md: 8px;
-$radius-lg: 12px;
-$radius-xl: 16px;
-
-// 过渡动画
-$transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-// 字体
-$font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -0,0 +1,28 @@
+// Components 入口
+
+@forward 'button';
+@forward 'card';
+@forward 'table';
+@forward 'form';
+@forward 'tag';
+@forward 'modal';
+@forward 'toast';
+@forward 'pagination';
+@forward 'empty-state';
+@forward 'switch';
+@forward 'skill-card';
+@forward 'nav';
+@forward 'detail';
+@forward 'password-input';
+@forward 'search-bar';
+@forward 'stat-card';
+
+.page-back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    color: var(--color-primary);
+    font-weight: 600;
+    margin-bottom: 16px;
+}
--- a/src/styles/components/button/_index.scss
+++ b/src/styles/components/button/_index.scss
@@ -0,0 +1,200 @@
+// 按钮组件
+
+@use '../../tokens' as *;
+
+// Block
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 9px 16px;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border-3);
+    background: var(--color-bg-1);
+    color: var(--color-text-1);
+    cursor: pointer;
+    transition: all var(--transition);
+    white-space: nowrap;
+
+    &:hover {
+        background: var(--color-bg-2);
+        border-color: var(--color-border-3);
+        transform: translateY(-1px);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+}
+
+// Element: icon
+.btn__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Modifier: colors
+.btn--primary {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: #FFFFFF;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
+
+    &:hover {
+        background: var(--color-primary-dark);
+        border-color: var(--color-primary-dark);
+        color: #FFFFFF;
+        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
+    }
+}
+
+.btn--success {
+    background: var(--color-success);
+    border-color: var(--color-success);
+    color: #FFFFFF;
+
+    &:hover {
+        background: #059669;
+        border-color: #059669;
+        color: #FFFFFF;
+    }
+}
+
+.btn--warning {
+    background: var(--color-warning);
+    border-color: var(--color-warning);
+    color: #FFFFFF;
+
+    &:hover {
+        background: #D97706;
+        border-color: #D97706;
+        color: #FFFFFF;
+    }
+}
+
+.btn--danger {
+    background: var(--color-danger);
+    border-color: var(--color-danger);
+    color: #FFFFFF;
+
+    &:hover {
+        background: #DC2626;
+        border-color: #DC2626;
+        color: #FFFFFF;
+    }
+}
+
+// Modifier: ghost (text button style)
+.btn--ghost {
+    padding: 2px 6px;
+    font-size: $font-size-sm + 1;
+    background: transparent;
+    border: none;
+    color: var(--color-primary);
+    font-weight: $font-weight-medium;
+    box-shadow: none;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--color-primary-dark);
+        background: transparent;
+        transform: none;
+    }
+
+    &--danger {
+        color: var(--color-danger);
+
+        &:hover {
+            color: #DC2626;
+        }
+    }
+
+    &--success {
+        color: var(--color-success);
+
+        &:hover {
+            color: #059669;
+        }
+    }
+
+    &--warning {
+        color: var(--color-warning);
+
+        &:hover {
+            color: #D97706;
+        }
+    }
+}
+
+// Modifier: sizes
+.btn--sm {
+    padding: 6px 12px;
+    font-size: $font-size-sm + 1;
+    font-weight: $font-weight-semibold;
+}
+
+.btn--lg {
+    padding: 12px 24px;
+    font-size: $font-size-md;
+}
+
+// Modifier: layout
+.btn--icon-only {
+    padding: 8px;
+    width: 36px;
+    height: 36px;
+}
+
+.btn--block {
+    display: flex;
+    width: 100%;
+}
+
+// Modifier: state
+.btn--loading {
+    position: relative;
+    color: transparent;
+    pointer-events: none;
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 2px solid currentColor;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: btn-spin 0.6s linear infinite;
+    }
+}
+
+@keyframes btn-spin {
+    to { transform: rotate(360deg); }
+}
+
+// Button group
+.btn-group {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+// Legacy compatibility aliases
+.btn-primary { @extend .btn--primary; }
+.btn-success { @extend .btn--success; }
+.btn-warning { @extend .btn--warning; }
+.btn-danger { @extend .btn--danger; }
+.btn-sm { @extend .btn--sm; }
+.text-btn { @extend .btn--ghost; }
+.text-btn-primary { @extend .btn--ghost; }
+.text-btn-success { @extend .btn--ghost--success; }
+.text-btn-danger { @extend .btn--ghost--danger; }
--- a/src/styles/components/card/_index.scss
+++ b/src/styles/components/card/_index.scss
@@ -0,0 +1,63 @@
+// 卡片组件
+
+@use '../../tokens' as *;
+
+// Block
+.card {
+    background: var(--color-bg-1);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-card);
+    margin-bottom: 20px;
+    border: 1px solid var(--color-border-2);
+    overflow: hidden;
+}
+
+// Element: header
+.card__header {
+    padding: 18px 22px;
+    border-bottom: 1px solid var(--color-border-2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--color-bg-1);
+}
+
+// Element: title
+.card__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--color-text-1);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+// Element: body
+.card__body {
+    padding: 22px;
+}
+
+// Element: footer
+.card__footer {
+    padding: 16px 22px;
+    border-top: 1px solid var(--color-border-2);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+// Modifier: variants
+.card--flat {
+    box-shadow: none;
+}
+
+.card--elevated {
+    box-shadow: var(--shadow-2);
+}
+
+// Legacy compatibility
+.card-header { @extend .card__header; }
+.card-title { @extend .card__title; }
+.card-body { @extend .card__body; }
+.card-footer { @extend .card__footer; }
--- a/src/styles/components/detail/_index.scss
+++ b/src/styles/components/detail/_index.scss
@@ -0,0 +1,151 @@
+// 详情页组件
+
+@use '../../tokens' as *;
+
+// 详情页头部
+.detail-header {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.detail-header__icon {
+    width: 72px;
+    height: 72px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 32px;
+    flex-shrink: 0;
+}
+
+.detail-header__main {
+    flex: 1;
+}
+
+// 详情标签组
+.detail-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0;
+}
+
+.detail-tag {
+    padding: 4px 12px;
+    background: var(--color-bg-3);
+    border-radius: 999px;
+    font-size: $font-size-sm + 1;
+    color: var(--color-text-3);
+}
+
+// 详情统计
+.detail-stats {
+    display: flex;
+    gap: 24px;
+    color: var(--color-text-3);
+    font-size: $font-size-base;
+}
+
+// 详情分区
+.detail-section {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid var(--color-border-3);
+
+    h3 {
+        font-size: $font-size-lg;
+        font-weight: 700;
+        margin-bottom: 12px;
+    }
+}
+
+// 文件列表
+.file-list__item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    background: var(--color-bg-2);
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.file-list__icon {
+    width: 32px;
+    height: 32px;
+    background: #E8F3FF;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-primary);
+}
+
+.file-list__info {
+    flex: 1;
+}
+
+.file-list__name {
+    font-weight: $font-weight-semibold;
+    font-size: $font-size-base;
+}
+
+.file-list__size {
+    font-size: $font-size-sm;
+    color: var(--color-text-3);
+}
+
+// 版本列表
+.version-list__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+    border: 1px solid var(--color-border-3);
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.version-list__info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.version-list__tag {
+    padding: 3px 10px;
+    background: var(--color-bg-3);
+    border-radius: 6px;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+
+    &--current {
+        background: #E8F3FF;
+        color: var(--color-primary);
+    }
+}
+
+.version-list__desc {
+    color: var(--color-text-3);
+    font-size: $font-size-base;
+}
+
+.version-list__date {
+    color: var(--color-text-3);
+    font-size: $font-size-sm + 1;
+}
+
+// 返回按钮
+.back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    color: var(--color-primary);
+    font-weight: $font-weight-semibold;
+    margin-bottom: 16px;
+}
--- a/src/styles/components/empty-state/_index.scss
+++ b/src/styles/components/empty-state/_index.scss
@@ -0,0 +1,19 @@
+// 空状态组件
+
+@use '../../tokens' as *;
+
+.empty-state {
+    text-align: center;
+    padding: 60px 24px;
+    color: var(--color-text-3);
+}
+
+.empty-state-icon {
+    font-size: 56px;
+    margin-bottom: 16px;
+    opacity: 0.6;
+}
+
+.empty-state-text {
+    font-size: $font-size-base;
+}
--- a/src/styles/components/form/_index.scss
+++ b/src/styles/components/form/_index.scss
@@ -0,0 +1,330 @@
+// 表单组件
+
+@use '../../tokens' as *;
+
+// Block
+.form-group {
+    margin-bottom: 22px;
+}
+
+// Element: label
+.form__label,
+.form-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: $font-weight-semibold;
+    color: var(--color-text-2);
+    font-size: $font-size-base;
+
+    &.required::after {
+        content: ' *';
+        color: var(--color-danger);
+    }
+}
+
+// Element: input
+.form__input,
+.form-control {
+    width: 100%;
+    padding: 9px 12px;
+    font-size: $font-size-base;
+    line-height: 1.6;
+    border: 1px solid var(--color-border-3);
+    border-radius: var(--radius-md);
+    background: var(--color-bg-1);
+    color: var(--color-text-1);
+    transition: all var(--transition);
+
+    &:hover {
+        border-color: #94A3B8;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    &::placeholder {
+        color: var(--color-text-4);
+    }
+
+    &[readonly] {
+        background: var(--color-bg-2);
+        color: var(--color-text-3);
+        cursor: not-allowed;
+    }
+
+    &.is-invalid {
+        border-color: var(--color-danger);
+
+        &:focus {
+            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
+        }
+    }
+}
+
+// Element: error
+.form__error,
+.form-error {
+    font-size: $font-size-sm;
+    color: var(--color-danger);
+    margin-top: 4px;
+}
+
+// Element: hint
+.form__hint {
+    font-size: $font-size-sm;
+    color: #6B7280;
+    margin-top: 4px;
+}
+
+// Element: row/col
+.form__row,
+.form-row {
+    display: flex;
+    gap: 20px;
+}
+
+.form__col,
+.form-col {
+    flex: 1;
+}
+
+// Tag input
+.tag-input-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 12px;
+    border: 1px solid var(--color-border-3);
+    border-radius: var(--radius-md);
+    background: var(--color-bg-1);
+    min-height: 42px;
+    align-items: center;
+
+    &:focus-within {
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+}
+
+.tag-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    background: var(--color-primary-light);
+    color: var(--color-primary);
+    border-radius: 999px;
+    font-size: $font-size-sm + 1;
+    font-weight: $font-weight-medium;
+}
+
+.tag-remove {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    transition: background 0.2s;
+
+    &:hover {
+        background: rgba(59, 130, 246, 0.2);
+    }
+}
+
+.tag-input {
+    flex: 1;
+    min-width: 120px;
+    border: none;
+    outline: none;
+    font-size: $font-size-base;
+    background: transparent;
+    color: var(--color-text-1);
+
+    &::placeholder {
+        color: var(--color-text-4);
+    }
+}
+
+// List selector
+.list-selector {
+    margin-bottom: 16px;
+}
+
+.list-selector-input {
+    padding: 6px 10px;
+    font-size: $font-size-sm + 1;
+    margin-bottom: 10px;
+}
+
+.list-selector-tag {
+    padding: 6px 10px;
+    background: var(--color-primary-light);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--color-primary);
+    font-weight: $font-weight-medium;
+    font-size: $font-size-sm + 1;
+    margin-bottom: 10px;
+}
+
+.list-selector-tag-close {
+    cursor: pointer;
+    color: var(--color-text-3);
+
+    &:hover {
+        color: var(--color-text-1);
+    }
+}
+
+.list-selector-table {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+// Skill checkbox list
+.skill-checkbox-list {
+    border: 1px solid var(--color-border-3);
+    border-radius: var(--radius-md);
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.skill-checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background 0.15s;
+    border-bottom: 1px solid var(--color-border-2);
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &:hover {
+        background: var(--color-bg-2);
+    }
+
+    input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+}
+
+.skill-checkbox-label {
+    flex: 1;
+    font-weight: $font-weight-medium;
+    font-size: $font-size-base;
+    color: var(--color-text-1);
+}
+
+// Config form (legacy compatibility)
+.config-form {
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #E5E7EB;
+    padding: 24px;
+
+    .form-section {
+        margin-bottom: 32px;
+
+        &:last-of-type {
+            margin-bottom: 24px;
+        }
+
+        .section-title {
+            font-size: $font-size-lg;
+            font-weight: $font-weight-semibold;
+            color: #111827;
+            margin-bottom: 20px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid #E5E7EB;
+        }
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-label {
+        font-size: $font-size-base;
+        font-weight: $font-weight-medium;
+        color: #374151;
+        margin-bottom: 8px;
+
+        &.required::after {
+            content: ' *';
+            color: #EF4444;
+        }
+    }
+
+    .form-input,
+    .form-select {
+        width: 100%;
+        padding: 10px 12px;
+        font-size: $font-size-base;
+        border: 1px solid #D1D5DB;
+        border-radius: 6px;
+        background: white;
+        color: #111827;
+        transition: border-color 0.2s, box-shadow 0.2s;
+
+        &:focus {
+            outline: none;
+            border-color: #3B82F6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        &:disabled {
+            background: #F3F4F6;
+            color: #6B7280;
+            cursor: not-allowed;
+        }
+    }
+
+    .form-group.has-error .form-input,
+    .form-group.has-error .form-select {
+        border-color: #EF4444;
+    }
+
+    .error-message {
+        display: block;
+        font-size: $font-size-sm;
+        color: #EF4444;
+        margin-top: 6px;
+    }
+
+    .help-text {
+        display: block;
+        font-size: $font-size-sm;
+        color: #6B7280;
+        margin-top: 6px;
+    }
+
+    .form-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+        padding-top: 20px;
+        border-top: 1px solid #E5E7EB;
+    }
+}
+
+// Responsive
+@include mobile {
+    .form__row,
+    .form-row {
+        flex-direction: column;
+        gap: 0;
+    }
+}
--- a/src/styles/components/modal/_index.scss
+++ b/src/styles/components/modal/_index.scss
@@ -0,0 +1,92 @@
+// 弹窗组件
+
+@use '../../tokens' as *;
+
+// Overlay
+.modal__overlay,
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $z-index-modal;
+    backdrop-filter: blur(2px);
+}
+
+// Block
+.modal {
+    background: var(--color-bg-1);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
+    width: 420px;
+    max-width: 90vw;
+    animation: modal-in 0.2s ease-out;
+}
+
+@keyframes modal-in {
+    from {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+// Element: header
+.modal__header,
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--color-border-2);
+}
+
+.modal-title {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: var(--color-text-1);
+}
+
+.modal-close {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    color: var(--color-text-3);
+    transition: all 0.2s;
+
+    &:hover {
+        background: var(--color-bg-2);
+        color: var(--color-text-1);
+    }
+}
+
+// Element: body
+.modal__body,
+.modal-body {
+    padding: 20px;
+    font-size: $font-size-base;
+    color: var(--color-text-2);
+    line-height: 1.6;
+}
+
+// Element: footer
+.modal__footer,
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 20px;
+    border-top: 1px solid var(--color-border-2);
+}
--- a/src/styles/components/nav/_index.scss
+++ b/src/styles/components/nav/_index.scss
@@ -0,0 +1,48 @@
+// 导航组件
+
+@use '../../tokens' as *;
+
+// 统一导航项 (替代 menu-item, chat-nav-item, admin-nav-item)
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background 0.2s;
+    color: var(--color-text-2);
+    font-size: $font-size-base;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+        background: var(--color-bg-2);
+        color: var(--color-text-1);
+    }
+
+    &.active,
+    &--active {
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        font-weight: $font-weight-semibold;
+    }
+}
+
+.nav-item__icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: $font-size-lg;
+}
+
+.nav-item__text {
+    flex: 1;
+}
+
+.nav-item__meta {
+    font-size: $font-size-sm;
+    color: var(--color-text-3);
+}
--- a/src/styles/components/pagination/_index.scss
+++ b/src/styles/components/pagination/_index.scss
@@ -0,0 +1,47 @@
+// 分页组件
+
+@use '../../tokens' as *;
+
+.pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-top: 20px;
+}
+
+.pagination__item {
+    min-width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border-3);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition);
+    font-size: $font-size-sm + 1;
+    font-weight: $font-weight-medium;
+    color: var(--color-text-2);
+    background: var(--color-bg-1);
+
+    &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+    }
+
+    &--active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+        color: #FFFFFF;
+    }
+}
+
+// Legacy compatibility
+.pagination-item {
+    @extend .pagination__item;
+
+    &.active {
+        @extend .pagination__item--active;
+    }
+}
--- a/src/styles/components/password-input/_index.scss
+++ b/src/styles/components/password-input/_index.scss
@@ -0,0 +1,42 @@
+// 密码输入框组件
+
+@use '../../tokens' as *;
+
+.password-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .form__input,
+    .form-input {
+        padding-right: 40px;
+    }
+}
+
+.password-toggle {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    padding: 6px;
+    cursor: pointer;
+    color: #6B7280;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        color: #374151;
+    }
+}
+
+// Legacy compatibility
+.password-input-wrapper {
+    @extend .password-input;
+}
+
+.password-toggle-btn {
+    @extend .password-toggle;
+}
--- a/src/styles/components/search-bar/_index.scss
+++ b/src/styles/components/search-bar/_index.scss
@@ -0,0 +1,45 @@
+// 搜索栏组件
+
+@use '../../tokens' as *;
+
+.search-bar {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin-bottom: 8px;
+    align-items: flex-end;
+}
+
+.search-bar-row {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    align-items: flex-end;
+}
+
+.search-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+
+    label {
+        color: var(--color-text-2);
+        font-size: $font-size-sm + 1;
+        font-weight: $font-weight-semibold;
+    }
+}
+
+.search-item-inline {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.search-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border-2);
+}
--- a/src/styles/components/skill-card/_index.scss
+++ b/src/styles/components/skill-card/_index.scss
@@ -0,0 +1,115 @@
+// 技能卡片组件
+
+@use '../../tokens' as *;
+
+.skill-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 16px;
+}
+
+.skill-card {
+    background: var(--color-bg-1);
+    border: 1px solid var(--color-border-2);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    transition: all var(--transition);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    &:hover {
+        border-color: var(--color-border-3);
+        box-shadow: var(--shadow-2);
+        transform: translateY(-2px);
+    }
+}
+
+.skill-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    margin-bottom: 14px;
+}
+
+.skill-icon {
+    width: 52px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    flex-shrink: 0;
+}
+
+.skill-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.skill-name {
+    font-size: $font-size-lg;
+    font-weight: 700;
+    margin-bottom: 4px;
+    color: var(--color-text-1);
+}
+
+.skill-author {
+    font-size: $font-size-sm + 1;
+    color: var(--color-text-3);
+}
+
+.skill-desc {
+    color: var(--color-text-2);
+    font-size: $font-size-base;
+    margin-bottom: 14px;
+    line-height: 1.6;
+    height: 42px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.skill-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 14px;
+    max-height: 60px;
+    overflow: hidden;
+}
+
+.skill-tag {
+    padding: 3px 10px;
+    background: var(--color-bg-2);
+    border-radius: 999px;
+    font-size: $font-size-sm;
+    color: var(--color-text-3);
+    font-weight: $font-weight-medium;
+}
+
+.skill-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 14px;
+    border-top: 1px solid var(--color-border-2);
+    margin-top: auto;
+}
+
+.skill-stats {
+    display: flex;
+    gap: 16px;
+    font-size: $font-size-sm + 1;
+    color: var(--color-text-3);
+    font-weight: $font-weight-medium;
+}
+
+// Responsive
+@include mobile {
+    .skill-grid {
+        grid-template-columns: 1fr;
+    }
+}
--- a/src/styles/components/stat-card/_index.scss
+++ b/src/styles/components/stat-card/_index.scss
@@ -0,0 +1,68 @@
+// 统计卡片组件
+
+@use '../../tokens' as *;
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.stat-card {
+    background: var(--color-bg-1);
+    border-radius: var(--radius-lg);
+    padding: 22px;
+    border: 1px solid var(--color-border-2);
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(90deg, var(--color-primary) 0%, #8B5CF6 100%);
+    }
+}
+
+.stat-title {
+    font-size: $font-size-base;
+    color: var(--color-text-3);
+    margin-bottom: 8px;
+    font-weight: $font-weight-semibold;
+}
+
+.stat-value {
+    font-size: 32px;
+    font-weight: 800;
+    color: var(--color-text-1);
+    line-height: 1.2;
+    letter-spacing: -0.5px;
+}
+
+.stat-trend {
+    font-size: $font-size-sm + 1;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: $font-weight-semibold;
+
+    &.up {
+        color: var(--color-success);
+    }
+}
+
+// Responsive
+@include mobile {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .stat-value {
+        font-size: 26px;
+    }
+}
--- a/src/styles/components/switch/_index.scss
+++ b/src/styles/components/switch/_index.scss
@@ -0,0 +1,48 @@
+// 开关组件
+
+@use '../../tokens' as *;
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 22px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color-text-4);
+    transition: 0.3s;
+    border-radius: 22px;
+
+    &:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 2px;
+        bottom: 2px;
+        background-color: white;
+        transition: 0.3s;
+        border-radius: 50%;
+    }
+}
+
+input:checked + .slider {
+    background-color: var(--color-primary);
+}
+
+input:checked + .slider:before {
+    transform: translateX(22px);
+}
--- a/src/styles/components/table/_index.scss
+++ b/src/styles/components/table/_index.scss
@@ -0,0 +1,101 @@
+// 表格组件
+
+@use '../../tokens' as *;
+
+// Block
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: $font-size-base;
+
+    th, td {
+        padding: 14px 16px;
+        text-align: left;
+    }
+
+    th {
+        background: var(--color-bg-2);
+        font-weight: 700;
+        color: var(--color-text-2);
+        font-size: $font-size-sm + 1;
+        letter-spacing: 0.2px;
+        border-bottom: 1px solid var(--color-border-3);
+    }
+
+    td {
+        border-bottom: 1px solid var(--color-border-2);
+        color: var(--color-text-1);
+    }
+
+    tr:last-child td {
+        border-bottom: none;
+    }
+
+    tbody tr {
+        transition: background var(--transition);
+
+        &:hover td {
+            background: var(--color-bg-2);
+        }
+    }
+
+    // 可点击行
+    tbody tr.tr-clickable {
+        cursor: pointer;
+    }
+
+    // 操作列宽度
+    .col-actions {
+        width: 200px;
+        white-space: nowrap;
+    }
+
+    .col-actions--narrow {
+        width: 120px;
+        white-space: nowrap;
+    }
+
+    .col-actions--tiny {
+        width: 80px;
+        white-space: nowrap;
+    }
+    // 文本样式
+    .cell-muted {
+        color: var(--color-text-3);
+        font-size: $font-size-sm + 1;
+        white-space: nowrap;
+    }
+
+    // 表格无底部间距
+    &.no-margin-bottom {
+        margin-bottom: 0;
+    }
+}
+
+// 操作列按钮容器
+.table-actions {
+    display: flex;
+    gap: 8px;
+
+    button {
+        cursor: pointer;
+    }
+}
+
+// Element: wrapper
+.table__wrapper {
+    overflow-x: auto;
+    margin: -22px;
+    padding: 22px;
+}
+
+// Legacy compatibility
+.table-wrapper { @extend .table__wrapper; }
+
+// Responsive
+@include mobile {
+    .table__wrapper {
+        margin: -16px;
+        padding: 16px;
+    }
+}
--- a/src/styles/components/tag/_index.scss
+++ b/src/styles/components/tag/_index.scss
@@ -0,0 +1,65 @@
+// 标签组件
+
+@use '../../tokens' as *;
+
+// Block
+.tag {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: $font-size-sm + 1;
+    font-weight: $font-weight-medium;
+}
+
+// Modifier: status variants
+.tag--running {
+    background: var(--color-success-light);
+    color: var(--color-success);
+}
+
+.tag--stopped {
+    background: var(--color-bg-3);
+    color: var(--color-text-3);
+}
+
+.tag--starting {
+    background: #DBEAFE;
+    color: #1E40AF;
+}
+
+.tag--error {
+    background: var(--color-danger-light);
+    color: var(--color-danger);
+}
+
+.tag--warning {
+    background: var(--color-warning-light);
+    color: var(--color-warning);
+}
+
+// Modifier: role variants
+.tag--admin {
+    background: var(--color-primary-light);
+    color: var(--color-primary);
+}
+
+.tag--member {
+    background: var(--color-bg-3);
+    color: var(--color-text-2);
+}
+
+.tag--developer {
+    background: var(--color-warning-light);
+    color: #D97706;
+}
+
+// Legacy compatibility
+.status { @extend .tag; }
+.status-running { @extend .tag--running; }
+.status-stopped { @extend .tag--stopped; }
+.status-starting { @extend .tag--starting; }
+.status-error { @extend .tag--error; }
+.status-warning { @extend .tag--warning; }
+.role-admin { @extend .tag--admin; }
+.role-member { @extend .tag--member; }
+.role-developer { @extend .tag--developer; }
--- a/src/styles/components/toast/_index.scss
+++ b/src/styles/components/toast/_index.scss
@@ -0,0 +1,88 @@
+// Toast 提示组件
+
+@use '../../tokens' as *;
+
+// Block
+.toast {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
+    z-index: $z-index-toast;
+    animation: toast-in 0.3s ease-out;
+    font-size: $font-size-base;
+    font-weight: $font-weight-medium;
+}
+
+@keyframes toast-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+// Modifier: variants
+.toast--success {
+    background: var(--color-success-light);
+    color: var(--color-success);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.toast--error {
+    background: var(--color-danger-light);
+    color: var(--color-danger);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.toast--warning {
+    background: var(--color-warning-light);
+    color: var(--color-warning);
+    border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.toast--info {
+    background: var(--color-primary-light);
+    color: var(--color-primary);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+// Element: icon
+.toast-icon {
+    display: flex;
+    align-items: center;
+    font-size: $font-size-lg;
+}
+
+// Element: message
+.toast-message {
+    flex: 1;
+}
+
+// Element: close
+.toast-close {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+// Legacy compatibility
+.toast-success { @extend .toast--success; }
+.toast-error { @extend .toast--error; }
+.toast-warning { @extend .toast--warning; }
+.toast-info { @extend .toast--info; }
--- a/src/styles/core/_base.scss
+++ b/src/styles/core/_base.scss
@@ -0,0 +1,12 @@
+// 全局 body 样式
+@use '../tokens/typography' as *;
+
+body {
+    font-family: $font-family;
+    font-size: $font-size-base;
+    line-height: $line-height-normal;
+    color: var(--color-text-1);
+    background-color: var(--color-bg-2);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
--- a/src/styles/core/_css-variables.scss
+++ b/src/styles/core/_css-variables.scss
@@ -1,16 +1,11 @@
-// 基础重置与全局样式
-@use 'variables' as *;
+// CSS 变量定义 - :root
+@use '../tokens/colors' as *;
+@use '../tokens/shadows' as *;
+@use '../tokens/radius' as *;
+@use '../tokens/transitions' as *;

-// 重置
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-// CSS变量定义在:root中
 :root {
-    /* 品牌主色 - 清新科技蓝 */
+    /* 品牌主色 */
    --color-primary: #{$primary};
    --color-primary-light: #{$primary-light};
    --color-primary-lighter: #{$primary-lighter};
@@ -24,7 +19,7 @@
    --color-danger: #{$danger};
    --color-danger-light: #{$danger-light};

-    /* 中性色 - 现代简约灰阶 */
+    /* 中性色 */
    --color-text-1: #{$text-1};
    --color-text-2: #{$text-2};
    --color-text-3: #{$text-3};
@@ -41,15 +36,15 @@
    --color-bg-3: #{$bg-3};
    --color-bg-4: #{$bg-4};

-    /* 阴影 - 柔和现代 */
+    /* 阴影 */
    --shadow-1: #{$shadow-1};
    --shadow-2: #{$shadow-2};
    --shadow-3: #{$shadow-3};
    --shadow-card: #{$shadow-card};

    /* 布局尺寸 */
-    --sidebar-width: #{$sidebar-width};
-    --header-height: #{$header-height};
+    --sidebar-width: 240px;
+    --header-height: 60px;
    --radius-sm: #{$radius-sm};
    --radius-md: #{$radius-md};
    --radius-lg: #{$radius-lg};
@@ -58,14 +53,3 @@
    /* 过渡动画 */
    --transition: #{$transition};
 }
-
-// 全局body样式
-body {
-    font-family: $font-family;
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--color-text-1);
-    background-color: var(--color-bg-2);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
--- a/src/styles/core/_index.scss
+++ b/src/styles/core/_index.scss
@@ -0,0 +1,5 @@
+// Core 入口
+
+@forward 'reset';
+@forward 'css-variables';
+@forward 'base';
--- a/src/styles/core/_reset.scss
+++ b/src/styles/core/_reset.scss
@@ -0,0 +1,6 @@
+// CSS 重置
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
--- a/src/styles/layouts/_admin-layout.scss
+++ b/src/styles/layouts/_admin-layout.scss
@@ -0,0 +1,179 @@
+// 管理台布局
+
+@use '../tokens' as *;
+
+.admin-layout {
+    display: flex;
+    height: 100%;
+}
+
+// 管理台侧边栏
+.admin-layout__sidebar,
+.admin-sidebar {
+    width: 240px;
+    background: var(--color-bg-1);
+    border-right: 1px solid var(--color-border-2);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    height: 100%;
+}
+
+.admin-sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--color-border-2);
+}
+
+.admin-sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+}
+
+// 管理台导航项 - 统一使用 nav-item
+.admin-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background 0.2s;
+    color: var(--color-text-2);
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 2px;
+
+    &:hover {
+        background: var(--color-bg-2);
+        color: var(--color-text-1);
+    }
+
+    &.active {
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+    }
+}
+
+.admin-nav-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.admin-nav-text {
+    flex: 1;
+}
+
+// 管理台用户区域
+.admin-sidebar-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-top: 1px solid var(--color-border-2);
+    background: var(--color-bg-2);
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+        background: var(--color-bg-3);
+    }
+}
+
+.admin-sidebar-user-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.admin-sidebar-user-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-1);
+    margin-bottom: 2px;
+    @include text-truncate;
+}
+
+.admin-sidebar-user-role {
+    font-size: 12px;
+    color: var(--color-text-3);
+    @include text-truncate;
+}
+
+// 管理台内容区
+.admin-layout__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+// 成员选择样式
+.member-selection {
+    border: 1px solid var(--color-border-3);
+    border-radius: var(--radius-md);
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.member-checkbox-item,
+.member-radio-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background 0.15s;
+    border-bottom: 1px solid var(--color-border-2);
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &:hover {
+        background: var(--color-bg-2);
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+}
+
+.member-checkbox-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.member-checkbox-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.member-checkbox-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--color-text-1);
+}
+
+.member-checkbox-dept {
+    font-size: 12px;
+    color: var(--color-text-3);
+}
--- a/src/styles/layouts/_app-shell.scss
+++ b/src/styles/layouts/_app-shell.scss
@@ -0,0 +1,300 @@
+// AppShell 布局 - sidebar + header + main
+
+@use '../tokens' as *;
+
+// 主布局
+.app-shell,
+.layout {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+// 侧边栏
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--color-bg-1);
+    border-right: 1px solid var(--color-border-2);
+    position: fixed;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: $z-index-sidebar;
+    display: flex;
+    flex-direction: column;
+}
+
+// 侧边栏头部
+.sidebar-header {
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom: 1px solid var(--color-border-2);
+    flex-shrink: 0;
+}
+
+// 品牌区
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.sidebar-logo-icon {
+    width: 28px;
+    height: 28px;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
+    border-radius: 6px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 14px;
+        height: 10px;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 4px 4px 2px 2px;
+        top: 5px;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 18px;
+        height: 10px;
+        background: rgba(255, 255, 255, 0.85);
+        border-radius: 2px 2px 4px 4px;
+        bottom: 4px;
+    }
+
+    span {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: rgba(59, 130, 246, 0.9);
+        border-radius: 50%;
+        top: 9px;
+        z-index: 1;
+
+        &:nth-child(1) { left: 9px; }
+        &:nth-child(2) { right: 9px; }
+    }
+}
+
+.sidebar-brand-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.sidebar-logo {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-text-1);
+    letter-spacing: -0.3px;
+    line-height: 1.2;
+}
+
+// 导航区
+.sidebar__nav,
+.sidebar-menu {
+    padding: 16px 12px;
+    flex: 1;
+}
+
+.sidebar-divider {
+    height: 1px;
+    background: var(--color-border-2);
+    margin: 12px 0;
+}
+
+.sidebar-subtitle {
+    font-size: 13px;
+    color: var(--color-text-3);
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+// 导航项 - 统一使用 .nav-item
+.nav-item,
+.menu-item {
+    display: flex;
+    align-items: center;
+    padding: 11px 14px;
+    margin: 2px 0;
+    color: var(--color-text-2);
+    cursor: pointer;
+    border-radius: var(--radius-md);
+    transition: all var(--transition);
+    position: relative;
+    font-weight: 500;
+
+    &:hover {
+        color: var(--color-text-1);
+        background: var(--color-bg-2);
+    }
+
+    &.active,
+    &--active {
+        color: var(--color-primary);
+        background: var(--color-primary-light);
+        font-weight: 600;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 3px;
+            height: 20px;
+            background: var(--color-primary);
+            border-radius: 0 4px 4px 0;
+        }
+    }
+}
+
+.nav-item__icon,
+.menu-item-icon {
+    margin-right: 12px;
+    width: 20px;
+    text-align: center;
+    font-size: 18px;
+}
+
+// 主内容区
+.app-shell__main,
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+// 顶部栏
+.app-shell__header,
+.header {
+    height: var(--header-height);
+    background: var(--color-bg-1);
+    border-bottom: 1px solid var(--color-border-2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    position: sticky;
+    top: 0;
+    z-index: $z-index-header;
+}
+
+.header__left,
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-1);
+}
+
+// 用户头像
+.user-avatar {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+// 页面内容
+.page-content {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+}
+
+.page-content--full,
+.page-content-full {
+    flex: 1;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+// 移动端菜单按钮
+.mobile-menu-btn {
+    display: none;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: var(--radius-md);
+
+    &:hover {
+        background: var(--color-bg-2);
+    }
+}
+
+// 侧边栏遮罩
+.sidebar__overlay,
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.45);
+    z-index: $z-index-overlay;
+    backdrop-filter: blur(2px);
+
+    &.show {
+        display: block;
+    }
+}
+
+// 响应式 - 移动端
+@include mobile {
+    :root {
+        --header-height: 56px;
+    }
+
+    .sidebar {
+        transform: translateX(-100%);
+        transition: transform var(--transition);
+        z-index: $z-index-sidebar-mobile;
+
+        &.show {
+            transform: translateX(0);
+        }
+    }
+
+    .page-content {
+        padding: 16px;
+    }
+
+    .header-title {
+        display: none;
+    }
+
+    .mobile-menu-btn {
+        display: flex !important;
+    }
+}
--- a/src/styles/layouts/_chat-layout.scss
+++ b/src/styles/layouts/_chat-layout.scss
@@ -0,0 +1,277 @@
+// 聊天页面布局
+
+@use '../tokens' as *;
+
+.chat-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    background: var(--color-bg-1);
+}
+
+// 聊天顶部栏
+.chat-layout__header,
+.chat-header {
+    height: var(--header-height);
+    background: var(--color-bg-1);
+    border-bottom: 1px solid var(--color-border-2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+}
+
+.chat-header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.chat-logo {
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--color-text-1);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    &::before {
+        content: '';
+        width: 28px;
+        height: 28px;
+        background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
+        border-radius: 6px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255, 255, 255, 0.9);
+        border-radius: 4px;
+        transform: rotate(45deg);
+    }
+}
+
+// 聊天主区域
+.chat-main {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+// 会话列表侧边栏
+.chat-layout__sidebar,
+.chat-sidebar {
+    width: 260px;
+    background: var(--color-bg-2);
+    border-right: 1px solid var(--color-border-2);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+.chat-sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--color-border-2);
+}
+
+.chat-sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+}
+
+// 聊天侧边栏底部导航
+.chat-sidebar-nav {
+    border-top: 1px solid var(--color-border-2);
+    padding: 8px 12px;
+    background: var(--color-bg-1);
+}
+
+// 聊天导航项 - 统一使用 nav-item
+.chat-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background 0.2s;
+    color: var(--color-text-2);
+    font-size: 14px;
+    font-weight: 500;
+
+    &:hover {
+        background: var(--color-bg-2);
+        color: var(--color-text-1);
+    }
+
+    &.active {
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        font-weight: 600;
+    }
+}
+
+.chat-nav-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    font-size: 16px;
+}
+
+.chat-nav-text {
+    flex: 1;
+}
+
+// 会话列表
+.conversation-list {
+    // Container for conversation items
+}
+
+.conversation-item {
+    padding: 12px 14px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    margin-bottom: 4px;
+    transition: all var(--transition);
+    border: 1px solid transparent;
+
+    &:hover {
+        background: var(--color-bg-1);
+        border-color: var(--color-border-2);
+    }
+
+    &.active {
+        background: var(--color-bg-1);
+        border-color: var(--color-primary);
+        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
+    }
+}
+
+.conversation-title {
+    font-size: 14px;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 600;
+    color: var(--color-text-1);
+}
+
+.conversation-time {
+    font-size: 12px;
+    color: var(--color-text-3);
+}
+
+// 侧边栏用户状态区域
+.chat-sidebar-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-top: 1px solid var(--color-border-2);
+    background: var(--color-bg-1);
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+        background: var(--color-bg-2);
+    }
+}
+
+.chat-sidebar-user-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.chat-sidebar-user-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-1);
+    margin-bottom: 2px;
+    @include text-truncate;
+}
+
+.chat-sidebar-user-role {
+    font-size: 12px;
+    color: var(--color-text-3);
+    @include text-truncate;
+}
+
+// 侧边栏项目切换区域
+.chat-sidebar-project {
+    padding: 16px;
+    border-top: 1px solid var(--color-border-2);
+    background: var(--color-bg-1);
+}
+
+.chat-sidebar-project-label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-text-3);
+    margin-bottom: 6px;
+}
+
+.chat-sidebar-project-select {
+    width: 100%;
+    font-size: 13px;
+}
+
+// 聊天内容区
+.chat-layout__content,
+.chat-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg-1);
+    min-height: 0;
+    overflow: hidden;
+}
+
+.chat-content__messages,
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+    min-height: 0;
+}
+
+// 响应式
+@include mobile {
+    .chat-sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100%;
+        z-index: $z-index-sidebar;
+        transform: translateX(-100%);
+        transition: transform var(--transition);
+
+        &.show {
+            transform: translateX(0);
+        }
+    }
+
+    .chat-header {
+        padding: 0 16px;
+    }
+
+    .chat-messages {
+        padding: 16px;
+    }
+}
--- a/src/styles/layouts/_index.scss
+++ b/src/styles/layouts/_index.scss
@@ -0,0 +1,5 @@
+// Layouts 入口
+
+@forward 'app-shell';
+@forward 'chat-layout';
+@forward 'admin-layout';
--- a/src/styles/pages/_admin.scss
+++ b/src/styles/pages/_admin.scss
@@ -1,203 +1,64 @@
-/* ============ 管理台页面样式 ============ */
-/* 本文件包含管理台（Admin）相关的所有页面样式 */
+// Admin 页面样式 - 仅保留管理台特有组件

-/* 管理台侧边栏 */
-.admin-sidebar {
-  width: 240px;
-  background: var(--color-bg-1);
-  border-right: 1px solid var(--color-border-2);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  height: 100%;
-}
+@use '../tokens' as *;

-.admin-sidebar-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--color-border-2);
-}
-
-.admin-sidebar-nav {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.admin-nav-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background 0.2s;
-  color: var(--color-text-2);
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.admin-nav-item:hover {
-  background: var(--color-bg-2);
-  color: var(--color-text-1);
-}
-
-.admin-nav-item.active {
-  background: var(--color-primary-light);
-  color: var(--color-primary);
-}
-
-.admin-nav-icon {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.admin-nav-text {
-  flex: 1;
-}
-
-.admin-sidebar-user {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border-top: 1px solid var(--color-border-2);
-  background: var(--color-bg-2);
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.admin-sidebar-user:hover {
-  background: var(--color-bg-3);
-}
-
-.admin-sidebar-user-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.admin-sidebar-user-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text-1);
-  margin-bottom: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.admin-sidebar-user-role {
-  font-size: 12px;
-  color: var(--color-text-3);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 成员选择样式 */
-.member-selection {
-  border: 1px solid var(--color-border-3);
-  border-radius: var(--radius-md);
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.member-checkbox-item,
-.member-radio-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  cursor: pointer;
-  transition: background 0.15s;
-  border-bottom: 1px solid var(--color-border-2);
-}
-
-.member-checkbox-item:last-child,
-.member-radio-item:last-child {
-  border-bottom: none;
-}
-
-.member-checkbox-item:hover,
-.member-radio-item:hover {
-  background: var(--color-bg-2);
-}
-
-.member-checkbox-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
-  color: #FFFFFF;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-/* 总览页底部两栏布局 */
+// 总览页底部两栏布局
 .overview-bottom-row {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 20px;
-  margin-bottom: 20px;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 20px;
+    margin-bottom: 20px;
 }

 .overview-anomalies {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }

 .overview-recent-logs {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }

-/* 异常/待办事项列表 */
+// 异常/待办事项列表
 .anomaly-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
-  border-radius: var(--radius-md);
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-}
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border-radius: var(--radius-md);
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;

-.anomaly-item:last-child {
-  margin-bottom: 0;
+    &:last-child {
+        margin-bottom: 0;
+    }
 }

 .anomaly-warning {
-  background: var(--color-warning-light);
-  color: #92400E;
-}
+    background: var(--color-warning-light);
+    color: #92400E;

-.anomaly-warning .anomaly-icon {
-  color: var(--color-warning);
+    .anomaly-icon {
+        color: var(--color-warning);
+    }
 }

 .anomaly-info {
-  background: var(--color-primary-light);
-  color: #1E40AF;
-}
+    background: var(--color-primary-light);
+    color: #1E40AF;

-.anomaly-info .anomaly-icon {
-  color: var(--color-primary);
+    .anomaly-icon {
+        color: var(--color-primary);
+    }
 }

 .anomaly-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  font-size: 16px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 16px;
 }

 .anomaly-text {
-  flex: 1;
+    flex: 1;
 }
--- a/src/styles/pages/_console.scss
+++ b/src/styles/pages/_console.scss
@@ -1,73 +1,878 @@
-/* ============ 工作台页面样式 ============ */
-/* 本文件包含工作台（Console）相关的所有页面样式 */
+// Console 页面样式 - 仅保留工作台特有组件

-/* 聊天布局 */
-.chat-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--color-bg-1);
+@use '../tokens' as *;
+
+// 聊天内容区特有样式
+.chat-content__messages {
+    // Handled in layouts
 }

-/* 聊天顶部栏 */
-.chat-header {
-  height: var(--header-height);
-  background: var(--color-bg-1);
-  border-bottom: 1px solid var(--color-border-2);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
+// 欢迎消息
+.welcome-section {
+    max-width: 820px;
+    margin: 40px auto 0;
+    text-align: center;
 }

-/* 聊天侧边栏 */
-.chat-sidebar {
-  width: 260px;
-  background: var(--color-bg-2);
-  border-right: 1px solid var(--color-border-2);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  height: 100%;
-  overflow: hidden;
+.welcome-title {
+    font-size: 32px;
+    font-weight: 800;
+    margin-bottom: 10px;
+    color: var(--color-text-1);
 }

-/* 聊天内容区 */
-.chat-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-bg-1);
+.welcome-desc {
+    color: var(--color-text-3);
+    font-size: 16px;
+    margin-bottom: 40px;
 }

-/* 聊天消息区 */
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-  min-height: 0;
+.welcome-actions {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 14px;
+    max-width: 640px;
+    margin: 0 auto;
 }

-/* 会话项 */
-.conversation-item {
-  padding: 12px 14px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  margin-bottom: 4px;
-  transition: all var(--transition);
-  border: 1px solid transparent;
+.welcome-action {
+    padding: 18px 20px;
+    background: var(--color-bg-2);
+    border: 1px solid var(--color-border-2);
+    border-radius: var(--radius-lg);
+    text-align: left;
+    cursor: pointer;
+    transition: all var(--transition);
+
+    &:hover {
+        border-color: var(--color-primary);
+        background: var(--color-primary-light);
+        transform: translateY(-2px);
+    }
 }

-.conversation-item:hover {
-  background: var(--color-bg-1);
-  border-color: var(--color-border-2);
+.welcome-action-title {
+    font-weight: 700;
+    margin-bottom: 4px;
+    font-size: 15px;
+    color: var(--color-text-1);
 }

-.conversation-item.active {
-  background: var(--color-bg-1);
-  border-color: var(--color-primary);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
+.welcome-action-desc {
+    font-size: 13px;
+    color: var(--color-text-3);
 }

-/* 更多工作台样式请参考 global.scss 中的对应部分 */
-/* 包括：chat-input-wrapper, message-thinking, instance-stopped 等 */
+// 消息气泡
+.message {
+    display: flex;
+    gap: 14px;
+    margin-bottom: 28px;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+
+    &.user {
+        flex-direction: row-reverse;
+    }
+}
+
+.message-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+
+    &.assistant, &.user {
+        background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
+        color: #FFFFFF;
+    }
+}
+
+.message-content {
+    max-width: 72%;
+}
+
+.message-bubble {
+    padding: 14px 18px;
+    border-radius: 14px;
+    line-height: 1.7;
+    font-size: 15px;
+}
+
+.message.assistant .message-bubble {
+    background: var(--color-bg-2);
+    border-bottom-left-radius: 4px;
+}
+
+.message.user .message-bubble {
+    background: linear-gradient(135deg, var(--color-primary) 0%, #60A5FA 100%);
+    color: #FFFFFF;
+    border-bottom-right-radius: 4px;
+}
+
+.message-time {
+    font-size: 12px;
+    color: var(--color-text-4);
+    margin-top: 8px;
+    padding: 0 4px;
+}
+
+// AI 思考过程
+.message-thinking {
+    margin-bottom: 12px;
+    border: 1px solid var(--color-border-3);
+    border-radius: 12px;
+    overflow: hidden;
+    background: #FFFBEB;
+    cursor: pointer;
+}
+
+.message-thinking-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    background: rgba(255, 255, 255, 0.5);
+    font-size: 13px;
+    color: #92400E;
+    font-weight: 500;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.8);
+    }
+}
+
+.message-thinking-icon {
+    transition: transform 0.2s ease;
+    font-size: 12px;
+}
+
+.message-thinking.expanded .message-thinking-icon {
+    transform: rotate(90deg);
+}
+
+.message-thinking-content {
+    padding: 12px 14px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #78350F;
+    display: none;
+
+    .message-thinking.expanded & {
+        display: block;
+    }
+
+    ul {
+        margin: 8px 0 0 0;
+        padding-left: 20px;
+    }
+
+    li {
+        margin-bottom: 4px;
+    }
+}
+
+// 输入区
+.chat-input-wrapper {
+    padding: 16px 24px 24px;
+    border-top: none;
+    background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.95) 15%, #F8FAFC 100%);
+    position: relative;
+    flex-shrink: 0;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 60%;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, var(--color-border-3), transparent);
+    }
+}
+
+.chat-input-container {
+    max-width: 860px;
+    margin: 0 auto;
+}
+
+.chat-input-box {
+    border: 1px solid var(--color-border-3);
+    border-radius: 16px;
+    overflow: hidden;
+    background: var(--color-bg-1);
+    transition: all var(--transition);
+    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
+
+    &:hover {
+        border-color: #CBD5E1;
+        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
+    }
+
+    &:focus-within {
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 6px 20px rgba(15, 23, 42, 0.08);
+    }
+}
+
+.chat-input-main {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 10px 12px 10px 14px;
+}
+
+.chat-input {
+    flex: 1;
+    padding: 6px 2px;
+    border: none;
+    outline: none;
+    font-size: 15px;
+    resize: none;
+    min-height: 24px;
+    max-height: 200px;
+    line-height: 1.6;
+    background: transparent;
+    color: var(--color-text-1);
+
+    &::placeholder {
+        color: var(--color-text-4);
+    }
+}
+
+.chat-input-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.chat-input-tools {
+    display: flex;
+    gap: 2px;
+    padding-right: 6px;
+    border-right: 1px solid var(--color-border-2);
+}
+
+.chat-input-tool {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--color-text-3);
+    transition: all var(--transition);
+    font-size: 16px;
+
+    &:hover {
+        background: var(--color-bg-2);
+        color: var(--color-text-1);
+    }
+}
+
+.chat-send-btn {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    border: none;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #60A5FA 100%);
+    color: #FFFFFF;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    transition: all var(--transition);
+    flex-shrink: 0;
+    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
+
+    &:hover {
+        transform: scale(1.06);
+        box-shadow: 0 5px 14px rgba(59, 130, 246, 0.35);
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+}
+
+.chat-input-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 16px 10px;
+    background: transparent;
+    border-top: none;
+}
+
+.chat-input-hint {
+    font-size: 11px;
+    color: var(--color-text-4);
+}
+
+// 实例状态
+.instance-stopped {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 40px;
+}
+
+.instance-stopped-icon {
+    width: 96px;
+    height: 96px;
+    border-radius: 24px;
+    background: var(--color-bg-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    color: var(--color-text-3);
+    margin-bottom: 28px;
+}
+
+.instance-stopped-title {
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 10px;
+    color: var(--color-text-1);
+}
+
+.instance-stopped-desc {
+    color: var(--color-text-3);
+    margin-bottom: 28px;
+    font-size: 15px;
+}
+
+// 对话状态
+.conversation-stopped-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 60px 40px;
+    text-align: center;
+}
+
+.stopped-state-icon-wrapper {
+    position: relative;
+    margin-bottom: 28px;
+}
+
+.stopped-state-icon {
+    width: 88px;
+    height: 88px;
+    border-radius: 22px;
+    background: linear-gradient(135deg, var(--color-bg-2) 0%, var(--color-bg-3) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+    color: var(--color-text-3);
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+    border: 2px solid var(--color-border-2);
+}
+
+.stopped-state-badge {
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--color-text-3);
+    color: #FFFFFF;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 999px;
+    white-space: nowrap;
+}
+
+.stopped-state-title {
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 10px;
+    color: var(--color-text-1);
+}
+
+.stopped-state-desc {
+    color: var(--color-text-3);
+    margin-bottom: 28px;
+    font-size: 15px;
+    line-height: 1.6;
+}
+
+.stopped-state-info {
+    display: flex;
+    gap: 32px;
+    margin-bottom: 32px;
+    padding: 20px 28px;
+    background: var(--color-bg-2);
+    border-radius: 12px;
+    border: 1px solid var(--color-border-2);
+}
+
+.stopped-state-info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.stopped-state-info-label {
+    font-size: 12px;
+    color: var(--color-text-3);
+    font-weight: 500;
+}
+
+.stopped-state-info-value {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-text-1);
+}
+
+.stopped-state-btn {
+    padding: 12px 32px;
+    font-size: 15px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+// 启动中状态
+.conversation-starting-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 60px 40px;
+    text-align: center;
+}
+
+.starting-state-icon-wrapper {
+    margin-bottom: 28px;
+}
+
+.starting-state-title {
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 10px;
+    color: var(--color-text-1);
+}
+
+.starting-state-desc {
+    color: var(--color-text-3);
+    margin-bottom: 32px;
+    font-size: 15px;
+}
+
+.starting-state-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    max-width: 320px;
+}
+
+.starting-state-progress-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: var(--color-bg-2);
+    border-radius: 10px;
+    border: 1px solid var(--color-border-2);
+
+    &.active {
+        background: var(--color-primary-light);
+        border-color: var(--color-primary);
+    }
+}
+
+.starting-state-progress-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--color-success);
+    font-size: 14px;
+    font-weight: 700;
+
+    .starting-state-progress-item.active & {
+        color: var(--color-primary);
+    }
+}
+
+.starting-state-progress-text {
+    flex: 1;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-2);
+
+    .starting-state-progress-item.active & {
+        color: var(--color-primary);
+        font-weight: 600;
+    }
+}
+
+.starting-state-spinner {
+    display: inline-block;
+    border: 2px solid var(--color-primary);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.instance-starting {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 40px;
+}
+
+.spinner {
+    width: 44px;
+    height: 44px;
+    border: 3px solid var(--color-border-3);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 24px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+// 实例操作
+.instance-actions {
+    display: flex;
+    gap: 6px;
+}
+
+// Console 特有的 skill/detail 样式（从 global.scss 迁移）
+.skill-back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    color: #3B82F6;
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+.skill-detail-header {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.skill-detail-icon {
+    width: 72px;
+    height: 72px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 32px;
+    flex-shrink: 0;
+}
+
+.skill-detail-main {
+    flex: 1;
+}
+
+.skill-detail-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0;
+}
+
+.skill-detail-tag {
+    padding: 4px 12px;
+    background: #F1F5F9;
+    border-radius: 999px;
+    font-size: 13px;
+    color: #64748B;
+}
+
+.skill-detail-stats {
+    display: flex;
+    gap: 24px;
+    color: #64748B;
+    font-size: 14px;
+}
+
+.skill-detail-section {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid #E2E8F0;
+
+    h3 {
+        font-size: 16px;
+        font-weight: 700;
+        margin-bottom: 12px;
+    }
+}
+
+.file-list-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    background: #F8FAFC;
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.file-icon {
+    width: 32px;
+    height: 32px;
+    background: #E8F3FF;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #3B82F6;
+}
+
+.file-info {
+    flex: 1;
+}
+
+.file-name {
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.file-size {
+    font-size: 12px;
+    color: #94A3B8;
+}
+
+.version-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+    border: 1px solid #E2E8F0;
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.version-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.version-tag {
+    padding: 3px 10px;
+    background: #F1F5F9;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+
+    &.current {
+        background: #E8F3FF;
+        color: #3B82F6;
+    }
+}
+
+.version-desc {
+    color: #64748B;
+    font-size: 14px;
+}
+
+.version-date {
+    color: #94A3B8;
+    font-size: 13px;
+}
+
+// 消息内容内嵌表格
+.msg-table {
+    margin-top: 12px;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+
+    th, td {
+        padding: 10px 12px;
+        border: 1px solid var(--color-border-3);
+    }
+
+    th {
+        text-align: left;
+        font-weight: 600;
+        background: var(--color-bg-3);
+    }
+
+    td {
+        text-align: left;
+    }
+
+    thead tr {
+        background: var(--color-bg-3);
+    }
+
+    tbody tr:nth-child(even) {
+        background: var(--color-bg-2);
+    }
+
+    tfoot tr {
+        background: var(--color-bg-3);
+        font-weight: 600;
+    }
+
+    // 文本对齐修饰
+    .text-right {
+        text-align: right;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    // 数字强调
+    .value-success {
+        color: var(--color-success);
+        font-weight: 600;
+    }
+
+    .value-danger {
+        color: var(--color-danger);
+        font-weight: 600;
+    }
+
+    .value-primary {
+        color: var(--color-primary);
+        font-weight: 600;
+    }
+
+    .value-warning {
+        color: var(--color-warning);
+    }
+}
+
+// 消息内嵌信息块
+.msg-info-block {
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--color-bg-2);
+    border-radius: 8px;
+}
+
+.msg-meta {
+    margin-top: 12px;
+    font-size: 13px;
+    color: var(--color-text-3);
+}
+
+// 消息内嵌代码块
+.msg-code {
+    margin-top: 12px;
+    padding: 16px;
+    background: #1E293B;
+    border-radius: 8px;
+    overflow-x: auto;
+
+    code {
+        color: #E2E8F0;
+        font-family: 'Fira Code', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+    }
+}
+
+// 错误消息样式
+.msg-error {
+    border-left: 3px solid var(--color-danger);
+    background: var(--color-danger-light);
+}
+
+.msg-error-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--color-danger);
+    font-weight: 600;
+}
+
+// 消息内嵌文件卡片
+.msg-file-card {
+    margin-top: 12px;
+    padding: 10px 14px;
+    background: var(--color-bg-2);
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-text-2);
+}
+
+.msg-file-icon {
+    font-size: 20px;
+}
+
+.msg-file-name {
+    font-weight: 600;
+}
+
+.msg-file-size {
+    font-size: 12px;
+    color: var(--color-text-3);
+}
+
+// 进度条
+.msg-progress {
+    margin-top: 14px;
+}
+
+.msg-progress-bar {
+    height: 6px;
+    background: var(--color-border-3);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.msg-progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--color-primary), #8B5CF6);
+    border-radius: 3px;
+}
+
+// Responsive
+@include mobile {
+    .welcome-actions {
+        grid-template-columns: 1fr;
+    }
+
+    .message-content {
+        max-width: 82%;
+    }
+
+    .chat-input-wrapper {
+        padding: 12px 16px 16px;
+    }
+}
--- a/src/styles/pages/_developer.scss
+++ b/src/styles/pages/_developer.scss
@@ -1,368 +1,311 @@
-/* ============ 开发台页面样式 ============ */
-/* 本文件包含开发台（Developer）相关的所有页面样式 */
-/* 开发台复用了大量工作台的样式（如 .chat-sidebar 等） */
+// Developer 页面样式 - 仅保留开发台特有组件

-/* 开发台特有样式 */
+@use '../tokens' as *;
+
+// 开发台详情
 .dev-detail-header {
-  display: flex;
-  gap: 20px;
-  align-items: flex-start;
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
 }

 .dev-detail-icon {
-  width: 72px;
-  height: 72px;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 32px;
-  flex-shrink: 0;
-}
-
-.dev-detail-main {
-  flex: 1;
-}
-
-.dev-detail-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 12px 0;
-}
-
-.dev-detail-tag {
-  padding: 4px 12px;
-  background: #F1F5F9;
-  border-radius: 999px;
-  font-size: 13px;
-  color: #64748B;
-}
-
-.dev-detail-stats {
-  display: flex;
-  gap: 24px;
-  color: #64748B;
-  font-size: 14px;
-}
-
-.dev-detail-section {
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid #E2E8F0;
-}
-
-.dev-detail-section h3 {
-  font-size: 16px;
-  font-weight: 700;
-  margin-bottom: 12px;
-}
-
-.dev-info-row {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.dev-info-label {
-  width: 100px;
-  flex-shrink: 0;
-  color: #64748B;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.dev-info-value {
-  flex: 1;
-  color: #1E293B;
-  font-size: 14px;
-}
-
-/* 开发台返回按钮样式 */
-.dev-back-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  color: #3B82F6;
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-/* 技能图标选择器 */
-.dev-icon-picker {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 8px;
-  max-width: 360px;
-}
-
-.dev-icon-option {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  border: 2px solid #E2E8F0;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: #fff;
-
-  &:hover {
-    border-color: #3B82F6;
-    background: #EFF6FF;
-  }
-
-  &.selected {
-    border-color: #3B82F6;
-    background: #EFF6FF;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-  }
-}
-
-/* 版本拒绝原因 */
-.dev-rejection-reason {
-  font-size: 12px;
-  color: #EF4444;
-  margin-top: 4px;
-  padding: 4px 8px;
-  background: #FEF2F2;
-  border-radius: 4px;
-}
-
-/* ============ 技能编辑页面优化样式 ============ */
-
-/* 技能概览卡片（三段式布局第一段） */
-.skill-overview-card {
-  display: flex;
-  gap: 20px;
-  padding: 24px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 16px;
-  align-items: flex-start;
-
-  .skill-icon {
-    width: 80px;
-    height: 80px;
+    width: 72px;
+    height: 72px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
-    font-size: 48px;
+    color: #fff;
+    font-size: 32px;
    flex-shrink: 0;
-  }
+}

-  .skill-header {
+.dev-detail-main {
    flex: 1;
-    min-width: 0;
-    display: block !important; /* 覆盖全局样式，确保子元素垂直排列 */
+}

-    /* 第一行：技能名称 + 状态 + 作者 + 操作按钮 */
-    .skill-name-row {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      margin-bottom: 16px;
+.dev-detail-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0;
+}

-      .skill-name {
-        margin: 0;
-        font-size: 24px;
+.dev-detail-tag {
+    padding: 4px 12px;
+    background: var(--color-bg-3);
+    border-radius: 999px;
+    font-size: 13px;
+    color: var(--color-text-3);
+}
+
+.dev-detail-stats {
+    display: flex;
+    gap: 24px;
+    color: var(--color-text-3);
+    font-size: 14px;
+}
+
+.dev-detail-section {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid var(--color-border-3);
+
+    h3 {
+        font-size: 16px;
        font-weight: 700;
-        color: #1E293B;
-        flex-shrink: 0;
-      }
+        margin-bottom: 12px;
+    }
+}

-      .skill-actions {
-        margin-left: auto;
-        display: flex;
-        gap: 8px;
-        flex-shrink: 0;
-      }
+.dev-info-row {
+    display: flex;
+    margin-bottom: 16px;
+}
+
+.dev-info-label {
+    width: 100px;
+    flex-shrink: 0;
+    color: var(--color-text-3);
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.dev-info-value {
+    flex: 1;
+    color: var(--color-text-1);
+    font-size: 14px;
+}
+
+// 技能图标选择器
+.dev-icon-picker {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+    max-width: 360px;
+}
+
+.dev-icon-option {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    border: 2px solid var(--color-border-3);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: #fff;
+
+    &:hover {
+        border-color: var(--color-primary);
+        background: var(--color-primary-light);
    }

-    /* 第二行：指标行（带分隔线） */
-    .skill-metrics-row {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      padding: 12px 0;
-      border-top: 1px solid #E2E8F0;
-      margin-bottom: 16px;
+    &.selected {
+        border-color: var(--color-primary);
+        background: var(--color-primary-light);
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+}

-      .metric-item {
+// 版本拒绝原因
+.dev-rejection-reason {
+    padding: 12px 14px;
+    background: #FEF2F2;
+    border: 1px solid #FECACA;
+    border-radius: 8px;
+    color: #991B1B;
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+// 技能概览卡片
+.skill-overview-card {
+    background: #FFFFFF;
+    border: 1px solid var(--color-border-3);
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 16px;
+
+    .skill-header {
+        display: block;
+    }
+
+    .skill-name-row {
        display: flex;
        align-items: center;
-        gap: 6px;
-
-        .metric-icon {
-          width: 16px;
-          height: 16px;
-          opacity: 0.7;
-          color: #64748B;
-        }
-
-        .metric-value {
-          font-size: 14px;
-          font-weight: 500;
-          color: #1E293B;
-        }
-      }
+        gap: 12px;
+        margin-bottom: 12px;
    }

-    /* 第三行：标签区 */
-    .skill-tags-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-wrap: wrap;
-      margin-bottom: 16px;
-
-      .skill-category-tag {
-        padding: 4px 12px;
-        background: #EFF6FF;
-        color: #3B82F6;
-        border-radius: 999px;
-        font-size: 13px;
-        font-weight: 500;
-      }
-    }
-
-    /* 第四行：技能描述 */
-    .skill-desc-row {
-      .skill-desc-text {
-        font-size: 14px;
-        color: #475569;
-        line-height: 1.6;
+    .skill-name {
+        font-size: 22px;
+        font-weight: 800;
+        color: var(--color-text-1);
        margin: 0;
-      }
    }
-  }
+
+    .skill-actions {
+        margin-left: auto;
+    }
+
+    .skill-desc-row {
+        margin-top: 0;
+    }
+
+    .skill-desc-text {
+        margin: 0;
+        color: var(--color-text-3);
+        font-size: 14px;
+        line-height: 1.6;
+    }
 }

-/* 管理操作卡片（三段式布局第三段） */
+// 技能分类标签
+.skill-category-tag {
+    padding: 4px 10px;
+    background: #EFF6FF;
+    color: #1E40AF;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+// 版本历史卡片
+.version-history-card {
+    background: var(--color-bg-2);
+    border: 1px solid var(--color-border-3);
+    border-radius: 12px;
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: #FFFFFF;
+        border-color: #CBD5E1;
+        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+    }
+}
+
+.version-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+
+    > div:first-child {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+}
+
+.version-number {
+    font-size: 15px;
+    font-weight: 800;
+    color: var(--color-text-1);
+    background: #FFFFFF;
+    padding: 4px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--color-border-3);
+}
+
+.version-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.version-public-preview {
+    display: flex;
+    gap: 14px;
+    align-items: flex-start;
+    padding: 14px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    border: 1px solid var(--color-border-3);
+}
+
+.version-public-preview-icon {
+    font-size: 32px;
+    flex-shrink: 0;
+}
+
+.version-public-preview-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.version-public-preview-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+}
+
+.version-public-preview-name {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--color-text-1);
+    margin: 0;
+}
+
+.version-public-preview-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 8px;
+}
+
+.version-public-preview-desc {
+    font-size: 13px;
+    color: var(--color-text-3);
+    margin: 0;
+    line-height: 1.5;
+}
+
+// 管理卡片
 .manage-card {
-  .card-body {
-    .manage-actions {
-      display: flex;
-      gap: 12px;
-      justify-content: flex-start;
-    }
-  }
+    background: var(--color-bg-2);
 }

-/* 响应式设计 */
-@media (max-width: 768px) {
-  .skill-overview-card {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-
-    .skill-icon {
-      width: 60px;
-      height: 60px;
-      font-size: 36px;
-    }
-
-    .skill-header {
-      width: 100%;
-
-      .skill-name-row {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 12px;
-
-        .skill-name {
-          font-size: 20px;
-        }
-
-        .skill-actions {
-          margin-left: 0;
-          margin-top: 8px;
-          width: 100%;
-        }
-
-        .skill-actions .btn {
-          flex: 1;
-        }
-      }
-
-      .skill-metrics-row {
-        flex-wrap: wrap;
-        gap: 12px;
-      }
-
-      .skill-tags-row {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .manage-card {
-    .manage-actions {
-      flex-direction: column;
-
-      .btn {
-        width: 100%;
-      }
-    }
-  }
+.manage-actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
 }
-@media (max-width: 768px) {
-  .skill-overview-card {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;

-    .skill-icon {
-      width: 60px;
-      height: 60px;
-      font-size: 36px;
+// Responsive
+@include mobile {
+    .skill-overview-card {
+        padding: 16px;
+
+        .skill-name-row {
+            flex-wrap: wrap;
+
+            .skill-name {
+                font-size: 20px;
+            }
+
+            .skill-actions {
+                margin-left: 0;
+                width: 100%;
+                margin-top: 8px;
+            }
+        }
    }

-    .skill-header {
-      width: 100%;
-
-      .skill-name-row {
-        flex-wrap: wrap;
-        gap: 8px;
-
-        .skill-name {
-          font-size: 20px;
-          width: 100%;
-        }
-
-        .skill-actions {
-          width: 100%;
-          margin-left: 0;
-          margin-top: 8px;
-        }
-      }
-
-      .skill-metrics-row {
-        flex-wrap: wrap;
-        gap: 12px;
-      }
-
-      .skill-tags-row {
+    .manage-card .manage-actions {
        flex-direction: column;
-        align-items: flex-start;
-      }
-    }
-  }

-  .manage-card {
-    .manage-actions {
-      flex-direction: column;
-
-      .btn {
-        width: 100%;
-      }
+        .btn {
+            width: 100%;
+        }
    }
-  }
-}
+}
--- a/src/styles/pages/_home.scss
+++ b/src/styles/pages/_home.scss
@@ -1,222 +1,345 @@
-/* ============ 首页样式 ============ */
-/* 本文件包含首页（Home）相关的所有页面样式 */
+// Home 页面样式 - 首页特有组件
+
+@use '../tokens' as *;

 .home-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
-  position: relative;
-  overflow: hidden;
-}
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
+    position: relative;
+    overflow: hidden;

-.home-layout::before {
-  content: '';
-  position: absolute;
-  top: -30%;
-  right: -20%;
-  width: 800px;
-  height: 800px;
-  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
-  pointer-events: none;
-}
+    &::before {
+        content: '';
+        position: absolute;
+        top: -30%;
+        right: -20%;
+        width: 800px;
+        height: 800px;
+        background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
+        pointer-events: none;
+    }

-.home-layout::after {
-  content: '';
-  position: absolute;
-  bottom: -20%;
-  left: -10%;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
-  pointer-events: none;
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -20%;
+        left: -10%;
+        width: 600px;
+        height: 600px;
+        background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
+        pointer-events: none;
+    }
 }

 .home-header {
-  padding: 0 48px;
-  height: 68px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  z-index: 1;
-  border-bottom: 1px solid var(--color-border-2);
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(12px);
+    padding: 0 48px;
+    height: 68px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+    border-bottom: 1px solid var(--color-border-2);
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
 }

 .home-logo {
-  font-size: 18px;
-  font-weight: 800;
-  color: var(--color-text-1);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  letter-spacing: -0.3px;
+    font-size: 18px;
+    font-weight: 800;
+    color: var(--color-text-1);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    letter-spacing: -0.3px;
+
+    .sidebar-logo-icon {
+        width: 28px;
+        height: 28px;
+        background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+        border-radius: 6px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            width: 14px;
+            height: 10px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 4px 4px 2px 2px;
+            top: 5px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 18px;
+            height: 10px;
+            background: rgba(255, 255, 255, 0.85);
+            border-radius: 2px 2px 4px 4px;
+            bottom: 4px;
+        }
+
+        span {
+            position: absolute;
+            width: 3px;
+            height: 3px;
+            background: rgba(59, 130, 246, 0.9);
+            border-radius: 50%;
+            top: 9px;
+            z-index: 1;
+
+            &:nth-child(1) { left: 9px; }
+            &:nth-child(2) { right: 9px; }
+        }
+    }
 }

 .home-nav {
-  display: flex;
-  gap: 6px;
-}
+    display: flex;
+    gap: 6px;

-.home-nav a {
-  color: var(--color-text-2);
-  text-decoration: none;
-  padding: 9px 16px;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 14px;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
+    a {
+        color: var(--color-text-2);
+        text-decoration: none;
+        padding: 9px 16px;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 14px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        display: flex;
+        align-items: center;
+        gap: 6px;

-.home-nav a:hover {
-  color: var(--color-text-1);
-  background: var(--color-bg-2);
+        &:hover {
+            color: var(--color-text-1);
+            background: var(--color-bg-2);
+        }
+
+        svg, .home-icon {
+            width: 18px;
+            height: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.home-nav-login {
+            color: #3B82F6;
+            font-weight: 600;
+
+            &:hover {
+                color: #2563EB;
+                background: #EFF6FF;
+            }
+        }
+    }
 }

 .home-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    text-align: center;
+    position: relative;
+    z-index: 1;
 }

 .home-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 14px;
-  background: var(--color-primary-light);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 999px;
-  color: var(--color-primary);
-  font-size: 13px;
-  font-weight: 700;
-  margin-bottom: 28px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    background: var(--color-primary-light);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 999px;
+    color: var(--color-primary);
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: 28px;
 }

 .home-badge-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--color-success);
-  border-radius: 50%;
+    width: 8px;
+    height: 8px;
+    background: var(--color-success);
+    border-radius: 50%;
 }

 .home-title {
-  font-size: 56px;
-  font-weight: 800;
-  color: var(--color-text-1);
-  margin-bottom: 14px;
-  line-height: 1.15;
-  letter-spacing: -1.2px;
-}
+    font-size: 56px;
+    font-weight: 800;
+    color: var(--color-text-1);
+    margin-bottom: 14px;
+    line-height: 1.15;
+    letter-spacing: -1.2px;

-.home-title span {
-  background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+    span {
+        background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
 }

 .home-desc {
-  font-size: 18px;
-  color: var(--color-text-3);
-  margin-bottom: 44px;
-  max-width: 640px;
-  line-height: 1.7;
+    font-size: 18px;
+    color: var(--color-text-3);
+    margin-bottom: 44px;
+    max-width: 640px;
+    line-height: 1.7;
 }

 .home-buttons {
-  display: flex;
-  gap: 14px;
+    display: flex;
+    gap: 14px;
 }

 .home-btn {
-  padding: 13px 30px;
-  font-size: 15px;
-  font-weight: 700;
-  border-radius: 10px;
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
+    padding: 13px 30px;
+    font-size: 15px;
+    font-weight: 700;
+    border-radius: 10px;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

-.home-btn.primary {
-  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
-  color: #FFFFFF;
-  border: none;
-  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
-}
+    svg {
+        width: 18px;
+        height: 18px;
+    }

-.home-btn.primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35);
+    &.primary {
+        background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
+        color: #FFFFFF;
+        border: none;
+        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35);
+        }
+    }
+
+    &.secondary {
+        background: #FFFFFF;
+        color: var(--color-text-1);
+        border: 1px solid var(--color-border-3);
+        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+
+        &:hover {
+            background: var(--color-bg-2);
+            border-color: #94A3B8;
+            transform: translateY(-1px);
+        }
+    }
 }

 .home-features {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-  max-width: 860px;
-  margin-top: 64px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    max-width: 860px;
+    margin-top: 64px;
 }

 .home-feature {
-  padding: 24px;
-  background: #FFFFFF;
-  border: 1px solid var(--color-border-2);
-  border-radius: 14px;
-  text-align: left;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
+    padding: 24px;
+    background: #FFFFFF;
+    border: 1px solid var(--color-border-2);
+    border-radius: 14px;
+    text-align: left;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

-.home-feature:hover {
-  border-color: var(--color-border-3);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
-  transform: translateY(-2px);
+    &:hover {
+        border-color: var(--color-border-3);
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+        transform: translateY(-2px);
+    }
 }

 .home-feature-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 12px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        color: var(--color-primary);
+    }
 }

 .home-feature-title {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--color-text-1);
-  margin-bottom: 8px;
+    font-size: 16px;
+    font-weight: 800;
+    color: var(--color-text-1);
+    margin-bottom: 8px;
 }

 .home-feature-desc {
-  font-size: 14px;
-  color: var(--color-text-3);
-  line-height: 1.6;
+    font-size: 14px;
+    color: var(--color-text-3);
+    line-height: 1.6;
 }

 .home-footer {
-  padding: 28px;
-  text-align: center;
-  color: var(--color-text-4);
-  font-size: 13px;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
+    padding: 28px;
+    text-align: center;
+    color: var(--color-text-4);
+    font-size: 13px;
+    font-weight: 500;
+    position: relative;
+    z-index: 1;
+}
+
+// Responsive
+@include mobile {
+    .home-header {
+        padding: 0 16px;
+    }
+
+    .home-title {
+        font-size: 36px;
+    }
+
+    .home-desc {
+        font-size: 16px;
+    }
+
+    .home-buttons {
+        flex-direction: column;
+        width: 100%;
+        max-width: 280px;
+    }
+
+    .home-btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .home-features {
+        grid-template-columns: 1fr;
+    }
+
+    .home-nav {
+        display: none;
+    }
 }
--- a/src/styles/pages/_index.scss
+++ b/src/styles/pages/_index.scss
@@ -0,0 +1,6 @@
+// Pages 入口
+
+@forward 'console';
+@forward 'admin';
+@forward 'developer';
+@forward 'home';
--- a/src/styles/tokens/_breakpoints.scss
+++ b/src/styles/tokens/_breakpoints.scss
@@ -0,0 +1,5 @@
+// 响应式断点令牌
+
+$breakpoint-mobile: 768px;
+$breakpoint-tablet: 1024px;
+$breakpoint-desktop: 1025px;
--- a/src/styles/tokens/_colors.scss
+++ b/src/styles/tokens/_colors.scss
@@ -0,0 +1,28 @@
+// 颜色令牌 - 品牌色、功能色、中性色
+
+// SCSS 变量
+$primary: #3B82F6;
+$primary-light: #EFF6FF;
+$primary-lighter: #F8FAFC;
+$primary-dark: #2563EB;
+
+$success: #10B981;
+$success-light: #ECFDF5;
+$warning: #F59E0B;
+$warning-light: #FFFBEB;
+$danger: #EF4444;
+$danger-light: #FEF2F2;
+
+$text-1: #1E293B;
+$text-2: #475569;
+$text-3: #94A3B8;
+$text-4: #CBD5E1;
+
+$border-1: #F8FAFC;
+$border-2: #F1F5F9;
+$border-3: #E2E8F0;
+
+$bg-1: #FFFFFF;
+$bg-2: #F8FAFC;
+$bg-3: #F1F5F9;
+$bg-4: #E2E8F0;
--- a/src/styles/tokens/_index.scss
+++ b/src/styles/tokens/_index.scss
@@ -0,0 +1,11 @@
+// Tokens 入口 - 导出所有设计令牌
+
+@forward 'colors';
+@forward 'spacing';
+@forward 'shadows';
+@forward 'radius';
+@forward 'typography';
+@forward 'z-index';
+@forward 'transitions';
+@forward 'breakpoints';
+@forward 'mixins';
--- a/src/styles/tokens/_mixins.scss
+++ b/src/styles/tokens/_mixins.scss
@@ -1,21 +1,24 @@
-// SCSS Mixins - 可复用代码片段
-@use 'variables' as *;
+// Mixins - 可复用代码片段
+
+@use 'breakpoints' as *;
+@use 'shadows' as *;
+@use 'radius' as *;

 // 媒体查询断点
@mixin mobile {
-    @media (max-width: 768px) {
+    @media (max-width: #{$breakpoint-mobile}) {
        @content;
    }
 }

@mixin tablet {
-    @media (min-width: 769px) and (max-width: 1024px) {
+    @media (min-width: #{$breakpoint-mobile + 1}) and (max-width: #{$breakpoint-tablet}) {
        @content;
    }
 }

@mixin desktop {
-    @media (min-width: 1025px) {
+    @media (min-width: #{$breakpoint-desktop}) {
        @content;
    }
 }
@@ -67,4 +70,4 @@
    } @else if $size == xl {
        border-radius: $radius-xl;
    }
-}
+}
--- a/src/styles/tokens/_radius.scss
+++ b/src/styles/tokens/_radius.scss
@@ -0,0 +1,6 @@
+// 圆角令牌
+
+$radius-sm: 6px;
+$radius-md: 8px;
+$radius-lg: 12px;
+$radius-xl: 16px;
--- a/src/styles/tokens/_shadows.scss
+++ b/src/styles/tokens/_shadows.scss
@@ -0,0 +1,6 @@
+// 阴影令牌
+
+$shadow-1: 0 1px 3px rgba(15, 23, 42, 0.04);
+$shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
+$shadow-3: 0 8px 24px rgba(15, 23, 42, 0.08);
+$shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04);
--- a/src/styles/tokens/_spacing.scss
+++ b/src/styles/tokens/_spacing.scss
@@ -0,0 +1,11 @@
+// 间距令牌 - 4px 基数
+
+$spacing-1: 4px;
+$spacing-2: 8px;
+$spacing-3: 12px;
+$spacing-4: 16px;
+$spacing-5: 20px;
+$spacing-6: 24px;
+$spacing-8: 32px;
+$spacing-10: 40px;
+$spacing-12: 48px;
--- a/src/styles/tokens/_transitions.scss
+++ b/src/styles/tokens/_transitions.scss
@@ -0,0 +1,5 @@
+// 过渡动画令牌
+
+$transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+$transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--- a/src/styles/tokens/_typography.scss
+++ b/src/styles/tokens/_typography.scss
@@ -0,0 +1,23 @@
+// 字体令牌
+
+$font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+
+$font-size-xs: 11px;
+$font-size-sm: 12px;
+$font-size-base: 14px;
+$font-size-md: 15px;
+$font-size-lg: 16px;
+$font-size-xl: 18px;
+$font-size-2xl: 22px;
+$font-size-3xl: 32px;
+$font-size-4xl: 56px;
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+
+$line-height-tight: 1.2;
+$line-height-normal: 1.6;
+$line-height-relaxed: 1.7;
--- a/src/styles/tokens/_z-index.scss
+++ b/src/styles/tokens/_z-index.scss
@@ -0,0 +1,8 @@
+// 层级令牌
+
+$z-index-sidebar: 101;
+$z-index-header: 100;
+$z-index-overlay: 1000;
+$z-index-sidebar-mobile: 1001;
+$z-index-modal: 2000;
+$z-index-toast: 3000;
Author	SHA1	Message	Date
lanyuanxiaoyao	ce9ebe5784	feat: 统一三端账号管理页面 - 新增共享账号管理组件 src/components/account/AccountPage.jsx - 管理台新增账号管理入口（修复 SidebarUser onClick） - 开发台使用共享组件替换占位符页面 - 扩展 api.user 支持 updateProfile 和 changePassword - 新增 account-management 规格文件 - 更新 page-navigation 规格文件	2026-03-26 19:33:58 +08:00
lanyuanxiaoyao	bc4537b3bc	refactor: 统一二级页面返回按钮样式 - 新增 page-back-btn 统一样式类，替换 dev-back-btn 和 console-back-btn - 所有二级页面返回按钮移至页面左上角 - 表单页面补充底部取消按钮 - 新增 page-navigation spec 文档 - 补充工作台 mySkills 和 skillConfig 页面标题配置	2026-03-26 18:10:08 +08:00
lanyuanxiaoyao	76d613c4fe	docs: 重构开发文档 - 强化统一规范约束 - 核心约束前置：项目性质、语言规范、技术约束 - 统一开发规范：样式BEM命名、组件模板、路由模式 - 新增开发清单：新增功能前检查、代码提交前检查 - 精简文档篇幅：1004行 → 428行，聚焦规范驱动	2026-03-26 15:00:32 +08:00
lanyuanxiaoyao	f1d5e77285	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>	2026-03-26 14:14:52 +08:00
lanyuanxiaoyao	b00d75de8a	feat: 新增管理台模型配置管理功能 - 支持配置类型注册表机制（basic、zhisuan） - 配置列表展示（生效中/未生效状态区分） - 新增/编辑配置表单，支持动态字段渲染 - 生效中配置不可编辑/删除限制 - 配置类型创建后不可修改 - 密钥掩码显示与显示/隐藏切换 - 操作二次确认弹窗（设为默认、删除）	2026-03-26 11:14:42 +08:00