mock 数据

模板需要数据才能预览。本页讲三类数据源的区别和各自写法。

三类数据源对照

三者并存，面板左侧数据卡片点一下就切换。常见搭配：TS mock 当标准示例，JSON 当随手改的对照数据，captured.json 交给框架自动写。

TS mock：mock.ts

import type { HelloListData } from './index'

/** 列表示例的 TS mock，适合在插件代码里直接复用。 */
export const team = {
  title: '模板贡献榜',
  users: [
    { name: '林小满', role: '模板作者', score: 98 },
    { name: '沈括', role: '插件维护者', score: 92 }
  ]
} satisfies HelloListData

• 固定文件名 mock.ts，与 index.tsx 同级，用具名导出（导出名即面板显示的数据名）。
• satisfies 做编译期校验，写错字段立刻报红；也可用 defineMock<HelloListData>({...})，效果相同。
• 普通 TS 文件，插件代码可直接 import 复用。

JSON mock：data 目录

{
  "title": "Karin Template React",
  "items": [{ "label": "渲染方式", "value": "SSR HTML" }]
}

必须放在 data/ 子目录（放模板根目录不识别）。面板里可新建、编辑（保存即写回文件）、删除、刷新；文件名即数据名，一个模板放多个 JSON 就能快速对照。

捕获数据：captured.json

机器人每触发一次真实渲染，框架把本次的 { data, ctx } 快照写入该模板的 data/captured.json（滚动覆盖，只保留最近一次）；开发服务器监听变更后推送面板，面板自动刷新并选中它——画布立刻显示刚才真实渲染的那份数据（ctx 一并下发，预览与真实渲染完全一致）。

典型用法：群里反馈"图渲染得不对"，captured 自动跳出来，直接拿真实数据改样式即时验证。