做 B 端定制这几年，被一个问题反复折磨：客户找过来，开口就是「在我们后台顶栏加一个多租户切换」「侧栏底部放个升级企业版的引导卡片」「全屏加个 AI 助手悬浮球」。听起来都是小活儿，每次都得扒开框架自带的 Layout 组件改源码；改完能跑，可等我们想同步上游框架版本，灾难性合并冲突就来报到了。
后来做第三个、第四个客户时，索性把这套模板按业务需要重写了一遍：核心思路只有一句 —— 业务定制永远不要碰框架代码。
23 个插槽约定式加载，业务定制不碰框架
这套模板最大的不同，是预留了一套「23 个黄金插槽」体系。顶栏最左侧、Logo 之后、面包屑旁、侧栏最底端、用户下拉菜单顶部……这些业务最常塞东西的位置，都事先埋好了插槽宿主组件 JwSlotHost。
业务方加功能，不需要再动 Layout，只需要在约定目录里新建文件。比如客户要在工具栏左侧加一个「生产主集群」指示徽章，直接新建 src/slots/ToolbarStart/index.vue，写十几行模板代码，保存即可。引擎基于 Vite 的 import.meta.glob 自动扫描接入，没用到的插槽宿主完全不渲染空节点，零运行时开销。
更顺手的是自带的「插槽可视化调试器」，在偏好设置抽屉里打开后，整屏会出现所有 23 个插槽的虚线占位轮廓，鼠标悬停就能看插槽名和典型业务场景，右键一键复制文件路径或标准 SFC 模板。从此接客户定制，新人也能照着可视化蓝图直接定位，不用翻文档问人。
9 套布局 + 6 套行业预设，告别「换业务就重写样式」
另一个高频麻烦是「换个客户，全站风格就要从头调」。同一个模板，做完一个政务客户，下一个跨境电商找过来，主色要从科技蓝换成品牌主色，导航底色要换，标签页样式要换，连圆角风格都要改。以前只能全局搜索替换像素类，漏洞百出。
九午模板把这块做成了两套可切换体系：
- 9 大多态布局：纵向侧栏、经典通栏、顶部横栏、分级混合、柱状双栏、悬浮卡片、内嵌 macOS 拟态……每种布局对应不同业务深度，鼠标点一下秒级切换。
- 6 大行业预设：通用企业 SaaS、数智跨境电商、政务党政、工业物联网孪生、AI 原生中心、极简协同创新 —— 一键把「主色 + 布局 + 导航底色 + 标签页风格」整套协同切换到行业基调。
圆角也走的是 Design Tokens 体系，全站没有一个像素硬编码的 rounded-lg，按钮、菜单、卡片、弹窗全部继承 --jw-radius-base 这套变量。要直角科技硬朗风就拖到 0px，要胶囊灵动风就拖到 20px，全站所有组件实时联动响应；想精细微调，0~20px 滑块直接拖。
写在最后
这套模板现在跑在公司几乎所有 Vue3 中后台项目里，对外的定位就是「商用交付级水准 + 零侵入扩展」。个人学习、非商业用途免费；商业项目和外包交付需要申请正式商业授权，细节可以到官网 95jw.cn 看。
做模板这件事，越往后越觉得，「好看」不是最难的部分，难的是让业务定制不污染框架代码。23 个插槽这套约定式扩展，至少帮我们把那个反复出现的合并冲突彻底从工作流里删掉了。
作者：九午科技 · 技术人员
