From 47969f4349b1a8236deedd0dcf51b61048b8140a Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 29 Aug 2021 10:53:56 +0800
Subject: [PATCH] perf: view page add name

---
 src/App.vue                                   |  1 +
 src/components/ReFlop/src/index.vue           | 60 +++++++++++++------
 src/layout/components/AppMain.vue             |  2 +-
 src/store/modules/settings.ts                 | 26 ++++----
 src/views/components/button/index.vue         |  1 +
 src/views/components/contextmenu/index.vue    |  1 +
 src/views/components/count-to/index.vue       |  1 +
 src/views/components/cropping/index.vue       |  1 +
 src/views/components/draggable/index.vue      |  1 +
 src/views/components/map/index.vue            |  1 +
 .../components/seamless-scroll/index.vue      |  1 +
 src/views/components/selector/index.vue       |  1 +
 src/views/components/split-pane/index.vue     |  2 +-
 src/views/components/video/index.vue          |  1 +
 src/views/editor/index.vue                    |  2 +-
 src/views/flow-chart/index.vue                |  1 +
 src/views/redirect.vue                        |  2 +-
 17 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e7b88669..2d98bdd6d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ import { ElConfigProvider } from "element-plus"
 import zhCn from "element-plus/lib/locale/lang/zh-cn"
 import en from "element-plus/lib/locale/lang/en"
 export default {
+  name: "app",
   components: {
     [ElConfigProvider.name]: ElConfigProvider
   },
diff --git a/src/components/ReFlop/src/index.vue b/src/components/ReFlop/src/index.vue
index fcaea7132..b493587ea 100644
--- a/src/components/ReFlop/src/index.vue
+++ b/src/components/ReFlop/src/index.vue
@@ -14,28 +14,49 @@
 <script lang="ts">
 import {
   ref,
+  unref,
   onBeforeMount,
   getCurrentInstance,
   nextTick,
   onUnmounted
 } from "vue";
 import flippers from "./Filpper";
+
+import { templateRef } from "@vueuse/core";
 export default {
   name: "Flop",
   components: {
     flippers
   },
   setup() {
-    let vm: any;
     let timer = ref(null);
     let flipObjs = ref([]);
 
+    const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
+    const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
+    const flipperMinute1 = templateRef<HTMLElement | null>(
+      "flipperMinute1",
+      null
+    );
+    const flipperMinute2 = templateRef<HTMLElement | null>(
+      "flipperMinute2",
+      null
+    );
+    const flipperSecond1 = templateRef<HTMLElement | null>(
+      "flipperSecond1",
+      null
+    );
+    const flipperSecond2 = templateRef<HTMLElement | null>(
+      "flipperSecond2",
+      null
+    );
+
     // 初始化数字
     const init = () => {
       let now = new Date();
       let nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
       for (let i = 0; i < flipObjs.value.length; i++) {
-        flipObjs.value[i].setFront(nowTimeStr[i]);
+        flipObjs?.value[i]?.setFront(nowTimeStr[i]);
       }
     };
 
@@ -50,7 +71,7 @@ export default {
           if (nowTimeStr[i] === nextTimeStr[i]) {
             continue;
           }
-          flipObjs.value[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
+          flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
         }
       }, 1000);
     };
@@ -99,21 +120,18 @@ export default {
       return ("00" + str).substr(str.length);
     };
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance(); //获取组件实例
-      nextTick(() => {
-        flipObjs.value = [
-          vm.refs.flipperHour1,
-          vm.refs.flipperHour2,
-          vm.refs.flipperMinute1,
-          vm.refs.flipperMinute2,
-          vm.refs.flipperSecond1,
-          vm.refs.flipperSecond2
-        ];
+    nextTick(() => {
+      flipObjs.value = [
+        unref(flipperHour1),
+        unref(flipperHour2),
+        unref(flipperMinute1),
+        unref(flipperMinute2),
+        unref(flipperSecond1),
+        unref(flipperSecond2)
+      ];
 
-        init();
-        run();
-      });
+      init();
+      run();
     });
 
     onUnmounted(() => {
@@ -129,7 +147,13 @@ export default {
       init,
       run,
       formatDate,
-      padLeftZero
+      padLeftZero,
+      flipperHour1,
+      flipperHour2,
+      flipperMinute1,
+      flipperMinute2,
+      flipperSecond1,
+      flipperSecond2
     };
   }
 };
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index e41bf417f..4853efa0c 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -25,7 +25,7 @@ import {
 import { useRoute } from "vue-router";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 export default defineComponent({
-  name: "AppMain",
+  name: "appMain",
   setup() {
     let vm: any;
     const keepAlive: Boolean = ref(
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index f5cbc5375..58a68e554 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,11 +1,11 @@
-import defaultSettings from "../../settings";
-import { defineStore } from "pinia";
-import { store } from "/@/store";
+import defaultSettings from "../../settings"
+import { defineStore } from "pinia"
+import { store } from "/@/store"
 
 interface SettingState {
-  title: string;
-  fixedHeader: boolean;
-  cachedPageList: string[];
+  title: string
+  fixedHeader: boolean
+  cachedPageList: string[]
 }
 
 export const useSettingStore = defineStore({
@@ -14,29 +14,29 @@ export const useSettingStore = defineStore({
     title: defaultSettings.title,
     fixedHeader: defaultSettings.fixedHeader,
     // 需要开启keepalive的页面数组，里面放页面的name即可
-    cachedPageList: ["editor"]
+    cachedPageList: ["welcome", "reEditor"]
   }),
   getters: {
     getTitle() {
-      return this.title;
+      return this.title
     },
     getFixedHeader() {
-      return this.fixedHeader;
+      return this.fixedHeader
     }
   },
   actions: {
     CHANGE_SETTING({ key, value }) {
       // eslint-disable-next-line no-prototype-builtins
       if (this.hasOwnProperty(key)) {
-        this[key] = value;
+        this[key] = value
       }
     },
     changeSetting(data) {
-      this.CHANGE_SETTING(data);
+      this.CHANGE_SETTING(data)
     }
   }
-});
+})
 
 export function useSettingStoreHook() {
-  return useSettingStore(store);
+  return useSettingStore(store)
 }
diff --git a/src/views/components/button/index.vue b/src/views/components/button/index.vue
index b9c1f98fb..e887f5d41 100644
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { ref } from "vue";
 export default {
+  name: "reButton",
   setup() {
     const url = ref(
       process.env.NODE_ENV === "production"
diff --git a/src/views/components/contextmenu/index.vue b/src/views/components/contextmenu/index.vue
index 085bf383f..ce58e43a3 100644
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -22,6 +22,7 @@ import basic from "./basic.vue";
 import menuGroup from "./menuGroup.vue";
 import menuDynamic from "./menuDynamic.vue";
 export default {
+  name: "reContextmenu",
   components: {
     basic,
     menuGroup,
diff --git a/src/views/components/count-to/index.vue b/src/views/components/count-to/index.vue
index b4374e96c..a91514852 100644
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@@ -33,6 +33,7 @@
 <script lang="ts">
 import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
 export default {
+  name: "reCountTo",
   components: {
     ReNormalCountTo,
     ReboundCountTo
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 106356759..cebda9a44 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -15,6 +15,7 @@ import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";
 
 export default {
+  name: "reCropping",
   components: {
     Cropper
   },
diff --git a/src/views/components/draggable/index.vue b/src/views/components/draggable/index.vue
index 81040ce5c..96d3a268c 100644
--- a/src/views/components/draggable/index.vue
+++ b/src/views/components/draggable/index.vue
@@ -76,6 +76,7 @@
 import draggable from "vuedraggable/src/vuedraggable";
 import { reactive, toRefs, onMounted } from "vue";
 export default {
+  name: "reDraggable",
   components: { draggable },
   setup() {
     const myArray = reactive({
diff --git a/src/views/components/map/index.vue b/src/views/components/map/index.vue
index ad2c424d3..2cdb03d04 100644
--- a/src/views/components/map/index.vue
+++ b/src/views/components/map/index.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { Amap } from "/@/components/ReMap";
 export default {
+  name: "reMap",
   components: {
     Amap
   },
diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue
index c7ee52ab5..4592bfc87 100644
--- a/src/views/components/seamless-scroll/index.vue
+++ b/src/views/components/seamless-scroll/index.vue
@@ -66,6 +66,7 @@ import { templateRef } from "@vueuse/core";
 
 import SeamlessScroll from "/@/components/ReSeamlessScroll";
 export default {
+  name: "reSeamlessScroll",
   components: {
     SeamlessScroll
   },
diff --git a/src/views/components/selector/index.vue b/src/views/components/selector/index.vue
index d9573872c..aa4b68780 100644
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@@ -27,6 +27,7 @@ import { ref } from "vue";
 import Selector from "/@/components/ReSelector";
 
 export default {
+  name: "reSelector",
   components: { Selector },
   setup() {
     let selectRange = ref(null);
diff --git a/src/views/components/split-pane/index.vue b/src/views/components/split-pane/index.vue
index e9cf09e86..928744a79 100644
--- a/src/views/components/split-pane/index.vue
+++ b/src/views/components/split-pane/index.vue
@@ -26,7 +26,7 @@
 import splitpane, { ContextProps } from "/@/components/ReSplitPane";
 import { reactive } from "vue";
 export default {
-  name: "split",
+  name: "reSplitPane",
   components: {
     splitpane
   },
diff --git a/src/views/components/video/index.vue b/src/views/components/video/index.vue
index 8134b4b12..4ba48ea42 100644
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -11,6 +11,7 @@ import screenShot from "xgplayer/dist/controls/screenShot";
 import { deviceDetection } from "/@/utils/deviceDetection";
 
 export default {
+  name: "reVideo",
   setup() {
     onMounted(() => {
       new Player({
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index c939df0bb..f2d286fa6 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -10,7 +10,7 @@ import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
 import WangEditor from "wangeditor";
 
 export default {
-  name: "editor",
+  name: "reEditor",
   setup() {
     const editor = ref();
     const content = reactive({
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index f9434c501..a2db2bbde 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -31,6 +31,7 @@ import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
 import { BpmnNode } from "/@/components/ReFlowChart/src/config";
 import demoData from "./dataTurbo.json";
 export default {
+  name: "reFlowChart",
   components: { NodePanel, Control, DataDialog },
   setup() {
     // eslint-disable-next-line no-undef
diff --git a/src/views/redirect.vue b/src/views/redirect.vue
index 97afb42a0..ffec73747 100644
--- a/src/views/redirect.vue
+++ b/src/views/redirect.vue
@@ -6,7 +6,7 @@ import { defineComponent, unref } from "vue";
 import { useRouter } from "vue-router";
 
 export default defineComponent({
-  name: "Redirect",
+  name: "redirect",
   setup() {
     const { currentRoute, replace } = useRouter();