fix: Fix menu tab display issues (1Panel-dev#9838)

Author: ssongliu

frontend/src/components/back-button/index.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { routerToName, routerToPath } from '@/utils/router';
 import { inject, useSlots } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -25,10 +26,10 @@ function jump() {
         reloadPage();
     }
     if (path) {
-        router.push(path);
+        routerToPath(path);
     }
     if (name) {
-        router.push({ name: name });
+        routerToName(name);
     }
     if (to) {
         router.push(to);

frontend/src/components/backup/index.vue

@@ -131,10 +131,10 @@ import {
 } from '@/api/modules/backup';
 import i18n from '@/lang';
 import { Backup } from '@/api/interface/backup';
-import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import TaskLog from '@/components/log/task/index.vue';
 import { GlobalStore } from '@/store';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const selects = ref<any>([]);
@@ -194,7 +194,7 @@ const loadBackupDir = async () => {
 };
 
 const goFile = async () => {
-    router.push({ name: 'File', query: { path: `${backupPath.value}/app/${name.value}/${detailName.value}` } });
+    routerToFileWithPath(`${backupPath.value}/app/${name.value}/${detailName.value}`);
 };
 
 const onChange = async (info: any) => {

frontend/src/components/layout-content/no-such-service.vue

@@ -20,13 +20,13 @@
 </template>
 
 <script lang="ts" setup>
-import router from '@/routers';
+import { routerToNameWithQuery } from '@/utils/router';
 
 const prop = defineProps({
     name: String,
 });
 
 const toDoc = () => {
-    router.push({ name: 'Library', query: { uncached: 'true' } });
+    routerToNameWithQuery('Library', { uncached: 'true' });
 };
 </script>

frontend/src/components/router-button/index.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script lang="ts" setup>
+import { routerToName, routerToPath } from '@/utils/router';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -41,12 +42,6 @@ const buttonArray = computed(() => {
 
 const router = useRouter();
 const activeName = ref('');
-const routerToPath = (path: string) => {
-    router.push({ path: path });
-};
-const routerToName = (name: string) => {
-    router.push({ name: name });
-};
 
 const handleChange = (label: string) => {
     const btn = buttonArray.value.find((btn) => btn.label === label);

frontend/src/global/business.ts

@@ -11,6 +11,7 @@ import tr from './modules/tr';
 
 const i18n = createI18n({
     legacy: false,
+    missingWarn: false,
     locale: localStorage.getItem('lang') || 'en',
     fallbackLocale: 'en',
     globalInjection: true,

frontend/src/lang/index.ts

@@ -88,6 +88,7 @@ import bus from '@/global/bus';
 import { logOutApi } from '@/api/modules/auth';
 import router from '@/routers';
 import { loadProductProFromDB } from '@/utils/xpack';
+import { routerToNameWithQuery } from '@/utils/router';
 
 const filter = ref();
 const globalStore = GlobalStore();
@@ -178,7 +179,7 @@ const changeNode = (command: string) => {
         globalStore.currentNode = command || 'local';
         globalStore.currentNodeAddr = '';
         loadProductProFromDB();
-        router.push({ name: 'home', query: { t: Date.now() } });
+        routerToNameWithQuery('home', { t: Date.now() });
         return;
     }
     for (const item of nodes.value) {
@@ -198,7 +199,7 @@ const changeNode = (command: string) => {
             globalStore.currentNode = command || 'local';
             globalStore.currentNodeAddr = item.addr;
             loadProductProFromDB();
-            router.push({ name: 'home', query: { t: Date.now() } });
+            routerToNameWithQuery('home', { t: Date.now() });
         }
     }
 };

frontend/src/layout/components/Sidebar/components/Collapse.vue

@@ -24,11 +24,11 @@
 </template>
 
 <script setup lang="ts">
-import router from '@/routers';
 import { GlobalStore } from '@/store';
 import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
 import MenuLogo from '@/assets/images/1panel-menu-logo.svg?component';
 import { ref } from 'vue';
+import { routerToNameWithQuery } from '@/utils/router';
 
 defineProps<{ isCollapse: boolean }>();
 
@@ -37,7 +37,7 @@ const logoWithTextLoadFailed = ref(false);
 const globalStore = GlobalStore();
 
 const goHome = () => {
-    router.push({ name: 'home' });
+    routerToNameWithQuery('home', { t: Date.now() });
 };
 </script>
 

frontend/src/layout/components/Sidebar/components/Logo.vue

@@ -9,11 +9,6 @@
                 @visible-change="$emit('dropdownVisibleChange', $event, tabItem.path)"
             >
                 <span class="custom-tabs-label">
-                    <el-icon v-if="tabsStore.isShowTabIcon && menuIcon">
-                        <el-icon>
-                            <SvgIcon :iconName="menuIcon" />
-                        </el-icon>
-                    </el-icon>
                     <span>{{ menuName }}</span>
                 </span>
                 <template #dropdown>
@@ -56,11 +51,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { TabsStore } from '@/store';
-import { useI18n } from 'vue-i18n';
+import i18n from '@/lang';
 import { Close, DArrowLeft, DArrowRight, More } from '@element-plus/icons-vue';
-import SvgIcon from '@/components/svg-icon/svg-icon.vue';
 
-const i18n = useI18n();
 const tabsStore = TabsStore();
 
 const props = defineProps({
@@ -73,12 +66,18 @@ const props = defineProps({
 defineEmits(['closeTab', 'closeOtherTabs', 'closeTabs', 'dropdownVisibleChange']);
 
 const menuName = computed(() => {
-    return i18n.t(props.tabItem.meta.title);
+    let title;
+    if (props.tabItem.meta.parent) {
+        title = i18n.global.t(props.tabItem.meta.parent) + '-' + i18n.global.t(props.tabItem.meta.title);
+    } else {
+        title = i18n.global.t(props.tabItem.meta.title);
+    }
+    if (props.tabItem.meta.detail) {
+        title = title + '-' + i18n.global.t(props.tabItem.meta.detail);
+    }
+    return title;
 });
 
-const menuIcon = computed(() => {
-    return props.tabItem.meta.icon;
-});
 const dropdownRef = ref();
 
 defineExpose({
@@ -87,9 +86,6 @@ defineExpose({
 </script>
 
 <style scoped>
-.common-tabs .custom-tabs-label .el-icon {
-    vertical-align: middle;
-}
 .common-tabs .custom-tabs-label span {
     vertical-align: middle;
     margin-left: 4px;

frontend/src/layout/components/Tabs/components/TabItem.vue

@@ -27,6 +27,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'app.all',
                     },
                 },
                 {
@@ -38,6 +40,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'app.installed',
                     },
                 },
                 {
@@ -49,6 +53,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'app.canUpgrade',
                     },
                 },
                 {
@@ -60,6 +66,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'commons.button.set',
                     },
                 },
             ],