界面展示细节优化

This commit is contained in:
暮光:城中城
2023-01-11 23:28:20 +08:00
parent b8068ef29e
commit d29068bb9c
11 changed files with 11617 additions and 59 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -41,13 +41,16 @@
style="background-color: #fafafa"
@node-click="handleNodeClick"
@node-expand="handleNodeExpand"
@node-drop="handlePageDrop"
>
@node-drop="handlePageDrop">
<template v-slot="{ node, data }">
<span style="font-size: 14px">
<div class="page-tree-node">
<el-tooltip :content="node.label" placement="top-start" :show-after="1000">
<span class="label">
<el-icon><el-icon-document/></el-icon>
<span style="margin-left: 6px">{{ node.label }}</span>
<span class="text">{{ node.label }}</span>
</span>
</el-tooltip>
</div>
</template>
</el-tree>
</div>
@@ -520,15 +523,31 @@ body {
<style lang="scss">
.wiki-page-tree-box {
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 30px;
.el-tree-node {
.el-tree-node__content {
height: 35px;
.el-tree-node__label {
.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;
}
}
}
}

View File

@@ -132,6 +132,7 @@ const initQueryParam = (to) => {
.home-vue .view-img {
font-size: 16px;
color: #666;
vertical-align: middle;
}
.home-vue .page-info-box {

View File

@@ -12,9 +12,9 @@
</el-select>
</template>
<template v-else>
<span style="margin-right: 20px">父级{{ parentWikiPage.name || '/' }}</span>
<span class="parent-name">父级{{ parentWikiPage.name || '/' }}</span>
<el-tooltip class="item" content="在根目录创建文档" v-if="parentId">
<el-link @click="changeToRootPath" size="small" style="padding: 0 10px">根目录</el-link>
<el-link @click="changeToRootPath" type="primary" size="small" style="padding: 0 10px">根目录</el-link>
</el-tooltip>
<span style="margin-left: 50px">编辑方式</span>
<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="small">
@@ -31,13 +31,13 @@
</el-row>
</div>
<div v-show="wikiPageEdit.editorType === 2" style="padding: 0 10px 10px 10px; background: #fff">
<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
<el-input v-model="wikiPageEdit.pageTitle" :maxlength="40" placeholder="请输入标题" class="page-title-input"></el-input>
<mavonEditor
ref="mavonEditorRef"
v-model="markdownContent"
:toolbars="toolbars"
:externalLink="false"
style="height: calc(100vh - 165px)"
style="height: calc(100vh - 155px)"
@save="createWikiSave(0)"
@imgAdd="addMarkdownImage"
placeholder="请录入文档内容"
@@ -282,6 +282,20 @@ const initEditor = () => {
}
</script>
<style lang="scss" scoped>
.page-edit-vue {
.parent-name {
margin-right: 20px;
max-width: 300px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
</style>
<style>
.page-edit-vue .icon-collapse {
float: left;

View File

@@ -48,18 +48,18 @@
<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px">
<el-table-column label="文件名" show-overflow-tooltip>
<template v-slot="scope">
<el-link target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName }}</el-link>
<el-link target="_blank" :href="scope.row.fileUrl" type="primary">{{scope.row.fileName }}</el-link>
</template>
</el-table-column>
<el-table-column prop="createUserName" label="创建人"></el-table-column>
<el-table-column prop="createUserName" label="创建人" width="110px" show-overflow-tooltip></el-table-column>
<el-table-column label="文件大小" width="120px">
<template v-slot="scope">{{computeFileSize(scope.row.fileSize) }}</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="160px"></el-table-column>
<el-table-column prop="downloadNum" label="下载次数" width="100px">
<el-table-column prop="downloadNum" label="下载次数" width="90px">
<template v-slot="scope">{{scope.row.downloadNum || 0}}</template>
</el-table-column>
<el-table-column label="操作" width="100px" v-if="wikiPageAuth.canDeleteFile == 1">
<el-table-column label="操作" width="90px" v-if="wikiPageAuth.canDeleteFile == 1">
<template v-slot="scope">
<el-button v-on:click="deletePageFile(scope.row)">删除</el-button>
</template>
@@ -679,6 +679,14 @@ const initQueryParam = (to) => {
}
</script>
<style lang="scss" scoped>
.page-show-vue {
.wiki-page-content {
margin-top: 20px;
}
}
</style>
<style>
@import '../../assets/lib/wangEditor.css';

View File

@@ -10,7 +10,7 @@
<div class="wang-editor-content">
<div class="editor-container">
<div class="title-container">
<input v-model="pageTitle" placeholder="请输入标题" :maxlength="50">
<input v-model="pageTitle" placeholder="请输入标题" :maxlength="40">
</div>
<div @click="pageEditorBodyClick" class="page-editor-body">
<Editor :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated"/>

View File

@@ -5,13 +5,13 @@
<link rel="icon" href="wiki-logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WIKI文档管理系统</title>
<script type="module" crossorigin src="assets/main.d6aab6a7.js"></script>
<script type="module" crossorigin src="assets/main.2ad203f8.js"></script>
<link rel="modulepreload" href="assets/highlight.js.7012e325.js">
<link rel="modulepreload" href="assets/vue.9fe1449e.js">
<link rel="modulepreload" href="assets/vendor.1de5edb3.js">
<link rel="modulepreload" href="assets/vant.3766b232.js">
<link rel="modulepreload" href="assets/vendor.f72bba09.js">
<link rel="modulepreload" href="assets/vant.82631fc1.js">
<link rel="modulepreload" href="assets/wangeditor.cbd30c7d.js">
<link rel="stylesheet" href="assets/style.57b67e8b.css">
<link rel="stylesheet" href="assets/style.0d24531b.css">
</head>
<body>
<div id="app"></div>