swagger文档展示优化，调试页面开发

zyplayer-doc-swagger-plus/src/main/resources/dist/assets/DocInfo.d55cffa7.js

@@ -1 +1 @@
-import{O as a,P as e,r as t,c as o,w as s,o as l,a as n,p as r,t as c,b as g,n as f,d as i,e as u,F as d}from"./vendor.d5dc506b.js";const w={setup(){const t=a();return{swaggerDoc:e((()=>t.state.swaggerDoc)),swaggerDocInfo:e((()=>t.state.swaggerDoc.info)),methodStatistic:e((()=>t.state.methodStatistic))}}},D=["href"],I=["href"],_=["innerHTML"],m={key:1,style:{"text-align":"center"}};w.render=function(a,e,w,T,b,p){const h=t("a-form-item"),k=t("a-statistic"),y=t("a-card"),E=t("a-col"),O=t("a-row"),S=t("a-form");return l(),o(y,null,{default:s((()=>[T.swaggerDocInfo?(l(),o(S,{key:0,"label-col":{span:4},"wrapper-col":{span:20}},{default:s((()=>[n(h,{label:"标题"},{default:s((()=>[r(c(T.swaggerDocInfo.title),1)])),_:1}),n(h,{label:"版本"},{default:s((()=>[r(c(T.swaggerDocInfo.version),1)])),_:1}),T.swaggerDocInfo.contact?(l(),o(h,{key:0,label:"作者"},{default:s((()=>[r(c(T.swaggerDocInfo.contact.name)+" "+c(T.swaggerDocInfo.contact.email)+" ",1),T.swaggerDocInfo.contact.url?(l(),g("a",{key:0,href:T.swaggerDocInfo.contact.url,target:"_blank"},c(T.swaggerDocInfo.contact.url),9,D)):f("",!0)])),_:1})):f("",!0),n(h,{label:"host"},{default:s((()=>[r(c(T.swaggerDoc.host),1)])),_:1}),T.swaggerDocInfo.license?(l(),o(h,{key:1,label:"许可证"},{default:s((()=>[i("a",{href:T.swaggerDocInfo.license.url,target:"_blank"},c(T.swaggerDocInfo.license.name),9,I)])),_:1})):f("",!0),n(h,{label:"文档说明"},{default:s((()=>[i("span",{innerHTML:T.swaggerDocInfo.description},null,8,_)])),_:1}),n(h,{label:"接口统计"},{default:s((()=>[n(O,{gutter:[16,16]},{default:s((()=>[(l(),g(d,null,u(["GET","POST","PUT","DELETE","HEAD","PATCH","OPTIONS","TRACE","TOTAL"],(a=>(l(),g(d,null,[T.methodStatistic[a]?(l(),o(E,{key:0,span:6},{default:s((()=>[n(y,{size:"small"},{default:s((()=>[n(k,{title:"TOTAL"===a?"总计":a+"方法",value:T.methodStatistic[a],suffix:"个"},null,8,["title","value"])])),_:2},1024)])),_:2},1024)):f("",!0)],64)))),64))])),_:1})])),_:1})])),_:1})):(l(),g("div",m,"暂无文档信息，请先选择文档"))])),_:1})};export{w as default};
+import{O as a,P as e,r as t,c as o,w as s,o as l,a as n,p as r,t as c,b as g,n as f,d as i,e as u,F as d}from"./vendor.cbf1194d.js";const w={setup(){const t=a();return{swaggerDoc:e((()=>t.state.swaggerDoc)),swaggerDocInfo:e((()=>t.state.swaggerDoc.info)),methodStatistic:e((()=>t.state.methodStatistic))}}},D=["href"],I=["href"],_=["innerHTML"],m={key:1,style:{"text-align":"center"}};w.render=function(a,e,w,T,b,p){const h=t("a-form-item"),k=t("a-statistic"),y=t("a-card"),E=t("a-col"),O=t("a-row"),S=t("a-form");return l(),o(y,null,{default:s((()=>[T.swaggerDocInfo?(l(),o(S,{key:0,"label-col":{span:4},"wrapper-col":{span:20}},{default:s((()=>[n(h,{label:"标题"},{default:s((()=>[r(c(T.swaggerDocInfo.title),1)])),_:1}),n(h,{label:"版本"},{default:s((()=>[r(c(T.swaggerDocInfo.version),1)])),_:1}),T.swaggerDocInfo.contact?(l(),o(h,{key:0,label:"作者"},{default:s((()=>[r(c(T.swaggerDocInfo.contact.name)+" "+c(T.swaggerDocInfo.contact.email)+" ",1),T.swaggerDocInfo.contact.url?(l(),g("a",{key:0,href:T.swaggerDocInfo.contact.url,target:"_blank"},c(T.swaggerDocInfo.contact.url),9,D)):f("",!0)])),_:1})):f("",!0),n(h,{label:"host"},{default:s((()=>[r(c(T.swaggerDoc.host),1)])),_:1}),T.swaggerDocInfo.license?(l(),o(h,{key:1,label:"许可证"},{default:s((()=>[i("a",{href:T.swaggerDocInfo.license.url,target:"_blank"},c(T.swaggerDocInfo.license.name),9,I)])),_:1})):f("",!0),n(h,{label:"文档说明"},{default:s((()=>[i("span",{innerHTML:T.swaggerDocInfo.description},null,8,_)])),_:1}),n(h,{label:"接口统计"},{default:s((()=>[n(O,{gutter:[16,16]},{default:s((()=>[(l(),g(d,null,u(["GET","POST","PUT","DELETE","HEAD","PATCH","OPTIONS","TRACE","TOTAL"],(a=>(l(),g(d,null,[T.methodStatistic[a]?(l(),o(E,{key:0,span:6},{default:s((()=>[n(y,{size:"small"},{default:s((()=>[n(k,{title:"TOTAL"===a?"总计":a+"方法",value:T.methodStatistic[a],suffix:"个"},null,8,["title","value"])])),_:2},1024)])),_:2},1024)):f("",!0)],64)))),64))])),_:1})])),_:1})])),_:1})):(l(),g("div",m,"暂无文档信息，请先选择文档"))])),_:1})};export{w as default};

