fix: upload component not work #169

src/assets/svg/preview/resume.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307154239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7317" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z" p-id="7318" fill="#ffffff"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="7319" fill="#ffffff"></path><path d="M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z" p-id="7320" fill="#ffffff"></path></svg>

src/assets/svg/preview/scale.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307195033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8116" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M887.081 904.791a25.8 25.8 0 0 1-18.376-7.619L705.618 734.075l-4.163 3.369c-58.255 47.18-131.522 73.16-206.32 73.16-181.07 0-328.377-147.308-328.377-328.367 0-181.068 147.308-328.376 328.377-328.376 181.063 0 328.376 147.308 328.376 328.376 0 77.072-27.412 152.07-77.169 211.17l-3.522 4.173 162.719 162.744a25.846 25.846 0 0 1 7.639 18.432 26.081 26.081 0 0 1-26.051 26.045l-0.046-0.01zM495.13 205.957c-152.336 0-276.27 123.935-276.27 276.27 0 152.33 123.934 276.27 276.27 276.27 152.34 0 276.275-123.94 276.275-276.27 0-152.335-123.935-276.27-276.275-276.27z" fill="#ffffff" p-id="8117"></path><path d="M626.545 508.355h-262.83a26.127 26.127 0 0 1 0-52.255h262.83a26.127 26.127 0 0 1 0 52.255z" fill="#ffffff" p-id="8118"></path><path d="M495.13 639.77a26.127 26.127 0 0 1-26.128-26.128v-262.83a26.127 26.127 0 0 1 52.255 0v262.835a26.127 26.127 0 0 1-26.127 26.123z" fill="#ffffff" p-id="8119"></path></svg>

src/assets/svg/preview/unscale.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595308005241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9878" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M750.3 198.7C598 46.4 351.1 46.4 198.7 198.7s-152.3 399.2 0 551.5C345.1 896.6 578.8 902.3 732 767.3l172.1 172.1 35.4-35.4-172.1-171.9c135-153.2 129.3-387-17.1-533.4z m39.3 403.8c-17.1 42.1-42.2 80-74.7 112.4-32.5 32.5-70.3 57.6-112.4 74.7-40.7 16.5-83.8 24.9-128 24.9s-87.2-8.4-128-24.9c-42.1-17.1-80-42.2-112.4-74.7s-57.6-70.3-74.7-112.4c-16.5-40.7-24.9-83.8-24.9-128s8.4-87.2 24.9-128c17.1-42.1 42.2-80 74.7-112.4s70.3-57.6 112.4-74.7c40.7-16.5 83.8-24.9 128-24.9s87.2 8.4 128 24.9c42.1 17.1 80 42.2 112.4 74.7 32.5 32.5 57.6 70.3 74.7 112.4 16.5 40.7 24.9 83.8 24.9 128s-8.4 87.3-24.9 128zM671 502H271v-50h400v50z" fill="#ffffff" p-id="9879"></path></svg>

src/components/Modal/src/BasicModal.vue

@@ -14,7 +14,11 @@
     </template>
 
     <template #footer v-if="!$slots.footer">
-      <ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel" />
+      <ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel">
+        <template #[item]="data" v-for="item in Object.keys($slots)">
+          <slot :name="item" v-bind="data" />
+        </template>
+      </ModalFooter>
     </template>
 
     <ModalWrapper

src/components/Modal/src/components/ModalWrapper.vue

@@ -67,7 +67,7 @@
           return {
             minHeight: `${props.minHeight}px`,
             // padding 28
-            height: `${unref(realHeightRef) - 28}px`,
+            height: `${unref(realHeightRef)}px`,
           };
         }
       );
@@ -130,10 +130,11 @@
           const spinEl = unref(spinRef);
 
           if (!spinEl) return;
+          await nextTick();
+          // if (!realHeight) {
+          realHeight = spinEl.scrollHeight;
+          // }
 
