From 2e335b351c68303a26afd8d663366c3b072037a7 Mon Sep 17 00:00:00 2001
From: saltbo <saltbo@foxmail.com>
Date: Tue, 29 Nov 2022 23:34:30 +0800
Subject: [PATCH] fix: error for the builder editor

Signed-off-by: saltbo <saltbo@foxmail.com>
---
 src/pages/admin/system/builder/Editor.vue | 71 +++++++++++++++--------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/pages/admin/system/builder/Editor.vue b/src/pages/admin/system/builder/Editor.vue
index f423d67..a6c4aeb 100644
--- a/src/pages/admin/system/builder/Editor.vue
+++ b/src/pages/admin/system/builder/Editor.vue
@@ -44,11 +44,11 @@ runAsync().then(onProviderSwitch)
 
 
 const removeDomain = (index: any) => {
-    formState.lbs.splice(index, 1);
+    formState.packs.splice(index, 1);
 };
 
 const addDomain = () => {
-    formState.lbs.push({
+    formState.packs.push({
         value: '',
         key: Date.now(),
         envs: []
@@ -65,61 +65,72 @@ const addDomain = () => {
         <a-form :model="formState" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }" autocomplete="off"
             @finish="formSubmit">
 
-            <a-form-item :label="$t('name')" name="name" :rules="[{ required: true, message: 'Please input the name!' }]">
+            <a-form-item :label="$t('name')" name="name"
+                :rules="[{ required: true, message: 'Please input the name!' }]">
                 <a-input v-model:value="formState.name" />
             </a-form-item>
-            <a-form-item :label="$t('intro')" name="intro" :rules="[{ required: true, message: 'Please input the intro!' }]">
+            <a-form-item :label="$t('intro')" name="intro"
+                :rules="[{ required: true, message: 'Please input the intro!' }]">
                 <a-input v-model:value="formState.intro" />
             </a-form-item>
-            <a-form-item label="Registry" name="registry_id" :rules="[{ required: true, message: 'Please select the registry!' }]">
+            <a-form-item label="Registry" name="registry_id"
+                :rules="[{ required: true, message: 'Please select the registry!' }]">
                 <a-select v-model:value="formState.registry_id" :options="registries" />
             </a-form-item>
 
             <a-form-item label="Stack" name="cnb">
                 <a-select v-model:value="formState.cnb" @change="onProviderSwitch" :options="suggestedStacks" />
             </a-form-item>
-            <a-form-item label="StackID" name="stack_id" :rules="[{ required: true, message: 'Please input the stackId!' }]">
+            <a-form-item label="StackID" name="stack_id"
+                :rules="[{ required: true, message: 'Please input the stackId!' }]">
                 <a-input v-model:value="formState.stack_id" />
             </a-form-item>
             <a-form-item :label="$t('buildImage')" name="build_image"
                 :rules="[{ required: true, message: 'Please input the build image!' }]">
                 <a-input v-model:value="formState.build_image" />
             </a-form-item>
-            <a-form-item :label="$t('runImage')" name="run_image" :rules="[{ required: true, message: 'Please input the run image!' }]">
+            <a-form-item :label="$t('runImage')" name="run_image"
+                :rules="[{ required: true, message: 'Please input the run image!' }]">
                 <a-input v-model:value="formState.run_image" />
             </a-form-item>
             <a-form-item label="Buildpacks">
-                <a-row v-for="(pack, index) in formState.packs" :key="index" style="margin: 10px 0">
+                <a-row v-for="(pack, index) in formState.packs" :key="index" style="margin: 10px 0" class="inner-form">
                     <a-col>
                         <a-row>
-                            <a-col :span="6">
-                                <a-input v-model:value="pack.lang" placeholder="Language" />
+                            <a-col :span="16">
+                                <a-input size="small" v-model:value="pack.id" placeholder="PackId"></a-input>
                             </a-col>
-                            <a-col :span="12" :offset="1">
-                                <a-input v-model:value="pack.id" placeholder="PackId"></a-input>
+                            <a-col :span="7" :offset="1">
+                                <a-input size="small" v-model:value="pack.lang" placeholder="Language" />
+                            </a-col>
+                        </a-row>
+                        <a-row>
+                            <a-col :span="24">
+                                <a-input size="small" v-model:value="pack.image" placeholder="PackImage"></a-input>
                             </a-col>
                         </a-row>
-                        <a-input v-model:value="pack.image" placeholder="PackImage"></a-input>
 
                         <a-row v-for="(env, index) in pack.envs" :key="index">
-                            <a-col :span="5">
-                                <a-input v-model:value="env.name" placeholder="Environment Name" />
+                            <a-col :span="10">
+                                <a-input size="small" v-model:value="env.name" placeholder="EnvVar Name" />
                             </a-col>
-                            <a-col :span="13" :offset="1">
-                                <a-input v-model:value="env.intro" placeholder="Introduction"></a-input>
+                            <a-col :span="9" :offset="1">
+                                <a-input size="small" v-model:value="env.intro" placeholder="Introduction"></a-input>
                             </a-col>
-                            <a-col :span="4" :offset="1">
+                            <a-col :span="3" :offset="1">
                                 <MinusCircleOutlined class="dynamic-delete-button"
                                     @click="pack.envs.splice(index, 1);" />
                             </a-col>
                         </a-row>
+                        <a-row>
+                            <a-button size="small" type="dashed" style="width: 50%" @click="pack.envs.push({})">
+                                <PlusOutlined />
+                                Add EnvVar
+                            </a-button>
+                        </a-row>
 
-                        <a-button type="dashed" style="width: 50%" @click="pack.envs.push({})">
-                            <PlusOutlined />
-                            Add Environment
-                        </a-button>
                     </a-col>
-                    <a-col :span="4" :offset="1">
+                    <a-col :span="1" :offset="3">
                         <MinusCircleOutlined v-if="formState.packs.length > 1" class="dynamic-delete-button"
                             :disabled="formState.packs.length === 1" @click="removeDomain(index)" />
                     </a-col>
@@ -136,4 +147,16 @@ const addDomain = () => {
             </a-form-item>
         </a-form>
     </a-modal>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.inner-form {
+    background-color: #eef0f5;
+    padding: 10px 10px;
+    margin: 0px 50px
+}
+
+.inner-form .ant-row {
+    margin: 3px 0;
+}
+</style>
\ No newline at end of file