💄 style(logs): 优化日志页面布局，提升响应式体验

- 引入Row和Col组件替代原有的grid布局，增强响应式能力
- 重构常用搜索项区域，使用栅格系统实现不同屏幕尺寸下的自适应排列
- 优化高级搜索项布局，采用栅格系统提升页面结构清晰度
- 改进操作按钮和搜索框区域布局，确保在移动设备上显示更合理
- 调整各元素间距，提升整体页面美观度和用户体验

src/client/admin/pages/Logs.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Table, Button, Space, Input, Form, DatePicker, Select, Collapse } from 'antd';
+import { Table, Button, Space, Input, Form, DatePicker, Select, Collapse, Row, Col } from 'antd';
 import { SearchOutlined, FilterOutlined, DownOutlined, RightOutlined } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import { operationLogsClient } from '@/client/api';
@@ -205,25 +205,33 @@ const Logs: React.FC = () => {
           }}
         >
           {/* 常用搜索项 */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 mb-2">
-            <Form.Item name="resourceType" label="资源类型" className="mb-1">
-              <Input placeholder="请输入资源类型" size="small" />
-            </Form.Item>
-            <Form.Item name="action" label="操作动作" className="mb-1">
-              <Input placeholder="请输入操作动作" size="small" />
-            </Form.Item>
-            <Form.Item name="status" label="状态" className="mb-1">
-              <Select placeholder="请选择状态" size="small">
-                <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>
-            <Form.Item name="dateRange" label="操作时间" className="mb-1">
-              <RangePicker format="YYYY-MM-DD" className="w-full" size="small" />
-            </Form.Item>
-          </div>
+          <Row gutter={[16, 8]} className="mb-2">
+            <Col xs={24} sm={12} md={8} lg={6}>
+              <Form.Item name="resourceType" label="资源类型" className="mb-1">
+                <Input placeholder="请输入资源类型" size="small" />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={6}>
+              <Form.Item name="action" label="操作动作" className="mb-1">
+                <Input placeholder="请输入操作动作" size="small" />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={6}>
+              <Form.Item name="status" label="状态" className="mb-1">
+                <Select placeholder="请选择状态" size="small">
+                  <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>
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={6}>
+              <Form.Item name="dateRange" label="操作时间" className="mb-1">
+                <RangePicker format="YYYY-MM-DD" className="w-full" size="small" />
+              </Form.Item>
+            </Col>
+          </Row>
           
           {/* 高级搜索项折叠面板 */}
           <Collapse
@@ -232,50 +240,68 @@ const Logs: React.FC = () => {
             className="mb-3"
           >
             <Panel header="高级搜索" key="1">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
-                <Form.Item name="method" label="HTTP方法" className="mb-1">
-                  <Input placeholder="请输入HTTP方法" size="small" />
-                </Form.Item>
-                <Form.Item name="endpoint" label="API端点" className="mb-1">
-                  <Input placeholder="请输入API端点" size="small" />
-                </Form.Item>
-                <Form.Item name="userId" label="操作用户ID" className="mb-1">
-                  <Input placeholder="请输入用户ID" size="small" />
-                </Form.Item>
-                <Form.Item name="username" label="用户名" className="mb-1">
-                  <Input placeholder="请输入用户名" size="small" />
-                </Form.Item>
-                <Form.Item name="ipAddress" label="IP地址" className="mb-1">
-                  <Input placeholder="请输入IP地址" size="small" />
-                </Form.Item>
-              </div>
+              <Row gutter={[16, 8]}>
+                <Col xs={24} sm={12} md={8} lg={6}>
+                  <Form.Item name="method" label="HTTP方法" className="mb-1">
+                    <Input placeholder="请输入HTTP方法" size="small" />
+                  </Form.Item>
+                </Col>
+                <Col xs={24} sm={12} md={8} lg={6}>
+                  <Form.Item name="endpoint" label="API端点" className="mb-1">
+                    <Input placeholder="请输入API端点" size="small" />
+                  </Form.Item>
+                </Col>
+                <Col xs={24} sm={12} md={8} lg={6}>
+                  <Form.Item name="userId" label="操作用户ID" className="mb-1">
+                    <Input placeholder="请输入用户ID" size="small" />
+                  </Form.Item>
+                </Col>
+                <Col xs={24} sm={12} md={8} lg={6}>
+                  <Form.Item name="username" label="用户名" className="mb-1">
+                    <Input placeholder="请输入用户名" size="small" />
+                  </Form.Item>
+                </Col>
+                <Col xs={24} sm={12} md={8} lg={6}>
+                  <Form.Item name="ipAddress" label="IP地址" className="mb-1">
+                    <Input placeholder="请输入IP地址" size="small" />
+                  </Form.Item>
+                </Col>
+              </Row>
             </Panel>
           </Collapse>
           
           {/* 操作按钮和搜索框 */}
-          <div className="flex flex-col sm:flex-row gap-2">
-            <div className="flex gap-2">
-              <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange} size="small">
-                筛选
-              </Button>
-              <Button onClick={handleResetFilters} size="small">
-                重置
-              </Button>
-            </div>
-            <div className="flex-grow flex gap-2">
-              <Form.Item name="searchText" className="flex-grow mb-0">
-                <Input
-                  placeholder="搜索日志内容"
-                  prefix={<SearchOutlined />}
-                  onPressEnter={handleSearch}
-                  size="small"
-                />
-              </Form.Item>
-              <Button type="default" onClick={handleSearch} size="small">
-                搜索
-              </Button>
-            </div>
-          </div>
+          <Row gutter={[16, 8]} align="middle">
+            <Col xs={24} sm={12} md={8}>
+              <Space>
+                <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange} size="small">
+                  筛选
+                </Button>
+                <Button onClick={handleResetFilters} size="small">
+                  重置
+                </Button>
+              </Space>
+            </Col>
+            <Col xs={24} sm={12} md={16}>
+              <Row gutter={8} align="middle">
+                <Col xs={24} sm={16}>
+                  <Form.Item name="searchText" className="mb-0">
+                    <Input
+                      placeholder="搜索日志内容"
+                      prefix={<SearchOutlined />}
+                      onPressEnter={handleSearch}
+                      size="small"
+                    />
+                  </Form.Item>
+                </Col>
+                <Col xs={24} sm={8}>
+                  <Button type="default" onClick={handleSearch} size="small" block>
+                    搜索
+                  </Button>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
         </Form>
       </div>