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/modular-styles/spec.md

@@ -0,0 +1,52 @@
+# Modular Styles Specification
+
+## Purpose
+
+提供模块化的样式文件组织结构，将页面特定样式从全局样式文件中拆分到独立的页面样式文件中，提高代码的可维护性。
+
+## Requirements
+
+### Requirement: 样式文件按页面拆分
+系统 SHALL 将页面特定样式从 global.scss 中拆分到独立的页面样式文件中，按功能组织。
+
+#### Scenario: 工作台样式独立文件
+- **WHEN** 系统包含 _console.scss 文件
+- **THEN** 该文件包含工作台相关的所有样式（聊天、技能市场、日志查询、定时任务、项目管理等）
+
+#### Scenario: 管理台样式独立文件
+- **WHEN** 系统包含 _admin.scss 文件
+- **THEN** 该文件包含管理台相关的所有样式（总览、部门管理、用户管理、项目管理等）
+
+#### Scenario: 开发台样式独立文件
+- **WHEN** 系统包含 _developer.scss 文件
+- **THEN** 该文件包含开发台相关的所有样式（我的技能、技能编辑、开发文档等）
+
+#### Scenario: 首页样式独立文件
+- **WHEN** 系统包含 _home.scss 文件
+- **THEN** 该文件包含首页相关的所有样式
+
+### Requirement: global.scss 作为样式主入口
+系统 SHALL 保持 global.scss 作为样式主入口文件，导入所有样式模块。
+
+#### Scenario: global.scss 导入设计系统模块
+- **WHEN** global.scss 文件被加载
+- **THEN** 系统按顺序导入 _variables.scss、_mixins.scss、_base.scss、_components.scss、_layout.scss
+
+#### Scenario: global.scss 导入页面样式模块
+- **WHEN** global.scss 文件被加载
+- **THEN** 系统导入 pages/_console.scss、pages/_admin.scss、pages/_developer.scss、pages/_home.scss
+
+#### Scenario: 通用样式保留在主文件中
+- **WHEN** 样式属于通用组件（按钮、表单、表格、状态标签等）
+- **THEN** 该样式保留在 _components.scss 或 _layout.scss 中，不移动到页面样式文件
+
+### Requirement: 页面样式文件组织结构
+系统 SHALL 在 src/styles/pages/ 目录下按页面组织样式文件，每个文件包含对应页面的所有特定样式。
+
+#### Scenario: 页面样式文件命名规范
+- **WHEN** 创建页面样式文件
+- **THEN** 文件名使用 _<page-name>.scss 格式（如 _console.scss、_admin.scss）
+
+#### Scenario: 页面样式文件内容结构
+- **WHEN** 查看页面样式文件
+- **THEN** 该文件包含页面特定的布局、组件、状态等样式，使用清晰的注释分节