Smart Bar 组件

这是一个包含智能助手悬浮球和主窗口的Vue组件包。

组件说明

SmartBar 组件

• 一个可拖拽的悬浮球图标
• 双击可以打开主窗口
• 支持磁性吸附到屏幕边缘

SmartMainWindow 组件

• 一个可拖拽的悬浮窗口
• 包含iframe内容展示
• 支持关闭功能
• 窗口居中显示

使用方法

安装依赖

npm install

在Vue项目中使用

<template>
  <div>
    <SmartBar :host="'http://localhost:5173'" />
  </div>
</template>

<script setup>
import SmartBar from './src/components/smart-bar/smart-bar.vue'
</script>

组件属性

SmartBar Props

• host (String): iframe的源地址，默认为 'http://localhost:5173'

SmartMainWindow Props

• host (String): iframe的源地址，默认为 'http://localhost:5173'
• visible (Boolean): 控制窗口显示/隐藏，默认为 false

SmartMainWindow Events

• close: 窗口关闭时触发

功能特性

拖拽功能

• 两个组件都支持鼠标拖拽
• 智能边界检测，防止拖出屏幕
• 磁性吸附到屏幕边缘

交互功能

• 双击悬浮球打开主窗口
• 点击关闭按钮关闭主窗口
• 拖拽标题栏移动窗口位置

样式特性

• 渐变背景动画
• 圆角设计
• 阴影效果
• 响应式布局

开发说明

文件结构

src/components/
├── smart-bar/
│   ├── smart-bar.vue          # 悬浮球组件
│   └── index.ts               # 导出文件
├── smart-main-window/
│   ├── smart-main-window.vue  # 主窗口组件
│   └── index.ts               # 导出文件
└── index.ts                   # 主导出文件

测试

运行测试页面：

# 启动开发服务器
npm run dev

# 然后在浏览器中打开 test.html

注意事项

1. 确保iframe的源地址可以正常访问
2. 组件使用了固定定位，确保在合适的容器中使用
3. z-index设置较高，注意与其他元素的层级关系
4. 拖拽功能依赖DOM操作，确保在客户端环境中使用