-          if (!realHeight) {
-            realHeight = spinEl.scrollHeight;
-          }
           if (props.fullScreen) {
             realHeightRef.value =
               window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
@@ -142,7 +143,7 @@
               ? props.height
               : realHeight > maxHeight
               ? maxHeight
-              : realHeight + 46;
+              : realHeight;
           }
           emit('height-change', unref(realHeightRef));
         } catch (error) {

src/components/Preview/index.ts

@@ -1,7 +1,3 @@
-// export { createImgPreview } from './src/functional';
-
-export const createImgPreview = () => {};
-
 // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 // export const ImagePreview = createAsyncComponent(() => import('./src/index.vue'));
 

src/components/Preview/src/functional.ts

@@ -1,22 +0,0 @@
-import ImgPreview from './index';
-import { isClient } from '/@/utils/is';
-
-import type { Options, Props } from './types';
-
-import { createVNode, render } from 'vue';
-
-let instance: any = null;
-export function createImgPreview(options: Options) {
-  if (!isClient) return;
-  const { imageList, show = true, index = 0 } = options;
-
-  const propsData: Partial<Props> = {};
-  const container = document.createElement('div');
-  propsData.imageList = imageList;
-  propsData.show = show;
-  propsData.index = index;
-
-  instance = createVNode(ImgPreview, propsData);
-  render(instance, container);
-  document.body.appendChild(container);
-}

src/components/Preview/src/index.less

@@ -1,118 +0,0 @@
-.img-preview {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @preview-comp-z-index;
-  background: rgba(0, 0, 0, 0.5);
-  user-select: none;
-
-  &-content {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    color: @white;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &-image {
-    cursor: pointer;
-    transition: transform 0.3s;
-  }
-
-  &__close {
-    position: absolute;
-    top: -40px;
-    right: -40px;
-    width: 80px;
-    height: 80px;
-    overflow: hidden;
-    color: @white;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 50%;
-    transition: all 0.2s;
-
-    &-icon {
-      position: absolute;
-      top: 46px;
-      left: 16px;
-      font-size: 16px;
-    }
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-  }
-
-  &__index {
-    position: absolute;
-    bottom: 5%;
-    left: 50%;
-    padding: 0 22px;
-    font-size: 16px;
-    background: rgba(109, 109, 109, 0.6);
-    border-radius: 15px;
-    transform: translateX(-50%);
-  }
-
-  &__controller {
-    position: absolute;
-    bottom: 10%;
-    left: 50%;
-    display: flex;
-    width: 260px;
-    height: 44px;
-    padding: 0 22px;
-    margin-left: -139px;
-    background: rgba(109, 109, 109, 0.6);
-    border-radius: 22px;
-    justify-content: center;
-
-    &-item {
-      display: flex;
-      height: 100%;
-      padding: 0 9px;
-      font-size: 24px;
-      cursor: pointer;
-      transition: all 0.2s;
-
-      &:hover {
-        transform: scale(1.2);
-      }
-
-      img {
-        width: 1em;
-      }
-    }
-  }
-
-  &__arrow {
-    position: absolute;
-    top: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 50px;
-    font-size: 28px;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 50%;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    &.left {
-      left: 50px;
-    }
-
-    &.right {
-      right: 50px;
-    }
-  }
-}

src/components/Preview/src/index.tsx

@@ -1,303 +0,0 @@
-import './index.less';
-
-import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
-
-import { basicProps } from './props';
-import { Props } from './types';
-
-import { CloseOutlined, LeftOutlined, RightOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-import { Spin } from 'ant-design-vue';
-
-import resumeSvg from '/@/assets/svg/preview/resume.svg';
-import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
-import scaleSvg from '/@/assets/svg/preview/scale.svg';
-import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
-import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
-enum StatueEnum {
-  LOADING,
-  DONE,
-  FAIL,
-}
-interface ImgState {
-  currentUrl: string;
-  imgScale: number;
-  imgRotate: number;
-  imgTop: number;
-  imgLeft: number;
-  currentIndex: number;
-  status: StatueEnum;
-  moveX: number;
-  moveY: number;
-  show: boolean;
-}
-
-const prefixCls = 'img-preview';
-export default defineComponent({
-  name: 'ImagePreview',
-  props: basicProps,
-  setup(props: Props) {
-    const imgState = reactive<ImgState>({
-      currentUrl: '',
-      imgScale: 1,
-      imgRotate: 0,
-      imgTop: 0,
-      imgLeft: 0,
-      status: StatueEnum.LOADING,
-      currentIndex: 0,
-      moveX: 0,
-      moveY: 0,
-      show: props.show,
-    });
-
-    const wrapElRef = ref<HTMLDivElement | null>(null);
-    const imgElRef = ref<HTMLImageElement | null>(null);
-
-    // 初始化
-    function init() {
-      initMouseWheel();
-      const { index, imageList } = props;
-
-      if (!imageList || !imageList.length) {
-        throw new Error('imageList is undefined');
-      }
-      imgState.currentIndex = index;
-      handleIChangeImage(imageList[index]);
-    }
-
-    // 重置
-    function initState() {
-      imgState.imgScale = 1;
-      imgState.imgRotate = 0;
-      imgState.imgTop = 0;
-      imgState.imgLeft = 0;
-    }
-
-    // 初始化鼠标滚轮事件
-    function initMouseWheel() {
-      const wrapEl = unref(wrapElRef);
-      if (!wrapEl) {
-        return;
-      }
-      (wrapEl as any).onmousewheel = scrollFunc;
-      // 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替
-      document.body.addEventListener('DOMMouseScroll', scrollFunc);
-      // 禁止火狐浏览器下拖拽图片的默认事件
-      document.ondragstart = function () {
-        return false;
-      };
-    }
-
-    // 监听鼠标滚轮
-    function scrollFunc(e: any) {
-      e = e || window.event;
-      e.delta = e.wheelDelta || -e.detail;
-
-      e.preventDefault();
-      if (e.delta > 0) {
-        // 滑轮向上滚动
-        scaleFunc(0.015);
-      }
-      if (e.delta < 0) {
-        // 滑轮向下滚动
-        scaleFunc(-0.015);
-      }
-    }
-    // 缩放函数
-    function scaleFunc(num: number) {
-      if (imgState.imgScale <= 0.2 && num < 0) return;
-      imgState.imgScale += num;
-    }
-
-    // 旋转图片
-    function rotateFunc(deg: number) {
-      imgState.imgRotate += deg;
-    }
-
-    // 鼠标事件
-    function handleMouseUp() {
-      const imgEl = unref(imgElRef);
-      if (!imgEl) return;
-      imgEl.onmousemove = null;
-    }
-
-    // 更换图片
-    function handleIChangeImage(url: string) {
-      imgState.status = StatueEnum.LOADING;
-      const img = new Image();
-      img.src = url;
-      img.onload = () => {
-        imgState.currentUrl = url;
-        imgState.status = StatueEnum.DONE;
-      };
-      img.onerror = () => {
-        imgState.status = StatueEnum.FAIL;
-      };
-    }
-
-    // 关闭
-    function handleClose(e: MouseEvent) {
-      e && e.stopPropagation();
-      imgState.show = false;
-      // 移除火狐浏览器下的鼠标滚动事件
-      document.body.removeEventListener('DOMMouseScroll', scrollFunc);
-      // 恢复火狐及Safari浏览器下的图片拖拽
-      document.ondragstart = null;
-    }
-
-    // 图片复原
-    function resume() {
-      initState();
-    }
-
-    // 上一页下一页
-    function handleChange(direction: 'left' | 'right') {
-      const { currentIndex } = imgState;
-      const { imageList } = props;
-      if (direction === 'left') {
-        imgState.currentIndex--;
-        if (currentIndex <= 0) {
-          imgState.currentIndex = imageList.length - 1;
-        }
-      }
-      if (direction === 'right') {
-        imgState.currentIndex++;
-        if (currentIndex >= imageList.length - 1) {
-          imgState.currentIndex = 0;
-        }
-      }
-      handleIChangeImage(imageList[imgState.currentIndex]);
-    }
-
-    function handleAddMoveListener(e: MouseEvent) {
-      e = e || window.event;
-      imgState.moveX = e.clientX;
-      imgState.moveY = e.clientY;
-      const imgEl = unref(imgElRef);
-      if (imgEl) {
-        imgEl.onmousemove = moveFunc;
-      }
-    }
-
-    function moveFunc(e: MouseEvent) {
-      e = e || window.event;
-      e.preventDefault();
-      const movementX = e.clientX - imgState.moveX;
-      const movementY = e.clientY - imgState.moveY;
-      imgState.imgLeft += movementX;
-      imgState.imgTop += movementY;
-      imgState.moveX = e.clientX;
-      imgState.moveY = e.clientY;
-    }
-
-    // 获取图片样式
-    const getImageStyle = computed(() => {
-      const { imgScale, imgRotate, imgTop, imgLeft } = imgState;
-      return {
-        transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
-        marginTop: `${imgTop}px`,
-        marginLeft: `${imgLeft}px`,
-      };
-    });
-
-    const getIsMultipleImage = computed(() => {
-      const { imageList } = props;
-      return imageList.length > 1;
-    });
-
-    watchEffect(() => {
-      if (props.show) {
-        init();
-      }
-      if (props.imageList) {
-        initState();
-      }
-    });
-
-    const renderClose = () => {
-      return (
-        <div class={`${prefixCls}__close`} onClick={handleClose}>
-          <CloseOutlined class={`${prefixCls}__close-icon`} />
-        </div>
-      );
-    };
-
-    const renderIndex = () => {
-      if (!unref(getIsMultipleImage)) {
-        return null;
-      }
-      const { currentIndex } = imgState;
-      const { imageList } = props;
-      return (
-        <div class={`${prefixCls}__index`}>
-          {currentIndex + 1} / {imageList.length}
-        </div>
-      );
-    };
-
-    const renderController = () => {
-      return (
-        <div class={`${prefixCls}__controller`}>
-          <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(-0.15)}>
-            <img src={unScaleSvg} />
-          </div>
-          <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(0.15)}>
-            <img src={scaleSvg} />
-          </div>
-          <div class={`${prefixCls}__controller-item`} onClick={resume}>
-            <img src={resumeSvg} />
-          </div>
-          <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
-            <img src={unRotateSvg} />
-          </div>
-          <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
-            <img src={rotateSvg} />
-          </div>
-        </div>
-      );
-    };
-
-    const renderArrow = (direction: 'left' | 'right') => {
-      if (!unref(getIsMultipleImage)) {
-        return null;
-      }
-      return (
-        <div class={[`${prefixCls}__arrow`, direction]} onClick={() => handleChange(direction)}>
-          {direction === 'left' ? <LeftOutlined /> : <RightOutlined />}
-        </div>
-      );
-    };
-
-    return () => {
-      return (
-        imgState.show && (
-          <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
-            <div class={`${prefixCls}-content`}>
-              <Spin
-                indicator={<LoadingOutlined style="font-size: 24px" spin />}
-                spinning={true}
-                class={[
-                  `${prefixCls}-image`,
-                  {
-                    hidden: imgState.status !== StatueEnum.LOADING,
-                  },
-                ]}
-              />
-              <img
-                style={unref(getImageStyle)}
-                class={[`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? '' : 'hidden']}
-                ref={imgElRef}
-                src={imgState.currentUrl}
-                onMousedown={handleAddMoveListener}
-              />
-              {renderClose()}
-              {renderIndex()}
-              {renderController()}
-              {renderArrow('left')}
-              {renderArrow('right')}
-            </div>
-          </div>
-        )
-      );
-    };
-  },
-});

src/components/Preview/src/index.vue

@@ -1,16 +1,18 @@
 <template>
-  <PreviewGroup :class="prefixCls">
-    <slot v-if="!imageList || $slots.default" />
-    <template v-else>
-      <template v-for="item in getImageList" :key="item.src">
-        <Image v-bind="item">
-          <template #placeholder v-if="item.placeholder">
-            <Image v-bind="item" :src="item.placeholder" :preview="false" />
-          </template>
-        </Image>
+  <div :class="prefixCls">
+    <PreviewGroup>
+      <slot v-if="!imageList || $slots.default" />
+      <template v-else>
+        <template v-for="item in getImageList" :key="item.src">
+          <Image v-bind="item">
+            <template #placeholder v-if="item.placeholder">
+              <Image v-bind="item" :src="item.placeholder" :preview="false" />
+            </template>
+          </Image>
+        </template>
       </template>
-    </template>
-  </PreviewGroup>
+    </PreviewGroup>
+  </div>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
@@ -53,7 +55,10 @@
         });
       });
 
-      return { prefixCls, getImageList };
+      return {
+        prefixCls,
+        getImageList,
+      };
     },
   });
 </script>
@@ -61,6 +66,10 @@
   @prefix-cls: ~'@{namespace}-image-preview';
 
   .@{prefix-cls} {
+    .ant-image {
+      margin-right: 10px;
+    }
+
     .ant-image-preview-operations {
       background: rgba(0, 0, 0, 0.4);
     }

src/components/Preview/src/props.ts

@@ -1,15 +0,0 @@
-import { PropType } from 'vue';
-export const basicProps = {
-  show: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  imageList: {
-    type: [Array] as PropType<string[]>,
-    default: null,
-  },
-  index: {
-    type: Number as PropType<number>,
-    default: 0,
-  },
-};

src/components/Preview/src/types.ts

@@ -1,30 +0,0 @@
-export interface Options {
-  show?: boolean;
-  imageList: string[];
-  index?: number;
-}
-
-export interface Props {
-  show: boolean;
-  instance: Props;
-  imageList: string[];
-  index: number;
-}
-
-export interface ImageProps {
-  alt?: string;
-  fallback?: string;
-  src: string;
-  width: string | number;
-  height?: string | number;
-  placeholder?: string | boolean;
-  preview?:
-    | boolean
-    | {
-        visible?: boolean;
-        onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
-        getContainer: string | HTMLElement | (() => HTMLElement);
-      };
-}
-
-export type ImageItem = string | ImageProps;

src/components/Table/src/components/TableAction.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
   import { defineComponent, PropType, computed } from 'vue';
   import Icon from '/@/components/Icon/index';
-  import { ActionItem } from '/@/components/Table';
+  import { ActionItem, TableActionType } from '/@/components/Table';
   import { PopConfirmButton } from '/@/components/Button';
   import { Divider } from 'ant-design-vue';
   import { Dropdown } from '/@/components/Dropdown';
@@ -40,10 +40,15 @@
         default: null,
       },
       divider: propTypes.bool.def(true),
+      outside: propTypes.bool,
     },
     setup(props) {
       const { prefixCls } = useDesign('basic-table-action');
-      const table = useTableContext();
+      let table = {};
+      if (!props.outside) {
+        table = useTableContext();
+      }
+
       const getActions = computed(() => {
         return (props.actions || []).map((action) => {
           const { popConfirm } = action;
@@ -71,7 +76,7 @@
       });
 
       const getAlign = computed(() => {
-        const columns = table.getColumns();
+        const columns = (table as TableActionType)?.getColumns?.() || [];
         const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
         return actionColumn?.align ?? 'left';
       });

src/components/Upload/src/FileList.tsx

@@ -1,15 +1,24 @@
-import { defineComponent, CSSProperties } from 'vue';
+import { defineComponent, CSSProperties, watch, nextTick } from 'vue';
 import { fileListProps } from './props';
 import { isFunction } from '/@/utils/is';
 import './FileList.less';
+import { useModalContext } from '/@/components/Modal/src/hooks/useModalContext';
 
 export default defineComponent({
   name: 'FileList',
   props: fileListProps,
   setup(props) {
+    const modalFn = useModalContext();
+    watch(
+      () => props.dataSource,
+      () => {
+        nextTick(() => {
+          modalFn?.redoModalHeight?.();
+        });
+      }
+    );
     return () => {
       const { columns, actionColumn, dataSource } = props;
-
       const columnList = [...columns, actionColumn];
       return (
         <table class="file-table">

src/components/Upload/src/ThumbUrl.vue

@@ -1,26 +1,28 @@
 <template>
   <span class="thumb">
-    <img v-if="fileUrl" :src="fileUrl" />
+    <Image v-if="fileUrl" :src="fileUrl" :width="104" />
   </span>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { propTypes } from '/@/utils/propTypes';
+  import { Image } from 'ant-design-vue';
 
   export default defineComponent({
+    components: { Image },
     props: {
       fileUrl: propTypes.string.def(''),
       fileName: propTypes.string.def(''),
     },
   });
 </script>
-<style lang="less" scoped>
+<style lang="less">
   .thumb {
     img {
       position: static;
       display: block;
-      width: 104px;
-      height: 104px;
+      cursor: zoom-in;
+      border-radius: 4px;
       object-fit: cover;
     }
   }

src/components/Upload/src/UploadModal.vue

@@ -13,7 +13,7 @@
     :okButtonProps="getOkButtonProps"
     :cancelButtonProps="{ disabled: isUploadingRef }"
   >
-    <template #centerdFooter>
+    <template #centerFooter>
       <a-button
         @click="handleStartUpload"
         color="success"
@@ -54,7 +54,6 @@
   // utils
   import { checkFileType, checkImgType, getBase64WithFile } from './helper';
   import { buildUUID } from '/@/utils/uuid';
-  import { createImgPreview } from '/@/components/Preview/index';
   import { isFunction } from '/@/utils/is';
   import { warn } from '/@/utils/log';
   import FileList from './FileList';
@@ -161,12 +160,12 @@
       }
 
       // 预览
-      function handlePreview(record: FileItem) {
-        const { thumbUrl = '' } = record;
-        createImgPreview({
-          imageList: [thumbUrl],
-        });
-      }
+      // function handlePreview(record: FileItem) {
+      //   const { thumbUrl = '' } = record;
+      //   createImgPreview({
+      //     imageList: [thumbUrl],
+      //   });
+      // }
 
       async function uploadApiByItem(item: FileItem) {
         const { api } = props;
@@ -267,7 +266,7 @@
 
       return {
         columns: createTableColumns(),
-        actionColumn: createActionColumn(handleRemove, handlePreview),
+        actionColumn: createActionColumn(handleRemove),
         register,
         closeModal,
         getHelpText,

src/components/Upload/src/UploadPreviewModal.vue

@@ -19,7 +19,6 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { previewProps } from './props';
   import { PreviewFileItem } from './types';
-  import { createImgPreview } from '/@/components/Preview/index';
   import { downloadByUrl } from '/@/utils/file/download';
 
   import { createPreviewColumns, createPreviewActionColumn } from './data';
@@ -63,13 +62,13 @@
         }
       }
 
-      // 预览
-      function handlePreview(record: PreviewFileItem) {
-        const { url = '' } = record;
-        createImgPreview({
-          imageList: [url],
-        });
-      }
+      // // 预览
+      // function handlePreview(record: PreviewFileItem) {
+      //   const { url = '' } = record;
+      //   createImgPreview({
+      //     imageList: [url],
+      //   });
+      // }
 
       // 下载
       function handleDownload(record: PreviewFileItem) {
@@ -83,7 +82,7 @@
         closeModal,
         fileListRef,
         columns: createPreviewColumns(),
-        actionColumn: createPreviewActionColumn({ handleRemove, handlePreview, handleDownload }),
+        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }),
       };
     },
   });

src/components/Upload/src/data.tsx

@@ -1,7 +1,10 @@
 import type { BasicColumn, ActionItem } from '/@/components/Table';
 
 import { FileItem, PreviewFileItem, UploadResultStatus } from './types';
-import { checkImgType, isImgTypeByName } from './helper';
+import {
+  // checkImgType,
+  isImgTypeByName,
+} from './helper';
 import { Progress, Tag } from 'ant-design-vue';
 
 import TableAction from '/@/components/Table/src/components/TableAction.vue';
@@ -76,7 +79,7 @@ export function createTableColumns(): BasicColumn[] {
     },
   ];
 }
-export function createActionColumn(handleRemove: Function, handlePreview: Function): BasicColumn {
+export function createActionColumn(handleRemove: Function): BasicColumn {
   return {
     width: 120,
     title: t('component.upload.operating'),
@@ -90,13 +93,13 @@ export function createActionColumn(handleRemove: Function, handlePreview: Functi
           onClick: handleRemove.bind(null, record),
         },
       ];
-      if (checkImgType(record)) {
-        actions.unshift({
-          label: t('component.upload.preview'),
-          onClick: handlePreview.bind(null, record),
-        });
-      }
-      return <TableAction actions={actions} />;
+      // if (checkImgType(record)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
+      return <TableAction actions={actions} outside={true} />;
     },
   };
 }
@@ -122,7 +125,6 @@ export function createPreviewColumns(): BasicColumn[] {
 
 export function createPreviewActionColumn({
   handleRemove,
-  handlePreview,
   handleDownload,
 }: {
   handleRemove: Fn;
@@ -135,7 +137,7 @@ export function createPreviewActionColumn({
     dataIndex: 'action',
     fixed: false,
     customRender: ({ record }) => {
-      const { url } = (record || {}) as PreviewFileItem;
+      // const { url } = (record || {}) as PreviewFileItem;
 
       const actions: ActionItem[] = [
         {
@@ -148,12 +150,12 @@ export function createPreviewActionColumn({
           onClick: handleDownload.bind(null, record),
         },
       ];
-      if (isImgTypeByName(url)) {
-        actions.unshift({
-          label: t('component.upload.preview'),
-          onClick: handlePreview.bind(null, record),
-        });
-      }
+      // if (isImgTypeByName(url)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
       return <TableAction actions={actions} />;
     },
   };

src/views/demo/feat/img-preview/index.vue

@@ -1,18 +1,11 @@
 <template>
   <PageWrapper title="图片预览示例">
     <ImagePreview :imageList="imgList" />
-    <Alert message="有预览图" type="info" />
-    <div class="flex justify-center mt-4">
-      <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" />
-    </div>
-    <Alert message="无预览图" type="info" />
-    <a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button>
   </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { Alert } from 'ant-design-vue';
-  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
+  import { ImagePreview } from '/@/components/Preview/index';
   import { PageWrapper } from '/@/components/Page';
 
   const imgList: string[] = [
@@ -21,16 +14,9 @@
     'https://picsum.photos/id/68/346/216',
   ];
   export default defineComponent({
-    components: { Alert, PageWrapper, ImagePreview },
+    components: { PageWrapper, ImagePreview },
     setup() {
-      function handleClick(img: string) {
-        createImgPreview({ imageList: [img] });
-      }
-
-      function handlePreview() {
-        createImgPreview({ imageList: imgList });
-      }
-      return { imgList, handleClick, handlePreview };
+      return { imgList };
     },
   });
 </script>

test/upload-server/README.md

@@ -6,7 +6,10 @@ Simple file upload service for testing file upload components.
 
 ```js
 
-cs ./test/upload-server
+cd ./test/upload-server
+
+// upload dir
+mkdir static
 
 yarn install
 

test/upload-server/yarn.lock

@@ -0,0 +1,467 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/formidable@^1.0.31":
+  version "1.0.32"
+  resolved "https://registry.npmjs.org/@types/formidable/-/formidable-1.0.32.tgz#d9a7eefbaa995a4486ec4e3960e9552e68b3f33c"
+  integrity sha512-jOAB5+GFW+C+2xdvUcpd/CnYg2rD5xCyagJLBJU+9PB4a/DKmsAqS9yZI3j/Q9zwvM7ztPHaAIH1ijzp4cezdQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/node@*":
+  version "14.14.20"
+  resolved "https://registry.npmjs.org/@types/node/-/node-14.14.20.tgz#f7974863edd21d1f8a494a73e8e2b3658615c340"
+  integrity sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A==
+
+accepts@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
+
+any-promise@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
+
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
+cache-content-type@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.1.tgz#035cde2b08ee2129f4a8315ea8f00a00dba1453c"
+  integrity sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==
+  dependencies:
+    mime-types "^2.1.18"
+    ylru "^1.2.0"
+
+co-body@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/co-body/-/co-body-5.2.0.tgz#5a0a658c46029131e0e3a306f67647302f71c124"
+  integrity sha512-sX/LQ7LqUhgyaxzbe7IqwPeTr2yfpfUIQ/dgpKo6ZI4y4lpQA0YxAomWIY+7I7rHWcG02PG+OuPREzMW/5tszQ==
+  dependencies:
+    inflation "^2.0.0"
+    qs "^6.4.0"
+    raw-body "^2.2.0"
+    type-is "^1.6.14"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+
+content-disposition@~0.5.2:
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
+
+content-type@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+cookies@~0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/cookies/-/cookies-0.8.0.tgz#1293ce4b391740a8406e3c9870e828c4b54f3f90"
+  integrity sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==
+  dependencies:
+    depd "~2.0.0"
+    keygrip "~1.1.0"
+
+debug@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.1:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
+deep-equal@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+depd@^2.0.0, depd@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+destroy@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+encodeurl@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+formidable@^1.1.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
+  integrity sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==
+
+fresh@~0.5.2:
+  version "0.5.2"
+  resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+http-assert@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/http-assert/-/http-assert-1.4.1.tgz#c5f725d677aa7e873ef736199b89686cceb37878"
+  integrity sha512-rdw7q6GTlibqVVbXr0CKelfV5iY8G2HqEUkhSk297BMbSpSL8crXC+9rjKoMcZZEsksX30le6f/4ul4E28gegw==
+  dependencies:
+    deep-equal "~1.0.1"
+    http-errors "~1.7.2"
+
+http-errors@1.7.3, http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@^1.6.3, http-errors@^1.7.3:
+  version "1.8.0"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.8.0.tgz#75d1bbe497e1044f51e4ee9e704a62f28d336507"
+  integrity sha512-4I8r0C5JDhT5VkvI47QktDW75rNlGVsUf/8hzjCC/wkWI/jdTRmBb9aI7erSG82r1bjKY3F6k28WnsVxB1C73A==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+inflation@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/inflation/-/inflation-2.0.0.tgz#8b417e47c28f925a45133d914ca1fd389107f30f"
+  integrity sha1-i0F+R8KPklpFEz2RTKH9OJEH8w8=
+
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+inherits@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-generator-function@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.8.tgz#dfb5c2b120e02b0a8d9d2c6806cd5621aa922f7b"
+  integrity sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==
+
+keygrip@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz#871b1681d5e159c62a445b0c74b615e0917e7226"
+  integrity sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==
+  dependencies:
+    tsscmp "1.0.6"
+
+koa-body@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/koa-body/-/koa-body-4.2.0.tgz#37229208b820761aca5822d14c5fc55cee31b26f"
+  integrity sha512-wdGu7b9amk4Fnk/ytH8GuWwfs4fsB5iNkY8kZPpgQVb04QZSv85T0M8reb+cJmvLE8cjPYvBzRikD3s6qz8OoA==
+  dependencies:
+    "@types/formidable" "^1.0.31"
+    co-body "^5.1.1"
+    formidable "^1.1.1"
+
+koa-compose@^3.0.0:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/koa-compose/-/koa-compose-3.2.1.tgz#a85ccb40b7d986d8e5a345b3a1ace8eabcf54de7"
+  integrity sha1-qFzLQLfZhtjlo0Wzoazo6rz1Tec=
+  dependencies:
+    any-promise "^1.1.0"
+
+koa-compose@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz#507306b9371901db41121c812e923d0d67d3e877"
+  integrity sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==
+
+koa-convert@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/koa-convert/-/koa-convert-1.2.0.tgz#da40875df49de0539098d1700b50820cebcd21d0"
+  integrity sha1-2kCHXfSd4FOQmNFwC1CCDOvNIdA=
+  dependencies:
+    co "^4.6.0"
+    koa-compose "^3.0.0"
+
+koa-router@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.npmjs.org/koa-router/-/koa-router-10.0.0.tgz#7bc76a031085731e61fc92c1683687b2f44de6a4"
+  integrity sha512-gAE5J1gBQTvfR8rMMtMUkE26+1MbO3DGpGmvfmM2pR9Z7w2VIb2Ecqeal98yVO7+4ltffby7gWOzpCmdNOQe0w==
+  dependencies:
+    debug "^4.1.1"
+    http-errors "^1.7.3"
+    koa-compose "^4.1.0"
+    methods "^1.1.2"
+    path-to-regexp "^6.1.0"
+
+koa-send@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/koa-send/-/koa-send-5.0.1.tgz#39dceebfafb395d0d60beaffba3a70b4f543fe79"
+  integrity sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==
+  dependencies:
+    debug "^4.1.1"
+    http-errors "^1.7.3"
+    resolve-path "^1.4.0"
+
+koa-static@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/koa-static/-/koa-static-5.0.0.tgz#5e92fc96b537ad5219f425319c95b64772776943"
+  integrity sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==
+  dependencies:
+    debug "^3.1.0"
+    koa-send "^5.0.0"
+
+koa2-cors@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/koa2-cors/-/koa2-cors-2.0.6.tgz#9ad23df3a0b9bb84530b46f5944f3fb576086554"
+  integrity sha512-JRCcSM4lamM+8kvKGDKlesYk2ASrmSTczDtGUnIadqMgnHU4Ct5Gw7Bxt3w3m6d6dy3WN0PU4oMP43HbddDEWg==
+
+koa@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.npmjs.org/koa/-/koa-2.13.1.tgz#6275172875b27bcfe1d454356a5b6b9f5a9b1051"
+  integrity sha512-Lb2Dloc72auj5vK4X4qqL7B5jyDPQaZucc9sR/71byg7ryoD1NCaCm63CShk9ID9quQvDEi1bGR/iGjCG7As3w==
+  dependencies:
+    accepts "^1.3.5"
+    cache-content-type "^1.0.0"
+    content-disposition "~0.5.2"
+    content-type "^1.0.4"
+    cookies "~0.8.0"
+    debug "~3.1.0"
+    delegates "^1.0.0"
+    depd "^2.0.0"
+    destroy "^1.0.4"
+    encodeurl "^1.0.2"
+    escape-html "^1.0.3"
+    fresh "~0.5.2"
+    http-assert "^1.3.0"
+    http-errors "^1.6.3"
+    is-generator-function "^1.0.7"
+    koa-compose "^4.1.0"
+    koa-convert "^1.2.0"
+    on-finished "^2.3.0"
+    only "~0.0.2"
+    parseurl "^1.3.2"
+    statuses "^1.5.0"
+    type-is "^1.6.16"
+    vary "^1.1.2"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
+methods@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
+mime-db@1.45.0:
+  version "1.45.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz#cceeda21ccd7c3a745eba2decd55d4b73e7879ea"
+  integrity sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==
+
+mime-types@^2.1.18, mime-types@~2.1.24:
+  version "2.1.28"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz#1160c4757eab2c5363888e005273ecf79d2a0ecd"
+  integrity sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==
+  dependencies:
+    mime-db "1.45.0"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
+on-finished@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
+only@~0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
+  integrity sha1-Kv3oTQPlC5qO3EROMGEKcCle37Q=
+
+parseurl@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+path-is-absolute@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-to-regexp@^6.1.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
+  integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
+
+qs@^6.4.0:
+  version "6.9.4"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
+  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
+
+raw-body@^2.2.0:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
+  integrity sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.3"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+resolve-path@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/resolve-path/-/resolve-path-1.4.0.tgz#c4bda9f5efb2fce65247873ab36bb4d834fe16f7"
+  integrity sha1-xL2p9e+y/OZSR4c6s2u02DT+Fvc=
+  dependencies:
+    http-errors "~1.6.2"
+    path-is-absolute "1.0.1"
+
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
+tsscmp@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
+  integrity sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==
+
+type-is@^1.6.14, type-is@^1.6.16:
+  version "1.6.18"
+  resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+vary@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+ylru@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"
+  integrity sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==