From 5a42c3803a89c7c013497f4de17623139a14dc17 Mon Sep 17 00:00:00 2001
From: "du.meimei" <du.meimei@ebiz-digits.com>
Date: Tue, 22 Apr 2025 10:00:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor(knowledge):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E7=9F=A5=E8=AF=86=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改权限控制逻辑，简化代码结构- 重新设计 QAModel 和 TextModel 组件的布局
- 添加弹窗功能，用于展示分段详情
- 优化分段列表样式，增加边框和调整间距
- 移除不必要的空 div 元素，提高代码可读性
---
 src/assets/js/utils/permission.js             | 16 ++--
 .../components/documentDetail/QAModel.vue     | 83 ++++++++++---------
 .../components/documentDetail/TextModel.vue   | 71 ++++++++--------
 3 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/src/assets/js/utils/permission.js b/src/assets/js/utils/permission.js
index 0ab9bc5..3aa5f78 100644
--- a/src/assets/js/utils/permission.js
+++ b/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) {
-        next(`/authentication?redirect=${to.path}`)
+    if (to.path.indexOf('/home') !== -1) {
+      next(`/authentication?redirect=${to.path}`)
+    } else {
+      if (whiteList.indexOf(to.path) !== -1) {
+        next()
       } else {
-        if (whiteList.indexOf(to.path) !== -1) {
-          next()
-        } else {
-          next()
-          NProgress.done()
-        }
+        next()
+        NProgress.done()
       }
     }
+  }
 })
 
 router.afterEach(() => {
diff --git a/src/views/knowledge/detail/components/documentDetail/QAModel.vue b/src/views/knowledge/detail/components/documentDetail/QAModel.vue
index c96e7f8..d0d8346 100644
--- a/src/views/knowledge/detail/components/documentDetail/QAModel.vue
+++ b/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>
-            <p>{{ descriptions.data[activeSegment].content }}</p>
+            <div>
+              <p>QUESTION</p>
+              <p>{{ descriptions.data[activeSegment].content }}</p>
+            </div>
+            <div>
+              <p>ANSWER</p>
+              <p>{{ descriptions.data[activeSegment].answer }}</p>
+            </div>
           </div>
-          <div>
-            <p>ANSWER</p>
-            <p>{{ descriptions.data[activeSegment].answer }}</p>
+          <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
-          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>
-      <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>
diff --git a/src/views/knowledge/detail/components/documentDetail/TextModel.vue b/src/views/knowledge/detail/components/documentDetail/TextModel.vue
index f037f99..558d365 100644
--- a/src/views/knowledge/detail/components/documentDetail/TextModel.vue
+++ b/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 }}
-        <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>
+
+    <!-- 弹窗 -->
+    <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"
+            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>
-      <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>