@syfei49/mini-dynamic-renderer 1.0.7 → 1.0.9

package/README.md

@@ -14,7 +14,7 @@ npm install @syfei49/mini-dynamic-renderer
 ```json
 {
   "dependencies": {
-    "@syfei49/mini-dynamic-renderer": "^1.0.7"
+    "@syfei49/mini-dynamic-renderer": "^1.0.9"
   }
 }
 ```
@@ -33,8 +33,10 @@ import { init } from '@syfei49/mini-dynamic-renderer'
 import { baseUrl } from '@/utils/request.js'
 
 init({
-  baseUrl: baseUrl,
-  chatApiPath: '/mini/ai/chat',
+  baseUrl: 'https://lygateway.ilyixy.com/prod-api',
+  uploadBaseUrl: 'https://jky.mall.ilyixy.com/prod-api',
+  appId: 'sass-mall-xxx',
+  chatApiPath: '/openapi/mini/ai/chat',
   uploadApiPath: '/mini/common/upload',
   getToken: () => uni.getStorageSync('token'),
   visiblePages: ['pages/user/user'],
@@ -89,11 +91,13 @@ function gotoPath(item) {
 
 | 字段 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| `baseUrl` | `string` | `''` | API 根地址 |
+| `baseUrl` | `string` | `''` | API 根地址，示例 `https://lygateway.ilyixy.com/prod-api` |
+| `uploadBaseUrl` | `string` | `''` | 上传接口基地址，默认与 `baseUrl` 一致，示例 `https://jky.mall.ilyixy.com/prod-api` |
+| `appId` | `string` | `''` | 应用标识，配置后每次请求自动带上请求头 `X-App-Id` |
 | `chatApiPath` | `string` | `'/mini/ai/chat'` | 对话接口路径 |
 | `uploadApiPath` | `string` | `'/mini/common/upload'` | 图片上传路径 |
 | `getToken` | `Function` | `() => ''` | 返回 Authorization |
-| `getHeaders` | `Function` | `() => ({})` | 额外请求头 |
+| `getHeaders` | `Function` | `() => ({})` | 额外请求头，与自动头合并 |
 | `visiblePages` | `string[]` | `['pages/user/user']` | 显示浮层图标的页面路由 |
 | `floatIcon` | `string` | 内置默认图标 | 浮层按钮图片 URL |
 | `requireLogin` | `boolean` | `true` | 打开前检查登录 |
@@ -101,6 +105,8 @@ function gotoPath(item) {
 | `debug` | `boolean` | `false` | 调试日志 |
 | `enableInterceptor` | `boolean` | `false` | 是否启用 wx.request 拦截（预留） |
 
+> 注意：`appId` 非空时，所有请求头都会自动注入 `X-App-Id: <appId>`。
+
 ## API
 
 | 方法 | 说明 |
@@ -115,7 +121,34 @@ function gotoPath(item) {
 
 ## 后端协议
 
-当需要用户上传分类图标时，后端可在 `answer` 中返回：
+### 1. 动态参数收集（`[RENDER_CONFIG]`）
+
+后端可在 `answer` 中返回 `[RENDER_CONFIG]{...}` 来让插件渲染一个动态表单，用户填写后自动作为 `inputs` 再次发起对话请求。
+
+```text
+请填写新增商品所需信息 [RENDER_CONFIG]{
+  "type": "form",
+  "title": "新增商品",
+  "description": "请补充以下字段",
+  "fields": [
+    { "name": "productName", "label": "商品名称", "type": "input" },
+    { "name": "price", "label": "价格", "type": "number" },
+    { "name": "category", "label": "分类", "type": "select", "options": [{ "label": "保健品", "value": "1" }] },
+    { "name": "cover", "label": "封面图", "type": "image" }
+  ]
+}
+```
+
+支持字段类型：
+
+- `input`：文本输入框
+- `number`：数字输入框
+- `select`：`picker` 选择器，需配 `options: [{ label, value }]`
+- `image`：拍照 / 相册选择并上传
+
+### 2. 分类图标引导（兼容 `[NEED_ICON]`）
+
+当需要用户上传分类图标时，后端仍可在 `answer` 中返回：
 
 ```text
 [NEED_ICON]{"name": "张三", "sort": 0, "msg": "请上传一张图片作为「张三」的分类图标"}

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

@@ -37,7 +37,39 @@
           </view>
         </scroll-view>
 
-        <view v-if="iconPickMode" class="ly-ai-icon-pick-bar">
+        <view v-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">
+            <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'">
+              <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>
@@ -91,6 +123,8 @@
   const scrollIntoView = ref('')
   const floatIconUrl = ref('')
   const keyboardHeight = ref(0)
+  const renderConfig = ref(null)
+  const formInputs = ref({})
 
   const canSend = computed(() => {
     return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
@@ -114,6 +148,21 @@
   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.type === 'select' && field.options && field.options.length) {
+          values[field.name] = field.defaultValue !== undefined ? field.defaultValue : field.options[0].value
+        } else {
+          values[field.name] = field.defaultValue !== undefined ? field.defaultValue : ''
+        }
+      })
+    }
+    formInputs.value = values
+  }
+
   function syncState(snapshot) {
     messages.value = snapshot.messages || []
     loading.value = snapshot.loading || false
@@ -122,7 +171,9 @@
     pendingIconCategory.value = snapshot.pendingIconCategory || null
     pendingImageUrl.value = snapshot.pendingImageUrl || ''
     inputText.value = snapshot.inputText || ''
+    renderConfig.value = snapshot.renderConfig || null
     quickQuestions.value = snapshot.quickQuestions || []
+    initFormInputs()
     scrollToBottom()
   }
 
@@ -208,6 +259,75 @@
     chatService.cancelIconPick()
   }
 
+  function getFieldOptions(field) {
+    var options = field.options || []
+    return {
+      labels: options.map(function (opt) {
+        return opt.label || opt.value
+      }),
+      values: options.map(function (opt) {
+        return opt.value
+      })
+    }
+  }
+
+  function getFieldIndex(field) {
+    var opts = getFieldOptions(field)
+    var index = opts.values.indexOf(formInputs.value[field.name])
+    return index >= 0 ? index : 0
+  }
+
+  function getFieldSelectedLabel(field) {
+    var index = getFieldIndex(field)
+    var opts = getFieldOptions(field)
+    var option = field.options ? field.options[index] : null
+    return option ? (option.label || option.value) : (opts.labels[index] || '请选择')
+  }
+
+  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 clearPendingImage() {
     chatService.clearPendingImage()
   }
@@ -554,4 +674,123 @@
   .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;
+  }
+
+  .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>

package/index.js

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

package/package.json

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

package/src/adapters/request.js

@@ -1,8 +1,9 @@
 var configModule = require('../config');
 
-function getFullUrl(path) {
+function getFullUrl(path, useUploadBase) {
   var config = configModule.getConfig();
-  var baseUrl = config.baseUrl || '';
+  var baseUrl = (useUploadBase && config.uploadBaseUrl) ? config.uploadBaseUrl : config.baseUrl;
+  baseUrl = baseUrl || '';
   var normalizedPath = (path || '').replace(/^\/+/, '/');
   if (baseUrl.slice(-1) === '/' && normalizedPath.indexOf('/') === 0) {
     return baseUrl + normalizedPath.slice(1);
@@ -20,6 +21,9 @@ function getHeaders(extraHeaders) {
   if (token) {
     headers.Authorization = token;
   }
+  if (config.appId) {
+    headers['X-App-Id'] = config.appId;
+  }
   if (extraHeaders) {
     Object.assign(headers, extraHeaders);
   }
@@ -32,16 +36,20 @@ function sendChat(payload) {
   var headers = getHeaders({
     'Content-Type': 'application/json'
   });
+  var data = Object.assign({}, payload || {});
+  if (!data.inputs) {
+    delete data.inputs;
+  }
 
   if (config.debug) {
-    console.log('[mini-dynamic-renderer] sendChat', url, payload);
+    console.log('[mini-dynamic-renderer] sendChat', url, data);
   }
 
   return new Promise(function (resolve, reject) {
     uni.request({
       url: url,
       method: 'POST',
-      data: payload,
+      data: data,
       header: headers,
       timeout: 120000,
       success: function (res) {
@@ -61,7 +69,7 @@ function sendChat(payload) {
 
 function uploadImage(filePath) {
   var config = configModule.getConfig();
-  var url = getFullUrl(config.uploadApiPath);
+  var url = getFullUrl(config.uploadApiPath, true);
   var headers = getHeaders();
 
   if (config.debug) {

package/src/chat/parser.js

@@ -48,8 +48,36 @@ function parseNeedIcon(answer) {
   }
 }
 
+function parseRenderConfig(answer) {
+  if (!answer || typeof answer !== 'string') {
+    return null;
+  }
+  var renderIdx = answer.indexOf('[RENDER_CONFIG]');
+  if (renderIdx !== -1) {
+    var jsonPart = answer.substring(renderIdx + '[RENDER_CONFIG]'.length);
+    var start = jsonPart.indexOf('{');
+    var end = jsonPart.lastIndexOf('}');
+    if (start === -1 || end === -1 || end < start) {
+      return null;
+    }
+    try {
+      return JSON.parse(jsonPart.substring(start, end + 1));
+    } catch (e) {
+      return null;
+    }
+  }
+  if (answer.indexOf('[NEED_ICON]') !== -1) {
+    return {
+      type: 'iconPicker',
+      fields: [{ name: 'imageUrl', label: '分类图标', type: 'image' }]
+    };
+  }
+  return null;
+}
+
 module.exports = {
   cleanImageUrl: cleanImageUrl,
   parseAssistantMessage: parseAssistantMessage,
-  parseNeedIcon: parseNeedIcon
+  parseNeedIcon: parseNeedIcon,
+  parseRenderConfig: parseRenderConfig
 };

package/src/chat/service.js

@@ -11,7 +11,10 @@ var state = {
   iconPickMode: false,
   pendingIconCategory: null,
   pendingImageUrl: '',
-  inputText: ''
+  inputText: '',
+  renderConfig: null,
+  pendingInputs: {},
+  lastUserQuery: ''
 };
 
 var quickQuestions = [
@@ -29,6 +32,9 @@ function reset() {
   state.pendingIconCategory = null;
   state.pendingImageUrl = '';
   state.inputText = '';
+  state.renderConfig = null;
+  state.pendingInputs = {};
+  state.lastUserQuery = '';
 }
 
 function ensureLogin() {
@@ -65,6 +71,8 @@ function getSnapshot() {
     pendingIconCategory: state.pendingIconCategory,
     pendingImageUrl: state.pendingImageUrl,
     inputText: state.inputText,
+    renderConfig: state.renderConfig,
+    pendingInputs: Object.assign({}, state.pendingInputs),
     quickQuestions: quickQuestions.slice()
   };
 }
@@ -86,6 +94,7 @@ function handleAssistantAnswer(answer) {
       sort: needIcon.sort
     };
     state.iconPickMode = true;
+    state.renderConfig = null;
     state.messages.push({
       role: 'assistant',
       content: needIcon.msg,
@@ -94,8 +103,19 @@ function handleAssistantAnswer(answer) {
     notifyUpdate();
     return;
   }
+  var renderConfig = parser.parseRenderConfig(answer);
+  if (renderConfig) {
+    state.iconPickMode = false;
+    state.pendingIconCategory = null;
+    state.renderConfig = renderConfig;
+    var cleanedAnswer = answer.replace(/\[RENDER_CONFIG\]\{[\s\S]*\}/, '').replace(/\[NEED_ICON\]\{[\s\S]*\}/, '').trim();
+    state.messages.push(createAssistantMessage(cleanedAnswer || '请填写以下信息'));
+    notifyUpdate();
+    return;
+  }
   state.iconPickMode = false;
   state.pendingIconCategory = null;
+  state.renderConfig = null;
   state.messages.push(createAssistantMessage(answer));
   notifyUpdate();
 }
@@ -206,23 +226,11 @@ function sendQuick(text) {
   return handleSend();
 }
 
-function sendMessage(query, imageUrl, displayContent) {
-  if (!ensureLogin()) {
-    return Promise.resolve();
-  }
-  state.messages.push({
-    role: 'user',
-    content: displayContent || query,
-    imageUrls: imageUrl ? [imageUrl] : []
-  });
+function doSendChat(payload) {
   state.loading = true;
   notifyUpdate();
 
-  return requestAdapter.sendChat({
-    conversationId: state.conversationId || undefined,
-    query: query || undefined,
-    imageUrl: imageUrl || undefined
-  })
+  return requestAdapter.sendChat(payload)
     .then(function (res) {
       var data = res && res.data ? res.data : res;
       if (data.conversationId) {
@@ -238,10 +246,63 @@ function sendMessage(query, imageUrl, displayContent) {
     });
 }
 
+function sendMessage(query, imageUrl, displayContent) {
+  if (!ensureLogin()) {
+    return Promise.resolve();
+  }
+  state.lastUserQuery = displayContent || query || '';
+  state.messages.push({
+    role: 'user',
+    content: displayContent || query,
+    imageUrls: imageUrl ? [imageUrl] : []
+  });
+
+  return doSendChat({
+    conversationId: state.conversationId || undefined,
+    query: query || undefined,
+    imageUrl: imageUrl || undefined,
+    inputs: state.pendingInputs || {}
+  }).then(function () {
+    state.pendingInputs = {};
+  });
+}
+
+function submitInputs(inputs) {
+  inputs = inputs || {};
+  var hasOwn = Object.prototype.hasOwnProperty;
+  for (var key in inputs) {
+    if (hasOwn.call(inputs, key)) {
+      state.pendingInputs[key] = inputs[key];
+    }
+  }
+  state.renderConfig = null;
+  state.pendingImageUrl = '';
+  notifyUpdate();
+
+  if (!ensureLogin()) {
+    return Promise.resolve();
+  }
+
+  return doSendChat({
+    conversationId: state.conversationId || undefined,
+    query: state.lastUserQuery || undefined,
+    inputs: state.pendingInputs
+  }).then(function () {
+    state.pendingInputs = {};
+  });
+}
+
+function cancelForm() {
+  state.renderConfig = null;
+  state.pendingInputs = {};
+  state.pendingImageUrl = '';
+  notifyUpdate();
+}
+
 function handleSend() {
   var query = (state.inputText || '').trim();
   var imageUrl = state.pendingImageUrl;
-  if ((!query && !imageUrl) || state.loading || state.uploading || state.iconPickMode) {
+  if ((!query && !imageUrl) || state.loading || state.uploading || state.iconPickMode || state.renderConfig) {
     return Promise.resolve();
   }
   var displayContent = query || (imageUrl ? '[图片]' : '');
@@ -272,6 +333,8 @@ module.exports = {
   chooseImage: chooseImage,
   pickCategoryIcon: pickCategoryIcon,
   cancelIconPick: cancelIconPick,
+  submitInputs: submitInputs,
+  cancelForm: cancelForm,
   sendQuick: sendQuick,
   handleSend: handleSend,
   openConversation: openConversation,

package/src/config.js

@@ -1,5 +1,7 @@
 var DEFAULT_CONFIG = {
   baseUrl: '',
+  uploadBaseUrl: '',
+  appId: '',
   chatApiPath: '/mini/ai/chat',
   uploadApiPath: '/mini/common/upload',
   getToken: function () {