EtWorkbench · 工作台布局运行时

工作台骨架门面：区域槽 + 面板树 + 持久化 + 损坏降级，是布局树唯一的写树处。

工作台演示

报表.xlsx

文件 1
文件 2

画布

日志 1
日志 2

100%

  <div style="height: 300px; border: 1px solid var(--eb-border-color-lighter); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;">
    <et-title-bar title="工作台演示" doc-title="报表.xlsx" />
    <et-workbench v-model:layout="wb" :default-layout="wb" persist-key="docs-workbench-page">
      <template #panel="{ panel }">
        <ul style="margin: 0; padding: var(--et-space-inline) var(--et-space-band-inline); list-style: none; font-size: var(--et-density-base-font);">
          <li v-for="n in 2" :key="n">{{ panel.title }} {{ n }}</li>
        </ul>
      </template>
      <main style="height: 100%; display: flex; align-items: center; justify-content: center; color: var(--eb-text-color-secondary);">画布</main>
      <template #statusbar>
        <et-status-bar :items="[{ key: 'ready', label: '就绪' }]" zoom="100%" />
      </template>
    </et-workbench>
  </div>

API

import { EtWorkbench } from '@wil-works/evoke-tools-ui'公共工具壳功能块

Props

名称	类型	默认	说明
layout	Object	null	布局树（v-model：本组件是唯一的写树处）
defaultLayout	Object	null	默认布局（重置用；挂载读盘失败时的降级目标）
persistKey	String	''	持久化键（'' = 不持久化；非空时 localStorage 读写在挂载/变更时发生）

Emits

事件	载荷	说明
update:layout	`next, loaded.tree, normalized`	v-model（layout）的写入
reset	—	「重置布局」被触发（产品也可主动调 resetLayout()）；本件已落回默认树
layout-corrupted	`list`	入参或读回的布局树判为损坏并已降落默认树；载荷 = 错误清单（坏档只提示一次）

Slots

槽	吃什么	作用域
#titlebar	顶带：EtTitleBar（窗口控制位由它按平台渲染）	—
#documents	文档标签带：EtDocumentTabs / EtSheetTabs	—
#toolbar	工具区：EtRibbonBar（或自绘命令条）	—
#left	左停靠区：EtDock	—
#panel	面板内容：作用域给 { panel }，按 panel.id 渲染对应内容	`{ panel, dock }`
#right	右停靠区：EtDock	—
#bottom	底停靠区：EtDock	—
#tabbar	内容页签带（办公形态放 EtSheetTabs；与 #documents 对称，可同时用）	—
#statusbar	底带：EtStatusBar（缩放等工具位由它渲染）	—
default	画布位（中间内容；办公产品放 EtSheetCanvasHost）

键盘 · 可访问名 · 密度

键盘	不接管按键
可访问名	无 ARIA 属性（原生语义）
密度	`--et-chrome-bg--et-chrome-separator--et-chrome-statusbar-height--et-chrome-tabstrip-height--et-chrome-titlebar-height--et-density-base-font--et-density-line-height--et-toolbtn-fg`

办公整页装配（v1.4）

五条带各就各位即可拼出办公整页，不需要额外写布局 CSS：

vue

<et-workbench :layout="layout" :default-layout="DEFAULT" persist-key="app">
  <template #titlebar><et-title-bar title="季度报表" doc-title="报表.xlsx" /></template>
  <template #documents><et-document-tabs v-model="doc" :documents="docs" /></template>
  <template #toolbar>
    <et-ribbon-bar v-model="tab" :schema="schema" :registry="registry" />
    <et-formula-bar v-model="formula" :reference="reference" @submit="apply" />
  </template>

  <et-sheet-canvas-host label="工作表" @scroll="onScroll"><my-grid /></et-sheet-canvas-host>

  <template #tabbar><et-sheet-tabs v-model="sheet" :tabs="sheets" /></template>
  <template #statusbar><et-status-bar :items="items" zoom="100%" /></template>
</et-workbench>

带高全部走令牌：标题栏 32 / 工具区（tab 26 + 组行 72）/ 公式栏 26 / 页签 26 / 状态栏 24。

行为

持久化：挂载 loadLayout 读回；变更 saveLayout，写前 layoutEquals 比对，无变更不写，异常静默。
损坏降级：一律降级到 defaultLayout 渲染（不白屏）；修好的树覆写存储，损坏只提示一次。
空 defaultLayout 也合法：空树 = 只有画布的工作台（仍可交互、可重置）。
只有画布的初始布局：传 createLayoutTree({ docks: [] })（显式空树，合法形态），之后可用 addDock 运行时长出停靠——办公单画布页就这一档。
首次打开不被默认布局顶掉：没有持久化档时不发生"恢复"，传入的 layout 原样生效；有档（含坏档降级）才走读回路径。
全屏：树里 maximized 非空 → 对应停靠整幅、其它区域让位（纯 CSS grid 重排）。
关闭 = 隐藏（hidden 是显式状态：重置布局 / 显示面板都找得回来）。
暴露 resetLayout() / saveNow() / getLayout()。

令牌与门禁

chrome 各带高度走 --et-chrome-*，区域用 grid 轨道，rail 列 auto = 停靠声明宽。
布局树契约（dock/panel/序列化/损坏降级）是 runtime/layout 纯函数面，详见工作台布局。
M2 出口：1280×800 与 1920×1080 下无页面级横向溢出。

EtWorkbench · 工作台布局运行时 ​

API ​