@syfei49/mini-dynamic-renderer 1.0.0 → 1.0.3

package/components/ly-ai-assistant/ly-ai-assistant.vue

@@ -0,0 +1,523 @@
+<template>
+  <view>
+    <view v-if="visible" class="ly-ai-float" :style="floatStyle" @click="openChat">
+      <image v-if="floatIconUrl" class="ly-ai-float-icon" :src="floatIconUrl" mode="aspectFit" />
+      <view v-else class="ly-ai-float-text">AI</view>
+    </view>
+
+    <view v-if="opened" class="ly-ai-overlay" @click.self="closeChat">
+      <view class="ly-ai-drawer">
+        <view class="ly-ai-header">
+          <text class="ly-ai-title">AI 智能客服</text>
+          <view class="ly-ai-close" @click="closeChat">×</view>
+        </view>
+
+        <scroll-view class="ly-ai-list" scroll-y :scroll-into-view="scrollIntoView" scroll-with-animation>
+          <view v-if="messages.length === 0" class="ly-ai-welcome">
+            <view class="ly-ai-welcome-title">AI 智能客服</view>
+            <view class="ly-ai-welcome-desc">我可以帮你处理商品分类相关操作。新增一级分类时，若未提供图标，会引导你拍照或从相册选择。</view>
+            <view v-for="(item, index) in quickQuestions" :key="index" class="ly-ai-quick" @click="sendQuick(item)">
+              {{ item }}
+            </view>
+          </view>
+
+          <view v-for="(item, index) in messages" :key="index" :id="'msg-' + index"
+            class="ly-ai-msg-row" :class="item.role === 'user' ? 'ly-ai-msg-row-user' : 'ly-ai-msg-row-ai'">
+            <view class="ly-ai-bubble" :class="item.role === 'user' ? 'ly-ai-bubble-user' : 'ly-ai-bubble-ai'">
+              <image v-for="(img, imgIndex) in item.imageUrls" :key="imgIndex" class="ly-ai-msg-image"
+                :src="img" mode="aspectFill" @click="previewImage(img, item.imageUrls)" />
+              <text v-if="item.content" class="ly-ai-msg-text">{{ item.content }}</text>
+            </view>
+          </view>
+
+          <view v-if="loading" class="ly-ai-msg-row ly-ai-msg-row-ai">
+            <view class="ly-ai-bubble ly-ai-bubble-ai ly-ai-loading-bubble">
+              <text class="ly-ai-msg-text">正在思考中...</text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view v-if="iconPickMode" class="ly-ai-icon-pick-bar">
+          <view class="ly-ai-icon-pick-title">请为「{{ pendingIconCategory && pendingIconCategory.name }}」选择分类图标</view>
+          <view class="ly-ai-icon-pick-actions">
+            <view class="ly-ai-icon-pick-btn" :class="{ disabled: loading || uploading }" @click="pickCategoryIcon('camera')">拍照</view>
+            <view class="ly-ai-icon-pick-btn" :class="{ disabled: loading || uploading }" @click="pickCategoryIcon('album')">从相册选择</view>
+            <view class="ly-ai-icon-pick-btn cancel" :class="{ disabled: loading || uploading }" @click="cancelIconPick">取消</view>
+          </view>
+        </view>
+
+        <template v-else>
+          <view v-if="pendingImageUrl" class="ly-ai-image-preview-bar">
+            <image class="ly-ai-preview-image" :src="pendingImageUrl" mode="aspectFill" />
+            <view class="ly-ai-preview-remove" @click="clearPendingImage">×</view>
+          </view>
+
+          <view class="ly-ai-input-bar">
+            <view class="ly-ai-attach-btn" :class="{ disabled: loading || uploading }" @click="chooseImage">+</view>
+            <input class="ly-ai-chat-input" :value="inputText" placeholder="请输入您的问题" confirm-type="send"
+              :disabled="loading || uploading" @input="onInput" @confirm="handleSend" />
+            <view class="ly-ai-send-btn" :class="{ disabled: loading || uploading || !canSend }" @click="handleSend">发送</view>
+          </view>
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed,
+    nextTick,
+    onMounted,
+    onUnmounted
+  } from 'vue'
+  import {
+    onShow
+  } from '@dcloudio/uni-app'
+  import chatService from '../../src/chat/service.js'
+  import configModule from '../../src/config.js'
+
+  const visible = ref(false)
+  const opened = ref(false)
+  const messages = ref([])
+  const loading = ref(false)
+  const uploading = ref(false)
+  const iconPickMode = ref(false)
+  const pendingIconCategory = ref(null)
+  const pendingImageUrl = ref('')
+  const inputText = ref('')
+  const quickQuestions = ref([])
+  const scrollIntoView = ref('')
+  const floatIconUrl = ref('')
+
+  const canSend = computed(() => {
+    return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
+  })
+
+  const floatStyle = computed(() => {
+    return {
+      right: '32rpx',
+      bottom: '180rpx'
+    }
+  })
+
+  let updateHandler = null
+  let openHandler = null
+  let closeHandler = null
+
+  function syncState(snapshot) {
+    messages.value = snapshot.messages || []
+    loading.value = snapshot.loading || false
+    uploading.value = snapshot.uploading || false
+    iconPickMode.value = snapshot.iconPickMode || false
+    pendingIconCategory.value = snapshot.pendingIconCategory || null
+    pendingImageUrl.value = snapshot.pendingImageUrl || ''
+    inputText.value = snapshot.inputText || ''
+    quickQuestions.value = snapshot.quickQuestions || []
+    scrollToBottom()
+  }
+
+  function scrollToBottom() {
+    nextTick(() => {
+      scrollIntoView.value = 'msg-' + (messages.value.length - 1)
+      setTimeout(() => {
+        scrollIntoView.value = ''
+      }, 300)
+    })
+  }
+
+  function checkVisible() {
+    const config = configModule.getConfig()
+    const pages = getCurrentPages()
+    const current = pages[pages.length - 1]
+    const route = current ? current.route : ''
+    const visiblePages = config.visiblePages || []
+    const shouldShow = visiblePages.some(function (page) {
+      return route === page || route.indexOf(page) === 0
+    })
+    visible.value = shouldShow
+  }
+
+  function openChat() {
+    if (!chatService.openConversation()) {
+      return
+    }
+    opened.value = true
+    scrollToBottom()
+  }
+
+  function closeChat() {
+    opened.value = false
+    chatService.closeConversation()
+  }
+
+  function onInput(e) {
+    inputText.value = e.detail.value
+    chatService.setInputText(e.detail.value)
+  }
+
+  function handleSend() {
+    chatService.handleSend().then(() => {
+      scrollToBottom()
+    })
+  }
+
+  function sendQuick(text) {
+    chatService.sendQuick(text).then(() => {
+      scrollToBottom()
+    })
+  }
+
+  function chooseImage() {
+    chatService.chooseImage().catch(function (error) {
+      uni.showToast({
+        title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
+        icon: 'none'
+      })
+    })
+  }
+
+  function pickCategoryIcon(source) {
+    chatService.pickCategoryIcon(source).catch(function (error) {
+      uni.showToast({
+        title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
+        icon: 'none'
+      })
+    })
+  }
+
+  function cancelIconPick() {
+    chatService.cancelIconPick()
+  }
+
+  function clearPendingImage() {
+    chatService.clearPendingImage()
+  }
+
+  function previewImage(current, urls) {
+    const list = (urls && urls.length ? urls : [current]).filter(Boolean)
+    if (!list.length) {
+      return
+    }
+    uni.previewImage({
+      current: current,
+      urls: list
+    })
+  }
+
+  onMounted(() => {
+    const config = configModule.getConfig()
+    floatIconUrl.value = config.floatIcon || ''
+    updateHandler = function (snapshot) {
+      syncState(snapshot)
+    }
+    openHandler = function () {
+      opened.value = true
+      scrollToBottom()
+    }
+    closeHandler = function () {
+      opened.value = false
+    }
+    chatService.onUpdate(updateHandler)
+    chatService.onOpen(openHandler)
+    chatService.onClose(closeHandler)
+    syncState(chatService.getSnapshot())
+    checkVisible()
+  })
+
+  onUnmounted(() => {
+    if (updateHandler) {
+      chatService.offUpdate(updateHandler)
+    }
+    if (openHandler) {
+      chatService.offOpen(openHandler)
+    }
+    if (closeHandler) {
+      chatService.offClose(closeHandler)
+    }
+  })
+
+  onShow(() => {
+    checkVisible()
+  })
+</script>
+
+<style scoped>
+  .ly-ai-float {
+    position: fixed;
+    z-index: 9999;
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    background: #f84616;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4rpx 16rpx rgba(248, 70, 22, 0.35);
+  }
+
+  .ly-ai-float-icon {
+    width: 56rpx;
+    height: 56rpx;
+  }
+
+  .ly-ai-float-text {
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  .ly-ai-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .ly-ai-drawer {
+    height: 82vh;
+    background: #f5f6f8;
+    border-radius: 32rpx 32rpx 0 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .ly-ai-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 32rpx;
+    background: #fff;
+    position: relative;
+    border-bottom: 1rpx solid #eee;
+  }
+
+  .ly-ai-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .ly-ai-close {
+    position: absolute;
+    right: 32rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 56rpx;
+    height: 56rpx;
+    line-height: 52rpx;
+    text-align: center;
+    font-size: 40rpx;
+    color: #999;
+  }
+
+  .ly-ai-list {
+    flex: 1;
+    padding: 24rpx;
+    box-sizing: border-box;
+  }
+
+  .ly-ai-welcome {
+    background: #fff;
+    border-radius: 16rpx;
+    padding: 32rpx;
+    margin-bottom: 24rpx;
+  }
+
+  .ly-ai-welcome-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 12rpx;
+  }
+
+  .ly-ai-welcome-desc {
+    font-size: 26rpx;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 20rpx;
+  }
+
+  .ly-ai-quick {
+    background: #fff5f2;
+    color: #f84616;
+    font-size: 24rpx;
+    padding: 18rpx 24rpx;
+    border-radius: 12rpx;
+    margin-top: 16rpx;
+  }
+
+  .ly-ai-msg-row {
+    display: flex;
+    margin-bottom: 20rpx;
+  }
+
+  .ly-ai-msg-row-user {
+    justify-content: flex-end;
+  }
+
+  .ly-ai-msg-row-ai {
+    justify-content: flex-start;
+  }
+
+  .ly-ai-bubble {
+    max-width: 78%;
+    padding: 20rpx 24rpx;
+    border-radius: 16rpx;
+    word-break: break-all;
+  }
+
+  .ly-ai-bubble-user {
+    background: #f84616;
+    color: #fff;
+    border-bottom-right-radius: 4rpx;
+  }
+
+  .ly-ai-bubble-ai {
+    background: #fff;
+    color: #333;
+    border-bottom-left-radius: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  }
+
+  .ly-ai-loading-bubble {
+    color: #999;
+  }
+
+  .ly-ai-msg-image {
+    width: 200rpx;
+    height: 200rpx;
+    border-radius: 12rpx;
+    display: block;
+    margin-bottom: 12rpx;
+  }
+
+  .ly-ai-msg-text {
+    font-size: 28rpx;
+    line-height: 1.6;
+    white-space: pre-wrap;
+  }
+
+  .ly-ai-icon-pick-bar {
+    padding: 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    border-top: 1rpx solid #eee;
+  }
+
+  .ly-ai-icon-pick-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 20rpx;
+    text-align: center;
+  }
+
+  .ly-ai-icon-pick-actions {
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .ly-ai-icon-pick-btn {
+    flex: 1;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    background: #f84616;
+    color: #fff;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+  }
+
+  .ly-ai-icon-pick-btn.cancel {
+    background: #f5f6f8;
+    color: #666;
+  }
+
+  .ly-ai-icon-pick-btn.disabled {
+    opacity: 0.5;
+  }
+
+  .ly-ai-image-preview-bar {
+    display: flex;
+    align-items: center;
+    padding: 12rpx 24rpx;
+    background: #fff;
+    border-top: 1rpx solid #eee;
+  }
+
+  .ly-ai-preview-image {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 12rpx;
+  }
+
+  .ly-ai-preview-remove {
+    margin-left: 16rpx;
+    width: 48rpx;
+    height: 48rpx;
+    line-height: 44rpx;
+    text-align: center;
+    font-size: 36rpx;
+    color: #999;
+    background: #f5f6f8;
+    border-radius: 50%;
+  }
+
+  .ly-ai-input-bar {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    border-top: 1rpx solid #eee;
+  }
+
+  .ly-ai-attach-btn {
+    width: 72rpx;
+    height: 72rpx;
+    line-height: 68rpx;
+    text-align: center;
+    font-size: 44rpx;
+    color: #666;
+    background: #f5f6f8;
+    border-radius: 50%;
+    margin-right: 16rpx;
+    flex-shrink: 0;
+  }
+
+  .ly-ai-attach-btn.disabled {
+    opacity: 0.5;
+  }
+
+  .ly-ai-chat-input {
+    flex: 1;
+    height: 72rpx;
+    background: #f5f6f8;
+    border-radius: 36rpx;
+    padding: 0 28rpx;
+    font-size: 28rpx;
+  }
+
+  .ly-ai-send-btn {
+    margin-left: 16rpx;
+    min-width: 120rpx;
+    height: 72rpx;
+    line-height: 72rpx;
+    text-align: center;
+    background: #f84616;
+    color: #fff;
+    border-radius: 36rpx;
+    font-size: 28rpx;
+  }
+
+  .ly-ai-send-btn.disabled {
+    opacity: 0.5;
+  }
+</style>

package/index.js

@@ -1,14 +1,16 @@
-var initModule = require('./src/init');
-var interceptor = require('./src/interceptor');
-var handler = require('./src/handler');
-
-module.exports = {
-  version: '1.0.0',
-  init: initModule.init,
-  getConfig: initModule.getConfig,
-  isInitialized: initModule.isInitialized,
-  uninstall: interceptor.uninstallInterceptor,
-  parseRenderConfig: handler.parseRenderConfig
-};
-
-initModule.init();
+var initModule = require('./src/init');
+var interceptor = require('./src/interceptor');
+var handler = require('./src/handler');
+var chatService = require('./src/chat/service');
+var configModule = require('./src/config');
+
+module.exports = {
+  version: '1.0.1',
+  init: initModule.init,
+  getConfig: configModule.getConfig,
+  isInitialized: initModule.isInitialized,
+  uninstall: interceptor.uninstallInterceptor,
+  parseRenderConfig: handler.parseRenderConfig,
+  openChat: chatService.openConversation,
+  closeChat: chatService.closeConversation
+};

package/package.json

@@ -1,18 +1,27 @@
-{
-  "name": "@syfei49/mini-dynamic-renderer",
-  "version": "1.0.0",
-  "description": "微信小程序对话接口动态渲染 SDK",
-  "main": "index.js",
-  "miniprogram": ".",
-  "files": [
-    "index.js",
-    "src"
-  ],
-  "keywords": [
-    "wechat",
-    "miniprogram",
-    "dynamic-renderer"
-  ],
-  "author": "syfei49",
-  "license": "MIT"
-}
+{
+  "name": "@syfei49/mini-dynamic-renderer",
+  "version": "1.0.3",
+  "description": "uni-app 浮层 AI 客服插件",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "src/**/*.js",
+    "components/**/*.vue",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "uni-app",
+    "mini-program",
+    "ai",
+    "chat",
+    "float"
+  ],
+  "author": "syfei49",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/adapters/request.js

@@ -0,0 +1,106 @@
+var configModule = require('../config');
+
+function getFullUrl(path) {
+  var config = configModule.getConfig();
+  var baseUrl = config.baseUrl || '';
+  var normalizedPath = (path || '').replace(/^\/+/, '/');
+  if (baseUrl.slice(-1) === '/' && normalizedPath.indexOf('/') === 0) {
+    return baseUrl + normalizedPath.slice(1);
+  }
+  if (baseUrl && normalizedPath.indexOf('/') !== 0) {
+    normalizedPath = '/' + normalizedPath;
+  }
+  return baseUrl + normalizedPath;
+}
+
+function getHeaders(extraHeaders) {
+  var config = configModule.getConfig();
+  var headers = Object.assign({}, config.getHeaders() || {});
+  var token = typeof config.getToken === 'function' ? config.getToken() : '';
+  if (token) {
+    headers.Authorization = token;
+  }
+  if (extraHeaders) {
+    Object.assign(headers, extraHeaders);
+  }
+  return headers;
+}
+
+function sendChat(payload) {
+  var config = configModule.getConfig();
+  var url = getFullUrl(config.chatApiPath);
+  var headers = getHeaders({
+    'Content-Type': 'application/json'
+  });
+
+  if (config.debug) {
+    console.log('[mini-dynamic-renderer] sendChat', url, payload);
+  }
+
+  return new Promise(function (resolve, reject) {
+    uni.request({
+      url: url,
+      method: 'POST',
+      data: payload,
+      header: headers,
+      timeout: 120000,
+      success: function (res) {
+        var data = res.data || {};
+        if (res.statusCode >= 200 && res.statusCode < 300 && data.code !== 500) {
+          resolve(data);
+        } else {
+          reject(new Error(data.msg || data.message || ('请求失败 ' + res.statusCode)));
+        }
+      },
+      fail: function (err) {
+        reject(err || new Error('网络请求失败'));
+      }
+    });
+  });
+}
+
+function uploadImage(filePath) {
+  var config = configModule.getConfig();
+  var url = getFullUrl(config.uploadApiPath);
+  var headers = getHeaders();
+
+  if (config.debug) {
+    console.log('[mini-dynamic-renderer] uploadImage', url, filePath);
+  }
+
+  return new Promise(function (resolve, reject) {
+    uni.uploadFile({
+      url: url,
+      filePath: filePath,
+      name: 'file',
+      header: headers,
+      success: function (res) {
+        var data = res.data || '{}';
+        try {
+          data = typeof data === 'string' ? JSON.parse(data) : data;
+        } catch (e) {
+          reject(new Error('上传响应解析失败'));
+          return;
+        }
+        var dataObj = data.data || {};
+        var urlValue = data.url || dataObj.url || dataObj.fileName || dataObj || '';
+        if (urlValue && typeof urlValue === 'object' && urlValue.url) {
+          urlValue = urlValue.url;
+        }
+        if (urlValue) {
+          resolve(urlValue);
+        } else {
+          reject(new Error(data.msg || data.message || '上传失败'));
+        }
+      },
+      fail: function (err) {
+        reject(err || new Error('图片上传失败'));
+      }
+    });
+  });
+}
+
+module.exports = {
+  sendChat: sendChat,
+  uploadImage: uploadImage
+};