LiuMangMang/ssh-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 主题切换 + 浅色模式适配，SFTP/批量命令/Webhook/仪表盘全面升级

Browse Source
This commit is contained in:
liumangmang
2026-06-10 14:33:47 +08:00
parent 507d59d633
commit 4a17f0106e
69 changed files with 3105 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ConnectionModal.tsx
+27 -27
View File
@@ -92,7 +92,7 @@ export default function ConnectionModal({
maxWidth="max-w-2xl"
footer={
<>
<button className="rounded-xl bg-slate-700 px-4 py-2 text-sm text-slate-200 transition hover:bg-slate-600" onClick={onClose}>
<button className="rounded-xl bg-surface-muted px-4 py-2 text-sm text-content-muted transition hover:bg-surface-panel hover:text-content-main" onClick={onClose}>
取消
</button>
<button
@@ -107,18 +107,18 @@ 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>
<span className="text-sm text-content-muted">连接名称</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"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main 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">分组 / 父文件夹</span>
<span className="text-sm text-content-muted">分组 / 父文件夹</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"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main outline-none focus:border-blue-500"
value={targetFolderId ?? '__ROOT__'}
onChange={(event) => setTargetFolderId(event.target.value === '__ROOT__' ? null : event.target.value)}
>
@@ -134,53 +134,53 @@ export default function ConnectionModal({
<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>
<span className="text-sm text-content-muted">主机 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"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main 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>
<span className="text-sm text-content-muted">端口</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"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main 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>
<span className="text-sm text-content-muted">用户名</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"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main 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="mt-6 rounded-[28px] border border-border-main bg-surface-muted/30 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 className="text-sm font-medium text-content-main">认证方式</div>
<div className="mt-1 text-xs text-content-dim">保留现有密码、私钥和一键免密部署能力。</div>
</div>
<div className="flex flex-wrap gap-3">
<button
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'}`}
className={`rounded-2xl border px-4 py-2 text-sm ${isPassword ? 'border-blue-500 bg-blue-500/10 text-blue-400' : 'border-border-main bg-surface-panel text-content-muted'}`}
onClick={() => setForm((prev) => ({ ...prev, authType: 'PASSWORD', setupMode: prev.setupMode === 'PASSWORD_BOOTSTRAP' ? 'PASSWORD_BOOTSTRAP' : 'NONE' }))}
>
密码认证
</button>
<button
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'}`}
className={`rounded-2xl border px-4 py-2 text-sm ${form.authType === 'PRIVATE_KEY' ? 'border-blue-500 bg-blue-500/10 text-blue-400' : 'border-border-main bg-surface-panel text-content-muted'}`}
onClick={() => setForm((prev) => ({ ...prev, authType: 'PRIVATE_KEY', setupMode: 'NONE' }))}
>
私钥认证
</button>
<button
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'}`}
className={`rounded-2xl border px-4 py-2 text-sm ${useBootstrap ? 'border-emerald-500 bg-emerald-500/10 text-emerald-400' : 'border-border-main bg-surface-panel text-content-muted'}`}
onClick={() => setForm((prev) => ({ ...prev, authType: 'PASSWORD', setupMode: prev.setupMode === 'PASSWORD_BOOTSTRAP' ? 'NONE' : 'PASSWORD_BOOTSTRAP' }))}
>
一键免密部署
@@ -188,11 +188,11 @@ export default function ConnectionModal({
</div>
{form.authType === 'PASSWORD' ? (
<label className="block space-y-2">
<span className="text-sm text-slate-300">{useBootstrap ? '引导密码' : '密码'}</span>
<label className="block mt-4 space-y-2">
<span className="text-sm text-content-muted">{useBootstrap ? '引导密码' : '密码'}</span>
<input
type="password"
className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main outline-none focus:border-blue-500"
value={useBootstrap ? form.bootstrapPassword ?? '' : form.password ?? ''}
onChange={(e) =>
setForm((prev) =>
@@ -202,30 +202,30 @@ export default function ConnectionModal({
/>
</label>
) : (
<>
<div className="mt-4 space-y-4">
<label className="block space-y-2">
<span className="text-sm text-slate-300">私钥内容</span>
<span className="text-sm text-content-muted">私钥内容</span>
<textarea
rows={6}
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"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 font-mono text-sm text-content-main outline-none focus:border-blue-500"
value={form.privateKey ?? ''}
onChange={(e) => setForm((prev) => ({ ...prev, privateKey: e.target.value }))}
/>
</label>
<label className="block space-y-2">
<span className="text-sm text-slate-300">私钥口令</span>
<span className="text-sm text-content-muted">私钥口令</span>
<input
type="password"
className="w-full rounded-2xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none focus:border-blue-500"
className="w-full rounded-2xl border border-border-main bg-surface-muted px-4 py-3 text-content-main outline-none focus:border-blue-500"
value={form.passphrase ?? ''}
onChange={(e) => setForm((prev) => ({ ...prev, passphrase: e.target.value }))}
/>
</label>
</>
</div>
)}
</div>
{error ? <div className="mt-4 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">{error}</div> : null}
{error ? <div className="mt-4 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</div> : null}
</Modal>
)
}