refactor: address pr

src/router/layer.ts

@@ -21,7 +21,7 @@ import type { MenuOptions } from "@/types/app";
 async function layerDashboards() {
   const appStore = useAppStoreWithOut();
   await appStore.getActivateMenus();
-  const routes = appStore.currentMenus.map((item: MenuOptions) => {
+  const routes = appStore.activateMenus.map((item: MenuOptions) => {
     const route: any = {
       path: "",
       name: item.name,
@@ -56,16 +56,17 @@ async function layerDashboards() {
       };
       route.children.push(tab);
     }
-    if (!item.subItems.length) {
+    if (!item.hasGroup) {
       route.children = [
         {
           name: item.name,
           path: item.path,
-          title: item.title,
-          layer: item.layer,
-          activate: item.activate,
-          icon: item.icon,
-          id: item.id,
+          meta: {
+            title: item.title,
+            layer: item.layer,
+            icon: item.icon,
+          },
+          component: () => import("@/views/Layer.vue"),
         },
       ];
     }

src/store/modules/app.ts

@@ -36,9 +36,7 @@ interface AppState {
   version: string;
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
-  currentMenus: MenuOptions[];
   activateMenus: MenuOptions[];
-  checkedKeys: string[];
 }
 
 export const appStore = defineStore({
@@ -59,9 +57,7 @@ export const appStore = defineStore({
     version: "",
     isMobile: false,
     reloadTimer: null,
-    currentMenus: [],
     activateMenus: [],
-    checkedKeys: [],
   }),
   getters: {
     duration(): Duration {
@@ -132,12 +128,6 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
-    setCurrentMenus(menus: MenuOptions[]) {
-      this.currentMenus = menus;
-    },
-    setCheckedKeys(keys: string[]) {
-      this.checkedKeys = keys;
-    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;
@@ -177,14 +167,12 @@ export const appStore = defineStore({
         const t = `${d.title.replace(/\s+/g, "-")}`;
         d.name = `${t}-${index}`;
         d.path = `/${t}`;
-        d.id = d.name;
         if (d.subItems && d.subItems.length) {
           d.hasGroup = true;
           d.subItems = d.subItems.map((item: SubItem, sub: number) => {
             const id = `${item.title.replace(/\s+/g, "-")}`;
             item.name = `${id}-${index}${sub}`;
             item.path = `/${t}/${id}`;
-            item.id = item.name;
             return item;
           });
         }
@@ -201,37 +189,6 @@ export const appStore = defineStore({
           return d;
         }
       });
-      const customMenus = localStorage.getItem("customMenus");
-      if (customMenus) {
-        this.checkedKeys = JSON.parse(customMenus);
-      } else {
-        for (const menus of this.activateMenus) {
-          this.checkedKeys.push(menus.name);
-          for (const item of menus.subItems) {
-            this.checkedKeys.push(item.name);
-          }
-        }
-        window.localStorage.setItem("customMenus", JSON.stringify(this.checkedKeys));
-      }
-      await this.getCurrentMenus();
-    },
-    getCurrentMenus() {
-      const current = [];
-      for (const d of this.activateMenus) {
-        const subItems = [];
-        for (const item of d.subItems) {
-          if (this.checkedKeys.includes(item.name)) {
-            subItems.push(item);
-          }
-        }
-        if (d.hasGroup && subItems.length) {
-          current.push({ ...d, subItems });
-        }
-        if (!d.hasGroup && d.activate) {
-          current.push({ ...d, subItems });
-        }
-      }
-      this.setCurrentMenus(current);
     },
     async queryOAPTimeInfo() {
       const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});

src/views/marketplace/Menus.vue

@@ -15,28 +15,15 @@ limitations under the License. -->
 <template>
   <div class="menus flex-v">
     <div class="tree-body">
-      <el-tree
-        ref="treeRef"
-        :data="appStore.activateMenus"
-        show-checkbox
-        node-key="id"
-        default-expand-all
-        :default-checked-keys="appStore.checkedKeys"
-        :props="defaultProps"
-      />
-      <el-button class="btn" size="small" type="primary" @click="getCheckedNodes">
-        {{ t("saveReload") }}
-      </el-button>
+      <el-tree ref="treeRef" :data="appStore.activateMenus" node-key="name" default-expand-all :props="defaultProps" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from "vue";
-  import { useI18n } from "vue-i18n";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
   const appStore = useAppStoreWithOut();
-  const { t } = useI18n();
   const treeRef = ref<InstanceType<any>>();
   const defaultProps = {
     children: "subItems",
@@ -44,13 +31,6 @@ limitations under the License. -->
   };
 
   appStore.setPageTitle("Menus");
-
-  function getCheckedNodes() {
-    const checkedKeys = treeRef.value!.getCheckedKeys(false, false);
-
-    window.localStorage.setItem("customMenus", JSON.stringify(checkedKeys));
-    window.location.reload();
-  }
 </script>
 <style lang="scss" scoped>
   .menus {
@@ -67,14 +47,4 @@ limitations under the License. -->
     height: 100%;
     background-color: #fff;
   }
-
-  .footer {
-    padding: 0 10px;
-    background-color: #fff;
-  }
-
-  .btn {
-    width: 150px;
-    margin-top: 20px;
-  }
 </style>