📱 feat(ui): Enhance mobile log table UX & fix StrictMode warning

Summary
1. CardTable
   • Added collapsible “Details / Collapse” section on mobile cards using Semi-UI Button + Collapsible with chevron icons.
   • Integrated i18n (`useTranslation`) for the toggle labels.
   • Restored original variable-width skeleton placeholders (50 % / 60 % / 70 % …) for more natural loading states.

2. UsageLogsColumnDefs
   • Wrapped each `Tag` inside a native `<span>` when used as Tooltip trigger, removing `findDOMNode` deprecation warnings in React StrictMode.

Impact
• Cleaner, shorter rows on small screens with optional expansion.
• Fully translated UI controls.
• No more console noise in development & CI caused by StrictMode warnings.

web/src/components/common/ui/CardTable.js

@@ -18,7 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { Table, Card, Skeleton, Pagination, Empty } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { Table, Card, Skeleton, Pagination, Empty, Button, Collapsible } from '@douyinfe/semi-ui';
+import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 
@@ -30,6 +32,7 @@ import { useIsMobile } from '../../../hooks/common/useIsMobile';
  */
 const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'key', ...tableProps }) => {
   const isMobile = useIsMobile();
+  const { t } = useTranslation();
 
   // Skeleton 显示控制，确保至少展示 500ms 动效
   const [showSkeleton, setShowSkeleton] = useState(loading);
@@ -94,7 +97,14 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
             return (
               <div key={idx} className="flex justify-between items-center py-1 border-b last:border-b-0 border-dashed" style={{ borderColor: 'var(--semi-color-border)' }}>
                 <Skeleton.Title active style={{ width: 80, height: 14 }} />
-                <Skeleton.Title active style={{ width: `${50 + (idx % 3) * 10}%`, maxWidth: 180, height: 14 }} />
+                <Skeleton.Title
+                  active
+                  style={{
+                    width: `${50 + (idx % 3) * 10}%`,
+                    maxWidth: 180,
+                    height: 14,
+                  }}
+                />
               </div>
             );
           })}
@@ -118,20 +128,15 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
   // 渲染移动端卡片
   const isEmpty = !showSkeleton && (!dataSource || dataSource.length === 0);
 
-  if (isEmpty) {
+  // 移动端行卡片组件（含可折叠详情）
-    // 若传入 empty 属性则使用之，否则使用默认 Empty
+  const MobileRowCard = ({ record, index }) => {
-    if (tableProps.empty) return tableProps.empty;
+    const [showDetails, setShowDetails] = useState(false);
-    return (
-      <div className="flex justify-center p-4">
-        <Empty description="No Data" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-2">
-      {dataSource.map((record, index) => {
     const rowKeyVal = getRowKey(record, index);
+
+    const hasDetails =
+      tableProps.expandedRowRender &&
+      (!tableProps.rowExpandable || tableProps.rowExpandable(record));
+
     return (
       <Card key={rowKeyVal} className="!rounded-2xl shadow-sm">
         {columns.map((col, colIdx) => {
@@ -141,7 +146,6 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
           }
 
           const title = col.title;
-              // 计算单元格内容
           const cellContent = col.render
             ? col.render(record[col.dataIndex], record, index)
             : record[col.dataIndex];
@@ -149,10 +153,7 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
           // 空标题列（通常为操作按钮）单独渲染
           if (!title) {
             return (
-                  <div
+              <div key={col.key || colIdx} className="mt-2 flex justify-end">
-                    key={col.key || colIdx}
-                    className="mt-2 flex justify-end"
-                  >
                 {cellContent}
               </div>
             );
@@ -173,9 +174,47 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
             </div>
           );
         })}
+
+        {hasDetails && (
+          <>
+            <Button
+              theme='borderless'
+              size='small'
+              className='w-full flex justify-center mt-2'
+              icon={showDetails ? <IconChevronUp /> : <IconChevronDown />}
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowDetails(!showDetails);
+              }}
+            >
+              {showDetails ? t('收起') : t('详情')}
+            </Button>
+            <Collapsible isOpen={showDetails} keepDOM>
+              <div className="pt-2">
+                {tableProps.expandedRowRender(record, index)}
+              </div>
+            </Collapsible>
+          </>
+        )}
       </Card>
     );
-      })}
+  };
+
+  if (isEmpty) {
+    // 若传入 empty 属性则使用之，否则使用默认 Empty
+    if (tableProps.empty) return tableProps.empty;
+    return (
+      <div className="flex justify-center p-4">
+        <Empty description="No Data" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {dataSource.map((record, index) => (
+        <MobileRowCard key={getRowKey(record, index)} record={record} index={index} />
+      ))}
       {/* 分页组件 */}
       {tableProps.pagination && dataSource.length > 0 && (
         <div className="mt-2 flex justify-center">

web/src/components/table/usage-logs/UsageLogsColumnDefs.js

@@ -268,12 +268,14 @@ export const getLogsColumns = ({
         return isAdminUser && (record.type === 0 || record.type === 2 || record.type === 5) ? (
           <Space>
             <Tooltip content={record.channel_name || t('未知渠道')}>
+              <span>
                 <Tag
                   color={colors[parseInt(text) % colors.length]}
                   shape='circle'
                 >
                   {text}
                 </Tag>
+              </span>
             </Tooltip>
             {isMultiKey && (
               <Tag color='white' shape='circle'>
@@ -466,6 +468,7 @@ export const getLogsColumns = ({
       render: (text, record, index) => {
         return (record.type === 2 || record.type === 5) && text ? (
           <Tooltip content={text}>
+            <span>
               <Tag
                 color='orange'
                 shape='circle'
@@ -475,6 +478,7 @@ export const getLogsColumns = ({
               >
                 {text}
               </Tag>
+            </span>
           </Tooltip>
         ) : (
           <></>