邹方成
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): 添加称号效果参数验证测试
34 lines
2.6 KiB
Markdown
34 lines
2.6 KiB
Markdown
## 现状审计
|
||
- 高级表格使用：
|
||
- 活动管理：`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` 配置与旧按钮类型。 |