fix: fix issue with build failed (#8753)

frontend/src/views/app-store/apps/index.vue

@@ -1,56 +1,7 @@
 <template>
     <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
         <template #search>
-            <el-row :gutter="5">
-                <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                    <el-button
-                        class="tag-button"
-                        :class="activeTag === 'all' ? '' : 'no-active'"
-                        @click="changeTag('all')"
-                        :type="activeTag === 'all' ? 'primary' : ''"
-                        :plain="activeTag !== 'all'"
-                    >
-                        {{ $t('app.all') }}
-                    </el-button>
-                    <div v-for="item in tags.slice(0, 7)" :key="item.key" class="inline">
-                        <el-button
-                            class="tag-button"
-                            :class="activeTag === item.key ? '' : 'no-active'"
-                            @click="changeTag(item.key)"
-                            :type="activeTag === item.key ? 'primary' : ''"
-                            :plain="activeTag !== item.key"
-                        >
-                            {{ item.name }}
-                        </el-button>
-                    </div>
-                    <div class="inline">
-                        <el-dropdown v-if="tags.length > 7">
-                            <el-button
-                                class="tag-button"
-                                :type="moreTag !== '' ? 'primary' : ''"
-                                :class="moreTag !== '' ? '' : 'no-active'"
-                            >
-                                {{ moreTag == '' ? $t('tabs.more') : getTagValue(moreTag) }}
-                                <el-icon class="el-icon--right">
-                                    <arrow-down />
-                                </el-icon>
-                            </el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item
-                                        v-for="item in tags.slice(7)"
-                                        @click="changeTag(item.key)"
-                                        :key="item.key"
-                                    >
-                                        {{ item.name }}
-                                    </el-dropdown-item>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
-                    </div>
-                </el-col>
-                <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4"></el-col>
-            </el-row>
+            <Tags @change="changeTag" />
         </template>
         <template #leftToolBar>
             <el-button @click="sync" type="primary" plain :disabled="syncing">
@@ -172,14 +123,7 @@
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
 import { onMounted, reactive, ref, computed } from 'vue';
-import {
-    getAppTags,
-    searchApp,
-    syncApp,
-    syncCutomAppStore,
-    syncLocalApp,
-    getCurrentNodeCustomAppConfig,
-} from '@/api/modules/app';
+import { searchApp, syncApp, syncCutomAppStore, syncLocalApp, getCurrentNodeCustomAppConfig } from '@/api/modules/app';
 import Install from '../detail/install/index.vue';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
@@ -189,6 +133,7 @@ import Detail from '../detail/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
 import { storeToRefs } from 'pinia';
 import bus from '@/global/bus';
+import Tags from '@/views/app-store/components/tag.vue';
 
 const globalStore = GlobalStore();
 const { isProductPro } = storeToRefs(globalStore);
@@ -214,15 +159,12 @@ const req = reactive({
 });
 
 const apps = ref<App.AppDTO[]>([]);
-const tags = ref<App.Tag[]>([]);
 const loading = ref(false);
-const activeTag = ref('all');
 const showDetail = ref(false);
 const canUpdate = ref(false);
 const syncing = ref(false);
 const installRef = ref();
 const installKey = ref('');
-const moreTag = ref('');
 const mainHeight = ref(0);
 const detailRef = ref();
 const taskLogRef = ref();
@@ -257,9 +199,6 @@ const search = async (req: App.AppReq) => {
         .finally(() => {
             loading.value = false;
         });
-    getAppTags().then((res) => {
-        tags.value = res.data;
-    });
 };
 
 const openInstall = (app: App.App) => {
@@ -332,26 +271,12 @@ const syncLocal = () => {
 
 const changeTag = (key: string) => {
     req.tags = [];
-    activeTag.value = key;
     if (key !== 'all') {
         req.tags = [key];
     }
-    const index = tags.value.findIndex((tag) => tag.key === key);
-    if (index > 6) {
-        moreTag.value = key;
-    } else {
-        moreTag.value = '';
-    }
     search(req);
 };
 
-const getTagValue = (key: string) => {
-    const tag = tags.value.find((tag) => tag.key === key);
-    if (tag) {
-        return tag.name;
-    }
-};
-
 const searchByName = () => {
     search(req);
 };

frontend/src/views/app-store/components/tag.vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <el-button
+            class="tag-button"
+            :class="activeTag === 'all' ? '' : 'no-active'"
+            @click="changeTag('all')"
+            :type="activeTag === 'all' ? 'primary' : ''"
+            :plain="activeTag !== 'all'"
+        >
+            {{ $t('app.all') }}
+        </el-button>
+        <div v-for="item in tags.slice(0, 7)" :key="item.key" class="inline">
+            <el-button
+                class="tag-button"
+                :class="activeTag === item.key ? '' : 'no-active'"
+                @click="changeTag(item.key)"
+                :type="activeTag === item.key ? 'primary' : ''"
+                :plain="activeTag !== item.key"
+            >
+                {{ item.name }}
+            </el-button>
+        </div>
+        <div class="inline">
+            <el-dropdown>
+                <el-button
+                    class="tag-button"
+                    :type="moreTag !== '' ? 'primary' : ''"
+                    :class="moreTag !== '' ? '' : 'no-active'"
+                >
+                    {{ moreTag == '' ? $t('tabs.more') : getTagValue(moreTag) }}
+                    <el-icon class="el-icon--right">
+                        <arrow-down />
+                    </el-icon>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item v-for="item in tags.slice(7)" @click="changeTag(item.key)" :key="item.key">
+                            {{ item.name }}
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { getAppTags } from '@/api/modules/app';
+import { App } from '@/api/interface/app';
+
+const props = defineProps({
+    hideKey: {
+        type: String,
+        default: '',
+    },
+});
+
+const activeTag = ref('all');
+const tags = ref<App.Tag[]>([]);
+const moreTag = ref('');
+const emit = defineEmits(['change']);
+
+const getTagValue = (key: string) => {
+    const tag = tags.value.find((tag) => tag.key === key);
+    if (tag) {
+        return tag.name;
+    }
+};
+
+const changeTag = (key: string) => {
+    activeTag.value = key;
+    emit('change', key);
+    const index = tags.value.findIndex((tag) => tag.key === key);
+    if (index > 6) {
+        moreTag.value = key;
+    } else {
+        moreTag.value = '';
+    }
+};
+
+const getTags = async () => {
+    await getAppTags().then((res) => {
+        for (let i = 0; i < res.data.length; i++) {
+            if (res.data[i].key === props.hideKey) {
+                res.data.splice(i, 1);
+                break;
+            }
+        }
+        tags.value = res.data;
+    });
+};
+
+onMounted(() => {
+    getTags();
+});
+</script>

frontend/src/views/app-store/installed/index.vue

@@ -1,53 +1,7 @@
 <template>
     <LayoutContent v-loading="loading || syncLoading" :title="activeName">
         <template #search>
-            <div>
-                <el-button
-                    class="tag-button"
-                    :class="activeTag === 'all' ? '' : 'no-active'"
-                    @click="changeTag('all')"
-                    :type="activeTag === 'all' ? 'primary' : ''"
-                    :plain="activeTag !== 'all'"
-                >
-                    {{ $t('app.all') }}
-                </el-button>
-                <div v-for="item in tags.slice(0, 7)" :key="item.key" class="inline">
-                    <el-button
-                        class="tag-button"
-                        :class="activeTag === item.key ? '' : 'no-active'"
-                        @click="changeTag(item.key)"
-                        :type="activeTag === item.key ? 'primary' : ''"
-                        :plain="activeTag !== item.key"
-                    >
-                        {{ item.name }}
-                    </el-button>
-                </div>
-                <div class="inline">
-                    <el-dropdown>
-                        <el-button
-                            class="tag-button"
-                            :type="moreTag !== '' ? 'primary' : ''"
-                            :class="moreTag !== '' ? '' : 'no-active'"
-                        >
-                            {{ moreTag == '' ? $t('tabs.more') : getTagValue(moreTag) }}
-                            <el-icon class="el-icon--right">
-                                <arrow-down />
-                            </el-icon>
-                        </el-button>
-                        <template #dropdown>
-                            <el-dropdown-menu>
-                                <el-dropdown-item
-                                    v-for="item in tags.slice(7)"
-                                    @click="changeTag(item.key)"
-                                    :key="item.key"
-                                >
-                                    {{ item.name }}
-                                </el-dropdown-item>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
-                </div>
-            </div>
+            <Tags @change="changeTag" hideKey="Runtime" />
         </template>
         <template #leftToolBar>
             <el-button @click="sync" type="primary" plain v-if="mode === 'installed' && data != null">
@@ -432,13 +386,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-    searchAppInstalled,
-    installedOp,
-    syncInstalledApp,
-    appInstalledDeleteCheck,
-    getAppTags,
-} from '@/api/modules/app';
+import { searchAppInstalled, installedOp, syncInstalledApp, appInstalledDeleteCheck } from '@/api/modules/app';
 import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElMessageBox } from 'element-plus';
@@ -461,6 +409,7 @@ import TaskLog from '@/components/log/task/index.vue';
 import Detail from '@/views/app-store/detail/index.vue';
 import IgnoreApp from '@/views/app-store/installed/ignore/create/index.vue';
 import { getAgentSettingByKey } from '@/api/modules/setting';
+import Tags from '@/views/app-store/components/tag.vue';
 
 const data = ref<any>();
 const loading = ref(false);
@@ -489,8 +438,6 @@ const ignoreRef = ref();
 const dialogPortJumpRef = ref();
 const composeLogRef = ref();
 const taskLogRef = ref();
-const tags = ref<App.Tag[]>([]);
-const activeTag = ref('all');
 const searchReq = reactive({
     page: 1,
     pageSize: 20,
@@ -502,7 +449,6 @@ const searchReq = reactive({
 const router = useRouter();
 const activeName = ref(i18n.global.t('app.installed'));
 const mode = ref('installed');
-const moreTag = ref('');
 const defaultLink = ref('');
 const detailRef = ref();
 const ignoreAppRef = ref();
@@ -544,35 +490,18 @@ const sync = () => {
 
 const changeTag = (key: string) => {
     searchReq.tags = [];
-    activeTag.value = key;
     if (key !== 'all') {
         searchReq.tags = [key];
     }
-    const index = tags.value.findIndex((tag) => tag.key === key);
-    if (index > 6) {
-        moreTag.value = key;
-    } else {
-        moreTag.value = '';
-    }
     search();
 };
 
-const getTagValue = (key: string) => {
-    const tag = tags.value.find((tag) => tag.key === key);
-    if (tag) {
-        return tag.name;
-    }
-};
-
 const search = async () => {
     searchReq.page = paginationConfig.currentPage;
     searchReq.pageSize = paginationConfig.pageSize;
     const res = await searchAppInstalled(searchReq);
     data.value = res.data.items;
     paginationConfig.total = res.data.total;
-    getAppTags().then((res) => {
-        tags.value = res.data;
-    });
 };
 
 const openOperate = (row: any, op: string) => {

frontend/src/views/app-store/setting/index.vue

@@ -51,10 +51,19 @@
 import { getCurrentNodeCustomAppConfig } from '@/api/modules/app';
 import { getAppStoreConfig, updateAppStoreConfig } from '@/api/modules/setting';
 import { FormRules } from 'element-plus';
-import CustomSetting from '@/xpack/views/appstore/index.vue';
 import { GlobalStore } from '@/store';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
+import { defineAsyncComponent } from 'vue';
+
+const CustomSetting = defineAsyncComponent(async () => {
+    const modules = import.meta.glob('@/xpack/views/appstore/index.vue');
+    const loader = modules['/src/xpack/views/appstore/index.vue'];
+    if (loader) {
+        return ((await loader()) as any).default;
+    }
+    return { template: '<div></div>' };
+});
 
 const globalStore = GlobalStore();
 const rules = ref<FormRules>({});