🐛 fix(files): 修复编辑文件时可能出现的空ID错误

  - 添加editingKey非空判断，防止更新文件时出现无效ID

✨ feat(files): 优化文件管理页面UI显示效果
  - 调整表格列宽和对齐方式，增强可读性
  - 为文件类型添加蓝色标签样式
  - 优化操作按钮样式，添加悬停效果
  - 改进表格行样式，实现奇偶行不同背景色
  - 增强分页控件功能，显示总数和快速跳转

💄 style(files): 改进页面布局和间距
  - 增加页面内边距，提升视觉舒适度
  - 优化搜索框和按钮的布局与尺寸
  - 为表格添加圆角和阴影效果
  - 改进模态框样式，设置居中显示并禁止点击遮罩关闭

♻️ refactor(files): 优化表格渲染逻辑
  - 统一添加文本大小样式，保持视觉一致性
  - 优化表格滚动设置，确保内容完整显示
  - 改进表单输入框样式，统一高度和圆角

src/client/admin/pages/Files.tsx

@@ -136,7 +136,9 @@ const Files: React.FC = () => {
         description: values.description,
       };
       
-      await updateFile.mutateAsync({ id: editingKey, data: payload });
+      if (editingKey) {
+        await updateFile.mutateAsync({ id: editingKey, data: payload });
+      }
     } catch (error) {
       message.error('表单验证失败，请检查输入');
     }
@@ -148,54 +150,81 @@ const Files: React.FC = () => {
       title: '文件ID',
       dataIndex: 'id',
       key: 'id',
+      width: 80,
+      align: 'center' as const,
     },
     {
       title: '文件名称',
       dataIndex: 'name',
       key: 'name',
+      width: 300,
+      ellipsis: true,
     },
     {
       title: '文件类型',
       dataIndex: 'type',
       key: 'type',
+      width: 120,
+      render: (type: string) => (
+        <span className="inline-block px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded-full">
+          {type}
+        </span>
+      ),
     },
     {
       title: '文件大小',
       dataIndex: 'size',
       key: 'size',
-      render: (size: number) => size ? `${(size / 1024).toFixed(2)} KB` : '-',
+      width: 120,
+      render: (size: number) => (
+        <span className="text-sm">
+          {size ? `${(size / 1024).toFixed(2)} KB` : '-'}
+        </span>
+      ),
     },
     {
       title: '上传时间',
       dataIndex: 'uploadTime',
       key: 'uploadTime',
-      render: (time: string) => time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '-',
+      width: 180,
+      render: (time: string) => (
+        <span className="text-sm text-gray-600">
+          {time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '-'}
+        </span>
+      ),
     },
     {
       title: '上传用户',
       dataIndex: 'uploadUser',
       key: 'uploadUser',
-      render: (uploadUser?: { username: string; nickname?: string }) => {
-        return uploadUser ? (uploadUser.nickname || uploadUser.username) : '-';
-      },
+      width: 120,
+      render: (uploadUser?: { username: string; nickname?: string }) => (
+        <span className="text-sm">
+          {uploadUser ? (uploadUser.nickname || uploadUser.username) : '-'}
+        </span>
+      ),
     },
     {
       title: '操作',
       key: 'action',
+      width: 120,
+      fixed: 'right' as const,
       render: (_: any, record: FileItem) => (
-        <Space size="middle">
-          <Button 
-            type="text" 
-            icon={<EditOutlined />} 
+        <Space size="small">
+          <Button
+            type="text"
+            icon={<EditOutlined />}
             onClick={() => showModal(record)}
+            className="text-blue-600 hover:text-blue-800 hover:bg-blue-50"
           >
             编辑
           </Button>
-          <Button 
-            type="text" 
-            danger 
-            icon={<DeleteOutlined />} 
+          <Button
+            type="text"
+            danger
+            icon={<DeleteOutlined />}
             onClick={() => deleteFile.mutate(record.id)}
+            className="hover:bg-red-50"
           >
             删除
           </Button>
@@ -205,41 +234,60 @@ const Files: 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="p-6">
+      <div className="mb-6 flex justify-between items-center">
+        <h2 className="text-2xl font-bold text-gray-900">文件管理</h2>
         <Button
           type="primary"
           icon={<UploadOutlined />}
           onClick={handleDirectUpload}
+          className="h-10 flex items-center"
         >
           上传文件
         </Button>
       </div>
       
-      <div className="mb-4">
-        <Input
-          placeholder="搜索文件名称或类型"
-          prefix={<SearchOutlined />}
-          value={searchText}
-          onChange={(e) => setSearchText(e.target.value)}
-          onPressEnter={handleSearch}
-          style={{ width: 300 }}
-        />
-        <Button type="default" onClick={handleSearch} style={{ marginLeft: 8 }}>
-          搜索
-        </Button>
+      <div className="mb-6">
+        <div className="flex items-center gap-4">
+          <Input
+            placeholder="搜索文件名称或类型"
+            prefix={<SearchOutlined />}
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            onPressEnter={handleSearch}
+            className="w-80 h-10"
+            allowClear
+          />
+          <Button
+            type="default"
+            onClick={handleSearch}
+            className="h-10"
+          >
+            搜索
+          </Button>
+        </div>
       </div>
       
-      <Table
-        columns={columns}
-        dataSource={data?.data || []}
-        rowKey="id"
-        loading={loading}
-        pagination={tablePagination}
-        onChange={handleTableChange}
-        bordered
-      />
+      <div className="bg-white rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
+        <Table
+          columns={columns}
+          dataSource={data?.data || []}
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            ...tablePagination,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total, range) =>
+              `显示 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+          }}
+          onChange={handleTableChange}
+          bordered={false}
+          scroll={{ x: 'max-content' }}
+          className="[&_.ant-table]:!rounded-lg [&_.ant-table-thead>tr>th]:!bg-gray-50 [&_.ant-table-thead>tr>th]:!font-semibold [&_.ant-table-thead>tr>th]:!text-gray-700 [&_.ant-table-thead>tr>th]:!border-b-2 [&_.ant-table-thead>tr>th]:!border-gray-200"
+          rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+        />
+      </div>
       
       <Modal
         title="编辑文件信息"
@@ -259,14 +307,21 @@ const Files: React.FC = () => {
           </Button>,
         ]}
         width={600}
+        centered
+        destroyOnClose
+        maskClosable={false}
       >
         <Form form={form} layout="vertical">
           <Form.Item name="name" label="文件名称">
-            <Input />
+            <Input className="h-10" />
           </Form.Item>
           
           <Form.Item name="description" label="文件描述">
-            <Input.TextArea rows={4} placeholder="请输入文件描述" />
+            <Input.TextArea
+              rows={4}
+              placeholder="请输入文件描述"
+              className="rounded-md"
+            />
           </Form.Item>
           
           <Form.Item name="type" label="文件类型" hidden>