修复开关状态持久化，编辑主机适配密钥认证

web/src/pages/MainPage.tsx

@@ -63,7 +63,10 @@ function MainPage() {
   const [isAuthChecking, setIsAuthChecking] = useState(true); // 新增：认证检查状态
   const [isPlaybookDialogOpen, setIsPlaybookDialogOpen] = useState(false);
   const [playbookTarget, setPlaybookTarget] = useState<'selected' | 'all' | null>(null);
-  const [useKeyAuth, setUseKeyAuth] = useState(false);
+  const [useKeyAuth, setUseKeyAuth] = useState(() => {
+    const saved = localStorage.getItem('useKeyAuth');
+    return saved ? JSON.parse(saved) : false;
+  });
 
   const navigate = useNavigate();
   const { isAuthenticated } = useAuth();
@@ -101,6 +104,11 @@ function MainPage() {
     fetchHosts();
   }, []);
 
+  // 持久化密钥认证开关状态
+  useEffect(() => {
+    localStorage.setItem('useKeyAuth', JSON.stringify(useKeyAuth));
+  }, [useKeyAuth]);
+
   const fetchHosts = async () => {
     setIsLoadingHosts(true);
     try {
@@ -194,7 +202,12 @@ function MainPage() {
   };
 
   const handleEditHost = (host: Host) => {
-    setEditingHost(host);
+    // 确保编辑时有默认的认证方式
+    const hostWithDefaults = {
+      ...host,
+      auth_method: host.auth_method || 'password'
+    };
+    setEditingHost(hostWithDefaults);
   };
 
   const handleSaveEdit = async (editedHost: Host) => {
@@ -540,10 +553,19 @@ function MainPage() {
                       </DialogFooter>
                     </DialogContent>
                   </Dialog>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
                       <div className="flex items-center space-x-2">
                         <Switch id="key-auth-switch" checked={useKeyAuth} onCheckedChange={setUseKeyAuth} />
-                    <Label htmlFor="key-auth-switch">使用密钥认证</Label>
+                        <Label htmlFor="key-auth-switch" className="cursor-pointer">
+                          {useKeyAuth ? '密钥认证模式' : '密码认证模式'}
+                        </Label>
                       </div>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{useKeyAuth ? '新添加的主机将使用SSH密钥认证' : '新添加的主机将使用密码认证'}</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </div>
                 <div className="flex gap-2">
                   <Tooltip>
@@ -684,10 +706,23 @@ function MainPage() {
                                       <Label htmlFor="edit-port" className="text-right">端口</Label>
                                       <Input id="edit-port" type="number" value={editingHost.port} onChange={(e) => setEditingHost({ ...editingHost, port: parseInt(e.target.value, 10) || 22 })} className="col-span-3" />
                                     </div>
+                                    <div className="grid grid-cols-4 items-center gap-4">
+                                      <Label htmlFor="edit-auth-method" className="text-right">认证方式</Label>
+                                      <div className="col-span-3 flex items-center space-x-2">
+                                        <Switch
+                                          id="edit-auth-method"
+                                          checked={editingHost.auth_method === 'key'}
+                                          onCheckedChange={(checked) => setEditingHost({ ...editingHost, auth_method: checked ? 'key' : 'password' })}
+                                        />
+                                        <Label htmlFor="edit-auth-method">{editingHost.auth_method === 'key' ? '密钥认证' : '密码认证'}</Label>
+                                      </div>
+                                    </div>
+                                    {editingHost.auth_method === 'password' && (
                                       <div className="grid grid-cols-4 items-center gap-4">
                                         <Label htmlFor="edit-password" className="text-right">密码</Label>
                                         <Input id="edit-password" type="password" placeholder="留空则不修改" onChange={(e) => setEditingHost({ ...editingHost, password: e.target.value })} className="col-span-3" />
                                       </div>
+                                    )}
                                   </div>
                                 )}
                                 <DialogFooter>