refactor(views): 修改知识文件详情页面布局

-调整了多个组件的输入框、按钮等元素的样式- 优化了部分布局结构，提高了可读性和易用性- 统一了表单样式和表格样式
- 调整了面包屑和标签页的样式

src/views/knowledge/detail/index.vue

@@ -5,8 +5,7 @@
         <div class="flex align-items-c">
           <h3 class="mr20" v-if="!editKnowledge">{{ knowledgeName }}</h3>
           <el-input class="mr20 w400" size="medium" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input>
-          <el-icon class="fs20 el-icon-edit cursor-pointer" @click.native="editKnowledgeName"
-                   v-if="!editKnowledge"/>
+          <el-icon class="fs20 el-icon-edit cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge" />
           <div v-else>
             <el-button type="primary" size="medium" @click="saveKnowledgeName">保存</el-button>
             <el-button size="medium" @click="cancelKnowledgeName">取消</el-button>
@@ -30,16 +29,14 @@
               <el-row :gutter="20">
                 <el-col :span="6">
                   <el-form-item label="知识文件名称" prop="fileName">
-                    <el-input v-model="form.knowledgeNameLike" placeholder="请输入知识文件名称"
-                              @keydown.enter.native="search"></el-input>
+                    <el-input v-model="form.knowledgeNameLike" placeholder="请输入知识文件名称" @keydown.enter.native="search"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="6">
                   <el-form-item label="知识文件来源" prop="documentSource">
                     <el-select v-model="form.documentSource" placeholder="请输入知识文件名称">
                       <el-option label="全部" value=""></el-option>
-                      <el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value"
-                                 :key="item.value"></el-option>
+                      <el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -58,9 +55,14 @@
 
                 <el-col :span="12">
                   <el-form-item label="上传时间" prop="times">
-                    <el-date-picker style="width:100%" v-model="form.times" value-format="yyyy-MM-dd"
-                                    start-placeholder="开始时间" end-placeholder="结束时间"
-                                    type="daterange"></el-date-picker>
+                    <el-date-picker
+                      style="width:100%"
+                      v-model="form.times"
+                      value-format="yyyy-MM-dd"
+                      start-placeholder="开始时间"
+                      end-placeholder="结束时间"
+                      type="daterange"
+                    ></el-date-picker>
                   </el-form-item>
                 </el-col>
                 <el-col :span="24" class="mb20 text-center">
@@ -70,8 +72,16 @@
               </el-row>
             </el-form>
           </div>
-          <r-table :columns="columns" :data="list" :deletion="false" :total="total" @page-change="pageChange"
-                   @current-change="currentChange" :current-page="page" :page-size="pageSize"></r-table>
+          <r-table
+            :columns="columns"
+            :data="list"
+            :deletion="false"
+            :total="total"
+            @page-change="pageChange"
+            @current-change="currentChange"
+            :current-page="page"
+            :page-size="pageSize"
+          ></r-table>
         </div>
       </div>
     </el-card>
@@ -163,22 +173,29 @@
 
           <div class="segment-split-view">
             <div class="segment-list">
-              <div v-for="(segment, index) in descriptions.data" :key="index" class="segment-list-item"
-                   :class="{ active: activeSegment === index }" @click="activeSegment = index">
-                <div class="segment-title">
-                  <span class="segment-number">分段{{ index + 1 }}</span>
-                  <!--                  <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
+              <div
+                v-for="(segment, index) in descriptions.data"
+                :key="index"
+                class="segment-list-item"
+                :class="{ active: activeSegment === index }"
+                @click="activeSegment = index"
+              >
+                <div>
+                  <span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
                 </div>
+                <p>{{ segment.content.slice(0, 20) + '.....' }}</p>
+                <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>
+                <!--                  <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"
-                     v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length">
+                <div class="flex align-items-c mt20" 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">
+                  <el-tag v-for="(item, index) in descriptions.data[activeSegment].keywords" :key="index" class="mr10" size="mini" type="primary">
                     {{ item }}
                   </el-tag>
                 </div>
@@ -195,14 +212,7 @@
   </div>
 </template>
 <script>
-import {
-  datasetDocumentEx,
-  datasetQueryDelete,
-  datasetQuerySegments,
-  datasetsExPages,
-  datasetUpdate,
-  getDatasetById
-} from '@/api/generatedApi/index'
+import { datasetDocumentEx, datasetQueryDelete, datasetQuerySegments, datasetsExPages, datasetUpdate, getDatasetById } from '@/api/generatedApi/index'
 import { documentSourceOptions, segmentedModeOptionsMap } from '@/assets/js/utils/utilOptions'
 
 export default {
@@ -436,8 +446,7 @@ export default {
       return item ? item.label : '否'
     }
   },
-  created() {
-  },
+  created() {},
   async mounted() {
     this.getKnowledgeDetail()
     // 获取知识库文件列表
@@ -608,7 +617,7 @@ export default {
         display: inline-block;
         margin: 0 8px 0 0;
         font-weight: bold;
-        color: #409eff;
+        color: #666;
       }
 
       &:last-child {
@@ -645,7 +654,7 @@ export default {
 
 .el-collapse-item__header {
   font-weight: bold;
-  color: #409eff;
+  //color: #409eff;
 }
 
 .mr10 {
@@ -700,49 +709,47 @@ export default {
 }
 
 .segment-list {
-  width: 250px;
-  padding-right: 20px;
+  //flex: 1;
+  width: 45%;
+  margin-right: 10px;
 }
 
 .segment-list-item {
-  padding: 10px;
   cursor: pointer;
+  margin-bottom: 10px;
+  padding: 15px 0 10px 15px;
+  border-radius: 15px;
   transition: background-color 0.3s;
-
+  font-size: 14px;
   &:hover {
-    background-color: #f0f0f0;
+    background: #f3f5f7;
   }
 
   &.active {
-    background-color: #e6f7ff;
+    background: #f3f5f7;
   }
-
-  .segment-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .segment-number {
-      font-weight: bold;
-      color: #999;
-    }
-
-    .segment-chars {
-      color: #606266;
-    }
+  p {
+    margin: 10px 0;
+  }
+  .segment-number {
+    color: #0a84ff;
+  }
+  .segment-keywords {
+    color: #606266;
   }
 }
 
 .segment-detail {
-  flex: 1;
+  width: 55%;
 }
 
 .segment-content {
-  padding: 10px;
+  padding: 20px;
   background: #f9f9f9;
-  border-radius: 4px;
-  line-height: 1.6;
-  white-space: pre-wrap;
+  border-radius: 15px;
+  //white-space: pre-wrap;
+  line-height: 35px;
+  color: #666;
 }
 
 .segment-empty {