From f8f47b51e9a009e6664f48e3802a62dff51be254 Mon Sep 17 00:00:00 2001
From: CityFun <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 11 Aug 2025 18:16:44 +0800
Subject: [PATCH] feat: Configure restart policy for application installation
 support (#9953)

Refs https://github.com/1Panel-dev/1Panel/issues/9895
---
 agent/app/dto/request/app.go                  |   1 +
 agent/app/service/app_install.go              |   1 +
 agent/app/service/app_utils.go                |  26 +-
 agent/utils/docker/compose.go                 |  64 +--
 frontend/src/api/interface/app.ts             |   1 +
 frontend/src/api/modules/app.ts               |   9 +-
 .../src/views/app-store/detail/form/index.vue | 400 ++++++++++++++++++
 .../views/app-store/detail/install/index.vue  | 311 +++-----------
 .../app-store/installed/detail/index.vue      |  67 +--
 .../app-store/installed/ignore/index.vue      |   1 -
 .../src/views/database/mysql/check/index.vue  |   1 -
 .../views/website/website/create/index.vue    | 134 +-----
 12 files changed, 550 insertions(+), 466 deletions(-)
 create mode 100644 frontend/src/views/app-store/detail/form/index.vue

diff --git a/agent/app/dto/request/app.go b/agent/app/dto/request/app.go
index 997c8956e..3fd50b060 100644
--- a/agent/app/dto/request/app.go
+++ b/agent/app/dto/request/app.go
@@ -40,6 +40,7 @@ type AppContainerConfig struct {
 	WebUI         string  `json:"webUI"`
 	Type          string  `json:"type"`
 	SpecifyIP     string  `json:"specifyIP"`
+	RestartPolicy string  `json:"restartPolicy" validate:"omitempty,oneof=always unless-stopped no on-failure"`
 }
 
 type AppInstalledSearch struct {
diff --git a/agent/app/service/app_install.go b/agent/app/service/app_install.go
index 721359436..f5e57fa3b 100644
--- a/agent/app/service/app_install.go
+++ b/agent/app/service/app_install.go
@@ -788,6 +788,7 @@ func (a *AppInstallService) GetParams(id uint) (*response.AppConfig, error) {
 	}
 	res.AppContainerConfig = config
 	res.HostMode = isHostModel(install.DockerCompose)
+	res.RestartPolicy = getRestartPolicy(install.DockerCompose)
 	res.WebUI = install.WebUI
 	res.Type = install.App.Type
 	return &res, nil
diff --git a/agent/app/service/app_utils.go b/agent/app/service/app_utils.go
index 8e236b5fa..868cade0d 100644
--- a/agent/app/service/app_utils.go
+++ b/agent/app/service/app_utils.go
@@ -357,7 +357,7 @@ func deleteAppInstall(deleteReq request.AppInstallDelete) error {
 				if err != nil {
 					return err
 				}
-				images, err := composeV2.GetDockerComposeImagesV2(content, []byte(install.DockerCompose))
+				images, err := composeV2.GetImagesFromDockerCompose(content, []byte(install.DockerCompose))
 				if err != nil {
 					return err
 				}
@@ -540,6 +540,9 @@ func handleUpgradeCompose(install model.AppInstall, detail model.AppDetail) (map
 	if oldServiceValue["deploy"] != nil {
 		serviceValue["deploy"] = oldServiceValue["deploy"]
 	}
+	if oldServiceValue["restart"] != nil {
+		serviceValue["restart"] = oldServiceValue["restart"]
+	}
 	servicesMap[install.ServiceName] = serviceValue
 	composeMap["services"] = servicesMap
 	return composeMap, nil
@@ -659,7 +662,7 @@ func upgradeInstall(req request.AppInstallUpgrade) error {
 			if req.DockerCompose != "" {
 				composeContent = []byte(req.DockerCompose)
 			}
-			images, err := composeV2.GetDockerComposeImagesV2(content, composeContent)
+			images, err := composeV2.GetImagesFromDockerCompose(content, composeContent)
 			if err != nil {
 				return err
 			}
@@ -1658,6 +1661,14 @@ func addDockerComposeCommonParam(composeMap map[string]interface{}, serviceName
 	deploy["resources"] = resource
 	serviceValue["deploy"] = deploy
 
+	if req.RestartPolicy != "" {
+		if req.RestartPolicy == "on-failure" {
+			serviceValue["restart"] = "on-failure:5"
+		} else {
+			serviceValue["restart"] = req.RestartPolicy
+		}
+	}
+
 	ports, ok := serviceValue["ports"].([]interface{})
 	if ok {
 		for i, port := range ports {
@@ -1760,6 +1771,17 @@ func isHostModel(dockerCompose string) bool {
 	return false
 }
 
+func getRestartPolicy(yml string) string {
+	var project docker.ComposeProject
+	if err := yaml.Unmarshal([]byte(yml), &project); err != nil {
+		return ""
+	}
+	for _, service := range project.Services {
+		return service.Restart
+	}
+	return ""
+}
+
 func getMajorVersion(version string) string {
 	parts := strings.Split(version, ".")
 	if len(parts) >= 2 {
diff --git a/agent/utils/docker/compose.go b/agent/utils/docker/compose.go
index 8a628a758..1e68c738a 100644
--- a/agent/utils/docker/compose.go
+++ b/agent/utils/docker/compose.go
@@ -58,6 +58,7 @@ type Service struct {
 	Image       string      `yaml:"image"`
 	Environment Environment `yaml:"environment"`
 	Volumes     []string    `json:"volumes"`
+	Restart     string      `json:"restart"`
 }
 
 type Environment struct {
@@ -92,69 +93,6 @@ func (e *Environment) UnmarshalYAML(value *yaml.Node) error {
 	return nil
 }
 
-func replaceEnvVariables(input string, envVars map[string]string) string {
-	for key, value := range envVars {
-		placeholder := fmt.Sprintf("${%s}", key)
-		input = strings.ReplaceAll(input, placeholder, value)
-	}
-	return input
-}
-func GetDockerComposeImagesV2(env, yml []byte) ([]string, error) {
-	var (
-		compose ComposeProject
-		err     error
-		images  []string
-	)
-	err = yaml.Unmarshal(yml, &compose)
-	if err != nil {
-		return nil, err
-	}
-	envMap, err := godotenv.UnmarshalBytes(env)
-	if err != nil {
-		return nil, err
-	}
-	for _, service := range compose.Services {
-		image := replaceEnvVariables(service.Image, envMap)
-		images = append(images, image)
-	}
-	return images, nil
-}
-
-func GetDockerComposeImages(projectName string, env, yml []byte) ([]string, error) {
-	var (
-		configFiles []types.ConfigFile
-		images      []string
-		imagesMap   = make(map[string]struct{})
-	)
-	configFiles = append(configFiles, types.ConfigFile{
-		Filename: "docker-compose.yml",
-		Content:  yml},
-	)
-	envMap, err := godotenv.UnmarshalBytes(env)
-	if err != nil {
-		return nil, err
-	}
-	details := types.ConfigDetails{
-		ConfigFiles: configFiles,
-		Environment: envMap,
-	}
-
-	project, err := loader.LoadWithContext(context.Background(), details, func(options *loader.Options) {
-		options.SetProjectName(projectName, true)
-		options.ResolvePaths = true
-	})
-	if err != nil {
-		return nil, err
-	}
-	for _, service := range project.AllServices() {
-		imagesMap[service.Image] = struct{}{}
-	}
-	for image := range imagesMap {
-		images = append(images, image)
-	}
-	return images, nil
-}
-
 func GetImagesFromDockerCompose(env, yml []byte) ([]string, error) {
 	envVars, err := loadEnvFile(env)
 	if err != nil {
diff --git a/frontend/src/api/interface/app.ts b/frontend/src/api/interface/app.ts
index 9cd98aefe..67b8f47af 100644
--- a/frontend/src/api/interface/app.ts
+++ b/frontend/src/api/interface/app.ts
@@ -276,6 +276,7 @@ export namespace App {
         type: string;
         webUI: string;
         specifyIP: string;
+        restartPolicy: string;
     }
 
     export interface IgnoredApp {
diff --git a/frontend/src/api/modules/app.ts b/frontend/src/api/modules/app.ts
index eb31ac938..ed1f23652 100644
--- a/frontend/src/api/modules/app.ts
+++ b/frontend/src/api/modules/app.ts
@@ -15,12 +15,9 @@ export const searchApp = (req: App.AppReq) => {
     return http.post<App.AppResPage>('apps/search', req);
 };
 
-export const getAppByKey = (key: string) => {
-    return http.get<App.AppDTO>('apps/' + key);
-};
-
-export const getAppByKeyWithNode = (key: string, node: string) => {
-    return http.get<App.AppDTO>('apps/' + key + `?operateNode=${node}`);
+export const getAppByKey = (key: string, node?: string) => {
+    const params = node ? `?operateNode=${node}` : '';
+    return http.get<App.AppDTO>('apps/' + key + `${params}`);
 };
 
 export const getAppTags = () => {
diff --git a/frontend/src/views/app-store/detail/form/index.vue b/frontend/src/views/app-store/detail/form/index.vue
new file mode 100644
index 000000000..e83ff3095
--- /dev/null
+++ b/frontend/src/views/app-store/detail/form/index.vue
@@ -0,0 +1,400 @@
+<template>
+    <div>
+        <el-alert
+            :title="$t('app.hostModeHelper')"
+            class="common-prompt"
+            :closable="false"
+            type="warning"
+            v-if="isHostMode"
+        />
+        <el-alert
+            :title="$t('app.memoryRequiredHelper', [computeSizeFromMB(memoryRequired)])"
+            class="common-prompt"
+            :closable="false"
+            type="warning"
+            v-if="memoryRequired > 0"
+        />
+
+        <el-form
+            v-loading="loading"
+            @submit.prevent
+            ref="formRef"
+            label-position="top"
+            :model="formData"
+            label-width="150px"
+            :rules="formRules"
+            :validate-on-rule-change="false"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model.trim="formData.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('app.version')" prop="version">
+                <el-select v-model="formData.version" @change="handleVersionChange">
+                    <el-option
+                        v-for="(version, index) in appVersions"
+                        :key="index"
+                        :label="version"
+                        :value="version"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <Params
+                :key="paramKey"
+                v-if="showParams"
+                v-model:form="formData.params"
+                v-model:params="installParams"
+                v-model:rules="formRules.params"
+                :propStart="'params.'"
+            />
+
+            <el-form-item prop="advanced">
+                <el-checkbox v-model="formData.advanced" :label="$t('app.advanced')" size="large" />
+            </el-form-item>
+
+            <div v-if="formData.advanced">
+                <el-form-item :label="$t('app.containerName')" prop="containerName">
+                    <el-input v-model.trim="formData.containerName" :placeholder="$t('app.containerNameHelper')" />
+                </el-form-item>
+
+                <el-form-item prop="allowPort" v-if="!isHostMode">
+                    <el-checkbox v-model="formData.allowPort" :label="$t('app.allowPort')" size="large" />
+                    <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
+                </el-form-item>
+
+                <el-form-item :label="$t('app.specifyIP')" v-if="formData.allowPort" prop="specifyIP">
+                    <el-input v-model="formData.specifyIP" />
+                    <span class="input-help">{{ $t('app.specifyIPHelper') }}</span>
+                </el-form-item>
+
+                <el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
+                    <el-select v-model="formData.restartPolicy" class="p-w-300">
+                        <el-option :label="$t('container.no')" value="no"></el-option>
+                        <el-option :label="$t('container.always')" value="always"></el-option>
+                        <el-option :label="$t('container.onFailure')" value="on-failure"></el-option>
+                        <el-option :label="$t('container.unlessStopped')" value="unless-stopped"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item
+                    :label="$t('container.cpuQuota')"
+                    prop="cpuQuota"
+                    :rules="checkNumberRange(0, limits.cpu)"
+                >
+                    <el-input type="number" class="!w-2/5" v-model.number="formData.cpuQuota" maxlength="5">
+                        <template #append>{{ $t('app.cpuCore') }}</template>
+                    </el-input>
+                    <span class="input-help">
+                        {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
+                    </span>
+                </el-form-item>
+
+                <el-form-item
+                    :label="$t('container.memoryLimit')"
+                    prop="memoryLimit"
+                    :rules="checkNumberRange(0, limits.memory)"
+                >
+                    <el-input class="!w-2/5" v-model.number="formData.memoryLimit" maxlength="10">
+                        <template #append>
+                            <el-select
+                                v-model="formData.memoryUnit"
+                                placeholder="Select"
+                                class="p-w-100"
+                                @change="changeUnit"
+                            >
+                                <el-option label="MB" value="M" />
+                                <el-option label="GB" value="G" />
+                            </el-select>
+                        </template>
+                    </el-input>
+                    <span class="input-help">
+                        {{ $t('container.limitHelper', [limits.memory]) }}{{ formData.memoryUnit }}B
+                    </span>
+                </el-form-item>
+
+                <el-form-item pro="gpuConfig" v-if="gpuSupport">
+                    <el-checkbox v-model="formData.gpuConfig" :label="$t('app.gpuConfig')" size="large" />
+                    <span class="input-help">{{ $t('app.gpuConfigHelper') }}</span>
+                </el-form-item>
+
+                <el-form-item pro="pullImage">
+                    <el-checkbox v-model="formData.pullImage" :label="$t('app.pullImage')" size="large" />
+                    <span class="input-help">{{ $t('app.pullImageHelper') }}</span>
+                </el-form-item>
+
+                <el-form-item prop="editCompose">
+                    <el-checkbox v-model="formData.editCompose" :label="$t('app.editCompose')" size="large" />
+                    <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
+                </el-form-item>
+
+                <div v-if="formData.editCompose">
+                    <CodemirrorPro v-model="formData.dockerCompose" mode="yaml" />
+                </div>
+            </div>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts" setup name="AppInstallForm">
+import { App } from '@/api/interface/app';
+import { getAppByKey, getAppDetail, getAppInstalledByID } from '@/api/modules/app';
+import { Rules, checkNumberRange } from '@/global/form-rules';
+import { FormInstance, FormRules } from 'element-plus';
+import { reactive, ref, watch } from 'vue';
+import Params from '../params/index.vue';
+import { Container } from '@/api/interface/container';
+import CodemirrorPro from '@/components/codemirror-pro/index.vue';
+import { computeSizeFromMB } from '@/utils/util';
+import { loadResourceLimit } from '@/api/modules/container';
+
+interface ClusterProps {
+    key: string;
+    node: string;
+    masterNode: string;
+    appInstallID: number;
+    masterVersion: string;
+    masterNodeAddr: string;
+    role: string;
+}
+interface Props {
+    loading?: boolean;
+    modelValue?: any;
+}
+
+const limits = ref<Container.ResourceLimit>({
+    cpu: null as number,
+    memory: null as number,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+    loading: false,
+});
+
+interface Emits {
+    (e: 'update:modelValue', value: any): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const formRef = ref<FormInstance>();
+const paramKey = ref(1);
+const isHostMode = ref(false);
+const memoryRequired = ref(0);
+const gpuSupport = ref(false);
+const installParams = ref<App.AppParams>();
+const oldMemory = ref<number>(0);
+const showParams = ref(false);
+const currentApp = ref<any>({});
+const appVersions = ref<string[]>([]);
+const operateNode = ref();
+const env = ref();
+const masterNodeAddr = ref();
+
+const formRules = ref<FormRules>({
+    name: [Rules.appName],
+    params: [],
+    version: [Rules.requiredSelect],
+    containerName: [Rules.containerName],
+    cpuQuota: [Rules.requiredInput, checkNumberRange(0, 99999)],
+    memoryLimit: [Rules.requiredInput, checkNumberRange(0, 9999999999)],
+    specifyIP: [Rules.ipv4orV6],
+    restartPolicy: [Rules.requiredSelect],
+});
+
+const initFormData = () => ({
+    appDetailId: 0,
+    params: {},
+    name: '',
+    advanced: true,
+    cpuQuota: 0,
+    memoryLimit: 0,
+    memoryUnit: 'M',
+    containerName: '',
+    allowPort: false,
+    editCompose: false,
+    dockerCompose: '',
+    version: '',
+    appID: '',
+    pullImage: true,
+    taskID: '',
+    gpuConfig: false,
+    specifyIP: '',
+    restartPolicy: 'always',
+});
+
+const formData = reactive(props.modelValue || initFormData());
+
+watch(
+    formData,
+    (newVal) => {
+        emit('update:modelValue', newVal);
+    },
+    { deep: true },
+);
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        if (newVal) {
+            Object.assign(formData, newVal);
+        }
+    },
+    { immediate: true, deep: true },
+);
+
+const changeUnit = () => {
+    if (formData.memoryUnit == 'M') {
+        limits.value.memory = oldMemory.value;
+    } else {
+        limits.value.memory = Number((oldMemory.value / 1024).toFixed(2));
+    }
+};
+
+const handleVersionChange = async (version: string) => {
+    await getVersionDetail(version);
+};
+
+const getVersionDetail = async (version: string) => {
+    try {
+        const res = await getAppDetail(currentApp.value.id, version, 'app', operateNode.value);
+        formData.appDetailId = res.data.id;
+        formData.dockerCompose = res.data.dockerCompose;
+        isHostMode.value = res.data.hostMode;
+        if (env.value) {
+            installParams.value = addMasterParams(res.data.params);
+        } else {
+            installParams.value = res.data.params;
+        }
+        paramKey.value++;
+        memoryRequired.value = res.data.memoryRequired;
+        gpuSupport.value = res.data.gpuSupport;
+        showParams.value = true;
+    } catch (error) {}
+};
+
+const initForm = async (appKey: string) => {
+    formData.name = appKey;
+    const res = await getAppByKey(appKey);
+    currentApp.value = res.data;
+    appVersions.value = currentApp.value.versions;
+    if (appVersions.value.length > 0) {
+        const defaultVersion = appVersions.value[0];
+        formData.version = defaultVersion;
+        getVersionDetail(defaultVersion);
+    }
+};
+
+const getMasterAppInstall = async (appInstallID: number, masterNode: string) => {
+    try {
+        const res = await getAppInstalledByID(appInstallID, masterNode);
+        env.value = res.data.env;
+    } catch (error) {}
+};
+
+const addMasterParams = (appParams: App.AppParams) => {
+    for (const key in appParams.formFields) {
+        const field = appParams.formFields[key];
+        if (field?.envKey === 'MASTER_ROOT_PASSWORD') {
+            field.default = env.value['PANEL_DB_ROOT_PASSWORD']
+                ? env.value['PANEL_DB_ROOT_PASSWORD']
+                : env.value['PANEL_REDIS_ROOT_PASSWORD'];
+        }
+        if (field?.envKey === 'PANEL_DB_ROOT_PASSWORD') {
+            field.default = env.value['PANEL_DB_ROOT_PASSWORD'];
+        }
+        if (field?.envKey === 'REPLICATION_USER') {
+            field.default = env.value['REPLICATION_USER'];
+        }
+        if (field?.envKey === 'REPLICATION_PASSWORD') {
+            field.default = env.value['REPLICATION_PASSWORD'];
+        }
+        if (field?.envKey === 'MASTER_PORT') {
+            field.default = env.value['PANEL_APP_PORT_HTTP'];
+        }
+        if (field?.envKey === 'MASTER_HOST' && masterNodeAddr.value != '127.0.0.1') {
+            field.default = masterNodeAddr.value;
+        }
+    }
+    return appParams;
+};
+
+const initClusterForm = async (props: ClusterProps) => {
+    if (props.appInstallID && props.masterNode) {
+        getMasterAppInstall(props.appInstallID, props.masterNode);
+    }
+    masterNodeAddr.value = props.masterNodeAddr;
+    operateNode.value = props.node;
+    const res = await getAppByKey(props.key, props.node);
+    currentApp.value = res.data;
+    appVersions.value = currentApp.value.versions;
+    if (appVersions.value.length > 0) {
+        appVersions.value = appVersions.value.filter((v: string) => {
+            return v.includes(props.role) && v.includes(props.masterVersion);
+        });
+        const defaultVersion = appVersions.value[0];
+        formData.version = defaultVersion;
+        getVersionDetail(defaultVersion);
+    }
+    formData.name = props.key + '-' + props.role;
+};
+
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.clearValidate();
+        formRef.value.resetFields();
+    }
+    Object.assign(formData, initFormData());
+    isHostMode.value = false;
+    memoryRequired.value = 0;
+    gpuSupport.value = false;
+    showParams.value = false;
+};
+
+const validate = async (): Promise<boolean> => {
+    if (!formRef.value) return false;
+    try {
+        const isValid = await formRef.value.validate();
+        return isValid;
+    } catch (error) {
+        return false;
+    }
+};
+
+const clearValidate = () => {
+    if (formRef.value) {
+        formRef.value.clearValidate();
+    }
+};
+
+const getFormData = () => {
+    return { ...formData };
+};
+
+const setFormData = (data: any) => {
+    Object.assign(formData, data);
+};
+
+const loadLimit = async () => {
+    const res = await loadResourceLimit();
+    limits.value = res.data;
+    limits.value.memory = Number((limits.value.memory / 1024 / 1024).toFixed(2));
+    oldMemory.value = limits.value.memory;
+};
+
+onMounted(() => {
+    loadLimit();
+});
+
+defineExpose({
+    formRef,
+    formData,
+    initForm,
+    resetForm,
+    validate,
+    clearValidate,
+    getFormData,
+    setFormData,
+    isHostMode: () => isHostMode.value,
+    initClusterForm,
+});
+</script>
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 7d8a5ffe0..5fbd7c416 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -1,120 +1,12 @@
 <template>
     <DrawerPro v-model="open" :header="$t('commons.button.install')" @close="handleClose" size="large">
-        <el-alert
-            :title="$t('app.hostModeHelper')"
-            class="common-prompt"
-            :closable="false"
-            type="warning"
-            v-if="isHostMode"
-        />
-        <el-alert
-            :title="$t('app.memoryRequiredHelper', [computeSizeFromMB(memoryRequired)])"
-            class="common-prompt"
-            :closable="false"
-            type="warning"
-            v-if="memoryRequired > 0"
-        />
-        <el-form
-            v-loading="loading"
-            @submit.prevent
-            ref="paramForm"
-            label-position="top"
-            :model="req"
-            label-width="150px"
-            :rules="rules"
-            :validate-on-rule-change="false"
-        >
-            <el-form-item :label="$t('commons.table.name')" prop="name">
-                <el-input v-model.trim="req.name"></el-input>
-            </el-form-item>
-            <el-form-item :label="$t('app.version')" prop="version">
-                <el-select v-model="req.version" @change="getDetail(req.version)">
-                    <el-option
-                        v-for="(version, index) in appVersions"
-                        :key="index"
-                        :label="version"
-                        :value="version"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <Params
-                :key="paramKey"
-                v-if="open"
-                v-model:form="req.params"
-                v-model:params="installData.params"
-                v-model:rules="rules.params"
-                :propStart="'params.'"
-            ></Params>
-            <el-form-item prop="advanced">
-                <el-checkbox v-model="req.advanced" :label="$t('app.advanced')" size="large" />
-            </el-form-item>
-            <div v-if="req.advanced">
-                <el-form-item :label="$t('app.containerName')" prop="containerName">
-                    <el-input v-model.trim="req.containerName" :placeholder="$t('app.containerNameHelper')"></el-input>
-                </el-form-item>
-                <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>
-                <el-form-item :label="$t('app.specifyIP')" v-if="req.allowPort" prop="specifyIP">
-                    <el-input v-model="req.specifyIP"></el-input>
-                    <span class="input-help">{{ $t('app.specifyIPHelper') }}</span>
-                </el-form-item>
-                <el-form-item
-                    :label="$t('container.cpuQuota')"
-                    prop="cpuQuota"
-                    :rules="checkNumberRange(0, limits.cpu)"
-                >
-                    <el-input type="number" style="width: 40%" v-model.number="req.cpuQuota" maxlength="5">
-                        <template #append>{{ $t('app.cpuCore') }}</template>
-                    </el-input>
-                    <span class="input-help">
-                        {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
-                    </span>
-                </el-form-item>
-                <el-form-item
-                    :label="$t('container.memoryLimit')"
-                    prop="memoryLimit"
-                    :rules="checkNumberRange(0, limits.memory)"
-                >
-                    <el-input style="width: 40%" v-model.number="req.memoryLimit" maxlength="10">
-                        <template #append>
-                            <el-select
-                                v-model="req.memoryUnit"
-                                placeholder="Select"
-                                style="width: 85px"
-                                @change="changeUnit"
-                            >
-                                <el-option label="MB" value="M" />
-                                <el-option label="GB" value="G" />
-                            </el-select>
-                        </template>
-                    </el-input>
-                    <span class="input-help">
-                        {{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
-                    </span>
-                </el-form-item>
-                <el-form-item pro="gpuConfig" v-if="gpuSupport">
-                    <el-checkbox v-model="req.gpuConfig" :label="$t('app.gpuConfig')" size="large" />
-                    <span class="input-help">{{ $t('app.gpuConfigHelper') }}</span>
-                </el-form-item>
-                <el-form-item pro="pullImage">
-                    <el-checkbox v-model="req.pullImage" :label="$t('app.pullImage')" size="large" />
-                    <span class="input-help">{{ $t('app.pullImageHelper') }}</span>
-                </el-form-item>
-                <el-form-item prop="editCompose">
-                    <el-checkbox v-model="req.editCompose" :label="$t('app.editCompose')" size="large" />
-                    <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
-                </el-form-item>
-                <div v-if="req.editCompose">
-                    <CodemirrorPro v-model="req.dockerCompose" mode="yaml"></CodemirrorPro>
-                </div>
-            </div>
-        </el-form>
+        <AppInstallForm ref="installFormRef" v-model="formData" :loading="loading" />
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit(paramForm)" :disabled="loading">
+                <el-button @click="handleClose" :disabled="loading">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="handleSubmit" :disabled="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -123,49 +15,26 @@
     <TaskLog ref="taskLogRef" />
 </template>
 
-<script lang="ts" setup name="appInstall">
-import { App } from '@/api/interface/app';
-import { getAppByKey, getAppDetail, installApp } from '@/api/modules/app';
-import { Rules, checkNumberRange } from '@/global/form-rules';
-import { FormInstance, FormRules } from 'element-plus';
-import { onMounted, reactive, ref } from 'vue';
+<script lang="ts" setup name="AppInstallPage">
+import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
-import Params from '../params/index.vue';
-import i18n from '@/lang';
+import AppInstallForm from '@/views/app-store/detail/form/index.vue';
+import { installApp } from '@/api/modules/app';
 import { MsgError } from '@/utils/message';
-import { Container } from '@/api/interface/container';
-import { loadResourceLimit } from '@/api/modules/container';
-import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import TaskLog from '@/components/log/task/index.vue';
 import { newUUID } from '@/utils/util';
-import { computeSizeFromMB } from '@/utils/util';
 import { routerToName } from '@/utils/router';
-
-interface InstallRrops {
-    params?: App.AppParams;
-    app: any;
-}
-const installData = ref<InstallRrops>({
-    app: {},
-});
+import TaskLog from '@/components/log/task/index.vue';
+import i18n from '@/lang';
 
 const router = useRouter();
 const open = ref(false);
-const rules = ref<FormRules>({
-    name: [Rules.appName],
-    params: [],
-    version: [Rules.requiredSelect],
-    containerName: [Rules.containerName],
-    cpuQuota: [Rules.requiredInput, checkNumberRange(0, 99999)],
-    memoryLimit: [Rules.requiredInput, checkNumberRange(0, 9999999999)],
-    specifyIP: [Rules.ipv4orV6],
-});
 const loading = ref(false);
-const paramForm = ref<FormInstance>();
-const form = ref<{ [key: string]: any }>({});
-const initData = () => ({
+const installFormRef = ref<InstanceType<typeof AppInstallForm>>();
+const taskLogRef = ref();
+
+const formData = reactive({
     appDetailId: 0,
-    params: form.value,
+    params: {},
     name: '',
     advanced: true,
     cpuQuota: 0,
@@ -182,139 +51,73 @@ const initData = () => ({
     gpuConfig: false,
     specifyIP: '',
 });
-const req = reactive(initData());
-const limits = ref<Container.ResourceLimit>({
-    cpu: null as number,
-    memory: null as number,
-});
-const oldMemory = ref<number>(0);
-const appVersions = ref<string[]>([]);
+
 const handleClose = () => {
     open.value = false;
-    resetForm();
+    installFormRef.value?.resetForm();
     if (router.currentRoute.value.query.install) {
         routerToName('AppAll');
     }
 };
-const paramKey = ref(1);
-const isHostMode = ref(false);
-const taskLogRef = ref();
-const memoryRequired = ref(0);
-const gpuSupport = ref(false);
 
-const changeUnit = () => {
-    if (req.memoryUnit == 'M') {
-        limits.value.memory = oldMemory.value;
+const handleSubmit = async () => {
+    const isValid = await installFormRef.value?.validate();
+    if (!isValid) return;
+
+    const submitData = installFormRef.value?.getFormData();
+
+    if (submitData.editCompose && submitData.dockerCompose === '') {
+        MsgError(i18n.global.t('app.composeNullErr'));
+        return;
+    }
+
+    if (submitData.cpuQuota < 0) {
+        submitData.cpuQuota = 0;
+    }
+    if (submitData.memoryLimit < 0) {
+        submitData.memoryLimit = 0;
+    }
+
+    const isHostMode = installFormRef.value?.isHostMode();
+    if (!isHostMode && !submitData.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'),
+        }).then(async () => {
+            await install(submitData);
+        });
     } else {
-        limits.value.memory = Number((oldMemory.value / 1024).toFixed(2));
+        await install(submitData);
     }
 };
 
-const resetForm = () => {
-    if (paramForm.value) {
-        paramForm.value.clearValidate();
-        paramForm.value.resetFields();
-    }
-    isHostMode.value = false;
-    Object.assign(req, initData());
-};
-
-const acceptParams = async (props: InstallRrops) => {
-    resetForm();
-    if (props.app.versions != undefined) {
-        installData.value = props;
-    } else {
-        const res = await getAppByKey(props.app.key);
-        installData.value.app = res.data;
-    }
-
-    const app = installData.value.app;
-    appVersions.value = app.versions;
-    if (appVersions.value.length > 0) {
-        req.version = appVersions.value[0];
-        getDetail(appVersions.value[0]);
-    }
-
-    req.name = props.app.key;
-    open.value = true;
-};
-
-const getDetail = async (version: string) => {
+const install = async (submitData: any) => {
     loading.value = true;
+    const taskID = newUUID();
+    submitData.taskID = taskID;
+
     try {
-        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;
-        installData.value.params = res.data.params;
-        paramKey.value++;
-        memoryRequired.value = res.data.memoryRequired;
-        gpuSupport.value = res.data.gpuSupport;
+        await installApp(submitData);
+        handleClose();
+        openTaskLog(taskID);
     } catch (error) {
     } finally {
         loading.value = false;
     }
 };
 
-const submit = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    await formEl.validate((valid) => {
-        if (!valid) {
-            return;
-        }
-        if (req.editCompose && req.dockerCompose == '') {
-            MsgError(i18n.global.t('app.composeNullErr'));
-            return;
-        }
-        if (req.cpuQuota < 0) {
-            req.cpuQuota = 0;
-        }
-        if (req.memoryLimit < 0) {
-            req.memoryLimit = 0;
-        }
-        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'),
-            }).then(async () => {
-                install();
-            });
-        } else {
-            install();
-        }
-    });
-};
-
 const openTaskLog = (taskID: string) => {
     taskLogRef.value.openWithTaskID(taskID);
 };
 
-const install = () => {
-    loading.value = true;
-    const taskID = newUUID();
-    req.taskID = taskID;
-    installApp(req)
-        .then(() => {
-            handleClose();
-            openTaskLog(taskID);
-        })
-        .finally(() => {
-            loading.value = false;
-        });
-};
-
-const loadLimit = async () => {
-    const res = await loadResourceLimit();
-    limits.value = res.data;
-    limits.value.memory = Number((limits.value.memory / 1024 / 1024).toFixed(2));
-    oldMemory.value = limits.value.memory;
+const acceptParams = async (props: { app: any; params?: any }) => {
+    open.value = true;
+    await nextTick();
+    installFormRef.value?.resetForm();
+    installFormRef.value?.initForm(props.app.key);
 };
 
 defineExpose({
     acceptParams,
 });
-
-onMounted(() => {
-    loadLimit();
-});
 </script>
diff --git a/frontend/src/views/app-store/installed/detail/index.vue b/frontend/src/views/app-store/installed/detail/index.vue
index 3cde5ff98..f5529cfa0 100644
--- a/frontend/src/views/app-store/installed/detail/index.vue
+++ b/frontend/src/views/app-store/installed/detail/index.vue
@@ -91,6 +91,14 @@
                         <el-input v-model="paramModel.specifyIP"></el-input>
                         <span class="input-help">{{ $t('app.specifyIPHelper') }}</span>
                     </el-form-item>
+                    <el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
+                        <el-select v-model="paramModel.restartPolicy" class="p-w-300">
+                            <el-option :label="$t('container.no')" value="no"></el-option>
+                            <el-option :label="$t('container.always')" value="always"></el-option>
+                            <el-option :label="$t('container.onFailure')" value="on-failure"></el-option>
+                            <el-option :label="$t('container.unlessStopped')" value="unless-stopped"></el-option>
+                        </el-select>
+                    </el-form-item>
                     <el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
                         <el-input type="number" class="!w-2/5" v-model.number="paramModel.cpuQuota" maxlength="5">
                             <template #append>{{ $t('app.cpuCore') }}</template>
@@ -159,7 +167,7 @@ const loading = ref(false);
 const params = ref<EditForm[]>();
 const edit = ref(false);
 const paramForm = ref<FormInstance>();
-const paramModel = ref<any>({
+const paramModel = reactive<any>({
     params: {},
 });
 const rules = reactive({
@@ -167,8 +175,9 @@ const rules = reactive({
     cpuQuota: [Rules.requiredInput, checkNumberRange(0, 999)],
     memoryLimit: [Rules.requiredInput, checkNumberRange(0, 9999999999)],
     containerName: [Rules.containerName],
+    restartPolicy: [Rules.requiredSelect],
 });
-const submitModel = ref<any>({
+const submitModel = reactive<any>({
     webUI: '',
 });
 const appType = ref('');
@@ -208,10 +217,10 @@ function checkPort(port: string) {
 }
 
 const acceptParams = async (props: ParamProps) => {
-    submitModel.value.installId = props.id;
+    submitModel.installId = props.id;
     params.value = [];
     paramData.value.id = props.id;
-    paramModel.value.params = {};
+    paramModel.params = {};
     edit.value = false;
     await get();
     open.value = true;
@@ -224,14 +233,14 @@ const handleClose = () => {
 };
 const editParam = () => {
     params.value.forEach((param: EditForm) => {
-        paramModel.value.params[param.key] = param.value;
+        paramModel.params[param.key] = param.value;
     });
     edit.value = !edit.value;
 };
 
 const changeAllowPort = () => {
-    if (paramModel.value.allowPort) {
-        paramModel.value.specifyIP = '';
+    if (paramModel.allowPort) {
+        paramModel.specifyIP = '';
     }
 };
 
@@ -271,15 +280,16 @@ const get = async () => {
                 }
             });
         }
-        paramModel.value.memoryLimit = res.data.memoryLimit;
-        paramModel.value.cpuQuota = res.data.cpuQuota;
-        paramModel.value.memoryUnit = res.data.memoryUnit !== '' ? res.data.memoryUnit : 'MB';
-        paramModel.value.allowPort = res.data.allowPort;
-        paramModel.value.containerName = res.data.containerName;
-        paramModel.value.advanced = false;
-        paramModel.value.dockerCompose = res.data.dockerCompose;
-        paramModel.value.isHostMode = res.data.hostMode;
-        paramModel.value.specifyIP = res.data.specifyIP;
+        paramModel.memoryLimit = res.data.memoryLimit;
+        paramModel.cpuQuota = res.data.cpuQuota;
+        paramModel.memoryUnit = res.data.memoryUnit !== '' ? res.data.memoryUnit : 'MB';
+        paramModel.allowPort = res.data.allowPort;
+        paramModel.containerName = res.data.containerName;
+        paramModel.advanced = false;
+        paramModel.dockerCompose = res.data.dockerCompose;
+        paramModel.isHostMode = res.data.hostMode;
+        paramModel.specifyIP = res.data.specifyIP;
+        paramModel.restartPolicy = res.data.restartPolicy || 'no';
         appConfigUpdate.value.webUI = res.data.webUI;
         if (res.data.webUI != '') {
             const httpConfig = splitHttp(res.data.webUI);
@@ -304,22 +314,23 @@ const submit = async (formEl: FormInstance) => {
             cancelButtonText: i18n.global.t('commons.button.cancel'),
             type: 'info',
         }).then(async () => {
-            submitModel.value.params = paramModel.value.params;
-            if (paramModel.value.advanced) {
-                submitModel.value.advanced = paramModel.value.advanced;
-                submitModel.value.memoryLimit = paramModel.value.memoryLimit;
-                submitModel.value.cpuQuota = paramModel.value.cpuQuota;
-                submitModel.value.memoryUnit = paramModel.value.memoryUnit;
-                submitModel.value.allowPort = paramModel.value.allowPort;
-                submitModel.value.containerName = paramModel.value.containerName;
-                if (paramModel.value.editCompose) {
-                    submitModel.value.editCompose = paramModel.value.editCompose;
-                    submitModel.value.dockerCompose = paramModel.value.dockerCompose;
+            submitModel.params = paramModel.params;
+            if (paramModel.advanced) {
+                submitModel.advanced = paramModel.advanced;
+                submitModel.memoryLimit = paramModel.memoryLimit;
+                submitModel.cpuQuota = paramModel.cpuQuota;
+                submitModel.memoryUnit = paramModel.memoryUnit;
+                submitModel.allowPort = paramModel.allowPort;
+                submitModel.containerName = paramModel.containerName;
+                if (paramModel.editCompose) {
+                    submitModel.editCompose = paramModel.editCompose;
+                    submitModel.dockerCompose = paramModel.dockerCompose;
                 }
+                submitModel.restartPolicy = paramModel.restartPolicy;
             }
             try {
                 loading.value = true;
-                await updateAppInstallParams(submitModel.value);
+                await updateAppInstallParams(submitModel);
                 loading.value = false;
                 MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
                 handleClose();
diff --git a/frontend/src/views/app-store/installed/ignore/index.vue b/frontend/src/views/app-store/installed/ignore/index.vue
index ffdc25469..8b3b78507 100644
--- a/frontend/src/views/app-store/installed/ignore/index.vue
+++ b/frontend/src/views/app-store/installed/ignore/index.vue
@@ -51,7 +51,6 @@ const getApps = async () => {
     try {
         const res = await getIgnoredApp();
         apps.value = res.data;
-        console.log(apps.value);
     } catch (error) {}
 };
 
diff --git a/frontend/src/views/database/mysql/check/index.vue b/frontend/src/views/database/mysql/check/index.vue
index ab5ddf6c4..3af637e87 100644
--- a/frontend/src/views/database/mysql/check/index.vue
+++ b/frontend/src/views/database/mysql/check/index.vue
@@ -45,7 +45,6 @@ let open = ref(false);
 
 const acceptParams = (props: InstallProps) => {
     installData.value = props.items;
-    console.log('acceptParams', props.items);
     open.value = true;
 };
 
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index 31f0fb61d..bbf299188 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -100,48 +100,21 @@
                     </el-form-item>
                     <div v-if="website.appType == 'new'">
                         <el-form-item :label="$t('app.app')" prop="appinstall.appId">
-                            <el-row :gutter="20">
-                                <el-col :span="12">
-                                    <el-select
-                                        v-model="website.appinstall.appId"
-                                        @change="changeApp()"
-                                        class="p-w-200"
-                                        filterable
-                                    >
-                                        <el-option
-                                            v-for="(app, index) in apps"
-                                            :key="index"
-                                            :label="app.name"
-                                            :value="app.id"
-                                        ></el-option>
-                                    </el-select>
-                                </el-col>
-                                <el-col :span="12">
-                                    <el-select
-                                        v-model="website.appinstall.version"
-                                        @change="getDetail(website.appinstall.version)"
-                                        class="p-w-200"
-                                    >
-                                        <el-option
-                                            v-for="(version, index) in appVersions"
-                                            :key="index"
-                                            :label="version"
-                                            :value="version"
-                                        ></el-option>
-                                    </el-select>
-                                </el-col>
-                            </el-row>
+                            <el-select
+                                v-model="website.appinstall.appId"
+                                @change="changeApp()"
+                                class="p-w-300"
+                                filterable
+                            >
+                                <el-option
+                                    v-for="(app, index) in apps"
+                                    :key="index"
+                                    :label="app.name"
+                                    :value="app.id"
+                                ></el-option>
+                            </el-select>
                         </el-form-item>
-                        <el-form-item :label="$t('commons.table.name')" prop="appinstall.name">
-                            <el-input v-model.trim="website.appinstall.name"></el-input>
-                        </el-form-item>
-                        <Params
-                            :key="paramKey"
-                            v-model:form="website.appinstall.params"
-                            v-model:rules="rules.appinstall.params"
-                            :params="appParams"
-                            :propStart="'appinstall.params.'"
-                        ></Params>
+                        <AppInstallForm ref="installFormRef" v-model="website.appinstall" :loading="loading" />
                     </div>
                 </div>
                 <div v-if="website.type === 'subsite'">
@@ -246,49 +219,6 @@
                         {{ $t('website.runtimePortWarn') }}
                     </el-text>
                 </div>
-                <el-form-item prop="advanced" v-if="website.type === 'deployment' && website.appType === 'new'">
-                    <el-checkbox v-model="website.appinstall.advanced" :label="$t('app.advanced')" size="large" />
-                </el-form-item>
-
-                <div v-if="website.appinstall.advanced">
-                    <el-form-item :label="$t('app.containerName')" prop="containerName">
-                        <el-input
-                            v-model.trim="website.appinstall.containerName"
-                            :placeholder="$t('app.containerNameHelper')"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.cpuQuota')" prop="appinstall.cpuQuota">
-                        <el-input
-                            type="number"
-                            style="width: 40%"
-                            v-model.number="website.appinstall.cpuQuota"
-                            maxlength="5"
-                        >
-                            <template #append>{{ $t('app.cpuCore') }}</template>
-                        </el-input>
-                        <span class="input-help">{{ $t('container.limitHelper', [99999]) }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.memoryLimit')" prop="appinstall.memoryLimit">
-                        <el-input style="width: 40%" v-model.number="website.appinstall.memoryLimit" maxlength="10">
-                            <template #append>
-                                <el-select
-                                    v-model="website.appinstall.memoryUnit"
-                                    placeholder="Select"
-                                    class="pre-select"
-                                >
-                                    <el-option label="KB" value="K" />
-                                    <el-option label="MB" value="M" />
-                                    <el-option label="GB" value="G" />
-                                </el-select>
-                            </template>
-                        </el-input>
-                        <span class="input-help">{{ $t('container.limitHelper', ['9999999999']) }}</span>
-                    </el-form-item>
-                    <el-form-item prop="allowPort" v-if="website.type === 'deployment'">
-                        <el-checkbox v-model="website.appinstall.allowPort" :label="$t('app.allowPort')" size="large" />
-                        <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
-                    </el-form-item>
-                </div>
                 <DomainCreate v-model:form="website" @gengerate="websiteForm.clearValidate()"></DomainCreate>
                 <el-form-item prop="IPV6">
                     <el-checkbox v-model="website.IPV6" :label="$t('website.ipv6')" size="large" />
@@ -521,7 +451,7 @@
 
 <script lang="ts" setup name="CreateWebSite">
 import { App } from '@/api/interface/app';
-import { getAppByKey, getAppDetail, searchApp, getAppInstalled } from '@/api/modules/app';
+import { searchApp, getAppInstalled } from '@/api/modules/app';
 import {
     createWebsite,
     getWebsiteOptions,
@@ -534,7 +464,6 @@ import { Rules, checkNumberRange } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
-import Params from '@/views/app-store/detail/params/index.vue';
 import Check from '../check/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { getAgentGroupList } from '@/api/modules/group';
@@ -550,6 +479,7 @@ import { Website } from '@/api/interface/website';
 import DomainCreate from '@/views/website/website/domain-create/index.vue';
 import { getPathByType } from '@/api/modules/files';
 import { getWebsiteTypes } from '@/global/mimetype';
+import AppInstallForm from '@/views/app-store/detail/form/index.vue';
 
 const websiteForm = ref<FormInstance>();
 
@@ -646,10 +576,6 @@ const appReq = reactive({
     pageSize: 100,
 });
 const apps = ref<App.App[]>([]);
-const appVersions = ref<string[]>([]);
-const appDetail = ref<App.AppDetail>();
-const appParams = ref<App.AppParams>();
-const paramKey = ref(1);
 const preCheckRef = ref();
 const staticPath = ref('');
 const runtimeResource = ref('appstore');
@@ -671,6 +597,7 @@ const parentWebsites = ref();
 const dirs = ref([]);
 const runtimePorts = ref([]);
 const WebsiteTypes = getWebsiteTypes();
+const installFormRef = ref();
 
 const handleClose = () => {
     open.value = false;
@@ -747,7 +674,7 @@ const searchAppList = () => {
         if (res.data.items.length > 0) {
             website.value.appinstall.appId = res.data.items[0].id;
             website.value.appinstall.appkey = res.data.items[0].key;
-            getApp();
+            changeApp();
         }
     });
 };
@@ -756,30 +683,11 @@ const changeApp = () => {
     apps.value.forEach((app) => {
         if (app.id === website.value.appinstall.appId) {
             website.value.appinstall.appkey = app.key;
-            getApp();
+            installFormRef.value.initForm(app.key);
         }
     });
 };
 
-const getApp = () => {
-    getAppByKey(website.value.appinstall.appkey).then((res) => {
-        appVersions.value = res.data.versions;
-        if (res.data.versions.length > 0) {
-            website.value.appinstall.version = res.data.versions[0];
-            getDetail(res.data.versions[0]);
-        }
-    });
-};
-
-const getDetail = (version: string) => {
-    getAppDetail(website.value.appinstall.appId, version, 'app').then((res) => {
-        website.value.appinstall.appDetailId = res.data.id;
-        appDetail.value = res.data;
-        appParams.value = res.data.params;
-        paramKey.value++;
-    });
-};
-
 const changeRuntimeType = () => {
     runtimeReq.value.type = website.value.runtimeType;
     website.value.appinstall.advanced = false;
@@ -893,6 +801,10 @@ const submit = async (formEl: FormInstance | undefined) => {
         if (!valid) {
             return;
         }
+        if (website.value.type == 'deployment' && website.value.appType === 'new') {
+            const isValid = await installFormRef.value?.validate();
+            if (!isValid) return;
+        }
         if (website.value.type === 'runtime' && website.value.runtimeType !== 'php' && website.value.port == 0) {
             MsgError(i18n.global.t('website.runtimePortWarn'));
             return;