📝 docs(system-config): 更新系统配置UI包开发文档

- 将Tasks/Subtasks重命名为任务/子任务，统一使用中文
- 新增任务1：创建多租户系统配置界面包结构
- 新增任务2：配置包依赖和构建
- 新增任务3：实现RPC客户端架构和类型定义
- 新增任务4：复制并调整系统配置管理界面组件
- 新增任务5：实现完整的系统配置管理功能
- 新增任务6：集成系统配置UI包到管理后台
- 新增任务7：创建测试套件
- 新增任务8：配置包导出接口
- 新增任务9：验证功能无回归
- 新增API规范、组件规范、文件位置等详细说明
- 补充测试要求、技术约束和实施注意事项

docs/stories/010.004.system-config-ui-package.story.md

@@ -15,26 +15,92 @@ Draft
 4. 提供配置项的增删改查功能
 5. 验证现有功能保持完整，无回归
 
-## Tasks / Subtasks
-- [ ] 创建系统配置UI包 (AC: 1)
-  - [ ] 创建系统配置列表页面组件 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 创建系统配置创建/编辑表单组件 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 创建系统配置详情查看组件 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 添加租户筛选器组件 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-- [ ] 集成系统配置UI包到管理后台 (AC: 2)
+## 任务 / 子任务
+
+- [ ] 任务 1 (AC: 1): 创建多租户系统配置界面包结构
+  - [ ] 创建包目录：`packages/system-config-management-ui-mt/`
+  - [ ] 复制广告管理包结构作为参考：`cp -r packages/advertisement-management-ui-mt/* packages/system-config-management-ui-mt/`
+  - [ ] **重要：复制后立即重命名文件为系统配置包名**
+  - [ ] 更新包名为 `@d8d/system-config-management-ui-mt`
+
+- [ ] 任务 2 (AC: 1, 3): 配置包依赖和构建
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/package.json`：
+    - [ ] 更新包名：`"name": "@d8d/system-config-management-ui-mt"`
+    - [ ] 更新依赖：`"@d8d/core-module-mt/system-config-module-mt": "workspace:*"`
+    - [ ] 删除广告管理相关依赖：`@d8d/advertisements-module-mt`、`@d8d/advertisement-type-management-ui-mt`
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/tsconfig.json`：
+    - [ ] 更新路径映射：`"@d8d/core-module-mt/system-config-module-mt/*"`
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/vitest.config.ts`：
+    - [ ] 更新测试环境配置
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/tests/setup.ts`：
+    - [ ] 更新测试设置的系统配置相关配置
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/eslint.config.js`：
+    - [ ] 更新ESLint配置
+  - [ ] 安装依赖：`cd packages/system-config-management-ui-mt && pnpm install`
+
+- [ ] 任务 3 (AC: 4, 5): 实现RPC客户端架构和类型定义
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/src/api/systemConfigClient.ts`：
+    - [ ] 更新导入路径：`import { systemConfigRoutesMt } from '@d8d/core-module-mt/system-config-module-mt'`
+    - [ ] 更新客户端实例：`systemConfigClient = systemConfigRoutesMt`
+    - [ ] 保持单例模式和延迟初始化逻辑 [参照: packages/advertisement-management-ui-mt/src/api/advertisementClient.ts]
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/src/types/systemConfig.ts`：
+    - [ ] 从多租户系统配置模块包导入类型定义
+    - [ ] 确保类型定义与系统配置架构对齐
+  - [ ] 验证RPC客户端在主应用中的正确集成 [参考: web/src/client/api_init.ts]
+  - [ ] 实现类型安全的API调用模式 [参考: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx:100-112]
+
+- [ ] 任务 4 (AC: 1, 5): 复制并调整系统配置管理界面组件
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/src/components/SystemConfigManagement.tsx`：
+    - [ ] 更新导入路径：
+      - [ ] `import { systemConfigClientManager } from '../api/systemConfigClient'`
+      - [ ] `import { CreateSystemConfigDto, UpdateSystemConfigDto } from '@d8d/core-module-mt/system-config-module-mt/schemas'`
+    - [ ] **规范**：共享UI包组件导入必须使用具体组件路径，如 `@d8d/shared-ui-components/components/ui/button`，避免从根导入
+    - [ ] 使用系统配置客户端管理实例.get()来获取系统配置RPC客户端
+    - [ ] **骨架屏优化**：确保骨架屏只在表格数据区域显示，不影响搜索框、筛选器等其他UI元素
+    - [ ] 调整表单字段为系统配置相关字段：configKey, configValue, description等
+  - [ ] 复制并修改组件导出文件：
+    - [ ] `packages/system-config-management-ui-mt/src/components/index.ts`
+
+- [ ] 任务 5 (AC: 3, 4): 实现完整的系统配置管理功能
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/src/hooks/useSystemConfigs.ts`：
+    - [ ] 更新导入路径，使用多租户系统配置客户端
+    - [ ] 确保查询和突变操作使用正确的多租户API
+  - [ ] 复制并修改hooks导出文件：
+    - [ ] `packages/system-config-management-ui-mt/src/hooks/index.ts`
+  - [ ] 实现搜索和过滤功能，支持按configKey和description搜索
+  - [ ] 实现配置值的表单验证和错误处理
+  - [ ] 确保所有组件支持多租户上下文
+
+- [ ] 任务 6 (AC: 2): 集成系统配置UI包到管理后台
   - [ ] 在管理后台路由中添加系统配置页面路由 [参照: web/src/client/admin/routes.tsx]
   - [ ] 在管理后台菜单中添加系统配置菜单项 [参照: web/src/client/admin/menu.tsx]
   - [ ] 配置系统配置页面的权限控制 [参照: web/src/client/admin/routes.tsx]
-- [ ] 实现系统配置管理功能 (AC: 3, 4)
-  - [ ] 实现系统配置列表查询和分页 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 实现系统配置创建功能 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 实现系统配置编辑功能 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 实现系统配置删除功能 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-  - [ ] 实现按租户筛选系统配置 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
-- [ ] 创建系统配置UI包测试 (AC: 5)
-  - [ ] 创建系统配置UI组件单元测试 [参照: packages/advertisement-management-ui-mt/tests/integration/advertisement-management.integration.test.tsx]
-  - [ ] 创建系统配置页面集成测试 [参照: packages/advertisement-management-ui-mt/tests/integration/advertisement-management.integration.test.tsx]
-  - [ ] 验证现有管理后台功能无回归 [参照: packages/advertisement-management-ui-mt/tests/integration/advertisement-management.integration.test.tsx]
+  - [ ] 验证系统配置页面在管理后台中正确显示和功能正常
+
+- [ ] 任务 7 (AC: 5, 6): 创建测试套件
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/tests/integration/system-config-management.integration.test.tsx`：
+    - [ ] 更新导入路径，使用系统配置包
+    - [ ] 添加系统配置管理功能测试
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/tests/setup.ts`：
+    - [ ] 配置系统配置测试环境
+  - [ ] **系统配置测试重点**：
+    - [ ] 测试系统配置列表页面渲染
+    - [ ] 验证配置项的增删改查功能
+    - [ ] 测试租户筛选功能
+    - [ ] 确保API调用包含正确的租户标识
+
+- [ ] 任务 8 (AC: 1, 7): 配置包导出接口
+  - [ ] 复制并修改 `packages/system-config-management-ui-mt/src/index.ts`：
+    - [ ] 更新导出组件和hook的路径
+    - [ ] 确保所有导出组件、hook和类型定义正确
+  - [ ] 验证导出脚本正常工作
+
+- [ ] 任务 9 (AC: 6, 8): 验证功能无回归
+  - [ ] 运行包构建：`cd packages/system-config-management-ui-mt && pnpm build`
+  - [ ] 运行所有测试：`cd packages/system-config-management-ui-mt && pnpm test`
+  - [ ] 验证系统配置管理功能正常
+  - [ ] 验证与多租户系统兼容性
+  - [ ] 验证现有管理后台功能无回归
 
 ## Dev Notes
 
@@ -69,6 +135,13 @@ Draft
 - **API端点**: 完整的CRUD API，支持租户隔离
 - **缓存策略**: Redis缓存，正常值1小时TTL，空值5分钟TTL
 
+### API规范
+- 使用RPC客户端架构进行API调用 [Source: architecture/tech-stack.md#前端技术栈]
+- 租户上下文由后端认证包处理，前端使用标准RPC客户端 [Source: architecture/component-architecture.md#认证授权]
+- 系统配置API端点：`/api/system-configs` [Source: packages/core-module-mt/system-config-module-mt/src/routes/system-config.routes.mt.ts]
+- 系统配置路由导出：`systemConfigRoutesMt` [Source: packages/core-module-mt/system-config-module-mt/src/index.mt.ts]
+- 使用单例模式和延迟初始化确保类型安全和性能 [参照: packages/advertisement-management-ui-mt/src/api/advertisementClient.ts]
+
 ### 配置键定义 [Source: packages/core-module-mt/system-config-module-mt/src/constants/config-keys.constants.mt.ts]
 - **认证配置键**:
   - `wx.mini.app.id` - 微信小程序AppID
@@ -81,6 +154,19 @@ Draft
   - `wx.payment.private.key` - 商户私钥
   - `wx.payment.notify.url` - 支付回调URL
 
+### 组件规范
+- React 19.1.0 + TypeScript [Source: architecture/tech-stack.md#前端技术栈]
+- TanStack Query v5用于状态管理 [Source: architecture/tech-stack.md#前端技术栈]
+- React Hook Form v7用于表单处理 [Source: architecture/tech-stack.md#前端技术栈]
+- 组件采用函数式组件和Hooks模式 [Source: architecture/component-architecture.md#组件设计原则]
+- 使用shadcn/ui组件库构建界面 [Source: architecture/tech-stack.md#前端技术栈]
+
+### 文件位置
+- 新包位置：`packages/system-config-management-ui-mt/` [Source: architecture/source-tree.md#包结构]
+- 组件文件：`packages/system-config-management-ui-mt/src/components/` [Source: architecture/source-tree.md#前端包结构]
+- API客户端：`packages/system-config-management-ui-mt/src/api/` [Source: architecture/source-tree.md#前端包结构]
+- 测试文件：`packages/system-config-management-ui-mt/tests/` [Source: 广告管理包实际结构]
+
 ### UI包创建策略
 - **包命名**: `system-config-management-ui-mt`
 - **包位置**: 在packages目录下创建
@@ -88,6 +174,29 @@ Draft
 - **API集成**: 使用Hono RPC客户端，类型安全 [参照: packages/advertisement-management-ui-mt/src/api/advertisementClient.ts]
 - **租户支持**: 支持多租户筛选和管理 [参照: packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx]
 
+### 测试要求
+- 使用Vitest进行集成测试 [Source: architecture/testing-strategy.md#测试框架]
+- 使用Testing Library进行组件集成测试 [Source: architecture/testing-strategy.md#测试框架]
+- 测试文件组织：集成测试在 `tests/integration/`，单元测试在 `tests/unit/` [Source: 广告管理包实际结构]
+- 重点验证系统配置管理和功能完整性
+- **系统配置测试重点**：
+  - 测试系统配置列表页面渲染
+  - 验证配置项的增删改查功能
+  - 测试租户筛选功能
+  - 确保API调用包含正确的租户标识
+  - 验证认证和授权的多租户感知
+
+### 技术约束
+- Node.js 20.19.2 [Source: architecture/tech-stack.md#开发环境]
+- TypeScript严格模式启用 [Source: architecture/component-architecture.md#typescript配置]
+- 租户上下文由后端处理，前端使用标准RPC客户端 [Source: architecture/component-architecture.md#多租户支持]
+
+### 实施注意事项
+- **依赖管理**: 所有包配置更新完成后，必须执行 `pnpm install` 命令以确保依赖正确安装
+- **包命名规范**: 多租户包使用 `-mt` 后缀标识（Multi-Tenant）
+- **API客户端集成**: 必须使用系统配置模块包导出的路由 `systemConfigRoutesMt`
+- **类型安全**: 确保从系统配置模块包正确导入类型定义
+
 ### 关键参考文件路径
 - **广告管理主组件**: `packages/advertisement-management-ui-mt/src/components/AdvertisementManagement.tsx` - 完整的CRUD管理组件参考
 - **广告管理API客户端**: `packages/advertisement-management-ui-mt/src/api/advertisementClient.ts` - Hono RPC客户端实现参考
@@ -95,6 +204,8 @@ Draft
 - **广告管理包配置**: `packages/advertisement-management-ui-mt/package.json` - 包依赖和配置参考
 - **广告管理集成测试**: `packages/advertisement-management-ui-mt/tests/integration/advertisement-management.integration.test.tsx` - 完整集成测试参考
 - **广告管理包导出**: `packages/advertisement-management-ui-mt/src/index.ts` - 包导出结构参考
+- **系统配置路由**: `packages/core-module-mt/system-config-module-mt/src/routes/system-config.routes.mt.ts` - API路由定义参考
+- **系统配置包导出**: `packages/core-module-mt/system-config-module-mt/src/index.mt.ts` - 模块导出结构参考
 
 ### 系统配置相关参考文件路径
 - **用户管理页面参考**: `web/src/client/admin/pages/Users.tsx`