@opentiny/vue-docs 3.24.3 → 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.
Files changed (3) hide show
  1. package/package.json +7 -7
  2. package/src/App.vue +1 -0
  3. package/src/components/MessageCard.vue +117 -117
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@opentiny/vue-docs",
3
3
  "type": "module",
4
- "version": "3.24.3",
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-alpha.3",
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",
@@ -32,20 +32,20 @@
32
32
  "@opentiny/utils": "~3.24.0",
33
33
  "@opentiny/vue-common": "~3.24.0",
34
34
  "@opentiny/vue": "~3.24.0",
35
- "@opentiny/vue-design-aurora": "~3.24.0",
36
35
  "@opentiny/vue-design-smb": "~3.24.0",
37
36
  "@opentiny/vue-design-saas": "~3.24.0",
38
- "@opentiny/vue-directive": "~3.24.0",
37
+ "@opentiny/vue-design-aurora": "~3.24.0",
39
38
  "@opentiny/vue-flowchart": "~3.24.0",
39
+ "@opentiny/vue-directive": "~3.24.0",
40
40
  "@opentiny/vue-hooks": "~3.24.0",
41
41
  "@opentiny/vue-icon": "~3.24.0",
42
42
  "@opentiny/vue-huicharts": "~3.24.0",
43
+ "@opentiny/vue-icon-saas": "~3.24.0",
43
44
  "@opentiny/vue-icon-multicolor": "~3.24.0",
44
45
  "@opentiny/vue-locale": "~3.24.0",
45
46
  "@opentiny/vue-modal": "~3.24.0",
46
- "@opentiny/vue-theme": "~3.24.0",
47
- "@opentiny/vue-icon-saas": "~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
@@ -40,6 +40,7 @@ export default defineComponent({
40
40
  () => sessionId.value,
41
41
  (newVal) => {
42
42
  if (newVal) {
43
+ $session.sessionId = newVal
43
44
  globalConversation.sessionId = newVal
44
45
  }
45
46
  }
package/src/components/MessageCard.vue CHANGED
@@ -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>