feat: Website list supports filtering by type. (#8414)

Refs #6409

Author: zhengkunwang223

agent/app/dto/request/website.go

@@ -10,6 +10,7 @@ type WebsiteSearch struct {
 	OrderBy        string `json:"orderBy" validate:"required,oneof=primary_domain type status createdAt expire_date created_at"`
 	Order          string `json:"order" validate:"required,oneof=null ascending descending"`
 	WebsiteGroupID uint   `json:"websiteGroupId"`
+	Type           string `json:"type"`
 }
 
 type WebsiteCreate struct {

agent/app/repo/website.go

@@ -18,6 +18,7 @@ type IWebsiteRepo interface {
 	WithDomainLike(domain string) DBOption
 	WithRuntimeID(runtimeID uint) DBOption
 	WithParentID(websiteID uint) DBOption
+	WithType(websiteType string) DBOption
 
 	Page(page, size int, opts ...DBOption) (int64, []model.Website, error)
 	List(opts ...DBOption) ([]model.Website, error)
@@ -93,6 +94,12 @@ func (w *WebsiteRepo) WithDefaultServer() DBOption {
 	}
 }
 
+func (w *WebsiteRepo) WithType(websiteType string) DBOption {
+	return func(db *gorm.DB) *gorm.DB {
+		return db.Where("type = ?", websiteType)
+	}
+}
+
 func (w *WebsiteRepo) Page(page, size int, opts ...DBOption) (int64, []model.Website, error) {
 	var websites []model.Website
 	db := getDb(opts...).Model(&model.Website{})

agent/app/service/website.go

@@ -150,6 +150,9 @@ func (w WebsiteService) PageWebsite(req request.WebsiteSearch) (int64, []respons
 	if req.WebsiteGroupID != 0 {
 		opts = append(opts, websiteRepo.WithGroupID(req.WebsiteGroupID))
 	}
+	if req.Type != "" {
+		opts = append(opts, websiteRepo.WithType(req.Type))
+	}
 	total, websites, err := websiteRepo.Page(req.Page, req.PageSize, opts...)
 	if err != nil {
 		return 0, nil, err

frontend/src/global/mimetype.ts

@@ -367,3 +367,27 @@ export const StatusStrategy = [
         value: 'backup',
     },
 ];
+
+export const WebsiteTypes = [
+    {
+        label: i18n.global.t('website.deployment'),
+        value: 'deployment',
+    },
+    {
+        label: i18n.global.t('runtime.runtime'),
+        value: 'runtime',
+    },
+
+    {
+        label: i18n.global.t('website.proxy'),
+        value: 'proxy',
+    },
+    {
+        label: i18n.global.t('website.static'),
+        value: 'static',
+    },
+    {
+        label: i18n.global.t('website.subsite'),
+        value: 'subsite',
+    },
+];

frontend/src/views/website/website/create/index.vue

@@ -2,32 +2,7 @@
     <DrawerPro v-model="open" :header="$t('website.create')" size="large" @close="handleClose">
         <template #buttons>
             <span class="drawer-header-button">
-                <template
-                    v-for="item in [
-                        {
-                            label: i18n.global.t('website.deployment'),
-                            value: 'deployment',
-                        },
-                        {
-                            label: i18n.global.t('runtime.runtime'),
-                            value: 'runtime',
-                        },
-
-                        {
-                            label: i18n.global.t('website.proxy'),
-                            value: 'proxy',
-                        },
-                        {
-                            label: i18n.global.t('website.static'),
-                            value: 'static',
-                        },
-                        {
-                            label: i18n.global.t('website.subsite'),
-                            value: 'subsite',
-                        },
-                    ]"
-                    :key="item.value"
-                >
+                <template v-for="item in WebsiteTypes" :key="item.value">
                     <el-button
                         :class="website.type === item.value ? 'active-button' : ''"
                         @click="changeType(item.value)"
@@ -572,6 +547,7 @@ import { dateFormatSimple, getProvider, getAccountName } from '@/utils/util';
 import { Website } from '@/api/interface/website';
 import DomainCreate from '@/views/website/website/domain-create/index.vue';
 import { getPathByType } from '@/api/modules/files';
+import { WebsiteTypes } from '@/global/mimetype';
 
 const websiteForm = ref<FormInstance>();
 

frontend/src/views/website/website/index.vue

@@ -33,6 +33,16 @@
                 </el-button>
             </template>
             <template v-if="!openNginxConfig && nginxIsExist" #rightToolBar>
+                <el-select class="p-w-200" v-model="req.type" @change="search()" :disabled="nginxStatus != 'Running'">
+                    <template #prefix>{{ $t('commons.table.type') }}</template>
+                    <el-option :label="$t('commons.table.all')" :value="''"></el-option>
+                    <el-option
+                        v-for="item in WebsiteTypes"
+                        :label="item.label"
+                        :value="item.value"
+                        :key="item.value"
+                    ></el-option>
+                </el-select>
                 <el-select
                     v-model="req.websiteGroupId"
                     @change="search()"
@@ -265,6 +275,7 @@ import { useI18n } from 'vue-i18n';
 import { getAgentGroupList } from '@/api/modules/group';
 import { Group } from '@/api/interface/group';
 import { GlobalStore } from '@/store';
+import { WebsiteTypes } from '@/global/mimetype';
 const globalStore = GlobalStore();
 
 const shortcuts = [
@@ -317,6 +328,7 @@ let req = reactive({
     orderBy: 'createdAt',
     order: 'null',
     websiteGroupId: 0,
+    type: '',
 });
 const mobile = computed(() => {
     return globalStore.isMobile();