refactor: 补充提交

src/component/timeline/index.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<LayTimelineProps>(), {
 const timeLineClass = computed(() => [
   "layui-timeline",
   props.direction === "horizontal" ? "layui-timeline-horizontal" : "",
-])
+]);
 </script>
 
 <template>

src/component/upload/index.vue

@@ -7,38 +7,47 @@ export default {
 import "./index.less";
 import { Recordable } from "../../types";
 import { layer } from "@layui/layer-vue";
-import { computed, ComputedRef, getCurrentInstance, nextTick, ref, toRaw, useSlots, withDefaults } from "vue";
+import {
+  computed,
+  ComputedRef,
+  getCurrentInstance,
+  nextTick,
+  ref,
+  toRaw,
+  useSlots,
+  withDefaults,
+} from "vue";
 import { templateRef } from "@vueuse/core";
 import { LayLayer } from "@layui/layer-vue";
 import Cropper from "cropperjs";
 // 组件的参数字段类型
 //https://www.layuiweb.com/doc/modules/upload.html#options
-export interface LayerButton{
+export interface LayerButton {
-  text:string;
+  text: string;
-  callback:Function
+  callback: Function;
 }
-export interface LayerModal{
+export interface LayerModal {
-  title?:string;
+  title?: string;
-  resize?:boolean;
+  resize?: boolean;
-  move?:boolean;
+  move?: boolean;
-  maxmin?:boolean;
+  maxmin?: boolean;
-  offset?:string[];
+  offset?: string[];
-  content?:string;
+  content?: string;
-  shade?:boolean;
+  shade?: boolean;
-  shadeClose?:boolean;
+  shadeClose?: boolean;
-  shadeOpacity?:number;
+  shadeOpacity?: number;
-  zIndex?:number;
+  zIndex?: number;
-  type?:"component"|"iframe";
+  type?: "component" | "iframe";
-  closeBtn?:boolean;
+  closeBtn?: boolean;
-  area:string[],
+  area: string[];
-  btn?:LayerButton[];
+  btn?: LayerButton[];
-  btnAlign?:"l"|"r"|"c";
+  btnAlign?: "l" | "r" | "c";
-  anim?:boolean;
+  anim?: boolean;
-  isOutAnim?:boolean;
+  isOutAnim?: boolean;
 }
-export interface cutOptions{
+export interface cutOptions {
-  layerOption:LayerModal;
+  layerOption: LayerModal;
-  copperOption?:typeof Cropper
+  copperOption?: typeof Cropper;
 }
 
 export interface LayUploadProps {
@@ -51,52 +60,52 @@ export interface LayUploadProps {
   multiple?: boolean;
   number?: number;
   drag?: boolean;
-  disabled?:boolean;
+  disabled?: boolean;
-  cut?:boolean;
+  cut?: boolean;
-  cutOptions:cutOptions;
+  cutOptions: cutOptions;
-};
+}
 
-const getCutDownResult=()=>{
+const getCutDownResult = () => {
-  if(_cropper){
+  if (_cropper) {
     const canvas = _cropper.getCroppedCanvas();
     let imgData = canvas.toDataURL('"image/png"');
     let currentTimeStamp = new Date().valueOf();
-    emit("cutdone",Object.assign({ currentTimeStamp, msg:imgData }));
+    emit("cutdone", Object.assign({ currentTimeStamp, msg: imgData }));
     let newFile = dataURLtoFile(imgData);
     console.log(newFile);
     commonUploadTransaction([newFile]);
-    nextTick(()=>clearAllCutEffect());
+    nextTick(() => clearAllCutEffect());
-  }else{
+  } else {
     errorF(cutInitErrorMsg);
   }
 };
-const closeCutDownModal =()=>{
+const closeCutDownModal = () => {
   console.log("closeCutDownModal");
   let currentTimeStamp = new Date().valueOf();
-  emit("cutcancel",Object.assign({ currentTimeStamp }));
+  emit("cutcancel", Object.assign({ currentTimeStamp }));
-  nextTick(()=>clearAllCutEffect());
+  nextTick(() => clearAllCutEffect());
-}
+};
-const clearAllCutEffect=()=>{
+const clearAllCutEffect = () => {
   activeUploadFiles.value = [];
   activeUploadFilesImgs.value = [];
   innerCutVisible.value = false;
   console.log("clearAllCutEffect");
 };
 
-let defaultCutLayerOption:LayerModal = {
+let defaultCutLayerOption: LayerModal = {
-  title:"标题",
+  title: "标题",
-  move:true,
+  move: true,
-  maxmin:false,
+  maxmin: false,
-  offset:[],
+  offset: [],
-  btn:[
+  btn: [
-    { text:"导出",callback:getCutDownResult },
+    { text: "导出", callback: getCutDownResult },
-    { text:"取消" ,callback:closeCutDownModal }
+    { text: "取消", callback: closeCutDownModal },
   ],
-  area:["640px","640px"],
+  area: ["640px", "640px"],
-  content:"11",
+  content: "11",
-  shade:true,
+  shade: true,
-  shadeClose:true,
+  shadeClose: true,
-  type:"component"
+  type: "component",
 };
 const props = withDefaults(defineProps<LayUploadProps>(), {
   acceptMime: "images",
@@ -105,15 +114,22 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
   multiple: false,
   number: 0,
   drag: false,
-  disabled:false,
+  disabled: false,
-  cut:false,
+  cut: false,
-  cutOptions:void 0
+  cutOptions: void 0,
 });
 
 const slot = useSlots();
 const slots = slot.default && slot.default();
 const context = getCurrentInstance();
-const emit = defineEmits(["choose", "before", "done", "error","cutdone","cutcancel"]);
+const emit = defineEmits([
+  "choose",
+  "before",
+  "done",
+  "error",
+  "cutdone",
+  "cutcancel",
+]);
 
 // 内部变量
 const isDragEnter = ref(false);
@@ -122,12 +138,14 @@ const activeUploadFiles = ref<any[]>([]);
 // 待处理的上传图片
 const activeUploadFilesImgs = ref<any[]>([]);
 const orgFileInput = templateRef<HTMLElement>("orgFileInput");
-let _cropper:any = null;
+let _cropper: any = null;
-let computedCutLayerOption:ComputedRef<LayerModal>;
+let computedCutLayerOption: ComputedRef<LayerModal>;
-if(props.cutOptions&&props.cutOptions.layerOption){
+if (props.cutOptions && props.cutOptions.layerOption) {
-  computedCutLayerOption = computed(()=>Object.assign(defaultCutLayerOption,props.cutOptions.layerOption));
+  computedCutLayerOption = computed(() =>
-}else{
+    Object.assign(defaultCutLayerOption, props.cutOptions.layerOption)
-  computedCutLayerOption = computed(()=>defaultCutLayerOption);
+  );
+} else {
+  computedCutLayerOption = computed(() => defaultCutLayerOption);
 }
 
 // 统一异常提示的常量
@@ -181,19 +199,19 @@ interface localUploadOption {
   url: string;
   [propMame: string]: any;
 }
-const dataURLtoFile=(dataurl:string)=> {
+const dataURLtoFile = (dataurl: string) => {
-  let arr:any[] = dataurl.split(',');
+  let arr: any[] = dataurl.split(",");
-  let mime:string = "";
+  let mime: string = "";
-  if(arr.length>0){
+  if (arr.length > 0) {
     mime = arr[0].match(/:(.*?);/)[1];
   }
   let bstr = atob(arr[1]);
   let n = bstr.length;
   let u8arr = new Uint8Array(n);
-  while(n--){
+  while (n--) {
     u8arr[n] = bstr.charCodeAt(n);
   }
-  return new Blob([u8arr], {type:mime});
+  return new Blob([u8arr], { type: mime });
 };
 
 const errorF = (errorText: string) => {
@@ -246,9 +264,9 @@ const localUpload = (option: localUploadOption, callback: Function) => {
     cb();
   }
 };
-const filetoDataURL=(file:File,fn:Function)=>{
+const filetoDataURL = (file: File, fn: Function) => {
   const reader = new FileReader();
-  reader.onloadend = function(e:any){
+  reader.onloadend = function (e: any) {
     fn(e.target.result);
   };
   reader.readAsDataURL(file);
@@ -282,38 +300,40 @@ const getUploadChange = (e: any) => {
       }
     }
   }
-  for(let item of _files){
+  for (let item of _files) {
     activeUploadFiles.value.push(item);
-    filetoDataURL(item,function(res:any){
+    filetoDataURL(item, function (res: any) {
       activeUploadFilesImgs.value.push(res);
     });
   }
-  let arm1 = props.cut&&props.acceptMime=="images"&&!props.multiple;
+  let arm1 = props.cut && props.acceptMime == "images" && !props.multiple;
-  let arm2 = props.cut&&props.acceptMime=="images"&&props.multiple;
+  let arm2 = props.cut && props.acceptMime == "images" && props.multiple;
-  if(arm1){
+  if (arm1) {
     innerCutVisible.value = true;
-    setTimeout(()=>{
+    setTimeout(() => {
       let _imgs = document.getElementsByClassName("_lay_upload_img");
-      console.log("293",_imgs);
+      console.log("293", _imgs);
       let _img = _imgs[0];
       _cropper = new Cropper(_img, {
         aspectRatio: 16 / 9,
       });
-    },400);
+    }, 400);
-  }else{
+  } else {
-    if(arm2){
+    if (arm2) {
-      console.warn("layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象");
+      console.warn(
+        "layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象"
+      );
     }
     commonUploadTransaction(_files);
   }
 };
-const commonUploadTransaction=(_files:any[])=>{
+const commonUploadTransaction = (_files: any[]) => {
-  if(props.url){
+  if (props.url) {
     localUploadTransaction({
       url: props.url,
-      files: _files
+      files: _files,
     });
-  }else{
+  } else {
     emit("done", _files);
   }
 };
@@ -329,9 +349,7 @@ const clickOrgInput = () => {
   //console.log(currentTimeStamp);
   emit("choose", currentTimeStamp);
 };
-const cutTransaction =()=>{
+const cutTransaction = () => {};
-  
-};
 //内部方法 -> end
 </script>
 <template>
@@ -358,7 +376,13 @@ const cutTransaction =()=>{
     <div
       v-else
       class="layui-upload-drag"
-      :class="disabled?'layui-upload-drag-disable':isDragEnter ? 'layui-upload-drag-draging' : ''"
+      :class="
+        disabled
+          ? 'layui-upload-drag-disable'
+          : isDragEnter
+          ? 'layui-upload-drag-draging'
+          : ''
+      "
       @click.stop="chooseFile"
     >
       <i class="layui-icon"></i>
@@ -381,11 +405,20 @@ const cutTransaction =()=>{
       :anim="computedCutLayerOption.anim"
       :isOutAnim="computedCutLayerOption.isOutAnim"
       :btn="computedCutLayerOption.btn"
-      v-model="innerCutVisible" @close="clearAllCutEffect">
+      v-model="innerCutVisible"
-      <div class="copper-container" v-for="(base64str,index) in activeUploadFilesImgs" :key="`file${index}`">
+      @close="clearAllCutEffect"
-        <img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img">
+    >
+      <div
+        class="copper-container"
+        v-for="(base64str, index) in activeUploadFilesImgs"
+        :key="`file${index}`"
+      >
+        <img
+          :src="base64str"
+          :id="`_lay_upload_img${index}`"
+          class="_lay_upload_img"
+        />
       </div>
-
     </lay-layer>
     <div class="layui-upload-list">
       <slot name="preview"></slot>

src/provider/index.vue

@@ -60,10 +60,10 @@ const changeTheme = (theme: string) => {
         disableStyleSheetsProxy: false,
       }
     );
-    localStorage.setItem('layui-vue-theme-dark','true')
+    localStorage.setItem("layui-vue-theme-dark", "true");
   } else {
     disableDarkMode();
-    localStorage.setItem('layui-vue-theme-dark','false')
+    localStorage.setItem("layui-vue-theme-dark", "false");
   }
 };