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

wiki编辑器升级，api接口文档开发

Browse Source
This commit is contained in:
暮光：城中城
2022-01-30 10:24:03 +08:00
parent 24f7eb10d0
commit c13fb2cae4
45 changed files with 8010 additions and 28058 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9172
zyplayer-doc-ui/api-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
zyplayer-doc-ui/api-ui/src/api/zyplayer.js
View File

@@ -24,7 +24,16 @@ export const zyplayerApi = {
docAuthDelete: data => apiClient({url: '/doc-api/doc/auth/delete', method: 'post', data: data}),
apiCustomFolderAdd: data => apiClient({url: '/api-custom-folder/add', method: 'post', data: data}),
apiCustomFolderUpdate: data => apiClient({url: '/api-custom-folder/update', method: 'post', data: data}),
apiCustomFolderDelete: data => apiClient({url: '/api-custom-folder/delete', method: 'post', data: data}),
apiCustomRequestAdd: data => apiClient({url: '/api-custom-request/add', method: 'post', data: data}),
apiCustomRequestDetail: data => apiClient({url: '/api-custom-request/detail', method: 'post', data: data}),
apiCustomRequestDelete: data => apiClient({url: '/api-custom-request/delete', method: 'post', data: data}),
apiCustomNodeAdd: data => apiClient({url: '/api-custom-node/add', method: 'post', data: data}),
apiCustomNodeUpdate: data => apiClient({url: '/api-custom-node/update', method: 'post', data: data}),
apiCustomNodeDelete: data => apiClient({url: '/api-custom-node/delete', method: 'post', data: data}),
apiCustomNodeDetail: data => apiClient({url: '/api-custom-node/detail', method: 'post', data: data}),
apiCustomNodeChangeParent: data => apiClient({url: '/api-custom-node/changeParent', method: 'post', data: data}),
};

75
zyplayer-doc-ui/api-ui/src/assets/core/CustomRequestTreeAnalysis.js
View File

