From 9294c7fd9f574668c616c5f14ec0d64221a2c915 Mon Sep 17 00:00:00 2001
From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com>
Date: Tue, 25 Aug 2026 18:17:54 +0800
Subject: [PATCH] update: use Button component in SchedulePage.tsx

---
 .../app/features/schedules/SchedulePage.tsx   | 121 ++++++++++--------
 1 file changed, 71 insertions(+), 50 deletions(-)

diff --git a/frontend/app/features/schedules/SchedulePage.tsx b/frontend/app/features/schedules/SchedulePage.tsx
index 64abd74..efe6848 100644
--- a/frontend/app/features/schedules/SchedulePage.tsx
+++ b/frontend/app/features/schedules/SchedulePage.tsx
@@ -38,8 +38,6 @@ import {
   modalFormClass,
   modalHeaderClass,
   modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "~/features/platform/modalUi";
 import { NodeInspector } from "./NodeInspector";
 import { RunHistory } from "./RunHistory";
@@ -55,6 +53,7 @@ import {
 } from "./state/types";
 import { useSchedulesStore } from "./state/useSchedulesStore";
 import { edgePath, nodeToForm, scheduleToForm } from "./utils";
+import {Button} from "~/components/ui/button";
 
 type Notice = {
   tone: "success" | "error" | "info";
@@ -98,9 +97,11 @@ function RunNowButton({
 }) {
   const positionDraftCount = useSchedulesStore((s) => s.positionDraftCount);
   return (
-    <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"
+    <Button
+      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"
+      variant="default"
+      size="sm"
       disabled={
         !schedule
         || Boolean(busy)
@@ -115,7 +116,7 @@ function RunNowButton({
       onClick={() => useSchedulesStore.getState().runNow()}
     >
       <Play size={14} />立即运行
-    </button>
+    </Button>
   );
 }
 
@@ -378,39 +379,47 @@ export default function SchedulePage({
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <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"
+          <Button
+              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"
+              variant="outline"
+              size="sm"
               onClick={() => useSchedulesStore.getState().openCreateDialog()}
             >
               <Plus size={14}/>
               <span>新建</span>
-          </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"
+          </Button>
+          <Button
+            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"
+            variant="default"
+            size="sm"
             disabled={!schedule || Boolean(busy)}
             onClick={() => useSchedulesStore.getState().saveSchedule()}
           >
             <Check size={15} />保存配置
-          </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"
+          </Button>
+          <Button
+            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"
+            variant="outline"
+            size="sm"
             disabled={!schedule || Boolean(busy)}
             onClick={() => useSchedulesStore.getState().checkDag()}
           >
             校验 DAG
-          </button>
+          </Button>
           <RunNowButton schedule={schedule} busy={busy} />
-          <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"
+          <Button
+            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"
+            variant="destructive"
+            size="sm"
             disabled={!schedule || Boolean(busy)}
             onClick={() => useSchedulesStore.getState().removeSchedule(schedule ?? undefined)}
           >
             删除
-          </button>
+          </Button>
         </div>
       </header>
 
@@ -597,13 +606,15 @@ export default function SchedulePage({
                   <CalendarClock size={34} />
                   <strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong>
                   <p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度，然后拖入稳定版本脚本。</p>
-                  <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"
+                  <Button
+                    className="min-h-[32px] gap-1 rounded-[6px] border-[#2580da] bg-[#2580da] px-3 text-[11px]"
                     type="button"
+                    variant="default"
+                    size="sm"
                     onClick={() => useSchedulesStore.getState().openCreateDialog()}
                   >
                     <Plus size={15} />新建调度
-                  </button>
+                  </Button>
                 </div>
               ) : 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]">
@@ -624,13 +635,15 @@ export default function SchedulePage({
             <span>{schedule?.nodes.length ?? 0} 个节点</span>
             <span>{schedule?.edges.length ?? 0} 条连线</span>
             {selectedEdge && (
-              <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]"
+              <Button
+                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"
+                variant="destructive"
+                size="sm"
                 onClick={() => useSchedulesStore.getState().removeEdge(selectedEdge)}
               >
                 删除选中连线
-              </button>
+              </Button>
             )}
           </footer>
         </main>
@@ -676,69 +689,75 @@ export default function SchedulePage({
           onPointerDown={(event) => event.stopPropagation()}
         >
           {contextMenu.kind === "schedule-list" && (
-            <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]"
+            <Button
+              className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#173a5e] hover:bg-[#eef6ff]"
               type="button"
+              variant="ghost"
               role="menuitem"
               onClick={() => useSchedulesStore.getState().openCreateDialog()}
             >
               <Plus size={14} />
               新建调度方案
-            </button>
+            </Button>
           )}
           {contextMenu.kind === "schedule" && (
             <>
-              <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]"
+              <Button
+                className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#173a5e] hover:bg-[#eef6ff]"
                 type="button"
+                variant="ghost"
                 role="menuitem"
                 onClick={() => useSchedulesStore.getState().openCreateDialog()}
               >
                 <Plus size={14} />
                 新建调度方案
-              </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]"
+              </Button>
+              <Button
+                className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#173a5e] hover:bg-[#eef6ff]"
                 type="button"
+                variant="ghost"
                 role="menuitem"
                 onClick={() => useSchedulesStore.getState().renameSchedule(contextMenu.schedule)}
               >
                 <Settings size={14} />
                 改名
-              </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]"
+              </Button>
+              <Button
+                className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]"
                 type="button"
+                variant="destructive"
                 role="menuitem"
                 onClick={() => useSchedulesStore.getState().removeSchedule(contextMenu.schedule)}
               >
                 <X size={14} />
                 删除调度方案
-              </button>
+              </Button>
             </>
           )}
           {contextMenu.kind === "artifact" && null}
           {contextMenu.kind === "node" && (
-            <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]"
+            <Button
+              className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]"
               type="button"
+              variant="destructive"
               role="menuitem"
               onClick={() => useSchedulesStore.getState().removeNode(contextMenu.node)}
             >
               <X size={14} />
               删除画布节点
-            </button>
+            </Button>
           )}
           {contextMenu.kind === "edge" && (
-            <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]"
+            <Button
+              className="w-full justify-start gap-[9px] rounded-[5px] p-[9px_10px] text-[12px] text-[#c23b3b] hover:bg-[#fff0f0]"
               type="button"
+              variant="destructive"
               role="menuitem"
               onClick={() => useSchedulesStore.getState().removeEdge(contextMenu.edge)}
             >
               <X size={14} />
               删除画布连线
-            </button>
+            </Button>
           )}
         </div>
       )}
