From 1ba75d3e292b0abb6af6c63b04da0b4358508f80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9A=AE=E5=85=89=EF=BC=9A=E5=9F=8E=E4=B8=AD=E5=9F=8E?=
 <806783409@qq.com>
Date: Sun, 14 Nov 2021 23:05:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=84=E5=BC=82=E5=B8=B8=E6=83=85=E5=86=B5?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E7=9A=84=E6=8E=A5=E5=8F=A3=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../impl/DbTableRelationServiceImpl.java      |  10 +-
 .../controller/vo/ProxyRequestResultVo.java   |  10 +-
 .../service/SwaggerHttpRequestService.java    |   2 +-
 .../src/components/layouts/PageLayout.vue     |  13 +-
 .../src/components/params/ParamTable.vue      |   8 +-
 zyplayer-doc-ui/swagger-ui/src/routes.js      |   8 +
 .../src/views/apiRequest/ApiRequest.vue       | 215 +++++++++++++++++
 .../src/views/apiRequest/ApiRequestResult.vue | 223 ++++++++++++++++++
 .../src/views/doc/docView/DocContent.vue      |   2 +-
 .../src/views/doc/docView/DocDebugger.vue     |   4 +-
 .../views/doc/docView/DocDebuggerResult.vue   | 124 ++++++----
 11 files changed, 552 insertions(+), 67 deletions(-)
 create mode 100644 zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue
 create mode 100644 zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue

diff --git a/zyplayer-doc-data/src/main/java/com/zyplayer/doc/data/service/manage/impl/DbTableRelationServiceImpl.java b/zyplayer-doc-data/src/main/java/com/zyplayer/doc/data/service/manage/impl/DbTableRelationServiceImpl.java
index 7dfcd4e1..c11ecc1b 100644
--- a/zyplayer-doc-data/src/main/java/com/zyplayer/doc/data/service/manage/impl/DbTableRelationServiceImpl.java
+++ b/zyplayer-doc-data/src/main/java/com/zyplayer/doc/data/service/manage/impl/DbTableRelationServiceImpl.java
@@ -1,24 +1,20 @@
 package com.zyplayer.doc.data.service.manage.impl;
 
 import com.alibaba.fastjson.JSON;
-import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
-import com.sun.jersey.server.impl.wadl.WadlResource;
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.zyplayer.doc.data.config.security.DocUserDetails;
 import com.zyplayer.doc.data.config.security.DocUserUtil;
 import com.zyplayer.doc.data.repository.manage.entity.DbTableRelation;
 import com.zyplayer.doc.data.repository.manage.mapper.DbTableRelationMapper;
 import com.zyplayer.doc.data.repository.manage.param.TableRelationParam;
-import com.zyplayer.doc.data.repository.manage.vo.TableRelationVo;
 import com.zyplayer.doc.data.service.manage.DbTableRelationService;
