Skip to content

Commit

Permalink
feat: 在线调试展示 Headers (#918)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuzhenyang
shuzhenyang authored Sep 12, 2024
1 parent 047ba73 commit d8ad8ac
Showing 1 changed file with 107 additions and 66 deletions.
173 changes: 107 additions & 66 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 @@ -18,6 +18,7 @@
@click="stopPropa">
<bk-tab-panel label="Body" name="body"></bk-tab-panel>
<bk-tab-panel :label="t('请求详情')" name="detail"></bk-tab-panel>
<bk-tab-panel label="Headers" name="headers"></bk-tab-panel>
</bk-tab>
</div>
<div class="response-status flex" @click="stopPropa" v-show="activeIndex?.includes(1)">
Expand All @@ -38,78 +39,92 @@
</template>
<template #content>
<div class="response-main">
<div class="response-content-type flex" v-show="tabActive === 'body'">
<div class="payload-type">
<div
:class="['payload-type-item', bodyType === 'pretty' ? 'active' : '']"
@click="handleBodyTypeChange('pretty')"
>
<span class="icon apigateway-icon icon-ag-cardd"></span>
Pretty
<template v-if="tabActive !== 'headers'">
<div class="response-content-type flex" v-show="tabActive === 'body'">
<div class="payload-type">
<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', bodyType === 'raw' ? 'active' : '']"
@click="handleBodyTypeChange('raw')"
>
<span class="icon apigateway-icon icon-ag-shitu-liebiao"></span>
Raw
</div>
</div>
<div
:class="['payload-type-item', bodyType === 'raw' ? 'active' : '']"
@click="handleBodyTypeChange('raw')"
<bk-select
class="bk-select"
v-model="responseType"
:clearable="false"
:filterable="false"
:disabled="true"
v-bk-tooltips="t('暂不支持切换')"
>
<span class="icon apigateway-icon icon-ag-shitu-liebiao"></span>
Raw
</div>
<bk-option
v-for="(item, index) in bodyTypeList"
:id="item.value"
:key="index"
:name="item.label"
/>
</bk-select>
</div>
<bk-select
class="bk-select"
v-model="responseType"
:clearable="false"
:filterable="false"
:disabled="true"
v-bk-tooltips="t('暂不支持切换')"
>
<bk-option
v-for="(item, index) in bodyTypeList"
:id="item.value"
:key="index"
:name="item.label"
/>
</bk-select>
</div>
<div class="response-content-type flex" v-show="tabActive === 'detail'">
<div class="payload-type">
<div class="payload-type-item active">
<span class="icon apigateway-icon icon-ag-shell"></span>
Shell
</div>
<div class="payload-type-item">
<div class="response-content-type flex" v-show="tabActive === 'detail'">
<div class="payload-type">
<div class="payload-type-item active">
<span class="icon apigateway-icon icon-ag-shell"></span>
Shell
</div>
<!-- <div class="payload-type-item">
<span class="icon apigateway-icon icon-ag-python"></span>
Python
</div> -->
</div>
<bk-select
class="bk-select"
v-model="detailsType"
:clearable="false"
:filterable="false"
:disabled="true"
v-bk-tooltips="t('暂不支持切换')"
>
<bk-option
v-for="(item, index) in detailsTypeList"
:id="item.value"
:key="index"
:name="item.label"
/>
</bk-select>
</div>
<bk-select
class="bk-select"
v-model="detailsType"
:clearable="false"
:filterable="false"
:disabled="true"
v-bk-tooltips="t('暂不支持切换')"
>
<bk-option
v-for="(item, index) in detailsTypeList"
:id="item.value"
:key="index"
:name="item.label"
<div class="response-content">
<editor-monaco
v-model="editorText"
theme="Visual Studio"
ref="resourceEditorRef"
language="json"
:minimap="false"
:show-copy="true"
:show-full-screen="true"
:read-only="true"
/>
</bk-select>
</div>
<div class="response-content">
<editor-monaco
v-model="editorText"
theme="Visual Studio"
ref="resourceEditorRef"
language="json"
:minimap="false"
:show-copy="true"
:show-full-screen="true"
:read-only="true"
/>
</div>
</div>
</template>
<template v-else>
<bk-table
class="table-layout"
ref="bkTableRef"
:data="tableData"
show-overflow-tooltip
row-hover="auto"
:border="['outer', 'col']">
<bk-table-column :label="t('名称')" prop="name"></bk-table-column>
<bk-table-column :label="t('值')" prop="value"></bk-table-column>
</bk-table>
</template>
</div>
</template>
</bk-collapse-panel>
Expand All @@ -134,9 +149,15 @@ const props = defineProps({
const emit = defineEmits(['response-fold']);
type TableDataItem = {
name: String;
value: String;
};
const activeIndex = ref<number[]>([]);
const tabActive = ref<string>('body');
const responseType = ref<string>('JSON');
const tableData = ref<TableDataItem[]>([]);
const bodyTypeList = ref([
{
value: 'JSON',
Expand Down Expand Up @@ -207,10 +228,29 @@ const setEditorValue = () => {
activeIndex.value = [1];
};
const setTableData = () => {
const { headers } = data.value;
if (headers && JSON.stringify(headers) !== '{}') {
const list: TableDataItem[] = [];
Object.keys(headers).forEach((key: string) => {
list.push({
name: key,
value: headers[key],
});
});
tableData.value = list;
} else {
tableData.value = [];
}
};
watch(
() => tabActive.value,
() => {
setEditorValue();
(v) => {
if (v !== 'headers') {
setEditorValue();
}
},
);
Expand All @@ -220,6 +260,7 @@ watch(
data.value = v || {};
tabActive.value = 'body';
setEditorValue();
setTableData();
},
);
Expand Down

0 comments on commit d8ad8ac

Please sign in to comment.