对象展示说明，支持参数和返回值格式化展示，其他展示优化

2021-11-07 23:06:36 +08:00
parent 8c6314de27
commit 92ac2261be
15 changed files with 391 additions and 116 deletions
--- a/zyplayer-doc-ui/swagger-ui/src/assets/ace-editor/index.js
+++ b/zyplayer-doc-ui/swagger-ui/src/assets/ace-editor/index.js
@@ -8,6 +8,8 @@ import 'brace/mode/xml';
 import 'brace/snippets/xml';
 import 'brace/mode/html';
 import 'brace/snippets/html';
+import 'brace/mode/javascript';
+import 'brace/snippets/javascript';
 import 'brace/mode/text';
 import 'brace/snippets/text';
 import 'brace/theme/monokai';
--- a/zyplayer-doc-ui/swagger-ui/src/assets/utils/SwaggerAnalysisV2.js
+++ b/zyplayer-doc-ui/swagger-ui/src/assets/utils/SwaggerAnalysisV2.js
@@ -167,7 +167,7 @@ export default {
                let type = parameter.type;
                let format = parameter.format;
                let description = parameter.description || '';
-                let example = parameter['x-example'];
+                let example = parameter['example'] || parameter['x-example'];
                let subType = undefined;
                let additional = undefined;
                let enums = undefined;
--- a/zyplayer-doc-ui/swagger-ui/src/components/params/ParamBody.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/components/params/ParamBody.vue
@@ -1,6 +1,5 @@
 <template>
-<!--    <a-textarea placeholder="" v-model:value="bodyRowParam" :auto-size="{ minRows: 15, maxRows: 15 }"></a-textarea>-->
-    <ace-editor v-model:value="bodyRowParam" @init="rowParamInit" lang="json" theme="monokai" width="100%" height="100" :options="rowParamConfig"></ace-editor>
+    <ace-editor v-model:value="bodyRowParam" @init="rowParamInit" :lang="rowLang" theme="monokai" width="100%" height="100" :options="rowParamConfig"></ace-editor>
 </template>

 <script>
@@ -9,6 +8,7 @@
    import {useStore} from 'vuex';
    import { message } from 'ant-design-vue';
    import {markdownIt} from 'mavon-editor'
+    import jsontoxml from 'jsontoxml';
    import {CloseOutlined, UploadOutlined} from '@ant-design/icons-vue';
    import 'mavon-editor/dist/markdown/github-markdown.min.css'
    import 'mavon-editor/dist/css/index.css'
@@ -20,6 +20,10 @@
                type: Array,
                required: true
            },
+            rowLang: {
+                type: String,
+                required: true
+            },
        },
        components: {
            CloseOutlined, UploadOutlined, aceEditor
@@ -36,7 +40,7 @@
                    });
                    return bodyParamObj;
                }
