naive-upload/dist/vue2/node/naive-upload.min.cjs.map

<p align="left"> <a href="https://www.npmjs.org/package/naive-upload"> <img src="https://img.shields.io/npm/v/naive-upload.svg"> </a> <a href="https://bundlephobia.com/package/naive-upload@latest"> <img src="https://img.shields.io/bundl

{"version":3,"file":"naive-upload.min.cjs","sources":["../../../src/Model/RunMode.ts","../../../src/Model/Layout.ts","../../../src/Model/RGBAColor.ts","../../../src/Model/Settings.ts","../../../src/Piece/FileInput.vue2.vue","../../../src/Piece/FileInput.vue2.vue?vue&type=template&lang.js","../../../src/Model/FileType.ts","../../../src/Piece/SelectedFileInfo.vue2.vue","../../../src/Piece/SelectedFileInfo.vue2.vue?vue&type=template&lang.js","../../../src/Layout/Card/index.vue2.vue","../../../src/Layout/Card/index.vue2.vue?vue&type=template&lang.js","../../../src/Layout/Detailedly/index.vue2.vue","../../../src/Layout/Detailedly/index.vue2.vue?vue&type=template&lang.js","../../../src/Layout/index.vue2.vue","../../../src/Layout/index.vue2.vue?vue&type=template&lang.js","../../../src/Layout/Card/info.vue2.vue","../../../src/Layout/Card/info.vue2.vue?vue&type=template&lang.js","../../../src/Layout/Detailedly/info.vue2.vue","../../../src/Layout/Detailedly/info.vue2.vue?vue&type=template&lang.js","../../../src/Layout/info.vue2.vue","../../../src/Layout/info.vue2.vue?vue&type=template&lang.js","../../../src/Piece/SingleUpload.vue2.vue","../../../src/Piece/SingleUpload.vue2.vue?vue&type=template&lang.js","../../../src/Piece/DropFileInput.vue2.vue","../../../src/Piece/DropFileInput.vue2.vue?vue&type=template&lang.js","../../../src/Extention/FileTypeHelper.ts","../../../src/Model/SelectedFile.ts","../../../src/Extention/DraggingHelper.ts","../../../src/Piece/MultipleUpload.vue2.vue","../../../src/Piece/MultipleUpload.vue2.vue?vue&type=template&lang.js","../../../src/Extention/UploadError.ts","../../../src/Model/RawFile.ts","../../../src/Extention/SimpleGuid.ts","../../../src/Extention/FileSizeHelper.ts","../../../src/Model/ChunkFile.ts","../../../src/Extention/HashWorkerScript.js","../../../src/Extention/FileReadHelper.ts","../../../src/Model/HashWorkerMessageType.ts","../../../src/Extention/HashHelper.ts","../../../src/Model/UploadWorkerMessageType.ts","../../../src/Model/PreUploadChunkFileState.ts","../../../src/Extention/UploadWorkerScript.ts","../../../src/Extention/UploadHelper.ts","../../../src/Core/NaiveUpload.ts","../../../src/index.vue2.vue","../../../src/index.vue2.vue?vue&type=template&lang.js","../../../src/Extention/DefaultApiService.ts","../../../src/export.vue2.ts"],"sourcesContent":["/**\r\n * 上传组件运行模式\r\n *\r\n * @author LCTR\r\n * @date 2022-06-24\r\n */\r\nexport enum RunMode {\r\n    /**\r\n     * 添加文件后会自动校验，自动上传\r\n     */\r\n    全自动 = 'AT',\r\n\r\n    /**\r\n     * 添加文件后需要主动调用校验方法以及上传方法\r\n     */\r\n    手动挡 = 'MT',\r\n\r\n    /**\r\n     * 添加文件后会自动校验，但需要主动调用上传方法\r\n     */\r\n    半自动 = 'AMT'\r\n}","/**\r\n * 上传组件布局\r\n *\r\n * @author LCTR\r\n * @date 2022-06-24\r\n */\r\nexport enum Layout {\r\n    卡片 = 'Card',\r\n    清单 = 'Detailedly'\r\n}","/**\r\n * 有透明度的RGB颜色值\r\n *\r\n * @author LCTR\r\n * @date 2022-12-05\r\n */\r\nexport default class RGBAColor {\r\n    /**\r\n     * @param r 红色值\r\n     * @param g 绿色值\r\n     * @param b 蓝色值\r\n     * @param a 色彩空间\r\n     */\r\n    constructor(r: number, g: number, b: number, a: number) {\r\n        this.r = r;\r\n        this.g = g;\r\n        this.b = b;\r\n        this.a = a;\r\n    }\r\n\r\n    /**\r\n    * 红色值\r\n    */\r\n    r: number;\r\n\r\n    /**\r\n    * 绿色值\r\n    */\r\n    g: number;\r\n\r\n    /**\r\n    * 蓝色值\r\n    */\r\n    b: number;\r\n\r\n    /**\r\n    * 色彩空间\r\n    */\r\n    a: number;\r\n\r\n    /**\r\n     * 序列化\r\n     */\r\n    toString: (this: RGBAColor) => string = () => `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;\r\n\r\n    /**\r\n     * @param rgba {r 红色值, g 绿色值, b 蓝色值, a 色彩空间}\r\n     */\r\n    public static convertFrom(rgba: { r: number, g: number, b: number, a: number }): RGBAColor {\r\n        return new RGBAColor(rgba.r, rgba.g, rgba.b, rgba.a);\r\n    }\r\n}","import { RunMode } from \"../Model/RunMode\";\r\nimport { Layout } from \"../Model/Layout\";\r\nimport RGBAColor from \"./RGBAColor\";\r\n\r\n\r\n/**\r\n * 文件上传组件设置\r\n *\r\n * @author LCTR\r\n * @date 2022-06-24\r\n */\r\nexport default class Settings {\r\n    /**\r\n     * 设置\r\n     *\r\n     * @param action 此方法的参数为当前示例\r\n     */\r\n    public readonly build: (action: (model: Settings) => void) => Settings = (action) => {\r\n        action(this);\r\n        return this;\r\n    };\r\n\r\n    /**\r\n     * 设置\r\n     *\r\n     * @param action 此方法的参数为当前示例\r\n     */\r\n    public readonly setup: (this: Settings, action: (model: Settings) => void) => Settings = (action) => {\r\n        action(this);\r\n        return this;\r\n    };\r\n\r\n    /**\r\n     * 默认设置\r\n     */\r\n    public static default: () => Settings = () => new Settings();\r\n\r\n    /**\r\n     * 默认设置\r\n     */\r\n    public static defaultWithConfigCode: (configCode: string) => Settings = (configCode: string) => {\r\n        return new Settings().setup(x => x.configCode = configCode);\r\n    }\r\n\r\n    /**\r\n     * 文件上传配置编码\r\n     *\r\n     * @默认值 default\r\n     */\r\n    configCode: string = 'default';\r\n\r\n    /**\r\n     * 文件上传并发数\r\n     *\r\n     * @默认值 3\r\n     */\r\n    concurrentFile: number = 3;\r\n\r\n    /**\r\n     * 分片文件上传并发数\r\n     *\r\n     * @默认值 3\r\n     */\r\n    concurrentChunkFile: number = 3;\r\n\r\n    /**\r\n     * 小贴士\r\n     *\r\n     * @默认值 单击或拖动文件到此区域即可上传\r\n     */\r\n    tip: string = '单击或拖动文件到此区域即可上传';\r\n\r\n    /**\r\n     * 布局\r\n     *\r\n     * @默认值 Layout.卡片\r\n     */\r\n    layout: Layout = Layout.卡片;\r\n\r\n    /**\r\n     * 运行模式\r\n     *\r\n     * @默认值 RunMode.全自动\r\n     */\r\n    runMode: RunMode = RunMode.全自动;\r\n\r\n    /**\r\n     * 是否启用文件切片\r\n     *\r\n     * @默认值 true\r\n     */\r\n    enableChunk: boolean = true;\r\n\r\n    /**\r\n     * 切片规格（文件字节数）\r\n     *\r\n     * @默认值 2097152（即为2 * 1024 * 1024 = 2MB）\r\n     */\r\n    chunkSize: number = 2097152;\r\n\r\n    /**\r\n     * 发生错误时的重试次数\r\n     *\r\n     * @默认值 3\r\n     */\r\n    retry: number = 3;\r\n\r\n    /**\r\n     * 是否启用Web Worker\r\n     * <p>在浏览器不支持时此设置不会生效</P>\r\n     *\r\n     * @默认值 true\r\n     */\r\n    enableWorker: boolean = true;\r\n\r\n    /**\r\n     * 只读模式\r\n     *\r\n     * @默认值 false\r\n     */\r\n    readonly: boolean = false;\r\n\r\n    /**\r\n     * 调试模式\r\n     */\r\n    debug: boolean = false;\r\n\r\n    /**\r\n     * 显示错误信息\r\n     */\r\n    alertErrorInfo: boolean = false;\r\n\r\n    /**\r\n     * 启用拖动排序功能\r\n     *\r\n     * @默认值 true\r\n     */\r\n    enableDrag: boolean = true;\r\n\r\n    /**\r\n     * 校验状态的颜色\r\n     * \r\n     * @默认值 new RGBAColor(255, 235, 59, 0.5)\r\n     */\r\n    statusCheckingColor: RGBAColor = new RGBAColor(255, 235, 59, 0.5);\r\n\r\n    /**\r\n     * 上传状态的颜色\r\n     * \r\n     * @默认值 new RGBAColor(144, 206, 255, 0.5)\r\n     */\r\n    statusUploadingColor: RGBAColor = new RGBAColor(144, 206, 255, 0.5);\r\n\r\n    /**\r\n     * 暂停状态的颜色\r\n     * \r\n     * @默认值 new RGBAColor(158, 158, 158, 0.5)\r\n     */\r\n    statusPausedColor: RGBAColor = new RGBAColor(158, 158, 158, 0.5);\r\n\r\n    /**\r\n     * 暂停状态副标题的颜色\r\n     * \r\n     * @默认值 new RGBAColor(244, 154, 3, 0.5)\r\n     */\r\n    statusPausedSubColor: RGBAColor = new RGBAColor(244, 154, 3, 0.5);\r\n\r\n    /**\r\n     * 完成状态的颜色\r\n     * \r\n     * @默认值 new RGBAColor(76, 175, 80, 0.1)\r\n     */\r\n    statusDoneColor: RGBAColor = new RGBAColor(76, 175, 80, 0.1);\r\n\r\n    /**\r\n     * 完成状态副标题的颜色\r\n     * \r\n     * @默认值 new RGBAColor(3, 169, 244, 0.5)\r\n     */\r\n    statusDoneSubColor: RGBAColor = new RGBAColor(3, 169, 244, 0.5);\r\n\r\n    /**\r\n     * 错误状态的颜色\r\n     * \r\n     * @默认值 new RGBAColor(255, 0, 30, 0.35)\r\n     */\r\n    statusErrorColor: RGBAColor = new RGBAColor(255, 0, 30, 0.35);\r\n\r\n    /**\r\n     * 错误状态副标题的颜色\r\n     * \r\n     * @默认值 new RGBAColor(232, 31, 31, 0.5)\r\n     */\r\n    statusErrorSubColor: RGBAColor = new RGBAColor(232, 31, 31, 0.5);\r\n\r\n    /**\r\n     * 准备拖动时的动画颜色\r\n     * \r\n     * @默认值 new RGBAColor(255, 152, 0, 0.8)\r\n     */\r\n    dragReadyColor: RGBAColor = new RGBAColor(255, 152, 0, 0.8);\r\n\r\n    /**\r\n     * 拖动时的动画颜色\r\n     * \r\n     * @默认值 new RGBAColor(255, 152, 0, 0.5)\r\n     */\r\n    dragMovingColor: RGBAColor = new RGBAColor(255, 152, 0, 0.5);\r\n\r\n    /**\r\n     * 结束拖动时的动画颜色\r\n     * \r\n     * @默认值 new RGBAColor(255, 87, 34, 0.8)\r\n     */\r\n    dragOverColor: RGBAColor = new RGBAColor(255, 87, 34, 0.8);\r\n\r\n    /**\r\n     * 准备开始拖动的时间（单位ms）\r\n     * \r\n     * @默认值 1500\r\n     */\r\n    dragPreparationTime: number = 800;\r\n\r\n    /**\r\n     * 拖动时变换位置的等待时间（单位ms）\r\n     * \r\n     * @默认值 1300\r\n     */\r\n    dragChangePositionTime: number = 1000;\r\n\r\n    /**\r\n     * 是否为移动端\r\n     * \r\n     * @默认值 自动根据浏览器信息判断\r\n     */\r\n    isMobile: boolean = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(\r\n        navigator.userAgent\r\n    );\r\n}","<template>\r\n  <div\r\n    class=\"upload-btn\"\r\n    v-on:click=\"chosingFile\"\r\n    :title=\"uploadInstance.getSettings().tip\"\r\n  >\r\n    <div @click.stop=\"() => {}\">\r\n      <input\r\n        type=\"file\"\r\n        :multiple=\"(uploadInstance.getConfig().upperLimit ?? 0) > 1\"\r\n        ref=\"fileInputRef\"\r\n        :accept=\"uploadInstance.getAllowedTypes()\"\r\n        v-on:change=\"choseFile\"\r\n      />\r\n    </div>\r\n    <div class=\"upload-box-content\">\r\n      <slot></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from \"vue-demi\";\r\nimport NaiveUpload from \"../Core/NaiveUpload\";\r\n\r\nexport default defineComponent({\r\n  name: \"FileInput\",\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n  },\r\n  created() {\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Piece: File Input Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n  methods: {\r\n    /**\r\n     * 文件选择框引用对象\r\n     */\r\n    fileInputRef(): HTMLInputElement {\r\n      return <HTMLInputElement>this.$refs.fileInputRef;\r\n    },\r\n    /**\r\n     * 选择文件\r\n     *\r\n     * @param e\r\n     */\r\n    chosingFile(e: MouseEvent) {\r\n      if (this.uploadInstance.limited()) return;\r\n\r\n      //隐式触发文件选择事件\r\n      this.fileInputRef().click();\r\n    },\r\n\r\n    /**\r\n     * 已选择文件\r\n     *\r\n     * @param {any} e\r\n     */\r\n    choseFile(e: Event) {\r\n      const _fileInputRef = this.fileInputRef();\r\n\r\n      if (_fileInputRef && _fileInputRef.files)\r\n        for (let i = 0; i < _fileInputRef.files.length; i++) {\r\n          this.uploadInstance.append(_fileInputRef.files![i]);\r\n        }\r\n\r\n      //清空\r\n      if (_fileInputRef) _fileInputRef.value = \"\";\r\n    },\r\n  },\r\n});\r\n</script>\r\n","\n<div\n  class=\"upload-btn\"\n  v-on:click=\"chosingFile\"\n  :title=\"uploadInstance.getSettings().tip\"\n>\n  <div @click.stop=\"() => {}\">\n    <input\n      type=\"file\"\n      :multiple=\"(uploadInstance.getConfig().upperLimit ?? 0) > 1\"\n      ref=\"fileInputRef\"\n      :accept=\"uploadInstance.getAllowedTypes()\"\n      v-on:change=\"choseFile\"\n    />\n  </div>\n  <div class=\"upload-box-content\">\n    <slot></slot>\n  </div>\n</div>\n","/**\r\n * 文件类型\r\n *\r\n * @author LCTR\r\n * @date 2022-09-21\r\n */\r\nexport enum FileType {\r\n    电子文档 = '电子文档',\r\n    电子表格 = '电子表格',\r\n    文本文件 = '文本文件',\r\n    图片 = '图片',\r\n    音频 = '音频',\r\n    视频 = '视频',\r\n    压缩包 = '压缩包',\r\n    未知 = '未知',\r\n    外链资源 = '外链资源'\r\n}","<template>\r\n  <div\r\n    :class=\"containerStyle\"\r\n    :style=\"containerStyleVar\"\r\n    :title=\"containerInfo\"\r\n    v-on:mouseenter=\"mouseEnter\"\r\n    v-on:mouseleave=\"mouseLeave\"\r\n    v-on:mousedown=\"mouseDown\"\r\n    v-on:mouseup=\"mouseUp\"\r\n    ref=\"containerRef\"\r\n  >\r\n    <div v-if=\"!selectedFile?.canceled\" class=\"item-body\">\r\n      <div class=\"item-image\">\r\n        <img\r\n          :src=\"selectedFile?.thumbnail\"\r\n          loading=\"lazy\"\r\n          :alt=\"selectedFile?.fullname()\"\r\n        />\r\n      </div>\r\n\r\n      <span class=\"item-tools\" v-if=\"toolsShow\">\r\n        <span\r\n          class=\"upload-icon icon-rename\"\r\n          title=\"重命名\"\r\n          v-on:click=\"rename()\"\r\n          v-if=\"renameEnable && !uploadInstance.getSettings().readonly\"\r\n        ></span>\r\n        <span\r\n          class=\"upload-icon icon-view\"\r\n          title=\"查看\"\r\n          v-if=\"viewEnable\"\r\n          v-on:click=\"view()\"\r\n        ></span>\r\n        <span\r\n          class=\"upload-icon icon-download\"\r\n          title=\"保存\"\r\n          v-if=\"saveEnable\"\r\n          v-on:click=\"save()\"\r\n        ></span>\r\n        <span\r\n          class=\"upload-icon icon-remove\"\r\n          title=\"删除\"\r\n          v-on:click=\"remove()\"\r\n          v-if=\"!uploadInstance.getSettings().readonly\"\r\n        ></span>\r\n      </span>\r\n\r\n      <slot\r\n        :selectedFile=\"selectedFile\"\r\n        :rename=\"renderData.rename\"\r\n        :funs=\"{\r\n          setRenameInputRef: setRenameInputRef,\r\n          renameKeydown: renameKeydown,\r\n          renameDone: renameDone,\r\n        }\"\r\n        :loadingInfo=\"loadingInfo\"\r\n        :loadingShow=\"loadingShow\"\r\n      ></slot>\r\n\r\n      <div v-if=\"selectedFile?.paused\" class=\"item-sub sub-paused\">暂停</div>\r\n      <div\r\n        v-if=\"selectedFile?.done && !uploadInstance.getSettings().readonly\"\r\n        class=\"item-sub sub-done\"\r\n      >\r\n        完成\r\n      </div>\r\n      <div v-if=\"selectedFile?.error\" class=\"item-sub sub-error\">错误</div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, PropType } from \"vue-demi\";\r\nimport NaiveUpload from \"../Core/NaiveUpload\";\r\nimport SelectedFile from \"../Model/SelectedFile\";\r\nimport { FileType } from \"../Model/FileType\";\r\n\r\nexport default defineComponent({\r\n  name: \"SelectedFileInfo\",\r\n  /**\r\n   * 组件属性\r\n   */\r\n  props: {\r\n    /**\r\n     * 选择的文件\r\n     */\r\n    selectedFile: {\r\n      type: Object as PropType<SelectedFile>,\r\n      require: true,\r\n    },\r\n    /**\r\n     * 准备拖动\r\n     */\r\n    readyDrag: {\r\n      type: Boolean,\r\n      require: false,\r\n    },\r\n    /**\r\n     * 拖动操作已开始\r\n     */\r\n    startDrag: {\r\n      type: Boolean,\r\n      require: false,\r\n    },\r\n    /**\r\n     * 正在拖动\r\n     */\r\n    dragging: {\r\n      type: Boolean,\r\n      require: false,\r\n    },\r\n    /**\r\n     * 和拖动元素重叠\r\n     */\r\n    dragover: {\r\n      type: Boolean,\r\n      require: false,\r\n    },\r\n  },\r\n  /**\r\n   * 组件自定义事件\r\n   */\r\n  emits: [\r\n    /**\r\n     * 设置容器引用对象\r\n     *\r\n     * @param e\r\n     * @param {HTMLDivElement} el 容器引用对象\r\n     */\r\n    \"setContainerRef\",\r\n    /**\r\n     * 按下鼠标的事件\r\n     *\r\n     * @param e\r\n     * @param {MouseEvent} event\r\n     */\r\n    \"mouseDown\",\r\n    /**\r\n     * 松开鼠标的事件\r\n     *\r\n     * @param e\r\n     * @param {MouseEvent} event\r\n     */\r\n    \"mouseUp\",\r\n    /**\r\n     * 鼠标进入的事件\r\n     *\r\n     * @param e\r\n     * @param {MouseEvent} event\r\n     * @return {boolean}\r\n     */\r\n    \"mouseEnter\",\r\n    /**\r\n     * 鼠标离开的事件\r\n     *\r\n     * @param e\r\n     * @param {MouseEvent} event\r\n     */\r\n    \"mouseLeave\",\r\n  ],\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n    /**\r\n     * 容器样式\r\n     */\r\n    containerStyle(): string {\r\n      return `item-container ${\r\n        this.selectedFile?.done && !this.uploadInstance.getSettings().readonly\r\n          ? \" item-done\"\r\n          : \"\"\r\n      } ${this.selectedFile?.error ? \" item-error\" : \"\"} ${\r\n        this.renderData.hover &&\r\n        !this.renderData.rename.active &&\r\n        !this.selectedFile?.checking &&\r\n        !this.selectedFile?.uploading &&\r\n        !this.readyDrag &&\r\n        !this.startDrag\r\n          ? \" item-hover\"\r\n          : \"\"\r\n      } ${this.selectedFile?.checking ? \" item-checking\" : \"\"} ${\r\n        this.selectedFile?.uploading ? \" item-uploading\" : \"\"\r\n      } ${this.selectedFile?.canceled ? \" item-canceled\" : \"\"} ${\r\n        this.selectedFile?.paused ? \" item-paused\" : \"\"\r\n      } ${this.readyDrag ? \" item-ready-drag\" : \"\"} ${\r\n        this.dragging ? \" item-dragging\" : \"\"\r\n      } ${this.dragover ? \" item-drag-over\" : \"\"}`;\r\n    },\r\n    /**\r\n     * 容器样式中的变量\r\n     */\r\n    containerStyleVar(): Record<string, string> {\r\n      return {\r\n        \"--statusCheckingColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusCheckingColor.toString(),\r\n        \"--statusUploadingColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusUploadingColor.toString(),\r\n        \"--statusPausedColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusPausedColor.toString(),\r\n        \"--statusPausedSubColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusPausedSubColor.toString(),\r\n        \"--statusDoneColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusDoneColor.toString(),\r\n        \"--statusDoneSubColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusDoneSubColor.toString(),\r\n        \"--statusErrorColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusErrorColor.toString(),\r\n        \"--statusErrorSubColor\": this.uploadInstance\r\n          .getSettings()\r\n          .statusErrorSubColor.toString(),\r\n\r\n        \"--dragPreparationTime\": `${(\r\n          this.uploadInstance.getSettings().dragPreparationTime / 1000\r\n        ).toFixed(2)}s`,\r\n        \"--dragChangePositionTime\": `${(\r\n          this.uploadInstance.getSettings().dragChangePositionTime / 1000\r\n        ).toFixed(2)}s`,\r\n        \"--dragReadyColor\": this.uploadInstance\r\n          .getSettings()\r\n          .dragReadyColor.toString(),\r\n        \"--dragMovingColor\": this.uploadInstance\r\n          .getSettings()\r\n          .dragMovingColor.toString(),\r\n        \"--dragOverColor\": this.uploadInstance\r\n          .getSettings()\r\n          .dragOverColor.toString(),\r\n      };\r\n    },\r\n    /**\r\n     * 容器信息\r\n     */\r\n    containerInfo(): string {\r\n      return `${this.selectedFile?.done ? \"上传成功\" : \"\"} ${\r\n        this.selectedFile?.error ? this.selectedFile.errorMessage : \"\"\r\n      } ${this.selectedFile?.paused ? \"已暂停\" : \"\"}`;\r\n    },\r\n    /**\r\n     * 显示/隐藏 加载层\r\n     */\r\n    loadingShow(): boolean {\r\n      return (\r\n        !this.renderData.rename.active &&\r\n        (this.selectedFile!.checking || this.selectedFile!.uploading)\r\n      );\r\n    },\r\n    /**\r\n     * 加载层信息\r\n     */\r\n    loadingInfo(): string {\r\n      return `${\r\n        this.selectedFile?.checking\r\n          ? \"扫描中...\" + this.selectedFile.percent + \"%\"\r\n          : \"\"\r\n      } ${\r\n        this.selectedFile?.uploading\r\n          ? \"上传中...\" + this.selectedFile.percent + \"%\"\r\n          : \"\"\r\n      }`;\r\n    },\r\n    /**\r\n     * 显示/隐藏 工具栏\r\n     */\r\n    toolsShow(): boolean {\r\n      return (\r\n        this.renderData.hover &&\r\n        this.dragging === false &&\r\n        !this.renderData.rename.active &&\r\n        !this.selectedFile?.checking &&\r\n        !this.selectedFile?.uploading\r\n      );\r\n    },\r\n    /**\r\n     * 启用/禁用 重命名\r\n     */\r\n    renameEnable(): boolean {\r\n      return !this.selectedFile?.uploading;\r\n    },\r\n    /**\r\n     * 启用/禁用 浏览\r\n     */\r\n    viewEnable(): boolean {\r\n      switch (this.selectedFile?.fileType) {\r\n        case FileType.图片:\r\n        case FileType.音频:\r\n          return this.selectedFile.extensionLower !== \".flac\";\r\n        case FileType.视频:\r\n          return true;\r\n        case FileType.文本文件:\r\n          return true;\r\n        case FileType.电子文档:\r\n          return (\r\n            this.selectedFile.extensionLower === \".pdf\" ||\r\n            this.selectedFile.extensionLower === \".doc\" ||\r\n            this.selectedFile.extensionLower === \".docx\"\r\n          );\r\n        default:\r\n          return false;\r\n      }\r\n    },\r\n    /**\r\n     * 启用/禁用 保存\r\n     */\r\n    saveEnable(): boolean {\r\n      return true;\r\n    },\r\n  },\r\n  /**\r\n   * 渲染数据\r\n   */\r\n  data() {\r\n    return {\r\n      renderData: {\r\n        /**\r\n         * 文件重命名输入框\r\n         */\r\n        renameInputRef: null as HTMLInputElement | null,\r\n        /**\r\n         * 鼠标悬浮\r\n         */\r\n        hover: false,\r\n        /**\r\n         * 重命名\r\n         */\r\n        rename: {\r\n          /**\r\n           * 正在重命名\r\n           */\r\n          active: false,\r\n\r\n          /**\r\n           * 值\r\n           */\r\n          value: \"\",\r\n        },\r\n      },\r\n    };\r\n  },\r\n  created() {\r\n    //设置文件选择框引用对象\r\n    this.$nextTick(() => {\r\n      this.$emit(\"setContainerRef\", <HTMLDivElement>this.$refs.containerRef);\r\n    });\r\n\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Piece: Selected File Info Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n  methods: {\r\n    /**\r\n     * 设置重命名输入框引用对象\r\n     *\r\n     * @param el 引用对象\r\n     */\r\n    setRenameInputRef(el: HTMLInputElement | null) {\r\n      if (el) this.renderData.renameInputRef = el as HTMLInputElement;\r\n    },\r\n    /**\r\n     * 鼠标进入的事件\r\n     *\r\n     * @param event\r\n     */\r\n    mouseEnter(event: MouseEvent) {\r\n      if (this.readyDrag || this.startDrag) {\r\n        this.$emit(\"mouseEnter\", event);\r\n        this.renderData.hover = false;\r\n      } else this.renderData.hover = true;\r\n    },\r\n    /**\r\n     * 鼠标离开的事件\r\n     *\r\n     * @param event\r\n     */\r\n    mouseLeave(event: MouseEvent) {\r\n      if (this.readyDrag || this.startDrag) this.$emit(\"mouseLeave\", event);\r\n\r\n      this.renderData.hover = false;\r\n    },\r\n    /**\r\n     * 按下鼠标的事件\r\n     *\r\n     * @param event\r\n     */\r\n    mouseDown(event: MouseEvent) {\r\n      this.$emit(\"mouseDown\", event);\r\n    },\r\n    /**\r\n     * 松开鼠标的事件\r\n     *\r\n     * @param event\r\n     */\r\n    mouseUp(event: MouseEvent) {\r\n      this.$emit(\"mouseUp\", event);\r\n    },\r\n    /**\r\n     * 重命名\r\n     */\r\n    rename() {\r\n      this.renderData.rename.active = true;\r\n\r\n      this.$nextTick(() => {\r\n        if (this.renderData.renameInputRef)\r\n          this.renderData.renameInputRef.focus();\r\n      });\r\n    },\r\n    /**\r\n     * 确认重命名\r\n     *\r\n     * @param {any} event\r\n     */\r\n    renameKeydown(event: KeyboardEvent) {\r\n      if (event.key == \"Enter\") {\r\n        this.renameDone();\r\n      }\r\n    },\r\n    /**\r\n     * 重命名结束\r\n     */\r\n    renameDone() {\r\n      this.uploadInstance\r\n        .rename(\r\n          (this.selectedFile as SelectedFile).token!,\r\n          this.renderData.rename.value\r\n        )\r\n        .then(() => {\r\n          this.renderData.rename.active = false;\r\n        })\r\n        .catch(() => {\r\n          this.renderData.rename.active = false;\r\n        });\r\n    },\r\n    /**\r\n     * 查看\r\n     */\r\n    view() {\r\n      const file = this.uploadInstance.getRawFile(\r\n        this.selectedFile as SelectedFile\r\n      );\r\n      const bodyStyle =\r\n        \"margin:0px;text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center\";\r\n\r\n      switch ((this.selectedFile as SelectedFile).fileType) {\r\n        case FileType.图片:\r\n          let winImage = window.open();\r\n          winImage?.document.write(\r\n            `<head><title>${(\r\n              this.selectedFile as SelectedFile\r\n            ).fullname()}</title></head><body style=\"${bodyStyle};background-color: black;\"><img style=\"max-width: 100%;max-height: 100%;\" src=\"${\r\n              file.objectURL\r\n            }\" alt=\"${(this.selectedFile as SelectedFile).fullname()}\"></body>`\r\n          );\r\n          break;\r\n        case FileType.音频:\r\n          if ((this.selectedFile as SelectedFile).extensionLower === \".flac\")\r\n            return;\r\n\r\n          let winAudio = window.open();\r\n          winAudio?.document.write(\r\n            `<head><title>${(\r\n              this.selectedFile as SelectedFile\r\n            ).fullname()}</title></head><body style=\"${bodyStyle};background-color: black;\"><audio style=\"max-width: 100%;max-height: 100%;\" src=\"${\r\n              file.objectURL\r\n            }\" controls=\"controls\">抱歉, 暂不支持</audio></body>`\r\n          );\r\n          break;\r\n        case FileType.视频:\r\n          let winVideo = window.open();\r\n          winVideo?.document.write(\r\n            `<head><title>${(\r\n              this.selectedFile as SelectedFile\r\n            ).fullname()}</title></head><body style=\"${bodyStyle};background-color: black;\"><video style=\"max-width: 100%;max-height: 100%;\" src=\"${\r\n              file.objectURL\r\n            }\" controls=\"controls\">抱歉, 暂不支持</video></body>`\r\n          );\r\n          break;\r\n        default:\r\n          let win = window.open();\r\n          win?.document.write(\r\n            `<head><title>${(\r\n              this.selectedFile as SelectedFile\r\n            ).fullname()}</title></head><body style=\"${bodyStyle};\"><object style=\"max-width: 100%;max-height: 100%;\" data=\"${\r\n              file.objectURL\r\n            }\" type=\"${\r\n              (this.selectedFile as SelectedFile).extensionLower === \".txt\"\r\n                ? \"text/plain\"\r\n                : (this.selectedFile as SelectedFile).extensionLower === \".pdf\"\r\n                ? \"application/pdf\"\r\n                : \"application/octet-stream\"\r\n            }\" width=\"100%\" height=\"100%\"><iframe src=\"${\r\n              file.objectURL\r\n            }\" width=\"100%\" height=\"100%\" ></iframe></object></body>`\r\n          );\r\n          break;\r\n      }\r\n    },\r\n    /**\r\n     * 保存\r\n     */\r\n    save() {\r\n      const file = this.uploadInstance.getRawFile(\r\n        this.selectedFile as SelectedFile\r\n      );\r\n\r\n      const a = document.createElement(\"a\");\r\n      a.style.display = \"none\";\r\n      a.href = this.uploadInstance.getDownloadUrl(\r\n        this.selectedFile as SelectedFile\r\n      )!;\r\n      if (file.file)\r\n        a.download = (this.selectedFile as SelectedFile).fullname();\r\n      document.body.appendChild(a);\r\n      a.click();\r\n      document.body.removeChild(a);\r\n    },\r\n    /**\r\n     * 删除\r\n     */\r\n    remove() {\r\n      this.uploadInstance.remove((this.selectedFile as SelectedFile).token!);\r\n    },\r\n  },\r\n});\r\n</script>\r\n","\n<div\n  :class=\"containerStyle\"\n  :style=\"containerStyleVar\"\n  :title=\"containerInfo\"\n  v-on:mouseenter=\"mouseEnter\"\n  v-on:mouseleave=\"mouseLeave\"\n  v-on:mousedown=\"mouseDown\"\n  v-on:mouseup=\"mouseUp\"\n  ref=\"containerRef\"\n>\n  <div v-if=\"!selectedFile?.canceled\" class=\"item-body\">\n    <div class=\"item-image\">\n      <img\n        :src=\"selectedFile?.thumbnail\"\n        loading=\"lazy\"\n        :alt=\"selectedFile?.fullname()\"\n      />\n    </div>\n\n    <span class=\"item-tools\" v-if=\"toolsShow\">\n      <span\n        class=\"upload-icon icon-rename\"\n        title=\"重命名\"\n        v-on:click=\"rename()\"\n        v-if=\"renameEnable && !uploadInstance.getSettings().readonly\"\n      ></span>\n      <span\n        class=\"upload-icon icon-view\"\n        title=\"查看\"\n        v-if=\"viewEnable\"\n        v-on:click=\"view()\"\n      ></span>\n      <span\n        class=\"upload-icon icon-download\"\n        title=\"保存\"\n        v-if=\"saveEnable\"\n        v-on:click=\"save()\"\n      ></span>\n      <span\n        class=\"upload-icon icon-remove\"\n        title=\"删除\"\n        v-on:click=\"remove()\"\n        v-if=\"!uploadInstance.getSettings().readonly\"\n      ></span>\n    </span>\n\n    <slot\n      :selectedFile=\"selectedFile\"\n      :rename=\"renderData.rename\"\n      :funs=\"{\n        setRenameInputRef: setRenameInputRef,\n        renameKeydown: renameKeydown,\n        renameDone: renameDone,\n      }\"\n      :loadingInfo=\"loadingInfo\"\n      :loadingShow=\"loadingShow\"\n    ></slot>\n\n    <div v-if=\"selectedFile?.paused\" class=\"item-sub sub-paused\">暂停</div>\n    <div\n      v-if=\"selectedFile?.done && !uploadInstance.getSettings().readonly\"\n      class=\"item-sub sub-done\"\n    >\n      完成\n    </div>\n    <div v-if=\"selectedFile?.error\" class=\"item-sub sub-error\">错误</div>\n  </div>\n</div>\n","<template>\r\n  <div class=\"upload-container independent\">\r\n    <slot name=\"uploadContainer\"></slot>\r\n\r\n    <div class=\"upload-list\">\r\n      <slot name=\"listContainer\"></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from \"vue-demi\";\r\nimport NaiveUpload from \"../../Core/NaiveUpload\";\r\n\r\nexport default defineComponent({\r\n  name: \"CardIndex\",\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n  },\r\n  created() {\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Layout: Card Index Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\" type=\"text/scss\">\r\n@import \"index.vue2.scss\";\r\n</style>\r\n","\n<div class=\"upload-container independent\">\n  <slot name=\"uploadContainer\"></slot>\n\n  <div class=\"upload-list\">\n    <slot name=\"listContainer\"></slot>\n  </div>\n</div>\n","<template>\r\n  <div class=\"upload-container independent\">\r\n    <slot name=\"uploadContainer\"></slot>\r\n\r\n    <div class=\"upload-list\">\r\n      <slot name=\"listContainer\"></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from \"vue-demi\";\r\nimport NaiveUpload from \"../../Core/NaiveUpload\";\r\n\r\nexport default defineComponent({\r\n  name: \"DetailedlyIndex\",\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n  },\r\n  created() {\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Layout: Detailedly Index Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\" type=\"text/scss\">\r\n@import \"index.vue2.scss\";\r\n</style>\r\n","\n<div class=\"upload-container independent\">\n  <slot name=\"uploadContainer\"></slot>\n\n  <div class=\"upload-list\">\n    <slot name=\"listContainer\"></slot>\n  </div>\n</div>\n","<template>\r\n  <div v-if=\"!renderData.loading\">\r\n    <component :is=\"renderData.currentThemeIndex\">\r\n      <template #uploadContainer>\r\n        <slot name=\"uploadContainer\"></slot>\r\n      </template>\r\n\r\n      <template #listContainer>\r\n        <slot name=\"listContainer\"></slot>\r\n      </template>\r\n    </component>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent } from \"vue-demi\";\r\nimport NaiveUpload from \"../Core/NaiveUpload\";\r\nimport CardIndex from \"../Layout/Card/index.vue2.vue\";\r\nimport DetailedlyIndex from \"../Layout/Detailedly/index.vue2.vue\";\r\nimport { Layout } from \"../Model/Layout\";\r\n\r\nexport default defineComponent({\r\n  name: \"LayoutIndex\",\r\n  components: {\r\n    CardIndex,\r\n    DetailedlyIndex,\r\n  },\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n  },\r\n  /**\r\n   * 渲染数据\r\n   */\r\n  data() {\r\n    return {\r\n      renderData: {\r\n        /**\r\n         * 加载状态\r\n         */\r\n        loading: true,\r\n\r\n        /**\r\n         * 当前的主题组件\r\n         */\r\n        currentThemeIndex: null as string | null,\r\n      },\r\n    };\r\n  },\r\n  created() {\r\n    const changLayout = (layout?: Layout) => {\r\n      this.renderData.loading = true;\r\n      switch (layout) {\r\n        case Layout.卡片:\r\n          this.renderData.currentThemeIndex = \"CardIndex\";\r\n          break;\r\n        case Layout.清单:\r\n          this.renderData.currentThemeIndex = \"DetailedlyIndex\";\r\n          break;\r\n      }\r\n      this.renderData.loading = false;\r\n\r\n      this.uploadInstance.getSettings().debug\r\n        ? console.debug(\"Layout: Index Component(vue2) 已变更\")\r\n        : !1;\r\n    };\r\n\r\n    //注册布局变更事件\r\n    this.uploadInstance.registerLayoutChanged(changLayout);\r\n\r\n    //初始化布局\r\n    changLayout(this.uploadInstance.getSettings().layout);\r\n\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Layout: Index Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n});\r\n</script>\r\n","\n<div v-if=\"!renderData.loading\">\n  <component :is=\"renderData.currentThemeIndex\">\n    <template #uploadContainer>\n      <slot name=\"uploadContainer\"></slot>\n    </template>\n\n    <template #listContainer>\n      <slot name=\"listContainer\"></slot>\n    </template>\n  </component>\n</div>\n","<template>\r\n  <div>\r\n    <div class=\"item-info\">\r\n      <span\r\n        class=\"single-text-omitted item-name\"\r\n        :title=\"\r\n          slotProps?.selectedFile.fileType +\r\n          '\\r\\n' +\r\n          slotProps?.selectedFile.size +\r\n          '\\r\\n' +\r\n          slotProps?.selectedFile.fullname()\r\n        \"\r\n        v-html=\"slotProps?.selectedFile.fullname()\"\r\n        v-if=\"!slotProps?.rename.active\"\r\n      ></span>\r\n      <input\r\n        class=\"item-rename-input\"\r\n        type=\"text\"\r\n        v-if=\"slotProps?.rename.active\"\r\n        v-model=\"slotProps.rename.value\"\r\n        ref=\"renameInputRef\"\r\n        v-on:keydown=\"slotProps?.funs.renameKeydown($event)\"\r\n        v-on:blur=\"slotProps?.funs.renameDone()\"\r\n      />\r\n    </div>\r\n\r\n    <div\r\n      class=\"item-loading\"\r\n      v-if=\"slotProps?.loadingShow\"\r\n      :style=\"lodingStyle\"\r\n      :title=\"slotProps.loadingInfo\"\r\n    ></div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, PropType } from \"vue-demi\";\r\nimport NaiveUpload from \"../../Core/NaiveUpload\";\r\nimport SelectedFile from \"../../Model/SelectedFile\";\r\n\r\nexport default defineComponent({\r\n  name: \"CardInfo\",\r\n  /**\r\n   * 组件属性\r\n   */\r\n  props: {\r\n    /**\r\n     * 插槽属性\r\n     */\r\n    slotProps: {\r\n      type: Object as PropType<{\r\n        /**\r\n         * 选择的文件\r\n         */\r\n        selectedFile: SelectedFile;\r\n\r\n        /**\r\n         * 重命名\r\n         */\r\n        rename: {\r\n          /**\r\n           * 启用/禁用\r\n           */\r\n          enable: () => boolean;\r\n\r\n          /**\r\n           * 正在重命名\r\n           */\r\n          active: boolean;\r\n\r\n          /**\r\n           * 值\r\n           */\r\n          value: string;\r\n        };\r\n\r\n        /**\r\n         * 方法\r\n         */\r\n        funs: {\r\n          /**\r\n           * 设置重命名输入框引用对象\r\n           *\r\n           * @param el 引用对象\r\n           */\r\n          setRenameInputRef: (el: HTMLInputElement | null) => void;\r\n\r\n          /**\r\n           * 确认重命名\r\n           *\r\n           * @param {any} event\r\n           */\r\n          renameKeydown: (event: KeyboardEvent) => void;\r\n\r\n          /**\r\n           * 重命名结束\r\n           */\r\n          renameDone: () => void;\r\n        };\r\n\r\n        /**\r\n         * 显示/隐藏 加载层\r\n         */\r\n        loadingShow: boolean;\r\n\r\n        /**\r\n         * 加载层信息\r\n         */\r\n        loadingInfo: string;\r\n      }>,\r\n      require: true,\r\n    },\r\n  },\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n    /**\r\n     *加载层样式\r\n     */\r\n    lodingStyle(): Array<Record<string, string>> {\r\n      return (\r\n        this.slotProps?.selectedFile.checking\r\n          ? [\r\n              this.uploadInstance.getGradientStyleObject(\r\n                \"conic\",\r\n                \"rgba(255, 236, 201, 0.5)\",\r\n                this.slotProps.selectedFile.percent,\r\n                this.slotProps.selectedFile.virtualPercent\r\n              )[0],\r\n            ]\r\n          : []\r\n      )\r\n        .concat(\r\n          this.slotProps?.selectedFile.uploading\r\n            ? [\r\n                this.uploadInstance.getGradientStyleObject(\r\n                  \"conic\",\r\n                  \"rgba(144, 206, 255, 0.5)\",\r\n                  this.slotProps.selectedFile.percent,\r\n                  this.slotProps.selectedFile.virtualPercent\r\n                )[0],\r\n              ]\r\n            : []\r\n        )\r\n        .concat(\r\n          this.slotProps?.selectedFile.paused\r\n            ? [\r\n                this.uploadInstance.getGradientStyleObject(\r\n                  \"conic\",\r\n                  \"rgba(158, 158, 158, 0.5)\",\r\n                  this.slotProps.selectedFile.percent,\r\n                  this.slotProps.selectedFile.virtualPercent\r\n                )[0],\r\n              ]\r\n            : []\r\n        );\r\n    },\r\n  },\r\n  created() {\r\n    this.$nextTick(() => {\r\n      this.slotProps?.funs.setRenameInputRef(\r\n        <HTMLInputElement>this.$refs.renameInputRef\r\n      );\r\n    });\r\n\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Layout: Card Info Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n});\r\n</script>\r\n","\n<div>\n  <div class=\"item-info\">\n    <span\n      class=\"single-text-omitted item-name\"\n      :title=\"\n        slotProps?.selectedFile.fileType +\n        '\\r\\n' +\n        slotProps?.selectedFile.size +\n        '\\r\\n' +\n        slotProps?.selectedFile.fullname()\n      \"\n      v-html=\"slotProps?.selectedFile.fullname()\"\n      v-if=\"!slotProps?.rename.active\"\n    ></span>\n    <input\n      class=\"item-rename-input\"\n      type=\"text\"\n      v-if=\"slotProps?.rename.active\"\n      v-model=\"slotProps.rename.value\"\n      ref=\"renameInputRef\"\n      v-on:keydown=\"slotProps?.funs.renameKeydown($event)\"\n      v-on:blur=\"slotProps?.funs.renameDone()\"\n    />\n  </div>\n\n  <div\n    class=\"item-loading\"\n    v-if=\"slotProps?.loadingShow\"\n    :style=\"lodingStyle\"\n    :title=\"slotProps.loadingInfo\"\n  ></div>\n</div>\n","<template>\r\n  <div>\r\n    <div class=\"item-info\">\r\n      <span class=\"single-text-omitted item-name\">\r\n        名称：<span\r\n          :title=\"slotProps?.selectedFile.fullname()\"\r\n          v-html=\"slotProps?.selectedFile.fullname()\"\r\n          v-if=\"!slotProps?.rename.active\"\r\n        ></span>\r\n        <input\r\n          class=\"item-rename-input\"\r\n          type=\"text\"\r\n          v-if=\"slotProps?.rename.value\"\r\n          v-model=\"slotProps.selectedFile.newName\"\r\n          ref=\"renameInputRef\"\r\n          v-on:keydown=\"slotProps?.funs.renameKeydown($event)\"\r\n          v-on:blur=\"slotProps?.funs.renameDone()\"\r\n        />\r\n      </span>\r\n\r\n      <span class=\"single-text-omitted item-size\">\r\n        大小：<span\r\n          :title=\"slotProps?.selectedFile.size\"\r\n          v-html=\"slotProps?.selectedFile.size\"\r\n        ></span>\r\n      </span>\r\n\r\n      <span class=\"single-text-omitted item-filetype\">\r\n        类型：<span\r\n          :title=\"slotProps?.selectedFile.fileType\"\r\n          v-html=\"slotProps?.selectedFile.fileType\"\r\n        ></span>\r\n      </span>\r\n    </div>\r\n\r\n    <div\r\n      class=\"item-loading\"\r\n      v-if=\"slotProps?.loadingShow\"\r\n      :style=\"lodingStyle\"\r\n      :title=\"slotProps.loadingInfo\"\r\n    ></div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, PropType } from \"vue-demi\";\r\nimport NaiveUpload from \"../../Core/NaiveUpload\";\r\nimport SelectedFile from \"../../Model/SelectedFile\";\r\n\r\nexport default defineComponent({\r\n  name: \"DetailedlyInfo\",\r\n  /**\r\n   * 组件属性\r\n   */\r\n  props: {\r\n    /**\r\n     * 插槽属性\r\n     */\r\n    slotProps: {\r\n      type: Object as PropType<{\r\n        /**\r\n         * 选择的文件\r\n         */\r\n        selectedFile: SelectedFile;\r\n\r\n        /**\r\n         * 重命名\r\n         */\r\n        rename: {\r\n          /**\r\n           * 启用/禁用\r\n           */\r\n          enable: () => boolean;\r\n\r\n          /**\r\n           * 正在重命名\r\n           */\r\n          active: boolean;\r\n\r\n          /**\r\n           * 值\r\n           */\r\n          value: string;\r\n        };\r\n\r\n        /**\r\n         * 方法\r\n         */\r\n        funs: {\r\n          /**\r\n           * 设置重命名输入框引用对象\r\n           *\r\n           * @param el 引用对象\r\n           */\r\n          setRenameInputRef: (el: HTMLInputElement | null) => void;\r\n\r\n          /**\r\n           * 确认重命名\r\n           *\r\n           * @param {any} event\r\n           */\r\n          renameKeydown: (event: KeyboardEvent) => void;\r\n\r\n          /**\r\n           * 重命名结束\r\n           */\r\n          renameDone: () => void;\r\n        };\r\n\r\n        /**\r\n         * 显示/隐藏 加载层\r\n         */\r\n        loadingShow: boolean;\r\n\r\n        /**\r\n         * 加载层信息\r\n         */\r\n        loadingInfo: string;\r\n      }>,\r\n      require: true,\r\n    },\r\n  },\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n    /**\r\n     *加载层样式\r\n     */\r\n    lodingStyle(): Array<Record<string, string>> {\r\n      return (\r\n        this.slotProps?.selectedFile.checking\r\n          ? [\r\n              this.uploadInstance.getGradientStyleObject(\r\n                \"linear\",\r\n                \"rgba(255, 236, 201, 0.5)\",\r\n                this.slotProps.selectedFile.percent,\r\n                this.slotProps.selectedFile.virtualPercent\r\n              )[0],\r\n            ]\r\n          : []\r\n      )\r\n        .concat(\r\n          this.slotProps?.selectedFile.uploading\r\n            ? [\r\n                this.uploadInstance.getGradientStyleObject(\r\n                  \"linear\",\r\n                  \"rgba(144, 206, 255, 0.5)\",\r\n                  this.slotProps.selectedFile.percent,\r\n                  this.slotProps.selectedFile.virtualPercent\r\n                )[0],\r\n              ]\r\n            : []\r\n        )\r\n        .concat(\r\n          this.slotProps?.selectedFile.paused\r\n            ? [\r\n                this.uploadInstance.getGradientStyleObject(\r\n                  \"linear\",\r\n                  \"rgba(158, 158, 158, 0.5)\",\r\n                  this.slotProps.selectedFile.percent,\r\n                  this.slotProps.selectedFile.virtualPercent\r\n                )[0],\r\n              ]\r\n            : []\r\n        );\r\n    },\r\n  },\r\n  created() {\r\n    this.$nextTick(() => {\r\n      this.slotProps?.funs.setRenameInputRef(\r\n        <HTMLInputElement>this.$refs.renameInputRef\r\n      );\r\n    });\r\n\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Layout: Detailedly Info Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n});\r\n</script>\r\n","\n<div>\n  <div class=\"item-info\">\n    <span class=\"single-text-omitted item-name\">\n      名称：<span\n        :title=\"slotProps?.selectedFile.fullname()\"\n        v-html=\"slotProps?.selectedFile.fullname()\"\n        v-if=\"!slotProps?.rename.active\"\n      ></span>\n      <input\n        class=\"item-rename-input\"\n        type=\"text\"\n        v-if=\"slotProps?.rename.value\"\n        v-model=\"slotProps.selectedFile.newName\"\n        ref=\"renameInputRef\"\n        v-on:keydown=\"slotProps?.funs.renameKeydown($event)\"\n        v-on:blur=\"slotProps?.funs.renameDone()\"\n      />\n    </span>\n\n    <span class=\"single-text-omitted item-size\">\n      大小：<span\n        :title=\"slotProps?.selectedFile.size\"\n        v-html=\"slotProps?.selectedFile.size\"\n      ></span>\n    </span>\n\n    <span class=\"single-text-omitted item-filetype\">\n      类型：<span\n        :title=\"slotProps?.selectedFile.fileType\"\n        v-html=\"slotProps?.selectedFile.fileType\"\n      ></span>\n    </span>\n  </div>\n\n  <div\n    class=\"item-loading\"\n    v-if=\"slotProps?.loadingShow\"\n    :style=\"lodingStyle\"\n    :title=\"slotProps.loadingInfo\"\n  ></div>\n</div>\n","<template>\r\n  <div v-if=\"!renderData.loading\">\r\n    <component :is=\"renderData.currentThemeInfo\" :slotProps=\"slotProps\">\r\n    </component>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, PropType } from \"vue-demi\";\r\nimport NaiveUpload from \"../Core/NaiveUpload\";\r\nimport CardInfo from \"../Layout/Card/info.vue2.vue\";\r\nimport DetailedlyInfo from \"../Layout/Detailedly/info.vue2.vue\";\r\nimport SelectedFile from \"../Model/SelectedFile\";\r\nimport { Layout } from \"../Model/Layout\";\r\n\r\nexport default defineComponent({\r\n  name: \"LayoutInfo\",\r\n  components: {\r\n    CardInfo,\r\n    DetailedlyInfo,\r\n  },\r\n  /**\r\n   * 组件属性\r\n   */\r\n  props: {\r\n    /**\r\n     * 插槽属性\r\n     */\r\n    slotProps: {\r\n      type: Object as PropType<{\r\n        /**\r\n         * 选择的文件\r\n         */\r\n        selectedFile: SelectedFile;\r\n\r\n        /**\r\n         * 重命名\r\n         */\r\n        rename: {\r\n          /**\r\n           * 启用/禁用\r\n           */\r\n          enable: () => boolean;\r\n\r\n          /**\r\n           * 正在重命名\r\n           */\r\n          active: boolean;\r\n\r\n          /**\r\n           * 值\r\n           */\r\n          value: string;\r\n        };\r\n\r\n        /**\r\n         * 方法\r\n         */\r\n        funs: {\r\n          /**\r\n           * 设置重命名输入框引用对象\r\n           *\r\n           * @param el 引用对象\r\n           */\r\n          setRenameInputRef: (\r\n            el: HTMLInputElement | null\r\n          ) => void;\r\n\r\n          /**\r\n           * 确认重命名\r\n           *\r\n           * @param {any} event\r\n           */\r\n          renameKeydown: (event: KeyboardEvent) => void;\r\n\r\n          /**\r\n           * 重命名结束\r\n           */\r\n          renameDone: () => void;\r\n        };\r\n\r\n        /**\r\n         * 显示/隐藏 加载层\r\n         */\r\n        loadingShow: boolean;\r\n\r\n        /**\r\n         * 加载层信息\r\n         */\r\n        loadingInfo: string;\r\n      }>,\r\n      require: true,\r\n    },\r\n  },\r\n  inject: [\r\n    /**\r\n     * 注入文件上传工具实例\r\n     */\r\n    \"upload\",\r\n  ],\r\n  computed: {\r\n    /**\r\n     * 文件上传工具实例\r\n     */\r\n    uploadInstance(): NaiveUpload {\r\n      return <NaiveUpload>(<any>this).upload();\r\n    },\r\n  },\r\n  /**\r\n   * 渲染数据\r\n   */\r\n  data() {\r\n    return {\r\n      renderData: {\r\n        /**\r\n         * 加载状态\r\n         */\r\n        loading: true,\r\n\r\n        /**\r\n         * 当前的主题组件\r\n         */\r\n        currentThemeInfo: null as string | null,\r\n      },\r\n    };\r\n  },\r\n  created() {\r\n    const changLayout = (layout?: Layout) => {\r\n      this.renderData.loading = true;\r\n      switch (this.uploadInstance.getSettings().layout) {\r\n        case Layout.卡片:\r\n          this.renderData.currentThemeInfo = \"CardInfo\";\r\n          break;\r\n        case Layout.清单:\r\n          this.renderData.currentThemeInfo = \"DetailedlyInfo\";\r\n          break;\r\n      }\r\n      this.renderData.loading = false;\r\n\r\n      this.uploadInstance.getSettings().debug\r\n        ? console.debug(\"Layout: Info Component(vue2) 已变更\")\r\n        : !1;\r\n    };\r\n\r\n    //注册布局变更事件（index中已进行监听）\r\n    // upload.registerLayoutChanged(changLayout);\r\n\r\n    //初始化布局\r\n    changLayout();\r\n\r\n    this.uploadInstance.getSettings().debug\r\n      ? console.debug(\"Layout: Info Component(vue2) 已加载\")\r\n      : !1;\r\n  },\r\n});\r\n</script>\r\n","\n<div v-if=\"!renderData.loading\">\n  <component :is=\"renderData.currentThemeInfo\" :slotProps=\"slotProps\">\n  </component>\n</div>\n","<template>\r\n  <layout-index>\r\n    <template\r\n      v-if=\"!uploadInstance.getSettings().readonly\"\r\n      v-slot:uploadContainer\r\n    >\r\n      <file-input\r\n        v-if=\"!uploadInstance.anyFile()\"\r\n        class=\"upload-box-container single\"\r\n        :title=\"uploadInstance.getConfig().explain\"\r\n      >\r\n        <p class=\"upload-icon icon-select-file\"></p>\r\n      </file-input>\r\n    </template>\r\n\r\n    <template v-slot:listContainer>\r\n      <selected-file-info\r\n        v-for=\"sortKey in uploadInstance.getSelectedFileSortMap().size\"\r\n        :