@legendzd/ai-agent-vue 1.0.1

package/dist/src/types/agent.d.ts

@@ -0,0 +1,136 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/** 主题模式 */
+export type AgentThemeMode = 'dark' | 'light';
+/** 主题变量覆盖：键为 CSS 变量名（含 --agent- 前缀），值为 CSS 值 */
+export type AgentThemeOverrides = Record<string, string>;
+/** 智能体插件配置（所有字段均可选，由组件 props 或 install 时传入） */
+export interface AgentPluginOptions {
+    /** API 基础地址（如 http://host:port/api/v2） */
+    apiUrl?: string;
+    /** 认证 token 获取函数 */
+    getAccessToken?: () => string;
+    /** 认证 session 获取函数 */
+    getSession?: () => string;
+    /** 用户 ID 获取函数，用于创建/查询会话（动态场景优先使用） */
+    getUserId?: () => string;
+    /** 用户 ID 静态值（简化用法，getUserId 优先） */
+    userId?: string;
+    /** LLM 提供商 ID */
+    llmProviderId?: number;
+    /** 提示词模板 ID */
+    promptTemplateId?: number;
+    /** 自定义提示词 */
+    customPrompt?: string;
+    /** 窗口标题文本 */
+    headerTitle?: string;
+    /** 空状态提示文本 */
+    emptyText?: string;
+    /** 输入框占位文本 */
+    placeholder?: string;
+    /** 主题模式，默认 dark */
+    mode?: AgentThemeMode;
+    /** 主题变量覆盖，如 { '--agent-btn-bg': '#2563eb', '--agent-window-width': '480px' } */
+    theme?: AgentThemeOverrides;
+    /** 是否启用语音输入，默认 true（浏览器不支持时自动隐藏） */
+    enableVoice?: boolean;
+    /** 语音识别语言，默认 zh-CN */
+    voiceLang?: string;
+    /** 实例 ID，用于多实例隔离，默认 'default' */
+    instanceId?: string;
+}
+/** provide/inject key */
+export declare const AGENT_CONFIG_KEY: InjectionKey<ComputedRef<AgentPluginOptions>>;
+/** 实例 ID provide/inject key */
+export declare const AGENT_INSTANCE_KEY: InjectionKey<string>;
+/** 聊天消息角色 */
+export type ChatMessageRole = 'user' | 'assistant' | 'system';
+/** 聊天消息状态 */
+export type ChatMessageStatus = 'pending' | 'streaming' | 'done' | 'error';
+/** 来源信息 */
+export interface SourceInfo {
+    id: string;
+    title: string;
+}
+/** 单条聊天消息 */
+export interface ChatMessage {
+    /** 唯一标识 */
+    id: string;
+    /** 消息角色 */
+    role: ChatMessageRole;
+    /** 消息内容 */
+    content: string;
+    /** 消息状态 */
+    status: ChatMessageStatus;
+    /** 创建时间戳 */
+    createdAt: number;
+    /** 关联的报告 ID（流式完成后服务端返回） */
+    reportId?: number;
+    /** 报告标题 */
+    title?: string;
+    /** 错误信息 */
+    errorMessage?: string;
+    /** AI 处理阶段提示（如"正在查询数据…"） */
+    statusText?: string;
+    /** 生成的 SQL 语句 */
+    sql?: string;
+    /** 结构化数据 */
+    data?: any[];
+    /** 数据表格是否展开 */
+    dataExpanded?: boolean;
+    /** ECharts 图表配置 */
+    chartConfig?: any;
+    /** 来源依据 */
+    sources?: SourceInfo[];
+}
+/** 会话信息 */
+export interface SessionInfo {
+    id: string;
+    title: string;
+    created_at: string;
+}
+/** 流式请求参数 */
+export interface StreamRequestData {
+    sessionId: string;
+    query: string;
+    userId?: string;
+}
+/** 流式事件类型 */
+export type StreamEventType = 'status' | 'sql' | 'data' | 'chart_config' | 'sources' | 'analysis_chunk' | 'delta' | 'done' | 'error';
+/** 流式事件数据 */
+export interface StreamEvent {
+    type: StreamEventType;
+    content?: any;
+    message?: string;
+    report_id?: number;
+    title?: string;
+}
+/** 布局模式 */
+export type AgentLayoutMode = 'popup' | 'full' | 'mobile';
+/** Full 布局特有参数 */
+export interface AgentFullLayoutProps {
+    /** 是否显示历史侧栏，默认 true */
+    showSidebar?: boolean;
+    /** 侧栏宽度，默认 '280px' */
+    sidebarWidth?: string;
+    /** 侧栏位置，默认 'left' */
+    sidebarPosition?: 'left' | 'right';
+}
+/** Mobile 布局特有参数 */
+export interface AgentMobileLayoutProps {
+    /** 顶部安全区，默认 'env(safe-area-inset-top, 0px)' */
+    safeAreaTop?: string;
+    /** 底部安全区，默认 'env(safe-area-inset-bottom, 0px)' */
+    safeAreaBottom?: string;
+}
+/** 流式回调 */
+export interface StreamCallbacks {
+    onStatus?: (text: string) => void;
+    onSql?: (sql: string) => void;
+    onData?: (data: any[]) => void;
+    onChartConfig?: (config: any) => void;
+    onSources?: (sources: SourceInfo[]) => void;
+    onAnalysisChunk?: (chunk: string) => void;
+    onDone?: (reportId: number, title: string) => void;
+    onError?: (message: string) => void;
+    onComplete?: () => void;
+}

