test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
baiqi 2024-07-02 11:48:15 +08:00 committed by 刘瑞斌
parent 239c662190
commit 581b5dfca5
21 changed files with 1019 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/assets/style/global.less
View File

@ -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);
}

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

@ -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>

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

@ -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({

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

@ -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>

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

@ -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>

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

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

1
frontend/src/components/pure/ms-drawer/index.vue
View File

@ -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'));

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

@ -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="expanded ? 'rgb(var(--primary-5))' : ''"
class="flex items-end gap-[2px] text-[var(--color-text-4)]"
:class="expanded ? '!text-[rgb(var(--primary-5))]' : ''"
>
<MsIcon type="icon_split-turn-down-left" />
<div v-if="record.children">{{ record.children.length }}</div>
<MsIcon type="icon-icon_split_turn-down_arrow" />
<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
v-if="dataLength > 1 && rowIndex !== dataLength - 1"
class="ml-[8px] cursor-pointer text-[var(--color-text-4)]"
size="20"
@click="deleteParam(record, rowIndex)"
/>
<slot
name="operationDelete"
v-bind="{ record, rowIndex, column, dataIndex: item.dataIndex, columnConfig: item }"
>
<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 {

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

@ -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<{
columns: FormTableColumn[];
}>();
import { useI18n } from '@/hooks/useI18n';
import { getGenerateId, traverseTree } from '@/utils';
const data = defineModel<Record<string, any>[]>('data', {
required: true,
default: () => [],
import { TableKeyEnum } from '@/enums/tableEnum';
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>

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

@ -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"',
};

22
frontend/src/components/pure/ms-json-schema/types.ts Normal file
View File

@ -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[];
}

15
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -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) => {

2
frontend/src/components/pure/ms-table/columnSelector.vue
View File

@ -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">

9
frontend/src/components/pure/ms-table/type.ts
View File

@ -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; // 是否显示边框

2
frontend/src/components/pure/ms-table/useTable.ts
View File

@ -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, 多选

1
frontend/src/enums/tableEnum.ts
View File

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

27
frontend/src/models/apiTest/common.ts
View File

@ -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;
}
// 执行请求配置

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

@ -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>

20
frontend/src/views/api-test/components/paramDescInput.vue
View File

@ -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>

62
frontend/src/views/api-test/components/paramTable.vue
View File

@ -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-size="small"
tag-size="small"
input-class="ms-form-table-input h-[32px]"
@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-size="small"
tag-size="small"
input-class="ms-form-table-input h-[32px]"
@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 {
@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);
:deep(.ms-form-table-input-number) {
.arco-input {
@apply text-right;
}
}
</style>

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

@ -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() {