feat: host 模式应用增加提示 (#2792)

backend/app/dto/request/app.go

@@ -31,6 +31,7 @@ type AppContainerConfig struct {
 	AllowPort     bool    `json:"allowPort"`
 	EditCompose   bool    `json:"editCompose"`
 	DockerCompose string  `json:"dockerCompose"`
+	HostMode      bool    `json:"hostMode"`
 }
 
 type AppInstalledSearch struct {

backend/app/dto/response/app.go

@@ -47,9 +47,10 @@ type AppInstalledCheck struct {
 
 type AppDetailDTO struct {
 	model.AppDetail
-	Enable bool        `json:"enable"`
+	Enable   bool        `json:"enable"`
-	Params interface{} `json:"params"`
+	Params   interface{} `json:"params"`
-	Image  string      `json:"image"`
+	Image    string      `json:"image"`
+	HostMode bool        `json:"hostMode"`
 }
 
 type IgnoredApp struct {

backend/app/service/app.go

@@ -222,6 +222,8 @@ func (a AppService) GetAppDetail(appID uint, version, appType string) (response.
 		appDetailDTO.Params = paramMap
 	}
 
+	appDetailDTO.HostMode = isHostModel(appDetailDTO.DockerCompose)
+
 	app, err := appRepo.GetFirst(commonRepo.WithByID(detail.AppId))
 	if err != nil {
 		return appDetailDTO, err
@@ -243,6 +245,7 @@ func (a AppService) GetAppDetailByID(id uint) (*response.AppDetailDTO, error) {
 		return nil, err
 	}
 	res.Params = paramMap
+	res.HostMode = isHostModel(appDetail.DockerCompose)
 	return res, nil
 }
 

backend/app/service/app_install.go

@@ -675,6 +675,7 @@ func (a *AppInstallService) GetParams(id uint) (*response.AppConfig, error) {
 		config.ContainerName = install.ContainerName
 	}
 	res.AppContainerConfig = config
+	res.HostMode = isHostModel(install.DockerCompose)
 	return &res, nil
 }
 

backend/app/service/app_utils.go

@@ -1196,3 +1196,19 @@ func getAppCommonConfig(envs map[string]interface{}) request.AppContainerConfig
 
 	return config
 }
+
+func isHostModel(dockerCompose string) bool {
+	composeMap := make(map[string]interface{})
+	_ = yaml.Unmarshal([]byte(dockerCompose), &composeMap)
+	services, serviceValid := composeMap["services"].(map[string]interface{})
+	if !serviceValid {
+		return false
+	}
+	for _, service := range services {
+		serviceValue := service.(map[string]interface{})
+		if value, ok := serviceValue["network_mode"]; ok && value == "host" {
+			return true
+		}
+	}
+	return false
+}

frontend/src/api/interface/app.ts

@@ -44,6 +44,7 @@ export namespace App {
         params: AppParams;
         dockerCompose: string;
         image: string;
+        hostMode?: boolean;
     }
 
     export interface AppReq extends ReqPage {
@@ -201,6 +202,7 @@ export namespace App {
         containerName: string;
         allowPort: boolean;
         dockerCompose: string;
+        hostMode?: boolean;
     }
 
     export interface IgnoredApp {

frontend/src/global/business.ts

@@ -1,10 +1,5 @@
 import router from '@/routers';
 
-export function canEditPort(appKey: string): boolean {
-    const apps = ['openresty', 'php', 'frpc', 'frps', 'ddns-go', 'home-assistant'];
-    return !apps.includes(appKey);
-}
-
 export function toFolder(folder: string) {
     router.push({ path: '/hosts/files', query: { path: folder } });
 }

frontend/src/lang/modules/en.ts

@@ -1413,6 +1413,8 @@ const message = {
         downloadLogHelper2:
             'The latest {1} logs of {0} application are about to be downloaded. Do you want to continue? ',
         syncAllAppHelper: 'All applications are about to be synchronized. Do you want to continue? ',
+        hostModeHelper:
+            'The current application network mode is host mode. If you need to open the port, please open it manually on the firewall page.',
     },
     website: {
         website: 'Website',

frontend/src/lang/modules/tw.ts

@@ -1338,6 +1338,7 @@ const message = {
         downloadLogHelper1: '即將下載 {0} 套用所有日誌，是否繼續？ ',
         downloadLogHelper2: '即將下載 {0} 應用最近 {1} 條日誌，是否繼續？ ',
         syncAllAppHelper: '即將同步所有應用，是否繼續？ ',
+        hostModeHelper: '目前應用網路模式為 host 模式，如需放開端口，請在防火牆頁面手動放開',
     },
     website: {
         website: '網站',

frontend/src/lang/modules/zh.ts

@@ -1338,6 +1338,7 @@ const message = {
         downloadLogHelper1: '即将下载 {0} 应用所有日志，是否继续？',
         downloadLogHelper2: '即将下载 {0} 应用最近 {1} 条日志，是否继续？',
         syncAllAppHelper: '即将同步所有应用，是否继续？',
+        hostModeHelper: '当前应用网络模式为 host 模式，如需放开端口，请在防火墙页面手动放开',
     },
     website: {
         website: '网站',

frontend/src/views/app-store/detail/install/index.vue

@@ -16,7 +16,14 @@
                     class="common-prompt"
                     :closable="false"
                     type="error"
-                    v-if="canEditPort(installData.app.key)"
+                    v-if="!isHostMode"
+                />
+                <el-alert
+                    :title="$t('app.hostModeHelper')"
+                    class="common-prompt"
+                    :closable="false"
+                    type="warning"
+                    v-else
                 />
                 <el-form
                     @submit.prevent
@@ -92,7 +99,7 @@
                                 {{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
                             </span>
                         </el-form-item>
-                        <el-form-item prop="allowPort" v-if="canEditPort(installData.app.key)">
+                        <el-form-item prop="allowPort" v-if="!isHostMode">
                             <el-checkbox v-model="req.allowPort" :label="$t('app.allowPort')" size="large" />
                             <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
                         </el-form-item>
@@ -135,7 +142,6 @@
 import { App } from '@/api/interface/app';
 import { GetApp, GetAppDetail, InstallApp } from '@/api/modules/app';
 import { Rules, checkNumberRange } from '@/global/form-rules';
-import { canEditPort } from '@/global/business';
 import { FormInstance, FormRules } from 'element-plus';
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -202,6 +208,7 @@ const handleClose = () => {
     }
 };
 const paramKey = ref(1);
+const isHostMode = ref(false);
 
 const changeUnit = () => {
     if (req.memoryUnit == 'M') {
@@ -216,6 +223,7 @@ const resetForm = () => {
         paramForm.value.clearValidate();
         paramForm.value.resetFields();
     }
+    isHostMode.value = false;
     Object.assign(req, initData());
 };
 
@@ -245,6 +253,8 @@ const getAppDetail = async (version: string) => {
         const res = await GetAppDetail(installData.value.app.id, version, 'app');
         req.appDetailId = res.data.id;
         req.dockerCompose = res.data.dockerCompose;
+        isHostMode.value = res.data.hostMode;
+        console.log(res.data);
         installData.value.params = res.data.params;
         paramKey.value++;
     } catch (error) {
@@ -269,7 +279,7 @@ const submit = async (formEl: FormInstance | undefined) => {
         if (req.memoryLimit < 0) {
             req.memoryLimit = 0;
         }
-        if (canEditPort(installData.value.app.key) && !req.allowPort) {
+        if (!isHostMode.value && !req.allowPort) {
             ElMessageBox.confirm(i18n.global.t('app.installWarn'), i18n.global.t('app.checkTitle'), {
                 confirmButtonText: i18n.global.t('commons.button.confirm'),
                 cancelButtonText: i18n.global.t('commons.button.cancel'),

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

@@ -75,7 +75,7 @@
                             </el-input>
                             <span class="input-help">{{ $t('container.limitHelper') }}</span>
                         </el-form-item>
-                        <el-form-item prop="allowPort" v-if="canEditPort(paramData.app.key)">
+                        <el-form-item prop="allowPort" v-if="!paramModel.isHostMode">
                             <el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
                             <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
                         </el-form-item>
@@ -122,7 +122,6 @@ import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
-import { canEditPort } from '@/global/business';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -215,6 +214,7 @@ const get = async () => {
         paramModel.value.containerName = res.data.containerName;
         paramModel.value.advanced = false;
         paramModel.value.dockerCompose = res.data.dockerCompose;
+        paramModel.value.isHostMode = res.data.hostMode;
     } catch (error) {
     } finally {
         loading.value = false;

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

@@ -259,7 +259,7 @@
                             </el-input>
                             <span class="input-help">{{ $t('container.limitHelper') }}</span>
                         </el-form-item>
-                        <el-form-item prop="allowPort">
+                        <el-form-item prop="allowPort" v-if="website.type === 'deployment'">
                             <el-checkbox
                                 v-model="website.appinstall.allowPort"
                                 :label="$t('app.allowPort')"