@gadmin2n/schematics 0.0.71 → 0.0.72

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

@@ -1,1153 +0,0 @@
-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,
-];