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