feat: 创建反代网站支持直接选择应用 (#6044)

agent/app/repo/app_install.go

@@ -20,6 +20,7 @@ type IAppInstallRepo interface {
 	WithDetailIdNotIn(detailIds []uint) DBOption
 	WithAppId(appId uint) DBOption
 	WithAppIdsIn(appIds []uint) DBOption
+	WithAppIdsNotIn(appIds []uint) DBOption
 	WithStatus(status string) DBOption
 	WithServiceName(serviceName string) DBOption
 	WithContainerName(containerName string) DBOption
@@ -72,6 +73,12 @@ func (a *AppInstallRepo) WithAppIdsIn(appIds []uint) DBOption {
 	}
 }
 
+func (a *AppInstallRepo) WithAppIdsNotIn(appIds []uint) DBOption {
+	return func(g *gorm.DB) *gorm.DB {
+		return g.Where("app_id not in (?)", appIds)
+	}
+}
+
 func (a *AppInstallRepo) WithStatus(status string) DBOption {
 	return func(g *gorm.DB) *gorm.DB {
 		return g.Where("status = ?", status)

agent/app/service/app_install.go

@@ -89,6 +89,7 @@ func (a *AppInstallService) Page(req request.AppInstalledSearch) (int64, []respo
 	if req.Name != "" {
 		opts = append(opts, commonRepo.WithLikeName(req.Name))
 	}
+
 	if len(req.Tags) != 0 {
 		tags, err := tagRepo.GetByKeys(req.Tags)
 		if err != nil {
@@ -202,18 +203,31 @@ func (a *AppInstallService) SearchForWebsite(req request.AppInstalledSearch) ([]
 		opts     []repo.DBOption
 	)
 	if req.Type != "" {
-		apps, err := appRepo.GetBy(appRepo.WithType(req.Type))
-		if err != nil {
-			return nil, err
+		if req.Type == "proxy" {
+			phpApps, _ := appRepo.GetBy(appRepo.WithType("php"))
+			var ids []uint
+			for _, app := range phpApps {
+				ids = append(ids, app.ID)
+			}
+			runtimeApps, _ := appRepo.GetBy(appRepo.WithType("runtime"))
+			for _, app := range runtimeApps {
+				ids = append(ids, app.ID)
+			}
+			opts = append(opts, appInstallRepo.WithAppIdsNotIn(ids))
+		} else {
+			apps, err := appRepo.GetBy(appRepo.WithType(req.Type))
+			if err != nil {
+				return nil, err
+			}
+			var ids []uint
+			for _, app := range apps {
+				ids = append(ids, app.ID)
+			}
+			if req.Unused {
+				opts = append(opts, appInstallRepo.WithIdNotInWebsite())
+			}
+			opts = append(opts, appInstallRepo.WithAppIdsIn(ids))
 		}
-		var ids []uint
-		for _, app := range apps {
-			ids = append(ids, app.ID)
-		}
-		if req.Unused {
-			opts = append(opts, appInstallRepo.WithIdNotInWebsite())
-		}
-		opts = append(opts, appInstallRepo.WithAppIdsIn(ids))
 		installs, err = appInstallRepo.ListBy(opts...)
 		if err != nil {
 			return nil, err

frontend/src/api/interface/app.ts

@@ -121,6 +121,7 @@ export namespace App {
         icon: string;
         canUpdate: boolean;
         path: string;
+        httpPort?: number;
         app: App;
     }
 

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

@@ -316,17 +316,39 @@
                     </el-col>
                 </el-row>
 
-                <el-form-item v-if="website.type === 'proxy'" :label="$t('website.proxyAddress')" prop="proxyAddress">
-                    <el-input v-model="website.proxyAddress" :placeholder="$t('website.proxyHelper')">
-                        <template #prepend>
-                            <el-select v-model="website.proxyProtocol" class="pre-select">
-                                <el-option label="http" value="http://" />
-                                <el-option label="https" value="https://" />
-                                <el-option :label="$t('website.other')" value="" />
+                <el-row :gutter="20" v-if="website.type === 'proxy'">
+                    <el-col :span="12">
+                        <el-form-item :label="$t('website.proxyAddress')" prop="proxyAddress">
+                            <el-input v-model="website.proxyAddress" :placeholder="$t('website.proxyHelper')">
+                                <template #prepend>
+                                    <el-select v-model="website.proxyProtocol" class="pre-select">
+                                        <el-option label="http" value="http://" />
+                                        <el-option label="https" value="https://" />
+                                        <el-option :label="$t('website.other')" value="" />
+                                    </el-select>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('app.app')">
+                            <el-select
+                                v-model="website.appInstallId"
+                                class="p-w-200"
+                                filterable
+                                @change="changeInstall"
+                            >
+                                <el-option
+                                    v-for="(appInstall, index) in appInstalls"
+                                    :key="index"
+                                    :label="appInstall.name"
+                                    :value="appInstall.id"
+                                ></el-option>
                             </el-select>
-                        </template>
-                    </el-input>
-                </el-form-item>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
                 <el-form-item :label="$t('website.remark')" prop="remark">
                     <el-input type="textarea" :rows="3" clearable v-model="website.remark" />
                 </el-form-item>
@@ -479,6 +501,10 @@ const changeType = (type: string) => {
         case 'runtime':
             getRuntimes();
             break;
+        case 'proxy':
+            website.value.proxyAddress = '';
+            searchAppInstalled('proxy');
+            break;
         default:
             website.value.appInstallId = undefined;
             break;
@@ -487,15 +513,25 @@ const changeType = (type: string) => {
     versionExist.value = true;
 };
 
-const searchAppInstalled = () => {
-    GetAppInstalled({ type: 'website', unused: true, all: true, page: 1, pageSize: 100 }).then((res) => {
+const searchAppInstalled = (appType: string) => {
+    GetAppInstalled({ type: appType, unused: true, all: true, page: 1, pageSize: 100 }).then((res) => {
         appInstalls.value = res.data;
-        if (res.data && res.data.length > 0) {
+        website.value.appInstallId = undefined;
+        if (appType == 'website' && res.data && res.data.length > 0) {
             website.value.appInstallId = res.data[0].id;
         }
     });
 };
 
+const changeInstall = () => {
+    appInstalls.value.forEach((app) => {
+        if (app.id === website.value.appInstallId) {
+            website.value.proxyProtocol = 'http://';
+            website.value.proxyAddress = '127.0.0.1:' + app.httpPort;
+        }
+    });
+};
+
 const searchApp = () => {
     SearchApp(appReq).then((res) => {
         apps.value = res.data.items;
@@ -594,14 +630,14 @@ const acceptParams = async (installPath: string) => {
     website.value.type = 'deployment';
     runtimeResource.value = 'appstore';
 
-    searchAppInstalled();
+    searchAppInstalled('website');
 
     open.value = true;
 };
 
 const changeAppType = (type: string) => {
     if (type === 'installed') {
-        searchAppInstalled();
+        searchAppInstalled('website');
     } else {
         searchApp();
     }