build: migrate the build tool from vue-cli to vite4 (#208)

src/views/dashboard/Edit.vue

@@ -33,89 +33,87 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { ref, defineComponent } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import GridLayout from "./panel/Layout.vue";
-import Tool from "./panel/Tool.vue";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import Configuration from "./configuration";
-import { LayoutConfig } from "@/types/dashboard";
+  import { ref, defineComponent } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useRoute } from "vue-router";
+  import GridLayout from "./panel/Layout.vue";
+  import Tool from "./panel/Tool.vue";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import Configuration from "./configuration";
+  import type { LayoutConfig } from "@/types/dashboard";
 
-export default defineComponent({
-  name: "Dashboard",
-  components: { ...Configuration, GridLayout, Tool },
-  setup() {
-    const dashboardStore = useDashboardStore();
-    const appStore = useAppStoreWithOut();
-    const { t } = useI18n();
-    const p = useRoute().params;
-    const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
-    setTemplate();
-    async function setTemplate() {
-      await dashboardStore.setDashboards();
+  export default defineComponent({
+    name: "Dashboard",
+    components: { ...Configuration, GridLayout, Tool },
+    setup() {
+      const dashboardStore = useDashboardStore();
+      const appStore = useAppStoreWithOut();
+      const { t } = useI18n();
+      const p = useRoute().params;
+      const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
+      setTemplate();
+      async function setTemplate() {
+        await dashboardStore.setDashboards();
 
-      if (!p.entity) {
-        if (!dashboardStore.currentDashboard) {
-          return;
+        if (!p.entity) {
+          if (!dashboardStore.currentDashboard) {
+            return;
+          }
+          const { layer, entity, name } = dashboardStore.currentDashboard;
+          layoutKey.value = `${layer}_${entity}_${name}`;
         }
-        const { layer, entity, name } = dashboardStore.currentDashboard;
-        layoutKey.value = `${layer}_${entity}_${name}`;
-      }
-      const c: { configuration: string; id: string } = JSON.parse(
-        sessionStorage.getItem(layoutKey.value) || "{}"
-      );
-      const layout: any = c.configuration || {};
+        const c: { configuration: string; id: string } = JSON.parse(sessionStorage.getItem(layoutKey.value) || "{}");
+        const layout: any = c.configuration || {};
 
-      dashboardStore.setLayout(setWidgetsID(layout.children || []));
-      appStore.setPageTitle(layout.name);
-      if (p.entity) {
-        dashboardStore.setCurrentDashboard({
-          layer: p.layerId,
-          entity: p.entity,
-          name: p.name,
-          id: c.id,
-          isRoot: layout.isRoot,
-        });
+        dashboardStore.setLayout(setWidgetsID(layout.children || []));
+        appStore.setPageTitle(layout.name);
+        if (p.entity) {
+          dashboardStore.setCurrentDashboard({
+            layer: p.layerId,
+            entity: p.entity,
+            name: p.name,
+            id: c.id,
+            isRoot: layout.isRoot,
+          });
+        }
       }
-    }
-    function setWidgetsID(widgets: LayoutConfig[]) {
-      for (const item of widgets) {
-        item.id = item.i;
-        if (item.type === "Tab") {
-          if (item.children && item.children.length) {
-            for (const [index, child] of item.children.entries()) {
-              if (child.children && child.children.length) {
-                child.children.map((d: { i: string; index: string } | any) => {
-                  d.id = `${item.i}-${index}-${d.i}`;
-                  return d;
-                });
+      function setWidgetsID(widgets: LayoutConfig[]) {
+        for (const item of widgets) {
+          item.id = item.i;
+          if (item.type === "Tab") {
+            if (item.children && item.children.length) {
+              for (const [index, child] of item.children.entries()) {
+                if (child.children && child.children.length) {
+                  child.children.map((d: { i: string; index: string } | any) => {
+                    d.id = `${item.i}-${index}-${d.i}`;
+                    return d;
+                  });
+                }
               }
             }
           }
         }
+        return widgets;
       }
-      return widgets;
-    }
-    function handleClick(e: any) {
-      e.stopPropagation();
-      if (e.target.className === "ds-main") {
-        dashboardStore.activeGridItem("");
-        dashboardStore.selectWidget(null);
+      function handleClick(e: any) {
+        e.stopPropagation();
+        if (e.target.className === "ds-main") {
+          dashboardStore.activeGridItem("");
+          dashboardStore.selectWidget(null);
+        }
       }
-    }
 
-    return {
-      t,
-      handleClick,
-      dashboardStore,
-    };
-  },
-});
+      return {
+        t,
+        handleClick,
+        dashboardStore,
+      };
+    },
+  });
 </script>
 <style lang="scss" scoped>
-.ds-main {
-  overflow: auto;
-}
+  .ds-main {
+    overflow: auto;
+  }
 </style>