From b59225af1e7c8c8322545c26dab37cd89ea131d5 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Wed, 11 Jan 2023 18:09:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |  33 ++++++
 .../src/components/router-button/index.vue    | 103 ++++++++++++++++++
 frontend/src/layout/layout-content.vue        |   6 -
 frontend/src/typings/global.d.ts              |   8 +-
 frontend/src/views/app-store/index.vue        |  55 +++-------
 5 files changed, 155 insertions(+), 50 deletions(-)
 create mode 100644 frontend/components.d.ts
 create mode 100644 frontend/src/components/router-button/index.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
new file mode 100644
index 000000000..310ef8268
--- /dev/null
+++ b/frontend/components.d.ts
@@ -0,0 +1,33 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    403: typeof import('./src/components/error-message/403.vue')['default']
+    404: typeof import('./src/components/error-message/404.vue')['default']
+    500: typeof import('./src/components/error-message/500.vue')['default']
+    AppLayout: typeof import('./src/components/app-layout/index.vue')['default']
+    AppStatus: typeof import('./src/components/app-status/index.vue')['default']
+    BackButton: typeof import('./src/components/back-button/index.vue')['default']
+    BreadCrumbs: typeof import('./src/components/bread-crumbs/index.vue')['default']
+    BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']
+    CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default']
+    Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
+    ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
+    ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
+    ContainerLog: typeof import('./src/components/container-log/index.vue')['default']
+    DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    FileList: typeof import('./src/components/file-list/index.vue')['default']
+    FileRole: typeof import('./src/components/file-role/index.vue')['default']
+    Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']
+    Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
+    Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
+    Status: typeof import('./src/components/status/index.vue')['default']
+    SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default']
+    SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']
+  }
+}
+
+export { }
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
new file mode 100644
index 000000000..f9dcbfef8
--- /dev/null
+++ b/frontend/src/components/router-button/index.vue
@@ -0,0 +1,103 @@
+<template>
+    <el-card class="router_card">
+        <el-radio-group v-model="activeName" @change="handleChange">
+            <el-radio-button
+                class="router_card_button"
+                :label="button.label"
+                v-for="(button, index) in buttonArray"
+                size="large"
+                :key="index"
+            ></el-radio-button>
+        </el-radio-group>
+    </el-card>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+defineOptions({ name: 'RouterButton' });
+
+const props = defineProps({
+    buttons: {
+        type: Array,
+        required: true,
+    },
+});
+
+const buttonArray: any = computed(() => {
+    return props.buttons;
+});
+
+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) => {
+    buttonArray.value.forEach((btn: RouterButton) => {
+        if (btn.label == label) {
+            if (btn.path) {
+                routerToPath(btn.path);
+            } else if (btn.name) {
+                routerToName(btn.name);
+            }
+            activeName.value = btn.label;
+            return;
+        }
+    });
+};
+
+onMounted(() => {
+    const nowPath = router.currentRoute.value.path;
+    if (buttonArray.value.length > 0) {
+        let isPathExist = false;
+        buttonArray.value.forEach((btn: RouterButton) => {
+            if (btn.path == nowPath) {
+                isPathExist = true;
+                activeName.value = btn.label;
+                return;
+            }
+        });
+        if (!isPathExist) {
+            activeName.value = buttonArray.value[0].label;
+        }
+    }
+});
+</script>
+
+<style lang="scss">
+.router_card {
+    --el-card-border-radius: 8px;
+    --el-card-padding: 0;
+    padding: 0px;
+    padding-bottom: 2px;
+    padding-top: 2px;
+}
+.router_card_button {
+    margin-left: 2px;
+    .el-radio-button__inner {
+        min-width: 100px;
+        height: 100%;
+        border: 0 !important;
+    }
+
+    .el-radio-button__original-radio:checked + .el-radio-button__inner {
+        border-radius: 3px;
+        color: $primary-color;
+        background-color: #ffffff;
+        box-shadow: 0 0 0 2px $primary-color !important;
+    }
+
+    .el-radio-button:first-child .el-radio-button__inner {
+        border-radius: 3px;
+        color: $primary-color;
+        background-color: #ffffff;
+        box-shadow: 0 0 0 2px $primary-color !important;
+    }
+}
+</style>
diff --git a/frontend/src/layout/layout-content.vue b/frontend/src/layout/layout-content.vue
index ca13deabf..15ab34c7a 100644
--- a/frontend/src/layout/layout-content.vue
+++ b/frontend/src/layout/layout-content.vue
@@ -73,12 +73,6 @@ const showBack = computed(() => {
 <style lang="scss">
 @use '@/styles/mixins.scss' as *;
 
-.content-container__header {
-}
-
-.content-container__app {
-}
-
 .content-container__search {
     margin-top: 20px;
 }
diff --git a/frontend/src/typings/global.d.ts b/frontend/src/typings/global.d.ts
index f5a01c803..0b0385691 100644
--- a/frontend/src/typings/global.d.ts
+++ b/frontend/src/typings/global.d.ts
@@ -1,4 +1,3 @@
-// * Menu
 declare namespace Menu {
     interface MenuOptions {
         path: string;
@@ -10,7 +9,6 @@ declare namespace Menu {
     }
 }
 
-// * Vite
 declare type Recordable<T = any> = Record<string, T>;
 
 declare interface ViteEnv {
@@ -23,3 +21,9 @@ declare interface ViteEnv {
     VITE_BUILD_GZIP: boolean;
     VITE_REPORT: boolean;
 }
+
+declare interface RouterButton {
+    label: string;
+    path?: string;
+    name?: string;
+}
diff --git a/frontend/src/views/app-store/index.vue b/frontend/src/views/app-store/index.vue
index b834dc9f8..5c7c0c74f 100644
--- a/frontend/src/views/app-store/index.vue
+++ b/frontend/src/views/app-store/index.vue
@@ -1,15 +1,6 @@
 <template>
     <div>
-        <el-card class="topRouterCard">
-            <el-radio-group v-model="activeName" @change="handleChange">
-                <el-radio-button class="topRouterButton" size="default" label="all">
-                    {{ $t('app.all') }}
-                </el-radio-button>
-                <el-radio-button class="topRouterButton" size="default" label="installed">
-                    {{ $t('app.installed') }}
-                </el-radio-button>
-            </el-radio-group>
-        </el-card>
+        <RouterButton :buttons="buttons" />
         <br />
         <LayoutContent>
             <router-view></router-view>
@@ -19,37 +10,17 @@
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import RouterButton from '@/components/router-button/index.vue';
+import i18n from '@/lang';
 
-const activeName = ref('all');
-
-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') {
-        activeName.value = 'all';
-    }
-    if (path === '/apps/installed') {
-        activeName.value = 'installed';
-    }
-    if (path === '/apps') {
-        routerTo('/apps/all');
-    }
-});
+const buttons = [
+    {
+        label: i18n.global.t('app.all'),
+        path: '/apps/all',
+    },
+    {
+        label: i18n.global.t('app.installed'),
+        path: '/apps/installed',
+    },
+];
 </script>