chore:调度文件拆分

2026-08-05 15:58:18 +08:00
parent 8c4d2c0517
commit 9b5de51a68
9 changed files with 771 additions and 644 deletions
@@ -0,0 +1,73 @@
+import { type Schedule } from "../../services/api";
+import Icon from "../../components/common/Icon";
+
+export function ScheduleList({
+  schedules,
+  selectedScheduleId,
+  keyword,
+  loading,
+  onSelect,
+  onContextMenu,
+  onKeywordChange,
+}: {
+  schedules: Schedule[];
+  selectedScheduleId: string | null;
+  keyword: string;
+  loading: boolean;
+  onSelect: (scheduleId: string) => void;
+  onContextMenu: (event: React.MouseEvent, schedule: Schedule | null) => void;
+  onKeywordChange: (keyword: string) => void;
+}) {
+  const filtered = keyword.trim()
+    ? schedules.filter((item) => item.schedule_name.toLowerCase().includes(keyword.trim().toLowerCase()))
+    : schedules;
+
+  return (
+    <section className="schedule-panel schedule-list-panel">
+      <div
+        className="schedule-panel__title"
+        onContextMenu={(event) => onContextMenu(event, null)}
+      >
+        <div><strong>调度方案</strong><span>{schedules.length}</span></div>
+      </div>
+      <label className="schedule-search">
+        <Icon name="search" size={15} />
+        <input
+          value={keyword}
+          placeholder="搜索调度名称"
+          onChange={(event) => onKeywordChange(event.target.value)}
+        />
+      </label>
+      <div
+        className="schedule-list"
+        onContextMenu={(event) => onContextMenu(event, null)}
+      >
+        {loading ? (
+          <p className="schedule-empty">正在加载调度方案…</p>
+        ) : filtered.length ? (
+          filtered.map((item) => (
+            <button
+              className={`schedule-card${
+                selectedScheduleId === item.schedule_id ? " schedule-card--active" : ""
+              }`}
+              key={item.schedule_id}
+              type="button"
+              onClick={() => onSelect(item.schedule_id)}
+              onContextMenu={(event) => onContextMenu(event, item)}
+            >
+              <span className={`schedule-status${item.enabled ? " is-enabled" : ""}`} />
+              <span>
+                <strong>{item.schedule_name}</strong>
+                <small>
+                  {item.node_count} 个节点 · {item.enabled ? "已启用" : "未启用"}
+                </small>
+              </span>
+            </button>
+          ))
+        ) : (
+          <p className="schedule-empty">暂无调度方案</p>
+        )}
+      </div>
+    </section>
+  );
+}