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

wiki增加导航和拖动改变左侧菜单宽度功能，编辑器默认改为markdown模式

Browse Source
This commit is contained in:
暮光：城中城
2021-12-02 23:18:31 +08:00
parent af645464e4
commit 22a73b445a
28 changed files with 502 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div class="global-layout-vue">
<el-container>
<el-aside v-show="leftCollapse">
<el-aside v-show="leftCollapse" :style="{ width: rightAsideWidth + 'px' }">
<div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
<div style="margin-bottom: 10px;">
<el-select :value="choiceSpace" @change="spaceChangeEvents" filterable placeholder="选择空间" style="width: 100%;">
@@ -31,10 +31,11 @@
</div>
</div>
</el-aside>
<RightResize v-model="rightAsideWidth" v-show="leftCollapse"></RightResize>
<el-container>
<el-header>
<i class="el-icon-upload2" v-if="leftCollapse" @click="turnLeftCollapse"></i>
<i class="el-icon-download" v-else @click="turnLeftCollapse"></i>
<i class="el-icon-fold el-icon-s-fold" v-if="leftCollapse" @click="turnLeftCollapse"></i>
<i class="el-icon-fold el-icon-s-unfold" v-else @click="turnLeftCollapse"></i>
<span class="header-right-user-name">{{userSelfInfo.userName}}</span>
<el-popover placement="bottom" width="600" trigger="click" v-model="userMessagePopVisible">
<el-badge :is-dot="haveNotReadUserMessage" slot="reference" style="line-height: 20px;margin: 0 15px;">
@@ -98,6 +99,7 @@
import userApi from '../../common/api/user'
import pageApi from '../../common/api/page'
import CreateSpace from '../space/CreateSpace'
import RightResize from './RightResize.vue'
import aboutDialog from "../../views/common/AboutDialog";
export default {
@@ -134,9 +136,11 @@
pageNum: 1,
pageSize: 20,
},
rightAsideWidth: 300,
}
},
components: {
RightResize,
"create-space": CreateSpace,
'about-dialog': aboutDialog
},
@@ -376,8 +380,8 @@
}
.header-right-user-name{color: #fff;padding-right: 5px;}
.el-header {color: #333; line-height: 40px; text-align: right;height: 40px !important;}
.el-icon-download,.el-icon-upload2{transform: rotate(-90deg);float: left;font-size: 25px;color: #aaa;margin-top: 8px;cursor: pointer;}
.el-icon-download:hover,.el-icon-upload2:hover{color: #eee;}
.el-icon-fold{float: left;font-size: 25px;color: #aaa;margin-top: 8px;cursor: pointer;}
.el-icon-fold:hover{color: #eee;}
.head-icon{margin-right: 15px; font-size: 16px;cursor: pointer;color: #fff;}
.header-user-message .page-info-box{text-align: right;margin-top: 10px;}
.upgrade-info{max-height: 150px;overflow-y: auto;word-break: break-all; white-space: pre-wrap; line-height: 26px;}

76
zyplayer-doc-ui/wiki-ui/src/components/layouts/RightResize.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div ref="rightResize" class="right-resize">
<i ref="rightResizeBar">...</i>
</div>
</template>
<script>
export default {
data() {
return {
rightAsideWidth: 300,
}
},
mounted() {
this.dragChangeRightAsideWidth();
},
methods: {
dragChangeRightAsideWidth() {
// 保留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 > 300)) {
startX = endX;
this.rightAsideWidth -= moveLen;
if (this.rightAsideWidth < 300) {
this.rightAsideWidth = 300;
}
this.$emit('input', this.rightAsideWidth);
}
};
document.onmouseup = () => {
// 颜色恢复
resize.style.background = "#fafafa";
resizeBar.style.background = "#ccc";
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
}
};
</script>
<style scoped>
.right-resize {
width: 5px;
height: 100%;
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>

6
zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareLayout.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style="height: 100%;">
<el-container>
<el-aside width="300px" style="background-color: #fafafa;" v-show="leftCollapse">
<el-aside width="300px" style="background-color: #fafafa;" :style="{ width: rightAsideWidth + 'px' }" v-show="leftCollapse">
<div class="logo">{{nowSpaceShow.name}}</div>
<div style="padding: 10px;box-sizing: border-box;background: #fafafa;">
<el-input v-model="searchKeywords" @keyup.enter.native="searchByKeywords" placeholder="搜索文档" style="margin: 10px 0;">
@@ -17,6 +17,7 @@
<div class="build-info">本文档使用<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>构建</div>
</div>
</el-aside>
<RightResize v-model="rightAsideWidth" v-show="leftCollapse"></RightResize>
<el-container>
<el-main class="doc-body-box">
<router-view></router-view>
@@ -28,6 +29,7 @@
<script>
import pageApi from '../../common/api/page'
import RightResize from './RightResize.vue'
export default {
data() {
@@ -46,8 +48,10 @@
// 页面展示相关
wikiPageList:[],
wikiPageExpandedKeys: [],
rightAsideWidth: 300,
}
},
components: {RightResize},
mounted: function () {
this.spaceUuid = this.$route.query.space || '';
this.getSpaceInfo();