manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

swagger文档管理改为API接口文档管理

Browse Source
This commit is contained in:
暮光：城中城
2021-11-26 23:51:14 +08:00
parent 4408525b45
commit 91aef6f9f4
165 changed files with 3892 additions and 5744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
zyplayer-doc-ui/api-ui/src/components/layouts/EmptyKeepAliveLayout.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</template>
<script>
export default {
name: 'EmptyLayout',
components: {},
props: [],
data() {
return {}
},
methods: {}
}
</script>

15
zyplayer-doc-ui/api-ui/src/components/layouts/EmptyLayout.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'EmptyLayout',
components: {},
props: [],
data() {
return {}
},
methods: {}
}
</script>

42
zyplayer-doc-ui/api-ui/src/components/layouts/GlobalFooter.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="footer">
<div class="links">
<a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
<a-icon v-if="item.icon" :type="item.icon"/>{{item.name}}
</a>
</div>
<div class="copyright">
Copyright<a-icon type="copyright" /> {{copyright}}
</div>
</div>
</template>
<script>
export default {
name: 'GlobalFooter',
props: ['copyright', 'linkList']
}
</script>
<style scoped>
.footer {
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
}
.footer .copyright {
color: rgba(0, 0, 0, 0.45);
font-size: 14px;
}
.footer .links {
margin-bottom: 8px;
}
.footer .links a:not(:last-child) {
margin-right: 40px;
}
.footer .links a {
color: rgba(0, 0, 0, 0.45);
-webkit-transition: all .3s;
transition: all .3s;
}
</style>

