按视觉层重设计 z-index(12→14 档),新增节点层/激活节点层/节点工具栏层等 语义 token,并下沉节点内部 stacking context(--node-z-content/overlay/handle) 与 dock 子面板(--dock-z-popover),消除硬编码 z 值。 新增专注模式(避让分屏可切换):use-focus-mode 管理 localStorage 偏好与小屏 (<1024px)强制避让;助手面板从 flex 改为 absolute + 垂直分槽(顶部 288px 让位活动任务面板),画布区按面板宽度动态 padding;顶栏新增 PanelRight 切换按钮并带强制态反馈。 节点工具栏由 hover+select 触发放为 click-only(选中即显),组件由 canvas-node-hover-toolbar 重命名为 canvas-node-toolbar;移除 project 与 render-model 中冗余的 toolbarNodeId 状态。 活动任务面板 z-index 由 --z-modal-overlay(110) 降至 --z-panel-floating(80), 归位浮动面板层;AGENTS.md Elevation 同步至 14 档。 Co-authored-by: sikongyue <3155157671@qq.com>
This commit is contained in:
45
web/src/hooks/use-focus-mode.ts
Normal file
45
web/src/hooks/use-focus-mode.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
const FOCUS_MODE_KEY = "canvas-focus-mode-v1";
|
||||
const FORCED_FOCUS_BREAKPOINT = 1024;
|
||||
|
||||
function readInitialPreference(): boolean {
|
||||
if (typeof window === "undefined") return true;
|
||||
const stored = window.localStorage.getItem(FOCUS_MODE_KEY);
|
||||
if (stored === "1") return true;
|
||||
if (stored === "0") return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
export function useFocusMode() {
|
||||
const [userPreference, setUserPreference] = useState<boolean>(readInitialPreference);
|
||||
const [viewportWidth, setViewportWidth] = useState<number>(() => (typeof window !== "undefined" ? window.innerWidth : 1024));
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const handleResize = () => setViewportWidth(window.innerWidth);
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
const forcedOn = viewportWidth < FORCED_FOCUS_BREAKPOINT;
|
||||
const focusMode = forcedOn || userPreference;
|
||||
|
||||
const toggleFocusMode = useCallback(() => {
|
||||
setUserPreference((prev) => {
|
||||
const next = !prev;
|
||||
if (typeof window !== "undefined") {
|
||||
window.localStorage.setItem(FOCUS_MODE_KEY, next ? "1" : "0");
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
focusMode,
|
||||
userPreference,
|
||||
forcedOn,
|
||||
toggleFocusMode,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user