ソースを参照

chore: 详情调试弹窗补充请求参数展示

在问题详情页调试弹窗中新增请求参数区块,和返回 JSON 一并展示,便于比对接口入参与返回内容。

Made-with: Cursor
haifeng.zhang 5 日 前
コミット
6b7cb000ce
1 ファイル変更19 行追加2 行削除
  1. 19 2
      src/subPages/pages/reportProblems/detail.vue

+ 19 - 2
src/subPages/pages/reportProblems/detail.vue

@@ -15,6 +15,7 @@ import { computed, ref } from 'vue';
 
 const questDetail = ref<QuestionDetailRes>()
 const showRawJsonPopup = ref(false)
+const detailReqParams = ref<{ id: string } | null>(null)
 
 const statusText = computed(() => {
   const status = questDetail.value?.status
@@ -37,9 +38,15 @@ const detailRawJson = computed(() => {
   return JSON.stringify(questDetail.value, null, 2)
 })
 
+const detailReqParamsJson = computed(() => {
+  if (!detailReqParams.value) return '{}'
+  return JSON.stringify(detailReqParams.value, null, 2)
+})
+
 const loadDetail = async (id: string) => {
   questDetail.value = undefined
   showRawJsonPopup.value = false
+  detailReqParams.value = { id }
   const { data } = await getQuestionReportDetail(id)
   questDetail.value = data
 }
@@ -66,10 +73,10 @@ onLoad(async (option) => {
       </view>
     </view>
     <!-- 问题标题 -->
-    <view class="form-item">
+    <!-- <view class="form-item">
       <view class="label">标题:</view>
       <view class="value">{{ questDetail?.questionTitle }}</view>
-    </view>
+    </view> -->
     <!-- 问题内容 -->
     <view class="form-item">
       <view class="label">内容:</view>
@@ -114,6 +121,10 @@ onLoad(async (option) => {
       :style="{ height: '75%' }"
     >
       <view class="json-popup">
+        <view class="json-title">请求参数</view>
+        <scroll-view scroll-y class="json-scroll json-scroll--small">
+          <text class="json-text">{{ detailReqParamsJson }}</text>
+        </scroll-view>
         <view class="json-title">详情接口完整JSON</view>
         <scroll-view scroll-y class="json-scroll">
           <text class="json-text">{{ detailRawJson }}</text>
@@ -158,6 +169,12 @@ onLoad(async (option) => {
   padding: 12px;
 }
 
+.json-scroll--small {
+  flex: 0 0 auto;
+  max-height: 120px;
+  margin-bottom: 10px;
+}
+
 .json-text {
   white-space: pre-wrap;
   word-break: break-all;