From 8e00830d7a25f9e372e672f0849dd241874d3cad Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Thu, 9 Feb 2023 17:18:24 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B7=AF=E7=94=B1=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=8F=AF=E6=9B=B4=E6=96=B0=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                        |  1 +
 frontend/src/api/interface/app.ts               |  2 +-
 frontend/src/components/router-button/index.vue |  7 ++++++-
 frontend/src/views/app-store/index.vue          | 14 +++++++++++++-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 18da02c96..139847b66 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
diff --git a/frontend/src/api/interface/app.ts b/frontend/src/api/interface/app.ts
index 2719f5c24..843328c78 100644
--- a/frontend/src/api/interface/app.ts
+++ b/frontend/src/api/interface/app.ts
@@ -68,7 +68,7 @@ export namespace App {
     export interface AppInstallSearch extends ReqPage {
         name?: string;
         tags?: string[];
-        updated?: boolean;
+        update?: boolean;
         unused?: boolean;
     }
     export interface ChangePort {
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index f9dcbfef8..eafd56b9c 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -7,7 +7,11 @@
                 v-for="(button, index) in buttonArray"
                 size="large"
                 :key="index"
-            ></el-radio-button>
+            >
+                <el-badge :value="button.count" class="item" v-if="button.count > 0">
+                    <span>{{ button.label }}</span>
+                </el-badge>
+            </el-radio-button>
         </el-radio-group>
     </el-card>
 </template>
@@ -22,6 +26,7 @@ const props = defineProps({
     buttons: {
         type: Array,
         required: true,
+        count: Number,
     },
 });
 
diff --git a/frontend/src/views/app-store/index.vue b/frontend/src/views/app-store/index.vue
index 9e046cb79..119b852ed 100644
--- a/frontend/src/views/app-store/index.vue
+++ b/frontend/src/views/app-store/index.vue
@@ -1,6 +1,8 @@
 <template>
     <div>
-        <RouterButton :buttons="buttons" />
+        <div v-if="showButton">
+            <RouterButton :buttons="buttons" />
+        </div>
         <LayoutContent>
             <router-view></router-view>
         </LayoutContent>
@@ -11,6 +13,9 @@
 import LayoutContent from '@/layout/layout-content.vue';
 import RouterButton from '@/components/router-button/index.vue';
 import i18n from '@/lang';
+import { onMounted, ref } from 'vue';
+import { SearchAppInstalled } from '@/api/modules/app';
+let showButton = ref(false);
 const buttons = [
     {
         label: i18n.global.t('app.all'),
@@ -23,6 +28,13 @@ const buttons = [
     {
         label: i18n.global.t('app.canUpdate'),
         path: '/apps/update',
+        count: 0,
     },
 ];
+onMounted(() => {
+    SearchAppInstalled({ update: true, page: 1, pageSize: 100 }).then((res) => {
+        buttons[2].count = res.data.items.length;
+        showButton.value = true;
+    });
+});
 </script>