update: use Button component in SchedulePage.tsx

2026-09-02 10:10:41 +08:00
parent ea2f92921b
commit fd724a1b45
1 changed files with 71 additions and 50 deletions
@@ -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>