feat: update log table style

web/default/src/components/LogsTable.js

@@ -9,13 +9,34 @@ import {
   Select,
   Table,
 } from 'semantic-ui-react';
-import { API, isAdmin, showError, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  isAdmin,
+  showError,
+  showSuccess,
+  showWarning,
+  timestamp2string,
+} from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderQuota } from '../helpers/render';
+import { renderColorLabel, renderQuota } from '../helpers/render';
 
-function renderTimestamp(timestamp) {
-  return <>{timestamp2string(timestamp)}</>;
+function renderTimestamp(timestamp, request_id) {
+  return (
+    <code
+      onClick={async () => {
+        if (await copy(request_id)) {
+          showSuccess(`已复制请求 ID：${request_id}`);
+        } else {
+          showWarning(`请求 ID 复制失败：${request_id}`);
+        }
+      }}
+      style={{ cursor: 'pointer' }}
+    >
+      {timestamp2string(timestamp)}
+    </code>
+  );
 }
 
 const MODE_OPTIONS = [
@@ -103,8 +124,6 @@ function renderDetail(log) {
           </Label>
         </>
       )}
-      <br />
-      <code>{log.request_id}</code>
     </>
   );
 }
@@ -467,7 +486,9 @@ const LogsTable = () => {
                 if (log.deleted) return <></>;
                 return (
                   <Table.Row key={log.id}>
-                    <Table.Cell>{renderTimestamp(log.created_at)}</Table.Cell>
+                    <Table.Cell>
+                      {renderTimestamp(log.created_at, log.request_id)}
+                    </Table.Cell>
                     {isAdminUser && (
                       <Table.Cell>
                         {log.channel ? <Label basic>{log.channel}</Label> : ''}
@@ -475,23 +496,21 @@ const LogsTable = () => {
                     )}
                     {isAdminUser && (
                       <Table.Cell>
-                        {log.username ? <Label>{log.username}</Label> : ''}
+                        {log.username ? (
+                          <Label basic size={'tiny'}>
+                            {log.username}
+                          </Label>
+                        ) : (
+                          ''
+                        )}
                       </Table.Cell>
                     )}
                     <Table.Cell>
-                      {log.token_name ? (
-                        <Label basic>{log.token_name}</Label>
-                      ) : (
-                        ''
-                      )}
+                      {log.token_name ? renderColorLabel(log.token_name) : ''}
                     </Table.Cell>
                     <Table.Cell>{renderType(log.type)}</Table.Cell>
                     <Table.Cell>
-                      {log.model_name ? (
-                        <Label basic>{log.model_name}</Label>
-                      ) : (
-                        ''
-                      )}
+                      {log.model_name ? renderColorLabel(log.model_name) : ''}
                     </Table.Cell>
                     <Table.Cell>
                       {log.prompt_tokens ? log.prompt_tokens : ''}

web/default/src/helpers/render.js

@@ -13,16 +13,18 @@ export function renderGroup(group) {
   }
   let groups = group.split(',');
   groups.sort();
-  return <>
-    {groups.map((group) => {
-      if (group === 'vip' || group === 'pro') {
-        return <Label color='yellow'>{group}</Label>;
-      } else if (group === 'svip' || group === 'premium') {
-        return <Label color='red'>{group}</Label>;
-      }
-      return <Label>{group}</Label>;
-    })}
-  </>;
+  return (
+    <>
+      {groups.map((group) => {
+        if (group === 'vip' || group === 'pro') {
+          return <Label color='yellow'>{group}</Label>;
+        } else if (group === 'svip' || group === 'premium') {
+          return <Label color='red'>{group}</Label>;
+        }
+        return <Label>{group}</Label>;
+      })}
+    </>
+  );
 }
 
 export function renderNumber(num) {
@@ -55,4 +57,33 @@ export function renderQuotaWithPrompt(quota, digits) {
     return `（等价金额：${renderQuota(quota, digits)}）`;
   }
   return '';
-}
+}
+
+const colors = [
+  'red',
+  'orange',
+  'yellow',
+  'olive',
+  'green',
+  'teal',
+  'blue',
+  'violet',
+  'purple',
+  'pink',
+  'brown',
+  'grey',
+  'black',
+];
+
+export function renderColorLabel(text) {
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    hash = text.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let index = Math.abs(hash % colors.length);
+  return (
+    <Label basic size={'tiny'} color={colors[index]}>
+      {text}
+    </Label>
+  );
+}