邹方成
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): 添加称号效果参数验证测试
1.5 KiB
1.5 KiB
问题定位
- 操作列使用
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。
- 修改
验收标准
- 操作列按钮横向排列，换行时保持等距，不再竖排堆叠。
- 表头、分页与表格不发生位移，整页无水平滚动条。
- 批量操作按钮（表头左侧）不受影响，交互正常。
影响范围
- 仅影响玩家管理页视图渲染；不改动接口、不影响其它模块。
确认后我将执行上述修改并重新构建前端，提供预览截图/链接以供验收。