@fses/workbench-app 0.1.3 → 0.2.1

package/node_modules/@fses/workbench-card/src/renderers/chart/chartRendererRegistry.ts

@@ -0,0 +1,311 @@
+/**
+ * @fileoverview Chart renderer registry - shared chart renderer keys, prompt labels, and intent detection helpers.
+ * @author seadon
+ * @created 2026-05-20
+ */
+import type { RoleId } from '../../types';
+
+export type ChartRendererKey =
+  | 'bar'
+  | 'line'
+  | 'mixedBarLine'
+  | 'waterfall'
+  | 'heatmap'
+  | 'pie'
+  | 'donut'
+  | 'radar'
+  | 'scatter'
+  | 'bubble'
+  | 'funnel'
+  | 'gauge'
+  | 'map'
+  | 'sankey'
+  | 'tree'
+  | 'gantt'
+  | 'candlestick'
+  | 'kline'
+  | 'boxplot'
+  | 'area'
+  | 'stackedBar'
+  | 'pareto'
+  | 'drilldownTree'
+  | 'network'
+  | 'geoGlobe';
+
+export interface ChartRendererDefinition {
+  key: ChartRendererKey;
+  title: string;
+  subtitle: string;
+  label: string;
+  aliases: string[];
+  defaultResourceKey: string | ((roleId: RoleId) => string);
+}
+
+export const CHART_RENDERER_DEFINITIONS = [
+  {
+    key: 'network',
+    title: '网络关系图',
+    subtitle: '适合展示节点关系、权限关系和影响链路。',
+    label: '网络图',
+    aliases: ['网络图', '关系网络', 'network'],
+    defaultResourceKey: (roleId) => `${roleId}.network_graph`,
+  },
+  {
+    key: 'drilldownTree',
+    title: '层级下钻树图',
+    subtitle: '适合表达层级拆解与后续下钻结构。',
+    label: '下钻树图',
+    aliases: ['下钻树图', 'drilldownTree'],
+    defaultResourceKey: (roleId) => `${roleId}.drilldown_tree`,
+  },
+  {
+    key: 'pareto',
+    title: '关键少数帕累托图',
+    subtitle: '适合识别关键少数与累计占比。',
+    label: '帕累托图',
+    aliases: ['帕累托图', 'pareto'],
+    defaultResourceKey: (roleId) => `${roleId}.pareto`,
+  },
+  {
+    key: 'stackedBar',
+    title: '堆叠柱状图',
+    subtitle: '适合同时查看构成叠加和总量对比。',
+    label: '堆叠柱状图',
+    aliases: ['堆叠柱状图', '堆叠柱形图', 'stackedBar'],
+    defaultResourceKey: (roleId) => `${roleId}.stacked_bar`,
+  },
+  {
+    key: 'area',
+    title: '经营面积图',
+    subtitle: '适合查看趋势累计和阶段面积变化。',
+    label: '面积图',
+    aliases: ['面积图', 'area'],
+    defaultResourceKey: (roleId) => `${roleId}.area_trend`,
+  },
+  {
+    key: 'boxplot',
+    title: '经营分布箱线图',
+    subtitle: '适合查看分布、离散和异常值。',
+    label: '箱线图',
+    aliases: ['箱线图', 'boxplot'],
+    defaultResourceKey: (roleId) => `${roleId}.boxplot`,
+  },
+  {
+    key: 'geoGlobe',
+    title: '3D 地球经营卡',
+    subtitle: '适合展示全球节点、飞线和跨区域状态。',
+    label: '3D地球',
+    aliases: ['3D地球', '地球卡', 'geoGlobe'],
+    defaultResourceKey: (roleId) => `${roleId}.geo_globe`,
+  },
+  {
+    key: 'donut',
+    title: '经营结构环形图',
+    subtitle: '适合展示构成占比与中心核心指标。',
+    label: '环形图',
+    aliases: ['环形图', 'donut'],
+    defaultResourceKey: 'sales.region_mix',
+  },
+  {
+    key: 'pie',
+    title: '经营结构饼图',
+    subtitle: '适合快速判断经营贡献与构成占比。',
+    label: '饼图',
+    aliases: ['饼图', 'pie'],
+    defaultResourceKey: 'sales.region_mix',
+  },
+  {
+    key: 'radar',
+    title: '多维能力雷达图',
+    subtitle: '适合横向比较收入、效率、风险等多个维度。',
+    label: '雷达图',
+    aliases: ['雷达图', 'radar'],
+    defaultResourceKey: (roleId) => `${roleId}.radar_profile`,
+  },
+  {
+    key: 'bubble',
+    title: '经营分布气泡图',
+    subtitle: '同时呈现两个指标和影响规模。',
+    label: '气泡图',
+    aliases: ['气泡图', 'bubble'],
+    defaultResourceKey: (roleId) => `${roleId}.bubble_distribution`,
+  },
+  {
+    key: 'scatter',
+    title: '经营分布散点图',
+    subtitle: '适合识别投入产出分布和离群点。',
+    label: '散点图',
+    aliases: ['散点图', 'scatter'],
+    defaultResourceKey: (roleId) => `${roleId}.scatter_distribution`,
+  },
+  {
+    key: 'funnel',
+    title: '流程漏斗图',
+    subtitle: '适合展示从入口到闭环的转化效率。',
+    label: '漏斗图',
+    aliases: ['漏斗图', 'funnel'],
+    defaultResourceKey: (roleId) => (roleId === 'sales_leader' ? 'sales.funnel' : `${roleId}.process_funnel`),
+  },
+  {
+    key: 'gauge',
+    title: '经营健康度仪表盘',
+    subtitle: '适合表达单一核心状态的当前水位。',
+    label: '仪表盘',
+    aliases: ['仪表盘', 'gauge'],
+    defaultResourceKey: (roleId) => `${roleId}.health_gauge`,
+  },
+  {
+    key: 'map',
+    title: '区域经营地图',
+    subtitle: '适合展示区域贡献与风险热区分布。',
+    label: '地图',
+    aliases: ['地图', 'map'],
+    defaultResourceKey: 'sales.region_map',
+  },
+  {
+    key: 'sankey',
+    title: '经营流向桑基图',
+    subtitle: '适合展示经营来源到结果项之间的流向关系。',
+    label: '桑基图',
+    aliases: ['桑基图', 'sankey'],
+    defaultResourceKey: (roleId) => `${roleId}.sankey_flow`,
+  },
+  {
+    key: 'tree',
+    title: '经营拆解树图',
+    subtitle: '适合展示主题、责任域与下钻层级。',
+    label: '树图',
+    aliases: ['树图', 'tree'],
+    defaultResourceKey: (roleId) => `${roleId}.tree_breakdown`,
+  },
+  {
+    key: 'gantt',
+    title: '任务排期甘特图',
+    subtitle: '适合展示跨团队任务时间安排与风险节点。',
+    label: '甘特图',
+    aliases: ['甘特图', 'gantt'],
+    defaultResourceKey: (roleId) => `${roleId}.gantt_schedule`,
+  },
+  {
+    key: 'kline',
+    title: '经营指数 K 线图',
+    subtitle: '适合展示开高低收与波动趋势。',
+    label: 'K线图',
+    aliases: ['K线图', 'k线图', 'kline', 'candlestick'],
+    defaultResourceKey: (roleId) => `${roleId}.business_index_kline`,
+  },
+  {
+    key: 'candlestick',
+    title: '经营指数 K 线图',
+    subtitle: '适合展示开高低收与波动趋势。',
+    label: 'K线图',
+    aliases: ['candlestick'],
+    defaultResourceKey: (roleId) => `${roleId}.business_index_kline`,
+  },
+  {
+    key: 'heatmap',
+    title: '经营热力图',
+    subtitle: '适合展示风险、质量或密度分布。',
+    label: '热力图',
+    aliases: ['热力图', 'heatmap'],
+    defaultResourceKey: (roleId) => `${roleId}.heatmap_matrix`,
+  },
+  {
+    key: 'waterfall',
+    title: '经营差异瀑布图',
+    subtitle: '适合展示预算、偏差与实际的桥接关系。',
+    label: '瀑布图',
+    aliases: ['瀑布图', 'waterfall'],
+    defaultResourceKey: 'finance.cashflow_trend',
+  },
+  {
+    key: 'mixedBarLine',
+    title: '经营混合趋势图',
+    subtitle: '适合同时对比趋势与规模。',
+    label: '混合图',
+    aliases: ['混合图', '组合图', '柱线图', 'mixed', 'mixedbarline'],
+    defaultResourceKey: 'sales.trend',
+  },
+  {
+    key: 'line',
+    title: '经营折线图',
+    subtitle: '适合观察时间趋势与波动。',
+    label: '折线图',
+    aliases: ['折线图', 'line'],
+    defaultResourceKey: 'sales.trend',
+  },
+  {
+    key: 'bar',
+    title: '经营柱状图',
+    subtitle: '适合比较各阶段或各区域的规模差异。',
+    label: '柱状图',
+    aliases: ['柱状图', '柱形图', 'bar'],
+    defaultResourceKey: 'sales.trend',
+  },
+] as const satisfies readonly ChartRendererDefinition[];
+
+export const CHART_RENDERER_KEYS = CHART_RENDERER_DEFINITIONS.map((item) => item.key);
+
+export const CHART_RENDERER_PROMPT_KEYS = CHART_RENDERER_KEYS.join(', ');
+
+export const CHART_RENDERER_PROMPT_LABELS = CHART_RENDERER_DEFINITIONS
+  .filter((item) => ['pie', 'donut', 'radar', 'scatter', 'bubble', 'funnel', 'gauge', 'map', 'sankey', 'tree', 'gantt'].includes(item.key))
+  .map((item) => `${item.key}=${item.label}`)
+  .join(', ')
+  .concat(', candlestick/kline=K线图');
+
+/**
+ * Normalizes legacy chart renderer aliases to the keys used by option builders.
+ * @param value - Renderer key from card registry, snapshot data, or planner output.
+ * @returns Normalized chart renderer key.
+ */
+export function normalizeChartRendererKey(value: string): ChartRendererKey | string {
+  const normalized = value.trim();
+  if (normalized === 'candlestick') return 'kline';
+  if (normalized === 'drilldownTree') return 'tree';
+  if (normalized === 'stackedBar') return 'stackedBar';
+  return CHART_RENDERER_KEYS.includes(normalized as ChartRendererKey)
+    ? normalized as ChartRendererKey
+    : normalized;
+}
+
+/**
+ * Resolves the default data resource key for a chart renderer definition.
+ * @param definition - Chart renderer definition.
+ * @param roleId - Current workbench role id.
+ * @returns Resource key used by chart demos and planner defaults.
+ */
+export function resolveChartResourceKey(definition: ChartRendererDefinition, roleId: RoleId) {
+  return typeof definition.defaultResourceKey === 'function'
+    ? definition.defaultResourceKey(roleId)
+    : definition.defaultResourceKey;
+}
+
+/**
+ * Detects an explicitly requested chart renderer from free-form user text.
+ * @param text - User prompt or route text.
+ * @param roleId - Current workbench role id.
+ * @returns Detected renderer metadata, or null when the text does not name a chart renderer.
+ */
+export function detectChartRenderer(text: string, roleId: RoleId) {
+  const normalizedText = text.toLowerCase();
+  const definition = CHART_RENDERER_DEFINITIONS.find((item) =>
+    item.aliases.some((alias) => {
+      const normalizedAlias = alias.toLowerCase();
+      const isAscii = /^[a-z0-9]+$/i.test(alias);
+      return isAscii
+        ? new RegExp(`\\b${normalizedAlias}\\b`, 'i').test(normalizedText)
+        : normalizedText.includes(normalizedAlias);
+    }),
+  );
+  if (!definition) return null;
+
+  return {
+    rendererKey: definition.key,
+    title: roleId === 'sales_leader' && definition.key === 'funnel'
+      ? '销售漏斗图'
+      : definition.title,
+    subtitle: definition.subtitle,
+    resourceKey: resolveChartResourceKey(definition, roleId),
+  };
+}

