@gadmin2n/schematics 0.0.69 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/demos.ts

@@ -0,0 +1,1153 @@
+import type { ComponentDemo } from './types';
+
+// ─── NumCard ──────────────────────────────────────────────────────────────────
+const numCardDemo: ComponentDemo = {
+  id: 'num-card',
+  title: 'NumCard',
+  description:
+    "项目唯一的数字指标卡片，用于展示单一关键数字（如总数、成功率、延迟、金额）。传 null / undefined / NaN 自动显示 '--'，无需手动判断。",
+  imports: `import { NumCard } from "@/components/canvas/NumCard";`,
+  props: [
+    {
+      name: 'variant',
+      type: '"default" | "withChart"',
+      required: true,
+      desc: 'default: 28px 值字体，通用指标卡（支持 comparisons）；withChart: 左数字右折线图',
+    },
+    { name: 'title', type: 'ReactNode', required: true, desc: '卡片标题' },
+    {
+      name: 'value',
+      type: 'number | string | ReactNode | null',
+      desc: '指标值，传 null / undefined / NaN / 空字符串时自动显示 "--"',
+    },
+    {
+      name: 'unit',
+      type: 'ReactNode',
+      desc: '数值右侧单位，字号缩小为 0.6em，显示在数值和 suffix 之间',
+    },
+    { name: 'prefix', type: 'ReactNode', desc: '数值左侧前缀，如货币符号 ¥' },
+    {
+      name: 'suffix',
+      type: 'ReactNode',
+      desc: '数值右侧后缀，紧跟在 unit 之后',
+    },
+    {
+      name: 'subTitle',
+      type: 'ReactNode',
+      desc: '数值下方副标题小字，居中显示，12px 灰色，适合补充单位说明（如 MUSD、截止今日）',
+    },
+    { name: 'icon', type: 'ReactNode', desc: '标题左侧图标（compact 常用）' },
+    {
+      name: 'metricId',
+      type: 'string',
+      desc: '指标 ID，传入后标题自动包裹 MetricInfoTooltip 展示指标详情，与 info 二选一',
+    },
+    {
+      name: 'info',
+      type: 'string',
+      desc: 'hover 提示文字，在标题右侧显示 InfoIcon；与 metricId 二选一',
+    },
+    {
+      name: 'showInfoIcon',
+      type: 'boolean',
+      default: 'true',
+      desc: '是否显示 InfoIcon；info 存在时有效',
+    },
+    {
+      name: 'formatNumber',
+      type: 'boolean',
+      default: 'true',
+      desc: '数字自动加千位分隔符；含单位的预格式化字符串须传 false',
+    },
+    { name: 'valueColor', type: 'string', desc: '自定义数值颜色' },
+    {
+      name: 'comparisons',
+      type: 'ComparisonItem[]',
+      desc: '环比数组，每项 { label: string, value: string, isUp: boolean }；isUp=true 绿色 ↑，false 红色 ↓',
+    },
+    {
+      name: 'onTitleClick',
+      type: '() => void',
+      desc: '标题点击回调，显示右箭头 →，可跳转详情页',
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态',
+    },
+    {
+      name: 'skeleton',
+      type: 'boolean',
+      default: 'false',
+      desc: '与 loading 同时为 true 时显示骨架屏替代 Spin',
+    },
+    {
+      name: 'styles',
+      type: '{ container?, title?, value?, subTitle? }',
+      desc: '各子区域 CSSProperties 精细控制，优先级高于 variant 默认样式',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器自定义样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'default',
+      label: 'default',
+      code: `<NumCard
+  variant="default"
+  title="指标名称"
+  value={12345}
+  unit="台"
+  testId="canvas-numcard-default"
+/>`,
+    },
+  ],
+};
+
+// ─── Filter ────────────────────────────────────────────────────────────────────
+const filterDemo: ComponentDemo = {
+  id: 'filter',
+  title: 'Filter',
+  description:
+    '项目统一的过滤条容器，封装布局标准化、搜索/重置按钮、Form 实例管理。3 种 layout：card-grid（Card+Grid）/ inline（单行）/ inline-right（右对齐，无按钮）。',
+  imports: `import { Filter } from "@/components/canvas/Filter";
+import { Form, Select, DatePicker, Input } from "antd";`,
+  props: [
+    {
+      name: 'layout',
+      type: '"card-grid" | "inline" | "inline-right"',
+      default: '"card-grid"',
+      desc: 'card-grid: Card 容器 + Grid 布局；inline: 单行水平排列；inline-right: 右对齐，默认无查询/重置按钮',
+    },
+    {
+      name: 'columns',
+      type: 'number',
+      default: '4',
+      desc: 'card-grid 模式下 Grid 列数，按钮自动占最后 1 格',
+    },
+    {
+      name: 'onSearch',
+      type: '(values: Record<string, unknown>) => void',
+      required: true,
+      desc: '点击「查询」按钮回调，参数为 Form.getFieldsValue() 全量值',
+    },
+    {
+      name: 'onReset',
+      type: '(form: FormInstance) => void',
+      desc: '点击「重置」回调；不传时只执行 form.resetFields()，不触发 onSearch',
+    },
+    {
+      name: 'formProps',
+      type: 'FormProps',
+      desc: '透传至内部 antd Form，支持 initialValues / onValuesChange 等所有 Form 属性（form 和 layout 由组件内部管理）',
+    },
+    {
+      name: 'form',
+      type: 'FormInstance',
+      desc: '外部传入 form 实例，用于父组件需要主动调用 form.resetFields() / form.getFieldsValue() 等方法的场景',
+    },
+    {
+      name: 'showActions',
+      type: 'boolean',
+      desc: '是否显示查询/重置按钮。inline-right 默认 false，其余默认 true',
+    },
+    {
+      name: 'searchText',
+      type: 'string',
+      desc: '查询按钮文字，默认读 i18n common.query',
+    },
+    {
+      name: 'resetText',
+      type: 'string',
+      desc: '重置按钮文字，默认读 i18n common.reset',
+    },
+    {
+      name: 'children',
+      type: 'ReactNode',
+      required: true,
+      desc: '过滤字段，通常为 Form.Item 列表',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'card-grid',
+      label: 'card-grid',
+      code: `<Filter
+  layout="card-grid"
+  columns={4}
+  onSearch={(values) => console.log("search:", values)}
+  testId="canvas-filter-card-grid"
+>
+  <Form.Item name="keyword" label="关键词">
+    <Input placeholder="请输入" style={{ width: "100%" }} />
+  </Form.Item>
+  <Form.Item name="region" label="大区">
+    <Select options={[
+      { label: "APAC", value: "APAC" },
+      { label: "EMEA", value: "EMEA" },
+      { label: "Americas", value: "AMER" },
+    ]} style={{ width: "100%" }} />
+  </Form.Item>
+  <Form.Item name="type" label="类型">
+    <Select options={[
+      { label: "类型A", value: "a" },
+      { label: "类型B", value: "b" },
+    ]} style={{ width: "100%" }} />
+  </Form.Item>
+</Filter>`,
+    },
+    {
+      name: 'inline',
+      label: 'inline',
+      code: `<Filter
+  layout="inline"
+  onSearch={(values) => console.log("search:", values)}
+  testId="canvas-filter-inline"
+>
+  <Form.Item name="keyword" label="关键词">
+    <Input placeholder="请输入" style={{ width: 200 }} />
+  </Form.Item>
+  <Form.Item name="type" label="类型">
+    <Select
+      placeholder="全部类型"
+      allowClear
+      style={{ width: 150 }}
+      options={[
+        { label: "类型A", value: "a" },
+        { label: "类型B", value: "b" },
+      ]}
+    />
+  </Form.Item>
+</Filter>`,
+    },
+    {
+      name: 'inline-right',
+      label: 'inline-right',
+      code: `<Filter
+  layout="inline-right"
+  formProps={{
+    initialValues: { granularity: "day" },
+    onValuesChange: (_, all) => console.log("change:", all),
+  }}
+  onSearch={(values) => console.log("search:", values)}
+  testId="canvas-filter-inline-right"
+>
+  <Form.Item name="granularity" style={{ marginBottom: 0 }}>
+    <Select
+      style={{ width: 120 }}
+      options={[
+        { label: "按天", value: "day" },
+        { label: "按周", value: "week" },
+        { label: "按月", value: "month" },
+      ]}
+    />
+  </Form.Item>
+</Filter>`,
+    },
+  ],
+};
+
+// ─── BarChart ──────────────────────────────────────────────────────────────────
+const barChartDemo: ComponentDemo = {
+  id: 'bar-chart',
+  title: 'BarChart',
+  description:
+    '项目统一柱状图，封装标准 ECharts 配置。支持纵柱、横柱、多系列堆叠、百分比堆叠，数据格式随 variant 不同。',
+  imports: `import { BarChart } from "@/components/canvas/BarChart";`,
+  props: [
+    {
+      name: 'variant',
+      type: '"bar" | "stackBar" | "stackBarPercent"',
+      default: '"bar"',
+      desc: 'bar: 单系列柱状图；stackBar: 多系列堆叠柱状图；stackBarPercent: 百分比堆叠柱状图（Y 轴 0–100%）',
+    },
+    {
+      name: 'direction',
+      type: '"vertical" | "horizontal"',
+      default: '"vertical"',
+      desc: '图表方向：vertical 为纵向（默认），horizontal 为横向',
+    },
+    {
+      name: 'data',
+      type: 'BarDataSingle | BarDataMulti | BarDataPercent',
+      required: true,
+      desc: '单系列用 { name, value, extraTxt? }[]；多系列用 { xData, series }；百分比堆叠用 { xData, series（百分比值）, allTypes, originalData（原始计数，用于 tooltip/label）}',
+    },
+    { name: 'unit', type: 'string', desc: 'tooltip 和 label 中显示的单位' },
+    {
+      name: 'title',
+      type: 'string | ReactNode',
+      desc: '字符串自动套居中 12px bold 样式；传 ReactNode 完全自定义',
+    },
+    {
+      name: 'height',
+      type: 'number | string',
+      default: '300',
+      desc: '图表容器高度（px）',
+    },
+    {
+      name: 'showLabel',
+      type: 'boolean',
+      default: 'true',
+      desc: '是否在柱顶/柱右显示数值标签；stackBar 堆叠模式仅最后一段显示总量',
+    },
+    {
+      name: 'legendShow',
+      type: 'boolean',
+      desc: '是否显示图例，多系列默认 true，单系列默认 false',
+    },
+    {
+      name: 'chartProps',
+      type: 'Record<string, any>',
+      desc: '透传至 ECharts option，支持 yAxis / xAxis / grid / seriesProps（透传到每条 series）/ reverseTooltip（tooltip 反向排序）',
+    },
+    {
+      name: 'option',
+      type: 'EChartsCoreOption',
+      desc: '完全自定义 option，与组件生成的 option 浅合并，优先级最高',
+    },
+    {
+      name: 'onChartReady',
+      type: '(instance: ECharts | null) => void',
+      desc: '图表实例就绪回调，用于 chart linking（如 BarChart ↔ PieChart 联动）；销毁时传 null',
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态',
+    },
+    {
+      name: 'empty',
+      type: 'boolean',
+      desc: '强制显示空态；未传时根据数据是否为空自动判断',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'bar',
+      label: 'bar',
+      code: `<BarChart
+  variant="bar"
+  data={[
+    { name: "A", value: 420 },
+    { name: "B", value: 580 },
+    { name: "C", value: 310 },
+    { name: "D", value: 670 },
+  ]}
+  unit="件"
+  title="数据对比"
+  height={300}
+  legendShow={true}
+  testId="canvas-barchart-bar"
+/>`,
+    },
+    {
+      name: 'stackBar',
+      label: 'stackBar',
+      code: `<BarChart
+  variant="stackBar"
+  data={{
+    xData: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+    series: [
+      { name: "系列A", data: [120, 132, 101, 134,  90, 150] },
+      { name: "系列B", data: [220, 182, 191, 234, 290, 330] },
+      { name: "系列C", data: [ 80,  72,  85,  90, 110,  95] },
+    ],
+  }}
+  unit="万"
+  title="构成分析"
+  height={300}
+  legendShow={true}
+  testId="canvas-barchart-stack"
+/>`,
+    },
+    {
+      name: 'stackBarPercent',
+      label: 'stackBarPercent',
+      code: `<BarChart
+  variant="stackBarPercent"
+  data={{
+    xData: ["Jan", "Feb", "Mar", "Apr", "May"],
+    series: [
+      { name: "类型A", data: [55, 58, 52, 60, 57] },
+      { name: "类型B", data: [30, 28, 33, 25, 29] },
+      { name: "类型C", data: [15, 14, 15, 15, 14] },
+    ],
+    allTypes: ["类型A", "类型B", "类型C"],
+    originalData: {
+      "Jan": [{ key: "类型A", active_device_cnt: 110 }, { key: "类型B", active_device_cnt: 60 }, { key: "类型C", active_device_cnt: 30 }],
+      "Feb": [{ key: "类型A", active_device_cnt: 116 }, { key: "类型B", active_device_cnt: 56 }, { key: "类型C", active_device_cnt: 28 }],
+      "Mar": [{ key: "类型A", active_device_cnt: 104 }, { key: "类型B", active_device_cnt: 66 }, { key: "类型C", active_device_cnt: 30 }],
+      "Apr": [{ key: "类型A", active_device_cnt: 120 }, { key: "类型B", active_device_cnt: 50 }, { key: "类型C", active_device_cnt: 30 }],
+      "May": [{ key: "类型A", active_device_cnt: 114 }, { key: "类型B", active_device_cnt: 58 }, { key: "类型C", active_device_cnt: 28 }],
+    },
+  }}
+  unit="%"
+  title="占比分析"
+  height={300}
+  legendShow={true}
+  testId="canvas-barchart-stackpercent"
+/>`,
+    },
+  ],
+};
+
+// ─── LineChart ─────────────────────────────────────────────────────────────────
+const lineChartDemo: ComponentDemo = {
+  id: 'line-chart',
+  title: 'LineChart',
+  description:
+    '项目统一折线图，支持单系列、多系列堆叠、面积堆叠（hover 只高亮当前系列）、分组面积折线（hover 同父类分组高亮）、迷你趋势线、双 Y 轴混合图。',
+  imports: `import { LineChart } from "@/components/canvas/LineChart";`,
+  props: [
+    {
+      name: 'variant',
+      type: '"line" | "mulAreaLine" | "dualYAxis"',
+      default: '"line"',
+      desc: 'line: 默认折线图（单/多系列自动判断）；mulAreaLine: 复合面积折线（外层 BG 着色区域 + 内层虚线）；dualYAxis: 双 Y 轴混合图（折线+柱状）',
+    },
+    {
+      name: 'data',
+      type: 'LineDataSingle | LineDataMulti | LineDataDualYAxis',
+      required: true,
+      desc: '单系列用 { name, value }[]；多系列用 { xData, series[] }；dualYAxis 增加 yData 和 series[].yAxisIndex / type',
+    },
+    { name: 'title', type: 'string | ReactNode', desc: '图表标题' },
+    {
+      name: 'unit',
+      type: 'string',
+      desc: 'Y 轴单位，显示在 tooltip 和 Y 轴 label 中（dualYAxis 使用 yData 中的 unit）',
+    },
+    {
+      name: 'height',
+      type: 'number | string',
+      default: '300',
+      desc: '图表容器高度（px）',
+    },
+    {
+      name: 'smartYAxis',
+      type: 'boolean',
+      default: 'false',
+      desc: '自动计算 Y 轴范围避免趋势被压扁，两侧加 30% padding；适用于 line / stackLine',
+    },
+    {
+      name: 'legendShow',
+      type: 'boolean',
+      desc: '是否显示图例，多系列默认 true，单系列默认 false',
+    },
+    {
+      name: 'smartLabel',
+      type: 'boolean',
+      default: 'false',
+      desc: '仅 line variant：label 只在每隔一个刻度的点上显示，避免密集重叠',
+    },
+    {
+      name: 'markLine',
+      type: '{ value: number, color?: string }',
+      desc: '在指定 Y 值绘制水平参考线，适用于 stackLine（如带宽 80% 阈值）',
+    },
+    {
+      name: 'chartProps',
+      type: 'Record<string, any>',
+      desc: '透传至 ECharts option，支持 yAxis / xAxis / grid / legend / tooltip / seriesProps（覆盖 series 级配置）',
+    },
+    {
+      name: 'onChartReady',
+      type: '(instance: ECharts | null) => void',
+      desc: '图表实例就绪回调，用于 PieChart ↔ LineChart 联动；销毁时传 null',
+    },
+    {
+      name: 'onEvents',
+      type: 'Record<string, (params, chart) => void>',
+      desc: 'ECharts 事件绑定（click、mouseover 等）',
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态',
+    },
+    {
+      name: 'empty',
+      type: 'boolean',
+      desc: '强制显示空态；未传时根据数据是否为空自动判断',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'default',
+      label: 'default',
+      code: `<LineChart
+  data={{
+    xData: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+    series: [
+      { name: "利用率", data: [65, 72, 78, 85, 82, 91] },
+    ],
+  }}
+  unit="%"
+  title="利用率"
+  height={300}
+  legendShow={true}
+  testId="canvas-linechart-default"
+/>`,
+    },
+  ],
+};
+
+// ─── PieChart ──────────────────────────────────────────────────────────────────
+const pieChartDemo: ComponentDemo = {
+  id: 'pie-chart',
+  title: 'PieChart',
+  description:
+    '项目统一饼图，支持标准饼图、环形图（甜甜圈）、旭日图。数据自动按 value 从大到小排序，超 topN 项自动合并为 Others。',
+  imports: `import { PieChart } from "@/components/canvas/PieChart";`,
+  props: [
+    {
+      name: 'variant',
+      type: '"pie" | "ring" | "sunburst"',
+      default: '"pie"',
+      desc: 'pie: 标准饼图；ring: 环形图（甜甜圈，默认不显示图例）；sunburst: 旭日图（支持多层嵌套，children 字段）',
+    },
+    {
+      name: 'data',
+      type: '{ name: string, value: number, itemStyle?: { color? }, comment?, children? }[]',
+      required: true,
+      desc: '数据项，自动按 value 降序排序；itemStyle.color 可为每项指定颜色；sunburst 通过 children 支持嵌套结构',
+    },
+    { name: 'title', type: 'string | ReactNode', desc: '图表标题' },
+    {
+      name: 'height',
+      type: 'number | string',
+      default: '300',
+      desc: '图表容器高度（px）',
+    },
+    {
+      name: 'topN',
+      type: 'number',
+      default: '5',
+      desc: '显示前 N 项，其余自动合并为 Others；传 0 不限制；hover Others 展示明细 tooltip（sunburst 不受影响）',
+    },
+    {
+      name: 'insideLabelThreshold',
+      type: 'number',
+      desc: '扇区占比（0-100）超过此值时将 label 放到扇区内部（白色）；仅 pie variant 有效，推荐 15',
+    },
+    {
+      name: 'legendOrient',
+      type: '"horizontal" | "vertical"',
+      default: '"horizontal"',
+      desc: 'horizontal: 底部横排滚动图例；vertical: 右侧纵排图例',
+    },
+    {
+      name: 'legendShow',
+      type: 'boolean',
+      desc: '是否显示图例；pie 默认 true，ring 默认 false，sunburst 默认 true',
+    },
+    {
+      name: 'chartProps',
+      type: 'Record<string, any>',
+      desc: '透传至 ECharts series 配置，与基准配置浅合并',
+    },
+    {
+      name: 'option',
+      type: 'EChartsCoreOption',
+      desc: '完全自定义 option，与组件生成的 option 浅合并，优先级最高',
+    },
+    { name: 'onClick', type: '(params) => void', desc: '饼图扇区点击回调' },
+    {
+      name: 'onEvents',
+      type: 'Record<string, (params, chart) => void>',
+      desc: '其他 ECharts 事件绑定',
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态',
+    },
+    {
+      name: 'empty',
+      type: 'boolean',
+      desc: '强制显示空态；未传时根据 data.length === 0 自动判断',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'pie',
+      label: 'pie',
+      code: `<PieChart
+  variant="pie"
+  data={[
+    { name: "类目A", value: 1245 },
+    { name: "类目B", value: 876 },
+    { name: "类目C", value: 234 },
+    { name: "类目D", value: 189 },
+    { name: "类目E", value: 156 },
+  ]}
+  height={300}
+  title="分布"
+  legendShow={true}
+  insideLabelThreshold={15}
+  topN={0}
+  testId="canvas-piechart-pie"
+/>`,
+    },
+    {
+      name: 'ring',
+      label: 'ring',
+      code: `<PieChart
+  variant="ring"
+  data={[
+    { name: "正常", value: 820, itemStyle: { color: "#52c41a" } },
+    { name: "警告", value: 124, itemStyle: { color: "#faad14" } },
+    { name: "异常", value:  42, itemStyle: { color: "#f5222d" } },
+  ]}
+  height={300}
+  title="状态"
+  legendShow={true}
+  topN={0}
+  testId="canvas-piechart-ring"
+/>`,
+    },
+    {
+      name: 'sunburst',
+      label: 'sunburst',
+      code: `<PieChart
+  variant="sunburst"
+  data={[
+    {
+      name: "A类", value: 600,
+      children: [
+        { name: "A-1", value: 320 },
+        { name: "A-2", value: 180 },
+        { name: "A-3", value: 100 },
+      ],
+    },
+    {
+      name: "B类", value: 300,
+      children: [
+        { name: "B-1", value: 150 },
+        { name: "B-2", value:  90 },
+        { name: "B-3", value:  60 },
+      ],
+    },
+    {
+      name: "C类", value: 200,
+      children: [
+        { name: "C-1", value: 120 },
+        { name: "C-2", value:  80 },
+      ],
+    },
+  ]}
+  height={360}
+  title="分类"
+  legendShow={true}
+  testId="canvas-piechart-sunburst"
+/>`,
+    },
+  ],
+};
+
+// ─── RadarChart ────────────────────────────────────────────────────────────────
+const radarChartDemo: ComponentDemo = {
+  id: 'radar-chart',
+  title: 'RadarChart',
+  description:
+    '项目统一雷达图，适用于多维度能力评估和多实体横向对比。indicators 和 series.data 长度必须相同。',
+  imports: `import { RadarChart } from "@/components/canvas/RadarChart";`,
+  props: [
+    {
+      name: 'indicators',
+      type: '{ name: string, max?: number, min?: number }[]',
+      required: true,
+      desc: '维度定义，max 默认 100，min 默认 0，数组长度须与 series[].data 相同',
+    },
+    {
+      name: 'series',
+      type: '{ name: string, data: number[], color?: string }[]',
+      required: true,
+      desc: '数据系列，data 与 indicators 顺序严格对应；color 自定义该系列颜色',
+    },
+    {
+      name: 'title',
+      type: 'string | ReactNode',
+      desc: '图表标题，字符串套默认样式；ReactNode 完全自定义',
+    },
+    {
+      name: 'legendShow',
+      type: 'boolean',
+      default: 'true',
+      desc: '是否显示图例；单系列建议传 false',
+    },
+    {
+      name: 'height',
+      type: 'number | string',
+      default: '300',
+      desc: '图表容器高度（px）',
+    },
+    {
+      name: 'chartProps',
+      type: 'object',
+      desc: "透传至 ECharts option，支持 radar（含 shape: 'circle' 切换圆形）、legend、tooltip；推荐覆盖 radar.splitArea.areaStyle.color 避免默认白色遮罩",
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态',
+    },
+    {
+      name: 'empty',
+      type: 'boolean',
+      desc: '强制显示空态；未传时根据 series.length === 0 自动判断',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'demo',
+      label: 'demo',
+      code: `<RadarChart
+  indicators={[
+    { name: "维度A" }, { name: "维度B" },
+    { name: "维度C" }, { name: "维度D" },
+    { name: "维度E" }, { name: "维度F" },
+  ]}
+  series={[
+    { name: "组A", data: [92, 88, 75, 84, 90, 78], color: "#3889f3" },
+    { name: "组B", data: [85, 92, 88, 91, 83, 95], color: "#0db46c" },
+  ]}
+  height={300}
+  testId="canvas-radar-demo"
+/>`,
+    },
+  ],
+};
+
+// ─── TreemapChart ──────────────────────────────────────────────────────────────
+const treemapChartDemo: ComponentDemo = {
+  id: 'treemap-chart',
+  title: 'TreemapChart',
+  description:
+    '矩形树图，方块面积 = 数值大小，适合多分类占比展示（>8 项时替代饼图）。自动检测扁平 / 嵌套结构。',
+  imports: `import { TreemapChart } from "@/components/canvas/TreemapChart";`,
+  props: [
+    {
+      name: 'data',
+      type: 'TreemapDataItem[]',
+      required: true,
+      desc: '有 children 字段视为嵌套结构，底部自动生成可点击图例；无 children 视为扁平结构，自动按色相排序聚集相近颜色',
+    },
+    {
+      name: 'data[].name',
+      type: 'string',
+      required: true,
+      desc: '节点名称，显示在方块内',
+    },
+    {
+      name: 'data[].value',
+      type: 'number',
+      required: true,
+      desc: '节点数值，决定方块面积大小',
+    },
+    {
+      name: 'data[].color',
+      type: 'string',
+      desc: '顶层节点颜色；子节点继承父节点颜色',
+    },
+    {
+      name: 'data[].children',
+      type: 'TreemapDataItem[]',
+      desc: '子节点列表，有此字段时触发嵌套模式，顶层 value 由子节点之和决定',
+    },
+    { name: 'title', type: 'string | ReactNode', desc: '图表标题' },
+    {
+      name: 'height',
+      type: 'number | string',
+      default: '400',
+      desc: '图表容器高度（px）',
+    },
+    {
+      name: 'chartProps',
+      type: 'Record<string, any>',
+      desc: '透传至 ECharts option，可覆盖 tooltip（含 formatter）、series 等字段',
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态（绝对定位覆盖层，不占用图表空间）',
+    },
+    {
+      name: 'empty',
+      type: 'boolean',
+      desc: '强制显示空态；未传时根据 data.length === 0 自动判断',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'demo',
+      label: 'demo',
+      code: `<TreemapChart
+  data={[
+    {
+      name: "A组",
+      color: "#3889f3",
+      children: [
+        { name: "A-1", value: 42 },
+        { name: "A-2", value: 28 },
+        { name: "A-3", value: 35 },
+      ],
+    },
+    {
+      name: "B组",
+      color: "#0db46c",
+      children: [
+        { name: "B-1", value: 31 },
+        { name: "B-2", value: 24 },
+        { name: "B-3", value: 18 },
+      ],
+    },
+    {
+      name: "C组",
+      color: "#f5a623",
+      children: [
+        { name: "C-1", value: 12 },
+        { name: "C-2", value: 17 },
+      ],
+    },
+  ]}
+  height={400}
+  title="矩形树图"
+  testId="canvas-treemap-demo"
+/>`,
+    },
+  ],
+};
+
+// ─── Table ─────────────────────────────────────────────────────────────────────
+const tableDemo: ComponentDemo = {
+  id: 'table',
+  title: 'Table',
+  description:
+    'drop-in 替换 antd Table，传 pagination 对象自动补 showSizeChanger + pageSizeOptions。不传 pagination 则不分页。',
+  imports: `import { Table } from "@/components/canvas/Table";`,
+  props: [
+    {
+      name: 'dataSource',
+      type: 'object[]',
+      required: true,
+      desc: '表格数据，每项须包含 key 字段（antd Table 要求）',
+    },
+    {
+      name: 'columns',
+      type: 'ColumnType<T>[]',
+      required: true,
+      desc: '列定义，与 antd Table columns 完全相同',
+    },
+    {
+      name: 'pagination',
+      type: 'TablePaginationConfig | false',
+      desc: '分页配置。未传或 false → 不显示分页；传对象自动补 showSizeChanger + pageSizeOptions（调用者显式传入的字段优先级更高）',
+    },
+    {
+      name: 'entityName',
+      type: 'string',
+      desc: "传入后 showTotal 显示 'Total {n} {entityName} in total'；pagination.showTotal 已传时忽略",
+    },
+    {
+      name: 'size',
+      type: '"large" | "middle" | "small"',
+      desc: '表格 size，默认使用 antd 默认值',
+    },
+    {
+      name: 'scroll',
+      type: '{ x?: number, y?: number }',
+      desc: '开启横向/纵向滚动；x 为表格总宽度，开启时每列须设 width',
+    },
+    { name: 'loading', type: 'boolean', desc: '表格加载态' },
+    {
+      name: 'rowSelection',
+      type: 'TableRowSelection<T>',
+      desc: '行选择配置，与 antd Table rowSelection 相同',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'default',
+      label: 'default',
+      code: `<Table
+  size="small"
+  dataSource={[
+    { key: "1", name: "Alice", dept: "Engineering", status: "在职" },
+    { key: "2", name: "Bob",   dept: "Design",      status: "在职" },
+    { key: "3", name: "Carol", dept: "Marketing",   status: "离职" },
+  ]}
+  columns={[
+    { title: "姓名", dataIndex: "name", key: "name" },
+    { title: "部门", dataIndex: "dept", key: "dept" },
+    { title: "状态", dataIndex: "status", key: "status" },
+  ]}
+  testId="canvas-table-default"
+/>`,
+    },
+  ],
+};
+
+// ─── WorldMap ─────────────────────────────────────────────────────────────────
+const worldMapDemo: ComponentDemo = {
+  id: 'world-map',
+  title: 'WorldMap',
+  description:
+    '项目统一世界地图，封装标准 geo 基准配置（Highcharts 坐标系，aspectScale 固定为 1）。通过 option 透传 series、geo 差异字段即可。',
+  imports: `import { WorldMap } from "@/components/canvas/WorldMap";`,
+  props: [
+    {
+      name: 'option',
+      type: 'EChartsOption',
+      required: true,
+      desc: 'ECharts option 差异字段，与内部基准配置浅合并；须包含 geo（传 {} 使用基准配置）和 series',
+    },
+    {
+      name: 'option.geo',
+      type: 'GeoComponentOption',
+      desc: '地理坐标系配置；传 {} 使用基准配置；可通过 regions 覆盖各国颜色；aspectScale 固定为 1（Highcharts 预投影坐标系）',
+    },
+    {
+      name: 'option.geo.regions',
+      type: '{ name: string, itemStyle: { areaColor: string } }[]',
+      desc: "各国/地区样式覆盖，name 需使用英文国家名（如 'China'、'US'）",
+    },
+    {
+      name: 'option.series',
+      type: 'SeriesOption[]',
+      desc: "ECharts series 数组；effectScatter 类型配合 coordinateSystem: 'geo' 实现波纹散点",
+    },
+    {
+      name: 'option.tooltip',
+      type: 'TooltipOption',
+      desc: "tooltip 配置，trigger: 'item' 适合散点图",
+    },
+    {
+      name: 'loading',
+      type: 'boolean',
+      default: 'false',
+      desc: 'true 时显示 Spin 加载态',
+    },
+    {
+      name: 'style',
+      type: 'CSSProperties',
+      desc: '容器样式，必须通过 height 指定高度（默认 600px）；支持 aspectRatio、flex 等响应式写法',
+    },
+    {
+      name: 'onEvents',
+      type: 'Record<string, (params, chart) => void>',
+      desc: 'ECharts 事件绑定（click、mousemove 等）；必须用 useMemo 保持引用稳定，否则地图会在每次渲染时闪烁重建',
+    },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填，不传编译报错',
+    },
+  ],
+  variants: [
+    {
+      name: 'demo',
+      label: 'demo',
+      code: `<WorldMap
+  option={{
+    geo: {
+      regions: [
+        { name: "China",  itemStyle: { areaColor: "#f8c471" } },
+        { name: "US",     itemStyle: { areaColor: "#f2b4aa" } },
+        { name: "Russia", itemStyle: { areaColor: "#f5d7b2" } },
+        { name: "Brazil", itemStyle: { areaColor: "#aed6f1" } },
+        { name: "India",  itemStyle: { areaColor: "#a9dfbf" } },
+      ],
+    },
+    series: [],
+  }}
+  style={{ height: 400 }}
+  testId="canvas-worldmap-basic"
+/>`,
+    },
+    {
+      name: 'heatmap',
+      label: 'heatmap',
+      testId: 'canvas-worldmap-heatmap',
+      code: `<WorldMap
+  option={{
+    geo: {},
+    visualMap: {
+      min: 0,
+      max: 1000,
+      left: "left",
+      top: "bottom",
+      text: ["High", "Low"],
+      calculable: true,
+      inRange: { color: ["#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"] },
+    },
+    series: [
+      {
+        name: "Headcount",
+        type: "heatmap",
+        coordinateSystem: "geo",
+        data: [
+          [116.4,  39.9, 980],
+          [121.5,  31.2, 750],
+          [113.3,  23.1, 620],
+          [ -87.6, 41.9, 430],
+          [-122.4, 37.8, 390],
+          [  2.3,  48.9, 310],
+          [103.8,   1.4, 280],
+        ],
+        pointSize: 20,
+        blurSize: 30,
+      },
+    ],
+    tooltip: { trigger: "item" },
+  }}
+  style={{ height: 400 }}
+  testId="canvas-worldmap-heatmap"
+/>`,
+    },
+  ],
+};
+
+// ─── ChartViewer ──────────────────────────────────────────────────────────────
+const chartViewerDemo: ComponentDemo = {
+  id: 'chart-viewer',
+  title: 'ChartViewer',
+  description:
+    '图表切换容器：右上角三个图标按钮可在柱状图、折线图、饼图之间切换。内置 mock 数据，状态内聚，零配置使用。',
+  imports: `import { ChartViewer } from "@/components/canvas/ChartViewer";`,
+  props: [
+    { name: 'height', type: 'number', default: '300', desc: '图表高度（px）' },
+    {
+      name: 'defaultVariant',
+      type: '"bar" | "line" | "pie"',
+      default: '"bar"',
+      desc: '初始显示的图表类型',
+    },
+    { name: 'style', type: 'CSSProperties', desc: '容器自定义样式' },
+    { name: 'className', type: 'string', desc: '容器 className' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填',
+    },
+  ],
+  variants: [
+    {
+      name: 'default',
+      label: 'default',
+      code: `<ChartViewer
+  height={300}
+  testId="canvas-chartviewer-default"
+/>`,
+    },
+  ],
+};
+
+// ─── Section ──────────────────────────────────────────────────────────────────
+const sectionDemo: ComponentDemo = {
+  id: 'section',
+  title: 'Section',
+  description: '白色背景容器，左上角标题，其他组件可放在其上方形成视觉分组。',
+  imports: `import { Section } from "@/components/canvas/Section";`,
+  props: [
+    { name: 'title', type: 'string', desc: '左上角标题文字' },
+    {
+      name: 'testId',
+      type: 'string',
+      required: true,
+      desc: 'E2E 定位用，必填',
+    },
+  ],
+  variants: [
+    {
+      name: 'default',
+      label: 'default',
+      code: `<Section title="分组标题" testId="canvas-section-default" />`,
+    },
+  ],
+};
+
+// ─── 全部 demos ────────────────────────────────────────────────────────────────
+export const allDemos: ComponentDemo[] = [
+  numCardDemo,
+  barChartDemo,
+  lineChartDemo,
+  pieChartDemo,
+  radarChartDemo,
+  treemapChartDemo,
+  tableDemo,
+  worldMapDemo,
+  chartViewerDemo,
+  sectionDemo,
+];