Add unsaved changes confirmation dialog in AssistantsPage to enhance user experience when opening debug window

web/pages/Assistants.tsx

@@ -107,6 +107,7 @@ export const AssistantsPage: React.FC = () => {
   const [saveLoading, setSaveLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [persistedAssistantSnapshotById, setPersistedAssistantSnapshotById] = useState<Record<string, string>>({});
+  const [unsavedDebugConfirmOpen, setUnsavedDebugConfirmOpen] = useState(false);
 
   const selectedAssistant = assistants.find(a => a.id === selectedId) || null;
   const serializeAssistant = (assistant: Assistant) => JSON.stringify(assistant);
@@ -262,12 +263,17 @@ export const AssistantsPage: React.FC = () => {
   const handleOpenDebug = () => {
     if (!selectedAssistant) return;
     if (selectedAssistantHasUnsavedChanges) {
-      const proceed = window.confirm('当前助手配置尚未保存。是否继续打开调试窗口？');
+      setUnsavedDebugConfirmOpen(true);
-      if (!proceed) return;
+      return;
     }
     setDebugOpen(true);
   };
 
+  const handleConfirmOpenDebug = () => {
+    setUnsavedDebugConfirmOpen(false);
+    setDebugOpen(true);
+  };
+
   const toggleTool = (toolId: string) => {
     if (!selectedAssistant) return;
     const currentTools = selectedAssistant.tools || [];
@@ -1199,6 +1205,36 @@ export const AssistantsPage: React.FC = () => {
          />
       )}
 
+      <Dialog
+        isOpen={unsavedDebugConfirmOpen}
+        onClose={() => setUnsavedDebugConfirmOpen(false)}
+        title="未保存配置提醒"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setUnsavedDebugConfirmOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirmOpenDebug}>
+              继续调试
+            </Button>
+          </>
+        }
+      >
+        <div className="flex items-center space-x-4">
+          <div className="p-3 bg-amber-500/10 rounded-full">
+            <AlertTriangle className="h-6 w-6 text-amber-400" />
+          </div>
+          <div>
+            <p className="text-sm text-foreground text-white">
+              当前助手配置尚未保存，仍要打开调试窗口吗？
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              建议先保存配置，以确保调试使用最新参数。
+            </p>
+          </div>
+        </div>
+      </Dialog>
+
       {/* Delete Confirmation Dialog */}
       <Dialog 
         isOpen={!!deleteId}