Ver código fonte

✨ feat(logs): 优化日志查询页面UI和功能

- 重构搜索区域布局,采用垂直布局提升空间利用率
- 将资源类型、操作类型等输入框替换为下拉选择框,优化用户体验
- 增加查询和重置按钮,提升操作便捷性
- 优化表单字段布局,将高级搜索项整合到主搜索区域
- 为所有输入组件添加清除功能,方便用户快速重置
- 调整表格容器样式,增加底部外边距提升页面层次感
- 优化各搜索项标签文本,使语义更清晰
- 增加HTTP方法筛选条件,提升日志筛选精确性
yourname 4 meses atrás
pai
commit
3b6a84f942
1 arquivos alterados com 121 adições e 79 exclusões
  1. 121 79
      src/client/admin/pages/Logs.tsx

+ 121 - 79
src/client/admin/pages/Logs.tsx

@@ -203,108 +203,150 @@ const Logs: React.FC = () => {
             pageSize: 10
             }
           }}
+          layout="vertical"
         >
+          {/* 搜索区域头部 */}
+          <div className="mb-4">
+            <Row gutter={16} align="middle">
+              <Col flex="auto">
+                <h3 className="text-lg font-semibold text-gray-900">日志查询</h3>
+              </Col>
+              <Col>
+                <Space>
+                  <Button
+                    type="primary"
+                    icon={<FilterOutlined />}
+                    onClick={handleFilterChange}
+                    className="h-10"
+                  >
+                    查询
+                  </Button>
+                  <Button
+                    onClick={handleResetFilters}
+                    className="h-10"
+                  >
+                    重置
+                  </Button>
+                </Space>
+              </Col>
+            </Row>
+          </div>
+
           {/* 常用搜索项 */}
-          <Row gutter={[16, 16]} className="mb-4">
-            <Col xs={24} sm={12} md={8} lg={6}>
+          <Row gutter={16}>
+            <Col xs={24} sm={12} md={6}>
               <Form.Item name="resourceType" label="资源类型">
-                <Input placeholder="请输入资源类型" />
+                <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={8} lg={6}>
-              <Form.Item name="action" label="操作动作">
-                <Input placeholder="请输入操作动作" />
+            <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={8} lg={6}>
-              <Form.Item name="status" label="状态">
-                <Select placeholder="请选择状态">
-                  <Select.Option value="">全部</Select.Option>
+            <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={8} lg={6}>
+            <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" />
+                <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>
-          
-          {/* 高级搜索项折叠面板 */}
-          <Collapse
-            ghost
-            expandIcon={({ isActive }) => isActive ? <DownOutlined /> : <RightOutlined />}
-            className="mb-3"
-          >
-            <Panel header="高级搜索" key="1">
-              <Row gutter={[16, 16]}>
-                <Col xs={24} sm={12} md={8} lg={6}>
-                  <Form.Item name="method" label="HTTP方法">
-                    <Input placeholder="请输入HTTP方法" />
-                  </Form.Item>
-                </Col>
-                <Col xs={24} sm={12} md={8} lg={6}>
-                  <Form.Item name="endpoint" label="API端点">
-                    <Input placeholder="请输入API端点" />
-                  </Form.Item>
-                </Col>
-                <Col xs={24} sm={12} md={8} lg={6}>
-                  <Form.Item name="userId" label="操作用户ID">
-                    <Input placeholder="请输入用户ID" />
-                  </Form.Item>
-                </Col>
-                <Col xs={24} sm={12} md={8} lg={6}>
-                  <Form.Item name="username" label="用户名">
-                    <Input placeholder="请输入用户名" />
-                  </Form.Item>
-                </Col>
-                <Col xs={24} sm={12} md={8} lg={6}>
-                  <Form.Item name="ipAddress" label="IP地址">
-                    <Input placeholder="请输入IP地址" />
-                  </Form.Item>
-                </Col>
-              </Row>
-            </Panel>
-          </Collapse>
-          
-          {/* 操作按钮和搜索框 */}
-          <Row gutter={[16, 16]} align="middle">
-            <Col xs={24} sm={12} md={8}>
-              <Space>
-                <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange}>
-                  筛选
-                </Button>
-                <Button onClick={handleResetFilters}>
-                  重置
-                </Button>
-              </Space>
+
+          <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={16}>
-              <Row gutter={16} align="middle">
-                <Col xs={24} sm={16}>
-                  <Form.Item name="searchText" className="mb-0">
-                    <Input
-                      placeholder="搜索日志内容"
-                      prefix={<SearchOutlined />}
-                      onPressEnter={handleSearch}
-                    />
-                  </Form.Item>
-                </Col>
-                <Col xs={24} sm={8}>
-                  <Button type="primary" onClick={handleSearch} block>
-                    搜索
-                  </Button>
-                </Col>
-              </Row>
+            <Col xs={24} sm={12} md={18}>
+              <Form.Item name="searchText" label="关键词搜索">
+                <Input
+                  placeholder="搜索日志内容、资源ID等关键词"
+                  prefix={<SearchOutlined />}
+                  onPressEnter={handleSearch}
+                  allowClear
+                />
+              </Form.Item>
             </Col>
           </Row>
         </Form>
       </div>
       
-      <div className="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
+      <div className="bg-white p-6 mb-6 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
         <Table
           columns={columns}
           dataSource={data?.data || []}