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

文档展示样式优化

Browse Source
This commit is contained in:
sswiki
2023-09-26 19:53:51 +08:00
parent 75577350ba
commit 252d8d23e1
10 changed files with 90 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
<el-header v-if="storeDisplay.showHeader"> <el-header v-if="storeDisplay.showHeader">
<RightHeader ref="rightHeaderRef"/> <RightHeader ref="rightHeaderRef"/>
</el-header> </el-header>
<el-main style="padding: 0; border-left: 1px solid #dcdfe6"> <el-main style="padding: 0;">
<router-view/> <router-view/>
</el-main> </el-main>
</el-container> </el-container>

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

@@ -57,9 +57,6 @@
<a-menu-item @click="rename(node,data)"> <a-menu-item @click="rename(node,data)">
<IconParkEditTwo class="el-icon"/> 重命名 <IconParkEditTwo class="el-icon"/> 重命名
</a-menu-item> </a-menu-item>
<a-menu-item @click="deleteWikiPage(data.shareStatus)">
<IconParkDelete class="el-icon"/> 删除
</a-menu-item>
<a-sub-menu title="移动文档"> <a-sub-menu title="移动文档">
<template #icon><IconParkIntersection/></template> <template #icon><IconParkIntersection/></template>
<a-menu-item @click="openMoveMenu(false)"> <a-menu-item @click="openMoveMenu(false)">
@@ -72,6 +69,9 @@
<a-menu-item v-if="data.editorType !== 0" @click="openTemplateCreate(data.shareStatus !== undefined)"> <a-menu-item v-if="data.editorType !== 0" @click="openTemplateCreate(data.shareStatus !== undefined)">
<IconParkPageTemplate/> 设为模板 <IconParkPageTemplate/> 设为模板
</a-menu-item> </a-menu-item>
<a-menu-item @click="deleteWikiPage(data.shareStatus)">
<IconParkDelete class="el-icon"/> 删除
</a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>

52
zyplayer-doc-ui/wiki-ui/src/components/layouts/RightHeader.vue
View File

