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-10 03:16:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(src): 重构知识库详情页面样式

Browse Source 
- 更新了知识库详情页面的布局和样式，使其更加简洁和现代化
-调整了表单元素的样式，使用了新的输入框和按钮样式
- 优化了分段内容的显示样式，使其更易于阅读
- 移除了不必要的元素和冗余代码，提高了页面的可维护性
This commit is contained in:
陈昱达
2025-04-23 20:31:57 +08:00
parent 37ad5091a5
commit 673470d93f
8 changed files with 293 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/views/knowledge/detail/index.vue
View File

@@ -1,90 +1,86 @@
<template>
<div class="container index-container">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<div class=" render-container">
<div class="clearfix flex align-items-c justify-content-b ">
<img :src="knowledgePng_1" class="header-icon" />
<div class="ml20" style="flex:1">
<div class="flex align-items-c">
<h3 class="mr20" v-if="!editKnowledge">{{ knowledgeName }}</h3>
<el-input class="mr20 w400" size="medium" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input>
<el-icon class="fs20 el-icon-edit cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge" />
<div class="mr20 header" v-if="!editKnowledge">{{ knowledgeName }}</div>
<el-input class="mr20 w400" size="small" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input>
<el-icon class="fs16 el-icon-edit-outline cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge" />
<div v-else>
<el-button type="primary" size="medium" @click="saveKnowledgeName">保存</el-button>
<el-button size="medium" @click="cancelKnowledgeName">取消</el-button>
<el-button type="primary" class="render-button" @click="saveKnowledgeName">保存</el-button>
<el-button class="render-button" @click="cancelKnowledgeName">取消</el-button>
</div>
<span class="segment-content">{{ segmentedMode | filterSegmentedMode }}</span>
</div>
<p class="mt10 fs14" style="line-height: 20px">描述：{{ knowledgeDesc }}</p>
<p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode | filterSegmentedMode }}</p>
<el-button type="text" class="mt10" @click="jumpEditKnowledge">修改知识库</el-button>
<el-button type="text" class="mt10" @click="jumpAddKnowledge">上传知识</el-button>
<!-- <p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode | filterSegmentedMode }}</p>-->
</div>
<div class="card-body">
<el-empty v-if="!hasList">
<div class="mt20">
<el-button type="primary" size="medium" class="fs14" @click="jumpAddKnowledge">立即添加</el-button>
</div>
</el-empty>
<div class="table-container" v-else>
<div class="">
<el-form :model="form" label-width="100px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="知识文件名称" prop="fileName">
<el-input v-model="form.knowledgeNameLike" placeholder="请输入知识文件名称" @keydown.enter.native="search"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="知识文件来源" prop="documentSource">
<el-select v-model="form.documentSource" placeholder="请输入知识文件名称">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="上传用户" prop="createdUserLike">
<el-select v-model="form.createdUserLike" placeholder="请输入知识文件名称" disabled>
<el-option label="暂无用户" value=""></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="关键字">
<el-input v-model="form.name" placeholder="请输入关键字/敏感词" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上传时间" prop="times">
<el-date-picker
style="width:100%"
v-model="form.times"
value-format="yyyy-MM-dd"
start-placeholder="开始时间"
end-placeholder="结束时间"
type="daterange"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20 text-center">
<el-button size="medium" type="primary" @click="search">查询</el-button>
<el-button size="medium" @click="reset">重置</el-button>
</el-col>
</el-row>
</el-form>
</div>
<r-table
:columns="columns"
:data="list"
:deletion="false"
:total="total"
@page-change="pageChange"
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
></r-table>
<div>
<!-- <el-button type="primary" size="medium" class="normal-button" @click="jumpEditKnowledge">修改知识库</el-button>-->
<el-button type="primary" size="medium" icon="el-icon-edit-outline" class="render-button primary-button" @click="jumpEditKnowledge"
>修改知识库</el-button
>
<el-button type="primary" size="medium" icon="el-icon-plus" class="render-button primary-button" @click="jumpAddKnowledge">上传知识</el-button>
</div>
</div>
<div class="mt20 card-body">
<el-empty v-if="!hasList">
<div class="mt20">
<el-button type="primary" size="medium" class="fs14" @click="jumpAddKnowledge">立即添加</el-button>
</div>
</el-empty>
<div class="table-container" v-else>
<div class="flex align-items-c justify-content-b">
<el-form :model="form" label-width="100px" label-position="top" inline>
<el-form-item label="知识文件名称" prop="fileName">
<el-input v-model="form.knowledgeNameLike" size="medium" placeholder="请输入知识文件名称" @keydown.enter.native="search"></el-input>
</el-form-item>
<el-form-item label="知识文件来源" prop="documentSource">
<el-select v-model="form.documentSource" placeholder="请输入知识文件名称" size="medium">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="上传用户" prop="createdUserLike">
<el-select v-model="form.createdUserLike" placeholder="请输入知识文件名称" disabled size="medium">
<el-option label="暂无用户" value=""></el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字">
<el-input v-model="form.name" placeholder="请输入关键字/敏感词" disabled size="medium"></el-input>
</el-form-item>
<el-form-item label="上传时间" prop="times">
<el-date-picker
size="medium"
style="width:100%"
v-model="form.times"
value-format="yyyy-MM-dd"
start-placeholder="开始时间"
end-placeholder="结束时间"
type="daterange"
></el-date-picker>
</el-form-item>
</el-form>
<div class="mt15">
<el-button class="render-button" type="primary" @click="search">查询</el-button>
<el-button class="render-button" @click="reset">重置</el-button>
</div>
</div>
<r-table
:columns="columns"
:data="list"
:deletion="false"
:total="total"
@page-change="pageChange"
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
></r-table>
</div>
</el-card>
</div>
<document-drawer
:visible.sync="drawer"
:descriptions="descriptions"
@@ -101,11 +97,12 @@ import { datasetDocumentEx, datasetQueryDelete, datasetQuerySegments, datasetsEx
import { documentSourceOptions, segmentedModeOptionsMap } from '@/assets/js/utils/utilOptions'
import DocumentDrawer from './components/documentDetail/DocumentDrawer.vue'
import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
import knowledgePng_1 from '@/assets/images/konwledge/konwledge-1.png'
export default {
name: 'index',
data() {
return {
knowledgePng_1,
datasetId: this.$route.query.datasetId,
activeName: -1,
drawer: false,
@@ -647,16 +644,42 @@ export default {
}
.segment-content {
padding: 20px;
background: #f9f9f9;
border-radius: 15px;
//white-space: pre-wrap;
line-height: 35px;
color: #666;
background: #f6f8fa;
border-radius: 4px;
font-family: PingFangSC;
font-size: 12px;
color: #4e5969;
line-height: 17px;
text-align: left;
font-style: normal;
margin-left: 20px;
padding: 2px 5px;
}
.segment-empty {
padding: 10px;
text-align: center;
}
.clearfix {
padding-bottom: 20px;
position: relative;
&:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
border-bottom: 1px solid #979797;
// 宽度缩小
transform: scaleY(0.2);
}
& .header {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 16px;
color: #000000;
text-align: left;
font-style: normal;
}
}
</style>