feat(json-schema): ms-json-schema组件雏形

frontend/src/assets/style/global.less

@@ -121,3 +121,36 @@ body {
     background-color: rgb(var(--danger-1));
   }
 }
+
+/* 参数输入框 popover */
+.ms-params-input-popover {
+  .arco-trigger-popup-wrapper {
+    .arco-popover-popup-content {
+      padding: 4px 8px;
+    }
+  }
+
+  max-width: 400px;
+}
+.ms-params-popover-title {
+  @apply font-medium;
+
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--color-text-1);
+}
+.ms-params-popover-subtitle {
+  margin-bottom: 2px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--color-text-1);
+}
+.ms-params-popover-value {
+  min-width: 100px;
+  max-width: 280px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--color-text-1);
+}

frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue

@@ -28,10 +28,10 @@
             class="ms-params-input-popover"
           >
             <template #content>
-              <div class="param-popover-title">
+              <div class="ms-params-popover-title">
                 {{ t('apiTestDebug.expression') }}
               </div>
-              <div class="param-popover-value">
+              <div class="ms-params-popover-value">
                 {{ record.expression }}
               </div>
             </template>
@@ -135,10 +135,10 @@
             class="ms-params-input-popover"
           >
             <template #content>
-              <div class="param-popover-title">
+              <div class="ms-params-popover-title">
                 {{ t('apiTestDebug.expression') }}
               </div>
-              <div class="param-popover-value">
+              <div class="ms-params-popover-value">
                 {{ record.expression }}
               </div>
             </template>
@@ -282,10 +282,10 @@
             class="ms-params-input-popover"
           >
             <template #content>
-              <div class="param-popover-title">
+              <div class="ms-params-popover-title">
                 {{ t('apiTestDebug.expression') }}
               </div>
-              <div class="param-popover-value">
+              <div class="ms-params-popover-value">
                 {{ record.expression }}
               </div>
             </template>
@@ -700,14 +700,14 @@
    */
   function handleFastExtractionApply(
     config: RegexExtract | JSONPathExtract | XPathExtract,
-    matchResult: Record<string, any>
+    matchResult: string[] | string
   ) {
     condition.value.jsonPathAssertion.assertions = condition.value.jsonPathAssertion.assertions?.map((e: Param) => {
       if (e.id === activeRecord.value.id) {
         return {
           ...e,
           ...config,
-          expectedValue: matchResult.join(''),
+          expectedValue: Array.isArray(matchResult) ? JSON.stringify(matchResult) : matchResult,
         };
       }
       return e;
@@ -817,11 +817,6 @@
     }
   }
 
-  /**
-   * 删除列表项
-   */
-  function deleteListItem(id: string | number) {}
-
   function showFastExtraction(record: ExpressionConfig, type: ExpressionType) {
     if (props.disabled || !props.response) return;
     activeRecord.value = { ...record, extractType: type };
@@ -921,8 +916,4 @@
       }
     }
   };
-
-  const handleScriptChange = (data: ExecuteConditionProcessor) => {
-    condition.value.script = data;
-  };
 </script>

frontend/src/components/business/ms-minders/featureCaseMinder/index.vue

