文档展示样式优化
This commit is contained in:
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div style="height: 100%" class="page-edit-vue">
|
||||
<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-else text :icon="ElIconExpand" class="fold-btn"></el-button>
|
||||
</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-col>
|
||||
<el-col :span="5" class="title-info-view-right">
|
||||
<el-button type="primary" @click="createWikiSave(1)" size="large" :icon="ElIconDocumentChecked">保存</el-button>
|
||||
<el-button @click="createWikiCancel" size="large" :icon="ElIconBack" style="margin-right: 5px">取消</el-button>
|
||||
<el-col style="flex: 0 0 180px;text-align: right;">
|
||||
<el-button type="primary" @click="createWikiSave(1)" :icon="ElIconDocumentChecked">保存</el-button>
|
||||
<el-button @click="createWikiCancel" :icon="ElIconBack" style="margin-right: 5px">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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
|
||||
ref="mavonEditorRef"
|
||||
v-model="markdownContent"
|
||||
:toolbars="toolbars"
|
||||
:externalLink="false"
|
||||
style="height: calc(100vh - 155px)"
|
||||
style="height: calc(100vh - 100px);z-index: 1;"
|
||||
@save="createWikiSave(0)"
|
||||
@imgAdd="addMarkdownImage"
|
||||
placeholder="请录入文档内容"
|
||||
@@ -312,33 +312,44 @@ const initEditor = () => {
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fake-header{
|
||||
color: #333;
|
||||
height: 60px !important;
|
||||
border-bottom: 0.5px solid #eaeaea;
|
||||
.fold-btn {
|
||||
padding: 28px 19px;
|
||||
line-height: 28px;
|
||||
color: #3d3a3a !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-title-input {
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
width: 99%;
|
||||
height: 50px;
|
||||
}
|
||||
.title-info-view-right {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #454343;
|
||||
.split {
|
||||
padding:0 4px;
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
.fake-header {
|
||||
color: #333;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
border-bottom: 0.5px solid #eaeaea;
|
||||
|
||||
.fold-btn {
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
margin-left: 6px;
|
||||
color: #888 !important;
|
||||
}
|
||||
|
||||
.page-title-input {
|
||||
padding: 0 6px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.el-input__wrapper {
|
||||
border: 0;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.title-info-view-right {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #454343;
|
||||
|
||||
.split {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-edit-vue {
|
||||
.page-content-editor {
|
||||
ol {
|
||||
@@ -414,13 +425,6 @@ const initEditor = () => {
|
||||
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 {
|
||||
display: table;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<el-row>
|
||||
<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">{{ storePage.pageInfo.name }}</div>
|
||||
<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="wang-editor-body" v-else></div>
|
||||
@@ -138,6 +139,7 @@ onBeforeRouteUpdate((to) => {
|
||||
initQueryParam(to);
|
||||
});
|
||||
onMounted(() => {
|
||||
storeDisplay.currentPage = 'view';
|
||||
initQueryParam(route);
|
||||
});
|
||||
|
||||
|
||||
@@ -150,7 +150,7 @@ defineExpose({setTitle,setPageId, setHtml, getPageData});
|
||||
.wang-editor-box .wang-editor-content {
|
||||
padding: 20px 0;
|
||||
overflow: auto;
|
||||
height: calc(100vh - 156px);
|
||||
height: calc(100vh - 140px);
|
||||
}
|
||||
.wang-editor-box .w-e-bar-item {
|
||||
height: 39px;
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<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="text-align: right; margin-bottom: 10px">
|
||||
<span style="float: left; line-height: 40px">
|
||||
@@ -112,6 +108,7 @@ import userApi from '../../assets/api/user'
|
||||
import CreateSpace from '../../components/space/CreateSpace'
|
||||
import {useStoreSpaceData}from '@/store/spaceData'
|
||||
import {useStorePageData}from '@/store/pageData'
|
||||
import {useStoreDisplay} from "@/store/wikiDisplay";
|
||||
|
||||
let spaceListLoading = ref(false);
|
||||
let spaceOptions = ref([]);
|
||||
@@ -132,9 +129,12 @@ let userSetting = ref({wiki_only_show_favorite: 0,});
|
||||
|
||||
let route = useRoute();
|
||||
let router = useRouter();
|
||||
let storeDisplay = useStoreDisplay();
|
||||
let storePage = useStorePageData();
|
||||
let storeSpace = useStoreSpaceData();
|
||||
|
||||
onMounted(() => {
|
||||
storeDisplay.currentPage = 'space';
|
||||
loadSpaceList()
|
||||
getSelfUserInfo()
|
||||
getSpaceSettingList()
|
||||
|
||||
Reference in New Issue
Block a user