diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index ef632be81..4fb193730 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -1409,6 +1409,7 @@ const lang: ILANG = {
'当前后端服务({name})已绑定以下 {num} 个环境,所有修改都将发布到这些环境中:{names}': ['The current backend service ({name}) has bound the following {num} environments to which all changes will be published: {names}'],
'网关环境【prod】中的配置【后端服务地址】不合法。请在网关 `后端服务` 中进行配置。': ['The back-end service address configured in gateway environment prod is invalid. Please configure in Gateway back-end services.'],
'最大 300s': ['Maximum 300s'],
+ '后端服务内容保存成功': ['The back-end service content is saved successfully. Procedure'],
'恢复初始值': ['Reset to default'],
'请输入超时时间': ['Please enter the timeout period'],
'批量修改超时时间': ['Batch modify timeout period'],
diff --git a/src/dashboard-front/src/views/backend-service/add.vue b/src/dashboard-front/src/views/backend-service/add.vue
index 9c8b6ffa8..a53b0a294 100644
--- a/src/dashboard-front/src/views/backend-service/add.vue
+++ b/src/dashboard-front/src/views/backend-service/add.vue
@@ -412,21 +412,22 @@ const handleConfirm = async () => {
};
isSaveLoading.value = true;
try {
+ let res: any = {};
if (!props.editId) {
- await createBackendService(apigwId, params);
+ res = await createBackendService(apigwId, params);
} else {
- await updateBackendService(apigwId, curServiceDetail.value.id, params);
+ res = await updateBackendService(apigwId, curServiceDetail.value.id, params);
}
if (isPublish.value && props.editId) {
sidesliderConfi.isShow = false;
- const stageNames = stageConfig.value?.map((item: any) => {
- return item.name;
- });
+ // const stageNames = stageConfig.value?.map((item: any) => {
+ // return item.name;
+ // });
- if (stageNames?.length) {
+ if (res?.updated_stages?.length) {
publishDialog.isShow = true;
- publishDialog.stageNames = stageNames;
+ publishDialog.stageNames = res?.updated_stages;
} else {
InfoBox({
title: t('后端服务内容保存成功'),
diff --git a/src/dashboard-front/src/views/online-debug/components/edit-table.vue b/src/dashboard-front/src/views/online-debug/components/edit-table.vue
index ebc405e07..56649b067 100644
--- a/src/dashboard-front/src/views/online-debug/components/edit-table.vue
+++ b/src/dashboard-front/src/views/online-debug/components/edit-table.vue
@@ -175,6 +175,8 @@ const props = defineProps({
},
});
+const emit = defineEmits(['change']);
+
const isShowVarPopover = ref(false);
const formRefs = ref(new Map());
@@ -398,6 +400,13 @@ watch(
},
);
+watch(
+ () => tableData.value,
+ (v) => {
+ emit('change', v);
+ },
+);
+
defineExpose({
validate,
getTableData,
diff --git a/src/dashboard-front/src/views/online-debug/components/payload-body.vue b/src/dashboard-front/src/views/online-debug/components/payload-body.vue
index 7b0a83766..3799a6da4 100644
--- a/src/dashboard-front/src/views/online-debug/components/payload-body.vue
+++ b/src/dashboard-front/src/views/online-debug/components/payload-body.vue
@@ -44,8 +44,16 @@
-->
-
-
+
+
('raw');
const rawType = ref('JSON');
const dataRef = ref();
@@ -127,6 +137,14 @@ const getData = () => {
};
};
+const handleDataChange = (list: any) => {
+ emit('dataChange', list);
+};
+
+const handleUrlencodedChange = (list: any) => {
+ emit('urlencodedChange', list);
+};
+
watch(
() => props.fromDataPayload,
(v: any) => {
diff --git a/src/dashboard-front/src/views/online-debug/components/payload-headers.vue b/src/dashboard-front/src/views/online-debug/components/payload-headers.vue
index 296c1e665..06a664fc0 100644
--- a/src/dashboard-front/src/views/online-debug/components/payload-headers.vue
+++ b/src/dashboard-front/src/views/online-debug/components/payload-headers.vue
@@ -14,7 +14,7 @@
-
+
@@ -36,6 +36,8 @@ const props = defineProps({
},
});
+const emit = defineEmits(['change']);
+
const activeIndex = ref([1]);
const editTableRef = ref();
const headerList = ref([]);
@@ -48,6 +50,10 @@ const getData = () => {
return editTableRef.value?.getTableData();
};
+const handleChange = (list: any) => {
+ emit('change', list);
+};
+
watch(
() => props.headersPayload,
(v: any) => {
diff --git a/src/dashboard-front/src/views/online-debug/components/payload-params.vue b/src/dashboard-front/src/views/online-debug/components/payload-params.vue
index 3bcc849fd..1c3afa678 100644
--- a/src/dashboard-front/src/views/online-debug/components/payload-params.vue
+++ b/src/dashboard-front/src/views/online-debug/components/payload-params.vue
@@ -14,7 +14,7 @@
-
+
@@ -29,7 +29,7 @@
-
+
@@ -59,6 +59,8 @@ const props = defineProps({
},
});
+const emit = defineEmits(['queryChange', 'pathChange']);
+
const queryRef = ref();
const queryList = ref([]);
const pathRef = ref();
@@ -82,6 +84,14 @@ const getData = () => {
};
};
+const handleQueryChange = (list: any) => {
+ emit('queryChange', list);
+};
+
+const handlePathChange = (list: any) => {
+ emit('pathChange', list);
+};
+
watch(
() => [props.queryPayload, props.pathPayload, props.priorityPath],
([v1, v2, v3]) => {
diff --git a/src/dashboard-front/src/views/online-debug/components/request-payload.vue b/src/dashboard-front/src/views/online-debug/components/request-payload.vue
index aa129a399..98b6f11ba 100644
--- a/src/dashboard-front/src/views/online-debug/components/request-payload.vue
+++ b/src/dashboard-front/src/views/online-debug/components/request-payload.vue
@@ -5,21 +5,44 @@
class="payload-tab"
>
+
+
+ Body
+
+
+
+ :raw-payload="schema.rawPayload"
+ @data-change="dataChange"
+ @urlencoded-change="urlencodedChange" />
+
+
+ Params
+ {{ Number(queryList?.length + pathList?.length) || 0 }}
+
+
+
+
+ Headers
+ {{ headersList?.length || 0 }}
+
+
@@ -66,6 +89,31 @@ const getData = () => {
};
};
+const headersList = ref([]);
+const headersChange = (list: any) => {
+ headersList.value = list;
+};
+
+const queryList = ref([]);
+const queryChange = (list: any) => {
+ queryList.value = list;
+};
+
+const pathList = ref([]);
+const pathChange = (list: any) => {
+ pathList.value = list;
+};
+
+const dataList = ref([]);
+const dataChange = (list: any) => {
+ dataList.value = list;
+};
+
+const urlencodedList = ref([]);
+const urlencodedChange = (list: any) => {
+ urlencodedList.value = list;
+};
+
watch(
() => props.tab,
(v) => {
@@ -85,5 +133,28 @@ defineExpose({
:deep(.bk-tab-content) {
padding: 12px 24px 12px 0px;
}
+ .tab-label {
+ .title {
+ font-size: 14px;
+ color: #63656E;
+ margin-right: 4px;
+ }
+ .count {
+ padding: 0px 8px;
+ font-size: 12px;
+ color: #979BA5;
+ background: #F0F1F5;
+ border-radius: 8px;
+ }
+ &.active {
+ .title {
+ color: #3A84FF;
+ }
+ .count {
+ color: #3A84FF;
+ background: #E1ECFF;
+ }
+ }
+ }
}
-
+
\ No newline at end of file
diff --git a/src/dashboard-front/src/views/online-debug/components/request-record.vue b/src/dashboard-front/src/views/online-debug/components/request-record.vue
index 753cda283..a35e14fb7 100644
--- a/src/dashboard-front/src/views/online-debug/components/request-record.vue
+++ b/src/dashboard-front/src/views/online-debug/components/request-record.vue
@@ -3,6 +3,7 @@
v-model:isShow="isShow"
:title="t('调用历史')"
:width="960"
+ class="sutra-scrollbar"
quick-close>
@@ -237,9 +238,16 @@ defineExpose({
max-height: 600px;
padding: 12px 0;
background: #FFFFFF;
- border: 1px solid #DCDEE5;
border-radius: 2px;
}
}
}
+.sutra-scrollbar {
+ :deep(.bk-modal-content) {
+ scrollbar-gutter: auto;
+ }
+ :deep(.bk-table-body) {
+ scrollbar-gutter: auto;
+ }
+}
diff --git a/src/dashboard-front/src/views/online-debug/index.vue b/src/dashboard-front/src/views/online-debug/index.vue
index 9fdf00bc7..7beca24e6 100644
--- a/src/dashboard-front/src/views/online-debug/index.vue
+++ b/src/dashboard-front/src/views/online-debug/index.vue
@@ -26,7 +26,7 @@
@@ -97,7 +97,7 @@
- {{ curResource?.method }}
+ {{ curResource?.method }}
{{ curResource?.path }}
@@ -115,55 +115,66 @@
{{ t('应用认证') }}:
-
-
- ({{ isDefaultAppAuth ? t('默认测试应用') : t('自定义应用') }})
- bk_app_code:{{ isDefaultAppAuth ? testAppCode : formData.authorization.bk_app_code }};
- bk_app_secret:{{ isDefaultAppAuth ? '******' : formData.authorization.bk_app_secret }}
-
-
-
-
-
- {{ t('默认测试应用') }}
- {{ t('自定义应用') }}
-
-
-
-
-
-
-
-
-
-
-
{{ t('默认测试应用,网关自动为其短期授权;自定义应用,需主动为应用授权资源访问权限') }}
+
+
+
+ ({{ isDefaultAppAuth ? t('默认测试应用') : t('自定义应用') }})
+ bk_app_code:{{ isDefaultAppAuth ? testAppCode : formData.authorization.bk_app_code }};
+ bk_app_secret:{{ isDefaultAppAuth ? '******' : formData.authorization.bk_app_secret }}
+
+
-
+
+
+
+
{{ t('应用认证') }}*
+
+ {{ t('默认测试应用') }}
+ {{ t('自定义应用') }}
+
+
+
+
+
+
+
+
+
+
+ {{ t('默认测试应用,网关自动为其短期授权;自定义应用,需主动为应用授权资源访问权限') }}
+
+
+
+
+
@@ -171,44 +182,55 @@
{{ t('用户认证') }}:
-
-
- ({{ formData.useUserFromCookies ? t('默认用户认证') : t('自定义用户认证') }})
- bk_token:{{ formData.useUserFromCookies ? '******' : formData.authorization.bk_token}}
-
-
-
-
-
- {{ t('默认用户认证') }}
- {{ t('自定义用户认证') }}
-
-
-
-
-
-
-
-
-
-
{{ t('默认测试应用,网关自动为其短期授权;自定义应用,需主动为应用授权资源访问权限') }}
+
+
+
+ ({{ formData.useUserFromCookies ? t('默认用户认证') : t('自定义用户认证') }})
+ bk_token:{{ formData.useUserFromCookies ? '******' : formData.authorization.bk_token}}
+
+
-
+
+
+
+
{{ t('用户认证') }}*
+
+ {{ t('默认用户认证') }}
+ {{ t('自定义用户认证') }}
+
+
+
+
+
+
+
+
+
+ {{ t('默认测试应用,网关自动为其短期授权;自定义应用,需主动为应用授权资源访问权限') }}
+
+
+
+
+
@@ -217,7 +239,7 @@
- {{ curResource?.method }}
+ {{ curResource?.method }}
{{ curResource?.path }}
@@ -810,14 +832,14 @@ watch(
},
);
-watch(
- () => curGroup.value,
- () => {
- if (curGroup.value) {
- activeName.value = [curGroup.value?.labelName];
- }
- },
-);
+// watch(
+// () => curGroup.value,
+// () => {
+// if (curGroup.value) {
+// activeName.value = [curGroup.value?.labelName];
+// }
+// },
+// );
watch(
() => keyword.value,
@@ -877,7 +899,7 @@ watch(
background: #FFFFFF;
box-shadow: 0 2px 4px 0 #1919290d;
.request-setting-title {
- padding: 24px 24px 16px;
+ padding: 24px 24px 4px;
.request-source-name {
display: flex;
align-items: center;
@@ -923,7 +945,7 @@ watch(
}
.request-setting-collapse {
:deep(.bk-collapse-content) {
- padding: 0px 45px 24px 45px;
+ padding: 0px 45px 20px 45px;
}
}
}
@@ -961,6 +983,16 @@ watch(
}
}
.edit-user-auth {
+ .title {
+ font-size: 12px;
+ color: #63656E;
+ margin-bottom: 8px;
+ span {
+ color: #EA3636;
+ margin-left: 6px;
+ vertical-align: middle;
+ }
+ }
.auth-type {
margin-bottom: 16px;
}
@@ -968,8 +1000,7 @@ watch(
margin-bottom: 16px;
}
.edit-user-tips {
- margin-top: -8px;
- margin-bottom: 16px;
+ margin-bottom: 8px;
display: flex;
align-items: center;
font-size: 14px;
@@ -981,8 +1012,7 @@ watch(
}
}
.seldom-path {
- padding-left: 20px;
- padding-top: 8px;
+ padding: 2px 20px 20px;
}
.request-payload {
background: #FFFFFF;
@@ -1110,6 +1140,16 @@ watch(
:deep(.bk-resize-trigger:hover) {
border-top: 2px solid #3a84ff;
}
+ :deep(.bk-resize-layout-aside:after) {
+ bottom: -5px;
+ }
+}
+.fixed-w {
+ width: 88px;
+}
+.method-tag {
+ height: 16px;
+ line-height: 16px;
}
.fixed-w {
width: 88px;