♻️ 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/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"