feat: Implement customize menus (#297)

src/store/modules/app.ts

@@ -22,6 +22,7 @@ import getLocalTime from "@/utils/localtime";
 import type { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
+import type { MenuOptions, SubItem } from "@/types/app";
 /*global Nullable*/
 interface AppState {
   durationRow: Recordable;
@@ -35,6 +36,7 @@ interface AppState {
   version: string;
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
+  activateMenus: MenuOptions[];
 }
 
 export const appStore = defineStore({
@@ -55,6 +57,7 @@ export const appStore = defineStore({
     version: "",
     isMobile: false,
     reloadTimer: null,
+    activateMenus: [],
   }),
   getters: {
     duration(): Duration {
@@ -158,6 +161,35 @@ export const appStore = defineStore({
         500,
       );
     },
+    async getActivateMenus() {
+      const resp = (await this.queryMenuItems()) || {};
+      const menus = (resp.getMenuItems || []).map((d: MenuOptions, index: number) => {
+        const t = `${d.title.replace(/\s+/g, "-")}`;
+        d.name = `${t}-${index}`;
+        d.path = `/${t}`;
+        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}`;
+            return item;
+          });
+        }
+
+        return d;
+      });
+      this.activateMenus = menus.filter((d: MenuOptions) => {
+        if (d.activate) {
+          d.subItems = d.subItems.filter((item: SubItem) => {
+            if (item.activate) {
+              return item;
+            }
+          });
+          return d;
+        }
+      });
+    },
     async queryOAPTimeInfo() {
       const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});
       if (res.data.errors) {
@@ -179,6 +211,14 @@ export const appStore = defineStore({
       this.version = res.data.data.version;
       return res.data;
     },
+    async queryMenuItems() {
+      const res: AxiosResponse = await graphql.query("queryMenuItems").params({});
+      if (res.data.errors) {
+        return res.data;
+      }
+
+      return res.data.data;
+    },
     setReloadTimer(timer: IntervalHandle) {
       this.reloadTimer = timer;
     },