@@ -8,19 +8,20 @@ const methodArray = ["get", "head", "post", "put", "patch", "delete", "options",
* @param keywords 过滤关键字
* @param metaInfo 接口元信息，点击时放入URL的参数
*/
export function getTreeDataForTag(customRequest, keywords, metaInfo) {
export function getTreeDataForTag(customRequest, keywords, metaInfo, requestInfoMap) {
let firstChild = customRequest[0];
let treeData = getTreeDataChildren(firstChild, keywords, metaInfo, 1);
let treeData = getTreeDataChildren(firstChild, keywords, metaInfo, requestInfoMap, 1);
return [
{
key: 'main',
isLeaf: false,
title: firstChild.name || '自建API接口文档',
children: treeData
}
];
}
function getTreeDataChildren(customRequest, keywords, metaInfo, treeIndex) {
function getTreeDataChildren(customRequest, keywords, metaInfo, requestInfoMap, treeIndex) {
let treeData = [];
if (!customRequest) {
return treeData;
@@ -29,27 +30,37 @@ function getTreeDataChildren(customRequest, keywords, metaInfo, treeIndex) {
let indexApi = 1;
if (customRequest.children && customRequest.children.length > 0) {
customRequest.children.forEach(item => {
requestInfoMap.originNodeMap[item.nodeId] = item;
let tempTreeId = treeIndex + "_" + indexFolder + "_" + indexApi;
let treeChildren = getTreeDataChildren(item, keywords, metaInfo, tempTreeId);
treeData.push({title: item.name, key: tempTreeId, folderId: item.folderId, isLeaf: false, children: treeChildren});
indexApi++;
});
}
if (customRequest.apis && customRequest.apis.length > 0) {
customRequest.apis.forEach(item => {
let tempTreeId = treeIndex + "_" + indexFolder + "_" + indexApi;
treeData.push({
title: item.apiName,
key: tempTreeId,
isLeaf: true,
method: item.method,
folderId: item.folderId,
query: {
...metaInfo,
requestId: item.requestId,
if (item.nodeType === 1) {
treeData.push({
title: item.nodeName,
key: tempTreeId,
isLeaf: true,
method: item.method,
nodeId: item.nodeId,
query: {
...metaInfo,
nodeId: item.nodeId,
}
});
indexApi++;
} else {
let treeChildren = getTreeDataChildren(item, keywords, metaInfo, requestInfoMap, tempTreeId);
let eureka = searchInCustomRequestFolder(item, keywords);
if (treeChildren.length > 0 || eureka) {
treeData.push({
title: item.nodeName,
key: tempTreeId,
nodeId: item.nodeId,
isLeaf: false,
editing: false,
titleEditing: item.nodeName,
children: treeChildren
});
indexApi++;
}
});
indexApi++;
}
});
}
indexFolder++;
@@ -63,16 +74,20 @@ function getTreeDataChildren(customRequest, keywords, metaInfo, treeIndex) {
* @param keywords 关键字
* @returns {*|boolean} 是否包含
*/
function searchInPathMethods(url, methodNode, keywords) {
if (!keywords || !url) {
function searchInCustomRequest(request, keywords) {
if (!keywords || !request) {
return true;
}
url = url.toLowerCase();
keywords = keywords.toLowerCase();
// 路径中有就不用再去找了
if (url.indexOf(keywords) >= 0) {
return true;
}
let searchData = methodNode.path + methodNode.method + methodNode.summary + methodNode.description + methodNode.tags;
let searchData = request.apiUrl + request.method + request.nodeName;
return (searchData && searchData.toLowerCase().indexOf(keywords) >= 0);
}
function searchInCustomRequestFolder(folder, keywords) {
if (!keywords || !folder) {
return true;
}
keywords = keywords.toLowerCase();
let searchData = folder.name;
return (searchData && searchData.toLowerCase().indexOf(keywords) >= 0);
}

10
zyplayer-doc-ui/api-ui/src/components/layouts/PageLayout.vue
View File

@@ -42,8 +42,9 @@
}
},
created() {
let {name, path, fullPath} = this.$route;
this.pageList.push({name, path, fullPath});
let {name, path, fullPath, query} = this.$route;
let checkedTab = {name, path, fullPath, query};
this.pageList.push(checkedTab);
let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage);
this.activePage = activePage;
@@ -55,11 +56,12 @@
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 {name, path, fullPath, query} = newRoute;
this.pageList.push({name, path, fullPath, query});
}
let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
pageRoute.fullPath = newRoute.fullPath;
this.$store.commit('setActivePage', pageRoute);
},
},
methods: {

339
zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/CustomRequest.vue
View File

@@ -1,53 +1,93 @@
<template>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="record">
<template v-if="record.key === 'info'">
<file-text-outlined style="margin-right: 3px;"/>
</template>
<template v-if="record.isLeaf">
<a-tag color="pink" v-if="record.method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="record.method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="record.method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="record.method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="record.method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="record.method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="record.method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="record.method === 'trace'">trace</a-tag>
</template>
<span style="margin: 0 6px 0 3px;">{{record.title}}</span>
<template v-if="record.children">
<a-badge :count="record.children.length" showZero :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
<a-dropdown :trigger="['click']">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleMenuClick($event, record)">
<a-menu-item key="newRequest">
<plus-outlined /> 新建接口
</a-menu-item>
<a-menu-item key="newFolder">
<folder-add-outlined /> 新建文件夹
</a-menu-item>
<a-menu-divider />
<a-menu-item key="edit">
<edit-outlined /> 编辑
</a-menu-item>
<a-menu-item key="delete">
<delete-outlined /> 删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</template>
</a-directory-tree>
<div class="doc-tree-box">
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
draggable @drop="treeDataDragEnd"
@select="docChecked">
<template #title="record">
<!--说明-->
<div v-if="record.key === 'info'" class="api-title-line">
<file-text-outlined style="margin-right: 3px;"/>
<span class="tree-title-text">{{record.title}}</span>
</div>
<div v-if="record.key === 'main'" class="api-title-line">
<span class="tree-title-text">{{record.title}}</span>
<a-badge :count="record.children.length" showZero :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
<a-dropdown :trigger="['click']">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleFolderDropdownClick($event, record)">
<a-menu-item key="newRequest"><plus-outlined /> 新建接口</a-menu-item>
<a-menu-item key="newFolder"><folder-add-outlined /> 新建文件夹</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
<!--接口-->
<div v-if="record.isLeaf" class="api-title-line">
<a-tag color="pink" v-if="record.method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="record.method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="record.method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="record.method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="record.method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="record.method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="record.method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="record.method === 'trace'">trace</a-tag>
<span class="tree-title-text">
{{record.title}}
<a-dropdown :trigger="['click']" class="api-title-dropdown">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleApiTitleDropdownClick($event, record)">
<a-menu-item key="delete"><delete-outlined /> 删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</div>
<!--文件夹-->
<div v-else-if="record.nodeId" class="api-title-line">
<a-popover v-model:visible="record.data.editing" placement="rightTop" title="编辑名称" trigger="click" @visibleChange="editFolderVisibleChange($event, record)">
<template #content>
<a-input v-model:value="record.data.titleEditing" v-autofocus></a-input>
</template>
<span class="tree-title-text">{{record.title}}</span>
</a-popover>
<a-badge :count="record.children.length" showZero :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
<a-dropdown :trigger="['click']">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleFolderDropdownClick($event, record)">
<a-menu-item key="newRequest"><plus-outlined /> 新建接口</a-menu-item>
<a-menu-item key="newFolder"><folder-add-outlined /> 新建文件夹</a-menu-item>
<a-menu-divider />
<a-menu-item key="edit"><edit-outlined /> 编辑</a-menu-item>
<a-menu-item key="delete"><delete-outlined /> 删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</template>
</a-directory-tree>
</div>
</template>
<script>
import {toRefs, ref, reactive, onMounted, watch, nextTick} from 'vue';
import {toRefs, ref, reactive, onMounted, createVNode, watch, nextTick} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import {InfoCircleOutlined, FileTextOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined, FolderAddOutlined, ApiOutlined, PlusOutlined} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import {
InfoCircleOutlined,
FileTextOutlined,
EllipsisOutlined,
EditOutlined,
DeleteOutlined,
FolderAddOutlined,
ApiOutlined,
PlusOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import {zyplayerApi} from '../../../api'
import {getTreeDataForTag} from '../../../assets/core/CustomRequestTreeAnalysis.js'
@@ -58,10 +98,10 @@
const route = useRoute();
const router = useRouter();
let tagPathMap = ref({});
let customRequestDoc = {};
let treeData = ref([]);
let expandedKeys = ref(['main']);
let selectedKeys = ref([]);
let choiceDocId = '';
let searchKeyword = '';
@@ -71,9 +111,9 @@
router.push({path: '/custom/request', query: dataRef.query});
}
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId = docId;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
const loadDoc = (docId, keyword, callback = () => {}) => {
choiceDocId = docId;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
let v2Doc = res.data;
if (!v2Doc && v2Doc.length != 1) {
callback(false);
@@ -88,81 +128,196 @@
callback(false);
});
};
const loadTreeData = async (keyword) => {
let metaInfo = {id: choiceDocId};
searchKeyword = keyword;
treeData.value = getTreeDataForTag(customRequestDoc, keyword, metaInfo);
treeData.value.unshift({key: 'info', title: '文档说明信息', isLeaf: true});
};
const handleMenuClick = (event, record) => {
let requestInfoMap = {
// 渲染到界面的数据
treeRequestMap: {},
// 原始map，用于搜索后的重新渲染
originNodeMap: {},
};
const getNodeIdMap = (tree) => {
tree.forEach(item => {
if (item.isLeaf && item.nodeId) {
requestInfoMap.treeRequestMap[item.nodeId] = item;
} else if (item.children) {
getNodeIdMap(item.children);
}
});
};
const loadTreeData = async (keyword) => {
let metaInfo = {id: choiceDocId};
searchKeyword = keyword;
treeData.value = getTreeDataForTag(customRequestDoc, keyword, metaInfo, requestInfoMap);
getNodeIdMap(treeData.value);
};
// 监听自定义请求被修改了的事件
watch(store.getters.getCustomRequestChange, () => {
let requestChange = store.state.customRequestChange;
if (requestChange && requestChange.nodeId && requestChange.nodeName) {
// 展示的tree
let requestItem = requestInfoMap.treeRequestMap[requestChange.nodeId];
if (requestItem) {
requestItem.method = requestChange.method;
requestItem.title = requestChange.nodeName;
}
// 原始对象
let requestOriginItem = requestInfoMap.originNodeMap[requestChange.nodeId];
if (requestOriginItem) {
requestOriginItem.method = requestChange.method;
requestOriginItem.nodeName = requestChange.nodeName;
}
}
});
// 监听Tab页面切换
watch(store.getters.getActivePage, () => {
let activePage = store.state.activePage;
changeSelectedRequestKeys(activePage.query.nodeId);
});
const editFolderVisibleChange = (visible, record) => {
// 点击触发弹出事件不处理
if (visible) {
record.data.editing = false;
return;
}
let title = record.data.titleEditing;
// 没做修改不处理
if (title === record.data.title) {
return;
}
zyplayerApi.apiCustomNodeUpdate({id: record.data.nodeId, nodeName: title}).then(res => {
record.data.title = title;
// 修改原始的文件夹名称
let folderItem = requestInfoMap.originNodeMap[record.data.nodeId];
if (folderItem) {
folderItem.name = title;
}
});
};
const handleApiTitleDropdownClick = (event, record) => {
if (event.key === 'delete') {
Modal.confirm({
title: '删除确认',
maskClosable: true,
icon: createVNode(ExclamationCircleOutlined),
content: '你确定要删除此接口吗？',
okText: '删除',
cancelText: '取消',
onOk() {
zyplayerApi.apiCustomNodeDelete({id: record.data.nodeId}).then(res => {
message.success('删除成功');
loadDoc(choiceDocId, searchKeyword);
});
},
});
}
};
const handleFolderDropdownClick = (event, record) => {
if (event.key === 'newFolder') {
let params = {
// id: '',
nodeType: 0,
docId: choiceDocId,
parentFolderId: record.folderId,
folderName: '新建文件夹',
folderDesc: '',
parentId: record.nodeId,
nodeName: '新建文件夹',
nodeDesc: '',
};
zyplayerApi.apiCustomFolderAdd(params).then(res => {
zyplayerApi.apiCustomNodeAdd(params).then(res => {
loadDoc(choiceDocId, searchKeyword);
});
} else if (event.key === 'newRequest') {
let params = {
// id: '',
nodeType: 1,
docId: choiceDocId,
folderId: record.folderId,
apiName: '新建接口',
parentId: record.nodeId,
nodeName: '新建接口',
method: 'get',
apiUrl: '',
// formData: '测试xxx',
// bodyData: '测试xxx',
// headerData: '测试xxx',
// cookieData: '测试xxx',
};
zyplayerApi.apiCustomRequestAdd(params).then(res => {
loadDoc(choiceDocId, searchKeyword);
zyplayerApi.apiCustomNodeAdd(params).then(res => {
let requestSaved = res.data;
let queryInfo = {
id: choiceDocId,
requestId: requestSaved.id,
nodeId: requestSaved.id,
};
router.push({path: '/custom/request', query: queryInfo});
loadDoc(choiceDocId, searchKeyword, () => {
changeSelectedRequestKeys(requestSaved.id);
});
});
} else if (event.key === 'edit') {
record.data.editing = true;
} else if (event.key === 'delete') {
Modal.confirm({
title: '删除确认',
maskClosable: true,
icon: createVNode(ExclamationCircleOutlined),
content: '你确定要删除此文件夹及目录下所有二级目录和接口吗？',
okText: '删除',
cancelText: '取消',
onOk() {
zyplayerApi.apiCustomNodeDelete({id: record.data.nodeId}).then(res => {
message.success('删除成功');
loadDoc(choiceDocId, searchKeyword);
});
},
});
}
};
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;
}
}
};
const changeSelectedRequestKeys = (nodeId) => {
let treeData = requestInfoMap.treeRequestMap[nodeId];
if (treeData) {
selectedKeys.value = [treeData.key];
}
};
const treeDataDragEnd = (event) => {
let param = {
id: event.dragNode.nodeId,
parentId: event.node.nodeId,
targetType: 0,
};
if (event.dropToGap) {
// 放入event.node的后面
console.log(`放入${event.node.key}的后面`);
param.targetType = 1;
} else {
// 放入event.node文件夹的第一个位置
console.log(`放入${event.node.key}文件夹内`);
}
zyplayerApi.apiCustomNodeChangeParent(param).then(res => {
message.success('修改排序成功');
loadDoc(choiceDocId, searchKeyword);
});
console.log(event);
};
return {
expandedKeys,
selectedKeys,
editFolderVisibleChange,
docChecked,
treeDataDragEnd,
loadDoc,
loadTreeData,
treeData,
handleMenuClick,
handleFolderDropdownClick,
handleApiTitleDropdownClick,
};
},
};
</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;
/*.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;*/
/*}*/
.api-title-line .tree-title-text{
margin: 0 6px 0 3px;
}
.api-title-line .api-title-dropdown{
display: none;
}
.api-title-line:hover .api-title-dropdown{
display: unset;
}
</style>

1
zyplayer-doc-ui/api-ui/src/components/params/ParamTable.vue
View File

@@ -94,7 +94,6 @@
});
const propsParamInit = () => {
paramListRef.value = props.paramList;
console.log('paramListRef.value', paramListRef.value);
// Query参数处理
if (paramListRef.value.length <= 0 || !paramListRef.value[paramListRef.value.length - 1].isLastRow) {
props.paramList.push({name: '', value: undefined, type: 'integer', key: ++nextIndex, isLastRow: true});

8
zyplayer-doc-ui/api-ui/src/main.js
View File

@@ -31,3 +31,11 @@ app.directive('highlight', {
}
});
// 聚焦元素
app.directive('autofocus', {
updated(el) {
// 延迟等待弹窗初始完成
setTimeout(() => el.focus(), 0);
}
});

93
zyplayer-doc-ui/api-ui/src/routes.js
View File

@@ -47,62 +47,45 @@ let routers = [
},
// 以下是隐藏的菜单路由
{
path: '/swagger',
name: 'swagger文档',
path: '/swagger/info',
name: 'Swagger文档信息',
meta: {
hidden: true,
icon: 'SettingOutlined'
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/swagger/info',
name: 'Swagger文档信息',
component: () => import('./views/swagger/DocInfo.vue')
},
{
path: '/swagger/view',
name: 'Swagger文档展示',
component: () => import('./views/swagger/DocView.vue')
},
]
component: () => import('./views/swagger/DocInfo.vue')
},
{
path: '/swagger/view',
name: 'Swagger文档展示',
meta: {
hidden: true,
},
component: () => import('./views/swagger/DocView.vue')
},
// 以下是OpenApi的菜单路由
{
path: '/openapi',
name: 'openApi文档',
path: '/openapi/info',
name: 'OpenApi文档信息',
meta: {
hidden: true,
icon: 'SettingOutlined'
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/openapi/info',
name: 'OpenApi文档信息',
component: () => import('./views/openapi/DocInfo.vue')
},
{
path: '/openapi/view',
name: 'OpenApi文档展示',
component: () => import('./views/openapi/DocView.vue')
},
]
component: () => import('./views/openapi/DocInfo.vue')
},
{
path: '/custom',
name: 'API请求',
path: '/openapi/view',
name: 'OpenApi文档展示',
meta: {
hidden: true,
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/custom/request',
name: '接口请求',
component: () => import('./views/customRequest/ApiRequest.vue')
},
]
component: () => import('./views/openapi/DocView.vue')
},
{
path: '/custom/request',
name: '接口请求',
meta: {
hidden: true,
},
component: () => import('./views/customRequest/ApiRequest.vue')
},
]
},
@@ -127,24 +110,20 @@ let routers = [
component: () => import('./views/share/ShareHome.vue')
},
{
path: '/doc',
name: '开放文档查看',
path: '/share/swagger/view',
name: 'Swagger开放文档展示',
meta: {
hidden: true,
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/share/swagger/view',
name: 'Swagger开放文档展示',
component: () => import('./views/swagger/share/DocView.vue')
},
{
path: '/share/openapi/view',
name: 'OpenApi开放文档展示',
component: () => import('./views/openapi/share/DocView.vue')
},
]
component: () => import('./views/swagger/share/DocView.vue')
},
{
path: '/share/openapi/view',
name: 'OpenApi开放文档展示',
meta: {
hidden: true,
},
component: () => import('./views/openapi/share/DocView.vue')
},
]
}