@@ -6,7 +6,7 @@
<el-button @click="turnLeftCollapse" v-if="storeDisplay.showMenu" text :icon="ElIconFold" class="fold-btn"></el-button> <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> <el-button @click="turnLeftCollapse" v-else text :icon="ElIconExpand" class="fold-btn"></el-button>
</div> </div>
<div class="title-time-box"> <div v-if="storeDisplay.currentPage === 'view'" class="title-time-box">
<div class="title"> <div class="title">
<span class="text">{{storePage.pageInfo.name || ''}}</span> <span class="text">{{storePage.pageInfo.name || ''}}</span>
</div> </div>
@@ -16,36 +16,38 @@
</el-col> </el-col>
<el-col :span="12" style="text-align: right;"> <el-col :span="12" style="text-align: right;">
<div class="header-action-box"> <div class="header-action-box">
<el-tooltip v-if="storePage.pageAuth.canEdit === 1" content="编辑文档"> <template v-if="storeDisplay.currentPage === 'view'">
<el-button class="hover-button" @click="editWiki" text><IconParkEdit size="18"/></el-button> <el-tooltip v-if="storePage.pageAuth.canEdit === 1" content="编辑文档">
</el-tooltip> <el-button class="hover-button" @click="editWiki" text><IconParkEdit size="18"/></el-button>
<el-tooltip content="文档沟通"> </el-tooltip>
<el-button class="hover-button" @click="showCommentWiki" text><IconParkCommunication size="18"/></el-button> <el-tooltip content="文档沟通">
</el-tooltip> <el-button class="hover-button" @click="showCommentWiki" text><IconParkCommunication size="18"/></el-button>
<UserMessagePopover/> </el-tooltip>
<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-more-dropdown"> <UserMessagePopover/>
<span style="line-height: 60px;display:inline-block;margin: 0 12px;"> <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> <el-button :icon="ElIconMoreFilled" class="hover-button" text></el-button>
</span> </span>
<template #overlay> <template #overlay>
<a-menu> <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="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="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="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-item @click="exportWord"><el-icon><ElIconDownload/></el-icon>导出为Word</a-menu-item>
<a-menu-divider /> <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-item @click="deleteWikiPage" v-if="storePage.pageAuth.canDelete === 1" class="delete"><el-icon><ElIconDelete/></el-icon> 删除</a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
</template>
<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-user-dropdown"> <a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-user-dropdown">
<span style="line-height: 60px;display:inline-block;"> <span style="line-height: 60px;display:inline-block;">
<el-button :icon="ElIconUser" class="hover-button" text></el-button> <el-button :icon="ElIconUserFilled" class="hover-button" text></el-button>
</span> </span>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item @click="showConsole">控制台</a-menu-item>
<a-menu-item @click="showAbout">关于</a-menu-item> <a-menu-item @click="showAbout">关于</a-menu-item>
<a-menu-item @click="showConsole">控制台</a-menu-item>
<a-menu-divider /> <a-menu-divider />
<a-menu-item @click="userSignOut">退出登录</a-menu-item> <a-menu-item @click="userSignOut">退出登录</a-menu-item>
</a-menu> </a-menu>
@@ -73,7 +75,7 @@ import {
Download as ElIconDownload, Download as ElIconDownload,
MoreFilled as ElIconMoreFilled, MoreFilled as ElIconMoreFilled,
Setting as ElIconSetting, Setting as ElIconSetting,
User as ElIconUser, UserFilled as ElIconUserFilled,
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { import {
Star as IconParkStar, Star as IconParkStar,
@@ -94,11 +96,11 @@ import MobileQrScanDialog from '@/views/page/show/MobileQrScanDialog.vue'
import AboutDialog from "@/views/common/AboutDialog.vue" import AboutDialog from "@/views/common/AboutDialog.vue"
import UserMessagePopover from "./UserMessagePopover.vue" import UserMessagePopover from "./UserMessagePopover.vue"
let router = useRouter();
let storePage = useStorePageData(); let storePage = useStorePageData();
let storeDisplay = useStoreDisplay(); let storeDisplay = useStoreDisplay();
let storeUser = useStoreUserData(); let storeUser = useStoreUserData();
let storeSpace = useStoreSpaceData(); let storeSpace = useStoreSpaceData();
const emit = defineEmits(['collapse']); const emit = defineEmits(['collapse']);
let turnLeftCollapse = () => { let turnLeftCollapse = () => {

10
zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/AddMenu.vue
View File

@@ -3,13 +3,13 @@
<el-button :icon="ElIconPlus" text class="add-menu-dropdown-btn"></el-button> <el-button :icon="ElIconPlus" text class="add-menu-dropdown-btn"></el-button>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item key="1" @click="createWiki(1,props.funcId)"> <a-menu-item key="1" @click="createWiki(1, props.funcId)">
<IconDocument fill="#498ba7"/> 创建富文本 <IconParkWord fill="#498ba7"/> 创建富文本
</a-menu-item> </a-menu-item>
<a-menu-item key="2" @click="createWiki(2,props.funcId)"> <a-menu-item key="2" @click="createWiki(2, props.funcId)">
<IconParkWord fill="#558ff2"/> 创建Markdown <IconDocument fill="#558ff2"/> 创建Markdown
</a-menu-item> </a-menu-item>
<a-menu-item key="0" @click="createWiki(0,props.funcId)"> <a-menu-item key="0" @click="createWiki(0, props.funcId)">
<FolderOpen fill="#ffd149"/> 创建文件夹 <FolderOpen fill="#ffd149"/> 创建文件夹
</a-menu-item> </a-menu-item>
<a-menu-item key="4" @click="createWikiByTemplate(props.funcId)"> <a-menu-item key="4" @click="createWikiByTemplate(props.funcId)">

1
zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/LeftSidebarCli.vue
View File

@@ -3,7 +3,6 @@
<div style="margin-bottom: 5px"> <div style="margin-bottom: 5px">
<el-select :model-value="choiceSpace" filterable placeholder="选择空间" @change="spaceChangeEvents" style="width: 100%"> <el-select :model-value="choiceSpace" filterable placeholder="选择空间" @change="spaceChangeEvents" style="width: 100%">
<el-option-group label="" v-if="!props.readOnly"> <el-option-group label="" v-if="!props.readOnly">
<el-option :key="0" label="创建空间" :value="0"></el-option>
<el-option :key="-1" label="空间管理" :value="-1"></el-option> <el-option :key="-1" label="空间管理" :value="-1"></el-option>
</el-option-group> </el-option-group>
<el-option-group label=""></el-option-group> <el-option-group label=""></el-option-group>

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

@@ -10,7 +10,9 @@ export const useStoreDisplay = defineStore('wikiDisplay', {
commentActiveTab: 'comment', commentActiveTab: 'comment',
showMenu: true, showMenu: true,
rightAsideWidth: 300, rightAsideWidth: 300,
showHeader:true showHeader:true,
// 当前页面 view、space
currentPage: '',
} }
}, },
}) })

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

