官网 AI 悬浮图标样式参数（供 Chat SDK 配置） ​

来源：apps/web-home/components/FloatingControls.vue 原 AI 悬浮球
用途：在 @vben/chat-sdk / ImWebSDK 中新增悬浮球样式配置时对齐官网布局

1. 核心参数 ​

属性 值 说明
position fixed 固定定位
right 10px 距视口右侧
bottom calc(20% - 100px) 距视口底部（相对中间偏下）
width 64px 图标宽度
height 76px 图标高度
zIndex 1000 外层控件区 z-index（原站点）
imgSrc 见下方 悬浮球图片
hideOnMobile max-width: 1023px 移动端隐藏

图片地址 ​

text 
https://jiufangpingtai.oss-cn-shenzhen.aliyuncs.com/assets/images/sub/home/ai-float.png

2. 原始 CSS ​

css 
.ai-assistant-button {
  position: fixed;
  right: 10px;
  bottom: calc(20% - 100px);
  transition: opacity 0.2s ease;
  /* 布局类名等价：
     flex w-[50px] cursor-pointer flex-col
     items-center justify-center gap-2
     rounded-full px-2 py-4 text-center
  */
}

.ai-assistant-button:hover {
  opacity: 0.9;
}

.ai-float-icon {
  width: 64px;
  height: 76px;
  max-width: 64px;
}

@media (max-width: 1023px) {
  .ai-assistant-button {
    display: none;
  }
}

3. 同列其它悬浮控件（避让参考） ​

官网右侧竖排（从上到下）：

控件 right bottom
小程序 10px calc(20% + 140px)
联系我们 10px 20%
AI 图标 10px calc(20% - 100px)
返回顶部 TOP 10px calc(20% - 180px)

间距关系（相对「联系我们」bottom: 20%）：

4. 外层缩放容器 ​

部分页面会对悬浮控件整体缩放：

css 
.floating-controls-container {
  position: fixed;
  right: 10px;
  bottom: 100px;
  z-index: 1000;
  transform-origin: bottom right;
  transition: transform 0.2s ease-in-out;
}

运行时可能附加：

js 
transform: scale(currentScale) // currentScale 来自页面缩放逻辑

SDK 悬浮球若挂在 document.body，通常不受该容器 scale 影响；若要对齐缩放后的视觉位置，需单独约定。

5. 建议 SDK 配置字段 ​

对齐官网时，建议 ui.asstBtn 支持：

ts 
ui?: {
  asstBtn?: {
    /** 是否显示悬浮球，默认 true */
    isNeed?: boolean;
    /** 距右侧，默认 SDK 现有值；官网期望 '10px' */
    right?: string;
    /** 距底部，默认 SDK 现有值；官网期望 'calc(20% - 100px)' */
    bottom?: string;
    /** 图标宽，官网 64 */
    width?: number | string;
    /** 图标高，官网 76 */
    height?: number | string;
    /** 自定义图片，不传则用 SDK 默认图 */
    imgSrc?: string;
    /** z-index */
    zIndex?: number;
    /** 小屏隐藏断点，如 1023；不传则不隐藏 */
    hideBelowWidth?: number;
  };
  /** 面板等其它 UI 的 z-index（若已有可复用） */
  zIndex?: number;
};

官网接入示例（期望配置） ​

js 
new ImWebSDK.WebChatClient({
  config: {
    siteId: 'jiufang-home',
    platformType: 'jiufang',
    chatUrl: 'https://uat-customer.jiufanglogistics.cn/imchat/web-chat/index.html',
  },
  ui: {
    asstBtn: {
      isNeed: true,
      right: '10px',
      bottom: 'calc(20% - 100px)',
      width: 64,
      height: 76,
      imgSrc:
        'https://jiufangpingtai.oss-cn-shenzhen.aliyuncs.com/assets/images/sub/home/ai-float.png',
      hideBelowWidth: 1023,
    },
  },
});

6. 与当前 SDK 默认值对比 ​

项 官网原样式 SDK 当前默认（参考）
right 10px 24px（移动端 16px）
bottom calc(20% - 100px) 24px（移动端 16px）
尺寸 64 × 76 64 × 76（jiufang）
图片 ai-float.png 同图
小屏 ≤1023px 隐藏 不隐藏，改为贴边全屏面板

文档生成自 web-home 接入 ImWebSDK 时的布局对齐需求。