💄 style(logs): 优化系统日志管理页面UI

- 调整页面布局和间距，增加整体留白
- 放大标题字号为text-2xl，提升视觉层级
- 增加卡片悬停效果(shadow变化)和过渡动画
- 统一移除small尺寸属性，使用默认尺寸增强可读性
- 优化表格样式，添加行交替背景色和横向滚动支持
- 调整表单间距和布局，提升整体美观度和用户体验

src/client/admin/pages/Logs.tsx

@@ -189,11 +189,11 @@ const Logs: React.FC = () => {
   
   return (
     <div className="p-4">
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-xl font-bold">系统日志管理</h2>
+      <div className="mb-6 flex justify-between items-center">
+        <h2 className="text-2xl font-bold">系统日志管理</h2>
       </div>
       
-      <div className="bg-white p-4 mb-4 rounded-lg shadow-sm">
+      <div className="bg-white p-6 mb-6 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
         <Form
           form={form}
           onValuesChange={handleFilterChange}
@@ -205,20 +205,20 @@ const Logs: React.FC = () => {
           }}
         >
           {/* 常用搜索项 */}
-          <Row gutter={[16, 8]} className="mb-2">
+          <Row gutter={[16, 16]} className="mb-4">
             <Col xs={24} sm={12} md={8} lg={6}>
-              <Form.Item name="resourceType" label="资源类型" className="mb-1">
-                <Input placeholder="请输入资源类型" size="small" />
+              <Form.Item name="resourceType" label="资源类型">
+                <Input placeholder="请输入资源类型" />
               </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 name="action" label="操作动作">
+                <Input placeholder="请输入操作动作" />
               </Form.Item>
             </Col>
             <Col xs={24} sm={12} md={8} lg={6}>
-              <Form.Item name="status" label="状态" className="mb-1">
-                <Select placeholder="请选择状态" size="small">
+              <Form.Item name="status" label="状态">
+                <Select placeholder="请选择状态">
                   <Select.Option value="">全部</Select.Option>
                   <Select.Option value="success">成功</Select.Option>
                   <Select.Option value="failed">失败</Select.Option>
@@ -227,8 +227,8 @@ const Logs: React.FC = () => {
               </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 name="dateRange" label="操作时间">
+                <RangePicker format="YYYY-MM-DD" className="w-full" />
               </Form.Item>
             </Col>
           </Row>
@@ -240,30 +240,30 @@ const Logs: React.FC = () => {
             className="mb-3"
           >
             <Panel header="高级搜索" key="1">
-              <Row gutter={[16, 8]}>
+              <Row gutter={[16, 16]}>
                 <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 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端点" className="mb-1">
-                    <Input placeholder="请输入API端点" size="small" />
+                  <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" className="mb-1">
-                    <Input placeholder="请输入用户ID" size="small" />
+                  <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="用户名" className="mb-1">
-                    <Input placeholder="请输入用户名" size="small" />
+                  <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地址" className="mb-1">
-                    <Input placeholder="请输入IP地址" size="small" />
+                  <Form.Item name="ipAddress" label="IP地址">
+                    <Input placeholder="请输入IP地址" />
                   </Form.Item>
                 </Col>
               </Row>
@@ -271,31 +271,30 @@ const Logs: React.FC = () => {
           </Collapse>
           
           {/* 操作按钮和搜索框 */}
-          <Row gutter={[16, 8]} align="middle">
+          <Row gutter={[16, 16]} align="middle">
             <Col xs={24} sm={12} md={8}>
               <Space>
-                <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange} size="small">
+                <Button type="primary" icon={<FilterOutlined />} onClick={handleFilterChange}>
                   筛选
                 </Button>
-                <Button onClick={handleResetFilters} size="small">
+                <Button onClick={handleResetFilters}>
                   重置
                 </Button>
               </Space>
             </Col>
             <Col xs={24} sm={12} md={16}>
-              <Row gutter={8} align="middle">
+              <Row gutter={16} 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 type="primary" onClick={handleSearch} block>
                     搜索
                   </Button>
                 </Col>
@@ -305,23 +304,27 @@ const Logs: React.FC = () => {
         </Form>
       </div>
       
-      <Table
-        columns={columns}
-        dataSource={data?.data || []}
-        rowKey="id"
-        loading={isLoading}
-        pagination={{
-          current: data?.pagination.current || 1,
-          pageSize: data?.pagination.pageSize || 10,
-          total: data?.pagination.total || 0,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          showTotal: (total) => `共 ${total} 条记录`
-        }}
-        onChange={handleTableChange}
-        bordered
-        size="middle"
-      />
+      <div className="bg-white p-6 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
+        <Table
+          columns={columns}
+          dataSource={data?.data || []}
+          rowKey="id"
+          loading={isLoading}
+          pagination={{
+            current: data?.pagination.current || 1,
+            pageSize: data?.pagination.pageSize || 10,
+            total: data?.pagination.total || 0,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条记录`
+          }}
+          onChange={handleTableChange}
+          bordered
+          size="middle"
+          scroll={{ x: 'max-content' }}
+          rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+        />
+      </div>
     </div>
   );
 };