@@ -767,7 +767,7 @@
    */
   function makeMinderParams(fullJson: MinderJson): FeatureCaseMinderUpdateParams {
     filterTree(fullJson.root.children, (node, nodeIndex, parent) => {
-      if (node.data.isNew !== false || node.data.changed === true) {
+      if (node.data?.type !== 'tmp' && (node.data.isNew !== false || node.data.changed === true)) {
         if (node.data.resource?.includes(moduleTag)) {
           // 处理模块节点
           tempMinderParams.value.updateModuleList.push({

frontend/src/components/business/ms-params-input/index.vue

@@ -654,15 +654,6 @@
 </script>
 
 <style lang="less">
-  .ms-params-input-popover {
-    .arco-trigger-popup-wrapper {
-      .arco-popover-popup-content {
-        padding: 4px 8px;
-      }
-    }
-
-    max-width: 400px;
-  }
   .ms-params-input-setting-trigger {
     @apply bg-white;
     .ms-params-input-setting-trigger-content {
@@ -757,26 +748,4 @@
       }
     }
   }
-  .ms-params-popover-title {
-    @apply font-medium;
-
-    margin-bottom: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .ms-params-popover-subtitle {
-    margin-bottom: 2px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .ms-params-popover-value {
-    min-width: 100px;
-    max-width: 280px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
 </style>

frontend/src/components/business/ms-quick-input/index.vue

@@ -1,10 +1,10 @@
 <template>
   <a-popover position="tl" :disabled="!modelValue || modelValue.trim() === ''" class="ms-params-input-popover">
     <template #content>
-      <div v-if="props.title" class="param-popover-title">
+      <div v-if="props.title" class="ms-params-popover-title">
         {{ props.title }}
       </div>
-      <div class="param-popover-value">
+      <div class="ms-params-popover-value">
         {{ modelValue }}
       </div>
     </template>
@@ -129,20 +129,4 @@
       border-color: transparent;
     }
   }
-  .param-popover-title {
-    @apply font-medium;
-
-    margin-bottom: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .param-popover-value {
-    min-width: 100px;
-    max-width: 280px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
 </style>

frontend/src/components/pure/ms-code-editor/index.vue

@@ -303,6 +303,8 @@
           ...props,
           language: props.language.toLowerCase(),
           theme: currentTheme.value,
+          lineNumbersMinChars: 3,
+          lineDecorationsWidth: 0,
         });
 
         editor.getModel()?.setEOL(monaco.editor.EndOfLineSequence.LF); // 设置换行符

frontend/src/components/pure/ms-drawer/index.vue

@@ -126,7 +126,6 @@
 
   import useFullScreen, { UseFullScreen } from '@/hooks/useFullScreen';
   import { useI18n } from '@/hooks/useI18n';
-  import { characterLimit } from '@/utils';
   import { getMaxZIndexLayer } from '@/utils/dom';
   // 懒加载描述组件
   const MsDescription = defineAsyncComponent(() => import('@/components/pure/ms-description/index.vue'));

frontend/src/components/pure/ms-form-table/index.vue

@@ -2,22 +2,26 @@
   <a-form ref="formRef" :model="propsRes" layout="vertical">
     <MsBaseTable
       v-bind="propsRes"
+      v-model:original-selected-keys="originalSelectedKeys"
+      v-model:expanded-keys="expandedKeys"
       :hoverable="false"
       is-simple-setting
       :span-method="props.spanMethod"
       :class="!props.selectable && !props.draggable ? 'ms-form-table-no-left-action' : ''"
+      bordered
       v-on="propsEvent"
       @drag-change="tableChange"
       @init-end="validateAndUpdateErrorMessageList"
+      @select="handleSelect"
     >
       <!-- 展开行-->
       <template #expand-icon="{ expanded, record }">
         <div
-          class="flex items-center gap-[2px] text-[var(--color-text-4)]"
+          class="flex items-end gap-[2px] text-[var(--color-text-4)]"
-          :class="expanded ? 'rgb(var(--primary-5))' : ''"
+          :class="expanded ? '!text-[rgb(var(--primary-5))]' : ''"
         >
-          <MsIcon type="icon_split-turn-down-left" />
+          <MsIcon type="icon-icon_split_turn-down_arrow" />
-          <div v-if="record.children">{{ record.children.length }}</div>
+          <div v-if="record.children" class="break-keep">{{ record.children.length }}</div>
         </div>
       </template>
       <template
@@ -33,6 +37,7 @@
               validRepeat(rowIndex, item.dataIndex as string, value, callback);
             },
           }"
+          :disabled="item.disabled || record.disabled"
         >
           <slot
             :name="item.slotName"
@@ -48,7 +53,7 @@
                   record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
                   '!mr-[4px] !p-[4px]',
                 ]"
-                size="mini"
+                :size="item.size || 'medium'"
                 @click="toggleRequired(record, rowIndex, item)"
               >
                 <div>*</div>
@@ -60,7 +65,7 @@
               :placeholder="t(item.locale)"
               class="ms-form-table-input"
               :max-length="255"
-              size="mini"
+              :size="item.size || 'medium'"
               @input="() => handleFormChange(record, rowIndex, item)"
             />
             <a-select
@@ -68,7 +73,7 @@
               v-model:model-value="record[item.dataIndex as string]"
               :options="item.typeOptions || []"
               class="ms-form-table-input w-full"
-              size="mini"
+              :size="item.size || 'medium'"
               @change="() => handleFormChange(record, rowIndex, item)"
             />
             <MsTagsInput
@@ -76,14 +81,14 @@
               v-model:model-value="record[item.dataIndex as string]"
               :max-tag-count="1"
               input-class="ms-form-table-input"
-              size="mini"
+              :size="item.size || 'medium'"
               @change="() => handleFormChange(record, rowIndex, item)"
               @clear="() => handleFormChange(record, rowIndex, item)"
             />
             <a-switch
               v-else-if="item.inputType === 'switch'"
               v-model:model-value="record[item.dataIndex as string]"
-              size="small"
+              :size="(item.size as any) || 'medium'"
               class="ms-form-table-input-switch"
               type="line"
               @change="() => handleFormChange(record, rowIndex, item)"
@@ -91,6 +96,7 @@
             <a-checkbox
               v-else-if="item.inputType === 'checkbox'"
               v-model:model-value="record[item.dataIndex as string]"
+              :size="item.size || 'medium'"
               @change="() => handleFormChange(record, rowIndex, item)"
             />
             <template v-else-if="item.inputType === 'autoComplete'">
@@ -100,7 +106,7 @@
                 class="ms-form-table-input"
                 :trigger-props="{ contentClass: 'ms-form-table-input-trigger' }"
                 :filter-option="false"
-                size="small"
+                :size="item.size || 'medium'"
                 @search="(val) => handleSearchParams(val, item)"
                 @change="() => handleFormChange(record, rowIndex, item)"
                 @select="(val) => selectAutoComplete(val, record, item)"
@@ -120,13 +126,30 @@
             <a-input-number
               v-else-if="item.inputType === 'inputNumber'"
               v-model:model-value="record[item.dataIndex as string]"
+              class="ms-form-table-input-number"
               :min="item.min"
               :max="item.max"
+              :size="item.size || 'medium'"
+              :precision="item.precision"
+              @change="() => handleFormChange(record, rowIndex, item)"
             ></a-input-number>
             <a-textarea
               v-else-if="item.inputType === 'textarea'"
               v-model:model-value="record[item.dataIndex as string]"
+              class="ms-form-table-input"
+              :auto-size="{ minRows: 1, maxRows: 1 }"
+              :size="item.size || 'medium'"
+              @change="() => handleFormChange(record, rowIndex, item)"
             ></a-textarea>
+            <MsQuickInput
+              v-else-if="item.inputType === 'quickInput'"
+              v-model:model-value="record[item.dataIndex as string]"
+              :title="item.title as string || ''"
+              class="ms-form-table-input"
+              type="textarea"
+              @change="() => handleFormChange(record, rowIndex, item)"
+            >
+            </MsQuickInput>
             <template v-else-if="item.inputType === 'text'">
               {{
                 typeof item.valueFormat === 'function'
@@ -149,12 +172,17 @@
                   :list="getMoreActionList(item.moreAction, record)"
                   @select="(e) => handleMoreActionSelect(e, record, item, rowIndex)"
                 />
-                <icon-minus-circle
+                <slot
-                  v-if="dataLength > 1 && rowIndex !== dataLength - 1"
+                  name="operationDelete"
-                  class="ml-[8px] cursor-pointer text-[var(--color-text-4)]"
+                  v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
-                  size="20"
+                >
-                  @click="deleteParam(record, rowIndex)"
+                  <icon-minus-circle
-                />
+                    v-if="dataLength > 1 && rowIndex !== dataLength - 1"
+                    class="ml-[8px] cursor-pointer text-[var(--color-text-4)]"
+                    size="20"
+                    @click="deleteParam(record, rowIndex)"
+                  />
+                </slot>
               </div>
             </template>
           </slot>
@@ -185,6 +213,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
+  import MsQuickInput from '@/components/business/ms-quick-input/index.vue';
 
   import { useI18n } from '@/hooks/useI18n';
   import useTableStore from '@/hooks/useTableStore';
@@ -192,7 +221,7 @@
   import { SelectAllEnum, TableKeyEnum } from '@/enums/tableEnum';
 
   import { ActionsItem } from '../ms-table-more-action/types';
-  import type { SelectOptionData, TableColumnData, TableData } from '@arco-design/web-vue';
+  import type { SelectOptionData, TableColumnData, TableData, TableRowSelection } from '@arco-design/web-vue';
   import { TableOperationColumn } from '@arco-design/web-vue/es/table/interface';
 
   export interface FormTableColumn extends MsTableColumnData {
@@ -207,14 +236,18 @@
       | 'checkbox'
       | 'autoComplete'
       | 'textarea'
-      | 'inputNumber'; // 输入组件类型
+      | 'inputNumber'
+      | 'quickInput'; // 输入组件类型
     autoCompleteParams?: SelectOptionData[]; // 自动补全参数
     needValidRepeat?: boolean; // 是否需要判断重复
     maxLength?: number;
+    disabled?: boolean; // 是否禁用
+    size?: 'mini' | 'small' | 'medium' | 'large'; // 输入框大小
     // 数字输入框属性
     min?: number;
     max?: number;
     step?: number;
+    precision?: number;
     valueFormat?: (record: Record<string, any>) => string; // 展示值格式化，仅在inputType为text时生效
     [key: string]: any; // 扩展属性
   }
@@ -237,6 +270,7 @@
       tableKey?: TableKeyEnum; // 表格key showSetting为true时必传
       disabled?: boolean; // 是否禁用
       showSelectorAll?: boolean; // 是否显示全选
+      rowSelection?: TableRowSelection;
       spanMethod?: (data: {
         record: TableData;
         column: TableColumnData | TableOperationColumn;
@@ -261,11 +295,15 @@
       columnConfig: FormTableColumn,
       rowIndex: number
     ): void;
+    (e: 'select', rowKeys: (string | number)[], _rowKey: string | number, record: TableData): void;
   }>();
 
   const { t } = useI18n();
   const tableStore = useTableStore();
 
+  const expandedKeys = defineModel<string[]>('expandedKeys', { default: [] });
+  const originalSelectedKeys = defineModel<(string | number)[]>('originalSelectedKeys', { default: [] });
+
   async function initColumns() {
     if (props.showSetting && props.tableKey) {
       await tableStore.initColumn(props.tableKey, props.columns);
@@ -284,8 +322,8 @@
     disabled: props.disabled,
     showSelectorAll: props.showSelectorAll,
     showPagination: false,
+    rowSelection: props.selectable ? undefined : props.rowSelection,
   });
-
   const selectedKeys = computed(() => propsRes.value.data.filter((e) => e.enable).map((e) => e.id));
   propsEvent.value.rowSelectChange = (record: Record<string, any>) => {
     propsRes.value.data = propsRes.value.data.map((e) => {
@@ -448,17 +486,67 @@
     record[item.dataIndex as string] = val;
   }
 
+  function handleSelect(rowKeys: (string | number)[], rowKey: string | number, record: TableData) {
+    emit('select', rowKeys, rowKey, record);
+  }
+
   await initColumns();
 </script>
 
 <style lang="less" scoped>
+  :deep(.ms-base-table) {
+    .arco-table-th {
+      .arco-table-cell {
+        padding: 5px 8px !important;
+        line-height: 1.5715;
+      }
+    }
+    .arco-table-td {
+      height: 32px;
+      .arco-table-cell {
+        padding: 0 !important;
+        .arco-select-view-single,
+        .arco-input-wrapper,
+        .arco-textarea-wrapper {
+          border-radius: 0;
+        }
+      }
+    }
+    .arco-table-col-fixed-right {
+      .arco-table-cell {
+        padding: 0 8px !important;
+      }
+    }
+    .arco-table-tr-checked {
+      .arco-table-td {
+        background-color: white;
+      }
+    }
+    .arco-scrollbar-track-direction-horizontal {
+      bottom: -8px;
+    }
+  }
+  :deep(.arco-table-content) {
+    border-top: 1px solid var(--color-text-n8) !important;
+    border-right: 1px solid var(--color-text-n8) !important;
+    border-left: 1px solid var(--color-text-n8) !important;
+    border-radius: var(--border-radius-small);
+  }
   :deep(.arco-table-th) {
-    background-color: var(--color-text-n9);
     line-height: normal;
   }
   :deep(.arco-table .arco-table-cell) {
     padding: 8px 2px;
   }
+  :deep(.arco-table-expand-btn) {
+    padding: 0 5px;
+    width: auto;
+  }
+  :deep(.arco-table-cell-expand-icon) {
+    .arco-table-cell-inline-icon {
+      margin-right: 0;
+    }
+  }
   .ms-form-table-no-left-action {
     :deep(.arco-table .arco-table-cell) {
       padding: 8px 16px;
@@ -485,7 +573,7 @@
       color: var(--color-text-4) !important;
     }
   }
-  :deep(.ms-form-table-input:not(.arco-input-focus, .arco-select-view-focus)) {
+  :deep(.ms-form-table-input:not(.arco-input-focus, .arco-select-view-focus, .arco-textarea-focus)) {
     &:not(:hover) {
       @apply bg-transparent;
 
@@ -516,14 +604,14 @@
   }
   :deep(.ms-form-table-input-number) {
     @apply bg-transparent pr-0;
-    .arco-input {
+
-      @apply text-right;
+    border-color: transparent !important;
-    }
     .arco-input-suffix {
       @apply hidden;
     }
     &:hover,
     &.arco-input-focus {
+      border-color: rgb(var(--primary-5)) !important;
       .arco-input {
         @apply text-left;
       }
@@ -535,22 +623,6 @@
   :deep(.arco-table-expand-btn) {
     background: transparent;
   }
-  .ms-form-table-popover-title {
-    @apply font-medium;
-
-    margin-bottom: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .ms-form-table-popover-value {
-    min-width: 100px;
-    max-width: 280px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
   :deep(.arco-form-item) {
     margin-bottom: 0;
     .arco-form-item-label-col {

frontend/src/components/pure/ms-json-schema/index.vue

@@ -1,18 +1,768 @@
 <template>
-  <MsFormTable :data="data" :columns="props.columns"> </MsFormTable>
+  <MsFormTable
+    v-model:originalSelectedKeys="selectedKeys"
+    v-model:expanded-keys="expandKeys"
+    :data="data"
+    :columns="columns"
+    show-empty-tree
+    :selectable="false"
+    :row-selection="{
+      type: 'checkbox',
+      showCheckedAll: true,
+      checkStrictly: true,
+      width: 32,
+    }"
+    :table-key="TableKeyEnum.JSON_SCHEMA"
+    :scroll="{ x: 'max-content' }"
+    show-setting
+    class="ms-json-schema"
+    @select="handleSelect"
+  >
+    <template #batchAddTitle>
+      <MsButton type="text" size="mini" class="!mr-0" @click="batchAdd">
+        {{ t('apiTestDebug.batchAdd') }}
+      </MsButton>
+    </template>
+    <template #title="{ record, columnConfig }">
+      <span v-if="record.title === 'root'" class="px-[8px]">root</span>
+      <a-popover
+        v-else
+        position="tl"
+        :disabled="!record.title || record.title.trim() === ''"
+        class="ms-params-input-popover"
+      >
+        <template #content>
+          <div class="ms-params-popover-title">
+            {{ t('ms.json.schema.name') }}
+          </div>
+          <div class="ms-params-popover-value">
+            {{ record.title }}
+          </div>
+        </template>
+        <a-input
+          v-model:model-value="record.title"
+          :placeholder="t(columnConfig.locale)"
+          class="ms-form-table-input"
+          :max-length="255"
+          size="medium"
+        />
+      </a-popover>
+    </template>
+    <template #type="{ record }">
+      <a-tooltip
+        v-if="record.id !== 'root'"
+        :content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
+      >
+        <MsButton
+          type="icon"
+          :class="[
+            record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
+            '!mr-[4px] !p-[4px]',
+          ]"
+          size="mini"
+          @click="() => (record.required = !record.required)"
+        >
+          <div>*</div>
+        </MsButton>
+      </a-tooltip>
+      <a-select
+        v-model:model-value="record.type"
+        :options="getTypeOptions(record)"
+        class="ms-form-table-input w-full"
+        size="medium"
+        @change="handleTypeChange(record)"
+      />
+    </template>
+    <template #value="{ record }">
+      <MsParamsInput v-model:value="record.value" size="medium" @dblclick="() => quickInputParams(record)" />
+    </template>
+    <template #minLength="{ record }">
+      <a-input-number
+        v-if="record.type === 'string'"
+        v-model:model-value="record.minLength"
+        class="ms-form-table-input-number"
+        :min="0"
+        :precision="0"
+        size="medium"
+      />
+      <div v-else class="ms-json-schema-td-text">-</div>
+    </template>
+    <template #maxLength="{ record }">
+      <a-input-number
+        v-if="record.type === 'string'"
+        v-model:model-value="record.maxLength"
+        class="ms-form-table-input-number"
+        :min="0"
+        :precision="0"
+        size="medium"
+      />
+      <div v-else class="ms-json-schema-td-text">-</div>
+    </template>
+    <template #minimum="{ record }">
+      <a-input-number
+        v-if="record.type === 'number'"
+        v-model:model-value="record.minimum"
+        class="ms-form-table-input-number"
+        size="medium"
+      />
+      <a-input-number
+        v-else-if="record.type === 'integer'"
+        v-model:model-value="record.minimum"
+        class="ms-form-table-input-number"
+        size="medium"
+        :step="1"
+        :precision="0"
+      />
+      <div v-else class="ms-json-schema-td-text">-</div>
+    </template>
+    <template #maximum="{ record }">
+      <a-input-number
+        v-if="record.type === 'number'"
+        v-model:model-value="record.maximum"
+        class="ms-form-table-input-number"
+        size="medium"
+      />
+      <a-input-number
+        v-else-if="record.type === 'integer'"
+        v-model:model-value="record.maximum"
+        class="ms-form-table-input-number"
+        size="medium"
+        :step="1"
+        :precision="0"
+      />
+      <div v-else class="ms-json-schema-td-text">-</div>
+    </template>
+    <template #defaultValue="{ record }">
+      <a-input-number
+        v-if="record.type === 'number'"
+        v-model:model-value="record.defaultValue"
+        class="ms-form-table-input-number"
+        size="medium"
+      />
+      <a-input-number
+        v-else-if="record.type === 'integer'"
+        v-model:model-value="record.defaultValue"
+        class="ms-form-table-input-number"
+        size="medium"
+        :step="1"
+        :precision="0"
+      />
+      <a-select
+        v-else-if="record.type === 'boolean'"
+        v-model:model-value="record.defaultValue"
+        class="ms-form-table-input"
+        size="medium"
+        :options="[
+          {
+            label: 'true',
+            value: true,
+          },
+          {
+            label: 'false',
+            value: false,
+          },
+        ]"
+      />
+      <div v-else-if="['object', 'array', 'null'].includes(record.type)" class="ms-json-schema-td-text"> - </div>
+      <a-input
+        v-else
+        v-model:model-value="record.defaultValue"
+        :placeholder="t('common.pleaseInput')"
+        class="ms-form-table-input"
+      />
+    </template>
+    <template #action="{ record, rowIndex }">
+      <div class="flex w-full items-center gap-[8px]">
+        <a-tooltip :content="t('common.advancedSettings')">
+          <MsButton type="icon" class="ms-json-schema-icon-button" @click="openSetting(record)">
+            <icon-settings class="text-[var(--color-text-4)]" />
+          </MsButton>
+        </a-tooltip>
+        <a-tooltip v-if="['object', 'array'].includes(record.type)" :content="t('ms.json.schema.addChild')">
+          <MsButton type="icon" class="ms-json-schema-icon-button" @click="addChild(record)">
+            <MsIcon type="icon-icon_add_outlined" class="text-[var(--color-text-4)]" />
+          </MsButton>
+        </a-tooltip>
+        <a-tooltip v-if="record.id !== 'root'" :content="t('common.delete')">
+          <MsButton type="icon" class="ms-json-schema-icon-button" @click="deleteLine(record, rowIndex)">
+            <icon-minus-circle class="cursor-pointer text-[var(--color-text-4)]" size="18" />
+          </MsButton>
+        </a-tooltip>
+      </div>
+    </template>
+  </MsFormTable>
+  <a-modal
+    v-model:visible="showQuickInputParam"
+    :title="t('ms.paramsInput.value')"
+    :ok-text="t('apiTestDebug.apply')"
+    :ok-button-props="{ disabled: !quickInputParamValue || quickInputParamValue.trim() === '' }"
+    class="ms-modal-form"
+    body-class="!p-0"
+    :width="680"
+    title-align="start"
+    @ok="applyQuickInputParam"
+    @close="clearQuickInputParam"
+  >
+    <MsCodeEditor
+      v-if="showQuickInputParam"
+      v-model:model-value="quickInputParamValue"
+      theme="vs"
+      height="300px"
+      :show-full-screen="false"
+    >
+      <template #rightTitle>
+        <div class="flex justify-between">
+          <div class="text-[var(--color-text-4)]">
+            {{ t('apiTestDebug.quickInputParamsTip') }}
+          </div>
+        </div>
+      </template>
+    </MsCodeEditor>
+  </a-modal>
+  <MsDrawer
+    v-model:visible="settingDrawerVisible"
+    :width="600"
+    :title="t('ms.json.schema.advancedSettings')"
+    :ok-text="t('common.save')"
+    @confirm="applySetting"
+  >
+    <a-form ref="setting" :model="activeRecord" layout="vertical">
+      <a-form-item
+        :label="t('ms.json.schema.name')"
+        :rules="[{ required: true, message: t('ms.json.schema.nameNotNull') }]"
+        asterisk-position="end"
+      >
+        <a-input
+          v-model:model-value="activeRecord.name"
+          :max-length="255"
+          :placeholder="t('common.pleaseInput')"
+          :disabled="activeRecord.id === 'root'"
+        />
+      </a-form-item>
+      <a-form-item :label="t('common.desc')">
+        <a-textarea v-model:model-value="activeRecord.description" :placeholder="t('common.pleaseInput')" />
+      </a-form-item>
+      <template v-if="!['object', 'array', 'null'].includes(activeRecord.type)">
+        <div class="flex items-center justify-between gap-[24px]">
+          <template v-if="!['boolean', 'number', 'integer'].includes(activeRecord.type)">
+            <a-form-item :label="t('ms.json.schema.minLength')" class="w-[144px]">
+              <a-input-number
+                v-model:model-value="activeRecord.minLength"
+                mode="button"
+                :min="0"
+                :step="1"
+                :precision="0"
+              />
+            </a-form-item>
+            <a-form-item :label="t('ms.json.schema.maxLength')" class="w-[144px]">
+              <a-input-number
+                v-model:model-value="activeRecord.maxLength"
+                mode="button"
+                :min="0"
+                :step="1"
+                :precision="0"
+              />
+            </a-form-item>
+          </template>
+          <template v-else-if="['number', 'integer'].includes(activeRecord.type)">
+            <a-form-item :label="t('ms.json.schema.minimum')" class="w-[144px]">
+              <a-input-number
+                v-if="activeRecord.type === 'integer'"
+                v-model:model-value="activeRecord.minimum"
+                mode="button"
+                :step="1"
+                :precision="0"
+              />
+              <a-input-number v-else v-model:model-value="activeRecord.minimum" mode="button" />
+            </a-form-item>
+            <a-form-item :label="t('ms.json.schema.maximum')" class="w-[144px]">
+              <a-input-number
+                v-if="activeRecord.type === 'integer'"
+                v-model:model-value="activeRecord.maximum"
+                mode="button"
+                :step="1"
+                :precision="0"
+              />
+              <a-input-number v-else v-model:model-value="activeRecord.maximum" mode="button" />
+            </a-form-item>
+          </template>
+          <a-form-item :label="t('ms.json.schema.default')" class="flex-1">
+            <a-input-number
+              v-if="activeRecord.type === 'number'"
+              v-model:model-value="activeRecord.defaultValue"
+              mode="button"
+              :placeholder="t('common.pleaseInput')"
+            />
+            <a-input-number
+              v-else-if="activeRecord.type === 'integer'"
+              v-model:model-value="activeRecord.defaultValue"
+              mode="button"
+              :placeholder="t('common.pleaseInput')"
+              :step="1"
+              :precision="0"
+            />
+            <a-input v-else v-model:model-value="activeRecord.defaultValue" :placeholder="t('common.pleaseInput')" />
+          </a-form-item>
+        </div>
+        <template v-if="activeRecord.type !== 'boolean'">
+          <a-form-item :label="t('ms.json.schema.enum')">
+            <a-textarea v-model:model-value="activeRecord.enum" :placeholder="t('ms.json.schema.enumPlaceholder')" />
+          </a-form-item>
+          <a-form-item :label="t('ms.json.schema.regex')">
+            <a-input v-model:model-value="activeRecord.regex" :placeholder="t('ms.json.schema.regexPlaceholder')" />
+          </a-form-item>
+          <a-form-item :label="t('ms.json.schema.format')">
+            <a-select
+              v-model:model-value="activeRecord.format"
+              :placeholder="t('common.pleaseSelect')"
+              :options="formatOptions"
+            />
+          </a-form-item>
+        </template>
+      </template>
+      <div>
+        <div class="mb-[8px]">{{ t('ms.json.schema.preview') }}</div>
+        <MsCodeEditor
+          v-model:model-value="activePreviewValue"
+          theme="vs"
+          height="300px"
+          :show-full-screen="false"
+          read-only
+        >
+        </MsCodeEditor>
+      </div>
+    </a-form>
+  </MsDrawer>
+  <MsDrawer
+    v-model:visible="batchAddDrawerVisible"
+    :width="600"
+    :title="t('ms.json.schema.batchAdd')"
+    :ok-text="t('common.add')"
+    @confirm="applyBatchAdd"
+  >
+    <MsCodeEditor
+      v-model:model-value="batchAddValue"
+      theme="vs"
+      height="100%"
+      :language="LanguageEnum.JSON"
+      :show-full-screen="false"
+    >
+      <template #leftTitle>
+        <a-radio-group default-value="json" type="button" @change="batchAddValue = ''">
+          <a-radio value="json">Json</a-radio>
+          <a-radio value="jsonSchema">JsonSchema</a-radio>
+        </a-radio-group>
+      </template>
+      <template #rightTitle>
+        <div class="flex justify-between">
+          <div class="text-[var(--color-text-4)]">
+            {{ t('ms.json.schema.batchAddTip') }}
+          </div>
+        </div>
+      </template>
+    </MsCodeEditor>
+  </MsDrawer>
 </template>
 
 <script setup lang="ts">
+  import { SelectOptionData } from '@arco-design/web-vue';
+  import { cloneDeep } from 'lodash-es';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
+  import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsFormTable, { FormTableColumn } from '@/components/pure/ms-form-table/index.vue';
+  import MsParamsInput from '@/components/business/ms-params-input/index.vue';
 
-  const props = defineProps<{
+  import { useI18n } from '@/hooks/useI18n';
-    columns: FormTableColumn[];
+  import { getGenerateId, traverseTree } from '@/utils';
-  }>();
 
-  const data = defineModel<Record<string, any>[]>('data', {
+  import { TableKeyEnum } from '@/enums/tableEnum';
-    required: true,
+
-    default: () => [],
+  import { JsonSchemaItem } from './types';
+
+  const { t } = useI18n();
+
+  const defaultItem: JsonSchemaItem = {
+    id: '',
+    type: 'string',
+    title: '',
+    value: '',
+    description: '',
+    enable: true,
+    defaultValue: '',
+    maximum: undefined,
+    minimum: undefined,
+    maxLength: undefined,
+    minLength: undefined,
+    enumValues: '',
+    pattern: undefined,
+    format: undefined,
+    children: undefined,
+  };
+  const data = defineModel<JsonSchemaItem[]>('data', {
+    default: () => [
+      {
+        id: 'root',
+        title: 'root',
+        type: 'object',
+        value: '',
+        description: '',
+        enable: true,
+        defaultValue: '',
+        maximum: undefined,
+        minimum: undefined,
+        maxLength: undefined,
+        minLength: undefined,
+        enumValues: '',
+        pattern: undefined,
+        format: undefined,
+        required: false,
+        children: [],
+      },
+    ],
   });
+  const expandKeys = ref<string[]>(['root']);
+  const selectedKeys = ref<string[]>(['root']);
+
+  const typeOptions: SelectOptionData[] = [
+    {
+      label: 'object',
+      value: 'object',
+    },
+    {
+      label: 'array',
+      value: 'array',
+    },
+    {
+      label: 'string',
+      value: 'string',
+    },
+    {
+      label: 'number',
+      value: 'number',
+    },
+    {
+      label: 'integer',
+      value: 'integer',
+    },
+    {
+      label: 'boolean',
+      value: 'boolean',
+    },
+    {
+      label: 'null',
+      value: 'null',
+    },
+  ];
+  const formatOptions: SelectOptionData[] = [
+    {
+      label: 'date',
+      value: 'date',
+    },
+    {
+      label: 'date-time',
+      value: 'date-time',
+    },
+    {
+      label: 'email',
+      value: 'email',
+    },
+    {
+      label: 'hostname',
+      value: 'hostname',
+    },
+    {
+      label: 'ipv4',
+      value: 'ipv4',
+    },
+    {
+      label: 'ipv6',
+      value: 'ipv6',
+    },
+    {
+      label: 'url',
+      value: 'url',
+    },
+  ];
+  const columns: FormTableColumn[] = [
+    {
+      title: t('ms.json.schema.name'),
+      dataIndex: 'title',
+      slotName: 'title',
+      inputType: 'input',
+      size: 'medium',
+      addLineDisabled: true,
+      columnSelectorDisabled: true,
+      fixed: 'left',
+    },
+    {
+      title: t('ms.json.schema.type'),
+      dataIndex: 'type',
+      slotName: 'type',
+      size: 'medium',
+      width: 120,
+      addLineDisabled: true,
+      columnSelectorDisabled: true,
+    },
+    {
+      title: t('ms.json.schema.value'),
+      dataIndex: 'value',
+      slotName: 'value',
+      addLineDisabled: true,
+      columnSelectorDisabled: true,
+    },
+    {
+      title: t('common.desc'),
+      dataIndex: 'description',
+      slotName: 'description',
+      inputType: 'quickInput',
+      size: 'medium',
+      addLineDisabled: true,
+    },
+    {
+      title: t('ms.json.schema.minLength'),
+      dataIndex: 'minLength',
+      slotName: 'minLength',
+      inputType: 'inputNumber',
+      size: 'medium',
+      min: 0,
+      precision: 0,
+      addLineDisabled: true,
+      showInTable: false,
+      width: 120,
+    },
+    {
+      title: t('ms.json.schema.maxLength'),
+      dataIndex: 'maxLength',
+      slotName: 'maxLength',
+      inputType: 'inputNumber',
+      size: 'medium',
+      min: 0,
+      precision: 0,
+      addLineDisabled: true,
+      showInTable: false,
+      width: 120,
+    },
+    {
+      title: t('ms.json.schema.minimum'),
+      dataIndex: 'minimum',
+      slotName: 'minimum',
+      inputType: 'inputNumber',
+      size: 'medium',
+      addLineDisabled: true,
+      showInTable: false,
+      width: 120,
+    },
+    {
+      title: t('ms.json.schema.maximum'),
+      dataIndex: 'maximum',
+      slotName: 'maximum',
+      inputType: 'inputNumber',
+      size: 'medium',
+      addLineDisabled: true,
+      showInTable: false,
+      width: 120,
+    },
+    {
+      title: t('ms.json.schema.default'),
+      dataIndex: 'defaultValue',
+      slotName: 'defaultValue',
+      inputType: 'input',
+      size: 'medium',
+      addLineDisabled: true,
+      showInTable: false,
+    },
+    {
+      title: t('ms.json.schema.enum'),
+      dataIndex: 'enum',
+      slotName: 'enum',
+      inputType: 'textarea',
+      size: 'medium',
+      addLineDisabled: true,
+      showInTable: false,
+    },
+    {
+      title: t('ms.json.schema.regex'),
+      dataIndex: 'regex',
+      slotName: 'regex',
+      inputType: 'input',
+      size: 'medium',
+      addLineDisabled: true,
+      showInTable: false,
+    },
+    {
+      title: t('ms.json.schema.format'),
+      dataIndex: 'format',
+      slotName: 'format',
+      inputType: 'select',
+      size: 'medium',
+      options: formatOptions,
+      addLineDisabled: true,
+      showInTable: false,
+    },
+    {
+      title: '',
+      dataIndex: 'operation',
+      slotName: 'action',
+      titleSlotName: 'batchAddTitle',
+      addLineDisabled: true,
+      width: 100,
+      showInTable: true,
+      fixed: 'right',
+    },
+  ];
+
+  /**
+   * 获取类型选项，根节点只能是 object 或 array
+   */
+  function getTypeOptions(record: Record<string, any>) {
+    if (record.name === 'root') {
+      return typeOptions.filter((item) => ['object', 'array'].includes(item.value as string));
+    }
+    return typeOptions;
+  }
+
+  /**
+   * 处理类型变化
+   */
+  function handleTypeChange(record: Record<string, any>) {
+    if (record.type === 'object' || record.type === 'array') {
+      if (!record.children) {
+        // 没有子节点，初始化
+        record.children = [];
+      }
+    } else {
+      record.children = undefined;
+    }
+  }
+
+  /**
+   * 添加子节点
+   */
+  function addChild(record: Record<string, any>) {
+    if (!record.children) {
+      record.children = [];
+    }
+    const child = {
+      ...cloneDeep(defaultItem),
+      id: getGenerateId(),
+      parent: record,
+    };
+    record.children.push(child);
+    // 默认展开父节点
+    if (!expandKeys.value.includes(record.id)) {
+      expandKeys.value.push(record.id);
+    }
+    // 默认选中子节点
+    if (!selectedKeys.value.includes(child.id)) {
+      selectedKeys.value.push(child.id);
+    }
+  }
+
+  /**
+   * 删除行
+   */
+  function deleteLine(record: Record<string, any>, rowIndex: number) {
+    if (record.parent) {
+      record.parent.children.splice(rowIndex, 1);
+    } else {
+      data.value.splice(rowIndex, 1);
+    }
+  }
+
+  /**
+   * 行选择处理
+   */
+  function handleSelect(rowKeys: (string | number)[], rowKey: string | number, record: Record<string, any>) {
+    nextTick(() => {
+      if (record.enable && record.children && record.children.length > 0) {
+        // 选中父节点时，选中子孙节点
+        traverseTree(record.children, (item: Record<string, any>) => {
+          item.enable = true;
+          if (!selectedKeys.value.includes(item.id)) {
+            selectedKeys.value.push(item.id);
+          }
+        });
+      }
+    });
+  }
+
+  const batchAddDrawerVisible = ref(false);
+  const batchAddValue = ref('');
+
+  function batchAdd() {
+    batchAddDrawerVisible.value = true;
+  }
+
+  function applyBatchAdd() {
+    batchAddDrawerVisible.value = false;
+  }
+
+  const settingDrawerVisible = ref(false);
+  const activeRecord = ref<any>({});
+  const activePreviewValue = ref('');
+
+  function openSetting(record: Record<string, any>) {
+    // 浅拷贝，以保留 parent 和 children 的引用
+    activeRecord.value = {
+      ...record,
+    };
+    settingDrawerVisible.value = true;
+  }
+
+  /**
+   * 应用设置
+   */
+  function applySetting() {
+    if (activeRecord.value.id === 'root') {
+      data.value[0] = activeRecord.value;
+    } else {
+      const brothers = activeRecord.value.parent?.children || [];
+      const index = brothers.findIndex((item: any) => item.id === activeRecord.value.id);
+      if (index > -1) {
+        brothers.splice(index, 1, activeRecord.value);
+      }
+    }
+    settingDrawerVisible.value = false;
+  }
+
+  const showQuickInputParam = ref(false);
+  const activeQuickInputRecord = ref<any>({});
+  const quickInputParamValue = ref('');
+
+  function quickInputParams(record: any) {
+    activeQuickInputRecord.value = record;
+    showQuickInputParam.value = true;
+    quickInputParamValue.value = record.value;
+  }
+
+  function clearQuickInputParam() {
+    activeQuickInputRecord.value = {};
+    quickInputParamValue.value = '';
+  }
+
+  function applyQuickInputParam() {
+    activeQuickInputRecord.value.value = quickInputParamValue.value;
+    showQuickInputParam.value = false;
+    clearQuickInputParam();
+  }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less">
+  .ms-json-schema {
+    .ms-json-schema-td-text {
+      padding: 0 8px;
+    }
+    .ms-json-schema-icon-button {
+      @apply !mr-0;
+      &:hover {
+        background-color: rgb(var(--primary-1)) !important;
+        .arco-icon {
+          color: rgb(var(--primary-4)) !important;
+        }
+      }
+    }
+  }
+</style>

frontend/src/components/pure/ms-json-schema/locale/zh-CN.ts

@@ -1,5 +1,21 @@
 export default {
   'ms.json.schema.name': '参数名称',
+  'ms.json.schema.nameNotNull': '参数名称不能为空',
   'ms.json.schema.type': '类型',
   'ms.json.schema.value': '参数值',
+  'ms.json.schema.addChild': '添加子字段',
+  'ms.json.schema.advancedSettings': '高级设置',
+  'ms.json.schema.minLength': '最小长度',
+  'ms.json.schema.maxLength': '最大长度',
+  'ms.json.schema.minimum': '最小值',
+  'ms.json.schema.maximum': '最大值',
+  'ms.json.schema.default': '默认值',
+  'ms.json.schema.enum': '枚举值',
+  'ms.json.schema.enumPlaceholder': '1 行 1 个枚举值',
+  'ms.json.schema.regex': '正则表达式',
+  'ms.json.schema.regexPlaceholder': '如 /<title(.*?)</title>',
+  'ms.json.schema.format': '格式化',
+  'ms.json.schema.preview': '预览',
+  'ms.json.schema.batchAdd': '批量添加',
+  'ms.json.schema.batchAddTip': '书写格式："键":"值"，如"nama":"natural"',
 };

frontend/src/components/pure/ms-json-schema/types.ts

@@ -0,0 +1,22 @@
+export interface JsonSchemaItem {
+  id: string;
+  title: string; // 参数名称
+  type: string; // 参数类型
+  description: string; // 参数描述
+  enable: boolean; // 是否启用
+  value: string; // 参数值
+  defaultValue: string | number | boolean; // 默认值
+  example?: Record<string, any>;
+  items?: string; // 子级，当 type 为array 时，使用该值
+  properties?: Record<string, any>; // 子级，当 type 为object 时，使用该值
+  required?: string[]; // 必填参数 这里的值是参数的title
+  pattern?: string; // 正则表达式
+  maxLength?: number;
+  minLength?: number;
+  minimum?: number;
+  maximum?: number;
+  format?: string; // 格式化
+  enumValues?: string; // 参数值的枚举
+  // 前端渲染字段
+  children?: JsonSchemaItem[];
+}

frontend/src/components/pure/ms-table/base-table.vue

@@ -6,12 +6,14 @@
     <!-- 表只做自适应不做可拖拽列 -->
     <a-table
       v-bind="{ ...$attrs, ...scrollObj }"
+      v-model:selected-keys="originalSelectedKeys"
+      v-model:expanded-keys="expandedKeys"
       :row-class="getRowClass"
       :column-resizable="true"
       :span-method="spanMethod"
       :columns="currentColumns"
-      :expanded-keys="props.expandedKeys"
       :span-all="props.spanAll"
+      @select="originalRowSelectChange"
       @expand="(rowKey, record) => emit('expand', record)"
       @change="(data: TableData[], extra: TableChangeExtra, currentData: TableData[]) => handleDragChange(data, extra, currentData)"
       @sorter-change="(dataIndex: string,direction: string) => handleSortChange(dataIndex, direction)"
@@ -227,7 +229,7 @@
       </template>
       <template #expand-icon="{ expanded, record }">
         <!-- @desc: 这里为了树级别展开折叠如果子级别children不存在不展示展开折叠，所以原本组件的隐藏掉，改成自定义便于控制展示隐藏 -->
-        <slot v-if="record.children && record.children.length" name="expand-icon" v-bind="{ expanded, record }">
+        <slot v-if="record.children" name="expand-icon" v-bind="{ expanded, record }">
           <div
             :class="`${
               expanded ? 'bg-[rgb(var(--primary-1))]' : 'bg-[var(--color-text-n8)]'
@@ -353,7 +355,6 @@
       rowspan?: number | undefined;
       colspan?: number | undefined;
     };
-    expandedKeys?: string[];
     rowClass?: string | any[] | Record<string, any> | ((record: TableData, rowIndex: number) => any);
     spanAll?: boolean;
     showSelectorAll?: boolean;
@@ -382,9 +383,13 @@
     (e: 'moduleChange'): void;
     (e: 'initEnd'): void;
     (e: 'reset'): void;
+    (e: 'select', rowKeys: (string | number)[], _rowKey: string | number, record: TableData): void;
   }>();
   const attrs = useAttrs();
 
+  const expandedKeys = defineModel<string[]>('expandedKeys', { default: [] });
+  const originalSelectedKeys = defineModel<(string | number)[]>('originalSelectedKeys', { default: [] });
+
   // 编辑按钮的Active状态
   const editActiveKey = ref<string>('');
 
@@ -521,6 +526,10 @@
   const rowSelectChange = (record: TableData) => {
     emit('rowSelectChange', record);
   };
+  // 表格原生行选择器change事件
+  function originalRowSelectChange(rowKeys: (string | number)[], _rowKey: string | number, record: TableData) {
+    emit('select', rowKeys, _rowKey, record);
+  }
 
   // 分页change事件
   const pageChange = (v: number) => {

frontend/src/components/pure/ms-table/columnSelector.vue

@@ -65,7 +65,7 @@
           </a-tooltip>
         </div>
       </template>
-      <a-divider class="!mt-[24px]" />
+      <a-divider v-if="showJumpMethod || props.showPagination || props.showSubdirectory" class="!mt-[24px]" />
       <div class="mb-[4px] flex items-center justify-between">
         <div class="font-medium text-[var(--color-text-4)]">{{ t('msTable.columnSetting.header') }}</div>
         <a-tooltip :content="t('msTable.columnSetting.default')" :disabled="hasChange">

frontend/src/components/pure/ms-table/type.ts

@@ -2,7 +2,13 @@ import type { TableQueryParams } from '@/models/common';
 import { ColumnEditTypeEnum, SelectAllEnum, TableKeyEnum } from '@/enums/tableEnum';
 import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
 
-import type { TableChangeExtra, TableColumnData, TableData, TableDraggable } from '@arco-design/web-vue';
+import type {
+  TableChangeExtra,
+  TableColumnData,
+  TableData,
+  TableDraggable,
+  TableRowSelection,
+} from '@arco-design/web-vue';
 
 export interface MsPaginationI {
   current: number;
@@ -96,6 +102,7 @@ export interface MsTableProps<T> {
   excludeKeys: Set<string>; // 排除的key
   selectorStatus: SelectAllEnum; // 选择器状态
   showSelectorAll?: boolean; // 是否显示跨页全选选择器
+  rowSelection?: TableRowSelection; // 行选择器
   /** end */
   loading?: boolean; // 加载效果
   bordered?: boolean; // 是否显示边框

frontend/src/components/pure/ms-table/useTable.ts

@@ -57,7 +57,7 @@ export default function useTableProps<T>(
     columns: [] as MsTableColumn,
     rowKey: 'id', // 表格行的key
     /** 选择器相关 */
-    rowSelection: null, // 禁用表格默认的选择器
+    rowSelection: undefined, // 禁用表格默认的选择器
     selectable: false, // 是否显示选择器
     selectorType: 'checkbox', // 选择器类型
     selectedKeys: new Set<string>(), // 选中的key, 多选

frontend/src/enums/tableEnum.ts

@@ -91,6 +91,7 @@ export enum TableKeyEnum {
   ASSOCIATE_CASE_API_CASE = 'associateCaseApiCase',
   ASSOCIATE_CASE_API_SCENARIO = 'associateCaseApiScenario',
   ASSOCIATE_CASE = 'associateCase',
+  JSON_SCHEMA = 'jsonSchema',
 }
 
 // 具有特殊功能的列

frontend/src/models/apiTest/common.ts

@@ -1,4 +1,5 @@
 import { Language } from '@/components/pure/ms-code-editor/types';
+import type { JsonSchemaItem } from '@/components/pure/ms-json-schema/types';
 
 import {
   type FullResponseAssertionType,
@@ -118,36 +119,12 @@ export interface ExecuteBinaryBody {
   file?: RequestFileInfo;
   sendAsBody?: boolean; // 是否作为正文发送，只有 定义/mock 的响应体有此字段
 }
-// 接口请求-JsonSchema
-export interface JsonSchema {
-  example: Record<string, any>;
-  id: string;
-  title: string;
-  type: string;
-  description: string;
-  items: string;
-  mock: Record<string, any>;
-  properties: Record<string, any>;
-  additionalProperties: string;
-  required: string[];
-  pattern: string;
-  maxLength: number;
-  minLength: number;
-  minimum: number;
-  maximum: number;
-  schema: string;
-  format: string;
-  enumString: string[];
-  enumInteger: number[];
-  enumNumber: number[];
-  extensions: Record<string, any>;
-}
 
 // 接口请求json-body参数集合信息
 export interface ExecuteJsonBody {
   enableJsonSchema?: boolean;
   enableTransition?: boolean;
-  jsonSchema?: JsonSchema[];
+  jsonSchema?: JsonSchemaItem[];
   jsonValue: string;
 }
 // 执行请求配置

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

@@ -388,10 +388,10 @@
             class="ms-params-input-popover"
           >
             <template #content>
-              <div class="param-popover-title">
+              <div class="ms-params-popover-title">
                 {{ t('apiTestDebug.expression') }}
               </div>
-              <div class="param-popover-value">
+              <div class="ms-params-popover-value">
                 {{ record.expression }}
               </div>
             </template>
@@ -1118,20 +1118,4 @@ if (!result){
       }
     }
   }
-  .param-popover-title {
-    @apply font-medium;
-
-    margin-bottom: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .param-popover-value {
-    min-width: 100px;
-    max-width: 280px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
 </style>

frontend/src/views/api-test/components/paramDescInput.vue

@@ -1,10 +1,10 @@
 <template>
   <a-popover position="tl" :disabled="!props.desc || props.desc.trim() === ''" class="ms-params-input-popover">
     <template #content>
-      <div class="param-popover-title">
+      <div class="ms-params-popover-title">
         {{ t('common.desc') }}
       </div>
-      <div class="param-popover-value">
+      <div class="ms-params-popover-value">
         {{ props.desc }}
       </div>
     </template>
@@ -60,20 +60,4 @@
       border-color: transparent;
     }
   }
-  .param-popover-title {
-    @apply font-medium;
-
-    margin-bottom: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .param-popover-value {
-    min-width: 100px;
-    max-width: 280px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
 </style>

frontend/src/views/api-test/components/paramTable.vue

@@ -87,10 +87,10 @@
         class="ms-params-input-popover"
       >
         <template #content>
-          <div class="param-popover-title">
+          <div class="ms-params-popover-title">
             {{ t('apiTestDebug.paramName') }}
           </div>
-          <div class="param-popover-value">
+          <div class="ms-params-popover-value">
             {{ record[columnConfig.dataIndex as string] }}
           </div>
         </template>
@@ -102,7 +102,6 @@
           class="ms-form-table-input"
           :trigger-props="{ contentClass: 'ms-form-table-input-trigger' }"
           :filter-option="false"
-          size="mini"
           @focus="handleAutoCompleteFocus(record)"
           @search="(val) => handleSearchParams(val, columnConfig)"
           @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
@@ -120,7 +119,6 @@
           :disabled="props.disabledExceptParam || columnConfig.disabledColumn"
           :placeholder="t('apiTestDebug.commonPlaceholder')"
           class="ms-form-table-input"
-          size="mini"
           @input="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
         />
       </a-popover>
@@ -132,10 +130,10 @@
         class="ms-params-input-popover"
       >
         <template #content>
-          <div class="param-popover-title">
+          <div class="ms-params-popover-title">
             {{ t('apiTestDebug.paramName') }}
           </div>
-          <div class="param-popover-value">
+          <div class="ms-params-popover-value">
             {{ record[columnConfig.dataIndex as string] }}
           </div>
         </template>
@@ -144,7 +142,6 @@
           :disabled="props.disabledExceptParam || columnConfig.disabledColumn"
           :placeholder="t('apiTestDebug.commonPlaceholder')"
           class="ms-form-table-input"
-          size="mini"
           @input="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
         />
       </a-popover>
@@ -162,7 +159,6 @@
             record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
             '!mr-[4px] !p-[4px]',
           ]"
-          size="mini"
           @click="toggleRequired(record, rowIndex)"
         >
           <div>*</div>
@@ -173,7 +169,6 @@
         :disabled="props.disabledExceptParam"
         :options="columnConfig.typeOptions || []"
         class="ms-form-table-input w-full"
-        size="mini"
         @change="(val) => handleTypeChange(val, record, rowIndex, columnConfig.addLineDisabled)"
       />
     </template>
@@ -184,7 +179,6 @@
         :disabled="props.disabledExceptParam"
         :options="columnConfig.typeOptions || []"
         class="ms-form-table-input w-[110px]"
-        size="mini"
         @change="() => addTableLine(rowIndex)"
       />
     </template>
@@ -195,7 +189,6 @@
         :disabled="props.disabledExceptParam"
         :options="columnConfig.typeOptions || []"
         class="ms-form-table-input w-[110px]"
-        size="mini"
         @change="() => addTableLine(rowIndex)"
       />
     </template>
@@ -206,7 +199,6 @@
         :disabled="props.disabledExceptParam || record.extractType !== RequestExtractExpressionEnum.REGEX"
         :options="columnConfig.typeOptions || []"
         class="ms-form-table-input w-[180px]"
-        size="mini"
         @change="() => addTableLine(rowIndex)"
       />
     </template>
@@ -221,7 +213,6 @@
         :disabled="props.disabledExceptParam"
         :options="columnConfig.typeOptions || []"
         class="ms-form-table-input w-[180px]"
-        size="mini"
         @change="(val) => handleScopeChange(val, record, rowIndex, columnConfig.addLineDisabled)"
       />
     </template>
@@ -234,10 +225,10 @@
         class="ms-params-input-popover"
       >
         <template #content>
-          <div class="param-popover-title">
+          <div class="ms-params-popover-title">
             {{ t('apiTestDebug.paramValue') }}
           </div>
-          <div class="param-popover-value">
+          <div class="ms-params-popover-value">
             {{ record.value }}
           </div>
         </template>
@@ -246,7 +237,6 @@
           :disabled="props.disabledParamValue"
           class="ms-form-table-input"
           :placeholder="t('apiTestDebug.commonPlaceholder')"
-          size="mini"
           @input="() => addTableLine(rowIndex)"
         />
       </a-popover>
@@ -264,9 +254,7 @@
         :file-save-as-source-id="props.fileSaveAsSourceId"
         :file-save-as-api="props.fileSaveAsApi"
         :file-module-options-api="props.fileModuleOptionsApi"
-        input-class="ms-form-table-input h-[24px]"
+        input-class="ms-form-table-input h-[32px]"
-        input-size="small"
-        tag-size="small"
         @change="(files, file) => handleFilesChange(files, record, rowIndex, file)"
         @delete-file="() => emitChange('deleteFile')"
       />
@@ -274,7 +262,6 @@
         v-else
         v-model:value="record.value"
         :disabled="props.disabledParamValue"
-        size="mini"
         @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
         @dblclick="() => quickInputParams(record)"
         @apply="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
@@ -295,9 +282,7 @@
         :file-save-as-source-id="props.fileSaveAsSourceId"
         :file-save-as-api="props.fileSaveAsApi"
         :file-module-options-api="props.fileModuleOptionsApi"
-        input-class="ms-form-table-input h-[24px]"
+        input-class="ms-form-table-input h-[32px]"
-        input-size="small"
-        tag-size="small"
         @change="(files, file) => handleFileChange(files, record, rowIndex, file)"
       />
     </template>
@@ -310,7 +295,6 @@
           :placeholder="t('apiTestDebug.paramMin')"
           :min="0"
           class="ms-form-table-input ms-form-table-input-number"
-          size="mini"
           model-event="input"
           @change="() => addTableLine(rowIndex)"
         />
@@ -321,7 +305,6 @@
           :placeholder="t('apiTestDebug.paramMax')"
           :min="0"
           class="ms-form-table-input"
-          size="mini"
           model-event="input"
           @change="() => addTableLine(rowIndex)"
         />
@@ -334,7 +317,6 @@
         :disabled="props.disabledExceptParam"
         :max-tag-count="2"
         input-class="ms-form-table-input"
-        size="mini"
         @change="() => addTableLine(rowIndex)"
         @clear="() => addTableLine(rowIndex)"
       />
@@ -344,7 +326,6 @@
       <paramDescInput
         v-model:desc="record[columnConfig.dataIndex as string]"
         :disabled="props.disabledExceptParam || columnConfig.disabledColumn"
-        size="mini"
         @input="() => addTableLine(rowIndex)"
         @dblclick="() => quickInputDesc(record)"
         @change="handleDescChange"
@@ -379,7 +360,7 @@
     </template>
     <!-- 响应头 -->
     <template #header="{ record, columnConfig }">
-      <a-select v-model="record.header" :disabled="props.disabledExceptParam" class="ms-form-table-input" size="mini">
+      <a-select v-model="record.header" :disabled="props.disabledExceptParam" class="ms-form-table-input">
         <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
       </a-select>
     </template>
@@ -388,7 +369,6 @@
       <a-select
         v-model="record.condition"
         :disabled="props.disabledExceptParam"
-        size="mini"
         class="ms-form-table-input"
         @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
       >
@@ -421,7 +401,6 @@
             '!mr-[4px] !p-[4px]',
           ]"
           :disabled="props.disabledExceptParam"
-          size="mini"
           @click="toggleRequired(record, rowIndex)"
         >
           <div>*</div>
@@ -429,7 +408,6 @@
       </a-tooltip>
       <a-input
         v-model="record.expectedValue"
-        size="mini"
         class="ms-form-table-input"
         :placeholder="t('apiTestDebug.commonPlaceholder')"
         :disabled="isDisabledCondition.includes(record.condition) || props.disabledExceptParam"
@@ -474,7 +452,6 @@
         value-key="id"
         label-key="name"
         :search-keys="['name']"
-        size="mini"
         allow-search
         class="ms-form-table-input"
         :remote-func="initEnvOptions"
@@ -488,7 +465,6 @@
       <MsTagsGroup
         v-if="Array.isArray(record.domain)"
         :tag-list="getDomain(record.domain)"
-        size="small"
         @click="() => showHostModal(record)"
       />
       <div v-else class="text-[var(--color-text-1)]">{{ '-' }}</div>
@@ -537,7 +513,6 @@
                 :disabled="props.disabledExceptParam"
                 :options="Object.values(RequestContentTypeEnum).map((e) => ({ label: e, value: e }))"
                 allow-create
-                size="mini"
                 @change="(val) => addTableLine(val as number)"
               />
             </div>
@@ -1239,20 +1214,9 @@
     border-radius: var(--border-radius-small);
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
   }
-  .param-popover-title {
+  :deep(.ms-form-table-input-number) {
-    @apply font-medium;
+    .arco-input {
-
+      @apply text-right;
-    margin-bottom: 4px;
+    }
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--color-text-1);
-  }
-  .param-popover-value {
-    min-width: 100px;
-    max-width: 280px;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--color-text-1);
   }
 </style>

frontend/src/views/api-test/components/requestComposition/body.vue

@@ -86,7 +86,25 @@
     </div> -->
   </div>
   <div v-else class="h-[calc(100%-34px)]">
+    <div class="mb-[8px] flex items-center gap-[8px]">
+      <MsButton
+        type="text"
+        class="!mr-0"
+        :class="jsonType === 'Schema' ? 'font-medium !text-[rgb(var(--primary-5))]' : '!text-[var(--color-text-4)]'"
+        @click="jsonType = 'Schema'"
+        >Schema</MsButton
+      >
+      <a-divider :margin="0" direction="vertical"></a-divider>
+      <MsButton
+        type="text"
+        class="!mr-0"
+        :class="jsonType === 'Json' ? 'font-medium !text-[rgb(var(--primary-5))]' : '!text-[var(--color-text-4)]'"
+        @click="jsonType = 'Json'"
+        >Json</MsButton
+      >
+    </div>
     <MsCodeEditor
+      v-if="jsonType === 'Json'"
       v-model:model-value="currentBodyCode"
       :read-only="props.disabledExceptParam"
       theme="vs"
@@ -98,6 +116,7 @@
       is-adaptive
     >
     </MsCodeEditor>
+    <MsJsonSchema v-else />
   </div>
   <batchAddKeyVal
     v-if="showParamTable"
@@ -112,8 +131,10 @@
 <script setup lang="ts">
   import { TableColumnData } from '@arco-design/web-vue';
 
+  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
   import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
+  import MsJsonSchema from '@/components/pure/ms-json-schema/index.vue';
   import { MsFileItem } from '@/components/pure/ms-upload/types';
   import MsAddAttachment from '@/components/business/ms-add-attachment/index.vue';
   import batchAddKeyVal from '@/views/api-test/components/batchAddKeyVal.vue';
@@ -284,6 +305,8 @@
       }
     },
   });
+
+  const jsonType = ref<'Schema' | 'Json'>('Schema');
   // 当前显示的代码
   const currentBodyCode = computed({
     get() {