19 数据契约与示例集

export interface ChartExampleLocalMeta {
  id: string
  title: string
  category: string
  tags: string[]
  /** three 库专用：资产根路径注入（ASSET_HOST/FILE_HOST/HOST），详情页挂载时透传给示例组件 */
  globals?: Record<string, string>
}

// echarts（manifest.ts）：最小形态——四必填字段
{
  id: 'area-simple',
  title: '大数据量面积图',
  category: '折线图',
  tags: ['折线图', '数据缩放', '提示框', '工具箱', '图形组件'],
},

// three（three-manifest.ts）：携带资产根 globals，ASSET_HOST 指向 public/ 下资产目录
{
  id: 'webxr_xr_haptics',
  title: 'three.js xr - haptics',
  category: 'WebXR',
  tags: ['Three.js', 'Three.js', '轨道控制', '空间音频(WebAudio)', 'WebXR沉浸', '实时阴影'],
  globals: { ASSET_HOST: '/threejs-official/' },
},

// three 的另一变体：双资产根（HOST 与 FILE_HOST 各指一个目录）
{
  id: '2025Year',
  title: '2025',
  category: 'application',
  tags: ['Three.js', 'Three.js+Cesium', '后处理管线', '着色器后处理', 'WebGPU后处理', '线条/线框'],
  globals: { HOST: '/external-examples/three-cesium-examples/', FILE_HOST: '/external-examples/3d-file-server/' },
},

// webgl（webgl-manifest.ts）：中文 id 先例（gen-webgl-registry.mjs 生成，保留源目录命名）
{
  id: '1-刷底色',
  title: '刷底色',
  category: 'webgl',
  tags: ['WebGL'],
},

// ① echarts / loaderKind: "option"（echarts.json 的 area-basic 条目）
{
  "id": "area-basic",
  "library": "echarts",
  "title": "基础面积图",
  "titleEn": "Basic area chart",
  "description": "Basic area chart - 难度 1",
  "category": "折线图",
  "loaderKind": "option",
  "tags": ["折线图"],
  "difficulty": "beginner",
  "sourceUrl": "https://echarts.apache.org/examples/zh/editor.html?c=area-basic",
  "sortOrder": 6,
  "status": "published",
  "requiresGl": false,
  "requiresMap": false,
  "thumbnail": "/echarts-thumbs/area-basic.webp",
  "createdAt": "2026-06-21T21:01:49.329Z",
  "updatedAt": "2026-06-23T15:17:38.736Z"
}
// area-simple 等 294 条已 SFC 化的条目在 JSON 里没有代码字段（slim 脚本删除）；
// 仅 54 条兜底 echarts 条目保留 optionCode（多语句官方脚本，结尾留 option 或自行 setOption）。

// ② echarts / loaderKind: "api-async"（echarts.json 的 archive-custom-aggregate-scatter-bar 条目，兜底形态）
//   本条是"迁移遗留双格式"活样本：optionCode（官方多语句脚本）+ componentCode + initCode 三字段并存，
//   渲染走 optionCode 求值链（usesSfc 类型优先路由豁免，见《18-代码走读实录》2.1 节）。
{
  "id": "archive-custom-aggregate-scatter-bar",
  "library": "echarts",
  "title": "聚合分割形变（散点图 - 柱状图）",
  "titleEn": "Aggregate Morphing Between Scatter and Bar",
  "description": "Aggregate Morphing Between Scatter and Bar - 难度 9 - 异步数据",
  "category": "自定义系列",
  "loaderKind": "api-async",
  "tags": ["自定义系列", "提示框", "视觉映射", "动画", "数据集", "异步数据"],
  "difficulty": "advanced",
  "sourceUrl": "https://echarts.apache.org/examples/zh/editor.html?c=archive-custom-aggregate-scatter-bar",
  "sortOrder": 0,
  "status": "published",
  "requiresGl": false,
  "requiresMap": false,
  "thumbnail": "/echarts-thumbs/archive-custom-aggregate-scatter-bar.webp",
  "createdAt": "2026-06-21T21:01:49.319Z",
  "updatedAt": "2026-06-23T15:17:38.692Z",
  "optionCode": "var SCATTER_COLORS = ['#5470c6', ...数十行声明与 echarts.init / myChart.setOption(option) 逻辑（原样收录官方脚本）",
  "componentCode": "<template>...(迁移早期生成的完整 SFC 字符串，当前链路不消费)",
  "initCode": "…（option 回填后的五形参补充脚本，少见）"
}

