@liujitcn/kratos-uni-app-system 0.0.1

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.
@@ -0,0 +1,446 @@
1
+ <script setup lang="ts">
2
+ import type { AiShortcut } from '../../../../rpc/base/v1/ai_tool'
3
+
4
+ defineProps<{
5
+ greetingMessage: string
6
+ loading: boolean
7
+ shortcuts: AiShortcut[]
8
+ canRefresh: boolean
9
+ }>()
10
+
11
+ const emit = defineEmits<{
12
+ refresh: []
13
+ 'shortcut-tap': [shortcut: AiShortcut]
14
+ }>()
15
+ </script>
16
+
17
+ <template>
18
+ <view class="welcome-panel">
19
+ <view class="welcome-row is-hello">
20
+ <view class="ai-avatar">
21
+ <view class="ai-avatar__halo"></view>
22
+ <view class="ai-avatar__hair-back"></view>
23
+ <view class="ai-avatar__face">
24
+ <view class="ai-avatar__bang"></view>
25
+ <view class="ai-avatar__eyes">
26
+ <view></view>
27
+ <view></view>
28
+ </view>
29
+ <view class="ai-avatar__blush is-left"></view>
30
+ <view class="ai-avatar__blush is-right"></view>
31
+ <view class="ai-avatar__smile"></view>
32
+ </view>
33
+ <view class="ai-avatar__hair-side is-left"></view>
34
+ <view class="ai-avatar__hair-side is-right"></view>
35
+ <view class="ai-avatar__body"></view>
36
+ <view class="ai-avatar__bow"></view>
37
+ <view class="ai-avatar__spark"></view>
38
+ </view>
39
+ <view class="welcome-bubble is-hello">您好,AI助手为您服务!</view>
40
+ </view>
41
+ <view class="welcome-bubble is-intro">{{ greetingMessage }}</view>
42
+
43
+ <view class="prompt-card">
44
+ <view class="prompt-card__head">
45
+ <view>
46
+ <view class="prompt-card__eyebrow">快捷操作</view>
47
+ <view class="prompt-card__title">您可以这样问</view>
48
+ </view>
49
+ <button v-if="canRefresh" class="prompt-refresh" hover-class="none" @tap="emit('refresh')">
50
+ <text>换一换</text>
51
+ <uni-icons type="refresh" size="25" color="#00a96b" />
52
+ </button>
53
+ </view>
54
+ <view v-if="loading" class="prompt-loading">正在加载...</view>
55
+ <view v-else-if="!shortcuts.length" class="prompt-loading">暂无可用快捷助手</view>
56
+ <template v-else>
57
+ <button
58
+ v-for="(shortcut, shortcutIndex) in shortcuts"
59
+ :key="shortcut.key || shortcut.title"
60
+ class="prompt-item"
61
+ hover-class="none"
62
+ @tap="emit('shortcut-tap', shortcut)"
63
+ >
64
+ <text class="prompt-index">{{ shortcutIndex + 1 }}</text>
65
+ <view class="prompt-content">
66
+ <text class="prompt-text">{{ shortcut.title }}</text>
67
+ <text class="prompt-meta">{{ shortcut.group || '通用助手' }}</text>
68
+ </view>
69
+ <uni-icons type="right" size="20" color="#9aa0aa" />
70
+ </button>
71
+ </template>
72
+ </view>
73
+ </view>
74
+ </template>
75
+
76
+ <style lang="scss" scoped>
77
+ .prompt-refresh,
78
+ .prompt-item {
79
+ padding: 0;
80
+ margin: 0;
81
+ border-radius: 0;
82
+ background: transparent;
83
+ line-height: normal;
84
+
85
+ &::after {
86
+ border: none;
87
+ }
88
+ }
89
+
90
+ .welcome-panel {
91
+ padding-bottom: 32rpx;
92
+ }
93
+
94
+ .welcome-row {
95
+ display: flex;
96
+ align-items: center;
97
+ }
98
+
99
+ .welcome-row.is-hello {
100
+ margin-left: 6rpx;
101
+ }
102
+
103
+ .ai-avatar {
104
+ position: relative;
105
+ z-index: 1;
106
+ flex-shrink: 0;
107
+ width: 114rpx;
108
+ height: 114rpx;
109
+ margin-right: -42rpx;
110
+ overflow: hidden;
111
+ border-radius: 34rpx;
112
+ background: linear-gradient(180deg, #fff 0%, #f5f8fb 100%);
113
+ box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.08);
114
+ box-sizing: border-box;
115
+ animation: ai-avatar-float 3.8s ease-in-out infinite;
116
+ }
117
+
118
+ .ai-avatar__halo {
119
+ position: absolute;
120
+ top: 8rpx;
121
+ left: 16rpx;
122
+ width: 82rpx;
123
+ height: 82rpx;
124
+ border-radius: 50%;
125
+ background: radial-gradient(circle, rgba(255, 226, 218, 0.82) 0%, rgba(255, 255, 255, 0) 66%);
126
+ animation: ai-avatar-glow 2.8s ease-in-out infinite;
127
+ }
128
+
129
+ .ai-avatar__hair-back {
130
+ position: absolute;
131
+ top: 15rpx;
132
+ left: 28rpx;
133
+ width: 58rpx;
134
+ height: 66rpx;
135
+ border-radius: 34rpx 34rpx 26rpx 26rpx;
136
+ background: linear-gradient(160deg, #6b3a33 0%, #281c22 88%);
137
+ }
138
+
139
+ .ai-avatar__face {
140
+ position: absolute;
141
+ top: 27rpx;
142
+ left: 31rpx;
143
+ z-index: 2;
144
+ width: 52rpx;
145
+ height: 55rpx;
146
+ border-radius: 24rpx 24rpx 26rpx 26rpx;
147
+ background: linear-gradient(180deg, #ffe5d6 0%, #ffd3c2 100%);
148
+ box-shadow: inset 0 -3rpx 0 rgba(219, 119, 103, 0.12);
149
+ }
150
+
151
+ .ai-avatar__bang {
152
+ position: absolute;
153
+ top: -12rpx;
154
+ left: 0;
155
+ width: 56rpx;
156
+ height: 25rpx;
157
+ border-radius: 28rpx 26rpx 18rpx 12rpx;
158
+ background: linear-gradient(145deg, #5b342f 0%, #2a1f27 100%);
159
+ transform: rotate(-5deg);
160
+ }
161
+
162
+ .ai-avatar__eyes {
163
+ display: flex;
164
+ justify-content: space-between;
165
+ width: 26rpx;
166
+ margin: 22rpx auto 0;
167
+ }
168
+
169
+ .ai-avatar__eyes view {
170
+ width: 6rpx;
171
+ height: 9rpx;
172
+ border-radius: 50%;
173
+ background-color: #38262b;
174
+ animation: ai-avatar-blink 4.6s ease-in-out infinite;
175
+ }
176
+
177
+ .ai-avatar__blush {
178
+ position: absolute;
179
+ top: 34rpx;
180
+ width: 10rpx;
181
+ height: 5rpx;
182
+ border-radius: 50%;
183
+ background-color: rgba(246, 121, 118, 0.32);
184
+ }
185
+
186
+ .ai-avatar__blush.is-left {
187
+ left: 9rpx;
188
+ }
189
+
190
+ .ai-avatar__blush.is-right {
191
+ right: 9rpx;
192
+ }
193
+
194
+ .ai-avatar__smile {
195
+ width: 18rpx;
196
+ height: 9rpx;
197
+ margin: 8rpx auto 0;
198
+ border-bottom: 3rpx solid #d56f62;
199
+ border-radius: 0 0 18rpx 18rpx;
200
+ }
201
+
202
+ .ai-avatar__hair-side {
203
+ position: absolute;
204
+ top: 42rpx;
205
+ z-index: 1;
206
+ width: 15rpx;
207
+ height: 39rpx;
208
+ border-radius: 16rpx;
209
+ background: linear-gradient(180deg, #4d2d2b 0%, #231b23 100%);
210
+ }
211
+
212
+ .ai-avatar__hair-side.is-left {
213
+ left: 22rpx;
214
+ transform: rotate(9deg);
215
+ }
216
+
217
+ .ai-avatar__hair-side.is-right {
218
+ right: 22rpx;
219
+ transform: rotate(-9deg);
220
+ }
221
+
222
+ .ai-avatar__body {
223
+ position: absolute;
224
+ left: 29rpx;
225
+ bottom: 4rpx;
226
+ z-index: 1;
227
+ width: 56rpx;
228
+ height: 34rpx;
229
+ border-radius: 26rpx 26rpx 10rpx 10rpx;
230
+ background: linear-gradient(180deg, #ff5d58 0%, #df292d 100%);
231
+ }
232
+
233
+ .ai-avatar__bow {
234
+ position: absolute;
235
+ left: 46rpx;
236
+ bottom: 24rpx;
237
+ z-index: 3;
238
+ width: 22rpx;
239
+ height: 12rpx;
240
+ border-radius: 12rpx;
241
+ background: linear-gradient(90deg, #fff 0 40%, #f7dde0 40% 60%, #fff 60% 100%);
242
+ }
243
+
244
+ .ai-avatar__spark {
245
+ position: absolute;
246
+ top: 14rpx;
247
+ right: 18rpx;
248
+ z-index: 3;
249
+ width: 10rpx;
250
+ height: 10rpx;
251
+ border-radius: 50%;
252
+ background-color: #ffd35a;
253
+ opacity: 0.9;
254
+ animation: ai-avatar-spark 1.8s ease-in-out infinite;
255
+ }
256
+
257
+ @keyframes ai-avatar-float {
258
+ 0%,
259
+ 100% {
260
+ transform: translateY(0);
261
+ }
262
+
263
+ 50% {
264
+ transform: translateY(-4rpx);
265
+ }
266
+ }
267
+
268
+ @keyframes ai-avatar-glow {
269
+ 0%,
270
+ 100% {
271
+ opacity: 0.72;
272
+ transform: scale(1);
273
+ }
274
+
275
+ 50% {
276
+ opacity: 1;
277
+ transform: scale(1.04);
278
+ }
279
+ }
280
+
281
+ @keyframes ai-avatar-blink {
282
+ 0%,
283
+ 88%,
284
+ 100% {
285
+ transform: scaleY(1);
286
+ }
287
+
288
+ 92%,
289
+ 95% {
290
+ transform: scaleY(0.18);
291
+ }
292
+ }
293
+
294
+ @keyframes ai-avatar-spark {
295
+ 0%,
296
+ 100% {
297
+ opacity: 0.45;
298
+ transform: scale(0.8);
299
+ }
300
+
301
+ 50% {
302
+ opacity: 1;
303
+ transform: scale(1.18);
304
+ }
305
+ }
306
+
307
+ .welcome-bubble {
308
+ color: #111;
309
+ background-color: #fff;
310
+ box-shadow: 0 10rpx 32rpx rgba(15, 23, 42, 0.04);
311
+ box-sizing: border-box;
312
+ }
313
+
314
+ .welcome-bubble.is-hello {
315
+ min-width: 350rpx;
316
+ height: 96rpx;
317
+ padding: 0 34rpx 0 78rpx;
318
+ border-radius: 18rpx;
319
+ font-size: 30rpx;
320
+ line-height: 96rpx;
321
+ }
322
+
323
+ .welcome-bubble.is-intro {
324
+ display: flex;
325
+ align-items: center;
326
+ min-height: 96rpx;
327
+ margin-top: 30rpx;
328
+ padding: 24rpx 28rpx;
329
+ border-radius: 18rpx;
330
+ font-size: 29rpx;
331
+ line-height: 44rpx;
332
+ }
333
+
334
+ .prompt-card {
335
+ margin-top: 34rpx;
336
+ padding: 30rpx 28rpx 24rpx;
337
+ border: 1rpx solid #e7ecef;
338
+ border-radius: 10rpx;
339
+ background: linear-gradient(180deg, rgba(0, 169, 107, 0.05), rgba(255, 255, 255, 0) 38%), #fff;
340
+ box-shadow: 0 10rpx 34rpx rgba(15, 23, 42, 0.05);
341
+ box-sizing: border-box;
342
+ }
343
+
344
+ .prompt-card__head {
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: space-between;
348
+ gap: 24rpx;
349
+ margin-bottom: 18rpx;
350
+ }
351
+
352
+ .prompt-card__eyebrow {
353
+ color: #00a96b;
354
+ font-size: 22rpx;
355
+ font-weight: 600;
356
+ line-height: 30rpx;
357
+ }
358
+
359
+ .prompt-card__title {
360
+ color: #111;
361
+ font-size: 31rpx;
362
+ font-weight: 700;
363
+ line-height: 42rpx;
364
+ }
365
+
366
+ .prompt-refresh {
367
+ flex-shrink: 0;
368
+ display: flex;
369
+ align-items: center;
370
+ gap: 14rpx;
371
+ height: 50rpx;
372
+ color: #00a96b;
373
+ font-size: 25rpx;
374
+ line-height: 50rpx;
375
+ }
376
+
377
+ .prompt-loading {
378
+ padding: 32rpx 0;
379
+ color: #8d929c;
380
+ font-size: 26rpx;
381
+ line-height: 38rpx;
382
+ }
383
+
384
+ .prompt-item {
385
+ display: flex;
386
+ align-items: center;
387
+ width: 100%;
388
+ min-height: 96rpx;
389
+ padding: 16rpx 16rpx 16rpx 0;
390
+ border-top: 1rpx solid #edf0f2;
391
+ color: #111;
392
+ text-align: left;
393
+ box-sizing: border-box;
394
+ }
395
+
396
+ .prompt-item:first-of-type {
397
+ border-top: none;
398
+ }
399
+
400
+ .prompt-index {
401
+ flex-shrink: 0;
402
+ width: 36rpx;
403
+ height: 36rpx;
404
+ margin-right: 24rpx;
405
+ border-radius: 8rpx;
406
+ color: #00a96b;
407
+ font-size: 24rpx;
408
+ font-weight: 700;
409
+ line-height: 34rpx;
410
+ text-align: center;
411
+ background-color: #e7f7f2;
412
+ box-sizing: border-box;
413
+ }
414
+
415
+ .prompt-content {
416
+ flex: 1;
417
+ min-width: 0;
418
+ display: flex;
419
+ flex-direction: column;
420
+ gap: 4rpx;
421
+ }
422
+
423
+ .prompt-text {
424
+ min-width: 0;
425
+ overflow: hidden;
426
+ text-overflow: ellipsis;
427
+ white-space: nowrap;
428
+ color: #111;
429
+ font-size: 29rpx;
430
+ line-height: 40rpx;
431
+ }
432
+
433
+ .prompt-meta {
434
+ min-width: 0;
435
+ overflow: hidden;
436
+ text-overflow: ellipsis;
437
+ white-space: nowrap;
438
+ color: #8d929c;
439
+ font-size: 22rpx;
440
+ line-height: 30rpx;
441
+ }
442
+
443
+ .prompt-item .uni-icons {
444
+ flex-shrink: 0;
445
+ }
446
+ </style>