@h-ai/ui 0.1.0-alpha.33 → 0.1.0-alpha.35

package/dist/components/scenes/ai/mermaid-render.js

@@ -40,3 +40,10 @@ export async function renderMermaidDiagram(code) {
     const { svg } = await mermaid.render(renderId, code);
     return svg;
 }
+/**
+ * Mermaid 11.x 会在 SVG 内写入很长的 style 标签内容；在 contenteditable 预览区里，
+ * 部分浏览器会把这些 CSS 当成正文显示。这里保留 SVG 图形，剥离内联样式文本。
+ */
+export function stripMermaidSvgStyleElements(svg) {
+    return svg.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '');
+}

package/dist/components/scenes/charts/Chart.svelte

@@ -0,0 +1,152 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Chart 组件
+  =============================================================================
+  基于 LayerChart 的统一图表入口，仅处理 type 路由、主题色默认值和基础状态。
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ChartProps, ChartSeries, ChartType } from './chart-types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
+  import { DAISYUI_CHART_COLORS, resolveChartColors } from './chart-theme.js'
+  import AreaChart from './renderers/AreaChart.svelte'
+  import BarChart from './renderers/BarChart.svelte'
+  import LineChart from './renderers/LineChart.svelte'
+  import PieChart from './renderers/PieChart.svelte'
+  import ScatterChart from './renderers/ScatterChart.svelte'
+  import 'layerchart/daisyui-5.css'
+
+  const {
+    type,
+    data = [],
+    x,
+    y,
+    series,
+    orientation,
+    size = 'md',
+    title = '',
+    description = '',
+    loading = false,
+    empty = false,
+    class: className = '',
+    ...restProps
+  }: ChartProps = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
+
+  const chartSizeHeights: Record<NonNullable<ChartProps['size']>, number> = {
+    sm: 200,
+    md: 300,
+    lg: 400,
+  }
+
+  const cartesianChartTypes = new Set<ChartType>(['bar', 'line', 'area'])
+
+  /** 图表可视高度优先尊重 LayerChart 原生 height，未传时使用 @h-ai/ui 的 size 预设。 */
+  const chartHeight = $derived(
+    typeof restProps.height === 'number' ? restProps.height : chartSizeHeights[size],
+  )
+
+  const isEmpty = $derived(empty || data.length === 0)
+  const hasHeader = $derived(Boolean(title || description))
+
+  const rootClass = $derived(
+    cn(
+      'hai-chart flex flex-col gap-3',
+      className,
+    ),
+  )
+
+  const viewportClass = $derived(
+    cn(
+      'hai-chart-viewport min-w-0',
+      (loading || isEmpty) && 'flex items-center justify-center rounded-lg border border-dashed border-base-300 bg-base-200/30',
+    ),
+  )
+
+  /**
+   * 当调用方只传 y 数组时，为常见笛卡尔图自动补 series。
+   * 这让 `<Chart y={['a','b']}>` 仍然得到多系列和主题色，同时不影响显式传入的 LayerChart series。
+   */
+  const normalizedSeries = $derived.by<ChartSeries[] | undefined>(() => {
+    if (series) {
+      if (!cartesianChartTypes.has(type))
+        return series
+
+      return series.map(item => ({
+        ...item,
+        value: item.value ?? item.key,
+      }))
+    }
+
+    if (!cartesianChartTypes.has(type) || !Array.isArray(y))
+      return undefined
+
+    return y.map(key => ({
+      key,
+      label: key,
+      value: key,
+    }))
+  })
+
+  const resolvedSeries = $derived(resolveChartColors(normalizedSeries))
+
+  /** 饼图使用统一 x/y API 时，将 x 映射为 key/label，y 的第一项映射为 value。 */
+  const pieValue = $derived(Array.isArray(y) ? y[0] : y)
+
+  const cartesianLayerProps = $derived({
+    data,
+    height: chartHeight,
+    cRange: DAISYUI_CHART_COLORS,
+    ...restProps,
+    orientation,
+    series: resolvedSeries,
+    x,
+    y,
+  })
+
+  const pieLayerProps = $derived({
+    data,
+    height: chartHeight,
+    key: x,
+    label: x,
+    value: pieValue,
+    cRange: DAISYUI_CHART_COLORS,
+    ...restProps,
+    series: resolvedSeries,
+  })
+</script>
+
+<div {...dataAttributes} class={rootClass}>
+  {#if hasHeader}
+    <div class='space-y-1'>
+      {#if title}
+        <h3 class='text-sm font-semibold text-base-content'>{title}</h3>
+      {/if}
+      {#if description}
+        <p class='text-xs leading-relaxed text-base-content/60'>{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class={viewportClass} style={`height: ${chartHeight}px;`}>
+    {#if loading}
+      <span class='loading loading-spinner loading-md text-primary' aria-label={uiM('chart_loading')}></span>
+    {:else if isEmpty}
+      <p class='text-sm text-base-content/50'>{uiM('chart_empty')}</p>
+    {:else if type === 'bar'}
+      <BarChart {...cartesianLayerProps} />
+    {:else if type === 'line'}
+      <LineChart {...cartesianLayerProps} />
+    {:else if type === 'area'}
+      <AreaChart {...cartesianLayerProps} />
+    {:else if type === 'pie'}
+      <PieChart {...pieLayerProps} />
+    {:else if type === 'scatter'}
+      <ScatterChart {...cartesianLayerProps} />
+    {/if}
+  </div>
+</div>

package/dist/components/scenes/charts/Chart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ChartProps } from './chart-types.js';
+import 'layerchart/daisyui-5.css';
+declare const Chart: import("svelte").Component<ChartProps, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/scenes/charts/chart-theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @h-ai/ui — 图表主题色
+ *
+ * 颜色保持 CSS 变量引用，避免在 JS 中读取主题并让 DaisyUI 主题切换自然生效。
+ * @module chart-theme
+ */
+import type { ChartSeries } from './chart-types.js';
+export declare const DAISYUI_CHART_THEME_COLORS: {
+    readonly primary: "var(--color-primary)";
+    readonly secondary: "var(--color-secondary)";
+    readonly accent: "var(--color-accent)";
+    readonly success: "var(--color-success)";
+    readonly warning: "var(--color-warning)";
+    readonly error: "var(--color-error)";
+    readonly info: "var(--color-info)";
+};
+/** DaisyUI 图表主题色按系列分配的稳定顺序。 */
+export declare const DAISYUI_CHART_COLORS: readonly ["var(--color-primary)", "var(--color-secondary)", "var(--color-accent)", "var(--color-success)", "var(--color-warning)", "var(--color-error)", "var(--color-info)"];
+/**
+ * 为缺少 color 的系列补齐 DaisyUI 主题色。
+ * 返回新数组，避免修改调用方传入的 series 对象。
+ */
+export declare function resolveChartColors<TSeries extends ChartSeries>(series?: readonly TSeries[]): TSeries[] | undefined;

package/dist/components/scenes/charts/chart-theme.js

@@ -0,0 +1,44 @@
+/**
+ * @h-ai/ui — 图表主题色
+ *
+ * 颜色保持 CSS 变量引用，避免在 JS 中读取主题并让 DaisyUI 主题切换自然生效。
+ * @module chart-theme
+ */
+export const DAISYUI_CHART_THEME_COLORS = {
+    // primary 用作第一条主数据系列，跟随当前 DaisyUI 5 主题主色。
+    primary: 'var(--color-primary)',
+    // secondary 用作第二条系列，和 primary 拉开视觉层级。
+    secondary: 'var(--color-secondary)',
+    // accent 用作第三条系列，补充主题中的强调色。
+    accent: 'var(--color-accent)',
+    // success 用作正向或增长类系列，也作为常规调色板的一员。
+    success: 'var(--color-success)',
+    // warning 用作需要注意的系列，维持 DaisyUI 语义一致性。
+    warning: 'var(--color-warning)',
+    // error 用作异常或下降类系列，也可作为高对比补充色。
+    error: 'var(--color-error)',
+    // info 用作信息类系列，补足多系列图表的第七种主题色。
+    info: 'var(--color-info)',
+};
+/** DaisyUI 图表主题色按系列分配的稳定顺序。 */
+export const DAISYUI_CHART_COLORS = [
+    DAISYUI_CHART_THEME_COLORS.primary,
+    DAISYUI_CHART_THEME_COLORS.secondary,
+    DAISYUI_CHART_THEME_COLORS.accent,
+    DAISYUI_CHART_THEME_COLORS.success,
+    DAISYUI_CHART_THEME_COLORS.warning,
+    DAISYUI_CHART_THEME_COLORS.error,
+    DAISYUI_CHART_THEME_COLORS.info,
+];
+/**
+ * 为缺少 color 的系列补齐 DaisyUI 主题色。
+ * 返回新数组，避免修改调用方传入的 series 对象。
+ */
+export function resolveChartColors(series) {
+    if (!series)
+        return undefined;
+    return series.map((item, index) => ({
+        ...item,
+        color: item.color ?? DAISYUI_CHART_COLORS[index % DAISYUI_CHART_COLORS.length],
+    }));
+}

package/dist/components/scenes/charts/chart-types.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @h-ai/ui — 图表组件类型定义
+ *
+ * 统一 Chart 只定义 @h-ai/ui 自身需要的轻量语义，其他字段通过索引签名透传给 LayerChart。
+ * @module chart-types
+ */
+import type { DataAttributes } from '../../../types.js';
+/** 图表数据单元允许的原子值，和 LayerChart 常见 accessor 输入保持一致。 */
+export type ChartDataValue = string | number | Date;
+/** 图表数据项；每个字段都可被 x/y/key/value 等 accessor 引用。 */
+export type ChartDataItem = Record<string, ChartDataValue>;
+/** LayerChart accessor 的常用子集，用于 series.value 等透传配置。 */
+export type ChartAccessor = string | number | ((item: ChartDataItem) => unknown) | ChartAccessor[] | null | undefined;
+/** 统一 Chart 支持的高阶图表类型。 */
+export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'scatter';
+/** Chart 预设高度档位；具体像素值在 Chart.svelte 中固定映射。 */
+export type ChartSize = 'sm' | 'md' | 'lg';
+/** 折线图渲染变体；default 保持 LayerChart 原生渲染，segmented-point 提供分段线 + 圆点样式。 */
+export type ChartLineVariant = 'default' | 'segmented-point';
+/** 折线图 tooltip 触发方式；nearest 会在绘图区内吸附最近数据点。 */
+export type ChartTooltipMode = 'default' | 'nearest';
+export interface ChartSeries {
+    /** 系列稳定标识；宽表数据通常对应数据项中的数值字段名。 */
+    key: string;
+    /** 系列展示名称；不传时 LayerChart 会按 key 或 value accessor 回退。 */
+    label?: string;
+    /** 系列颜色；不传时由 @h-ai/ui 按 DaisyUI 主题色顺序补齐。 */
+    color?: string;
+    /** LayerChart 原生 value accessor，用于覆盖默认按 key 取值的行为。 */
+    value?: ChartAccessor;
+    /** LayerChart 原生独立数据源，用于 long format 或每个系列不同数据的场景。 */
+    data?: ChartDataItem[];
+    /** 系列初始可见状态；透传给 LayerChart legend/series 状态管理。 */
+    selected?: boolean;
+    /** 传给 LayerChart 内部 mark 组件的原生 props，例如 Bars/Spline/Arc/Points props。 */
+    props?: Record<string, unknown>;
+    /** 单系列最大值；主要用于饼图等需要上限语义的 LayerChart 配置。 */
+    maxValue?: number;
+    /** 保留 LayerChart 新增 series 字段的透传能力，避免薄包装层限制底层 API。 */
+    [key: string]: unknown;
+}
+export interface ChartProps extends DataAttributes {
+    /** 选择内部 LayerChart 高阶组件；必填。 */
+    type: ChartType;
+    /** 图表数据源；空数组会触发内置空态。 */
+    data: ChartDataItem[];
+    /** x 轴字段名；饼图中默认映射为 key 和 label。 */
+    x: string;
+    /** y 轴字段名；传数组时会自动生成多系列配置。 */
+    y: string | string[];
+    /** 系列配置；未指定 color 的项会按 DaisyUI 主题色补齐。 */
+    series?: ChartSeries[];
+    /** LayerChart 原生 orientation；主要用于柱状图和折线图方向控制。 */
+    orientation?: 'horizontal' | 'vertical';
+    /** 折线图渲染变体；仅 type='line' 时生效，默认透传 LayerChart。 */
+    lineVariant?: ChartLineVariant;
+    /** 折线图 tooltip 触发方式；nearest 会在整块绘图区内吸附最近点。 */
+    tooltipMode?: ChartTooltipMode;
+    /** 折线图是否显示随 hover 变化的竖向参考线；仅 segmented-point 变体生效。 */
+    showCrosshair?: boolean;
+    /** 折线图是否显示数据点圆点；仅 segmented-point 变体生效，默认显示。 */
+    showPoints?: boolean;
+    /** @h-ai/ui 预设尺寸；未显式传 LayerChart height 时映射为固定高度。 */
+    size?: ChartSize;
+    /** 图表标题；不传时不渲染标题区域。 */
+    title?: string;
+    /** 图表说明；不传时不渲染说明文本。 */
+    description?: string;
+    /** 加载状态；为 true 时仅显示 DaisyUI loading spinner。 */
+    loading?: boolean;
+    /** 强制空态；为 true 或 data 为空时显示空数据提示。 */
+    empty?: boolean;
+    /** 外层容器类名；用于布局，不会覆盖 LayerChart 内部配置。 */
+    class?: string;
+    /** 其他所有字段会原样透传给当前 type 对应的 LayerChart 组件。 */
+    [key: string]: unknown;
+}

package/dist/components/scenes/charts/chart-types.js

@@ -0,0 +1,7 @@
+/**
+ * @h-ai/ui — 图表组件类型定义
+ *
+ * 统一 Chart 只定义 @h-ai/ui 自身需要的轻量语义，其他字段通过索引签名透传给 LayerChart。
+ * @module chart-types
+ */
+export {};

package/dist/components/scenes/charts/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @h-ai/ui — 图表场景组件
+ *
+ * 仅导出统一 Chart 入口和公共类型；内部 renderer 不对外暴露。
+ * @module index
+ */
+export type { ChartDataItem, ChartLineVariant, ChartProps, ChartSeries, ChartSize, ChartTooltipMode, ChartType } from './chart-types.js';
+export { default as Chart } from './Chart.svelte';

package/dist/components/scenes/charts/index.js

@@ -0,0 +1,7 @@
+/**
+ * @h-ai/ui — 图表场景组件
+ *
+ * 仅导出统一 Chart 入口和公共类型；内部 renderer 不对外暴露。
+ * @module index
+ */
+export { default as Chart } from './Chart.svelte';

package/dist/components/scenes/charts/renderers/AreaChart.svelte

@@ -0,0 +1,18 @@
+<!--
+  =============================================================================
+  @h-ai/ui - AreaChart 内部渲染器
+  =============================================================================
+  对 LayerChart AreaChart 的薄包装，仅做类型收窄和统一导入路径。
+  不对外暴露；由 Chart.svelte 按 type='area' 内部路由调用。
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { AreaChartProps } from 'layerchart'
+  import type { ChartDataItem } from '../chart-types.js'
+  import { AreaChart as LayerAreaChart } from 'layerchart'
+
+  /** 透传给 LayerChart AreaChart 的全部原生属性。 */
+  const { ...props }: AreaChartProps<ChartDataItem> = $props()
+</script>
+
+<LayerAreaChart {...props} />

package/dist/components/scenes/charts/renderers/AreaChart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { AreaChartProps } from 'layerchart';
+import type { ChartDataItem } from '../chart-types.js';
+declare const AreaChart: import("svelte").Component<AreaChartProps<ChartDataItem>, {}, "">;
+type AreaChart = ReturnType<typeof AreaChart>;
+export default AreaChart;

package/dist/components/scenes/charts/renderers/BarChart.svelte

@@ -0,0 +1,18 @@
+<!--
+  =============================================================================
+  @h-ai/ui - BarChart 内部渲染器
+  =============================================================================
+  对 LayerChart BarChart 的薄包装，仅做类型收窄和统一导入路径。
+  不对外暴露；由 Chart.svelte 按 type='bar' 内部路由调用。
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { BarChartProps } from 'layerchart'
+  import type { ChartDataItem } from '../chart-types.js'
+  import { BarChart as LayerBarChart } from 'layerchart'
+
+  /** 透传给 LayerChart BarChart 的全部原生属性。 */
+  const { ...props }: BarChartProps<ChartDataItem> = $props()
+</script>
+
+<LayerBarChart {...props} />

package/dist/components/scenes/charts/renderers/BarChart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { BarChartProps } from 'layerchart';
+import type { ChartDataItem } from '../chart-types.js';
+declare const BarChart: import("svelte").Component<BarChartProps<ChartDataItem>, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;