feat: add administration

src/graphql/query/app.ts

@@ -14,8 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OAPTimeInfo, OAPVersion } from "../fragments/app";
+import { OAPTimeInfo, OAPVersion, MenuItems } from "../fragments/app";
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
 
 export const queryOAPVersion = `query ${OAPVersion.query}`;
+
+export const queryMenuItems = `query menuItems {${MenuItems.query}}`;

src/locales/lang/en.ts

@@ -405,5 +405,7 @@ const msg = {
   detailLabel: "Detail Label",
   summary: "Summary",
   detail: "Detail",
+  administration: "Administration",
+  menusManagement: "Menus Management",
 };
 export default msg;

src/locales/lang/es.ts

@@ -404,5 +404,7 @@ const msg = {
   detailLabel: "Detail Label",
   summary: "Summary",
   detail: "Detail",
+  administration: "Administration",
+  menusManagement: "Menus Management",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -402,5 +402,7 @@ const msg = {
   detailLabel: "详细标签",
   summary: "概括",
   detail: "详细",
+  administration: "管理",
+  menusManagement: "菜单管理",
 };
 export default msg;

src/router/administration.ts

@@ -17,26 +17,32 @@
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
 
-export const routesSetting: Array<RouteRecordRaw> = [
+export const routesAdministration: Array<RouteRecordRaw> = [
   {
     path: "",
-    name: "Settings",
+    name: "Administration",
     meta: {
-      title: "settings",
+      title: "administration",
       icon: "settings",
-      hasGroup: false,
+      hasGroup: true,
     },
     component: Layout,
     children: [
+      {
+        path: "/menus-management",
+        name: "MenusManagement",
+        meta: {
+          title: "menusManagement",
+        },
+        component: () => import("@/views/administration/Menus.vue"),
+      },
       {
         path: "/settings",
         name: "Settings",
         meta: {
           title: "settings",
-          icon: "settings",
-          hasGroup: false,
         },
-        component: () => import("@/views/Settings.vue"),
+        component: () => import("@/views/administration/Settings.vue"),
       },
     ],
   },

src/router/index.ts

@@ -17,11 +17,11 @@
 import type { RouteRecordRaw } from "vue-router";
 import { createRouter, createWebHistory } from "vue-router";
 import { routesDashboard } from "./dashboard";
-import { routesSetting } from "./setting";
+import { routesAdministration } from "./administration";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";
 
-const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesSetting];
+const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesAdministration];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

src/store/modules/app.ts

@@ -179,6 +179,13 @@ 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;
+      }
+      console.log(res.data.data);
+    },
     setReloadTimer(timer: IntervalHandle) {
       this.reloadTimer = timer;
     },

src/views/administration/Menus.vue

@@ -0,0 +1,32 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="menus flex-v"> menus </div>
+</template>
+<script lang="ts" setup>
+  import { useAppStoreWithOut } from "@/store/modules/app";
+
+  const appStore = useAppStoreWithOut();
+
+  appStore.setPageTitle("Menus Management");
+  appStore.queryMenuItems();
+</script>
+<style lang="scss" scoped>
+  .menus {
+    flex-grow: 1;
+    height: 100%;
+    font-size: $font-size-smaller;
+  }
+</style>