界面展示细节优化

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

@@ -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-icon><el-icon-document/></el-icon>
+									<el-tooltip :content="node.label" placement="top-start" :show-after="1000">
-				                  <span style="margin-left: 6px">{{ node.label }}</span>
+										<span class="label">
-				                </span>
+											<el-icon><el-icon-document/></el-icon>
+											<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 {
-	.el-tree-node__content {
+	height: 35px;
-	  height: 35px;
 
-	  .el-tree-node__label {
+	.page-tree-node {
-		width: 100%;
+	  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;
+		}
 	  }
 	}
   }

zyplayer-doc-ui/wiki-ui/src/views/home/Home.vue

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

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

@@ -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;

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

@@ -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';
 

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

@@ -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"/>

zyplayer-doc-wiki/src/main/resources/dist/doc-wiki.html

@@ -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/vendor.f72bba09.js">
-    <link rel="modulepreload" href="assets/vant.3766b232.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>