Please provide the specific file changes or a description of the modifications you have made so I can generate the commit message for you.

2026-05-07 10:09:40 +08:00
parent 165cc0e35b
commit f24d0f69ed
19 changed files with 1757 additions and 367 deletions
@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react'
-import type { Connection, ConnectionCreateRequest } from '../types'
+import type {
+  Connection,
+  ConnectionCreateRequest,
+  ConnectionModalSubmitPayload,
+  SessionTreeFolderOption,
+} from '../types'
 import Modal from './Modal'

 const emptyForm: ConnectionCreateRequest = {
@@ -18,15 +23,20 @@ const emptyForm: ConnectionCreateRequest = {
 export default function ConnectionModal({
  open,
  connection,
+  folderOptions,
+  initialTargetFolderId,
  onClose,
  onSubmit,
 }: {
  open: boolean
  connection?: Connection | null
+  folderOptions: SessionTreeFolderOption[]
+  initialTargetFolderId: string | null
  onClose: () => void
-  onSubmit: (payload: ConnectionCreateRequest) => Promise<void>
+  onSubmit: (payload: ConnectionModalSubmitPayload) => Promise<void>
 }) {
  const [form, setForm] = useState<ConnectionCreateRequest>(emptyForm)
+  const [targetFolderId, setTargetFolderId] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

@@ -48,8 +58,9 @@ export default function ConnectionModal({
    } else {
      setForm(emptyForm)
    }
+    setTargetFolderId(initialTargetFolderId)
    setError(null)
-  }, [connection, open])
+  }, [connection, initialTargetFolderId, open])

  if (!open) return null

@@ -63,8 +74,8 @@ export default function ConnectionModal({
      await onSubmit({
        ...form,
        port: Number(form.port || 22),
+        targetFolderId,
      })
-      onClose()
    } catch (err) {
      const message =
        (err as { response?: { data?: { message?: string; error?: string } } }).response?.data?.message || '保存连接失败'
@@ -97,38 +108,79 @@ export default function ConnectionModal({
      <div className="grid gap-4 md:grid-cols-2">
        <label className="space-y-2">
          <span className="text-sm text-slate-300">连接名称</span>
-          <input className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.name} onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))} />
+          <input
+            className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
+            placeholder="例如：prod-web-01"
+            value={form.name}
+            onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+          />
        </label>
        <label className="space-y-2">
-          <span className="text-sm text-slate-300">主机 IP</span>
-          <input className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.host} onChange={(e) => setForm((prev) => ({ ...prev, host: e.target.value }))} />
-        </label>
-        <label className="space-y-2">
-          <span className="text-sm text-slate-300">端口</span>
-          <input type="number" className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.port ?? 22} onChange={(e) => setForm((prev) => ({ ...prev, port: Number(e.target.value) }))} />
-        </label>
-        <label className="space-y-2">
-          <span className="text-sm text-slate-300">用户名</span>
-          <input className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.username} onChange={(e) => setForm((prev) => ({ ...prev, username: e.target.value }))} />
+          <span className="text-sm text-slate-300">分组 / 父文件夹</span>
+          <select
+            className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
+            value={targetFolderId ?? '__ROOT__'}
+            onChange={(event) => setTargetFolderId(event.target.value === '__ROOT__' ? null : event.target.value)}
+          >
+            <option value="__ROOT__">根目录</option>
+            {folderOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {`${'— '.repeat(option.depth)}${option.name}`}
+              </option>
+            ))}
+          </select>
        </label>
      </div>

-      <div className="mt-5 space-y-4 border-t border-slate-800 pt-5">
+      <div className="mt-4 grid gap-4 md:grid-cols-[minmax(0,1.4fr)_120px_minmax(0,1fr)]">
+        <label className="space-y-2">
+          <span className="text-sm text-slate-300">主机 IP</span>
+          <input
+            className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
+            value={form.host}
+            onChange={(e) => setForm((prev) => ({ ...prev, host: e.target.value }))}
+          />
+        </label>
+        <label className="space-y-2">
+          <span className="text-sm text-slate-300">端口</span>
+          <input
+            type="number"
+            className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
+            value={form.port ?? 22}
+            onChange={(e) => setForm((prev) => ({ ...prev, port: Number(e.target.value) }))}
+          />
+        </label>
+        <label className="space-y-2">
+          <span className="text-sm text-slate-300">用户名</span>
+          <input
+            className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
+            value={form.username}
+            onChange={(e) => setForm((prev) => ({ ...prev, username: e.target.value }))}
+          />
+        </label>
+      </div>
+
+      <div className="mt-6 rounded-[28px] border border-slate-800 bg-slate-950/40 p-5">
+        <div className="mb-4">
+          <div className="text-sm font-medium text-slate-100">认证方式</div>
+          <div className="mt-1 text-xs text-slate-500">保留现有密码、私钥和一键免密部署能力。</div>
+        </div>
+
        <div className="flex flex-wrap gap-3">
          <button
-            className={`rounded-xl border px-4 py-2 text-sm ${isPassword ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
+            className={`rounded-2xl border px-4 py-2 text-sm ${isPassword ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
            onClick={() => setForm((prev) => ({ ...prev, authType: 'PASSWORD', setupMode: prev.setupMode === 'PASSWORD_BOOTSTRAP' ? 'PASSWORD_BOOTSTRAP' : 'NONE' }))}
          >
            密码认证
          </button>
          <button
-            className={`rounded-xl border px-4 py-2 text-sm ${form.authType === 'PRIVATE_KEY' ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
+            className={`rounded-2xl border px-4 py-2 text-sm ${form.authType === 'PRIVATE_KEY' ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
            onClick={() => setForm((prev) => ({ ...prev, authType: 'PRIVATE_KEY', setupMode: 'NONE' }))}
          >
            私钥认证
          </button>
          <button
-            className={`rounded-xl border px-4 py-2 text-sm ${useBootstrap ? 'border-emerald-500 bg-emerald-500/10 text-emerald-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
+            className={`rounded-2xl border px-4 py-2 text-sm ${useBootstrap ? 'border-emerald-500 bg-emerald-500/10 text-emerald-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
            onClick={() => setForm((prev) => ({ ...prev, authType: 'PASSWORD', setupMode: prev.setupMode === 'PASSWORD_BOOTSTRAP' ? 'NONE' : 'PASSWORD_BOOTSTRAP' }))}
          >
            一键免密部署
@@ -140,7 +192,7 @@ export default function ConnectionModal({
            <span className="text-sm text-slate-300">{useBootstrap ? '引导密码' : '密码'}</span>
            <input
              type="password"
-              className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white"
+              className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
              value={useBootstrap ? form.bootstrapPassword ?? '' : form.password ?? ''}
              onChange={(e) =>
                setForm((prev) =>
@@ -155,7 +207,7 @@ export default function ConnectionModal({
              <span className="text-sm text-slate-300">私钥内容</span>
              <textarea
                rows={6}
-                className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 font-mono text-sm text-white"
+                className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 font-mono text-sm text-white outline-none focus:border-blue-500"
                value={form.privateKey ?? ''}
                onChange={(e) => setForm((prev) => ({ ...prev, privateKey: e.target.value }))}
              />
@@ -164,7 +216,7 @@ export default function ConnectionModal({
              <span className="text-sm text-slate-300">私钥口令</span>
              <input
                type="password"
-                className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white"
+                className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
                value={form.passphrase ?? ''}
                onChange={(e) => setForm((prev) => ({ ...prev, passphrase: e.target.value }))}
              />