package/node_modules/@fses/workbench-card/src/renderers/chart/chartResponsiveLayout.ts

@@ -0,0 +1,172 @@
+/**
+ * @fileoverview 图表自适应布局工具 - 根据数据规模调整卡片内 ECharts 标签、图例和绘图区。
+ * @author seadon
+ * @created 2026-06-18
+ */
+type CartesianResponsiveLayout = {
+  grid: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    containLabel: boolean;
+  };
+  xAxis: {
+    axisLabel: Record<string, unknown>;
+  };
+  legend: Record<string, unknown>;
+};
+
+type PieResponsiveLayout = {
+  legend: Record<string, unknown>;
+  series: {
+    center: [string, string];
+    label: Record<string, unknown>;
+    labelLine: Record<string, unknown>;
+    labelLayout: Record<string, unknown>;
+    minShowLabelAngle?: number;
+  };
+};
+
+type PieLayoutSlice = {
+  label?: unknown;
+  name?: unknown;
+  value?: unknown;
+};
+
+const BASE_GRID = { left: 42, right: 24, top: 28, bottom: 38, containLabel: true };
+
+/**
+ * 统一计算展示文本长度，中文等宽近似按 2 个英文字符处理。
+ * @param value - 需要展示在图表标签中的原始值。
+ * @returns 用于布局阈值判断的近似字符宽度。
+ */
+function displayWidth(value: unknown): number {
+  const text = String(value ?? '');
+  return Array.from(text).reduce((sum, char) => sum + (/[\u4e00-\u9fff]/.test(char) ? 2 : 1), 0);
+}
+
+/**
+ * 判断笛卡尔坐标系类目轴是否需要紧凑布局。
+ * @param categories - x 轴类目集合。
+ * @returns 是否应启用旋转、省略和更大的底部留白。
+ */
+function needsDenseCategoryLayout(categories: readonly unknown[]): boolean {
+  const longest = Math.max(0, ...categories.map(displayWidth));
+  return categories.length >= 6 || longest >= 10;
+}
+
+/**
+ * 构建柱状图、折线图等类目轴图表的卡片自适应布局。
+ * @param categories - x 轴类目集合。
+ * @param seriesCount - 当前图表的系列数量。
+ * @returns 可合并进 ECharts option 的 grid 和 xAxis.axisLabel 配置。
+ */
+export function buildCartesianResponsiveLayout(categories: readonly unknown[], seriesCount = 1): CartesianResponsiveLayout {
+  const showLegend = seriesCount > 1;
+  const legend = showLegend
+    ? { bottom: 0, itemWidth: 10, itemHeight: 10, textStyle: { color: '#64748b' } }
+    : { show: false };
+  if (!needsDenseCategoryLayout(categories)) {
+    return {
+      grid: BASE_GRID,
+      xAxis: {
+        axisLabel: {
+          hideOverlap: true,
+        },
+      },
+      legend,
+    };
+  }
+
+  const longest = Math.max(0, ...categories.map(displayWidth));
+  const rotate = categories.length >= 8 || longest >= 14 ? 35 : 25;
+  const labelWidth = Math.min(88, Math.max(52, longest >= 14 ? 68 : 52));
+
+  return {
+    grid: {
+      ...BASE_GRID,
+      bottom: rotate >= 35 ? 56 : 50,
+    },
+    xAxis: {
+      axisLabel: {
+        interval: 0,
+        rotate,
+        width: labelWidth,
+        margin: 8,
+        overflow: 'truncate',
+        ellipsis: '...',
+        hideOverlap: true,
+      },
+    },
+    legend,
+  };
+}
+
+/**
+ * 判断饼图是否需要把图例和标签切到紧凑布局。
+ * @param slices - 饼图切片数据。
+ * @returns 是否启用底部滚动图例和居中饼图。
+ */
+function needsCompactPieLayout(slices: readonly PieLayoutSlice[]): boolean {
+  const labels = slices.map((slice) => slice.label ?? slice.name);
+  const longest = Math.max(0, ...labels.map(displayWidth));
+  return slices.length >= 6 || longest >= 12;
+}
+
+/**
+ * 构建饼图、环形图的卡片自适应布局。
+ * @param slices - 饼图切片数据，兼容 label 和 name 字段。
+ * @returns 可合并进 ECharts option 的 legend 和 series 展示配置。
+ */
+export function buildPieResponsiveLayout(slices: readonly PieLayoutSlice[]): PieResponsiveLayout {
+  if (!needsCompactPieLayout(slices)) {
+    return {
+      legend: {
+        orient: 'vertical',
+        right: 8,
+        top: 'middle',
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: { color: '#64748b' },
+      },
+      series: {
+        center: ['38%', '50%'],
+        label: {
+          formatter: '{b}\n{d}%',
+          width: 80,
+          overflow: 'truncate',
+          ellipsis: '...',
+        },
+        labelLine: { length: 10, length2: 10 },
+        labelLayout: { hideOverlap: true },
+        minShowLabelAngle: 10,
+      },
+    };
+  }
+
+  return {
+    legend: {
+      type: 'scroll',
+      orient: 'horizontal',
+      left: 'center',
+      bottom: 0,
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: { color: '#64748b' },
+      pageIconSize: 8,
+      pageTextStyle: { color: '#64748b' },
+    },
+    series: {
+      center: ['50%', '45%'],
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      labelLayout: { hideOverlap: true },
+      minShowLabelAngle: 12,
+    },
+  };
+}

