@syfei49/mini-dynamic-renderer 1.0.0 → 1.0.2

package/README.md

@@ -1,102 +1,84 @@
-# @syfei49/mini-dynamic-renderer
-
-微信小程序对话接口动态渲染 SDK（v1.0.0 测试版）。
-
-引入后自动注册 `wx.request` 拦截器；当匹配的接口返回成功（`statusCode === 200`）时，在当前页面弹出 `hello world` 测试弹窗。
-
-## 安装
-
-```bash
-cd your-miniprogram-project
-npm install @syfei49/mini-dynamic-renderer
-```
-
-## 接入
-
-### 1. 在 `app.js` 顶部引入（自动注册拦截器）
-
-```javascript
-require('@syfei49/mini-dynamic-renderer');
-```
-
-### 2. 微信开发者工具构建 npm
-
-打开微信开发者工具 → **工具** → **构建 npm**
-
-### 3. 正常发起请求即可触发弹窗
-
-```javascript
-wx.request({
-  url: 'https://your-domain.com/api/chat',
-  method: 'POST',
-  data: { query: '你好' },
-  success(res) {
-    // 原有业务逻辑不变
-  }
-});
-```
-
-## 配置（可选）
-
-如需自定义拦截规则，可在 `app.js` 中显式初始化：
-
-```javascript
-const sdk = require('@syfei49/mini-dynamic-renderer');
-
-sdk.init({
-  // URL 匹配规则：字符串为包含匹配，也支持 RegExp，'*' 表示全部
-  urlPatterns: ['/api/chat'],
-  debug: true
-});
-```
-
-### 配置项
-
-| 字段 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `urlPatterns` | `Array<string\|RegExp>` | `['*']` | 需要拦截的 URL 规则 |
-| `debug` | `boolean` | `false` | 是否输出调试日志 |
-
-## API
-
-| 方法 | 说明 |
-|------|------|
-| `init(config?)` | 初始化并注册拦截器 |
-| `getConfig()` | 获取当前配置 |
-| `isInitialized()` | 是否已初始化 |
-| `uninstall()` | 卸载拦截器，恢复原始 `wx.request` |
-| `parseRenderConfig(data)` | 解析响应中的渲染配置（预留） |
-
-## 发布到 npm
-
-在包根目录 `code/` 下执行：
-
-```bash
-# 1. 确认已登录
-npm whoami
-
-# 2. 确认 registry
-npm config get registry
-# 应为 https://registry.npmjs.org/
-
-# 3. 检查包名是否可用（404 表示可用）
-npm view @syfei49/mini-dynamic-renderer
-
-# 4. 预览将要发布的文件
-npm pack --dry-run
-
-# 5. 正式发布（作用域包首次需 public）
-npm publish --access public
-```
-
-后续版本更新：
-
-```bash
-npm version patch   # 或 minor / major
-npm publish --access public
-```
-
-## 版本说明
-
-- **v1.0.0**：拦截 `wx.request` 成功响应，弹出 `hello world` 测试弹窗
-- 后续版本将支持根据后端 `renderConfig` 动态渲染图片上传、文本等组件
+# @syfei49/mini-dynamic-renderer
+
+uni-app 浮层 AI 客服插件（v1.0.1）。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
+
+## 安装
+
+```bash
+cd your-uniapp-project
+npm install @syfei49/mini-dynamic-renderer
+```
+
+微信开发者工具 → **工具** → **构建 npm**
+
+## 接入
+
+### 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({
+  baseUrl: 'https://your-api.com/prod-api',
+  chatApiPath: '/mini/ai/chat',
+  uploadApiPath: '/mini/common/upload',
+  getToken: () => uni.getStorageSync('token'),
+  visiblePages: ['pages/user/user'],
+  requireLogin: true,
+  loginPage: '/pages/login/login?noauto=1'
+})
+</script>
+
+<template>
+  <view>
+    <!-- 页面内容 -->
+    <LyAiAssistant />
+  </view>
+</template>
+```
+
+> `LyAiAssistant` 只需在 App.vue 全局挂载一次。
+
+### 2. 在任意页面打开抽屉（可选）
+
+```javascript
+import { openChat } from '@syfei49/mini-dynamic-renderer'
+
+openChat()
+```
+
+## 配置项
+
+| 字段 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `baseUrl` | `string` | `''` | API 根地址 |
+| `chatApiPath` | `string` | `'/mini/ai/chat'` | 对话接口路径 |
+| `uploadApiPath` | `string` | `'/mini/common/upload'` | 图片上传路径 |
+| `getToken` | `Function` | `() => ''` | 返回 Authorization |
+| `getHeaders` | `Function` | `() => ({})` | 额外请求头 |
+| `visiblePages` | `string[]` | `['pages/user/user']` | 显示浮层图标的页面路由 |
+| `floatIcon` | `string` | 内置默认图标 | 浮层按钮图片 URL |
+| `requireLogin` | `boolean` | `true` | 打开前检查登录 |
+| `loginPage` | `string` | `'/pages/login/login'` | 未登录跳转页 |
+| `debug` | `boolean` | `false` | 调试日志 |
+| `enableInterceptor` | `boolean` | `false` | 是否启用 wx.request 拦截（预留） |
+
+## API
+
+| 方法 | 说明 |
+|------|------|
+| `init(config?)` | 初始化插件 |
+| `openChat()` | 打开聊天抽屉 |
+| `closeChat()` | 关闭聊天抽屉 |
+| `getConfig()` | 获取当前配置 |
+| `isInitialized()` | 是否已初始化 |
+| `uninstall()` | 卸载拦截器，恢复原始 `wx.request` |
+| `parseRenderConfig(data)` | 解析响应中的渲染配置（预留） |
+
+## 版本说明
+
+- **v1.0.1**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力、文档拆分
+- v1.0.0：wx.request 拦截 + hello world 弹窗（测试版）
+- 后续版本将根据后端 `renderConfig` 动态渲染更多组件类型

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>