refactor: 代码架构重构 - 提取组件、统一状态管理和数据访问层

- 新增布局组件（SidebarBrand、SidebarUser、SidebarNavItem）
- 新增通用UI组件（EmptyState、StatusBadge、TagInput、SearchBar）
- 新增全局状态管理（UserContext）
- 新增自定义Hooks（usePageState、useNavigation）
- 新增统一数据访问层（src/services/api.js）
- 新增常量配置（constants/pages.js、constants/storageKeys.js）
- 样式文件模块化，拆分页面特定样式
- 更新README文档，添加组件和使用说明
- 同步OpenSpec规范到主specs目录

openspec/specs/data-service-layer/spec.md

@@ -0,0 +1,49 @@
+# Data Service Layer Specification
+
+## Purpose
+
+提供统一的数据访问接口层，将数据访问逻辑与静态数据文件分离，便于后续对接真实 API。
+
+## Requirements
+
+### Requirement: 统一数据访问接口
+系统 SHALL 提供 api 服务对象，包含按功能模块划分的数据访问方法，作为所有数据访问的统一入口。
+
+#### Scenario: api.user 模块提供用户信息访问
+- **WHEN** 调用 api.user.getInfo()
+- **THEN** 系统返回用户信息对象（包含 name、avatar、role 等字段）
+
+#### Scenario: api.skills 模块提供技能数据访问
+- **WHEN** 调用 api.skills.list()
+- **THEN** 系统返回所有技能列表数组
+
+#### Scenario: api.skills 支持按 ID 查询单个技能
+- **WHEN** 调用 api.skills.getById(skillId)
+- **THEN** 系统返回对应 ID 的技能对象，若不存在则返回 undefined
+
+#### Scenario: api.conversations 模块提供会话数据访问
+- **WHEN** 调用 api.conversations.list()
+- **THEN** 系统返回所有会话列表数组
+
+#### Scenario: api.conversations 支持按场景获取聊天内容
+- **WHEN** 调用 api.conversations.getScene(sceneName)
+- **THEN** 系统返回对应场景的 HTML 内容字符串
+
+#### Scenario: api.logs 模块支持筛选查询
+- **WHEN** 调用 api.logs.list(filters)
+- **THEN** 系统根据 filters 参数（用户、类型、状态）筛选并返回日志列表
+
+### Requirement: 数据层与静态文件分离
+系统 SHALL 将数据访问逻辑与静态数据文件分离，便于后续对接真实 API。
+
+#### Scenario: API 层内部调用静态数据文件
+- **WHEN** 调用 api 模块的任何方法
+- **THEN** 系统从对应的 data/*.js 文件读取并返回数据
+
+#### Scenario: API 层支持数据转换
+- **WHEN** 静态数据结构与页面需求不一致
+- **THEN** 系统在 API 层进行数据转换，返回页面所需的格式
+
+#### Scenario: API 层提供一致的返回格式
+- **WHEN** 调用 API 层方法
+- **THEN** 系统返回符合约定格式的数据（如对象、数组），无论底层存储格式如何