feat(knowledge): 新增分段编辑功能并优化详情页面布局- 在 DocumentDrawer 组件中添加新增分段按钮

- 在 QAModel 和 TextModel 组件中增加分段操作功能
-优化 KnowledgeInfo 组件布局，调整 padding 值

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

@@ -8,8 +8,8 @@
   >
     <!-- drawer title -->
     <template #title>
-      <div class="flex align-items-">
-        <div class="flex">
+      <div class="flex align-items-c">
+        <div class="flex align-items-c">
           <img
             :src="descriptions.dataset.knowledgeImage"
             alt=""
@@ -20,6 +20,10 @@
             {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
           </el-tag>
         </div>
+        <el-button class="line-button ml40" size="medium" icon="el-icon-plus">
+          新增分段
+        </el-button>
+
         <!--        <el-button class="line-button ml10" size="medium">元数据标注</el-button>-->
 
         <!--        <div class="ml10">-->

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

@@ -8,17 +8,42 @@
         :class="{ active: activeSegment === index }"
         @click="handleSegmentClick(index)"
       >
-        <div>
-          <span class="el-icon-s-unfold"></span>
-          <span class="segment-number">分段 - {{ index + 1 }}</span> ·
-          <span v-if="segment.word_count > 0"
-            >{{ segment.word_count }}个字符</span
+        <div class="flex align-items-c justify-content-b" style="gap: 8px">
+          <div class="flex align-items-c " style="gap: 8px">
+            <span class="el-icon-s-unfold"></span>
+            <span class="segment-number">分段 - {{ index + 1 }}</span
+            >·
+            <span v-if="segment.word_count > 0"
+              >{{ segment.word_count }}个字符</span
+            >
+          </div>
+
+          <div
+            class="actions ml10 flex align-items-c mr10"
+            style="gap: 10px"
+            v-if="!noEdit"
           >
+            <!--             删除 编辑-->
+            <!--            <el-icon class="el-icon-edit" @click.native.stop=""></el-icon>-->
+            <!--            <el-icon-->
+            <!--              class="el-icon-delete"-->
+            <!--              @click.native.stop="deleteSegment"-->
+            <!--            ></el-icon>-->
+            <!--            <el-switch-->
+            <!--              size="mini"-->
+            <!--              @click.native.stop=""-->
+            <!--              v-model="segment.enabled"-->
+            <!--            ></el-switch>-->
+          </div>
         </div>
-        <div class="context">
-          <p>Q {{ segment.content }}</p>
-          <p>A {{ segment.answer }}</p>
+
+        <div>
+          <div class="context">
+            <p>Q {{ segment.content }}</p>
+            <p>A {{ segment.answer }}</p>
+          </div>
         </div>
+
         <!--            <div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">-->
         <!--              <p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>-->
         <!--            </div>-->
@@ -74,7 +99,7 @@
               class="mr10"
               size="medium"
               type="info"
-              closable
+              :closable="!noEdit"
               @close="tagClose(item)"
             >
               {{ item }}
@@ -88,7 +113,7 @@
               @keyup.enter.native="handleInputConfirm"
             />
             <el-button
-              v-else
+              v-if="!noEdit && !createdTag"
               size="medium"
               @click="showInput"
               class="fs12"
@@ -100,7 +125,9 @@
       </div>
       <div class="dialog-footer text-right">
         <el-button @click="dialogVisible = false" size="medium">关闭</el-button>
-        <el-button @click="saveUS" size="medium" type="primary">保存</el-button>
+        <el-button @click="saveUS" size="medium" type="primary" v-if="!noEdit"
+          >保存</el-button
+        >
       </div>
     </el-drawer>
   </div>
@@ -111,6 +138,10 @@ import { segmentUpdate } from '@/api/generatedApi'
 export default {
   name: 'QAModel',
   props: {
+    noEdit: {
+      type: Boolean,
+      default: false
+    },
     visible: Boolean,
     descriptions: {
       type: Object,
@@ -130,6 +161,14 @@ export default {
     }
   },
   methods: {
+    deleteSegment() {
+      this.$messageBox(
+        () => {},
+        '是否删除当前分段,删除后不可恢复',
+        'warning',
+        '提示'
+      )
+    },
     saveUS() {
       let params = {
         keywords: this.descriptions.data[this.activeSegment].keywords,

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

@@ -9,18 +9,43 @@
         :class="{ active: activeSegment === index }"
         @click="handleSegmentClick(index)"
       >
-        <!--          <el-checkbox class="mr pt15" :label="index">-->
-        <span class="el-icon-s-unfold"></span>
-        <span class="segment-number"
-          >分段 - {{ (index + 1).toString().padStart(2, '0') }}</span
-        >
-        <span v-if="segment.word_count > 0">
-          · {{ segment.word_count }}个字符 ·</span
-        >
-        <span> {{ 0 }} 次召回次数</span>
+        <div class="flex align-items-c justify-content-b" style="gap: 8px">
+          <div class="flex align-items-c " style="gap: 8px">
+            <!--          <el-checkbox class="mr pt15" :label="index">-->
+            <span class="el-icon-s-unfold"></span>
+            <span class="segment-number"
+              >分段 - {{ (index + 1).toString().padStart(2, '0') }}</span
+            >
+            <span v-if="segment.word_count > 0">
+              · {{ segment.word_count }}个字符 ·</span
+            >
+            <span> {{ segment.hit_count }} 次召回次数</span>
+          </div>
+          <div
+            class="actions ml10 flex align-items-c mr10"
+            style="gap: 10px"
+            v-if="!noEdit"
+          >
+            <!--             删除 编辑-->
+            <!--            <el-icon class="el-icon-edit" @click.native.stop=""></el-icon>-->
+            <!--            <el-icon-->
+            <!--              class="el-icon-delete"-->
+            <!--              @click.native.stop="deleteSegment"-->
+            <!--            ></el-icon>-->
+            <!--            <el-switch-->
+            <!--              size="mini"-->
+            <!--              @click.native.stop=""-->
+            <!--              v-model="segment.enabled"-->
+            <!--            ></el-switch>-->
+          </div>
+        </div>
+
         <!--          </el-checkbox>-->
         <div>
-          <p class="context">{{ segment.content }}</p>
+          <div>
+            <p class="context">{{ segment.content }}</p>
+          </div>
+
           <div
             class="segment-keywords flex"
             v-if="segment.keywords && segment.keywords.length"
@@ -73,7 +98,7 @@
               :key="index"
               class="mr10 ellipsis"
               size="medium"
-              closable
+              :closable="!noEdit"
               type="info"
               @close="tagClose(item)"
             >
@@ -88,7 +113,7 @@
               @keyup.enter.native="handleInputConfirm"
             />
             <el-button
-              v-else
+              v-if="!noEdit && !createdTag"
               size="medium"
               @click="showInput"
               class="fs12"
@@ -100,7 +125,9 @@
       </div>
       <div class="text-right">
         <el-button @click="dialogVisible = false" size="medium">关闭</el-button>
-        <el-button @click="saveUS" size="medium" type="primary">保存</el-button>
+        <el-button @click="saveUS" size="medium" type="primary" v-if="!noEdit"
+          >保存</el-button
+        >
       </div>
     </el-drawer>
   </div>
@@ -111,6 +138,10 @@ import { segmentUpdate } from '@/api/generatedApi'
 export default {
   name: 'TextModel',
   props: {
+    noEdit: {
+      type: Boolean,
+      default: false
+    },
     visible: Boolean,
     descriptions: {
       type: Object,
@@ -131,6 +162,15 @@ export default {
     }
   },
   methods: {
+    deleteSegment() {
+      this.$messageBox(
+        () => {},
+        '是否删除当前分段,删除后不可恢复',
+        'warning',
+        '提示'
+      )
+    },
+
     saveUS() {
       let params = {
         keywords: this.descriptions.data[this.activeSegment].keywords,

src/views/track/Index.vue

@@ -330,6 +330,7 @@ export default {
           </div>
         </div>
         <knowledge-info
+          :noEdit="true"
           :form="activeForm"
           :fullscreen="true"
           :key="activeForm.id"

src/views/track/views/knowledge-info/Index.vue

@@ -16,6 +16,10 @@ export default {
     }
   },
   props: {
+    noEdit: {
+      type: Boolean,
+      default: false
+    },
     fullscreen: {
       type: Boolean,
       default: false
@@ -166,11 +170,13 @@ export default {
           <div class="content-card el-card mt20">
             <div class="knowledge-content" v-if="descriptions">
               <text-model
+                :noEdit="noEdit"
                 v-if="descriptions.doc_form === 'text_model'"
                 :descriptions="descriptions"
                 :parentForm="form"
               />
               <q-a-model
+                :noEdit="noEdit"
                 v-else-if="descriptions.doc_form === 'qa_model'"
                 :descriptions="descriptions"
                 :parentForm="form"
@@ -206,7 +212,7 @@ export default {
 <style lang="scss" scoped>
 .form-container {
   background: #fff;
-  padding: 15px;
+  padding: 5px;
   border-radius: 8px;
   border: 1px solid #ebeef5;
 }