diff --git a/web/hwlab-cloud-web/src/App.tsx b/web/hwlab-cloud-web/src/App.tsx index 35f5a0d4..a18b84c3 100644 --- a/web/hwlab-cloud-web/src/App.tsx +++ b/web/hwlab-cloud-web/src/App.tsx @@ -29,6 +29,7 @@ export function App(): ReactElement { const auth = useAuth(); const store = useWorkbenchStore(auth.authState === "authenticated"); const [route, setRoute] = useState(() => routeFromLocation()); + const [pickedDraft, setPickedDraft] = useState(null); const [leftCollapsed, setLeftCollapsed] = useState(false); const [rightCollapsed, setRightCollapsed] = useState(false); const [help, setHelp] = useState("加载中"); @@ -61,6 +62,19 @@ export function App(): ReactElement { return () => window.removeEventListener("hashchange", listener); }, []); + function pickDraft(value: string): void { + setPickedDraft(value); + } + + function clearPickedDraft(): void { + setPickedDraft(null); + } + + async function submitWithDraftRecord(value: string): Promise { + recordDraft(value); + await store.submitMessage(value); + } + useEffect(() => { if (route !== "help") return; void fetchText("/help.md", { timeoutMs: 8000 }).then((response) => setHelp(response.ok ? response.data ?? "" : `帮助内容加载失败:${response.error ?? "unknown"}`)); @@ -113,7 +127,8 @@ export function App(): ReactElement { {route === "gate" ? : null} {route === "help" ? : null} {route === "settings" ? : null} - + +
; onClear(): void; + pickedDraft: string | null; + onPickedDraftConsumed(): void; + disabledReason: string | null; } -export function CommandBar(props: CommandBarProps): ReactElement { +export function CommandBar({ pickedDraft, onPickedDraftConsumed, disabledReason, ...props }: CommandBarProps): ReactElement { const [value, setValue] = useState(""); const [pending, setPending] = useState(false); + useEffect(() => { + if (pickedDraft) { + setValue(pickedDraft); + onPickedDraftConsumed(); + } + }, [pickedDraft, onPickedDraftConsumed]); + async function submit(event: FormEvent): Promise { event.preventDefault(); const next = value.trim(); @@ -39,7 +49,7 @@ export function CommandBar(props: CommandBarProps): ReactElement { } return ( -
+