tao.chen/model-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: use Button component in SchedulePage.tsx

Browse Source
This commit is contained in:
tao.chen
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent ea2f92921b
commit fd724a1b45
1 changed files with 71 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/schedules/SchedulePage.tsx
+71 -50
View File
@@ -38,8 +38,6 @@ import {
modalFormClass, modalFormClass,
modalHeaderClass, modalHeaderClass,
modalTitleClass, modalTitleClass,
primaryButtonClass,
secondaryButtonClass,
} from "~/features/platform/modalUi"; } from "~/features/platform/modalUi";
import { NodeInspector } from "./NodeInspector"; import { NodeInspector } from "./NodeInspector";
import { RunHistory } from "./RunHistory"; import { RunHistory } from "./RunHistory";
@@ -55,6 +53,7 @@ import {
} from "./state/types"; } from "./state/types";
import { useSchedulesStore } from "./state/useSchedulesStore"; import { useSchedulesStore } from "./state/useSchedulesStore";
import { edgePath, nodeToForm, scheduleToForm } from "./utils"; import { edgePath, nodeToForm, scheduleToForm } from "./utils";
import {Button} from "~/components/ui/button";
type Notice = { type Notice = {
tone: "success" | "error" | "info"; tone: "success" | "error" | "info";
@@ -98,9 +97,11 @@ function RunNowButton({
}) { }) {
const positionDraftCount = useSchedulesStore((s) => s.positionDraftCount); const positionDraftCount = useSchedulesStore((s) => s.positionDraftCount);
return ( return (
<button <Button
className="inline-flex min-h-[32px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-emerald-600 bg-emerald-600 px-2 text-[12px] font-semibold text-white enabled:hover:border-emerald-700 enabled:hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 min-[1281px]:px-3" className="min-h-[32px] gap-[5px] rounded-[6px] text-white border-emerald-600 bg-emerald-600 px-2 text-[12px] font-semibold enabled:hover:border-emerald-700 enabled:hover:bg-emerald-700 min-[1281px]:px-3"
type="button" type="button"
variant="default"
size="sm"
disabled={ disabled={
!schedule !schedule
|| Boolean(busy) || Boolean(busy)
@@ -115,7 +116,7 @@ function RunNowButton({
onClick={() => useSchedulesStore.getState().runNow()} onClick={() => useSchedulesStore.getState().runNow()}
> >
<Play size={14} />立即运行 <Play size={14} />立即运行
</button> </Button>
); );
} }
@@ -378,39 +379,47 @@ export default function SchedulePage({
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
className="inline-flex h-[32px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-[#dce5ee] bg-white px-2 text-[12px] font-semibold text-[#526477] enabled:hover:border-[#aac6e5] enabled:hover:bg-[#f6faff] enabled:hover:text-[#126aca] disabled:cursor-not-allowed disabled:opacity-50 min-[1281px]:px-3" className="h-[32px] gap-[5px] rounded-[6px] border-[#dce5ee] bg-white px-2 text-[12px] font-semibold text-[#526477] enabled:hover:border-[#aac6e5] enabled:hover:bg-[#f6faff] enabled:hover:text-[#126aca] min-[1281px]:px-3"
type="button" type="button"
variant="outline"
size="sm"
onClick={() => useSchedulesStore.getState().openCreateDialog()} onClick={() => useSchedulesStore.getState().openCreateDialog()}
> >
<Plus size={14}/> <Plus size={14}/>
<span>新建</span> <span>新建</span>
</button> </Button>
<button <Button
className="inline-flex min-h-[32px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-brand bg-brand px-2 text-[12px] font-semibold text-white enabled:hover:border-brand-strong enabled:hover:bg-brand-strong disabled:cursor-not-allowed disabled:opacity-50 min-[1281px]:px-3" className="min-h-[32px] gap-[5px] rounded-[6px] text-white border-brand bg-brand px-2 text-[12px] font-semibold enabled:hover:border-brand-strong enabled:hover:bg-brand-strong min-[1281px]:px-3"
type="button" type="button"
variant="default"
size="sm"
disabled={!schedule || Boolean(busy)} disabled={!schedule || Boolean(busy)}
onClick={() => useSchedulesStore.getState().saveSchedule()} onClick={() => useSchedulesStore.getState().saveSchedule()}
> >
<Check size={15} />保存配置 <Check size={15} />保存配置
</button> </Button>
<button <Button
className="inline-flex min-h-[32px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-[#dce5ee] bg-white px-2 text-[12px] font-semibold text-[#526477] enabled:hover:border-[#aac6e5] enabled:hover:bg-[#f6faff] enabled:hover:text-[#126aca] disabled:cursor-not-allowed disabled:opacity-50 min-[1281px]:px-3" className="min-h-[32px] gap-[5px] rounded-[6px] border-[#dce5ee] bg-white px-2 text-[12px] font-semibold text-[#526477] enabled:hover:border-[#aac6e5] enabled:hover:bg-[#f6faff] enabled:hover:text-[#126aca] min-[1281px]:px-3"
type="button" type="button"
variant="outline"
size="sm"
disabled={!schedule || Boolean(busy)} disabled={!schedule || Boolean(busy)}
onClick={() => useSchedulesStore.getState().checkDag()} onClick={() => useSchedulesStore.getState().checkDag()}
> >
校验 DAG 校验 DAG
</button> </Button>
<RunNowButton schedule={schedule} busy={busy} /> <RunNowButton schedule={schedule} busy={busy} />
<button <Button
className="inline-flex min-h-[32px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-red-200 bg-white px-2 text-[12px] font-semibold text-red-700 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 min-[1281px]:px-3" className="min-h-[32px] gap-[5px] rounded-[6px] border-red-200 bg-white px-2 text-[12px] font-semibold text-red-700 hover:bg-red-50 min-[1281px]:px-3"
type="button" type="button"
variant="destructive"
size="sm"
disabled={!schedule || Boolean(busy)} disabled={!schedule || Boolean(busy)}
onClick={() => useSchedulesStore.getState().removeSchedule(schedule ?? undefined)} onClick={() => useSchedulesStore.getState().removeSchedule(schedule ?? undefined)}
> >
删除 删除
</button> </Button>
</div> </div>
</header> </header>
@@ -597,13 +606,15 @@ export default function SchedulePage({
<CalendarClock size={34} /> <CalendarClock size={34} />
<strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong> <strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong>
<p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度，然后拖入稳定版本脚本。</p> <p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度，然后拖入稳定版本脚本。</p>
<button <Button
className="inline-flex min-h-[32px] cursor-pointer items-center gap-1 rounded-[6px] border border-[#2580da] bg-[#2580da] px-3 text-[11px] text-white" className="min-h-[32px] gap-1 rounded-[6px] border-[#2580da] bg-[#2580da] px-3 text-[11px]"
type="button" type="button"
variant="default"
size="sm"
onClick={() => useSchedulesStore.getState().openCreateDialog()} onClick={() => useSchedulesStore.getState().openCreateDialog()}
> >
<Plus size={15} />新建调度 <Plus size={15} />新建调度
</button> </Button>
</div> </div>
) : schedule.nodes.length === 0 ? ( ) : schedule.nodes.length === 0 ? (
<div className="sticky left-1/2 top-[46%] z-0 mx-auto mt-[190px] flex w-[350px] flex-col items-center text-center text-[#9aa8b6] [&>svg]:mb-3 [&>svg]:text-[#8cb4de]"> <div className="sticky left-1/2 top-[46%] z-0 mx-auto mt-[190px] flex w-[350px] flex-col items-center text-center text-[#9aa8b6] [&>svg]:mb-3 [&>svg]:text-[#8cb4de]">
@@ -624,13 +635,15 @@ export default function SchedulePage({
<span>{schedule?.nodes.length ?? 0} 个节点</span> <span>{schedule?.nodes.length ?? 0} 个节点</span>
<span>{schedule?.edges.length ?? 0} 条连线</span> <span>{schedule?.edges.length ?? 0} 条连线</span>
{selectedEdge && ( {selectedEdge && (
<button <Button
className="ml-auto inline-flex min-h-[24px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-[#dce5ee] bg-white px-2 text-[10px] font-semibold text-[#bd504b] hover:border-[#aac6e5] hover:bg-[#f6faff] hover:text-[#126aca]" className="ml-auto min-h-[24px] gap-[5px] rounded-[6px] border-[#dce5ee] bg-white px-2 text-[10px] font-semibold text-[#bd504b] hover:border-[#aac6e5] hover:bg-[#f6faff] hover:text-[#126aca]"
type="button" type="button"
variant="destructive"
size="sm"
onClick={() => useSchedulesStore.getState().removeEdge(selectedEdge)} onClick={() => useSchedulesStore.getState().removeEdge(selectedEdge)}
> >
删除选中连线 删除选中连线
</button> </Button>
)} )}
</footer> </footer>
</main> </main>
@@ -676,69 +689,75 @@ export default function SchedulePage({
onPointerDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}
> >
{contextMenu.kind === "schedule-list" && ( {contextMenu.kind === "schedule-list" && (
<button <Button
className="flex w-full cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent p-[9px_10px] text-left text-[12px] text-[#173a5e] hover:bg-[#eef6ff]" className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#173a5e] hover:bg-[#eef6ff]"
type="button" type="button"
variant="ghost"
role="menuitem" role="menuitem"
onClick={() => useSchedulesStore.getState().openCreateDialog()} onClick={() => useSchedulesStore.getState().openCreateDialog()}
> >
<Plus size={14} /> <Plus size={14} />
新建调度方案 新建调度方案
</button> </Button>
)} )}
{contextMenu.kind === "schedule" && ( {contextMenu.kind === "schedule" && (
<> <>
<button <Button
className="flex w-full cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent p-[9px_10px] text-left text-[12px] text-[#173a5e] hover:bg-[#eef6ff]" className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#173a5e] hover:bg-[#eef6ff]"
type="button" type="button"
variant="ghost"
role="menuitem" role="menuitem"
onClick={() => useSchedulesStore.getState().openCreateDialog()} onClick={() => useSchedulesStore.getState().openCreateDialog()}
> >
<Plus size={14} /> <Plus size={14} />
新建调度方案 新建调度方案
</button> </Button>
<button <Button
className="flex w-full cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent p-[9px_10px] text-left text-[12px] text-[#173a5e] hover:bg-[#eef6ff]" className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#173a5e] hover:bg-[#eef6ff]"
type="button" type="button"
variant="ghost"
role="menuitem" role="menuitem"
onClick={() => useSchedulesStore.getState().renameSchedule(contextMenu.schedule)} onClick={() => useSchedulesStore.getState().renameSchedule(contextMenu.schedule)}
> >
<Settings size={14} /> <Settings size={14} />
改名 改名
</button> </Button>
<button <Button
className="flex w-full cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent p-[9px_10px] text-left text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]" className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]"
type="button" type="button"
variant="destructive"
role="menuitem" role="menuitem"
onClick={() => useSchedulesStore.getState().removeSchedule(contextMenu.schedule)} onClick={() => useSchedulesStore.getState().removeSchedule(contextMenu.schedule)}
> >
<X size={14} /> <X size={14} />
删除调度方案 删除调度方案
</button> </Button>
</> </>
)} )}
{contextMenu.kind === "artifact" && null} {contextMenu.kind === "artifact" && null}
{contextMenu.kind === "node" && ( {contextMenu.kind === "node" && (
<button <Button
className="flex w-full cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent p-[9px_10px] text-left text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]" className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]"
type="button" type="button"
variant="destructive"
role="menuitem" role="menuitem"
onClick={() => useSchedulesStore.getState().removeNode(contextMenu.node)} onClick={() => useSchedulesStore.getState().removeNode(contextMenu.node)}
> >
<X size={14} /> <X size={14} />
删除画布节点 删除画布节点
</button> </Button>
)} )}
{contextMenu.kind === "edge" && ( {contextMenu.kind === "edge" && (
<button <Button
className="flex w-full cursor-pointer items-center gap-[9px] rounded-[5px] border-0 bg-transparent p-[9px_10px] text-left text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]" className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]"
type="button" type="button"
variant="destructive"
role="menuitem" role="menuitem"
onClick={() => useSchedulesStore.getState().removeEdge(contextMenu.edge)} onClick={() => useSchedulesStore.getState().removeEdge(contextMenu.edge)}
> >
<X size={14} /> <X size={14} />
删除画布连线 删除画布连线
</button> </Button>
)} )}
</div> </div>
)} )}
@@ -758,15 +777,17 @@ export default function SchedulePage({
新建调度方案 新建调度方案
</h2> </h2>
</div> </div>
<button <Button
className="grid size-[34px] cursor-pointer place-items-center rounded-[7px] border border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff] disabled:opacity-50" className="size-[34px] rounded-[7px] border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]"
type="button" type="button"
variant="ghost"
size="icon-lg"
aria-label="关闭" aria-label="关闭"
disabled={Boolean(busy)} disabled={Boolean(busy)}
onClick={() => setCreateDialogOpen(false)} onClick={() => setCreateDialogOpen(false)}
> >
<X size={14} /> <X size={14} />
</button> </Button>
</div> </div>
<form className={modalFormClass} onSubmit={handleCreateScheduleSubmit}> <form className={modalFormClass} onSubmit={handleCreateScheduleSubmit}>
<label className={formFieldClass}> <label className={formFieldClass}>
@@ -782,24 +803,24 @@ export default function SchedulePage({
/> />
</label> </label>
<div className={modalFooterClass}> <div className={modalFooterClass}>
<button <Button
className={secondaryButtonClass}
type="button" type="button"
variant="secondary"
disabled={Boolean(busy)} disabled={Boolean(busy)}
onClick={() => setCreateDialogOpen(false)} onClick={() => setCreateDialogOpen(false)}
> >
取消 取消
</button> </Button>
<button <Button
className={primaryButtonClass}
type="submit" type="submit"
variant="default"
disabled={Boolean(busy) || !newScheduleName.trim()} disabled={Boolean(busy) || !newScheduleName.trim()}
> >
{busy === "create-schedule" {busy === "create-schedule"
? <span className="button-spinner" /> ? <span className="button-spinner" />
: <Plus size={15} />} : <Plus size={15} />}
{busy === "create-schedule" ? "正在创建…" : "创建调度"} {busy === "create-schedule" ? "正在创建…" : "创建调度"}
</button> </Button>
</div> </div>
</form> </form>
</section> </section>