158
zyplayer-doc-ui/api-ui/src/components/layouts/GlobalLayout.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<a-layout class="api-menu-trigger">
<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>API接口文档管理</h1>
</div>
<menu-layout :collapsed="appMenuCollapsed"></menu-layout>
</a-layout-sider>
<div ref="rightResize" class="right-resize" v-show="!appMenuCollapsed">
<i ref="rightResizeBar">...</i>
</div>
<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="auto">
<MenuUnfoldOutlined class="trigger" v-if="appMenuCollapsed" @click="appMenuCollapsed = !appMenuCollapsed"/>
<MenuFoldOutlined class="trigger" v-else @click="appMenuCollapsed = !appMenuCollapsed"/>
</a-col>
<a-col flex="400px" style="text-align: right;padding-right: 20px;">
<header-avatar></header-avatar>
</a-col>
</a-row>
</a-layout-header>
<a-layout-content style="height: calc(100vh - 80px);overflow: auto;background: #fff;">
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script>
import HeaderAvatar from './HeaderAvatar.vue'
import MenuLayout from './MenuLayout.vue'
import GlobalFooter from './GlobalFooter.vue'
import {BarChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue';
const minHeight = window.innerHeight - 64 - 122;
export default {
name: 'GlobalLayout',
components: {HeaderAvatar, MenuLayout, GlobalFooter, BarChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined},
data() {
return {
minHeight: minHeight + 'px',
appMenuCollapsed: false,
rightAsideWidth: 300
}
},
computed: {},
mounted() {
this.dragChangeRightAsideWidth();
},
methods: {
dragChangeRightAsideWidth: function() {
// 保留this引用
let resize = this.$refs.rightResize;
let resizeBar = this.$refs.rightResizeBar;
resize.onmousedown = e => {
let startX = e.clientX;
// 颜色改变提醒
resize.style.background = "#ccc";
resizeBar.style.background = "#aaa";
resize.left = resize.offsetLeft;
document.onmousemove = e2 => {
// 计算并应用位移量
let endX = e2.clientX;
let moveLen = startX - endX;
if ((moveLen < 0 && this.rightAsideWidth < 600) || (moveLen > 0 && this.rightAsideWidth > 280)) {
startX = endX;
this.rightAsideWidth -= moveLen;
if (this.rightAsideWidth < 280) {
this.rightAsideWidth = 280;
}
}
};
document.onmouseup = () => {
// 颜色恢复
resize.style.background = "#fafafa";
resizeBar.style.background = "#ccc";
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
},
}
</script>
<style scoped>
.trigger {
font-size: 20px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
overflow: hidden;
background: #1d4e89;
}
.logo h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 600;
display: inline-block;
height: 32px;
line-height: 32px;
vertical-align: middle;
}
.logo img {
width: 32px;
display: inline-block;
vertical-align: middle;
}
.api-menu-trigger {
min-height: 100%;
}
.right-resize {
width: 5px;
cursor: w-resize;
background: #fafafa;
}
.right-resize i{
margin-top: 300px;
width: 5px;
height: 35px;
display: inline-block;
word-wrap: break-word;
word-break: break-all;
line-height: 8px;
border-radius: 5px;
background: #ccc;
color: #888;
}
</style>
<style>
.ant-layout-sider {
transition: none;
}
</style>

67
zyplayer-doc-ui/api-ui/src/components/layouts/HeaderAvatar.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<a-dropdown trigger="click">
<a class="ant-dropdown-link" @click.prevent style="display: inline-block; height: 100%; vertical-align: initial;">
<UserOutlined /> {{currUser.userName || '-'}}
</a>
<template #overlay>
<a-menu >
<a-menu-item @click="showConsole" key="1">控制台</a-menu-item>
<a-menu-divider />
<a-menu-item @click="showAbout" key="2">关于</a-menu-item>
<!-- <a-menu-item @click="showMyInfo" key="3">我的资料</a-menu-item>-->
<a-menu-item @click="userSignOut" key="4">退出登录</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<about-dialog ref="aboutDialog"></about-dialog>
</template>
<script>
import {zyplayerApi} from '../../api/index';
import {getZyplayerApiBaseUrl} from '../../api/request/utils.js';
import aboutDialog from '../../views/common/AboutDialog.vue'
import {DownOutlined, UserOutlined} from '@ant-design/icons-vue';
export default {
name: 'HeaderAvatar',
data() {
return {
currUser: {},
};
},
components: {DownOutlined, UserOutlined, aboutDialog},
mounted() {
this.getSelfUserInfo();
},
methods: {
showAbout() {
this.$refs.aboutDialog.show();
},
showConsole() {
window.open(getZyplayerApiBaseUrl(), '_blank');
},
showMyInfo() {
this.$router.push({path: '/user/myInfo'});
},
userSignOut() {
zyplayerApi.userLogout().then(() => {
location.reload();
});
},
getSelfUserInfo() {
zyplayerApi.getSelfUserInfo().then(json=>{
this.currUser = json.data;
});
},
},
}
</script>
<style scoped>
.avatar {
margin: 20px 4px 20px 0;
color: #1890ff;
background: hsla(0, 0%, 100%, .85);
vertical-align: middle;
}
</style>

57
zyplayer-doc-ui/api-ui/src/components/layouts/MenuChildrenLayout.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<template class="menu-layout-children" v-if="!menuItem.meta || !menuItem.meta.hidden">
<template v-if="!!menuItem.children">
<a-sub-menu :key="menuItem.path" v-if="haveShowChildren(menuItem.children)">
<template #title>
<template v-if="menuItem.meta">
<SettingOutlined v-if="menuItem.meta.icon === 'SettingOutlined'"/>
<FileTextOutlined v-if="menuItem.meta.icon === 'FileTextOutlined'"/>
</template>
<span>{{menuItem.name}}</span>
</template>
<MenuLayoutChildren :menuItem="children" v-for="children in menuItem.children"></MenuLayoutChildren>
</a-sub-menu>
</template>
<a-menu-item :key="menuItem.path" v-else>
<router-link :to="{path: menuItem.path, query: menuItem.query}">
<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>
</a-menu-item>
</template>
</template>
<script>
import {
StarOutlined,
SettingOutlined,
CarryOutOutlined,
FileTextOutlined,
DashboardOutlined,
InfoCircleOutlined,
} from '@ant-design/icons-vue';
export default {
name: 'MenuLayoutChildren',
props: {
menuItem: Object,
},
data() {
return {}
},
components: {
StarOutlined, SettingOutlined, CarryOutOutlined, FileTextOutlined,
DashboardOutlined, InfoCircleOutlined
},
methods: {
haveShowChildren(children) {
return children.filter(item => (!item.meta || !item.meta.hidden)).length > 0;
},
}
}
</script>

150
zyplayer-doc-ui/api-ui/src/components/layouts/MenuLayout.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div class="menu-layout">
<a-menu theme="light" mode="inline" :inline-collapsed="false" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys">
<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" class="doc-tree">
<a-spin tip="加载中..." :spinning="treeDataLoading">
<div style="padding: 10px 5px;">
<a-select placeholder="请选择分组" v-model:value="docChoiceId" @change="docChoiceChange" style="width: 100%;">
<a-select-option :value="item.id" v-for="item in docResourceList">{{item.name}}</a-select-option>
</a-select>
<a-input-search v-model:value="searchKeywords" placeholder="搜索文档内容" style="width: 100%;margin-top: 10px;" @search="docChoiceChange"/>
</div>
<template v-if="docChoice && docChoice.docType">
<DocTreeSwagger v-if="docChoice.docType === 1 || docChoice.docType === 2" ref="swaggerRef"></DocTreeSwagger>
</template>
</a-spin>
</div>
</div>
</template>
<script>
import {toRefs, ref, reactive, onMounted, watch, nextTick} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import MenuChildrenLayout from './MenuChildrenLayout.vue'
import {zyplayerApi} from '../../api'
import DocTreeSwagger from './doc-tree/Swagger.vue'
export default {
props: {
collapsed: {
type: Boolean,
default: false
},
},
components: {MenuChildrenLayout, DocTreeSwagger},
setup(props) {
const store = useStore();
const route = useRoute();
const router = useRouter();
let menuData = ref([]);
let selectedKeys = ref([]);
let openKeys = ref([]);
// 文档;
let treeDataLoading = ref(false);
let docResourceList = ref([]);
let docChoiceId = ref();
let searchKeywords = ref('');
let docChoice = ref({});
const getGlobalParamList = () => {
zyplayerApi.docApiGlobalParamList().then(res => {
let globalParam = res.data || [];
store.commit('setGlobalParam', globalParam);
});
};
const getApiDocList = () => {
zyplayerApi.apiDocApis().then(res => {
docResourceList.value = res.data || [];
if (docResourceList.value.length > 0 && !docChoiceId.value) {
// 加载初始化的地址
if (route.path === '/swagger/view' && route.query.id) {
docChoiceId.value = parseInt(route.query.id);
} else if (route.path === '/openapi/view' && route.query.id){
docChoiceId.value = parseInt(route.query.id);
} else {
docChoiceId.value = docResourceList.value[0].id;
}
loadDoc();
}
});
};
let swaggerRef = ref();
let openApiRef = ref();
const loadDoc = async () => {
treeDataLoading.value = true;
docChoice.value = docResourceList.value.find(item => item.id === docChoiceId.value);
if (!docChoice.value) {
message.error('未找到对应的文档地址信息');
return;
}
await nextTick();
const loadDocCallback = (success) => {
if (success) {
store.commit('setApiDoc', docChoice.value);
}
treeDataLoading.value = false;
};
// 如果文档是swagger类型
if (docChoice.value.docType === 1 || docChoice.value.docType === 2) {
if (swaggerRef.value) {
swaggerRef.value.loadDoc(docChoiceId.value, searchKeywords.value, loadDocCallback);
}
} else if (docChoice.value.docType === 3 || docChoice.value.docType === 4) {
if (openApiRef.value) {
openApiRef.value.loadDoc(docChoiceId.value, searchKeywords.value, loadDocCallback);
}
}
};
const docChoiceChange = () => {
loadDoc();
};
watch(store.getters.getDocChangedNum, () => {
getApiDocList();
});
onMounted(() => {
menuData.value = router.options.routes.find((item) => item.path === '/').children[0].children;
let meta = route.meta || {};
let path = route.path;
if (!!meta.parentPath) {
path = meta.parentPath;
}
selectedKeys.value = [path];
let matched = route.matched;
if (matched.length >= 1) {
openKeys.value = [matched[1].path];
}
getApiDocList();
getGlobalParamList();
});
return {
menuData,
selectedKeys,
openKeys,
treeDataLoading,
docResourceList,
docChoiceId,
searchKeywords,
swaggerRef,
docChoice,
docChoiceChange,
};
},
};
</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;}
.ant-badge-not-a-wrapper:not(.ant-badge-status) {
vertical-align: text-top;
}
</style>

105
zyplayer-doc-ui/api-ui/src/components/layouts/PageLayout.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div class="page-layout">
<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">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</div>
</div>
</template>
<script>
export default {
name: 'PageTableView',
components: {},
data() {
return {
pageList: [],
linkList: [],
activePage: '',
multiPage: true,
ignoreParamPath: [
"/data/export",
],
apiRequestIndex: 1,
}
},
computed: {
pageTabNameMap () {
return this.$store.state.pageTabNameMap;
}
},
created() {
let {name, path, fullPath} = this.$route;
this.pageList.push({name, path, fullPath});
let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage);
this.activePage = activePage;
this.$router.push(this.$route.fullPath);
},
watch: {
'$route': function (newRoute, oldRoute) {
let activePage = this.getRouteRealPath(newRoute);
this.activePage = activePage;
if (this.linkList.indexOf(activePage) < 0) {
this.linkList.push(activePage);
let {name, path, fullPath} = newRoute;
this.pageList.push({name, path, fullPath});
}
let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
pageRoute.fullPath = newRoute.fullPath;
},
},
methods: {
isIgnoreParamPath(path) {
return this.ignoreParamPath.indexOf(path) >= 0;
},
getRouteRealPath(route) {
return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath;
},
changePage(tab) {
let checkedTab = this.pageList.find(item => item.fullPath === tab);
this.activePage = this.getRouteRealPath(checkedTab);
this.$router.push(checkedTab.fullPath);
},
editPage(key, action) {
this[action](key);
},
editPageTab(key, action) {
if (action === 'add') {
this.addPageTab();
} else {
this.removePageTab(key);
}
},
addPageTab() {
this.$router.push({path: '/api/request', query: {id: this.apiRequestIndex++}});
},
removePageTab(key) {
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页，不能再关闭了啦');
return;
}
this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
this.linkList = this.linkList.filter(item => item !== key);
let index = this.linkList.indexOf(this.activePage);
if (index < 0) {
index = this.linkList.length - 1;
this.activePage = this.linkList[index];
this.$router.push(this.activePage);
}
},
}
}
</script>
<style>
.page-layout{background: #fff;}
.page-layout .page-body{padding: 0 10px 10px 10px;}
.ant-tabs-bar{margin-bottom: 0;}
</style>

112
zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/OpenApi.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="{ title, isLeaf, method, children, key }">
<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>
<span style="margin: 0 6px 0 3px;">{{title}}</span>
<a-badge v-if="children" :count="children.length" :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
</template>
</a-directory-tree>
</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 {zyplayerApi} from '../../../api'
import {analysisSwaggerData, getTreeDataForTag} from '../../../assets/core/SwaggerTreeAnalysis.js'
export default {
setup() {
const store = useStore();
const route = useRoute();
const router = useRouter();
let tagPathMap = ref({});
let swaggerDoc = ref({});
let treeData = ref([]);
let expandedKeys = ref([]);
let choiceDocId = ref('');
let searchKeywords = ref('');
const docChecked = (val, node) => {
if (node.node.key === 'main') {
router.push({path: '/swagger/info'});
} else if (node.node.isLeaf) {
let dataRef = node.node.dataRef;
router.push({path: '/swagger/view', query: dataRef.query});
}
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId.value = docId;
searchKeywords.value = keyword;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
let v2Doc = toJsonObj(res.data);
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {
message.error('获取文档数据请求失败');
return;
}
swaggerDoc.value = v2Doc;
store.commit('setSwaggerDoc', v2Doc);
let treeData = analysisSwaggerData(v2Doc);
store.commit('setSwaggerUrlMethodMap', treeData.urlMethodMap);
store.commit('setMethodStatistic', treeData.methodStatistic);
tagPathMap.value = treeData.tagPathMap;
loadTreeData();
callback();
setTimeout(() => {
let isViewPage = (route.path === '/swagger/view' && route.query.id);
if (!isViewPage) {
router.push({path: '/swagger/info'});
}
}, 0);
});
};
const loadTreeData = () => {
expandedKeys.value = ['main'];
let metaInfo = {id: choiceDocId.value};
treeData.value = getTreeDataForTag(swaggerDoc.value, tagPathMap.value, searchKeywords.value, metaInfo);
};
const toJsonObj = (value) => {
if (typeof value !== 'string') {
return value;
}
try {
return JSON.parse(value);
} catch (e) {
try {
// 处理变态的单双引号共存字符串
return eval('(' + value + ')');
} catch (e) {
return value || undefined;
}
}
};
return {
expandedKeys,
docChecked,
loadDoc,
treeData,
};
},
};
</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;}
.ant-badge-not-a-wrapper:not(.ant-badge-status) {
vertical-align: text-top;
}
</style>

