vue-element-ui-x 1.0.1 → 1.0.2

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 (40) hide show
  1. package/lib/components/Attachments/index.js +11 -11
  2. package/lib/components/Bubble/index.js +30 -43
  3. package/lib/components/BubbleList/index.js +47 -77
  4. package/lib/components/Conversations/index.js +9 -9
  5. package/lib/components/FilesCard/index.js +1 -1
  6. package/lib/components/Prompts/index.js +21 -21
  7. package/lib/components/Sender/index.js +50 -49
  8. package/lib/components/Thinking/index.js +12 -18
  9. package/lib/components/ThoughtChain/index.js +23 -27
  10. package/lib/components/Typewriter/index.js +13 -17
  11. package/lib/components/Welcome/index.js +1 -1
  12. package/lib/index.common.js +1 -1
  13. package/lib/index.esm.js +1 -1
  14. package/lib/index.js +161 -196
  15. package/lib/index.umd.js +1 -1
  16. package/package.json +12 -9
  17. package/src/components/Attachments/src/main.vue +2 -10
  18. package/src/components/Bubble/src/main.vue +8 -19
  19. package/src/components/BubbleList/src/main.vue +2 -19
  20. package/src/components/Conversations/src/main.vue +0 -41
  21. package/src/components/Prompts/src/main.vue +248 -248
  22. package/src/components/Sender/src/components/LoadingButton.vue +37 -39
  23. package/src/components/Sender/src/components/SpeechLoadingButton.vue +41 -43
  24. package/src/components/Sender/src/main.vue +1 -0
  25. package/src/components/Thinking/src/main.vue +3 -4
  26. package/src/components/ThoughtChain/src/main.vue +1 -3
  27. package/src/components/Typewriter/src/main.vue +3 -7
  28. package/src/components/Welcome/src/main.vue +151 -151
  29. package/src/styles/Attachments.scss +236 -236
  30. package/src/styles/Bubble.scss +5 -4
  31. package/src/styles/BubbleList.scss +148 -148
  32. package/src/styles/Conversations.scss +1 -1
  33. package/src/styles/FilesCard.scss +222 -221
  34. package/src/styles/Prompts.scss +197 -195
  35. package/src/styles/Sender.scss +29 -18
  36. package/src/styles/Thinking.scss +36 -6
  37. package/src/styles/ThoughtChain.scss +113 -113
  38. package/src/styles/Typewriter.scss +66 -66
  39. package/src/styles/var.scss +4 -5
  40. package/src/theme/var.scss +183 -72
