@syfei49/mini-dynamic-renderer 1.0.9 → 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 -163
  2. package/components/ly-ai-assistant/ly-ai-assistant.vue +916 -796
  3. package/index.js +16 -16
  4. package/package.json +27 -27
  5. package/src/adapters/request.js +148 -114
  6. package/src/chat/parser.js +152 -83
  7. package/src/chat/service.js +497 -360
  8. package/src/config.js +54 -53
  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/components/ly-ai-assistant/ly-ai-assistant.vue CHANGED
@@ -1,796 +1,916 @@
1
- <template>
2
- <view>
3
- <view v-if="visible" class="ly-ai-float" :style="floatStyle" @click="openChat">
4
- <image v-if="floatIconUrl" class="ly-ai-float-icon" :src="floatIconUrl" mode="aspectFit" />
5
- <view v-else class="ly-ai-float-text">AI</view>
6
- </view>
7
-
8
- <view v-if="opened" class="ly-ai-overlay" @click="onOverlayClick">
9
- <view class="ly-ai-drawer" :style="drawerStyle" @click.stop>
10
- <view class="ly-ai-header">
11
- <text class="ly-ai-title">AI 智能客服</text>
12
- <view class="ly-ai-close" @click="closeChat">×</view>
13
- </view>
14
-
15
- <scroll-view class="ly-ai-list" scroll-y :scroll-into-view="scrollIntoView" scroll-with-animation>
16
- <view v-if="messages.length === 0" class="ly-ai-welcome">
17
- <view class="ly-ai-welcome-title">AI 智能客服</view>
18
- <view class="ly-ai-welcome-desc">我可以帮你处理商品分类相关操作。新增一级分类时，若未提供图标，会引导你拍照或从相册选择。</view>
19
- <view v-for="(item, index) in quickQuestions" :key="index" class="ly-ai-quick" @click="sendQuick(item)">
20
- {{ item }}
21
- </view>
22
- </view>
23
-
24
- <view v-for="(item, index) in messages" :key="index" :id="'msg-' + index"
25
- class="ly-ai-msg-row" :class="item.role === 'user' ? 'ly-ai-msg-row-user' : 'ly-ai-msg-row-ai'">
26
- <view class="ly-ai-bubble" :class="item.role === 'user' ? 'ly-ai-bubble-user' : 'ly-ai-bubble-ai'">
27
- <image v-for="(img, imgIndex) in item.imageUrls" :key="imgIndex" class="ly-ai-msg-image"
28
- :src="img" mode="aspectFill" @click="previewImage(img, item.imageUrls)" />
29
- <text v-if="item.content" class="ly-ai-msg-text">{{ item.content }}</text>
30
- </view>
31
- </view>
32
-
33
- <view v-if="loading" class="ly-ai-msg-row ly-ai-msg-row-ai">
34
- <view class="ly-ai-bubble ly-ai-bubble-ai ly-ai-loading-bubble">
35
- <text class="ly-ai-msg-text">正在思考中...</text>
36
- </view>
37
- </view>
38
- </scroll-view>
39
-
40
- <view v-if="renderConfig" class="ly-ai-form-bar">
41
- <view v-if="renderConfig.title" class="ly-ai-form-title">{{ renderConfig.title }}</view>
42
- <view v-if="renderConfig.description" class="ly-ai-form-desc">{{ renderConfig.description }}</view>
43
- <view v-for="(field, fIndex) in renderConfig.fields" :key="fIndex" class="ly-ai-form-item">
44
- <text class="ly-ai-form-label">{{ field.label || field.name }}</text>
45
- <template v-if="field.type === 'input' || field.type === 'number'">
46
- <input class="ly-ai-form-input" :type="field.type === 'number' ? 'number' : 'text'"
47
- :value="formInputs[field.name]" :placeholder="field.placeholder || '请输入' + (field.label || field.name)"
48
- :disabled="loading || uploading" @input="onFormInput($event, field.name)" />
49
- </template>
50
- <template v-else-if="field.type === 'select'">
51
- <picker class="ly-ai-form-picker" mode="selector" :range="getFieldOptions(field).labels"
52
- :value="getFieldIndex(field)" :disabled="loading || uploading" @change="onFormSelect($event, field)">
53
- <view class="ly-ai-form-picker-text">{{ getFieldSelectedLabel(field) }}</view>
54
- </picker>
55
- </template>
56
- <template v-else-if="field.type === 'image'">
57
- <view v-if="formInputs[field.name]" class="ly-ai-form-image-wrap">
58
- <image class="ly-ai-form-image" :src="formInputs[field.name]" mode="aspectFill"
59
- @click="previewImage(formInputs[field.name], [formInputs[field.name]])" />
60
- <view class="ly-ai-form-image-remove" @click="onFormImageRemove(field.name)">×</view>
61
- </view>
62
- <view v-else class="ly-ai-form-image-btn" :class="{ disabled: loading || uploading }"
63
- @click="onFormImageChoose(field.name)">拍照 / 相册</view>
64
- </template>
65
- </view>
66
- <view class="ly-ai-form-actions">
67
- <view class="ly-ai-form-btn confirm" :class="{ disabled: loading || uploading }" @click="submitForm">确认</view>
68
- <view class="ly-ai-form-btn cancel" :class="{ disabled: loading || uploading }" @click="cancelForm">取消</view>
69
- </view>
70
- </view>
71
-
72
- <view v-else-if="iconPickMode" class="ly-ai-icon-pick-bar">
73
- <view class="ly-ai-icon-pick-title">请为「{{ pendingIconCategory && pendingIconCategory.name }}」选择分类图标</view>
74
- <view class="ly-ai-icon-pick-actions">
75
- <view class="ly-ai-icon-pick-btn" :class="{ disabled: loading || uploading }" @click="pickCategoryIcon('camera')">拍照</view>
76
- <view class="ly-ai-icon-pick-btn" :class="{ disabled: loading || uploading }" @click="pickCategoryIcon('album')">从相册选择</view>
77
- <view class="ly-ai-icon-pick-btn cancel" :class="{ disabled: loading || uploading }" @click="cancelIconPick">取消</view>
78
- </view>
79
- </view>
80
-
81
- <template v-else>
82
- <view v-if="pendingImageUrl" class="ly-ai-image-preview-bar">
83
- <image class="ly-ai-preview-image" :src="pendingImageUrl" mode="aspectFill" />
84
- <view class="ly-ai-preview-remove" @click="clearPendingImage">×</view>
85
- </view>
86
-
87
- <view class="ly-ai-input-bar">
88
- <view class="ly-ai-attach-btn" :class="{ disabled: loading || uploading }" @click="chooseImage">+</view>
89
- <input class="ly-ai-chat-input" :value="inputText" placeholder="请输入您的问题" confirm-type="send"
90
- :disabled="loading || uploading" :adjust-position="false" :hold-keyboard="true" @input="onInput" @confirm="handleSend" />
91
- <view class="ly-ai-send-btn" :class="{ disabled: loading || uploading || !canSend }" @click="handleSend">发送</view>
92
- </view>
93
- </template>
94
- </view>
95
- </view>
96
- </view>
97
- </template>
98
-
99
- <script setup>
100
- import {
101
- ref,
102
- computed,
103
- nextTick,
104
- onMounted,
105
- onUnmounted
106
- } from 'vue'
107
- import {
108
- onShow
109
- } from '@dcloudio/uni-app'
110
- import chatService from '../../src/chat/service.js'
111
- import configModule from '../../src/config.js'
112
-
113
- const visible = ref(false)
114
- const opened = ref(false)
115
- const messages = ref([])
116
- const loading = ref(false)
117
- const uploading = ref(false)
118
- const iconPickMode = ref(false)
119
- const pendingIconCategory = ref(null)
120
- const pendingImageUrl = ref('')
121
- const inputText = ref('')
122
- const quickQuestions = ref([])
123
- const scrollIntoView = ref('')
124
- const floatIconUrl = ref('')
125
- const keyboardHeight = ref(0)
126
- const renderConfig = ref(null)
127
- const formInputs = ref({})
128
-
129
- const canSend = computed(() => {
130
- return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
131
- })
132
-
133
- const floatStyle = computed(() => {
134
- return {
135
- right: '32rpx',
136
- bottom: '180rpx'
137
- }
138
- })
139
-
140
- const drawerStyle = computed(() => {
141
- return {
142
- bottom: keyboardHeight.value + 'px'
143
- }
144
- })
145
-
146
- let updateHandler = null
147
- let openHandler = null
148
- let closeHandler = null
149
- let keyboardHandler = null
150
-
151
- function initFormInputs() {
152
- var cfg = renderConfig.value
153
- var values = {}
154
- if (cfg && cfg.fields && cfg.fields.length) {
155
- cfg.fields.forEach(function (field) {
156
- if (field.type === 'select' && field.options && field.options.length) {
157
- values[field.name] = field.defaultValue !== undefined ? field.defaultValue : field.options[0].value
158
- } else {
159
- values[field.name] = field.defaultValue !== undefined ? field.defaultValue : ''
160
- }
161
- })
162
- }
163
- formInputs.value = values
164
- }
165
-
166
- function syncState(snapshot) {
167
- messages.value = snapshot.messages || []
168
- loading.value = snapshot.loading || false
169
- uploading.value = snapshot.uploading || false
170
- iconPickMode.value = snapshot.iconPickMode || false
171
- pendingIconCategory.value = snapshot.pendingIconCategory || null
172
- pendingImageUrl.value = snapshot.pendingImageUrl || ''
173
- inputText.value = snapshot.inputText || ''
174
- renderConfig.value = snapshot.renderConfig || null
175
- quickQuestions.value = snapshot.quickQuestions || []
176
- initFormInputs()
177
- scrollToBottom()
178
- }
179
-
180
- function scrollToBottom() {
181
- nextTick(() => {
182
- scrollIntoView.value = 'msg-' + (messages.value.length - 1)
183
- setTimeout(() => {
184
- scrollIntoView.value = ''
185
- }, 300)
186
- })
187
- }
188
-
189
- function checkVisible() {
190
- const config = configModule.getConfig()
191
- const pages = getCurrentPages()
192
- const current = pages[pages.length - 1]
193
- const route = current ? current.route : ''
194
- const visiblePages = config.visiblePages || []
195
- const shouldShow = visiblePages.some(function (page) {
196
- return route === page || route.indexOf(page) === 0
197
- })
198
- visible.value = shouldShow
199
- }
200
-
201
- function openChat() {
202
- if (!chatService.openConversation()) {
203
- return
204
- }
205
- opened.value = true
206
- keyboardHeight.value = 0
207
- scrollToBottom()
208
- }
209
-
210
- function closeChat() {
211
- opened.value = false
212
- keyboardHeight.value = 0
213
- chatService.closeConversation()
214
- }
215
-
216
- function onOverlayClick(e) {
217
- if (e && e.target && e.currentTarget && e.target !== e.currentTarget) {
218
- return
219
- }
220
- closeChat()
221
- }
222
-
223
- function onInput(e) {
224
- inputText.value = e.detail.value
225
- chatService.setInputText(e.detail.value)
226
- }
227
-
228
- function handleSend() {
229
- chatService.handleSend().then(() => {
230
- scrollToBottom()
231
- })
232
- }
233
-
234
- function sendQuick(text) {
235
- chatService.sendQuick(text).then(() => {
236
- scrollToBottom()
237
- })
238
- }
239
-
240
- function chooseImage() {
241
- chatService.chooseImage().catch(function (error) {
242
- uni.showToast({
243
- title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
244
- icon: 'none'
245
- })
246
- })
247
- }
248
-
249
- function pickCategoryIcon(source) {
250
- chatService.pickCategoryIcon(source).catch(function (error) {
251
- uni.showToast({
252
- title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
253
- icon: 'none'
254
- })
255
- })
256
- }
257
-
258
- function cancelIconPick() {
259
- chatService.cancelIconPick()
260
- }
261
-
262
- function getFieldOptions(field) {
263
- var options = field.options || []
264
- return {
265
- labels: options.map(function (opt) {
266
- return opt.label || opt.value
267
- }),
268
- values: options.map(function (opt) {
269
- return opt.value
270
- })
271
- }
272
- }
273
-
274
- function getFieldIndex(field) {
275
- var opts = getFieldOptions(field)
276
- var index = opts.values.indexOf(formInputs.value[field.name])
277
- return index >= 0 ? index : 0
278
- }
279
-
280
- function getFieldSelectedLabel(field) {
281
- var index = getFieldIndex(field)
282
- var opts = getFieldOptions(field)
283
- var option = field.options ? field.options[index] : null
284
- return option ? (option.label || option.value) : (opts.labels[index] || '请选择')
285
- }
286
-
287
- function onFormInput(e, name) {
288
- formInputs.value[name] = e.detail.value
289
- }
290
-
291
- function onFormSelect(e, field) {
292
- var index = e.detail.value
293
- var opts = getFieldOptions(field)
294
- formInputs.value[field.name] = opts.values[index]
295
- }
296
-
297
- function onFormImageChoose(name) {
298
- chatService.chooseImage()
299
- .then(function (imageUrl) {
300
- formInputs.value[name] = imageUrl
301
- })
302
- .catch(function (error) {
303
- uni.showToast({
304
- title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
305
- icon: 'none'
306
- })
307
- })
308
- }
309
-
310
- function onFormImageRemove(name) {
311
- formInputs.value[name] = ''
312
- }
313
-
314
- function submitForm() {
315
- chatService.submitInputs(formInputs.value)
316
- .then(function () {
317
- scrollToBottom()
318
- })
319
- .catch(function (error) {
320
- uni.showToast({
321
- title: error && (error.message || error.msg) ? (error.message || error.msg) : '提交失败',
322
- icon: 'none'
323
- })
324
- })
325
- }
326
-
327
- function cancelForm() {
328
- chatService.cancelForm()
329
- }
330
-
331
- function clearPendingImage() {
332
- chatService.clearPendingImage()
333
- }
334
-
335
- function previewImage(current, urls) {
336
- const list = (urls && urls.length ? urls : [current]).filter(Boolean)
337
- if (!list.length) {
338
- return
339
- }
340
- uni.previewImage({
341
- current: current,
342
- urls: list
343
- })
344
- }
345
-
346
- onMounted(() => {
347
- const config = configModule.getConfig()
348
- floatIconUrl.value = config.floatIcon || ''
349
- updateHandler = function (snapshot) {
350
- syncState(snapshot)
351
- }
352
- openHandler = function () {
353
- opened.value = true
354
- keyboardHeight.value = 0
355
- scrollToBottom()
356
- }
357
- closeHandler = function () {
358
- opened.value = false
359
- keyboardHeight.value = 0
360
- }
361
- keyboardHandler = function (res) {
362
- keyboardHeight.value = res.height || 0
363
- if (keyboardHeight.value > 0) {
364
- scrollToBottom()
365
- }
366
- }
367
- chatService.onUpdate(updateHandler)
368
- chatService.onOpen(openHandler)
369
- chatService.onClose(closeHandler)
370
- if (typeof uni.onKeyboardHeightChange === 'function') {
371
- uni.onKeyboardHeightChange(keyboardHandler)
372
- }
373
- syncState(chatService.getSnapshot())
374
- checkVisible()
375
- })
376
-
377
- onUnmounted(() => {
378
- if (updateHandler) {
379
- chatService.offUpdate(updateHandler)
380
- }
381
- if (openHandler) {
382
- chatService.offOpen(openHandler)
383
- }
384
- if (closeHandler) {
385
- chatService.offClose(closeHandler)
386
- }
387
- if (keyboardHandler && typeof uni.offKeyboardHeightChange === 'function') {
388
- uni.offKeyboardHeightChange(keyboardHandler)
389
- }
390
- })
391
-
392
- onShow(() => {
393
- checkVisible()
394
- })
395
- </script>
396
-
397
- <style scoped>
398
- .ly-ai-float {
399
- position: fixed;
400
- z-index: 9999;
401
- width: 96rpx;
402
- height: 96rpx;
403
- border-radius: 50%;
404
- background: #f84616;
405
- display: flex;
406
- align-items: center;
407
- justify-content: center;
408
- box-shadow: 0 4rpx 16rpx rgba(248, 70, 22, 0.35);
409
- }
410
-
411
- .ly-ai-float-icon {
412
- width: 56rpx;
413
- height: 56rpx;
414
- }
415
-
416
- .ly-ai-float-text {
417
- color: #fff;
418
- font-size: 28rpx;
419
- font-weight: 600;
420
- }
421
-
422
- .ly-ai-overlay {
423
- position: fixed;
424
- top: 0;
425
- left: 0;
426
- right: 0;
427
- bottom: 0;
428
- z-index: 10000;
429
- background: rgba(0, 0, 0, 0.4);
430
- }
431
-
432
- .ly-ai-drawer {
433
- position: absolute;
434
- left: 0;
435
- right: 0;
436
- bottom: 0;
437
- height: 82vh;
438
- background: #f5f6f8;
439
- border-radius: 32rpx 32rpx 0 0;
440
- display: flex;
441
- flex-direction: column;
442
- overflow: hidden;
443
- transition: bottom 0.2s ease;
444
- }
445
-
446
- .ly-ai-header {
447
- display: flex;
448
- align-items: center;
449
- justify-content: center;
450
- padding: 24rpx 32rpx;
451
- background: #fff;
452
- position: relative;
453
- border-bottom: 1rpx solid #eee;
454
- }
455
-
456
- .ly-ai-title {
457
- font-size: 32rpx;
458
- font-weight: 600;
459
- color: #333;
460
- }
461
-
462
- .ly-ai-close {
463
- position: absolute;
464
- right: 32rpx;
465
- top: 50%;
466
- transform: translateY(-50%);
467
- width: 56rpx;
468
- height: 56rpx;
469
- line-height: 52rpx;
470
- text-align: center;
471
- font-size: 40rpx;
472
- color: #999;
473
- }
474
-
475
- .ly-ai-list {
476
- flex: 1;
477
- padding: 24rpx;
478
- padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
479
- box-sizing: border-box;
480
- }
481
-
482
- .ly-ai-welcome {
483
- background: #fff;
484
- border-radius: 16rpx;
485
- padding: 32rpx;
486
- margin-bottom: 24rpx;
487
- }
488
-
489
- .ly-ai-welcome-title {
490
- font-size: 32rpx;
491
- font-weight: 600;
492
- color: #333;
493
- margin-bottom: 12rpx;
494
- }
495
-
496
- .ly-ai-welcome-desc {
497
- font-size: 26rpx;
498
- color: #666;
499
- line-height: 1.6;
500
- margin-bottom: 20rpx;
501
- }
502
-
503
- .ly-ai-quick {
504
- background: #fff5f2;
505
- color: #f84616;
506
- font-size: 24rpx;
507
- padding: 18rpx 24rpx;
508
- border-radius: 12rpx;
509
- margin-top: 16rpx;
510
- }
511
-
512
- .ly-ai-msg-row {
513
- display: flex;
514
- margin-bottom: 20rpx;
515
- }
516
-
517
- .ly-ai-msg-row-user {
518
- justify-content: flex-end;
519
- }
520
-
521
- .ly-ai-msg-row-ai {
522
- justify-content: flex-start;
523
- }
524
-
525
- .ly-ai-bubble {
526
- max-width: 78%;
527
- padding: 20rpx 24rpx;
528
- border-radius: 16rpx;
529
- word-break: break-all;
530
- }
531
-
532
- .ly-ai-bubble-user {
533
- background: #f84616;
534
- color: #fff;
535
- border-bottom-right-radius: 4rpx;
536
- }
537
-
538
- .ly-ai-bubble-ai {
539
- background: #fff;
540
- color: #333;
541
- border-bottom-left-radius: 4rpx;
542
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
543
- }
544
-
545
- .ly-ai-loading-bubble {
546
- color: #999;
547
- }
548
-
549
- .ly-ai-msg-image {
550
- width: 200rpx;
551
- height: 200rpx;
552
- border-radius: 12rpx;
553
- display: block;
554
- margin-bottom: 12rpx;
555
- }
556
-
557
- .ly-ai-msg-text {
558
- font-size: 28rpx;
559
- line-height: 1.6;
560
- white-space: pre-wrap;
561
- }
562
-
563
- .ly-ai-icon-pick-bar {
564
- padding: 24rpx;
565
- padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
566
- background: #fff;
567
- border-top: 1rpx solid #eee;
568
- }
569
-
570
- .ly-ai-icon-pick-title {
571
- font-size: 28rpx;
572
- color: #333;
573
- margin-bottom: 20rpx;
574
- text-align: center;
575
- }
576
-
577
- .ly-ai-icon-pick-actions {
578
- display: flex;
579
- gap: 16rpx;
580
- }
581
-
582
- .ly-ai-icon-pick-btn {
583
- flex: 1;
584
- height: 80rpx;
585
- line-height: 80rpx;
586
- text-align: center;
587
- background: #f84616;
588
- color: #fff;
589
- border-radius: 12rpx;
590
- font-size: 28rpx;
591
- }
592
-
593
- .ly-ai-icon-pick-btn.cancel {
594
- background: #f5f6f8;
595
- color: #666;
596
- }
597
-
598
- .ly-ai-icon-pick-btn.disabled {
599
- opacity: 0.5;
600
- }
601
-
602
- .ly-ai-image-preview-bar {
603
- display: flex;
604
- align-items: center;
605
- padding: 12rpx 24rpx;
606
- background: #fff;
607
- border-top: 1rpx solid #eee;
608
- }
609
-
610
- .ly-ai-preview-image {
611
- width: 96rpx;
612
- height: 96rpx;
613
- border-radius: 12rpx;
614
- }
615
-
616
- .ly-ai-preview-remove {
617
- margin-left: 16rpx;
618
- width: 48rpx;
619
- height: 48rpx;
620
- line-height: 44rpx;
621
- text-align: center;
622
- font-size: 36rpx;
623
- color: #999;
624
- background: #f5f6f8;
625
- border-radius: 50%;
626
- }
627
-
628
- .ly-ai-input-bar {
629
- display: flex;
630
- align-items: center;
631
- padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
632
- background: #fff;
633
- border-top: 1rpx solid #eee;
634
- }
635
-
636
- .ly-ai-attach-btn {
637
- width: 72rpx;
638
- height: 72rpx;
639
- line-height: 68rpx;
640
- text-align: center;
641
- font-size: 44rpx;
642
- color: #666;
643
- background: #f5f6f8;
644
- border-radius: 50%;
645
- margin-right: 16rpx;
646
- flex-shrink: 0;
647
- }
648
-
649
- .ly-ai-attach-btn.disabled {
650
- opacity: 0.5;
651
- }
652
-
653
- .ly-ai-chat-input {
654
- flex: 1;
655
- height: 72rpx;
656
- background: #f5f6f8;
657
- border-radius: 36rpx;
658
- padding: 0 28rpx;
659
- font-size: 28rpx;
660
- }
661
-
662
- .ly-ai-send-btn {
663
- margin-left: 16rpx;
664
- min-width: 120rpx;
665
- height: 72rpx;
666
- line-height: 72rpx;
667
- text-align: center;
668
- background: #f84616;
669
- color: #fff;
670
- border-radius: 36rpx;
671
- font-size: 28rpx;
672
- }
673
-
674
- .ly-ai-send-btn.disabled {
675
- opacity: 0.5;
676
- }
677
-
678
- .ly-ai-form-bar {
679
- padding: 24rpx;
680
- padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
681
- background: #fff;
682
- border-top: 1rpx solid #eee;
683
- }
684
-
685
- .ly-ai-form-title {
686
- font-size: 30rpx;
687
- font-weight: 600;
688
- color: #333;
689
- margin-bottom: 12rpx;
690
- }
691
-
692
- .ly-ai-form-desc {
693
- font-size: 26rpx;
694
- color: #666;
695
- line-height: 1.5;
696
- margin-bottom: 24rpx;
697
- }
698
-
699
- .ly-ai-form-item {
700
- margin-bottom: 24rpx;
701
- }
702
-
703
- .ly-ai-form-label {
704
- display: block;
705
- font-size: 28rpx;
706
- color: #333;
707
- margin-bottom: 12rpx;
708
- }
709
-
710
- .ly-ai-form-input {
711
- height: 72rpx;
712
- background: #f5f6f8;
713
- border-radius: 12rpx;
714
- padding: 0 24rpx;
715
- font-size: 28rpx;
716
- color: #333;
717
- }
718
-
719
- .ly-ai-form-picker {
720
- height: 72rpx;
721
- background: #f5f6f8;
722
- border-radius: 12rpx;
723
- padding: 0 24rpx;
724
- display: flex;
725
- align-items: center;
726
- }
727
-
728
- .ly-ai-form-picker-text {
729
- font-size: 28rpx;
730
- color: #333;
731
- }
732
-
733
- .ly-ai-form-image-wrap {
734
- display: flex;
735
- align-items: center;
736
- }
737
-
738
- .ly-ai-form-image {
739
- width: 160rpx;
740
- height: 160rpx;
741
- border-radius: 12rpx;
742
- }
743
-
744
- .ly-ai-form-image-remove {
745
- margin-left: 16rpx;
746
- width: 48rpx;
747
- height: 48rpx;
748
- line-height: 44rpx;
749
- text-align: center;
750
- font-size: 36rpx;
751
- color: #999;
752
- background: #f5f6f8;
753
- border-radius: 50%;
754
- }
755
-
756
- .ly-ai-form-image-btn {
757
- width: 200rpx;
758
- height: 160rpx;
759
- line-height: 160rpx;
760
- text-align: center;
761
- background: #f5f6f8;
762
- color: #666;
763
- border-radius: 12rpx;
764
- font-size: 28rpx;
765
- }
766
-
767
- .ly-ai-form-actions {
768
- display: flex;
769
- gap: 16rpx;
770
- margin-top: 12rpx;
771
- }
772
-
773
- .ly-ai-form-btn {
774
- flex: 1;
775
- height: 80rpx;
776
- line-height: 80rpx;
777
- text-align: center;
778
- border-radius: 12rpx;
779
- font-size: 28rpx;
780
- }
781
-
782
- .ly-ai-form-btn.confirm {
783
- background: #f84616;
784
- color: #fff;
785
- }
786
-
787
- .ly-ai-form-btn.cancel {
788
- background: #f5f6f8;
789
- color: #666;
790
- }
791
-
792
- .ly-ai-form-btn.disabled,
793
- .ly-ai-form-image-btn.disabled {
794
- opacity: 0.5;
795
- }
796
- </style>
1
+ <template>
2
+ <view>
3
+ <view v-if="visible" class="ly-ai-float" :style="floatStyle" @click="openChat">
4
+ <image v-if="floatIconUrl" class="ly-ai-float-icon" :src="floatIconUrl" mode="aspectFit" />
5
+ <view v-else class="ly-ai-float-text">AI</view>
6
+ </view>
7
+
8
+ <view v-if="opened" class="ly-ai-overlay" @click="onOverlayClick">
9
+ <view class="ly-ai-drawer" :style="drawerStyle" @click.stop>
10
+ <view class="ly-ai-header">
11
+ <text class="ly-ai-title">AI 智能客服</text>
12
+ <view class="ly-ai-close" @click="closeChat">×</view>
13
+ </view>
14
+
15
+ <view class="ly-ai-body">
16
+ <scroll-view class="ly-ai-list" scroll-y :scroll-into-view="scrollIntoView" scroll-with-animation
17
+ :show-scrollbar="false">
18
+ <view v-if="messages.length === 0" class="ly-ai-welcome">
19
+ <view class="ly-ai-welcome-title">AI 智能客服</view>
20
+ <text class="ly-ai-welcome-desc" selectable user-select>我可以帮你新增商品分类（一/二/三级）或新增商品。信息不全时会弹出表单让你填写，不会自动猜测名称或分类。长按消息可复制。</text>
21
+ <view v-for="(item, index) in quickQuestions" :key="index" class="ly-ai-quick" @click="sendQuick(item)">
22
+ {{ item }}
23
+ </view>
24
+ </view>
25
+
26
+ <view v-for="(item, index) in messages" :key="index" :id="'msg-' + index"
27
+ class="ly-ai-msg-row" :class="item.role === 'user' ? 'ly-ai-msg-row-user' : 'ly-ai-msg-row-ai'">
28
+ <view class="ly-ai-bubble" :class="item.role === 'user' ? 'ly-ai-bubble-user' : 'ly-ai-bubble-ai'">
29
+ <image v-for="(img, imgIndex) in item.imageUrls" :key="imgIndex" class="ly-ai-msg-image"
30
+ :src="img" mode="aspectFill" @click="previewImage(img, item.imageUrls)" />
31
+ <text v-if="item.content" class="ly-ai-msg-text" selectable user-select
32
+ @longpress="copyMessage(item.content)">{{ item.content }}</text>
33
+ </view>
34
+ </view>
35
+
36
+ <view v-if="loading" class="ly-ai-msg-row ly-ai-msg-row-ai">
37
+ <view class="ly-ai-bubble ly-ai-bubble-ai ly-ai-loading-bubble">
38
+ <text class="ly-ai-msg-text">正在思考中...</text>
39
+ </view>
40
+ </view>
41
+ </scroll-view>
42
+ </view>
43
+
44
+ <view class="ly-ai-footer">
45
+ <view v-if="renderConfig && renderConfig.type === 'confirm'" class="ly-ai-form-bar">
46
+ <view v-if="renderConfig.title" class="ly-ai-form-title">{{ renderConfig.title }}</view>
47
+ <view class="ly-ai-form-desc">{{ renderConfig.message || renderConfig.description || '请确认是否继续' }}</view>
48
+ <view class="ly-ai-form-actions">
49
+ <view class="ly-ai-form-btn confirm" :class="{ disabled: loading || uploading }" @click="submitConfirm(true)">确认</view>
50
+ <view class="ly-ai-form-btn cancel" :class="{ disabled: loading || uploading }" @click="submitConfirm(false)">取消</view>
51
+ </view>
52
+ </view>
53
+
54
+ <view v-else-if="renderConfig" class="ly-ai-form-bar">
55
+ <view v-if="renderConfig.title" class="ly-ai-form-title">{{ renderConfig.title }}</view>
56
+ <view v-if="renderConfig.description" class="ly-ai-form-desc">{{ renderConfig.description }}</view>
57
+ <view v-for="(field, fIndex) in renderConfig.fields" :key="fIndex" class="ly-ai-form-item" v-show="field.type !== 'hidden'">
58
+ <text class="ly-ai-form-label">{{ field.label || field.name }}</text>
59
+ <template v-if="field.type === 'input' || field.type === 'number'">
60
+ <input class="ly-ai-form-input" :type="field.type === 'number' ? 'number' : 'text'"
61
+ :value="formInputs[field.name]" :placeholder="field.placeholder || '请输入' + (field.label || field.name)"
62
+ :disabled="loading || uploading" @input="onFormInput($event, field.name)" />
63
+ </template>
64
+ <template v-else-if="field.type === 'select' || field.type === 'treeSelect'">
65
+ <picker class="ly-ai-form-picker" mode="selector" :range="getFieldOptions(field).labels"
66
+ :value="getFieldIndex(field)" :disabled="loading || uploading" @change="onFormSelect($event, field)">
67
+ <view class="ly-ai-form-picker-text">{{ getFieldSelectedLabel(field) }}</view>
68
+ </picker>
69
+ </template>
70
+ <template v-else-if="field.type === 'image'">
71
+ <view v-if="formInputs[field.name]" class="ly-ai-form-image-wrap">
72
+ <image class="ly-ai-form-image" :src="formInputs[field.name]" mode="aspectFill"
73
+ @click="previewImage(formInputs[field.name], [formInputs[field.name]])" />
74
+ <view class="ly-ai-form-image-remove" @click="onFormImageRemove(field.name)">×</view>
75
+ </view>
76
+ <view v-else class="ly-ai-form-image-btn" :class="{ disabled: loading || uploading }"
77
+ @click="onFormImageChoose(field.name)">拍照 / 相册</view>
78
+ </template>
79
+ </view>
80
+ <view class="ly-ai-form-actions">
81
+ <view class="ly-ai-form-btn confirm" :class="{ disabled: loading || uploading }" @click="submitForm">确认</view>
82
+ <view class="ly-ai-form-btn cancel" :class="{ disabled: loading || uploading }" @click="cancelForm">取消</view>
83
+ </view>
84
+ </view>
85
+
86
+ <view v-else-if="iconPickMode" class="ly-ai-icon-pick-bar">
87
+ <view class="ly-ai-icon-pick-title">请为「{{ pendingIconCategory && pendingIconCategory.name }}」选择分类图标</view>
88
+ <view class="ly-ai-icon-pick-actions">
89
+ <view class="ly-ai-icon-pick-btn" :class="{ disabled: loading || uploading }" @click="pickCategoryIcon('camera')">拍照</view>
90
+ <view class="ly-ai-icon-pick-btn" :class="{ disabled: loading || uploading }" @click="pickCategoryIcon('album')">从相册选择</view>
91
+ <view class="ly-ai-icon-pick-btn cancel" :class="{ disabled: loading || uploading }" @click="cancelIconPick">取消</view>
92
+ </view>
93
+ </view>
94
+
95
+ <template v-else>
96
+ <view v-if="pendingImageUrl" class="ly-ai-image-preview-bar">
97
+ <image class="ly-ai-preview-image" :src="pendingImageUrl" mode="aspectFill" />
98
+ <view class="ly-ai-preview-remove" @click="clearPendingImage">×</view>
99
+ </view>
100
+
101
+ <view class="ly-ai-input-bar">
102
+ <view class="ly-ai-attach-btn" :class="{ disabled: loading || uploading }" @click="chooseImage">+</view>
103
+ <input class="ly-ai-chat-input" :value="inputText" placeholder="请输入您的问题" confirm-type="send"
104
+ :disabled="loading || uploading" :adjust-position="false" :hold-keyboard="true" @input="onInput" @confirm="handleSend" />
105
+ <view class="ly-ai-send-btn" :class="{ disabled: loading || uploading || !canSend }" @click="handleSend">发送</view>
106
+ </view>
107
+ </template>
108
+ </view>
109
+ </view>
110
+ </view>
111
+ </view>
112
+ </template>
113
+
114
+ <script setup>
115
+ import {
116
+ ref,
117
+ computed,
118
+ nextTick,
119
+ onMounted,
120
+ onUnmounted
121
+ } from 'vue'
122
+ import {
123
+ onShow
124
+ } from '@dcloudio/uni-app'
125
+ import chatService from '../../src/chat/service.js'
126
+ import configModule from '../../src/config.js'
127
+
128
+ const visible = ref(false)
129
+ const opened = ref(false)
130
+ const messages = ref([])
131
+ const loading = ref(false)
132
+ const uploading = ref(false)
133
+ const iconPickMode = ref(false)
134
+ const pendingIconCategory = ref(null)
135
+ const pendingImageUrl = ref('')
136
+ const inputText = ref('')
137
+ const quickQuestions = ref([])
138
+ const scrollIntoView = ref('')
139
+ const floatIconUrl = ref('')
140
+ const keyboardHeight = ref(0)
141
+ const renderConfig = ref(null)
142
+ const formInputs = ref({})
143
+ let lastFormConfigKey = ''
144
+
145
+ function getRenderConfigKey(cfg) {
146
+ if (!cfg) {
147
+ return ''
148
+ }
149
+ return JSON.stringify({
150
+ type: cfg.type,
151
+ title: cfg.title,
152
+ message: cfg.message,
153
+ fields: cfg.fields
154
+ })
155
+ }
156
+
157
+ const canSend = computed(() => {
158
+ return !!(inputText.value && inputText.value.trim()) || !!pendingImageUrl.value
159
+ })
160
+
161
+ const floatStyle = computed(() => {
162
+ return {
163
+ right: '32rpx',
164
+ bottom: '180rpx'
165
+ }
166
+ })
167
+
168
+ const drawerStyle = computed(() => {
169
+ return {
170
+ bottom: keyboardHeight.value + 'px'
171
+ }
172
+ })
173
+
174
+ let updateHandler = null
175
+ let openHandler = null
176
+ let closeHandler = null
177
+ let keyboardHandler = null
178
+
179
+ function initFormInputs() {
180
+ var cfg = renderConfig.value
181
+ var values = {}
182
+ if (cfg && cfg.fields && cfg.fields.length) {
183
+ cfg.fields.forEach(function (field) {
184
+ if (field.name === 'confirmed') {
185
+ values[field.name] = field.value === true || field.value === 'true' ? 'true' : 'false'
186
+ } else if (field.value !== undefined && field.value !== '') {
187
+ values[field.name] = field.value
188
+ } else if ((field.type === 'select' || field.type === 'treeSelect') && field.options && field.options.length) {
189
+ values[field.name] = field.defaultValue !== undefined ? field.defaultValue : ''
190
+ } else {
191
+ values[field.name] = field.defaultValue !== undefined ? field.defaultValue : ''
192
+ }
193
+ })
194
+ }
195
+ formInputs.value = values
196
+ }
197
+
198
+ function syncState(snapshot) {
199
+ messages.value = snapshot.messages || []
200
+ loading.value = snapshot.loading || false
201
+ uploading.value = snapshot.uploading || false
202
+ iconPickMode.value = snapshot.iconPickMode || false
203
+ pendingIconCategory.value = snapshot.pendingIconCategory || null
204
+ pendingImageUrl.value = snapshot.pendingImageUrl || ''
205
+ inputText.value = snapshot.inputText || ''
206
+ var nextCfg = snapshot.renderConfig || null
207
+ var nextKey = getRenderConfigKey(nextCfg)
208
+ renderConfig.value = nextCfg
209
+ quickQuestions.value = snapshot.quickQuestions || []
210
+ if (!nextCfg) {
211
+ lastFormConfigKey = ''
212
+ formInputs.value = {}
213
+ } else if (nextKey !== lastFormConfigKey) {
214
+ lastFormConfigKey = nextKey
215
+ initFormInputs()
216
+ }
217
+ scrollToBottom()
218
+ }
219
+
220
+ function scrollToBottom() {
221
+ nextTick(() => {
222
+ scrollIntoView.value = 'msg-' + (messages.value.length - 1)
223
+ setTimeout(() => {
224
+ scrollIntoView.value = ''
225
+ }, 300)
226
+ })
227
+ }
228
+
229
+ function checkVisible() {
230
+ const config = configModule.getConfig()
231
+ const pages = getCurrentPages()
232
+ const current = pages[pages.length - 1]
233
+ const route = current ? current.route : ''
234
+ const visiblePages = config.visiblePages || []
235
+ const shouldShow = visiblePages.some(function (page) {
236
+ return route === page || route.indexOf(page) === 0
237
+ })
238
+ visible.value = shouldShow
239
+ }
240
+
241
+ function openChat() {
242
+ if (!chatService.openConversation()) {
243
+ return
244
+ }
245
+ opened.value = true
246
+ keyboardHeight.value = 0
247
+ scrollToBottom()
248
+ }
249
+
250
+ function closeChat() {
251
+ opened.value = false
252
+ keyboardHeight.value = 0
253
+ chatService.closeConversation()
254
+ }
255
+
256
+ function onOverlayClick(e) {
257
+ if (e && e.target && e.currentTarget && e.target !== e.currentTarget) {
258
+ return
259
+ }
260
+ closeChat()
261
+ }
262
+
263
+ function onInput(e) {
264
+ inputText.value = e.detail.value
265
+ chatService.setInputText(e.detail.value)
266
+ }
267
+
268
+ function handleSend() {
269
+ chatService.handleSend().then(() => {
270
+ scrollToBottom()
271
+ })
272
+ }
273
+
274
+ function sendQuick(text) {
275
+ chatService.sendQuick(text).then(() => {
276
+ scrollToBottom()
277
+ })
278
+ }
279
+
280
+ function chooseImage() {
281
+ chatService.chooseImage().catch(function (error) {
282
+ uni.showToast({
283
+ title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
284
+ icon: 'none'
285
+ })
286
+ })
287
+ }
288
+
289
+ function pickCategoryIcon(source) {
290
+ chatService.pickCategoryIcon(source).catch(function (error) {
291
+ uni.showToast({
292
+ title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
293
+ icon: 'none'
294
+ })
295
+ })
296
+ }
297
+
298
+ function cancelIconPick() {
299
+ chatService.cancelIconPick()
300
+ }
301
+
302
+ function flattenTreeOptions(options, prefix) {
303
+ var result = []
304
+ prefix = prefix || ''
305
+ ;(options || []).forEach(function (opt) {
306
+ var label = prefix ? (prefix + ' / ' + (opt.label || opt.value)) : (opt.label || opt.value)
307
+ var children = opt.children || opt.subCategories || []
308
+ if (children.length) {
309
+ result = result.concat(flattenTreeOptions(children, label))
310
+ } else {
311
+ result.push({
312
+ label: label,
313
+ value: opt.value
314
+ })
315
+ }
316
+ })
317
+ return result
318
+ }
319
+
320
+ function getFieldOptions(field) {
321
+ var options = field.type === 'treeSelect'
322
+ ? flattenTreeOptions(field.options || [])
323
+ : (field.options || [])
324
+ return {
325
+ labels: options.map(function (opt) {
326
+ return opt.label || opt.value
327
+ }),
328
+ values: options.map(function (opt) {
329
+ return opt.value
330
+ })
331
+ }
332
+ }
333
+
334
+ function isSameFieldValue(a, b) {
335
+ if (a === undefined || a === null || a === '') {
336
+ return false
337
+ }
338
+ return String(a) === String(b)
339
+ }
340
+
341
+ function getFieldIndex(field) {
342
+ var opts = getFieldOptions(field)
343
+ var current = formInputs.value[field.name]
344
+ for (var i = 0; i < opts.values.length; i++) {
345
+ if (isSameFieldValue(opts.values[i], current)) {
346
+ return i
347
+ }
348
+ }
349
+ return 0
350
+ }
351
+
352
+ function getFieldSelectedLabel(field) {
353
+ var opts = getFieldOptions(field)
354
+ var current = formInputs.value[field.name]
355
+ for (var i = 0; i < opts.values.length; i++) {
356
+ if (isSameFieldValue(opts.values[i], current)) {
357
+ return opts.labels[i] || '请选择'
358
+ }
359
+ }
360
+ return '请选择'
361
+ }
362
+
363
+ function onFormInput(e, name) {
364
+ formInputs.value[name] = e.detail.value
365
+ }
366
+
367
+ function onFormSelect(e, field) {
368
+ var index = e.detail.value
369
+ var opts = getFieldOptions(field)
370
+ formInputs.value[field.name] = opts.values[index]
371
+ }
372
+
373
+ function onFormImageChoose(name) {
374
+ chatService.chooseImage()
375
+ .then(function (imageUrl) {
376
+ formInputs.value[name] = imageUrl
377
+ })
378
+ .catch(function (error) {
379
+ uni.showToast({
380
+ title: error && (error.message || error.msg) ? (error.message || error.msg) : '图片上传失败',
381
+ icon: 'none'
382
+ })
383
+ })
384
+ }
385
+
386
+ function onFormImageRemove(name) {
387
+ formInputs.value[name] = ''
388
+ }
389
+
390
+ function submitForm() {
391
+ chatService.submitInputs(formInputs.value)
392
+ .then(function () {
393
+ scrollToBottom()
394
+ })
395
+ .catch(function (error) {
396
+ uni.showToast({
397
+ title: error && (error.message || error.msg) ? (error.message || error.msg) : '提交失败',
398
+ icon: 'none'
399
+ })
400
+ })
401
+ }
402
+
403
+ function cancelForm() {
404
+ chatService.cancelForm()
405
+ }
406
+
407
+ function submitConfirm(confirmed) {
408
+ chatService.submitConfirm(confirmed).then(function () {
409
+ scrollToBottom()
410
+ })
411
+ }
412
+
413
+ function clearPendingImage() {
414
+ chatService.clearPendingImage()
415
+ }
416
+
417
+ function copyMessage(content) {
418
+ var text = (content || '').trim()
419
+ if (!text) {
420
+ return
421
+ }
422
+ uni.setClipboardData({
423
+ data: text,
424
+ success: function () {
425
+ uni.showToast({ title: '已复制', icon: 'none' })
426
+ }
427
+ })
428
+ }
429
+
430
+ function previewImage(current, urls) {
431
+ const list = (urls && urls.length ? urls : [current]).filter(Boolean)
432
+ if (!list.length) {
433
+ return
434
+ }
435
+ uni.previewImage({
436
+ current: current,
437
+ urls: list
438
+ })
439
+ }
440
+
441
+ onMounted(() => {
442
+ const config = configModule.getConfig()
443
+ floatIconUrl.value = config.floatIcon || ''
444
+ updateHandler = function (snapshot) {
445
+ syncState(snapshot)
446
+ }
447
+ openHandler = function () {
448
+ opened.value = true
449
+ keyboardHeight.value = 0
450
+ scrollToBottom()
451
+ }
452
+ closeHandler = function () {
453
+ opened.value = false
454
+ keyboardHeight.value = 0
455
+ }
456
+ keyboardHandler = function (res) {
457
+ keyboardHeight.value = res.height || 0
458
+ if (keyboardHeight.value > 0) {
459
+ scrollToBottom()
460
+ }
461
+ }
462
+ chatService.onUpdate(updateHandler)
463
+ chatService.onOpen(openHandler)
464
+ chatService.onClose(closeHandler)
465
+ if (typeof uni.onKeyboardHeightChange === 'function') {
466
+ uni.onKeyboardHeightChange(keyboardHandler)
467
+ }
468
+ syncState(chatService.getSnapshot())
469
+ checkVisible()
470
+ })
471
+
472
+ onUnmounted(() => {
473
+ if (updateHandler) {
474
+ chatService.offUpdate(updateHandler)
475
+ }
476
+ if (openHandler) {
477
+ chatService.offOpen(openHandler)
478
+ }
479
+ if (closeHandler) {
480
+ chatService.offClose(closeHandler)
481
+ }
482
+ if (keyboardHandler && typeof uni.offKeyboardHeightChange === 'function') {
483
+ uni.offKeyboardHeightChange(keyboardHandler)
484
+ }
485
+ })
486
+
487
+ onShow(() => {
488
+ checkVisible()
489
+ })
490
+ </script>
491
+
492
+ <style scoped>
493
+ .ly-ai-float {
494
+ position: fixed;
495
+ z-index: 9999;
496
+ width: 96rpx;
497
+ height: 96rpx;
498
+ border-radius: 50%;
499
+ background: #f84616;
500
+ display: flex;
501
+ align-items: center;
502
+ justify-content: center;
503
+ box-shadow: 0 4rpx 16rpx rgba(248, 70, 22, 0.35);
504
+ }
505
+
506
+ .ly-ai-float-icon {
507
+ width: 56rpx;
508
+ height: 56rpx;
509
+ }
510
+
511
+ .ly-ai-float-text {
512
+ color: #fff;
513
+ font-size: 28rpx;
514
+ font-weight: 600;
515
+ }
516
+
517
+ .ly-ai-overlay {
518
+ position: fixed;
519
+ top: 0;
520
+ left: 0;
521
+ right: 0;
522
+ bottom: 0;
523
+ z-index: 10000;
524
+ background: rgba(0, 0, 0, 0.4);
525
+ }
526
+
527
+ .ly-ai-drawer {
528
+ position: absolute;
529
+ left: 0;
530
+ right: 0;
531
+ bottom: 0;
532
+ height: 82vh;
533
+ background: #f5f6f8;
534
+ border-radius: 32rpx 32rpx 0 0;
535
+ display: flex;
536
+ flex-direction: column;
537
+ overflow: hidden;
538
+ transition: bottom 0.2s ease;
539
+ }
540
+
541
+ .ly-ai-header {
542
+ display: flex;
543
+ align-items: center;
544
+ justify-content: center;
545
+ padding: 24rpx 32rpx;
546
+ background: #fff;
547
+ position: relative;
548
+ border-bottom: 1rpx solid #eee;
549
+ flex-shrink: 0;
550
+ }
551
+
552
+ .ly-ai-body {
553
+ flex: 1;
554
+ min-height: 0;
555
+ overflow: hidden;
556
+ }
557
+
558
+ .ly-ai-footer {
559
+ flex-shrink: 0;
560
+ background: #fff;
561
+ }
562
+
563
+ .ly-ai-title {
564
+ font-size: 32rpx;
565
+ font-weight: 600;
566
+ color: #333;
567
+ }
568
+
569
+ .ly-ai-close {
570
+ position: absolute;
571
+ right: 32rpx;
572
+ top: 50%;
573
+ transform: translateY(-50%);
574
+ width: 56rpx;
575
+ height: 56rpx;
576
+ line-height: 52rpx;
577
+ text-align: center;
578
+ font-size: 40rpx;
579
+ color: #999;
580
+ }
581
+
582
+ .ly-ai-list {
583
+ height: 100%;
584
+ padding: 24rpx;
585
+ box-sizing: border-box;
586
+ }
587
+
588
+ .ly-ai-welcome {
589
+ background: #fff;
590
+ border-radius: 16rpx;
591
+ padding: 32rpx;
592
+ margin-bottom: 24rpx;
593
+ }
594
+
595
+ .ly-ai-welcome-title {
596
+ font-size: 32rpx;
597
+ font-weight: 600;
598
+ color: #333;
599
+ margin-bottom: 12rpx;
600
+ }
601
+
602
+ .ly-ai-welcome-desc {
603
+ font-size: 26rpx;
604
+ color: #666;
605
+ line-height: 1.6;
606
+ margin-bottom: 20rpx;
607
+ }
608
+
609
+ .ly-ai-quick {
610
+ background: #fff5f2;
611
+ color: #f84616;
612
+ font-size: 24rpx;
613
+ padding: 18rpx 24rpx;
614
+ border-radius: 12rpx;
615
+ margin-top: 16rpx;
616
+ }
617
+
618
+ .ly-ai-msg-row {
619
+ display: flex;
620
+ margin-bottom: 20rpx;
621
+ }
622
+
623
+ .ly-ai-msg-row-user {
624
+ justify-content: flex-end;
625
+ }
626
+
627
+ .ly-ai-msg-row-ai {
628
+ justify-content: flex-start;
629
+ }
630
+
631
+ .ly-ai-bubble {
632
+ max-width: 78%;
633
+ padding: 20rpx 24rpx;
634
+ border-radius: 16rpx;
635
+ word-break: break-all;
636
+ }
637
+
638
+ .ly-ai-bubble-user {
639
+ background: #f84616;
640
+ color: #fff;
641
+ border-bottom-right-radius: 4rpx;
642
+ }
643
+
644
+ .ly-ai-bubble-ai {
645
+ background: #fff;
646
+ color: #333;
647
+ border-bottom-left-radius: 4rpx;
648
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
649
+ }
650
+
651
+ .ly-ai-loading-bubble {
652
+ color: #999;
653
+ }
654
+
655
+ .ly-ai-msg-image {
656
+ width: 200rpx;
657
+ height: 200rpx;
658
+ border-radius: 12rpx;
659
+ display: block;
660
+ margin-bottom: 12rpx;
661
+ }
662
+
663
+ .ly-ai-msg-text {
664
+ font-size: 28rpx;
665
+ line-height: 1.6;
666
+ white-space: pre-wrap;
667
+ word-break: break-word;
668
+ user-select: text;
669
+ -webkit-user-select: text;
670
+ }
671
+
672
+ .ly-ai-welcome-desc {
673
+ user-select: text;
674
+ -webkit-user-select: text;
675
+ }
676
+
677
+ .ly-ai-icon-pick-bar {
678
+ padding: 24rpx;
679
+ padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
680
+ background: #fff;
681
+ border-top: 1rpx solid #eee;
682
+ flex-shrink: 0;
683
+ }
684
+
685
+ .ly-ai-icon-pick-title {
686
+ font-size: 28rpx;
687
+ color: #333;
688
+ margin-bottom: 20rpx;
689
+ text-align: center;
690
+ }
691
+
692
+ .ly-ai-icon-pick-actions {
693
+ display: flex;
694
+ gap: 16rpx;
695
+ }
696
+
697
+ .ly-ai-icon-pick-btn {
698
+ flex: 1;
699
+ height: 80rpx;
700
+ line-height: 80rpx;
701
+ text-align: center;
702
+ background: #f84616;
703
+ color: #fff;
704
+ border-radius: 12rpx;
705
+ font-size: 28rpx;
706
+ }
707
+
708
+ .ly-ai-icon-pick-btn.cancel {
709
+ background: #f5f6f8;
710
+ color: #666;
711
+ }
712
+
713
+ .ly-ai-icon-pick-btn.disabled {
714
+ opacity: 0.5;
715
+ }
716
+
717
+ .ly-ai-image-preview-bar {
718
+ display: flex;
719
+ align-items: center;
720
+ padding: 12rpx 24rpx;
721
+ background: #fff;
722
+ border-top: 1rpx solid #eee;
723
+ flex-shrink: 0;
724
+ }
725
+
726
+ .ly-ai-preview-image {
727
+ width: 96rpx;
728
+ height: 96rpx;
729
+ border-radius: 12rpx;
730
+ }
731
+
732
+ .ly-ai-preview-remove {
733
+ margin-left: 16rpx;
734
+ width: 48rpx;
735
+ height: 48rpx;
736
+ line-height: 44rpx;
737
+ text-align: center;
738
+ font-size: 36rpx;
739
+ color: #999;
740
+ background: #f5f6f8;
741
+ border-radius: 50%;
742
+ }
743
+
744
+ .ly-ai-input-bar {
745
+ display: flex;
746
+ align-items: center;
747
+ padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
748
+ background: #fff;
749
+ border-top: 1rpx solid #eee;
750
+ flex-shrink: 0;
751
+ }
752
+
753
+ .ly-ai-attach-btn {
754
+ width: 72rpx;
755
+ height: 72rpx;
756
+ line-height: 68rpx;
757
+ text-align: center;
758
+ font-size: 44rpx;
759
+ color: #666;
760
+ background: #f5f6f8;
761
+ border-radius: 50%;
762
+ margin-right: 16rpx;
763
+ flex-shrink: 0;
764
+ }
765
+
766
+ .ly-ai-attach-btn.disabled {
767
+ opacity: 0.5;
768
+ }
769
+
770
+ .ly-ai-chat-input {
771
+ flex: 1;
772
+ height: 72rpx;
773
+ background: #f5f6f8;
774
+ border-radius: 36rpx;
775
+ padding: 0 28rpx;
776
+ font-size: 28rpx;
777
+ }
778
+
779
+ .ly-ai-send-btn {
780
+ margin-left: 16rpx;
781
+ min-width: 120rpx;
782
+ height: 72rpx;
783
+ line-height: 72rpx;
784
+ text-align: center;
785
+ background: #f84616;
786
+ color: #fff;
787
+ border-radius: 36rpx;
788
+ font-size: 28rpx;
789
+ }
790
+
791
+ .ly-ai-send-btn.disabled {
792
+ opacity: 0.5;
793
+ }
794
+
795
+ .ly-ai-form-bar {
796
+ padding: 24rpx;
797
+ padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
798
+ background: #fff;
799
+ border-top: 1rpx solid #eee;
800
+ flex-shrink: 0;
801
+ max-height: 50vh;
802
+ overflow-y: auto;
803
+ }
804
+
805
+ .ly-ai-form-title {
806
+ font-size: 30rpx;
807
+ font-weight: 600;
808
+ color: #333;
809
+ margin-bottom: 12rpx;
810
+ }
811
+
812
+ .ly-ai-form-desc {
813
+ font-size: 26rpx;
814
+ color: #666;
815
+ line-height: 1.5;
816
+ margin-bottom: 24rpx;
817
+ }
818
+
819
+ .ly-ai-form-item {
820
+ margin-bottom: 24rpx;
821
+ }
822
+
823
+ .ly-ai-form-label {
824
+ display: block;
825
+ font-size: 28rpx;
826
+ color: #333;
827
+ margin-bottom: 12rpx;
828
+ }
829
+
830
+ .ly-ai-form-input {
831
+ height: 72rpx;
832
+ background: #f5f6f8;
833
+ border-radius: 12rpx;
834
+ padding: 0 24rpx;
835
+ font-size: 28rpx;
836
+ color: #333;
837
+ }
838
+
839
+ .ly-ai-form-picker {
840
+ height: 72rpx;
841
+ background: #f5f6f8;
842
+ border-radius: 12rpx;
843
+ padding: 0 24rpx;
844
+ display: flex;
845
+ align-items: center;
846
+ }
847
+
848
+ .ly-ai-form-picker-text {
849
+ font-size: 28rpx;
850
+ color: #333;
851
+ }
852
+
853
+ .ly-ai-form-image-wrap {
854
+ display: flex;
855
+ align-items: center;
856
+ }
857
+
858
+ .ly-ai-form-image {
859
+ width: 160rpx;
860
+ height: 160rpx;
861
+ border-radius: 12rpx;
862
+ }
863
+
864
+ .ly-ai-form-image-remove {
865
+ margin-left: 16rpx;
866
+ width: 48rpx;
867
+ height: 48rpx;
868
+ line-height: 44rpx;
869
+ text-align: center;
870
+ font-size: 36rpx;
871
+ color: #999;
872
+ background: #f5f6f8;
873
+ border-radius: 50%;
874
+ }
875
+
876
+ .ly-ai-form-image-btn {
877
+ width: 200rpx;
878
+ height: 160rpx;
879
+ line-height: 160rpx;
880
+ text-align: center;
881
+ background: #f5f6f8;
882
+ color: #666;
883
+ border-radius: 12rpx;
884
+ font-size: 28rpx;
885
+ }
886
+
887
+ .ly-ai-form-actions {
888
+ display: flex;
889
+ gap: 16rpx;
890
+ margin-top: 12rpx;
891
+ }
892
+
893
+ .ly-ai-form-btn {
894
+ flex: 1;
895
+ height: 80rpx;
896
+ line-height: 80rpx;
897
+ text-align: center;
898
+ border-radius: 12rpx;
899
+ font-size: 28rpx;
900
+ }
901
+
902
+ .ly-ai-form-btn.confirm {
903
+ background: #f84616;
904
+ color: #fff;
905
+ }
906
+
907
+ .ly-ai-form-btn.cancel {
908
+ background: #f5f6f8;
909
+ color: #666;
910
+ }
911
+
912
+ .ly-ai-form-btn.disabled,
913
+ .ly-ai-form-image-btn.disabled {
914
+ opacity: 0.5;
915
+ }
916
+ </style>