style: 路由增加可更新提醒

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']

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 {

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,
     },
 });
 

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>