tao.chen/model-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: style

Browse Source
This commit is contained in:
tao.chen
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent 250d953eb3
commit 1f9c4a2cd9
34 changed files with 207 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/schedules/ArtifactList.tsx
+4 -4
View File
@@ -74,7 +74,7 @@ function ArtifactListImpl({
</span>
</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%)]">
<label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-line bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:ring-3 focus-within:ring-brand/10">
<Search size={15} />
<input
className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
@@ -95,7 +95,7 @@ function ArtifactListImpl({
return (
<div
key={scriptName}
className="mb-1.5 overflow-hidden rounded-[8px] border border-line-soft bg-white transition-[border-color,box-shadow] duration-[160ms] hover:border-[#e1e8ef]"
className="mb-1.5 overflow-hidden rounded-[8px] border border-line-soft bg-white transition-[border-color,box-shadow] duration-150 hover:border-[#e1e8ef]"
>
<button
type="button"
@@ -106,7 +106,7 @@ function ArtifactListImpl({
<span className="flex min-w-0 items-center gap-[7px]">
<span
data-state={isExpanded ? "open" : "closed"}
className="h-[14px] w-[14px] flex-none text-[#9aa7b5] transition-transform duration-[180ms] data-[state=open]:rotate-90"
className="h-[14px] w-[14px] flex-none text-[#9aa7b5] transition-transform duration-200 data-[state=open]:rotate-90"
>
<ChevronRight size={14} />
</span>
@@ -140,7 +140,7 @@ function ArtifactListImpl({
<div className="flex flex-col gap-[5px] border-t border-line-soft bg-[#f8fafc] p-[7px_7px_7px_27px] min-[1281px]:pl-[29px]">
{items.map((artifact) => (
<div
className="group flex min-h-[34px] cursor-grab select-none items-center justify-between gap-[7px] rounded-[6px] border border-[#e4e9ee] bg-white p-1.5 transition-[border-color,background-color] duration-[140ms] hover:border-[#a8c8e9] hover:bg-[#fbfdff] active:cursor-grabbing min-[1281px]:px-[7px]"
className="group flex min-h-[34px] cursor-grab select-none items-center justify-between gap-[7px] rounded-[6px] border border-[#e4e9ee] bg-white p-1.5 transition-[border-color,background-color] duration-150 hover:border-[#a8c8e9] hover:bg-[#fbfdff] active:cursor-grabbing min-[1281px]:px-[7px]"
draggable
key={artifact.versions_id}
onDragStart={(event) => {
frontend/app/features/schedules/NodeInspector.tsx
+18 -18
View File
@@ -20,7 +20,7 @@ export function NodeInspector({
}) {
return (
<div className="flex min-h-full flex-col">
<section className="flex flex-row items-center gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-row items-center gap-[10px] border-b border-line p-[14px]">
<span
className={`grid h-[31px] w-[31px] flex-none place-items-center rounded-[6px] ${
node.version.script_type === "notebook"
@@ -41,7 +41,7 @@ export function NodeInspector({
</strong>
</div>
</section>
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
<h3 className="mb-[2px] text-[13px] text-[#273b50]">稳定版本</h3>
<div className="flex flex-col gap-[5px] rounded-[6px] border border-[#dae6f2] bg-[#f6faff] p-[9px]">
<strong className="text-[11px] text-[#35516e]">{node.version.script_name}</strong>
@@ -56,12 +56,12 @@ export function NodeInspector({
</small>
</div>
</section>
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
<h3 className="mb-[2px] text-[13px] text-[#273b50]">节点信息</h3>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">节点名称</span>
<span className="text-[10px] font-semibold text-ink-caption">节点名称</span>
<input
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.nodeName}
onChange={(event) => onChange({
...form,
@@ -71,11 +71,11 @@ export function NodeInspector({
</label>
<div className="grid grid-cols-2 gap-2">
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">超时（秒）</span>
<span className="text-[10px] font-semibold text-ink-caption">超时（秒）</span>
<input
type="number"
min="1"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.timeoutSeconds}
onChange={(event) => onChange({
...form,
@@ -84,12 +84,12 @@ export function NodeInspector({
/>
</label>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">重试次数</span>
<span className="text-[10px] font-semibold text-ink-caption">重试次数</span>
<input
type="number"
min="0"
max="10"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.retryCount}
onChange={(event) => onChange({
...form,
@@ -100,11 +100,11 @@ export function NodeInspector({
</div>
<div className="grid grid-cols-2 gap-2">
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">重试间隔（秒）</span>
<span className="text-[10px] font-semibold text-ink-caption">重试间隔（秒）</span>
<input
type="number"
min="0"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.retryIntervalSec}
onChange={(event) => onChange({
...form,
@@ -113,9 +113,9 @@ export function NodeInspector({
/>
</label>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">Python 版本</span>
<span className="text-[10px] font-semibold text-ink-caption">Python 版本</span>
<select
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.pythonVersion}
onChange={(event) => onChange({
...form,
@@ -131,12 +131,12 @@ export function NodeInspector({
</label>
</div>
</section>
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
<h3 className="mb-[2px] text-[13px] text-[#273b50]">运行参数</h3>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">arguments_json</span>
<span className="text-[10px] font-semibold text-ink-caption">arguments_json</span>
<textarea
className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
rows={5}
spellCheck={false}
value={form.argumentsJson}
@@ -147,9 +147,9 @@ export function NodeInspector({
/>
</label>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">env_refs_json</span>
<span className="text-[10px] font-semibold text-ink-caption">env_refs_json</span>
<textarea
className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="w-full resize-y rounded-[5px] border border-line p-[7px_8px] font-mono text-[10px] leading-[1.5] !bg-[#f8fafc] !text-[#37516a] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
rows={4}
spellCheck={false}
value={form.envRefsJson}
frontend/app/features/schedules/RunHistory.tsx
+8 -8
View File
@@ -216,8 +216,8 @@ export function RunHistory({
};
return (
<section className="flex min-h-0 flex-col border-t border-[#e0e7ee] bg-[#fbfcfe]">
<header className="flex min-h-[44px] items-center justify-between border-b border-[#e8edf2] bg-white px-3">
<section className="flex min-h-0 flex-col border-t border-line bg-[#fbfcfe]">
<header className="flex min-h-[44px] items-center justify-between border-b border-line bg-white px-3">
<div className="flex items-center gap-[7px]">
<strong className="text-[12px] text-[#2b4056]">运行记录</strong>
<span className="inline-grid h-[18px] min-w-[18px] place-items-center rounded-[9px] bg-[#edf2f7] text-[9px] text-[#71849a]">
@@ -250,7 +250,7 @@ export function RunHistory({
return (
<article
data-state={expanded ? "expanded" : "collapsed"}
className="flex-none overflow-hidden rounded-[6px] border border-[#e1e8ef] bg-white data-[state=expanded]:border-[#b9d6f1] data-[state=expanded]:shadow-[0_3px_10px_rgb(38_117_185_/_8%)]"
className="flex-none overflow-hidden rounded-[6px] border border-[#e1e8ef] bg-white data-[state=expanded]:border-[#b9d6f1] data-[state=expanded]:shadow-md"
key={run.run_id}
>
<div
@@ -295,7 +295,7 @@ export function RunHistory({
onClick={() => toggleRun(run.run_id)}
/>
<section
className="fixed left-1/2 top-1/2 z-[41] grid max-h-[min(760px,calc(100vh-64px))] w-[min(780px,calc(100vw-48px))] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-[12px] border border-[#d8e2eb] bg-white shadow-[0_24px_80px_rgb(8_27_48_/_30%)] [grid-template-rows:auto_minmax(0,1fr)]"
className="fixed left-1/2 top-1/2 z-[41] grid max-h-[min(760px,calc(100vh-64px))] w-[min(780px,calc(100vw-48px))] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-[12px] border border-[#d8e2eb] bg-white shadow-xl [grid-template-rows:auto_minmax(0,1fr)]"
role="dialog"
aria-modal="true"
aria-label="调度运行结果"
@@ -311,7 +311,7 @@ export function RunHistory({
</code>
</div>
<button
className="grid h-[34px] w-[34px] cursor-pointer place-items-center rounded-[7px] border border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]"
className="grid h-[34px] w-[34px] cursor-pointer place-items-center rounded-[7px] border border-line bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]"
type="button"
aria-label="关闭运行结果"
onClick={() => toggleRun(run.run_id)}
@@ -321,13 +321,13 @@ export function RunHistory({
</header>
<div className="min-h-0 overflow-auto bg-[#f8fbfe] p-[18px]">
{detailLoadingId === run.run_id && !detail ? (
<p className="m-0 p-[8px_4px] text-center text-[9px] leading-[1.5] text-[#8796a6]">
<p className="m-0 p-[8px_4px] text-center text-[9px] leading-[1.5] text-ink-subtle">
正在加载运行详情…
</p>
) : detailErrors[run.run_id] ? (
<p
data-state="error"
className="m-0 p-[8px_4px] text-center text-[9px] leading-[1.5] text-[#8796a6] data-[state=error]:text-[#bf5656]"
className="m-0 p-[8px_4px] text-center text-[9px] leading-[1.5] text-ink-subtle data-[state=error]:text-[#bf5656]"
>
{detailErrors[run.run_id]}
</p>
@@ -369,7 +369,7 @@ export function RunHistory({
)}
<div className="flex flex-col gap-2.5">
{detail.node_runs.length === 0 ? (
<p className="m-0 p-[8px_4px] text-center text-[9px] leading-[1.5] text-[#8796a6]">
<p className="m-0 p-[8px_4px] text-center text-[9px] leading-[1.5] text-ink-subtle">
节点尚未开始执行
</p>
) : detail.node_runs.map((nodeRun) => {
frontend/app/features/schedules/ScheduleInspector.tsx
+17 -17
View File
@@ -43,12 +43,12 @@ export function ScheduleInspector({
}
return (
<div className="flex min-h-full flex-col">
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
<h3 className="mb-[2px] text-[13px] text-[#273b50]">基本信息</h3>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">调度名称</span>
<span className="text-[10px] font-semibold text-ink-caption">调度名称</span>
<input
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.scheduleName}
onChange={(event) => onChange({
...form,
@@ -57,9 +57,9 @@ export function ScheduleInspector({
/>
</label>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">说明</span>
<span className="text-[10px] font-semibold text-ink-caption">说明</span>
<textarea
className="w-full resize-y rounded-[5px] border border-line bg-white p-[7px_8px] text-[11px] leading-[1.5] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="w-full resize-y rounded-[5px] border border-line bg-white p-[7px_8px] text-[11px] leading-[1.5] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
rows={2}
value={form.description}
onChange={(event) => onChange({
@@ -85,12 +85,12 @@ export function ScheduleInspector({
</label>
</section>
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
<h3 className="mb-[2px] text-[13px] text-[#273b50]">触发器</h3>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">触发方式</span>
<span className="text-[10px] font-semibold text-ink-caption">触发方式</span>
<select
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.triggerType}
onChange={(event) => onChange({
...form,
@@ -106,9 +106,9 @@ export function ScheduleInspector({
{form.triggerType === "cron" && (
<>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">Cron（分 时 日 月 周）</span>
<span className="text-[10px] font-semibold text-ink-caption">Cron（分 时 日 月 周）</span>
<input
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.cronExpression}
onChange={(event) => onChange({
...form,
@@ -117,9 +117,9 @@ export function ScheduleInspector({
/>
</label>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">时区</span>
<span className="text-[10px] font-semibold text-ink-caption">时区</span>
<input
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.timezone}
onChange={(event) => onChange({
...form,
@@ -150,16 +150,16 @@ export function ScheduleInspector({
)}
</section>
<section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
<section className="flex flex-col gap-[10px] border-b border-line p-[14px]">
<h3 className="mb-[2px] text-[13px] text-[#273b50]">执行策略</h3>
<div className="grid grid-cols-2 gap-2">
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">最大并发</span>
<span className="text-[10px] font-semibold text-ink-caption">最大并发</span>
<input
type="number"
min="1"
max="64"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.maxConcurrency}
onChange={(event) => onChange({
...form,
@@ -168,9 +168,9 @@ export function ScheduleInspector({
/>
</label>
<label className="flex flex-col gap-[5px]">
<span className="text-[10px] font-semibold text-[#758497]">失败策略</span>
<span className="text-[10px] font-semibold text-ink-caption">失败策略</span>
<select
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-brand/70 focus:ring-3 focus:ring-brand/10"
value={form.failurePolicy}
onChange={(event) => onChange({
...form,
frontend/app/features/schedules/ScheduleList.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export function ScheduleList({
</span>
</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%)]">
<label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-line bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:ring-3 focus-within:ring-brand/10">
<Search size={15} />
<input
className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
@@ -64,7 +64,7 @@ export function ScheduleList({
>
<span
data-state={item.enabled ? "enabled" : "disabled"}
className="h-2 w-2 flex-none rounded-full bg-[#aeb9c5] shadow-[0_0_0_3px_rgb(142_156_171_/_11%)] data-[state=enabled]:bg-success data-[state=enabled]:shadow-[0_0_0_3px_rgb(24_185_121_/_12%)]"
className="h-2 w-2 flex-none rounded-full bg-[#aeb9c5] ring-3 ring-ink-subtle/15 data-[state=enabled]:bg-success data-[state=enabled]:ring-3 data-[state=enabled]:ring-success/10"
/>
<span className="flex min-w-0 flex-col gap-1">
<strong className="max-w-[205px] truncate text-[12px] text-[#283b50]">
frontend/app/features/schedules/SchedulePage.tsx
+12 -11
View File
@@ -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" />