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

package/README.md

@@ -309,6 +309,25 @@ components/
 />
 ```
 
+#### Charts 图表
+
+`Chart type='line'` 默认透传 LayerChart 原生折线图；需要监控看板常见的“分段线 + 圆点 + 最近点 hover + 竖向参考线”时，使用 `lineVariant='segmented-point'`：
+
+```svelte
+<Chart
+  type='line'
+  data={trendData}
+  x='label'
+  y={['rateLimit', 'circuitBreak']}
+  series={trendSeries}
+  lineVariant='segmented-point'
+  tooltipMode='nearest'
+  showCrosshair
+  legend
+  grid
+/>
+```
+
 #### CRUD 场景（5 个）
 
 | 组件                 | 描述         | 主要属性 / 能力 |

package/auto-import.js

@@ -232,9 +232,9 @@ function autoImportHaiUi() {
         return { code: content }
       }
 
-      // 跳过 @h-ai/ui 包自身的文件，避免重复导入
+      // 自动导入只服务应用源码；第三方依赖和 @h-ai/ui 自身必须保持原样，避免改写依赖内部的同名组件。
       const normalizedPath = filename.replace(WINDOWS_PATH_SEPARATOR_REGEX, '/')
-      if (normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
+      if (normalizedPath.includes('/node_modules/') || normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
         return { code: content }
       }
 

package/dist/components/primitives/Select.svelte

@@ -264,7 +264,7 @@
     {/if}
 
     <!-- 右侧图标区域 -->
-    <div class='flex items-center pr-2 shrink-0'>
+    <div class='flex items-center shrink-0'>
       {#if showClear}
         <button
           type='button'

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;

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

@@ -0,0 +1,571 @@
+<!--
+  =============================================================================
+  @h-ai/ui - LineChart 内部渲染器
+  =============================================================================
+  对 LayerChart LineChart 的薄包装，仅做类型收窄和统一导入路径。
+  不对外暴露；由 Chart.svelte 按 type='line' 内部路由调用。
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { LineChartProps } from 'layerchart'
+  import type {
+    ChartAccessor,
+    ChartDataItem,
+    ChartLineVariant,
+    ChartSeries,
+    ChartTooltipMode,
+  } from '../chart-types.js'
+  import { LineChart as LayerLineChart } from 'layerchart'
+
+  interface SegmentedLinePoint {
+    /** 横轴展示标签，来源于 Chart 的 x accessor。 */
+    label: string
+    /** 当前系列在该横轴位置上的数值。 */
+    value: number
+  }
+
+  interface SegmentedLineSeries {
+    /** 系列稳定标识，优先来自 ChartSeries.key。 */
+    key: string
+    /** tooltip 和图例展示文案。 */
+    label: string
+    /** 折线、圆点和 tooltip 色标共用颜色。 */
+    color: string
+    /** 当前系列按 data 顺序解析后的点。 */
+    points: SegmentedLinePoint[]
+    /** 是否以虚线展示，适合辅助系列。 */
+    dashed: boolean
+  }
+
+  interface SegmentedLineCoordinate extends SegmentedLinePoint {
+    /** SVG viewBox 中的横向坐标。 */
+    x: number
+    /** SVG viewBox 中的纵向坐标。 */
+    y: number
+  }
+
+  interface SegmentedLineTooltipItem {
+    /** tooltip 中展示的系列名称。 */
+    label: string
+    /** tooltip 中展示的当前数值。 */
+    value: number
+    /** tooltip 色标，与系列颜色一致。 */
+    color: string
+  }
+
+  interface SegmentedLineTooltip {
+    /** 当前吸附数据点在 SVG 坐标系内的横向位置。 */
+    x: number
+    /** tooltip 横向定位百分比，适配响应式容器宽度。 */
+    leftPercent: number
+    /** tooltip 纵向定位百分比，来自首个系列当前点。 */
+    topPercent: number
+    /** 当前 hover 的横轴标签。 */
+    label: string
+    /** 当前横轴位置下每个系列的值。 */
+    items: SegmentedLineTooltipItem[]
+  }
+
+  interface Props extends LineChartProps<ChartDataItem> {
+    /** 折线图渲染变体；default 保持 LayerChart 原生渲染。 */
+    lineVariant?: ChartLineVariant
+    /** tooltip 触发方式；nearest 会在绘图区内吸附最近数据点。 */
+    tooltipMode?: ChartTooltipMode
+    /** segmented-point 变体是否显示竖向参考线。 */
+    showCrosshair?: boolean
+    /** segmented-point 变体是否显示圆点。 */
+    showPoints?: boolean
+    /** LayerChart 原生 legend 配置；segmented-point 中 true 会渲染轻量图例。 */
+    legend?: boolean | Record<string, unknown>
+    /** LayerChart 原生 grid 配置；segmented-point 中 truthy 会渲染水平网格。 */
+    grid?: boolean | Record<string, unknown>
+  }
+
+  const {
+    lineVariant = 'default',
+    tooltipMode = 'default',
+    showCrosshair = false,
+    showPoints = true,
+    legend = false,
+    grid = false,
+    data = [],
+    x,
+    y,
+    series,
+    height = 300,
+    ...props
+  }: Props = $props()
+
+  /** segmented-point 使用固定 viewBox 保持点、线和 tooltip 命中区在不同高度下比例一致。 */
+  const segmentedViewBox = {
+    width: 420,
+    height: 132,
+    plotLeft: 36,
+    plotRight: 390,
+    plotTop: 14,
+    plotBottom: 98,
+    labelY: 124,
+  }
+
+  let activeTooltip = $state<SegmentedLineTooltip | null>(null)
+
+  /** 当前渲染分支是否启用 @h-ai/ui 的分段折线变体。 */
+  const useSegmentedLine = $derived(lineVariant === 'segmented-point')
+
+  /** 解析后的可绘制系列；默认 LayerChart 分支不会读取该派生值。 */
+  const segmentedSeries = $derived(resolveSegmentedSeries(data, x, y, series))
+
+  /** Y 轴最大值兜底为 1，避免全零或空数据时除零。 */
+  const segmentedMax = $derived(getSegmentedLineMax(segmentedSeries))
+
+  /** 第一条系列的坐标用于横轴标签和 hover 命中基准，多系列共用同一 x 轴。 */
+  const primaryCoordinates = $derived(getSegmentedLineCoordinates(segmentedSeries[0]?.points ?? [], segmentedMax))
+
+  /**
+   * 从数据项中读取指定 accessor 的值。
+   * 支持函数、字符串键和数字键三种 accessor 形式。
+   * @param item - 原始数据对象
+   * @param accessor - 字段访问器（函数 / 字符串 / 数字）
+   * @returns 读取到的原始值，无法识别时返回 undefined
+   */
+  function readAccessorValue(item: ChartDataItem, accessor: ChartAccessor): unknown {
+    if (typeof accessor === 'function')
+      return accessor(item)
+
+    if (typeof accessor === 'string' || typeof accessor === 'number')
+      return item[String(accessor)]
+
+    return undefined
+  }
+
+  /**
+   * 将 accessor 读取到的值格式化为用于展示的字符串标签。
+   * Date 类型转为 ISO 字符串，字符串/数字直接转字符串，其余返回 fallback。
+   * @param value - 原始值
+   * @param fallback - 无法识别时的回退文案
+   * @returns 格式化后的标签字符串
+   */
+  function formatAccessorLabel(value: unknown, fallback: string): string {
+    if (value instanceof Date)
+      return value.toISOString()
+
+    if (typeof value === 'string' || typeof value === 'number')
+      return `${value}`
+
+    return fallback
+  }
+
+  /**
+   * 将任意值安全转换为有限数字。
+   * 非数字或 Infinity/NaN 均兜底为 0，避免后续除法或坐标计算出错。
+   * @param value - 待转换的原始值
+   * @returns 有限数字，无法转换时返回 0
+   */
+  function toFiniteNumber(value: unknown): number {
+    const numberValue = typeof value === 'number' ? value : Number(value)
+
+    return Number.isFinite(numberValue) ? numberValue : 0
+  }
+
+  /**
+   * 获取系列配置中的值访问器，优先使用 value，回退到 key。
+   * @param item - 系列配置对象
+   * @returns 适用于 readAccessorValue 的 accessor
+   */
+  function getSeriesAccessor(item: ChartSeries): ChartAccessor {
+    return item.value ?? item.key
+  }
+
+  /**
+   * 获取系列的展示标签，未配置时回退到 fallback。
+   * @param item - 系列配置对象
+   * @param fallback - 未配置 label 时使用的默认文案
+   * @returns tooltip / 图例中显示的文案
+   */
+  function getSeriesLabel(item: ChartSeries, fallback: string): string {
+    return item.label ?? fallback
+  }
+
+  /**
+   * 获取系列的渲染颜色。
+   * 优先使用 series 配置中的 color，未配置时按索引循环分配主题色变量。
+   * @param item - 系列配置对象
+   * @param index - 系列在列表中的索引，用于循环选色
+   * @returns CSS 颜色值或变量
+   */
+  function getSeriesColor(item: ChartSeries, index: number): string {
+    return item.color ?? `var(--color-${['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info'][index % 7]})`
+  }
+
+  /**
+   * 判断系列是否应以虚线渲染。
+   * 支持 ChartSeries.dashed 顶层布尔值和 props.dashed 两种配置方式。
+   * @param item - 系列配置对象
+   * @returns true 表示该系列使用虚线
+   */
+  function getSeriesDashed(item: ChartSeries): boolean {
+    return item.dashed === true || (typeof item.props === 'object' && item.props !== null && item.props.dashed === true)
+  }
+
+  /**
+   * 将 y 轴配置和可选的 series 数组统一为标准 ChartSeries 列表。
+   * 若已提供 chartSeries 则直接返回其副本；
+   * 否则根据 yAccessor 自动推导单系列或多系列配置。
+   * @param yAccessor - y 轴字段配置（字符串 / 数组 / 函数）
+   * @param chartSeries - 可选的显式系列配置
+   * @returns 标准化的 ChartSeries 数组
+   */
+  function normalizeSeries(yAccessor: Props['y'], chartSeries?: readonly ChartSeries[]): ChartSeries[] {
+    if (chartSeries && chartSeries.length > 0)
+      return [...chartSeries]
+
+    if (Array.isArray(yAccessor)) {
+      return yAccessor.map((accessor, index) => ({
+        key: typeof accessor === 'string' ? accessor : `series-${index}`,
+        label: typeof accessor === 'string' ? accessor : `series-${index + 1}`,
+        value: accessor,
+      }))
+    }
+
+    return [{
+      key: typeof yAccessor === 'string' ? yAccessor : 'value',
+      label: typeof yAccessor === 'string' ? yAccessor : 'value',
+      value: yAccessor,
+    }]
+  }
+
+  /**
+   * 将原始数据和系列配置解析为 segmented-point 变体所需的 SegmentedLineSeries 数组。
+   * 每个系列包含 key、label、color、dashed 以及按 x 轴顺序排列的 points。
+   * @param items - 原始数据数组
+   * @param xAccessor - x 轴字段访问器
+   * @param yAccessor - y 轴字段配置
+   * @param chartSeries - 可选的显式系列配置
+   * @returns 解析后的 SegmentedLineSeries 列表
+   */
+  function resolveSegmentedSeries(items: readonly ChartDataItem[], xAccessor: Props['x'], yAccessor: Props['y'], chartSeries?: readonly ChartSeries[]): SegmentedLineSeries[] {
+    return normalizeSeries(yAccessor, chartSeries).map((item, seriesIndex) => {
+      const accessor = getSeriesAccessor(item)
+
+      return {
+        key: item.key,
+        label: getSeriesLabel(item, item.key),
+        color: getSeriesColor(item, seriesIndex),
+        dashed: getSeriesDashed(item),
+        points: items.map((datum, dataIndex) => ({
+          label: formatAccessorLabel(readAccessorValue(datum, xAccessor), `${dataIndex + 1}`),
+          value: toFiniteNumber(readAccessorValue(datum, accessor)),
+        })),
+      }
+    })
+  }
+
+  /**
+   * 计算所有系列中的最大数据值，作为 Y 轴上限。
+   * 全零或空数据时兜底为 1，避免后续坐标计算中出现除零。
+   * @param items - SegmentedLineSeries 列表
+   * @returns Y 轴最大值（至少为 1）
+   */
+  function getSegmentedLineMax(items: SegmentedLineSeries[]): number {
+    const maxValue = Math.max(...items.flatMap(item => item.points.map(point => point.value)))
+
+    return maxValue > 0 ? maxValue : 1
+  }
+
+  /**
+   * 将数据点从逻辑值映射为 SVG viewBox 坐标。
+   * x 方向按点在序列中的位置均匀分布，y 方向按 maxValue 做线性缩放。
+   * @param points - 一个系列的数据点列表
+   * @param maxValue - Y 轴最大值，用于归一化
+   * @returns 带有 SVG 坐标的 SegmentedLineCoordinate 数组
+   */
+  function getSegmentedLineCoordinates(points: SegmentedLinePoint[], maxValue: number): SegmentedLineCoordinate[] {
+    const width = segmentedViewBox.plotRight - segmentedViewBox.plotLeft
+    const height = segmentedViewBox.plotBottom - segmentedViewBox.plotTop
+    const lastIndex = Math.max(points.length - 1, 1)
+
+    return points.map((point, index) => ({
+      ...point,
+      x: segmentedViewBox.plotLeft + (width * index) / lastIndex,
+      y: segmentedViewBox.plotTop + height - (point.value / maxValue) * height,
+    }))
+  }
+
+  /**
+   * 将有序坐标点转换为 SVG path 的 d 属性段（M ... L ... 格式）。
+   * 相邻两点生成一条线段，用于渲染折线。
+   * @param points - 已计算坐标的点序列
+   * @returns SVG path d 属性字符串数组，每项对应一段线段
+   */
+  function getSegmentedLineSegments(points: SegmentedLineCoordinate[]): string[] {
+    return points.slice(1).map((point, index) => {
+      const previous = points[index]
+      if (!previous)
+        return ''
+
+      return `M ${previous.x} ${previous.y} L ${point.x} ${point.y}`
+    }).filter(Boolean)
+  }
+
+  /**
+   * 显示 segmented-point 变体的 tooltip。
+   * 计算 tooltip 的定位百分比并收集所有系列在该横轴位置的数值。
+   * @param point - 当前吸附的坐标点
+   * @param pointIndex - 该点在坐标数组中的索引，用于从各系列取值
+   */
+  function showSegmentedTooltip(point: SegmentedLineCoordinate, pointIndex: number): void {
+    activeTooltip = {
+      x: point.x,
+      leftPercent: (point.x / segmentedViewBox.width) * 100,
+      topPercent: (Math.max(segmentedViewBox.plotTop, point.y - 10) / segmentedViewBox.height) * 100,
+      label: point.label,
+      items: segmentedSeries.map(item => ({
+        label: item.label,
+        value: item.points[pointIndex]?.value ?? 0,
+        color: item.color,
+      })),
+    }
+  }
+
+  /**
+   * 处理指针在命中区域上的移动事件。
+   * 仅在 tooltipMode === 'nearest' 时生效，计算指针在 SVG 中的等效坐标，
+   * 找到最近的横轴数据点并触发 tooltip 显示。
+   * @param event - 原生 PointerEvent
+   */
+  function handleSegmentedPointerMove(event: PointerEvent): void {
+    if (tooltipMode !== 'nearest')
+      return
+
+    if (primaryCoordinates.length === 0)
+      return
+
+    const bounds = event.currentTarget instanceof SVGRectElement
+      ? event.currentTarget.getBoundingClientRect()
+      : null
+    if (!bounds || bounds.width === 0)
+      return
+
+    const plotWidth = segmentedViewBox.plotRight - segmentedViewBox.plotLeft
+    const pointerX = ((event.clientX - bounds.left) / bounds.width) * plotWidth + segmentedViewBox.plotLeft
+    const nearestIndex = primaryCoordinates.reduce((bestIndex, point, index) => {
+      const currentDistance = Math.abs(point.x - pointerX)
+      const bestDistance = Math.abs((primaryCoordinates[bestIndex]?.x ?? point.x) - pointerX)
+
+      return currentDistance < bestDistance ? index : bestIndex
+    }, 0)
+    const nearestPoint = primaryCoordinates[nearestIndex]
+    if (nearestPoint)
+      showSegmentedTooltip(nearestPoint, nearestIndex)
+  }
+
+  /**
+   * 隐藏 segmented-point 变体的 tooltip。
+   * 在指针离开命中区域时调用，将 activeTooltip 置为 null。
+   */
+  function hideSegmentedTooltip(): void {
+    activeTooltip = null
+  }
+</script>
+
+{#if useSegmentedLine}
+  <div class='hai-segmented-line-chart' style={`height: ${height}px;`}>
+    <svg viewBox={`0 0 ${segmentedViewBox.width} ${segmentedViewBox.height}`} role='img'>
+      {#if grid}
+        {#each [18, 58, 98] as gridY (gridY)}
+          <line class='hai-segmented-line-chart__grid' x1={segmentedViewBox.plotLeft} x2={segmentedViewBox.plotRight} y1={gridY} y2={gridY}></line>
+        {/each}
+      {/if}
+
+      {#if showCrosshair && activeTooltip}
+        <line class='hai-segmented-line-chart__crosshair' x1={activeTooltip.x} x2={activeTooltip.x} y1={segmentedViewBox.plotTop} y2='108'></line>
+      {/if}
+
+      {#each segmentedSeries as item (item.key)}
+        {@const coordinates = getSegmentedLineCoordinates(item.points, segmentedMax)}
+        {#each getSegmentedLineSegments(coordinates) as segment (segment)}
+          <path
+            class='hai-segmented-line-chart__segment'
+            d={segment}
+            stroke={item.color}
+            stroke-dasharray={item.dashed ? '6 5' : undefined}
+          ></path>
+        {/each}
+        {#if showPoints}
+          {#each coordinates as point (point.label)}
+            <circle
+              class='hai-segmented-line-chart__point'
+              cx={point.x}
+              cy={point.y}
+              r='3.8'
+              fill={item.color}
+            ></circle>
+          {/each}
+        {/if}
+      {/each}
+
+      {#each primaryCoordinates as point (point.label)}
+        <text class='hai-segmented-line-chart__label' x={point.x} y={segmentedViewBox.labelY}>{point.label}</text>
+      {/each}
+
+      <rect
+        class='hai-segmented-line-chart__hit-area'
+        x={segmentedViewBox.plotLeft}
+        y='10'
+        width={segmentedViewBox.plotRight - segmentedViewBox.plotLeft}
+        height='104'
+        role='presentation'
+        onpointerenter={handleSegmentedPointerMove}
+        onpointermove={handleSegmentedPointerMove}
+        onpointerleave={hideSegmentedTooltip}
+      ></rect>
+    </svg>
+
+    {#if legend}
+      <div class='hai-segmented-line-chart__legend'>
+        {#each segmentedSeries as item (item.key)}
+          <span>
+            <i style={`background: ${item.color};`}></i>
+            {item.label}
+          </span>
+        {/each}
+      </div>
+    {/if}
+
+    {#if activeTooltip}
+      <div
+        class='hai-segmented-line-chart__tooltip'
+        style={`left: ${activeTooltip.leftPercent}%; top: ${activeTooltip.topPercent}%;`}
+      >
+        <strong>{activeTooltip.label}</strong>
+        {#each activeTooltip.items as item (`${item.label}-${item.color}`)}
+          <span>
+            <i style={`background: ${item.color};`}></i>
+            {item.label}: {item.value}
+          </span>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{:else}
+  <LayerLineChart {...props} {data} {x} {y} {series} {height} {legend} {grid} />
+{/if}
+
+<style>
+  .hai-segmented-line-chart {
+    position: relative;
+    min-width: 0;
+    overflow: visible;
+  }
+
+  .hai-segmented-line-chart svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .hai-segmented-line-chart__grid {
+    stroke: color-mix(in oklab, var(--color-base-content) 16%, transparent);
+    stroke-width: 1;
+  }
+
+  .hai-segmented-line-chart__crosshair {
+    stroke: color-mix(in oklab, var(--color-primary) 54%, transparent);
+    stroke-dasharray: 4 4;
+    stroke-width: 1.25;
+  }
+
+  .hai-segmented-line-chart__segment {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 3;
+  }
+
+  .hai-segmented-line-chart__point {
+    cursor: pointer;
+    stroke: var(--color-base-100);
+    stroke-width: 2.4;
+  }
+
+  .hai-segmented-line-chart__point:hover {
+    stroke-width: 3.2;
+  }
+
+  .hai-segmented-line-chart__label {
+    fill: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-anchor: middle;
+  }
+
+  .hai-segmented-line-chart__hit-area {
+    fill: transparent;
+    cursor: crosshair;
+    pointer-events: all;
+  }
+
+  .hai-segmented-line-chart__legend {
+    position: absolute;
+    right: 0.4rem;
+    bottom: 1.8rem;
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.65rem;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    font-size: 0.72rem;
+    font-weight: 750;
+    pointer-events: none;
+  }
+
+  .hai-segmented-line-chart__legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+  }
+
+  .hai-segmented-line-chart__legend i {
+    width: 0.85rem;
+    height: 0.18rem;
+    border-radius: 999px;
+  }
+
+  .hai-segmented-line-chart__tooltip {
+    position: absolute;
+    z-index: 3;
+    display: grid;
+    min-width: 7rem;
+    gap: 0.28rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent);
+    border-radius: 0.35rem;
+    padding: 0.48rem 0.58rem;
+    color: var(--color-base-content);
+    background: color-mix(in oklab, var(--color-base-100) 96%, var(--color-base-200) 4%);
+    box-shadow: 0 0.7rem 1.8rem color-mix(in oklab, #0f172a 14%, transparent);
+    font-size: 0.74rem;
+    line-height: 1.2;
+    pointer-events: none;
+    transform: translate(-50%, -100%);
+  }
+
+  .hai-segmented-line-chart__tooltip strong {
+    font-size: 0.72rem;
+    font-weight: 850;
+  }
+
+  .hai-segmented-line-chart__tooltip span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.32rem;
+    white-space: nowrap;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    font-weight: 750;
+  }
+
+  .hai-segmented-line-chart__tooltip i {
+    width: 0.62rem;
+    height: 0.62rem;
+    border-radius: 999px;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { LineChartProps } from 'layerchart';
+import type { ChartDataItem, ChartLineVariant, ChartTooltipMode } from '../chart-types.js';
+interface Props extends LineChartProps<ChartDataItem> {
+    /** 折线图渲染变体；default 保持 LayerChart 原生渲染。 */
+    lineVariant?: ChartLineVariant;
+    /** tooltip 触发方式；nearest 会在绘图区内吸附最近数据点。 */
+    tooltipMode?: ChartTooltipMode;
+    /** segmented-point 变体是否显示竖向参考线。 */
+    showCrosshair?: boolean;
+    /** segmented-point 变体是否显示圆点。 */
+    showPoints?: boolean;
+    /** LayerChart 原生 legend 配置；segmented-point 中 true 会渲染轻量图例。 */
+    legend?: boolean | Record<string, unknown>;
+    /** LayerChart 原生 grid 配置；segmented-point 中 truthy 会渲染水平网格。 */
+    grid?: boolean | Record<string, unknown>;
+}
+declare const LineChart: import("svelte").Component<Props, {}, "">;
+type LineChart = ReturnType<typeof LineChart>;
+export default LineChart;

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

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

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

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

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

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

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

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

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

@@ -6,6 +6,7 @@
  */
 export * from './ai/index.js';
 export * from './app/index.js';
+export * from './charts/index.js';
 export * from './crud/index.js';
 export * from './crypto/index.js';
 export * from './error/index.js';

package/dist/components/scenes/index.js

@@ -8,6 +8,8 @@
 export * from './ai/index.js';
 // App 应用级场景组件
 export * from './app/index.js';
+// Chart 图表场景组件
+export * from './charts/index.js';
 // CRUD 场景组件
 export * from './crud/index.js';
 // Crypto 场景组件

package/dist/messages/en-US.json

@@ -25,6 +25,8 @@
   "combobox_remove": "Remove",
   "data_table_actions": "Actions",
   "data_table_empty": "No data",
+  "chart_loading": "Loading chart",
+  "chart_empty": "No data",
   "confirm_title": "Confirm",
   "confirm_message": "Are you sure you want to proceed?",
   "confirm_ok": "Confirm",

package/dist/messages/zh-CN.json

@@ -25,6 +25,8 @@
   "combobox_remove": "移除",
   "data_table_actions": "操作",
   "data_table_empty": "暂无数据",
+  "chart_loading": "图表加载中",
+  "chart_empty": "暂无数据",
   "confirm_title": "确认",
   "confirm_message": "确定要继续吗？",
   "confirm_ok": "确认",

package/dist/types.d.ts

@@ -12,6 +12,7 @@ export type DataAttributeValue = string | number | boolean | null | undefined;
 export interface DataAttributes {
     [key: `data-${string}`]: DataAttributeValue;
 }
+export type { ChartDataItem, ChartProps, ChartSeries, ChartSize, ChartType } from './components/scenes/charts/chart-types.js';
 /**
  * 基础变体类型
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.34",
+  "version": "0.1.0-alpha.35",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -47,11 +47,12 @@
     "bits-ui": "^2.18.1",
     "html2canvas": "^1.4.1",
     "jspdf": "^4.2.1",
+    "layerchart": "2.0.1",
     "marked": "^18.0.0",
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.34"
+    "@h-ai/core": "0.1.0-alpha.35"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",