robocanic commented on code in PR #1429:
URL: https://github.com/apache/dubbo-admin/pull/1429#discussion_r3005581268
##########
ui-vue3/src/views/resources/services/tabs/debug.vue:
##########
@@ -16,135 +16,725 @@
-->
<template>
<div class="__container_services_tabs_debug">
- <div class="tabs-title">方法列表</div>
- <a-tabs v-model:activeKey="activeKey" tab-position="left" :tabBarStyle="{
width: '200px' }">
- <a-tab-pane v-for="tabName in methodTabs" :key="tabName"
:tab="`${tabName}`">
- <a-descriptions :column="2" layout="vertical">
- <a-descriptions-item label="接口">
- <p class="description-item-content">
- org.apache.dubbo.samples.UserService:getPermissions
- </p>
- </a-descriptions-item>
- <a-descriptions-item label="指定生产者">
- <a-select
- v-model:value="versionAndGroup"
- size="large"
- :options="versionAndGroupOptions"
- class="description-item-content"
- ></a-select>
- </a-descriptions-item>
- <a-descriptions-item label="入参类型">
- <a-tree block-node :tree-data="enterParamType"
class="description-item-content" />
- </a-descriptions-item>
- <a-descriptions-item label="出参类型">
- <a-tree block-node :tree-data="outputParamType"
class="description-item-content" />
- </a-descriptions-item>
- <a-descriptions-item label="请求">
- <monaco-editor editorId="requestEditor" width="90%" height="300px"
/>
- </a-descriptions-item>
- <a-descriptions-item label="响应">
- <monaco-editor editorId="responseEditor" width="90%"
height="300px" />
- </a-descriptions-item>
- </a-descriptions>
- <a-button type="primary">发送请求</a-button>
- </a-tab-pane>
- </a-tabs>
+ <a-card :bordered="false" :body-style="{ padding: '24px' }">
+ <div class="tabs-title">方法列表</div>
+ <a-spin :spinning="loadingMethods">
+ <a-empty
+ v-if="!loadingMethods && methodList.length === 0"
+ :description="emptyDescription"
+ />
+ <a-tabs
+ v-else
+ v-model:activeKey="activeKey"
+ tab-position="left"
+ class="debug-tabs"
+ @change="onTabChange"
+ >
+ <a-tab-pane
+ v-for="(method, index) in methodList"
+ :key="String(index)"
+ :tab="method.methodName"
+ >
+ <a-spin :spinning="loadingDetail">
+ <div class="tab-content">
+ <a-row :gutter="[24, 24]">
+ <!-- Row 1: Parameter Types -->
+ <a-col :span="12">
+ <div class="section-title">入参类型:</div>
+ <a-tree
+ v-if="enterParamType.length > 0"
+ block-node
+ :tree-data="enterParamType"
+ default-expand-all
+ />
+ <span v-else class="empty-hint">无入参</span>
+ </a-col>
+ <a-col :span="12">
+ <div class="section-title">出参类型:</div>
+ <a-tree
+ v-if="outputParamType.length > 0"
+ block-node
+ :tree-data="outputParamType"
+ default-expand-all
+ />
+ <span v-else class="empty-hint">无出参</span>
+ </a-col>
+
+ <!-- Row 2: Request & Response Editors -->
+ <a-col :span="12">
+ <div class="section-title">请求:</div>
+ <div class="editor-wrapper">
+ <monaco-editor
+ v-model="requestValue"
+ :editor-id="`requestEditor-${index}`"
+ height="300px"
+ />
+ <div class="editor-tag">JSON</div>
+ </div>
+ </a-col>
+ <a-col :span="12">
+ <div class="section-title">
+ 响应:
+ <a-tag :color="PRIMARY_COLOR">
+ <template #icon>
+ <clock-circle-outlined />
+ </template>
+ 耗时: {{ elapsedMs }}ms
+ </a-tag>
+ </div>
+ <div class="editor-wrapper">
+ <monaco-editor
+ v-model="responseValue"
+ :editor-id="`responseEditor-${index}`"
+ height="300px"
+ :readonly="true"
+ />
+ <div class="editor-tag">JSON</div>
+ </div>
+ </a-col>
+
+ <!-- Row 3: Bottom Settings -->
+ <a-col :span="8">
+ <div class="section-title">调用实例:</div>
+ <a-select
+ v-model:value="instanceName"
Review Comment:
instanceName直接用接口返回的name即可，不用自己拼<img width="2135" height="866"
alt="PixPin_2026-03-29_09-39-56"
src="https://github.com/user-attachments/assets/6ec6e918-7496-465a-ab1f-d8fa29a0ab57";
/>
<img width="1916" height="422" alt="Image"
src="https://github.com/user-attachments/assets/96eead57-78a1-44b0-ab60-b39988d02df8";
/>
##########
ui-vue3/src/views/resources/services/tabs/debug.vue:
##########
@@ -16,135 +16,725 @@
-->
<template>
<div class="__container_services_tabs_debug">
- <div class="tabs-title">方法列表</div>
- <a-tabs v-model:activeKey="activeKey" tab-position="left" :tabBarStyle="{
width: '200px' }">
- <a-tab-pane v-for="tabName in methodTabs" :key="tabName"
:tab="`${tabName}`">
- <a-descriptions :column="2" layout="vertical">
- <a-descriptions-item label="接口">
- <p class="description-item-content">
- org.apache.dubbo.samples.UserService:getPermissions
- </p>
- </a-descriptions-item>
- <a-descriptions-item label="指定生产者">
- <a-select
- v-model:value="versionAndGroup"
- size="large"
- :options="versionAndGroupOptions"
- class="description-item-content"
- ></a-select>
- </a-descriptions-item>
- <a-descriptions-item label="入参类型">
- <a-tree block-node :tree-data="enterParamType"
class="description-item-content" />
- </a-descriptions-item>
- <a-descriptions-item label="出参类型">
- <a-tree block-node :tree-data="outputParamType"
class="description-item-content" />
- </a-descriptions-item>
- <a-descriptions-item label="请求">
- <monaco-editor editorId="requestEditor" width="90%" height="300px"
/>
- </a-descriptions-item>
- <a-descriptions-item label="响应">
- <monaco-editor editorId="responseEditor" width="90%"
height="300px" />
- </a-descriptions-item>
- </a-descriptions>
- <a-button type="primary">发送请求</a-button>
- </a-tab-pane>
- </a-tabs>
+ <a-card :bordered="false" :body-style="{ padding: '24px' }">
+ <div class="tabs-title">方法列表</div>
+ <a-spin :spinning="loadingMethods">
Review Comment:
Suggestion: 方法列表的方法选中态的背景色能置为主体色或者区分得更明显一些吗，因为字体比较细，有点看不太清
<img width="2130" height="1073" alt="Image"
src="https://github.com/user-attachments/assets/fc8393c7-77e2-4ecd-a297-6d1d2fbf6a61";
/>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
