11<script setup lang="ts">
2- import { computed , nextTick , ref , watch } from ' vue'
2+ import { nextTick , ref , watch } from ' vue'
33import type { ProblemItem , ProblemParagraph } from ' @/api/types'
44import MkEditName from ' @/components/mk-edit-name/index.vue'
55import { MsgSuccess } from ' @/utils/message'
66import { useKnowledgeDetailContext } from ' @/views/knowledge-detail/context'
77import { useDocumentDetailContext } from ' @/views/document-detail/context'
88import ParagraphDialog from ' @/views/document-detail/paragraph-dialog/ParagraphDialog.vue'
9- import ProblemParagraphCard from ' ./ProblemParagraphCard.vue '
9+ import { getFileIconUrl } from ' @/utils/icon '
1010
1111defineOptions ({ name: ' ProblemDetailDrawer' })
1212const problem = defineModel <ProblemItem >({ required: true })
13- const props = defineProps <{ hasPrevious: boolean ; hasNext: boolean ; listLoading : boolean }>()
13+ defineProps <{ hasPrevious: boolean ; hasNext: boolean }>()
1414const emit = defineEmits <{ previous: []; next: []; refresh: []; closed: [] }>()
1515const { knowledgeId, resourceApi } = useKnowledgeDetailContext ()
1616const { resourceApi : documentResourceApi } = useDocumentDetailContext ()
@@ -20,7 +20,6 @@ const loadFailed = ref(false)
2020const paragraphs = ref <ProblemParagraph []>([])
2121const selectedParagraph = ref <ProblemParagraph >()
2222const paragraphDialogRef = ref <InstanceType <typeof ParagraphDialog >>()
23- const busy = computed (() => loading .value || props .listLoading )
2423
2524function loadParagraphs() {
2625 loadFailed .value = false
@@ -55,7 +54,7 @@ function handleSaveProblem(content: string): Promise<string> {
5554}
5655
5756function handleUnlinkParagraph(paragraph : ProblemParagraph ) {
58- if (busy .value ) return
57+ if (loading .value ) return
5958 loading .value = true
6059 return (
6160 documentResourceApi .paragraph
@@ -75,7 +74,7 @@ function handleUnlinkParagraph(paragraph: ProblemParagraph) {
7574}
7675
7776async function handleOpenParagraph(paragraph : ProblemParagraph ) {
78- if (busy .value ) return
77+ if (loading .value ) return
7978 selectedParagraph .value = paragraph
8079 // 先挂载带有当前文档 ID 的详情弹窗,再调用其已有打开方法。
8180 await nextTick ()
@@ -90,7 +89,7 @@ function handleParagraphClosed() {
9089}
9190
9291function handleBeforeClose(done : () => void ) {
93- if (! busy .value ) done ()
92+ if (! loading .value ) done ()
9493}
9594
9695watch (
@@ -113,7 +112,28 @@ watch(
113112 <div class =" mb-2" >关联分段数({{ problem.paragraph_count }})</div >
114113 <div v-if =" paragraphs.length" class =" flex-column gap-3" >
115114 <template v-for =" paragraph in paragraphs " :key =" paragraph .id " >
116- <ProblemParagraphCard :paragraph =" paragraph " :disabled =" busy " @open =" handleOpenParagraph " @unlink =" handleUnlinkParagraph " />
115+ <!-- 查看关联分段详情 -->
116+ <el-card class =" mk-paragraph-card group relative cursor-pointer" shadow =" never" @click =" handleOpenParagraph(paragraph)" >
117+ <h4 class =" mb-2 truncate pr-8" :title =" paragraph.title || '-'" >{{ paragraph.title || '-' }}</h4 >
118+ <p class =" mb-3 line-clamp-2 break-words" :title =" paragraph.content" >{{ paragraph.content }}</p >
119+ <div class =" flex-align-center gap-2 text-sm text-N500" >
120+ <span class =" shrink-0" >{{ paragraph.content.length }} 字符</span >
121+ <el-divider direction =" vertical" />
122+ <img :src =" getFileIconUrl(paragraph.document_name)" class =" size-4 shrink-0" alt =" " />
123+ <span class =" truncate" :title =" paragraph.document_name" >{{ paragraph.document_name }}</span >
124+ </div >
125+ <!-- 取消当前问题与分段的关联,不删除分段 -->
126+ <MkTooltip content="取消关联" placement="top">
127+ <el-button
128+ circle
129+ class =" group-hover-visible absolute top-3 right-3 shadow-md"
130+ :disabled =" loading"
131+ @click.stop =" handleUnlinkParagraph(paragraph)"
132+ >
133+ <MkIcon name="icon_unlink_outlined" />
134+ </el-button >
135+ </MkTooltip >
136+ </el-card >
117137 </template >
118138 </div >
119139 <MkEmpty v-else-if =" ! loading " description="暂无关联分段" />
@@ -122,9 +142,9 @@ watch(
122142 <!-- 关联分段:TODO -->
123143 <el-button plain >关联分段</el-button >
124144 <!-- 查看上一个问题 -->
125- <el-button plain :disabled =" busy || !hasPrevious" @click =" emit('previous')" >上一个</el-button >
145+ <el-button plain :disabled =" loading || !hasPrevious" @click =" emit('previous')" >上一个</el-button >
126146 <!-- 查看下一个问题 -->
127- <el-button plain :disabled =" busy || !hasNext" @click =" emit('next')" >下一个</el-button >
147+ <el-button plain :disabled =" loading || !hasNext" @click =" emit('next')" >下一个</el-button >
128148 </template >
129149 </MkDrawer >
130150 <ParagraphDialog
0 commit comments