zyplayer-doc-swagger-plus/src/main/resources/dist/assets/GlobalParam.294daeb8.js

@@ -1 +1 @@
-var e=Object.defineProperty,a=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,o=(a,t,l)=>t in a?e(a,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):a[t]=l;import{z as d}from"./custom.6e797d8c.js";import{O as i,Q as n,R as r,r as c,b as u,d as s,a as p,w as y,F as m,o as v,c as k,t as f,n as E,p as g}from"./vendor.d5dc506b.js";const b={setup(){i();let e=n([]),c=n(!1);const u=async()=>{s.value={},c.value=!0,d.docSwaggerGlobalParamList().then((a=>{setTimeout((()=>c.value=!1),500),e.value=a.data||[]}))};let s=n({});const p=a=>{a.isEdit=!1,a.id?e.value.forEach((e=>e.isEdit=!1)):e.value=e.value.filter((e=>e!==a)),s.value={}};return r((()=>{u()})),{docList:e,docListLoading:c,docEdit:s,searchDocList:u,deleteDoc:async e=>{d.docSwaggerGlobalParamUpdate({id:e.id,yn:0}).then((e=>{u()}))},editDoc:e=>{s.value.isEdit&&p(s.value),e.isEdit=!0,s.value=((e,d)=>{for(var i in d||(d={}))t.call(d,i)&&o(e,i,d[i]);if(a)for(var i of a(d))l.call(d,i)&&o(e,i,d[i]);return e})({},e)},saveEditDoc:e=>{d.docSwaggerGlobalParamUpdate(s.value).then((a=>{e.isEdit=!1,u()}))},cancelEditDoc:p,addDocLine:()=>{s.value.isEdit&&p(s.value);let a={isEdit:!0};e.value.push(a),s.value=a},docListColumns:[{title:"参数名称",dataIndex:"paramKey",width:250},{title:"参数值",dataIndex:"paramValue"},{title:"参数位置",dataIndex:"paramType",width:120},{title:"操作",dataIndex:"operation",fixed:"right",width:170}]}}},h={style:{"margin-bottom":"10px","text-align":"right"}},x=g("刷新"),C=g("新建"),_={key:1},L={key:1},w=g("Form"),D=g("Header"),I=g("Cookie"),O=g("Form"),j=g("Header"),P=g("Cookie"),S=g("取消"),T=g("保存"),U=g("编辑"),K=g("删除");b.render=function(e,a,t,l,o,d){const i=c("a-button"),n=c("a-input"),r=c("a-textarea"),g=c("a-select-option"),b=c("a-select"),V=c("a-tag"),F=c("a-popconfirm"),G=c("a-table");return v(),u(m,null,[s("div",h,[p(i,{onClick:l.searchDocList,type:"primary"},{default:y((()=>[x])),_:1},8,["onClick"]),p(i,{onClick:l.addDocLine},{default:y((()=>[C])),_:1},8,["onClick"])]),p(G,{dataSource:l.docList,columns:l.docListColumns,size:"middle",loading:l.docListLoading,pagination:!1,scroll:{x:1e3,y:"calc(100vh - 340px)"}},{bodyCell:y((({column:e,text:t,record:o})=>["paramKey"===e.dataIndex?(v(),u(m,{key:0},[o.isEdit?(v(),k(n,{key:0,placeholder:"请输入参数名称",value:l.docEdit.paramKey,"onUpdate:value":a[0]||(a[0]=e=>l.docEdit.paramKey=e)},null,8,["value"])):(v(),u("span",_,f(t),1))],64)):E("",!0),"paramValue"===e.dataIndex?(v(),u(m,{key:1},[o.isEdit?(v(),k(r,{key:0,rows:1,placeholder:"请输入参数值",value:l.docEdit.paramValue,"onUpdate:value":a[1]||(a[1]=e=>l.docEdit.paramValue=e)},null,8,["value"])):(v(),u("span",L,f(t),1))],64)):E("",!0),"paramType"===e.dataIndex?(v(),u(m,{key:2},[o.isEdit?(v(),k(b,{key:0,placeholder:"参数位置",value:l.docEdit.paramType,"onUpdate:value":a[2]||(a[2]=e=>l.docEdit.paramType=e),style:{width:"110px"}},{default:y((()=>[p(g,{value:1},{default:y((()=>[w])),_:1}),p(g,{value:2},{default:y((()=>[D])),_:1}),p(g,{value:3},{default:y((()=>[I])),_:1})])),_:1},8,["value"])):(v(),u(m,{key:1},[1===t?(v(),k(V,{key:0,color:"green"},{default:y((()=>[O])),_:1})):2===t?(v(),k(V,{key:1,color:"pink"},{default:y((()=>[j])),_:1})):3===t?(v(),k(V,{key:2,color:"pink"},{default:y((()=>[P])),_:1})):E("",!0)],64))],64)):E("",!0),"operation"===e.dataIndex?(v(),u(m,{key:3},[o.isEdit?(v(),u(m,{key:0},[p(i,{type:"link",onClick:e=>l.cancelEditDoc(o)},{default:y((()=>[S])),_:2},1032,["onClick"]),p(i,{type:"link",onClick:e=>l.saveEditDoc(o)},{default:y((()=>[T])),_:2},1032,["onClick"])],64)):(v(),u(m,{key:1},[p(i,{type:"link",onClick:e=>l.editDoc(o)},{default:y((()=>[U])),_:2},1032,["onClick"]),p(F,{title:"确定要删除吗？",onConfirm:e=>l.deleteDoc(o)},{default:y((()=>[p(i,{type:"link",danger:""},{default:y((()=>[K])),_:1})])),_:2},1032,["onConfirm"])],64))],64)):E("",!0)])),_:1},8,["dataSource","columns","loading","scroll"])],64)};export{b as default};
+var e=Object.defineProperty,a=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,o=(a,t,l)=>t in a?e(a,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):a[t]=l;import{z as d}from"./custom.79099f61.js";import{O as i,Q as n,R as r,r as c,b as u,d as s,a as p,w as y,F as m,o as v,c as k,t as f,n as E,p as g}from"./vendor.cbf1194d.js";const b={setup(){i();let e=n([]),c=n(!1);const u=async()=>{s.value={},c.value=!0,d.docSwaggerGlobalParamList().then((a=>{setTimeout((()=>c.value=!1),500),e.value=a.data||[]}))};let s=n({});const p=a=>{a.isEdit=!1,a.id?e.value.forEach((e=>e.isEdit=!1)):e.value=e.value.filter((e=>e!==a)),s.value={}};return r((()=>{u()})),{docList:e,docListLoading:c,docEdit:s,searchDocList:u,deleteDoc:async e=>{d.docSwaggerGlobalParamUpdate({id:e.id,yn:0}).then((e=>{u()}))},editDoc:e=>{s.value.isEdit&&p(s.value),e.isEdit=!0,s.value=((e,d)=>{for(var i in d||(d={}))t.call(d,i)&&o(e,i,d[i]);if(a)for(var i of a(d))l.call(d,i)&&o(e,i,d[i]);return e})({},e)},saveEditDoc:e=>{d.docSwaggerGlobalParamUpdate(s.value).then((a=>{e.isEdit=!1,u()}))},cancelEditDoc:p,addDocLine:()=>{s.value.isEdit&&p(s.value);let a={isEdit:!0};e.value.push(a),s.value=a},docListColumns:[{title:"参数名称",dataIndex:"paramKey",width:250},{title:"参数值",dataIndex:"paramValue"},{title:"参数位置",dataIndex:"paramType",width:120},{title:"操作",dataIndex:"operation",fixed:"right",width:170}]}}},h={style:{"margin-bottom":"10px","text-align":"right"}},x=g("刷新"),C=g("新建"),_={key:1},L={key:1},w=g("Form"),D=g("Header"),I=g("Cookie"),O=g("Form"),j=g("Header"),P=g("Cookie"),S=g("取消"),T=g("保存"),U=g("编辑"),K=g("删除");b.render=function(e,a,t,l,o,d){const i=c("a-button"),n=c("a-input"),r=c("a-textarea"),g=c("a-select-option"),b=c("a-select"),V=c("a-tag"),F=c("a-popconfirm"),G=c("a-table");return v(),u(m,null,[s("div",h,[p(i,{onClick:l.searchDocList,type:"primary"},{default:y((()=>[x])),_:1},8,["onClick"]),p(i,{onClick:l.addDocLine},{default:y((()=>[C])),_:1},8,["onClick"])]),p(G,{dataSource:l.docList,columns:l.docListColumns,size:"middle",loading:l.docListLoading,pagination:!1,scroll:{x:1e3,y:"calc(100vh - 340px)"}},{bodyCell:y((({column:e,text:t,record:o})=>["paramKey"===e.dataIndex?(v(),u(m,{key:0},[o.isEdit?(v(),k(n,{key:0,placeholder:"请输入参数名称",value:l.docEdit.paramKey,"onUpdate:value":a[0]||(a[0]=e=>l.docEdit.paramKey=e)},null,8,["value"])):(v(),u("span",_,f(t),1))],64)):E("",!0),"paramValue"===e.dataIndex?(v(),u(m,{key:1},[o.isEdit?(v(),k(r,{key:0,rows:1,placeholder:"请输入参数值",value:l.docEdit.paramValue,"onUpdate:value":a[1]||(a[1]=e=>l.docEdit.paramValue=e)},null,8,["value"])):(v(),u("span",L,f(t),1))],64)):E("",!0),"paramType"===e.dataIndex?(v(),u(m,{key:2},[o.isEdit?(v(),k(b,{key:0,placeholder:"参数位置",value:l.docEdit.paramType,"onUpdate:value":a[2]||(a[2]=e=>l.docEdit.paramType=e),style:{width:"110px"}},{default:y((()=>[p(g,{value:1},{default:y((()=>[w])),_:1}),p(g,{value:2},{default:y((()=>[D])),_:1}),p(g,{value:3},{default:y((()=>[I])),_:1})])),_:1},8,["value"])):(v(),u(m,{key:1},[1===t?(v(),k(V,{key:0,color:"green"},{default:y((()=>[O])),_:1})):2===t?(v(),k(V,{key:1,color:"pink"},{default:y((()=>[j])),_:1})):3===t?(v(),k(V,{key:2,color:"pink"},{default:y((()=>[P])),_:1})):E("",!0)],64))],64)):E("",!0),"operation"===e.dataIndex?(v(),u(m,{key:3},[o.isEdit?(v(),u(m,{key:0},[p(i,{type:"link",onClick:e=>l.cancelEditDoc(o)},{default:y((()=>[S])),_:2},1032,["onClick"]),p(i,{type:"link",onClick:e=>l.saveEditDoc(o)},{default:y((()=>[T])),_:2},1032,["onClick"])],64)):(v(),u(m,{key:1},[p(i,{type:"link",onClick:e=>l.editDoc(o)},{default:y((()=>[U])),_:2},1032,["onClick"]),p(F,{title:"确定要删除吗？",onConfirm:e=>l.deleteDoc(o)},{default:y((()=>[p(i,{type:"link",danger:""},{default:y((()=>[K])),_:1})])),_:2},1032,["onConfirm"])],64))],64)):E("",!0)])),_:1},8,["dataSource","columns","loading","scroll"])],64)};export{b as default};

