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

frontend/src/pages/CustomersPage.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Table, Button, Modal, Form, Input, message, Space, Tag, Card, Row, Col, Statistic, Image } from 'antd'
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, HomeOutlined, BankOutlined } from '@ant-design/icons'
 import type { ColumnsType } from 'antd/es/table'
 import FileUpload from '../components/FileUpload'
+import useFormDraft from '../hooks/useFormDraft'
 
 interface Contact {
   name: string
@@ -43,6 +44,16 @@ const CustomerPage: React.FC = () => {
   const [searchText, setSearchText] = useState('')
   const [form] = Form.useForm()
 
+  // 表单草稿保护
+  const { save: saveDraft, restore: restoreDraft, clear: clearDraft, hasDraft } = useFormDraft({
+    form,
+    storageKey: 'customer_create',
+  })
+
+  const handleFormChange = useCallback(() => {
+    saveDraft()
+  }, [saveDraft])
+
   const fetchCustomers = async () => {
     setLoading(true)
     try {
@@ -160,6 +171,7 @@ const CustomerPage: React.FC = () => {
       const data = await response.json()
       if (data.success) {
         message.success(editingCustomer ? '更新成功' : '创建成功')
+        clearDraft()
         setModalVisible(false)
         form.resetFields()
         setEditingCustomer(null)
@@ -206,6 +218,28 @@ const CustomerPage: React.FC = () => {
       payment_infos: []
     })
     setModalVisible(true)
+    // 检查是否有草稿，提示用户是否恢复
+    setTimeout(() => {
+      if (hasDraft()) {
+        Modal.confirm({
+          title: '发现未完成的草稿',
+          content: '检测到上次未提交的客户信息，是否恢复？',
+          okText: '恢复草稿',
+          cancelText: '重新填写',
+          onOk: () => {
+            restoreDraft()
+          },
+          onCancel: () => {
+            clearDraft()
+            form.resetFields()
+            form.setFieldsValue({ 
+              contacts: [{ name: '', position: '', phone: '', is_primary: true }],
+              payment_infos: []
+            })
+          },
+        })
+      }
+    }, 0)
   }
 
   return (
@@ -230,11 +264,31 @@ const CustomerPage: React.FC = () => {
       <Modal 
         title={editingCustomer ? '编辑客户' : '新增客户'} 
         open={modalVisible} 
-        onCancel={() => { setModalVisible(false); form.resetFields(); setEditingCustomer(null) }} 
+        onCancel={() => {
+          if (form.isFieldsTouched()) {
+            Modal.confirm({
+              title: '确认关闭',
+              content: '表单数据尚未保存，关闭后可通过草稿恢复。确定关闭吗？',
+              okText: '关闭',
+              cancelText: '继续编辑',
+              onOk: () => {
+                saveDraft()
+                setModalVisible(false)
+                form.resetFields()
+                setEditingCustomer(null)
+              },
+            })
+          } else {
+            setModalVisible(false)
+            form.resetFields()
+            setEditingCustomer(null)
+          }
+        }} 
         onOk={() => form.submit()} 
         width={800}
+        maskClosable={false}
       >
-        <Form form={form} layout="vertical" onFinish={handleSubmit}>
+        <Form form={form} layout="vertical" onFinish={handleSubmit} onValuesChange={handleFormChange}>
           <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
             <Input placeholder="客户名称" />
           </Form.Item>