-                return '';
+                return paramObj.example || '';
            }
            if (paramList.length === 1) {
                bodyParamObj = getChildren(paramList[0]);
@@ -47,7 +51,15 @@
            }
            let bodyRowParam = ref('');
            if (bodyParamObj) {
-                bodyRowParam.value = JSON.stringify(bodyParamObj, null, 4);
+                if (props.rowLang === 'json') {
+                    bodyRowParam.value = JSON.stringify(bodyParamObj, null, 4);
+                } else if (props.rowLang === 'xml') {
+                    bodyRowParam.value = jsontoxml(bodyParamObj, {
+                        html: true,
+                        prettyPrint: true,
+                        xmlHeader: true,
+                    });
+                }
            }
            const getParam = () => {
                return bodyRowParam.value;
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue
@@ -13,13 +13,22 @@
            </a-tab-pane>
            <a-tab-pane tab="请求参数" key="bodyParam" v-if="docInfoShow.method !== 'get'" forceRender>
                <div v-show="queryParamVisible">
-                    <a-radio-group v-model:value="bodyParamType" style="margin-bottom: 5px;">
-                        <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>
+                    <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: 90px;">
+                            <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>
@@ -27,7 +36,7 @@
                        <ParamTable ref="formEncodeParamRef" :paramList="formEncodeParamList"></ParamTable>
                    </div>
                    <div v-show="bodyParamType === 'row'">
-                        <ParamBody ref="bodyParamRef" :paramList="bodyRowParamList"></ParamBody>
+                        <ParamBody ref="bodyParamRef" :rowLang="consumesParamType" :paramList="bodyRowParamList"></ParamBody>
                    </div>
                </div>
            </a-tab-pane>
@@ -118,6 +127,7 @@
            // body 参数
            let bodyParamRef = ref();
            let bodyParamType = ref('form');
+            let consumesParamType = ref('json');
            let bodyRowListProp = props.requestParamList.filter(item => item.in === 'body');
            let bodyRowParamList = ref(JSON.parse(JSON.stringify(bodyRowListProp)));
            // x-www-form-urlencoded
@@ -129,6 +139,14 @@
                formParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
            } else if (props.docInfoShow.consumes.indexOf('application/json') >= 0) {
                bodyParamType.value = 'row';
+                consumesParamType.value = 'json';
+                formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
+                if (formParamListProp.length > 0) {
+                    bodyParamType.value = 'formUrlEncode';
+                }
+            } else if (props.docInfoShow.consumes.indexOf('application/xml') >= 0 || props.docInfoShow.consumes.indexOf('text/xml') >= 0) {
+                bodyParamType.value = 'row';
+                consumesParamType.value = 'xml';
                formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
                if (formParamListProp.length > 0) {
                    bodyParamType.value = 'formUrlEncode';
@@ -219,6 +237,7 @@
                requestLoading,
                sendRequest,
                requestResult,
+                consumesParamType,
                // url参数
                urlParamRef,
                urlParamList,
--- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
+++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebuggerResult.vue
@@ -8,20 +8,21 @@
                        <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'" placeholder="格式化" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;">
+                    <a-select v-if="bodyShowType === 'format'" v-model:value="bodyShowFormatType" size="small" style="margin-left: 10px;">
                        <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="resultDataContent" @init="resultDataInit" :lang="bodyShowFormatType" theme="monokai" width="100%" height="100" :options="resultDataConfig"></ace-editor>
-                <ace-editor v-else-if="bodyShowType === 'row'" v-model:value="resultDataContent" @init="resultDataInit" lang="text" theme="chrome" width="100%" height="100" :options="resultDataConfig"></ace-editor>
+                <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>{{resultDataContent}}</template>
+                    <template v-else>{{resultDataContentOrigin}}</template>
                </div>
            </a-tab-pane>
            <a-tab-pane tab="Headers" key="headers" forceRender>
@@ -51,6 +52,7 @@
    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';
@@ -73,26 +75,28 @@
            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 resultDataContent = 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.data) {
-                        try {
-                            let realData = JSON.parse(props.result.data.data);
-                            resultDataContent.value = JSON.stringify(realData, null, 4);
-                        } catch (e) {
-                            resultDataContent.value = props.result.data.data;
-                        }
-                    } else {
-                        resultDataContent.value = JSON.stringify(props.result.data, null, 4);
-                    }
                    if (props.result.data.headers) {
                        resultHeaders.value = props.result.data.headers;
                        // 依据返回值header判断类型
@@ -100,16 +104,38 @@
                        if (contentType && contentType.value) {
                            if (contentType.value.indexOf('text/html') >= 0) {
                                bodyShowFormatType.value = 'html';
-                                bodyShowFormatPreview.value = 'html';
-                            } else if (contentType.value.indexOf('json') >= 0) {
+                            } else if (contentType.value.indexOf('application/json') >= 0) {
                                bodyShowFormatType.value = 'json';
-                                bodyShowFormatPreview.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;
+                        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 {
+                        resultDataContentOrigin.value = JSON.stringify(props.result.data);
+                        resultDataContentFormat.value = JSON.stringify(props.result.data, null, 4);
+                    }
+                    bodyShowTypeChange();
                }
            };
            initData();
@@ -118,13 +144,6 @@
            const resultDataInit = editor => {
                editor.setFontSize(16);
            }
-            const bodyShowTypeChange = () => {
-                if (bodyShowType.value === 'preview') {
-                    setTimeout(() => {
-                        previewHtmlRef.value.contentDocument.write(resultDataContent.value);
-                    }, 0);
-                }
-            }
            return {
                activePage,
                bodyShowType,
@@ -145,7 +164,8 @@
                ],
                // 编辑器
                resultDataInit,
-                resultDataContent,
+                resultDataContentOrigin,
+                resultDataContentFormat,
                resultDataConfig: {
                    wrap: true,
                    readOnly: true,