16
zyplayer-doc-ui/api-ui/src/store/index.js
View File

@@ -5,6 +5,8 @@ export default createStore({
return {
// 文档改变事件，供其他页面watch
docChangedNum: 1,
customRequestChange: {},
// 用户信息
userInfo: {},
// tab多标签的标签名map{xxx: 'val'}
@@ -38,9 +40,14 @@ export default createStore({
// 自建API原始文档
customRequestDoc: {},
// 当前选中的Tab页面
activePage: {},
}
},
getters: {
getCustomRequestChange: (state) => () => {
return state.customRequestChange;
},
getDocChangedNum: (state) => () => {
return state.docChangedNum;
},
@@ -50,6 +57,9 @@ export default createStore({
getApiDoc: (state) => () => {
return state.apiDoc;
},
getActivePage: (state) => () => {
return state.activePage;
},
},
mutations: {
setUserInfo(state, userInfo) {
@@ -111,6 +121,12 @@ export default createStore({
sameObj[item.key] = item.val;
state.pageTabNameMap = sameObj;
},
setCustomRequestChange(state, customRequestChange) {
state.customRequestChange = customRequestChange;
},
setActivePage(state, activePage) {
state.activePage = activePage;
},
}
});

38
zyplayer-doc-ui/api-ui/src/views/customRequest/ApiRequest.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="api-name-box">
<a-row type="flex">
<a-col flex="auto"><a-input v-model:value="docInfoShow.apiName" :bordered="false" placeholder="请输入接口名称" /></a-col>
<a-col flex="auto"><a-input v-model:value="docInfoShow.nodeName" :bordered="false" placeholder="请输入接口名称" /></a-col>
<a-col flex="88px">
<a-button @click="saveCustomRequest" type="dashed"><save-outlined /> 保存</a-button>
</a-col>
@@ -92,7 +92,7 @@
let activePage = ref('urlParam');
const route = useRoute();
const store = useStore();
const queryParam = {docId: route.query.id, requestId: route.query.requestId};
const queryParam = {docId: route.query.id, nodeId: route.query.nodeId};
let globalParam = store.state.globalParam || [];
let nextIndex = 1;
// URL参数处理
@@ -125,6 +125,7 @@
message.error('请输入请求的目标URL地址');
return;
}
setCustomRequestDefaultValue();
const formData = new FormData();
let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
@@ -164,8 +165,8 @@
formData.append('method', docInfoShow.value.method);
formData.append('contentType', '');
formData.append('docId', queryParam.docId);
formData.append('apiName', docInfoShow.value.apiName);
formData.append('customRequestId', queryParam.requestId);
formData.append('nodeName', docInfoShow.value.nodeName);
formData.append('nodeId', queryParam.nodeId);
formData.append('headerParam', JSON.stringify(headerParamArr));
formData.append('cookieParam', JSON.stringify(cookieParamArr));
formData.append('formParam', JSON.stringify(formParamArr));
@@ -173,9 +174,10 @@
formData.append('bodyParam', bodyParamStr);
requestLoading.value = true;
requestResult.value = {};
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
changeCustomRequest();
}).catch(e => {
requestLoading.value = false;
});
@@ -190,14 +192,23 @@
const activePageChange = () => {
queryParamVisible.value = true;
}
// 改变侧边栏标题
const changeCustomRequest = () => {
store.commit('setCustomRequestChange', {
method: docInfoShow.value.method,
nodeId: docInfoShow.value.nodeId,
nodeName: docInfoShow.value.nodeName,
});
store.commit('addTableName', {key: route.fullPath, val: docInfoShow.value.nodeName});
}
onMounted(async () => {
let detailRes = await zyplayerApi.apiCustomRequestDetail({id: route.query.requestId});
let detailRes = await zyplayerApi.apiCustomNodeDetail({id: route.query.nodeId});
let requestDetail = detailRes.data;
if (!requestDetail) {
console.log('文档加载失败', detailRes);
}
docInfoShow.value = requestDetail;
store.commit('addTableName', {key: route.fullPath, val: requestDetail.apiName});
store.commit('addTableName', {key: route.fullPath, val: requestDetail.nodeName});
// Header参数处理
let headerParamListProp = [];
let headerParamListGlobal = globalParam.filter(item => item.paramType === 2);
@@ -234,10 +245,17 @@
});
// 保存请求内容
const saveCustomRequest = () => {
zyplayerApi.apiCustomRequestAdd(docInfoShow.value).then(res => {
setCustomRequestDefaultValue();
zyplayerApi.apiCustomNodeAdd(docInfoShow.value).then(res => {
message.success('保存成功');
changeCustomRequest();
});
}
const setCustomRequestDefaultValue = () => {
if (!docInfoShow.value.nodeName) {
docInfoShow.value.nodeName = '新建接口';
}
}
return {
activePage,
activePageChange,

24416
zyplayer-doc-ui/wiki-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
zyplayer-doc-ui/wiki-ui/package.json
View File

@@ -7,14 +7,16 @@
"build": "vue-cli-service build --mode production"
},
"dependencies": {
"@wangeditor/editor": "^0.14.2",
"@wangeditor/editor-for-vue": "^0.6.13",
"axios": "^0.19.0",
"core-js": "^3.3.2",
"echarts": "^4.5.0",
"element-ui": "^2.15.0",
"highlight.js": "^11.3.1",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"mavon-editor": "^2.10.0",
"highlight.js": "^11.3.1",
"mavon-editor": "^2.10.4",
"pouchdb": "^7.1.1",
"qrcodejs2": "0.0.2",
"sql-formatter": "^2.3.3",

26
zyplayer-doc-ui/wiki-ui/src/components/layouts/GlobalLayout.vue
View File

@@ -174,7 +174,8 @@
}
},
changeWikiPageExpandedKeys(pageId) {
this.wikiPageExpandedKeys = [pageId];
// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
// this.wikiPageExpandedKeys = [pageId];
},
searchByKeywords() {
this.$refs.wikiPageTree.filter(this.searchKeywords);
@@ -187,6 +188,7 @@
console.log("点击节点：", data);
this.nowPageId = data.id;
this.$router.push({path: '/page/show', query: {pageId: data.id}});
this.handleNodeExpand(data);
},
handleNodeExpand(node) {
if (node.children.length > 0 && node.children[0].needLoad) {
@@ -304,28 +306,32 @@
},
doGetPageList(parentId, node) {
let param = {spaceId: this.choiceSpace, parentId: parentId || 0};
if (this.nowSpaceShow.treeLazyLoad == 0) {
if (this.nowSpaceShow.treeLazyLoad === 0) {
param.parentId = null;
}
pageApi.pageList(param).then(json => {
let result = json.data || [];
let pathIndex = [];
if (this.nowSpaceShow.treeLazyLoad == 0) {
pathIndex = result;
let treeData = [];
if (this.nowSpaceShow.treeLazyLoad === 0) {
treeData = result;
} else {
for (let i = 0; i < result.length; i++) {
let item = result[i];
item.parentId = item.parentId || 0;
item.children = [{label: '', needLoad: true}];// 初始化一个对象，点击展开时重新查询加载
pathIndex.push(item);
item.children = [{name: '加载中...', needLoad: true}];// 初始化一个对象，点击展开时重新查询加载
treeData.push(item);
}
}
if (parentId > 0) {
node.children = pathIndex;
node.children = treeData;
} else {
this.wikiPageList = pathIndex;
this.wikiPageList = treeData;
}
});
}).catch(() => {
if (parentId > 0) {
node.children = [];
}
});
},
userSettingDropdown(command) {
console.log("command:" + command);

115
zyplayer-doc-ui/wiki-ui/src/views/page/Edit.vue
View File

@@ -1,51 +1,58 @@
<template>
<div style="height: 100%;" class="page-edit-vue">
<el-row type="border-card" style="height: 100%;overflow: auto;padding: 20px;box-sizing: border-box;">
<el-row :gutter="20">
<el-col :span="16">
<template v-if="pageId">
<span>编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
<template v-else>
<span style="margin-right: 20px;">父级：{{parentWikiPage.name || '/'}}</span>
<el-tooltip class="item" content="在根目录创建文档" v-if="parentId">
<el-button type="text" @click="changeToRootPath" style="padding: 0 10px;">根目录</el-button>
</el-tooltip>
<span style="margin-left: 50px;">编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
</el-col>
<el-col :span="8" style="text-align: right;">
<el-button type="primary" v-on:click="createWikiSave(1)" icon="el-icon-document-checked">保存并查看</el-button>
<el-button type="success" v-on:click="createWikiSave(0)" icon="el-icon-check">仅保存</el-button>
<el-button v-on:click="createWikiCancel" icon="el-icon-back">取消</el-button>
</el-col>
</el-row>
<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
<mavon-editor v-show="wikiPageEdit.editorType===2" ref="mavonEditor" v-model="markdownContent" :toolbars="toolbars"
:externalLink="false"
@save="createWikiSave(0)" @imgAdd="addMarkdownImage"
placeholder="请录入文档内容" class="page-content-editor wang-editor-body"/>
<div v-show="wikiPageEdit.editorType===1" id="newPageContentDiv" class="page-content-editor" style="height: calc(100vh - 250px);"></div>
</el-row>
<div style="box-sizing: border-box;background: #f5f5f5;overflow: hidden;">
<div style="padding: 8px;font-size: 14px;background: #fff;">
<el-row>
<el-col :span="16">
<template v-if="pageId">
<span>编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
<template v-else>
<span style="margin-right: 20px;">父级：{{parentWikiPage.name || '/'}}</span>
<el-tooltip class="item" content="在根目录创建文档" v-if="parentId">
<el-button type="text" @click="changeToRootPath" size="mini" style="padding: 0 10px;">根目录</el-button>
</el-tooltip>
<span style="margin-left: 50px;">编辑方式：</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
<el-option label="Markdown" :value="2"></el-option>
<el-option label="HTML" :value="1"></el-option>
</el-select>
</template>
</el-col>
<el-col :span="8" style="text-align: right;">
<el-button type="primary" v-on:click="createWikiSave(1)" size="mini" icon="el-icon-document-checked">保存并查看</el-button>
<el-button type="success" v-on:click="createWikiSave(0)" size="mini" icon="el-icon-check">仅保存</el-button>
<el-button v-on:click="createWikiCancel" size="mini" icon="el-icon-back">取消</el-button>
</el-col>
</el-row>
</div>
<div v-show="wikiPageEdit.editorType===2" style="padding: 0 10px 10px 10px;background: #fff;">
<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
<mavon-editor ref="mavonEditor" v-model="markdownContent" :toolbars="toolbars"
:externalLink="false"
style="height: calc(100vh - 165px);"
@save="createWikiSave(0)" @imgAdd="addMarkdownImage"
placeholder="请录入文档内容" class="page-content-editor wang-editor-body"/>
</div>
<div v-show="wikiPageEdit.editorType===1">
<WangEditor ref="wangEditor"></WangEditor>
</div>
<!-- <div v-show="wikiPageEdit.editorType===1" id="newPageContentDiv" class="page-content-editor" style="height: calc(100vh - 250px);"></div>-->
</div>
</div>
</template>
<script>
import WangEditor from 'wangeditor'
import pageApi from '../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import "../../common/lib/wangEditor.css";
import axios from 'axios'
import WangEditor from './editor/WangEditor.vue'
export default {
props: ['spaceId'],
@@ -102,7 +109,7 @@
};
},
components: {
'mavon-editor': mavonEditor
WangEditor, mavonEditor,
},
destroyed: function () {
this.unlockPage();
@@ -156,8 +163,10 @@
content = this.markdownContent;
preview = this.markdownContent;
} else {
content = this.editor.txt.html();
preview = this.editor.txt.text();
let pageData = this.$refs.wangEditor.getPageData();
content = pageData.html;
preview = pageData.text;
this.wikiPageEdit.pageTitle = pageData.title;
}
// 修改内容时强制不能修改父路径，只能在目录上拖动修改
let parentId = (this.pageId > 0) ? '' : this.parentId;
@@ -193,7 +202,11 @@
if (this.wikiPageEdit.editorType === 2) {
this.markdownContent = this.pageContent.content || "";
} else {
this.editor.txt.html(this.pageContent.content || "");
// this.editor.txt.html(this.pageContent.content || "");
setTimeout(() => {
this.$refs.wangEditor.setTitle(this.wikiPage.name || "");
this.$refs.wangEditor.setHtml(this.pageContent.content || "");
}, 0);
}
});
},
@@ -254,14 +267,14 @@
});
},
initEditor() {
this.editor = new WangEditor('#newPageContentDiv');
this.editor.customConfig.uploadImgServer = process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload';
this.editor.customConfig.zIndex = 100;
this.editor.customConfig.uploadFileName = 'files';
this.editor.customConfig.uploadImgMaxLength = 1;
this.editor.customConfig.pasteFilterStyle = false;
this.editor.customConfig.withCredentials = true;
this.editor.create();
// this.editor = new WangEditor('#newPageContentDiv');
// this.editor.customConfig.uploadImgServer = process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload';
// this.editor.customConfig.zIndex = 100;
// this.editor.customConfig.uploadFileName = 'files';
// this.editor.customConfig.uploadImgMaxLength = 1;
// this.editor.customConfig.pasteFilterStyle = false;
// this.editor.customConfig.withCredentials = true;
// this.editor.create();
},
}
}
@@ -288,7 +301,7 @@
padding: 10px 0;
}
.page-edit-vue .page-title-input{
padding: 10px 0;
padding-bottom: 10px;
}
</style>