113
zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/Swagger.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="{ title, isLeaf, method, children, key }">
<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>
<span style="margin: 0 6px 0 3px;">{{title}}</span>
<a-badge v-if="children" :count="children.length" :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
</template>
</a-directory-tree>
</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 {zyplayerApi} from '../../../api'
import {analysisSwaggerData, getTreeDataForTag} from '../../../assets/core/SwaggerTreeAnalysis.js'
export default {
setup() {
const store = useStore();
const route = useRoute();
const router = useRouter();
let tagPathMap = ref({});
let swaggerDoc = ref({});
let treeData = ref([]);
let expandedKeys = ref([]);
let choiceDocId = ref('');
let searchKeywords = ref('');
const docChecked = (val, node) => {
if (node.node.key === 'main') {
router.push({path: '/swagger/info'});
} else if (node.node.isLeaf) {
let dataRef = node.node.dataRef;
router.push({path: '/swagger/view', query: dataRef.query});
}
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId.value = docId;
searchKeywords.value = keyword;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
let v2Doc = toJsonObj(res.data);
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {
callback(false);
message.error('获取文档数据请求失败');
return;
}
swaggerDoc.value = v2Doc;
store.commit('setSwaggerDoc', v2Doc);
let treeData = analysisSwaggerData(v2Doc);
store.commit('setSwaggerUrlMethodMap', treeData.urlMethodMap);
store.commit('setMethodStatistic', treeData.methodStatistic);
tagPathMap.value = treeData.tagPathMap;
loadTreeData();
callback(true);
setTimeout(() => {
let isViewPage = (route.path === '/swagger/view' && route.query.id);
if (!isViewPage) {
router.push({path: '/swagger/info'});
}
}, 0);
});
};
const loadTreeData = () => {
expandedKeys.value = ['main'];
let metaInfo = {id: choiceDocId.value};
treeData.value = getTreeDataForTag(swaggerDoc.value, tagPathMap.value, searchKeywords.value, metaInfo);
};
const toJsonObj = (value) => {
if (typeof value !== 'string') {
return value;
}
try {
return JSON.parse(value);
} catch (e) {
try {
// 处理变态的单双引号共存字符串
return eval('(' + value + ')');
} catch (e) {
return value || undefined;
}
}
};
return {
expandedKeys,
docChecked,
loadDoc,
treeData,
};
},
};
</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;}
.ant-badge-not-a-wrapper:not(.ant-badge-status) {
vertical-align: text-top;
}
</style>