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-09 10:56:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(knowledge): 重构知识详情页面布局和交互

Browse Source 
- 修改权限控制逻辑，简化代码结构- 重新设计 QAModel 和 TextModel 组件的布局
- 添加弹窗功能，用于展示分段详情
- 优化分段列表样式，增加边框和调整间距
- 移除不必要的空 div 元素，提高代码可读性
This commit is contained in:
du.meimei
2025-04-22 10:00:31 +08:00
parent cee557b14e
commit 5a42c3803a
3 changed files with 90 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/knowledge/detail/components/documentDetail/QAModel.vue
View File

@@ -6,7 +6,7 @@
:key="index"
class="segment-list-item"
:class="{ active: activeSegment === index }"
@click="activeSegment = index"
@click="handleSegmentClick(index)"
>
<div>
<span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
@@ -21,8 +21,11 @@
<!-- <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">
<!-- 弹窗 -->
<el-dialog title="问答详情" :visible.sync="dialogVisible" width="50%" append-to-body :before-close="handleClose">
<div v-if="activeSegment !== null && descriptions.data && descriptions.data.length > 0">
<div class="segment-content">
<div>
<div>
<p>QUESTION</p>
@@ -44,11 +47,11 @@
</el-tag>
</div>
</div>
<div v-if="activeSegment !== null"></div>
<div class="segment-empty" v-else>
<el-empty description="请选择左侧分段查看详情"></el-empty>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
@@ -63,29 +66,40 @@ export default {
},
data() {
return {
activeSegment: 0
activeSegment: null,
dialogVisible: false
}
},
methods: {
handleSegmentClick(index) {
this.activeSegment = index
this.dialogVisible = true
},
handleClose() {
this.dialogVisible = false
}
}
}
</script>
<style scoped lang="scss">
.segment-split-view {
display: flex;
display: block;
}
.segment-list {
//flex: 1;
width: 45%;
margin-right: 10px;
width: 100%;
height: 400px;
overflow-y: auto;
}
.segment-list-item {
cursor: pointer;
margin-bottom: 10px;
padding: 15px 0 10px 15px;
border-radius: 15px;
transition: background-color 0.3s;
font-size: 14px;
border: 1px solid #f3f5f7;
margin-bottom: 20px;
&:hover {
background: #f3f5f7;
}
@@ -107,10 +121,6 @@ export default {
}
}
.segment-detail {
width: 55%;
}
.segment-content {
padding: 20px;
background: #f9f9f9;
@@ -119,9 +129,4 @@ export default {
line-height: 35px;
color: #666;
}
.segment-empty {
padding: 10px;
text-align: center;
}
</style>

49
src/views/knowledge/detail/components/documentDetail/TextModel.vue
View File

@@ -6,7 +6,7 @@
:key="index"
class="segment-list-item"
:class="{ active: activeSegment === index }"
@click="activeSegment = index"
@click="handleSegmentClick(index)"
>
<div>
<span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
@@ -18,8 +18,11 @@
<!-- <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">
<!-- 弹窗 -->
<el-dialog title="分段详情" :visible.sync="dialogVisible" width="50%" append-to-body :before-close="handleClose">
<div v-if="activeSegment !== null && descriptions.data && descriptions.data.length > 0">
<div class="segment-content">
{{ descriptions.data[activeSegment].content }}
<div
class="flex align-items-c mt20"
@@ -32,11 +35,11 @@
</el-tag>
</div>
</div>
<div v-if="activeSegment !== null"></div>
<div class="segment-empty" v-else>
<el-empty description="请选择左侧分段查看详情"></el-empty>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
@@ -51,29 +54,40 @@ export default {
},
data() {
return {
activeSegment: 0
activeSegment: null,
dialogVisible: false
}
},
methods: {
handleSegmentClick(index) {
this.activeSegment = index
this.dialogVisible = true
},
handleClose() {
this.dialogVisible = false
}
}
}
</script>
<style scoped lang="scss">
.segment-split-view {
display: flex;
display: block;
}
.segment-list {
//flex: 1;
width: 45%;
margin-right: 10px;
width: 100%;
height: 400px;
overflow-y: auto;
}
.segment-list-item {
cursor: pointer;
margin-bottom: 10px;
padding: 15px 0 10px 15px;
border-radius: 15px;
transition: background-color 0.3s;
font-size: 14px;
border: 1px solid #f3f5f7;
margin-bottom: 20px;
&:hover {
background: #f3f5f7;
}
@@ -96,10 +110,6 @@ export default {
}
}
.segment-detail {
width: 55%;
}
.segment-content {
padding: 20px;
background: #f9f9f9;
@@ -108,9 +118,4 @@ export default {
line-height: 35px;
color: #666;
}
.segment-empty {
padding: 10px;
text-align: center;
}
</style>