@syfei49/mini-dynamic-renderer 1.0.7 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +181 -130
  2. package/components/ly-ai-assistant/ly-ai-assistant.vue +916 -557
  3. package/index.js +16 -16
  4. package/package.json +27 -27
  5. package/src/adapters/request.js +148 -106
  6. package/src/chat/parser.js +152 -55
  7. package/src/chat/service.js +497 -297
  8. package/src/config.js +54 -51
  9. package/src/event.js +43 -43
  10. package/src/handler.js +43 -43
  11. package/src/init.js +38 -38
  12. package/src/interceptor.js +105 -105
package/README.md CHANGED
@@ -1,130 +1,181 @@
1
- # @syfei49/mini-dynamic-renderer
2
-
3
- uni-app 浮层 AI 客服插件。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
4
-
5
- ## 安装
6
-
7
- ```bash
8
- cd your-uniapp-project
9
- npm install @syfei49/mini-dynamic-renderer
10
- ```
11
-
12
- 本地调试可指向 tar 包：
13
-
14
- ```json
15
- {
16
- "dependencies": {
17
- "@syfei49/mini-dynamic-renderer": "^1.0.7"
18
- }
19
- }
20
- ```
21
-
22
- 微信开发者工具 → **工具** → **构建 npm**
23
-
24
- ## 接入
25
-
26
- ### 1. App.vue 初始化
27
-
28
- 只负责注入配置，不渲染 UI（微信小程序 `App.vue` 的 template 不会显示）。
29
-
30
- ```vue
31
- <script setup>
32
- import { init } from '@syfei49/mini-dynamic-renderer'
33
- import { baseUrl } from '@/utils/request.js'
34
-
35
- init({
36
- baseUrl: baseUrl,
37
- chatApiPath: '/mini/ai/chat',
38
- uploadApiPath: '/mini/common/upload',
39
- getToken: () => uni.getStorageSync('token'),
40
- visiblePages: ['pages/user/user'],
41
- requireLogin: true,
42
- loginPage: '/pages/login/login?noauto=1',
43
- debug: process.env.NODE_ENV === 'development'
44
- })
45
- </script>
46
- ```
47
-
48
- ### 2. 目标页面引入组件
49
-
50
- 以 `pages/user/user.vue` 为例，模板末尾挂载一次：
51
-
52
- ```vue
53
- <template>
54
- <view class="container">
55
- <!-- 页面原有内容 -->
56
- <lyTabbar server="sc"></lyTabbar>
57
- <LyAiAssistant />
58
- </view>
59
- </template>
60
-
61
- <script setup>
62
- import LyAiAssistant from '@syfei49/mini-dynamic-renderer/components/ly-ai-assistant/ly-ai-assistant.vue'
63
- import { openChat } from '@syfei49/mini-dynamic-renderer'
64
- </script>
65
- ```
66
-
67
- ### 3. 用 openChat 打开抽屉
68
-
69
- 把旧入口从 `uni.navigateTo('/pages/user/aiChat')` 改为直接打开抽屉：
70
-
71
- ```javascript
72
- function gotoPath(item) {
73
- if (item.title === '分销中心') {
74
- handleDistributionCenter()
75
- return
76
- }
77
-
78
- if (item.title === 'AI客服') {
79
- openChat()
80
- return
81
- }
82
-
83
- // 其他页面保持原来的 uni.navigateTo 逻辑
84
- uni.navigateTo({ url: item.path })
85
- }
86
- ```
87
-
88
- ## 配置项
89
-
90
- | 字段 | 类型 | 默认值 | 说明 |
91
- |------|------|--------|------|
92
- | `baseUrl` | `string` | `''` | API 根地址 |
93
- | `chatApiPath` | `string` | `'/mini/ai/chat'` | 对话接口路径 |
94
- | `uploadApiPath` | `string` | `'/mini/common/upload'` | 图片上传路径 |
95
- | `getToken` | `Function` | `() => ''` | 返回 Authorization |
96
- | `getHeaders` | `Function` | `() => ({})` | 额外请求头 |
97
- | `visiblePages` | `string[]` | `['pages/user/user']` | 显示浮层图标的页面路由 |
98
- | `floatIcon` | `string` | 内置默认图标 | 浮层按钮图片 URL |
99
- | `requireLogin` | `boolean` | `true` | 打开前检查登录 |
100
- | `loginPage` | `string` | `'/pages/login/login'` | 未登录跳转页 |
101
- | `debug` | `boolean` | `false` | 调试日志 |
102
- | `enableInterceptor` | `boolean` | `false` | 是否启用 wx.request 拦截（预留） |
103
-
104
- ## API
105
-
106
- | 方法 | 说明 |
107
- |------|------|
108
- | `init(config?)` | 初始化插件 |
109
- | `openChat()` | 打开聊天抽屉 |
110
- | `closeChat()` | 关闭聊天抽屉 |
111
- | `getConfig()` | 获取当前配置 |
112
- | `isInitialized()` | 是否已初始化 |
113
- | `uninstall()` | 卸载拦截器，恢复原始 `wx.request` |
114
- | `parseRenderConfig(data)` | 解析响应中的渲染配置（预留） |
115
-
116
- ## 后端协议
117
-
118
- 当需要用户上传分类图标时，后端可在 `answer` 中返回：
119
-
120
- ```text
121
- [NEED_ICON]{"name": "张三", "sort": 0, "msg": "请上传一张图片作为「张三」的分类图标"}
122
- ```
123
-
124
- 插件会弹出「拍照 / 从相册选择 / 取消」选择条，并在上传后自动把图标 URL 拼回对话继续请求。
125
-
126
- ## 版本说明
127
-
128
- - **v1.0.x**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力、文档拆分
129
- - v1.0.0：wx.request 拦截 + hello world 弹窗（测试版）
130
- - 后续版本将根据后端 `renderConfig` 动态渲染更多组件类型
1
+ # @syfei49/mini-dynamic-renderer
2
+
3
+ uni-app 浮层 AI 客服插件。在指定页面右下角显示 AI 浮层图标，点击后从底部弹出抽屉聊天面板，支持文字、图片、拍照/相册上传及 `[NEED_ICON]` 分类图标引导。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ cd your-uniapp-project
9
+ npm install @syfei49/mini-dynamic-renderer
10
+ ```
11
+
12
+ 本地调试可指向 tar 包：
13
+
14
+ ```json
15
+ {
16
+ "dependencies": {
17
+ "@syfei49/mini-dynamic-renderer": "^1.0.9"
18
+ }
19
+ }
20
+ ```
21
+
22
+ 微信开发者工具 → **工具** → **构建 npm**
23
+
24
+ ## 接入
25
+
26
+ ### 1. App.vue 初始化
27
+
28
+ 只负责注入配置，不渲染 UI（微信小程序 `App.vue` 的 template 不会显示）。
29
+
30
+ ```vue
31
+ <script setup>
32
+ import { init } from '@syfei49/mini-dynamic-renderer'
33
+ import { baseUrl } from '@/utils/request.js'
34
+
35
+ init({
36
+ baseUrl: 'https://lygateway.ilyixy.com/prod-api',
37
+ uploadBaseUrl: 'https://jky.mall.ilyixy.com/prod-api',
38
+ appId: 'sass-mall-xxx',
39
+ chatApiPath: '/openapi/mini/ai/chat',
40
+ uploadApiPath: '/mini/common/upload',
41
+ getToken: () => uni.getStorageSync('token'),
42
+ visiblePages: ['pages/user/user'],
43
+ requireLogin: true,
44
+ loginPage: '/pages/login/login?noauto=1',
45
+ debug: process.env.NODE_ENV === 'development'
46
+ })
47
+ </script>
48
+ ```
49
+
50
+ ### 2. 目标页面引入组件
51
+
52
+ 以 `pages/user/user.vue` 为例，模板末尾挂载一次：
53
+
54
+ ```vue
55
+ <template>
56
+ <view class="container">
57
+ <!-- 页面原有内容 -->
58
+ <lyTabbar server="sc"></lyTabbar>
59
+ <LyAiAssistant />
60
+ </view>
61
+ </template>
62
+
63
+ <script setup>
64
+ import LyAiAssistant from '@syfei49/mini-dynamic-renderer/components/ly-ai-assistant/ly-ai-assistant.vue'
65
+ import { openChat } from '@syfei49/mini-dynamic-renderer'
66
+ </script>
67
+ ```
68
+
69
+ ### 3. 用 openChat 打开抽屉
70
+
71
+ 把旧入口从 `uni.navigateTo('/pages/user/aiChat')` 改为直接打开抽屉：
72
+
73
+ ```javascript
74
+ function gotoPath(item) {
75
+ if (item.title === '分销中心') {
76
+ handleDistributionCenter()
77
+ return
78
+ }
79
+
80
+ if (item.title === 'AI客服') {
81
+ openChat()
82
+ return
83
+ }
84
+
85
+ // 其他页面保持原来的 uni.navigateTo 逻辑
86
+ uni.navigateTo({ url: item.path })
87
+ }
88
+ ```
89
+
90
+ ## 配置项
91
+
92
+ | 字段 | 类型 | 默认值 | 说明 |
93
+ |------|------|--------|------|
94
+ | `baseUrl` | `string` | `''` | API 根地址，示例 `https://lygateway.ilyixy.com/prod-api` |
95
+ | `uploadBaseUrl` | `string` | `''` | 上传接口基地址，默认与 `baseUrl` 一致，示例 `https://jky.mall.ilyixy.com/prod-api` |
96
+ | `appId` | `string` | `''` | 应用标识，配置后每次请求自动带上请求头 `X-App-Id` |
97
+ | `chatApiPath` | `string` | `'/mini/ai/chat'` | 对话接口路径 |
98
+ | `uploadApiPath` | `string` | `'/mini/common/upload'` | 图片上传路径 |
99
+ | `getToken` | `Function` | `() => ''` | 返回 Authorization |
100
+ | `getHeaders` | `Function` | `() => ({})` | 额外请求头，与自动头合并 |
101
+ | `visiblePages` | `string[]` | `['pages/user/user']` | 显示浮层图标的页面路由 |
102
+ | `floatIcon` | `string` | 内置默认图标 | 浮层按钮图片 URL |
103
+ | `requireLogin` | `boolean` | `true` | 打开前检查登录 |
104
+ | `loginPage` | `string` | `'/pages/login/login'` | 未登录跳转页 |
105
+ | `debug` | `boolean` | `false` | 调试日志 |
106
+ | `enableInterceptor` | `boolean` | `false` | 是否启用 wx.request 拦截（预留） |
107
+ | `actionApiPath` | `string` | `'/openapi/mini/ai/action'` | 动作接口路径（预留） |
108
+
109
+ > 注意：`appId` 非空时，所有请求头都会自动注入 `X-App-Id: <appId>`。
110
+
111
+ ## API
112
+
113
+ | 方法 | 说明 |
114
+ |------|------|
115
+ | `init(config?)` | 初始化插件 |
116
+ | `openChat()` | 打开聊天抽屉 |
117
+ | `closeChat()` | 关闭聊天抽屉 |
118
+ | `getConfig()` | 获取当前配置 |
119
+ | `isInitialized()` | 是否已初始化 |
120
+ | `uninstall()` | 卸载拦截器，恢复原始 `wx.request` |
121
+ | `parseRenderConfig(data)` | 解析响应中的渲染配置（预留） |
122
+
123
+ ## 后端协议
124
+
125
+ ### 1. 动态参数收集（`[RENDER_CONFIG]`）
126
+
127
+ 后端可在 `answer` 中返回 `[RENDER_CONFIG]{...}` 来让插件渲染一个动态表单，用户填写后自动作为 `inputs` 再次发起对话请求。
128
+
129
+ ```text
130
+ 请填写新增商品所需信息 [RENDER_CONFIG]{
131
+ "type": "form",
132
+ "title": "新增商品",
133
+ "description": "请补充以下字段",
134
+ "fields": [
135
+ { "name": "productName", "label": "商品名称", "type": "input" },
136
+ { "name": "price", "label": "价格", "type": "number" },
137
+ { "name": "category", "label": "分类", "type": "select", "options": [{ "label": "保健品", "value": "1" }] },
138
+ { "name": "cover", "label": "封面图", "type": "image" }
139
+ ]
140
+ }
141
+ ```
142
+
143
+ 支持字段类型：
144
+
145
+ - `input`：文本输入框
146
+ - `number`：数字输入框
147
+ - `select`：`picker` 选择器，需配 `options: [{ label, value }]`
148
+ - `treeSelect`：树形选择（支持 `children` 嵌套，自动扁平化展示）
149
+ - `image`：拍照 / 相册选择并上传
150
+ - `hidden`：隐藏字段（如 `level`、`pid`）
151
+ - `confirm`：确认框（`renderConfig.type === "confirm"`）
152
+
153
+ 用户提交表单后，字段值会作为 `inputs` 附带到下一轮对话请求。
154
+
155
+ ### 3. 后端动作执行（`[AI_ACTION]`）
156
+
157
+ gateway 解析 Dify 返回的 `[AI_ACTION]{...}` 并自动调用商城接口，结果通过 `actionResult` 返回：
158
+
159
+ ```text
160
+ [AI_ACTION]{"action":"mallCategoryAdd","params":{"level":2,"pid":1,"name":"橘子","sort":0,"status":1}}
161
+ ```
162
+
163
+ 详细场景配置见上级目录 [`scenarios.md`](../scenarios.md)。
164
+
165
+ ### 2. 分类图标引导（兼容 `[NEED_ICON]`）
166
+
167
+ 当需要用户上传分类图标时，后端仍可在 `answer` 中返回：
168
+
169
+ ```text
170
+ [NEED_ICON]{"name": "张三", "sort": 0, "msg": "请上传一张图片作为「张三」的分类图标"}
171
+ ```
172
+
173
+ 插件会弹出「拍照 / 从相册选择 / 取消」选择条，并在上传后自动把图标 URL 拼回对话继续请求。
174
+
175
+ ## 版本说明
176
+
177
+ - **v1.1.2**：聊天消息支持长按复制与文本选中（`selectable` + `user-select`）
178
+ - **v1.1.1**：修复聊天过多时输入框被挤出；`confirm` 支持 `inputs` 回传参数；欢迎语更新
179
+ - **v1.1.0**：`treeSelect` / `confirm` / `hidden` 表单组件；支持 `renderConfig` + `actionResult` 协议
180
+ - **v1.0.x**：uni-app 浮层 AI 插件、抽屉聊天、迁移 aiChat 全能力
181
+ - v1.0.0：wx.request 拦截 + hello world 弹窗（测试版）