[Feature]: grid9 多宫格编辑器(四/六/九/十六宫格切分、模板与渲染)
- Vorherrschende Sprache
- Rust
- Sterne
- 2.2k
- Forks
- 229
- Ø Merge
- 2 Std. 46 Min.
- Gemergte PRs (30 T.)
- 577
Beschreibung
## 目的
在 Canvas 内容编辑器中引入「多宫格(grid9)」布局能力:允许将画布切分为 2×2 / 2×3 / 3×3 / 4×4 宫格(slot4..16),支持按模板应用、多宫格单元格合并/移除、格间拖拽吸附,并在右栏以「grid9 感知」方式统计可见标签。
## 方案(分 4 个原子 commit)
1. **数据层(types/layout)**:`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 通过。
2. **store 层(canvasStore + 测试 + 右栏计数)**:新增 `enterGrid9` / `applyGrid9Template` / `mergeGrid9Cells` / `removeGrid9Cell` / `setGrid9Col·RowRatio` / `getAllRenderableGroups`,并提供 `seedGrid9CellsFromLegacy` 迁移;`grid9Ops` / `grid9Drop` / `grid9Reachability` 测试;`usePanelTabCoordinator` 在 grid9 模式下按全部可渲染组统计可见标签(非 grid9 保持 primary+secondary 零回归)。
3. **TabBar 宫格模板入口菜单(真源范式 + 三语 i18n)**:直接采用真源范式——复用 `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;三语(en-US/zh-CN/zh-TW)`components.json`/`settings.json` i18n。无「先造 7 个 part 再删」中间态。
4. **渲染层(ContentCanvas/EditorArea/EditorGroup/SplitHandle/appearance)**:`ContentCanvas`/`EditorArea` 渲染 `grid9Cells`(slot4..16);`EditorArea.appearance`/`EditorGroup.appearance` 声明 grid9Cell part 与 active 状态;`SplitHandle` 支持 grid9 拆分与占比变长数组(`grid9ColRatios`/`grid9RowRatios`);`EmptyState` grid9Hint;`useKeyboardShortcuts` 绑定宫格切换快捷键。
## 测试与验证
- 前端:`pnpm run type-check:web` + 行为相关 focused test(`grid9Ops`/`grid9Drop`/`grid9Reachability`)。
- i18n:按 `AGENTS.md` 匹配的 i18n 验证行。
- 经项目维护者本地实例实测验证。完整性构建与全量测试由 CI(`ci.yml`)保护。
关联 PR:本 Issue 由提交 PR 关闭。
Beitragsleitfaden
Rechercherichtung
Start by reading the types/layout and canvasStore layers, then inspect TabBar, ContentCanvas, EditorArea, EditorGroup, SplitHandle, and useKeyboardShortcuts. Run pnpm run type-check:web and the focused grid9Ops, grid9Drop, and grid9Reachability tests. Done means the grid9 layouts, templates, cell operations, rendering, shortcuts, counting, and three-language i18n validations work without regressions.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 20/100