134 lines
3.3 KiB
Markdown
134 lines
3.3 KiB
Markdown
|
# 目标
|
|||
|
|
|
|||
|
|
完善 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. 需要完成的任务
|
|||
|
|
|
|||
|
|
#### 页面优化
|
|||
|
|
|
|||
|
|
1. **登录页** (`/auth/monisuo-sign-in.vue`)
|
|||
|
|
- 已完成基础实现
|
|||
|
|
- 需要添加表单验证
|
|||
|
|
- 响应式布局优化
|
|||
|
|
|
|||
|
|
2. **资金总览** (`/monisuo/dashboard.vue`)
|
|||
|
|
- 已完成基础统计卡片
|
|||
|
|
- 添加图表展示（可选：使用 Chart.js 或 ECharts）
|
|||
|
|
- 添加快捷操作入口
|
|||
|
|
|
|||
|
|
3. **用户管理** (`/monisuo/users.vue`)
|
|||
|
|
- 已完成列表和状态切换
|
|||
|
|
- 添加用户详情弹窗
|
|||
|
|
- 添加分页组件
|
|||
|
|
- 响应式表格优化
|
|||
|
|
|
|||
|
|
4. **币种管理** (`/monisuo/coins.vue`)
|
|||
|
|
- 已完成 CRUD 功能
|
|||
|
|
- 优化表单验证
|
|||
|
|
- 响应式布局
|
|||
|
|
|
|||
|
|
5. **订单审批** (`/monisuo/orders.vue`)
|
|||
|
|
- 已完成基础审批功能
|
|||
|
|
- 添加订单详情查看
|
|||
|
|
- 优化审批流程交互
|
|||
|
|
- 添加批量操作（可选）
|
|||
|
|
|
|||
|
|
#### 布局组件封装
|
|||
|
|
|
|||
|
|
1. **PageLayout** - 统一页面布局
|
|||
|
|
- 标题、描述区域
|
|||
|
|
- 操作按钮区域
|
|||
|
|
- 内容区域
|
|||
|
|
- 支持响应式
|
|||
|
|
|
|||
|
|
2. **DataTable** - 数据表格组件
|
|||
|
|
- 统一的表格样式
|
|||
|
|
- 分页支持
|
|||
|
|
- 加载状态
|
|||
|
|
- 空状态
|
|||
|
|
- 响应式（移动端改为卡片列表）
|
|||
|
|
|
|||
|
|
3. **FormDialog** - 表单弹窗
|
|||
|
|
- 统一的弹窗样式
|
|||
|
|
- 表单验证
|
|||
|
|
- 提交状态
|
|||
|
|
|
|||
|
|
4. **StatsCard** - 统计卡片
|
|||
|
|
- 统一的统计展示
|
|||
|
|
- 支持图标、颜色主题
|
|||
|
|
- 响应式
|
|||
|
|
|
|||
|
|
#### 其他优化
|
|||
|
|
|
|||
|
|
1. 添加全局加载状态
|
|||
|
|
2. 添加错误提示 Toast
|
|||
|
|
3. 优化路由守卫和权限控制
|
|||
|
|
4. 添加页面切换动画
|
|||
|
|
5. 移动端侧边栏优化
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- 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 - 认证状态
|
|||
|
|
|
|||
|
|
## 完成标准
|
|||
|
|
|
|||
|
|
1. 所有 API 接口已对接
|
|||
|
|
2. 所有页面响应式布局完成
|
|||
|
|
3. PC 和移动端体验良好
|
|||
|
|
4. 布局组件已封装并复用
|
|||
|
|
5. 代码风格统一
|
|||
|
|
6. 无 TypeScript 错误
|
|||
|
|
7. 可以正常运行和构建
|
|||
|
|
|
|||
|
|
完成后在 IMPLEMENTATION_PLAN.md 添加：STATUS: COMPLETE
|