update: style

2026-08-28 12:00:14 +08:00
parent e2fd7eba63
commit 9badd3597f
34 changed files with 207 additions and 237 deletions
@@ -14,6 +14,7 @@ import {
  CalendarClock,
  Check,
  FileCode2,
+  Loader2Icon,
  PackageOpen,
  Play,
  Plus,
@@ -367,7 +368,7 @@ export default function SchedulePage({

  return (
    <section className="relative flex min-h-0 flex-1 flex-col gap-[10px] overflow-hidden p-[10px]">
-      <header className="flex min-h-[56px] items-center justify-between rounded-[7px] border border-line bg-white px-[14px] shadow-[0_2px_7px_rgb(25_46_73_/_3%)]">
+      <header className="flex min-h-[56px] items-center justify-between rounded-[7px] border border-line bg-white px-[14px] shadow-md">
        <div className="flex items-baseline gap-[10px]">
          <strong className="text-[16px] text-[#1c2d42]">图形化调度</strong>
          <span className="hidden text-[11px] text-[#8b99a9] 2xl:inline">
@@ -423,7 +424,7 @@ export default function SchedulePage({
      </header>

      <div className="grid min-h-0 flex-1 gap-[10px] [grid-template-columns:225px_minmax(360px,1fr)_270px] min-[1281px]:[grid-template-columns:250px_minmax(380px,1fr)_292px] 2xl:[grid-template-columns:278px_minmax(420px,1fr)_316px]">
-        <aside className="grid min-h-0 overflow-hidden rounded-[7px] border border-line bg-white shadow-[0_2px_7px_rgb(25_46_73_/_3%)] [grid-template-rows:minmax(210px,42%)_minmax(260px,58%)]">
+        <aside className="grid min-h-0 overflow-hidden rounded-[7px] border border-line bg-white shadow-md [grid-template-rows:minmax(210px,42%)_minmax(260px,58%)]">
          <ScheduleList
            schedules={filteredSchedules}
            selectedScheduleId={schedule?.schedule_id ?? null}
@@ -443,7 +444,7 @@ export default function SchedulePage({
          />
        </aside>

-        <main className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-line bg-white shadow-[0_2px_7px_rgb(25_46_73_/_3%)]">
+        <main className="flex min-h-0 flex-col overflow-hidden rounded-[7px] border border-line bg-white shadow-md">
          <ScheduleCanvasHeader
            linkSourceId={linkSourceId}
            onCancelLink={() => setLinkSourceId(null)}
@@ -510,7 +511,7 @@ export default function SchedulePage({

              {schedule?.nodes.map((node) => (
                <div
-                  className={`schedule-node absolute z-[2] flex cursor-grab touch-none select-none flex-col rounded-[8px] border border-[#91b7de] bg-white p-[11px_12px_9px] text-[#34516f] shadow-[0_7px_18px_rgb(36_75_117_/_11%)] active:cursor-grabbing data-[state=selected]:border-brand data-[state=selected]:shadow-[0_0_0_3px_rgb(25_120_212_/_11%),0_8px_22px_rgb(36_75_117_/_13%)]`}
+                  className={`schedule-node absolute z-[2] flex cursor-grab touch-none select-none flex-col rounded-[8px] border border-[#91b7de] bg-white p-[11px_12px_9px] text-[#34516f] shadow-md active:cursor-grabbing data-[state=selected]:border-brand data-[state=selected]:ring-3 data-[state=selected]:ring-brand/10 data-[state=selected]:shadow-md`}
                  data-state={selectedNodeId === node.node_id ? "selected" : "idle"}
                  key={node.node_id}
                  style={{
@@ -529,7 +530,7 @@ export default function SchedulePage({
                  })}
                >
                  <button
-                    className="absolute left-[-8px] top-[calc(50%-7px)] z-[4] h-[14px] w-[14px] cursor-crosshair rounded-full border-2 border-[#4e92db] bg-white p-0 hover:border-[#176ec5] hover:bg-[#4e92db] hover:shadow-[0_0_0_4px_rgb(45_124_207_/_16%)]"
+                    className="absolute left-[-8px] top-[calc(50%-7px)] z-[4] h-[14px] w-[14px] cursor-crosshair rounded-full border-2 border-[#4e92db] bg-white p-0 hover:border-[#176ec5] hover:bg-[#4e92db] hover:ring-4 hover:ring-brand/15"
                    type="button"
                    aria-label={`连接到${node.node_name}`}
                    title={linkSourceId ? "点击完成连线" : "输入端口"}
@@ -580,7 +581,7 @@ export default function SchedulePage({
                    <b className="text-[10px] text-brand">{node.version.version_label}</b>
                  </footer>
                  <button
-                    className="absolute right-[-8px] top-[calc(50%-7px)] z-[4] h-[14px] w-[14px] cursor-crosshair rounded-full border-2 border-[#4e92db] bg-white p-0 hover:border-[#176ec5] hover:bg-[#4e92db] hover:shadow-[0_0_0_4px_rgb(45_124_207_/_16%)] data-[state=active]:border-[#176ec5] data-[state=active]:bg-[#4e92db] data-[state=active]:shadow-[0_0_0_4px_rgb(45_124_207_/_16%)]"
+                    className="absolute right-[-8px] top-[calc(50%-7px)] z-[4] h-[14px] w-[14px] cursor-crosshair rounded-full border-2 border-[#4e92db] bg-white p-0 hover:border-[#176ec5] hover:bg-[#4e92db] hover:ring-4 hover:ring-brand/15 data-[state=active]:border-[#176ec5] data-[state=active]:bg-[#4e92db] data-[state=active]:ring-4 data-[state=active]:ring-brand/15"
                    data-state={linkSourceId === node.node_id ? "active" : "idle"}
                    type="button"
                    aria-label={`从${node.node_name}开始连线`}
@@ -647,7 +648,7 @@ export default function SchedulePage({
          </footer>
        </main>

-        <aside className="grid min-h-0 overflow-hidden rounded-[7px] border border-line bg-white shadow-[0_2px_7px_rgb(25_46_73_/_3%)] [grid-template-rows:repeat(2,minmax(0,1fr))]">
+        <aside className="grid min-h-0 overflow-hidden rounded-[7px] border border-line bg-white shadow-md [grid-template-rows:repeat(2,minmax(0,1fr))]">
          <div className="min-h-0 overflow-auto">
            {selectedNode ? (
              <NodeInspector
@@ -682,7 +683,7 @@ export default function SchedulePage({

      {contextMenu && (
        <div
-          className="fixed z-[60] min-w-[168px] rounded-[8px] border border-[#d9e3ec] bg-white p-[5px] shadow-[0_14px_36px_rgb(14_35_57_/_22%)]"
+          className="fixed z-[60] min-w-[168px] rounded-[8px] border border-[#d9e3ec] bg-white p-[5px] shadow-lg"
          role="menu"
          style={{ left: contextMenu.x, top: contextMenu.y }}
          onPointerDown={(event) => event.stopPropagation()}
@@ -783,7 +784,7 @@ export default function SchedulePage({
                  onFocus={(event) => event.currentTarget.select()}
                />
              </label>
-              <div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
+              <div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
                <Button
                  type="button"
                  variant="outline"
@@ -802,7 +803,7 @@ export default function SchedulePage({
                  className={dialogPrimaryButtonClass}
                >
                  {busy === "create-schedule"
-                    ? <span className="button-spinner" />
+                    ? <Loader2Icon className="size-4 animate-spin" />
                    : <Plus size={15} />}
                  {busy === "create-schedule" ? "正在创建…" : "创建调度"}
                </Button>
@@ -812,7 +813,7 @@ export default function SchedulePage({

      {busy && (
        <div
-          className="absolute bottom-[22px] right-[22px] z-[20] flex min-h-[38px] items-center gap-2 rounded-[7px] border border-[#c9dcee] bg-white px-[13px] text-[11px] text-[#4e657d] shadow-[0_8px_25px_rgb(28_56_86_/_15%)]"
+          className="absolute bottom-[22px] right-[22px] z-[20] flex min-h-[38px] items-center gap-2 rounded-[7px] border border-[#c9dcee] bg-white px-[13px] text-[11px] text-[#4e657d] shadow-lg"
          aria-live="polite"
        >
          <span className="h-[15px] w-[15px] rounded-full border-2 border-[#b9d4ef] border-t-brand" />