Release v0.1

src/apis/README.md

@@ -91,6 +91,7 @@ import {
   getPeoples, 
   searchPeoples, 
   deletePeople,
+  updatePeople,
   getPeoplesPaginated 
 } from '@/apis';
 
@@ -154,6 +155,20 @@ const removePeople = async (peopleId: string) => {
     console.error('删除失败:', error);
   }
 };
+
+// 更新人员
+const updateOnePeople = async (peopleId: string) => {
+  const peopleData = {
+    name: '李四',
+    age: 28,
+  };
+  try {
+    const response = await updatePeople(peopleId, peopleData);
+    console.log('更新成功:', response);
+  } catch (error) {
+    console.error('更新失败:', error);
+  }
+};
 ```
 
 ## 错误处理

src/apis/config.ts

@@ -10,8 +10,11 @@ export const API_CONFIG = {
 
 // API 端点
 export const API_ENDPOINTS = {
-  INPUT: '/input',
-  INPUT_IMAGE: '/input_image',
+  INPUT: '/recognition/input',
+  INPUT_IMAGE: '/recognition/image',
+  // 人员列表查询仍为 /peoples
   PEOPLES: '/peoples',
-  PEOPLE_BY_ID: (id: string) => `/peoples/${id}`,
+  // 新增单个资源路径 /people
+  PEOPLE: '/people',
+  PEOPLE_BY_ID: (id: string) => `/people/${id}`,
 } as const;

src/apis/people.ts

@@ -1,6 +1,6 @@
 // 人员管理相关 API
 
-import { get, post, del } from './request';
+import { get, post, del, put } from './request';
 import { API_ENDPOINTS } from './config';
 import type { 
   PostPeopleRequest, 
@@ -15,10 +15,11 @@ import type {
  * @param people 人员信息对象
  * @returns Promise<ApiResponse>
  */
-export async function createPeople(people: Record<string, any>): Promise<ApiResponse> {
+export async function createPeople(people: People): Promise<ApiResponse> {
   const requestData: PostPeopleRequest = { people };
   console.log('创建人员请求数据:', requestData);
-  return post<ApiResponse>(API_ENDPOINTS.PEOPLES, requestData);
+  // 创建接口改为 /people
+  return post<ApiResponse>(API_ENDPOINTS.PEOPLE, requestData);
 }
 
 /**
@@ -109,13 +110,24 @@ export async function deletePeople(peopleId: string): Promise<ApiResponse> {
   return del<ApiResponse>(API_ENDPOINTS.PEOPLE_BY_ID(peopleId));
 }
 
+/**
+ * 更新人员信息
+ * @param peopleId 人员ID
+ * @param people 人员信息对象
+ * @returns Promise<ApiResponse>
+ */
+export async function updatePeople(peopleId: string, people: People): Promise<ApiResponse> {
+  const requestData: PostPeopleRequest = { people };
+  return put<ApiResponse>(API_ENDPOINTS.PEOPLE_BY_ID(peopleId), requestData);
+}
+
 /**
  * 批量创建人员信息
  * @param peopleList 人员信息数组
  * @returns Promise<ApiResponse[]>
  */
 export async function createPeoplesBatch(
-  peopleList: Record<string, any>[]
+  peopleList: People[]
 ): Promise<ApiResponse[]> {
   const promises = peopleList.map(people => createPeople(people));
   return Promise.all(promises);

src/apis/types.ts

@@ -45,12 +45,13 @@ export interface GetPeoplesParams {
 export interface People {
   id?: string;
   name?: string;
+  contact?: string;
   gender?: string;
   age?: number;
   height?: number;
   marital_status?: string;
-  contact?: string;
   [key: string]: any;
+  cover?: string;
 }
 
 // 分页响应类型

src/apis/upload.ts

@@ -34,7 +34,8 @@ export async function postInputImageWithProgress(
   }
 
   const formData = new FormData();
-  formData.append('file', file);
+  // 后端要求字段名为 image
+  formData.append('image', file);
 
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();

src/components/ImageModal.css

@@ -0,0 +1,65 @@
+/* PC端图片弹窗样式 */
+.desktop-image-modal .ant-modal-wrap {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.desktop-image-modal .ant-modal {
+  top: auto !important;
+  left: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+  padding-bottom: 0 !important;
+  position: relative !important;
+}
+
+.desktop-image-modal .ant-modal-content {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 移动端图片弹窗样式 */
+.mobile-image-modal .ant-modal-wrap {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 64px 0 0 0 !important; /* 顶部留出标题栏空间 */
+}
+
+.mobile-image-modal .ant-modal {
+  top: auto !important;
+  left: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+  padding-bottom: 0 !important;
+  position: relative !important;
+  width: 100vw !important;
+}
+
+.mobile-image-modal .ant-modal-content {
+  border-radius: 0;
+  width: 100% !important;
+  max-height: calc(100vh - 64px);
+}
+
+.mobile-image-modal .ant-modal-body {
+  padding: 0 !important;
+}
+
+/* 确保图片容器不会溢出 */
+.image-modal-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-modal-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+}

src/components/ImageModal.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Spin } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import './ImageModal.css';
+
+interface ImageModalProps {
+  visible: boolean;
+  imageUrl: string;
+  onClose: () => void;
+}
+
+// 图片缓存
+const imageCache = new Set<string>();
+
+const ImageModal: React.FC<ImageModalProps> = ({ visible, imageUrl, onClose }) => {
+  const [loading, setLoading] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageError, setImageError] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
+
+  // 检测是否为移动端
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  // 预加载图片
+  useEffect(() => {
+    if (visible && imageUrl) {
+      // 如果图片已缓存，直接显示
+      if (imageCache.has(imageUrl)) {
+        setImageLoaded(true);
+        setLoading(false);
+        return;
+      }
+
+      setLoading(true);
+      setImageLoaded(false);
+      setImageError(false);
+
+      const img = new Image();
+      img.onload = () => {
+        imageCache.add(imageUrl);
+        setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+        setImageLoaded(true);
+        setLoading(false);
+      };
+      img.onerror = () => {
+        setImageError(true);
+        setLoading(false);
+      };
+      img.src = imageUrl;
+    }
+  }, [visible, imageUrl]);
+
+  // 重置状态当弹窗关闭时
+  useEffect(() => {
+    if (!visible) {
+      setLoading(false);
+      setImageLoaded(false);
+      setImageError(false);
+      setImageDimensions(null);
+    }
+  }, [visible]);
+
+  // 计算移动端弹窗高度
+  const getMobileModalHeight = () => {
+    if (imageLoaded && imageDimensions) {
+      // 如果图片已加载，根据图片比例自适应高度
+      const availableHeight = window.innerHeight - 64; // 减去标题栏高度
+      const availableWidth = window.innerWidth;
+      
+      // 计算图片按宽度100%显示时的高度
+      const aspectRatio = imageDimensions.height / imageDimensions.width;
+      const calculatedHeight = availableWidth * aspectRatio;
+      
+      // 确保高度不超过可用空间的90%
+      const maxHeight = availableHeight * 0.9;
+      const finalHeight = Math.min(calculatedHeight, maxHeight);
+      
+      return `${finalHeight}px`;
+    }
+    // 图片未加载时，使用默认高度（除标题栏外的33%）
+    return 'calc((100vh - 64px) * 0.33)';
+  };
+
+  const modalStyle = isMobile ? {
+    // 移动端居中显示，不设置top
+    paddingBottom: 0,
+    margin: 0,
+  } : {
+    // PC端不设置top，让centered属性处理居中
+  };
+
+  const modalBodyStyle = isMobile ? {
+    padding: 0,
+    height: getMobileModalHeight(),
+    minHeight: 'calc((100vh - 64px) * 0.33)', // 最小高度为33%
+    maxHeight: 'calc(100vh - 64px)', // 最大高度不超过可视区域
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#000',
+  } : {
+    padding: 0,
+    height: '66vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#000',
+  };
+
+  return (
+    <Modal
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      closable={false}
+      width={isMobile ? '100vw' : '66vw'}
+      style={modalStyle}
+      styles={{
+        body: modalBodyStyle,
+        mask: { backgroundColor: 'rgba(0, 0, 0, 0.8)' },
+      }}
+      centered={true} // 移动端和PC端都居中显示
+      destroyOnHidden
+      wrapClassName={isMobile ? 'mobile-image-modal' : 'desktop-image-modal'}
+    >
+      {/* 自定义关闭按钮 */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 16,
+          right: 16,
+          zIndex: 1000,
+          cursor: 'pointer',
+          color: '#fff',
+          fontSize: 20,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          borderRadius: '50%',
+          width: 32,
+          height: 32,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'all 0.3s',
+        }}
+        onClick={onClose}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+        }}
+      >
+        <CloseOutlined />
+      </div>
+
+      {/* 图片内容 */}
+      <div className="image-modal-container">
+        {loading && (
+          <Spin size="large" style={{ color: '#fff' }} />
+        )}
+        
+        {imageError && (
+          <div style={{ color: '#fff', textAlign: 'center' }}>
+            <div style={{ fontSize: 48, marginBottom: 16 }}>📷</div>
+            <div>图片加载失败</div>
+          </div>
+        )}
+        
+        {imageLoaded && !loading && !imageError && (
+          <img
+            src={imageUrl}
+            alt="预览图片"
+          />
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ImageModal;

src/components/PeopleForm.tsx

@@ -1,16 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Input, Select, InputNumber, Button, message, Row, Col } from 'antd';
+import type { FormInstance } from 'antd';
 import './PeopleForm.css';
 import KeyValueList from './KeyValueList.tsx'
-import { createPeople } from '../apis';
+import { createPeople, type People } from '../apis';
 
 const { TextArea } = Input;
 
 interface PeopleFormProps {
   initialData?: any;
+  // 编辑模式下由父组件控制提交，隐藏内部提交按钮
+  hideSubmitButton?: boolean;
+  // 暴露 AntD Form 实例给父组件，用于在外部触发校验与取值
+  onFormReady?: (form: FormInstance) => void;
 }
 
-const PeopleForm: React.FC<PeopleFormProps> = ({ initialData }) => {
+const PeopleForm: React.FC<PeopleFormProps> = ({ initialData, hideSubmitButton = false, onFormReady }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
 
@@ -24,6 +29,7 @@ const PeopleForm: React.FC<PeopleFormProps> = ({ initialData }) => {
       
       if (initialData.name) formData.name = initialData.name;
       if (initialData.contact) formData.contact = initialData.contact;
+      if (initialData.cover) formData.cover = initialData.cover;
       if (initialData.gender) formData.gender = initialData.gender;
       if (initialData.age) formData.age = initialData.age;
       if (initialData.height) formData.height = initialData.height;
@@ -35,23 +41,31 @@ const PeopleForm: React.FC<PeopleFormProps> = ({ initialData }) => {
       form.setFieldsValue(formData);
       
       // 显示成功消息
-      message.success('已自动填充表单，请检查并确认信息');
+      // message.success('已自动填充表单，请检查并确认信息');
     }
   }, [initialData, form]);
 
+  // 将表单实例暴露给父组件
+  useEffect(() => {
+    onFormReady?.(form);
+    // 仅在首次挂载时调用一次
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const onFinish = async (values: any) => {
     setLoading(true);
     
     try {
-      const peopleData = {
+      const peopleData: People = {
         name: values.name,
+        contact: values.contact || undefined,
         gender: values.gender,
         age: values.age,
         height: values.height || undefined,
         marital_status: values.marital_status || undefined,
         introduction: values.introduction || {},
         match_requirement: values.match_requirement || undefined,
-        contact: values.contact || undefined,
+        cover: values.cover || undefined,
       };
 
       console.log('提交人员数据:', peopleData);
@@ -105,6 +119,14 @@ const PeopleForm: React.FC<PeopleFormProps> = ({ initialData }) => {
           </Col>
         </Row>
 
+        <Row gutter={[12, 12]}>
+          <Col xs={24}>
+            <Form.Item name="cover" label="人物封面">
+              <Input placeholder="请输入图片链接（可留空）" />
+            </Form.Item>
+          </Col>
+        </Row>
+
         <Row gutter={[12, 12]}>
           <Col xs={24} md={6}>
             <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}> 
@@ -151,11 +173,13 @@ const PeopleForm: React.FC<PeopleFormProps> = ({ initialData }) => {
           <TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="例如：性格开朗、三观一致等" />
         </Form.Item>
 
+        {!hideSubmitButton && (
           <Form.Item>
             <Button type="primary" htmlType="submit" loading={loading} block>
               {loading ? '提交中...' : '提交'}
             </Button>
           </Form.Item>
+        )}
       </Form>
     </div>
   );

src/components/ResourceList.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { Layout, Typography, Table, Grid, InputNumber, Button, Space, Tag, message, Modal, Dropdown, Input } from 'antd';
+import { Layout, Typography, Table, Grid, InputNumber, Button, Space, Tag, message, Modal, Dropdown, Input, Select } from 'antd';
+import type { FormInstance } from 'antd';
 import type { ColumnsType, ColumnType } from 'antd/es/table';
 import type { FilterDropdownProps } from 'antd/es/table/interface';
 import type { TableProps } from 'antd';
-import { SearchOutlined, EllipsisOutlined, DeleteOutlined, ManOutlined, WomanOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { SearchOutlined, EllipsisOutlined, DeleteOutlined, ManOutlined, WomanOutlined, ExclamationCircleOutlined, PictureOutlined, EditOutlined } from '@ant-design/icons';
 import './MainContent.css';
 import InputDrawer from './InputDrawer.tsx';
+import ImageModal from './ImageModal.tsx';
+import PeopleForm from './PeopleForm.tsx';
 import { getPeoples } from '../apis';
 import type { People } from '../apis';
-import { deletePeople } from '../apis/people';
+import { deletePeople, updatePeople } from '../apis/people';
 
 const { Content } = Layout;
 
@@ -28,6 +31,7 @@ function transformPeoples(list: People[] = []): Resource[] {
     marital_status: person.marital_status,
     introduction: person.introduction || {},
     contact: person.contact || '',
+    cover: person.cover || '',
   }));
 }
 
@@ -473,7 +477,7 @@ function buildNumberRangeFilter(dataIndex: keyof Resource, label: string): Colum
                 onClick={() => {
                   const key = `${localMin ?? ''}:${localMax ?? ''}`;
                   setSelectedKeys?.([key]);
-                  confirm?.();
+                  confirm?.({ closeDropdown: true });
                 }}
               >
                 筛选
@@ -481,8 +485,11 @@ function buildNumberRangeFilter(dataIndex: keyof Resource, label: string): Colum
               <Button
                 size="small"
                 onClick={() => {
+                  setLocalMin(undefined);
+                  setLocalMax(undefined);
                   setSelectedKeys?.([]);
                   clearFilters?.();
+                  confirm?.({ closeDropdown: true });
                 }}
               >
                 重置
@@ -505,6 +512,64 @@ function buildNumberRangeFilter(dataIndex: keyof Resource, label: string): Colum
   } as ColumnType<Resource>;
 }
 
+// 枚举筛选下拉（用于性别等枚举类列）
+function buildEnumFilter(dataIndex: keyof Resource, label: string, options: Array<{ label: string; value: string }>): ColumnType<Resource> {
+  return {
+    title: label,
+    dataIndex,
+    key: String(dataIndex),
+    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }: FilterDropdownProps) => {
+      const [val, setVal] = React.useState<string | undefined>(
+        (selectedKeys && selectedKeys[0] ? String(selectedKeys[0]) : undefined)
+      );
+      return (
+        <div className="byte-table-custom-filter" style={{ padding: 8 }}>
+          <Space direction="vertical" style={{ width: 200 }}>
+            <Select
+              allowClear
+              placeholder={`请选择${label}`}
+              value={val}
+              onChange={(v) => setVal(v)}
+              options={options}
+              style={{ width: '100%' }}
+            />
+            <Space>
+              <Button
+                type="primary"
+                size="small"
+                icon={<SearchOutlined />}
+                onClick={() => {
+                  setSelectedKeys?.(val ? [val] : []);
+                  confirm?.({ closeDropdown: true });
+                }}
+              >
+                筛选
+              </Button>
+              <Button
+                size="small"
+                onClick={() => {
+                  setVal(undefined);
+                  setSelectedKeys?.([]);
+                  clearFilters?.();
+                  confirm?.({ closeDropdown: true });
+                }}
+              >
+                重置
+              </Button>
+            </Space>
+          </Space>
+        </div>
+      );
+    },
+    onFilter: (filterValue: React.Key | boolean, record: Resource) =>
+      String((record as any)[dataIndex]) === String(filterValue),
+    render: (g: string) => {
+      const color = g === '男' ? 'blue' : g === '女' ? 'magenta' : 'default';
+      return <Tag color={color}>{g}</Tag>;
+    },
+  } as ColumnType<Resource>;
+}
+
 type Props = { inputOpen?: boolean; onCloseInput?: () => void; containerEl?: HTMLElement | null };
 
 const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, containerEl }) => {
@@ -517,6 +582,17 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
   const [swipedRowId, setSwipedRowId] = React.useState<string | null>(null);
   const touchStartRef = React.useRef<{ x: number; y: number } | null>(null);
   
+  // 图片弹窗状态
+  const [imageModalVisible, setImageModalVisible] = React.useState(false);
+  const [currentImageUrl, setCurrentImageUrl] = React.useState('');
+  // 编辑弹窗状态（仅桌面端）
+  const [editModalVisible, setEditModalVisible] = React.useState(false);
+  const [editingRecord, setEditingRecord] = React.useState<Resource | null>(null);
+  const editFormRef = React.useRef<FormInstance | null>(null);
+
+  // 移动端编辑模式状态
+  const [mobileEditing, setMobileEditing] = React.useState(false);
+
   const handleTableChange: TableProps<Resource>['onChange'] = (pg) => {
     setPagination({ current: pg?.current ?? 1, pageSize: pg?.pageSize ?? 10 });
   };
@@ -589,17 +665,44 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
       },
       onFilter: (filterValue: React.Key | boolean, record: Resource) => String(record.name).includes(String(filterValue)),
       render: (text: string, record: Resource) => {
-        if (!isMobile) return <span style={{ fontWeight: 600 }}>{text}</span>;
+        // 图片图标逻辑
+        const hasCover = record.cover && record.cover.trim() !== '';
+        const pictureIcon = (
+          <PictureOutlined 
+            style={{ 
+              color: hasCover ? '#1677ff' : '#9ca3af',
+              cursor: hasCover ? 'pointer' : 'default'
+            }}
+            onClick={hasCover ? () => {
+              setCurrentImageUrl(record.cover);
+              setImageModalVisible(true);
+            } : undefined}
+          />
+        );
+
+        if (!isMobile) {
+          // 桌面端：姓名后面跟图片图标
+          return (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ fontWeight: 600 }}>{text}</span>
+              {pictureIcon}
+            </span>
+          );
+        }
+
+        // 移动端：姓名 + 性别图标 + 图片图标
         const g = record.gender;
-        const icon = g === '男'
+        const genderIcon = g === '男'
           ? <ManOutlined style={{ color: '#1677ff' }} />
           : g === '女'
             ? <WomanOutlined style={{ color: '#eb2f96' }} />
             : <ExclamationCircleOutlined style={{ color: '#9ca3af' }} />;
+        
         return (
           <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
             <span style={{ fontWeight: 600 }}>{text}</span>
-            {icon}
+            {genderIcon}
+            {pictureIcon}
           </span>
         );
       },
@@ -607,21 +710,11 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
     // 非移动端显示更多列
     ...(!isMobile
       ? [
-          {
-            title: '性别',
-            dataIndex: 'gender',
-            key: 'gender',
-            filters: [
-              { text: '男', value: '男' },
-              { text: '女', value: '女' },
-              { text: '其他/保密', value: '其他/保密' },
-            ],
-            onFilter: (value: React.Key | boolean, record: Resource) => String(record.gender) === String(value),
-            render: (g: string) => {
-              const color = g === '男' ? 'blue' : g === '女' ? 'magenta' : 'default';
-              return <Tag color={color}>{g}</Tag>;
-            },
-          },
+          buildEnumFilter('gender', '性别', [
+            { label: '男', value: '男' },
+            { label: '女', value: '女' },
+            { label: '其他/保密', value: '其他/保密' },
+          ]),
           buildNumberRangeFilter('age', '年龄'),
           buildNumberRangeFilter('height', '身高'),
           {
@@ -659,13 +752,55 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
             <span style={{ flex: 1 }}>{v ? v : '-'}</span>
             {swipedRowId === record.id && (
+              <div style={{ display: 'inline-flex', gap: 8 }}>
+                <Button
+                  type="primary"
+                  size="small"
+                  icon={
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 24,
+                        height: 24,
+                        borderRadius: 4,
+                        backgroundColor: '#1677ff',
+                        color: '#fff',
+                      }}
+                    >
+                      <EditOutlined style={{ fontSize: 12 }} />
+                    </span>
+                  }
+                  onClick={() => {
+                    setEditingRecord(record);
+                    setMobileEditing(true);
+                    setSwipedRowId(null);
+                  }}
+                />
                 <Button
                   type="primary"
                   danger
                   size="small"
-                icon={<DeleteOutlined />}
+                  icon={
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 24,
+                        height: 24,
+                        borderRadius: 4,
+                        backgroundColor: '#f5222d',
+                        color: '#fff',
+                      }}
+                    >
+                      <DeleteOutlined style={{ fontSize: 12 }} />
+                    </span>
+                  }
                   onClick={() => confirmDelete(record.id)}
                 />
+              </div>
             )}
           </div>
         );
@@ -682,6 +817,30 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
                   trigger={["click"]}
                   menu={{
                     items: [
+                      ...(!isMobile
+                        ? [
+                            {
+                              key: 'edit',
+                              label: '编辑',
+                              icon: (
+                                <span
+                                  style={{
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 18,
+                                    height: 18,
+                                    borderRadius: 4,
+                                    backgroundColor: '#1677ff',
+                                    color: '#fff',
+                                  }}
+                                >
+                                  <EditOutlined style={{ fontSize: 12 }} />
+                                </span>
+                              ),
+                            },
+                          ]
+                        : []),
                       {
                         key: 'delete',
                         label: '删除',
@@ -705,6 +864,10 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
                     ],
                     onClick: ({ key }) => {
                       if (key === 'delete') confirmDelete(record.id);
+                      if (key === 'edit' && !isMobile) {
+                        setEditingRecord(record);
+                        setEditModalVisible(true);
+                      }
                     },
                   }}
                 >
@@ -722,11 +885,80 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
           资源列表
         </Typography.Title>
 
+        {isMobile && mobileEditing && (
+          <div>
+            <Typography.Title level={4} style={{ color: 'var(--text-primary)' }}>
+              编辑资源
+            </Typography.Title>
+            <PeopleForm
+              initialData={editingRecord || undefined}
+              hideSubmitButton
+              onFormReady={(f) => (editFormRef.current = f)}
+            />
+            <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
+              <Button
+                type="primary"
+                onClick={async () => {
+                  try {
+                    const form = editFormRef.current;
+                    if (!form) {
+                      message.error('表单未就绪');
+                      return;
+                    }
+                    const values = await form.validateFields();
+                    const peopleData: People = {
+                      name: values.name,
+                      contact: values.contact || undefined,
+                      gender: values.gender,
+                      age: values.age,
+                      height: values.height || undefined,
+                      marital_status: values.marital_status || undefined,
+                      introduction: values.introduction || {},
+                      match_requirement: values.match_requirement || undefined,
+                      cover: values.cover || undefined,
+                    };
+                    if (!editingRecord) {
+                      message.error('缺少当前编辑的人员信息');
+                      return;
+                    }
+                    const res = await updatePeople(editingRecord.id, peopleData);
+                    if (res.error_code === 0) {
+                      message.success('更新成功');
+                      setMobileEditing(false);
+                      setEditingRecord(null);
+                      await reloadResources();
+                    } else {
+                      message.error(res.error_info || '更新失败');
+                    }
+                  } catch (err: any) {
+                    if (err?.errorFields) {
+                      message.error('请完善表单后再保存');
+                    } else {
+                      message.error('更新失败');
+                    }
+                  }
+                }}
+              >
+                保存
+              </Button>
+              <Button
+                onClick={() => {
+                  setMobileEditing(false);
+                  setEditingRecord(null);
+                }}
+              >
+                取消
+              </Button>
+            </div>
+          </div>
+        )}
+
         <Table<Resource>
           rowKey="id"
           loading={loading}
           columns={columns}
           dataSource={data}
+          style={{ display: isMobile && mobileEditing ? 'none' : undefined }}
           onRow={(record) =>
             isMobile
               ? {
@@ -820,6 +1052,79 @@ const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, contai
         showUpload={false}
         mode={'search'}
       />
+      
+      {/* 图片预览弹窗 */}
+      <ImageModal
+        visible={imageModalVisible}
+        imageUrl={currentImageUrl}
+        onClose={() => {
+          setImageModalVisible(false);
+          setCurrentImageUrl('');
+        }}
+      />
+
+      {/* 编辑弹窗，仅桌面端显示 */}
+      {!isMobile && (
+        <Modal
+          open={editModalVisible}
+          title="编辑"
+          width="50%"
+          style={{ minWidth: 768 }}
+          onCancel={() => {
+            setEditModalVisible(false);
+            setEditingRecord(null);
+          }}
+          onOk={async () => {
+            try {
+              const form = editFormRef.current;
+              if (!form) {
+                message.error('表单未就绪');
+                return;
+              }
+              const values = await form.validateFields();
+              const peopleData: People = {
+                name: values.name,
+                contact: values.contact || undefined,
+                gender: values.gender,
+                age: values.age,
+                height: values.height || undefined,
+                marital_status: values.marital_status || undefined,
+                introduction: values.introduction || {},
+                match_requirement: values.match_requirement || undefined,
+                cover: values.cover || undefined,
+              };
+              if (!editingRecord) {
+                message.error('缺少当前编辑的人员信息');
+                return;
+              }
+              const res = await updatePeople(editingRecord.id, peopleData);
+              if (res.error_code === 0) {
+                message.success('更新成功');
+                setEditModalVisible(false);
+                setEditingRecord(null);
+                await reloadResources();
+              } else {
+                message.error(res.error_info || '更新失败');
+              }
+            } catch (err: any) {
+              if (err?.errorFields) {
+                message.error('请完善表单后再确认');
+              } else {
+                message.error('更新失败');
+              }
+            }
+          }}
+          destroyOnHidden
+          okText="确认"
+          cancelText="取消"
+        >
+          <PeopleForm
+            initialData={editingRecord || undefined}
+            hideSubmitButton
+            onFormReady={(f) => (editFormRef.current = f)}
+          />
+        </Modal>
+      )}
     </Content>
   );
 };

src/main.tsx

@@ -8,7 +8,12 @@ import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter
+      future={{
+        v7_relativeSplatPath: true,
+        v7_startTransition: true,
+      }}
+    >
       <App />
     </BrowserRouter>
   </StrictMode>,