@ibiz-template/vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.130

package/src/util/notification-util/notification-util.ts

@@ -0,0 +1,152 @@
+import { h } from 'vue';
+import {
+  INotificationUtil,
+  IUploadManagerParams,
+  NotificationParams,
+} from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { ElNotification, NotificationHandle } from 'element-plus';
+import { parseHtml } from '../wang-editor-util/wang-editor-util';
+import { IBizUploadManager } from './upload-manager/upload-manager';
+
+/**
+ * 在界面右上角显示可关闭的全局通知
+ *
+ * @author chitanda
+ * @date 2022-08-17 16:08:26
+ * @export
+ * @class NotificationUtil
+ * @implements {INotificationUtil}
+ */
+export class NotificationUtil implements INotificationUtil {
+  /**
+   * 通知调用栈
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 15:32:07
+   */
+  callStack: Array<() => void> = [];
+
+  /**
+   * 用于存储定时器返回的标识符
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 15:32:23
+   */
+  intervalId: NodeJS.Timeout | null = null;
+
+  /**
+   * 上传管理器
+   *
+   * @private
+   * @type {(NotificationHandle | undefined)}
+   * @memberof NotificationUtil
+   */
+  private uploadManagerHandle: NotificationHandle | undefined;
+
+  /**
+   * 执行下一步
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 15:32:45
+   */
+  private executeNext(): void {
+    const errorHandler = this.callStack.shift(); // 取出数组中的第一个元素
+    if (errorHandler) {
+      errorHandler(); // 执行处理错误的函数
+    } else {
+      // 如果调用栈为空，清除定时器
+      clearInterval(this.intervalId!);
+      this.intervalId = null;
+    }
+  }
+
+  /**
+   * 处理各类型提示
+   * @param {NotificationParams} params
+   * @param {string} type
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 16:09:40
+   */
+  private handleNotice(params: NotificationParams, noticeType: string): void {
+    const duration = params.duration ? params.duration * 1000 : 4500;
+    const msgContent = params.desc ? parseHtml(params.desc) : params.desc;
+    ElNotification({
+      title: params.title,
+      message: msgContent,
+      dangerouslyUseHTMLString: !!params.isHtmlDesc,
+      type: noticeType,
+      position: params.position || 'top-right',
+      duration,
+      customClass: params.class,
+      onClick: params.onClick,
+    } as NotificationParams);
+  }
+
+  /**
+   * 设置定时器
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 16:08:40
+   */
+  private setTimer() {
+    // 如果之前没有设置过定时器，则设置定时器
+    if (!this.intervalId) {
+      this.intervalId = setInterval(() => {
+        // 每隔50毫秒执行一次
+        this.executeNext();
+      }, 50);
+    }
+  }
+
+  default(params: NotificationParams): void {
+    this.callStack.push(() => this.handleNotice(params, ''));
+    this.setTimer();
+  }
+
+  info(params: NotificationParams): void {
+    this.callStack.push(() => this.handleNotice(params, 'info'));
+    this.setTimer();
+  }
+
+  success(params: NotificationParams): void {
+    this.callStack.push(() => this.handleNotice(params, 'success'));
+    this.setTimer();
+  }
+
+  warning(params: NotificationParams): void {
+    this.callStack.push(() => this.handleNotice(params, 'warning'));
+    this.setTimer();
+  }
+
+  error(params: NotificationParams): void {
+    this.callStack.push(() => this.handleNotice(params, 'error'));
+    this.setTimer();
+  }
+
+  uploadManager(params: IUploadManagerParams): Promise<IData[]> {
+    this.uploadManagerHandle?.close();
+    this.uploadManagerHandle = undefined;
+    return new Promise(resolve => {
+      const ns = useNamespace('upload-manager-notic');
+      this.uploadManagerHandle = ElNotification({
+        duration: 0,
+        showClose: false,
+        customClass: ns.b(),
+        position: 'bottom-right',
+        message: h(IBizUploadManager, {
+          params,
+          onUploadComplete: (data: IData[]) => {
+            resolve(data);
+          },
+          onClose: () => {
+            // 关闭时销毁
+            this.uploadManagerHandle?.close();
+            this.uploadManagerHandle = undefined;
+          },
+        }),
+      });
+    });
+  }
+}