zyplayer-doc-swagger-plus/src/main/resources/dist/assets/SettingView.d0fb45f0.js

@@ -1 +1 @@
-import{b as e,o as t}from"./vendor.d5dc506b.js";const n={name:"SettingView",components:{},data:()=>({}),computed:{},mounted(){},methods:{}};n.render=function(n,o,d,r,a,m){return t(),e("div",null," 展示配置页面 ")};export{n as default};
+import{b as e,o as t}from"./vendor.cbf1194d.js";const n={name:"SettingView",components:{},data:()=>({}),computed:{},mounted(){},methods:{}};n.render=function(n,o,d,r,a,m){return t(),e("div",null," 展示配置页面 ")};export{n as default};

zyplayer-doc-swagger-plus/src/main/resources/dist/doc-swagger-plus.html

@@ -5,8 +5,8 @@
     <link rel="icon" href="logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Swagger文档管理</title>
-    <script type="module" crossorigin src="assets/main.9ed5a245.js"></script>
-    <link rel="modulepreload" href="assets/vendor.d5dc506b.js">
+    <script type="module" crossorigin src="assets/main.449e509f.js"></script>
+    <link rel="modulepreload" href="assets/vendor.cbf1194d.js">
     <link rel="stylesheet" href="assets/style.6e7ba32f.css">
   </head>
   <body>

