feat: 编辑应用增加编辑 docker-compose.yml (#1206)

backend/app/service/app_install.go

@@ -257,8 +257,14 @@ func (a *AppInstallService) Update(req request.AppInstalledUpdate) error {
 	backupDockerCompose := installed.DockerCompose
 	if req.Advanced {
 		composeMap := make(map[string]interface{})
-		if err = yaml.Unmarshal([]byte(installed.DockerCompose), &composeMap); err != nil {
+		if req.EditCompose {
-			return err
+			if err = yaml.Unmarshal([]byte(req.DockerCompose), &composeMap); err != nil {
+				return err
+			}
+		} else {
+			if err = yaml.Unmarshal([]byte(installed.DockerCompose), &composeMap); err != nil {
+				return err
+			}
 		}
 		if err := addDockerComposeCommonParam(composeMap, installed.ServiceName, req.AppContainerConfig, req.Params); err != nil {
 			return err
@@ -268,6 +274,12 @@ func (a *AppInstallService) Update(req request.AppInstalledUpdate) error {
 			return err
 		}
 		installed.DockerCompose = string(composeByte)
+		if req.ContainerName == "" {
+			req.Params[constant.ContainerName] = installed.ContainerName
+		} else {
+			req.Params[constant.ContainerName] = req.ContainerName
+			installed.ContainerName = req.ContainerName
+		}
 	}
 
 	envPath := path.Join(installed.GetPath(), ".env")
@@ -541,6 +553,7 @@ func (a *AppInstallService) GetParams(id uint) (*response.AppConfig, error) {
 	}
 
 	config := getAppCommonConfig(envs)
+	config.DockerCompose = install.DockerCompose
 	res.Params = params
 	res.AppContainerConfig = config
 	return &res, nil

frontend/components.d.ts

@@ -0,0 +1,104 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    404: typeof import('./src/components/error-message/404.vue')['default']
+    AppLayout: typeof import('./src/components/app-layout/index.vue')['default']
+    AppStatus: typeof import('./src/components/app-status/index.vue')['default']
+    BackButton: typeof import('./src/components/back-button/index.vue')['default']
+    Backup: typeof import('./src/components/backup/index.vue')['default']
+    BreadCrumbs: typeof import('./src/components/bread-crumbs/index.vue')['default']
+    BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']
+    CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default']
+    Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
+    Collapse: typeof import('./src/components/app-layout/menu/components/Collapse.vue')['default']
+    ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
+    ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
+    ContainerLog: typeof import('./src/components/container-log/index.vue')['default']
+    DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    Err_domain: typeof import('./src/components/error-message/err_domain.vue')['default']
+    Err_ip: typeof import('./src/components/error-message/err_ip.vue')['default']
+    FileList: typeof import('./src/components/file-list/index.vue')['default']
+    FileRole: typeof import('./src/components/file-role/index.vue')['default']
+    Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']
+    FormButton: typeof import('./src/components/layout-content/form-button.vue')['default']
+    Group: typeof import('./src/components/group/index.vue')['default']
+    InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
+    LayoutContent: typeof import('./src/components/layout-content/index.vue')['default']
+    Line: typeof import('./src/components/v-charts/components/Line.vue')['default']
+    Loading: typeof import('element-plus/es')['ElLoadingDirective']
+    Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
+    Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
+    MsgInfo: typeof import('./src/components/msg-info/index.vue')['default']
+    Popover: typeof import('element-plus/es')['ElPopoverDirective']
+    RouterButton: typeof import('./src/components/router-button/index.vue')['default']
+    Status: typeof import('./src/components/status/index.vue')['default']
+    SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default']
+    SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']
+    SystemUpgrade: typeof import('./src/components/system-upgrade/index.vue')['default']
+    TableSetting: typeof import('./src/components/table-setting/index.vue')['default']
+    Terminal: typeof import('./src/components/terminal/index.vue')['default']
+    Tooltip: typeof import('./src/components/tooltip/index.vue')['default']
+    Unsafe: typeof import('./src/components/error-message/unsafe.vue')['default']
+    Upload: typeof import('./src/components/upload/index.vue')['default']
+    VCharts: typeof import('./src/components/v-charts/index.vue')['default']
+  }
+}
+
+export { }

frontend/src/api/interface/app.ts

@@ -186,5 +186,6 @@ export namespace App {
         memoryUnit: string;
         containerName: string;
         allowPort: boolean;
+        dockerCompose: string;
     }
 }

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

@@ -79,6 +79,25 @@
                             <el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
                             <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
                         </el-form-item>
+                        <el-form-item prop="editCompose">
+                            <el-checkbox v-model="paramModel.editCompose" :label="$t('app.editCompose')" size="large" />
+                            <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
+                        </el-form-item>
+                        <div v-if="paramModel.editCompose">
+                            <codemirror
+                                :autofocus="true"
+                                placeholder=""
+                                :indent-with-tab="true"
+                                :tabSize="4"
+                                style="height: 400px"
+                                :lineWrapping="true"
+                                :matchBrackets="true"
+                                theme="cobalt"
+                                :styleActiveLine="true"
+                                :extensions="extensions"
+                                v-model="paramModel.dockerCompose"
+                            />
+                        </div>
                     </div>
                 </el-form>
             </el-col>
@@ -104,6 +123,11 @@ 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';
+
+const extensions = [javascript(), oneDark];
 
 interface ParamProps {
     id: Number;
@@ -188,6 +212,7 @@ const get = async () => {
         paramModel.value.allowPort = res.data.allowPort;
         paramModel.value.containerName = res.data.containerName;
         paramModel.value.advanced = false;
+        paramModel.value.dockerCompose = res.data.dockerCompose;
     } catch (error) {
     } finally {
         loading.value = false;
@@ -215,12 +240,18 @@ const submit = async (formEl: FormInstance) => {
             type: 'info',
         }).then(async () => {
             submitModel.value.params = paramModel.value.params;
-            submitModel.value.advanced = paramModel.value.advanced;
+            if (paramModel.value.advanced) {
-            submitModel.value.memoryLimit = paramModel.value.memoryLimit;
+                submitModel.value.advanced = paramModel.value.advanced;
-            submitModel.value.cpuQuota = paramModel.value.cpuQuota;
+                submitModel.value.memoryLimit = paramModel.value.memoryLimit;
-            submitModel.value.memoryUnit = paramModel.value.memoryUnit;
+                submitModel.value.cpuQuota = paramModel.value.cpuQuota;
-            submitModel.value.allowPort = paramModel.value.allowPort;
+                submitModel.value.memoryUnit = paramModel.value.memoryUnit;
-            submitModel.value.containerName = paramModel.value.containerName;
+                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;
+                }
+            }
             try {
                 loading.value = true;
                 await UpdateAppInstallParams(submitModel.value);