yx-web-sdk 0.0.19 → 0.0.21

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 (32) hide show
  1. package/dist/ait-person-popover/index.js +1 -1
  2. package/dist/chat-card/index.js +1 -1
  3. package/dist/chat-content/index.js +1 -1
  4. package/dist/chat-page/index.js +1 -1
  5. package/dist/chat-room/index.js +1 -1
  6. package/dist/common-avatar/index.js +1 -1
  7. package/dist/components/img-info-wrapper/index.d.ts +0 -0
  8. package/dist/components/img-info-wrapper/index.vue.d.ts +6 -0
  9. package/dist/img-info-wrapper/index.js +1 -0
  10. package/dist/index/style2.css +30 -162
  11. package/dist/index/style4.css +177 -125
  12. package/dist/index/style6.css +513 -25
  13. package/dist/index/style7.css +143 -466
  14. package/dist/{index-DHnPD8u9.mjs → index-BPnLB3av.mjs} +1 -1
  15. package/dist/{index-BjIqS2ZC.mjs → index-DME8_VYv.mjs} +2 -2
  16. package/dist/{index-D5gp5t2F.mjs → index-Dwglj7_M.mjs} +1 -1
  17. package/dist/index-entry/index.js +4 -4
  18. package/dist/{index.vue_vue_type_script_setup_true_lang-CkWszgC3.mjs → index.vue_vue_type_script_setup_true_lang-CD6o8jT4.mjs} +9 -3
  19. package/dist/{index.vue_vue_type_style_index_0_lang-C-imP01W.mjs → index.vue_vue_type_style_index_0_lang-BJGCxPce.mjs} +3 -3
  20. package/dist/{index.vue_vue_type_style_index_0_lang-CAZ44kgX.mjs → index.vue_vue_type_style_index_0_lang-BaKNB-4q.mjs} +33 -7
  21. package/dist/{index.vue_vue_type_style_index_0_lang-CA27kCm1.mjs → index.vue_vue_type_style_index_0_lang-CsNgkPt9.mjs} +101 -17
  22. package/dist/{index.vue_vue_type_style_index_0_lang-5DeqmRdw.mjs → index.vue_vue_type_style_index_0_lang-iBkYSdDj.mjs} +156 -38
  23. package/dist/members-sidebar/index.js +1 -1
  24. package/dist/notice-box/index.js +1 -1
  25. package/dist/server-channel-sidebar/index.js +1 -1
  26. package/dist/stores/channel.d.ts +18 -2
  27. package/dist/style.css +155 -70
  28. package/dist/utils/index.d.ts +10 -2
  29. package/dist/yx-web-sdk.es.js +321 -90
  30. package/dist/yx-web-sdk.umd.js +320 -89
  31. package/package.json +1 -1
  32. /package/dist/{index.vue_vue_type_style_index_0_lang-B2YRkoln.mjs → index.vue_vue_type_style_index_0_lang-BxXBf_VA.mjs} +0 -0
