feat(web-ui): grid9 多宫格编辑器（四/六/九/十六宫格切分、模板与渲染） - #2442
Open
1688mengdie wants to merge 5 commits into
Open
Conversation
added 5 commits
August 24, 2026 11:34
数据层：EditorGroupId 扩展 grid9 与 slot4..16、grid9Cells/grid9ColRatios/grid9RowRatios、DropZone splitMode 类型扩展为 SplitMode（并入 grid9）、GRID_MAX_DIM/GRID9_RATIO_CONFIG/clampGrid9Ratio；索引补齐导出。因 SplitMode 加入 grid9 会破坏较窄类型消费方，故将首个消费方 DropZone 随类型扩展同 commit 落地以保持逐 commit type-check。
store 层新增 enterGrid9/applyGrid9Template/mergeGrid9Cells/removeGrid9Cell/setGrid9Col·RowRatio/getAllRenderableGroups 与 seedGrid9CellsFromLegacy 迁移；grid9Ops/grid9Drop/grid9Reachability 测试；usePanelTabCoordinator 在 grid9 模式下按全部可渲染组统计可见标签（非 grid9 保持 primary+secondary 零回归）。
TabBar 入口菜单直接采用真源范式：复用 data-bf-part=action 按钮 + canvas-tab-bar__action-btn + Table2/Combine/Trash2 图标 + Tooltip + 纯 CSS 相对定位菜单（gridTemplateMenu/Item/Exit 三层），补齐 merge/remove 按钮；TabBar.appearance 声明 gridTemplate 系列 part 与 group facet（primary/secondary/tertiary + slot4..16）；三语 components.json/settings.json i18n。无「先造 7 个 part 再删」中间态。内嵌 P2-1/P2-2/P2-4 质量修复。
…plitHandle/appearance） 渲染层：ContentCanvas/EditorArea 渲染 grid9Cells（slot4..16）、EditorArea.appearance/EditorGroup.appearance 声明 grid9Cell part 与 active 状态、SplitHandle 支持 grid9 拆分、占比变长数组（grid9ColRatios/grid9RowRatios）、EmptyState grid9Hint、useKeyboardShortcuts 绑定 enterGrid9(3,3)；editor-area/index 复用导出 Grid9Slot/Grid9Template 类型。
…ibed state hasRenderableTabs useMemo re-read zustand via store.getState() while its deps still referenced the old closure vars (layout/primaryGroup/...) that the body no longer uses, so react-hooks/exhaustive-deps flagged 4 extra deps. Read the already-subscribed mode-aware useCanvasStore values instead; immer keeps them reactive so the memo recomputes on mode/store changes (no stale cache). Test: lint:web / type-check:web / grid9 grid9Ops+grid9Drop+grid9Reachability vitest (43) / i18n:audit / appearance:contract-audit all green. AI: 已测（本地 lint/type-check/grid9 vitest 43/i18n/appearance 全绿；无 ContentCanvas 专项测试，行为经代码路径核验不变）
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概述
为 Canvas 内容编辑器引入「多宫格（grid9）」布局：支持将画布切分为 2×2 / 2×3 / 3×3 / 4×4 宫格（slot4..16），按模板应用、多宫格单元格合并/移除、格间拖拽吸附，并在右栏以「grid9 感知」方式统计可见标签。采用「重新实现优先」——最大化复用上游原生面板/拖拽体系，增量扩展网格能力。
Closes #2443
变更（1 个 PR · 5 个 commit）
a769fee70feat: 数据层类型 + DropZone SplitMode 消费方（types/layout）3e57d1bfbfeat: canvasStore 多宫格操作与测试 + 右栏 grid9 感知计数2fdd45ddcfeat: TabBar 宫格模板入口菜单（真源范式 + 三语 i18n）b8a254154feat: editor-ui 渲染（ContentCanvas/EditorArea/EditorGroup/SplitHandle/appearance）bb4063b8cfix: ContentCanvas hasRenderableTabs useMemo 读取已订阅状态（消除 react-hooks/exhaustive-deps lint）AI 辅助产出说明
本 PR 为 AI 辅助产出（按 Conventional Commits 拆分为聚焦变更，已由项目维护者评审并经本地实例实测验证）。
测试与验证
grid9Ops/grid9Drop/grid9Reachabilityfocused tests。components.json/settings.json，按AGENTS.md匹配的 i18n 验证行。ci.yml）保护——frontend-build（type-check:web / lint:web / i18n:contract / theme / web tests / build:web）实际执行并通过；本次为 web-only 改动，Rust Build Check 与 CLI Tests 按影响判定正确跳过（由 Rust/CLI Validation 校验跳过正确性）。遵循官方「只有改动影响构建/打包/发布行为或 CI 无法覆盖时才在本地运行更重命令」，未在本地重复全量重命令。行尾伪改动已用git diff --check核验。UI 说明
grid9 属 UI/交互类改动。UI 前后对比：
低风险手动验证路径：