refactor: update artifact list style

frontend/app/components/common/Icon.tsx

@@ -23,7 +23,8 @@ type IconName =
   | "menu"
   | "external"
   | "release"
-  | "play";
+  | "play"
+  | "grip-vertical";
 
 type IconProps = {
   name: IconName;
@@ -181,6 +182,16 @@ export default function Icon({
       </>
     ),
     play: <path d="m8 5 11 7-11 7V5Z" />,
+    "grip-vertical": (
+      <>
+        <circle cx="9" cy="6" r="1" fill="currentColor" stroke="none" />
+        <circle cx="9" cy="12" r="1" fill="currentColor" stroke="none" />
+        <circle cx="9" cy="18" r="1" fill="currentColor" stroke="none" />
+        <circle cx="15" cy="6" r="1" fill="currentColor" stroke="none" />
+        <circle cx="15" cy="12" r="1" fill="currentColor" stroke="none" />
+        <circle cx="15" cy="18" r="1" fill="currentColor" stroke="none" />
+      </>
+    ),
   };
 
   return (

frontend/app/features/schedules/ArtifactList.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useMemo, useState } from "react";
 
 import { type ScheduleArtifact } from "../../services/api";
 import Icon from "../../components/common/Icon";
@@ -29,10 +29,41 @@ function ArtifactListImpl({
       ))
     : artifacts;
 
+  const [expandedScriptNames, setExpandedScriptNames] = useState<Set<string>>(new Set());
+
+  const groups = useMemo(() => {
+    const map = new Map<string, ScheduleArtifact[]>();
+    for (const item of filtered) {
+      const list = map.get(item.script_name);
+      if (list) list.push(item);
+      else map.set(item.script_name, [item]);
+    }
+    // 组内按 created_at desc,version_label desc 兜底
+    for (const list of map.values()) {
+      list.sort((a, b) => {
+        if (a.created_at !== b.created_at) return a.created_at < b.created_at ? 1 : -1;
+        return a.version_label < b.version_label ? 1 : -1;
+      });
+    }
+    return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
+  }, [filtered]);
+
+  function toggle(scriptName: string) {
+    setExpandedScriptNames((prev) => {
+      const next = new Set(prev);
+      if (next.has(scriptName)) next.delete(scriptName);
+      else next.add(scriptName);
+      return next;
+    });
+  }
+
   return (
     <section className="schedule-panel schedule-artifacts-panel">
       <div className="schedule-panel__title">
-        <div><strong>稳定版本脚本</strong><span>{artifacts.length}</span></div>
+        <div>
+          <strong>稳定版本脚本</strong>
+          <span className="schedule-panel__count">{artifacts.length}</span>
+        </div>
       </div>
       <label className="schedule-search">
         <Icon name="search" size={15} />
@@ -42,43 +73,87 @@ function ArtifactListImpl({
           onChange={(event) => onKeywordChange(event.target.value)}
         />
       </label>
-      <p className="artifact-tip">拖动卡片到画布，节点将保存 versions_id</p>
       <div className="artifact-list">
-        {filtered.length ? filtered.map((artifact) => (
+        {groups.length === 0 ? (
-          <div
-            className="artifact-card"
-            draggable
-            key={artifact.versions_id}
-            onDragStart={(event) => {
-              event.dataTransfer.effectAllowed = "copy";
-              event.dataTransfer.setData(
-                "application/x-model-platform-version",
-                artifact.versions_id,
-              );
-              event.dataTransfer.setData("text/plain", artifact.versions_id);
-            }}
-            onContextMenu={(event) => onContextMenu(event, artifact)}
-            onDoubleClick={() => onDoubleClick(artifact)}
-          >
-            <span className={`artifact-card__icon artifact-card__icon--${artifact.script_type}`}>
-              <Icon
-                name={artifact.script_type === "notebook" ? "notebook" : "python"}
-                size={17}
-              />
-            </span>
-            <span>
-              <strong>{artifact.script_name}</strong>
-              <small>
-                {artifact.version_label} · {shortHash(artifact.content_hash)}
-              </small>
-            </span>
-          </div>
-        )) : (
           <p className="schedule-empty">
             暂无稳定版本，请先在"构建脚本"中发布
           </p>
+        ) : (
+          groups.map(([scriptName, items]) => {
+            const isExpanded = expandedScriptNames.has(scriptName);
+            const scriptType = items[0].script_type;
+            const iconName = scriptType === "notebook" ? "notebook" : "python";
+            return (
+              <div key={scriptName} className="artifact-group">
+                <button
+                  type="button"
+                  className="artifact-group__header"
+                  aria-expanded={isExpanded}
+                  onClick={() => toggle(scriptName)}
+                >
+                  <span className="artifact-group__main">
+                    <span className={`artifact-group__chevron${isExpanded ? " is-open" : ""}`}>
+                      <Icon name="chevron" size={14} />
+                    </span>
+                    <span className={`artifact-group__icon artifact-group__icon--${scriptType}`}>
+                      <Icon name={iconName} size={14} />
+                    </span>
+                    <span className="artifact-group__name" title={scriptName}>
+                      {scriptName}
+                    </span>
+                  </span>
+                  {items.length > 1 && (
+                    <span className="artifact-group__count">{items.length}</span>
+                  )}
+                </button>
+                {isExpanded && (
+                  <div className="artifact-versions">
+                    {items.map((artifact) => (
+                        <div
+                          className="artifact-version"
+                          draggable
+                          key={artifact.versions_id}
+                          onDragStart={(event) => {
+                            event.dataTransfer.effectAllowed = "copy";
+                            event.dataTransfer.setData(
+                              "application/x-model-platform-version",
+                              artifact.versions_id,
+                            );
+                            event.dataTransfer.setData("text/plain", artifact.versions_id);
+                          }}
+                          onContextMenu={(event) => onContextMenu(event, artifact)}
+                          onDoubleClick={() => onDoubleClick(artifact)}
+                        >
+                          <span className="artifact-version__main">
+                            <span className="artifact-version__handle">
+                              <Icon name="grip-vertical" size={13} />
+                            </span>
+                            <span className="artifact-version__name">
+                              {artifact.version_label}
+                            </span>
+                            <span className="artifact-version__commit">
+                              {shortHash(artifact.content_hash)}
+                            </span>
+                          </span>
+                          <span className="artifact-version__action">
+                            <Icon name="external" size={12} />
+                          </span>
+                        </div>
+                      ))}
+                  </div>
+                )}
+              </div>
+            );
+          })
         )}
       </div>
+      <p className="artifact-tip artifact-tip--footer">
+        <span>按住</span>
+        <span className="artifact-tip__grip">
+          <Icon name="grip-vertical" size={12} />
+        </span>
+        <span>拖拽卡片到画布即可绑定节点</span>
+      </p>
     </section>
   );
 }

frontend/app/features/schedules/SchedulePage.tsx

@@ -653,14 +653,8 @@ export default function SchedulePage({
             </>
           )}
           {contextMenu.kind === "artifact" && (
-            <button
+            // 移出调度列表 入口已移除:右键 artifact 只剩查看/绑定等只读操作。
-              type="button"
+            null
-              role="menuitem"
-              onClick={() => useSchedulesStore.getState().removeArtifact(contextMenu.artifact)}
-            >
-              <Icon name="close" size={14} />
-              移出调度列表
-            </button>
           )}
           {contextMenu.kind === "node" && (
             <button

frontend/app/styles/schedule.css

@@ -272,44 +272,370 @@
   box-shadow: 0 0 0 3px rgb(24 185 121 / 12%);
 }
 
-.artifact-tip {
+/* =========================================================
-  margin: 0 11px 8px;
+ * Artifact List
-  padding: 7px 8px;
+ * 稳定版本脚本 / Notebook 资源列表
-  border-radius: 5px;
+ * ========================================================= */
-  color: #6f8297;
+
-  background: #f3f7fb;
+.artifact-list {
-  font-size: 10px;
+  min-height: 0;
-  line-height: 1.45;
+  padding: 0 8px 9px;
+  overflow: auto;
 }
 
-.artifact-card {
+.artifact-list::-webkit-scrollbar {
-  display: flex;
+  width: 5px;
-  min-height: 58px;
+}
-  align-items: center;
+
-  gap: 9px;
+.artifact-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.artifact-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #d9e1e9;
+}
+
+.artifact-list::-webkit-scrollbar-thumb:hover {
+  background: #c4d0dc;
+}
+
+
+/* ---------------------------------------------------------
+ * Artifact Group
+ * --------------------------------------------------------- */
+
+.artifact-group {
   margin-bottom: 6px;
-  padding: 8px 9px;
+  overflow: hidden;
-  border: 1px solid #e2e9f0;
+  border: 1px solid #edf1f5;
+  border-radius: 8px;
+  background: #fff;
+  transition:
+    border-color .16s ease,
+    box-shadow .16s ease;
+}
+
+.artifact-group:hover {
+  border-color: #e1e8ef;
+}
+
+
+/* ---------------------------------------------------------
+ * Group Header
+ * --------------------------------------------------------- */
+
+.artifact-group__header {
+  display: flex;
+  width: 100%;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 8px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.artifact-group__header:hover {
+  background: #f8fafc;
+}
+
+.artifact-group__main {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+}
+
+.artifact-group__chevron {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  color: #9aa7b5;
+  transition: transform .18s ease;
+}
+
+.artifact-group__chevron.is-open {
+  transform: rotate(90deg);
+}
+
+
+/* ---------------------------------------------------------
+ * File Type Icon
+ * --------------------------------------------------------- */
+
+.artifact-group__icon {
+  display: grid;
+  width: 27px;
+  height: 27px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 6px;
+}
+
+.artifact-group__icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.artifact-group__icon--notebook {
+  color: #dc5c52;
+  background: #fff0ee;
+}
+
+.artifact-group__icon--python {
+  color: #326fc1;
+  background: #eaf3ff;
+}
+
+.artifact-group__name {
+  min-width: 0;
+  overflow: hidden;
+  color: #33465a;
+  font-size: 11px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+/* ---------------------------------------------------------
+ * Version Count
+ * --------------------------------------------------------- */
+
+.artifact-group__count {
+  display: inline-flex;
+  min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 2px 6px;
+  border: 1px solid #e5eaf0;
+  border-radius: 999px;
+  color: #8794a3;
+  background: #f5f7fa;
+  font-size: 9px;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+
+/* ---------------------------------------------------------
+ * Version List
+ * --------------------------------------------------------- */
+
+.artifact-versions {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 7px 7px 7px 29px;
+  border-top: 1px solid #edf1f5;
+  background: #f8fafc;
+}
+
+
+/* ---------------------------------------------------------
+ * Version Item
+ * --------------------------------------------------------- */
+
+.artifact-version {
+  display: flex;
+  min-height: 34px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 7px;
+  padding: 6px 7px;
+  border: 1px solid #e4e9ee;
   border-radius: 6px;
   background: #fff;
   cursor: grab;
   user-select: none;
-  /* hover 效果(border / box-shadow / transform)全部走合成层友好的属性,
+
-     但禁止 transition:box-shadow 是 paint 操作,在 20+ 张卡片上快速
+  transition:
-     划过鼠标会触发频繁重绘,导致悬浮卡顿;拖动时也会让 drag image 变重、
+    border-color .14s ease,
-     视觉上"粘"在半动画上。直接瞬变,干净利落。 */
+    background-color .14s ease;
 }
 
-.artifact-card:hover {
+.artifact-version:hover {
-  border-color: #98bee7;
+  border-color: #a8c8e9;
-  box-shadow: 0 3px 10px rgb(40 96 155 / 8%);
+  background: #fbfdff;
-  transform: translateY(-1px);
 }
 
-.artifact-card:active {
+.artifact-version:active {
   cursor: grabbing;
 }
 
+.artifact-version__main {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 5px;
+}
+
+
+/* ---------------------------------------------------------
+ * Drag Handle
+ * --------------------------------------------------------- */
+
+.artifact-version__handle {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  color: #c4cdd6;
+}
+
+.artifact-version:hover .artifact-version__handle {
+  color: #7e8d9d;
+}
+
+
+/* ---------------------------------------------------------
+ * Version
+ * --------------------------------------------------------- */
+
+.artifact-version__name {
+  flex: 0 0 auto;
+  color: #526477;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+
+/* ---------------------------------------------------------
+ * Commit Hash
+ * --------------------------------------------------------- */
+
+.artifact-version__commit {
+  min-width: 0;
+  overflow: hidden;
+  color: #9aa5b1;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+  font-size: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+/* ---------------------------------------------------------
+ * Open / Bind Icon
+ * --------------------------------------------------------- */
+
+.artifact-version__action {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 4px;
+  color: #c1cad3;
+}
+
+.artifact-version:hover .artifact-version__action {
+  color: #287ac5;
+  background: #eef6ff;
+}
+
+.artifact-version__action svg {
+  width: 12px;
+  height: 12px;
+}
+
+
+/* ---------------------------------------------------------
+ * Artifact Tip
+ * --------------------------------------------------------- */
+
+.artifact-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin: 3px 10px 9px;
+  padding: 7px 8px;
+  border: 1px solid #edf1f5;
+  border-radius: 6px;
+  color: #8795a4;
+  background: #f8fafc;
+  font-size: 9px;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.artifact-tip svg {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  color: #9eabb8;
+}
+
+.artifact-tip__grip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+/* ---------------------------------------------------------
+ * Empty (artifact-list 内的)
+ * --------------------------------------------------------- */
+
+.artifact-list .schedule-empty {
+  margin: 18px 10px;
+  color: #9aa6b3;
+  font-size: 10px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+
+/* ---------------------------------------------------------
+ * Responsive
+ * --------------------------------------------------------- */
+
+@media (max-width: 1280px) {
+  .artifact-group__header {
+    padding-right: 7px;
+    padding-left: 7px;
+  }
+
+  .artifact-group__name {
+    max-width: 125px;
+  }
+
+  .artifact-versions {
+    padding-left: 27px;
+  }
+
+  .artifact-version {
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+}
+
+
+/* ---------------------------------------------------------
+ * Shared
+ * artifact-card__icon* 也被 NodeInspector 复用(节点 inspector
+ * 头部图标),保留原 .artifact-card__icon 形状/大小。
+ * --------------------------------------------------------- */
+
 .artifact-card__icon {
   display: grid;
   width: 31px;
@@ -329,28 +655,6 @@
   background: #eaf3ff;
 }
 
-.artifact-card > span:last-child {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.artifact-card strong {
-  max-width: 190px;
-  overflow: hidden;
-  color: #2f4257;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.artifact-card small {
-  color: #8e9bab;
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-  font-size: 9px;
-}
-
 .schedule-empty {
   margin: 18px 10px;
   color: #95a2b0;