页面改造，逻辑简化
This commit is contained in:
sswiki
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<div class="global-layout-vue">
|
||||
<el-container>
|
||||
<el-aside v-show="storeDisplay.showMenu" :style="{ width: storeDisplay.rightAsideWidth + 'px' }">
|
||||
<LeftSideBar ref="leftSideBarRef"/>
|
||||
</el-aside>
|
||||
<RightResize v-show="storeDisplay.showMenu" v-model:value="storeDisplay.rightAsideWidth" @change="rightAsideWidthChange"></RightResize>
|
||||
<el-container>
|
||||
<el-header v-if="storeDisplay.showHeader">
|
||||
<RightHeader ref="rightHeaderRef"/>
|
||||
</el-header>
|
||||
<el-main style="padding: 0;">
|
||||
<router-view/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {useStoreDisplay} from '@/store/wikiDisplay.js'
|
||||
import LeftSideBar from './LeftSidebar.vue'
|
||||
import RightHeader from './RightHeader.vue'
|
||||
import RightResize from './RightResize.vue'
|
||||
let storeDisplay = useStoreDisplay();
|
||||
const rightAsideWidthChange = (width) =>{
|
||||
storeDisplay.rightAsideWidth = width
|
||||
storeDisplay.commentShow =width
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.global-layout-vue {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidTree {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app,
|
||||
.el-container,
|
||||
.el-menu {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.header-right-user-name {
|
||||
color: #000000;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
color: #333;
|
||||
height: 60px !important;
|
||||
border-bottom: 0.5px solid #eaeaea;
|
||||
}
|
||||
|
||||
.head-icon {
|
||||
margin-right: 15px;
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.search-option-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search-option-item .title {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search-option-item .content {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.search-autocomplete {
|
||||
width: 600px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.space-folder-box {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wiki-page-tree-box {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
|
||||
.page-tree-node {
|
||||
width: 100%;
|
||||
|
||||
.label {
|
||||
.el-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
|
||||
max-width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.rename-input {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.page-action-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
|
||||
.page-action-dropdown-btn {
|
||||
padding: 0 8px;
|
||||
height: 35px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-action-box.renaming {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .page-action-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -166,7 +166,6 @@ const openTemplateCreate = (exsit) => {
|
||||
|
||||
const createWikiByTemplate = () => {
|
||||
templateManageRef.value.showTemplateManage()
|
||||
|
||||
}
|
||||
|
||||
const filterShareStatus = (data) => {
|
||||
|
||||
@@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="left-action-box">
|
||||
<div class="collapse-box">
|
||||
<el-button @click="turnLeftCollapse" v-if="storeDisplay.showMenu" text :icon="ElIconFold" class="fold-btn"></el-button>
|
||||
<el-button @click="turnLeftCollapse" v-else text :icon="ElIconExpand" class="fold-btn"></el-button>
|
||||
</div>
|
||||
<div v-if="storeDisplay.currentPage === 'view'" class="title-time-box">
|
||||
<div class="title">
|
||||
<span class="text">{{storePage.pageInfo.name || ''}}</span>
|
||||
</div>
|
||||
<div class="time">最近修改：{{storePage.pageInfo.updateTime || ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<div class="header-action-box">
|
||||
<template v-if="storeDisplay.currentPage === 'view'">
|
||||
<el-tooltip v-if="storePage.pageAuth.canEdit === 1" content="编辑文档">
|
||||
<el-button class="hover-button" @click="editWiki" text><IconParkEdit size="18"/></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="文档沟通">
|
||||
<el-button class="hover-button" @click="showCommentWiki" text><IconParkCommunication size="18"/></el-button>
|
||||
</el-tooltip>
|
||||
<UserMessagePopover/>
|
||||
<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-more-dropdown">
|
||||
<span style="line-height: 60px;display:inline-block;margin: 0 8px;">
|
||||
<el-button :icon="ElIconMoreFilled" class="hover-button" text></el-button>
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="editWikiAuth" v-if="storePage.pageAuth.canConfigAuth === 1"><el-icon><ElIconSCheck/></el-icon> 权限设置</a-menu-item>
|
||||
<a-menu-item @click="showOpenPage" v-if="storeSpace.spaceInfo.openDoc === 1"><el-icon><ElIconShare/></el-icon> 查看开放文档</a-menu-item>
|
||||
<a-menu-item @click="showMobileView" v-if="storeSpace.spaceInfo.openDoc === 1"><el-icon><ElIconMobilePhone/></el-icon> 手机端查看</a-menu-item>
|
||||
<a-menu-item @click="exportWord"><el-icon><ElIconDownload/></el-icon>导出为Word</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item @click="deleteWikiPage" v-if="storePage.pageAuth.canDelete === 1" class="delete"><el-icon><ElIconDelete/></el-icon> 删除</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-user-dropdown">
|
||||
<span style="line-height: 60px;display:inline-block;">
|
||||
<el-button :icon="ElIconUserFilled" class="hover-button" text></el-button>
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="showAbout">关于</a-menu-item>
|
||||
<a-menu-item @click="showConsole">控制台</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item @click="userSignOut">退出登录</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<MobileQrScanDialog v-model:visible="mobileScanDialogVisible"/>
|
||||
<PageAuthDialog v-model:visible="pageAuthDialogVisible"/>
|
||||
<AboutDialog v-model:visible="aboutDialogVisible"/>
|
||||
<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
|
||||
<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Fold as ElIconFold,
|
||||
Expand as ElIconExpand,
|
||||
Delete as ElIconDelete,
|
||||
Stamp as ElIconSCheck,
|
||||
Share as ElIconShare,
|
||||
Iphone as ElIconMobilePhone,
|
||||
Download as ElIconDownload,
|
||||
MoreFilled as ElIconMoreFilled,
|
||||
Setting as ElIconSetting,
|
||||
UserFilled as ElIconUserFilled,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
Star as IconParkStar,
|
||||
Edit as IconParkEdit,
|
||||
Communication as IconParkCommunication,
|
||||
} from '@icon-park/vue-next'
|
||||
import {toRefs, ref, reactive, onMounted, watch, defineEmits, computed} from 'vue';
|
||||
import {useRouter, useRoute} from "vue-router";
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { useStoreDisplay } from '@/store/wikiDisplay.js'
|
||||
import { useStorePageData } from '@/store/pageData.js'
|
||||
import { useStoreUserData } from '@/store/userData.js'
|
||||
import pageApi from "@/assets/api/page";
|
||||
import {useStoreSpaceData} from "@/store/spaceData";
|
||||
import userApi from "@/assets/api/user";
|
||||
import PageAuthDialog from '@/views/page/show/PageAuthDialog.vue'
|
||||
import MobileQrScanDialog from '@/views/page/show/MobileQrScanDialog.vue'
|
||||
import AboutDialog from "@/views/common/AboutDialog.vue"
|
||||
import UserMessagePopover from "./UserMessagePopover.vue"
|
||||
import {fixRequestUrl} from "@/assets/api/hostUtils";
|
||||
|
||||
let router = useRouter();
|
||||
let storePage = useStorePageData();
|
||||
let storeDisplay = useStoreDisplay();
|
||||
let storeUser = useStoreUserData();
|
||||
let storeSpace = useStoreSpaceData();
|
||||
const emit = defineEmits(['collapse']);
|
||||
|
||||
let turnLeftCollapse = () => {
|
||||
storeDisplay.showMenu = !storeDisplay.showMenu;
|
||||
setTimeout(() => {
|
||||
if (storeDisplay.showMenu) {
|
||||
storeDisplay.rightAsideWidth = 301;
|
||||
} else {
|
||||
storeDisplay.rightAsideWidth = 1;
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 清除控制台，和设置逻辑放远一点不容易被察觉
|
||||
watch(() => storeUser.ts, () => {
|
||||
console.clear();
|
||||
});
|
||||
|
||||
watch(() => storePage.favoritePageChange, (newVal) => {
|
||||
if (storePage.needVersion) {
|
||||
ElMessage.warning("不支持在指定版本后收藏页面");
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
let favoritePage = (favorite) => {
|
||||
storePage.favoritePageChange = {
|
||||
id: storePage.pageInfo.id,
|
||||
favorite: favorite,
|
||||
};
|
||||
};
|
||||
const editWiki = () => {
|
||||
// 锁定页面并进入编辑页面
|
||||
storePage.pageIsUnlock = false;
|
||||
let param = {pageId: storePage.pageInfo.id};
|
||||
pageApi.pageLock(param).then(() => {
|
||||
router.push({path: '/page/edit', query: {pageId: storePage.pageInfo.id}});
|
||||
});
|
||||
}
|
||||
const showCommentWiki = () => {
|
||||
storeDisplay.commentShow = !storeDisplay.commentShow;
|
||||
}
|
||||
let pageAuthDialogVisible = ref(false);
|
||||
const editWikiAuth = () => {
|
||||
pageAuthDialogVisible.value = true;
|
||||
}
|
||||
const showOpenPage = () => {
|
||||
if (storeSpace.spaceInfo.openDoc !== 1) {
|
||||
ElMessage.warning('该空间未开放，无法查看开放文档地址');
|
||||
} else {
|
||||
let routeUrl = router.resolve({
|
||||
path: '/page/share/view',
|
||||
query: {pageId: storePage.pageInfo.id, space: storeSpace.spaceInfo.uuid}
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
}
|
||||
}
|
||||
const deleteWikiPage = () => {
|
||||
ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
pageApi.pageDelete({pageId: storePage.pageInfo.id}).then(() => {
|
||||
pageApi.pageList({spaceId: storeSpace.chooseSpaceId}).then((json) => {
|
||||
storePage.wikiPageList = json.data || []
|
||||
}).then(()=>{
|
||||
router.push({path: '/home', query: {spaceId: storePage.pageInfo.spaceId}});
|
||||
})
|
||||
});
|
||||
}).catch((e) => {
|
||||
console.log(e)
|
||||
});
|
||||
}
|
||||
// 下载为Word
|
||||
let downloadFormRef = ref();
|
||||
let downloadFormParam = ref({url: fixRequestUrl('zyplayer-doc-wiki/page/download'), param: {}});
|
||||
const exportWord = () => {
|
||||
let pageViewContent = document.getElementById('pageContentBox');
|
||||
let innerHtml = pageViewContent.innerHTML || '';
|
||||
downloadFormParam.value.param = {
|
||||
pageId: storePage.pageInfo.id,
|
||||
content: innerHtml,
|
||||
};
|
||||
setTimeout(() => downloadFormRef.value.submit(), 0);
|
||||
}
|
||||
// 手机扫码
|
||||
let mobileScanDialogVisible = ref(false);
|
||||
const showMobileView = () => {
|
||||
if (storeSpace.spaceInfo.openDoc !== 1) {
|
||||
ElMessage.warning('该空间未开放，无法查看开放文档地址');
|
||||
} else {
|
||||
mobileScanDialogVisible.value = true;
|
||||
}
|
||||
}
|
||||
const userSignOut = () => {
|
||||
userApi.userLogout().then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
let aboutDialogVisible = ref(false);
|
||||
const showAbout = () => {
|
||||
aboutDialogVisible.value = true;
|
||||
}
|
||||
const showConsole = () => {
|
||||
window.open(import.meta.env.VITE_APP_BASE_API, '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-action-box {
|
||||
display: flex;
|
||||
|
||||
.collapse-box {
|
||||
line-height: 60px;
|
||||
|
||||
.fold-btn {
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
color: #888 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title-time-box {
|
||||
flex: 1;
|
||||
padding: 5px 0 6px 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 28px;
|
||||
|
||||
.text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.title-setting-box {
|
||||
.setting-title {
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
padding-left: 10px;
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.left-action-box {
|
||||
.title-time-box {
|
||||
.title {
|
||||
.i-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
svg {
|
||||
vertical-align: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-setting-box {
|
||||
.setting-title {
|
||||
.tips-icon {
|
||||
vertical-align: 0.1em;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-action-box {
|
||||
display: inline-block;
|
||||
line-height: 60px;
|
||||
|
||||
.disabled-btn-box {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.hover-button {
|
||||
border: 0;
|
||||
color: #888;
|
||||
|
||||
.i-icon svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-button:focus {
|
||||
color: #888;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hover-button:hover {
|
||||
color: #888;
|
||||
background: #eaeaea;
|
||||
}
|
||||
}
|
||||
|
||||
.header-action-user-dropdown {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.header-action-more-dropdown {
|
||||
width: 140px;
|
||||
|
||||
.delete {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.delete.disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--el-text-color-disabled);
|
||||
}
|
||||
|
||||
.cant-hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cant-hover:hover {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div ref="rightResizeRef" class="right-resize"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
|
||||
|
||||
let rightAsideWidth = 300;
|
||||
let emit = defineEmits(['update:value', 'change']);
|
||||
onMounted(() => {
|
||||
dragChangeRightAsideWidth();
|
||||
});
|
||||
let rightResizeRef = ref();
|
||||
const dragChangeRightAsideWidth = () => {
|
||||
// 保留this引用
|
||||
let resize = rightResizeRef.value
|
||||
resize.onmousedown = (e) => {
|
||||
let startX = e.clientX
|
||||
// 颜色改变提醒
|
||||
resize.left = resize.offsetLeft
|
||||
document.onmousemove = (e2) => {
|
||||
// 计算并应用位移量
|
||||
let endX = e2.clientX
|
||||
let moveLen = startX - endX
|
||||
if ((moveLen < 0 && rightAsideWidth < 600) || (moveLen > 0 && rightAsideWidth > 300)) {
|
||||
startX = endX
|
||||
rightAsideWidth -= moveLen
|
||||
if (rightAsideWidth < 300) {
|
||||
rightAsideWidth = 300
|
||||
}
|
||||
emit('update:value', rightAsideWidth)
|
||||
emit('change', rightAsideWidth)
|
||||
}
|
||||
}
|
||||
document.onmouseup = () => {
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right-resize {
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
cursor: w-resize;
|
||||
background: #fafafa;
|
||||
|
||||
&:hover {
|
||||
background: #2a85f6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -61,7 +61,7 @@ import {ElMessageBox, ElMessage} from 'element-plus'
|
||||
import {FolderClose, FolderOpen, Word as IconParkWord,} from '@icon-park/vue-next'
|
||||
import {Search as ElIconSearch,} from '@element-plus/icons-vue'
|
||||
import pageApi from '../../assets/api/page'
|
||||
import RightResize from './RightResize.vue'
|
||||
import RightResize from '../../views/page/aside/RightResize.vue'
|
||||
import IconDocument from "@/components/base/IconDocument.vue";
|
||||
|
||||
let leftCollapse = ref(true);
|
||||
|
||||
Reference in New Issue
Block a user