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

优化文档展示页面，代码拆分

Browse Source
This commit is contained in:
暮光：城中城
2023-07-03 20:19:27 +08:00
parent 4da877e911
commit 62e235f206
7 changed files with 2307 additions and 15976 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@@ -15,31 +15,32 @@
"axios": "^0.19.2",
"core-js": "^3.26.1",
"echarts": "^5.4.0",
"element-plus": "^2.2.28",
"element-plus": "^2.3.7",
"highlight.js": "^11.7.0",
"js-cookie": "^2.2.1",
"mavon-editor": "^3.0.0-beta",
"pinia": "^2.0.26",
"pinia": "^2.1.4",
"pouchdb": "^7.3.1",
"qrcode": "^1.5.1",
"sass": "^1.56.1",
"vant": "^4.0.0-rc.8",
"vue": "^3.2.45",
"qs": "^6.11.2",
"sass": "^1.63.6",
"vant": "^4.6.0",
"vue": "^3.3.4",
"vue-axios": "^2.1.5",
"vue-router": "^4.1.6",
"vue-router": "^4.2.2",
"vue-star-plus": "^3.0.3",
"xss": "^1.0.14"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.10.2",
"@vue/cli-plugin-babel": "^4.5.19",
"@vue/compiler-sfc": "^3.2.45",
"less": "^3.13.1",
"less-loader": "^5.0.0",
"node-sass": "^7.0.3",
"sass-loader": "^13.2.0",
"vite": "^2.9.15",
"vite-plugin-style-import": "^1.4.1",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/compiler-sfc": "^3.3.4",
"less": "^4.1.3",
"less-loader": "^11.1.3",
"node-sass": "^9.0.0",
"sass-loader": "^13.3.2",
"vite": "^4.3.9",
"vite-plugin-style-import": "^2.0.0",
"vue-template-compiler": "^2.7.14"
}
}

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

