feat: update menus

src/layout/components/SideBar.vue

@@ -36,14 +36,14 @@ limitations under the License. -->
                   <Icon size="lg" :iconName="menu.meta.icon" />
                 </el-icon>
                 <span class="title" :class="isCollapse ? 'collapse' : ''">
-                  {{ menu.meta.title }}
+                  {{ t(menu.meta.i18nKey) }}
                 </span>
               </router-link>
             </template>
             <el-menu-item-group>
               <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
                 <router-link class="items" :to="m.path">
-                  <span class="title">{{ m.meta && m.meta.title }}</span>
+                  <span class="title">{{ t(m.meta && m.meta.i18nKey) }}</span>
                 </router-link>
               </el-menu-item>
             </el-menu-item-group>
@@ -56,7 +56,7 @@ limitations under the License. -->
             </el-icon>
             <template #title>
               <router-link class="items menu-title" :to="menu.children[0].path">
-                <span class="title">{{ menu.meta.title }}</span>
+                <span class="title">{{ t(menu.meta.i18nKey) }}</span>
               </router-link>
             </template>
           </el-menu-item>
@@ -70,10 +70,12 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import type { RouteRecordRaw } from "vue-router";
   import { useRouter, useRoute } from "vue-router";
+  import { useI18n } from "vue-i18n";
   import Icon from "@/components/Icon.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global Recordable*/
+  const { t } = useI18n();
   const appStore = useAppStoreWithOut();
   const router = useRouter();
   const name = ref<string>(String(router.currentRoute.value.name));

src/router/alarm.ts

@@ -22,7 +22,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
     path: "",
     name: "Alarm",
     meta: {
-      title: "Alerting",
+      i18nKey: "alarm",
       icon: "spam",
       hasGroup: false,
       activate: true,

src/router/dashboard.ts

@@ -23,7 +23,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
     component: Layout,
     name: "Dashboard",
     meta: {
-      title: "Dashboards",
+      i18nKey: "dashboards",
       icon: "dashboard_customize",
       hasGroup: true,
       activate: true,
@@ -34,7 +34,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         component: () => import("@/views/dashboard/List.vue"),
         name: "List",
         meta: {
-          title: "Dashboard List",
+          i18nKey: "dashboardList",
           activate: true,
         },
       },
@@ -43,7 +43,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         component: () => import("@/views/dashboard/New.vue"),
         name: "New",
         meta: {
-          title: "New Dashboard",
+          i18nKey: "dashboardNew",
           activate: true,
         },
       },

src/router/layer.ts

@@ -31,6 +31,8 @@ async function layerDashboards() {
         title: item.title,
         hasGroup: item.hasGroup,
         activate: item.activate,
+        descKey: item.descKey,
+        i18nKey: item.i18nKey,
       },
       children: item.subItems && item.subItems.length ? [] : undefined,
     };
@@ -43,6 +45,8 @@ async function layerDashboards() {
           layer: child.layer,
           icon: child.icon || "cloud_queue",
           activate: child.activate,
+          descKey: child.descKey,
+          i18nKey: child.i18nKey,
         },
         component: () => import("@/views/Layer.vue"),
       };
@@ -68,6 +72,8 @@ async function layerDashboards() {
             layer: item.layer,
             icon: item.icon,
             activate: item.activate,
+            descKey: item.descKey,
+            i18nKey: item.i18nKey,
           },
           component: () => import("@/views/Layer.vue"),
         },

src/router/marketplace.ts

@@ -22,7 +22,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
     path: "",
     name: "Marketplace",
     meta: {
-      title: "Marketplace",
+      i18nKey: "marketplace",
       icon: "marketplace",
       hasGroup: false,
       activate: true,

src/router/settings.ts

@@ -22,7 +22,7 @@ export const routesSettings: Array<RouteRecordRaw> = [
     path: "",
     name: "Settings",
     meta: {
-      title: "Settings",
+      i18nKey: "settings",
       icon: "settings",
       hasGroup: false,
       activate: true,

src/store/modules/app.ts

@@ -175,6 +175,7 @@ export const appStore = defineStore({
             const id = `${item.title.replace(/\s+/g, "-")}`;
             item.name = `${id}-${index}${sub}`;
             item.path = `/${t}/${id}`;
+            item.descKey = `${item.i18nKey}_desc`;
             return item;
           });
         }

src/views/Marketplace.vue

@@ -25,10 +25,10 @@ limitations under the License. -->
         >
           <router-link :to="menu.hasGroup ? '' : menu.path || ''">
             <div class="title" :class="menu.activate ? (menu.hasGroup ? '' : 'actived-font') : 'disabled'">
-              {{ menu.title }}
+              {{ t(menu.i18nKey) }}
             </div>
           </router-link>
-          <div class="mt-10"> {{ menu.description }} </div>
+          <div class="mt-10"> {{ t(menu.descKey) }} </div>
           <el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink">
             <el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
           </el-link>
@@ -37,9 +37,9 @@ limitations under the License. -->
       <div class="mt-10 cards">
         <el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
           <router-link :to="item.path || ''">
-            <div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ item.title }}</div>
+            <div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ t(item.i18nKey) }}</div>
           </router-link>
-          <div class="mt-10"> {{ item.description }} </div>
+          <div class="mt-10"> {{ t(item.descKey) }} </div>
           <el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink">
             <el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
           </el-link>