chore: structure change

src/views/components/cropping/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="margin: 10px">
     <div class="cropper-container">
-      <cropperImage ref="refCropper" :src="img" @cropperedInfo="cropperedInfo" style="width:45%" />
+      <Cropper ref="refCropper" :width="'45vw'" :src="img" />
       <img :src="cropperImg" class="croppered" v-if="cropperImg" />
     </div>
     <el-button type="primary" @click="onCropper">裁剪</el-button>
@@ -9,39 +9,47 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, onBeforeMount, getCurrentInstance } from "vue";
-import cropperImage from "../../../components/cropper/index.vue";
+import { defineComponent, ref, onBeforeMount, nextTick } from "vue";
+import Cropper from "/@/components/Cropper";
 import img from "./picture.jpeg";
+import { emitter } from "/@/utils/mitt";
+
+let cropperInstance = null;
 export default defineComponent({
   components: {
-    cropperImage
+    Cropper,
   },
   setup() {
-    let vm: any;
     let info = ref("");
     let cropperImg = ref("");
 
     const onCropper = (): void => {
-      vm.refs.refCropper.croppered();
+      nextTick(() => {
+        let imgInfo = cropperInstance.getData();
+        cropperInstance.getCroppedCanvas().toBlob((blob) => {
+          let fileReader: FileReader = new FileReader();
+          fileReader.onloadend = (e: any) => {
+            cropperImg.value = e.target.result;
+            info.value = imgInfo;
+          };
+          fileReader.readAsDataURL(blob);
+        }, "image/jpeg");
+      });
     };
 
     onBeforeMount(() => {
-      vm = getCurrentInstance();
+      emitter.on("cropperInstance", (key) => {
+        cropperInstance = key;
+      });
     });
 
-    function cropperedInfo({ imgBase64, imgInfo }) {
-      info.value = imgInfo;
-      cropperImg.value = imgBase64;
-    }
-
     return {
       img,
       info,
       cropperImg,
       onCropper,
-      cropperedInfo
     };
-  }
+  },
 });
 </script>
 

src/views/components/map/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="map">
-    <amap />
+    <Amap />
   </div>
 </template>
 
 <script lang='ts'>
-import amap from "../../../components/map/amap.vue";
+import { Amap } from "/@/components/Map";
 export default {
   components: {
-    amap
+    Amap
   },
   setup(){
     return{

src/views/components/selector/index.vue

@@ -14,7 +14,7 @@
 
 <script lang='ts'>
 import { ref } from "vue";
-import Selector from "/@/components/selector";
+import Selector from "/@/components/Selector";
 
 export default {
   components: { Selector },

src/views/components/split-pane/index.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import splitpane, {
   ContextProps,
-} from "../../../components/splitPane/index.vue";
+} from "/@/components/SplitPane/index.vue";
 import { reactive } from "vue";
 export default {
   name: "split",

src/views/components/video/index.vue

@@ -5,8 +5,10 @@
 <script lang='ts'>
 import { onMounted } from "vue";
 import Player from "xgplayer/dist/simple_player";
-import { volume, playbackRate, screenShot } from "xgplayer/dist/controls";
-import { deviceDetection } from "../../../utils/deviceDetection"
+import volume from 'xgplayer/dist/controls/volume';
+import playbackRate from 'xgplayer/dist/controls/playbackRate';
+import screenShot from 'xgplayer/dist/controls/screenShot';
+import { deviceDetection } from "/@/utils/deviceDetection"
 
 export default {
   setup() {