8
zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
View File

@@ -30,10 +30,10 @@
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="showPageHistory" icon="el-icon-time">查看历史版本</el-dropdown-item>
<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth==1" icon="el-icon-s-check">权限设置</el-dropdown-item>
<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" icon="el-icon-share">查看开放文档</el-dropdown-item>
<el-dropdown-item command="showMobileView" v-if="spaceInfo.openDoc == 1" icon="el-icon-mobile-phone">手机端查看</el-dropdown-item>
<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -196,7 +196,7 @@ import htmlUtil from '../../common/lib/HtmlUtil.js'
import pageApi from '../../common/api/page'
import userApi from '../../common/api/user'
import Navigation from './components/Navigation.vue'
import {markdownIt, mavonEditor} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
@@ -463,7 +463,7 @@ var page = {
history.loading = 2;
history.content = json.data || '--';
if (this.wikiPage.editorType === 2) {
history.content = markdownIt.render(history.content);
history.content = mavonEditor.getMarkdownIt().render(history.content);
}
this.pageHistoryDetail = history.content;
this.pageShowDetail = history.content;
@@ -505,7 +505,7 @@ var page = {
canConfigAuth: result.canConfigAuth,
};
if (this.wikiPage.editorType === 2) {
this.pageContent.content = markdownIt.render(this.pageContent.content);
this.pageContent.content = mavonEditor.getMarkdownIt().render(this.pageContent.content);
}
this.pageShowDetail = this.pageContent.content;
// 修改标题

163
zyplayer-doc-ui/wiki-ui/src/views/page/editor/WangEditor.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<div class="wang-editor-box">
<div class="editor-toolbar-box fix-top">
<Toolbar class="editor-toolbar"
:editorId="editorId"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
</div>
<div class="wang-editor-content">
<div class="editor-container">
<div class="title-container">
<input v-model="pageTitle" placeholder="请输入标题">
</div>
<Editor ref="editorTextArea" class="editor-text-area"
:editorId="editorId"
:defaultConfig="editorConfig"
:mode="mode"
/>
</div>
</div>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
export default {
props: ['spaceId'],
data() {
return {
editorId: `w-e-${Math.random().toString().slice(-5)}`,
toolbarConfig: {
excludeKeys: [
"fullScreen", "undo" , "redo"
],
},
editorConfig: {
placeholder: '请输入文档内容',
scroll: false,
MENU_CONF: {
uploadImage: {
server: process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
fieldName: 'files',
// 最大支持50M图片上传
maxFileSize: 50 * 1024 * 1024,
withCredentials: true,
}
}
},
mode: 'default', // or 'simple'
defaultHtml: '',
editor: {},
pageTitle: '',
};
},
components: {
Editor, Toolbar,
},
beforeDestroy() {
let editor = getEditor(this.editorId);
if (editor == null) return;
editor.destroy();
removeEditor(this.editorId);
},
mounted: function () {
setTimeout(() => {
this.initEditor();
}, 0);
},
methods: {
initEditor() {
// 点击空白处 focus 编辑器
let editorTextArea = this.$refs.editorTextArea.$el;
editorTextArea.addEventListener('click', e => {
if (e.target.className === 'editor-text-area') {
let editor = getEditor(this.editorId);
editor.blur();
editor.focus(true); // focus 到末尾
}
});
},
getPageData() {
let editor = getEditor(this.editorId);
return {
title: this.pageTitle,
html: editor.getHtml(),
text: editor.getText(),
};
},
setTitle(title) {
this.pageTitle = title;
},
setHtml(content) {
let editor = getEditor(this.editorId);
editor.select([]);
editor.deleteFragment();
editor.dangerouslyInsertHtml(content);
},
}
}
</script>
<style>
.wang-editor-box {
background-color: #f5f5f5;
}
.wang-editor-box .top-container {
border-bottom: 1px solid #e8e8e8;
padding-left: 30px;
}
.wang-editor-box .editor-toolbar {
width: 1200px;
background-color: #FCFCFC;
margin: 0 auto;
}
.wang-editor-box .editor-toolbar-box {
border-bottom: 1px solid #e8e8e8;
background-color: #FCFCFC;
}
.wang-editor-box .editor-toolbar-box.fix-top {
/*position: fixed;*/
/*top: 40px;*/
/*z-index: 1;*/
/*text-align: center;*/
/*background: #fff;*/
/*width: 100%;*/
}
.wang-editor-box .wang-editor-content {
padding: 20px 0;
overflow: auto;
height: calc(100vh - 170px);
}
.wang-editor-box .editor-container {
width: 850px;
margin: 0 auto;
background-color: #fff;
padding: 20px 50px 50px 50px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}
.wang-editor-box .title-container {
padding: 20px 0;
border-bottom: 1px solid #e8e8e8;
}
.wang-editor-box .title-container input {
font-size: 30px;
border: 0;
outline: none;
width: 100%;
line-height: 1;
}
.wang-editor-box .editor-text-area {
margin-top: 20px;
min-height: 600px;
}
</style>

4
zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue
View File

@@ -34,7 +34,7 @@
<script>
import pageApi from '../../../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { ImagePreview } from 'vant';
import 'mavon-editor/dist/markdown/github-markdown.min.css'
@@ -75,7 +75,7 @@
let pageContent = json.data.pageContent || {};
this.pageFileList = json.data.fileList || [];
if (this.wikiPage.editorType === 2) {
pageContent.content = markdownIt.render(pageContent.content);
pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
}
this.pageShowDetail = pageContent.content;
document.title = wikiPage.name || 'WIKI-内容展示';

4
zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
View File

@@ -42,7 +42,7 @@
<script>
import pageApi from '../../../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import {mavonEditor} from 'mavon-editor'
import unitUtil from '../../../../common/lib/UnitUtil.js'
import htmlUtil from '../../../../common/lib/HtmlUtil.js'
import Navigation from '../../components/Navigation.vue'
@@ -84,7 +84,7 @@
let pageContent = json.data.pageContent || {};
this.pageFileList = json.data.fileList || [];
if (this.wikiPage.editorType === 2) {
pageContent.content = markdownIt.render(pageContent.content);
pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
}
this.pageShowDetail = pageContent.content;
let wikiTile = wikiPage.name || 'WIKI-内容展示';