Develop #41
@@ -1,7 +1,14 @@
|
||||
import { memo, useMemo, useState } from "react";
|
||||
|
||||
import { type ScheduleArtifact } from "../../services/api";
|
||||
import Icon from "../../components/common/Icon";
|
||||
import { type ScheduleArtifact } from "~/services/api";
|
||||
import {
|
||||
BookText,
|
||||
ChevronRight,
|
||||
ExternalLink,
|
||||
FileCode2,
|
||||
GripVertical,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import { shortHash } from "./utils";
|
||||
|
||||
// 包裹 memo 让父级 SchedulePage 在画布交互(setSelectedNodeId /
|
||||
@@ -68,7 +75,7 @@ function ArtifactListImpl({
|
||||
</div>
|
||||
</div>
|
||||
<label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-[#dce5ed] bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]">
|
||||
<Icon name="search" size={15} />
|
||||
<Search size={15} />
|
||||
<input
|
||||
className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
|
||||
value={keyword}
|
||||
@@ -85,7 +92,6 @@ function ArtifactListImpl({
|
||||
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}
|
||||
@@ -102,7 +108,7 @@ function ArtifactListImpl({
|
||||
data-state={isExpanded ? "open" : "closed"}
|
||||
className="h-[14px] w-[14px] flex-none text-[#9aa7b5] transition-transform duration-[180ms] data-[state=open]:rotate-90"
|
||||
>
|
||||
<Icon name="chevron" size={14} />
|
||||
<ChevronRight size={14} />
|
||||
</span>
|
||||
<span
|
||||
className={`grid h-[27px] w-[27px] flex-none place-items-center rounded-[6px] ${
|
||||
@@ -111,7 +117,11 @@ function ArtifactListImpl({
|
||||
: "bg-[#eaf3ff] text-[#326fc1]"
|
||||
}`}
|
||||
>
|
||||
<Icon name={iconName} size={14} />
|
||||
{scriptType === "notebook" ? (
|
||||
<BookText size={14} />
|
||||
) : (
|
||||
<FileCode2 size={14} />
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className="max-w-[125px] min-w-0 truncate text-[11px] font-semibold text-[#33465a] min-[1281px]:max-w-none"
|
||||
@@ -146,7 +156,7 @@ function ArtifactListImpl({
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-[5px]">
|
||||
<span className="h-[13px] w-[13px] flex-none text-[#c4cdd6] group-hover:text-[#7e8d9d]">
|
||||
<Icon name="grip-vertical" size={13} />
|
||||
<GripVertical size={13} />
|
||||
</span>
|
||||
<span className="flex-none text-[10px] font-semibold text-[#526477]">
|
||||
{artifact.version_label}
|
||||
@@ -156,7 +166,7 @@ function ArtifactListImpl({
|
||||
</span>
|
||||
</span>
|
||||
<span className="grid h-[18px] w-[18px] flex-none place-items-center rounded-[4px] text-[#c1cad3] group-hover:bg-[#eef6ff] group-hover:text-[#287ac5]">
|
||||
<Icon name="external" size={12} />
|
||||
<ExternalLink size={12} />
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -170,7 +180,7 @@ function ArtifactListImpl({
|
||||
<p className="mx-[10px] mb-[9px] mt-[3px] flex items-center justify-center gap-1 rounded-[6px] border border-line-soft bg-[#f8fafc] p-[7px_8px] text-center text-[9px] leading-[1.45] text-[#8795a4]">
|
||||
<span>按住</span>
|
||||
<span className="inline-flex items-center justify-center text-[#9eabb8]">
|
||||
<Icon name="grip-vertical" size={12} />
|
||||
<GripVertical size={12} />
|
||||
</span>
|
||||
<span>拖拽卡片到画布即可绑定节点</span>
|
||||
</p>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { type ScheduleNode } from "../../services/api";
|
||||
import Icon from "../../components/common/Icon";
|
||||
import { BookText, FileCode2 } from "lucide-react";
|
||||
import { shortHash } from "./utils";
|
||||
import { PYTHON_VERSION_OPTIONS, type NodeForm } from "./state/schedulesStore";
|
||||
|
||||
@@ -28,10 +28,11 @@ export function NodeInspector({
|
||||
: "bg-[#eaf3ff] text-[#326fc1]"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
name={node.version.script_type === "notebook" ? "notebook" : "python"}
|
||||
size={17}
|
||||
/>
|
||||
{node.version.script_type === "notebook" ? (
|
||||
<BookText size={17} />
|
||||
) : (
|
||||
<FileCode2 size={17} />
|
||||
)}
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-col gap-[3px]">
|
||||
<small className="text-[9px] text-[#96a2af]">节点配置</small>
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
} from "../../services/api";
|
||||
|
||||
import { useApi } from "../../context/AuthContext";
|
||||
import Icon from "../../components/common/Icon";
|
||||
import { RefreshCw, X } from "lucide-react";
|
||||
import { useSchedulesStore } from "./state/schedulesStore";
|
||||
import {
|
||||
formatDuration,
|
||||
@@ -231,7 +231,7 @@ export function RunHistory({
|
||||
disabled={disabled || loading}
|
||||
onClick={onRefresh}
|
||||
>
|
||||
<Icon name="refresh" size={13} />
|
||||
<RefreshCw size={13} />
|
||||
</button>
|
||||
</header>
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-[7px] overflow-auto p-[9px]">
|
||||
@@ -316,7 +316,7 @@ export function RunHistory({
|
||||
aria-label="关闭运行结果"
|
||||
onClick={() => toggleRun(run.run_id)}
|
||||
>
|
||||
<Icon name="close" size={16} />
|
||||
<X size={16} />
|
||||
</button>
|
||||
</header>
|
||||
<div className="min-h-0 overflow-auto bg-[#f8fbfe] p-[18px]">
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import Icon from "../../components/common/Icon";
|
||||
|
||||
export function ScheduleCanvasHeader({
|
||||
linkSourceId,
|
||||
onCancelLink,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { type Schedule, type CronPreview } from "../../services/api";
|
||||
import Icon from "../../components/common/Icon";
|
||||
import { Settings } from "lucide-react";
|
||||
import { formatTime } from "./utils";
|
||||
|
||||
type ScheduleForm = {
|
||||
@@ -33,7 +33,7 @@ export function ScheduleInspector({
|
||||
if (!schedule) {
|
||||
return (
|
||||
<div className="flex min-h-full flex-col items-center justify-center p-[30px] text-center text-[#9aa8b6] [&>svg]:mb-[10px] [&>svg]:text-[#93b4d6]">
|
||||
<Icon name="settings" size={28} />
|
||||
<Settings size={28} />
|
||||
<strong className="text-[14px] text-[#516a82]">调度属性</strong>
|
||||
<p className="text-[11px] leading-[1.6]">
|
||||
选中调度方案后可配置触发方式、Cron 和执行策略。
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { type Schedule } from "../../services/api";
|
||||
import Icon from "../../components/common/Icon";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
export function ScheduleList({
|
||||
schedules,
|
||||
@@ -36,7 +36,7 @@ export function ScheduleList({
|
||||
</div>
|
||||
</div>
|
||||
<label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-[#dce5ed] bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]">
|
||||
<Icon name="search" size={15} />
|
||||
<Search size={15} />
|
||||
<input
|
||||
className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
|
||||
value={keyword}
|
||||
|
||||
@@ -9,7 +9,17 @@ import {
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Plus } from 'lucide-react';
|
||||
import {
|
||||
BookText,
|
||||
CalendarClock,
|
||||
Check,
|
||||
FileCode2,
|
||||
PackageOpen,
|
||||
Play,
|
||||
Plus,
|
||||
Settings,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
type Schedule,
|
||||
type ScheduleArtifact,
|
||||
@@ -18,7 +28,6 @@ import {
|
||||
} from "~/services/api";
|
||||
|
||||
import { useApi, useAuth } from "~/context/AuthContext";
|
||||
import Icon from "../../components/common/Icon";
|
||||
import { NodeInspector } from "./NodeInspector";
|
||||
import { RunHistory } from "./RunHistory";
|
||||
import { ScheduleInspector } from "./ScheduleInspector";
|
||||
@@ -92,7 +101,7 @@ function RunNowButton({
|
||||
}
|
||||
onClick={() => useSchedulesStore.getState().runNow()}
|
||||
>
|
||||
<Icon name="play" size={14} />立即运行
|
||||
<Play size={14} />立即运行
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -370,7 +379,7 @@ export default function SchedulePage({
|
||||
disabled={!schedule || Boolean(busy)}
|
||||
onClick={() => useSchedulesStore.getState().saveSchedule()}
|
||||
>
|
||||
<Icon name="check" size={15} />保存配置
|
||||
<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"
|
||||
@@ -517,10 +526,11 @@ export default function SchedulePage({
|
||||
: "bg-[#eaf3ff] text-[#316fbf]"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
name={node.version.script_type === "notebook" ? "notebook" : "python"}
|
||||
size={14}
|
||||
/>
|
||||
{node.version.script_type === "notebook" ? (
|
||||
<BookText size={14} />
|
||||
) : (
|
||||
<FileCode2 size={14} />
|
||||
)}
|
||||
</span>
|
||||
<strong className="min-w-0 flex-1 truncate text-[12px] text-[#243b53]">
|
||||
{node.node_name}
|
||||
@@ -536,7 +546,7 @@ export default function SchedulePage({
|
||||
setSelectedEdgeId(null);
|
||||
}}
|
||||
>
|
||||
<Icon name="settings" size={14} />
|
||||
<Settings size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-2 mb-1.5 truncate text-[10px] text-[#7e8d9d]">
|
||||
@@ -571,7 +581,7 @@ export default function SchedulePage({
|
||||
|
||||
{!schedule ? (
|
||||
<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]">
|
||||
<Icon name="schedule" size={34} />
|
||||
<CalendarClock size={34} />
|
||||
<strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong>
|
||||
<p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度,然后拖入稳定版本脚本。</p>
|
||||
<button
|
||||
@@ -584,7 +594,7 @@ export default function SchedulePage({
|
||||
</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]">
|
||||
<Icon name="release" size={34} />
|
||||
<PackageOpen size={34} />
|
||||
<strong className="text-[14px] text-[#567089]">从稳定版本开始编排</strong>
|
||||
<p className="my-[7px_13px] text-[11px]">把左侧脚本卡片拖到这里,或双击卡片快速加入。</p>
|
||||
</div>
|
||||
@@ -680,7 +690,7 @@ export default function SchedulePage({
|
||||
role="menuitem"
|
||||
onClick={() => useSchedulesStore.getState().renameSchedule(contextMenu.schedule)}
|
||||
>
|
||||
<Icon name="settings" size={14} />
|
||||
<Settings size={14} />
|
||||
改名
|
||||
</button>
|
||||
<button
|
||||
@@ -689,7 +699,7 @@ export default function SchedulePage({
|
||||
role="menuitem"
|
||||
onClick={() => useSchedulesStore.getState().removeSchedule(contextMenu.schedule)}
|
||||
>
|
||||
<Icon name="close" size={14} />
|
||||
<X size={14} />
|
||||
删除调度方案
|
||||
</button>
|
||||
</>
|
||||
@@ -702,7 +712,7 @@ export default function SchedulePage({
|
||||
role="menuitem"
|
||||
onClick={() => useSchedulesStore.getState().removeNode(contextMenu.node)}
|
||||
>
|
||||
<Icon name="close" size={14} />
|
||||
<X size={14} />
|
||||
删除画布节点
|
||||
</button>
|
||||
)}
|
||||
@@ -713,7 +723,7 @@ export default function SchedulePage({
|
||||
role="menuitem"
|
||||
onClick={() => useSchedulesStore.getState().removeEdge(contextMenu.edge)}
|
||||
>
|
||||
<Icon name="close" size={14} />
|
||||
<X size={14} />
|
||||
删除画布连线
|
||||
</button>
|
||||
)}
|
||||
@@ -740,7 +750,7 @@ export default function SchedulePage({
|
||||
disabled={Boolean(busy)}
|
||||
onClick={() => setCreateDialogOpen(false)}
|
||||
>
|
||||
<Icon name="close" />
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleCreateScheduleSubmit}>
|
||||
|
||||
Reference in New Issue
Block a user