@@ -45,6 +45,7 @@ export type CronProps = {
4545fieldErrors: CronFieldErrors;
4646canSubmit: boolean;
4747editingJobId: string | null;
48+cronFormCollapsed?: boolean;
4849channels: string[];
4950channelLabels?: Record<string, string>;
5051channelMeta?: ChannelUiMetaEntry[];
@@ -71,6 +72,7 @@ export type CronProps = {
7172onEdit: (job: CronJob) => void;
7273onClone: (job: CronJob) => void;
7374onCancelEdit: () => void;
75+onToggleFormCollapsed?: (collapsed: boolean) => void;
7476onToggle: (job: CronJob, enabled: boolean) => void;
7577onRun: (job: CronJob, mode?: "force" | "due") => void;
7678onRemove: (job: CronJob) => void;
@@ -383,6 +385,9 @@ export function renderCron(props: CronProps) {
383385props.form.sessionTarget !== "main" && props.form.payloadKind === "agentTurn";
384386const selectedDeliveryMode =
385387props.form.deliveryMode === "announce" && !supportsAnnounce ? "none" : props.form.deliveryMode;
388+const formCollapsed = props.cronFormCollapsed === true;
389+const formTitle = isEditing ? t("cron.form.editJob") : t("cron.form.newJob");
390+const toggleFormCollapsed = props.onToggleFormCollapsed;
386391const blockingFields = collectBlockingFields(props.fieldErrors, props.form, selectedDeliveryMode);
387392const blockedByValidation = !props.busy && blockingFields.length > 0;
388393const hasActiveJobsFilters =
@@ -437,7 +442,7 @@ export function renderCron(props: CronProps) {
437442 </div>
438443 </section>
439444440- <section class="cron-workspace">
445+ <section class=${`cron-workspace ${formCollapsed ? "cron-workspace--form-collapsed" : ""}`}>
441446 <div class="cron-workspace-main">
442447 <section class="card">
443448 <div
@@ -707,12 +712,37 @@ export function renderCron(props: CronProps) {
707712 </section>
708713 </div>
709714710- <section class="card cron-workspace-form">
711- <div class="card-title">${isEditing ? t("cron.form.editJob") : t("cron.form.newJob")}</div>
712- <div class="card-sub">
713- ${isEditing ? t("cron.form.updateSubtitle") : t("cron.form.createSubtitle")}
715+ <section
716+ class=${`card cron-workspace-form ${formCollapsed ? "cron-workspace-form--collapsed" : ""}`}
717+ >
718+ <div class="cron-form-header">
719+ <div class="cron-form-header__copy">
720+ <div class="card-title">${formTitle}</div>
721+ ${formCollapsed
722+ ? nothing
723+ : html`
724+ <div class="card-sub">
725+ ${isEditing ? t("cron.form.updateSubtitle") : t("cron.form.createSubtitle")}
726+ </div>
727+ `}
728+ </div>
729+ ${toggleFormCollapsed
730+ ? html`
731+ <button
732+ type="button"
733+ class="btn cron-form-collapse-toggle"
734+ data-test-id="cron-form-collapse-toggle"
735+ title=${formCollapsed ? t("nav.expand") : t("nav.collapse")}
736+ aria-label=${formCollapsed ? t("nav.expand") : t("nav.collapse")}
737+ aria-expanded=${formCollapsed ? "false" : "true"}
738+ @click=${() => toggleFormCollapsed(!formCollapsed)}
739+ >
740+ <span aria-hidden="true">${formCollapsed ? "<" : ">"}</span>
741+ </button>
742+ `
743+ : nothing}
714744 </div>
715- <div class="cron-form">
745+ <div class="cron-form" ?hidden=${formCollapsed}>
716746 <div class="cron-required-legend">
717747 <span class="cron-required-marker" aria-hidden="true">*</span> ${t(
718748 "cron.form.required",
@@ -1317,7 +1347,12 @@ export function renderCron(props: CronProps) {
13171347 </div>
13181348 ${blockedByValidation
13191349 ? html`
1320- <div class="cron-form-status" role="status" aria-live="polite">
1350+ <div
1351+ class="cron-form-status"
1352+ role="status"
1353+ aria-live="polite"
1354+ ?hidden=${formCollapsed}
1355+ >
13211356 <div class="cron-form-status__title">${t("cron.form.cantAddYet")}</div>
13221357 <div class="cron-help">${t("cron.form.fillRequired")}</div>
13231358 <ul class="cron-form-status__list">
@@ -1338,7 +1373,7 @@ export function renderCron(props: CronProps) {
13381373 </div>
13391374 `
13401375 : nothing}
1341- <div class="row cron-form-actions">
1376+ <div class="row cron-form-actions" ?hidden=${formCollapsed}>
13421377 <button
13431378 class="btn primary"
13441379 ?disabled=${props.busy || !props.canSubmit}
@@ -1351,7 +1386,9 @@ export function renderCron(props: CronProps) {
13511386 : t("cron.form.addJob")}
13521387 </button>
13531388 ${submitDisabledReason
1354- ? html`<div class="cron-submit-reason" aria-live="polite">${submitDisabledReason}</div>`
1389+ ? html`
1390+ <div class="cron-submit-reason" aria-live="polite">${submitDisabledReason}</div>
1391+ `
13551392 : nothing}
13561393 ${isEditing
13571394 ? html`
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。