@@ -180,10 +180,12 @@ import RightResize from './RightResize.vue'
import AboutDialog from '../../views/common/AboutDialog'
import {useStoreDisplay} from '@/store/wikiDisplay.js'
import {useStoreUserData} from "@/store/userData";
import {useStorePageData} from "@/store/pageData";
let route = useRoute();
let router = useRouter();
const storeDisplay = useStoreDisplay();
let storePage = useStorePageData();
let storeDisplay = useStoreDisplay();
let leftCollapse = ref(true);
let rightContentLoading = ref(false);
@@ -352,30 +354,26 @@ const handleCurrentChange = (val) => {
loadUserMessageList()
}
const filterPageNode = (value, data) => {
if (!value || !data.name) return true
if (!value || !data.name) return true;
// issues:I2CG72 忽略大小写
let name = data.name.toLowerCase()
return name.indexOf(value.toLowerCase()) !== -1
let name = data.name.toLowerCase();
return name.indexOf(value.toLowerCase()) !== -1;
}
let createSpaceRef = ref();
const spaceChangeEvents = (data) => {
if (data == 0) {
if (data === 0) {
// 新建空间
createSpaceRef.value.show()
} else if (data == -1) {
createSpaceRef.value.show();
} else if (data === -1) {
// 管理空间
router.push({path: '/space/manage'})
router.push({path: '/space/manage'});
} else {
choiceSpace.value = data
for (let i = 0; i < spaceList.value.length; i++) {
if (spaceList.value[i].id == data) {
nowSpaceShow.value = spaceList.value[i]
break
}
}
nowPageId.value = ''
doGetPageList(null)
router.push({path: '/home', query: {spaceId: data}})
nowPageId.value = '';
choiceSpace.value = data;
nowSpaceShow.value = spaceList.value.find((item) => item.id === data);
storePage.spaceInfo = nowSpaceShow.value;
doGetPageList(null);
router.push({path: '/home', query: {spaceId: data}});
}
}
const loadSpaceList = (spaceId) => {

2
zyplayer-doc-ui/wiki-ui/src/store/pageData.js
View File

@@ -3,7 +3,9 @@ import {defineStore} from 'pinia'
export const useStorePageData = defineStore('pageData', {
state: () => {
return {
spaceInfo: {},
pageInfo: {},
pageAuth: {},
}
},
});

3
zyplayer-doc-ui/wiki-ui/src/store/wikiDisplay.js
View File

@@ -5,6 +5,9 @@ export const useStoreDisplay = defineStore('wikiDisplay', {
return {
// 左边目录栏宽度
viewMenuWidth: 300,
// 是否显示右边评论栏
commentShow: false,
commentActiveTab: 'comment',
}
},
})

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

@@ -6,44 +6,7 @@
<el-col :span="navigationList.length > 0 ? 18 : 24">
<div style="max-width: 1000px; margin: 0 auto; padding-left: 10px">
<div class="wiki-title" ref="wikiTitleRef">{{ wikiPage.name }}</div>
<div class="wiki-author">
<el-row>
<el-col :span="12">
<span v-if="wikiPage.updateUserName">{{ wikiPage.updateUserName }}　于　{{wikiPage.updateTime}}　修改</span>
<span v-else class="create-user-time">{{ wikiPage.createUserName }}　于　{{wikiPage.createTime}}　创建</span>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-link type="primary" :icon="ElIconChatLineRound" :underline="false" @click="showCommentWiki" style="margin-right: 15px"> 评论</el-link>
<el-upload v-if="wikiPageAuth.canUploadFile === 1"
:on-success="uploadFileSuccess"
:on-error="uploadFileError"
:action="uploadFileUrl"
:data="uploadFormData"
:with-credentials="true" class="upload-page-file" name="files"
show-file-list multiple :limit="999"
style="display: inline; margin-right: 15px;vertical-align: middle;">
<el-link type="primary" :underline="false" :icon="ElIconUpload"> 上传附件</el-link>
</el-upload>
<el-link v-if="wikiPageAuth.canEdit === 1" type="primary" :underline="false" :icon="ElIconEdit" @click="editWiki" style="margin-right: 15px;"> 编辑</el-link>
<el-dropdown style="margin-right: 15px;vertical-align: middle;" trigger="click" @command="handleMoreCommand">
<el-link type="primary" :underline="false">
更多
<el-icon class="el-icon--right"><el-icon-arrow-down/></el-icon>
</el-link>
<template v-slot:dropdown>
<el-dropdown-menu>
<el-dropdown-item command="showPageHistory" :icon="ElIconTime">查看历史版本</el-dropdown-item>
<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth == 1" :icon="ElIconSCheck">权限设置</el-dropdown-item>
<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" :icon="ElIconShare">查看开放文档</el-dropdown-item>
<el-dropdown-item command="showMobileView" v-if="spaceInfo.openDoc == 1" :icon="ElIconMobilePhone">手机端查看</el-dropdown-item>
<el-dropdown-item command="exportWord" :icon="ElIconDownload">导出为Word文档</el-dropdown-item>
<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete == 1" :icon="ElIconDelete">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</div>
<PageAction/>
<div class="wiki-files">
<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px">
<el-table-column label="文件名" show-overflow-tooltip>
@@ -212,6 +175,7 @@ import htmlUtil from '../../assets/lib/HtmlUtil.js'
import pageApi from '../../assets/api/page'
import userApi from '../../assets/api/user'
import Navigation from './components/Navigation.vue'
import PageAction from './show/PageAction.vue'
import Comment from './show/Comment.vue'
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
@@ -553,11 +517,11 @@ const loadPageDetail = (pageId) => {
canConfigAuth: result.canConfigAuth,
}
if (wikiPage.value.editorType === 2) {
pageContent.value.content = mavonEditor.getMarkdownIt().render(pageContent.value.content)
pageContent.value.content = mavonEditor.getMarkdownIt().render(pageContent.value.content);
}
pageShowDetail.value = pageContent.value.content
pageShowDetail.value = pageContent.value.content;
// 修改标题
document.title = wikiPageRes.name || 'WIKI-内容展示'
document.title = wikiPageRes.name || 'WIKI-内容展示';
// 修改最后点击的项，保证刷新后点击编辑能展示编辑的项
// if (!lastClickNode.value.id) {
// lastClickNode.value = {id: wikiPage.id, nodePath: wikiPage.name};
@@ -567,10 +531,11 @@ const loadPageDetail = (pageId) => {
// 调用父方法展开目录树
emit('changeExpandedKeys', pageId);
setTimeout(() => {
previewPageImage()
createNavigationHeading()
previewPageImage();
createNavigationHeading();
}, 500);
storePage.pageInfo = wikiPageRes;
storePage.pageAuth = wikiPageAuth.value;
})
getPageHistory(pageId, 1)
}

