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

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

src/assets/js/utils/permission.js

@@ -13,17 +13,17 @@ router.beforeEach(async (to, from, next) => {
   if (hasToken) {
     next()
   } else {
-      if (to.path.indexOf('/home') !== -1) {
+    if (to.path.indexOf('/home') !== -1) {
-        next(`/authentication?redirect=${to.path}`)
+      next(`/authentication?redirect=${to.path}`)
+    } else {
+      if (whiteList.indexOf(to.path) !== -1) {
+        next()
       } else {
-        if (whiteList.indexOf(to.path) !== -1) {
+        next()
-          next()
+        NProgress.done()
-        } else {
-          next()
-          NProgress.done()
-        }
       }
     }
+  }
 })
 
 router.afterEach(() => {

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,34 +21,37 @@
         <!--                  <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">
+    <!-- 弹窗 -->
-        <div>
+    <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>
-            <p>QUESTION</p>
+            <div>
-            <p>{{ descriptions.data[activeSegment].content }}</p>
+              <p>QUESTION</p>
+              <p>{{ descriptions.data[activeSegment].content }}</p>
+            </div>
+            <div>
+              <p>ANSWER</p>
+              <p>{{ descriptions.data[activeSegment].answer }}</p>
+            </div>
           </div>
-          <div>
+          <div
-            <p>ANSWER</p>
+            class="flex align-items-c mt20"
-            <p>{{ descriptions.data[activeSegment].answer }}</p>
+            v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length"
+            style="width: max-content"
+          >
+            <span>关键词 ：</span>
+            <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
-          class="flex align-items-c mt20"
-          v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length"
-          style="width: max-content"
-        >
-          <span>关键词 ：</span>
-          <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>
+      <span slot="footer" class="dialog-footer">
-      <div class="segment-empty" v-else>
+        <el-button @click="dialogVisible = false">关 闭</el-button>
-        <el-empty description="请选择左侧分段查看详情"></el-empty>
+      </span>
-      </div>
+    </el-dialog>
-    </div>
   </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,25 +18,28 @@
         <!--                  <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 }}
+    <el-dialog title="分段详情" :visible.sync="dialogVisible" width="50%" append-to-body :before-close="handleClose">
-        <div
+      <div v-if="activeSegment !== null && descriptions.data && descriptions.data.length > 0">
-          class="flex align-items-c mt20"
+        <div class="segment-content">
-          v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length"
+          {{ descriptions.data[activeSegment].content }}
-          style="width: max-content"
+          <div
-        >
+            class="flex align-items-c mt20"
-          <span>关键词 ：</span>
+            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">
+            style="width: max-content"
-            {{ item }}
+          >
-          </el-tag>
+            <span>关键词 ：</span>
+            <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>
-      <div v-if="activeSegment !== null"></div>
+      <span slot="footer" class="dialog-footer">
-      <div class="segment-empty" v-else>
+        <el-button @click="dialogVisible = false">关 闭</el-button>
-        <el-empty description="请选择左侧分段查看详情"></el-empty>
+      </span>
-      </div>
+    </el-dialog>
-    </div>
   </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>