swagger文档树展示开发

zyplayer-doc-ui/swagger-ui/src/components/layouts/GlobalLayout.vue

@@ -3,7 +3,7 @@
         <a-layout-sider theme="light" :trigger="null" collapsible v-model:collapsed="appMenuCollapsed" :width="rightAsideWidth" style="height: 100vh;overflow: auto;">
             <div class="logo">
                 <img src="../../assets/logo.png">
-                <h1>swagger文档管理</h1>
+                <h1>Swagger文档管理</h1>
             </div>
             <menu-layout :collapsed="appMenuCollapsed"></menu-layout>
         </a-layout-sider>
@@ -13,13 +13,10 @@
         <a-layout>
             <a-layout-header style="border-bottom: 2px solid #eee;background: #fff; padding: 0; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);-webkit-box-shadow:0 1px 4px rgba(0, 21, 41, 0.08);">
                 <a-row type="flex">
-                    <a-col flex="60px">
+                    <a-col flex="auto">
                         <MenuUnfoldOutlined class="trigger" v-if="appMenuCollapsed" @click="appMenuCollapsed = !appMenuCollapsed"/>
                         <MenuFoldOutlined class="trigger" v-else @click="appMenuCollapsed = !appMenuCollapsed"/>
                     </a-col>
-                    <a-col flex="auto" style="text-align: center;">
-                        <span v-if="initialEnv === 'newGray'" class="initial-env">当前环境：灰度</span>
-                    </a-col>
                     <a-col flex="400px" style="text-align: right;padding-right: 20px;">
                         <header-avatar></header-avatar>
                     </a-col>
@@ -46,14 +43,10 @@
             return {
                 minHeight: minHeight + 'px',
                 appMenuCollapsed: false,
-                rightAsideWidth: 250
-            }
-        },
-        computed: {
-            initialEnv () {
-                return this.$store.state.initialEnv;
+                rightAsideWidth: 300
             }
         },
+        computed: {},
         mounted() {
             this.dragChangeRightAsideWidth();
         },

zyplayer-doc-ui/swagger-ui/src/components/layouts/MenuChildrenLayout.vue

@@ -17,6 +17,7 @@
                 <template v-if="menuItem.meta">
                     <DashboardOutlined v-if="menuItem.meta.icon === 'DashboardOutlined'"/>
                     <FileTextOutlined v-if="menuItem.meta.icon === 'FileTextOutlined'"/>
+                    <InfoCircleOutlined v-if="menuItem.meta.icon === 'InfoCircleOutlined'"/>
                 </template>
                 <span>{{menuItem.name}}</span>
             </router-link>
@@ -30,7 +31,8 @@
         SettingOutlined,
         CarryOutOutlined,
         FileTextOutlined,
