✨ feat(logs): 优化日志筛选界面布局与交互

- 引入antd Select组件替代原生select标签，统一UI风格
- 使用grid布局重构筛选条件，实现响应式排列（移动端单列、平板双列、桌面四列）
- 调整筛选条件分组，将相关条件归类到不同行，提升视觉层次感
- 优化搜索框样式，使其占满可用空间并与其他筛选条件对齐
- 添加CSS Grid和Flex布局类，改善整体页面响应式表现
- 调整按钮位置，使操作区域更加集中直观

src/client/admin/pages/Logs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Button, Space, Input, Form, DatePicker } from 'antd';
+import { Table, Button, Space, Input, Form, DatePicker, Select } from 'antd';
 import { SearchOutlined, FilterOutlined } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import { operationLogsClient } from '@/client/api';
@@ -192,73 +192,81 @@ const Logs: React.FC = () => {
       </div>
       
       <div className="bg-white p-4 mb-4 rounded-lg shadow-sm">
-        <Form 
-          form={form} 
-          layout="inline" 
+        <Form
+          form={form}
           onValuesChange={handleFilterChange}
           initialValues={{
             pagination: {
-              current: 1,
-              pageSize: 10
+            current: 1,
+            pageSize: 10
             }
           }}
         >
-          <Form.Item name="resourceType" label="资源类型">
-            <Input placeholder="请输入资源类型" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="action" label="操作动作">
-            <Input placeholder="请输入操作动作" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="method" label="HTTP方法">
-            <Input placeholder="请输入HTTP方法" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="endpoint" label="API端点">
-            <Input placeholder="请输入API端点" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="userId" label="操作用户ID">
-            <Input placeholder="请输入用户ID" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="username" label="用户名">
-            <Input placeholder="请输入用户名" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="ipAddress" label="IP地址">
-            <Input placeholder="请输入IP地址" style={{ width: 150 }} />
-          </Form.Item>
-          <Form.Item name="status" label="状态">
-            <select style={{ width: 150, height: 32, borderRadius: 6, border: '1px solid #d9d9d9' }}>
-              <option value="">全部</option>
-              <option value="success">成功</option>
-              <option value="failed">失败</option>
-              <option value="permission_denied">权限拒绝</option>
-            </select>
-          </Form.Item>
-          <Form.Item name="dateRange" label="操作时间">
-            <RangePicker format="YYYY-MM-DD" />
-          </Form.Item>
-          <Form.Item>
-            <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange}>
-              筛选
-            </Button>
-          </Form.Item>
-          <Form.Item>
-            <Button onClick={handleResetFilters}>
-              重置
-            </Button>
-          </Form.Item>
+          {/* 第一行筛选条件 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+            <Form.Item name="resourceType" label="资源类型">
+              <Input placeholder="请输入资源类型" />
+            </Form.Item>
+            <Form.Item name="action" label="操作动作">
+              <Input placeholder="请输入操作动作" />
+            </Form.Item>
+            <Form.Item name="method" label="HTTP方法">
+              <Input placeholder="请输入HTTP方法" />
+            </Form.Item>
+            <Form.Item name="endpoint" label="API端点">
+              <Input placeholder="请输入API端点" />
+            </Form.Item>
+          </div>
+          
+          {/* 第二行筛选条件 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+            <Form.Item name="userId" label="操作用户ID">
+              <Input placeholder="请输入用户ID" />
+            </Form.Item>
+            <Form.Item name="username" label="用户名">
+              <Input placeholder="请输入用户名" />
+            </Form.Item>
+            <Form.Item name="ipAddress" label="IP地址">
+              <Input placeholder="请输入IP地址" />
+            </Form.Item>
+            <Form.Item name="status" label="状态">
+              <Select placeholder="请选择状态">
+                <Select.Option value="">全部</Select.Option>
+                <Select.Option value="success">成功</Select.Option>
+                <Select.Option value="failed">失败</Select.Option>
+                <Select.Option value="permission_denied">权限拒绝</Select.Option>
+              </Select>
+            </Form.Item>
+          </div>
+          
+          {/* 时间范围和操作按钮 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <Form.Item name="dateRange" label="操作时间">
+              <RangePicker format="YYYY-MM-DD" className="w-full" />
+            </Form.Item>
+            <div className="flex items-end space-x-2">
+              <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange}>
+                筛选
+              </Button>
+              <Button onClick={handleResetFilters}>
+                重置
+              </Button>
+            </div>
+          </div>
           
-          <Form.Item name="searchText" noStyle>
-            <Input
-              placeholder="搜索日志内容"
-              prefix={<SearchOutlined />}
-              onPressEnter={handleSearch}
-              style={{ width: 300, marginLeft: 16 }}
-            />
-          </Form.Item>
-          <Form.Item noStyle>
-            <Button type="default" onClick={handleSearch} style={{ marginLeft: 8 }}>
+          {/* 搜索框 */}
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Form.Item name="searchText" className="flex-grow mb-0">
+              <Input
+                placeholder="搜索日志内容"
+                prefix={<SearchOutlined />}
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Button type="default" onClick={handleSearch} className="sm:mb-0">
               搜索
             </Button>
-          </Form.Item>
+          </div>
         </Form>
       </div>