@fdsure/sales-ai-widget

一个可发布到 npm 的 Sales AI 悬浮 iframe 组件。组件核心不依赖具体业务系统，提供原生 DOM、Vue 2、Vue 3 三种使用入口。

特性

• 悬浮入口按钮，支持拖拽。
• hover/focus 展示“问问AI私募助手...”提示。
• 支持小窗、放大、关闭。
• 放大时锁定宿主页面滚动。
• visible=false、token 或 iframeSrc 变化时自动关闭面板，避免退出登录或切换账号后复用旧会话。
• 自动拼接 embed、view、channel、token 到 iframe URL。
• 不依赖 Element UI、Vuex、Vue Router 或宿主系统全局样式。
• 支持通过 CSS 变量调整主色、圆角、层级。

安装

npm install @fdsure/sales-ai-widget

Vue 2 使用

import Vue from 'vue'
import SalesAiWidget from '@fdsure/sales-ai-widget/vue2'
import '@fdsure/sales-ai-widget/style.css'

Vue.use(SalesAiWidget)

<template>
  <SalesAiWidget
    :visible="showWidget"
    :iframe-src="salesAiIframeSrc"
    channel="invest"
    :token="token"
  />
</template>

<script>
export default {
  computed: {
    token() {
      return this.$store.getters.token || localStorage.getItem('token') || ''
    },
    showWidget() {
      return Boolean(this.token && this.$route.meta.showChatButton)
    },
    salesAiIframeSrc() {
      return process.env.VUE_APP_SALES_AI_URL || 'https://m.fdsure.com/sales-ai/?type=sales'
    }
  }
}
</script>

Vue 3 使用

import { createApp } from 'vue'
import SalesAiWidget from '@fdsure/sales-ai-widget/vue3'
import '@fdsure/sales-ai-widget/style.css'

const app = createApp(App)
app.use(SalesAiWidget)
app.mount('#app')

<template>
  <SalesAiWidget
    :visible="true"
    iframe-src="https://m.fdsure.com/sales-ai/?type=sales"
    channel="invest"
    :token="token"
  />
</template>

原生 DOM 使用

import { createSalesAiWidget } from '@fdsure/sales-ai-widget'
import '@fdsure/sales-ai-widget/style.css'

const widget = createSalesAiWidget(document.body, {
  iframeSrc: 'https://m.fdsure.com/sales-ai/?type=sales',
  channel: 'invest',
  token: localStorage.getItem('token') || ''
})

widget.update({ token: 'new-token' })

Props / Options

| 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | visible | boolean | true | 是否显示组件 | | iframeSrc | string | https://m.fdsure.com/sales-ai/?type=sales | iframe 基础地址。生产包使用 https://m.fdsure.com/sales-ai/?type=sales，UAT/测试包使用 https://uat.fdsure.com/sales-ai/?type=sales | | channel | string | invest | 渠道号，会作为 Dify user 前缀 | | token | string | 空字符串 | 登录 token，会拼接到 iframe URL | | defaultOpen | boolean | false | 初始是否展开面板 | | defaultExpanded | boolean | false | 初始是否放大 | | zIndex | number | 2147483000 | 根节点层级 | | safeGap | number | 16 | 拖拽时与视口边缘的安全距离 | | texts | object | 见下方 | 文案覆盖 |

texts 可覆盖：

{
  focusLabel: '问问AI私募助手...',
  openLabel: '打开AI私募助手',
  closeLabel: '关闭',
  expandLabel: '放大',
  collapseLabel: '还原'
}

事件

Vue 入口支持：

<SalesAiWidget
  @open="handleOpen"
  @close="handleClose"
  @expand="handleExpand"
  @collapse="handleCollapse"
/>

原生 DOM 入口使用 onOpen、onClose、onExpand、onCollapse。

CSS 变量

:root {
  --fd-sales-ai-primary: #223f88;
  --fd-sales-ai-z-index: 2147483000;
  --fd-sales-ai-button-size: 48px;
  --fd-sales-ai-panel-radius: 16px;
  --fd-sales-ai-expanded-radius: 8px;
}

发布前检查

npm test
npm pack --dry-run

fd-invest-web 接入建议

宿主系统只负责传登录态，不让组件库读取 Vuex 或 localStorage：

<SalesAiWidget
  :visible="showSalesAiFloat"
  :iframe-src="salesAiIframeSrc"
  :channel="salesAiChannel"
  :token="$store.getters.token || getToken() || ''"
/>

推荐按宿主包配置注入地址：

# .env.production
VUE_APP_SALES_AI_URL = 'https://m.fdsure.com/sales-ai/?type=sales'

# .env.uat / .env.development / .env.int
VUE_APP_SALES_AI_URL = 'https://uat.fdsure.com/sales-ai/?type=sales'