yx-web-sdk 0.0.19 → 0.0.21

package/dist/style.css

@@ -60,6 +60,11 @@
   color: var(--theme-light-text);
   text-align: center;
   line-height: 70px;
+}.yx-attach-box-img-info-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  overflow: hidden;
 }
 .yx-chatCardWrapper {
   width: 100%;
@@ -89,6 +94,17 @@
   margin-right: 10px;
   margin-left: 0;
 }
+.yx-chatCardWrapper.reverse .attach-box {
+  margin-left: auto;
+}
+.yx-chatCardWrapper .chatCardMainContent.attach-box {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: var(--theme-home-tab-bg-color, #f2f2f2);
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .yx-chatCardWrapper .chat-withdraw-msg {
   flex: 1;
   text-align: center;
@@ -150,12 +166,27 @@
   color: var(--theme-text, #252b3a) !important;
 }
 .yx-chatCardWrapper .chatCardQuoteMsg {
-  margin-top: 8px;
+  margin-top: 12px;
   font-size: 16px;
   padding: 12px 16px;
   background-color: var(--theme-home-tab-bg-color, #f2f2f2);
   border-radius: 8px;
 }
+.yx-chatCardWrapper .chatCardQuoteMsg .chatCardQuoteMsgAttachBox {
+  position: relative;
+  padding-left: 24px;
+}
+.yx-chatCardWrapper .chatCardQuoteMsg .chatCardQuoteMsgAttachBox:before {
+  position: absolute;
+  left: 0;
+  top: 0.5em;
+  bottom: 0.5em;
+  content: "";
+  display: block;
+  width: 4px;
+  border-radius: 4px;
+  background-color: var(--theme-line, #e3e3ee);
+}
 .yx-chatCardWrapper .chatCardQuoteMsg .quoteMsgText {
   color: var(--theme-text, #252b3a);
   word-break: break-all;
@@ -368,10 +399,26 @@
   margin-bottom: 12px;
   position: relative;
 }
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteAttachBox {
+  padding-left: 20px;
+  position: relative;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteAttachBox:before {
+  position: absolute;
+  left: 0;
+  top: 0.5em;
+  bottom: 0.5em;
+  content: "";
+  display: block;
+  width: 4px;
+  border-radius: 4px;
+  background-color: var(--theme-line, #e3e3ee);
+}
 .yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteDeleteBtn {
   position: absolute;
   right: 0;
   top: 0;
+  z-index: 1;
   color: var(--theme-text, #252b3a);
 }
 .yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText {
@@ -405,6 +452,38 @@
   -webkit-user-drag: none;
   pointer-events: none;
 }
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg:hover .chatroomInputAttachmentWrapperImgMask {
+  display: block;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg:hover .chatroomInputAttachmentDeleteBtn {
+  display: block;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg .chatroomInputAttachmentWrapperImgMask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: none;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg .chatroomInputAttachmentDeleteBtn {
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  transform: translateY(-50%) translateX(50%);
+  color: var(--theme-text, #252b3a);
+  z-index: 1;
+  display: none;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg .chatroomInputAttachmentDeleteBtn svg {
+  color: #fff;
+}
 .yx-chatroomWrapper {
   --input-controller-height: 34px;
 }
@@ -491,6 +570,9 @@
   display: flex;
   align-items: flex-end;
   gap: 12px;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputUpload .anticon-loading {
+  color: var(--theme-text, #252b3a);
 }.yx-chat-page-container {
   position: relative;
   display: flex;
@@ -689,18 +771,18 @@
   margin-bottom: 6px;
   border-radius: 8px;
   background-color: #282a2f;
-}.sidebar-container[data-v-2f397ece] {
+}.sidebar-container[data-v-961f30d7] {
   display: flex;
   height: 100%;
   position: relative;
 }
-.sidebar-container.is-switching .server-item[data-v-2f397ece],
-.sidebar-container.is-switching .channel-item[data-v-2f397ece] {
+.sidebar-container.is-switching .server-item[data-v-961f30d7],
+.sidebar-container.is-switching .channel-item[data-v-961f30d7] {
   cursor: not-allowed;
   opacity: 0.6;
   pointer-events: none;
 }
-.user-panel-float[data-v-2f397ece] {
+.user-panel-float[data-v-961f30d7] {
   position: absolute;
   bottom: 12px;
   left: 12px;
@@ -714,11 +796,11 @@
   border-radius: 8px;
   box-shadow: 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431);
 }
-.user-panel-float .user-avatar[data-v-2f397ece] {
+.user-panel-float .user-avatar[data-v-961f30d7] {
   position: relative;
   flex-shrink: 0;
 }
-.user-panel-float .user-avatar .online-indicator[data-v-2f397ece] {
+.user-panel-float .user-avatar .online-indicator[data-v-961f30d7] {
   position: absolute;
   bottom: 0;
   right: 0;
@@ -728,12 +810,12 @@
   border: 3px solid #1a1b1e;
   border-radius: 50%;
 }
-.user-panel-float .user-info[data-v-2f397ece] {
+.user-panel-float .user-info[data-v-961f30d7] {
   flex: 1;
   overflow: hidden;
   min-width: 0;
 }
-.user-panel-float .user-info .user-name[data-v-2f397ece] {
+.user-panel-float .user-info .user-name[data-v-961f30d7] {
   font-size: 14px;
   font-weight: 600;
   color: var(--theme-text);
@@ -741,25 +823,25 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.user-panel-float .user-info .user-status[data-v-2f397ece] {
+.user-panel-float .user-info .user-status[data-v-961f30d7] {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   color: var(--theme-success-text);
 }
-.user-panel-float .user-info .user-status .status-dot[data-v-2f397ece] {
+.user-panel-float .user-info .user-status .status-dot[data-v-961f30d7] {
   width: 8px;
   height: 8px;
   background-color: var(--theme-success-text);
   border-radius: 50%;
 }
-.user-panel-float .user-actions[data-v-2f397ece] {
+.user-panel-float .user-actions[data-v-961f30d7] {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.user-panel-float .user-actions .action-btn[data-v-2f397ece] {
+.user-panel-float .user-actions .action-btn[data-v-961f30d7] {
   width: 20px;
   height: 20px;
   display: flex;
@@ -772,14 +854,14 @@
   font-size: 16px;
   outline: none;
 }
-.user-panel-float .user-actions .action-btn[data-v-2f397ece]:hover {
+.user-panel-float .user-actions .action-btn[data-v-961f30d7]:hover {
   background-color: var(--theme-icon-hover);
   color: var(--theme-text);
 }
-.user-panel-float .user-actions .action-btn[data-v-2f397ece]:focus {
+.user-panel-float .user-actions .action-btn[data-v-961f30d7]:focus {
   outline: none;
 }
-.server-sidebar[data-v-2f397ece] {
+.server-sidebar[data-v-961f30d7] {
   display: flex;
   flex-direction: column;
   width: 72px;
@@ -787,23 +869,23 @@
   padding: 0 0 16px;
   padding-bottom: 73px;
 }
-.server-sidebar .server-list[data-v-2f397ece] {
+.server-sidebar .server-list[data-v-961f30d7] {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   border-right: 1px solid var(--theme-line);
   padding-top: 16px;
 }
-.server-sidebar .server-list[data-v-2f397ece]::-webkit-scrollbar {
+.server-sidebar .server-list[data-v-961f30d7]::-webkit-scrollbar {
   width: 0;
 }
-.server-sidebar .logo-wrap[data-v-2f397ece] {
+.server-sidebar .logo-wrap[data-v-961f30d7] {
   margin: 0 16px;
   border-bottom: 1px solid var(--theme-line-split);
   padding-bottom: 12px;
   margin-bottom: 12px;
 }
-.server-sidebar .logo-wrap .logo[data-v-2f397ece] {
+.server-sidebar .logo-wrap .logo[data-v-961f30d7] {
   width: 40px;
   height: 40px;
   border-radius: 8px;
@@ -814,7 +896,7 @@
   overflow: hidden;
   transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
 }
-.server-sidebar .server-item[data-v-2f397ece] {
+.server-sidebar .server-item[data-v-961f30d7] {
   position: relative;
   display: flex;
   align-items: center;
@@ -822,7 +904,7 @@
   margin: 0 16px 16px;
   cursor: pointer;
 }
-.server-sidebar .server-item .server-icon[data-v-2f397ece] {
+.server-sidebar .server-item .server-icon[data-v-961f30d7] {
   width: 40px;
   height: 40px;
   border-radius: 8px;
@@ -833,35 +915,36 @@
   overflow: hidden;
   transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
 }
-.server-sidebar .server-item .server-icon img[data-v-2f397ece] {
+.server-sidebar .server-item .server-icon img[data-v-961f30d7] {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
-.server-sidebar .server-item .server-icon .server-initial[data-v-2f397ece] {
+.server-sidebar .server-item .server-icon .server-initial[data-v-961f30d7] {
   font-size: 18px;
   font-weight: 500;
   color: var(--theme-text);
 }
-.server-sidebar .server-item:hover .server-icon[data-v-2f397ece], .server-sidebar .server-item.active .server-icon[data-v-2f397ece] {
+.server-sidebar .server-item:hover .server-icon[data-v-961f30d7], .server-sidebar .server-item.active .server-icon[data-v-961f30d7] {
   border-radius: 16px;
   background-color: var(--theme-form-control-line-active);
+  border: 1px solid var(--theme-table-header-bg);
 }
-.server-sidebar .server-item:hover .server-icon .server-initial[data-v-2f397ece], .server-sidebar .server-item.active .server-icon .server-initial[data-v-2f397ece] {
+.server-sidebar .server-item:hover .server-icon .server-initial[data-v-961f30d7], .server-sidebar .server-item.active .server-icon .server-initial[data-v-961f30d7] {
   color: var(--theme-light-text);
 }
-.server-sidebar .server-item .unread-badge[data-v-2f397ece] {
+.server-sidebar .server-item .unread-badge[data-v-961f30d7] {
   position: absolute;
   bottom: -4px;
   right: 4px;
 }
-.server-sidebar .server-item.add-server[data-v-2f397ece] {
+.server-sidebar .server-item.add-server[data-v-961f30d7] {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 2px solid var(--theme-global-bg);
 }
-.server-sidebar .server-item.add-server .add-server-btn[data-v-2f397ece] {
+.server-sidebar .server-item.add-server .add-server-btn[data-v-961f30d7] {
   width: 48px;
   height: 48px;
   border-radius: 50%;
@@ -874,12 +957,12 @@
   color: var(--theme-success-text);
   font-size: 20px;
 }
-.server-sidebar .server-item.add-server .add-server-btn[data-v-2f397ece]:hover {
+.server-sidebar .server-item.add-server .add-server-btn[data-v-961f30d7]:hover {
   border-radius: 16px;
   background-color: var(--theme-success-text);
   color: var(--theme-text);
 }
-.channel-sidebar[data-v-2f397ece] {
+.channel-sidebar[data-v-961f30d7] {
   display: flex;
   flex-direction: column;
   width: 294px;
@@ -891,7 +974,7 @@
   padding-bottom: 73px;
   position: relative;
 }
-.channel-sidebar .resize-handle[data-v-2f397ece] {
+.channel-sidebar .resize-handle[data-v-961f30d7] {
   position: absolute;
   top: 0;
   right: -3px;
@@ -901,17 +984,17 @@
   z-index: 20;
   transition: background-color 0.15s ease;
 }
-.channel-sidebar .resize-handle[data-v-2f397ece]:hover, .channel-sidebar .resize-handle[data-v-2f397ece]:active {
+.channel-sidebar .resize-handle[data-v-961f30d7]:hover, .channel-sidebar .resize-handle[data-v-961f30d7]:active {
   background-color: var(--theme-form-control-line-active);
 }
-.channel-sidebar .server-header[data-v-2f397ece] {
+.channel-sidebar .server-header[data-v-961f30d7] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px 20px;
   border-bottom: 1px solid var(--theme-line);
 }
-.channel-sidebar .server-header .server-name[data-v-2f397ece] {
+.channel-sidebar .server-header .server-name[data-v-961f30d7] {
   font-size: 15px;
   font-weight: 600;
   color: var(--theme-stress-text);
@@ -919,66 +1002,68 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.channel-sidebar .server-header .server-setting[data-v-2f397ece] {
+.channel-sidebar .server-header .server-setting[data-v-961f30d7] {
   color: #b9bbbe;
   cursor: pointer;
   font-size: 16px;
 }
-.channel-sidebar .server-header .server-setting[data-v-2f397ece]:hover {
+.channel-sidebar .server-header .server-setting[data-v-961f30d7]:hover {
   color: #dcddde;
 }
-.channel-sidebar .channel-list[data-v-2f397ece] {
+.channel-sidebar .channel-list[data-v-961f30d7] {
   flex: 1;
   overflow-y: auto;
 }
-.channel-sidebar .channel-list[data-v-2f397ece]::-webkit-scrollbar {
+.channel-sidebar .channel-list[data-v-961f30d7]::-webkit-scrollbar {
   width: 4px;
 }
-.channel-sidebar .channel-list[data-v-2f397ece]::-webkit-scrollbar-thumb {
+.channel-sidebar .channel-list[data-v-961f30d7]::-webkit-scrollbar-thumb {
   background-color: var(--theme-line);
   border-radius: 2px;
 }
-.channel-sidebar .channel-item[data-v-2f397ece] {
+.channel-sidebar .channel-item[data-v-961f30d7] {
   display: flex;
   align-items: center;
-  padding: 16px 22px;
+  padding: 0 20px;
+  height: 46px;
+  line-height: 46px;
   border-radius: 4px;
   cursor: pointer;
   color: var(--theme-icon-fill-weak);
 }
-.channel-sidebar .channel-item[data-v-2f397ece]:not(:last-child) {
+.channel-sidebar .channel-item[data-v-961f30d7]:not(:last-child) {
   margin-bottom: 2px;
 }
-.channel-sidebar .channel-item[data-v-2f397ece]:hover {
+.channel-sidebar .channel-item[data-v-961f30d7]:hover {
   background-color: var(--theme-select-bg);
   color: var(--theme-text);
 }
-.channel-sidebar .channel-item:hover .channel-setting[data-v-2f397ece] {
+.channel-sidebar .channel-item:hover .channel-setting[data-v-961f30d7] {
   opacity: 1;
 }
-.channel-sidebar .channel-item.active[data-v-2f397ece] {
+.channel-sidebar .channel-item.active[data-v-961f30d7] {
   background-color: var(--theme-select-bg);
   color: var(--theme-text);
   font-weight: 500;
   font-size: 16px;
 }
-.channel-sidebar .channel-item .channel-icon[data-v-2f397ece] {
+.channel-sidebar .channel-item .channel-icon[data-v-961f30d7] {
   margin-right: 6px;
   font-size: 20px;
   font-weight: 400;
   color: #8e9297;
 }
-.channel-sidebar .channel-item .channel-name[data-v-2f397ece] {
+.channel-sidebar .channel-item .channel-name[data-v-961f30d7] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
 }
-.channel-sidebar .channel-item .channel-unread[data-v-2f397ece] {
+.channel-sidebar .channel-item .channel-unread[data-v-961f30d7] {
   margin-left: 4px;
 }
-.channel-sidebar .channel-item .channel-setting[data-v-2f397ece] {
+.channel-sidebar .channel-item .channel-setting[data-v-961f30d7] {
   opacity: 0;
   margin-left: 8px;
   font-size: 14px;
@@ -987,10 +1072,10 @@
   transition: opacity 0.15s ease, color 0.15s ease;
   flex-shrink: 0;
 }
-.channel-sidebar .channel-item .channel-setting[data-v-2f397ece]:hover {
+.channel-sidebar .channel-item .channel-setting[data-v-961f30d7]:hover {
   color: var(--theme-text);
 }
-.channel-sidebar .add-channel-item[data-v-2f397ece] {
+.channel-sidebar .add-channel-item[data-v-961f30d7] {
   display: flex;
   align-items: center;
   padding: 12px 22px;
@@ -999,7 +1084,7 @@
   margin-top: 4px;
   color: var(--theme-link);
 }
-.channel-sidebar .add-channel-item .channel-icon[data-v-2f397ece] {
+.channel-sidebar .add-channel-item .channel-icon[data-v-961f30d7] {
   margin-right: 6px;
   font-size: 16px;
   color: var(--theme-link);
@@ -1008,64 +1093,64 @@
   align-items: center;
   justify-content: center;
 }
-.channel-sidebar .add-channel-item .channel-name[data-v-2f397ece] {
+.channel-sidebar .add-channel-item .channel-name[data-v-961f30d7] {
   font-size: 14px;
 }
-[data-v-2f397ece] .ant-modal .ant-modal-content {
+[data-v-961f30d7] .ant-modal .ant-modal-content {
   background-color: var(--theme-global-bg);
   border-radius: 8px;
 }
-[data-v-2f397ece] .ant-modal .ant-modal-header {
+[data-v-961f30d7] .ant-modal .ant-modal-header {
   background-color: var(--theme-global-bg);
   border-bottom: none;
 }
-[data-v-2f397ece] .ant-modal .ant-modal-title {
+[data-v-961f30d7] .ant-modal .ant-modal-title {
   color: var(--theme-text);
 }
-[data-v-2f397ece] .ant-modal .ant-modal-close-x {
+[data-v-961f30d7] .ant-modal .ant-modal-close-x {
   color: #b9bbbe;
 }
-[data-v-2f397ece] .ant-modal .ant-form-item-label > label {
+[data-v-961f30d7] .ant-modal .ant-form-item-label > label {
   color: #b9bbbe;
 }
-[data-v-2f397ece] .ant-modal .ant-input {
+[data-v-961f30d7] .ant-modal .ant-input {
   background-color: var(--theme-line);
   border-color: #040405;
   color: #dcddde;
 }
-[data-v-2f397ece] .ant-modal .ant-input::-moz-placeholder {
+[data-v-961f30d7] .ant-modal .ant-input::-moz-placeholder {
   color: #72767d;
 }
-[data-v-2f397ece] .ant-modal .ant-input:-ms-input-placeholder {
+[data-v-961f30d7] .ant-modal .ant-input:-ms-input-placeholder {
   color: #72767d;
 }
-[data-v-2f397ece] .ant-modal .ant-input::placeholder {
+[data-v-961f30d7] .ant-modal .ant-input::placeholder {
   color: #72767d;
 }
-[data-v-2f397ece] .ant-modal .ant-input:hover,[data-v-2f397ece] .ant-modal .ant-input:focus {
+[data-v-961f30d7] .ant-modal .ant-input:hover,[data-v-961f30d7] .ant-modal .ant-input:focus {
   border-color: #5865f2;
 }
-[data-v-2f397ece] .ant-modal .ant-tabs-tab {
+[data-v-961f30d7] .ant-modal .ant-tabs-tab {
   color: #b9bbbe;
 }
-[data-v-2f397ece] .ant-modal .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+[data-v-961f30d7] .ant-modal .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
   color: var(--theme-text);
 }
-[data-v-2f397ece] .ant-modal .ant-tabs-ink-bar {
+[data-v-961f30d7] .ant-modal .ant-tabs-ink-bar {
   background-color: #5865f2;
 }
-.footer-container[data-v-2f397ece] {
+.footer-container[data-v-961f30d7] {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
 }
-.invite-btn[data-v-2f397ece] {
+.invite-btn[data-v-961f30d7] {
   cursor: pointer;
   color: var(--theme-icon-fill-weak);
   transition: color 0.15s ease;
 }
-.invite-btn[data-v-2f397ece]:hover {
+.invite-btn[data-v-961f30d7]:hover {
   color: var(--theme-text);
 }.channel-modal .ant-modal-header {
   background-color: var(--theme-table-header-bg);

package/dist/utils/index.d.ts

@@ -5,8 +5,14 @@ export declare const filterStr: (str: string) => string;
 export declare const parseFileSize: (size: number, level?: number) => string;
 export declare const matchExt: (extname: string) => string;
 export declare const isLt: (size: number, target: number) => boolean;
-export declare const debounce: (fn: any, delay: number, immediate?: boolean) => (...args: any[]) => void;
-export declare const promiseDebounce: (func: any, wait: number) => (...args: any) => Promise<unknown>;
+export declare const debounce: (fn: () => void, delay: number, immediate?: boolean) => (...args: Parameters<typeof fn>) => void;
+/**
+ * 对返回 Promise 的函数做防抖：在 wait 内的多次调用会合并为一次执行，所有调用方共享同一结果
+ * @param func 返回 Promise 的函数
+ * @param wait 防抖等待时间（毫秒）
+ * @returns 防抖后的函数，调用返回 Promise
+ */
+export declare const promiseDebounce: <T, A extends unknown[]>(func: (...args: A) => Promise<T>, wait: number) => (this: unknown, ...args: A) => Promise<T>;
 /** 图片消息单边最小像素 */
 export declare const IMG_MSG_SIDE_MIN = 80;
 /** 图片消息单边最大像素 */
@@ -23,4 +29,6 @@ export declare function getImageMsgDisplaySize(attach: {
     width: number;
     height: number;
 };
+/** 将字节大小转换为MB */
+export declare const getMByteSize: (size: number) => string;
 export {};