package/dist/src/utils/echart.d.ts

@@ -0,0 +1,84 @@
+import { EChartsOption, TooltipComponentOption } from 'echarts';
+/** 当前是否暗色主题（由插件 mode 驱动，默认 true） */
+export declare const isDarkMode: import('vue').Ref<boolean, boolean>;
+/**
+ * 默认提示框样式配置
+ * - 半透明黑色背景和边框
+ * - 白色文本，12px 大小
+ */
+export declare const defaultTooltipStyle: TooltipComponentOption;
+/**
+ * 图表点击事件回调的数据结构
+ */
+type ChartClickCallbackData = {
+    name: string;
+    value: unknown;
+    seriesName: string;
+};
+/**
+ * ECharts 封装工具类
+ * 提供图表初始化、配置更新、自动轮播等功能
+ * 支持响应式布局和资源自动释放
+ */
+export declare class useEcharts {
+    private chart;
+    private interval;
+    private readonly resizeHandler;
+    private dom;
+    /**
+     * 构造函数
+     * @param dom 图表容器 DOM 元素
+     * @param option 图表配置项
+     * @param callback 点击事件回调函数
+     * @param scroll 是否启用自动轮播
+     */
+    constructor(dom: HTMLElement, option: EChartsOption, callback?: (data: ChartClickCallbackData) => void, scroll?: boolean);
+    /**
+     * 初始化图表
+     * - 创建 ECharts 实例
+     * - 设置图表配置
+     * - 绑定点击事件
+     * - 启用自动轮播（如果需要）
+     */
+    private initChart;
+    /**
+     * 更新图表配置
+     * @param option 新的图表配置
+     */
+    setOption(option: EChartsOption): void;
+    /**
+     * 设置图表点击事件处理
+     * @param callback 点击事件回调函数
+     */
+    private setupClickEvent;
+    /**
+     * 设置自动轮播功能
+     * @param option 图表配置，用于获取数据长度
+     */
+    private setupCarousel;
+    /**
+     * 启动自动轮播
+     * @param dataLen 数据项数量
+     * @param intervalTime 轮播间隔时间（毫秒）
+     */
+    private startCarousel;
+    /**
+     * 设置轮播交互逻辑
+     * - 鼠标悬停时暂停轮播
+     * - 鼠标移出时恢复轮播
+     */
+    private setupCarouselInteraction;
+    /**
+     * 清除轮播定时器
+     */
+    private clearCarousel;
+    /**
+     * 销毁图表实例并清理资源
+     * - 清除轮播定时器
+     * - 释放 ECharts 实例
+     * - 移除窗口大小变化监听器
+     * 建议在组件卸载时调用此方法，防止内存泄漏
+     */
+    dispose(): void;
+}
+export {};

