perf: view page add name

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
   },

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
     };
   }
 };

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(

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)
 }

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"

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,

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

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
   },

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

src/views/components/map/index.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
 import { Amap } from "/@/components/ReMap";
 export default {
+  name: "reMap",
   components: {
     Amap
   },

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
   },

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);

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
   },

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

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

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

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