style(ui): 账号列表列宽优化 —— 账号列不再吃掉全部剩余空间

截图里的毛病很具体:**「账号」列被撑到 1000+px**,中间空出一大块,
而「状态」列只有 150px,把「检测 2026-10-01 19:07:25」挤成了两行。

根因是我前面把 ID 合并进「账号」列时,顺手把它的 `width` 去掉了 ——
于是它成了唯一的弹性列,把剩余空间全吃了。

修法:
- **账号列定宽 200 + `ellipsis`**,用户名过长就省略(`title` 保留全文)
- **CK 时间改用 `formatTimeShort`**(`10-01 19:07`),状态列加宽到 180,
  一句话能放下,不再折行
- 其余列宽按内容重新配比:绑定 190→150、积分 110→120、标签 170→190、操作 80→90(居中)
- **`tableLayout="fixed"`**:列宽按比例分配、剩余空间**均匀摊开**,
  而不是像 auto 布局那样全塞给内容最宽的那一列 —— 这才不会再出现「一列独大」

顺带清掉因此失效的 `formatTime` 导入(导入时间列上轮已删,它没有其它调用点)。

验证:pytest 500 passed / 6 skipped;ruff 全绿;build 通过、lint 0 errors。
This commit is contained in:
yml2213
2026-10-04 17:19:09 +08:00
parent a21e4a7e2a
commit d3f5198227
+15 -9
View File
@@ -9,7 +9,7 @@ import type { TableProps } from 'antd';
import { ImportOutlined, DeleteOutlined, TagOutlined, FilterOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import { accountApi, type AccountItem, type BasicSummary } from '../api/modules';
import { usePermissions } from '../hooks/usePermissions';
import { formatTime } from '../utils/time';
import { formatTimeShort } from '../utils/time';
import { getErrorMessage } from '../utils/error';
const TAG_COLORS = [
@@ -293,12 +293,16 @@ export default function AccountsPage() {
// ID 不再单独占一列(客服不看),降到用户名下面做小字 —— 报障时还能念出来。
title: '账号',
dataIndex: 'username',
width: 200,
// 用户名长短不一:定宽 + 省略号,别让它把整个表格撑开
ellipsis: true,
render: (username: string, record: AccountItem) => (
<Space direction="vertical" size={0}>
<Space direction="vertical" size={0} style={{ maxWidth: '100%' }}>
<Button
type="link"
size="small"
style={{ padding: 0 }}
style={{ padding: 0, maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}
title={username}
onClick={() => navigate(`/accounts/${record.id}`)}
>
{username}
@@ -313,7 +317,7 @@ export default function AccountsPage() {
// (检测时间、以及 `error` 这种「状态正常但检测没查明白」的情况)。
title: '状态',
dataIndex: 'status',
width: 150,
width: 180,
render: (status: string, record: AccountItem) => {
const tone = STATUS_TONES[status] ?? 'default';
const ckNote = !record.has_cookie
@@ -321,7 +325,7 @@ export default function AccountsPage() {
: record.ck_check_status === 'error'
? '检测异常'
: record.ck_checked_at
? `检测 ${formatTime(record.ck_checked_at)}`
? `检测 ${formatTimeShort(record.ck_checked_at)}`
: '未检测';
return (
<Space direction="vertical" size={0}>
@@ -345,7 +349,7 @@ export default function AccountsPage() {
// 三角色绑定:三个作用域各一列,合成一格紧凑展示
title: '绑定',
dataIndex: 'role_bind_status',
width: 190,
width: 150,
render: (_, record: AccountItem) => {
// 三个作用域全都没查过时,显示「—」而不是「精? 电? 店?」——
// 满屏问号只是噪声,不如一眼看出「这账号还没查过绑定」。
@@ -366,7 +370,7 @@ export default function AccountsPage() {
{
title: '积分 / 鱼翅',
dataIndex: 'points',
width: 110,
width: 120,
render: (_, record: AccountItem) => (
<Space direction="vertical" size={0}>
<Text>积分 {record.points ?? '-'}</Text>
@@ -377,7 +381,7 @@ export default function AccountsPage() {
{
title: '标签',
dataIndex: 'tag',
width: 170,
width: 190,
render: (tag: string, record: AccountItem) => {
// 有权限时直接就地改(Select 输入新标签即保存);无权限则只读展示。
if (canTag) {
@@ -416,7 +420,8 @@ export default function AccountsPage() {
if (canDelete) {
columns.push({
title: '操作',
width: 80,
width: 90,
align: 'center',
render: (_: unknown, record: AccountItem) => (
<Popconfirm title="确认删除?" onConfirm={() => handleDelete(record.id)}>
<Button danger size="small" icon={<DeleteOutlined />}>删除</Button>
@@ -562,6 +567,7 @@ export default function AccountsPage() {
</Row>
<Table
tableLayout="fixed"
title={() => selectedRowKeys.length > 0 ? (
<Alert
type="info"