update:部分样式优化
This commit is contained in:
@@ -53,7 +53,7 @@ export function Topbar({
|
|||||||
className="grid h-[31px] w-[31px] rotate-180 cursor-pointer place-items-center rounded-[7px] border border-transparent bg-white text-[#7b8999] hover:border-[#b9c9da] hover:bg-[#f7faff]"
|
className="grid h-[31px] w-[31px] rotate-180 cursor-pointer place-items-center rounded-[7px] border border-transparent bg-white text-[#7b8999] hover:border-[#b9c9da] hover:bg-[#f7faff]"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<ChevronRight size={19} />
|
<ChevronRight size={19} className="text-[#748497]"/>
|
||||||
</button>
|
</button>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-[10px] font-[650] uppercase tracking-[0.08em] text-[#94a2b3]">
|
<span className="text-[10px] font-[650] uppercase tracking-[0.08em] text-[#94a2b3]">
|
||||||
@@ -93,10 +93,10 @@ export function Topbar({
|
|||||||
{currentWorkspace.workspace_name}
|
{currentWorkspace.workspace_name}
|
||||||
</strong>
|
</strong>
|
||||||
</span>
|
</span>
|
||||||
<ChevronRight size={15} />
|
<ChevronRight size={15} className="text-[#748497]"/>
|
||||||
</button>
|
</button>
|
||||||
{workspaceMenuOpen && (
|
{workspaceMenuOpen && (
|
||||||
<div className="absolute top-[calc(100%+7px)] right-0 z-50 w-[260px] rounded-lg border border-line bg-white p-1.5 shadow-lg">
|
<div className="absolute top-[calc(100%+7px)] right-0 z-50 max-h-[min(300px,calc(100vh-90px))] w-[260px] overflow-y-auto rounded-lg border border-line bg-white p-1.5 shadow-lg">
|
||||||
{workspaces.map((workspace) => {
|
{workspaces.map((workspace) => {
|
||||||
const isSelected =
|
const isSelected =
|
||||||
workspace.workspace_id === currentWorkspace.workspace_id;
|
workspace.workspace_id === currentWorkspace.workspace_id;
|
||||||
@@ -131,7 +131,7 @@ export function Topbar({
|
|||||||
</div>
|
</div>
|
||||||
<div className="relative" ref={userMenuRef}>
|
<div className="relative" ref={userMenuRef}>
|
||||||
<button
|
<button
|
||||||
className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-transparent bg-white px-[11px] hover:border-[#b9cce0]"
|
className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-line bg-white px-[11px] hover:border-[#b9cce0]"
|
||||||
type="button"
|
type="button"
|
||||||
aria-expanded={userMenuOpen}
|
aria-expanded={userMenuOpen}
|
||||||
aria-haspopup="menu"
|
aria-haspopup="menu"
|
||||||
@@ -148,11 +148,12 @@ export function Topbar({
|
|||||||
{user?.role_code === "admin" ? "管理员" : "开发人员"}
|
{user?.role_code === "admin" ? "管理员" : "开发人员"}
|
||||||
</small>
|
</small>
|
||||||
</span>
|
</span>
|
||||||
<ChevronRight size={15} className="text-[#97a3b1]" />
|
{/* <ChevronRight size={15} className="text-[#97a3b1]" /> */}
|
||||||
|
<ChevronRight size={15} className="text-[#748497]" />
|
||||||
</button>
|
</button>
|
||||||
{userMenuOpen && (
|
{userMenuOpen && (
|
||||||
<div
|
<div
|
||||||
className="absolute top-[calc(100%+7px)] right-0 z-50 w-[240px] rounded-lg border border-line bg-white p-1.5 shadow-lg"
|
className="absolute top-[calc(100%+7px)] right-0 z-50 w-[200px] rounded-lg border border-line bg-white p-1.5 shadow-lg"
|
||||||
role="menu"
|
role="menu"
|
||||||
>
|
>
|
||||||
<div className="border-b border-line px-2.5 py-2.5">
|
<div className="border-b border-line px-2.5 py-2.5">
|
||||||
|
|||||||
@@ -449,37 +449,38 @@ export default function SchedulePage({
|
|||||||
linkSourceId={linkSourceId}
|
linkSourceId={linkSourceId}
|
||||||
onCancelLink={() => setLinkSourceId(null)}
|
onCancelLink={() => setLinkSourceId(null)}
|
||||||
/>
|
/>
|
||||||
<div
|
<div className="relative min-h-0 flex-1">
|
||||||
className="relative min-h-0 flex-1 overflow-auto bg-bg-canvas data-[state=linking]:cursor-crosshair"
|
|
||||||
data-state={linkSourceId ? "linking" : "idle"}
|
|
||||||
ref={canvasRef}
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"linear-gradient(#e7edf3 1px, transparent 1px), linear-gradient(90deg, #e7edf3 1px, transparent 1px), linear-gradient(#f1f4f7 1px, transparent 1px), linear-gradient(90deg, #f1f4f7 1px, transparent 1px)",
|
|
||||||
backgroundSize: "80px 80px, 80px 80px, 16px 16px, 16px 16px",
|
|
||||||
backgroundPosition: "-1px -1px",
|
|
||||||
}}
|
|
||||||
onDragOver={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
event.dataTransfer.dropEffect = "copy";
|
|
||||||
}}
|
|
||||||
onDrop={onCanvasDrop}
|
|
||||||
onClick={(event) => {
|
|
||||||
// 画布实际内容位于 surface/SVG 子元素中,不能只比较 currentTarget;
|
|
||||||
// 点击节点或连线时保留选择,点击其余空白位置则返回调度方案基本信息。
|
|
||||||
const target = event.target as Element;
|
|
||||||
if (
|
|
||||||
target.closest(".schedule-node") ||
|
|
||||||
target.matches(".schedule-edge-line, .schedule-edge-hit")
|
|
||||||
) return;
|
|
||||||
setSelectedNodeId(null);
|
|
||||||
setSelectedEdgeId(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
className="relative"
|
className="absolute inset-0 overflow-auto bg-bg-canvas data-[state=linking]:cursor-crosshair"
|
||||||
style={{ width: CANVAS_WIDTH, height: CANVAS_HEIGHT }}
|
data-state={linkSourceId ? "linking" : "idle"}
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(#e7edf3 1px, transparent 1px), linear-gradient(90deg, #e7edf3 1px, transparent 1px), linear-gradient(#f1f4f7 1px, transparent 1px), linear-gradient(90deg, #f1f4f7 1px, transparent 1px)",
|
||||||
|
backgroundSize: "80px 80px, 80px 80px, 16px 16px, 16px 16px",
|
||||||
|
backgroundPosition: "-1px -1px",
|
||||||
|
}}
|
||||||
|
onDragOver={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.dataTransfer.dropEffect = "copy";
|
||||||
|
}}
|
||||||
|
onDrop={onCanvasDrop}
|
||||||
|
onClick={(event) => {
|
||||||
|
// 画布实际内容位于 surface/SVG 子元素中,不能只比较 currentTarget;
|
||||||
|
// 点击节点或连线时保留选择,点击其余空白位置则返回调度方案基本信息。
|
||||||
|
const target = event.target as Element;
|
||||||
|
if (
|
||||||
|
target.closest(".schedule-node") ||
|
||||||
|
target.matches(".schedule-edge-line, .schedule-edge-hit")
|
||||||
|
) return;
|
||||||
|
setSelectedNodeId(null);
|
||||||
|
setSelectedEdgeId(null);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
className="relative"
|
||||||
|
style={{ width: CANVAS_WIDTH, height: CANVAS_HEIGHT }}
|
||||||
|
>
|
||||||
{schedule && (
|
{schedule && (
|
||||||
<svg
|
<svg
|
||||||
className="absolute inset-0 z-[1] h-full w-full overflow-visible"
|
className="absolute inset-0 z-[1] h-full w-full overflow-visible"
|
||||||
@@ -600,9 +601,11 @@ export default function SchedulePage({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
{!schedule ? (
|
</div>
|
||||||
<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]">
|
{!schedule ? (
|
||||||
|
<div className="pointer-events-none absolute inset-0 z-[2] flex items-center justify-center">
|
||||||
|
<div className="pointer-events-auto flex w-[350px] flex-col items-center text-center text-[#9aa8b6] [&>svg]:mb-3 [&>svg]:text-[#8cb4de]">
|
||||||
<CalendarClock size={34} />
|
<CalendarClock size={34} />
|
||||||
<strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong>
|
<strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong>
|
||||||
<p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度,然后拖入稳定版本脚本。</p>
|
<p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度,然后拖入稳定版本脚本。</p>
|
||||||
@@ -616,14 +619,16 @@ export default function SchedulePage({
|
|||||||
<Plus size={15} />新建调度
|
<Plus size={15} />新建调度
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
) : schedule.nodes.length === 0 ? (
|
</div>
|
||||||
<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]">
|
) : schedule.nodes.length === 0 ? (
|
||||||
|
<div className="pointer-events-none absolute inset-0 z-[2] flex items-center justify-center">
|
||||||
|
<div className="pointer-events-auto flex w-[350px] flex-col items-center text-center text-[#9aa8b6] [&>svg]:mb-3 [&>svg]:text-[#8cb4de]">
|
||||||
<PackageOpen size={34} />
|
<PackageOpen size={34} />
|
||||||
<strong className="text-[14px] text-[#567089]">从稳定版本开始编排</strong>
|
<strong className="text-[14px] text-[#567089]">从稳定版本开始编排</strong>
|
||||||
<p className="my-[7px_13px] text-[11px]">把左侧脚本卡片拖到这里,或双击卡片快速加入。</p>
|
<p className="my-[7px_13px] text-[11px]">把左侧脚本卡片拖到这里,或双击卡片快速加入。</p>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
</div>
|
||||||
</div>
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<footer className="flex min-h-[35px] items-center gap-[14px] border-t border-[#e4eaf0] bg-white px-3 text-[10px] text-[#8b99a9]">
|
<footer className="flex min-h-[35px] items-center gap-[14px] border-t border-[#e4eaf0] bg-white px-3 text-[10px] text-[#8b99a9]">
|
||||||
<span
|
<span
|
||||||
|
|||||||
Reference in New Issue
Block a user