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

Story 010.004: system-config-ui-package

Status

Draft

Story

As a 系统管理员， I want 在管理后台中查看和管理租户的系统配置， so that 可以为不同租户配置小程序登录和支付参数

Acceptance Criteria

1. 创建系统配置UI包，提供系统配置管理界面
2. 在管理后台中集成系统配置管理页面
3. 支持按租户筛选和查看系统配置
4. 提供配置项的增删改查功能
5. 验证现有功能保持完整，无回归

Tasks / Subtasks

• 创建系统配置UI包 (AC: 1)
  • 创建系统配置列表页面组件
  • 创建系统配置创建/编辑表单组件
  • 创建系统配置详情查看组件
  • 添加租户筛选器组件
• 集成系统配置UI包到管理后台 (AC: 2)
  • 在管理后台路由中添加系统配置页面路由
  • 在管理后台菜单中添加系统配置菜单项
  • 配置系统配置页面的权限控制
• 实现系统配置管理功能 (AC: 3, 4)
  • 实现系统配置列表查询和分页
  • 实现系统配置创建功能
  • 实现系统配置编辑功能
  • 实现系统配置删除功能
  • 实现按租户筛选系统配置
• 创建系统配置UI包测试 (AC: 5)
  • 创建系统配置UI组件单元测试
  • 创建系统配置页面集成测试
  • 验证现有管理后台功能无回归

Dev Notes

技术栈信息 [Source: architecture/tech-stack.md]

• 前端框架: React 19.1.0 + TypeScript
• 路由: React Router v7
• 状态管理: @tanstack/react-query (服务端状态) + Context (本地状态)
• UI组件库: shadcn/ui (基于Radix UI)
• 构建工具: Vite 7.0.0
• 样式: Tailwind CSS 4.1.11
• HTTP客户端: 基于Hono Client的封装 + axios适配器

项目结构信息 [Source: architecture/source-tree.md]

• 管理后台位置: web/src/client/admin/
• 页面组件位置: web/src/client/admin/pages/
• 共享组件位置: web/src/client/components/ui/
• 系统配置模块位置: packages/core-module-mt/system-config-module-mt/
• API客户端位置: web/src/client/api.ts

现有管理后台结构 [Source: web/src/client/admin/pages/Users.tsx]

• 页面组件模式: 使用React函数组件 + TypeScript
• 状态管理: 使用React Query管理服务端状态，useState管理本地状态
• 表单处理: 使用react-hook-form + zod验证
• UI组件: 使用shadcn/ui组件库
• API调用: 使用Hono RPC客户端，类型安全
• 分页模式: 使用DataTablePagination组件
• 搜索过滤: 支持关键词搜索和高级筛选

系统配置模块现有结构 [Source: packages/core-module-mt/system-config-module-mt/src/services/system-config.service.mt.ts]

• SystemConfigServiceMt: 继承GenericCrudService，支持多租户和Redis缓存
• 实体字段: id, tenantId, configKey, configValue, description, createdBy, updatedBy, createdAt, updatedAt
• API端点: 完整的CRUD API，支持租户隔离
• 缓存策略: Redis缓存，正常值1小时TTL，空值5分钟TTL

配置键定义 [Source: packages/core-module-mt/system-config-module-mt/src/constants/config-keys.constants.mt.ts]

• 认证配置键:
  • wx.mini.app.id - 微信小程序AppID
  • wx.mini.app.secret - 微信小程序AppSecret
• 支付配置键:
  • wx.payment.merchant.id - 微信支付商户ID
  • wx.payment.v3.key - 微信支付V3密钥
  • wx.payment.cert.serial.no - 商户证书序列号
  • wx.payment.public.key - 商户公钥
  • wx.payment.private.key - 商户私钥
  • wx.payment.notify.url - 支付回调URL

UI包创建策略

• 包命名: system-config-management-ui-mt
• 包位置: 在packages目录下创建
• 组件结构: 遵循现有管理后台组件模式
• API集成: 使用Hono RPC客户端，类型安全
• 租户支持: 支持多租户筛选和管理

关键参考文件路径

• 用户管理页面参考: web/src/client/admin/pages/Users.tsx
• 系统配置服务: packages/core-module-mt/system-config-module-mt/src/services/system-config.service.mt.ts
• 系统配置路由: packages/core-module-mt/system-config-module-mt/src/routes/system-config.routes.mt.ts
• 系统配置实体: packages/core-module-mt/system-config-module-mt/src/entities/system-config.entity.mt.ts
• 系统配置Schema: packages/core-module-mt/system-config-module-mt/src/schemas/system-config.schema.mt.ts

Testing

测试标准 [Source: architecture/testing-strategy.md]

• 测试框架: Vitest + hono/testing
• 测试位置: 各模块的tests/integration/目录
• 测试类型: 集成测试
• 覆盖率目标: 集成测试 ≥ 60%

测试文件结构

• packages/system-config-management-ui-mt/tests/unit/ - UI组件单元测试
• web/tests/integration/system-config.integration.test.ts - 系统配置页面集成测试

测试场景

• 系统配置列表页面渲染测试
• 系统配置创建功能测试
• 系统配置编辑功能测试
• 系统配置删除功能测试
• 租户筛选功能测试
• 现有管理后台功能回归测试

Change Log

Date	Version	Description	Author
2025-11-20	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

Agent Model Used

• Agent: James (Dev Agent)
• Environment: Multi-tenant development environment
• Session Date: 2025-11-20

Debug Log References

Completion Notes List

File List

QA Results