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/reusable-components/spec.md

@@ -0,0 +1,41 @@
+# Reusable Components Specification
+
+## Purpose
+
+提供可复用的布局组件和通用 UI 组件库，用于在不同页面中保持一致的视觉呈现和交互体验。
+
+## Requirements
+
+### Requirement: 布局组件复用
+系统 SHALL 提供可复用的布局组件，包括品牌区域、用户信息区域、导航项组件，用于在不同页面中保持一致的视觉呈现。
+
+#### Scenario: SidebarBrand 组件渲染
+- **WHEN** 页面使用 SidebarBrand 组件并传入 subtitle 属性
+- **THEN** 系统显示 GrandClaw 品牌 logo 和对应的副标题文本
+
+#### Scenario: SidebarUser 组件显示用户信息
+- **WHEN** 页面使用 SidebarUser 组件
+- **THEN** 系统从 UserContext 获取用户信息并显示用户头像、姓名和角色
+
+#### Scenario: SidebarNavItem 组件支持状态切换
+- **WHEN** 页面使用 SidebarNavItem 组件并传入 active 状态
+- **THEN** 系统根据 active 状态应用相应的激活样式
+
+### Requirement: 通用 UI 组件库
+系统 SHALL 提供通用 UI 组件库，包括空状态组件、状态标签组件、标签输入组件、搜索栏组件，支持在多个页面中复用。
+
+#### Scenario: EmptyState 组件显示空状态
+- **WHEN** 页面使用 EmptyState 组件并传入 icon、message、description 属性
+- **THEN** 系统显示居中的空状态提示，包含图标、标题和描述文本
+
+#### Scenario: StatusBadge 组件显示不同状态
+- **WHEN** 页面使用 StatusBadge 组件并传入 status 属性（如 running、stopped、warning、error）
+- **THEN** 系统根据 status 值应用对应的颜色样式和图标
+
+#### Scenario: TagInput 组件支持标签增删
+- **WHEN** 用户在 TagInput 组件中输入文本并按回车
+- **THEN** 系统将输入内容添加为标签，并显示删除按钮
+
+#### Scenario: SearchBar 组件提供筛选功能
+- **WHEN** 页面使用 SearchBar 组件并传入搜索条件配置
+- **THEN** 系统渲染对应的筛选输入框，并在用户输入时触发 onChange 回调