ApiServer-Web-admin_dashboard_pc/问题.MD

✅已完成、⚠️部分完成、❌未完成这样显示 -----------------------------------------------------------------------------------------------需要解决

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组件，支持预览和选择图片

-----------------------------------------------------------------------------------------------需要解决 每次解决后的内容写在-需要解决之间，不要写在外面 我不要你解释，不是我主动告诉你解释需求，那么你就根据问题开始直接编写代码解决问题或者完善功能，问题都是用-需要解决隔开的 对应完成的部分在当前文档记录并且进行标记✅已完成、⚠️部分完成、❌未完成这样显示