From d3f5198227893c3617e09cd34b9178063ba6087a Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 4 Oct 2026 17:19:09 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E8=B4=A6=E5=8F=B7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=88=97=E5=AE=BD=E4=BC=98=E5=8C=96=20=E2=80=94?=
 =?UTF-8?q?=E2=80=94=20=E8=B4=A6=E5=8F=B7=E5=88=97=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E5=90=83=E6=8E=89=E5=85=A8=E9=83=A8=E5=89=A9=E4=BD=99=E7=A9=BA?=
 =?UTF-8?q?=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

截图里的毛病很具体：**「账号」列被撑到 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。
---
 web/frontend/src/pages/AccountsPage.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/frontend/src/pages/AccountsPage.tsx b/web/frontend/src/pages/AccountsPage.tsx
index d710720..6e75c0d 100644
--- a/web/frontend/src/pages/AccountsPage.tsx
+++ b/web/frontend/src/pages/AccountsPage.tsx
@@ -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"