@@ -1,43 +1,531 @@
1
- @charset "UTF-8";
2
- .yx-channel-notice {
3
- background: var(--theme-im-n-bg, #dbe2fa);
4
- border-radius: 6px;
5
- padding: 13px 16px;
6
- color: var(--theme-primary, #000);
1
+ .sidebar-container[data-v-961f30d7] {
2
+ display: flex;
3
+ height: 100%;
4
+ position: relative;
5
+ }
6
+ .sidebar-container.is-switching .server-item[data-v-961f30d7],
7
+ .sidebar-container.is-switching .channel-item[data-v-961f30d7] {
8
+ cursor: not-allowed;
9
+ opacity: 0.6;
10
+ pointer-events: none;
11
+ }
12
+ .user-panel-float[data-v-961f30d7] {
13
+ position: absolute;
14
+ bottom: 12px;
15
+ left: 12px;
7
16
  display: flex;
8
17
  align-items: center;
18
+ padding: 10px 12px;
19
+ background-color: var(--theme-global-bg);
20
+ border: 1px solid var(--theme-line-border);
21
+ z-index: 10;
22
+ gap: 10px;
23
+ border-radius: 8px;
24
+ box-shadow: 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431);
25
+ }
26
+ .user-panel-float .user-avatar[data-v-961f30d7] {
27
+ position: relative;
28
+ flex-shrink: 0;
29
+ }
30
+ .user-panel-float .user-avatar .online-indicator[data-v-961f30d7] {
31
+ position: absolute;
32
+ bottom: 0;
33
+ right: 0;
34
+ width: 12px;
35
+ height: 12px;
36
+ background-color: var(--theme-success-text);
37
+ border: 3px solid #1a1b1e;
38
+ border-radius: 50%;
39
+ }
40
+ .user-panel-float .user-info[data-v-961f30d7] {
41
+ flex: 1;
9
42
  overflow: hidden;
10
- max-width: 100%;
11
- width: 100%;
43
+ min-width: 0;
44
+ }
45
+ .user-panel-float .user-info .user-name[data-v-961f30d7] {
46
+ font-size: 14px;
47
+ font-weight: 600;
48
+ color: var(--theme-text);
49
+ overflow: hidden;
50
+ text-overflow: ellipsis;
51
+ white-space: nowrap;
52
+ }
53
+ .user-panel-float .user-info .user-status[data-v-961f30d7] {
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 4px;
57
+ font-size: 12px;
58
+ color: var(--theme-success-text);
59
+ }
60
+ .user-panel-float .user-info .user-status .status-dot[data-v-961f30d7] {
61
+ width: 8px;
62
+ height: 8px;
63
+ background-color: var(--theme-success-text);
64
+ border-radius: 50%;
12
65
  }
13
- .yx-channel-notice .yx-channel-notice-icon {
66
+ .user-panel-float .user-actions[data-v-961f30d7] {
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 8px;
70
+ }
71
+ .user-panel-float .user-actions .action-btn[data-v-961f30d7] {
14
72
  width: 20px;
15
73
  height: 20px;
16
- margin-right: 16px;
17
- flex-shrink: 0;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ border-radius: 4px;
78
+ color: #b9bbbe;
79
+ cursor: pointer;
80
+ transition: all 0.15s ease;
81
+ font-size: 16px;
82
+ outline: none;
83
+ }
84
+ .user-panel-float .user-actions .action-btn[data-v-961f30d7]:hover {
85
+ background-color: var(--theme-icon-hover);
86
+ color: var(--theme-text);
87
+ }
88
+ .user-panel-float .user-actions .action-btn[data-v-961f30d7]:focus {
89
+ outline: none;
90
+ }
91
+ .server-sidebar[data-v-961f30d7] {
92
+ display: flex;
93
+ flex-direction: column;
94
+ width: 72px;
95
+ background-color: var(--theme-table-header-bg);
96
+ padding: 0 0 16px;
97
+ padding-bottom: 73px;
18
98
  }
19
- .yx-channel-notice .yx-channel-notice-text {
99
+ .server-sidebar .server-list[data-v-961f30d7] {
20
100
  flex: 1;
21
- min-width: 0;
101
+ overflow-y: auto;
102
+ overflow-x: hidden;
103
+ border-right: 1px solid var(--theme-line);
104
+ padding-top: 16px;
105
+ }
106
+ .server-sidebar .server-list[data-v-961f30d7]::-webkit-scrollbar {
107
+ width: 0;
108
+ }
109
+ .server-sidebar .logo-wrap[data-v-961f30d7] {
110
+ margin: 0 16px;
111
+ border-bottom: 1px solid var(--theme-line-split);
112
+ padding-bottom: 12px;
113
+ margin-bottom: 12px;
114
+ }
115
+ .server-sidebar .logo-wrap .logo[data-v-961f30d7] {
116
+ width: 40px;
117
+ height: 40px;
118
+ border-radius: 8px;
119
+ background-color: rgba(218, 32, 62, 0.1);
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
22
123
  overflow: hidden;
124
+ transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
125
+ }
126
+ .server-sidebar .server-item[data-v-961f30d7] {
127
+ position: relative;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ margin: 0 16px 16px;
132
+ cursor: pointer;
133
+ }
134
+ .server-sidebar .server-item .server-icon[data-v-961f30d7] {
135
+ width: 40px;
136
+ height: 40px;
137
+ border-radius: 8px;
138
+ border: 1px solid var(--theme-line-border);
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ overflow: hidden;
143
+ transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
144
+ }
145
+ .server-sidebar .server-item .server-icon img[data-v-961f30d7] {
146
+ width: 100%;
147
+ height: 100%;
148
+ -o-object-fit: cover;
149
+ object-fit: cover;
150
+ }
151
+ .server-sidebar .server-item .server-icon .server-initial[data-v-961f30d7] {
152
+ font-size: 18px;
153
+ font-weight: 500;
154
+ color: var(--theme-text);
155
+ }
156
+ .server-sidebar .server-item:hover .server-icon[data-v-961f30d7], .server-sidebar .server-item.active .server-icon[data-v-961f30d7] {
157
+ border-radius: 16px;
158
+ background-color: var(--theme-form-control-line-active);
159
+ border: 1px solid var(--theme-table-header-bg);
160
+ }
161
+ .server-sidebar .server-item:hover .server-icon .server-initial[data-v-961f30d7], .server-sidebar .server-item.active .server-icon .server-initial[data-v-961f30d7] {
162
+ color: var(--theme-light-text);
163
+ }
164
+ .server-sidebar .server-item .unread-badge[data-v-961f30d7] {
165
+ position: absolute;
166
+ bottom: -4px;
167
+ right: 4px;
168
+ }
169
+ .server-sidebar .server-item.add-server[data-v-961f30d7] {
170
+ margin-top: 8px;
171
+ padding-top: 8px;
172
+ border-top: 2px solid var(--theme-global-bg);
173
+ }
174
+ .server-sidebar .server-item.add-server .add-server-btn[data-v-961f30d7] {
175
+ width: 48px;
176
+ height: 48px;
177
+ border-radius: 50%;
178
+ background-color: var(--theme-global-bg);
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ cursor: pointer;
183
+ transition: border-radius 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
184
+ color: var(--theme-success-text);
185
+ font-size: 20px;
186
+ }
187
+ .server-sidebar .server-item.add-server .add-server-btn[data-v-961f30d7]:hover {
188
+ border-radius: 16px;
189
+ background-color: var(--theme-success-text);
190
+ color: var(--theme-text);
191
+ }
192
+ .channel-sidebar[data-v-961f30d7] {
193
+ display: flex;
194
+ flex-direction: column;
195
+ width: 294px;
196
+ min-width: 150px;
197
+ max-width: 300px;
198
+ box-sizing: border-box;
199
+ background-color: var(--theme-table-header-bg);
200
+ border-right: 1px solid var(--theme-line);
201
+ padding-bottom: 73px;
202
+ position: relative;
203
+ }
204
+ .channel-sidebar .resize-handle[data-v-961f30d7] {
205
+ position: absolute;
206
+ top: 0;
207
+ right: -3px;
208
+ width: 4px;
209
+ height: 100%;
210
+ cursor: col-resize;
211
+ z-index: 20;
212
+ transition: background-color 0.15s ease;
213
+ }
214
+ .channel-sidebar .resize-handle[data-v-961f30d7]:hover, .channel-sidebar .resize-handle[data-v-961f30d7]:active {
215
+ background-color: var(--theme-form-control-line-active);
216
+ }
217
+ .channel-sidebar .server-header[data-v-961f30d7] {
218
+ display: flex;
219
+ align-items: center;
220
+ justify-content: space-between;
221
+ padding: 22px 20px;
222
+ border-bottom: 1px solid var(--theme-line);
223
+ }
224
+ .channel-sidebar .server-header .server-name[data-v-961f30d7] {
225
+ font-size: 15px;
226
+ font-weight: 600;
227
+ color: var(--theme-stress-text);
228
+ overflow: hidden;
229
+ text-overflow: ellipsis;
230
+ white-space: nowrap;
231
+ }
232
+ .channel-sidebar .server-header .server-setting[data-v-961f30d7] {
233
+ color: #b9bbbe;
234
+ cursor: pointer;
235
+ font-size: 16px;
236
+ }
237
+ .channel-sidebar .server-header .server-setting[data-v-961f30d7]:hover {
238
+ color: #dcddde;
239
+ }
240
+ .channel-sidebar .channel-list[data-v-961f30d7] {
241
+ flex: 1;
242
+ overflow-y: auto;
243
+ }
244
+ .channel-sidebar .channel-list[data-v-961f30d7]::-webkit-scrollbar {
245
+ width: 4px;
246
+ }
247
+ .channel-sidebar .channel-list[data-v-961f30d7]::-webkit-scrollbar-thumb {
248
+ background-color: var(--theme-line);
249
+ border-radius: 2px;
250
+ }
251
+ .channel-sidebar .channel-item[data-v-961f30d7] {
252
+ display: flex;
253
+ align-items: center;
254
+ padding: 0 20px;
255
+ height: 46px;
256
+ line-height: 46px;
257
+ border-radius: 4px;
258
+ cursor: pointer;
259
+ color: var(--theme-icon-fill-weak);
23
260
  }
24
- .yx-channel-notice .yx-channel-notice-text-inner {
25
- line-height: 22px;
26
- display: inline-flex;
261
+ .channel-sidebar .channel-item[data-v-961f30d7]:not(:last-child) {
262
+ margin-bottom: 2px;
263
+ }
264
+ .channel-sidebar .channel-item[data-v-961f30d7]:hover {
265
+ background-color: var(--theme-select-bg);
266
+ color: var(--theme-text);
267
+ }
268
+ .channel-sidebar .channel-item:hover .channel-setting[data-v-961f30d7] {
269
+ opacity: 1;
270
+ }
271
+ .channel-sidebar .channel-item.active[data-v-961f30d7] {
272
+ background-color: var(--theme-select-bg);
273
+ color: var(--theme-text);
274
+ font-weight: 500;
275
+ font-size: 16px;
276
+ }
277
+ .channel-sidebar .channel-item .channel-icon[data-v-961f30d7] {
278
+ margin-right: 6px;
279
+ font-size: 20px;
280
+ font-weight: 400;
281
+ color: #8e9297;
282
+ }
283
+ .channel-sidebar .channel-item .channel-name[data-v-961f30d7] {
284
+ flex: 1;
285
+ overflow: hidden;
286
+ text-overflow: ellipsis;
27
287
  white-space: nowrap;
288
+ font-size: 14px;
28
289
  }
29
- .yx-channel-notice .yx-channel-notice-text-inner.yx-channel-notice-text--scroll {
30
- animation: yx-notice-scroll var(--yx-notice-duration, 15s) linear infinite;
290
+ .channel-sidebar .channel-item .channel-unread[data-v-961f30d7] {
291
+ margin-left: 4px;
31
292
  }
32
- .yx-channel-notice .yx-channel-notice-text-item {
293
+ .channel-sidebar .channel-item .channel-setting[data-v-961f30d7] {
294
+ opacity: 0;
295
+ margin-left: 8px;
296
+ font-size: 14px;
297
+ color: #8e9297;
298
+ cursor: pointer;
299
+ transition: opacity 0.15s ease, color 0.15s ease;
33
300
  flex-shrink: 0;
34
- padding-right: 2em; /* 两段文字之间的间隔 */
35
301
  }
36
- @keyframes yx-notice-scroll {
37
- 0% {
38
- transform: translateX(0);
302
+ .channel-sidebar .channel-item .channel-setting[data-v-961f30d7]:hover {
303
+ color: var(--theme-text);
304
+ }
305
+ .channel-sidebar .add-channel-item[data-v-961f30d7] {
306
+ display: flex;
307
+ align-items: center;
308
+ padding: 12px 22px;
309
+ border-radius: 4px;
310
+ cursor: pointer;
311
+ margin-top: 4px;
312
+ color: var(--theme-link);
313
+ }
314
+ .channel-sidebar .add-channel-item .channel-icon[data-v-961f30d7] {
315
+ margin-right: 6px;
316
+ font-size: 16px;
317
+ color: var(--theme-link);
318
+ transition: color 0.15s ease;
319
+ display: flex;
320
+ align-items: center;
321
+ justify-content: center;
322
+ }
323
+ .channel-sidebar .add-channel-item .channel-name[data-v-961f30d7] {
324
+ font-size: 14px;
325
+ }
326
+ [data-v-961f30d7] .ant-modal .ant-modal-content {
327
+ background-color: var(--theme-global-bg);
328
+ border-radius: 8px;
329
+ }
330
+ [data-v-961f30d7] .ant-modal .ant-modal-header {
331
+ background-color: var(--theme-global-bg);
332
+ border-bottom: none;
333
+ }
334
+ [data-v-961f30d7] .ant-modal .ant-modal-title {
335
+ color: var(--theme-text);
336
+ }
337
+ [data-v-961f30d7] .ant-modal .ant-modal-close-x {
338
+ color: #b9bbbe;
339
+ }
340
+ [data-v-961f30d7] .ant-modal .ant-form-item-label > label {
341
+ color: #b9bbbe;
342
+ }
343
+ [data-v-961f30d7] .ant-modal .ant-input {
344
+ background-color: var(--theme-line);
345
+ border-color: #040405;
346
+ color: #dcddde;
347
+ }
348
+ [data-v-961f30d7] .ant-modal .ant-input::-moz-placeholder {
349
+ color: #72767d;
350
+ }
351
+ [data-v-961f30d7] .ant-modal .ant-input:-ms-input-placeholder {
352
+ color: #72767d;
353
+ }
354
+ [data-v-961f30d7] .ant-modal .ant-input::placeholder {
355
+ color: #72767d;
356
+ }
357
+ [data-v-961f30d7] .ant-modal .ant-input:hover,[data-v-961f30d7] .ant-modal .ant-input:focus {
358
+ border-color: #5865f2;
359
+ }
360
+ [data-v-961f30d7] .ant-modal .ant-tabs-tab {
361
+ color: #b9bbbe;
362
+ }
363
+ [data-v-961f30d7] .ant-modal .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
364
+ color: var(--theme-text);
365
+ }
366
+ [data-v-961f30d7] .ant-modal .ant-tabs-ink-bar {
367
+ background-color: #5865f2;
368
+ }
369
+ .footer-container[data-v-961f30d7] {
370
+ display: flex;
371
+ align-items: center;
372
+ justify-content: flex-end;
373
+ gap: 10px;
374
+ }
375
+ .invite-btn[data-v-961f30d7] {
376
+ cursor: pointer;
377
+ color: var(--theme-icon-fill-weak);
378
+ transition: color 0.15s ease;
379
+ }
380
+ .invite-btn[data-v-961f30d7]:hover {
381
+ color: var(--theme-text);
382
+ }.channel-modal .ant-modal-header {
383
+ background-color: var(--theme-table-header-bg);
384
+ padding: 16px;
385
+ margin-bottom: 0;
386
+ }
387
+ .channel-modal .ant-modal-close {
388
+ display: none;
389
+ }
390
+ .channel-modal .header-container {
391
+ display: flex;
392
+ align-items: center;
393
+ justify-content: space-between;
394
+ }
395
+ .channel-modal .header-container .header-title {
396
+ font-size: 16px;
397
+ font-weight: 600;
398
+ color: var(--theme-text);
399
+ }
400
+ .channel-modal .header-container .header-close {
401
+ cursor: pointer;
402
+ font-size: 14px;
403
+ padding: 4px;
404
+ color: var(--theme-text);
405
+ }
406
+ .invite-modal .ant-modal-content {
407
+ border-radius: 8px;
408
+ padding: 0;
409
+ }
410
+ .invite-modal .ant-modal-header {
411
+ background-color: var(--theme-table-header-bg);
412
+ padding: 20px 24px 16px;
413
+ margin-bottom: 0;
414
+ border-bottom: none;
415
+ }
416
+ .invite-modal .ant-modal-body {
417
+ padding: 24px;
418
+ }
419
+ .invite-modal .ant-modal-close {
420
+ display: none;
421
+ }
422
+ .invite-modal .header-container {
423
+ display: flex;
424
+ align-items: center;
425
+ justify-content: space-between;
426
+ }
427
+ .invite-modal .header-container .header-title {
428
+ font-size: 16px;
429
+ font-weight: 600;
430
+ color: var(--theme-text);
431
+ }
432
+ .invite-modal .invite-header {
433
+ display: flex;
434
+ align-items: flex-start;
435
+ justify-content: space-between;
436
+ }
437
+ .invite-modal .invite-header .invite-title-row {
438
+ display: flex;
439
+ align-items: center;
440
+ gap: 8px;
441
+ }
442
+ .invite-modal .invite-header .invite-title-row .invite-icon {
443
+ font-size: 18px;
444
+ color: var(--theme-text);
445
+ }
446
+ .invite-modal .invite-header .invite-title-row .invite-title {
447
+ font-size: 18px;
448
+ font-weight: 600;
449
+ color: var(--theme-text);
450
+ }
451
+ .invite-modal .invite-header .invite-close {
452
+ cursor: pointer;
453
+ color: var(--theme-icon-fill-weak);
454
+ font-size: 16px;
455
+ padding: 4px;
456
+ transition: color 0.15s ease;
457
+ }
458
+ .invite-modal .invite-header .invite-close:hover {
459
+ color: var(--theme-text);
460
+ }
461
+ .invite-modal .invite-content .invite-subtitle {
462
+ font-size: 15px;
463
+ font-weight: 600;
464
+ color: var(--theme-text);
465
+ margin-bottom: 12px;
466
+ }
467
+ .invite-modal .invite-content .invite-subtitle .channel-tag {
468
+ color: var(--theme-text);
469
+ }
470
+ .invite-modal .invite-content .invite-desc {
471
+ font-size: 14px;
472
+ color: var(--theme-icon-fill-weak);
473
+ margin-bottom: 16px;
474
+ }
475
+ .invite-modal .invite-content .invite-link-wrap {
476
+ display: flex;
477
+ align-items: center;
478
+ gap: 12px;
479
+ border: 1px solid var(--theme-line-border);
480
+ border-radius: 6px;
481
+ padding: 8px 8px 8px 16px;
482
+ }
483
+ .invite-modal .invite-content .invite-link-wrap .invite-link-input {
484
+ flex: 1;
485
+ border: none;
486
+ background: transparent;
487
+ color: var(--theme-text);
488
+ font-size: 14px;
489
+ padding: 0;
490
+ box-shadow: none;
491
+ }
492
+ .invite-modal .invite-content .invite-link-wrap .invite-link-input:focus, .invite-modal .invite-content .invite-link-wrap .invite-link-input:hover {
493
+ border: none;
494
+ box-shadow: none;
495
+ }
496
+ .invite-modal .invite-content .invite-link-wrap .invite-link-input.ant-input {
497
+ background: transparent;
498
+ }
499
+ .invite-modal .invite-content .invite-link-wrap .copy-btn {
500
+ flex-shrink: 0;
501
+ background-color: var(--theme-btn-primary);
502
+ border: none;
503
+ color: var(--theme-light-text);
504
+ font-weight: 500;
505
+ padding: 6px 20px;
506
+ height: auto;
507
+ border-radius: 4px;
508
+ }
509
+ .invite-modal .invite-content .invite-link-wrap .copy-btn:hover {
510
+ background-color: var(--theme-btn-primary-hover);
511
+ opacity: 0.9;
512
+ }
513
+ .invite-modal .header-close {
514
+ cursor: pointer;
515
+ font-size: 14px;
516
+ padding: 4px;
517
+ color: var(--theme-text);
518
+ }
519
+ .delete-channel-modal .ant-modal-body {
520
+ padding-bottom: 16px;
39
521
  }
40
- 100% {
41
- transform: translateX(-50%);
522
+ body.resizing {
523
+ -webkit-user-select: none;
524
+ -moz-user-select: none;
525
+ -ms-user-select: none;
526
+ user-select: none;
527
+ cursor: col-resize !important;
42
528
  }
529
+ body.resizing * {
530
+ cursor: col-resize !important;
43
531
  }