zyplayer-doc-ui/swagger-ui/src/assets/utils/SwaggerAnalysisV2.js

@@ -18,6 +18,7 @@ export default {
             let description = parameter.description || '';
             let type = parameter.type;
             let format = parameter.format;
+            let example = parameter['x-example'];
             let subType = undefined;
             let children = undefined;
             let additional = undefined;
@@ -83,6 +84,10 @@ export default {
                     this.logMessage('003', type, parameter);
                 }
             }
+            if (example) {
+                description = description ? (description + '，') : '';
+                description += '例：' + example;
+            }
             if (parameter.enum && parameter.enum.length > 0) {
                 description = description || '枚举类型';
                 description += '，可选值：' + parameter.enum.join('、');
@@ -96,6 +101,7 @@ export default {
                 required: parameter.required ? '是' : '否',
                 format: format,
                 enum: parameter.enum,
+                example: example,
                 collectionFormat: parameter.collectionFormat,// 枚举多选时=multi
                 description: description,
                 additional: additional,
@@ -149,6 +155,7 @@ export default {
                 let type = parameter.type;
                 let format = parameter.format;
                 let description = parameter.description || '';
+                let example = parameter['x-example'];
                 let subType = undefined;
                 let additional = undefined;
                 let enums = undefined;
@@ -190,6 +197,10 @@ export default {
                         this.logMessage('006', type, parameter);
                     }
                 }
+                if (example) {
+                    description = description ? (description + '，') : '';
+                    description += '例：' + example;
+                }
                 if (parameter.items && parameter.items.enum && parameter.items.enum.length > 0) {
                     enums = parameter.items.enum;
                     description = description || '枚举类型';
@@ -204,6 +215,7 @@ export default {
                     description: description,
                     enum: enums,
                     additional: additional,
+                    example: example,
                     children: children,
                 });
                 indexSub++;

zyplayer-doc-ui/swagger-ui/src/store/TreeViewByTag.js

@@ -83,7 +83,9 @@ export function getTreeDataForTag(swagger, pathData, keywords, metaInfo) {
             });
             indexUrl++;
         });
