@c2-markdown-ui/react 0.4.4 → 0.4.5

package/src/widgets/Button.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-
-export interface ButtonProps {
-  label?: string;
-  /** 背景色（十六进制或 CSS 颜色名） */
-  color?: string;
-  /** 字体颜色（十六进制或 CSS 颜色名） */
-  textColor?: string;
-  /** 尺寸：small / medium / large，默认 medium */
-  size?: 'small' | 'medium' | 'large';
-  /** 是否禁用 */
-  disabled?: boolean;
-  onchange: (value: string) => void;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  label = '按钮',
-  color,
-  textColor,
-  size = 'medium',
-  disabled = false,
-  onchange
-}) => {
-  const style: React.CSSProperties = {};
-  if (color) style.backgroundColor = color;
-  if (textColor) style.color = textColor;
-
-  return (
-    <button
-      type="button"
-      className={`widget-button size-${size}`}
-      style={Object.keys(style).length > 0 ? style : undefined}
-      onClick={() => onchange(label)}
-      disabled={disabled}
-    >
-      {label}
-    </button>
-  );
-};
+import React from 'react';
+
+export interface ButtonProps {
+  label?: string;
+  /** 背景色（十六进制或 CSS 颜色名） */
+  color?: string;
+  /** 字体颜色（十六进制或 CSS 颜色名） */
+  textColor?: string;
+  /** 尺寸：small / medium / large，默认 medium */
+  size?: 'small' | 'medium' | 'large';
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  label = '按钮',
+  color,
+  textColor,
+  size = 'medium',
+  disabled = false,
+  onchange
+}) => {
+  const style: React.CSSProperties = {};
+  if (color) style.backgroundColor = color;
+  if (textColor) style.color = textColor;
+
+  return (
+    <button
+      type="button"
+      className={`widget-button size-${size}`}
+      style={Object.keys(style).length > 0 ? style : undefined}
+      onClick={() => onchange(label)}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
+};

package/src/widgets/ButtonGroup.tsx

@@ -1,47 +1,47 @@
-import React, { useState } from 'react';
-import { parseChoices, type ChoiceItem } from './choiceUtils';
-
-export interface ButtonGroupProps {
-  choices: string[];
-  label?: string;
-  default?: string;
-  /** 是否禁用 */
-  disabled?: boolean;
-  onchange: (value: string) => void;
-}
-
-export const ButtonGroup: React.FC<ButtonGroupProps> = ({
-  choices,
-  label = '',
-  default: initial,
-  disabled = false,
-  onchange
-}) => {
-  const items = parseChoices(choices);
-  const [selected, setSelected] = useState(initial ?? items[0]?.value ?? '');
-
-  const handleClick = (item: ChoiceItem) => {
-    if (disabled) return;
-    setSelected(item.value);
-    onchange(item.value);
-  };
-
-  return (
-    <div className="widget-button-group">
-      {label && <label>{label}</label>}
-      <div role="group" aria-label={label}>
-        {items.map((item) => (
-          <button
-            key={item.value}
-            type="button"
-            aria-pressed={selected === item.value}
-            onClick={() => handleClick(item)}
-            disabled={disabled}
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import { parseChoices, type ChoiceItem } from './choiceUtils';
+
+export interface ButtonGroupProps {
+  choices: string[];
+  label?: string;
+  default?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  choices,
+  label = '',
+  default: initial,
+  disabled = false,
+  onchange
+}) => {
+  const items = parseChoices(choices);
+  const [selected, setSelected] = useState(initial ?? items[0]?.value ?? '');
+
+  const handleClick = (item: ChoiceItem) => {
+    if (disabled) return;
+    setSelected(item.value);
+    onchange(item.value);
+  };
+
+  return (
+    <div className="widget-button-group">
+      {label && <label>{label}</label>}
+      <div role="group" aria-label={label}>
+        {items.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            aria-pressed={selected === item.value}
+            onClick={() => handleClick(item)}
+            disabled={disabled}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/widgets/Cascader.tsx

@@ -56,14 +56,15 @@ function parseSeg(seg: string): { value: string; label: string } {
   return { value: seg.trim(), label: seg.trim() };
 }
 
-/** 默认路径（value 串，/ 分隔）→ 逐级 value 数组；支持 label 串回退（无 key:label 时 value=label 等价） */
+/** 默认路径（value 串，/ 分隔）→ 逐级 value 数组；支持 key:label 段与 label 串回退 */
 function pathToValues(tree: CasNode[], path: string | undefined): string[] {
   if (!path) return [];
   const segs = path.split('/').map(s => s.trim()).filter(Boolean);
   const values: string[] = [];
   let level = tree;
   for (const seg of segs) {
-    const node = level.find(n => n.value === seg) ?? level.find(n => n.label === seg);
+    const { value: segVal, label: segLabel } = parseSeg(seg);
+    const node = level.find(n => n.value === segVal || n.value === seg || n.label === segLabel || n.label === seg);
     if (!node) return values;
     values.push(node.value);
     level = node.children;

package/src/widgets/Chart.tsx

@@ -1,238 +1,238 @@
-import { useEffect, useRef, useState } from 'react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  LineController,
-  BarController,
-  PieController,
-  ScatterController
-} from 'chart.js';
-import { parseChartCsv, normalizeRemoteChartData, RemoteChartData } from './chartRemoteData';
-
-// Register Chart.js components
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  LineController,
-  BarController,
-  PieController,
-  ScatterController
-);
-
-interface Dataset {
-  label: string;
-  data: number[];
-}
-
-interface ChartProps {
-  type: "chart-line" | "chart-bar" | "chart-pie" | "chart-scatter";
-  title?: string;
-  height?: number;
-  /** 远端数据源 URL：设置后运行时 fetch 拉取（CSV 文本或 JSON），本地 CSV 作为初始/后备数据 */
-  url?: string;
-  /** 是否展示图例：未设置（undefined）时自动判断（多数据集或饼图时展示） */
-  legend?: boolean;
-  labels: string[];
-  datasets: Dataset[];
-  options?: Record<string, any>;
-  onchange: (data: any) => void;
-}
-
-export function Chart({ type, title, height, url = '', legend, labels, datasets, options = {}, onchange }: ChartProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const chartRef = useRef<ChartJS | null>(null);
-
-  // 远端数据：拉取成功后覆盖本地 CSV 数据
-  // 加载失败静默处理：回落本地数据，均无数据时图表区域显示灰色"暂无数据"
-  const [remoteData, setRemoteData] = useState<RemoteChartData | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  // 实际渲染数据：远端优先，本地 CSV 作为初始/后备
-  const effectiveLabels = remoteData ? remoteData.labels : labels;
-  const effectiveDatasets = remoteData ? remoteData.datasets : datasets;
-  /** 无任何可渲染数据（本地与远端均为空） */
-  const isEmpty = !loading && effectiveLabels.length === 0 && effectiveDatasets.length === 0;
-
-  // 远端数据源：fetch 拉取 CSV 文本或 JSON，成功后覆盖本地数据
-  useEffect(() => {
-    if (!url) return;
-    let cancelled = false;
-    setLoading(true);
-    (async () => {
-      try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const text = await res.text();
-        if (cancelled) return;
-        let parsed: RemoteChartData | null = null;
-        const trimmed = text.trim();
-        if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
-          try {
-            parsed = normalizeRemoteChartData(JSON.parse(trimmed));
-          } catch {
-            parsed = null;
-          }
-        }
-        if (!parsed) parsed = parseChartCsv(text);
-        if (cancelled) return;
-        if (!parsed) throw new Error('响应无法解析为图表数据（CSV 或 JSON）');
-        setRemoteData(parsed);
-      } catch {
-        // 加载失败：静默回落本地数据
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => { cancelled = true; };
-  }, [url]);
-
-  // Clamp height to safe bounds: 200px min, 800px max, 400px default
-  const safeHeight = Math.max(200, Math.min(800, height || 400));
-
-  const getChartType = (widgetType: string) => {
-    switch (widgetType) {
-      case 'chart-line': return 'line';
-      case 'chart-bar': return 'bar';
-      case 'chart-pie': return 'pie';
-      case 'chart-scatter': return 'scatter';
-      default: return 'line';
-    }
-  };
-
-  const getDefaultColors = () => [
-    'rgb(75, 192, 192)',
-    'rgb(255, 99, 132)',
-    'rgb(54, 162, 235)',
-    'rgb(255, 206, 86)',
-    'rgb(153, 102, 255)',
-    'rgb(255, 159, 64)'
-  ];
-
-  const prepareDatasets = (datasets: Dataset[], chartType: string, chartLabels: string[]) => {
-    const colors = getDefaultColors();
-    
-    return datasets.map((dataset, index) => {
-      const color = colors[index % colors.length];
-      let processedData: any = dataset.data;
-      
-      // For scatter plots, convert data to {x, y} format
-      if (chartType === 'scatter') {
-        processedData = dataset.data.map((value, dataIndex) => ({
-          x: dataIndex,
-          y: value
-        }));
-      }
-      
-      if (chartType === 'pie') {
-        return {
-          ...dataset,
-          data: processedData,
-          backgroundColor: colors.slice(0, dataset.data.length),
-          borderColor: colors.slice(0, dataset.data.length),
-          borderWidth: 1
-        };
-      } else {
-        return {
-          ...dataset,
-          data: processedData,
-          borderColor: color,
-          backgroundColor: chartType === 'line' ? color + '20' : color,
-          borderWidth: 2,
-          fill: chartType === 'line' ? false : true
-        };
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (!canvasRef.current) return;
-
-    // Destroy existing chart
-    if (chartRef.current) {
-      chartRef.current.destroy();
-    }
-
-    const chartType = getChartType(type);
-    const preparedDatasets = prepareDatasets(effectiveDatasets, chartType, effectiveLabels);
-
-    const defaultOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: !!title,
-          text: title || ''
-        },
-        legend: {
-          display: legend !== undefined ? legend : (effectiveDatasets.length > 1 || chartType === 'pie')
-        }
-      },
-      onClick: (_event: any, elements: any[]) => {
-        if (elements.length > 0) {
-          const element = elements[0];
-          const dataIndex = element.index;
-          const datasetIndex = element.datasetIndex;
-
-          onchange({
-            label: effectiveLabels[dataIndex],
-            value: effectiveDatasets[datasetIndex]?.data[dataIndex],
-            datasetLabel: effectiveDatasets[datasetIndex]?.label,
-            dataIndex,
-            datasetIndex
-          });
-        }
-      }
-    };
-
-    const mergedOptions = { ...defaultOptions, ...options };
-
-    const chartData = chartType === 'scatter'
-      ? { datasets: preparedDatasets }
-      : { labels: effectiveLabels, datasets: preparedDatasets };
-
-    chartRef.current = new ChartJS(canvasRef.current, {
-      type: chartType as any,
-      data: chartData,
-      options: mergedOptions
-    });
-
-    // Cleanup function
-    return () => {
-      if (chartRef.current) {
-        chartRef.current.destroy();
-        chartRef.current = null;
-      }
-    };
-  }, [type, title, height, url, legend, effectiveLabels, effectiveDatasets, options, onchange]);
-
-  return (
-    <div className="widget-chart" style={{ height: `${safeHeight}px`, position: 'relative', width: '100%' }}>
-      {isEmpty && (
-        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#9ca3af', fontSize: 13, background: '#ffffff' }}>
-          暂无数据
-        </div>
-      )}
-      {loading && (
-        <div style={{ position: 'absolute', top: 8, right: 8, zIndex: 1, padding: '2px 8px', borderRadius: 4, background: 'rgba(0, 0, 0, 0.05)', fontSize: 12 }}>
-          数据加载中...
-        </div>
-      )}
-      <canvas ref={canvasRef} style={{ maxWidth: '100%', height: '100%' }}></canvas>
-    </div>
-  );
+import { useEffect, useRef, useState } from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  LineController,
+  BarController,
+  PieController,
+  ScatterController
+} from 'chart.js';
+import { parseChartCsv, normalizeRemoteChartData, RemoteChartData } from './chartRemoteData';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  LineController,
+  BarController,
+  PieController,
+  ScatterController
+);
+
+interface Dataset {
+  label: string;
+  data: number[];
+}
+
+interface ChartProps {
+  type: "chart-line" | "chart-bar" | "chart-pie" | "chart-scatter";
+  title?: string;
+  height?: number;
+  /** 远端数据源 URL：设置后运行时 fetch 拉取（CSV 文本或 JSON），本地 CSV 作为初始/后备数据 */
+  url?: string;
+  /** 是否展示图例：未设置（undefined）时自动判断（多数据集或饼图时展示） */
+  legend?: boolean;
+  labels: string[];
+  datasets: Dataset[];
+  options?: Record<string, any>;
+  onchange: (data: any) => void;
+}
+
+export function Chart({ type, title, height, url = '', legend, labels, datasets, options = {}, onchange }: ChartProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartJS | null>(null);
+
+  // 远端数据：拉取成功后覆盖本地 CSV 数据
+  // 加载失败静默处理：回落本地数据，均无数据时图表区域显示灰色"暂无数据"
+  const [remoteData, setRemoteData] = useState<RemoteChartData | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // 实际渲染数据：远端优先，本地 CSV 作为初始/后备
+  const effectiveLabels = remoteData ? remoteData.labels : labels;
+  const effectiveDatasets = remoteData ? remoteData.datasets : datasets;
+  /** 无任何可渲染数据（本地与远端均为空） */
+  const isEmpty = !loading && effectiveLabels.length === 0 && effectiveDatasets.length === 0;
+
+  // 远端数据源：fetch 拉取 CSV 文本或 JSON，成功后覆盖本地数据
+  useEffect(() => {
+    if (!url) return;
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const text = await res.text();
+        if (cancelled) return;
+        let parsed: RemoteChartData | null = null;
+        const trimmed = text.trim();
+        if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+          try {
+            parsed = normalizeRemoteChartData(JSON.parse(trimmed));
+          } catch {
+            parsed = null;
+          }
+        }
+        if (!parsed) parsed = parseChartCsv(text);
+        if (cancelled) return;
+        if (!parsed) throw new Error('响应无法解析为图表数据（CSV 或 JSON）');
+        setRemoteData(parsed);
+      } catch {
+        // 加载失败：静默回落本地数据
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [url]);
+
+  // Clamp height to safe bounds: 200px min, 800px max, 400px default
+  const safeHeight = Math.max(200, Math.min(800, height || 400));
+
+  const getChartType = (widgetType: string) => {
+    switch (widgetType) {
+      case 'chart-line': return 'line';
+      case 'chart-bar': return 'bar';
+      case 'chart-pie': return 'pie';
+      case 'chart-scatter': return 'scatter';
+      default: return 'line';
+    }
+  };
+
+  const getDefaultColors = () => [
+    '#1677ff',
+    '#52c41a',
+    '#faad14',
+    '#ff4d4f',
+    '#722ed1',
+    '#13c2c2'
+  ];
+
+  const prepareDatasets = (datasets: Dataset[], chartType: string, chartLabels: string[]) => {
+    const colors = getDefaultColors();
+    
+    return datasets.map((dataset, index) => {
+      const color = colors[index % colors.length];
+      let processedData: any = dataset.data;
+      
+      // For scatter plots, convert data to {x, y} format
+      if (chartType === 'scatter') {
+        processedData = dataset.data.map((value, dataIndex) => ({
+          x: dataIndex,
+          y: value
+        }));
+      }
+      
+      if (chartType === 'pie') {
+        return {
+          ...dataset,
+          data: processedData,
+          backgroundColor: colors.slice(0, dataset.data.length),
+          borderColor: colors.slice(0, dataset.data.length),
+          borderWidth: 1
+        };
+      } else {
+        return {
+          ...dataset,
+          data: processedData,
+          borderColor: color,
+          backgroundColor: chartType === 'line' ? color + '20' : color,
+          borderWidth: 2,
+          fill: chartType === 'line' ? false : true
+        };
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+
+    // Destroy existing chart
+    if (chartRef.current) {
+      chartRef.current.destroy();
+    }
+
+    const chartType = getChartType(type);
+    const preparedDatasets = prepareDatasets(effectiveDatasets, chartType, effectiveLabels);
+
+    const defaultOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: !!title,
+          text: title || ''
+        },
+        legend: {
+          display: legend !== undefined ? legend : (effectiveDatasets.length > 1 || chartType === 'pie')
+        }
+      },
+      onClick: (_event: any, elements: any[]) => {
+        if (elements.length > 0) {
+          const element = elements[0];
+          const dataIndex = element.index;
+          const datasetIndex = element.datasetIndex;
+
+          onchange({
+            label: effectiveLabels[dataIndex],
+            value: effectiveDatasets[datasetIndex]?.data[dataIndex],
+            datasetLabel: effectiveDatasets[datasetIndex]?.label,
+            dataIndex,
+            datasetIndex
+          });
+        }
+      }
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    const chartData = chartType === 'scatter'
+      ? { datasets: preparedDatasets }
+      : { labels: effectiveLabels, datasets: preparedDatasets };
+
+    chartRef.current = new ChartJS(canvasRef.current, {
+      type: chartType as any,
+      data: chartData,
+      options: mergedOptions
+    });
+
+    // Cleanup function
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+        chartRef.current = null;
+      }
+    };
+  }, [type, title, height, url, legend, effectiveLabels, effectiveDatasets, options, onchange]);
+
+  return (
+    <div className="widget-chart" style={{ height: `${safeHeight}px`, position: 'relative', width: '100%' }}>
+      {isEmpty && (
+        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(0, 0, 0, 0.45)', fontSize: 13, background: '#ffffff' }}>
+          暂无数据
+        </div>
+      )}
+      {loading && (
+        <div style={{ position: 'absolute', top: 8, right: 8, zIndex: 1, padding: '2px 8px', borderRadius: 4, background: 'rgba(0, 0, 0, 0.05)', fontSize: 12 }}>
+          数据加载中...
+        </div>
+      )}
+      <canvas ref={canvasRef} style={{ maxWidth: '100%', height: '100%' }}></canvas>
+    </div>
+  );
 }