@syfei49/mini-dynamic-renderer 1.0.2 → 1.0.4

package/README.md

@@ -1,6 +1,6 @@
 # @syfei49/mini-dynamic-renderer
 
-uni-app 浮层 AI 客服插件（v1.0.1）。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
+uni-app 浮层 AI 客服插件（v1.0.4）。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
 
 ## 安装
 
@@ -13,11 +13,10 @@ npm install @syfei49/mini-dynamic-renderer
 
 ## 接入
 
-### 1. App.vue 初始化并挂载组件
+### 1. App.vue 初始化
 
 ```vue
 <script setup>
-import LyAiAssistant from '@syfei49/mini-dynamic-renderer/components/ly-ai-assistant/ly-ai-assistant.vue'
 import { init } from '@syfei49/mini-dynamic-renderer'
 
 init({
@@ -30,6 +29,17 @@ init({
   loginPage: '/pages/login/login?noauto=1'
 })
 </script>
+```
+
+### 2. 在需要显示浮层的页面引入组件
+
+以 `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>
@@ -39,7 +49,7 @@ init({
 </template>
 ```
 
-> `LyAiAssistant` 只需在 App.vue 全局挂载一次。
+> 微信小程序 `App.vue` 的 template 不会被渲染，所以浮层组件需要放在具体页面里。
 
 ### 2. 在任意页面打开抽屉（可选）
 
@@ -79,6 +89,6 @@ openChat()
 
 ## 版本说明
 
-- **v1.0.1**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力、文档拆分
+- **v1.0.4**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力、文档拆分
 - v1.0.0：wx.request 拦截 + hello world 弹窗（测试版）
 - 后续版本将根据后端 `renderConfig` 动态渲染更多组件类型

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

@@ -6,7 +6,7 @@
     </view>
 
     <view v-if="opened" class="ly-ai-overlay" @click.self="closeChat">
-      <view class="ly-ai-drawer">
+      <view class="ly-ai-drawer" :style="drawerStyle">
         <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,11 +152,13 @@
       return
     }
     opened.value = true
+    keyboardHeight.value = 0
     scrollToBottom()
   }
 
   function closeChat() {
     opened.value = false
+    keyboardHeight.value = 0
     chatService.closeConversation()
   }
 
@@ -214,14 +224,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 +257,9 @@
     if (closeHandler) {
       chatService.offClose(closeHandler)
     }
+    if (keyboardHandler && typeof uni.offKeyboardHeightChange === 'function') {
+      uni.offKeyboardHeightChange(keyboardHandler)
+    }
   })
 
   onShow(() => {
@@ -276,18 +300,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 +348,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.3',
   init: initModule.init,
   getConfig: configModule.getConfig,
   isInitialized: initModule.isInitialized,

package/package.json

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