+        if (urlTree.length > 0) {
             treeData.push({title: tag.name, key: indexTag, children: urlTree});
+        }
         indexTag++;
     });
     return [
@@ -105,6 +107,6 @@ function searchInPathMethods(url, methodNode, keywords) {
     if (url.indexOf(keywords) >= 0) {
         return true;
     }
-    let searchData = methodNode.path + methodNode.summary + methodNode.description + methodNode.tags;
+    let searchData = methodNode.path + methodNode.method + methodNode.summary + methodNode.description + methodNode.tags;
     return (searchData && searchData.toLowerCase().indexOf(keywords) >= 0);
 }

zyplayer-doc-ui/swagger-ui/src/views/doc/DocView.vue

@@ -1,67 +1,17 @@
 <template>
+    <template v-if="isLoadSuccess">
         <a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
             <a-tab-pane tab="接口说明" key="doc">
-            <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>
-                </a-form-item>
-                <a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
-                <a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>
-                <a-form-item label="响应数据类型">{{docInfoShow.produces}}</a-form-item>
-                <a-form-item label="请求参数">
-                    <a-table :dataSource="requestParamList" :columns="requestParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
-                        <template #bodyCell="{ column, text, record }">
-                            <template v-if="column.dataIndex === 'type'">
-                                {{text}}
-                                <template v-if="record.subType">[{{record.subType}}]</template>
-                                <template v-if="record.format">({{record.format}})</template>
-                            </template>
-                            <template v-if="column.dataIndex === 'in'">
-                                <a-tag color="pink" v-if="text === 'header'">header</a-tag>
-                                <a-tag color="red" v-else-if="text === 'body'">body</a-tag>
-                                <a-tag color="orange" v-else-if="text === 'query'">query</a-tag>
-                                <a-tag color="green" v-else-if="text === 'formData'">formData</a-tag>
-                                <template v-else-if="!text">-</template>
-                                <a-tag color="purple" v-else>{{text}}</a-tag>
-                            </template>
-                            <template v-if="column.dataIndex === 'required'">
-                                <span v-if="text === '是'" style="color: #f00;">是</span>
-                                <template v-else-if="text === '否'">否</template>
-                                <template v-else>-</template>
-                            </template>
-                        </template>
-                    </a-table>
-                </a-form-item>
-                <a-form-item label="返回结果">
-                    <a-table :dataSource="responseParamList" :columns="responseCodeListColumns" size="small" :pagination="false" defaultExpandAllRows>
-                        <template #bodyCell="{ column, text, record }">
-                            <template v-if="column.dataIndex === 'desc'">
-                                <div v-html="text"></div>
-                            </template>
-                        </template>
-                        <template #expandedRowRender="{ record }">
-                            <template v-if="record.schemas">
-                                <a-table :dataSource="record.schemas" :columns="responseParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
-                                    <template #bodyCell="{ column, text, record }">
-                                        <template v-if="column.dataIndex === 'type'">
-                                            {{text}}
-                                            <template v-if="record.subType">[{{record.subType}}]</template>
-                                            <template v-if="record.format">({{record.format}})</template>
-                                        </template>
-                                    </template>
-                                </a-table>
-                            </template>
-                            <div v-else style="text-align: center;padding: 10px 0;">无参数说明</div>
-                        </template>
-                    </a-table>
-                </a-form-item>
-            </a-form>
+                <DocContent :docInfoShow="docInfoShow" :requestParamList="requestParamList" :responseParamList="responseParamList"></DocContent>
             </a-tab-pane>
             <a-tab-pane tab="在线调试" key="debug">
-            暂未开放
+                <DocDebugger :docInfoShow="docInfoShow" :requestParamList="requestParamList" :responseParamList="responseParamList"></DocDebugger>
             </a-tab-pane>
         </a-tabs>
+    </template>
+    <a-spin v-else tip="文档数据加载中...">
+        <div style="padding: 20px 0;height: 100px;"></div>
+    </a-spin>
 </template>
 
 <script>
@@ -71,11 +21,14 @@
     import { message } from 'ant-design-vue';
     import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
     import swaggerAnalysis from '../../assets/utils/SwaggerAnalysisV2'
+    import DocContent from './docView/DocContent.vue'
+    import DocDebugger from './docView/DocDebugger.vue'
     import {markdownIt} from 'mavon-editor'
     import 'mavon-editor/dist/markdown/github-markdown.min.css'
     import 'mavon-editor/dist/css/index.css'
 
     export default {
+        components: { DocContent, DocDebugger },
         setup() {
             const route = useRoute();
             const store = useStore();
@@ -147,25 +100,9 @@
                 docInfoShow,
                 activePage,
                 changePage,
+                isLoadSuccess,
                 requestParamList,
-                requestParamListColumns: [
-                    {title: '参数名', dataIndex: 'name', width: 200},
-                    {title: '类型', dataIndex: 'type', width: 150},
-                    {title: '参数位置', dataIndex: 'in', width: 100},
-                    {title: '必填', dataIndex: 'required', width: 60},
-                    {title: '说明', dataIndex: 'description'},
-                ],
                 responseParamList,
-                responseCodeListColumns: [
-                    {title: '状态码', dataIndex: 'code', width: 100},
-                    {title: '类型', dataIndex: 'type', width: 250},
-                    {title: '说明', dataIndex: 'desc'},
-                ],
-                responseParamListColumns: [
-                    {title: '参数名', dataIndex: 'name', width: 250},
-                    {title: '类型', dataIndex: 'type', width: 250},
-                    {title: '说明', dataIndex: 'description'},
-                ],
             };
         },
     };

zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocContent.vue

@@ -0,0 +1,109 @@
+<template>
+    <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>
+        </a-form-item>
+        <a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
+        <a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>
+        <a-form-item label="响应数据类型">{{docInfoShow.produces}}</a-form-item>
+        <a-form-item label="请求参数">
+            <a-table :dataSource="requestParamList" :columns="requestParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
+                <template #bodyCell="{ column, text, record }">
+                    <template v-if="column.dataIndex === 'type'">
+                        {{text}}
+                        <template v-if="record.subType">[{{record.subType}}]</template>
+                        <template v-if="record.format">({{record.format}})</template>
+                    </template>
+                    <template v-if="column.dataIndex === 'in'">
+                        <a-tag color="pink" v-if="text === 'header'">header</a-tag>
+                        <a-tag color="red" v-else-if="text === 'body'">body</a-tag>
+                        <a-tag color="orange" v-else-if="text === 'query'">query</a-tag>
+                        <a-tag color="green" v-else-if="text === 'formData'">formData</a-tag>
+                        <template v-else-if="!text">-</template>
+                        <a-tag color="purple" v-else>{{text}}</a-tag>
+                    </template>
+                    <template v-if="column.dataIndex === 'required'">
+                        <span v-if="text === '是'" style="color: #f00;">是</span>
+                        <template v-else-if="text === '否'">否</template>
+                        <template v-else>-</template>
+                    </template>
+                    <template v-if="column.dataIndex === 'description'">
+                        {{text}}
+                    </template>
+                </template>
+            </a-table>
+        </a-form-item>
+        <a-form-item label="返回结果">
+            <a-table :dataSource="responseParamList" :columns="responseCodeListColumns" size="small" :pagination="false">
+                <template #bodyCell="{ column, text, record }">
+                    <template v-if="column.dataIndex === 'desc'">
+                        <div v-html="text"></div>
+                    </template>
+                </template>
+                <template #expandedRowRender="{ record }">
+                    <template v-if="record.schemas">
+                        <a-table :dataSource="record.schemas" :columns="responseParamListColumns" size="small" :pagination="false">
+                            <template #bodyCell="{ column, text, record }">
+                                <template v-if="column.dataIndex === 'type'">
+                                    {{text}}
+                                    <template v-if="record.subType">[{{record.subType}}]</template>
+                                    <template v-if="record.format">({{record.format}})</template>
+                                </template>
+                            </template>
+                        </a-table>
+                    </template>
+                    <div v-else style="text-align: center;padding: 10px 0;">无参数说明</div>
+                </template>
+            </a-table>
+        </a-form-item>
+    </a-form>
+</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 'mavon-editor/dist/markdown/github-markdown.min.css'
+    import 'mavon-editor/dist/css/index.css'
+
+    export default {
+        props: {
+            docInfoShow: {
+                type: Object,
+                required: true
+            },
+            requestParamList: {
+                type: Array,
+                required: true
+            },
+            responseParamList: {
+                type: Array,
+                required: true
+            },
+        },
+        setup() {
+            return {
+                requestParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 200},
+                    {title: '类型', dataIndex: 'type', width: 150},
+                    {title: '参数位置', dataIndex: 'in', width: 100},
+                    {title: '必填', dataIndex: 'required', width: 60},
+                    {title: '说明', dataIndex: 'description'},
+                ],
+                responseCodeListColumns: [
+                    {title: '状态码', dataIndex: 'code', width: 100},
+                    {title: '类型', dataIndex: 'type', width: 250},
+                    {title: '说明', dataIndex: 'desc'},
+                ],
+                responseParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 250},
+                    {title: '类型', dataIndex: 'type', width: 250},
+                    {title: '说明', dataIndex: 'description'},
+                ],
+            };
+        },
+    };
+</script>

zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue

@@ -0,0 +1,230 @@
+<template>
+    <div>
+        <a-input-search
+                :addon-before="docInfoShow.method.toUpperCase()"
+                v-model:value="docUrl"
+                enter-button="发送请求"
+                @search="sendRequest"
+        />
+        <a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
+            <a-tab-pane tab="URL参数" key="urlParam">
+                <a-table :row-selection="{ selectedRowKeys: urlParamSelectedRowKeys, onChange: urlParamRowSelectionChange }" :dataSource="urlParamList" :columns="urlParamListColumns" size="small" :pagination="false">
+                    <template #bodyCell="{ column, text, record }">
+                        <template v-if="column.dataIndex === 'name'">
+                            <a-input placeholder="请输入参数名" v-model:value="record.name" @change="urlParamChange(record)"></a-input>
+                        </template>
+                        <template v-if="column.dataIndex === 'value'">
+                            <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="urlParamChange(record)"></a-input>
+                        </template>
+                        <template v-if="column.dataIndex === 'action'">
+                            <CloseOutlined v-if="!record.isLastRow" @click="urlParamRemove(record)" style="cursor: pointer;"/>
+                        </template>
+                    </template>
+                </a-table>
+            </a-tab-pane>
+            <a-tab-pane tab="请求参数" key="bodyParam">
+                <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-tab-pane>
+            <a-tab-pane tab="Header参数" key="headerParam">
+                <a-table :row-selection="{ selectedRowKeys: headerParamSelectedRowKeys, onChange: headerParamRowSelectionChange }" :dataSource="headerParamList" :columns="headerParamListColumns" size="small" :pagination="false">
+                    <template #bodyCell="{ column, text, record }">
+                        <template v-if="column.dataIndex === 'name'">
+                            <a-input placeholder="请输入参数名" v-model:value="record.name" @change="headerParamChange(record)"></a-input>
+                        </template>
+                        <template v-if="column.dataIndex === 'value'">
+                            <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="headerParamChange(record)"></a-input>
+                        </template>
+                        <template v-if="column.dataIndex === 'action'">
+                            <CloseOutlined v-if="!record.isLastRow" @click="headerParamRemove(record)" style="cursor: pointer;"/>
+                        </template>
+                    </template>
+                </a-table>
+            </a-tab-pane>
+            <a-tab-pane tab="Cookie参数" key="cookieParam">
+                <a-table :row-selection="{ selectedRowKeys: cookieParamSelectedRowKeys, onChange: cookieParamRowSelectionChange }" :dataSource="cookieParamList" :columns="cookieParamListColumns" size="small" :pagination="false">
+                    <template #bodyCell="{ column, text, record }">
+                        <template v-if="column.dataIndex === 'name'">
+                            <a-input placeholder="请输入参数名" v-model:value="record.name" @change="cookieParamChange(record)"></a-input>
+                        </template>
+                        <template v-if="column.dataIndex === 'value'">
+                            <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="cookieParamChange(record)"></a-input>
+                        </template>
+                        <template v-if="column.dataIndex === 'action'">
+                            <CloseOutlined v-if="!record.isLastRow" @click="cookieParamRemove(record)" style="cursor: pointer;"/>
+                        </template>
+                    </template>
+                </a-table>
+            </a-tab-pane>
+        </a-tabs>
+    </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 {CloseOutlined} from '@ant-design/icons-vue';
+    import 'mavon-editor/dist/markdown/github-markdown.min.css'
+    import 'mavon-editor/dist/css/index.css'
+
+    export default {
+        props: {
+            docInfoShow: {
+                type: Object,
+                required: true
+            },
+            requestParamList: {
+                type: Array,
+                required: true
+            },
+            responseParamList: {
+                type: Array,
+                required: true
+            },
+        },
+        components: {
+            CloseOutlined
+        },
+        setup(props) {
+            let docUrl = ref(props.docInfoShow.url);
+            let activePage = ref('urlParam');
+            let paramKeyIndex = 10000;
+            // URL参数处理
+            let urlParamListProp = props.requestParamList.filter(item => item.in === 'query');
+            urlParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
+            let urlParamSelectedRowKeys = ref([]);
+            urlParamListProp.forEach(item => {
+                item.value = item.example || '';
+                urlParamSelectedRowKeys.value.push(item.key);
+            });
+            let urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp)));
+            const urlParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
+                urlParamSelectedRowKeys.value = selectedRowKeys;
+            };
+            const urlParamChange = (record) => {
+                if (record.isLastRow) {
+                    record.isLastRow = false;
+                    urlParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
+                    urlParamSelectedRowKeys.value.push(paramKeyIndex);
+                }
+            };
+            const urlParamRemove = (record) => {
+                if (!record.isLastRow) {
+                    urlParamList.value = urlParamList.value.filter(item => item != record);
+                }
+            };
+            // Header参数处理
+            let headerParamListProp = props.requestParamList.filter(item => item.in === 'query');
+            headerParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
+            let headerParamSelectedRowKeys = ref([]);
+            headerParamListProp.forEach(item => {
+                item.value = item.example || '';
+                headerParamSelectedRowKeys.value.push(item.key);
+            });
+            let headerParamList = ref(JSON.parse(JSON.stringify(headerParamListProp)));
+            const headerParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
+                headerParamSelectedRowKeys.value = selectedRowKeys;
+            };
+            const headerParamChange = (record) => {
+                if (record.isLastRow) {
+                    record.isLastRow = false;
+                    headerParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
+                    headerParamSelectedRowKeys.value.push(paramKeyIndex);
+                }
+            };
+            const headerParamRemove = (record) => {
+                if (!record.isLastRow) {
+                    headerParamList.value = headerParamList.value.filter(item => item != record);
+                }
+            };
+            // cookie参数处理
+            let cookieParamListProp = props.requestParamList.filter(item => item.in === 'query');
+            cookieParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
+            let cookieParamSelectedRowKeys = ref([]);
+            cookieParamListProp.forEach(item => {
+                item.value = item.example || '';
+                cookieParamSelectedRowKeys.value.push(item.key);
+            });
+            let cookieParamList = ref(JSON.parse(JSON.stringify(cookieParamListProp)));
+            const cookieParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
+                cookieParamSelectedRowKeys.value = selectedRowKeys;
+            };
+            const cookieParamChange = (record) => {
+                if (record.isLastRow) {
+                    record.isLastRow = false;
+                    cookieParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true});
+                    cookieParamSelectedRowKeys.value.push(paramKeyIndex);
+                }
+            };
+            const cookieParamRemove = (record) => {
+                if (!record.isLastRow) {
+                    cookieParamList.value = cookieParamList.value.filter(item => item != record);
+                }
+            };
+            // body 参数
+            let bodyParamType = ref('form');
+            // 发送请求
+            const sendRequest = () => {
+                message.info('暂未开放此功能，敬请期待');
+            };
+            return {
+                docUrl,
+                activePage,
+                sendRequest,
+                // url参数
+                urlParamList,
+                urlParamSelectedRowKeys,
+                urlParamRowSelectionChange,
+                urlParamChange,
+                urlParamRemove,
+                urlParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 250},
+                    {title: '参数值', dataIndex: 'value'},
+                    {title: '', dataIndex: 'action', width: 40},
+                ],
+                // header参数
+                headerParamList,
+                headerParamSelectedRowKeys,
+                headerParamRowSelectionChange,
+                headerParamChange,
+                headerParamRemove,
+                headerParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 250},
+                    {title: '参数值', dataIndex: 'value'},
+                    {title: '', dataIndex: 'action', width: 40},
+                ],
+                // cookie参数
+                cookieParamList,
+                cookieParamSelectedRowKeys,
+                cookieParamRowSelectionChange,
+                cookieParamChange,
+                cookieParamRemove,
+                cookieParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 250},
+                    {title: '参数值', dataIndex: 'value'},
+                    {title: '', dataIndex: 'action', width: 40},
+                ],
+                // body参数
+                bodyParamType,
+                responseCodeListColumns: [
+                    {title: '状态码', dataIndex: 'code', width: 100},
+                    {title: '类型', dataIndex: 'type', width: 250},
+                    {title: '说明', dataIndex: 'desc'},
+                ],
+                responseParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 250},
+                    {title: '类型', dataIndex: 'type', width: 250},
+                    {title: '说明', dataIndex: 'description'},
+                ],
+            };
+        },
+    };
+</script>