From 46bbfe6223b85bc7096e1cb1474813cbdbe27b16 Mon Sep 17 00:00:00 2001
From: nanako <469449812@qq.com>
Date: Sun, 9 Nov 2025 02:16:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=99=9A=E6=8B=9F=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=92=8C=E6=8F=90=E4=BE=9B=E5=95=86=E7=9A=84=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=92=8C=E6=8F=90=E4=BE=9B=E5=95=86=E7=9A=84=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E4=B8=8E=E7=BC=96=E8=BE=91=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ui/Modal.jsx          | 63 +++++++++++++++++++
 .../providers/components/ProviderList.jsx     | 39 +++++++-----
 .../src/features/virtual-models/index.jsx     | 37 ++++++++---
 3 files changed, 115 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/ui/Modal.jsx

diff --git a/frontend/src/components/ui/Modal.jsx b/frontend/src/components/ui/Modal.jsx
new file mode 100644
index 0000000..34777be
--- /dev/null
+++ b/frontend/src/components/ui/Modal.jsx
@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+
+const Modal = ({ isOpen, onClose, title, children, size = 'md' }) => {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-6xl'
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* 遮罩层 */}
+      <div 
+        className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
+        onClick={onClose}
+      />
+      
+      {/* 弹窗内容 */}
+      <div className={`relative bg-white rounded-lg shadow-xl ${sizeClasses[size]} w-full mx-4 max-h-[90vh] flex flex-col`}>
+        {/* 头部 */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        {/* 内容区域 */}
+        <div className="p-6 overflow-y-auto flex-1">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
\ No newline at end of file
diff --git a/frontend/src/features/providers/components/ProviderList.jsx b/frontend/src/features/providers/components/ProviderList.jsx
index f0a9768..57df11b 100644
--- a/frontend/src/features/providers/components/ProviderList.jsx
+++ b/frontend/src/features/providers/components/ProviderList.jsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { getProviders, createProvider, updateProvider, deleteProvider } from '../api';
 import ProviderForm from './ProviderForm';
+import Modal from '../../../components/ui/Modal';
 
 const ProviderList = () => {
   const [providers, setProviders] = useState([]);
@@ -75,32 +76,35 @@ const ProviderList = () => {
     );
   }
 
-  if (showCreateForm) {
-    return (
-      <div className="bg-white p-6 rounded-lg shadow">
-        <h3 className="text-lg font-medium mb-4">创建新提供商</h3>
+  return (
+    <>
+      {/* 创建提供商弹窗 */}
+      <Modal
+        isOpen={showCreateForm}
+        onClose={() => setShowCreateForm(false)}
+        title="创建新提供商"
+        size="md"
+      >
         <ProviderForm
           onSave={handleCreate}
           onCancel={() => setShowCreateForm(false)}
         />
-      </div>
-    );
-  }
+      </Modal>
 
-  if (editingProvider) {
-    return (
-      <div className="bg-white p-6 rounded-lg shadow">
-        <h3 className="text-lg font-medium mb-4">编辑提供商</h3>
+      {/* 编辑提供商弹窗 */}
+      <Modal
+        isOpen={!!editingProvider}
+        onClose={() => setEditingProvider(null)}
+        title="编辑提供商"
+        size="md"
+      >
         <ProviderForm
           provider={editingProvider}
           onSave={handleUpdate}
           onCancel={() => setEditingProvider(null)}
         />
-      </div>
-    );
-  }
+      </Modal>
 
-  return (
     <div className="space-y-4">
       <div className="flex justify-end">
         <button
@@ -167,7 +171,8 @@ const ProviderList = () => {
       </table>
       </div>
     </div>
+    </>
   );
-};
+}
 
 export default ProviderList;
\ No newline at end of file
diff --git a/frontend/src/features/virtual-models/index.jsx b/frontend/src/features/virtual-models/index.jsx
index 7590104..b840acd 100644
--- a/frontend/src/features/virtual-models/index.jsx
+++ b/frontend/src/features/virtual-models/index.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import VirtualModelList from './components/VirtualModelList';
 import VirtualModelForm from './components/VirtualModelForm';
 import { createVirtualModel, updateVirtualModel } from './api';
+import Modal from '../../components/ui/Modal';
 
 const VirtualModelsPage = () => {
   const [editingModel, setEditingModel] = useState(null);
@@ -36,6 +37,34 @@ const VirtualModelsPage = () => {
 
   return (
     <div>
+      {/* 创建虚拟模型弹窗 */}
+      <Modal
+        isOpen={isCreating}
+        onClose={handleCancel}
+        title="新建虚拟模型"
+        size="lg"
+      >
+        <VirtualModelForm
+          model={null}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
+      </Modal>
+
+      {/* 编辑虚拟模型弹窗 */}
+      <Modal
+        isOpen={!!editingModel}
+        onClose={handleCancel}
+        title="编辑虚拟模型"
+        size="lg"
+      >
+        <VirtualModelForm
+          model={editingModel}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
+      </Modal>
+
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-xl font-semibold">虚拟模型管理</h2>
         <button
@@ -45,13 +74,7 @@ const VirtualModelsPage = () => {
           新建虚拟模型
         </button>
       </div>
-      {(isCreating || editingModel) && (
-        <VirtualModelForm
-          model={editingModel}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      )}
+      
       <VirtualModelList key={key} onEdit={handleEdit} />
     </div>
   );