refactor: simplify codex account modal and collapse raw json by default

web/src/components/table/channels/modals/CodexUsageModal.jsx

@@ -25,6 +25,8 @@ import {
   Typography,
   Typography,
   Spin,
   Spin,
   Tag,
   Tag,
+  Descriptions,
+  Collapse,
 } from '@douyinfe/semi-ui';
 } from '@douyinfe/semi-ui';
 import { API, showError } from '../../../../helpers';
 import { API, showError } from '../../../../helpers';
 
 
@@ -181,17 +183,13 @@ const resolveUsageStatusTag = (t, rateLimit) => {
   return <Tag color='red'>{tt('受限')}</Tag>;
   return <Tag color='red'>{tt('受限')}</Tag>;
 };
 };
 
 
-const AccountInfoCard = ({ t, label, value, onCopy, monospace = false }) => {
+const AccountInfoValue = ({ t, value, onCopy, monospace = false }) => {
   const tt = typeof t === 'function' ? t : (v) => v;
   const tt = typeof t === 'function' ? t : (v) => v;
   const text = getDisplayText(value);
   const text = getDisplayText(value);
   const hasValue = text !== '';
   const hasValue = text !== '';
 
 
   return (
   return (
-    <div className='rounded-md bg-semi-color-fill-0 px-2.5 py-2'>
-      <div className='text-[11px] text-semi-color-text-2'>
-        {label}
-      </div>
-      <div className='mt-1 flex items-start justify-between gap-2'>
+    <div className='flex min-w-0 items-start justify-between gap-2'>
       <div
       <div
         className={`min-w-0 flex-1 break-all text-xs leading-5 text-semi-color-text-1 ${
         className={`min-w-0 flex-1 break-all text-xs leading-5 text-semi-color-text-1 ${
           monospace ? 'font-mono' : ''
           monospace ? 'font-mono' : ''
@@ -203,14 +201,13 @@ const AccountInfoCard = ({ t, label, value, onCopy, monospace = false }) => {
         size='small'
         size='small'
         type='tertiary'
         type='tertiary'
         theme='borderless'
         theme='borderless'
-          className='px-1 text-xs'
+        className='shrink-0 px-1 text-xs'
         disabled={!hasValue}
         disabled={!hasValue}
         onClick={() => onCopy?.(text)}
         onClick={() => onCopy?.(text)}
       >
       >
         {tt('复制')}
         {tt('复制')}
       </Button>
       </Button>
     </div>
     </div>
-    </div>
   );
   );
 };
 };
 
 
@@ -321,22 +318,28 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
           </Button>
           </Button>
         </div>
         </div>
 
 
-        <div className='mt-2 grid grid-cols-1 gap-2 md:grid-cols-3'>
-          <AccountInfoCard
+        <div className='mt-2 rounded-lg bg-semi-color-fill-0 px-3 py-2'>
+          <Descriptions>
+            <Descriptions.Item itemKey='User ID'>
+              <AccountInfoValue
                 t={tt}
                 t={tt}
-            label='User ID'
                 value={userId}
                 value={userId}
                 onCopy={onCopy}
                 onCopy={onCopy}
                 monospace={true}
                 monospace={true}
               />
               />
-          <AccountInfoCard t={tt} label={tt('邮箱')} value={email} onCopy={onCopy} />
-          <AccountInfoCard
+            </Descriptions.Item>
+            <Descriptions.Item itemKey={tt('邮箱')}>
+              <AccountInfoValue t={tt} value={email} onCopy={onCopy} />
+            </Descriptions.Item>
+            <Descriptions.Item itemKey='Account ID'>
+              <AccountInfoValue
                 t={tt}
                 t={tt}
-            label='Account ID'
                 value={accountId}
                 value={accountId}
                 onCopy={onCopy}
                 onCopy={onCopy}
                 monospace={true}
                 monospace={true}
               />
               />
+            </Descriptions.Item>
+          </Descriptions>
         </div>
         </div>
 
 
         <div className='mt-2 text-xs text-semi-color-text-2'>
         <div className='mt-2 text-xs text-semi-color-text-2'>
@@ -370,19 +373,15 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
         />
         />
       </div>
       </div>
 
 
-      <div>
-        <div className='mb-1 flex items-center justify-between gap-2'>
-          <div className='text-sm font-medium'>{tt('原始 JSON')}</div>
-          <div className='flex items-center gap-2'>
-            <Button
-              size='small'
-              type='tertiary'
-              theme='outline'
-              onClick={() => setShowRawJson((prev) => !prev)}
+      <Collapse
+        activeKey={showRawJson ? ['raw-json'] : []}
+        onChange={(activeKey) => {
+          const keys = Array.isArray(activeKey) ? activeKey : [activeKey];
+          setShowRawJson(keys.includes('raw-json'));
+        }}
       >
       >
-              {showRawJson ? tt('收起') : tt('展开')}
-            </Button>
-            {showRawJson && (
+        <Collapse.Panel header={tt('原始 JSON')} itemKey='raw-json'>
+          <div className='mb-2 flex justify-end'>
             <Button
             <Button
               size='small'
               size='small'
               type='primary'
               type='primary'
@@ -392,15 +391,12 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
             >
             >
               {tt('复制')}
               {tt('复制')}
             </Button>
             </Button>
-            )}
           </div>
           </div>
-        </div>
-        {showRawJson && (
           <pre className='max-h-[50vh] overflow-y-auto rounded-lg bg-semi-color-fill-0 p-3 text-xs text-semi-color-text-0'>
           <pre className='max-h-[50vh] overflow-y-auto rounded-lg bg-semi-color-fill-0 p-3 text-xs text-semi-color-text-0'>
             {rawText}
             {rawText}
           </pre>
           </pre>
-        )}
-      </div>
+        </Collapse.Panel>
+      </Collapse>
     </div>
     </div>
   );
   );
 };
 };