tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): 活动任务面板 - 恢复顶栏下方偏移并避免遮挡顶部工具 (#162)

Browse Source 
* fix(canvas): 活动任务面板 - 恢复顶栏下方偏移并避免遮挡顶部工具

Added topInset prop to CanvasActiveTaskPanel for positioning.

* fix(canvas): 活动任务面板 - 调用侧接入 topInset 让位契约
This commit is contained in:
爱笑的毛毛虫
2026-08-06 21:50:54 +08:00
committed by GitHub
parent 5c27879f86
commit ad4c738e74
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/canvas/canvas-active-task-panel.tsx
View File

@@ -10,7 +10,8 @@ import type { GenerationTask } from "@/services/api/task-center";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
export function CanvasActiveTaskPanel({ tasks, align = "right" }: { tasks: GenerationTask[]; align?: "left" | "right" }) {
// 顶栏是绝对定位浮层，面板必须按调用方传入的 topInset 避让；专注模式隐藏顶栏时传小间距。
export function CanvasActiveTaskPanel({ tasks, align = "right", topInset = "var(--canvas-topbar-offset)" }: { tasks: GenerationTask[]; align?: "left" | "right"; topInset?: string }) {
const theme = canvasThemes[useThemeStore((state) => state.theme)];
const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
const reducedMotion = useReducedMotion();
@@ -41,7 +42,8 @@ export function CanvasActiveTaskPanel({ tasks, align = "right" }: { tasks: Gener
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -8, scale: 0.98 }}
transition={motionTransition}
className={`pointer-events-none absolute top-3 z-[var(--z-panel-floating)] w-[var(--canvas-panel-width)] ${align === "left" ? "left-3" : "right-3"}`}
className={`pointer-events-none absolute z-[var(--z-panel-floating)] w-[var(--canvas-panel-width)] ${align === "left" ? "left-3" : "right-3"}`}
style={{ top: topInset }}
>
<LayoutGroup id="canvas-active-tasks">
<motion.section

2
web/src/pages/canvas/project.tsx
View File

@@ -1538,7 +1538,7 @@ function InfiniteCanvasPage() {
/>
</InfiniteCanvas>
<CanvasActiveTaskPanel tasks={activeTasks} />
<CanvasActiveTaskPanel tasks={activeTasks} topInset={focusMode ? "var(--space-3)" : "var(--canvas-topbar-offset)"} />
{focusMode ? (
<CanvasFocusModeBar