@syfei49/mini-dynamic-renderer 1.0.3 → 1.0.7

package/README.md

@@ -1,6 +1,6 @@
 # @syfei49/mini-dynamic-renderer
 
-uni-app 浮层 AI 客服插件（v1.0.3）。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
+uni-app 浮层 AI 客服插件。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
 
 ## 安装
 
@@ -9,54 +9,80 @@ cd your-uniapp-project
 npm install @syfei49/mini-dynamic-renderer
 ```
 
+本地调试可指向 tar 包：
+
+```json
+{
+  "dependencies": {
+    "@syfei49/mini-dynamic-renderer": "^1.0.7"
+  }
+}
+```
+
 微信开发者工具 → **工具** → **构建 npm**
 
 ## 接入
 
 ### 1. App.vue 初始化
 
+只负责注入配置，不渲染 UI（微信小程序 `App.vue` 的 template 不会显示）。
+
 ```vue
 <script setup>
 import { init } from '@syfei49/mini-dynamic-renderer'
+import { baseUrl } from '@/utils/request.js'
 
 init({
-  baseUrl: 'https://your-api.com/prod-api',
+  baseUrl: baseUrl,
   chatApiPath: '/mini/ai/chat',
   uploadApiPath: '/mini/common/upload',
   getToken: () => uni.getStorageSync('token'),
   visiblePages: ['pages/user/user'],
   requireLogin: true,
-  loginPage: '/pages/login/login?noauto=1'
+  loginPage: '/pages/login/login?noauto=1',
+  debug: process.env.NODE_ENV === 'development'
 })
 </script>
 ```
 
-### 2. 在需要显示浮层的页面引入组件
+### 2. 目标页面引入组件
 
-以 `pages/user/user.vue` 为例：
+以 `pages/user/user.vue` 为例，模板末尾挂载一次：
 
 ```vue
-<script setup>
-import LyAiAssistant from '@syfei49/mini-dynamic-renderer/components/ly-ai-assistant/ly-ai-assistant.vue'
-import { openChat } from '@syfei49/mini-dynamic-renderer'
-</script>
-
 <template>
-  <view>
-    <!-- 页面内容 -->
+  <view class="container">
+    <!-- 页面原有内容 -->
+    <lyTabbar server="sc"></lyTabbar>
     <LyAiAssistant />
   </view>
 </template>
+
+<script setup>
+import LyAiAssistant from '@syfei49/mini-dynamic-renderer/components/ly-ai-assistant/ly-ai-assistant.vue'
+import { openChat } from '@syfei49/mini-dynamic-renderer'
+</script>
 ```
 
-> 微信小程序 `App.vue` 的 template 不会被渲染，所以浮层组件需要放在具体页面里。
+### 3. 用 openChat 打开抽屉
 
-### 2. 在任意页面打开抽屉（可选）
+把旧入口从 `uni.navigateTo('/pages/user/aiChat')` 改为直接打开抽屉：
 
 ```javascript
