|
|
@@ -269,7 +269,7 @@
|
|
|
<template v-else>
|
|
|
<div v-if="requiredParams.length" class="otp-param-required-box">
|
|
|
<div
|
|
|
- v-for="param in requiredParams"
|
|
|
+ v-for="(param, paramIndex) in requiredParams"
|
|
|
:key="param.name"
|
|
|
class="otp-param-required-item"
|
|
|
>
|
|
|
@@ -285,6 +285,31 @@
|
|
|
class="otp-param-input otp-param-input--required"
|
|
|
:placeholder="param.placeholder || param.desc"
|
|
|
/>
|
|
|
+ <div
|
|
|
+ v-if="paramIndex === 0 && displayRecommendQuestions.length"
|
|
|
+ class="otp-recommend"
|
|
|
+ >
|
|
|
+ <div class="otp-recommend-main">
|
|
|
+ <span class="otp-recommend-label">推荐问题:</span>
|
|
|
+ <button
|
|
|
+ v-for="(question, qIndex) in displayRecommendQuestions"
|
|
|
+ :key="`${recommendPageIndex}-${qIndex}`"
|
|
|
+ type="button"
|
|
|
+ class="otp-recommend-chip"
|
|
|
+ @click="applyRecommendQuestion(question, param)"
|
|
|
+ >
|
|
|
+ {{ question }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="otp-recommend-refresh"
|
|
|
+ @click="refreshRecommendQuestions"
|
|
|
+ >
|
|
|
+ <icon-svg name="cut_blue" size="14px" />
|
|
|
+ <span>换一换</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -567,6 +592,27 @@ const requestParams = ref([]);
|
|
|
const responseStructure = ref([]);
|
|
|
const paramTab = ref("request");
|
|
|
const jsonMode = ref(false);
|
|
|
+/** 推荐问题：后续接接口填充，暂无数据则不展示 */
|
|
|
+const recommendQuestionPool = ref([]);
|
|
|
+const recommendPageIndex = ref(0);
|
|
|
+const displayRecommendQuestions = computed(() => {
|
|
|
+ const pool = recommendQuestionPool.value;
|
|
|
+ if (!pool.length) return [];
|
|
|
+ const pageSize = 2;
|
|
|
+ const start = (recommendPageIndex.value * pageSize) % pool.length;
|
|
|
+ const list = [];
|
|
|
+ for (let i = 0; i < pageSize && i < pool.length; i += 1) {
|
|
|
+ list.push(pool[(start + i) % pool.length]);
|
|
|
+ }
|
|
|
+ return list;
|
|
|
+});
|
|
|
+const refreshRecommendQuestions = () => {
|
|
|
+ recommendPageIndex.value += 1;
|
|
|
+};
|
|
|
+const applyRecommendQuestion = (question, param) => {
|
|
|
+ if (!param || !question) return;
|
|
|
+ param.value = question;
|
|
|
+};
|
|
|
const requestJsonText = ref("{}");
|
|
|
const tokenVisible = ref(false);
|
|
|
const resultTab = ref("业务数据");
|
|
|
@@ -642,6 +688,8 @@ const resetTestState = () => {
|
|
|
requestParams.value = [];
|
|
|
responseStructure.value = [];
|
|
|
requestJsonText.value = "{}";
|
|
|
+ recommendQuestionPool.value = [];
|
|
|
+ recommendPageIndex.value = 0;
|
|
|
searchResult.value = null;
|
|
|
resultMeta.value = { code: null, time: null, ok: false, label: "-" };
|
|
|
};
|
|
|
@@ -681,6 +729,7 @@ watch(
|
|
|
|
|
|
watch(activeToolCode, () => {
|
|
|
syncParamsFromTool();
|
|
|
+ recommendPageIndex.value = 0;
|
|
|
searchResult.value = null;
|
|
|
resultMeta.value = { code: null, time: null, ok: false, label: "-" };
|
|
|
});
|
|
|
@@ -2397,6 +2446,66 @@ const runTest = async () => {
|
|
|
background: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
+.otp-recommend {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.otp-recommend-main {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ min-width: 0;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.otp-recommend-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #64748B;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.otp-recommend-chip {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 4px 6px;
|
|
|
+ border: 1px solid #E2E8F0;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #F8FAFC;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: justify;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.otp-recommend-refresh {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ gap: 4px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1678FF;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: justify;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
.otp-param-input--optional {
|
|
|
padding: 12px;
|
|
|
background: #F8FAFC;
|
|
|
@@ -2453,10 +2562,20 @@ const runTest = async () => {
|
|
|
.otp-result {
|
|
|
flex: 1.5 1.5 0;
|
|
|
min-width: 0;
|
|
|
+ align-self: stretch;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
max-height: 100%;
|
|
|
+ min-height: 0;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
+ &:has(.otp-result-card.is-empty) {
|
|
|
+ max-height: none;
|
|
|
+ min-height: 560px;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.otp-result-card {
|
|
|
@@ -2464,7 +2583,10 @@ const runTest = async () => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
- min-height: 560px;
|
|
|
+ flex: 1;
|
|
|
+ min-height: min(560px, 100%);
|
|
|
+ max-height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
padding: 16px;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px 4px 24px 0px rgba(15, 23, 42, 0.06);
|
|
|
@@ -2472,8 +2594,12 @@ const runTest = async () => {
|
|
|
border: 1px solid #E2E8F0;
|
|
|
|
|
|
&.is-empty {
|
|
|
+ flex: none;
|
|
|
gap: 0;
|
|
|
padding: 0;
|
|
|
+ height: 560px;
|
|
|
+ min-height: 560px;
|
|
|
+ max-height: 560px;
|
|
|
background: #0F172A;
|
|
|
box-shadow: none;
|
|
|
border-color: transparent;
|
|
|
@@ -2486,6 +2612,7 @@ const runTest = async () => {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
padding-bottom: 16px;
|
|
|
border-bottom: 1px solid #E2E8F0;
|
|
|
}
|
|
|
@@ -2603,6 +2730,7 @@ const runTest = async () => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
margin-top: 0;
|
|
|
padding: 14px 16px;
|
|
|
background: #F8FAFC;
|
|
|
@@ -2659,6 +2787,7 @@ const runTest = async () => {
|
|
|
.otp-result-tabs {
|
|
|
display: flex;
|
|
|
gap: 24px;
|
|
|
+ flex-shrink: 0;
|
|
|
margin: 0;
|
|
|
border-bottom: 1px solid #E2E8F0;
|
|
|
}
|
|
|
@@ -2696,8 +2825,9 @@ const runTest = async () => {
|
|
|
|
|
|
.otp-result-code {
|
|
|
box-sizing: border-box;
|
|
|
- flex: none;
|
|
|
- height: 418px;
|
|
|
+ flex: 1 1 418px;
|
|
|
+ min-height: 0;
|
|
|
+ height: auto;
|
|
|
margin: 0;
|
|
|
padding: 12px;
|
|
|
overflow: auto;
|
|
|
@@ -2728,6 +2858,7 @@ const runTest = async () => {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
+ flex-shrink: 0;
|
|
|
margin: 0;
|
|
|
padding: 10px 20px;
|
|
|
border-radius: 8px;
|
|
|
@@ -2843,8 +2974,14 @@ const runTest = async () => {
|
|
|
}
|
|
|
|
|
|
.otp-result-card {
|
|
|
- min-height: 480px;
|
|
|
+ min-height: min(480px, 100%);
|
|
|
padding: 12px;
|
|
|
+
|
|
|
+ &.is-empty {
|
|
|
+ height: 560px;
|
|
|
+ min-height: 560px;
|
|
|
+ max-height: 560px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.otp-result-code {
|
|
|
@@ -2874,6 +3011,12 @@ const runTest = async () => {
|
|
|
|
|
|
.otp-result-card {
|
|
|
min-height: 360px;
|
|
|
+
|
|
|
+ &.is-empty {
|
|
|
+ height: 560px;
|
|
|
+ min-height: 560px;
|
|
|
+ max-height: 560px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
肖栋
