✨ feat(logs): 优化日志页面搜索体验

- 添加高级搜索折叠面板，将不常用搜索项收纳，减少页面占用空间
- 调整搜索项布局为响应式网格，优化不同屏幕尺寸显示效果
- 统一使用small尺寸组件，提升页面紧凑感
- 优化搜索项排列顺序，将常用项前置
- 添加Collapse组件实现高级搜索区域的展开/折叠功能
- 引入DownOutlined和RightOutlined图标指示折叠状态

src/client/admin/pages/Logs.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Table, Button, Space, Input, Form, DatePicker, Select } from 'antd';
-import { SearchOutlined, FilterOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Table, Button, Space, Input, Form, DatePicker, Select, Collapse } from 'antd';
+import { SearchOutlined, FilterOutlined, DownOutlined, RightOutlined } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import { operationLogsClient } from '@/client/api';
 import type { InferResponseType } from 'hono/client';
@@ -11,9 +11,11 @@ type LogfileItem = InferResponseType<typeof operationLogsClient.$get, 200>['data
 type LogfileListResponse = InferResponseType<typeof operationLogsClient.$get, 200>;
 
 const { RangePicker } = DatePicker;
+const { Panel } = Collapse;
 
 const Logs: React.FC = () => {
   const [form] = Form.useForm();
+  const [advancedSearchExpanded, setAdvancedSearchExpanded] = useState(false);
   
   // 获取日志列表数据
   const fetchLogs = async ({
@@ -202,70 +204,77 @@ const Logs: React.FC = () => {
             }
           }}
         >
-          {/* 第一行筛选条件 */}
-          <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="请输入资源类型" />
+          {/* 常用搜索项 */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-3">
+            <Form.Item name="resourceType" label="资源类型" className="mb-2">
+              <Input placeholder="请输入资源类型" size="small" />
             </Form.Item>
-            <Form.Item name="action" label="操作动作">
-              <Input placeholder="请输入操作动作" />
+            <Form.Item name="action" label="操作动作" className="mb-2">
+              <Input placeholder="请输入操作动作" size="small" />
             </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="请选择状态">
+            <Form.Item name="status" label="状态" className="mb-2">
+              <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-2">
+              <RangePicker format="YYYY-MM-DD" className="w-full" size="small" />
+            </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}>
+          {/* 高级搜索项折叠面板 */}
+          <Collapse
+            ghost
+            expandIcon={({ isActive }) => isActive ? <DownOutlined /> : <RightOutlined />}
+            className="mb-3"
+          >
+            <Panel header="高级搜索" key="1">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+                <Form.Item name="method" label="HTTP方法" className="mb-2">
+                  <Input placeholder="请输入HTTP方法" size="small" />
+                </Form.Item>
+                <Form.Item name="endpoint" label="API端点" className="mb-2">
+                  <Input placeholder="请输入API端点" size="small" />
+                </Form.Item>
+                <Form.Item name="userId" label="操作用户ID" className="mb-2">
+                  <Input placeholder="请输入用户ID" size="small" />
+                </Form.Item>
+                <Form.Item name="username" label="用户名" className="mb-2">
+                  <Input placeholder="请输入用户名" size="small" />
+                </Form.Item>
+                <Form.Item name="ipAddress" label="IP地址" className="mb-2">
+                  <Input placeholder="请输入IP地址" size="small" />
+                </Form.Item>
+              </div>
+            </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}>
+              <Button onClick={handleResetFilters} size="small">
                 重置
               </Button>
             </div>
-          </div>
-          
-          {/* 搜索框 */}
-          <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>
+            <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>
         </Form>
       </div>