package/dist/src/utils/echarts-zh-cn-locale.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/views/AgentChat.vue.d.ts

@@ -0,0 +1,59 @@
+import { AgentPluginOptions, AgentThemeMode } from '../../types/agent';
+type __VLS_Props = AgentPluginOptions & {
+    config?: AgentPluginOptions;
+};
+/** 切换窗口显示 */
+declare function toggleWindow(): void;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    /** 当前会话 ID */
+    sessionId: string;
+    /** 历史会话列表 */
+    sessions: {
+        id: string;
+        title: string;
+        created_at: string;
+    }[];
+    /** 当前对话消息列表 */
+    messages: {
+        id: string;
+        role: import('../../types/agent').ChatMessageRole;
+        content: string;
+        status: import('../../types/agent').ChatMessageStatus;
+        createdAt: number;
+        reportId?: number | undefined;
+        title?: string | undefined;
+        errorMessage?: string | undefined;
+        statusText?: string | undefined;
+        sql?: string | undefined;
+        data?: any[] | undefined;
+        dataExpanded?: boolean | undefined;
+        chartConfig?: any;
+        sources?: {
+            id: string;
+            title: string;
+        }[] | undefined;
+    }[];
+    /** 是否正在流式接收 */
+    isStreaming: boolean;
+    /** 是否正在加载会话 */
+    isSessionLoading: boolean;
+    /** 初始化会话 */
+    initSession: () => Promise<void>;
+    /** 加载历史会话列表 */
+    loadSessions: () => Promise<void>;
+    /** 切换到指定会话 */
+    switchSession: (id: string) => void;
+    /** 新建聊天 */
+    newChat: () => Promise<void>;
+    /** 清空对话消息 */
+    clearMessages: () => void;
+    /** 切换窗口显示 */
+    toggleWindow: typeof toggleWindow;
+    /** 窗口是否可见 */
+    windowVisible: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    instanceId: string;
+    mode: AgentThemeMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/views/AgentChatFull.vue.d.ts

@@ -0,0 +1,56 @@
+import { AgentFullLayoutProps, AgentPluginOptions, AgentThemeMode } from '../../types/agent';
+type __VLS_Props = AgentPluginOptions & {
+    config?: AgentPluginOptions;
+} & AgentFullLayoutProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    /** 当前会话 ID */
+    sessionId: string;
+    /** 历史会话列表 */
+    sessions: {
+        id: string;
+        title: string;
+        created_at: string;
+    }[];
+    /** 当前对话消息列表 */
+    messages: {
+        id: string;
+        role: import('../../types/agent').ChatMessageRole;
+        content: string;
+        status: import('../../types/agent').ChatMessageStatus;
+        createdAt: number;
+        reportId?: number | undefined;
+        title?: string | undefined;
+        errorMessage?: string | undefined;
+        statusText?: string | undefined;
+        sql?: string | undefined;
+        data?: any[] | undefined;
+        dataExpanded?: boolean | undefined;
+        chartConfig?: any;
+        sources?: {
+            id: string;
+            title: string;
+        }[] | undefined;
+    }[];
+    /** 是否正在流式接收 */
+    isStreaming: boolean;
+    /** 是否正在加载会话 */
+    isSessionLoading: boolean;
+    /** 初始化会话 */
+    initSession: () => Promise<void>;
+    /** 加载历史会话列表 */
+    loadSessions: () => Promise<void>;
+    /** 切换到指定会话 */
+    switchSession: (id: string) => void;
+    /** 新建聊天 */
+    newChat: () => Promise<void>;
+    /** 清空对话消息 */
+    clearMessages: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    instanceId: string;
+    mode: AgentThemeMode;
+    showSidebar: boolean;
+    sidebarWidth: string;
+    sidebarPosition: "left" | "right";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/views/AgentChatMobile.vue.d.ts