-import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
-import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang.StringUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
-import javax.annotation.Resource;
-import java.util.*;
+import java.util.Date;
+import java.util.List;
 
 /**
  * <p>
diff --git a/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/controller/vo/ProxyRequestResultVo.java b/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/controller/vo/ProxyRequestResultVo.java
index d48a6a44..04a26aab 100644
--- a/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/controller/vo/ProxyRequestResultVo.java
+++ b/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/controller/vo/ProxyRequestResultVo.java
@@ -8,7 +8,7 @@ public class ProxyRequestResultVo {
 	private List<HttpHeaderVo> headers;
 	private Integer status;
 	private Long useTime;
-	private Integer bodyLength;
+	private Integer contentLength;
 	private String data;
 	private String errorMsg;
 	
@@ -60,11 +60,11 @@ public class ProxyRequestResultVo {
 		this.errorMsg = errorMsg;
 	}
 	
-	public Integer getBodyLength() {
-		return bodyLength;
+	public Integer getContentLength() {
+		return contentLength;
 	}
 	
-	public void setBodyLength(Integer bodyLength) {
-		this.bodyLength = bodyLength;
+	public void setContentLength(Integer contentLength) {
+		this.contentLength = contentLength;
 	}
 }
diff --git a/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/service/SwaggerHttpRequestService.java b/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/service/SwaggerHttpRequestService.java
index 6c44bb78..b99551a9 100644
--- a/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/service/SwaggerHttpRequestService.java
+++ b/zyplayer-doc-swagger-plus/src/main/java/com/zyplayer/doc/swaggerplus/service/SwaggerHttpRequestService.java
@@ -111,7 +111,7 @@ public class SwaggerHttpRequestService {
 			HttpResponse httpResponse = httpRequest.timeout(10000).execute();
 			resultVo.setData(httpResponse.body());
 			resultVo.setStatus(httpResponse.getStatus());
-			resultVo.setBodyLength(httpResponse.bodyBytes().length);
+			resultVo.setContentLength(httpResponse.bodyBytes().length);
 			// 设置返回的cookies
 			List<HttpCookie> responseCookies = httpResponse.getCookies();
 			if (CollectionUtils.isNotEmpty(responseCookies)) {
diff --git a/zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue b/zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue
index ff4ffc45..0d4b0b84 100644
--- a/zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="page-layout">
-		<a-tabs type="editable-card" hide-add v-model:activeKey="activePage" @tab-click="changePage" @edit="removePageTab" style="padding: 5px 10px 0;">
+		<a-tabs type="editable-card" v-model:activeKey="activePage" @tab-click="changePage" @edit="editPageTab" style="padding: 5px 10px 0;">
 			<a-tab-pane closable :tab="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
 		</a-tabs>
 		<div class="page-body">
@@ -26,6 +26,7 @@
 				ignoreParamPath: [
 					"/data/export",
 				],
+				apiRequestIndex: 1,
 			}
 		},
 		computed: {
@@ -69,6 +70,16 @@
 			editPage(key, action) {
 				this[action](key);
 			},
+			editPageTab(key, action) {
+				if (action === 'add') {
+					this.addPageTab();
+				} else {
+					this.removePageTab(key);
+				}
+			},
+			addPageTab() {
+				this.$router.push({path: '/doc/apiRequest', query: {id: this.apiRequestIndex++}});
+			},
 			removePageTab(key) {
 				if (this.pageList.length === 1) {
 					this.$message.warning('这是最后一页，不能再关闭了啦');
diff --git a/zyplayer-doc-ui/swagger-ui/src/components/params/ParamTable.vue b/zyplayer-doc-ui/swagger-ui/src/components/params/ParamTable.vue
index e64804d4..2f1001f6 100644
--- a/zyplayer-doc-ui/swagger-ui/src/components/params/ParamTable.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/components/params/ParamTable.vue
@@ -31,12 +31,16 @@
                     <a-tag color="green" v-else>{{text||'-'}}</a-tag>
                 </template>
                 <template v-if="column.dataIndex === 'value'">
-                    <a-select v-if="record.enum && record.type === 'array'" v-model:value="record.value" mode="multiple" :placeholder="record.description || '请选择'" style="width: 100%;">
+                    <a-select v-if="record.enum && record.type === 'array'" v-model:value="record.value" mode="multiple" :placeholder="record.description || '请选择枚举值'" style="width: 100%;">
                         <a-select-option :value="enums" v-for="enums in record.enum">{{enums}}</a-select-option>
                     </a-select>
-                    <a-select v-else-if="record.enum" v-model:value="record.value" :placeholder="record.description || '请选择'" style="width: 100%;">
+                    <a-select v-else-if="record.enum" v-model:value="record.value" :placeholder="record.description || '请选择枚举值'" style="width: 100%;">
                         <a-select-option :value="enums" v-for="enums in record.enum">{{enums}}</a-select-option>
                     </a-select>
+                    <a-select v-else-if="record.type==='boolean'" v-model:value="record.value" :placeholder="record.description || '请选择参数值'" style="width: 100%;">
+                        <a-select-option value="true">TRUE</a-select-option>
+                        <a-select-option value="false">FALSE</a-select-option>
+                    </a-select>
                     <a-upload v-else-if="record.type==='file' || record.subType === 'file' || record.subType === 'MultipartFile'"
                               :file-list="record.value" name="file" :multiple="record.type === 'array'"
                               :before-upload="file=>{return beforeUpload(file, record)}"
diff --git a/zyplayer-doc-ui/swagger-ui/src/routes.js b/zyplayer-doc-ui/swagger-ui/src/routes.js
index 2fe1ff94..2f5d972b 100644
--- a/zyplayer-doc-ui/swagger-ui/src/routes.js
+++ b/zyplayer-doc-ui/swagger-ui/src/routes.js
@@ -60,6 +60,14 @@ let routers = [
                         },
                         component: () => import('./views/doc/DocView.vue')
                     },
+                    {
+                        path: '/doc/apiRequest',
+                        name: '接口请求',
+                        meta: {
+                            hidden: true,
+                        },
+                        component: () => import('./views/apiRequest/ApiRequest.vue')
+                    },
                 ]
             },
         ]
diff --git a/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue b/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue
new file mode 100644
index 00000000..42888d3b
--- /dev/null
+++ b/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequest.vue
@@ -0,0 +1,215 @@
+<template>
+    <div>
+        <a-input-search v-model:value="docUrl" @search="sendRequest">
+            <template #addonBefore>
+                <a-select v-model:value="docInfoShow.method" style="width: 100px;">
+                    <a-select-option :value="method" v-for="method in methodList">{{method.toUpperCase()}}</a-select-option>
+                </a-select>
+            </template>
+            <template #enterButton>
+                <a-button type="primary" :loading="requestLoading">发送请求</a-button>
+            </template>
+        </a-input-search>
+        <a-tabs v-model:activeKey="activePage" closable @tab-click="activePageChange" style="padding: 5px 10px 0;">
+            <a-tab-pane tab="URL参数" key="urlParam" forceRender>
+                <div v-show="queryParamVisible">
+                    <ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
+                </div>
+            </a-tab-pane>
+            <a-tab-pane tab="Body参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
+                <div v-show="queryParamVisible">
+                    <div style="margin-bottom: 6px;">
+                        <a-radio-group v-model:value="bodyParamType">
+                            <a-radio value="none">none</a-radio>
+                            <a-radio value="form">form-data</a-radio>
+                            <a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
+                            <a-radio value="row">row</a-radio>
+                            <a-radio value="binary">binary</a-radio>
+                        </a-radio-group>
+                        <a-select v-if="bodyParamType === 'row'" v-model:value="consumesParamType" size="small" style="margin-left: 10px;vertical-align: top;width: 100px;">
+                            <a-select-option value="json">JSON</a-select-option>
+                            <a-select-option value="html">HTML</a-select-option>
+                            <a-select-option value="xml">XML</a-select-option>
+                            <a-select-option value="javascript">JavaScript</a-select-option>
+                            <a-select-option value="text">TEXT</a-select-option>
+                        </a-select>
+                    </div>
+                    <div v-show="bodyParamType === 'form'">
+                        <ParamTable ref="formParamRef" :paramList="formParamList" showType></ParamTable>
+                    </div>
+                    <div v-show="bodyParamType === 'formUrlEncode'">
+                        <ParamTable ref="formEncodeParamRef" :paramList="formEncodeParamList"></ParamTable>
+                    </div>
+                    <div v-show="bodyParamType === 'row'">
+                        <ParamBody ref="bodyParamRef" :rowLang="consumesParamType" :paramList="bodyRowParamList"></ParamBody>
+                    </div>
+                </div>
+            </a-tab-pane>
+            <a-tab-pane tab="Header参数" key="headerParam" forceRender>
+                <div v-show="queryParamVisible">
+                    <ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
+                </div>
+            </a-tab-pane>
+            <a-tab-pane tab="Cookie参数" key="cookieParam" forceRender>
+                <div v-show="queryParamVisible">
+                    <ParamTable ref="cookieParamRef" :paramList="cookieParamList"></ParamTable>
+                </div>
+            </a-tab-pane>
+            <template #rightExtra>
+                <a-button v-if="queryParamVisible" @click="hideQueryParam" type="link">收起参数</a-button>
+                <a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
+            </template>
+        </a-tabs>
+        <ApiRequestResult :result="requestResult" :loading="requestLoading"></ApiRequestResult>
+    </div>
+</template>
+
+<script>
+    import {toRefs, ref, reactive, onMounted, watch} from 'vue';
+    import { useRouter, useRoute } from "vue-router";
+    import {useStore} from 'vuex';
+    import { message } from 'ant-design-vue';
+    import {markdownIt} from 'mavon-editor'
+    import ApiRequestResult from './ApiRequestResult.vue'
+    import ParamTable from '../../components/params/ParamTable.vue'
+    import ParamBody from '../../components/params/ParamBody.vue'
+    import {CloseOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined} from '@ant-design/icons-vue';
+    import 'mavon-editor/dist/markdown/github-markdown.min.css'
+    import 'mavon-editor/dist/css/index.css'
+    import {zyplayerApi} from "../../api";
+
+    export default {
+        components: {
+            VerticalAlignTopOutlined, VerticalAlignBottomOutlined, CloseOutlined, ParamTable, ParamBody, ApiRequestResult,
+        },
+        setup(props) {
+            let docUrl = ref('http://baidu.com');
+            let activePage = ref('urlParam');
+            const route = useRoute();
+            const store = useStore();
+            store.commit('addTableName', {key: route.fullPath, val: '接口请求' + route.query.id});
+            // URL参数处理
+            const urlParamRef = ref();
+            let urlParamList = ref([]);
+            // Header参数处理
+            const headerParamRef = ref();
+            let headerParamList = ref([]);
+            // cookie参数处理
+            const cookieParamRef = ref();
+            let cookieParamList = ref([]);
+            // form参数处理
+            const formParamRef= ref();
+            let formParamList = ref([]);
+            // form参数处理
+            const formEncodeParamRef = ref();
+            let formEncodeParamList = ref([]);
+            // body 参数
+            let bodyParamRef = ref();
+            let bodyParamType = ref('form');
+            let consumesParamType = ref('json');
+            let bodyRowParamList = ref({});
+            // 配置信息
+            let docInfoShow = ref({method: 'get'});
+            // 发送请求
+            let requestResult = ref({});
+            let requestLoading = ref(false);
+            const sendRequest = () => {
+                const formData = new FormData();
+                let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
+                let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
+                    return item.name + '=' + encodeURIComponent(item.value);
+                }).join('&');
+                let headerParamSelected = headerParamRef.value.getSelectedRowKeys();
+                let headerParamArr = headerParamList.value.filter(item => headerParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
+                    return {code: item.name, value: item.value};
+                });
+                let cookieParamSelected = cookieParamRef.value.getSelectedRowKeys();
+                let cookieParamArr = cookieParamList.value.filter(item => cookieParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
+                    return {code: item.name, value: item.value};
+                });
+                let formParamArr = [];
+                if (formParamRef.value) {
+                    let formParamSelected = formParamRef.value.getSelectedRowKeys();
+                    formParamArr = formParamList.value.filter(item => formParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
+                        // todo 判断处理文件格式
+                        return {code: item.name, value: item.value};
+                    });
+                }
+                let formEncodeParamArr = [];
+                if (formEncodeParamRef.value) {
+                    let formEncodeParamSelected = formEncodeParamRef.value.getSelectedRowKeys();
+                    formEncodeParamArr = formEncodeParamList.value.filter(item => formEncodeParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
+                        // todo 判断处理文件格式
+                        return {code: item.name, value: item.value};
+                    });
+                }
+                let bodyParamStr = '';
+                if (bodyParamRef.value) {
+                    bodyParamStr = bodyParamRef.value.getParam();
+                }
+                let url = urlParamStr ? (docUrl.value + '?' + urlParamStr) : docUrl.value;
+                formData.append('url', url);
+                formData.append('host', '');
+                formData.append('method', docInfoShow.value.method);
+                formData.append('contentType', '');
+                formData.append('headerParam', JSON.stringify(headerParamArr));
+                formData.append('cookieParam', JSON.stringify(cookieParamArr));
+                formData.append('formParam', JSON.stringify(formParamArr));
+                formData.append('formEncodeParam', JSON.stringify(formEncodeParamArr));
+                formData.append('bodyParam', bodyParamStr);
+                requestLoading.value = true;
+                requestResult.value = {};
+                zyplayerApi.requestUrl(formData).then(res => {
+                    requestResult.value = res;
+                    requestLoading.value = false;
+                }).catch(e => {
+                    requestLoading.value = false;
+                });
+            };
+            let queryParamVisible = ref(true);
+            const hideQueryParam = () => {
+                queryParamVisible.value = false;
+            }
+            const showQueryParam = () => {
+                queryParamVisible.value = true;
+            }
+            const activePageChange = () => {
+                queryParamVisible.value = true;
+            }
+            return {
+                docUrl,
+                activePage,
+                activePageChange,
+                requestLoading,
+                sendRequest,
+                requestResult,
+                consumesParamType,
+                // url参数
+                urlParamRef,
+                urlParamList,
+                // header参数
+                headerParamRef,
+                headerParamList,
+                // cookie参数
+                cookieParamRef,
+                cookieParamList,
+                // form参数
+                formParamRef,
+                formParamList,
+                // form-encode参数
+                formEncodeParamRef,
+                formEncodeParamList,
+                // body参数
+                bodyParamRef,
+                bodyParamType,
+                bodyRowParamList,
+                // 界面控制
+                queryParamVisible,
+                docInfoShow,
+                hideQueryParam,
+                showQueryParam,
+                methodList: ["get", "post", "put", "patch", "head", "delete", "options", "trace"],
+            };
+        },
+    };
+</script>
diff --git a/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue b/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue
new file mode 100644
index 00000000..5f3e66c5
--- /dev/null
+++ b/zyplayer-doc-ui/swagger-ui/src/views/apiRequest/ApiRequestResult.vue
@@ -0,0 +1,223 @@
+<template>
+    <div v-if="result.data" style="margin-bottom: 30px;">
+        <div v-if="result.data.data" style="margin-bottom: 30px;">
+            <a-tabs v-model:activeKey="activePage" @tab-click="" style="padding: 5px 10px 0;">
+                <a-tab-pane tab="Body" key="body" forceRender>
+                    <div style="margin-bottom: 10px;">
+                        <a-radio-group v-model:value="bodyShowType" @change="bodyShowTypeChange" size="small">
+                            <a-radio-button value="format">格式化</a-radio-button>
+                            <a-radio-button value="row">原始值</a-radio-button>
+                            <a-radio-button value="preview">预览</a-radio-button>
+                        </a-radio-group>
+                        <a-select v-if="bodyShowType === 'format'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;width: 100px;">
+                            <a-select-option value="json">JSON</a-select-option>
+                            <a-select-option value="html">HTML</a-select-option>
+                            <a-select-option value="xml">XML</a-select-option>
+                            <a-select-option value="javascript">JavaScript</a-select-option>
+                            <a-select-option value="text">TEXT</a-select-option>
+                        </a-select>
+                    </div>
+                    <ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContentFormat" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
+                    <ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContentOrigin" @init="resultDataInit" lang="text" theme="chrome" width="100%" height="100" :options="resultDataConfig"></ace-editor>
+                    <div v-else-if="bodyShowType === 'preview'">
+                        <template v-if="bodyShowFormatPreview === 'html'">
+                            <iframe ref="previewHtmlRef" width="100%" height="570px" style="border: 0;"></iframe>
+                        </template>
+                        <template v-else>{{resultDataContentOrigin}}</template>
+                    </div>
+                </a-tab-pane>
+                <a-tab-pane tab="Headers" key="headers" forceRender>
+                    <a-table :dataSource="resultHeaders"
+                             :columns="resultHeadersColumns" size="small"
+                             :pagination="false"
+                             :scroll="{ y: '300px' }">
+                    </a-table>
+                </a-tab-pane>
+                <a-tab-pane tab="Cookies" key="cookies" forceRender>
+                    <a-table :dataSource="resultCookies"
+                             :columns="resultCookiesColumns" size="small"
+                             :pagination="false"
+                             :scroll="{ y: '300px' }">
+                    </a-table>
+                </a-tab-pane>
+                <template #rightExtra>
+                    <span class="status-info-box">
+                        状态码：<span>{{resultData.status||'200'}}</span>
+                        耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
+                        大小：<span>{{unitConvert.formatFileSize(resultData.contentLength||0)}}</span>
+                    </span>
+                </template>
+            </a-tabs>
+        </div>
+        <div v-else>
+            <a-tabs style="padding: 5px 10px 0;">
+                <a-tab-pane tab="请求失败" key="body" forceRender>
+                    <div style="color: #f00;">{{result.data.errorMsg}}</div>
+                </a-tab-pane>
+                <template #rightExtra>
+                    <span class="status-info-box">
+                        耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
+                    </span>
+                </template>
+            </a-tabs>
+        </div>
+    </div>
+    <div v-else-if="loading" style="margin-top: 20px;">
+        <a-spin tip="请求执行中...">
+            <a-skeleton />
+        </a-spin>
+    </div>
+    <div v-else style="margin-top: 20px;color: #aaa;">
+        <a-empty description="点击 ‘发送请求’ 获取请求结果" />
+    </div>
+</template>
+
+<script>
+    import {toRefs, ref, reactive, onMounted, watch} from 'vue';
+    import {useRouter, useRoute} from "vue-router";
+    import {useStore} from 'vuex';
+    import {message} from 'ant-design-vue';
+    import {markdownIt} from 'mavon-editor'
+    import xmlFormatter from 'xml-formatter'
+    import ParamTable from '../../components/params/ParamTable.vue'
+    import ParamBody from '../../components/params/ParamBody.vue'
+    import {CloseOutlined} from '@ant-design/icons-vue';
+    import 'mavon-editor/dist/markdown/github-markdown.min.css'
+    import 'mavon-editor/dist/css/index.css'
+    import {zyplayerApi} from "../../api";
+    import aceEditor from "../../assets/ace-editor";
+    import unitConvert from "../../assets/utils/unitConvert.js";
+
+    export default {
+        props: {
+            result: {
+                type: Object,
+                required: true
+            },
+            loading: {
+                type: Boolean,
+                required: true
+            },
+        },
+        components: {
+            CloseOutlined, ParamTable, ParamBody, aceEditor
+        },
+        setup(props) {
+            const { result } = toRefs(props);
+            let activePage = ref('body');
+            let bodyShowType = ref('format');
+            // 格式化展示的类型，用户可以修改
+            let bodyShowFormatType = ref('json');
+            // 预览格式，依据返回值的content-type得出，不可修改
+            let bodyShowFormatPreview = ref('');
+            let resultHeaders = ref([]);
+            let resultCookies = ref([]);
+            let resultDataContentOrigin = ref('');
+            let resultDataContentFormat = ref('');
+            let resultData = ref({});
+            let previewHtmlRef = ref();
+            const bodyShowTypeChange = () => {
+                if (bodyShowType.value === 'preview') {
+                    setTimeout(() => {
+                        if (previewHtmlRef.value) {
+                            previewHtmlRef.value.contentDocument.write(resultDataContentOrigin.value);
+                        }
+                    }, 0);
+                }
+            }
+            const initData = () => {
+                if (props.result.data) {
+                    resultData.value = props.result.data;
+                    if (props.result.data.headers) {
+                        resultHeaders.value = props.result.data.headers;
+                        // 依据返回值header判断类型
+                        let contentType = resultHeaders.value.find(item => item.name === 'Content-Type');
+                        if (contentType && contentType.value) {
+                            if (contentType.value.indexOf('text/html') >= 0) {
+                                bodyShowFormatType.value = 'html';
+                            } else if (contentType.value.indexOf('text/plain') >= 0) {
+                                bodyShowFormatType.value = 'text';
+                            } else if (contentType.value.indexOf('application/json') >= 0) {
+                                bodyShowFormatType.value = 'json';
+                            } else if (contentType.value.indexOf('application/xml') >= 0 || contentType.value.indexOf('text/xml') >= 0) {
+                                bodyShowFormatType.value = 'xml';
+                            } else if (contentType.value.indexOf('application/javascript') >= 0) {
+                                bodyShowFormatType.value = 'javascript';
+                            }
+                            bodyShowFormatPreview.value = bodyShowFormatType.value;
+                        }
+                    }
+                    if (props.result.data.cookies) {
+                        resultCookies.value = props.result.data.cookies;
+                    }
+                    if (props.result.data.data) {
+                        resultDataContentOrigin.value = props.result.data.data;
+                        resultDataContentFormat.value = props.result.data.data;
+                        try {
+                            if (bodyShowFormatType.value === 'xml') {
+                                resultDataContentFormat.value = xmlFormatter(resultDataContentOrigin.value);
+                            } else if (bodyShowFormatType.value === 'json') {
+                                resultDataContentFormat.value = JSON.stringify(JSON.parse(resultDataContentOrigin.value), null, 4);
+                            } else if (bodyShowFormatType.value === 'javascript') {
+                                // TODO 暂未测试
+                                resultDataContentFormat.value = JSON.stringify(resultDataContentOrigin.value, null, 4);
+                            }
+                        } catch (e) {
+                            resultDataContentFormat.value = props.result.data.data;
+                        }
+                    } else {
+                        let errorSuffix = '\n// 请求失败，以下为封装的返回值对象，仅供参考\n\n';
+                        resultDataContentOrigin.value = errorSuffix + JSON.stringify(props.result.data);
+                        resultDataContentFormat.value = errorSuffix + JSON.stringify(props.result.data, null, 4);
+                    }
+                    bodyShowTypeChange();
+                }
+            };
+            initData();
+            watch(result, () => initData());
+            // 编辑器
+            const resultDataInit = editor => {
+                editor.setFontSize(16);
+            }
+            return {
+                activePage,
+                bodyShowType,
+                bodyShowTypeChange,
+                unitConvert,
+                bodyShowFormatType,
+                bodyShowFormatPreview,
+                previewHtmlRef,
+                resultData,
+                resultHeaders,
+                resultCookies,
+                resultHeadersColumns: [
+                    {title: 'KEY', dataIndex: 'name'},
+                    {title: 'VALUE', dataIndex: 'value'},
+                ],
+                resultCookiesColumns: [
+                    {title: 'KEY', dataIndex: 'name'},
+                    {title: 'VALUE', dataIndex: 'value'},
+                ],
+                // 编辑器
+                resultDataInit,
+                resultDataContentOrigin,
+                resultDataContentFormat,
+                resultDataConfig: {
+                    wrap: true,
+                    readOnly: true,
+                    autoScrollEditorIntoView: true,
+                    enableBasicAutocompletion: true,
+                    enableSnippets: true,
+                    enableLiveAutocompletion: true,
+                    minLines: 30,
+                    maxLines: 30,
+                },
+            };
+        },
+    };
+</script>
+<style>
+    .status-info-box{color: #888;}
+    .status-info-box span{color: #00aa00; margin-right: 15px;}
+    .status-info-box span:last-child{margin-right: 0;}
+</style>
diff --git a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue
index 3dca23b6..e7bd1c53 100644
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue
@@ -2,7 +2,7 @@
     <a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
         <a-form-item label="接口地址">{{docInfoShow.url}}</a-form-item>
         <a-form-item label="说明">
-            <a-card size=small><div class="markdown-body" v-html="docInfoShow.description" v-highlight></div></a-card>
+            <div class="markdown-body" v-html="docInfoShow.description" v-highlight></div>
         </a-form-item>
         <a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
         <a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>
diff --git a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
index a81e982d..1fc77de0 100644
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
@@ -11,7 +11,7 @@
                     <ParamTable ref="urlParamRef" :paramList="urlParamList"></ParamTable>
                 </div>
             </a-tab-pane>
-            <a-tab-pane tab="请求参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
+            <a-tab-pane tab="Body参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
                 <div v-show="queryParamVisible">
                     <div style="margin-bottom: 6px;">
                         <a-radio-group v-model:value="bodyParamType">
@@ -55,7 +55,7 @@
                 <a-button v-else @click="showQueryParam" type="link">展开参数</a-button>
             </template>
         </a-tabs>
-        <DocDebuggerResult :result="requestResult"></DocDebuggerResult>
+        <DocDebuggerResult :result="requestResult" :loading="requestLoading"></DocDebuggerResult>
     </div>
 </template>
 
diff --git a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
index 5f12de8c..3cae78c9 100644
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
@@ -1,52 +1,74 @@
 <template>
-    <div style="margin-bottom: 30px;">
-        <a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
-            <a-tab-pane tab="Body" key="body" forceRender>
-                <div style="margin-bottom: 10px;">
-                    <a-radio-group v-model:value="bodyShowType" @change="bodyShowTypeChange" size="small">
-                        <a-radio-button value="format">格式化</a-radio-button>
-                        <a-radio-button value="row">原始值</a-radio-button>
-                        <a-radio-button value="preview">预览</a-radio-button>
-                    </a-radio-group>
-                    <a-select v-if="bodyShowType === 'format'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;width: 100px;">
-                        <a-select-option value="json">JSON</a-select-option>
-                        <a-select-option value="html">HTML</a-select-option>
-                        <a-select-option value="xml">XML</a-select-option>
-                        <a-select-option value="javascript">JavaScript</a-select-option>
-                        <a-select-option value="text">TEXT</a-select-option>
-                    </a-select>
-                </div>
-                <ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContentFormat" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
-                <ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContentOrigin" @init="resultDataInit" lang="text" theme="chrome" width="100%" height="100" :options="resultDataConfig"></ace-editor>
-                <div v-else-if="bodyShowType === 'preview'">
-                    <template v-if="bodyShowFormatPreview === 'html'">
-                        <iframe ref="previewHtmlRef" width="100%" height="570px" style="border: 0;"></iframe>
-                    </template>
-                    <template v-else>{{resultDataContentOrigin}}</template>
-                </div>
-            </a-tab-pane>
-            <a-tab-pane tab="Headers" key="headers" forceRender>
-                <a-table :dataSource="resultHeaders"
-                         :columns="resultHeadersColumns" size="small"
-                         :pagination="false"
-                         :scroll="{ y: '300px' }">
-                </a-table>
-            </a-tab-pane>
-            <a-tab-pane tab="Cookies" key="cookies" forceRender>
-                <a-table :dataSource="resultCookies"
-                         :columns="resultCookiesColumns" size="small"
-                         :pagination="false"
-                         :scroll="{ y: '300px' }">
-                </a-table>
-            </a-tab-pane>
-            <template #rightExtra>
-                <span class="status-info-box">
-                    状态码：<span>{{resultData.status||'200'}}</span>
-                    耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
-                    大小：<span>{{unitConvert.formatFileSize(resultData.bodyLength||0)}}</span>
-                </span>
-            </template>
-        </a-tabs>
+    <div v-if="result.data" style="margin-bottom: 30px;">
+        <div v-if="result.data.data" style="margin-bottom: 30px;">
+            <a-tabs v-model:activeKey="activePage" @tab-click="" style="padding: 5px 10px 0;">
+                <a-tab-pane tab="Body" key="body" forceRender>
+                    <div style="margin-bottom: 10px;">
+                        <a-radio-group v-model:value="bodyShowType" @change="bodyShowTypeChange" size="small">
+                            <a-radio-button value="format">格式化</a-radio-button>
+                            <a-radio-button value="row">原始值</a-radio-button>
+                            <a-radio-button value="preview">预览</a-radio-button>
+                        </a-radio-group>
+                        <a-select v-if="bodyShowType === 'format'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;width: 100px;">
+                            <a-select-option value="json">JSON</a-select-option>
+                            <a-select-option value="html">HTML</a-select-option>
+                            <a-select-option value="xml">XML</a-select-option>
+                            <a-select-option value="javascript">JavaScript</a-select-option>
+                            <a-select-option value="text">TEXT</a-select-option>
+                        </a-select>
+                    </div>
+                    <ace-editor v-if="bodyShowType === 'format'" v-model:value="resultDataContentFormat" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
+                    <ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContentOrigin" @init="resultDataInit" lang="text" theme="chrome" width="100%" height="100" :options="resultDataConfig"></ace-editor>
+                    <div v-else-if="bodyShowType === 'preview'">
+                        <template v-if="bodyShowFormatPreview === 'html'">
+                            <iframe ref="previewHtmlRef" width="100%" height="570px" style="border: 0;"></iframe>
+                        </template>
+                        <template v-else>{{resultDataContentOrigin}}</template>
+                    </div>
+                </a-tab-pane>
+                <a-tab-pane tab="Headers" key="headers" forceRender>
+                    <a-table :dataSource="resultHeaders"
+                             :columns="resultHeadersColumns" size="small"
+                             :pagination="false"
+                             :scroll="{ y: '300px' }">
+                    </a-table>
+                </a-tab-pane>
+                <a-tab-pane tab="Cookies" key="cookies" forceRender>
+                    <a-table :dataSource="resultCookies"
+                             :columns="resultCookiesColumns" size="small"
+                             :pagination="false"
+                             :scroll="{ y: '300px' }">
+                    </a-table>
+                </a-tab-pane>
+                <template #rightExtra>
+                    <span class="status-info-box">
+                        状态码：<span>{{resultData.status||'200'}}</span>
+                        耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
+                        大小：<span>{{unitConvert.formatFileSize(resultData.contentLength||0)}}</span>
+                    </span>
+                </template>
+            </a-tabs>
+        </div>
+        <div v-else>
+            <a-tabs style="padding: 5px 10px 0;">
+                <a-tab-pane tab="请求失败" key="body" forceRender>
+                    <div style="color: #f00;">{{result.data.errorMsg}}</div>
+                </a-tab-pane>
+                <template #rightExtra>
+                    <span class="status-info-box">
+                        耗时：<span>{{unitConvert.formatSeconds(resultData.useTime||0)}}</span>
+                    </span>
+                </template>
+            </a-tabs>
+        </div>
+    </div>
+    <div v-else-if="loading" style="margin-top: 20px;">
+        <a-spin tip="请求执行中...">
+            <a-skeleton />
+        </a-spin>
+    </div>
+    <div v-else style="margin-top: 20px;color: #aaa;">
+        <a-empty description="点击 ‘发送请求’ 获取请求结果" />
     </div>
 </template>
 
@@ -72,6 +94,10 @@
                 type: Object,
                 required: true
             },
+            loading: {
+                type: Boolean,
+                required: true
+            },
         },
         components: {
             CloseOutlined, ParamTable, ParamBody, aceEditor
@@ -109,6 +135,8 @@
                         if (contentType && contentType.value) {
                             if (contentType.value.indexOf('text/html') >= 0) {
                                 bodyShowFormatType.value = 'html';
+                            } else if (contentType.value.indexOf('text/plain') >= 0) {
+                                bodyShowFormatType.value = 'text';
                             } else if (contentType.value.indexOf('application/json') >= 0) {
                                 bodyShowFormatType.value = 'json';
                             } else if (contentType.value.indexOf('application/xml') >= 0 || contentType.value.indexOf('text/xml') >= 0) {