package/src/styles/FilesCard.scss CHANGED
@@ -1,221 +1,222 @@
1
- @import '~element-ui/packages/theme-chalk/src/common/var';
2
-
3
- .el-x-filescard {
4
- width: fit-content;
5
- padding: 12px;
6
- display: flex;
7
- flex-wrap: nowrap;
8
- gap: 8px;
9
- align-items: center;
10
- border-radius: 8px;
11
- position: relative;
12
- background: rgba(0, 0, 0, 0.06);
13
- max-width: var(--elx-files-card-max-width);
14
-
15
- .el-x-filescard-progress {
16
- position: absolute;
17
- top: 0;
18
- left: 0;
19
- bottom: 0;
20
- background: rgba(0, 0, 0, 0.08);
21
- border-radius: 8px;
22
- transition: width 0.2s ease;
23
- }
24
-
25
- .el-x-filescard-delete-icon {
26
- position: absolute;
27
- top: -8px;
28
- right: -6px;
29
- cursor: pointer;
30
- color: rgba(0, 0, 0, 0.4);
31
- display: none;
32
-
33
- &:hover {
34
- color: #ff4d4f;
35
- }
36
- }
37
-
38
- &:hover .el-x-filescard-delete-icon {
39
- display: block;
40
- }
41
- }
42
-
43
- .el-x-filescard-square {
44
- padding: 0;
45
- margin: 0;
46
- }
47
-
48
- .el-x-filescard-icon {
49
- flex: none;
50
- font-size: var(--elx-files-card-icon-size);
51
- }
52
-
53
- .el-x-filescard-img {
54
- flex: none;
55
- width: var(--elx-files-card-icon-size);
56
- height: var(--elx-files-card-icon-size);
57
- border-radius: 8px;
58
- object-fit: cover;
59
- }
60
-
61
- .el-x-filescard-content {
62
- flex: auto;
63
- min-width: 0;
64
- display: flex;
65
- flex-direction: column;
66
- align-items: stretch;
67
- justify-content: space-between;
68
- height: 100%;
69
-
70
- .el-x-filescard-name {
71
- display: flex;
72
- flex-wrap: nowrap;
73
- max-width: 100%;
74
- font-size: 14px;
75
-
76
- .el-x-filescard-name-prefix {
77
- flex: 0 1 auto;
78
- min-width: 0;
79
- overflow: hidden;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- }
83
-
84
- .el-x-filescard-name-suffix {
85
- flex: none;
86
- }
87
- }
88
-
89
- .el-x-filescard-description {
90
- flex: none;
91
- min-width: 0;
92
- overflow: hidden;
93
- text-overflow: ellipsis;
94
- white-space: nowrap;
95
- color: rgba(0, 0, 0, 0.4);
96
- font-size: 12px;
97
- }
98
-
99
- .el-x-filescard-description-error {
100
- color: #ff4d4f;
101
- }
102
- }
103
-
104
- /* 遮罩层样式 */
105
- .image-preview-container {
106
- position: relative;
107
- padding: 0px;
108
- width: var(--elx-files-card-icon-size);
109
- height: var(--elx-files-card-icon-size);
110
- display: inline-block;
111
- border-radius: 8px;
112
- overflow: hidden;
113
- transition: all 0.3s;
114
-
115
- .preview-mask {
116
- position: absolute;
117
- inset: 0;
118
- width: 100%;
119
- display: flex;
120
- justify-content: center;
121
- align-items: center;
122
- opacity: 0;
123
- background: rgba(0, 0, 0, 0.65);
124
- color: #fff;
125
- font-size: 10px;
126
- transition: opacity 0.3s;
127
-
128
- .el-icon-view {
129
- font-size: 10px;
130
- margin-right: 2px;
131
- display: flex;
132
- align-items: center;
133
- height: 100%;
134
- margin-top: 2px;
135
- }
136
-
137
- &:hover {
138
- opacity: 1;
139
- transition: opacity 0.3s;
140
- cursor: pointer;
141
- }
142
- }
143
- }
144
-
145
- .image-preview-container-square {
146
- .preview-mask {
147
- font-size: 14px;
148
-
149
- .el-icon-view {
150
- font-size: 12px;
151
- }
152
- }
153
- }
154
-
155
- // 正方形变体，加载中样式,不悬停直接展示
156
- .preview-mask-loading {
157
- position: absolute;
158
- inset: 0;
159
- width: 100%;
160
- display: flex;
161
- justify-content: center;
162
- align-items: center;
163
- background: rgba(0, 0, 0, 0.65);
164
- color: #fff;
165
- transition: all 0.3s;
166
-
167
- .circle-progress {
168
- width: 100% !important;
169
- height: 100% !important;
170
- display: flex;
171
- justify-content: center;
172
- align-items: center;
173
-
174
- .el-progress-circle {
175
- width: calc(100% - 12px) !important;
176
- height: calc(100% - 12px) !important;
177
-
178
- svg > path:nth-child(1) {
179
- stroke: rgba(255, 255, 255, 0.2);
180
- stroke-width: 8px;
181
- }
182
- }
183
- .el-progress__text {
184
- color: #fff;
185
- font-size: 14px;
186
- }
187
- }
188
- }
189
-
190
- // 正方形变体，加载中样式,不悬停直接展示
191
- .preview-mask-error {
192
- position: absolute;
193
- inset: 0;
194
- width: 100%;
195
- display: flex;
196
- justify-content: center;
197
- align-items: center;
198
- background: rgba(0, 0, 0, 0.5);
199
- font-size: 12px;
200
- transition: all 0.3s;
201
- color: #ff4d4f;
202
- // 溢出隐藏
203
- overflow: hidden;
204
- text-overflow: ellipsis;
205
- white-space: nowrap;
206
- }
207
-
208
- .el-image-viewer__progress {
209
- display: none;
210
- }
211
-
212
- /* 过渡动画样式 */
213
- .fade-enter-active,
214
- .fade-leave-active {
215
- transition: opacity 0.3s;
216
- }
217
-
218
- .fade-enter-from,
219
- .fade-leave-to {
220
- opacity: 0;
221
- }
1
+ @import '../theme/var.scss';
2
+
3
+ .el-x-filescard {
4
+ width: fit-content;
5
+ padding: 12px;
6
+ display: flex;
7
+ flex-wrap: nowrap;
8
+ gap: 8px;
9
+ align-items: center;
10
+ border-radius: 8px;
11
+ position: relative;
12
+ background: rgba(0, 0, 0, 0.06);
13
+ max-width: var(--elx-files-card-max-width);
14
+
15
+ .el-x-filescard-progress {
16
+ position: absolute;
17
+ top: 0;
18
+ left: 0;
19
+ bottom: 0;
20
+ background: rgba(0, 0, 0, 0.08);
21
+ border-radius: 8px;
22
+ transition: width 0.2s ease;
23
+ }
24
+
25
+ .el-x-filescard-delete-icon {
26
+ position: absolute;
27
+ top: -8px;
28
+ right: -6px;
29
+ cursor: pointer;
30
+ color: rgba(0, 0, 0, 0.4);
31
+ display: none;
32
+
33
+ &:hover {
34
+ color: #ff4d4f;
35
+ }
36
+ }
37
+
38
+ &:hover .el-x-filescard-delete-icon {
39
+ display: block;
40
+ }
41
+ }
42
+
43
+ .el-x-filescard-square {
44
+ padding: 0;
45
+ margin: 0;
46
+ }
47
+
48
+ .el-x-filescard-icon {
49
+ flex: none;
50
+ font-size: var(--elx-files-card-icon-size);
51
+ }
52
+
53
+ .el-x-filescard-img {
54
+ flex: none;
55
+ width: var(--elx-files-card-icon-size);
56
+ height: var(--elx-files-card-icon-size);
57
+ border-radius: 8px;
58
+ object-fit: cover;
59
+ }
60
+
61
+ .el-x-filescard-content {
62
+ flex: auto;
63
+ min-width: 0;
64
+ display: flex;
65
+ flex-direction: column;
66
+ align-items: stretch;
67
+ justify-content: space-between;
68
+ height: 100%;
69
+
70
+ .el-x-filescard-name {
71
+ display: flex;
72
+ flex-wrap: nowrap;
73
+ max-width: 100%;
74
+ font-size: 14px;
75
+
76
+ .el-x-filescard-name-prefix {
77
+ flex: 0 1 auto;
78
+ min-width: 0;
79
+ overflow: hidden;
80
+ text-overflow: ellipsis;
81
+ white-space: nowrap;
82
+ }
83
+
84
+ .el-x-filescard-name-suffix {
85
+ flex: none;
86
+ }
87
+ }
88
+
89
+ .el-x-filescard-description {
90
+ flex: none;
91
+ min-width: 0;
92
+ overflow: hidden;
93
+ text-overflow: ellipsis;
94
+ white-space: nowrap;
95
+ color: rgba(0, 0, 0, 0.4);
96
+ font-size: 12px;
97
+ }
98
+
99
+ .el-x-filescard-description-error {
100
+ color: #ff4d4f;
101
+ }
102
+ }
103
+
104
+ /* 遮罩层样式 */
105
+ .image-preview-container {
106
+ position: relative;
107
+ padding: 0px;
108
+ width: var(--elx-files-card-icon-size);
109
+ height: var(--elx-files-card-icon-size);
110
+ display: inline-block;
111
+ border-radius: 8px;
112
+ // overflow: hidden;
113
+ transition: all 0.3s;
114
+
115
+ .preview-mask {
116
+ position: absolute;
117
+ inset: 0;
118
+ width: 100%;
119
+ display: flex;
120
+ justify-content: center;
121
+ align-items: center;
122
+ opacity: 0;
123
+ background: rgba(0, 0, 0, 0.65);
124
+ color: #fff;
125
+ font-size: 10px;
126
+ transition: opacity 0.3s;
127
+
128
+ .el-icon-view {
129
+ font-size: 10px;
130
+ margin-right: 2px;
131
+ display: flex;
132
+ align-items: center;
133
+ height: 100%;
134
+ margin-top: 2px;
135
+ }
136
+
137
+ &:hover {
138
+ opacity: 1;
139
+ transition: opacity 0.3s;
140
+ cursor: pointer;
141
+ }
142
+ }
143
+ }
144
+
145
+ .image-preview-container-square {
146
+ .preview-mask {
147
+ font-size: 14px;
148
+
149
+ .el-icon-view {
150
+ font-size: 12px;
151
+ }
152
+ }
153
+ }
154
+
155
+ // 正方形变体，加载中样式,不悬停直接展示
156
+ .preview-mask-loading {
157
+ position: absolute;
158
+ inset: 0;
159
+ width: 100%;
160
+ display: flex;
161
+ justify-content: center;
162
+ align-items: center;
163
+ background: rgba(0, 0, 0, 0.65);
164
+ color: #fff;
165
+ transition: all 0.3s;
166
+
167
+ .circle-progress {
168
+ width: 100% !important;
169
+ height: 100% !important;
170
+ display: flex;
171
+ justify-content: center;
172
+ align-items: center;
173
+
174
+ .el-progress-circle {
175
+ width: calc(100% - 12px) !important;
176
+ height: calc(100% - 12px) !important;
177
+
178
+ svg>path:nth-child(1) {
179
+ stroke: rgba(255, 255, 255, 0.2);
180
+ stroke-width: 8px;
181
+ }
182
+ }
183
+
184
+ .el-progress__text {
185
+ color: #fff;
186
+ font-size: 14px;
187
+ }
188
+ }
189
+ }
190
+
191
+ // 正方形变体，加载中样式,不悬停直接展示
192
+ .preview-mask-error {
193
+ position: absolute;
194
+ inset: 0;
195
+ width: 100%;
196
+ display: flex;
197
+ justify-content: center;
198
+ align-items: center;
199
+ background: rgba(0, 0, 0, 0.5);
200
+ font-size: 12px;
201
+ transition: all 0.3s;
202
+ color: #ff4d4f;
203
+ // 溢出隐藏
204
+ overflow: hidden;
205
+ text-overflow: ellipsis;
206
+ white-space: nowrap;
207
+ }
208
+
209
+ .el-image-viewer__progress {
210
+ display: none;
211
+ }
212
+
213
+ /* 过渡动画样式 */
214
+ .fade-enter-active,
215
+ .fade-leave-active {
216
+ transition: opacity 0.3s;
217
+ }
218
+
219
+ .fade-enter,
220
+ .fade-leave-to {
221
+ opacity: 0;
222
+ }