Add UI for managing Docker space variables and enhance localization (#977)

* Add Docker space variables management

  - Introduce UI for managing Docker space variables
  - Add props sdk and variables
  - Enhance localization for space variables
  - Ensure compatibility with existing application space settings

* feat(application_spaces): improve variable input layout

- Adjusted layout for variable inputs
- Changed input size to small for better UX
- Updated variable display structure

* feat(application_spaces): improve layout and styling

- Adjust flex direction for better layout
- Update input size for consistency
- Enhance spacing between elements

* feat(application_spaces): improve layout and spacing

- Adjusted flex gap for better alignment
- Updated label spacing for clarity
- Fixed typo in update variables button

---------

Co-authored-by: minghao.yang <[email protected]>
Co-authored-by: Hiveer <[email protected]>

Author: 3 people

frontend/src/components/application_spaces/ApplicationSpaceSettings.vue

@@ -198,6 +198,30 @@
       </div>
     </div>
 
+    <!-- docker space variables -->
+    <el-divider v-if="theSdk === 'docker'"/>
+    <div v-if="theSdk === 'docker'">
+      <div class="flex xl:flex-col gap-8">
+        <div class="w-[380px] sm:w-full flex flex-col">
+          <div class="text-sm text-gray-700 leading-[20px] font-medium">
+            {{ $t('application_spaces.edit.spaceVariables') }}
+          </div>
+          <div class="text-sm text-gray-600 leading-[20px]">
+            {{ $t('application_spaces.edit.spaceVariablesDesc') }}
+          </div>
+        </div>
+        <div class="flex flex-col gap-[6px]">
+          <div v-for="(_, name) in theVariables" :key="name" class="flex gap-4 items-center mb-2">
+            <label :for="name" class="text-gray-600 font-light text-xs">{{ name }}</label>
+            <el-input v-model="theVariables[name]" size="large" class="!w-[400px] sm:!w-full"></el-input>
+          </div>
+          <el-button @click="updateVaribles" class="w-[100px]" data-test="update-varibles">
+            {{ $t('all.update') }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+
     <el-divider />
 
     <!-- 修改可见性 -->
@@ -351,7 +375,9 @@
       default_branch: String,
       appStatus: String,
       cloudResource: String,
-      coverImage: String
+      coverImage: String,
+      sdk: String,
+      variables: Object
     },
 
     components: {},
@@ -362,6 +388,8 @@
         applicationSpacePath: this.path,
         theApplicationSpaceNickname: this.applicationSpaceNickname || '',
         theApplicationSpaceDesc: this.applicationSpaceDesc || '',
+        theSdk: this.sdk || '',
+        theVariables: this.variables || {},
         theCloudResource: /^\d+$/.test(this.cloudResource)
           ? Number(this.cloudResource)
           : this.cloudResource,
@@ -435,6 +463,9 @@
       },
       cloudResource(newResource, _) {
         this.theCloudResource = /^\d+$/.test(newResource) ? Number(newResource) : this.cloudResource
+      },
+      variables(newVariables, _) {
+        this.theVariables = newVariables
       }
     },
 
@@ -654,6 +685,11 @@
         this.updateApplicationSpace(payload)
       },
 
+      updateVaribles() {
+        const payload = { variables: JSON.stringify(this.theVariables) }
+        this.updateApplicationSpace(payload)
+      },
+
       async updateApplicationSpace(payload) {
         const applicationSpaceUpdateEndpoint = `/spaces/${this.path}`
         const options = {

frontend/src/components/shared/RepoTabs.vue

@@ -215,6 +215,8 @@
           :cloudResource="repoDetail.sku || repoDetail.hardware"
           :coverImage="repoDetail.cover_image_url"
           @showSpaceLogs="showSpaceLogs"
+          :sdk="sdk"
+          :variables="repoDetail.variables ? JSON.parse(repoDetail.variables) : {}"
         />
         <code-settings
           v-if="repoType === 'code'"

frontend/src/locales/en_js/application_spaces.js

@@ -86,6 +86,8 @@ export const application_spaces = {
     spaceVariables: "Space Variables"
   },
   edit: {
+    spaceVariables: "Space Variables",
+    spaceVariablesDesc: "You can modify the space variables",
     cloudResource: 'Cloud resource',
     cloudResourceDesc: 'Switch to different cloud resources. When you switch to a paid resource, you will be charged based on how long you use it',
     currentCloudResource: 'Current cloud resources',

frontend/src/locales/zh_js/application_spaces.js

@@ -86,6 +86,8 @@ export const application_spaces = {
     spaceVariables: "空间变量"
   },
   edit: {
+    spaceVariables: "空间变量",
+    spaceVariablesDesc: "你可以修改空间变量",
     cloudResource: '空间云资源',
     cloudResourceDesc: '可切换到不同的空间云资源。切换到付费资源后，将根据使用时长向您收取费用。',
     currentCloudResource: '当前云资源',