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/unified-state-management/spec.md

@@ -0,0 +1,52 @@
+# Unified State Management Specification
+
+## Purpose
+
+提供统一的状态管理方案，包括全局用户信息上下文、页面状态持久化、导航逻辑管理，确保应用状态的一致性和可维护性。
+
+## Requirements
+
+### Requirement: 用户信息全局上下文
+系统 SHALL 使用 React Context API 提供全局用户信息上下文，确保用户数据在整个应用中保持一致。
+
+#### Scenario: UserContext 提供用户信息
+- **WHEN** 组件使用 useUserContext Hook
+- **THEN** 系统返回包含用户 name、avatar、role 的用户信息对象
+
+#### Scenario: 用户信息在多个页面同步显示
+- **WHEN** 用户信息在 UserContext 中更新
+- **THEN** 所有使用 UserContext 的组件自动更新显示
+
+#### Scenario: UserContext 提供默认值
+- **WHEN** 应用启动且没有提供用户信息
+- **THEN** 系统使用默认用户信息（name: '张三', avatar: '张', role: 'AI 产品部'）
+
+### Requirement: 页面状态持久化 Hook
+系统 SHALL 提供 usePageState Hook，封装页面状态持久化逻辑，自动处理 localStorage 同步和主页跳转重置。
+
+#### Scenario: usePageState 初始化从 localStorage 恢复状态
+- **WHEN** 页面使用 usePageState Hook 并传入 storageKey 和 defaultPage
+- **THEN** 系统从 localStorage 读取之前保存的页面状态，若无则使用 defaultPage
+
+#### Scenario: usePageState 自动同步状态到 localStorage
+- **WHEN** 调用 usePageState 返回的 setCurrentPage 函数
+- **THEN** 系统更新状态并自动保存到 localStorage
+
+#### Scenario: usePageState 处理主页跳转重置
+- **WHEN** 从主页跳转到页面（location.state.fromHome 为 true）
+- **THEN** 系统重置页面状态为默认值，并清除路由 state
+
+#### Scenario: usePageState 提供 getPageTitle 函数
+- **WHEN** 调用 usePageState 返回的 getPageTitle 函数
+- **THEN** 系统根据当前页面 ID 从配置中查找并返回对应的页面标题
+
+### Requirement: 导航逻辑 Hook
+系统 SHALL 提供 useNavigation Hook，统一处理页面导航和路由状态管理。
+
+#### Scenario: useNavigation 提供页面切换函数
+- **WHEN** 调用 useNavigation 返回的 navigateToPage 函数并传入目标页面 ID
+- **THEN** 系统更新当前页面状态并执行相应导航逻辑
+
+#### Scenario: useNavigation 处理带数据的页面切换
+- **WHEN** 调用 navigateToPage 并传入目标页面 ID 和附加数据（如 skillId）
+- **THEN** 系统更新页面状态和附加数据状态