style(knowledge): 优化知识库相关页面样式

- 调整知识库列表、详情、编辑等页面的样式布局
-优化文本显示效果,增加省略号处理
- 统一按钮样式和间距
- 调整滚动条和粘性元素的样式
This commit is contained in:
陈昱达
2025-05-21 17:11:06 +08:00
parent 95016472a1
commit 43e4a221f9
5 changed files with 31 additions and 22 deletions

View File

@@ -560,10 +560,10 @@ export default {
text-align: left;
font-style: normal;
height: 35px;
height: 18px;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

View File

@@ -284,6 +284,7 @@ export default {
width: 100%;
//height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
.context {
color: #3a3f4f;

View File

@@ -1,7 +1,7 @@
<template>
<div class=" render-container">
<div class="clearfix flex align-items-c justify-content-b ">
<div class=" flex align-items-c j">
<div class=" flex align-items-c justify-content-b" style="flex:1">
<div class="hover-back mr5">
<el-icon
class="el-icon-arrow-left"
@@ -14,7 +14,7 @@
:src="knowledgeImage ? knowledgeImage : knowledgePng_1"
class="header-icon"
/>
<div class="ml20" style="flex:1">
<div class="ml10" style="flex:1">
<div class="flex align-items-c">
<div class="mr20 header" v-if="!editKnowledge">
{{ knowledgeName ? knowledgeName : '' }}
@@ -32,17 +32,10 @@
v-if="!editKnowledge"
/>
<div v-else>
<el-button
type="primary"
size="medium"
class="render-button"
@click="saveKnowledgeName"
<el-button type="primary" size="medium" @click="saveKnowledgeName"
>保存</el-button
>
<el-button
size="medium"
class="render-button"
@click="cancelKnowledgeName"
<el-button size="medium" @click="cancelKnowledgeName"
>取消</el-button
>
</div>
@@ -50,14 +43,14 @@
segmentedMode | filterSegmentedMode
}}</span>
</div>
<p class="mt10 fs14" style="line-height: 20px">
<p class="mt10 fs14 knowledgeDesc" style="line-height: 20px">
描述{{ knowledgeDesc }}
</p>
<!-- <p class="mt10 fs14" style="line-height: 20px">分段模式{{ segmentedMode | filterSegmentedMode }}</p>-->
</div>
</div>
<div style="flex:1" class="text-right">
<div style="margin-left: auto" class="text-right">
<!-- <el-button type="primary" size="medium" class="normal-button" @click="jumpEditKnowledge">修改知识库</el-button>-->
<el-button
type="primary"
@@ -1033,7 +1026,7 @@ export default {
line-height: 17px;
text-align: left;
font-style: normal;
margin-left: 20px;
margin-left: 10px;
padding: 2px 5px;
}
@@ -1074,4 +1067,13 @@ export default {
border-radius: 5px;
}
}
.knowledgeDesc {
display: -webkit-box; // 支持多行省略
-webkit-line-clamp: 1; // 限制为两行
-webkit-box-orient: vertical; // 垂直方向排列
overflow: hidden; // 隐藏超出部分
text-overflow: ellipsis; // 显示省略号
max-width: 80%; // 限制宽度
}
</style>

View File

@@ -49,7 +49,7 @@
</div>
<div class="card-body">
<div class="ledge-list mt20">
<div class="ledge-list mt10 ">
<el-card
v-for="(item, index) in datasetList"
class="item datasetList"
@@ -57,7 +57,7 @@
:key="index"
@click.native.stop="knowLedgeDetail(item)"
>
<div class="dataset-header">
<div class="dataset-header mb10">
<div class="folder-content">
<img
:src="item.image ? item.image : getKnowledgeImage(index)"
@@ -71,10 +71,11 @@
</div>
</div>
<div class="flex align-items-c justify-content-b mh20 mv10">
<div class="flex align-items-c justify-content-b mh20 mv5">
<div class="theme-primary-desc-text-drank fs12">
{{ item.segmentedMode | filterSegmentedMode }}
</div>
<div class="opacity-button">
<el-button
class="default "
@@ -390,10 +391,10 @@ export default {
text-align: left;
font-style: normal;
height: 35px;
height: 18px;
margin: 0;
display: -webkit-box; // 支持多行省略
-webkit-line-clamp: 2; // 限制为两行
-webkit-line-clamp: 1; // 限制为两行
-webkit-box-orient: vertical; // 垂直方向排列
overflow: hidden; // 隐藏超出部分
text-overflow: ellipsis; // 显示省略号

View File

@@ -334,10 +334,15 @@ export default {
:noEdit="noEdit"
:descriptions="descriptions"
:parentForm="form"
style="height: calc(100% - 40px);overflow-x: hidden;overflow-y: auto"
:style="{
height: segmentTotal > 10 ? 'calc(100% - 40px)' : '100%',
overflowX: 'hidden',
overflowY: 'auto'
}"
/>
<div
v-if="segmentTotal > 10"
style="height: 40px;width:100%;position: sticky;bottom: -1px;color:Red;background: #fff;"
class="flex align-items-c justify-content-b"
>