169
zyplayer-doc-ui/wiki-ui/src/views/page/show/PageAction.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<el-row class="page-action-box">
<el-col :span="12">
<span v-if="storePage.pageInfo.updateUserName">{{ storePage.pageInfo.updateUserName }}　于　{{storePage.pageInfo.updateTime}}　修改</span>
<span v-else class="create-user-time">{{ storePage.pageInfo.createUserName }}　于　{{storePage.pageInfo.createTime}}　创建</span>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-link v-if="storePage.pageAuth.canEdit === 1" type="primary" :underline="false" :icon="ElIconEdit" @click="editWiki" style="margin-right: 15px;"> 编辑</el-link>
<el-link type="primary" :icon="ElIconChatLineRound" :underline="false" @click="showCommentWiki" style="margin-right: 15px"> 评论</el-link>
<el-upload v-if="storePage.pageAuth.canUploadFile === 1"
:on-success="uploadFileSuccess"
:on-error="uploadFileError"
:action="uploadFileUrl"
:data="uploadFormData"
:with-credentials="true" class="upload-page-file" name="files"
show-file-list multiple :limit="999"
style="display: inline; margin-right: 15px;vertical-align: middle;">
<el-link type="primary" :underline="false" :icon="ElIconUpload"> 上传附件</el-link>
</el-upload>
<el-dropdown style="margin-right: 15px;vertical-align: middle;" trigger="click">
<el-link type="primary" :underline="false">
更多 <el-icon class="el-icon--right"><el-icon-arrow-down/></el-icon>
</el-link>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="showPageHistory" :icon="ElIconTime">查看历史版本</el-dropdown-item>
<el-dropdown-item @click="editWikiAuth" v-if="storePage.pageAuth.canConfigAuth === 1" :icon="ElIconSCheck">权限设置</el-dropdown-item>
<el-dropdown-item @click="showOpenPage" v-if="storePage.spaceInfo.openDoc === 1" :icon="ElIconShare">查看开放文档</el-dropdown-item>
<el-dropdown-item @click="showMobileView" v-if="storePage.spaceInfo.openDoc === 1" :icon="ElIconMobilePhone">手机端查看</el-dropdown-item>
<el-dropdown-item @click="exportWord" :icon="ElIconDownload">导出为Word文档</el-dropdown-item>
<el-dropdown-item @click="deleteWikiPage" v-if="storePage.pageAuth.canDelete === 1" :icon="ElIconDelete">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</template>
<script setup>
import {
ArrowDown as ElIconArrowDown,
View as ElIconView,
Close as ElIconClose,
Delete as ElIconDelete,
Loading as ElIconLoading,
CircleCheck as ElIconCircleCheck,
CircleClose as ElIconCircleClose,
ChatLineRound as ElIconChatLineRound,
Upload as ElIconUpload,
Edit as ElIconEdit,
Timer as ElIconTime,
Stamp as ElIconSCheck,
Share as ElIconShare,
Iphone as ElIconMobilePhone,
Download as ElIconDownload,
} from '@element-plus/icons-vue'
import {toRefs, ref, reactive, onMounted, watch, defineProps, defineEmits, defineExpose, computed} from 'vue';
import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import pageApi from '@/assets/api/page'
import {useStorePageData} from "@/store/pageData";
let storePage = useStorePageData();
const editWiki = () => {
// 锁定页面并进入编辑页面
let param = {pageId: storePage.pageInfo.id};
pageApi.pageLock(param).then(() => {
router.push({path: '/page/edit', query: {pageId: storePage.pageInfo.id}});
});
}
const showCommentWiki = () => {
storePage.commentShow = true;
storePage.commentActiveTab = 'comment';
// computeNavigationWidth();
}
const editWikiAuth = () => {
// pageAuthNewUser.value = [];
// pageAuthUserList.value = [];
// let param = {pageId: wikiPage.value.id};
// pageApi.getPageUserAuthList(param).then((json) => {
// pageAuthUserList.value = json.data || [];
// pageAuthDialogVisible.value = true;
// });
}
const showPageHistory = () => {
// actionTabVisible.value = true;
// actionTabActiveName.value = 'history';
// clearHistory();
// computeNavigationWidth();
}
const showOpenPage = () => {
// if (props.spaceInfo.openDoc !== 1) {
// ElMessage.warning('该空间未开放，无法查看开放文档地址')
// } else {
// let routeUrl = router.resolve({
// path: '/page/share/view',
// query: {pageId: wikiPage.value.id, space: props.spaceInfo.uuid}
// })
// window.open(routeUrl.href, '_blank')
// }
}
const deleteWikiPage = () => {
// ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// }).then(() => {
// let param = {pageId: wikiPage.value.id};
// pageApi.pageDelete(param).then(() => {
// // 重新加载左侧列表，跳转到展示页面
// emit('loadPageList');
// router.push({
// path: '/home',
// query: {spaceId: wikiPage.value.spaceId}
// });
// });
// }).catch(() => {});
}
let downloadFormRef = ref();
const exportWord = () => {
// downloadFormParam.value.param = {
// pageId: wikiPage.value.id,
// }
// setTimeout(() => downloadFormRef.value.submit(), 0)
}
let qrCodeDivRef = ref();
const showMobileView = () => {
// if (props.spaceInfo.openDoc !== 1) {
// ElMessage.warning('该空间未开放，无法查看开放文档地址')
// } else {
// let routeUrl = router.resolve({
// path: '/page/share/mobile/view',
// query: {pageId: wikiPage.value.id, space: props.spaceInfo.uuid}
// })
// mobileScanDialogVisible.value = true
// let hostPath = window.location.href.split('#')[0]
// setTimeout(() => {
// qrCodeUrl.value = hostPath + routeUrl.href
// QRCode.toCanvas(qrCodeDivRef.value, qrCodeUrl.value, {
// scale: 5, height: 250, wight: 250,
// }, (error) => {
// if (error) console.error(error)
// }
// )
// }, 0)
// }
}
// 上传相关
let uploadFormData = ref({pageId: 0});
let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
const uploadFileError = (err) => {
ElMessage.error('上传失败，' + err);
}
const uploadFileSuccess = (response) => {
// if (response.errCode === 200) {
// pageFileList.value.push(response.data);
// ElMessage.success('上传成功！');
// } else {
// ElMessage('上传失败：' + (response.errMsg || '未知错误'));
// }
}
</script>
<style scoped lang="scss">
.page-action-box {
}
</style>