-        DashboardOutlined
+        DashboardOutlined,
+        InfoCircleOutlined,
     } from '@ant-design/icons-vue';
 
     export default {
@@ -43,7 +45,7 @@
         },
         components: {
             StarOutlined, SettingOutlined, CarryOutOutlined, FileTextOutlined,
-            DashboardOutlined
+            DashboardOutlined, InfoCircleOutlined
         },
         methods: {
             haveShowChildren(children) {

zyplayer-doc-ui/swagger-ui/src/components/layouts/MenuLayout.vue

@@ -4,13 +4,27 @@
             <menu-children-layout :menuItem="menuItem" v-for="menuItem in menuData"></menu-children-layout>
         </a-menu>
         <a-divider style="margin: 6px 0;"/>
-        <div v-show="!collapsed">
+        <div v-show="!collapsed" class="doc-tree">
             <div style="padding: 10px 5px;">
-                <a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" style="width: 100%;">
+                <a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" @change="swaggerDocChoiceChange" style="width: 100%;">
                     <a-select-option :value="item.url" v-for="item in swaggerResourceList">{{item.name}}</a-select-option>
                 </a-select>
             </div>
-            <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked"></a-directory-tree>
+            <a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
+                <template #title="{ title, isLeaf, method }">
+                    <template v-if="isLeaf">
+                        <a-tag color="pink" v-if="method === 'get'">get</a-tag>
+                        <a-tag color="red" v-else-if="method === 'post'">post</a-tag>
+                        <a-tag color="orange" v-else-if="method === 'put'">put</a-tag>
+                        <a-tag color="green" v-else-if="method === 'head'">head</a-tag>
+                        <a-tag color="cyan" v-else-if="method === 'patch'">patch</a-tag>
+                        <a-tag color="blue" v-else-if="method === 'delete'">delete</a-tag>
+                        <a-tag color="purple" v-else-if="method === 'options'">options</a-tag>
+                        <a-tag color="purple" v-else-if="method === 'trace'">trace</a-tag>
+                    </template>
+                    {{title}}
+                </template>
+            </a-directory-tree>
         </div>
     </div>
 </template>
@@ -18,6 +32,7 @@
 <script>
     import MenuChildrenLayout from './MenuChildrenLayout.vue'
     import {customApi} from '../../api'
+    import {createTreeViewByTag, getTreeDataForTag} from '../../store/SwaggerDocUtil'
 
     export default {
         name: 'MenuLayout',
@@ -42,9 +57,9 @@
                                 title: '用户信息管理',
                                 key: '0-0-0',
                                 children: [
-                                    {title: '/getUserInfo', key: '0-0-0-0', isLeaf: true, path: '/doc/view', query: {path: '/getUserInfo'}},
-                                    {title: '/deleteUserInfo', key: '0-0-0-1', isLeaf: true, path: '/doc/view', query: {path: '/deleteUserInfo'}},
-                                    {title: '/updateUserInfo', key: '0-0-0-2', isLeaf: true, path: '/doc/view', query: {path: '/updateUserInfo'}},
+                                    {title: '/getUserInfo', key: '0-0-0-0', isLeaf: true, query: {path: '/getUserInfo'}},
+                                    {title: '/deleteUserInfo', key: '0-0-0-1', isLeaf: true, query: {path: '/deleteUserInfo'}},
+                                    {title: '/updateUserInfo', key: '0-0-0-2', isLeaf: true, query: {path: '/updateUserInfo'}},
                                 ],
                             },
                         ],
@@ -81,22 +96,59 @@
             docChecked(val, node) {
                 if (node.node.isLeaf) {
                     let dataRef = node.node.dataRef;
-                    this.$router.push({path: dataRef.path, query: dataRef.query});
+                    this.$router.push({path: '/doc/view', query: dataRef.query});
                 }
             },
             getSwaggerResourceList() {
-                customApi.post('./swagger-resources').then(res => {
+                customApi.get('./swagger-resources').then(res => {
                     if (res instanceof Array) {
                         this.swaggerResourceList = res || [];
                         if (this.swaggerResourceList.length > 0) {
                             this.swaggerDocChoice = this.swaggerResourceList[0].url;
+                            this.swaggerDocChoiceChange();
                         }
                     } else {
                         this.$message.error('获取文档列表请求失败');
                     }
                 });
+            },
+            swaggerDocChoiceChange() {
+                this.loadV2Doc(this.swaggerDocChoice);
+            },
+            loadV2Doc(url) {
+                customApi.get(url).then(res => {
+                    let v2Doc = this.toJsonObj(res);
+                    if (typeof v2Doc !== 'object') {
+                        this.$message.error('获取文档数据请求失败');
+                    }
+                    this.$store.commit('setSwaggerDoc', v2Doc);
+                    let metaInfo = {url};
+                    let treeData = createTreeViewByTag(v2Doc);
+                    this.treeData = getTreeDataForTag(v2Doc, treeData.pathIndex, metaInfo);
+                    this.$store.commit('setSwaggerTreePathMap', treeData.treePathDataMap);
+                });
+            },
+            toJsonObj(value) {
+                if (typeof value !== 'string') {
+                    return value;
+                }
+                try {
+                    return JSON.parse(value);
+                } catch (e) {
+                    try {
+                        return eval('(' + value + ')');// 处理变态的单双引号共存字符串
+                    } catch (e) {
+                        return value || undefined;
+                    }
+                }
             }
         }
     }
 </script>
 
+<style>
+    .doc-tree{padding: 10px 4px;}
+    .doc-tree .ant-tree-switcher{width: 15px;}
+    .doc-tree .ant-tree-switcher-noop{width: 0;}
+    .doc-tree .ant-tag{margin-right: 0;}
+</style>