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目录

src/services/api.js

@@ -0,0 +1,200 @@
+/**
+ * 统一数据访问接口
+ * 提供按功能模块划分的数据访问方法
+ */
+
+// 导入静态数据
+import { conversations, getChatScenes } from '../data/conversations.js';
+import { skills, skillFiles, skillVersions, getSkillIcon } from '../data/skills.js';
+import { logs } from '../data/logs.js';
+import { mySkills, skillCategories, supportedModels, devDocs } from '../data/developerData.js';
+import { projectMembers } from '../data/members.js';
+import { scheduledTasks } from '../data/tasks.js';
+
+/**
+ * 用户相关 API
+ */
+export const user = {
+  /**
+   * 获取用户信息
+   * @returns {Object} 用户信息对象
+   */
+  getInfo: () => ({
+    name: '张三',
+    avatar: '张',
+    role: 'AI 产品部',
+  }),
+};
+
+/**
+ * 技能相关 API
+ */
+export const skillsApi = {
+  /**
+   * 获取所有技能列表
+   * @returns {Array} 技能列表
+   */
+  list: () => skills,
+
+  /**
+   * 根据 ID 获取技能详情
+   * @param {number} id - 技能 ID
+   * @returns {Object|undefined} 技能对象
+   */
+  getById: (id) => skills.find(skill => skill.id === id),
+
+  /**
+   * 获取技能文件列表
+   * @returns {Array} 文件列表
+   */
+  getFiles: () => skillFiles,
+
+  /**
+   * 获取技能版本历史
+   * @returns {Array} 版本列表
+   */
+  getVersions: () => skillVersions,
+
+  /**
+   * 获取技能图标
+   * @param {number} id - 技能 ID
+   * @returns {string} 图标 emoji
+   */
+  getIcon: (id) => getSkillIcon(id),
+};
+
+/**
+ * 会话相关 API
+ */
+export const conversationsApi = {
+  /**
+   * 获取所有会话列表
+   * @returns {Array} 会话列表
+   */
+  list: () => conversations,
+
+  /**
+   * 获取聊天场景的 HTML 内容
+   * @param {string} sceneName - 场景名称
+   * @returns {string} HTML 内容
+   */
+  getScene: (sceneName) => {
+    const scenes = getChatScenes();
+    return scenes[sceneName] || '';
+  },
+};
+
+/**
+ * 日志相关 API
+ */
+export const logsApi = {
+  /**
+   * 获取所有日志
+   * @returns {Array} 日志列表
+   */
+  list: () => logs,
+
+  /**
+   * 根据条件筛选日志
+   * @param {Object} filters - 筛选条件
+   * @param {string} [filters.user] - 用户名
+   * @param {string} [filters.type] - 日志类型
+   * @param {string} [filters.status] - 状态
+   * @returns {Array} 筛选后的日志列表
+   */
+  filter: ({ user, type, status } = {}) => {
+    return logs.filter(log => {
+      if (user && log.user !== user) return false;
+      if (type && log.type !== type) return false;
+      if (status && log.status !== status) return false;
+      return true;
+    });
+  },
+};
+
+/**
+ * 开发台相关 API
+ */
+export const developerApi = {
+  /**
+   * 获取我的技能列表
+   * @returns {Array} 技能列表
+   */
+  getMySkills: () => mySkills,
+
+  /**
+   * 根据 ID 获取技能详情
+   * @param {number} id - 技能 ID
+   * @returns {Object|undefined} 技能对象
+   */
+  getSkillById: (id) => mySkills.find(skill => skill.id === id),
+
+  /**
+   * 获取技能分类
+   * @returns {Array} 分类列表
+   */
+  getCategories: () => skillCategories,
+
+  /**
+   * 获取支持的模型列表
+   * @returns {Array} 模型列表
+   */
+  getSupportedModels: () => supportedModels,
+
+  /**
+   * 获取开发文档列表
+   * @returns {Array} 文档列表
+   */
+  getDocs: () => devDocs,
+};
+
+/**
+ * 项目成员相关 API
+ */
+export const membersApi = {
+  /**
+   * 获取所有成员
+   * @returns {Array} 成员列表
+   */
+  list: () => projectMembers,
+
+  /**
+   * 根据 ID 获取成员
+   * @param {string} id - 成员 ID
+   * @returns {Object|undefined} 成员对象
+   */
+  getById: (id) => projectMembers.find(member => member.id === id),
+};
+
+/**
+ * 定时任务相关 API
+ */
+export const tasksApi = {
+  /**
+   * 获取所有任务
+   * @returns {Array} 任务列表
+   */
+  list: () => scheduledTasks,
+
+  /**
+   * 根据 ID 获取任务
+   * @param {string} id - 任务 ID
+   * @returns {Object|undefined} 任务对象
+   */
+  getById: (id) => scheduledTasks.find(task => task.id === id),
+};
+
+/**
+ * 统一 API 导出对象
+ */
+export const api = {
+  user,
+  skills: skillsApi,
+  conversations: conversationsApi,
+  logs: logsApi,
+  developer: developerApi,
+  members: membersApi,
+  tasks: tasksApi,
+};
+
+export default api;