style: 优化布局和交互（Loading/空状态/骨架屏）
This commit is contained in:
@@ -1,9 +1,96 @@
|
||||
✅已完成、⚠️部分完成、❌未完成这样显示
|
||||
-----------------------------------------------------------------------------------------------需要解决
|
||||
|
||||
1.新增用户商品点击选择用户，点击确定选择并没有将数据返回到弹窗中,带有例如订单ID，套餐ID的这种都需要变为选择组件选择，里面是列表展示，并且带有分页，和刷新按钮
|
||||
接口路径 方法 功能描述 已实现 潜在风险 / 待修复点
|
||||
|
||||
.../snapshot/progress GET 快照进度 是 getUserVmSnapshotProgress task_id 类型为 string，前端需确保传字符串而非整数
|
||||
.../snapshot/count GET 快照数量 是 getUserVmSnapshotCount 无
|
||||
.../snapshot/set_limit POST 设置快照上限 是 setUserVmSnapshotLimit 无
|
||||
五、备份 (Backup) — 7 个接口
|
||||
接口路径 方法 功能描述 已实现 潜在风险 / 待修复点
|
||||
.../backup/list GET 备份列表 是 getUserVmBackupList 同快照 list，无分页参数
|
||||
.../backup/create POST 创建备份 是 createUserVmBackup 无
|
||||
.../backup/restore POST 恢复备份 是 restoreUserVmBackup 无
|
||||
.../backup/delete POST 删除备份 是 deleteUserVmBackup 同快照 delete，用 POST 而非 DELETE
|
||||
.../backup/progress GET 备份进度 是 getUserVmBackupProgress task_id 类型为 string
|
||||
.../backup/count GET 备份数量 是 getUserVmBackupCount 无
|
||||
.../backup/set_limit POST 设置备份上限 是 setUserVmBackupLimit 无
|
||||
六、安全组 (PostGroup) — 15 个接口
|
||||
接口路径 方法 功能描述 已实现 潜在风险 / 待修复点
|
||||
.../post_group/list GET 安全组列表 是 getUserVmPostGroupList 无分页参数，仅有 keyword 搜索
|
||||
.../post_group/detail GET 安全组详情 是 getUserVmPostGroupDetail 无
|
||||
.../post_group/user_list GET 用户安全组列表 是 getUserVmPostGroupUserList 注意：分页参数名为 page_size（非 count），与其他接口不一致
|
||||
.../post_group/create POST 创建安全组 是 createUserVmPostGroup lock/drop_all 为 boolean，但 FormData 会序列化为字符串 "true"/"false"，需后端兼容
|
||||
.../post_group/update POST 修改安全组 是 updateUserVmPostGroup 同上 boolean 问题
|
||||
.../post_group/bind POST 绑定安全组 是 bindUserVmPostGroup 无
|
||||
.../post_group/unbind POST 解绑安全组 是 unbindUserVmPostGroup 无
|
||||
.../post_group/apply POST 应用安全组 是 applyUserVmPostGroup 无
|
||||
.../post_group/set_shared POST 设置共享 是 setSharedUserVmPostGroup shared 为 boolean，同上 FormData 序列化问题
|
||||
.../post_group/delete DELETE 删除安全组 是 deleteUserVmPostGroup 无
|
||||
.../post_group/enable_whitelist POST 启用白名单 是 enableUserVmPostGroupWhitelist 无
|
||||
.../post_group/disable_whitelist POST 禁用白名单 是 disableUserVmPostGroupWhitelist 无
|
||||
.../post_group/create_rule POST 创建规则 是 createUserVmPostGroupRule 无
|
||||
.../post_group/update_rule POST 修改规则 是 updateUserVmPostGroupRule 无
|
||||
.../post_group/delete_rule DELETE 删除规则 是 deleteUserVmPostGroupRule 无
|
||||
七、网络 & 组网 (Network / Networking) — 7 个接口
|
||||
接口路径 方法 功能描述 已实现 潜在风险 / 待修复点
|
||||
.../network/list GET 网络列表 是 getUserVmNetworkList 无
|
||||
.../network/detail GET 网络详情 是 getUserVmNetworkDetail OpenAPI 有可选参数 host_id，前端需视情况传递
|
||||
.../networking/list GET 组网列表 是 getUserVmNetworkingList 无
|
||||
.../networking/detail GET 组网详情 是 getUserVmNetworkingDetail 无
|
||||
.../networking/create POST 创建组网 是 createUserVmNetworking 无
|
||||
.../networking/assign POST 分配组网 IP 是 assignUserVmNetworking 无
|
||||
.../networking/remove_network POST 移除组网网络 是 removeUserVmNetworkingNetwork 无
|
||||
.../networking/delete DELETE 删除组网 是 deleteUserVmNetworking 无
|
||||
八、总结
|
||||
接口完整性
|
||||
OpenAPI 定义的 68 个接口全部已在 src/api/admin/userVm.js 中实现，HTTP 方法和路径均一致，无缺失接口。
|
||||
需要关注的潜在风险（按严重程度排序）
|
||||
优先级 风险点 涉及位置 说明 状态
|
||||
✅高 user_goods/create 缺少 item_id UserGoodsList.vue 新增/编辑表单 已添加 item_id 归属项字段，普通商品直接赋值商品ID，云服务器弹出虚拟机列表选择 ✅已完成
|
||||
✅高 user_goods/list 缺少筛选参数 UserGoodsList.vue 已添加 user_id 和 good_id 筛选输入框，支持按用户ID和商品ID过滤 ✅已完成
|
||||
✅中 post_group/user_list 分页参数名不一致 UserVmSecurityGroupSelector.vue 前端调用处已正确使用 page_size 参数名 ✅已完成（无需修改）
|
||||
✅中 Boolean 字段通过 FormData 传递 安全组 create/update/set_shared fd() 已增加 boolean 类型显式转换为 "true"/"false"；SecurityGroupDetail.vue 和 VmDetail.vue 手动 append 处也已修复 ✅已完成
|
||||
⚠️中 snapshot/list 和 backup/list 无分页 快照/备份相关页面 OpenAPI 未定义分页参数，如数据量大可能一次返回全部 ⚠️后端限制，待后端支持分页
|
||||
✅低 task_id 类型为 string 快照/备份进度查询 所有调用处已使用 String() 确保传字符串 ✅已完成（无需修改）
|
||||
✅低 UserGoodsDetail.vue 基础价格显示用了 renewPrice UserGoodsDetail.vue 第 62 行 已修复为 basePrice ✅已完成
|
||||
✅低 fd() 过滤空字符串 userVm.js fd() 函数 已移除 v === '' 过滤条件，允许空字符串传递（用于清除字段） ✅已完成
|
||||
|
||||
第二阶段：功能开发与组件化审查结果
|
||||
|
||||
一、请求实现
|
||||
✅ OpenAPI 定义的 69 个接口（user_vm 64 + user_goods 5）全部在 src/api/admin/userVm.js 中实现
|
||||
✅ 商品管理 33 个接口全部在 src/api/admin/product.js 中实现（group 6 + goods 5 + spec 8 + plan 9 + group_tag 5）
|
||||
✅ 无缺失接口
|
||||
|
||||
二、组件化拆分
|
||||
已创建的公共组件：
|
||||
|
||||
| 组件 | 路径 | Props | 复用场景 |
|
||||
|------|------|-------|----------|
|
||||
| FormSelectorField | src/components/common/FormSelectorField.vue | modelValue, displayText, placeholder, buttonText, disabled, clearable, hint, hintType | 所有"只读输入框+选择按钮+清除按钮"的选择器行（50+处） |
|
||||
|
||||
已补充的工具函数（src/utils/tool.js）：
|
||||
|
||||
| 函数 | 用途 | 复用场景 |
|
||||
|------|------|----------|
|
||||
| formatPrice(fen) | 分→元显示 ¥xx.xx | 25+个文件的价格展示 |
|
||||
| yuanToFen(yuan) | 元→分转换 | 所有提交价格的表单 |
|
||||
| formatExpireTime(t) | 到期时间格式化（<2000年显示永久） | 28+个文件 |
|
||||
|
||||
三、嵌套与快捷入口评估
|
||||
⚠️ ProductGroup.vue（3281行）是当前最大的单体文件，集中了 5 个 CRUD 模块和 11 个弹窗：
|
||||
1. 商品分组管理（树形/列表 + CRUD）
|
||||
2. 分组标签管理（列表 + CRUD）
|
||||
3. 商品表单（新增/编辑弹窗）
|
||||
4. 商品参数管理（参数列表 + 参数值管理 2级嵌套弹窗）
|
||||
5. 商品套餐管理（套餐列表 + 套餐表单 + 参数配置预览）
|
||||
|
||||
推荐拆分方案（待确认后执行）：
|
||||
❌ ProductParameterManager.vue - 提取参数管理弹窗（参数列表+参数值管理+参数表单，约 300 行模板 + 400 行逻辑）
|
||||
❌ ProductPlanManager.vue - 提取套餐管理弹窗（套餐列表+套餐表单+参数配置，约 250 行模板 + 500 行逻辑）
|
||||
❌ GroupTagManager.vue - 提取分组标签Tab页（标签列表+标签表单，约 80 行模板 + 150 行逻辑）
|
||||
拆分后 ProductGroup.vue 可从 3281 行降至约 1600 行
|
||||
|
||||
-----------------------------------------------------------------------------------------------需要解决
|
||||
1.请求接口的带有page-size或者是count参数的都只能是10
|
||||
|
||||
Reference in New Issue
Block a user