fix: 二级导航菜单控件控制台警告处理

2 years ago · b4ff5463a0
5 changed files with 110 additions and 87 deletions
--- a/frontend/src/views/app-store/index.vue
+++ b/frontend/src/views/app-store/index.vue
@ -1,11 +1,11 @@
 <template>
    <div>
        <el-card class="topCard">
-            <el-radio-group v-model="activeName">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/apps/all')" label="all">
+            <el-radio-group v-model="activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="all">
                    {{ $t('app.all') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/apps/installed')" label="installed">
+                <el-radio-button class="topButton" size="large" label="installed">
                    {{ $t('app.installed') }}
                </el-radio-button>
            </el-radio-group>
@ -29,6 +29,17 @@ const routerTo = (path: string) => {
    router.push({ path: path });
 };

+const handleChange = (val: string) => {
+    switch (val) {
+        case 'all':
+            routerTo('/apps/all');
+            break;
+        case 'installed':
+            routerTo('/apps/installed');
+            break;
+    }
+};
+
 onMounted(() => {
    const path = router.currentRoute.value.path;
    if (path === '/apps/all') {
--- a/frontend/src/views/container/index.vue
+++ b/frontend/src/views/container/index.vue
@ -1,49 +1,29 @@
 <template>
    <div>
        <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers')" label="container">
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="container">
                    {{ $t('container.container') }}
                </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/compose')"
-                    label="compose"
-                >
+                <el-radio-button class="topButton" size="large" label="compose">
                    {{ $t('container.compose') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers/image')" label="image">
+                <el-radio-button class="topButton" size="large" label="image">
                    {{ $t('container.image') }}
                </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/network')"
-                    label="network"
-                >
+                <el-radio-button class="topButton" size="large" label="network">
                    {{ $t('container.network') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers/volume')" label="volume">
+                <el-radio-button class="topButton" size="large" label="volume">
                    {{ $t('container.volume') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers/repo')" label="repo">
+                <el-radio-button class="topButton" size="large" label="repo">
                    {{ $t('container.repo') }}
                </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/template')"
-                    label="template"
-                >
+                <el-radio-button class="topButton" size="large" label="template">
                    {{ $t('container.composeTemplate') }}
                </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/setting')"
-                    label="setting"
-                >
+                <el-radio-button class="topButton" size="large" label="setting">
                    {{ $t('container.setting') }}
                </el-radio-button>
            </el-radio-group>
@ -52,9 +32,9 @@
 </template>

 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
+
 interface MenuProps {
    activeName: string;
 }
@ -62,17 +42,38 @@ const props = withDefaults(defineProps<MenuProps>(), {
    activeName: 'container',
 });

-const active = ref('container');
-
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
-    }
-});
-
 const routerTo = (path: string) => {
    router.push({ path: path });
 };
+
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'container':
+            routerTo('/containers');
+            break;
+        case 'compose':
+            routerTo('/containers/compose');
+            break;
+        case 'image':
+            routerTo('/containers/image');
+            break;
+        case 'network':
+            routerTo('/containers/network');
+            break;
+        case 'volume':
+            routerTo('/containers/volume');
+            break;
+        case 'repo':
+            routerTo('/containers/repo');
+            break;
+        case 'template':
+            routerTo('/containers/template');
+            break;
+        case 'setting':
+            routerTo('/containers/setting');
+            break;
+    }
+};
 </script>

 <style>
--- a/frontend/src/views/database/index.vue
+++ b/frontend/src/views/database/index.vue
@ -1,20 +1,15 @@
 <template>
    <div>
        <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/databases')" label="mysql">
-                    Mysql
-                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/databases/redis')" label="redis">
-                    Redis
-                </el-radio-button>
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="mysql">Mysql</el-radio-button>
+                <el-radio-button class="topButton" size="large" label="redis">Redis</el-radio-button>
            </el-radio-group>
        </el-card>
    </div>
 </template>

 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 interface MenuProps {
@ -24,17 +19,20 @@ const props = withDefaults(defineProps<MenuProps>(), {
    activeName: 'mysql',
 });

-const active = ref('mysql');
-
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
-    }
-});
-
 const routerTo = (path: string) => {
    router.push({ path: path });
 };
+
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'mysql':
+            routerTo('/databases');
+            break;
+        case 'redis':
+            routerTo('/databases/redis');
+            break;
+    }
+};
 </script>

 <style>
--- a/frontend/src/views/log/index.vue
+++ b/frontend/src/views/log/index.vue
@ -1,14 +1,14 @@
 <template>
    <div>
        <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/logs')" label="operation">
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="operation">
                    {{ $t('logs.operation') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/logs/login')" label="login">
+                <el-radio-button class="topButton" size="large" label="login">
                    {{ $t('logs.login') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/logs/system')" label="system">
+                <el-radio-button class="topButton" size="large" label="system">
                    {{ $t('logs.system') }}
                </el-radio-button>
            </el-radio-group>
@ -17,9 +17,9 @@
 </template>

 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
+
 interface MenuProps {
    activeName: string;
 }
@ -27,17 +27,23 @@ const props = withDefaults(defineProps<MenuProps>(), {
    activeName: 'operation',
 });

-const active = ref('operation');
-
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
-    }
-});
-
 const routerTo = (path: string) => {
    router.push({ path: path });
 };
+
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'operation':
+            routerTo('/logs');
+            break;
+        case 'login':
+            routerTo('/logs/login');
+            break;
+        case 'system':
+            routerTo('/logs/system');
+            break;
+    }
+};
 </script>

 <style>
--- a/frontend/src/views/setting/index.vue
+++ b/frontend/src/views/setting/index.vue
@ -1,25 +1,20 @@
 <template>
    <div>
        <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting')" label="panel">
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="panel">
                    {{ $t('setting.panel') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting/safe')" label="safe">
+                <el-radio-button class="topButton" size="large" label="safe">
                    {{ $t('setting.safe') }}
                </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    @click="routerTo('/setting/backupaccount')"
-                    size="large"
-                    label="backupaccount"
-                >
+                <el-radio-button class="topButton" size="large" label="backupaccount">
                    {{ $t('setting.backupAccount') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting/monitor')" label="monitor">
+                <el-radio-button class="topButton" size="large" label="monitor">
                    {{ $t('menu.monitor') }}
                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting/about')" label="about">
+                <el-radio-button class="topButton" size="large" label="about">
                    {{ $t('setting.about') }}
                </el-radio-button>
            </el-radio-group>
@ -28,7 +23,6 @@
 </template>

 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
 import router from '@/routers';

 interface MenuProps {
@ -38,16 +32,29 @@ const props = withDefaults(defineProps<MenuProps>(), {
    activeName: 'all',
 });

-const active = ref('all');
 const routerTo = (path: string) => {
    router.push({ path: path });
 };

-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'panel':
+            routerTo('/setting');
+            break;
+        case 'safe':
+            routerTo('/setting/safe');
+            break;
+        case 'backupaccount':
+            routerTo('/setting/backupaccount');
+            break;
+        case 'monitor':
+            routerTo('/setting/monitor');
+            break;
+        case 'about':
+            routerTo('/setting/about');
+            break;
    }
-});
+};
 </script>

 <style>