update log layout

Author: sunnylqm

bun.lock

@@ -15,7 +15,7 @@
     "@rsbuild/core": "^1.7.5",
     "@rsbuild/plugin-react": "^1.4.6",
     "@rsbuild/plugin-svgr": "^1.3.1",
-    "@tanstack/react-query": "^5.96.2",
+    "@tanstack/react-query": "^5.97.0",
     "antd": "^6.3.5",
     "dayjs": "^1.11.20",
     "git-url-parse": "^16.1.0",
@@ -30,14 +30,14 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.10",
+    "@biomejs/biome": "2.4.11",
     "@tailwindcss/postcss": "^4.2.2",
     "@types/git-url-parse": "^16.0.2",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.6.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript/native-preview": "^7.0.0-dev.20260408.1",
+    "@typescript/native-preview": "^7.0.0-dev.20260410.1",
     "mitata": "^1.0.34",
     "tailwindcss": "^4.2.2",
     "typescript": "^6.0.2"

package.json

@@ -36,6 +36,16 @@ export const getUA = (userAgent: string) => {
 
 const { Text } = Typography;
 
+const getApiTokenLabel = (apiTokens?: AuditLog['apiTokens']) => {
+  if (!apiTokens?.tokenSuffix) {
+    return undefined;
+  }
+
+  return apiTokens.name
+    ? `${apiTokens.name}(****${apiTokens.tokenSuffix})`
+    : `****${apiTokens.tokenSuffix}`;
+};
+
 // 将 path 中的数字替换为 {id}，并移除末尾的斜杠
 const normalizePath = (path: string): string => {
   return path.replace(/\/\d+/g, '/{id}').replace(/\/$/, '');
@@ -181,18 +191,23 @@ const columns: ColumnType<AuditLog>[] = [
     title: '设备信息',
     dataIndex: 'userAgent',
     responsive: ['lg'],
-    width: 250,
+    width: 200,
     ellipsis: {
       showTitle: false,
     },
     render: (userAgent: string | undefined, record: AuditLog) => {
-      const hasInfo = userAgent || record.ip;
+      const apiToken = getApiTokenLabel(record.apiTokens);
+      const hasInfo = userAgent || record.ip || apiToken;
       if (!hasInfo) {
         return <Text type="secondary">-</Text>;
       }
 
+      const title = [userAgent, record.ip && `IP: ${record.ip}`, apiToken]
+        .filter(Boolean)
+        .join('\n');
+
       return (
-        <div title={userAgent || record.ip}>
+        <div title={title}>
           {userAgent && <div>{getUA(userAgent)}</div>}
           {record.ip && (
             <div className="mt-1">
@@ -201,24 +216,17 @@ const columns: ColumnType<AuditLog>[] = [
               </Text>
             </div>
           )}
+          {apiToken && (
+            <div className="mt-1">
+              <Text type="secondary" className="font-mono text-xs">
+                API Key：{apiToken}
+              </Text>
+            </div>
+          )}
         </div>
       );
     },
   },
-  {
-    title: 'API Key',
-    dataIndex: 'apiTokens',
-    responsive: ['lg'],
-    width: 150,
-    render: (apiTokens?: { name: string; tokenSuffix: string }) =>
-      apiTokens ? (
-        <Text className="font-mono text-xs">
-          {apiTokens.name}(****{apiTokens.tokenSuffix})
-        </Text>
-      ) : (
-        <Text type="secondary">-</Text>
-      ),
-  },
 ];
 
 export const AuditLogs = () => {