package/node_modules/@fses/workbench-card/src/renderers/chart/dynamicEchartOption.ts

@@ -0,0 +1,127 @@
+/**
+ * @fileoverview Dynamic ECharts option helpers - fills an ECharts option template from refreshed row data.
+ * @author seadon
+ * @created 2026-05-20
+ */
+import type { EChartsOption } from 'echarts';
+
+export interface DynamicEchartRowsPayload {
+  rows: Array<Record<string, unknown>>;
+  fieldMapping: {
+    xField?: unknown;
+    yFields?: unknown;
+  };
+}
+
+export interface DynamicEchartFieldMapping {
+  xField?: string;
+  yFields: string[];
+}
+
+/**
+ * Checks whether a runtime value is a plain object record.
+ * @param value - Unknown runtime value.
+ * @returns True when the value can be cloned as a record.
+ */
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+/**
+ * Deep-clones template values before filling row data into chart options.
+ * @param value - Template value.
+ * @returns Cloned value preserving arrays and plain records.
+ */
+function cloneValue<T>(value: T): T {
+  if (Array.isArray(value)) return value.map((item) => cloneValue(item)) as T;
+  if (isRecord(value)) {
+    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, cloneValue(item)])) as T;
+  }
+  return value;
+}
+
+/**
+ * Reads the first object from a direct object or array value.
+ * @param value - Candidate ECharts axis config.
+ * @returns First object config, or an empty record.
+ */
+function firstRecord(value: unknown): Record<string, unknown> {
+  if (Array.isArray(value)) return isRecord(value[0]) ? value[0] : {};
+  return isRecord(value) ? value : {};
+}
+
+/**
+ * Resolves the series template for a generated series index.
+ * @param series - Template series config.
+ * @param index - Generated series index.
+ * @returns Matching series template or first template.
+ */
+function seriesTemplateAt(series: unknown, index: number): Record<string, unknown> {
+  if (Array.isArray(series)) {
+    const template = series[index] ?? series[0];
+    return isRecord(template) ? template : {};
+  }
+  return isRecord(series) ? series : {};
+}
+
+/**
+ * Counts object series templates in an ECharts option.
+ * @param series - Template series config.
+ * @returns Number of usable series templates.
+ */
+function seriesTemplateCount(series: unknown): number {
+  if (Array.isArray(series)) return series.filter(isRecord).length;
+  return isRecord(series) ? 1 : 0;
+}
+
+/**
+ * Normalizes dynamic field mapping metadata into typed chart fields.
+ * @param fieldMapping - Raw binding field mapping.
+ * @returns Normalized x/y field mapping.
+ */
+export function normalizeDynamicEchartFieldMapping(fieldMapping: unknown): DynamicEchartFieldMapping {
+  const source = isRecord(fieldMapping) ? fieldMapping : {};
+  return {
+    xField: typeof source.xField === 'string' ? source.xField : undefined,
+    yFields: Array.isArray(source.yFields) ? source.yFields.filter((item): item is string => typeof item === 'string') : [],
+  };
+}
+
+/**
+ * Builds a concrete ECharts option from a template and refreshed rows.
+ * @param optionTemplate - ECharts option template from the workbench card.
+ * @param payload - Refreshed row data plus field mapping.
+ * @returns Concrete ECharts option ready for rendering.
+ */
+export function buildDynamicEchartOption(
+  optionTemplate: unknown,
+  payload: DynamicEchartRowsPayload,
+): EChartsOption {
+  const option = isRecord(optionTemplate) ? cloneValue(optionTemplate) : {};
+  const rows = Array.isArray(payload.rows) ? payload.rows.filter(isRecord) : [];
+  const { xField, yFields } = normalizeDynamicEchartFieldMapping(payload.fieldMapping);
+
+  if (xField) {
+    const nextXAxis = { ...firstRecord(option.xAxis), type: 'category', data: rows.map((row) => row[xField]) };
+    option.xAxis = Array.isArray(option.xAxis) ? [nextXAxis, ...option.xAxis.slice(1)] : nextXAxis;
+  }
+
+  if (yFields.length) {
+    const templateSeries = cloneValue(option.series);
+    const templateCount = seriesTemplateCount(templateSeries);
+    option.series = yFields.map((field, index) => ({
+      ...seriesTemplateAt(templateSeries, index),
+      name: templateCount === 1 && index > 0
+        ? field
+        : typeof seriesTemplateAt(templateSeries, index).name === 'string'
+          ? seriesTemplateAt(templateSeries, index).name
+          : field,
+      data: rows.map((row) => row[field]),
+    }));
+  } else if (!Array.isArray(option.series) && isRecord(option.series)) {
+    option.series = [option.series];
+  }
+
+  return option as EChartsOption;
+}
+