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(knowledge): 重构知识库详情页面

Browse Source 
- 将 DocumentDrawer 组件抽离为独立模块
- 新增 QAModel 和 TextModel 组件用于展示不同类型的分段内容
- 优化知识库详情页面的结构和样式- 提升代码的可维护性和可复用性
This commit is contained in:
du.meimei
2025-04-17 17:41:17 +08:00
parent e143bc902e
commit 783c06f9f5
7 changed files with 577 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,135 +85,19 @@
</div>
</div>
</el-card>
<el-drawer :visible.sync="drawer" size="80%" :title="descriptions.knowledgeName">
<div class="drawer-content">
<div class="file-header">
<div class="file-icon">
<i class="el-icon-document"></i>
</div>
<div class="file-info">
<h3>{{ descriptions.fileName || descriptions.knowledgeName }}</h3>
<el-tag type="primary" class="mr10">{{ getDocumentSourceLabel(descriptions.documentSource) }}</el-tag>
<el-tag type="info">{{ descriptions.createdDate }}</el-tag>
</div>
</div>
<el-divider></el-divider>
<div class="segment-info">
<div class="segment-header">
<h4>分段规则</h4>
</div>
<div class="rule-card">
<div class="rule-item">
<h5>是否使用预处理:</h5>
<span>{{ descriptions.usePreProcess | filterUseMineru }}</span>
</div>
<div class="rule-item">
<h5>是否使用OCR协助处理:</h5>
<span>{{ descriptions.useOcr | filterUseMineru }}</span>
</div>
<div class="rule-item">
<h5>知识拆分规则:</h5>
<span v-if="!documentDetail.splitRules">
-
</span>
<div v-else>
<div v-for="item in documentDetail.splitRules" :key="item.id" class="rule-detail-item">
<p>
<span class="rule-label">样式:</span> <span class="rule-value">{{ item.titleLevel }}</span>
</p>
<p>
<span class="rule-label">关键词:</span> <span class="rule-value">{{ item.ruleRegex }}</span>
</p>
<p>
<span class="rule-label">备注:</span> <span class="rule-value">{{ item.description }}</span>
</p>
</div>
</div>
</div>
<div class="rule-item">
<h5>知识题词规则:</h5>
<span v-if="!documentDetail.extractRules">
-
</span>
<div v-else>
<div v-for="item in documentDetail.extractRules" :key="item.id" class="rule-detail-item">
<p>
<span class="rule-label">属性:</span> <span class="rule-value">{{ item.attribute }}</span>
</p>
<p>
<span class="rule-label">属性描述:</span><span class="rule-value">{{ item.attributeDesc }}</span>
</p>
<p>
<span class="rule-label">关键词:</span> <span class="rule-value">{{ item.keyword }}</span>
</p>
<p>
<span class="rule-label">关键词示例:</span> <span class="rule-value">{{ item.example }}</span>
</p>
<p>
<span class="rule-label">提示词:</span> <span class="rule-value">{{ item.prompt }}</span>
</p>
</div>
</div>
</div>
</div>
</div>
<el-divider></el-divider>
<div class="segment-content-container">
<div class="segment-header mb15">
<h4>分段内容</h4>
<div class="segment-summary">
<span>共{{ descriptions.data ? descriptions.data.length : 0 }}个分段</span>
</div>
</div>
<div class="segment-split-view">
<div class="segment-list">
<div
v-for="(segment, index) in descriptions.data"
:key="index"
class="segment-list-item"
:class="{ active: activeSegment === index }"
@click="activeSegment = index"
>
<div>
<span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
</div>
<p>{{ segment.content.slice(0, 20) + '.....' }}</p>
<div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">
<p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>
</div>
<!-- <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
</div>
</div>
<div class="segment-detail" v-if="descriptions.data && descriptions.data.length > 0">
<div class="segment-content" v-if="activeSegment !== null">
{{ descriptions.data[activeSegment].content }}
<div class="flex align-items-c mt20" v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length">
关键词 ：
<el-tag v-for="(item, index) in descriptions.data[activeSegment].keywords" :key="index" class="mr10" size="mini" type="primary">
{{ item }}
</el-tag>
</div>
</div>
<div v-if="activeSegment !== null"></div>
<div class="segment-empty" v-else>
<el-empty description="请选择左侧分段查看详情"></el-empty>
</div>
</div>
</div>
</div>
</div>
</el-drawer>
<document-drawer
:visible.sync="drawer"
:descriptions="descriptions"
:document-detail="documentDetail"
:active-segment="activeSegment"
@update:visible="val => (drawer = val)"
/>
</div>
</template>
<script>
import { datasetDocumentEx, datasetQueryDelete, datasetQuerySegments, datasetsExPages, datasetUpdate, getDatasetById } from '@/api/generatedApi/index'
import { documentSourceOptions, segmentedModeOptionsMap } from '@/assets/js/utils/utilOptions'
import DocumentDrawer from './components/documentDetail/DocumentDrawer.vue'
export default {
name: 'index',
@@ -251,7 +135,9 @@ export default {
},
props: {},
watch: {},
components: {},
components: {
DocumentDrawer
},
methods: {
// 开启编辑 知识库标题
editKnowledgeName() {
@@ -629,8 +515,9 @@ export default {
margin-top: 8px;
padding: 10px;
background: #f9f9f9;
border-radius: 4px;
border-radius: 8px;
border: 1px solid #e0e0e0;
margin-right: 10px;
p {
margin: 5px 0;