3.3 KiB
3.3 KiB
目标
完善 Monisuo 管理后台前端，对接所有后端 API。
核心要求
1. 统一风格与布局
- 所有页面使用统一的设计语言
- 相似业务模块使用相同的布局结构
- 封装可复用的布局组件（如 PageLayout、DataTable、FormDialog 等）
2. 响应式设计
- PC 端：充分利用大屏幕空间，展示更多信息
- 移动端：优化触摸体验，简化布局，隐藏次要信息
- 使用 Tailwind CSS 的响应式断点
3. 现代化 UI
- 简洁、清晰的视觉层次
- 适当的留白和间距
- 使用 shadcn-vue 组件库保持一致性
- 暗色模式支持
4. 完整功能对接
已实现的 API 接口（见 src/services/api/monisuo-admin.api.ts）：
- POST /admin/login - 管理员登录
- GET /admin/user/list - 用户列表
- GET /admin/user/detail - 用户详情
- POST /admin/user/status - 禁用/启用用户
- GET /admin/coin/list - 币种列表
- POST /admin/coin/save - 新增/编辑币种
- POST /admin/coin/price - 调整币种价格
- POST /admin/coin/status - 币种上下架
- GET /admin/order/pending - 待审批订单
- GET /admin/order/list - 所有订单
- POST /admin/order/approve - 审批订单
- GET /admin/finance/overview - 资金总览
5. 需要完成的任务
页面优化
-
登录页 (
/auth/monisuo-sign-in.vue)- 已完成基础实现
- 需要添加表单验证
- 响应式布局优化
-
资金总览 (
/monisuo/dashboard.vue)- 已完成基础统计卡片
- 添加图表展示（可选：使用 Chart.js 或 ECharts）
- 添加快捷操作入口
-
用户管理 (
/monisuo/users.vue)- 已完成列表和状态切换
- 添加用户详情弹窗
- 添加分页组件
- 响应式表格优化
-
币种管理 (
/monisuo/coins.vue)- 已完成 CRUD 功能
- 优化表单验证
- 响应式布局
-
订单审批 (
/monisuo/orders.vue)- 已完成基础审批功能
- 添加订单详情查看
- 优化审批流程交互
- 添加批量操作（可选）
布局组件封装
-
PageLayout - 统一页面布局
- 标题、描述区域
- 操作按钮区域
- 内容区域
- 支持响应式
-
DataTable - 数据表格组件
- 统一的表格样式
- 分页支持
- 加载状态
- 空状态
- 响应式（移动端改为卡片列表）
-
FormDialog - 表单弹窗
- 统一的弹窗样式
- 表单验证
- 提交状态
-
StatsCard - 统计卡片
- 统一的统计展示
- 支持图标、颜色主题
- 响应式
其他优化
- 添加全局加载状态
- 添加错误提示 Toast
- 优化路由守卫和权限控制
- 添加页面切换动画
- 移动端侧边栏优化
技术栈
- Vue 3 + TypeScript
- shadcn-vue (Radix UI)
- Tailwind CSS 4
- TanStack Query (vue-query)
- Vue Router
- Pinia
参考文件
- src/services/api/monisuo-admin.api.ts - API 定义
- src/pages/monisuo/*.vue - 已有页面
- src/composables/use-auth.ts - 认证逻辑
- src/stores/auth.ts - 认证状态
完成标准
- 所有 API 接口已对接
- 所有页面响应式布局完成
- PC 和移动端体验良好
- 布局组件已封装并复用
- 代码风格统一
- 无 TypeScript 错误
- 可以正常运行和构建
完成后在 IMPLEMENTATION_PLAN.md 添加：STATUS: COMPLETE