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

- 修改权限控制逻辑，简化代码结构- 重新设计 QAModel 和 TextModel 组件的布局
- 添加弹窗功能，用于展示分段详情
- 优化分段列表样式，增加边框和调整间距
- 移除不必要的空 div 元素，提高代码可读性

src/views/knowledge/detail/components/documentDetail/QAModel.vue

@@ -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: 100%;
-  width: 45%;
+  height: 400px;
-  margin-right: 10px;
+  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>

src/views/knowledge/detail/components/documentDetail/TextModel.vue

@@ -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: 100%;
-  width: 45%;
+  height: 400px;
-  margin-right: 10px;
+  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>