Ver Fonte

💄 style(logs): 优化日志查询界面布局与交互

- 将日志查询表单改为紧凑的inline布局,减少垂直空间占用
- 调整卡片内边距从p-6 mb-6改为p-3 mb-4,提升页面利用率
- 实现高级搜索功能,默认收起,点击"高级"展开更多搜索条件
- 所有表单控件使用small尺寸,减少水平空间占用
- 优化搜索按钮组布局,增加收起/展开图标和文字提示
- 调整各筛选条件的宽度和间距,使整体布局更紧凑美观
yourname há 4 meses atrás
pai
commit
b5d2db6484
1 ficheiros alterados com 146 adições e 123 exclusões
  1. 146 123
      src/client/admin/pages/Logs.tsx

+ 146 - 123
src/client/admin/pages/Logs.tsx

@@ -193,156 +193,179 @@ const Logs: React.FC = () => {
         <h2 className="text-2xl font-bold">系统日志管理</h2>
       </div>
       
-      <div className="bg-white p-6 mb-6 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
+      <div className="bg-white p-3 mb-4 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
         <Form
           form={form}
           onValuesChange={handleFilterChange}
           initialValues={{
             pagination: {
-            current: 1,
-            pageSize: 10
+              current: 1,
+              pageSize: 10
             }
           }}
-          layout="vertical"
+          layout="inline"
         >
-          {/* 搜索区域头部 */}
-          <div className="mb-4">
-            <Row gutter={16} align="middle">
+          {/* 紧凑搜索区域 */}
+          <div className="w-full">
+            <Row gutter={12} align="middle" wrap={false}>
               <Col flex="auto">
-                <h3 className="text-lg font-semibold text-gray-900">日志查询</h3>
+                <Row gutter={12} wrap>
+                  <Col>
+                    <Form.Item name="resourceType" label="资源类型" style={{ marginBottom: 0 }}>
+                      <Select
+                        placeholder="全部类型"
+                        allowClear
+                        className="w-28"
+                        size="small"
+                        popupMatchSelectWidth={false}
+                      >
+                        <Select.Option value="user">用户</Select.Option>
+                        <Select.Option value="client">客户</Select.Option>
+                        <Select.Option value="contract">合同</Select.Option>
+                        <Select.Option value="permission">权限</Select.Option>
+                        <Select.Option value="role">角色</Select.Option>
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="action" label="操作" style={{ marginBottom: 0 }}>
+                      <Select
+                        placeholder="全部操作"
+                        allowClear
+                        className="w-28"
+                        size="small"
+                        popupMatchSelectWidth={false}
+                      >
+                        <Select.Option value="create">创建</Select.Option>
+                        <Select.Option value="update">更新</Select.Option>
+                        <Select.Option value="delete">删除</Select.Option>
+                        <Select.Option value="view">查看</Select.Option>
+                        <Select.Option value="login">登录</Select.Option>
+                        <Select.Option value="logout">登出</Select.Option>
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="status" label="状态" style={{ marginBottom: 0 }}>
+                      <Select placeholder="全部状态" allowClear className="w-24" size="small">
+                        <Select.Option value="success">成功</Select.Option>
+                        <Select.Option value="failed">失败</Select.Option>
+                        <Select.Option value="permission_denied">拒绝</Select.Option>
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="method" label="方法" style={{ marginBottom: 0 }}>
+                      <Select placeholder="全部" allowClear className="w-20" size="small">
+                        <Select.Option value="GET">GET</Select.Option>
+                        <Select.Option value="POST">POST</Select.Option>
+                        <Select.Option value="PUT">PUT</Select.Option>
+                        <Select.Option value="DELETE">DELETE</Select.Option>
+                        <Select.Option value="PATCH">PATCH</Select.Option>
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="searchText" style={{ marginBottom: 0 }}>
+                      <Input
+                        placeholder="关键词:日志内容、ID等"
+                        prefix={<SearchOutlined />}
+                        onPressEnter={handleSearch}
+                        allowClear
+                        className="w-48"
+                        size="small"
+                      />
+                    </Form.Item>
+                  </Col>
+                </Row>
               </Col>
               <Col>
-                <Space>
+                <Space size={8}>
                   <Button
                     type="primary"
                     icon={<FilterOutlined />}
                     onClick={handleFilterChange}
-                    className="h-10"
+                    size="small"
                   >
                     查询
                   </Button>
                   <Button
                     onClick={handleResetFilters}
-                    className="h-10"
+                    size="small"
                   >
                     重置
                   </Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    icon={advancedSearchExpanded ? <DownOutlined /> : <RightOutlined />}
+                    onClick={() => setAdvancedSearchExpanded(!advancedSearchExpanded)}
+                  >
+                    {advancedSearchExpanded ? '收起' : '高级'}
+                  </Button>
                 </Space>
               </Col>
             </Row>
-          </div>
-
-          {/* 常用搜索项 */}
-          <Row gutter={16}>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="resourceType" label="资源类型">
-                <Select
-                  placeholder="请选择资源类型"
-                  allowClear
-                  className="w-full"
-                >
-                  <Select.Option value="user">用户</Select.Option>
-                  <Select.Option value="client">客户</Select.Option>
-                  <Select.Option value="contract">合同</Select.Option>
-                  <Select.Option value="permission">权限</Select.Option>
-                  <Select.Option value="role">角色</Select.Option>
-                </Select>
-              </Form.Item>
-            </Col>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="action" label="操作类型">
-                <Select
-                  placeholder="请选择操作类型"
-                  allowClear
-                  className="w-full"
-                >
-                  <Select.Option value="create">创建</Select.Option>
-                  <Select.Option value="update">更新</Select.Option>
-                  <Select.Option value="delete">删除</Select.Option>
-                  <Select.Option value="view">查看</Select.Option>
-                  <Select.Option value="login">登录</Select.Option>
-                  <Select.Option value="logout">登出</Select.Option>
-                </Select>
-              </Form.Item>
-            </Col>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="status" label="操作状态">
-                <Select placeholder="请选择状态" allowClear>
-                  <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={6}>
-              <Form.Item name="method" label="HTTP方法">
-                <Select placeholder="请选择HTTP方法" allowClear>
-                  <Select.Option value="GET">GET</Select.Option>
-                  <Select.Option value="POST">POST</Select.Option>
-                  <Select.Option value="PUT">PUT</Select.Option>
-                  <Select.Option value="DELETE">DELETE</Select.Option>
-                  <Select.Option value="PATCH">PATCH</Select.Option>
-                </Select>
-              </Form.Item>
-            </Col>
-          </Row>
 
-          <Row gutter={16}>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="dateRange" label="操作时间">
-                <RangePicker
-                  format="YYYY-MM-DD"
-                  className="w-full"
-                  allowClear
-                />
-              </Form.Item>
-            </Col>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="username" label="用户名">
-                <Input
-                  placeholder="请输入用户名"
-                  allowClear
-                />
-              </Form.Item>
-            </Col>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="ipAddress" label="IP地址">
-                <Input
-                  placeholder="请输入IP地址"
-                  allowClear
-                />
-              </Form.Item>
-            </Col>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="endpoint" label="API端点">
-                <Input
-                  placeholder="请输入API端点"
-                  allowClear
-                />
-              </Form.Item>
-            </Col>
-          </Row>
-
-          <Row gutter={16}>
-            <Col xs={24} sm={12} md={6}>
-              <Form.Item name="userId" label="用户ID">
-                <Input
-                  placeholder="请输入用户ID"
-                  allowClear
-                />
-              </Form.Item>
-            </Col>
-            <Col xs={24} sm={12} md={18}>
-              <Form.Item name="searchText" label="关键词搜索">
-                <Input
-                  placeholder="搜索日志内容、资源ID等关键词"
-                  prefix={<SearchOutlined />}
-                  onPressEnter={handleSearch}
-                  allowClear
-                />
-              </Form.Item>
-            </Col>
-          </Row>
+            {/* 高级搜索条件 - 直接展开显示 */}
+            {advancedSearchExpanded && (
+              <div className="mt-2 pt-2 border-t border-gray-100">
+                <Row gutter={12} wrap>
+                  <Col>
+                    <Form.Item name="dateRange" label="操作时间" style={{ marginBottom: 0 }}>
+                      <RangePicker
+                        format="YYYY-MM-DD"
+                        className="w-56"
+                        allowClear
+                        size="small"
+                        placeholder={['开始日期', '结束日期']}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="username" label="用户名" style={{ marginBottom: 0 }}>
+                      <Input
+                        placeholder="用户名"
+                        allowClear
+                        className="w-24"
+                        size="small"
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="ipAddress" label="IP地址" style={{ marginBottom: 0 }}>
+                      <Input
+                        placeholder="IP地址"
+                        allowClear
+                        className="w-28"
+                        size="small"
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="endpoint" label="API端点" style={{ marginBottom: 0 }}>
+                      <Input
+                        placeholder="API端点"
+                        allowClear
+                        className="w-36"
+                        size="small"
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col>
+                    <Form.Item name="userId" label="用户ID" style={{ marginBottom: 0 }}>
+                      <Input
+                        placeholder="用户ID"
+                        allowClear
+                        className="w-20"
+                        size="small"
+                      />
+                    </Form.Item>
+                  </Col>
+                </Row>
+              </div>
+            )}
+          </div>
         </Form>
       </div>