feat(接口测试): 脚本操作抽屜

frontend/src/views/api-test/components/condition/content.vue

@@ -125,6 +125,18 @@
             </a-popover>
           </div>
           <div class="flex items-center gap-[8px]">
+            <a-button
+              v-if="props.isFormat"
+              type="outline"
+              class="arco-btn-outline--secondary p-[0_8px]"
+              size="mini"
+              @click="formatCoding"
+            >
+              <template #icon>
+                <MsIcon type="icon-icon_clear" class="text-var(--color-text-4)" size="12" />
+              </template>
+              {{ t('project.commonScript.formatting') }}
+            </a-button>
             <a-button type="outline" class="arco-btn-outline--secondary p-[0_8px]" size="mini" @click="undoScript">
               <template #icon>
                 <MsIcon type="icon-icon_undo_outlined" class="text-var(--color-text-4)" size="12" />
@@ -462,6 +474,7 @@
       requestRadioTextProps?: Record<string, any>; // 前后置请求前后置按钮文本
       showPrePostRequest?: boolean; // 是否展示前后置请求忽略
       totalList?: ExecuteConditionProcessor[]; // 总列表
+      isFormat?: boolean;
     }>(),
     {
       showAssociatedScene: false,
@@ -541,6 +554,9 @@ if (!result){
   function clearScript() {
     condition.value.script = '';
   }
+  function formatCoding() {
+    scriptDefinedRef.value?.formatCoding();
+  }
 
   /**
    * 复制条件

frontend/src/views/api-test/scenario/components/common/scriptOperationDrawer.vue

@@ -5,19 +5,89 @@
     :width="960"
     no-content-padding
     disabled-width-drag
+    @cancel="handleDrawerCancel"
   >
-    waiting scriptOperation
+    <div class="ml-[16px] mt-[10px]">
+      {{ t('apiScenario.scriptOperationName') }}
+    </div>
+    <div class="ml-[16px] mt-[3px] max-w-[70%]">
+      <a-input
+        v-model="scriptName"
+        :placeholder="t('apiScenario.scriptOperationNamePlaceholder')"
+        :max-length="255"
+        size="small"
+      />
+    </div>
+    <div class="mt-[10px] flex h-[calc(100%-40px)] gap-[8px]">
+      <conditionContent v-model:data="activeItem" :is-build-in="true" :is-format="true" />
+    </div>
+    <template #footer>
+      <a-button type="secondary" @click="handleDrawerCancel">
+        {{ t('common.cancel') }}
+      </a-button>
+      <a-button type="secondary" @click="saveAndContinue">
+        {{ t('common.saveAndContinue') }}
+      </a-button>
+      <a-button type="primary" @click="save">
+        {{ t('common.add') }}
+      </a-button>
+    </template>
   </MsDrawer>
 </template>
 
 <script setup lang="ts">
+  import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import conditionContent from '@/views/api-test/components/condition/content.vue';
 
   import { useI18n } from '@/hooks/useI18n';
 
+  import { ExecuteConditionProcessor, ScriptProcessor } from '@/models/apiTest/common';
+  import { RequestConditionProcessor } from '@/enums/apiEnum';
+
+  const scriptName = ref('');
+  const activeItem = ref({
+    processorType: RequestConditionProcessor.SCRIPT,
+    enableCommonScript: false,
+    script: '',
+    scriptLanguage: LanguageEnum.BEANSHELL,
+    commonScriptInfo: {},
+  } as ExecuteConditionProcessor);
+
   const { t } = useI18n();
 
   const visible = defineModel<boolean>('visible', { required: true });
+
+  const emit = defineEmits<{
+    (e: 'save', name: string, scriptProcessor: ExecuteConditionProcessor): void;
+  }>();
+
+  function resetField() {
+    scriptName.value = '';
+    activeItem.value = {
+      processorType: RequestConditionProcessor.SCRIPT,
+      enableCommonScript: false,
+      script: '',
+      scriptLanguage: LanguageEnum.BEANSHELL,
+      commonScriptInfo: {},
+    } as ExecuteConditionProcessor;
+  }
+
+  function handleDrawerCancel() {
+    resetField();
+    visible.value = false;
+  }
+
+  function saveAndContinue() {
+    emit('save', scriptName.value, activeItem.value as ScriptProcessor);
+    resetField();
+  }
+
+  function save() {
+    emit('save', scriptName.value, activeItem.value as ScriptProcessor);
+    resetField();
+    visible.value = false;
+  }
 </script>
 
 <style lang="less" scoped></style>

frontend/src/views/api-test/scenario/locale/en-US.ts

@@ -78,4 +78,7 @@ export default {
   'api_scenario.recycle.list': 'Recycle list',
   'api_scenario.recycle.batchCleanOut': 'Delete',
   'api_scenario.table.searchPlaceholder': 'Search by ID/Name/Tag',
+
+  'apiScenario.scriptOperationName': 'Script operation name',
+  'apiScenario.scriptOperationNamePlaceholder': 'Please enter the script operation name',
 };

frontend/src/views/api-test/scenario/locale/zh-CN.ts

@@ -139,4 +139,7 @@ export default {
   'apiScenario.quoteTableSearchTip': '通过路径或名称搜索',
   'apiScenario.collapseAll': '收起全部子模块',
   'apiScenario.expandAll': '展开全部子模块',
+
+  'apiScenario.scriptOperationName': '脚本操作名称',
+  'apiScenario.scriptOperationNamePlaceholder': '请输入脚本操作名称',
 };