package/src/util/notification-util/upload-manager/file-type.tsx

@@ -0,0 +1,261 @@
+const pdf = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='9641'
+  >
+    <path
+      d='M852.537678 966.322357c7.542461 0 14.818718-3.016984 20.142807-8.341075s8.341075-12.600347 8.341075-20.142807V262.033969c0-6.743847-2.395841-13.22149-6.743848-18.368111L725.469393 67.793414c-5.412825-6.388908-13.39896-10.115771-21.740034-10.115771h-532.231543c-7.542461 0-14.818718 3.016984-20.142807 8.341075s-8.341075 12.600347-8.341075 20.142807v851.67695c0 7.542461 3.016984 14.818718 8.341075 20.142807s12.600347 8.341075 20.142807 8.341075h681.039862z'
+      fill='#CA223D'
+      p-id='9642'
+    ></path>
+    <path
+      d='M881.02156 265.228423v-3.194454c0-6.743847-2.395841-13.22149-6.743848-18.368111L725.469393 67.793414c-5.412825-6.388908-13.39896-10.115771-21.740034-10.115771h-1.331023v207.55078h178.623224z'
+      opacity='.15'
+      p-id='9643'
+    ></path>
+    <path
+      d='M359.083258 657.52513c-10.293241 0-16.14974-4.614211-19.432929-9.494627-10.027036-15.262392 2.040901-40.640555 14.197574-52.442288 6.300173-6.033969 25.023224-21.562565 65.131369-37.889775 8.07487-19.07799 15.97227-40.55182 23.071057-62.469324 11.801733-36.647487 18.989255-74.271057 22.982323-100.447834-8.696014-16.061005-34.162912-65.042634-34.162912-83.676949 0-10.470711 2.307106-18.989255 7.010052-25.200693 4.880416-6.566378 11.979203-10.204506 20.054073-10.204507 9.228423 0 18.456846 4.702946 25.466898 12.955286 7.098787 8.25234 11.00312 19.255459 11.003119 30.702253 0 17.569497-2.307106 44.012478-6.300173 71.254073 17.392028 31.323397 36.292548 59.984749 52.087348 78.885269 15.617331 18.634315 34.340381 35.493934 55.902946 50.223917 37.97851-3.283189 82.878336-4.348007 99.205546 2.218371 20.852686 8.429809 24.40208 22.272444 20.763952 32.476949-6.388908 17.924437-34.87279 27.951473-58.742461 20.586482-9.760832-3.016984-35.493934-12.067938-66.994801-32.47695-26.176776 2.484575-53.240901 6.388908-78.619064 11.358059-27.507799 5.32409-53.063432 12.422877-76.045754 21.030156-19.521664 44.278683-37.357366 70.10052-53.152166 76.755633-9.583362 4.259272-17.303293 5.856499-23.425997 5.856499z m-0.976083-22.272444c1.419757 0.17747 6.033969 0.266205 15.883536-3.904332 5.945234-2.484575 16.948354-15.351127 30.968457-42.947661-21.917504 11.00312-32.388215 20.054073-35.582669 23.159792-7.808666 7.453726-12.067938 19.699133-11.269324 23.692201z m271.794801-95.478683c15.97227 8.07487 28.128943 12.245407 33.985442 14.108839 14.996187 4.614211 29.105026-2.57331 31.145927-6.388908-0.621144-0.798614-2.57331-2.662045-7.986135-4.880416-5.235355-2.129636-24.490815-4.170537-57.145234-2.839515z m-181.728943 6.477643l-0.443674 1.064818c18.72305-6.033969 38.777123-11.091854 59.807279-15.173656 17.480763-3.371924 35.848873-6.300173 54.128249-8.607279l-0.709878-0.532409 2.129636-0.17747c-14.818718-11.979203-28.128943-25.023224-39.841941-39.043328-14.996187-17.835702-29.193761-39.487002-40.37435-57.943847l-0.17747 1.153553-0.532409-0.887349c-4.348007 22.893588-10.559445 49.691508-18.989255 76.045754-4.880416 15.173657-10.204506 30.258579-15.706066 44.456153l0.709879-0.35494z m9.849567-248.368804c-0.887348 0-1.508492 0.17747-2.307106 1.242288-0.798614 1.064818-2.57331 4.259272-2.57331 11.890468 0 4.525477 5.50156 20.586482 17.037088 44.722357 1.419757-14.108839 2.129636-26.709185 2.129636-36.381283 0-13.842634-9.494627-21.47383-14.286308-21.47383z'
+      fill='#FFFFFF'
+      p-id='9644'
+    ></path>
+    <path
+      d='M404.808319 775.25851h17.125823l1.419757 8.252339h0.532409c6.655113-5.679029 14.996187-10.293241 23.514732-10.293241 19.699133 0 31.323397 16.14974 31.323397 40.640555 0 27.330329-16.415945 43.213865-33.896707 43.213865-7.010052 0-13.665165-3.105719-19.787869-8.696014l0.532409 13.132755v24.224611h-20.763951v-110.47487z m52.442288 38.954592c0-15.262392-4.880416-23.692201-15.794801-23.692201-5.412825 0-10.293241 2.75078-15.794801 8.25234v35.05026c5.14662 4.436742 10.293241 5.945234 14.552513 5.945234 9.583362 0.088735 17.037088-8.163605 17.037089-25.555633zM492.034662 815.366655c0-26.088042 16.238475-42.060312 33.453033-42.060312 8.962218 0 14.552513 3.460659 20.231542 8.696014l-0.887348-12.511612v-28.128943h20.941421v113.758059h-16.948353l-1.685962-8.252339h-0.443674c-5.856499 5.679029-13.842634 10.293241-22.094974 10.293241-19.787868-0.088735-32.565685-15.706066-32.565685-41.794108z m52.885962 16.238475v-35.05026c-4.880416-4.436742-9.849567-5.945234-14.818718-5.945234-8.962218 0-16.504679 8.518544-16.504679 24.490815 0 16.504679 5.945234 24.757019 16.504679 24.757019 5.50156 0 10.204506-2.307106 14.818718-8.25234zM630.993414 757.600277c-2.75078-0.976083-5.856499-1.685962-8.429809-1.685962-6.300173 0-9.672097 3.726863-9.672097 12.511612v6.832583h14.996187v16.504679h-14.996187v63.356672h-20.941421v-63.267937h-10.648181v-15.528596l10.648181-0.887349v-6.566378c0-16.682149 7.719931-29.459965 27.774003-29.459965 6.122704 0 11.535529 1.419757 15.084922 2.839515l-3.815598 15.351126z'
+      fill='#FFFFFF'
+      p-id='9645'
+    ></path>
+  </svg>
+);
+
+const txt = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='11602'
+  >
+    <path
+      d='M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z'
+      fill='#3662EC'
+      p-id='11603'
+    ></path>
+    <path
+      d='M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z'
+      fill='#FFFFFF'
+      fill-opacity='.7'
+      p-id='11604'
+    ></path>
+    <path
+      d='M336.831947 751.999883h45.823993v-152.575977h51.711992V561.279912h-148.991977v38.143994h51.455992V751.999883z m102.399984 0h48.639993l16.383997-37.119995c4.351999-9.983998 8.703999-19.967997 13.055998-31.743995h1.024c5.119999 11.775998 9.471999 21.759997 14.079998 31.743995L550.079914 751.999883h50.943992l-52.479992-95.999985 49.151993-94.719986h-48.383993l-13.823998 34.303995c-3.839999 8.959999-7.935999 18.943997-12.287998 31.231995h-1.024c-5.375999-12.287998-9.471999-22.271997-13.823997-31.231995l-15.359998-34.303995h-50.943992l49.407992 92.671986L439.231931 751.999883z m217.855966 0h45.823993v-152.575977h51.711992V561.279912h-148.991977v38.143994h51.455992V751.999883z'
+      fill='#FFFFFF'
+      p-id='11605'
+    ></path>
+  </svg>
+);
+
+const xls = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='17449'
+  >
+    <path
+      d='M947.2 216.064l-192.256-204.8A38.144 38.144 0 0 0 728.064 0h-614.4a40.192 40.192 0 0 0-38.912 41.472v941.056A40.192 40.192 0 0 0 113.664 1024H921.6a40.192 40.192 0 0 0 38.912-41.472V245.504A42.752 42.752 0 0 0 947.2 216.064zM652.8 768l-137.216-203.008L378.624 768h-95.488l184.576-264.704L295.424 256h95.488l124.672 185.088L640 256h95.488L563.2 503.04 748.032 768z'
+      fill='#25C273'
+      p-id='17450'
+    ></path>
+  </svg>
+);
+
+const zip = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='19451'
+  >
+    <path
+      d='M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM296 136v64h64v-64h-64z m64 64v64h64v-64h-64z m-64 64v64h64v-64h-64z m64 64v64h64v-64h-64z m-64 64v64h64v-64h-64z m64 64v64h64v-64h-64z m-64 64v64h64v-64h-64z m0 64v160h128V584H296z m48 48h32v64h-32v-64z'
+      fill='#515151'
+      p-id='19452'
+    ></path>
+  </svg>
+);
+
+const doc = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='26339'
+  >
+    <path
+      d='M794.574 930.64h-562.47c-24.262 0-44-19.738-44-44V142.99c0-24.262 19.738-44 44-44h344.009v64H252.104v703.65h522.471V345h64v541.64c-0.001 24.261-19.739 44-44.001 44z'
+      fill=''
+      p-id='26340'
+    ></path>
+    <path d='M619 301.79h220v64H619z' fill='' p-id='26341'></path>
+    <path d='M618 98.228h64v266.078h-64z' fill='' p-id='26342'></path>
+    <path
+      d='M632.307 136.573l51.007-38.649 155.153 204.764-51.008 38.649zM916.137 779.999H110.146c-6.6 0-12-5.4-12-12V493.127c0-6.6 5.4-12 12-12h805.991c6.6 0 12 5.4 12 12v274.872c0 6.6-5.4 12-12 12z'
+      fill=''
+      p-id='26343'
+    ></path>
+    <path
+      d='M266.631 551.092h47.454c52.831 0 85.559 24.867 85.559 77.998 0 52.918-32.728 79.271-83.688 79.271h-49.324V551.092z m45.35 131.978c32.26 0 52.363-15.727 52.363-53.98 0-38.467-20.104-52.92-52.363-52.92h-10.753v106.9h10.753zM436.581 629.09c0-51.219 31.559-80.973 77.376-80.973s77.376 29.967 77.376 80.973-31.559 82.246-77.376 82.246-77.376-31.24-77.376-82.246z m119.453 0c0-33.793-16.363-53.982-42.077-53.982s-42.077 20.189-42.077 53.982c0 33.578 16.363 55.043 42.077 55.043s42.077-21.465 42.077-55.043zM628.271 630.365c0-51.857 36.701-82.248 80.415-82.248 21.975 0 39.507 9.564 50.728 20.189l-18.234 19.979c-8.649-7.652-18.701-13.178-31.792-13.178-26.182 0-45.817 20.402-45.817 54.193 0 34.217 17.766 54.832 45.116 54.832 14.728 0 26.416-6.375 35.767-15.514l18.233 19.553c-14.26 15.088-32.728 23.164-55.169 23.164-43.714 0.001-79.247-28.478-79.247-80.97z'
+      fill='#FFFFFF'
+      p-id='26344'
+    ></path>
+  </svg>
+);
+
+const image = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='27355'
+  >
+    <path
+      d='M170.65984 42.65984l682.65984 0q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 682.65984q0 53.00224-37.49888 90.50112t-90.50112 37.49888l-682.65984 0q-53.00224 0-90.50112-37.49888t-37.49888-90.50112l0-682.65984q0-53.00224 37.49888-90.50112t90.50112-37.49888zM896 742.99392l-213.34016-213.34016-366.32576 366.32576 537.00608 0q17.67424 0 30.16704-12.4928t12.4928-30.16704l0-110.32576zM853.34016 128l-682.65984 0q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 682.65984q0 17.67424 12.4928 30.16704t30.16704 12.4928l25.00608 0 486.99392-486.99392 213.34016 213.34016 0-451.66592q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM341.34016 213.34016q53.00224 0 90.50112 37.49888t37.49888 90.50112-37.49888 90.50112-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112 37.49888-90.50112 90.50112-37.49888zM341.34016 298.65984q-17.67424 0-30.16704 12.4928t-12.4928 30.16704 12.4928 30.16704 30.16704 12.4928 30.16704-12.4928 12.4928-30.16704-12.4928-30.16704-30.16704-12.4928z'
+      fill='#444444'
+      p-id='27356'
+    ></path>
+  </svg>
+);
+
+const audio = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='28365'
+  >
+    <path
+      d='M622.95253333 327.29173333l0.02133334-224.4384H176.6688V921.14133333h670.72853333V327.29173333H622.95253333z m5.1552 195.20533334c-9.32266667-19.97866667-28.90666667-28.61866667-46.624-30.93866667-17.4432-2.34346667-33.1712 1.17973333-44.7872 3.58826667v153.4144c1.2448 22.29866667-12.25066667 46.25066667-36.144 60.04693333-31.80586667 18.3552-70.0032 11.75253333-85.3056-14.752-15.3024-26.5088-1.92213333-62.88 29.8848-81.2416 24.368-14.0736 52.48853333-13.49013333 71.18826667-0.53013333V489.48266667l-0.12053333-0.0544 0.12053333-0.2784V442.35733333c0-5.64266667 4.57066667-10.30613333 10.208-10.31146666a10.18026667 10.18026667 0 0 1 9.16266667 5.86026666c16.0512 13.97013333 31.22346667 19.11466667 48.1472 25.62453334 13.45173333 5.19466667 25.44 13.16693333 32.98666666 24.08533333 7.73333333 10.6656 11.0208 24.26346667 11.328 34.9568l-0.0448-0.07573333z'
+      fill='#2C2C2C'
+      p-id='28366'
+    ></path>
+    <path
+      d='M833.74933333 293.94026667L656.82346667 119.28533333l0.28373333 174.65386667z'
+      fill='#2C2C2C'
+      p-id='28367'
+    ></path>
+  </svg>
+);
+
+const video = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='30241'
+  >
+    <path
+      d='M838.85646561 290.47900106L659.12225186 113.05176719l0.28823703 177.42615027z'
+      fill='#2C2C2C'
+      p-id='30242'
+    ></path>
+    <path
+      d='M624.71368465 324.35985608l0.02167197-228.00091428H171.34608254V927.63564021h681.37501799V324.35985608H624.71368465z m13.17655027 250.27210159c-0.75418413 2.25821799-3.01240211 3.76658624-5.27062011 5.27603809L437.46255238 699.71166138c-7.53425608 5.2771217-18.08633227 3.01240211-23.35695238-5.27062011a20.12783068 20.12783068 0 0 1-2.25821799-9.04370794V446.53985186c0-9.79897566 7.53425608-17.33323175 17.33214815-17.33323175 3.01240211 0 6.02480424 0.75526773 9.04262433 2.26471957l194.4082963 119.8090836c7.51800211 4.51535238 10.53040424 15.06201059 5.25978413 23.35153439z'
+      fill='#2C2C2C'
+      p-id='30243'
+    ></path>
+  </svg>
+);
+
+const exe = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='31313'
+  >
+    <path d='M112 16h736v992H112z' fill='#EDF2F9' p-id='31314'></path>
+    <path
+      d='M480 576a128 128 0 1 0 0 256 128 128 0 0 0 0-256z m0 192a64 64 0 1 1 0-128 64 64 0 0 1 0 128z'
+      fill='#C2CDDC'
+      p-id='31315'
+    ></path>
+    <path
+      d='M480 784c44.192 0 80-35.808 80-80s-35.808-80-80-80-80 35.808-80 80 35.808 80 80 80z m0-128a48 48 0 1 1 0 96 48 48 0 0 1 0-96z m-176 80h36.016a144.208 144.208 0 0 0 18.576 44.16l-25.664 25.664a15.984 15.984 0 0 0 0 22.624l22.624 22.624a15.984 15.984 0 0 0 22.624 0l25.536-25.536a141.92 141.92 0 0 0 44.304 18.768V880a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-35.68a141.92 141.92 0 0 0 44.304-18.768l25.536 25.536a15.984 15.984 0 0 0 22.624 0l22.624-22.624a15.984 15.984 0 0 0 0-22.624l-25.664-25.664a143.824 143.824 0 0 0 18.576-44.16H656a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-36.016a144.208 144.208 0 0 0-18.576-44.16l25.664-25.664a15.984 15.984 0 0 0 0-22.624l-22.624-22.624a15.984 15.984 0 0 0-22.624 0l-25.536 25.536a142.288 142.288 0 0 0-44.304-18.768V528a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v35.68a142.288 142.288 0 0 0-44.304 18.768l-25.536-25.536a15.984 15.984 0 0 0-22.624 0l-22.624 22.624a15.984 15.984 0 0 0 0 22.624l25.664 25.664a143.824 143.824 0 0 0-18.576 44.16H304a16 16 0 0 0-16 16v32A16 16 0 0 0 304 736z m176-144a112 112 0 1 1 0 224 112 112 0 0 1 0-224zM896 128h-32V32a32 32 0 0 0-32-32H128a32 32 0 0 0-32 32v960a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V416h32a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32z m-64 0H448a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h384v576H128V32h704v96z'
+      fill='#8592A5'
+      p-id='31316'
+    ></path>
+    <path
+      d='M603.952 214.112v20.8h-47.824v27.2h36.624v20h-36.624v27.76h47.824v20.8h-75.04v-116.56h75.04zM648.032 270.752l-36.08-56.64h27.04a8.48 8.48 0 0 1 3.872 0.688 5.824 5.824 0 0 1 2.192 2.288l23.216 39.28a13.376 13.376 0 0 1 0.912-2c0.336-0.64 0.736-1.312 1.152-2l20.336-34.896c1.328-2.24 3.136-3.36 5.44-3.36h25.92l-36.56 55.44 37.376 61.12h-27.056a6.688 6.688 0 0 1-4.272-1.28 10.016 10.016 0 0 1-2.608-3.024l-23.344-40.816a15.84 15.84 0 0 1-1.456 3.04l-21.76 37.76a11.008 11.008 0 0 1-2.56 3.008 6.016 6.016 0 0 1-4 1.312h-25.264l37.504-59.92zM808.288 214.112v20.8h-47.84v27.2h36.624v20h-36.624v27.76h47.84v20.8h-75.04v-116.56h75.04z'
+      fill='#FFFFFF'
+      p-id='31317'
+    ></path>
+  </svg>
+);
+
+const other = (
+  <svg
+    class='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    p-id='21634'
+  >
+    <path
+      d='M640 42.688H170.688A42.688 42.688 0 0 0 128 85.376v853.312c0 23.616 19.072 42.688 42.688 42.688h682.688a42.688 42.688 0 0 0 42.752-42.688v-640c-100.16-99.968-156.16-156.096-256.128-256zM499.2 853.312a42.688 42.688 0 1 1 0-85.376 42.688 42.688 0 0 1 0 85.376z m88-239.36c-26.496 13.568-42.688 23.936-48.384 31.168-9.6 11.072-18.304 27.2-18.24 37.568q0.128 10.88 0 42.688h-51.2v-42.688c0-36.16 8.704-48.512 17.408-62.912 7.68-11.072 19.008-21.504 33.984-31.104 33.856-19.264 54.208-31.744 61.504-37.568 22.208-18.816 33.28-41.92 33.28-69.376 0-38.656-17.344-65.6-52.032-81.024a125.632 125.632 0 0 0-51.328-10.112c-49.216 0-83.392 22.72-102.72 68.032l-9.344 28.16c-1.024 3.904-1.728 8.192-2.24 12.992l-56.384-12.288c11.072-69.376 45.12-115.008 102.016-136.704a194.56 194.56 0 0 1 72.96-12.992c54.016 0 96.896 16.384 128.704 49.216l15.232 18.112c13.952 21.696 21.504 46.976 22.4 75.904-0.128 54.848-32 99.2-95.616 132.992zM640 298.752V128l170.688 170.688H640z'
+      fill='#515151'
+      p-id='21635'
+    ></path>
+  </svg>
+);
+
+/**
+ * 根据类型获取svg
+ *
+ * @export
+ * @param {string} type
+ * @return {*}  {JSX.Element}
+ */
+export function getFileSvgByType(type: string): JSX.Element {
+  switch (type) {
+    case 'text/csv':
+    case 'text/plain':
+      return txt;
+    case 'application/pdf':
+      return pdf;
+    case 'application/msword':
+    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      return doc;
+    case 'image/jpeg':
+    case 'image/png':
+    case 'image/gif':
+      return image;
+    case 'audio/mpeg':
+    case 'audio/wav':
+    case 'audio/ogg':
+      return audio;
+    case 'video/mp4':
+    case 'video/x-msvideo':
+    case 'video/x-matroska':
+      return video;
+    case 'application/zip':
+    case 'application/x-rar-compressed':
+      return zip;
+    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+    case 'application/vnd.ms-excel':
+      return xls;
+    case 'application/x-msdownload':
+    case 'application/x-apple-diskimage':
+      return exe;
+    default:
+      return other;
+  }
+}

