开发面板

开发面板是跑在浏览器里的模板调试台：左边选模板和数据，中间实时预览，还能试截图、调主题。

启动

pnpm template   # 等价于 ktr sync && ktr dev

浏览器打开 http://localhost:5180/__ktr/panel/。端口、host、是否自动打开浏览器在 karin.template.ts 的 dev 配置里改（见 配置与 CLI），也可用 ktr dev --port 5200 --no-open 临时覆盖。

界面

左侧：模板树 + 数据卡片

模板按板块分组排列，显示 defineTemplate 的 name，点击即在画布渲染；模板路由（如 hello/card）就是 renderImage('hello/card', ...) 要传的字符串。

选中模板后下方列出它的数据源（TS mock 带只读标记，data/ 下的 JSON 可新建/编辑/删除/刷新）。JSON 编辑器支持格式化、导入导出、Ctrl/Cmd+S 保存，且容错解析——直接粘贴 JS 对象（单引号、尾逗号）也能识别。真实渲染后 captured 卡片自动出现并选中（见 mock 数据）。

中间：预览画布

模板跑在 iframe 沙盒里，面板样式不会污染你的组件。交互：

• 滚轮缩放、按住空白拖拽平移、双击空白适应（居中并完整显示）。
• 按住 Ctrl/Alt 进入文本选择模式（可复制画布上的文字）。
• 数据为空 / 加载失败 / 渲染抛错时，画布显示对应占位提示卡，缩放拖拽行为不变。

改代码或数据保存后画布热更新，不用刷新浏览器。

点击模板跳转源码

• 工具栏「定位」按钮：进入检查模式，点选元素即打开编辑器定位到源码行号。
• 按住 Shift+Alt：临时检查模式，松开退出；随时可按 Esc 退出。

只在本地开发生效，生产构建不包含检查器。

顶部工具栏

左侧显示当前路由、描述和状态；右侧按钮：重载（当前数据重新渲染）、适应（等同双击画布）、截图——截取模板内容（不含画布背景），弹窗里可开关水印、临时换明暗重截、复制到剪贴板、下载 PNG。

主题设置（两套独立）

• 面板主题（标题栏下拉菜单）：只影响面板外壳的明暗，有「浅色 / 深色 / 跟随系统」三项，不影响画布里的模板。
• 模板主题（右侧抽屉）：影响画布里的模板——明暗模式、11 个预设主题、强调色/基础色、圆角、字体，与 HeroUI 官方主题编辑器一致。「查看代码」可生成对应 CSS，贴进 ktr/template/style.css 固化。