@syfei49/mini-dynamic-renderer 1.0.7 → 1.2.0

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

@@ -1,557 +1,916 @@
-<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="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>
-        </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" :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>
-      </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 keyboardHeight = ref(0)
-
-  const canSend = computed(() => {
-    return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
-  })
-
-  const floatStyle = computed(() => {
-    return {
-      right: '32rpx',
-      bottom: '180rpx'
-    }
-  })
-
-  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 || []
-    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
-    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)
-  }
-
-  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
-      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()
-  })
-
-  onUnmounted(() => {
-    if (updateHandler) {
-      chatService.offUpdate(updateHandler)
-    }
-    if (openHandler) {
-      chatService.offOpen(openHandler)
-    }
-    if (closeHandler) {
-      chatService.offClose(closeHandler)
-    }
-    if (keyboardHandler && typeof uni.offKeyboardHeightChange === 'function') {
-      uni.offKeyboardHeightChange(keyboardHandler)
-    }
-  })
-
-  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);
-  }
-
-  .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 {
-    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;
-    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-    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>
+<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="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>
+        </view>
+
+        <view class="ly-ai-body">
+          <scroll-view class="ly-ai-list" scroll-y :scroll-into-view="scrollIntoView" scroll-with-animation
+            :show-scrollbar="false">
+          <view v-if="messages.length === 0" class="ly-ai-welcome">
+            <view class="ly-ai-welcome-title">AI 智能客服</view>
+            <text class="ly-ai-welcome-desc" selectable user-select>我可以帮你新增商品分类（一/二/三级）或新增商品。信息不全时会弹出表单让你填写，不会自动猜测名称或分类。长按消息可复制。</text>
+            <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" selectable user-select
+                @longpress="copyMessage(item.content)">{{ 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>
+
+        <view class="ly-ai-footer">
+        <view v-if="renderConfig && renderConfig.type === 'confirm'" class="ly-ai-form-bar">
+          <view v-if="renderConfig.title" class="ly-ai-form-title">{{ renderConfig.title }}</view>
+          <view class="ly-ai-form-desc">{{ renderConfig.message || renderConfig.description || '请确认是否继续' }}</view>
+          <view class="ly-ai-form-actions">
+            <view class="ly-ai-form-btn confirm" :class="{ disabled: loading || uploading }" @click="submitConfirm(true)">确认</view>
+            <view class="ly-ai-form-btn cancel" :class="{ disabled: loading || uploading }" @click="submitConfirm(false)">取消</view>
+          </view>
+        </view>
+
+        <view v-else-if="renderConfig" class="ly-ai-form-bar">
+          <view v-if="renderConfig.title" class="ly-ai-form-title">{{ renderConfig.title }}</view>
+          <view v-if="renderConfig.description" class="ly-ai-form-desc">{{ renderConfig.description }}</view>
+          <view v-for="(field, fIndex) in renderConfig.fields" :key="fIndex" class="ly-ai-form-item" v-show="field.type !== 'hidden'">
+            <text class="ly-ai-form-label">{{ field.label || field.name }}</text>
+            <template v-if="field.type === 'input' || field.type === 'number'">
+              <input class="ly-ai-form-input" :type="field.type === 'number' ? 'number' : 'text'"
+                :value="formInputs[field.name]" :placeholder="field.placeholder || '请输入' + (field.label || field.name)"
+                :disabled="loading || uploading" @input="onFormInput($event, field.name)" />
+            </template>
+            <template v-else-if="field.type === 'select' || field.type === 'treeSelect'">
+              <picker class="ly-ai-form-picker" mode="selector" :range="getFieldOptions(field).labels"
+                :value="getFieldIndex(field)" :disabled="loading || uploading" @change="onFormSelect($event, field)">
+                <view class="ly-ai-form-picker-text">{{ getFieldSelectedLabel(field) }}</view>
+              </picker>
+            </template>
+            <template v-else-if="field.type === 'image'">
+              <view v-if="formInputs[field.name]" class="ly-ai-form-image-wrap">
+                <image class="ly-ai-form-image" :src="formInputs[field.name]" mode="aspectFill"
+                  @click="previewImage(formInputs[field.name], [formInputs[field.name]])" />
+                <view class="ly-ai-form-image-remove" @click="onFormImageRemove(field.name)">×</view>
+              </view>
+              <view v-else class="ly-ai-form-image-btn" :class="{ disabled: loading || uploading }"
+                @click="onFormImageChoose(field.name)">拍照 / 相册</view>
+            </template>
+          </view>
+          <view class="ly-ai-form-actions">
+            <view class="ly-ai-form-btn confirm" :class="{ disabled: loading || uploading }" @click="submitForm">确认</view>
+            <view class="ly-ai-form-btn cancel" :class="{ disabled: loading || uploading }" @click="cancelForm">取消</view>
+          </view>
+        </view>
+
+        <view v-else-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" :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>
+        </view>
+      </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 keyboardHeight = ref(0)
+  const renderConfig = ref(null)
+  const formInputs = ref({})
+  let lastFormConfigKey = ''
+
+  function getRenderConfigKey(cfg) {
+    if (!cfg) {
+      return ''
+    }
+    return JSON.stringify({
+      type: cfg.type,
+      title: cfg.title,
+      message: cfg.message,
+      fields: cfg.fields
+    })
+  }
+
+  const canSend = computed(() => {
+    return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
+  })
+
+  const floatStyle = computed(() => {
+    return {
+      right: '32rpx',
+      bottom: '180rpx'
+    }
+  })
+
+  const drawerStyle = computed(() => {
+    return {
+      bottom: keyboardHeight.value + 'px'
+    }
+  })
+
+  let updateHandler = null
+  let openHandler = null
+  let closeHandler = null
+  let keyboardHandler = null
+
+  function initFormInputs() {
+    var cfg = renderConfig.value
+    var values = {}
+    if (cfg && cfg.fields && cfg.fields.length) {
+      cfg.fields.forEach(function (field) {
+        if (field.name === 'confirmed') {
+          values[field.name] = field.value === true || field.value === 'true' ? 'true' : 'false'
+        } else if (field.value !== undefined && field.value !== '') {
+          values[field.name] = field.value
+        } else if ((field.type === 'select' || field.type === 'treeSelect') && field.options && field.options.length) {
+          values[field.name] = field.defaultValue !== undefined ? field.defaultValue : ''
+        } else {
+          values[field.name] = field.defaultValue !== undefined ? field.defaultValue : ''
+        }
+      })
+    }
+    formInputs.value = values
+  }
+
+  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 || ''
+    var nextCfg = snapshot.renderConfig || null
+    var nextKey = getRenderConfigKey(nextCfg)
+    renderConfig.value = nextCfg
+    quickQuestions.value = snapshot.quickQuestions || []
+    if (!nextCfg) {
+      lastFormConfigKey = ''
+      formInputs.value = {}
+    } else if (nextKey !== lastFormConfigKey) {
+      lastFormConfigKey = nextKey
+      initFormInputs()
+    }
+    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
+    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)
+  }
+
+  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 flattenTreeOptions(options, prefix) {
+    var result = []
+    prefix = prefix || ''
+    ;(options || []).forEach(function (opt) {
+      var label = prefix ? (prefix + ' / ' + (opt.label || opt.value)) : (opt.label || opt.value)
+      var children = opt.children || opt.subCategories || []
+      if (children.length) {
+        result = result.concat(flattenTreeOptions(children, label))
+      } else {
+        result.push({
+          label: label,
+          value: opt.value
+        })
+      }
+    })
+    return result
+  }
+
+  function getFieldOptions(field) {
+    var options = field.type === 'treeSelect'
+      ? flattenTreeOptions(field.options || [])
+      : (field.options || [])
+    return {
+      labels: options.map(function (opt) {
+        return opt.label || opt.value
+      }),
+      values: options.map(function (opt) {
+        return opt.value
+      })
+    }
+  }
+
+  function isSameFieldValue(a, b) {
+    if (a === undefined || a === null || a === '') {
+      return false
+    }
+    return String(a) === String(b)
+  }
+
+  function getFieldIndex(field) {
+    var opts = getFieldOptions(field)
+    var current = formInputs.value[field.name]
+    for (var i = 0; i < opts.values.length; i++) {
+      if (isSameFieldValue(opts.values[i], current)) {
+        return i
+      }
+    }
+    return 0
+  }
+
+  function getFieldSelectedLabel(field) {
+    var opts = getFieldOptions(field)
+    var current = formInputs.value[field.name]
+    for (var i = 0; i < opts.values.length; i++) {
+      if (isSameFieldValue(opts.values[i], current)) {
+        return opts.labels[i] || '请选择'
+      }
+    }
+    return '请选择'
+  }
+
+  function onFormInput(e, name) {
+    formInputs.value[name] = e.detail.value
+  }
+
+  function onFormSelect(e, field) {
+    var index = e.detail.value
+    var opts = getFieldOptions(field)
+    formInputs.value[field.name] = opts.values[index]
+  }
+
+  function onFormImageChoose(name) {
+    chatService.chooseImage()
+      .then(function (imageUrl) {
+        formInputs.value[name] = imageUrl
+      })
+      .catch(function (error) {
+        uni.showToast({
+          title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
+          icon: 'none'
+        })
+      })
+  }
+
+  function onFormImageRemove(name) {
+    formInputs.value[name] = ''
+  }
+
+  function submitForm() {
+    chatService.submitInputs(formInputs.value)
+      .then(function () {
+        scrollToBottom()
+      })
+      .catch(function (error) {
+        uni.showToast({
+          title: error && (error.message || error.msg) ? (error.message || error.msg) : '提交失败',
+          icon: 'none'
+        })
+      })
+  }
+
+  function cancelForm() {
+    chatService.cancelForm()
+  }
+
+  function submitConfirm(confirmed) {
+    chatService.submitConfirm(confirmed).then(function () {
+      scrollToBottom()
+    })
+  }
+
+  function clearPendingImage() {
+    chatService.clearPendingImage()
+  }
+
+  function copyMessage(content) {
+    var text = (content || '').trim()
+    if (!text) {
+      return
+    }
+    uni.setClipboardData({
+      data: text,
+      success: function () {
+        uni.showToast({ title: '已复制', icon: 'none' })
+      }
+    })
+  }
+
+  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
+      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()
+  })
+
+  onUnmounted(() => {
+    if (updateHandler) {
+      chatService.offUpdate(updateHandler)
+    }
+    if (openHandler) {
+      chatService.offOpen(openHandler)
+    }
+    if (closeHandler) {
+      chatService.offClose(closeHandler)
+    }
+    if (keyboardHandler && typeof uni.offKeyboardHeightChange === 'function') {
+      uni.offKeyboardHeightChange(keyboardHandler)
+    }
+  })
+
+  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);
+  }
+
+  .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 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 32rpx;
+    background: #fff;
+    position: relative;
+    border-bottom: 1rpx solid #eee;
+    flex-shrink: 0;
+  }
+
+  .ly-ai-body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .ly-ai-footer {
+    flex-shrink: 0;
+    background: #fff;
+  }
+
+  .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 {
+    height: 100%;
+    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;
+    word-break: break-word;
+    user-select: text;
+    -webkit-user-select: text;
+  }
+
+  .ly-ai-welcome-desc {
+    user-select: text;
+    -webkit-user-select: text;
+  }
+
+  .ly-ai-icon-pick-bar {
+    padding: 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    border-top: 1rpx solid #eee;
+    flex-shrink: 0;
+  }
+
+  .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;
+    flex-shrink: 0;
+  }
+
+  .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;
+    flex-shrink: 0;
+  }
+
+  .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;
+  }
+
+  .ly-ai-form-bar {
+    padding: 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    border-top: 1rpx solid #eee;
+    flex-shrink: 0;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+
+  .ly-ai-form-title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 12rpx;
+  }
+
+  .ly-ai-form-desc {
+    font-size: 26rpx;
+    color: #666;
+    line-height: 1.5;
+    margin-bottom: 24rpx;
+  }
+
+  .ly-ai-form-item {
+    margin-bottom: 24rpx;
+  }
+
+  .ly-ai-form-label {
+    display: block;
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 12rpx;
+  }
+
+  .ly-ai-form-input {
+    height: 72rpx;
+    background: #f5f6f8;
+    border-radius: 12rpx;
+    padding: 0 24rpx;
+    font-size: 28rpx;
+    color: #333;
+  }
+
+  .ly-ai-form-picker {
+    height: 72rpx;
+    background: #f5f6f8;
+    border-radius: 12rpx;
+    padding: 0 24rpx;
+    display: flex;
+    align-items: center;
+  }
+
+  .ly-ai-form-picker-text {
+    font-size: 28rpx;
+    color: #333;
+  }
+
+  .ly-ai-form-image-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .ly-ai-form-image {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 12rpx;
+  }
+
+  .ly-ai-form-image-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-form-image-btn {
+    width: 200rpx;
+    height: 160rpx;
+    line-height: 160rpx;
+    text-align: center;
+    background: #f5f6f8;
+    color: #666;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+  }
+
+  .ly-ai-form-actions {
+    display: flex;
+    gap: 16rpx;
+    margin-top: 12rpx;
+  }
+
+  .ly-ai-form-btn {
+    flex: 1;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+  }
+
+  .ly-ai-form-btn.confirm {
+    background: #f84616;
+    color: #fff;
+  }
+
+  .ly-ai-form-btn.cancel {
+    background: #f5f6f8;
+    color: #666;
+  }
+
+  .ly-ai-form-btn.disabled,
+  .ly-ai-form-image-btn.disabled {
+    opacity: 0.5;
+  }
+</style>