canvas-v2 前端怎么组织

从 App.tsx 找大组件

canvas-v2/src/App.tsx 顶部导入了 ProjectHome、TitleBar、设置对话框和多个 store。它是总入口，不是所有功能的实现地点。

第 27–31 行使用懒加载：

const CanvasWorkspace = lazy(() =>
  import('./features/canvas/CanvasWorkspace').then((module) => ({
    default: module.CanvasWorkspace,
  })),
)

这表示画布代码需要时才下载，不让首页一开始就加载整套复杂工作区。

真实 state

const [showSettings, setShowSettings] = useState(false)
const [latestVersion, setLatestVersion] = useState<string>('')
const [globalError, setGlobalError] = useState<GlobalErrorDialogDetail | null>(null)

它们分别控制设置是否显示、最新版本文字和当前全局错误。类型已经告诉你每份状态能装什么。

真实 effect

useEffect(() => {
  document.documentElement.classList.toggle('dark', theme === 'dark')
}, [theme])

把它读成：每当 theme 改变，就同步修改 HTML 根元素的 dark 类名。React state 是原因，DOM class 是要同步的外部结果。

feature 目录不是随便分的

features/canvas/ 放画布领域；features/project/ 放项目首页和项目管理；features/settings/ 放设置。遇到“新建项目”问题，先去 project，而不是搜索所有一千多个文件。

为什么 CanvasWorkspace 用 lazy 加载？

答案：让复杂画布代码在真正需要时再加载，减少首页初次加载负担。