Skip to content

Commit

Permalink
fix: 二次体验问题修复 (TencentBlueKing#101)
Browse files Browse the repository at this point in the history 
* feat: 1.14 开发

* feat: 1.14 开发

* feat: 1.14 开发

* feat: 1.14 开发

* feat: 1.14 在线调试开发

* feat: 1.14 在线调试

* feat: 1.14 在线调试

* feat: 日志剩余需求开发&编译器格式化等功能

* feat: 在线调试 体验问题修复

* feat: 在线调试 体验问题修复

* feat: 在线调试请求详情接口对接&资源列表接口替换&日志图表和下载参数修改

* feat: 在线调试 体验问题修复

* feat: 1.14 版本开发

* feat: 1.14 体验问题修复

* fix: 1.14 体验问题修复

* fix: 1.14 体验问题修复

* fix: 1.14 体验问题修复

* feat: 体验问题修复

* fix: 体验问题修复

---------

Co-authored-by: ielgnaw <wuji0223@126.com>
  • Loading branch information
@shuzhenyang @ielgnaw
shuzhenyang and ielgnaw authored Aug 23, 2024
1 parent 3259c15 commit fab24f0
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 115 deletions.
1 change: 1 addition & 0 deletions src/dashboard-front/src/components/ag-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,7 @@ defineExpose({
switchFontSize,
setTheme,
updateOptions,
handleFormat,
});
</script>
Expand Down
235 changes: 122 additions & 113 deletions src/dashboard-front/src/views/online-debug/components/edit-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,90 @@
ref="bkTableRef"
row-hover="auto"
:data="tableData"
show-overflow-tooltip
@cell-click="handleCellClick"
:cell-class="getCellClass"
border="outer">
<bk-table-column :width="55" type="selection" align="center" />
<bk-table-column :label="t('参数名')" prop="name">
<template #default="{ row, index }">
<div class="td-text" v-if="!row?.isEdit">
<!-- <div class="td-text" v-if="!row?.isEdit">
{{ row?.name }}
</div>
<template v-else>
<bk-popover
placement="top-start"
trigger="click"
theme="light"
:is-show="isShowVarPopover"
:content="t('变量名由字母、数字、下划线（_） 组成，首字符必须是字母，长度小于50个字符') "
:popover-delay="[300, 0]"
>
<bk-form :ref="(el) => setRefs(el, `name-${index}`)" :model="row" label-width="0">
<bk-form-item
:rules="varRules.name"
property="name"
error-display-type="tooltips"
class="table-form-item">
<bk-input
v-model="row.name"
:clearable="false"
class="edit-input"
@blur="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `name-input-${index}-${column?.index}`)"
/>
</bk-form-item>
</bk-form>
</bk-popover>
</template>
</div> -->
<!-- <template v-else> -->
<bk-popover
placement="top-start"
trigger="click"
theme="light"
:is-show="isShowVarPopover"
:content="t('变量名由字母、数字、下划线（_） 组成，首字符必须是字母，长度小于50个字符') "
:popover-delay="[300, 0]"
>
<bk-form :ref="(el) => setRefs(el, `name-${index}`)" :model="row" label-width="0">
<bk-form-item
:rules="varRules.name"
property="name"
error-display-type="tooltips"
class="table-form-item">
<bk-input
v-model="row.name"
:clearable="false"
class="edit-input"
@blur="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `name-input-${index}-${column?.index}`)"
/>
</bk-form-item>
</bk-form>
</bk-popover>
<!-- </template> -->
</template>
</bk-table-column>
<bk-table-column :label="t('参数值')" prop="value">
<template #default="{ row, column, index }">
<div class="td-text" v-if="!row?.isEdit">
<!-- <div class="td-text" v-if="!row?.isEdit">
{{ row?.value }}
</div>
<template v-else>
<bk-form :ref="(el) => setRefs(el, `value-${index}`)" :model="row" label-width="0">
<bk-form-item
:rules="varRules.value"
property="value"
error-display-type="tooltips"
class="table-form-item">
<template v-if="row?.options?.length">
<bk-select
class="edit-select"
:clearable="false"
:filterable="false"
v-model="row.value"
@change="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `value-input-${index}-${column?.index}`)"
>
<bk-option
v-for="item in row.options"
:id="item"
:key="item"
:name="item"
/>
</bk-select>
</template>
<template v-else>
<bk-input
v-model="row.value"
:clearable="false"
class="edit-input"
@blur="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `value-input-${index}-${column?.index}`)"
</div> -->
<!-- <template v-else> -->
<bk-form :ref="(el) => setRefs(el, `value-${index}`)" :model="row" label-width="0">
<bk-form-item
:rules="varRules.value"
property="value"
error-display-type="tooltips"
class="table-form-item">
<template v-if="row?.options?.length">
<bk-select
class="edit-select"
:clearable="false"
:filterable="false"
v-model="row.value"
@change="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `value-input-${index}-${column?.index}`)"
>
<bk-option
v-for="item in row.options"
:id="item"
:key="item"
:name="item"
/>
</template>
</bk-form-item>
</bk-form>
</template>
</bk-select>
</template>
<template v-else>
<bk-input
v-model="row.value"
:clearable="false"
class="edit-input"
@blur="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `value-input-${index}-${column?.index}`)"
/>
</template>
</bk-form-item>
</bk-form>
<!-- </template> -->
</template>
</bk-table-column>
<bk-table-column :label="t('类型')" prop="type">
<template #default="{ row, column, index }">
<div
<!-- <div
class="td-text"
@click="(event) => handleCellClick({ event, column, rowIndex: index })"
v-if="!row?.editType">
Expand All @@ -97,55 +96,55 @@
@click="(event) => handleCellClick({ event, column, rowIndex: index })">
{{ row?.type }}
</bk-tag>
</div>
<template v-else>
<bk-form :ref="(el) => setRefs(el, `type-${index}`)" :model="row" label-width="0">
<bk-form-item
property="type"
error-display-type="tooltips"
class="table-form-item">
<bk-select
class="edit-select"
:clearable="false"
:filterable="false"
v-model="row.type"
@toggle="(v) => handleTypeChange(index, v)"
@change="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `type-input-${index}-${column?.index}`)"
>
<bk-option
v-for="item in typeList"
:id="item.value"
:key="item.value"
:name="item.label"
/>
</bk-select>
</bk-form-item>
</bk-form>
</template>
</div> -->
<!-- <template v-else> -->
<bk-form :ref="(el) => setRefs(el, `type-${index}`)" :model="row" label-width="0">
<bk-form-item
property="type"
error-display-type="tooltips"
class="table-form-item">
<bk-select
class="edit-select"
:clearable="false"
:filterable="false"
v-model="row.type"
@toggle="(v) => handleTypeChange(index, v)"
@change="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `type-input-${index}-${column?.index}`)"
>
<bk-option
v-for="item in typeList"
:id="item.value"
:key="item.value"
:name="item.label"
/>
</bk-select>
</bk-form-item>
</bk-form>
<!-- </template> -->
</template>
</bk-table-column>
<bk-table-column :label="t('说明')" prop="instructions">
<template #default="{ row, column, index }">
<div class="td-text" v-if="!row?.isEdit">
<!-- <div class="td-text" v-if="!row?.isEdit">
{{ row?.instructions }}
</div>
<template v-else>
<bk-form :ref="(el) => setRefs(el, `instructions-${index}`)" :model="row" label-width="0">
<bk-form-item
property="instructions"
error-display-type="tooltips"
class="table-form-item">
<bk-input
v-model="row.instructions"
:clearable="false"
class="edit-input"
@blur="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `instructions-input-${index}-${column?.index}`)"
/>
</bk-form-item>
</bk-form>
</template>
</div> -->
<!-- <template v-else> -->
<bk-form :ref="(el) => setRefs(el, `instructions-${index}`)" :model="row" label-width="0">
<bk-form-item
property="instructions"
error-display-type="tooltips"
class="table-form-item">
<bk-input
v-model="row.instructions"
:clearable="false"
class="edit-input"
@blur="handleCellBlur(index)"
:ref="(el) => setInputRefs(el, `instructions-input-${index}-${column?.index}`)"
/>
</bk-form-item>
</bk-form>
<!-- </template> -->
</template>
</bk-table-column>
<bk-table-column :label="t('操作')">
Expand Down Expand Up @@ -451,11 +450,15 @@ defineExpose({
:deep(.bk-input) {
border: none;
height: 100%;
border-radius: 0px;
.angle-up {
display: none !important;
}
&:hover {
border: 1px solid #A3C5FD;
.angle-up {
display: inline-flex !important;
}
}
}
&.is-focus {
Expand Down Expand Up @@ -484,6 +487,7 @@ defineExpose({
}
.bk-form {
line-height: 42px;
margin-bottom: -1px;
.table-form-item {
margin-bottom: 0;
.bk-form-content {
Expand All @@ -497,6 +501,7 @@ defineExpose({
}
}
.edit-input.bk-input {
border-radius: 0px;
&:hover {
border: 1px solid #A3C5FD;
}
Expand All @@ -506,10 +511,14 @@ defineExpose({
}
.bk-select {
&:hover {
border: 1px solid #A3C5FD;
.bk-input {
border: 1px solid #A3C5FD;
}
}
&.is-focus {
border: 1px solid #3A84FF;
.bk-input {
border: 1px solid #3A84FF;
}
}
}
}
Expand Down
38 changes: 36 additions & 2 deletions src/dashboard-front/src/views/online-debug/components/response-content.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,17 @@
<div class="response-main">
<div class="response-content-type flex" v-show="tabActive === 'body'">
<div class="payload-type">
<div class="payload-type-item">
<div
:class="['payload-type-item', bodyType === 'pretty' ? 'active' : '']"
@click="handleBodyTypeChange('pretty')"
>
<span class="icon apigateway-icon icon-ag-cardd"></span>
Pretty
</div>
<div class="payload-type-item active">
<div
:class="['payload-type-item', bodyType === 'raw' ? 'active' : '']"
@click="handleBodyTypeChange('raw')"
>
<span class="icon apigateway-icon icon-ag-shitu-liebiao"></span>
Raw
</div>
Expand Down Expand Up @@ -95,6 +101,7 @@
v-model="editorText"
theme="Visual Studio"
ref="resourceEditorRef"
language="json"
:minimap="false"
:show-copy="true"
:show-full-screen="true"
Expand Down Expand Up @@ -146,6 +153,7 @@ const bodyTypeList = ref([
label: 'TEXT',
},
]);
const bodyType = ref<string>('pretty');
const detailsType = ref<string>('cURL');
const detailsTypeList = ref([
{
Expand All @@ -161,13 +169,39 @@ const stopPropa = (e: Event) => {
e?.stopPropagation();
};
const formatBody = () => {
resourceEditorRef.value?.updateOptions({
readOnly: false,
});
setTimeout(() => {
resourceEditorRef.value?.handleFormat();
});
setTimeout(() => {
resourceEditorRef.value?.updateOptions({
readOnly: true,
});
}, 200);
};
const handleBodyTypeChange = (type: string) => {
bodyType.value = type;
if (type === 'pretty') {
formatBody();
} else {
setEditorValue();
}
};
const setEditorValue = () => {
if (tabActive.value === 'body') {
editorText.value = data.value?.body || '';
} else {
editorText.value = data.value?.curl || '';
}
resourceEditorRef.value?.setValue(editorText.value);
if (tabActive.value === 'body' && bodyType.value === 'pretty') {
formatBody();
}
activeIndex.value = [1];
};
Expand Down

0 comments on commit fab24f0

Please sign in to comment.