// ③ antv / loaderKind: "antv-config"（antv.json 的 antv-area-basic-basic-annotation 条目，兜底形态带 optionCode）
{
  "id": "antv-area-basic-basic-annotation",
  "library": "antv",
  "title": "area basic basic-annotation",
  "titleEn": "area basic basic-annotation",
  "description": "area basic basic-annotation 示例（来自 AntV G2Plot 官方文档）",
  "category": "面积图",
  "loaderKind": "antv-config",
  "tags": ["antv", "g2plot", "面积图"],
  "difficulty": "intermediate",
  "sourceUrl": "https://github.com/antvis/g2plot/tree/master/site/examples/area/basic/demo",
  "sortOrder": 1,
  "status": "published",
  "requiresGl": false,
  "requiresMap": false,
  "thumbnail": "/chart-thumbs/antv-area-basic-basic-annotation.webp",
  "createdAt": "2026-06-23T11:25:50.951Z",
  "updatedAt": "2026-06-23T16:09:05.797Z",
  "optionCode": "const data = []; const categories = [...]; ...; return { plotClass: 'Area', options: { data, xField: 'year', yField: 'value', seriesField: 'category', ... } }"
}

// ④ three / loaderKind: "local"（three.json 的 machineRoom 条目——全量本地 SFC 库的标准形态，无代码字段）
{
  "id": "machineRoom",
  "library": "three",
  "title": "机房展示",
  "titleEn": null,
  "description": "这是一个基于 Three.js 的机房示例。运用了 GLTF模型加载、纹理加载、射线拾取交互 技术。",
  "category": "机房",
  "loaderKind": "local",
  "tags": ["Three.js", "机房", "GLTF模型加载", "纹理加载", "射线拾取交互"],
  "difficulty": null,
  "sourceUrl": null,
  "sortOrder": 0,
  "status": "published",
  "requiresGl": false,
  "requiresMap": false,
  "thumbnail": "/example-thumbs/threejs-lesson/02-machineroom/machineRoom.jpg",
  "createdAt": "2026-10-06T00:57:05.771Z",
  "updatedAt": "2026-10-06T00:57:05.771Z"
}

// ⑤ webgl / loaderKind: "local"（webgl.json 的 1-刷底色 条目——第四库与 three 同构）
{
  "id": "1-刷底色",
  "library": "webgl",
  "title": "刷底色",
  "titleEn": null,
  "description": "基于原生 WebGL 的「刷底色」教学示例，演示对应章节的渲染流程。",
  "category": "webgl",
  "loaderKind": "local",
  "tags": ["WebGL"],
  "difficulty": null,
  "sourceUrl": null,
  "sortOrder": 0,
  "status": "published",
  "requiresGl": false,
  "requiresMap": false,
  "thumbnail": "/example-thumbs/webgl/kaikeba-webgl/01-webgl-入门-webgl/1-刷底色.webp",
  "createdAt": "2026-10-06T05:03:28.056Z",
  "updatedAt": "2026-10-06T05:03:28.056Z"
}

<template>
  <div class="demo-container">
    <EChartDemo :option="option" />
  </div>
</template>

<script setup>
import EChartDemo from '../../EChartDemo.vue'

// 等待 v-chart 子组件挂载完成，确保 chartRef 可用
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
    },
  ],
}
</script>

<style scoped>
.demo-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: inherit;
  overflow: hidden;
}
</style>

<template>
  <div class="demo-container">
    <EChartDemo :on-ready="onReady" />
  </div>
</template>

<script setup>
import EChartDemo from '../../EChartDemo.vue'

async function onReady(ctx) {
  // 等待 v-chart 子组件挂载完成，确保 chartRef 可用
  const indices = { name: 0, group: 1, id: 16 }
  const schema = [
    { name: 'name', index: 0 },
    { name: 'group', index: 1 },
    // …营养素字段表（源文件完整保留 17 列）
  ]
  const groupCategories = []
  const groupColors = []
  ctx.fetchJson('/data/asset/data/nutrients.json').then(function (data) {
    normalizeData(data)
    ctx.setOption(getOption(data))
  })
  // …normalizeData / getOption 等数据加工函数（源文件原样保留）
}
</script>

