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

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>