monisuo/monisuo-admin/agents.md

Monisuo Admin - Vue 3 管理后台

项目说明

基于 shadcn-vue-admin 模板的 Monisuo 模拟交易系统管理后台。

技术栈

• Vue 3 + TypeScript
• shadcn-vue (Radix UI primitives)
• Tailwind CSS 4
• TanStack Query (vue-query)
• Vue Router
• Pinia

后端 API

• Base URL: http://localhost:8080
• 认证方式: JWT Bearer Token
• 接口定义: src/services/api/monisuo-admin.api.ts

功能模块

1. 登录认证 (/auth/monisuo-sign-in)
2. 资金总览 (/monisuo/dashboard)
3. 用户管理 (/monisuo/users)
4. 币种管理 (/monisuo/coins)
5. 订单审批 (/monisuo/orders)

开发命令

安装依赖

pnpm install

启动开发服务器

pnpm dev

访问: http://localhost:5173

类型检查

pnpm type-check

构建生产版本

pnpm build

代码格式化

pnpm lint

注意事项

响应式断点

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

移动端优化重点：

• 表格改为卡片列表
• 隐藏次要信息
• 增大触摸区域
• 简化导航

组件规范

1. 使用 Composition API + <script setup>
2. TypeScript 类型定义
3. 使用 shadcn-vue 组件
4. Tailwind CSS 样式
5. TanStack Query 管理数据

Git 提交规范

• feat: 新功能
• fix: 修复
• refactor: 重构
• style: 样式调整
• docs: 文档

后端启动

在另一个终端运行：

cd ~/Desktop/projects/monisuo
mvn spring-boot:run

默认管理员账号：

• 用户名: admin
• 密码: admin123

当前状态

✅ 已完成：

• 项目初始化
• API 服务层
• 基础页面框架
• 认证逻辑

⏳ 待完成：

• 布局组件封装
• 响应式优化
• 完整功能对接
• 用户体验优化