<template>
  <div class="demo-container">
    <EChartDemo :setup="setup" />
  </div>
</template>

<script setup>
import EChartDemo from '../../EChartDemo.vue'

function setup(ctx) {
  // 等待 v-chart 子组件挂载完成，确保 chartRef 可用
  ctx.myChart.showLoading()
  ctx.fetchJson('/data/asset/data/energy.json').then(function (data) {
    ctx.myChart.hideLoading()
    const option = {
      title: { text: 'Sankey Diagram' },
      tooltip: { trigger: 'item', triggerOn: 'mousemove' },
      series: [
        {
          type: 'sankey',
          data: data.nodes,
          links: data.links,
          emphasis: { focus: 'adjacency' },
          lineStyle: { color: 'gradient', curveness: 0.5 },
        },
      ],
    }
    ctx.setOption(option)
  })
}
</script>

<script setup>
import { ref, onMounted } from 'vue'
import { Line } from '@antv/g2plot'

const containerRef = ref(null)

onMounted(() => {
  const data = [
    { month: '一月', value: 120 },
    { month: '二月', value: 200 },
    // …共七个月数据
  ]
  const line = new Line(containerRef.value, {
    data,
    xField: 'month',
    yField: 'value',
    smooth: true,
    color: '#6366f1',
    point: { size: 4, shape: 'circle' },
    label: {},
  })
  line.render()
})
</script>

<template>
  <div ref="containerRef" class="chart-wrap"></div>
</template>

<template>
  <ExampleScene
    camera="perspective"
    :camera-position="[0, 0, 5]"
    :max-pixel-ratio="devicePixelRatio"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import * as THREE from 'three'
import ExampleScene from '../../ExampleScene.vue'

let cubes: any[] = []

function onReady(ctx: any) {
  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 })
  cubes = [-2, 0, 2].map((x) => {
    const cube = new THREE.Mesh(geometry, material)
    cube.position.x = x
    return cube
  })
  ctx.scene.add(...cubes)

  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(-1, 2, 4)
  ctx.scene.add(light)

  ctx.addUpdateCallback(() => {
    cubes.forEach((cube) => {
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
    })
  })
}
</script>

<template>
  <WebGLExampleScene @ready="onReady" />
</template>

<script setup lang="ts">
import WebGLExampleScene from '@webgl-examples/components/WebGLExampleScene.vue'
async function onReady({ canvas, container, addUpdateCallback, resize }: { canvas: HTMLCanvasElement; container: HTMLElement; addUpdateCallback: (fn: () => void) => void; resize: (w: number, h: number) => void }) {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 使用canvas 获取webgl 绘图上下文
  const gl = canvas.getContext("webgl")!!;
  // 指定将要用来清空绘图区的颜色
  gl.clearColor(1, 1, 0, 1);
  // 使用之前指定的颜色，清空绘图区
  gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>

// ① 清单真源：src/config/bigscreenData.ts
export interface BigScreenConfig {
  id: string
  title: string
  description: string
  category: string
  thumbnail: string
}

export const bigscreenList: BigScreenConfig[] = [
  {
    id: 'business-dashboard',
    title: '业务数据可视化大屏',
    description: '外卖业务数据大屏，包含用户统计、地图可视化、实时订单趋势等模块。',
    category: '数据仪表盘',
    thumbnail: '/bigscreen-thumbnails/business-dashboard.webp',
  },
  // …共 22 条
]

// ② 组件加载真源：src/config/bigscreenComponents.ts
export const bigscreenComponentMap: Record<
  string,
  () => Promise<Component | { default: Component }>
> = {
  'business-dashboard': () => import('@/views/bigscreen/business/BusinessDashboardPage.vue'),
  'report-dashboard': () => import('@/views/bigscreen/report/ReportDashboardPage.vue'),
  dashboard: () => import('@/views/bigscreen/dashboard/DashboardPage.vue'),
  // …22 个键与 bigscreenList 的 id 一一对应，多写少写都会被测试拦截
}