@zjw-jszn/platform-imsdk 1.0.6 → 1.0.7

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 (4) hide show
  1. package/README.md +1 -1
  2. package/index.js +0 -2
  3. package/package.json +4 -5
  4. package/style.css +1 -1465
package/style.css CHANGED
@@ -1,1465 +1 @@
1
-
2
- .confirm-dialog-mask[data-v-69eaf313] {
3
- position: fixed;
4
- z-index: 12000;
5
- inset: 0;
6
-
7
- background: rgba(15, 23, 42, 0.35);
8
- backdrop-filter: blur(2px);
9
- }
10
- .confirm-dialog[data-v-69eaf313] {
11
- position: absolute;
12
- top: 50%;
13
- left: 50%;
14
- transform: translate(-50%, -50%);
15
-
16
- width: min(420px, calc(100vw - 32px));
17
- border: 1px solid #e8edf4;
18
- border-radius: 12px;
19
-
20
- background: #fff;
21
- box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
22
- }
23
- .confirm-dialog-header[data-v-69eaf313] {
24
- padding: 16px 18px 8px;
25
- }
26
- .confirm-dialog-title[data-v-69eaf313] {
27
- margin: 0;
28
- font-size: 16px;
29
- font-weight: 600;
30
- color: #1f2937;
31
- }
32
- .confirm-dialog-body[data-v-69eaf313] {
33
- padding: 0 18px 10px;
34
- }
35
- .confirm-dialog-message[data-v-69eaf313] {
36
- margin: 0;
37
- font-size: 14px;
38
- line-height: 1.55;
39
- color: #4b5563;
40
- }
41
- .confirm-dialog-error[data-v-69eaf313] {
42
- margin: 10px 0 0;
43
- font-size: 13px;
44
- line-height: 1.45;
45
- color: #cf1322;
46
- }
47
- .confirm-dialog-footer[data-v-69eaf313] {
48
- display: flex;
49
- gap: 10px;
50
- justify-content: flex-end;
51
- padding: 14px 18px 18px;
52
- }
53
- .dialog-btn[data-v-69eaf313] {
54
- cursor: pointer;
55
-
56
- min-width: 80px;
57
- height: 34px;
58
- padding: 0 14px;
59
- border: 1px solid transparent;
60
- border-radius: 8px;
61
-
62
- font-size: 14px;
63
-
64
- transition: all 0.2s ease;
65
- }
66
- .dialog-btn[data-v-69eaf313]:disabled {
67
- cursor: not-allowed;
68
- opacity: 0.6;
69
- }
70
- .cancel-btn[data-v-69eaf313] {
71
- border-color: #d9d9d9;
72
- color: #595959;
73
- background: #fff;
74
- }
75
- .cancel-btn[data-v-69eaf313]:hover:not(:disabled) {
76
- border-color: #bfbfbf;
77
- color: #262626;
78
- background: #fafafa;
79
- }
80
- .confirm-btn[data-v-69eaf313] {
81
- border-color: #0e77cc;
82
- color: #fff;
83
- background: linear-gradient(135deg, #0e77cc 0%, #0d6db8 100%);
84
- }
85
- .confirm-btn[data-v-69eaf313]:hover:not(:disabled) {
86
- border-color: #0d6db8;
87
- filter: brightness(1.03);
88
- }
89
- .v3-body-inner{scroll-behavior:smooth;scrollbar-color:#393d3f rgba(0,0,0,.1);scrollbar-width:thin}.v3-body-inner::-webkit-scrollbar{width:8px}.v3-body-inner::-webkit-scrollbar-track{background-color:transparent}.v3-body-inner::-webkit-scrollbar-thumb{display:none;background:rgba(0,0,0,.3);border-radius:5px}.v3-body-inner:hover::-webkit-scrollbar-thumb{display:block}.v3-emoji-picker{height:320px;width:280px;box-shadow:0 2px 10px #0003;border-radius:10px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;text-align:left}.v3-emoji-picker *{box-sizing:border-box}.v3-emoji-picker .v3-header{padding:15px 15px 13px;border-bottom:1px solid}.v3-emoji-picker .v3-header .v3-groups{display:flex}.v3-emoji-picker .v3-header .v3-groups .v3-group{flex-grow:1;padding:0;margin:0;border:none;background:none;font-size:23px;cursor:pointer;position:relative;display:block;opacity:.7;transition:.2s}.v3-emoji-picker .v3-header .v3-groups .v3-group.v3-is-hidden{display:none}.v3-emoji-picker .v3-header .v3-groups .v3-group:first-child,.v3-emoji-picker .v3-header .v3-groups .v3-group:last-child{flex-grow:0}.v3-emoji-picker .v3-header .v3-groups .v3-group:hover{opacity:1}.v3-emoji-picker .v3-header .v3-groups .v3-group span{display:flex;align-items:center;justify-content:center}.v3-emoji-picker .v3-header .v3-groups .v3-group span img{display:block;width:1em;height:auto}.v3-emoji-picker .v3-spacing{height:11px}.v3-emoji-picker .v3-search input{width:100%;display:block;height:26px;padding:0 10px;border:1px solid;border-radius:3px;font-size:12px;transition:.2s}.v3-emoji-picker .v3-search input:focus{outline:none}.v3-emoji-picker .v3-body{padding:0 0 15px 11px;min-height:0;flex-grow:1}.v3-emoji-picker .v3-body .v3-body-inner{flex-grow:1;min-height:0;overflow-y:auto;overflow-x:hidden;height:100%;padding-right:11px}.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5{margin:0;top:0;padding:7px 0 3px 4px;z-index:2}.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5.v3-sticky{position:sticky}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis{display:flex;font-size:18px;flex-wrap:wrap}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button{cursor:pointer;border:none;background:none;margin:0;text-align:center;display:flex;align-items:center;justify-content:center;flex-basis:12.5%;max-width:12.5%;flex-grow:1;padding:0;font-size:22px;position:relative}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:after{content:"";width:100%;padding-bottom:100%}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span{display:flex;align-items:center;justify-content:center}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img{max-width:100%;padding:4px}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span,.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img{position:absolute;top:0;left:0;width:100%;height:100%}.v3-emoji-picker .v3-body .v3-body-inner.is-mac .v3-emojis button{font-family:"Apple Color Emoji"}.v3-emoji-picker .v3-footer{font-size:14px;border-top:1px solid #dddddd;padding:15px;display:flex;align-items:center;justify-content:space-between;position:relative}.v3-emoji-picker .v3-footer .v3-tone,.v3-emoji-picker .v3-footer .v3-foot-left{display:flex;align-items:center}.v3-emoji-picker .v3-footer .v3-tone img,.v3-emoji-picker .v3-footer .v3-foot-left img{width:20px;display:block}.v3-emoji-picker .v3-footer .v3-tone>span:first-child,.v3-emoji-picker .v3-footer .v3-foot-left>span:first-child{margin-right:6px}.v3-emoji-picker .v3-footer .v3-foot-left>span.v3-text{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v3-emoji-picker .v3-footer .v3-tone{border:none;padding:0;background:none;cursor:pointer;display:inline-flex;align-items:center}.v3-emoji-picker .v3-footer .v3-tone>span{display:inline-flex;vertical-align:top}.v3-emoji-picker .v3-footer .v3-tone .v3-text{font-size:13px}.v3-emoji-picker .v3-footer .v3-tone .v3-icon{display:inline-flex;height:15px;width:15px;vertical-align:middle;align-self:center;border:2px solid rgba(0,0,0,.2)}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-neutral{background-color:#ffd225}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fb{background-color:#ffdfbd}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fc{background-color:#e9c197}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fd{background-color:#c88e62}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fe{background-color:#a86637}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3ff{background-color:#60463a}.v3-emoji-picker .v3-footer .v3-tone .is-mac span{font-family:"Apple Color Emoji"}.v3-skin-tones{position:absolute;height:100%;width:60%;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;padding:0 15px;opacity:0;visibility:hidden;transition:.2s;border-radius:0 0 10px 10px}.v3-skin-tones.v3-is-open{opacity:1;visibility:visible}.v3-skin-tones .v3-skin-tone{display:inline-block;height:15px;width:25px;border:none;padding:0;cursor:pointer;transition:0ms}.v3-skin-tones .v3-skin-tone:hover{transform:scale(1.1);transition:.2s}.v3-skin-tones .v3-skin-tone-neutral{color:#ffd225;background-color:#ffd225}.v3-skin-tones .v3-skin-tone-1f3fb{color:#ffdfbd;background-color:#ffdfbd}.v3-skin-tones .v3-skin-tone-1f3fc{color:#e9c197;background-color:#e9c197}.v3-skin-tones .v3-skin-tone-1f3fd{color:#c88e62;background-color:#c88e62}.v3-skin-tones .v3-skin-tone-1f3fe{color:#a86637;background-color:#a86637}.v3-skin-tones .v3-skin-tone-1f3ff{color:#60463a;background-color:#60463a}.v3-input-emoji-picker *{box-sizing:border-box}.v3-input-emoji-picker .v3-input-picker-root{position:relative}.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-input,.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea{width:100%;height:40px;border:1px solid #999;padding-left:15px}.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea{min-height:80px;resize:vertical}.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea+.v3-input-picker-wrap .v3-input-picker-icon{top:auto;bottom:5px}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-input-picker-icon{display:inline-flex;position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:24px;border:none;background:none;padding:0 5px;cursor:pointer}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-input-picker-icon img{display:block;width:1em;height:1em}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-emoji-picker{opacity:0;visibility:hidden;transition:.2s}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap.v3-picker-is-open .v3-emoji-picker{opacity:1;visibility:visible;z-index:999}.v3-emoji-picker{--v3-picker-bg: #ffffff;--v3-picker-fg: #000000;--v3-picker-border: #dddddd;--v3-picker-input-bg: var(--v3-picker-bg);--v3-picker-input-border: #cccccc;--v3-picker-input-focus-border: #000000;--v3-group-image-filter: none;--v3-picker-emoji-hover: #f7f7f7;background:var(--v3-picker-bg);color:var(--v3-picker-fg)}.v3-emoji-picker .v3-footer,.v3-emoji-picker .v3-header{border-color:var(--v3-picker-border)}.v3-emoji-picker .v3-groups{filter:var(--v3-group-image-filter)}.v3-emoji-picker .v3-tone{color:var(--v3-picker-fg)}.v3-emoji-picker .v3-search input{background:var(--v3-picker-input-bg);border-color:var(--v3-picker-input-border);color:inherit}.v3-emoji-picker .v3-search input:focus{border-color:var(--v3-picker-input-focus-border)}.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5,.v3-emoji-picker .v3-skin-tones{background:var(--v3-picker-bg)}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:hover{background:var(--v3-picker-emoji-hover, #f7f7f7)}@media (prefers-color-scheme: dark){.v3-emoji-picker.v3-color-theme-auto{--v3-picker-bg: #000000;--v3-picker-fg: #ffffff;--v3-picker-border: #333333;--v3-picker-input-bg: #222222;--v3-picker-input-border: #444444;--v3-picker-input-focus-border: #555555;--v3-group-image-filter: invert(1);--v3-picker-emoji-hover: #222222}}.v3-emoji-picker.v3-color-theme-dark{--v3-picker-bg: #000000;--v3-picker-fg: #ffffff;--v3-picker-border: #333333;--v3-picker-input-bg: #222222;--v3-picker-input-border: #444444;--v3-picker-input-focus-border: #555555;--v3-group-image-filter: invert(1);--v3-picker-emoji-hover: #222222}
90
-
91
- .chat-room[data-v-cc3cfaa7] {
92
- display: flex;
93
- flex-direction: column;
94
- height: 100%;
95
- background: #fff;
96
- }
97
- .chat-room-header[data-v-cc3cfaa7] {
98
- display: flex;
99
- gap: 12px;
100
- align-items: center;
101
-
102
- padding: 8px 20px;
103
- border-bottom: 1px solid #e8e8e8;
104
-
105
- background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
106
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
107
- }
108
- .back-btn[data-v-cc3cfaa7] {
109
- cursor: pointer;
110
-
111
- display: flex;
112
- flex-shrink: 0;
113
- align-items: center;
114
- justify-content: center;
115
-
116
- width: 36px;
117
- height: 36px;
118
- border: none;
119
- border-radius: 50%;
120
-
121
- font-size: 16px;
122
- color: #595959;
123
-
124
- background: #f0f0f0;
125
-
126
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
127
- }
128
- .back-btn[data-v-cc3cfaa7]:hover {
129
- transform: scale(1.05);
130
- color: #0e77cc;
131
- background: #e8e8e8;
132
- }
133
- .back-btn[data-v-cc3cfaa7]:active {
134
- transform: scale(0.95);
135
- }
136
- .title[data-v-cc3cfaa7] {
137
- display: flex;
138
- flex: 1;
139
- gap: 12px;
140
- align-items: center;
141
- }
142
- .header-actions[data-v-cc3cfaa7] {
143
- display: flex;
144
- flex-shrink: 0;
145
- align-items: flex-end;
146
- }
147
- .end-session-btn[data-v-cc3cfaa7] {
148
- cursor: pointer;
149
-
150
- min-width: 90px;
151
- height: 32px;
152
- padding: 0 12px;
153
- border: 1px solid #ffd6d6;
154
- border-radius: 16px;
155
-
156
- font-size: 13px;
157
- font-weight: 500;
158
- color: #d4380d;
159
-
160
- background: #fff2f0;
161
-
162
- transition: all 0.2s ease;
163
- }
164
- .end-session-btn[data-v-cc3cfaa7]:hover:not(:disabled) {
165
- border-color: #ffb3ad;
166
- background: #ffe7e2;
167
- }
168
- .end-session-btn[data-v-cc3cfaa7]:disabled {
169
- cursor: not-allowed;
170
- opacity: 0.6;
171
- }
172
- .avatar-wrapper[data-v-cc3cfaa7] {
173
- position: relative;
174
- flex-shrink: 0;
175
- width: 42px;
176
- height: 42px;
177
- }
178
- .avatar-img[data-v-cc3cfaa7] {
179
- width: 100%;
180
- height: 100%;
181
- border: 2px solid white;
182
- border-radius: 50%;
183
-
184
- object-fit: cover;
185
- background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
186
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
187
- }
188
- .avatar-text[data-v-cc3cfaa7] {
189
- display: flex;
190
- align-items: center;
191
- justify-content: center;
192
-
193
- width: 42px;
194
- height: 42px;
195
- border: 2px solid white;
196
- border-radius: 50%;
197
-
198
- font-size: 16px;
199
- font-weight: 600;
200
- color: white;
201
-
202
- background: linear-gradient(135deg, #0e77cc 0%, #0d6db8 100%);
203
- box-shadow: 0 2px 8px rgba(14, 119, 204, 0.3);
204
- }
205
- .user-info[data-v-cc3cfaa7] {
206
- display: flex;
207
- flex-direction: column;
208
- gap: 2px;
209
- }
210
- .name[data-v-cc3cfaa7] {
211
- font-size: 15px;
212
- font-weight: 600;
213
- color: #262626;
214
- letter-spacing: 0.2px;
215
- }
216
- .messages[data-v-cc3cfaa7] {
217
- position: relative;
218
-
219
- overflow-y: auto;
220
- flex: 1;
221
-
222
- padding: 24px 20px;
223
-
224
- background: linear-gradient(180deg, #f5f5f5 0%, #fafafa 100%);
225
- }
226
-
227
- /* 自定义滚动条 */
228
- .messages[data-v-cc3cfaa7]::-webkit-scrollbar {
229
- width: 6px;
230
- }
231
- .messages[data-v-cc3cfaa7]::-webkit-scrollbar-track {
232
- background: transparent;
233
- }
234
- .messages[data-v-cc3cfaa7]::-webkit-scrollbar-thumb {
235
- border-radius: 3px;
236
- background: #d9d9d9;
237
- }
238
- .messages[data-v-cc3cfaa7]::-webkit-scrollbar-thumb:hover {
239
- background: #bfbfbf;
240
- }
241
- .loading-more[data-v-cc3cfaa7] {
242
- display: flex;
243
- gap: 8px;
244
- align-items: center;
245
- justify-content: center;
246
-
247
- padding: 16px;
248
-
249
- font-size: 13px;
250
- color: #8c8c8c;
251
- }
252
- .loading-spinner-small[data-v-cc3cfaa7] {
253
- width: 20px;
254
- height: 20px;
255
- border: 2px solid #f0f0f0;
256
- border-top: 2px solid #0e77cc;
257
- border-radius: 50%;
258
-
259
- animation: spin-cc3cfaa7 0.8s linear infinite;
260
- }
261
- .no-more[data-v-cc3cfaa7] {
262
- padding: 12px;
263
- font-size: 12px;
264
- color: #bfbfbf;
265
- text-align: center;
266
- }
267
- .loading-state[data-v-cc3cfaa7] {
268
- display: flex;
269
- flex-direction: column;
270
- align-items: center;
271
- justify-content: center;
272
-
273
- padding: 60px 20px;
274
-
275
- color: #bfbfbf;
276
- }
277
- .loading-spinner[data-v-cc3cfaa7] {
278
- width: 40px;
279
- height: 40px;
280
- margin-bottom: 16px;
281
- border: 3px solid #f0f0f0;
282
- border-top: 3px solid #0e77cc;
283
- border-radius: 50%;
284
-
285
- animation: spin-cc3cfaa7 0.8s linear infinite;
286
- }
287
- @keyframes spin-cc3cfaa7 {
288
- 0% { transform: rotate(0deg);
289
- }
290
- 100% { transform: rotate(360deg);
291
- }
292
- }
293
- .empty-messages[data-v-cc3cfaa7] {
294
- display: flex;
295
- flex-direction: column;
296
- align-items: center;
297
- justify-content: center;
298
-
299
- height: 100%;
300
-
301
- color: #bfbfbf;
302
- }
303
- .empty-messages .icon[data-v-cc3cfaa7] {
304
- margin-bottom: 16px;
305
- font-size: 64px;
306
- opacity: 0.5;
307
- }
308
- .empty-messages p[data-v-cc3cfaa7] {
309
- margin: 0;
310
- font-size: 14px;
311
- font-weight: 400;
312
- }
313
- .message-item[data-v-cc3cfaa7] {
314
- display: flex;
315
- gap: 12px;
316
- margin-bottom: 24px;
317
- animation: slide-in-cc3cfaa7 0.3s ease-out;
318
- }
319
- @keyframes slide-in-cc3cfaa7 {
320
- from {
321
- transform: translateY(10px);
322
- opacity: 0;
323
- }
324
- to {
325
- transform: translateY(0);
326
- opacity: 1;
327
- }
328
- }
329
- .message-item.is-self[data-v-cc3cfaa7] {
330
- justify-content: flex-end;
331
- }
332
- .msg-avatar-wrapper[data-v-cc3cfaa7] {
333
- position: relative;
334
- flex-shrink: 0;
335
- width: 40px;
336
- height: 40px;
337
- }
338
- .msg-avatar-img[data-v-cc3cfaa7] {
339
- width: 100%;
340
- height: 100%;
341
- border: 2px solid white;
342
- border-radius: 50%;
343
-
344
- object-fit: cover;
345
- background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
346
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
347
- }
348
- .msg-avatar[data-v-cc3cfaa7] {
349
- display: flex;
350
- align-items: center;
351
- justify-content: center;
352
-
353
- width: 40px;
354
- height: 40px;
355
- border: 2px solid white;
356
- border-radius: 50%;
357
-
358
- font-size: 15px;
359
- font-weight: 600;
360
- color: white;
361
-
362
- background: linear-gradient(135deg, #0e77cc 0%, #0d6db8 100%);
363
- box-shadow: 0 2px 6px rgba(14, 119, 204, 0.3);
364
- }
365
- .message-content-wrapper[data-v-cc3cfaa7] {
366
- display: flex;
367
- flex-direction: column;
368
- max-width: 65%;
369
- }
370
- .is-self .message-content-wrapper[data-v-cc3cfaa7] {
371
- align-items: flex-end;
372
- }
373
- .message-sender[data-v-cc3cfaa7] {
374
- margin-bottom: 6px;
375
- font-size: 12px;
376
- font-weight: 400;
377
- color: #8c8c8c;
378
- }
379
- .message-content[data-v-cc3cfaa7] {
380
- padding: 12px 16px;
381
- border-radius: 12px;
382
-
383
- background-color: white;
384
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
385
-
386
- transition: all 0.2s;
387
- }
388
- .message-item.is-self .message-content[data-v-cc3cfaa7] {
389
- color: white;
390
- background: linear-gradient(135deg, #0e77cc 0%, #0d6db8 100%);
391
- box-shadow: 0 2px 8px rgba(14, 119, 204, 0.25);
392
- }
393
- .message-text[data-v-cc3cfaa7] {
394
- margin-bottom: 6px;
395
-
396
- font-size: 14px;
397
- line-height: 1.6;
398
- color: #262626;
399
- overflow-wrap: break-word;
400
- }
401
- .message-item.is-self .message-text[data-v-cc3cfaa7] {
402
- color: white;
403
- }
404
-
405
- /* 图片消息 */
406
- .message-image[data-v-cc3cfaa7] {
407
- margin-bottom: 6px;
408
- }
409
- .message-image img[data-v-cc3cfaa7] {
410
- cursor: pointer;
411
-
412
- max-width: 300px;
413
- max-height: 300px;
414
- border-radius: 8px;
415
-
416
- object-fit: cover;
417
-
418
- transition: transform 0.2s;
419
- }
420
- .message-image img[data-v-cc3cfaa7]:hover {
421
- transform: scale(1.02);
422
- }
423
-
424
- /* 表情消息 */
425
- .message-emoji[data-v-cc3cfaa7] {
426
- display: flex;
427
- align-items: center;
428
- justify-content: center;
429
-
430
- min-height: 60px;
431
- margin-bottom: 6px;
432
-
433
- font-size: 48px;
434
- line-height: 1;
435
- }
436
-
437
- /* 文件消息 */
438
- .message-file[data-v-cc3cfaa7] {
439
- margin-bottom: 6px;
440
- }
441
- .file-link[data-v-cc3cfaa7] {
442
- display: inline-flex;
443
- gap: 8px;
444
- align-items: center;
445
-
446
- padding: 12px 16px;
447
- border-radius: 8px;
448
-
449
- font-size: 14px;
450
- font-weight: 500;
451
- color: #262626;
452
- text-decoration: none;
453
-
454
- background-color: #f5f5f5;
455
-
456
- transition: all 0.2s;
457
- }
458
- .file-link[data-v-cc3cfaa7]:hover {
459
- color: #0e77cc;
460
- background-color: #e8e8e8;
461
- }
462
- .is-self .file-link[data-v-cc3cfaa7] {
463
- color: white;
464
- background-color: rgba(255, 255, 255, 0.2);
465
- }
466
- .is-self .file-link[data-v-cc3cfaa7]:hover {
467
- background-color: rgba(255, 255, 255, 0.3);
468
- }
469
-
470
- /* 系统通知 */
471
- .message-system[data-v-cc3cfaa7] {
472
- margin-bottom: 6px;
473
- padding: 8px 12px;
474
- border-left: 3px solid #0e77cc;
475
- border-radius: 6px;
476
-
477
- font-size: 13px;
478
- color: #8c8c8c;
479
- text-align: center;
480
-
481
- background-color: #f5f5f5;
482
- }
483
- .is-self .message-system[data-v-cc3cfaa7] {
484
- border-left-color: white;
485
- color: rgba(255, 255, 255, 0.9);
486
- background-color: rgba(255, 255, 255, 0.2);
487
- }
488
-
489
- /* 卡片消息 */
490
- .message-card[data-v-cc3cfaa7] {
491
- margin-bottom: 6px;
492
- padding: 12px;
493
- border: 1px solid #bae6fd;
494
- border-radius: 8px;
495
-
496
- background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
497
- }
498
- .is-self .message-card[data-v-cc3cfaa7] {
499
- border-color: rgba(255, 255, 255, 0.3);
500
- background: rgba(255, 255, 255, 0.2);
501
- }
502
- .message-time[data-v-cc3cfaa7] {
503
- font-size: 11px;
504
- color: #8c8c8c;
505
- }
506
- .message-item.is-self .message-time[data-v-cc3cfaa7] {
507
- color: rgba(255, 255, 255, 0.75);
508
- }
509
- .input-area[data-v-cc3cfaa7] {
510
- display: flex;
511
- flex-direction: column;
512
- gap: 12px;
513
-
514
- padding: 16px 20px;
515
- border-top: 1px solid #e8e8e8;
516
-
517
- background: white;
518
- box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
519
- }
520
-
521
- /* 工具栏 */
522
- .input-toolbar[data-v-cc3cfaa7] {
523
- display: flex;
524
- gap: 8px;
525
- padding: 4px 0;
526
- }
527
- .tool-btn[data-v-cc3cfaa7] {
528
- cursor: pointer;
529
-
530
- display: inline-flex;
531
- gap: 6px;
532
- align-items: center;
533
-
534
- padding: 8px 14px;
535
- border: 1.5px solid #e8e8e8;
536
- border-radius: 8px;
537
-
538
- font-size: 13px;
539
- font-weight: 500;
540
- color: #595959;
541
-
542
- background: white;
543
- outline: none;
544
-
545
- transition: all 0.2s;
546
- }
547
- .tool-btn[data-v-cc3cfaa7]:hover:not(:disabled) {
548
- border-color: #0e77cc;
549
- color: #0e77cc;
550
- background: #f0f9ff;
551
- }
552
- .tool-btn[data-v-cc3cfaa7]:disabled {
553
- cursor: not-allowed;
554
- opacity: 0.5;
555
- background: #f5f5f5;
556
- }
557
- .tool-btn-text[data-v-cc3cfaa7] {
558
- font-size: 13px;
559
- }
560
- .tool-btn-icon[data-v-cc3cfaa7] {
561
- display: inline-flex;
562
- align-items: center;
563
- justify-content: center;
564
-
565
- width: 18px;
566
- height: 18px;
567
- }
568
- .tool-btn-svg[data-v-cc3cfaa7] {
569
- width: 18px;
570
- height: 18px;
571
- }
572
- .image-btn[data-v-cc3cfaa7] {
573
- border-color: #d9d9d9;
574
- }
575
- .emoji-container[data-v-cc3cfaa7] {
576
- position: relative;
577
- }
578
- .quick-reply-container[data-v-cc3cfaa7] {
579
- position: relative;
580
- }
581
- .quick-reply-trigger[data-v-cc3cfaa7] {
582
- border-color: #d9d9d9;
583
- }
584
- .quick-reply-trigger.active[data-v-cc3cfaa7] {
585
- border-color: #0e77cc;
586
- color: #0e77cc;
587
- background: #f0f9ff;
588
- }
589
- .quick-reply-panel[data-v-cc3cfaa7] {
590
- position: absolute;
591
- z-index: 1001;
592
- bottom: calc(100% + 8px);
593
- left: 0;
594
-
595
- overflow: hidden;
596
-
597
- width: 320px;
598
- max-width: min(320px, calc(100vw - 80px));
599
- border: 1px solid #e8e8e8;
600
- border-radius: 10px;
601
-
602
- background: #fff;
603
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
604
- }
605
- .quick-reply-search[data-v-cc3cfaa7] {
606
- padding: 10px;
607
- border-bottom: 1px solid #f0f0f0;
608
- }
609
- .quick-reply-search input[data-v-cc3cfaa7] {
610
- width: 100%;
611
- height: 34px;
612
- padding: 0 10px;
613
- border: 1px solid #d9d9d9;
614
- border-radius: 8px;
615
-
616
- font-size: 13px;
617
- color: #595959;
618
-
619
- background: #fff;
620
- outline: none;
621
- }
622
- .quick-reply-search input[data-v-cc3cfaa7]:focus {
623
- border-color: #0e77cc;
624
- box-shadow: 0 0 0 2px rgba(14, 119, 204, 0.08);
625
- }
626
- .quick-reply-list[data-v-cc3cfaa7] {
627
- overflow-y: auto;
628
- max-height: 220px;
629
- padding: 8px;
630
- }
631
- .quick-reply-item[data-v-cc3cfaa7] {
632
- cursor: pointer;
633
-
634
- width: 100%;
635
- margin-bottom: 6px;
636
- padding: 8px 10px;
637
- border: 1px solid transparent;
638
- border-radius: 8px;
639
-
640
- font-size: 13px;
641
- line-height: 1.45;
642
- color: #595959;
643
- text-align: left;
644
-
645
- background: #f7f8fa;
646
- }
647
- .quick-reply-item[data-v-cc3cfaa7]:last-child {
648
- margin-bottom: 0;
649
- }
650
- .quick-reply-item[data-v-cc3cfaa7]:hover {
651
- border-color: #b6dcfa;
652
- color: #0e77cc;
653
- background: #f0f9ff;
654
- }
655
- .quick-reply-empty[data-v-cc3cfaa7] {
656
- padding: 18px 10px;
657
- font-size: 12px;
658
- color: #bfbfbf;
659
- text-align: center;
660
- }
661
- .emoji-picker-wrapper[data-v-cc3cfaa7] {
662
- position: absolute;
663
- z-index: 1000;
664
- bottom: 100%;
665
- left: 0;
666
-
667
- overflow: hidden;
668
-
669
- margin-bottom: 8px;
670
- border-radius: 8px;
671
-
672
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
673
- }
674
- .input-area textarea[data-v-cc3cfaa7] {
675
- resize: none;
676
-
677
- width: 100%;
678
- padding: 12px 14px;
679
- border: 1.5px solid #e8e8e8;
680
- border-radius: 8px;
681
-
682
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
683
- font-size: 14px;
684
- line-height: 1.5;
685
-
686
- background: #fafafa;
687
- outline: none;
688
-
689
- transition: all 0.2s;
690
- }
691
- .input-area textarea[data-v-cc3cfaa7]:focus {
692
- border-color: #0e77cc;
693
- background: white;
694
- box-shadow: 0 0 0 3px rgba(14, 119, 204, 0.08);
695
- }
696
- .input-area textarea[data-v-cc3cfaa7]::placeholder {
697
- color: #bfbfbf;
698
- }
699
- .input-actions[data-v-cc3cfaa7] {
700
- display: flex;
701
- justify-content: flex-end;
702
- }
703
- .send-btn[data-v-cc3cfaa7] {
704
- cursor: pointer;
705
-
706
- padding: 10px 28px;
707
- border: none;
708
- border-radius: 8px;
709
-
710
- font-size: 14px;
711
- font-weight: 500;
712
- color: white;
713
- letter-spacing: 0.3px;
714
-
715
- background: linear-gradient(135deg, #0e77cc 0%, #0d6db8 100%);
716
- box-shadow: 0 2px 6px rgba(14, 119, 204, 0.25);
717
-
718
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
719
- }
720
- .send-btn[data-v-cc3cfaa7]:hover {
721
- transform: translateY(-1px);
722
- box-shadow: 0 4px 12px rgba(14, 119, 204, 0.35);
723
- }
724
- .send-btn[data-v-cc3cfaa7]:active {
725
- transform: translateY(0);
726
- box-shadow: 0 2px 6px rgba(14, 119, 204, 0.25);
727
- }
728
-
729
- .conversation-list[data-v-d070a051] {
730
- overflow-y: auto;
731
- display: flex;
732
- flex: 1;
733
- flex-direction: column;
734
-
735
- background: #fff;
736
- }
737
-
738
- /* 自定义滚动条 */
739
- .conversation-list[data-v-d070a051]::-webkit-scrollbar {
740
- width: 6px;
741
- }
742
- .conversation-list[data-v-d070a051]::-webkit-scrollbar-track {
743
- background: transparent;
744
- }
745
- .conversation-list[data-v-d070a051]::-webkit-scrollbar-thumb {
746
- border-radius: 3px;
747
- background: #d9d9d9;
748
- }
749
- .conversation-list[data-v-d070a051]::-webkit-scrollbar-thumb:hover {
750
- background: #bfbfbf;
751
- }
752
- .unread-header[data-v-d070a051] {
753
- padding: 8px 20px;
754
- border-bottom: 1px solid #e8e8e8;
755
- background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
756
- }
757
- .unread-count[data-v-d070a051] {
758
- font-size: 15px;
759
- font-weight: 600;
760
- color: #262626;
761
- letter-spacing: 0.3px;
762
- }
763
- .loading-state[data-v-d070a051] {
764
- display: flex;
765
- flex-direction: column;
766
- align-items: center;
767
- justify-content: center;
768
-
769
- padding: 60px 20px;
770
-
771
- color: #bfbfbf;
772
- }
773
- .loading-spinner[data-v-d070a051] {
774
- width: 40px;
775
- height: 40px;
776
- margin-bottom: 16px;
777
- border: 3px solid #f0f0f0;
778
- border-top: 3px solid #0e77cc;
779
- border-radius: 50%;
780
-
781
- animation: spin-d070a051 0.8s linear infinite;
782
- }
783
- @keyframes spin-d070a051 {
784
- 0% { transform: rotate(0deg);
785
- }
786
- 100% { transform: rotate(360deg);
787
- }
788
- }
789
- .empty-state[data-v-d070a051] {
790
- display: flex;
791
- flex-direction: column;
792
- align-items: center;
793
- justify-content: center;
794
-
795
- height: 100%;
796
- padding: 40px 20px;
797
-
798
- color: #bfbfbf;
799
- }
800
- .empty-icon[data-v-d070a051] {
801
- width: 64px;
802
- height: 64px;
803
- margin-bottom: 16px;
804
- opacity: 0.5;
805
- }
806
- .empty-state p[data-v-d070a051] {
807
- margin: 0;
808
- font-size: 14px;
809
- font-weight: 400;
810
- }
811
- .conversation-item[data-v-d070a051] {
812
- cursor: pointer;
813
-
814
- position: relative;
815
-
816
- padding: 12px 16px;
817
- border-bottom: 1px solid #f0f0f0;
818
-
819
- background: white;
820
-
821
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
822
- }
823
- .conversation-item[data-v-d070a051]:hover {
824
- background-color: #f5f7fa;
825
- }
826
- .conversation-item.active[data-v-d070a051] {
827
- padding-left: 13px;
828
- border-left: 3px solid #0e77cc;
829
- background: linear-gradient(90deg, #ecf5ff 0%, #fff 100%);
830
- }
831
- .conversation-item[data-v-d070a051]:last-child {
832
- border-bottom: none;
833
- }
834
-
835
- /* 会话项内容布局 */
836
- .conversation-item-content[data-v-d070a051] {
837
- display: flex;
838
- gap: 12px;
839
- align-items: center;
840
- width: 100%;
841
- }
842
- .avatar-wrapper[data-v-d070a051] {
843
- position: relative;
844
- flex-shrink: 0;
845
- width: 44px;
846
- height: 44px;
847
- }
848
- .avatar-img[data-v-d070a051] {
849
- width: 100%;
850
- height: 100%;
851
- border: 2px solid white;
852
- border-radius: 50%;
853
-
854
- object-fit: cover;
855
- background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
856
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
857
- }
858
- .avatar-text[data-v-d070a051] {
859
- position: absolute;
860
- top: 0;
861
- left: 0;
862
-
863
- display: flex;
864
- align-items: center;
865
- justify-content: center;
866
-
867
- width: 44px;
868
- height: 44px;
869
- border: 2px solid white;
870
- border-radius: 50%;
871
-
872
- font-size: 16px;
873
- font-weight: 600;
874
- color: white;
875
-
876
- background: linear-gradient(135deg, #0e77cc 0%, #0d6db8 100%);
877
- box-shadow: 0 2px 8px rgba(14, 119, 204, 0.3);
878
- }
879
- .session-info[data-v-d070a051] {
880
- display: flex;
881
- flex: 1;
882
- flex-direction: column;
883
- gap: 4px;
884
- justify-content: center;
885
-
886
- min-width: 0;
887
- }
888
- .session-name[data-v-d070a051] {
889
- font-size: 14px;
890
- font-weight: 600;
891
- color: #262626;
892
- letter-spacing: 0.2px;
893
- }
894
- .content-text[data-v-d070a051] {
895
- overflow: hidden;
896
- display: block;
897
-
898
- font-size: 13px;
899
- line-height: 1.4;
900
- color: #595959;
901
- text-overflow: ellipsis;
902
- white-space: nowrap;
903
- }
904
- .session-meta[data-v-d070a051] {
905
- display: flex;
906
- flex-direction: column;
907
- flex-shrink: 0;
908
- gap: 6px;
909
- align-items: flex-end;
910
- }
911
- .session-time[data-v-d070a051] {
912
- font-size: 12px;
913
- font-weight: 400;
914
- color: #8c8c8c;
915
- }
916
- .unread-badge[data-v-d070a051] {
917
- display: flex;
918
- align-items: center;
919
- justify-content: center;
920
-
921
- min-width: 20px;
922
- height: 20px;
923
- margin-left: 8px;
924
- padding: 0 7px;
925
- border-radius: 10px;
926
-
927
- font-size: 12px;
928
- font-weight: 600;
929
- color: white;
930
-
931
- background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
932
- box-shadow: 0 2px 6px rgba(255, 77, 79, 0.3);
933
-
934
- animation: pulse-d070a051 2s ease-in-out infinite;
935
- }
936
- @keyframes pulse-d070a051 {
937
- 0%, 100% {
938
- transform: scale(1);
939
- }
940
- 50% {
941
- transform: scale(1.05);
942
- }
943
- }
944
-
945
- .chat-window[data-v-d726d76e] {
946
- position: fixed;
947
- z-index: 9998;
948
-
949
- overflow: hidden;
950
- display: flex;
951
- flex-direction: column;
952
-
953
- min-width: 380px;
954
- min-height: 360px;
955
- border: 1px solid rgba(9, 62, 105, 0.14);
956
- border-radius: 18px;
957
-
958
- background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
959
- backdrop-filter: blur(6px);
960
- box-shadow: 0 24px 80px rgba(11, 58, 106, 0.24);
961
-
962
- animation: window-enter-d726d76e 0.22s ease-out;
963
- }
964
- .chat-window.is-dragging[data-v-d726d76e] {
965
- cursor: move;
966
- box-shadow: 0 28px 88px rgba(11, 58, 106, 0.28);
967
- }
968
- .chat-window.is-resizing[data-v-d726d76e] {
969
- cursor: nwse-resize;
970
- }
971
- .chat-header[data-v-d726d76e] {
972
- cursor: move;
973
- user-select: none;
974
-
975
- display: flex;
976
- flex-shrink: 0;
977
- align-items: center;
978
- justify-content: space-between;
979
-
980
- padding: 10px 20px;
981
-
982
- color: white;
983
-
984
- background: linear-gradient(135deg, #0f83df 0%, #0e6fbe 62%, #0c5fa5 100%);
985
- box-shadow: 0 2px 12px rgba(14, 119, 204, 0.26);
986
- }
987
-
988
- /* 用户信息区域 */
989
- .user-info-section[data-v-d726d76e] {
990
- display: flex;
991
- flex: 1;
992
- gap: 12px;
993
- align-items: center;
994
- }
995
- .user-avatar-wrapper[data-v-d726d76e] {
996
- position: relative;
997
- flex-shrink: 0;
998
- width: 40px;
999
- height: 40px;
1000
- }
1001
- .user-avatar[data-v-d726d76e] {
1002
- width: 100%;
1003
- height: 100%;
1004
- border: 2px solid rgba(255, 255, 255, 0.3);
1005
- border-radius: 50%;
1006
-
1007
- object-fit: cover;
1008
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1009
- }
1010
- .user-avatar-default[data-v-d726d76e] {
1011
- display: flex;
1012
- align-items: center;
1013
- justify-content: center;
1014
-
1015
- width: 40px;
1016
- height: 40px;
1017
- border: 2px solid rgba(255, 255, 255, 0.3);
1018
- border-radius: 50%;
1019
-
1020
- font-size: 16px;
1021
- font-weight: 600;
1022
- color: white;
1023
-
1024
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
1025
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1026
- }
1027
- .status-indicator[data-v-d726d76e] {
1028
- cursor: pointer;
1029
-
1030
- position: absolute;
1031
- right: -2px;
1032
- bottom: -2px;
1033
-
1034
- display: flex;
1035
- align-items: center;
1036
- justify-content: center;
1037
-
1038
- width: 14px;
1039
- height: 14px;
1040
- border: 2px solid white;
1041
- border-radius: 50%;
1042
-
1043
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
1044
-
1045
- transition: transform 0.2s;
1046
- }
1047
- .status-indicator[data-v-d726d76e]:hover {
1048
- transform: scale(1.15);
1049
- }
1050
- .status-indicator svg[data-v-d726d76e] {
1051
- width: 8px;
1052
- height: 8px;
1053
- }
1054
-
1055
- /* 状态下拉菜单 */
1056
- .status-dropdown[data-v-d726d76e] {
1057
- position: absolute;
1058
- z-index: 100;
1059
- top: 100%;
1060
- left: 0;
1061
-
1062
- min-width: 120px;
1063
- margin-top: 8px;
1064
- padding: 6px;
1065
- border: 1px solid #dbe7f5;
1066
- border-radius: 10px;
1067
-
1068
- background: white;
1069
- box-shadow: 0 12px 30px rgba(11, 58, 106, 0.18);
1070
- }
1071
- .status-option[data-v-d726d76e] {
1072
- cursor: pointer;
1073
-
1074
- display: flex;
1075
- gap: 8px;
1076
- align-items: center;
1077
-
1078
- padding: 8px 10px;
1079
- border-radius: 6px;
1080
-
1081
- color: #262626;
1082
-
1083
- transition: all 0.2s;
1084
- }
1085
- .status-option[data-v-d726d76e]:hover {
1086
- background: #f5f5f5;
1087
- }
1088
- .status-option.active[data-v-d726d76e] {
1089
- color: #0e77cc;
1090
- background: #e6f7ff;
1091
- }
1092
- .status-dot[data-v-d726d76e] {
1093
- flex-shrink: 0;
1094
- width: 10px;
1095
- height: 10px;
1096
- border-radius: 50%;
1097
- }
1098
- .status-option span[data-v-d726d76e] {
1099
- flex: 1;
1100
- font-size: 13px;
1101
- }
1102
- .check-icon[data-v-d726d76e] {
1103
- width: 16px;
1104
- height: 16px;
1105
- opacity: 0.8;
1106
- }
1107
- .user-details[data-v-d726d76e] {
1108
- display: flex;
1109
- flex-direction: column;
1110
- gap: 2px;
1111
- }
1112
- .user-name[data-v-d726d76e] {
1113
- font-size: 14px;
1114
- font-weight: 600;
1115
- letter-spacing: 0.2px;
1116
- }
1117
- .user-status[data-v-d726d76e] {
1118
- font-size: 12px;
1119
- font-weight: 400;
1120
- opacity: 0.9;
1121
- }
1122
- .close-btn[data-v-d726d76e] {
1123
- cursor: pointer;
1124
-
1125
- display: flex;
1126
- align-items: center;
1127
- justify-content: center;
1128
-
1129
- width: 32px;
1130
- height: 32px;
1131
- border: none;
1132
- border-radius: 8px;
1133
-
1134
- font-size: 28px;
1135
- line-height: 1;
1136
- color: white;
1137
-
1138
- opacity: 0.8;
1139
- background: none;
1140
-
1141
- transition: all 0.2s;
1142
- }
1143
- .close-btn[data-v-d726d76e]:hover {
1144
- transform: rotate(90deg);
1145
- opacity: 1;
1146
- background: rgba(255, 255, 255, 0.15);
1147
- }
1148
- .close-btn[data-v-d726d76e]:active {
1149
- transform: rotate(90deg) scale(0.95);
1150
- }
1151
- .chat-body[data-v-d726d76e] {
1152
- overflow: hidden;
1153
- display: flex;
1154
- flex: 1;
1155
-
1156
- min-height: 0;
1157
-
1158
- background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
1159
- }
1160
-
1161
- /* 第一栏:一级菜单 */
1162
- .first-sidebar[data-v-d726d76e] {
1163
- display: flex;
1164
- flex-direction: column;
1165
- flex-shrink: 0;
1166
-
1167
- width: 76px;
1168
- padding: 0;
1169
- border-right: 1px solid #dce8f3;
1170
-
1171
- background: linear-gradient(180deg, #f5f9ff 0%, #f0f6fd 100%);
1172
- }
1173
- .menu-items-container[data-v-d726d76e] {
1174
- display: flex;
1175
- flex: 1;
1176
- flex-direction: column;
1177
- align-items: center;
1178
-
1179
- padding: 18px 0;
1180
- }
1181
- .menu-item[data-v-d726d76e] {
1182
- cursor: pointer;
1183
-
1184
- position: relative;
1185
-
1186
- display: flex;
1187
- flex-direction: column;
1188
- flex-shrink: 0;
1189
- align-items: center;
1190
- justify-content: center;
1191
-
1192
- width: 50px;
1193
- height: 50px;
1194
- margin-bottom: 12px;
1195
- border: 1px solid transparent;
1196
- border-radius: 12px;
1197
-
1198
- font-weight: 400;
1199
- color: #7d8fa3;
1200
-
1201
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1202
- }
1203
- .menu-item[data-v-d726d76e]:last-child {
1204
- margin-bottom: 0;
1205
- }
1206
- .menu-item[data-v-d726d76e]:hover {
1207
- transform: translateY(-1px);
1208
- border-color: #d2e3f3;
1209
- color: #0e77cc;
1210
- background: #f7fbff;
1211
- }
1212
- .menu-item.active[data-v-d726d76e] {
1213
- border-color: #0e77cc;
1214
- color: white;
1215
- background: linear-gradient(135deg, #0f83df 0%, #0d6db8 100%);
1216
- box-shadow: 0 8px 20px rgba(14, 119, 204, 0.35);
1217
- }
1218
- .menu-item.active[data-v-d726d76e]::before {
1219
- content: '';
1220
-
1221
- position: absolute;
1222
- top: 50%;
1223
- left: -11px;
1224
- transform: translateY(-50%);
1225
-
1226
- width: 3px;
1227
- height: 24px;
1228
- border-radius: 2px;
1229
-
1230
- background: #0e77cc;
1231
- }
1232
- .menu-item .icon[data-v-d726d76e] {
1233
- width: 23px;
1234
- height: 23px;
1235
- }
1236
- .menu-item .label[data-v-d726d76e] {
1237
- display: none;
1238
- }
1239
- .menu-item .menu-badge[data-v-d726d76e] {
1240
- position: absolute;
1241
- top: 6px;
1242
- right: 6px;
1243
-
1244
- display: flex;
1245
- align-items: center;
1246
- justify-content: center;
1247
-
1248
- min-width: 16px;
1249
- height: 16px;
1250
- padding: 0 5px;
1251
- border: 2px solid white;
1252
- border-radius: 8px;
1253
-
1254
- font-size: 10px;
1255
- font-weight: 600;
1256
- line-height: 1;
1257
- color: white;
1258
-
1259
- background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
1260
- box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4);
1261
- }
1262
- .menu-item.active .menu-badge[data-v-d726d76e] {
1263
- border-color: #0e77cc;
1264
- color: #ff4d4f;
1265
- background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
1266
- }
1267
-
1268
- /* 第二栏:二级侧边栏 */
1269
- .second-sidebar[data-v-d726d76e] {
1270
- overflow: hidden;
1271
- display: flex;
1272
- flex-direction: column;
1273
- flex-shrink: 0;
1274
-
1275
- width: 250px;
1276
- border-right: 1px solid #dce8f3;
1277
-
1278
- background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
1279
- }
1280
-
1281
- /* 第三栏:聊天区域 */
1282
- .chat-area[data-v-d726d76e] {
1283
- overflow: hidden;
1284
- display: flex;
1285
- flex: 1;
1286
- flex-direction: column;
1287
-
1288
- min-width: 0;
1289
-
1290
- background: radial-gradient(circle at top right, rgba(14, 119, 204, 0.08) 0%, rgba(255, 255, 255, 0) 42%), #fff;
1291
- }
1292
- .empty-chat[data-v-d726d76e] {
1293
- display: flex;
1294
- flex-direction: column;
1295
- align-items: center;
1296
- justify-content: center;
1297
-
1298
- height: 100%;
1299
-
1300
- color: #8ca1b8;
1301
-
1302
- background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
1303
- }
1304
- .empty-chat .empty-icon[data-v-d726d76e] {
1305
- width: 72px;
1306
- height: 72px;
1307
- margin-bottom: 18px;
1308
-
1309
- opacity: 0.5;
1310
- filter: drop-shadow(0 8px 20px rgba(11, 58, 106, 0.16));
1311
- }
1312
- .empty-chat p[data-v-d726d76e] {
1313
- margin: 0;
1314
- font-size: 15px;
1315
- font-weight: 500;
1316
- letter-spacing: 0.3px;
1317
- }
1318
-
1319
- /* 拉伸手柄 */
1320
- .resize-handle[data-v-d726d76e] {
1321
- cursor: nwse-resize;
1322
-
1323
- position: absolute;
1324
- z-index: 9999;
1325
- right: 0;
1326
- bottom: 0;
1327
-
1328
- width: 24px;
1329
- height: 24px;
1330
-
1331
- opacity: 0.5;
1332
-
1333
- transition: opacity 0.2s;
1334
- }
1335
- .resize-handle[data-v-d726d76e]:hover {
1336
- opacity: 1;
1337
- }
1338
- .resize-handle[data-v-d726d76e]::after {
1339
- content: '';
1340
-
1341
- position: absolute;
1342
- right: 6px;
1343
- bottom: 6px;
1344
-
1345
- width: 0;
1346
- height: 0;
1347
- border-top: 10px solid transparent;
1348
- border-right: 10px solid #0e77cc;
1349
- border-bottom: 10px solid #0e77cc;
1350
- border-left: 10px solid transparent;
1351
-
1352
- opacity: 0.6;
1353
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
1354
- }
1355
- @keyframes window-enter-d726d76e {
1356
- from {
1357
- transform: translate3d(0, 16px, 0) scale(0.98);
1358
- opacity: 0;
1359
- }
1360
- to {
1361
- transform: translate3d(0, 0, 0) scale(1);
1362
- opacity: 1;
1363
- }
1364
- }
1365
- @media (width <= 960px) {
1366
- .second-sidebar[data-v-d726d76e] {
1367
- width: 220px;
1368
- }
1369
- }
1370
-
1371
- .float-button[data-v-a60f9c33] {
1372
- touch-action: none;
1373
- cursor: grab;
1374
- user-select: none;
1375
-
1376
- position: fixed;
1377
- z-index: 9999;
1378
-
1379
- display: flex;
1380
- align-items: center;
1381
- justify-content: center;
1382
-
1383
- width: 64px;
1384
- height: 64px;
1385
- border: 1px solid #0e77cc;
1386
- border-radius: 50%;
1387
-
1388
- background: #fff;
1389
- box-shadow: 0 4px 20px rgba(14, 119, 204, 0.3);
1390
-
1391
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1392
- }
1393
- .float-button.is-hidden[data-v-a60f9c33] {
1394
- pointer-events: none;
1395
- transform: scale(0.88);
1396
- opacity: 0;
1397
- }
1398
- .float-button[data-v-a60f9c33]:hover {
1399
- transform: translateY(-2px);
1400
- box-shadow: 0 6px 30px rgba(14, 119, 204, 0.4);
1401
- }
1402
- .float-button[data-v-a60f9c33]:active {
1403
- transform: translateY(0) scale(0.95);
1404
- }
1405
- .float-button.is-dragging[data-v-a60f9c33] {
1406
- cursor: grabbing;
1407
- transform: scale(1.08);
1408
- box-shadow: 0 8px 35px rgba(14, 119, 204, 0.35);
1409
- }
1410
- .float-button .icon[data-v-a60f9c33] {
1411
- pointer-events: none;
1412
-
1413
- display: flex;
1414
- align-items: center;
1415
- justify-content: center;
1416
-
1417
- width: 32px;
1418
- height: 32px;
1419
-
1420
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
1421
- }
1422
- .float-button .icon img[data-v-a60f9c33] {
1423
- width: 100%;
1424
- height: 100%;
1425
- object-fit: contain;
1426
- }
1427
- .float-button .badge[data-v-a60f9c33] {
1428
- pointer-events: none;
1429
-
1430
- position: absolute;
1431
- top: 4px;
1432
- right: 4px;
1433
-
1434
- display: flex;
1435
- align-items: center;
1436
- justify-content: center;
1437
-
1438
- min-width: 20px;
1439
- height: 20px;
1440
- padding: 0 6px;
1441
- border: 2.5px solid white;
1442
- border-radius: 10px;
1443
-
1444
- font-size: 11px;
1445
- font-weight: 600;
1446
- line-height: 1;
1447
- color: white;
1448
-
1449
- background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
1450
- box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4);
1451
- }
1452
- .float-button.has-unread[data-v-a60f9c33] {
1453
- animation: pulse-a60f9c33 2s ease-in-out infinite;
1454
- }
1455
- @keyframes pulse-a60f9c33 {
1456
- 0%, 100% {
1457
- box-shadow: 0 4px 20px rgba(14, 119, 204, 0.3),
1458
- 0 0 0 0 rgba(255, 77, 79, 0.4);
1459
- }
1460
- 50% {
1461
- box-shadow: 0 4px 20px rgba(14, 119, 204, 0.3),
1462
- 0 0 0 12px rgba(255, 77, 79, 0);
1463
- }
1464
- }
1465
- /*$vite$:1*/
1
+ @import '@zjw-jszn/shared-imsdk/style.css';