@@ -1,26 +1,26 @@
<template> <template>
<div style="height: 100%" class="page-edit-vue"> <div style="height: 100%" class="page-edit-vue">
<el-row class="fake-header"> <el-row class="fake-header">
<el-col :span="1"> <el-col style="flex: 0 0 45px;" class="collapse-box">
<el-button @click="turnLeftCollapse" v-if="storeDisplay.showMenu" text :icon="ElIconFold" class="fold-btn"></el-button> <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> <el-button @click="turnLeftCollapse" v-else text :icon="ElIconExpand" class="fold-btn"></el-button>
</el-col> </el-col>
<el-col :span="18" style="text-align: left"> <el-col style="flex: 1 1 auto;">
<el-input v-if="wikiPageEdit.editorType===2" v-model="wikiPageEdit.pageTitle" :maxlength="40" placeholder="请输入标题" class="page-title-input" ></el-input> <el-input v-if="wikiPageEdit.editorType===2" v-model="wikiPageEdit.pageTitle" :maxlength="40" placeholder="请输入标题" class="page-title-input" ></el-input>
</el-col> </el-col>
<el-col :span="5" class="title-info-view-right"> <el-col style="flex: 0 0 180px;text-align: right;">
<el-button type="primary" @click="createWikiSave(1)" size="large" :icon="ElIconDocumentChecked">保存</el-button> <el-button type="primary" @click="createWikiSave(1)" :icon="ElIconDocumentChecked">保存</el-button>
<el-button @click="createWikiCancel" size="large" :icon="ElIconBack" style="margin-right: 5px">取消</el-button> <el-button @click="createWikiCancel" :icon="ElIconBack" style="margin-right: 5px">取消</el-button>
</el-col> </el-col>
</el-row> </el-row>
<div style="box-sizing: border-box;background: #f5f5f5;overflow: hidden"> <div style="box-sizing: border-box;background: #f5f5f5;overflow: hidden">
<div v-show="wikiPageEdit.editorType === 2" style="padding: 0 10px 10px 10px; background: #fff"> <div v-show="wikiPageEdit.editorType === 2" style="padding: 10px; background: #fff">
<mavonEditor <mavonEditor
ref="mavonEditorRef" ref="mavonEditorRef"
v-model="markdownContent" v-model="markdownContent"
:toolbars="toolbars" :toolbars="toolbars"
:externalLink="false" :externalLink="false"
style="height: calc(100vh - 155px)" style="height: calc(100vh - 100px);z-index: 1;"
@save="createWikiSave(0)" @save="createWikiSave(0)"
@imgAdd="addMarkdownImage" @imgAdd="addMarkdownImage"
placeholder="请录入文档内容" placeholder="请录入文档内容"
@@ -312,33 +312,44 @@ const initEditor = () => {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss">
.fake-header{ .fake-header {
color: #333; color: #333;
height: 60px !important; height: 60px !important;
border-bottom: 0.5px solid #eaeaea; line-height: 60px !important;
.fold-btn { border-bottom: 0.5px solid #eaeaea;
padding: 28px 19px;
line-height: 28px; .fold-btn {
color: #3d3a3a !important; font-size: 18px;
font-size: 18px; padding: 4px 10px;
} margin-left: 6px;
.page-title-input { color: #888 !important;
margin-top: 10px; }
margin-left: 5px;
width: 99%; .page-title-input {
height: 50px; padding: 0 6px;
} width: 100%;
.title-info-view-right { font-size: 20px;
text-align: right; border-bottom: 1px solid #ddd;
margin-top: 10px;
font-size: 14px; .el-input__wrapper {
color: #454343; border: 0;
.split { box-shadow: unset;
padding:0 4px;
}
}
} }
}
.title-info-view-right {
text-align: right;
margin-top: 10px;
font-size: 14px;
color: #454343;
.split {
padding: 0 4px;
}
}
}
.page-edit-vue { .page-edit-vue {
.page-content-editor { .page-content-editor {
ol { ol {
@@ -414,13 +425,6 @@ const initEditor = () => {
padding: 10px 0; padding: 10px 0;
} }
.page-edit-vue .page-title-input {
padding-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
width: 50%;
}
.page-edit-vue .markdown-body table { .page-edit-vue .markdown-body table {
display: table; display: table;
} }

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

@@ -5,6 +5,7 @@
<el-row> <el-row>
<el-col :span="navigationList.length > 0 ? 18 : 24"> <el-col :span="navigationList.length > 0 ? 18 : 24">
<div style="max-width: 1000px; margin: 0 auto; padding-left: 10px"> <div style="max-width: 1000px; margin: 0 auto; padding-left: 10px">
<div class="wiki-title" ref="wikiTitleRef">{{ storePage.pageInfo.name }}</div>
<div ref="pageContentRef" class="wiki-page-content"> <div ref="pageContentRef" class="wiki-page-content">
<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2" v-highlight></div> <div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2" v-highlight></div>
<div v-html="pageShowDetail" class="wang-editor-body" v-else></div> <div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
@@ -138,6 +139,7 @@ onBeforeRouteUpdate((to) => {
initQueryParam(to); initQueryParam(to);
}); });
onMounted(() => { onMounted(() => {
storeDisplay.currentPage = 'view';
initQueryParam(route); initQueryParam(route);
}); });

2
zyplayer-doc-ui/wiki-ui/src/views/page/editor/WangEditor.vue
View File

@@ -150,7 +150,7 @@ defineExpose({setTitle,setPageId, setHtml, getPageData});
.wang-editor-box .wang-editor-content { .wang-editor-box .wang-editor-content {
padding: 20px 0; padding: 20px 0;
overflow: auto; overflow: auto;
height: calc(100vh - 156px); height: calc(100vh - 140px);
} }
.wang-editor-box .w-e-bar-item { .wang-editor-box .w-e-bar-item {
height: 39px; height: 39px;

8
zyplayer-doc-ui/wiki-ui/src/views/space/Manage.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<div style="min-height: 100%;" class="space-manage-vue"> <div style="min-height: 100%;" class="space-manage-vue">
<el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 20px 10px">
<el-breadcrumb-item>WIKI文档</el-breadcrumb-item>
<el-breadcrumb-item>空间管理</el-breadcrumb-item>
</el-breadcrumb>
<div style="max-width: 1200px;margin: 0 auto;background: #fff;padding: 20px;min-height: 100%;box-sizing: border-box;"> <div style="max-width: 1200px;margin: 0 auto;background: #fff;padding: 20px;min-height: 100%;box-sizing: border-box;">
<div style="text-align: right; margin-bottom: 10px"> <div style="text-align: right; margin-bottom: 10px">
<span style="float: left; line-height: 40px"> <span style="float: left; line-height: 40px">
@@ -112,6 +108,7 @@ import userApi from '../../assets/api/user'
import CreateSpace from '../../components/space/CreateSpace' import CreateSpace from '../../components/space/CreateSpace'
import {useStoreSpaceData}from '@/store/spaceData' import {useStoreSpaceData}from '@/store/spaceData'
import {useStorePageData}from '@/store/pageData' import {useStorePageData}from '@/store/pageData'
import {useStoreDisplay} from "@/store/wikiDisplay";
let spaceListLoading = ref(false); let spaceListLoading = ref(false);
let spaceOptions = ref([]); let spaceOptions = ref([]);
@@ -132,9 +129,12 @@ let userSetting = ref({wiki_only_show_favorite: 0,});
let route = useRoute(); let route = useRoute();
let router = useRouter(); let router = useRouter();
let storeDisplay = useStoreDisplay();
let storePage = useStorePageData(); let storePage = useStorePageData();
let storeSpace = useStoreSpaceData(); let storeSpace = useStoreSpaceData();
onMounted(() => { onMounted(() => {
storeDisplay.currentPage = 'space';
loadSpaceList() loadSpaceList()
getSelfUserInfo() getSelfUserInfo()
getSpaceSettingList() getSpaceSettingList()