♻️ refactor: restructure LogsTable into modular component architecture

Refactor the monolithic LogsTable component (1453 lines) into a modular,
maintainable architecture following the channels table pattern.

## What Changed

### 🏗️ Architecture
- Split single large file into focused, single-responsibility components
- Introduced custom hook `useLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented modal components for user interactions

### 📁 New Structure
```
web/src/components/table/usage-logs/
├── index.jsx                    # Main page component orchestrator
├── LogsTable.jsx               # Pure table rendering component
├── LogsActions.jsx             # Actions area (stats + compact mode)
├── LogsFilters.jsx             # Search form component
├── LogsColumnDefs.js           # Column definitions and renderers
└── modals/
    ├── ColumnSelectorModal.jsx # Column visibility settings
    └── UserInfoModal.jsx       # User information display

web/src/hooks/logs/
└── useLogsData.js              # Custom hook for state & logic
```

### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability

### 🔧 Technical Details
- Preserved all existing functionality and user experience
- Maintained backward compatibility through existing import path
- Centralized all business logic in `useLogsData` custom hook
- Extracted column definitions to separate module with render functions
- Split complex UI into focused components (table, actions, filters, modals)

### 🐛 Fixes
- Fixed Semi UI component import issues (`Typography.Paragraph`)
- Resolved module export dependencies
- Maintained consistent prop passing patterns

## Breaking Changes
None - all existing imports and functionality preserved.

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

@@ -45,33 +45,33 @@ const CardPro = ({
       <div className="flex flex-col w-full">
         {/* 统计信息区域 - 用于type2 */}
         {type === 'type2' && statsArea && (
-          <div className="mb-4">
+          <>
             {statsArea}
-          </div>
+          </>
         )}
 
         {/* 描述信息区域 - 用于type1和type3 */}
         {(type === 'type1' || type === 'type3') && descriptionArea && (
-          <div className="mb-2">
+          <>
             {descriptionArea}
-          </div>
+          </>
         )}
 
         {/* 第一个分隔线 - 在描述信息或统计信息后面 */}
-        {((type === 'type1' || type === 'type3') && descriptionArea) || 
-         (type === 'type2' && statsArea) ? (
+        {((type === 'type1' || type === 'type3') && descriptionArea) ||
+          (type === 'type2' && statsArea) ? (
           <Divider margin="12px" />
         ) : null}
 
         {/* 类型切换/标签区域 - 主要用于type3 */}
         {type === 'type3' && tabsArea && (
-          <div className="mb-4">
+          <>
             {tabsArea}
-          </div>
+          </>
         )}
 
         {/* 操作按钮和搜索表单的容器 */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
           {/* 操作按钮区域 - 用于type1和type3 */}
           {(type === 'type1' || type === 'type3') && actionsArea && (
             <div className="w-full">

web/src/components/table/channels/ChannelsActions.jsx

@@ -35,9 +35,9 @@ const ChannelsActions = ({
   t
 }) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-2">
       {/* 第一行：批量操作按钮 + 设置开关 */}
-      <div className="flex flex-col md:flex-row justify-between gap-4">
+      <div className="flex flex-col md:flex-row justify-between gap-2">
         {/* 左侧：批量操作按钮 */}
         <div className="flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto order-2 md:order-1">
           <Button
@@ -161,7 +161,7 @@ const ChannelsActions = ({
         </div>
 
         {/* 右侧：设置开关区域 */}
-        <div className="flex flex-col md:flex-row items-start md:items-center gap-4 w-full md:w-auto order-1 md:order-2">
+        <div className="flex flex-col md:flex-row items-start md:items-center gap-2 w-full md:w-auto order-1 md:order-2">
           <div className="flex items-center justify-between w-full md:w-auto">
             <Typography.Text strong className="mr-2">
               {t('使用ID排序')}

web/src/components/table/channels/ChannelsFilters.jsx

@@ -18,7 +18,7 @@ const ChannelsFilters = ({
   t
 }) => {
   return (
-    <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
+    <div className="flex flex-col md:flex-row justify-between items-center gap-2 w-full">
       <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
         <Button
           size='small'
@@ -54,7 +54,7 @@ const ChannelsFilters = ({
         </Button>
       </div>
 
-      <div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto order-1 md:order-2">
+      <div className="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto order-1 md:order-2">
         <Form
           initValues={formInitValues}
           getFormApi={(api) => setFormApi(api)}
@@ -64,7 +64,7 @@ const ChannelsFilters = ({
           layout="horizontal"
           trigger="change"
           stopValidateWithError={false}
-          className="flex flex-col md:flex-row items-center gap-4 w-full"
+          className="flex flex-col md:flex-row items-center gap-2 w-full"
         >
           <div className="relative w-full md:w-64">
             <Form.Input

web/src/components/table/channels/ChannelsTabs.jsx

@@ -30,7 +30,7 @@ const ChannelsTabs = ({
       type="card"
       collapsible
       onChange={handleTabChange}
-      className="mb-4"
+      className="mb-2"
     >
       <TabPane
         itemKey="all"

web/src/components/table/usage-logs/UsageLogsActions.jsx

+import React from 'react';
+import { Button, Tag, Space, Spin } from '@douyinfe/semi-ui';
+import { renderQuota } from '../../../helpers';
+
+const LogsActions = ({
+  stat,
+  loadingStat,
+  compactMode,
+  setCompactMode,
+  t,
+}) => {
+  return (
+    <Spin spinning={loadingStat}>
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
+        <Space>
+          <Tag
+            color='blue'
+            style={{
+              fontWeight: 500,
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+              padding: 13,
+            }}
+            className='!rounded-lg'
+          >
+            {t('消耗额度')}: {renderQuota(stat.quota)}
+          </Tag>
+          <Tag
+            color='pink'
+            style={{
+              fontWeight: 500,
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+              padding: 13,
+            }}
+            className='!rounded-lg'
+          >
+            RPM: {stat.rpm}
+          </Tag>
+          <Tag
+            color='white'
+            style={{
+              border: 'none',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+              fontWeight: 500,
+              padding: 13,
+            }}
+            className='!rounded-lg'
+          >
+            TPM: {stat.tpm}
+          </Tag>
+        </Space>
+
+        <Button
+          type='tertiary'
+          className="w-full md:w-auto"
+          onClick={() => setCompactMode(!compactMode)}
+          size="small"
+        >
+          {compactMode ? t('自适应列表') : t('紧凑列表')}
+        </Button>
+      </div>
+    </Spin>
+  );
+};
+
+export default LogsActions; 
\ No newline at end of file

web/src/components/table/usage-logs/UsageLogsFilters.jsx

+import React from 'react';
+import { Button, Form } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+
+const LogsFilters = ({
+  formInitValues,
+  setFormApi,
+  refresh,
+  setShowColumnSelector,
+  formApi,
+  setLogType,
+  loading,
+  isAdminUser,
+  t,
+}) => {
+  return (
+    <Form
+      initValues={formInitValues}
+      getFormApi={(api) => setFormApi(api)}
+      onSubmit={refresh}
+      allowEmpty={true}
+      autoComplete='off'
+      layout='vertical'
+      trigger='change'
+      stopValidateWithError={false}
+    >
+      <div className='flex flex-col gap-2'>
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2'>
+          {/* 时间选择器 */}
+          <div className='col-span-1 lg:col-span-2'>
+            <Form.DatePicker
+              field='dateRange'
+              className='w-full'
+              type='dateTimeRange'
+              placeholder={[t('开始时间'), t('结束时间')]}
+              showClear
+              pure
+              size="small"
+            />
+          </div>
+
+          {/* 其他搜索字段 */}
+          <Form.Input
+            field='token_name'
+            prefix={<IconSearch />}
+            placeholder={t('令牌名称')}
+            showClear
+            pure
+            size="small"
+          />
+
+          <Form.Input
+            field='model_name'
+            prefix={<IconSearch />}
+            placeholder={t('模型名称')}
+            showClear
+            pure
+            size="small"
+          />
+
+          <Form.Input
+            field='group'
+            prefix={<IconSearch />}
+            placeholder={t('分组')}
+            showClear
+            pure
+            size="small"
+          />
+
+          {isAdminUser && (
+            <>
+              <Form.Input
+                field='channel'
+                prefix={<IconSearch />}
+                placeholder={t('渠道 ID')}
+                showClear
+                pure
+                size="small"
+              />
+              <Form.Input
+                field='username'
+                prefix={<IconSearch />}
+                placeholder={t('用户名称')}
+                showClear
+                pure
+                size="small"
+              />
+            </>
+          )}
+        </div>
+
+        {/* 操作按钮区域 */}
+        <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3'>
+          {/* 日志类型选择器 */}
+          <div className='w-full sm:w-auto'>
+            <Form.Select
+              field='logType'
+              placeholder={t('日志类型')}
+              className='w-full sm:w-auto min-w-[120px]'
+              showClear
+              pure
+              onChange={() => {
+                // 延迟执行搜索，让表单值先更新
+                setTimeout(() => {
+                  refresh();
+                }, 0);
+              }}
+              size="small"
+            >
+              <Form.Select.Option value='0'>
+                {t('全部')}
+              </Form.Select.Option>
+              <Form.Select.Option value='1'>
+                {t('充值')}
+              </Form.Select.Option>
+              <Form.Select.Option value='2'>
+                {t('消费')}
+              </Form.Select.Option>
+              <Form.Select.Option value='3'>
+                {t('管理')}
+              </Form.Select.Option>
+              <Form.Select.Option value='4'>
+                {t('系统')}
+              </Form.Select.Option>
+              <Form.Select.Option value='5'>
+                {t('错误')}
+              </Form.Select.Option>
+            </Form.Select>
+          </div>
+
+          <div className='flex gap-2 w-full sm:w-auto justify-end'>
+            <Button
+              type='tertiary'
+              htmlType='submit'
+              loading={loading}
+              size="small"
+            >
+              {t('查询')}
+            </Button>
+            <Button
+              type='tertiary'
+              onClick={() => {
+                if (formApi) {
+                  formApi.reset();
+                  setLogType(0);
+                  setTimeout(() => {
+                    refresh();
+                  }, 100);
+                }
+              }}
+              size="small"
+            >
+              {t('重置')}
+            </Button>
+            <Button
+              type='tertiary'
+              onClick={() => setShowColumnSelector(true)}
+              size="small"
+            >
+              {t('列设置')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export default LogsFilters; 
\ No newline at end of file

web/src/components/table/usage-logs/UsageLogsTable.jsx

+import React, { useMemo } from 'react';
+import { Table, Empty, Descriptions } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { getLogsColumns } from './UsageLogsColumnDefs.js';
+
+const LogsTable = (logsData) => {
+  const {
+    logs,
+    expandData,
+    loading,
+    activePage,
+    pageSize,
+    logCount,
+    compactMode,
+    visibleColumns,
+    handlePageChange,
+    handlePageSizeChange,
+    copyText,
+    showUserInfoFunc,
+    hasExpandableRows,
+    isAdminUser,
+    t,
+    COLUMN_KEYS,
+  } = logsData;
+
+  // Get all columns
+  const allColumns = useMemo(() => {
+    return getLogsColumns({
+      t,
+      COLUMN_KEYS,
+      copyText,
+      showUserInfoFunc,
+      isAdminUser,
+    });
+  }, [
+    t,
+    COLUMN_KEYS,
+    copyText,
+    showUserInfoFunc,
+    isAdminUser,
+  ]);
+
+  // Filter columns based on visibility settings
+  const getVisibleColumns = () => {
+    return allColumns.filter((column) => visibleColumns[column.key]);
+  };
+
+  const visibleColumnsList = useMemo(() => {
+    return getVisibleColumns();
+  }, [visibleColumns, allColumns]);
+
+  const tableColumns = useMemo(() => {
+    return compactMode
+      ? visibleColumnsList.map(({ fixed, ...rest }) => rest)
+      : visibleColumnsList;
+  }, [compactMode, visibleColumnsList]);
+
+  const expandRowRender = (record, index) => {
+    return <Descriptions data={expandData[record.key]} />;
+  };
+
+  return (
+    <Table
+      columns={tableColumns}
+      {...(hasExpandableRows() && {
+        expandedRowRender: expandRowRender,
+        expandRowByClick: true,
+        rowExpandable: (record) =>
+          expandData[record.key] && expandData[record.key].length > 0,
+      })}
+      dataSource={logs}
+      rowKey='key'
+      loading={loading}
+      scroll={compactMode ? undefined : { x: 'max-content' }}
+      className='rounded-xl overflow-hidden'
+      size='middle'
+      empty={
+        <Empty
+          image={
+            <IllustrationNoResult style={{ width: 150, height: 150 }} />
+          }
+          darkModeImage={
+            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+          }
+          description={t('搜索无结果')}
+          style={{ padding: 30 }}
+        />
+      }
+      pagination={{
+        currentPage: activePage,
+        pageSize: pageSize,
+        total: logCount,
+        pageSizeOptions: [10, 20, 50, 100],
+        showSizeChanger: true,
+        onPageSizeChange: (size) => {
+          handlePageSizeChange(size);
+        },
+        onPageChange: handlePageChange,
+      }}
+    />
+  );
+};
+
+export default LogsTable; 
\ No newline at end of file

web/src/components/table/usage-logs/index.jsx

+import React from 'react';
+import CardPro from '../../common/ui/CardPro.js';
+import LogsTable from './UsageLogsTable.jsx';
+import LogsActions from './UsageLogsActions.jsx';
+import LogsFilters from './UsageLogsFilters.jsx';
+import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
+import UserInfoModal from './modals/UserInfoModal.jsx';
+import { useLogsData } from '../../../hooks/usage-logs/useUsageLogsData.js';
+
+const LogsPage = () => {
+  const logsData = useLogsData();
+
+  return (
+    <>
+      {/* Modals */}
+      <ColumnSelectorModal {...logsData} />
+      <UserInfoModal {...logsData} />
+
+      {/* Main Content */}
+      <CardPro
+        type="type2"
+        statsArea={<LogsActions {...logsData} />}
+        searchArea={<LogsFilters {...logsData} />}
+      >
+        <LogsTable {...logsData} />
+      </CardPro>
+    </>
+  );
+};
+
+export default LogsPage; 
\ No newline at end of file

web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx

+import React from 'react';
+import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
+import { getLogsColumns } from '../UsageLogsColumnDefs.js';
+
+const ColumnSelectorModal = ({
+  showColumnSelector,
+  setShowColumnSelector,
+  visibleColumns,
+  handleColumnVisibilityChange,
+  handleSelectAll,
+  initDefaultColumns,
+  COLUMN_KEYS,
+  isAdminUser,
+  copyText,
+  showUserInfoFunc,
+  t,
+}) => {
+  // Get all columns for display in selector
+  const allColumns = getLogsColumns({
+    t,
+    COLUMN_KEYS,
+    copyText,
+    showUserInfoFunc,
+    isAdminUser,
+  });
+
+  return (
+    <Modal
+      title={t('列设置')}
+      visible={showColumnSelector}
+      onCancel={() => setShowColumnSelector(false)}
+      footer={
+        <div className="flex justify-end">
+          <Button onClick={() => initDefaultColumns()}>
+            {t('重置')}
+          </Button>
+          <Button onClick={() => setShowColumnSelector(false)}>
+            {t('取消')}
+          </Button>
+          <Button onClick={() => setShowColumnSelector(false)}>
+            {t('确定')}
+          </Button>
+        </div>
+      }
+    >
+      <div style={{ marginBottom: 20 }}>
+        <Checkbox
+          checked={Object.values(visibleColumns).every((v) => v === true)}
+          indeterminate={
+            Object.values(visibleColumns).some((v) => v === true) &&
+            !Object.values(visibleColumns).every((v) => v === true)
+          }
+          onChange={(e) => handleSelectAll(e.target.checked)}
+        >
+          {t('全选')}
+        </Checkbox>
+      </div>
+      <div
+        className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4"
+        style={{ border: '1px solid var(--semi-color-border)' }}
+      >
+        {allColumns.map((column) => {
+          // Skip admin-only columns for non-admin users
+          if (
+            !isAdminUser &&
+            (column.key === COLUMN_KEYS.CHANNEL ||
+              column.key === COLUMN_KEYS.USERNAME ||
+              column.key === COLUMN_KEYS.RETRY)
+          ) {
+            return null;
+          }
+
+          return (
+            <div key={column.key} className="w-1/2 mb-4 pr-2">
+              <Checkbox
+                checked={!!visibleColumns[column.key]}
+                onChange={(e) =>
+                  handleColumnVisibilityChange(column.key, e.target.checked)
+                }
+              >
+                {column.title}
+              </Checkbox>
+            </div>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+};
+
+export default ColumnSelectorModal; 
\ No newline at end of file

web/src/components/table/usage-logs/modals/UserInfoModal.jsx

+import React from 'react';
+import { Modal } from '@douyinfe/semi-ui';
+import { renderQuota, renderNumber } from '../../../../helpers';
+
+const UserInfoModal = ({
+  showUserInfo,
+  setShowUserInfoModal,
+  userInfoData,
+  t,
+}) => {
+  return (
+    <Modal
+      title={t('用户信息')}
+      visible={showUserInfo}
+      onCancel={() => setShowUserInfoModal(false)}
+      footer={null}
+      centered={true}
+    >
+      {userInfoData && (
+        <div style={{ padding: 12 }}>
+          <p>
+            {t('用户名')}: {userInfoData.username}
+          </p>
+          <p>
+            {t('余额')}: {renderQuota(userInfoData.quota)}
+          </p>
+          <p>
+            {t('已用额度')}：{renderQuota(userInfoData.used_quota)}
+          </p>
+          <p>
+            {t('请求次数')}：{renderNumber(userInfoData.request_count)}
+          </p>
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default UserInfoModal; 
\ No newline at end of file