feat: 新增模板ANDROID与HARMONY_OS，并在创建时优化现有模板展示

src/element-plus.ts

@@ -5,6 +5,7 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
+  ElCascader,
   ElCheckbox,
   ElCol,
   ElContainer,
@@ -62,6 +63,7 @@ export const Components = [
   ElCard,
   ElCarousel,
   ElCarouselItem,
+  ElCascader,
   ElCheckbox,
   ElCol,
   ElContainer,

src/views/Project/Pipeline.vue

@@ -169,6 +169,7 @@
         id="pipelineEditForm"
         v-model="showPipelineEditModal"
         destroy-on-close
+        @close="() => {pipelineConfig = ''; activeStep = 0;}"
       >
         <template #title>
           <span>编辑流水线配置</span>
@@ -215,6 +216,15 @@
                   :value="item.id">
                 </el-option>
               </ElSelect>
+              <ElSelect v-else-if="Array.isArray(getConfigValue(config.name, key))" v-model="config.configs[key]"
+                :multiple="Array.isArray(config.configs[key])">
+                <ElOption
+                  v-for="(item, index) in getConfigValue(config.name, key)"
+                  :key="index"
+                  :label="item"
+                  :value="item">
+                </ElOption>
+              </ElSelect>
               <ElInput v-else-if="key === 'nginxConfig'"
                 :disabled="!getStage(config.name).configs.find((config) => config.name === key).editable"
                 v-model="config.configs[key]"
@@ -264,13 +274,13 @@
             <ElInput id="pipelineCreateTitle" v-model="createPipelineForm.name" placeholder="请输入流水线名称"></ElInput>
           </ElFormItem>
           <ElFormItem label="模板" prop="template" required>
-            <ElSelect id="pipelineCreateTemplate" v-model="createPipelineForm.template" placeholder="请选择模板">
-              <ElOption
-                v-for="(template, index) in templates"
-                :key="index" :label="template"
-                :value="template"
-              ></ElOption>
-            </ElSelect>
+            <ElCascader
+              v-model="createPipelineForm.template"
+              :options="templateOptions"
+              :props="{ expandTrigger: 'hover' }"
+              :show-all-levels="false"
+              @change="handleSelectTemplate"
+              placeholder="请选择模板" />
           </ElFormItem>
         </ElForm>
         <template #footer>
@@ -381,7 +391,7 @@ export default {
       pipelineConfig: '',
       jsonValid: true,
       editingPipelineId: -1,
-      templates: [],
+      templateOptions: [],
       createPipelineForm: {
         name: '',
         template: '',
@@ -417,14 +427,47 @@ export default {
     this.loading = true;
     this.pipelines = await PipelineAPI.getPipelinesByProjectId(this.$store.state.workspace.currentProjectId);
     this.productions = await PipelineAPI.getDeploymentsByProjectId(this.$store.state.workspace.currentProjectId);
-    this.templates = await PipelineAPI.getPipelineTemplates();
-    this.stages = await PipelineAPI.getStages();
+    await this.getTemplateOptions();
+    await this.getStages();
     this.apiTestOptions = await InterfaceTestAPI.getAll(this.$store.state.workspace.currentProjectId);
     this.loading = false;
   },
   methods: {
     formatter,
     copy,
+    async getStages() {
+      this.stages = await PipelineAPI.getStages();
+      this.stages.forEach((stage) => {
+        stage.configs.forEach((config) => {
+          // value为数组字符串
+          if (config.value && config.value.startsWith('[') && config.value.endsWith(']')) {
+            try {
+              config.value = JSON.parse(config.value);
+            } catch (e) {
+              console.error('JSON parse error:', e);
+            }
+          }
+        });
+      });
+    },
+    async getTemplateOptions() {
+      const templates = await PipelineAPI.getPipelineTemplates();
+      Object.keys(templates).forEach((key) => {
+        this.templateOptions.push({
+          value: key,
+          label: key,
+          children: templates[key].map((templateName) => ({
+            value: templateName,
+            label: templateName,
+          })),
+        });
+      });
+    },
+    handleSelectTemplate(value) {
+      const [, templateName] = value;
+      console.log('选择的模板', templateName);
+      this.createPipelineForm.template = templateName;
+    },
     async handleClick(action, id) {
       switch (action) {
         case 'create': {
@@ -474,6 +517,8 @@ export default {
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
           })).configJson;
+          console.log('stages', this.stages);
+          console.log('config', config);
           this.pipelineConfig = JSON.parse(config || '{}');
           this.pipelineConfigTemplate = JSON.parse(config || '{}');
           this.pipelineConfig.forEach((item) => {
@@ -481,7 +526,7 @@ export default {
             if (targetStage) {
               targetStage.configs.forEach((configTemplate) => {
                 // 如果config
-                if (!item.configs[configTemplate.name] || item.configs[configTemplate.name] === '#auto') {
+                if (item.configs[configTemplate.name] === '#auto') {
                   item.configs[configTemplate.name] = this.parseConfigValue(configTemplate.value);
                 }
               });
@@ -564,6 +609,18 @@ export default {
     getStage(stageName) {
       return this.stages.find((stage) => stage.name === stageName);
     },
+    getConfigValue(stageName, configName) {
+      console.log('getConfigValue', stageName, configName);
+      const stage = this.getStage(stageName);
+      if (stage) {
+        const targetConfig = stage.configs.find((config) => config.name === configName);
+        if (targetConfig) {
+          console.log('targetConfig', targetConfig);
+          return targetConfig.value;
+        }
+      }
+      return null;
+    },
     async showLog(pipelineId) {
       this.currentLogId = pipelineId;
       this.showProductionLogModal = true;