116 lines
14 KiB
TypeScript
116 lines
14 KiB
TypeScript
import { CheckCircle2, CircleDashed, Compass, FolderCog, Rocket, ServerCog } from "lucide-react";
|
|
import { type ChangeEvent, type FormEvent, useEffect, useMemo, useState } from "react";
|
|
|
|
import type { GamePluginResponse, RunEndpointResponse, ServerDeploymentResponse } from "../api/types";
|
|
import { ManagementDialog } from "./OperationControls";
|
|
import { endpointLabel, pluginCreateInputDefaults, pluginLabel, runtimeBindingFields, type ServerCreateFormState } from "../contracts/serverManagement";
|
|
import { cx } from "../utils/classes";
|
|
|
|
type WorkflowKind = "create" | "edit";
|
|
|
|
interface ServerDeploymentWorkflowProps {
|
|
open: boolean;
|
|
kind: WorkflowKind;
|
|
plugins: GamePluginResponse[];
|
|
endpoints: RunEndpointResponse[];
|
|
initialForm: ServerCreateFormState;
|
|
deployment?: ServerDeploymentResponse;
|
|
busy?: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (form: ServerCreateFormState, saveAsDraft: boolean) => Promise<void>;
|
|
}
|
|
|
|
const workflowSteps = [
|
|
{ label: "选择目标", icon: Compass },
|
|
{ label: "部署方式", icon: ServerCog },
|
|
{ label: "相关配置", icon: FolderCog },
|
|
{ label: "确认", icon: Rocket }
|
|
];
|
|
|
|
export function ServerDeploymentWorkflow({ open, kind, plugins, endpoints, initialForm, deployment, busy = false, onClose, onSubmit }: ServerDeploymentWorkflowProps) {
|
|
const [step, setStep] = useState(0);
|
|
const [form, setForm] = useState<ServerCreateFormState>(initialForm);
|
|
const [saveAsDraft, setSaveAsDraft] = useState(false);
|
|
const selectedPlugin = useMemo(() => plugins.find((plugin) => plugin.id === form.pluginId), [form.pluginId, plugins]);
|
|
const profileOptions = selectedPlugin?.runtimeProfiles?.lifecycleProfiles ?? [];
|
|
const pluginFields = selectedPlugin?.createFields ?? [];
|
|
const bindingFields = runtimeBindingFields(selectedPlugin, form.profileKey);
|
|
const activeServer = kind === "edit" && Boolean(deployment);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setStep(0);
|
|
setSaveAsDraft(!initialForm.runEndpointId);
|
|
setForm(initialForm);
|
|
}, [initialForm, kind, open]);
|
|
|
|
function updateForm(event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
|
|
const { name, value } = event.target;
|
|
setForm((current) => {
|
|
if (name === "pluginId") {
|
|
const plugin = plugins.find((item) => item.id === value);
|
|
return { ...current, pluginId: value, profileKey: plugin?.runtimeProfiles?.lifecycleProfiles?.[0]?.key ?? "", bindings: {}, createInputs: pluginCreateInputDefaults(plugin) };
|
|
}
|
|
if (name === "profileKey") return { ...current, profileKey: value, bindings: {} };
|
|
return { ...current, [name]: value };
|
|
});
|
|
}
|
|
|
|
function updateCreateInput(key: string, value: string) { setForm((current) => ({ ...current, createInputs: { ...current.createInputs, [key]: value } })); }
|
|
function updateBinding(key: string, value: string) { setForm((current) => ({ ...current, bindings: { ...current.bindings, [key]: value } })); }
|
|
|
|
function canContinue() {
|
|
if (step === 0) return Boolean(form.pluginId && (saveAsDraft || form.runEndpointId));
|
|
if (step === 2) {
|
|
if (kind === "create" && !form.name.trim()) return false;
|
|
if (form.deploymentMode === "custom-command" && !form.startCommand.trim() && !deployment?.startCommandConfigured) return false;
|
|
return pluginFields.filter((field) => field.required).every((field) => Boolean(form.createInputs[field.key]?.trim()));
|
|
}
|
|
return true;
|
|
}
|
|
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (step < workflowSteps.length - 1) { if (canContinue()) setStep((current) => current + 1); return; }
|
|
await onSubmit({ ...form, runEndpointId: saveAsDraft ? "" : form.runEndpointId }, saveAsDraft);
|
|
}
|
|
|
|
const protectedState = (nextValue: string, configured: boolean) => nextValue.trim() ? "将替换" : configured ? "保持已配置" : "未配置";
|
|
const actionLabel = kind === "create" ? (saveAsDraft ? "保存草稿" : "创建并部署") : (saveAsDraft ? "保存草稿设置" : "保存部署设置");
|
|
|
|
return <ManagementDialog open={open} title={kind === "create" ? "创建服务器" : "编辑部署"} description={kind === "create" ? "按部署顺序完成设置；路径和命令始终受保护，不会在确认页或日志中回显。" : "仅停止中的服务器可以修改部署设置。受保护路径和命令留空会保持原值。"} wide onClose={() => { if (!busy) onClose(); }}>
|
|
<form className="provider-form dialog-form server-deployment-workflow" onSubmit={(event) => void submit(event)} aria-label={kind === "create" ? "创建服务器部署向导" : "编辑服务器部署向导"}>
|
|
<ol className="deployment-workflow-steps" aria-label="部署步骤">{workflowSteps.map((item, index) => { const Icon = item.icon; return <li key={item.label} className={cx(index === step && "deployment-workflow-step-active", index < step && "deployment-workflow-step-complete")}><span>{index < step ? <CheckCircle2 size={15} /> : <Icon size={15} />}</span><strong>{index + 1}. {item.label}</strong></li>; })}</ol>
|
|
{step === 0 && <div className="deployment-workflow-body">
|
|
<div className="workflow-hint-grid"><div className="workflow-hint-card"><strong>先确定游戏</strong><span>插件决定可填写的游戏配置与启动预设。</span></div><div className="workflow-hint-card"><strong>再选择节点</strong><span>节点负责预检和执行，平台不会直接访问主机。</span></div><div className="workflow-hint-card"><strong>也可存为草稿</strong><span>草稿不会发起部署，稍后可从服务器详情继续。</span></div></div>
|
|
<div className="form-grid"><label>插件类型<select name="pluginId" value={form.pluginId} onChange={updateForm} required>{plugins.map((plugin) => <option key={plugin.id} value={plugin.id}>{pluginLabel(plugin, plugin.id)}</option>)}</select></label><label>运行节点<select name="runEndpointId" value={form.runEndpointId} onChange={updateForm} disabled={saveAsDraft} required={!saveAsDraft}><option value="">请选择运行节点</option>{endpoints.map((endpoint) => <option key={endpoint.id} value={endpoint.id}>{endpointLabel(endpoint, endpoint.id)}</option>)}</select></label></div>
|
|
<label className="deployment-draft-choice"><input type="checkbox" checked={saveAsDraft} onChange={(event) => setSaveAsDraft(event.target.checked)} /><span><strong>{kind === "create" ? "仅保存为草稿" : "保持为未绑定草稿"}</strong><small>暂不指定运行节点；不会安装、预检或派发任务。</small></span></label>
|
|
</div>}
|
|
{step === 1 && <div className="deployment-workflow-body"><p className="section-copy">选择你想让平台承担的方式。后续只显示这一方式需要的字段。</p><div className="deployment-mode-grid">
|
|
<ModeOption active={form.deploymentMode === "guided-install"} title="新建并安装" copy="按插件的推荐方案安装并写入游戏配置。适合绝大多数新服务器。" onClick={() => setForm((current) => ({ ...current, deploymentMode: "guided-install" }))} />
|
|
<ModeOption active={form.deploymentMode === "existing-server"} title="接管已有服务器" copy="预检指定目录并接入已有实例；不会把它当作一次新安装。" onClick={() => setForm((current) => ({ ...current, deploymentMode: "existing-server" }))} />
|
|
<ModeOption active={form.deploymentMode === "custom-command"} title="自定义启动方式" copy="用于非标准启动器或脚本；需由节点策略允许。" onClick={() => setForm((current) => ({ ...current, deploymentMode: "custom-command" }))} />
|
|
</div></div>}
|
|
{step === 2 && <div className="deployment-workflow-body"><div className="form-grid">
|
|
{kind === "create" && <label>服务器名称<input name="name" value={form.name} onChange={updateForm} placeholder="Example Survival #3" required /></label>}
|
|
{kind === "create" && <label>运行预设（可选）<select name="profileKey" value={form.profileKey} onChange={updateForm}><option value="">使用插件默认预设</option>{profileOptions.map((profile) => <option key={profile.key} value={profile.key}>{profile.key} · {profile.mode}</option>)}</select><small className="field-help">仅在插件提供多个兼容启动预设时选择。</small></label>}
|
|
<label>服务器目录<input name="serverRoot" value={form.serverRoot} onChange={updateForm} placeholder={deployment?.serverRootConfigured ? "留空保持已配置目录" : "完整绝对路径"} autoComplete="off" /><small className="field-help">{form.deploymentMode === "existing-server" ? "已有服务器所在目录。" : "服务器文件、数据与配置的主目录。"}</small></label>
|
|
{pluginFields.map((field) => (
|
|
<label key={field.key}>{field.label}{field.required ? "（必填）" : ""}{field.type === "select" ? (
|
|
<select value={form.createInputs[field.key] ?? ""} onChange={(event) => updateCreateInput(field.key, event.target.value)} required={field.required}>{!field.required && <option value="">未设置</option>}{field.options?.map((option) => <option key={option} value={option}>{option}</option>)}</select>
|
|
) : (
|
|
<input type={field.type === "boolean" ? "checkbox" : field.type === "number" || field.type === "port" ? "number" : "text"} min={field.type === "port" ? 1 : undefined} max={field.type === "port" ? 65535 : undefined} checked={field.type === "boolean" ? form.createInputs[field.key] === "true" : undefined} value={field.type === "boolean" ? undefined : form.createInputs[field.key] ?? ""} onChange={(event) => updateCreateInput(field.key, field.type === "boolean" ? String(event.target.checked) : event.target.value)} required={field.required} />
|
|
)}</label>
|
|
))}
|
|
</div>
|
|
{form.deploymentMode === "custom-command" && <details className="provider-advanced-settings" open><summary>高级启动设置</summary><p className="field-help">只有自定义启动器需要这些设置。执行目录留空时，节点以服务器目录执行。</p><div className="form-grid"><label>启动命令<input name="startCommand" value={form.startCommand} onChange={updateForm} placeholder={deployment?.startCommandConfigured ? "留空保持已配置启动命令" : "必填，例如 ./start-server"} autoComplete="off" required={!deployment?.startCommandConfigured} /></label><label>命令解释器<select name="shell" value={form.shell} onChange={updateForm}><option value="">直接 argv（推荐）</option><option value="posix-sh">POSIX sh</option><option value="powershell">PowerShell</option><option value="cmd">Windows cmd</option></select></label><label>执行目录（可选）<input name="workingDirectory" value={form.workingDirectory} onChange={updateForm} placeholder={deployment?.workingDirectoryConfigured ? "留空保持已配置执行目录" : "默认使用服务器目录"} autoComplete="off" /></label><label>安装命令（可选）<input name="installCommand" value={form.installCommand} onChange={updateForm} autoComplete="off" placeholder="留空保持原值或不使用" /></label><label>停止命令（可选）<input name="stopCommand" value={form.stopCommand} onChange={updateForm} autoComplete="off" /></label><label>状态命令（可选）<input name="statusCommand" value={form.statusCommand} onChange={updateForm} autoComplete="off" /></label></div></details>}
|
|
{kind === "create" && bindingFields.length > 0 && <details className="provider-advanced-settings"><summary>运行连接设置</summary><p className="field-help">用于插件声明的逻辑连接，不是服务器目录或游戏配置。</p><div className="form-grid">{bindingFields.map((field) => <label key={field.key}>{field.key}{field.required ? "（必填）" : ""}<input type={field.sensitive ? "password" : "text"} autoComplete="off" value={form.bindings[field.key] ?? ""} onChange={(event) => updateBinding(field.key, event.target.value)} placeholder={field.sensitive ? "托管凭据引用" : "安全逻辑值"} required={field.required} /></label>)}</div></details>}
|
|
</div>}
|
|
{step === 3 && <div className="deployment-workflow-body"><div className="deployment-review"><div><span>插件类型</span><strong>{pluginLabel(selectedPlugin, form.pluginId)}</strong></div><div><span>目标</span><strong>{saveAsDraft ? "保存为未绑定草稿" : endpointLabel(endpoints.find((endpoint) => endpoint.id === form.runEndpointId), form.runEndpointId)}</strong></div><div><span>部署方式</span><strong>{form.deploymentMode === "guided-install" ? "新建并安装" : form.deploymentMode === "existing-server" ? "接管已有服务器" : "自定义启动方式"}</strong></div><div><span>服务器目录</span><strong>{protectedState(form.serverRoot, Boolean(deployment?.serverRootConfigured))}</strong></div>{form.deploymentMode === "custom-command" && <><div><span>启动命令</span><strong>{protectedState(form.startCommand, Boolean(deployment?.startCommandConfigured))}</strong></div><div><span>执行目录</span><strong>{protectedState(form.workingDirectory, Boolean(deployment?.workingDirectoryConfigured))}</strong></div></>}<div><span>游戏配置</span><strong>{Object.keys(form.createInputs).length ? `${Object.keys(form.createInputs).length} 项已准备` : "使用插件默认值"}</strong></div></div><div className="form-guidance"><strong>{saveAsDraft ? "本次只保存定义" : activeServer ? "本次只保存部署设置" : "确认后将创建并派发部署"}</strong><span>{saveAsDraft ? "后续从服务器详情选择节点并部署。" : activeServer ? "保存后可在详情中明确发起部署；路径和命令不会显示原文。" : "Run 会在领取任务后执行本机预检，再进行安装、配置与启动。"}</span></div></div>}
|
|
<div className="confirm-actions"><button type="button" disabled={busy} onClick={() => step === 0 ? onClose() : setStep((current) => current - 1)}>{step === 0 ? "取消" : "上一步"}</button>{step < workflowSteps.length - 1 ? <button type="submit" className="confirm-primary" disabled={busy || !canContinue()}><CircleDashed size={16} /><span>下一步</span></button> : <button type="submit" className="confirm-primary" disabled={busy}><Rocket size={16} /><span>{busy ? "保存中…" : actionLabel}</span></button>}</div>
|
|
</form>
|
|
</ManagementDialog>;
|
|
}
|
|
|
|
function ModeOption({ active, title, copy, onClick }: { active: boolean; title: string; copy: string; onClick: () => void }) { return <button type="button" className={cx("deployment-mode-option", active && "deployment-mode-option-active")} onClick={onClick}><strong>{title}</strong><span>{copy}</span></button>; }
|