邹方成
6ee627139c
Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 40s
feat(pay): 添加支付API基础结构 feat(miniapp): 创建支付测试小程序页面与配置 feat(wechatpay): 配置微信支付参数与证书 fix(guild): 修复成员列表查询条件 docs: 更新代码规范文档与需求文档 style: 统一前后端枚举显示与注释格式 refactor(admin): 重构用户奖励发放接口参数处理 test(title): 添加称号效果参数验证测试
24 lines
1.5 KiB
Markdown
24 lines
1.5 KiB
Markdown
## 问题定位
|
||
- 操作列使用 `class="flex gap-2"` 包裹多个按钮（6个），但项目未引入 Tailwind，该类无效，导致按钮按块级元素竖排堆叠，视觉成“蓝色小方块纵向排布”。
|
||
- 位置：`web/admin/src/views/player-manage/index.vue:202-234`
|
||
- 其它页普遍使用 `useSlot` 或 `ElSpace` 渲染操作列，避免换行与拥挤（如：`guild/manage/index.vue:185`、`operations/*`）。
|
||
|
||
## 修复方案
|
||
- 将操作列容器从 `h('div', { class: 'flex gap-2' }, [...])` 改为 `h(ElSpace, { wrap: true, size: 6 }, [...])`，保证横向排列且自动换行。
|
||
- 适当增大操作列宽度，避免拥挤（由 280 调整为 320）。
|
||
- 如需更一致的实现，后续可将操作列改为 `useSlot: true` + `<template #operation>` 模板渲染，统一风格（本次先用 `ElSpace` 修复）。
|
||
|
||
## 具体修改点
|
||
- 文件：`web/admin/src/views/player-manage/index.vue`
|
||
- 修改 `columnsFactory()` 中 `operation` 列的 `formatter` 容器为 `ElSpace`（`wrap: true`，`size: 6`）。
|
||
- 将 `operation` 列 `width` 调整为 `320`。
|
||
|
||
## 验收标准
|
||
- 操作列按钮横向排列，换行时保持等距，不再竖排堆叠。
|
||
- 表头、分页与表格不发生位移，整页无水平滚动条。
|
||
- 批量操作按钮（表头左侧）不受影响，交互正常。
|
||
|
||
## 影响范围
|
||
- 仅影响玩家管理页视图渲染；不改动接口、不影响其它模块。
|
||
|
||
确认后我将执行上述修改并重新构建前端，提供预览截图/链接以供验收。 |