# 目标

完善 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