zfc/bindbox-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bindbox-game/.trae/documents/管理活动页面的表格与操作栏一致性优化计划.md
邹方成 6ee627139c
Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 40s
Details
feat: 新增支付测试小程序与微信支付集成 
feat(pay): 添加支付API基础结构
feat(miniapp): 创建支付测试小程序页面与配置
feat(wechatpay): 配置微信支付参数与证书
fix(guild): 修复成员列表查询条件
docs: 更新代码规范文档与需求文档
style: 统一前后端枚举显示与注释格式
refactor(admin): 重构用户奖励发放接口参数处理
test(title): 添加称号效果参数验证测试
2025-11-17 00:42:08 +08:00

2.6 KiB
Raw Blame History

现状审计

  • 高级表格使用：
    • 活动管理：web/admin/src/views/activity/manage/index.vue:10-17 使用 ArtTable（高级表格）
    • 期数管理：web/admin/src/views/activity/issues/index.vue:6-14 使用 ArtTable
    • 奖励管理：web/admin/src/views/activity/rewards/index.vue:31-37 使用 ArtTable
  • 操作栏一致性：
    • 活动管理中“模拟”按钮使用 ElButton（manage/index.vue:32-39），其余使用 ArtButtonTable；风格不一致
    • 期数管理操作栏统一使用 ArtButtonTable（issues/index.vue:21-33）
  • 表格可视宽度：多列设置了固定 width（如 manage/index.vue:291-297；issues/index.vue:83-88），name 列使用 showOverflowTooltip（manage/index.vue:292），导致内容显示受限；未显式启用 tableLayout="auto"

优化目标

  1. 全部使用高级表格组件，启用自适应布局以显示完整内容
  2. 操作栏统一为图标标签按钮（ArtButtonTable），视觉与交互一致
  3. 表格宽度与列长度自适应：移除过度固定宽度，采用 minWidth 与 tableLayout="auto"，仅对数值列设定最小宽度；必要时保留溢出提示

具体改动

  • 活动管理（web/admin/src/views/activity/manage/index.vue）
    • 在 ArtTable 上增加 tableLayout="auto"
    • 将 columnsFactory 中固定 width 改为 minWidth（如 name 列 minWidth: 260，categoryName minWidth: 140，actions minWidth: 240），取消 showOverflowTooltip 或仅对极长文本保留
    • 将“模拟抽奖”按钮统一为 ArtButtonTable，图标 ri:shuffle-line，与现有按钮风格一致（替换 ElButton，位置 index.vue:32-39）
  • 期数管理（web/admin/src/views/activity/issues/index.vue）
    • 在 ArtTable 上增加 tableLayout="auto"
    • 将列宽改为 minWidth，例如：issue_number minWidth: 160、status minWidth: 110、actions minWidth: 200
    • 已统一使用 ArtButtonTable，无需额外调整
  • 奖励管理（web/admin/src/views/activity/rewards/index.vue）
    • 已是 ArtTable 并启用 tableLayout="auto"；保留前次优化的汇总与列增强（剩余/总量、期望概率）

验收标准

  • 三个页面均使用 ArtTable，内容在常见分辨率下完整显示（无不必要截断）
  • 操作栏按钮风格一致，皆为图标标签按钮，间距统一
  • 表格宽度随容器自适应，长文本列通过 minWidth 与布局算法得到更好的展示；必要时保留 tooltip

风险与回滚

  • 改动为前端表现层，低风险；如需回滚，可恢复原 width 配置与旧按钮类型。