@yh-ui/components 0.1.17 → 0.1.22

package/dist/ai-artifacts/src/ai-artifacts.css

@@ -574,8 +574,12 @@ html.dark {
 
 .yh-ai-artifacts__content {
   flex: 1;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: #fdfdfd;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 :html.dark .yh-ai-artifacts__content {
   background: #0d0d0d;

package/dist/ai-artifacts/src/ai-artifacts.d.ts

@@ -1,5 +1,8 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-export type ArtifactType = 'code' | 'html' | 'markdown' | 'react' | 'vue' | 'diagram' | 'chart' | 'sandbox' | 'canvas';
+import type { ComponentThemeVars } from '@yh-ui/theme';
+export type ArtifactType = 'code' | 'html' | 'markdown' | 'react' | 'vue' | 'diagram' | 'chart' | 'sandbox' | 'canvas'
+/** 交互式图表 - 使用 ECharts */
+ | 'echarts';
 export interface ArtifactVersion {
     /**
      * 版本号或标识
@@ -18,6 +21,21 @@ export interface ArtifactVersion {
      */
     timestamp?: string | number;
 }
+/** ECharts 图表配置 */
+export interface ArtifactEChartsOption {
+    /** 图表类型 */
+    chartType: 'line' | 'bar' | 'pie' | 'scatter' | 'gauge' | 'radar' | 'funnel' | 'treemap' | 'sunburst' | 'heatmap' | 'candlestick' | 'boxplot' | 'sankey' | 'themeRiver' | 'graph' | 'custom';
+    /** ECharts 配置项 */
+    option: Record<string, unknown>;
+    /** 主题 */
+    theme?: 'light' | 'dark' | 'default';
+    /** 是否启用数据缩放 */
+    dataZoom?: boolean;
+    /** 是否显示工具栏 */
+    toolbox?: boolean;
+    /** 是否可交互 */
+    interactive?: boolean;
+}
 export interface ArtifactData {
     /**
      * 唯一标识
@@ -39,48 +57,108 @@ export interface ArtifactData {
      * 版本历史
      */
     versions: ArtifactVersion[];
+    /**
+     * ECharts 配置（仅 chart/echarts 类型使用）
+     */
+    echartsOption?: ArtifactEChartsOption;
 }
 export declare const aiArtifactsProps: {
     /**
      * 是否显示侧边栏
      */
-    readonly visible: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * 正在展示的 Artifact 数据
      */
-    readonly data: {
-        readonly type: PropType<ArtifactData>;
+    data: {
+        type: PropType<ArtifactData>;
     };
     /**
      * 侧边栏宽度
      */
-    readonly width: {
-        readonly type: PropType<string | number>;
-        readonly default: "50%";
+    width: {
+        type: PropType<string | number>;
+        default: string;
     };
     /**
      * 是否全屏展示
      */
-    readonly fullscreen: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * 渲染模式：preview (预览) | code (源码) | inline (行内/嵌入)
      */
-    readonly mode: {
-        readonly type: PropType<"preview" | "code" | "inline">;
-        readonly default: "preview";
+    mode: {
+        type: PropType<"preview" | "code" | "inline">;
+        default: string;
     };
     /**
      * 主题覆盖变量
      */
-    readonly themeOverrides: {
-        readonly type: PropType<import("@yh-ui/theme").ComponentThemeVars>;
-        readonly default: undefined;
+    themeOverrides: {
+        type: PropType<ComponentThemeVars>;
+        default: undefined;
+    };
+    /**
+     * ECharts 图表配置（用于 chart/echarts 类型）
+     */
+    echartsOption: {
+        type: PropType<ArtifactEChartsOption>;
+        default: undefined;
+    };
+    /**
+     * 是否自动加载 ECharts 库
+     */
+    autoLoadECharts: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * ECharts 主题
+     */
+    echartsTheme: {
+        type: PropType<"light" | "dark" | "default">;
+        default: string;
+    };
+    /**
+     * 是否启用数据缩放
+     */
+    echartsDataZoom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 是否显示工具栏
+     */
+    echartsToolbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 图表高度
+     */
+    chartHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /**
+     * 是否响应式宽度
+     */
+    responsiveWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 加载时显示的占位符
+     */
+    chartLoadingText: {
+        type: StringConstructor;
+        default: string;
     };
 };
 export type AiArtifactsProps = ExtractPropTypes<typeof aiArtifactsProps>;
@@ -88,6 +166,9 @@ export declare const aiArtifactsEmits: {
     'update:visible': (_val: boolean) => boolean;
     'update:mode': (_val: "preview" | "code" | "inline") => boolean;
     'version-change': (_version: ArtifactVersion) => boolean;
+    'chart-click': (_params: unknown) => boolean;
+    'chart-ready': (_chart: unknown) => boolean;
+    'chart-error': (_error: Error) => boolean;
     close: () => boolean;
 };
 export type AiArtifactsEmits = typeof aiArtifactsEmits;

package/dist/ai-artifacts/src/ai-artifacts.mjs

@@ -39,11 +39,71 @@ export const aiArtifactsProps = {
   themeOverrides: {
     type: Object,
     default: void 0
+  },
+  // ========== ECharts 相关属性 ==========
+  /**
+   * ECharts 图表配置（用于 chart/echarts 类型）
+   */
+  echartsOption: {
+    type: Object,
+    default: void 0
+  },
+  /**
+   * 是否自动加载 ECharts 库
+   */
+  autoLoadECharts: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * ECharts 主题
+   */
+  echartsTheme: {
+    type: String,
+    default: "light"
+  },
+  /**
+   * 是否启用数据缩放
+   */
+  echartsDataZoom: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示工具栏
+   */
+  echartsToolbox: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 图表高度
+   */
+  chartHeight: {
+    type: [String, Number],
+    default: 400
+  },
+  /**
+   * 是否响应式宽度
+   */
+  responsiveWidth: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 加载时显示的占位符
+   */
+  chartLoadingText: {
+    type: String,
+    default: "\u52A0\u8F7D\u56FE\u8868\u4E2D..."
   }
 };
 export const aiArtifactsEmits = {
   "update:visible": (_val) => true,
   "update:mode": (_val) => true,
   "version-change": (_version) => true,
+  "chart-click": (_params) => true,
+  "chart-ready": (_chart) => true,
+  "chart-error": (_error) => true,
   close: () => true
 };

package/dist/ai-artifacts/src/ai-artifacts.vue

@@ -1,9 +1,13 @@
 <script setup>
 import { useNamespace, useLocale } from "@yh-ui/hooks";
-import { ref, computed, watch } from "vue";
-import { aiArtifactsProps, aiArtifactsEmits } from "./ai-artifacts";
+import { ref, computed, watch, onBeforeUnmount, nextTick, shallowRef } from "vue";
+import {
+  aiArtifactsProps,
+  aiArtifactsEmits
+} from "./ai-artifacts";
 import { YhIcon } from "../../icon";
 import { YhButton } from "../../button";
+import { YhSpin } from "../../spin";
 import { useComponentTheme } from "@yh-ui/theme";
 import hljs from "highlight.js";
 import "highlight.js/styles/atom-one-dark.css";
@@ -20,6 +24,10 @@ const { themeStyle } = useComponentTheme(
 );
 const internalMode = ref(props.mode);
 const currentVersionState = ref(props.data?.currentVersion || "");
+const echartsRef = ref(null);
+const echartsInstance = shallowRef(null);
+const echartsLoading = ref(false);
+const echartsError = ref(null);
 watch(
   () => props.mode,
   (val) => {
@@ -34,7 +42,7 @@ watch(
 );
 const getIcon = (type) => {
   if (type === "code") return "code";
-  if (type === "chart") return "chart-bar";
+  if (type === "chart" || type === "echarts") return "chart-bar";
   if (type === "canvas") return "edit";
   if (type === "sandbox") return "play";
   if (type === "diagram") return "connection";
@@ -44,6 +52,10 @@ const currentVersionData = computed(() => {
   if (!props.data || props.data.versions.length === 0) return null;
   return props.data.versions.find((v) => v.version === currentVersionState.value) || props.data.versions[0];
 });
+const getEchartsOption = computed(() => {
+  if (props.data?.echartsOption) return props.data.echartsOption;
+  return props.echartsOption;
+});
 const handleClose = () => {
   emit("update:visible", false);
   emit("close");
@@ -67,12 +79,19 @@ const sandboxSrc = computed(() => {
   return "";
 });
 const highlightedCode = computed(() => {
-  const content = currentVersionData.value?.content || "";
+  let content = currentVersionData.value?.content || "";
   const type = props.data?.type || "code";
+  if (type === "echarts" && !content) {
+    const opt = getEchartsOption.value;
+    if (opt) {
+      content = JSON.stringify(opt, null, 2);
+    }
+  }
   let lang = "typescript";
   if (type === "html") lang = "xml";
   if (type === "markdown") lang = "markdown";
   if (type === "react" || type === "vue") lang = "javascript";
+  if (type === "echarts") lang = "json";
   if (lang && hljs.getLanguage(lang)) {
     try {
       return hljs.highlight(content, { language: lang, ignoreIllegals: true }).value;
@@ -82,6 +101,82 @@ const highlightedCode = computed(() => {
   }
   return hljs.highlightAuto(content).value;
 });
+const initECharts = async () => {
+  const chartType = props.data?.type;
+  if (chartType !== "chart" && chartType !== "echarts") return;
+  const chartOption = getEchartsOption.value;
+  if (!chartOption) return;
+  echartsLoading.value = true;
+  echartsError.value = null;
+  try {
+    if (echartsInstance.value) {
+      echartsInstance.value.dispose();
+      echartsInstance.value = null;
+    }
+    let echarts;
+    if (props.autoLoadECharts) {
+      echarts = await import("echarts");
+    } else {
+      echarts = window.echarts;
+    }
+    if (!echarts || !echartsRef.value) return;
+    echartsInstance.value = echarts.init(echartsRef.value, chartOption.theme || props.echartsTheme);
+    if (chartOption.option) {
+      if (chartOption.dataZoom !== false && props.echartsDataZoom) {
+        chartOption.option.dataZoom = chartOption.option.dataZoom || [
+          { type: "inside" },
+          { type: "slider" }
+        ];
+      }
+      if (chartOption.toolbox !== false && props.echartsToolbox) {
+        chartOption.option.toolbox = chartOption.option.toolbox || {
+          feature: {
+            dataZoom: { yAxisIndex: "none" },
+            restore: {},
+            saveAsImage: {}
+          }
+        };
+      }
+      echartsInstance.value.setOption(chartOption.option);
+    }
+    echartsInstance.value.on("click", (params) => {
+      emit("chart-click", params);
+    });
+    emit("chart-ready", echartsInstance.value);
+    if (props.responsiveWidth) {
+      const resizeObserver = new ResizeObserver(() => {
+        echartsInstance.value?.resize();
+      });
+      resizeObserver.observe(echartsRef.value);
+    }
+  } catch (error) {
+    echartsError.value = error;
+    emit("chart-error", error);
+  } finally {
+    echartsLoading.value = false;
+  }
+};
+watch(
+  () => [props.visible, props.data?.type, getEchartsOption.value, internalMode.value],
+  ([newVisible, , , mode]) => {
+    const isChart = props.data?.type === "chart" || props.data?.type === "echarts";
+    if (newVisible && isChart && (mode === "preview" || mode === "inline")) {
+      nextTick(() => {
+        initECharts();
+      });
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  if (echartsInstance.value) {
+    echartsInstance.value.dispose();
+    echartsInstance.value = null;
+  }
+});
+const chartContainerStyle = computed(() => ({
+  height: typeof props.chartHeight === "number" ? props.chartHeight + "px" : props.chartHeight
+}));
 </script>
 
 <template>
@@ -106,20 +201,20 @@ const highlightedCode = computed(() => {
               :class="[ns.e('tab'), ns.is('active', internalMode === 'preview')]"
               @click="toggleMode('preview')"
             >
-              {{ t("ai.artifacts.preview") || "\u9884\u89C8" }}
+              {{ t("ai.artifacts.preview") }}
             </button>
             <button
               v-if="data?.type === 'html'"
               :class="[ns.e('tab'), ns.is('active', internalMode === 'inline')]"
               @click="toggleMode('inline')"
             >
-              {{ t("ai.artifacts.inline") || "\u884C\u5185" }}
+              {{ t("ai.artifacts.inline") }}
             </button>
             <button
               :class="[ns.e('tab'), ns.is('active', internalMode === 'code')]"
               @click="toggleMode('code')"
             >
-              {{ t("ai.artifacts.code") || "\u6E90\u7801" }}
+              {{ t("ai.artifacts.code") }}
             </button>
           </div>
 
@@ -135,7 +230,7 @@ const highlightedCode = computed(() => {
       <div v-if="data && data.versions.length > 1" :class="ns.e('version-bar')">
         <div :class="ns.e('version-label')">
           <YhIcon name="history" />
-          <span>{{ t("ai.artifacts.versions") || "\u7248\u672C\u5386\u53F2" }}</span>
+          <span>{{ t("ai.artifacts.versions") }}</span>
         </div>
         <div :class="ns.e('version-list')">
           <div
@@ -157,26 +252,76 @@ const highlightedCode = computed(() => {
             :src="sandboxSrc"
             :class="ns.e('sandbox')"
           ></iframe>
-          <div v-else-if="data?.type === 'chart'" :class="ns.e('chart-container')">
-            <slot name="chart" :data="currentVersionData" :title="data.title">
-              <div :class="ns.e('placeholder')">
-                <YhIcon name="chart-bar" />
-                <p>{{ t("ai.artifacts.renderingChart") || "\u6B63\u5728\u6E32\u67D3\u56FE\u8868..." }}</p>
-              </div>
-            </slot>
-          </div>
-          <div v-else-if="data?.type === 'canvas'" :class="ns.e('canvas-container')">
-            <slot name="canvas" :data="currentVersionData">
-              <div :class="ns.e('placeholder')">
-                <YhIcon name="edit" />
-                <p>{{ t("ai.artifacts.renderingCanvas") || "\u6B63\u5728\u51C6\u5907\u753B\u677F..." }}</p>
-              </div>
-            </slot>
-          </div>
-          <div v-else :class="ns.e('placeholder')">
-            <YhIcon name="sparkles" />
-            <p>{{ t("ai.artifacts.rendering") || "\u6B63\u5728\u6E32\u67D3\u7EC4\u4EF6..." }}</p>
+
+          <!-- ECharts 图表 (使用 v-show 保持 DOM) -->
+          <div
+            v-show="data?.type === 'echarts'"
+            :class="ns.e('echarts-wrapper')"
+            :style="chartContainerStyle"
+            style="position: relative"
+          >
+            <div
+              ref="echartsRef"
+              :class="ns.e('echarts-container')"
+              style="width: 100%; height: 100%"
+            ></div>
+            <YhSpin
+              v-if="echartsLoading"
+              :class="ns.e('chart-loading')"
+              style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
+            >
+              <span>{{ chartLoadingText }}</span>
+            </YhSpin>
+            <div
+              v-else-if="echartsError"
+              :class="ns.e('chart-error')"
+              style="
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+              "
+            >
+              <YhIcon name="warning" />
+              <span>图表加载失败: {{ echartsError.message }}</span>
+            </div>
           </div>
+
+          <!-- 其他类型 -->
+          <template
+            v-if="data?.type !== 'html' && data?.type !== 'sandbox' && data?.type !== 'echarts'"
+          >
+            <!-- 通用图表 -->
+            <div
+              v-if="data?.type === 'chart'"
+              :class="ns.e('chart-container')"
+              :style="chartContainerStyle"
+            >
+              <slot name="chart" :data="currentVersionData" :title="data.title">
+                <div :class="ns.e('placeholder')">
+                  <YhIcon name="chart-bar" />
+                  <p>{{ t("ai.artifacts.renderingChart") }}</p>
+                </div>
+              </slot>
+            </div>
+            <!-- 画布 -->
+            <div v-else-if="data?.type === 'canvas'" :class="ns.e('canvas-container')">
+              <slot name="canvas" :data="currentVersionData">
+                <div :class="ns.e('placeholder')">
+                  <YhIcon name="edit" />
+                  <p>{{ t("ai.artifacts.renderingCanvas") }}</p>
+                </div>
+              </slot>
+            </div>
+            <!-- 占位 -->
+            <div v-else :class="ns.e('placeholder')">
+              <YhIcon name="sparkles" />
+              <p>{{ t("ai.artifacts.rendering") }}</p>
+            </div>
+          </template>
         </template>
 
         <template v-else>
@@ -771,8 +916,12 @@ html.dark {
 
 .yh-ai-artifacts__content {
   flex: 1;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: #fdfdfd;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 :html.dark .yh-ai-artifacts__content {
   background: #0d0d0d;