@opentiny/vue-docs 3.24.2 → 3.24.4
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.
- package/package.json +10 -10
- package/src/App.vue +2 -1
- package/src/components/MessageCard.vue +117 -117
- package/src/views/comprehensive/index.vue +5 -16
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentiny/vue-docs",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.24.
|
|
4
|
+
"version": "3.24.4",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@docsearch/css": "^3.8.0",
|
|
8
8
|
"@docsearch/js": "^3.8.0",
|
|
9
9
|
"@docsearch/react": "npm:@docsearch/css",
|
|
10
|
-
"@opentiny/next-vue": "0.0.1",
|
|
10
|
+
"@opentiny/next-vue": "^0.0.1",
|
|
11
11
|
"@opentiny/tiny-robot": "0.2.1",
|
|
12
12
|
"@opentiny/tiny-robot-kit": "0.2.1",
|
|
13
13
|
"@opentiny/tiny-robot-svgs": "0.2.1",
|
|
14
|
-
"@opentiny/tiny-vue-mcp": "0.0.1
|
|
14
|
+
"@opentiny/tiny-vue-mcp": "^0.0.1",
|
|
15
15
|
"@opentiny/vue-repl": "^1.1.2",
|
|
16
16
|
"@opentiny/vue-vite-import": "~1.2.0",
|
|
17
17
|
"@unocss/reset": "0.38.2",
|
|
@@ -30,22 +30,22 @@
|
|
|
30
30
|
"vue-i18n": "~9.14.3",
|
|
31
31
|
"vue-router": "4.1.5",
|
|
32
32
|
"@opentiny/utils": "~3.24.0",
|
|
33
|
-
"@opentiny/vue-design-aurora": "~3.24.0",
|
|
34
|
-
"@opentiny/vue": "~3.24.0",
|
|
35
33
|
"@opentiny/vue-common": "~3.24.0",
|
|
34
|
+
"@opentiny/vue": "~3.24.0",
|
|
35
|
+
"@opentiny/vue-design-smb": "~3.24.0",
|
|
36
36
|
"@opentiny/vue-design-saas": "~3.24.0",
|
|
37
|
+
"@opentiny/vue-design-aurora": "~3.24.0",
|
|
37
38
|
"@opentiny/vue-flowchart": "~3.24.0",
|
|
38
39
|
"@opentiny/vue-directive": "~3.24.0",
|
|
39
|
-
"@opentiny/vue-design-smb": "~3.24.0",
|
|
40
|
-
"@opentiny/vue-icon": "~3.24.0",
|
|
41
40
|
"@opentiny/vue-hooks": "~3.24.0",
|
|
41
|
+
"@opentiny/vue-icon": "~3.24.0",
|
|
42
42
|
"@opentiny/vue-huicharts": "~3.24.0",
|
|
43
|
-
"@opentiny/vue-icon-multicolor": "~3.24.0",
|
|
44
43
|
"@opentiny/vue-icon-saas": "~3.24.0",
|
|
45
|
-
"@opentiny/vue-
|
|
44
|
+
"@opentiny/vue-icon-multicolor": "~3.24.0",
|
|
46
45
|
"@opentiny/vue-locale": "~3.24.0",
|
|
47
|
-
"@opentiny/vue-
|
|
46
|
+
"@opentiny/vue-modal": "~3.24.0",
|
|
48
47
|
"@opentiny/vue-renderless": "~3.24.0",
|
|
48
|
+
"@opentiny/vue-theme": "~3.24.0",
|
|
49
49
|
"@opentiny/vue-theme-saas": "~3.24.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
package/src/App.vue
CHANGED
|
@@ -33,13 +33,14 @@ export default defineComponent({
|
|
|
33
33
|
|
|
34
34
|
const { sessionId } = useNextClient({
|
|
35
35
|
clientInfo: { name: 'tiny-vue-website', version: '1.0.0' },
|
|
36
|
-
proxyOptions: { url: 'https://
|
|
36
|
+
proxyOptions: { url: 'https://agent.icjs.ink/sse', token: '', sessionId: $session.sessionId }
|
|
37
37
|
})
|
|
38
38
|
|
|
39
39
|
watch(
|
|
40
40
|
() => sessionId.value,
|
|
41
41
|
(newVal) => {
|
|
42
42
|
if (newVal) {
|
|
43
|
+
$session.sessionId = newVal
|
|
43
44
|
globalConversation.sessionId = newVal
|
|
44
45
|
}
|
|
45
46
|
}
|
|
@@ -1,117 +1,117 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="message-card" :class="role">
|
|
3
|
-
<div class="avatar">
|
|
4
|
-
<component :is="avatarIcon" class="avatar-icon" />
|
|
5
|
-
</div>
|
|
6
|
-
<div class="content">
|
|
7
|
-
<div class="role-name">{{ roleName }}</div>
|
|
8
|
-
<div class="message">{{ message }}</div>
|
|
9
|
-
<div class="time">{{ formatTime }}</div>
|
|
10
|
-
</div>
|
|
11
|
-
</div>
|
|
12
|
-
</template>
|
|
13
|
-
|
|
14
|
-
<script setup lang="ts">
|
|
15
|
-
import { computed } from 'vue'
|
|
16
|
-
import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
|
|
17
|
-
|
|
18
|
-
interface Props {
|
|
19
|
-
role: 'user' | 'assistant'
|
|
20
|
-
message: string
|
|
21
|
-
timestamp: number
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const props = defineProps<Props>()
|
|
25
|
-
|
|
26
|
-
const roleName = computed(() => (props.role === 'assistant' ? '智能助手' : '我'))
|
|
27
|
-
|
|
28
|
-
const avatarIcon = computed(() => (props.role === 'assistant' ? IconAi : IconUser))
|
|
29
|
-
|
|
30
|
-
const formatTime = computed(() => {
|
|
31
|
-
const date = new Date(props.timestamp)
|
|
32
|
-
return date.toLocaleTimeString('zh-CN', {
|
|
33
|
-
hour: '2-digit',
|
|
34
|
-
minute: '2-digit',
|
|
35
|
-
hour12: false
|
|
36
|
-
})
|
|
37
|
-
})
|
|
38
|
-
</script>
|
|
39
|
-
|
|
40
|
-
<style scoped lang="less">
|
|
41
|
-
.message-card {
|
|
42
|
-
display: flex;
|
|
43
|
-
margin: 16px;
|
|
44
|
-
gap: 12px;
|
|
45
|
-
max-width: 80%;
|
|
46
|
-
|
|
47
|
-
&.assistant {
|
|
48
|
-
margin-right: auto;
|
|
49
|
-
|
|
50
|
-
.content {
|
|
51
|
-
background-color: #f0f2f5;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.avatar-icon {
|
|
55
|
-
color: #2080f0;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&.user {
|
|
60
|
-
margin-left: auto;
|
|
61
|
-
flex-direction: row-reverse;
|
|
62
|
-
|
|
63
|
-
.content {
|
|
64
|
-
background-color: #e8f5e9;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.avatar-icon {
|
|
68
|
-
color: #18a058;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.avatar {
|
|
73
|
-
width: 40px;
|
|
74
|
-
height: 40px;
|
|
75
|
-
border-radius: 50%;
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
flex-shrink: 0;
|
|
78
|
-
display: flex;
|
|
79
|
-
align-items: center;
|
|
80
|
-
justify-content: center;
|
|
81
|
-
background-color: #f5f7fa;
|
|
82
|
-
|
|
83
|
-
.avatar-icon {
|
|
84
|
-
width: 24px;
|
|
85
|
-
height: 24px;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.content {
|
|
90
|
-
padding: 12px;
|
|
91
|
-
border-radius: 12px;
|
|
92
|
-
position: relative;
|
|
93
|
-
min-width: 120px;
|
|
94
|
-
max-width: calc(100% - 60px);
|
|
95
|
-
|
|
96
|
-
.role-name {
|
|
97
|
-
font-size: 14px;
|
|
98
|
-
color: #666;
|
|
99
|
-
margin-bottom: 4px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.message {
|
|
103
|
-
font-size: 16px;
|
|
104
|
-
line-height: 1.5;
|
|
105
|
-
word-break: break-word;
|
|
106
|
-
white-space: pre-wrap;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.time {
|
|
110
|
-
font-size: 12px;
|
|
111
|
-
color: #999;
|
|
112
|
-
margin-top: 4px;
|
|
113
|
-
text-align: right;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="message-card" :class="role">
|
|
3
|
+
<div class="avatar">
|
|
4
|
+
<component :is="avatarIcon" class="avatar-icon" />
|
|
5
|
+
</div>
|
|
6
|
+
<div class="content">
|
|
7
|
+
<div class="role-name">{{ roleName }}</div>
|
|
8
|
+
<div class="message">{{ message }}</div>
|
|
9
|
+
<div class="time">{{ formatTime }}</div>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
import { computed } from 'vue'
|
|
16
|
+
import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
|
|
17
|
+
|
|
18
|
+
interface Props {
|
|
19
|
+
role: 'user' | 'assistant'
|
|
20
|
+
message: string
|
|
21
|
+
timestamp: number
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const props = defineProps<Props>()
|
|
25
|
+
|
|
26
|
+
const roleName = computed(() => (props.role === 'assistant' ? '智能助手' : '我'))
|
|
27
|
+
|
|
28
|
+
const avatarIcon = computed(() => (props.role === 'assistant' ? IconAi : IconUser))
|
|
29
|
+
|
|
30
|
+
const formatTime = computed(() => {
|
|
31
|
+
const date = new Date(props.timestamp)
|
|
32
|
+
return date.toLocaleTimeString('zh-CN', {
|
|
33
|
+
hour: '2-digit',
|
|
34
|
+
minute: '2-digit',
|
|
35
|
+
hour12: false
|
|
36
|
+
})
|
|
37
|
+
})
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style scoped lang="less">
|
|
41
|
+
.message-card {
|
|
42
|
+
display: flex;
|
|
43
|
+
margin: 16px;
|
|
44
|
+
gap: 12px;
|
|
45
|
+
max-width: 80%;
|
|
46
|
+
|
|
47
|
+
&.assistant {
|
|
48
|
+
margin-right: auto;
|
|
49
|
+
|
|
50
|
+
.content {
|
|
51
|
+
background-color: #f0f2f5;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.avatar-icon {
|
|
55
|
+
color: #2080f0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&.user {
|
|
60
|
+
margin-left: auto;
|
|
61
|
+
flex-direction: row-reverse;
|
|
62
|
+
|
|
63
|
+
.content {
|
|
64
|
+
background-color: #e8f5e9;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.avatar-icon {
|
|
68
|
+
color: #18a058;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.avatar {
|
|
73
|
+
width: 40px;
|
|
74
|
+
height: 40px;
|
|
75
|
+
border-radius: 50%;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
flex-shrink: 0;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
background-color: #f5f7fa;
|
|
82
|
+
|
|
83
|
+
.avatar-icon {
|
|
84
|
+
width: 24px;
|
|
85
|
+
height: 24px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.content {
|
|
90
|
+
padding: 12px;
|
|
91
|
+
border-radius: 12px;
|
|
92
|
+
position: relative;
|
|
93
|
+
min-width: 120px;
|
|
94
|
+
max-width: calc(100% - 60px);
|
|
95
|
+
|
|
96
|
+
.role-name {
|
|
97
|
+
font-size: 14px;
|
|
98
|
+
color: #666;
|
|
99
|
+
margin-bottom: 4px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.message {
|
|
103
|
+
font-size: 16px;
|
|
104
|
+
line-height: 1.5;
|
|
105
|
+
word-break: break-word;
|
|
106
|
+
white-space: pre-wrap;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.time {
|
|
110
|
+
font-size: 12px;
|
|
111
|
+
color: #999;
|
|
112
|
+
margin-top: 4px;
|
|
113
|
+
text-align: right;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
</style>
|
|
@@ -96,7 +96,7 @@ watch(
|
|
|
96
96
|
const encryptedId = CryptoJS.AES.encrypt(newVal, 'secret-session-id').toString()
|
|
97
97
|
|
|
98
98
|
const secretId = encodeURIComponent(encryptedId)
|
|
99
|
-
sessionUrl.value =
|
|
99
|
+
sessionUrl.value = `https://agent.icjs.ink?id=${secretId}`
|
|
100
100
|
}
|
|
101
101
|
},
|
|
102
102
|
{ immediate: true }
|
|
@@ -202,9 +202,7 @@ watch(
|
|
|
202
202
|
border-radius: 12px;
|
|
203
203
|
padding: 32px;
|
|
204
204
|
width: 460px;
|
|
205
|
-
box-shadow:
|
|
206
|
-
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
207
|
-
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
205
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
208
206
|
}
|
|
209
207
|
|
|
210
208
|
.qr-modal-header {
|
|
@@ -267,22 +265,13 @@ watch(
|
|
|
267
265
|
|
|
268
266
|
@keyframes glow {
|
|
269
267
|
0% {
|
|
270
|
-
box-shadow:
|
|
271
|
-
0 0 5px rgba(22, 119, 255, 0.2),
|
|
272
|
-
0 0 10px rgba(22, 119, 255, 0.2),
|
|
273
|
-
0 0 15px rgba(22, 119, 255, 0.2);
|
|
268
|
+
box-shadow: 0 0 5px rgba(22, 119, 255, 0.2), 0 0 10px rgba(22, 119, 255, 0.2), 0 0 15px rgba(22, 119, 255, 0.2);
|
|
274
269
|
}
|
|
275
270
|
50% {
|
|
276
|
-
box-shadow:
|
|
277
|
-
0 0 10px rgba(22, 119, 255, 0.3),
|
|
278
|
-
0 0 20px rgba(22, 119, 255, 0.3),
|
|
279
|
-
0 0 30px rgba(22, 119, 255, 0.3);
|
|
271
|
+
box-shadow: 0 0 10px rgba(22, 119, 255, 0.3), 0 0 20px rgba(22, 119, 255, 0.3), 0 0 30px rgba(22, 119, 255, 0.3);
|
|
280
272
|
}
|
|
281
273
|
100% {
|
|
282
|
-
box-shadow:
|
|
283
|
-
0 0 5px rgba(22, 119, 255, 0.2),
|
|
284
|
-
0 0 10px rgba(22, 119, 255, 0.2),
|
|
285
|
-
0 0 15px rgba(22, 119, 255, 0.2);
|
|
274
|
+
box-shadow: 0 0 5px rgba(22, 119, 255, 0.2), 0 0 10px rgba(22, 119, 255, 0.2), 0 0 15px rgba(22, 119, 255, 0.2);
|
|
286
275
|
}
|
|
287
276
|
}
|
|
288
277
|
|