知识库-页面优化

main
ysn 3 days ago
parent c6696ae899
commit 96aee382ff
  1. 2
      src/assets/images/knowledge/mp4.svg
  2. 2
      src/assets/images/knowledge/pdf.svg
  3. 96
      src/views/knowledge/index.vue

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1650615058857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13408" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M587 0H160c-35.3 0-64 28.7-64 64v896c0 35.3 28.7 64 64 64h704c35.3 0 64-28.7 64-64V341c0-33.9-13.5-66.5-37.5-90.5l-213-213C653.5 13.5 620.9 0 587 0z m53 90.5L837.5 288H704c-35.3 0-64-28.7-64-64V90.5zM832 960H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h384v160c0 70.7 57.3 128 128 128h160v576c0 17.7-14.3 32-32 32z" p-id="13409" fill="#ffffff"></path><path d="M440.9 571.4l124.8 70.7c10.8 6.1 10.8 21.7 0 27.8l-124.8 70.7c-10.7 6-23.9-1.7-23.9-13.9V585.3c0-12.3 13.2-20 23.9-13.9zM353 809.1c0 24.5 26.4 39.9 47.8 27.8l270.1-153.1c21.6-12.3 21.6-43.4 0-55.7l-270.1-153c-21.3-12.1-47.8 3.3-47.8 27.8v306.2z" p-id="13410" fill="#ffffff"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1650615039951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13090" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M928 456V314.5c0-17-6.7-33.3-18.7-45.3L658.7 18.7C646.7 6.7 630.5 0 613.5 0H144c-26.5 0-48 21.5-48 48v408c0 4.4-3.6 8-8 8H16c-8.8 0-16 7.2-16 16v400c0 8.8 7.2 16 16 16h80c0 70.7 57.3 128 128 128h656c26.5 0 48-21.5 48-48v-64c0-8.8 7.2-16 16-16h64c8.8 0 16-7.2 16-16V480c0-8.8-7.2-16-16-16h-72c-4.4 0-8-3.6-8-8zM704 154.5l69.5 69.5H708c-2.2 0-4-1.8-4-4v-65.5zM168 64h408c35.3 0 64 28.7 64 64v144c0 8.8 7.2 16 16 16h144c35.3 0 64 28.7 64 64v104c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8V72c0-4.4 3.6-8 8-8z m688 896H224c-35.3 0-64-28.7-64-64h696c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8z m96-128H72c-4.4 0-8-3.6-8-8V536c0-4.4 3.6-8 8-8h880c4.4 0 8 3.6 8 8v288c0 4.4-3.6 8-8 8z" p-id="13091" fill="#ffffff"></path><path d="M286.6 711.6v72.7h-44.5V575.7H314c51.9 0 77.9 22 77.9 66 0 21.4-7.8 38.5-23.5 51.4-15.7 12.9-35.3 19.1-58.8 18.5h-23z m0-101.4v67.4h19.3c26.1 0 39.2-11.4 39.2-34.1 0-22.2-12.9-33.3-38.8-33.3h-19.7zM437.5 784.4V575.7h72.1c74.1 0 111.1 33.9 111.1 101.7 0 32.2-10.4 58.1-31.1 77.7-20.7 19.5-47.5 29.3-80.3 29.3h-71.8zM482 612.1V748h24.2c21.1 0 37.7-6.3 49.7-18.9 12-12.6 18.1-29.6 18.1-51.1 0-20.7-6.3-36.9-18.9-48.6-12.6-11.6-28.9-17.4-49-17.4H482zM783.9 612.1h-74.5v53.6H778v36.4h-68.6v82.3h-44.5V575.7h119v36.4z" p-id="13092" fill="#ffffff"></path></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -75,14 +75,14 @@
<!-- 资源列表 -->
<el-table
:data="list"
height="calc(100vh - 264px)"
height="calc(100vh - 280px)"
:show-header="false"
>
<el-table-column
label="内容"
prop="thumbnail_path"
align="center"
width="250"
align="left"
width="140"
>
<template slot-scope="scope">
<el-image
@ -103,14 +103,15 @@
</el-table-column>
<el-table-column
label="标题"
align="left"
prop="title"
:show-overflow-tooltip="true"
/>
<el-table-column
label="创建时间"
align="center"
align="left"
prop="create_time"
width="200"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.create_time) }}上传</span>
@ -120,7 +121,7 @@
label="文件大小"
align="center"
prop="file_size"
width="120"
width="100"
>
<template slot-scope="scope">
<span>{{ formatfile_size(scope.row.file_size) }}</span>
@ -129,8 +130,8 @@
<el-table-column
label="操作"
align="center"
width="240"
class-name="small-padding fixed-width"
width="120"
>
<template slot-scope="scope">
<el-button
@ -138,7 +139,7 @@
icon="el-icon-share"
@click="handleShare(scope.row)"
>
分享
<!-- 分享 -->
</el-button>
<el-button
v-if="scope.row.is_mine == 1"
@ -146,7 +147,7 @@
icon="el-icon-edit"
@click="handleUpdateFileName(scope.row)"
>
修改
<!-- 修改 -->
</el-button>
<el-button
v-if="scope.row.is_mine == 1"
@ -154,7 +155,7 @@
icon="el-icon-delete"
@click="handleRightDelete(scope.row)"
>
删除
<!-- 删除 -->
</el-button>
</template>
</el-table-column>
@ -175,7 +176,7 @@
<el-dialog
title="自定义标签名称"
:visible.sync="tagDialogVisible"
width="400px"
width="17%"
destroy-on-close
>
<el-form
@ -203,14 +204,14 @@
<el-dialog
title="修改"
:visible.sync="fileNameDialogVisible"
width="400px"
width="17%"
destroy-on-close
>
<el-form
:model="fileNameForm"
:rules="fileNameRules"
ref="fileNameFormRef"
label-width="80px"
label-width="70px"
>
<el-form-item label="标题" prop="title">
<el-input
@ -231,17 +232,15 @@
<el-dialog
title="请选择上传文件类型"
:visible.sync="uploadTypeDialogVisible"
width="400px"
width="18%"
:show-footer="false"
>
<div class="upload-type-box">
<div class="type-item" @click="selectFileType('video')">
<i class="el-icon-video-play" />
<span>视频文件MP4</span>
<img src="@/assets/images/knowledge/mp4.svg" alt="视频文件" />
</div>
<div class="type-item" @click="selectFileType('pdf')">
<i class="el-icon-document" />
<span>PDF 文件</span>
<img src="@/assets/images/knowledge/pdf.svg" alt="PDF文件" />
</div>
</div>
</el-dialog>
@ -660,12 +659,12 @@ export default {
if (!file) return;
//
const validateResult = this.validateFileName(file.name);
if (!validateResult.valid) {
this.$modal.msgError(validateResult.message);
event.target.value = "";
return;
}
// const validateResult = this.validateFileName(file.name);
// if (!validateResult.valid) {
// this.$modal.msgError(validateResult.message);
// event.target.value = "";
// return;
// }
//
// const sizeResult = this.validateFileSize(file.size);
@ -698,7 +697,10 @@ export default {
// 2. 20
const nameWithoutExt = fileName.replace(/\.[^/.]+$/, "");
if (nameWithoutExt.length > 20) {
return { valid: false, message: "文件名(不含扩展名)不能超过20个字符" };
return {
valid: false,
message: "文件名(不含扩展名)不能超过20个字符",
};
}
// 3.
@ -715,7 +717,10 @@ export default {
// 5. Windows
const invalidChars = /[\\/:*?"<>|]/;
if (invalidChars.test(fileName)) {
return { valid: false, message: "文件名不能包含 \\ / : * ? \" < > | 等特殊字符" };
return {
valid: false,
message: '文件名不能包含 \\ / : * ? " < > | 等特殊字符',
};
}
return { valid: true, message: "" };
@ -725,7 +730,13 @@ export default {
// 100MB
const maxSize = 100 * 1024 * 1024;
if (size > maxSize) {
return { valid: false, message: `文件大小不能超过100MB,当前文件大小:${(size / (1024 * 1024)).toFixed(2)}MB` };
return {
valid: false,
message: `文件大小不能超过100MB,当前文件大小:${(
size /
(1024 * 1024)
).toFixed(2)}MB`,
};
}
return { valid: true, message: "" };
},
@ -914,8 +925,7 @@ export default {
//
.resource-thumb {
width: 230px;
height: 80px;
height: 62px;
border-radius: 4px;
cursor: pointer;
display: flex;
@ -930,29 +940,35 @@ export default {
.upload-type-box {
display: flex;
justify-content: space-around;
padding: 20px 0;
justify-content: center;
gap: 40px;
padding: 25px 0;
.type-item {
width: 120px;
height: 120px;
border: 1px dashed #ccc;
border-radius: 8px;
width: 90px;
height: 90px;
background: #009696;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
i {
font-size: 40px;
color: #409eff;
img {
width: 70px;
height: 70px;
margin-bottom: 10px;
}
span {
color: #fff;
font-size: 14px;
}
&:hover {
border-color: #409eff;
background: #f5f7fa;
transform: scale(1.05);
}
}
}

Loading…
Cancel
Save