refactor: update artifact list style
This commit is contained in:
tao.chen
@@ -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 (
|
||||
|
||||
@@ -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,45 +73,89 @@ 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) => (
|
||||
<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>
|
||||
)) : (
|
||||
{groups.length === 0 ? (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export const ArtifactList = memo(ArtifactListImpl);
|
||||
export const ArtifactList = memo(ArtifactListImpl);
|
||||
@@ -653,14 +653,8 @@ export default function SchedulePage({
|
||||
</>
|
||||
)}
|
||||
{contextMenu.kind === "artifact" && (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => useSchedulesStore.getState().removeArtifact(contextMenu.artifact)}
|
||||
>
|
||||
<Icon name="close" size={14} />
|
||||
移出调度列表
|
||||
</button>
|
||||
// 移出调度列表 入口已移除:右键 artifact 只剩查看/绑定等只读操作。
|
||||
null
|
||||
)}
|
||||
{contextMenu.kind === "node" && (
|
||||
<button
|
||||
|
||||
@@ -272,44 +272,370 @@
|
||||
box-shadow: 0 0 0 3px rgb(24 185 121 / 12%);
|
||||
}
|
||||
|
||||
.artifact-tip {
|
||||
margin: 0 11px 8px;
|
||||
padding: 7px 8px;
|
||||
border-radius: 5px;
|
||||
color: #6f8297;
|
||||
background: #f3f7fb;
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
/* =========================================================
|
||||
* Artifact List
|
||||
* 稳定版本脚本 / Notebook 资源列表
|
||||
* ========================================================= */
|
||||
|
||||
.artifact-list {
|
||||
min-height: 0;
|
||||
padding: 0 8px 9px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.artifact-card {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
.artifact-list::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
border: 1px solid #e2e9f0;
|
||||
overflow: hidden;
|
||||
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+ 张卡片上快速
|
||||
划过鼠标会触发频繁重绘,导致悬浮卡顿;拖动时也会让 drag image 变重、
|
||||
视觉上"粘"在半动画上。直接瞬变,干净利落。 */
|
||||
|
||||
transition:
|
||||
border-color .14s ease,
|
||||
background-color .14s ease;
|
||||
}
|
||||
|
||||
.artifact-card:hover {
|
||||
border-color: #98bee7;
|
||||
box-shadow: 0 3px 10px rgb(40 96 155 / 8%);
|
||||
transform: translateY(-1px);
|
||||
.artifact-version:hover {
|
||||
border-color: #a8c8e9;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user