@fzbykj/ai-chat-sdk-mp 1.0.0

package/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "@fzbykj/ai-chat-sdk-mp",
+	"version": "1.0.0",
+	"description": "AI 对话助手 SDK for 微信小程序 (uni-app)",
+	"main": "sdk/index.js",
+	"files": [
+		"sdk/**/*"
+	],
+	"keywords": [
+		"ai",
+		"chat",
+		"wechat",
+		"miniprogram",
+		"uni-app"
+	],
+	"author": "fzbykj",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/fzbykj/ai-chat-sdk-mp"
+	}
+}

package/sdk/components/ai-float/ai-float.vue

@@ -0,0 +1,269 @@
+<!-- components/ai-float/ai-float.vue -->
+<template>
+	<view class="ai-float-wrapper">
+		<!-- 折叠状态 -->
+		<view v-if="isCollapsed" class="float-collapsed" :style="collapsedStyleStr" @click="expand">
+			<text class="collapse-text">AI</text>
+			<text class="collapse-text">助</text>
+			<text class="collapse-text">手</text>
+		</view>
+
+		<!-- 正常状态 -->
+		<view v-else class="float-btn" :style="btnStyleStr" @touchstart="onTouchStart" @touchmove="onTouchMove"
+			@touchend="onTouchEnd" @click="openChat">
+			<image class="btn-icon" :src="iconUrl" mode="aspectFit" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		aichat
+	} from '@/utils/sdk.js'
+
+	export default {
+		name: 'AiFloat',
+
+		props: {
+			apiKey: {
+				type: String,
+				default: ''
+			},
+			userId: {
+				type: String,
+				default: ''
+			},
+			baseUrl: {
+				type: String,
+				default: ''
+			}
+		},
+
+		data() {
+			return {
+				isCollapsed: false,
+				collapseTimer: null,
+
+				x: 0,
+				y: 0,
+				screenWidth: 0,
+				screenHeight: 0,
+
+				iconSize: 56,
+				collapsedWidth: 28,
+				collapsedHeight: 80,
+
+				startX: 0,
+				startY: 0,
+				startOffsetX: 0,
+				startOffsetY: 0,
+				isDragging: false,
+
+				_apiKey: '',
+				_userId: '',
+				_baseUrl: ''
+			}
+		},
+
+		computed: {
+			iconUrl() {
+				return '/static/icon.png'
+			},
+
+			// ✅ 返回字符串模板，确保类型正确
+			btnStyleStr() {
+				return `left: ${this.x}px; top: ${this.y}px; width: ${this.iconSize}px; height: ${this.iconSize}px; border-radius: ${this.iconSize / 2}px;`
+			},
+
+			collapsedStyleStr() {
+				const isLeft = this.x < this.screenWidth / 2
+				const leftPos = isLeft ? 0 : this.screenWidth - this.collapsedWidth
+				const radius = isLeft ? '0 12px 12px 0' : '12px 0 0 12px'
+				return `left: ${leftPos}px; top: ${this.y}px; width: ${this.collapsedWidth}px; height: ${this.collapsedHeight}px; border-radius: ${radius};`
+			}
+		},
+
+		mounted() {
+			this._apiKey = this.apiKey || aichat.getApiKey()
+			this._userId = this.userId || aichat.getUserId()
+			this._baseUrl = this.baseUrl || aichat.getBaseUrl()
+
+			const systemInfo = uni.getSystemInfoSync()
+			this.screenWidth = systemInfo.windowWidth
+			this.screenHeight = systemInfo.windowHeight
+
+			this.x = this.screenWidth - this.iconSize - 20
+			this.y = (this.screenHeight - this.iconSize) / 2
+		},
+
+		beforeDestroy() {
+			if (this.collapseTimer) {
+				clearTimeout(this.collapseTimer)
+				this.collapseTimer = null
+			}
+		},
+
+		methods: {
+			onTouchStart(e) {
+				const touch = e.touches[0]
+				this.startX = touch.clientX
+				this.startY = touch.clientY
+				this.startOffsetX = this.x
+				this.startOffsetY = this.y
+				this.isDragging = false
+
+				if (this.collapseTimer) {
+					clearTimeout(this.collapseTimer)
+					this.collapseTimer = null
+				}
+			},
+
+			onTouchMove(e) {
+				const touch = e.touches[0]
+				const deltaX = touch.clientX - this.startX
+				const deltaY = touch.clientY - this.startY
+
+				if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+					this.isDragging = true
+				}
+
+				if (this.isDragging) {
+					let newX = this.startOffsetX + deltaX
+					let newY = this.startOffsetY + deltaY
+					newX = Math.max(0, Math.min(newX, this.screenWidth - this.iconSize))
+					newY = Math.max(0, Math.min(newY, this.screenHeight - this.iconSize))
+					this.x = newX
+					this.y = newY
+				}
+			},
+
+			onTouchEnd() {
+				if (!this.isDragging) return
+				this.isDragging = false
+
+				const currentWidth = this.isCollapsed ? this.collapsedWidth : this.iconSize
+				if (this.x < this.screenWidth / 2 - currentWidth / 2) {
+					this.x = 0
+				} else {
+					this.x = this.screenWidth - currentWidth
+				}
+
+				if (!this.isCollapsed) {
+					const isNearEdge = this.x < 20 || this.x > this.screenWidth - this.iconSize - 20
+					if (isNearEdge) {
+						if (this.collapseTimer) clearTimeout(this.collapseTimer)
+						this.collapseTimer = setTimeout(() => {
+							this.doCollapse()
+						}, 2000)
+					} else {
+						if (this.collapseTimer) {
+							clearTimeout(this.collapseTimer)
+							this.collapseTimer = null
+						}
+					}
+				}
+			},
+
+			doCollapse() {
+				if (this.isCollapsed) return
+				const isLeft = this.x < this.screenWidth / 2
+				this.x = isLeft ? 0 : this.screenWidth - this.collapsedWidth
+				const deltaY = (this.iconSize - this.collapsedHeight) / 2
+				this.y = this.y + deltaY
+				this.y = Math.max(0, Math.min(this.y, this.screenHeight - this.collapsedHeight))
+				this.isCollapsed = true
+			},
+
+			expand() {
+				if (!this.isCollapsed) return
+				const isLeft = this.x < this.screenWidth / 2
+				this.x = isLeft ? 0 : this.screenWidth - this.iconSize
+				const deltaY = (this.iconSize - this.collapsedHeight) / 2
+				this.y = this.y - deltaY
+				this.y = Math.max(0, Math.min(this.y, this.screenHeight - this.iconSize))
+				this.isCollapsed = false
+
+				this.$nextTick(() => {
+					if (this.x < 20 || this.x > this.screenWidth - this.iconSize - 20) {
+						if (this.collapseTimer) clearTimeout(this.collapseTimer)
+						this.collapseTimer = setTimeout(() => {
+							this.doCollapse()
+						}, 2000)
+					}
+				})
+			},
+
+			openChat() {
+				if (this.isCollapsed) {
+					this.expand()
+					return
+				}
+				if (this.isDragging) return
+
+				if (this.collapseTimer) {
+					clearTimeout(this.collapseTimer)
+					this.collapseTimer = null
+				}
+
+				const baseUrl = encodeURIComponent(this._baseUrl || aichat.getBaseUrl())
+				const apiKey = encodeURIComponent(this._apiKey || aichat.getApiKey())
+				const userId = encodeURIComponent(this._userId || aichat.getUserId())
+				console.log(baseUrl,apiKey,userId)
+				uni.navigateTo({
+					url: `/pages/chat/chat?baseUrl=${baseUrl}&apiKey=${apiKey}&userId=${userId}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.ai-float-wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		z-index: 9999;
+	}
+
+	/* ✅ 所有动态尺寸由 :style 控制，这里只定义颜色、边框等静态属性 */
+	.float-btn {
+		position: fixed;
+		background: linear-gradient(135deg, #4A90D9, #357ABD);
+		box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: auto;
+		overflow: hidden;
+	}
+
+	.float-collapsed {
+		position: fixed;
+		background: linear-gradient(180deg, #4A90D9, #357ABD);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		pointer-events: auto;
+		box-shadow: 0 2px 8px rgba(74, 144, 217, 0.3);
+		padding: 4px 0;
+	}
+
+	/* ✅ 图标图片样式 */
+	.btn-icon {
+		width: 90%;
+		height: 90%;
+		border-radius: 50%;
+	}
+
+	/* ✅ 折叠文字样式 */
+	.collapse-text {
+		color: #FFFFFF;
+		font-size: 11px;
+		font-weight: bold;
+		line-height: 1.5;
+	}
+</style>

package/sdk/components/ai-float/index.js

@@ -0,0 +1,8 @@
+// components/ai-float/index.js
+import AiFloat from './ai-float.vue'
+
+// ✅ 两种导出方式都加上，确保兼容
+export default AiFloat
+export {
+	AiFloat
+}

package/sdk/index.js

@@ -0,0 +1,21 @@
+// sdk/index.js
+
+// 导出 SDK 核心类
+export {
+	aichat,
+	AIChatSDK
+}
+from './utils/sdk.js'
+
+// 导出组件
+export {
+	default as AiFloat
+}
+from './components/ai-float/index.js'
+
+// 导出页面（提供给客户参考或直接使用）
+// 注意：页面需要客户在 pages.json 中注册
+export {
+	default as ChatPage
+}
+from './pages/chat/chat.vue'

package/sdk/pages/chat/chat.vue

@@ -0,0 +1,125 @@
+<!-- pages/chat/chat.vue -->
+<template>
+	<view class="chat-page">
+		<!-- 自定义导航栏 -->
+		<view class="custom-nav">
+			<view class="nav-back" @click="goBack">
+				<text class="back-icon">‹</text>
+				<text class="back-text">返回</text>
+			</view>
+			<text class="nav-title">AI 对话助手</text>
+			<view class="nav-placeholder"></view>
+		</view>
+
+		<!-- web-view 填充剩余高度 -->
+		<web-view class="webview" :src="webViewUrl" @load="onWebLoad" @error="onWebError" />
+	</view>
+</template>
+
+<script>
+	import {
+		aichat
+	} from '@/utils/sdk.js'
+
+	export default {
+		data() {
+			return {
+				webViewUrl: ''
+			}
+		},
+
+		onLoad(options) {
+			console.log(options)
+			// 从 URL 参数或 SDK 配置获取
+			// ✅ 对传入的参数进行解码
+			const baseUrl = options.baseUrl ? decodeURIComponent(options.baseUrl) : aichat.getBaseUrl()
+			const apiKey = options.apiKey ? decodeURIComponent(options.apiKey) : aichat.getApiKey()
+			const userId = options.userId ? decodeURIComponent(options.userId) : aichat.getUserId()
+			const separator = baseUrl.includes('?') ? '&' : '?'
+			this.webViewUrl = `${baseUrl}${separator}apiKey=${apiKey}&userId=${userId}&platform=wechat`
+		},
+
+		methods: {
+			// 返回上一页
+			goBack() {
+				// 检查是否能返回上一页
+				const pages = getCurrentPages()
+				if (pages.length > 1) {
+					// 有上一页，正常返回
+					uni.navigateBack()
+				} else {
+					// 没有上一页，跳转到首页
+					uni.switchTab({
+						url: '/pages/index/index'
+					})
+				}
+			},
+			onWebLoad() {
+				console.log('WebView 加载完成')
+			},
+
+			onWebError(e) {
+				console.error('WebView 加载失败', e)
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.chat-page {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background: #FFFFFF;
+	}
+
+	/* ===== 自定义导航栏 ===== */
+	.custom-nav {
+		height: 44px;
+		padding: 0 16px;
+		background: #F5F5F5;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-shrink: 0;
+		border-bottom: 1px solid #E5E5E5;
+	}
+
+	.nav-back {
+		display: flex;
+		align-items: center;
+		padding: 4px 8px;
+		/* 点击区域放大 */
+	}
+
+	.back-icon {
+		font-size: 28px;
+		font-weight: 300;
+		color: #007AFF;
+		line-height: 1;
+		margin-right: 2px;
+	}
+
+	.back-text {
+		font-size: 16px;
+		color: #007AFF;
+	}
+
+	.nav-title {
+		font-size: 17px;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.nav-placeholder {
+		width: 60px;
+		/* 与返回按钮宽度对称，保持标题居中 */
+	}
+
+	/* ===== WebView ===== */
+	.webview {
+		flex: 1;
+		width: 100%;
+	}
+</style>

package/sdk/utils/sdk.js

@@ -0,0 +1,69 @@
+// utils/sdk.js
+
+/**
+ * AI 对话助手 SDK 核心类
+ * 单例模式管理配置
+ */
+class AIChatSDK {
+	constructor() {
+		this.config = {
+			apiKey: '',
+			userId: '',
+			baseUrl: 'https://agent.fzbykj.com/app_chat.html',
+			enableLog: false
+		}
+	}
+
+	static getInstance() {
+		if (!AIChatSDK.instance) {
+			AIChatSDK.instance = new AIChatSDK()
+		}
+		return AIChatSDK.instance
+	}
+
+	/**
+	 * 初始化 SDK
+	 * @param {string} apiKey - API Key
+	 * @param {string} userId - 用户 ID
+	 * @param {string} baseUrl - 可选，自定义 H5 地址
+	 */
+	init(apiKey, userId, baseUrl) {
+		this.config.apiKey = apiKey
+		this.config.userId = userId
+		if (baseUrl) {
+			this.config.baseUrl = baseUrl
+		}
+		this.log('SDK 初始化完成')
+		return this
+	}
+
+	/**
+	 * 开启/关闭日志
+	 */
+	setLogEnabled(enabled) {
+		this.config.enableLog = enabled
+		return this
+	}
+
+	getApiKey() {
+		return this.config.apiKey
+	}
+
+	getUserId() {
+		return this.config.userId
+	}
+
+	getBaseUrl() {
+		return this.config.baseUrl || 'https://agent.fzbykj.com/app_chat.html'
+	}
+
+	log(message) {
+		if (this.config.enableLog) {
+			console.log('[AIChatSDK] ' + message)
+		}
+	}
+}
+
+// 导出单例
+export const aichat = AIChatSDK.getInstance()
+export default aichat