hz/ebiz-ai-knowledge-manage
1
0
Fork 0
mirror of http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git synced 2025-12-24 10:12:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(knowledge): 重构知识库列表界面

Browse Source 
- 更新了知识库列表的布局和样式，使其更加现代化和响应式
- 添加了创建知识库按钮，优化了操作流程
- 改进了卡片样式，增加了悬停效果和透明度按钮
- 调整了文本样式，提高了可读性和美观度
- 优化了 SVG 图标，替换了文件夹图标
This commit is contained in:
陈昱达
2025-04-22 21:12:01 +08:00
parent 6886d58807
commit 3fcc405f50
5 changed files with 124 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/sass/public.scss
View File

@@ -257,7 +257,23 @@ body .el-collapse-item__wrap {
color: #dd6161;
}
}
.default {
color: #000 !important;
background: #f1f3f5 !important;
border-color: #f1f3f5 !important;
& :disabled {
color: rgba(0, 0, 0, 0.25);
}
& :hover {
color: #000;
}
& :focus {
color: #000;
}
& :active {
color: #000;
}
}
.cursor-pointer {
cursor: pointer;
}

24
src/assets/sass/renderSass/button.scss
View File

@@ -51,6 +51,14 @@
border-color: transparent;
}
}
&.is-plain {
background: #fff;
border-color: $--color-primary-light;
color: $--color-primary-light;
&:hover {
background-color: $--color-primary-light;
}
}
&:hover {
background-color: $--color-primary-light;
border-color: $--color-primary-light;
@@ -96,4 +104,20 @@
border-color: transparent;
}
}
&.is-plain {
background: #fff;
border-color: $--color-primary-danger-light;
}
}
.line-button {
background: linear-gradient(311deg, #8d5cff 0%, #026eff 100%);
border: unset;
cursor: pointer;
color: #fff;
&:hover {
background: linear-gradient(311deg, #8d5cff 0%, #026eff 100%);
border: none;
color: #fff;
}
}

4
src/assets/sass/renderSass/theme.scss
View File

@@ -6,6 +6,7 @@ $--color-primary-danger: #ff0000;
$--color-primary-danger-light: lighten($--color-primary-danger, 5%); //高亮颜色
$--color-primary-danger-disabled: #ff000024;
$--color-primary-desc-text: #51525d;
$--color-primary-desc-text-drank: #999;
:root {
--swiper-theme-color: #0a6dff;
--color-primary: #0a6dff;
@@ -16,3 +17,6 @@ $--color-primary-desc-text: #51525d;
.theme-primary-desc-text {
color: $--color-primary-desc-text;
}
.theme-primary-desc-text-drank {
color: $--color-primary-desc-text-drank;
}

2
src/icons/svg/folder.svg
View File

@@ -1 +1 @@
<svg t="1744165813164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7308"><path d="M727.466667 714.666667H352c-46.933333 0-85.333333-38.4-85.333333-85.333334V275.2c0-46.933333 38.4-85.333333 85.333333-85.333333h332.8c70.4 0 128 57.6 128 128v309.333333c0 49.066667-38.4 87.466667-85.333333 87.466667z" fill="#93A8FF" p-id="7309"></path><path d="M682.666667 759.466667H307.2c-46.933333 0-85.333333-38.4-85.333333-85.333334V322.133333c0-46.933333 38.4-85.333333 85.333333-85.333333H682.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v352c0 46.933333-38.4 85.333333-85.333333 85.333334z" fill="#FCCA1E" p-id="7310"></path><path d="M768 782.933333H256c-46.933333 0-85.333333-38.4-85.333333-85.333333V366.933333c0-46.933333 38.4-85.333333 85.333333-85.333333h213.333333c25.6 0 49.066667 14.933333 61.866667 38.4l17.066667 25.6c12.8 17.066667 34.133333 27.733333 55.466666 27.733333H768c46.933333 0 85.333333 38.4 85.333333 85.333334v238.933333c0 46.933333-38.4 85.333333-85.333333 85.333333z" fill="#2953FF" p-id="7311"></path></svg>
<svg t="1745326718375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11387" width="50" height="50"><path d="M849.170732 0c97.404878 0 174.829268 77.42439 174.829268 174.829268v674.341464c0 97.404878-77.42439 174.829268-174.829268 174.829268H174.829268c-97.404878 0-174.829268-77.42439-174.829268-174.829268V174.829268c0-97.404878 77.42439-174.829268 174.829268-174.829268h674.341464z m-157.346342 312.195122c-7.492683-7.492683-17.482927-7.492683-27.47317-7.492683l-64.936586 9.990244c-4.995122 0-9.990244 2.497561-14.985366 4.995122-4.995122 2.497561-7.492683 4.995122-9.990244 9.990244-2.497561 4.995122-4.995122 7.492683-4.995122 12.487805s-2.497561 9.990244 0 14.985366L621.892683 699.317073c2.497561 9.990244 7.492683 19.980488 14.985366 24.97561 7.492683 4.995122 17.482927 7.492683 27.473171 7.492683l62.439024-9.990244c9.990244-2.497561 19.980488-7.492683 24.97561-14.985366 4.995122-7.492683 7.492683-17.482927 7.492683-27.473171l-54.946342-342.165853c0-12.487805-4.995122-19.980488-12.487805-24.97561z m-197.307317-9.990244h-59.941463c-9.990244 0-19.980488 2.497561-24.97561 9.990244-4.995122 7.492683-7.492683 17.482927-7.492683 27.473171v354.653658c0 9.990244 2.497561 19.980488 9.990244 27.473171 7.492683 7.492683 17.482927 9.990244 27.473171 9.990244h54.946341c9.990244 0 19.980488-2.497561 27.473171-9.990244 7.492683-7.492683 9.990244-17.482927 9.990244-27.473171V339.668293c0-9.990244-2.497561-19.980488-9.990244-27.473171-7.492683-7.492683-17.482927-9.990244-27.473171-9.990244z m-167.336585 0h-54.946342c-9.990244 0-19.980488 2.497561-27.47317 9.990244-7.492683 7.492683-12.487805 17.482927-12.487805 27.473171v354.653658c0 9.990244 4.995122 19.980488 12.487805 27.473171 7.492683 7.492683 17.482927 9.990244 27.47317 9.990244h54.946342c9.990244 0 19.980488-2.497561 27.473171-9.990244 7.492683-7.492683 12.487805-17.482927 12.487804-27.473171V339.668293c0-9.990244-4.995122-19.980488-12.487804-27.473171-7.492683-7.492683-14.985366-9.990244-27.473171-9.990244z m0 264.741463c4.995122 0 7.492683 2.497561 9.990244 4.995122 2.497561 2.497561 2.497561 7.492683 2.497561 12.487805s0 7.492683-2.497561 12.487805c-2.497561 2.497561-4.995122 4.995122-9.990244 4.995122H274.731707c-4.995122 0-7.492683-2.497561-9.990244-4.995122-2.497561-2.497561-2.497561-7.492683-2.497561-12.487805s0-9.990244 2.497561-12.487805c2.497561-2.497561 4.995122-4.995122 9.990244-4.995122h52.448781z m167.336585-32.468292c2.497561 0 7.492683 2.497561 9.990244 4.995122 2.497561 2.497561 2.497561 7.492683 2.497561 12.487805s0 7.492683-2.497561 12.487804c-2.497561 2.497561-4.995122 4.995122-9.990244 4.995122h-54.946341c-2.497561 0-7.492683-2.497561-9.990244-4.995122-2.497561-2.497561-2.497561-7.492683-2.497561-12.487804s0-9.990244 2.497561-12.487805c2.497561-2.497561 4.995122-4.995122 9.990244-4.995122h54.946341z m-167.336585-32.468293c4.995122 0 7.492683 2.497561 9.990244 4.995122 2.497561 2.497561 2.497561 7.492683 2.497561 12.487805s0 9.990244-2.497561 12.487805c-2.497561 2.497561-4.995122 4.995122-9.990244 4.995122H274.731707c-4.995122 0-7.492683-2.497561-9.990244-4.995122-2.497561-2.497561-2.497561-7.492683-2.497561-12.487805s0-9.990244 2.497561-12.487805c2.497561-2.497561 4.995122-4.995122 9.990244-4.995122h52.448781z m167.336585-34.965854c2.497561 0 7.492683 2.497561 9.990244 4.995122 2.497561 2.497561 2.497561 7.492683 2.497561 12.487805s0 9.990244-2.497561 12.487805c-2.497561 2.497561-4.995122 4.995122-9.990244 4.995122h-54.946341c-2.497561 0-7.492683-2.497561-9.990244-4.995122-2.497561-2.497561-2.497561-7.492683-2.497561-12.487805s0-9.990244 2.497561-12.487805c2.497561-2.497561 4.995122-4.995122 9.990244-4.995122h54.946341zM324.682927 434.57561c4.995122 0 7.492683 2.497561 9.990244 4.995122 2.497561 2.497561 2.497561 7.492683 2.497561 12.487805s0 7.492683-2.497561 12.487804c-2.497561 2.497561-4.995122 4.995122-9.990244 4.995122h-49.95122c-4.995122 0-7.492683-2.497561-9.990244-4.995122-2.497561-2.497561-2.497561-7.492683-2.497561-12.487804s0-9.990244 2.497561-12.487805c2.497561-2.497561 4.995122-4.995122 9.990244-4.995122h49.95122z" fill="#3991F9" p-id="11388"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

195
src/views/knowledge/index.vue
View File

@@ -8,42 +8,46 @@
</template>
</el-input>
</el-col>
<el-col :span="16" class="text-right">
<el-button class="render-button line-button" icon="el-icon-plus" @click="createdKnowLedge()">创建知识库</el-button>
</el-col>
</el-row>
<div slot="header" class="clearfix mt30">
<h3>知识库列表</h3>
<p class="mt20 fs14 theme-primary-desc-text" style="line-height: 10px">
易商数智知识库平台，旨在为用户提供更便捷、更灵敏、更全面的知识存储和操作平台，用户可以通过创建不同的知识库，完成对系统内知识的细分和储备。
</p>
<p class="mt10 fs14 theme-primary-desc-text" style="line-height: 15px">同时也可以通过修改和删除操作，对系统内知识体系进行修正和优化。</p>
<el-button type="primary" class="mt20 render-button" plain>操作文档</el-button>
<div slot="header" class="clearfix mt30 flex">
<div>
<h3>知识库列表</h3>
<p class="mt20 fs14 theme-primary-desc-text" style="line-height: 10px">
易商数智知识库平台，旨在为用户提供更便捷、更灵敏、更全面的知识存储和操作平台，用户可以通过创建不同的知识库，完成对系统内知识的细分和储备。
</p>
<p class="mt10 fs14 theme-primary-desc-text" style="line-height: 15px">同时也可以通过修改和删除操作，对系统内知识体系进行修正和优化。</p>
<el-button type="primary" class="mt20 render-button" plain icon="el-icon-document-remove">操作文档</el-button>
</div>
</div>
<div class="card-body">
<div class="ledge-list mt20">
<el-card shadow="hover" class="item dashed">
<div @click="createdKnowLedge()">
新增知识库
</div>
</el-card>
<el-card v-for="(item, index) in datasetList" class="item datasetList" shadow="hover" :key="index">
<el-card v-for="(item, index) in datasetList" class="item datasetList" shadow="hover" :key="index" @click.native.stop="knowLedgeDetail(item)">
<div class="dataset-header">
<div class="folder-content">
<svg-icon iconClass="folder" className="folder"></svg-icon>
</div>
<el-tag size="small" type="primary" effect="plain" class="dataset-type">
<div class="dataset-body" style="flex:1">
<h4 class="dataset-title">{{ item.name }}</h4>
<p class="dataset-desc">{{ item.description }}</p>
</div>
</div>
<div class="flex align-items-c justify-content-b mh20 mv10">
<div class="theme-primary-desc-text-drank fs12">
{{ item.segmentedMode | filterSegmentedMode }}
</el-tag>
</div>
<div class="dataset-body">
<h4 class="dataset-title">{{ item.name }}</h4>
<p class="dataset-desc">{{ item.description }}</p>
</div>
<div class="dataset-footer">
<el-button type="text" @click="knowLedgeDetail(item)">查看详情</el-button>
<el-button type="text" @click="createdKnowLedge(item)">修改</el-button>
<el-button type="text" class="danger" @click="deleteKnowLedge(item)">删除</el-button>
</div>
<div class="opacity-button">
<el-button class="default render-button" icon="el-icon-delete" @click.stop="deleteKnowLedge(item)">删除</el-button>
<el-button class="render-button" icon="el-icon-edit" @click.stop="createdKnowLedge(item)" type="primary">修改</el-button>
</div>
</div>
<!-- <el-button type="text" @click="knowLedgeDetail(item)">查看详情</el-button>-->
</el-card>
</div>
</div>
@@ -149,10 +153,10 @@ export default {
//margin-left: 2.5%;
& .item {
border-radius: 8px;
width: calc(25% - 20px); // 每个项目占 25%，并预留间隙
margin-bottom: 20px;
width: calc(33.33% - 10px); // 每个项目占 33.33%，并预留间隙
margin-bottom: 10px;
margin-left: 0; // 移除左右内边距
margin-right: 25px;
margin-right: 15px;
/deep/ .el-card__body {
padding: 0;
& .item-body {
@@ -167,37 +171,11 @@ export default {
justify-content: space-between;
background: #f7f9fa;
border-top: 1px solid #eff0f1;
& .el-button {
color: #8d8f8f;
width: 33%;
text-align: center;
&:nth-child(2) {
position: relative;
&::before {
position: absolute;
content: '';
left: 0;
height: 100%;
width: 1px;
background: #eff0f1;
top: 0;
}
&::after {
position: absolute;
content: '';
right: 0;
height: 100%;
width: 1px;
background: #eff0f1;
top: 0;
}
}
}
}
}
}
& .item:nth-child(4n) {
& .item:nth-child(3n) {
margin-right: 0;
}
@@ -214,25 +192,34 @@ export default {
}
& .folder-content {
background-color: rgba(245, 248, 255, 1);
//background-color: rgba(245, 248, 255, 1);
text-align: center;
border-radius: 8px;
padding: 10px;
//padding: 10px;
& .folder {
width: 40px;
height: 40px;
}
}
}
.opacity-button {
opacity: 0;
}
.datasetList {
position: relative;
transition: all 0.3s ease;
overflow: hidden;
cursor: pointer;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
//transform: translateY(-3px);
background: linear-gradient(211deg, #eef4fd 0%, #ffffff 100%);
box-shadow: 0px 4px 7px 2px #dbe3f2;
border-radius: 7px;
border: 1px solid #635cff;
.opacity-button {
opacity: 1;
}
}
/deep/ .el-card__body {
@@ -246,22 +233,16 @@ export default {
padding: 20px 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
//align-items: center;
.folder-content {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
//width: 50px;
//height: 50px;
//background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
.folder {
width: 30px;
height: 30px;
color: #1890ff;
}
}
.dataset-type {
@@ -272,28 +253,41 @@ export default {
.dataset-body {
flex: 1;
padding: 16px 20px;
max-width: 90%;
padding: 0 10px;
.dataset-title {
margin: 0 0 12px;
font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #2c3e50;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
color: #000000;
line-height: 22px;
text-align: left;
font-style: normal;
margin: 0 0 5px;
white-space: nowrap; // 确保单行显示
overflow: hidden; // 隐藏超出部分
text-overflow: ellipsis; // 显示省略号
max-width: 100%; // 限制宽度
}
.dataset-desc {
margin: 0;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 13px;
color: #606266;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.6;
height: 42px;
color: #666666;
line-height: 18px;
text-align: left;
font-style: normal;
margin: 0;
display: -webkit-box; // 支持多行省略
-webkit-line-clamp: 2; // 限制为两行
-webkit-box-orient: vertical; // 垂直方向排列
overflow: hidden; // 隐藏超出部分
text-overflow: ellipsis; // 显示省略号
max-width: 100%; // 限制宽度
}
}
@@ -302,39 +296,6 @@ export default {
display: flex;
border-top: 1px solid #f0f2f5;
background: linear-gradient(to bottom, #fafbfc, #f5f7fa);
.el-button {
flex: 1;
height: 42px;
font-size: 14px;
padding: 0;
border-radius: 0;
position: relative;
color: #606266;
transition: all 0.25s ease;
margin-left: 0;
&:hover {
color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
&.danger:hover {
color: #f56c6c;
background-color: rgba(245, 108, 108, 0.1);
}
&:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background-color: #e8e8e8;
}
}
}
}
</style>