@@ -758,15 +777,17 @@ export default function SchedulePage({
                   新建调度方案
                 </h2>
               </div>
-              <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"
+              <Button
+                className="size-[34px] rounded-[7px] border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]"
                 type="button"
+                variant="ghost"
+                size="icon-lg"
                 aria-label="关闭"
                 disabled={Boolean(busy)}
                 onClick={() => setCreateDialogOpen(false)}
               >
                 <X size={14} />
-              </button>
+              </Button>
             </div>
             <form className={modalFormClass} onSubmit={handleCreateScheduleSubmit}>
               <label className={formFieldClass}>
@@ -782,24 +803,24 @@ export default function SchedulePage({
                 />
               </label>
               <div className={modalFooterClass}>
-                <button
-                  className={secondaryButtonClass}
+                <Button
                   type="button"
+                  variant="secondary"
                   disabled={Boolean(busy)}
                   onClick={() => setCreateDialogOpen(false)}
                 >
                   取消
-                </button>
-                <button
-                  className={primaryButtonClass}
+                </Button>
+                <Button
                   type="submit"
+                  variant="default"
                   disabled={Boolean(busy) || !newScheduleName.trim()}
                 >
                   {busy === "create-schedule"
                     ? <span className="button-spinner" />
                     : <Plus size={15} />}
                   {busy === "create-schedule" ? "正在创建…" : "创建调度"}
-                </button>
+                </Button>
               </div>
             </form>
           </section>