♻️ 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/table/usage-logs/UsageLogsTable.jsx

@@ -0,0 +1,107 @@
+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;