package/src/util/notification-util/upload-manager/upload-manager.scss

@@ -0,0 +1,128 @@
+@include b(upload-manager-notic) {
+  --el-notification-width: 400px;
+  --el-notification-padding: 0;
+  --el-notification-group-margin-left: 0;
+  --el-notification-group-margin-right: 0;
+  .el-notification__group {
+    width: 100%;
+  }
+}
+
+@include b(upload-manager) {
+  .icon {
+    font-size: 20px;
+    &.success {
+      color: getCssVar(color, success-hover);
+    }
+    &.danger {
+      color: getCssVar(color, danger);
+    }
+  }
+
+  @include e(header) {
+    display: flex;
+    line-height: 30px;
+    align-items: center;
+    padding: getCssVar(spacing, base);
+    padding-left: getCssVar(spacing, loose);
+
+    @include m(loading) {
+      display: flex;
+      align-items: center;
+      .el-progress-circle {
+        --el-fill-color-light: #{getCssVar(color, disabled-bg)};
+        width: 30px !important;
+        height: 30px !important;
+      }
+      .icon {
+        font-size: 30px;
+      }
+    }
+
+    @include m(title) {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      margin-left: 12px;
+      .caption {
+        font-size: getCssVar(font-size, header-6);
+      }
+      .progress {
+        color: getCssVar(color, disabled-text);
+        margin-left: getCssVar(spacing, tight);
+      }
+    }
+
+    @include m(actions) {
+      display: flex;
+      align-items: center;
+      color: getCssVar(color, disabled-text);
+      .icon {
+        font-size: 24px;
+        cursor: pointer;
+        margin-left: getCssVar(spacing, extra-tight);
+        &.down-up {
+          font-size: 20px;
+        }
+        &:hover {
+          color: getCssVar(color, primary-hover);
+        }
+      }
+    }
+  }
+
+  @include e(content) {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 0 getCssVar(spacing, base) getCssVar(spacing, base) getCssVar(spacing, loose);
+  }
+
+  @include e(file-item) {
+    height: 48px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding: getCssVar(spacing, base-tight) 0;
+
+    @include m(icon) {
+      display: flex;
+      align-items: center;
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    @include m(name) {
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0 getCssVar(spacing, base-tight);
+    }
+
+    @include m(status) {
+      display: flex;
+      align-items: center;
+      .el-progress {
+        padding-left: getCssVar(spacing, base);
+      }
+      .el-progress-circle {
+        --el-fill-color-light: #{getCssVar(color, disabled-bg)};
+        width: 20px !important;
+        height: 20px !important;
+      }
+      .el-progress__text {
+        font-size: getCssVar(font-size, small) !important;
+        left: -45px !important;
+      }
+    }
+    @include m(status-text) {
+      left: 32px;
+      bottom: -6px;
+      position: absolute;
+      color: getCssVar(color, danger);
+      font-size: getCssVar(font-size, small);
+    }
+  }
+}