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() {

src/views/login.vue

@@ -13,11 +13,11 @@ import {
   reactive,
   onBeforeMount,
 } from "vue";
-import info, { ContextProps } from "../components/info/index.vue";
-import { getVerify, getLogin } from "../api/user";
+import info, { ContextProps } from "/@/components/Info/index.vue";
+import { getVerify, getLogin } from "/@/api/user";
 import { useRouter } from "vue-router";
-import { storageSession } from "../utils/storage";
-import { warnMessage, successMessage } from "../utils/message";
+import { storageSession } from "/@/utils/storage";
+import { warnMessage, successMessage } from "/@/utils/message";
 export default {
   name: "login",
   components: {

src/views/register.vue

@@ -16,10 +16,10 @@ import {
   onBeforeMount,
   getCurrentInstance,
 } from "vue";
-import info, { ContextProps } from "../components/info/index.vue";
-import { getRegist, getVerify } from "../api/user";
+import info, { ContextProps } from "/@//components/Info/index.vue";
+import { getRegist, getVerify } from "/@/api/user";
 import { useRouter } from "vue-router";
-import { warnMessage, successMessage } from "../utils/message";
+import { warnMessage, successMessage } from "/@/utils/message";
 export default {
   name: "register",
   components: {

src/views/welcome.vue

@@ -11,7 +11,7 @@
           />
           <span>{{ greetings }}</span>
         </div>
-        <flop v-if="!mobile" />
+        <Flop v-if="!mobile" />
       </div>
     </el-affix>
 
@@ -27,10 +27,10 @@
 </template>
 
 <script lang='ts'>
-import flop from "../components/flop/index.vue";
-import { ref, computed, onMounted, nextTick, onUpdated } from "vue";
-import { deviceDetection } from "../utils/deviceDetection";
-import { echartsJson } from "../api/mock";
+import Flop from "/@/components/Flop";
+import { ref, computed, onMounted, nextTick } from "vue";
+import { deviceDetection } from "/@/utils/deviceDetection";
+import { echartsJson } from "/@/api/mock";
 import {
   useEventListener,
   tryOnUnmounted,
@@ -42,7 +42,7 @@ let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
-    flop,
+    Flop,
   },
   setup() {
     let mobile = ref(deviceDetection());