refactor: 代码模版菜单优化

frontend/src/business/components/api/automation/scenario/common/Jsr233ProcessorContent.vue

@@ -229,7 +229,7 @@
 
   .script-content {
     height: calc(100vh - 570px);
-    min-height: 460px;
+    min-height: 440px;
   }
 
   .script-index {
@@ -257,7 +257,7 @@
   .show-menu {
     text-align:center;
     font-weight: bold;
-    color:#BBA3D0;
+    color:#935aa1;
     font-size: 18px;
     cursor: pointer;
   }

frontend/src/business/components/settings/project/function/EditFunction.vue

@@ -40,7 +40,7 @@
                         <ms-code-edit
                           v-if="isCodeEditAlive"
                           :mode="codeEditModeMap[form.type]"
-                          height="460px"
+                          height="440px"
                           :data.sync="form.script"
                           theme="eclipse"
                           :modes="modes"
@@ -48,7 +48,7 @@
                       </el-tab-pane>
                       <el-tab-pane :label="$t('project.code_segment.result')" name="result">
                         <div v-loading="runResult.loading">
-                          <ms-code-edit :mode="'text'" :data.sync="console" v-if="isResultAlive" height="330px"
+                          <ms-code-edit :mode="'text'" :data.sync="console" v-if="isResultAlive" height="440px"
                                         ref="funcResult"/>
                         </div>
                       </el-tab-pane>
@@ -338,7 +338,7 @@ export default {
 .show-menu {
   text-align:center;
   font-weight: bold;
-  color:#BBA3D0;
+  color:#935aa1;
   font-size: 18px;
   cursor: pointer;
 }

frontend/src/business/components/settings/project/function/ScriptNavMenu.vue

@@ -1,16 +1,27 @@
 <template>
   <div style="line-height: 20px;">
-    <div class="template-title">{{ $t('api_test.request.processor.code_template') }}</div>
-    <div v-for="(menu, index) in menus" :key="index">
-      <span class="link-type"><i class="el-icon-arrow-right" style="font-weight: bold;"></i> {{menu.title}}</span>
-      <div v-for="(child, key) in menu.children" :key="key">
-        <el-link :disabled="child.disabled" @click="handleClick(child)" class="func-link">{{child.title}}</el-link>
-      </div>
+    <div class="template-title">
+      <span>{{ $t('api_test.request.processor.code_template') }}</span>
+      <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
+               target="componentReferenceDoc" style="margin-left: 30px; margin-bottom: 3px;"
+               type="primary">{{ $t('commons.reference_documentation') }}
+      </el-link>
+    </div>
+    <div v-for="(menu, index) in menus" :key="index">
+      <span class="link-type">
+        <i class="icon el-icon-arrow-right" style="font-weight: bold; margin-right: 2px;"
+           @click="active(menu)" :class="{'is-active': menu.open}"></i>
+        <span @click="active(menu)" class="nav-menu-title">{{menu.title}}</span>
+      </span>
+
+      <el-collapse-transition>
+        <div v-if="menu.open">
+          <div v-for="(child, key) in menu.children" :key="key">
+            <el-link :disabled="child.disabled" @click="handleClick(child)" class="func-link">{{child.title}}</el-link>
+          </div>
+        </div>
+      </el-collapse-transition>
     </div>
-    <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
-             target="componentReferenceDoc" style="margin-top: 10px; margin-left: 20px;"
-             type="primary">{{ $t('commons.reference_documentation') }}
-    </el-link>
     <custom-function-relate ref="customFunctionRelate" @addCustomFuncScript="handleCodeTemplate"/>
     <!--接口列表-->
     <api-func-relevance @save="apiSave" @close="apiClose" ref="apiFuncRelevance"/>
@@ -164,6 +175,13 @@ export default {
         default:
           return "";
       }
+    },
+    active(menu) {
+      if (!menu.open) {
+        this.$set(menu, "open", true);
+      } else {
+        this.$set(menu, "open", !menu.open);
+      }
     }
   }
 }
@@ -187,4 +205,12 @@ export default {
   font-weight: bold;
   font-size: 14px;
 }
+
+.icon.is-active {
+  transform: rotate(90deg);
+}
+
+.nav-menu-title:hover {
+  cursor: pointer;
+}
 </style>