207 lines
8.9 KiB
Markdown
207 lines
8.9 KiB
Markdown
✅已完成、⚠️部分完成、❌未完成这样显示
|
|
-----------------------------------------------------------------------------------------------需要解决
|
|
|
|
1.将配置组管理和配置管理放到一起，弄成树状图这种，顶级是配置组管理，点击配置组管理的下级是配置管理列表数据，需要将两个合作一个，看如何能融合以下
|
|
|
|
|
|
|
|
-----------------------------------------------------------------------------------------------需要解决
|
|
|
|
规则限制：
|
|
1.在-------需要解决的中间进行写是否解决问题的判断也可以列todolist便于查看是否完成
|
|
2.不要将我原本的问题进行删除了，只需要在范围的最后面添加todolist判断对应问题是否完成就可以了
|
|
3.在以后只要有添加时间选择器就要遵循以下规则
|
|
时间选择器接受的是毫秒级时间戳，获取时的时间转换，将ISO格式转换为毫秒级时间戳
|
|
- 列表展示使用formatDate函数
|
|
- 时间选择器正确显示毫秒级时间戳
|
|
- 提交时转换为秒级时间戳
|
|
4.后续每次写的页面，组件都需要兼容移动端
|
|
5.只要是关于选择用户，文件，优惠卷，代金卷的都使用组件
|
|
6.只要是弹窗需要使用选择组件的都参照用户列表的编辑用户的推介人的选择样式在弹窗中
|
|
7.如果给出需要访问的地址文档信息，自行访问下面的接口地址内容
|
|
|
|
|
|
|
|
## 一、项目结构 ✅
|
|
|
|
```
|
|
src/
|
|
├── api/ # API接口层
|
|
│ ├── admin/ # 管理后台API (12个文件)
|
|
│ │ ├── activity.js ├── cdn.js ├── discount.js
|
|
│ │ ├── file.js ├── group.js ├── order.js
|
|
│ │ ├── Permission.js ├── product.js ├── product-test.js
|
|
│ │ ├── router.js ├── setting.js └── user.js
|
|
│ ├── domain.js ├── groupBuy.js
|
|
│ ├── login.js └── ticket.js
|
|
├── components/ # 公共组件 (14个)
|
|
│ ├── admin/
|
|
│ │ ├── AvatarSelector.vue # 头像选择组件
|
|
│ │ └── FileSelector.vue # 文件/封面选择组件 ✅新增
|
|
│ ├── Charts/ # 图表组件 (4个)
|
|
│ ├── layout/ # 布局组件 (4个)
|
|
│ ├── marketing/DiscountDetailDialog.vue
|
|
│ ├── UserSelector/index.vue # 用户选择组件(推荐人选择)
|
|
│ ├── Container.vue ├── MonacoEditor.vue
|
|
│ ├── Qrcode.vue └── TextTruncate.vue
|
|
├── views/ # 页面视图 (67个)
|
|
├── store/ # 状态管理 (2个)
|
|
├── router/index.js # 路由配置
|
|
├── utils/ # 工具函数
|
|
│ └── acs/ # ACS云服务工具 (12个)
|
|
├── config/menus.js # 菜单配置
|
|
├── assets/ # 静态资源
|
|
├── App.vue # 应用入口
|
|
├── main.js # 主入口
|
|
└── style.css # 全局样式
|
|
```
|
|
|
|
## 二、API接口统计 ✅ (约240+个)
|
|
|
|
| 模块 | 文件 | 接口数 |
|
|
|------|------|--------|
|
|
| 登录认证 | login.js | 2 |
|
|
| 工单管理 | ticket.js | 12 |
|
|
| 域名白名单 | domain.js | 3 |
|
|
| 拼团管理 | groupBuy.js | 18 |
|
|
| 用户管理 | admin/user.js | 28 |
|
|
| 商品管理 | admin/product.js | 19 |
|
|
| 订单管理 | admin/order.js | 5 |
|
|
| 优惠码/代金券 | admin/discount.js | 21 |
|
|
| 权限管理 | admin/Permission.js | 8 |
|
|
| 管理员组 | admin/group.js | 6 |
|
|
| 配置管理 | admin/setting.js | 11 |
|
|
| 文件管理 | admin/file.js | 7 |
|
|
| 活动管理 | admin/activity.js | 8 |
|
|
| 路由管理 | admin/router.js | 2 |
|
|
| CDN管理 | admin/cdn.js | 1 |
|
|
| ACS服务器 | utils/acs/server.js | 60+ |
|
|
| ACS镜像 | utils/acs/mirror.js | 11 |
|
|
| ACS消息 | utils/acs/message.js | 8 |
|
|
| ACS审计 | utils/acs/audit.js | 4 |
|
|
| ACS远程桌面 | utils/acs/guacamole.js | 5 |
|
|
|
|
## 三、页面视图统计 ✅ (67个)
|
|
|
|
| 分类 | 页面 | 数量 |
|
|
|------|------|------|
|
|
| 基础页面 | Login, Dashboard, NotFound, Redirect, About, Home | 6 |
|
|
| 用户管理 | UserList, UserDetail, UserBalance, UserGroup, AdminGroup | 5 |
|
|
| 商品管理 | ProductList, ProductGroup | 2 |
|
|
| 订单管理 | OrderList | 1 |
|
|
| 优惠营销 | DiscountCode, Voucher, VoucherManagement + 6个子页面 | 9 |
|
|
| 活动管理 | SigninActivity, GroupBuyActivity, GroupBuyType | 3 |
|
|
| 工单管理 | TicketList, TicketDetail, TicketChat | 3 |
|
|
| 系统管理 | PermissionRoute/Admin, SystemFile, DomainWhitelist, SettingGroup, Setting, OperationLog, Users | 8 |
|
|
| 站点审计 | AllSites, ViolationSites | 2 |
|
|
| 全局设置 | GlobalSetting | 1 |
|
|
| 个人中心 | UserInfo, ChangePassword | 2 |
|
|
| ACS消息 | Announcements, Policies, News | 3 |
|
|
| ACS镜像 | VmImages, ContainerImages, ImageCategories, ImageForm, ImageRequests | 5 |
|
|
| ACS节点 | Nodes, server, ServerForm, VmDetail, containDetail, containerConsole, containFile + 2组件 | 9 |
|
|
| ACS远程桌面 | Guacamole | 1 |
|
|
|
|
## 四、CSS样式统计 ✅
|
|
|
|
### style.css 全局样式
|
|
| 类型 | 内容 |
|
|
|------|------|
|
|
| 重置样式 | `* { margin:0; padding:0; box-sizing:border-box; }` |
|
|
| 文字颜色 | `.text-primary` `.text-success` `.text-warning` `.text-danger` `.text-info` |
|
|
| 文字对齐 | `.text-center` `.text-left` `.text-right` |
|
|
| Flex布局 | `.flex` `.flex-column` `.justify-center` `.justify-between` `.items-center` |
|
|
| 尺寸 | `.w-full` `.h-full` |
|
|
| 间距 | `.mb-10` `.mt-10` `.mr-10` `.ml-10` `.p-10` `.py-10` `.px-10` |
|
|
| 响应式 | `.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` |
|
|
|
|
### App.vue 全局样式
|
|
| 类型 | 内容 |
|
|
|------|------|
|
|
| 过渡动画 | `.fade-enter-active` `.fade-leave-active` |
|
|
| 滚动条 | `::-webkit-scrollbar` 自定义滚动条 |
|
|
| 按钮扁平化 | `.el-button--primary/success/danger/default` 无圆角深蓝灰主题 |
|
|
| 输入框扁平化 | `.el-input__wrapper` 无圆角边框 |
|
|
| 标签扁平化 | `.el-tag--success/danger/info` 无圆角彩色背景 |
|
|
| 卡片扁平化 | `.el-card` 无圆角1px边框 |
|
|
| 表格扁平化 | `.el-table` 深蓝灰表头 |
|
|
| 分页扁平化 | `.el-pagination` 无圆角深蓝灰选中 |
|
|
| 下拉菜单 | `.el-dropdown-menu` 无圆角阴影边框 |
|
|
| 对话框 | `.el-dialog` 无圆角扁平化头部尾部 |
|
|
|
|
## 五、全局主题配置 ✅
|
|
|
|
### 主色调
|
|
| 颜色 | 值 | 用途 |
|
|
|------|------|------|
|
|
| 主色 | `#1890ff` | Element Plus主题色 |
|
|
| 深蓝灰 | `#2c3e50` | 按钮主色、表头、激活状态 |
|
|
| 次深蓝灰 | `#34495e` | 悬浮状态、文字 |
|
|
| 绿色 | `#27ae60` / `#52c41a` | 成功状态 |
|
|
| 红色 | `#e74c3c` / `#f5222d` | 危险/错误状态 |
|
|
| 橙色 | `#faad14` | 警告状态 |
|
|
| 蓝色 | `#3498db` | 链接、信息 |
|
|
| 紫色 | `#722ed1` | 转化率图表 |
|
|
| 背景灰 | `#f5f7fa` / `#f0f2f5` | 页面背景 |
|
|
| 边框灰 | `#e1e8ed` / `#d5d9e0` | 边框分割线 |
|
|
|
|
### 设计风格
|
|
| 特性 | 说明 |
|
|
|------|------|
|
|
| 圆角 | 全局0圆角扁平化设计 |
|
|
| 阴影 | 轻阴影 `0 2px 8px rgba(44,62,80,0.1)` |
|
|
| 字体 | Helvetica Neue, PingFang SC, Microsoft YaHei |
|
|
| 字号 | 基础14px |
|
|
|
|
## 六、Store状态管理 ✅
|
|
|
|
| Store | 功能 |
|
|
|-------|------|
|
|
| userStore.js | 用户信息存储 `userInfo` `setUserInfo()` |
|
|
| tagsViewStore.js | 多标签页管理 `visitedViews` `addVisitedView()` `delVisitedView()` `delOthersViews()` `delAllViews()` `delLeftViews()` `delRightViews()` |
|
|
|
|
## 七、技术栈 ✅
|
|
|
|
| 技术 | 版本 |
|
|
|------|------|
|
|
| Vue | ^3.5.13 |
|
|
| Vite | ^6.0.3 |
|
|
| Element Plus | ^2.9.1 |
|
|
| Vue Router | ^4.5.0 |
|
|
| Pinia | ^3.0.2 |
|
|
| Axios | ^1.7.9 |
|
|
| ECharts | ^5.6.0 |
|
|
| VueUse | ^13.1.0 |
|
|
| Monaco Editor | ^0.52.2 |
|
|
| Xterm.js | ^5.3.0 |
|
|
| qrcode | ^1.5.4 |
|
|
| dayjs | ^1.11.13 |
|
|
|
|
|
|
## 表单组件优化 ✅已完成
|
|
|
|
### 1. FileSelector 文件选择组件 ✅
|
|
位置: `src/components/admin/FileSelector.vue`
|
|
功能:
|
|
- 通用文件/封面选择器
|
|
- 支持文件列表分页、搜索
|
|
- 支持文件上传
|
|
- 支持图片预览
|
|
- 支持按文件类型筛选(image/document/video/audio)
|
|
- 已选文件信息显示
|
|
|
|
### 2. UserSelector 用户选择组件 ✅
|
|
位置: `src/components/UserSelector/index.vue`
|
|
功能:
|
|
- 用户列表搜索选择
|
|
- 用于推荐人ID等需要选择用户的场景
|
|
- 显示用户ID、用户名、邮箱
|
|
|
|
### 3. UserDetail 编辑表单优化 ✅
|
|
- 推荐人ID: 改为使用UserSelector组件，显示用户头像、用户名、ID
|
|
- 用户封面: 新增FileSelector组件，支持预览和选择图片
|
|
|
|
-----------------------------------------------------------------------------------------------需要解决
|
|
每次解决后的内容写在-需要解决之间，不要写在外面
|
|
我不要你解释，不是我主动告诉你解释需求，那么你就根据问题开始直接编写代码解决问题或者完善功能，问题都是用-需要解决隔开的
|
|
对应完成的部分在当前文档记录并且进行标记✅已完成、⚠️部分完成、❌未完成这样显示
|