一个工作簿只有两三个 Sheet 时，底部标签页已经够用；但一旦模板里有数据透视表、Table、图表、图片、形状和区域快照，用户往往知道“我要找那张表”，却不知道它藏在哪个 Sheet。Sheet页导航视图这个 demo 的价值就在这里：把 SpreadJS Designer 里的工作簿内容整理成右侧树形导航，让人按名称搜索、展开、点击，并直接跳到对应对象。
为什么这个细节重要
复杂模板的问题通常不是“功能不够”，而是“入口太散”。产品经理关心的是用户能不能快速定位报表模块；开发者关心的是对象结构能不能被程序遍历；业务用户关心的是别让我在几十个标签里来回试。这个导航视图把 Sheet、Table、PivotTable、Shape 等对象集中到一棵树里，相当于给 Excel-like 工作簿加了一个目录。
它尤其适合报表设计器、预算模板、巡检台账、设备清单、财务合并表这类“一个文件包含多个业务块”的应用。用户点击 Sheet 节点时，代码调用setActiveSheet切换工作表；点击子对象时，再选中对应区域或形状。体验上像文档大纲，但底层仍然是 SpreadJS 的 Workbook、Worksheet 和对象模型。
SpreadJS 的实现思路
demo 先创建GC.Spread.Sheets.Designer.Designer，再通过designer.getWorkbook()取得工作簿。导航本身不是浮在页面外的普通面板，而是接入 Designer 配置：扩展DefaultConfig.commandMap，在 ribbon 上添加SheetNavi按钮，注册searchTemplate，再把侧边栏配置推入config.sidePanels。
var config = GC.Spread.Sheets.Designer.DefaultConfig; GC.Spread.Sheets.Designer.Designer.RegisterComponent("MyComponent", MyTemplateComponent); config.commandMap = { SheetNavi: { text: "sheet导航", execute: context => context.setData("CData", !context.getData("CData")) } }; GC.Spread.Sheets.Designer.registerTemplate("searchTemplate", searchTemplate); config.sidePanels.push({ position: "right", width: "315px", command: "searchPanelCommand", uiTemplate: "searchTemplate", showCloseButton: true }); designer.setConfig(config);真正生成目录的是自定义组件。它在onMounted中通过hostSpread.getSheetCount()遍历所有工作表，再分别读取sheet.tables.all()、sheet.pivotTables.all()、sheet.shapes.all()。Table 和 PivotTable 会拿到区域并调用sheet.setSelection，形状则遍历后用shape.isSelected(true)选中目标。
可以扩展到哪些场景
这个思路可以扩展成模板目录、报表对象搜索、审计定位、图表资产管理、跨 Sheet 数据块导航。对于需要交付给业务人员长期维护的模板，还可以把搜索结果和权限结合起来：普通用户只看可填写区域，管理员能看到数据源、隐藏表、透视表和形状。
需要注意的是，demo 里的树节点由 DOM 手动拼装，适合展示实现路径。生产环境可以把对象摘要抽成数据结构，再交给统一的 UI 组件渲染；同时要考虑重命名对象、删除对象后的刷新机制。
给开发者的关键词
SpreadJS、Designer、DefaultConfig、commandMap、registerTemplate、RegisterComponent、sidePanels、tables.all()、pivotTables.all()、shapes.all()、setActiveSheet、setSelection、JavaScript 电子表格控件。
小结
Sheet页导航视图展示的是一种很实用的产品能力：当表格从“单页录入”变成“复杂工作簿应用”时，导航本身就是功能的一部分。SpreadJS 的对象模型让开发者能读到 Sheet 内部元素，Designer 的侧边栏扩展则让这些元素有了自然的入口。