@@ -0,0 +1,62 @@
+import { AgentMobileLayoutProps, AgentPluginOptions, AgentThemeMode } from '../../types/agent';
+type __VLS_Props = AgentPluginOptions & {
+    config?: AgentPluginOptions;
+} & AgentMobileLayoutProps;
+/** 切换历史抽屉 */
+declare function toggleDrawer(): void;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    /** 当前会话 ID */
+    sessionId: string;
+    /** 历史会话列表 */
+    sessions: {
+        id: string;
+        title: string;
+        created_at: string;
+    }[];
+    /** 当前对话消息列表 */
+    messages: {
+        id: string;
+        role: import('../../types/agent').ChatMessageRole;
+        content: string;
+        status: import('../../types/agent').ChatMessageStatus;
+        createdAt: number;
+        reportId?: number | undefined;
+        title?: string | undefined;
+        errorMessage?: string | undefined;
+        statusText?: string | undefined;
+        sql?: string | undefined;
+        data?: any[] | undefined;
+        dataExpanded?: boolean | undefined;
+        chartConfig?: any;
+        sources?: {
+            id: string;
+            title: string;
+        }[] | undefined;
+    }[];
+    /** 是否正在流式接收 */
+    isStreaming: boolean;
+    /** 是否正在加载会话 */
+    isSessionLoading: boolean;
+    /** 初始化会话 */
+    initSession: () => Promise<void>;
+    /** 加载历史会话列表 */
+    loadSessions: () => Promise<void>;
+    /** 切换到指定会话 */
+    switchSession: (id: string) => void;
+    /** 新建聊天 */
+    newChat: () => Promise<void>;
+    /** 清空对话消息 */
+    clearMessages: () => void;
+    /** 历史抽屉可见 */
+    drawerVisible: import('vue').Ref<boolean, boolean>;
+    /** 切换历史抽屉 */
+    toggleDrawer: typeof toggleDrawer;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    instanceId: string;
+    mode: AgentThemeMode;
+    placeholder: string;
+    safeAreaTop: string;
+    safeAreaBottom: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@legendzd/ai-agent-vue",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "可嵌入的 AI 智能体可视化 Vue 插件 — 浮动按钮、流式对话、Markdown/图表渲染",
+  "keywords": [
+    "vue",
+    "vue3",
+    "ai",
+    "agent",
+    "chat",
+    "streaming",
+    "plugin",
+    "component"
+  ],
+  "license": "MIT",
+  "author": "",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/src/plugin/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/src/plugin/index.d.ts",
+      "style": "./dist/style.css"
+    },
+    "./dist/style.css": {
+      "default": "./dist/style.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "style": "./dist/style.css",
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite --force --mode development",
+    "build": "vue-tsc -b && vite build --force --mode production",
+    "build:lib": "vue-tsc -b && vite build --mode lib",
+    "preview": "vite preview --force --mode production",
+    "format": "prettier --write \"src/**/*.{vue,ts,tsx,js,jsx,json,css,less}\"",
+    "format:check": "prettier --check \"src/**/*.{vue,ts,tsx,js,jsx,json,css,less}\"",
+    "prepublishOnly": "npm run build:lib",
+    "release:patch": "npm version patch --no-git-tag-version && npm run build:lib && npm publish",
+    "release:minor": "npm version minor --no-git-tag-version && npm run build:lib && npm publish",
+    "release:major": "npm version major --no-git-tag-version && npm run build:lib && npm publish"
+  },
+  "dependencies": {
+    "echarts": "^5.6.0",
+    "highlight.js": "^11.11.1",
+    "markdown-it": "^14.2.0",
+    "ogl": "^1.0.11",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^24.12.3",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "less": "^4.6.4",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^5.0.2",
+    "vue": "^3.5.34",
+    "vue-tsc": "^3.2.8"
+  }
+}