备份：大改造前的完整版本 - 修复合同细节/付款节点/文件上传/施工管理/项目保存等BUG

frontend/src/pages/ProfilePage.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Card, Typography, Form, Input, Button, Avatar, Space, Upload, message, Row, Col, Modal } from 'antd';
 import { UserOutlined, LockOutlined, PhoneOutlined, MailOutlined, UploadOutlined } from '@ant-design/icons';
 import { useAuthStore } from '../store/authStore';
+import useFormDraft from '../hooks/useFormDraft';
 
 const { Title, Paragraph } = Typography;
 
@@ -15,6 +16,50 @@ const ProfilePage: React.FC = () => {
   const [passportUrl, setPassportUrl] = useState<string | undefined>(user?.passport);
   const [driverLicenseUrl, setDriverLicenseUrl] = useState<string | undefined>(user?.driverLicense);
 
+  // 表单草稿保护
+  const { save: saveDraft, restore: restoreDraft, clear: clearDraft, hasDraft } = useFormDraft({
+    form,
+    storageKey: 'profile_edit',
+    onRestore: (data) => {
+      if (data.avatarUrl !== undefined) setAvatarUrl(data.avatarUrl)
+      if (data.passportUrl !== undefined) setPassportUrl(data.passportUrl)
+      if (data.driverLicenseUrl !== undefined) setDriverLicenseUrl(data.driverLicenseUrl)
+    },
+  })
+
+  const handleFormChange = useCallback(() => {
+    saveDraft({ avatarUrl, passportUrl, driverLicenseUrl })
+  }, [saveDraft, avatarUrl, passportUrl, driverLicenseUrl])
+
+  // 页面级 beforeunload 保护
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (form.isFieldsTouched()) {
+        e.preventDefault()
+      }
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [form])
+
+  // 页面加载时检查草稿
+  useEffect(() => {
+    if (hasDraft()) {
+      Modal.confirm({
+        title: '发现未完成的草稿',
+        content: '检测到上次未保存的个人信息修改，是否恢复？',
+        okText: '恢复草稿',
+        cancelText: '放弃草稿',
+        onOk: () => {
+          restoreDraft()
+        },
+        onCancel: () => {
+          clearDraft()
+        },
+      })
+    }
+  }, [])
+
   useEffect(() => {
     if (user) {
       form.setFieldsValue({
@@ -158,7 +203,7 @@ const ProfilePage: React.FC = () => {
           </Space>
         </div>
 
-        <Form form={form} layout="vertical" onFinish={handleSubmit}>
+        <Form form={form} layout="vertical" onFinish={handleSubmit} onValuesChange={handleFormChange}>
           <Row gutter={16}>
             <Col span={12}>
               <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>