-import { openChat } from '@syfei49/mini-dynamic-renderer'
-
-openChat()
+function gotoPath(item) {
+  if (item.title === '分销中心') {
+    handleDistributionCenter()
+    return
+  }
+
+  if (item.title === 'AI客服') {
+    openChat()
+    return
+  }
+
+  // 其他页面保持原来的 uni.navigateTo 逻辑
+  uni.navigateTo({ url: item.path })
+}
 ```
 
 ## 配置项
@@ -87,8 +113,18 @@ openChat()
 | `uninstall()` | 卸载拦截器，恢复原始 `wx.request` |
 | `parseRenderConfig(data)` | 解析响应中的渲染配置（预留） |
 
+## 后端协议
+
+当需要用户上传分类图标时，后端可在 `answer` 中返回：
+
+```text
+[NEED_ICON]{"name": "张三", "sort": 0, "msg": "请上传一张图片作为「张三」的分类图标"}
+```
+
+插件会弹出「拍照 / 从相册选择 / 取消」选择条，并在上传后自动把图标 URL 拼回对话继续请求。
+
 ## 版本说明
 
-- **v1.0.3**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力、文档拆分
+- **v1.0.x**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力、文档拆分
 - v1.0.0：wx.request 拦截 + hello world 弹窗（测试版）
 - 后续版本将根据后端 `renderConfig` 动态渲染更多组件类型

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

@@ -5,8 +5,8 @@
       <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 v-if="opened" class="ly-ai-overlay" @click="onOverlayClick">
+      <view class="ly-ai-drawer" :style="drawerStyle" @click.stop>
         <view class="ly-ai-header">
           <text class="ly-ai-title">AI 智能客服</text>
           <view class="ly-ai-close" @click="closeChat">×</view>
@@ -55,7 +55,7 @@
           <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" />
+              :disabled="loading || uploading" :adjust-position="false" :hold-keyboard="true" @input="onInput" @confirm="handleSend" />
             <view class="ly-ai-send-btn" :class="{ disabled: loading || uploading || !canSend }" @click="handleSend">发送</view>
           </view>
         </template>
@@ -90,6 +90,7 @@
   const quickQuestions = ref([])
   const scrollIntoView = ref('')
   const floatIconUrl = ref('')
+  const keyboardHeight = ref(0)
 
   const canSend = computed(() => {
     return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
@@ -102,9 +103,16 @@
     }
   })
 
+  const drawerStyle = computed(() => {
+    return {
+      bottom: keyboardHeight.value + 'px'
+    }
+  })
+
   let updateHandler = null
   let openHandler = null
   let closeHandler = null
+  let keyboardHandler = null
 
   function syncState(snapshot) {
     messages.value = snapshot.messages || []
@@ -144,14 +152,23 @@
       return
     }
     opened.value = true
+    keyboardHeight.value = 0
     scrollToBottom()
   }
 
   function closeChat() {
     opened.value = false
+    keyboardHeight.value = 0
     chatService.closeConversation()
   }
 
+  function onOverlayClick(e) {
+    if (e && e.target && e.currentTarget && e.target !== e.currentTarget) {
+      return
+    }
+    closeChat()
+  }
+
   function onInput(e) {
     inputText.value = e.detail.value
     chatService.setInputText(e.detail.value)
@@ -214,14 +231,25 @@
     }
     openHandler = function () {
       opened.value = true
+      keyboardHeight.value = 0
       scrollToBottom()
     }
     closeHandler = function () {
       opened.value = false
+      keyboardHeight.value = 0
+    }
+    keyboardHandler = function (res) {
+      keyboardHeight.value = res.height || 0
+      if (keyboardHeight.value > 0) {
+        scrollToBottom()
+      }
     }
     chatService.onUpdate(updateHandler)
     chatService.onOpen(openHandler)
     chatService.onClose(closeHandler)
+    if (typeof uni.onKeyboardHeightChange === 'function') {
+      uni.onKeyboardHeightChange(keyboardHandler)
+    }
     syncState(chatService.getSnapshot())
     checkVisible()
   })
@@ -236,6 +264,9 @@
     if (closeHandler) {
       chatService.offClose(closeHandler)
     }
+    if (keyboardHandler && typeof uni.offKeyboardHeightChange === 'function') {
+      uni.offKeyboardHeightChange(keyboardHandler)
+    }
   })
 
   onShow(() => {
@@ -276,18 +307,20 @@
     bottom: 0;
     z-index: 10000;
     background: rgba(0, 0, 0, 0.4);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
   }
 
   .ly-ai-drawer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
     height: 82vh;
     background: #f5f6f8;
     border-radius: 32rpx 32rpx 0 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    transition: bottom 0.2s ease;
   }
 
   .ly-ai-header {
@@ -322,6 +355,7 @@
   .ly-ai-list {
     flex: 1;
     padding: 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
     box-sizing: border-box;
   }
 

package/index.js

@@ -5,7 +5,7 @@ var chatService = require('./src/chat/service');
 var configModule = require('./src/config');
 
 module.exports = {
-  version: '1.0.1',
+  version: '1.0.7',
   init: initModule.init,
   getConfig: configModule.getConfig,
   isInitialized: initModule.isInitialized,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syfei49/mini-dynamic-renderer",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "uni-app 浮层 AI 客服插件",
   "main": "index.js",
   "files": [

package/src/chat/service.js

@@ -223,7 +223,8 @@ function sendMessage(query, imageUrl, displayContent) {
     query: query || undefined,
     imageUrl: imageUrl || undefined
   })
-    .then(function (data) {
+    .then(function (res) {
+      var data = res && res.data ? res.data : res;
       if (data.conversationId) {
         state.conversationId = data.conversationId;
       }