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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user