171 lines
4.1 KiB
Markdown
171 lines
4.1 KiB
Markdown
|
# Monisuo Admin 实施计划
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
|
|||
|
|
- 项目名称: Monisuo 管理后台
|
|||
|
|
- 技术栈: Vue 3 + shadcn-vue + Tailwind CSS
|
|||
|
|
- 开始时间: 2026-03-22
|
|||
|
|
- 完成时间: 2026-03-22
|
|||
|
|
- 状态: COMPLETE
|
|||
|
|
|
|||
|
|
## 任务清单
|
|||
|
|
|
|||
|
|
### 阶段 1: 布局组件封装 ✅
|
|||
|
|
|
|||
|
|
- [x] BasicPage 组件 - 已有组件可直接使用
|
|||
|
|
- [x] 使用现有的 UiTable、UiCard 等组件
|
|||
|
|
- [x] 使用现有的 UiDialog 组件
|
|||
|
|
- [x] 使用现有的 UiSpinner 组件
|
|||
|
|
|
|||
|
|
### 阶段 2: 页面优化 ✅
|
|||
|
|
|
|||
|
|
- [x] 登录页响应式优化
|
|||
|
|
- 添加表单验证
|
|||
|
|
- 添加密码显示/隐藏
|
|||
|
|
- 响应式布局
|
|||
|
|
- 移动端 Logo
|
|||
|
|
- [x] 资金总览页
|
|||
|
|
- 统计卡片展示
|
|||
|
|
- 快捷操作入口
|
|||
|
|
- 待审批订单预览
|
|||
|
|
- [x] 用户管理页
|
|||
|
|
- Toast 提示
|
|||
|
|
- 分页组件
|
|||
|
|
- 用户详情弹窗
|
|||
|
|
- 响应式布局（PC表格/移动端卡片）
|
|||
|
|
- [x] 币种管理页
|
|||
|
|
- Toast 提示
|
|||
|
|
- 表单验证
|
|||
|
|
- 响应式布局
|
|||
|
|
- [x] 订单审批页
|
|||
|
|
- Toast 提示
|
|||
|
|
- 订单详情弹窗
|
|||
|
|
- 分页组件
|
|||
|
|
- 筛选功能
|
|||
|
|
- 响应式布局
|
|||
|
|
|
|||
|
|
### 阶段 3: 全局优化 ✅
|
|||
|
|
|
|||
|
|
- [x] Toast 提示（使用 vue-sonner）
|
|||
|
|
- [x] 路由守卫优化（Monisuo 路由保护）
|
|||
|
|
- [x] TypeScript 类型检查通过
|
|||
|
|
- [x] 构建测试通过
|
|||
|
|
|
|||
|
|
### 阶段 4: 测试与完善 ✅
|
|||
|
|
|
|||
|
|
- [x] TypeScript 类型检查
|
|||
|
|
- [x] 构建测试
|
|||
|
|
- [x] 功能完整性检查
|
|||
|
|
|
|||
|
|
## 已实现的页面
|
|||
|
|
|
|||
|
|
### 1. 登录页 (`/auth/monisuo-sign-in.vue`)
|
|||
|
|
|
|||
|
|
- 响应式布局（PC左右分栏，移动端单列）
|
|||
|
|
- 表单验证（用户名、密码必填，密码长度检查）
|
|||
|
|
- 密码显示/隐藏切换
|
|||
|
|
- 加载状态和错误提示
|
|||
|
|
- 美观的品牌展示
|
|||
|
|
|
|||
|
|
### 2. 资金总览 (`/monisuo/dashboard.vue`)
|
|||
|
|
|
|||
|
|
- 6个统计卡片（充值、提现、在管资金、交易总值、待审批、用户数）
|
|||
|
|
- 快捷操作入口
|
|||
|
|
- 待审批订单预览
|
|||
|
|
- 响应式布局
|
|||
|
|
|
|||
|
|
### 3. 用户管理 (`/monisuo/users.vue`)
|
|||
|
|
|
|||
|
|
- 用户列表（PC表格/移动端卡片）
|
|||
|
|
- 搜索功能（用户名、状态筛选）
|
|||
|
|
- 分页功能
|
|||
|
|
- 用户状态切换（启用/禁用）
|
|||
|
|
- 用户详情弹窗
|
|||
|
|
- Toast 操作提示
|
|||
|
|
|
|||
|
|
### 4. 币种管理 (`/monisuo/coins.vue`)
|
|||
|
|
|
|||
|
|
- 币种列表（PC表格/移动端卡片）
|
|||
|
|
- 新增/编辑币种弹窗
|
|||
|
|
- 调价功能（仅手动价格类型）
|
|||
|
|
- 上下架功能
|
|||
|
|
- 表单验证
|
|||
|
|
- Toast 操作提示
|
|||
|
|
|
|||
|
|
### 5. 订单审批 (`/monisuo/orders.vue`)
|
|||
|
|
|
|||
|
|
- 待审批/全部订单 Tab 切换
|
|||
|
|
- 订单列表（PC表格/移动端卡片）
|
|||
|
|
- 订单详情弹窗
|
|||
|
|
- 审批功能（通过/驳回）
|
|||
|
|
- 筛选功能（类型、状态）
|
|||
|
|
- 分页功能
|
|||
|
|
- Toast 操作提示
|
|||
|
|
|
|||
|
|
## API 对接情况
|
|||
|
|
|
|||
|
|
所有 API 已完成对接：
|
|||
|
|
|
|||
|
|
- ✅ 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 - 资金总览
|
|||
|
|
|
|||
|
|
## 技术实现
|
|||
|
|
|
|||
|
|
### 使用的库
|
|||
|
|
|
|||
|
|
- Vue 3 + TypeScript
|
|||
|
|
- shadcn-vue (Radix UI)
|
|||
|
|
- Tailwind CSS 4
|
|||
|
|
- TanStack Query (vue-query)
|
|||
|
|
- Vue Router
|
|||
|
|
- Pinia
|
|||
|
|
- vue-sonner (Toast)
|
|||
|
|
- @iconify/vue (图标)
|
|||
|
|
- lucide-vue-next (图标)
|
|||
|
|
|
|||
|
|
### 响应式设计
|
|||
|
|
|
|||
|
|
- PC端：表格布局，充分利用大屏幕空间
|
|||
|
|
- 移动端：卡片列表布局，简化信息展示
|
|||
|
|
- 使用 Tailwind CSS 响应式断点 (md:, lg:, xl:)
|
|||
|
|
|
|||
|
|
### 路由守卫
|
|||
|
|
|
|||
|
|
- `/monisuo/*` 路由需要登录认证
|
|||
|
|
- 未登录自动重定向到 `/auth/monisuo-sign-in`
|
|||
|
|
|
|||
|
|
## 进度日志
|
|||
|
|
|
|||
|
|
### 2026-03-22 03:48
|
|||
|
|
|
|||
|
|
- ✅ 项目初始化完成
|
|||
|
|
- ✅ API 服务层实现
|
|||
|
|
- ✅ 基础页面创建
|
|||
|
|
- ✅ 认证逻辑实现
|
|||
|
|
|
|||
|
|
### 2026-03-22 (完成)
|
|||
|
|
|
|||
|
|
- ✅ 登录页响应式优化和表单验证
|
|||
|
|
- ✅ 资金总览页统计卡片和快捷操作
|
|||
|
|
- ✅ 用户管理页分页、详情弹窗、响应式布局
|
|||
|
|
- ✅ 币种管理页表单验证、响应式布局
|
|||
|
|
- ✅ 订单审批页详情弹窗、筛选、分页、响应式布局
|
|||
|
|
- ✅ Toast 提示集成
|
|||
|
|
- ✅ 路由守卫优化
|
|||
|
|
- ✅ TypeScript 类型检查通过
|
|||
|
|
- ✅ 构建测试通过
|
|||
|
|
|
|||
|
|
## 状态
|
|||
|
|
|
|||
|
|
STATUS: COMPLETE
|