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

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

src/components/Breadcrumb/index.vue

@@ -3,8 +3,7 @@
     <transition-group name="breadcrumb">
       <!--      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">-->
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">
-        <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1"
+        <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect fs16">{{ item.meta.title }}</span>
-              class="no-redirect fs16">{{ item.meta.title }}</span>
         <span v-else>{{ item.meta.title }}</span>
       </el-breadcrumb-item>
     </transition-group>

src/components/RenderMinerU/index.vue

@@ -2,14 +2,7 @@
   <div style="height: 100%;">
     <div class="mv10 mh20 text-right" v-if="isEdit">
       <!-- 重试按钮 -->
-      <el-button 
+      <el-button type="" size="medium" @click="retryMiner" :disabled="finishedMiner" style="margin-right: 10px;" plain>重试</el-button>
-        type="" 
-        size="medium" 
-        @click="retryMiner" 
-        :disabled="finishedMiner"
-        style="margin-right: 10px;"
-        plain
-      >重试</el-button>
       <!-- 保存并处理按钮 -->
       <el-button type="primary" size="medium" @click="saveMarkDown" :disabled="finishedMiner">保存并处理</el-button>
     </div>
@@ -302,16 +295,18 @@ export default {
     },
     // 重试方法
     retryMiner() {
-      minerURetry({ documentId: this.documentId }).then(res => {
+      minerURetry({ documentId: this.documentId })
-        this.$message({
+        .then(res => {
-          message: '正在重新预处理',
+          this.$message({
-          type: 'success'
+            message: '正在重新预处理',
-        });
+            type: 'success'
-        this.finishedMiner = true;
+          })
-        this.getMinerUStatus(); // 重新查询状态
+          this.finishedMiner = true
-      }).catch(() => {
+          this.getMinerUStatus() // 重新查询状态
-        this.$message.error('重试操作失败');
+        })
-      });
+        .catch(() => {
+          this.$message.error('重试操作失败')
+        })
     }
   },
   created() {},

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"
+          <el-icon class="fs20 el-icon-edit cursor-pointer" @click.native="editKnowledgeName" v-if="!editKnowledge" />
-                   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="请输入知识文件名称"
+                    <el-input v-model="form.knowledgeNameLike" placeholder="请输入知识文件名称" @keydown.enter.native="search"></el-input>
-                              @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"
+                      <el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
-                                 :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"
+                    <el-date-picker
-                                    start-placeholder="开始时间" end-placeholder="结束时间"
+                      style="width:100%"
-                                    type="daterange"></el-date-picker>
+                      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"
+          <r-table
-                   @current-change="currentChange" :current-page="page" :page-size="pageSize"></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"
+              <div
-                   :class="{ active: activeSegment === index }" @click="activeSegment = index">
+                v-for="(segment, index) in descriptions.data"
-                <div class="segment-title">
+                :key="index"
-                  <span class="segment-number">分段{{ index + 1 }}</span>
+                class="segment-list-item"
-                  <!--                  <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
+                :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"
+                <div class="flex align-items-c mt20" v-if="descriptions.data[activeSegment].keywords && descriptions.data[activeSegment].keywords.length">
-                     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"
+                  <el-tag v-for="(item, index) in descriptions.data[activeSegment].keywords" :key="index" class="mr10" size="mini" type="primary">
-                          size="mini" type="primary">
                     {{ item }}
                   </el-tag>
                 </div>
@@ -195,14 +212,7 @@
   </div>
 </template>
 <script>
-import {
+import { datasetDocumentEx, datasetQueryDelete, datasetQuerySegments, datasetsExPages, datasetUpdate, getDatasetById } from '@/api/generatedApi/index'
-  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;
+  //flex: 1;
-  padding-right: 20px;
+  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;
   }
-
+  p {
-  .segment-title {
+    margin: 10px 0;
-    display: flex;
+  }
-    justify-content: space-between;
+  .segment-number {
-    align-items: center;
+    color: #0a84ff;
-
+  }
-    .segment-number {
+  .segment-keywords {
-      font-weight: bold;
+    color: #606266;
-      color: #999;
-    }
-
-    .segment-chars {
-      color: #606266;
-    }
   }
 }
 
 .segment-detail {
-  flex: 1;
+  width: 55%;
 }
 
 .segment-content {
-  padding: 10px;
+  padding: 20px;
   background: #f9f9f9;
-  border-radius: 4px;
+  border-radius: 15px;
-  line-height: 1.6;
+  //white-space: pre-wrap;
-  white-space: pre-wrap;
+  line-height: 35px;
+  color: #666;
 }
 
 .segment-empty {

src/views/rules/Index.vue

@@ -104,8 +104,7 @@ export default {
   },
   watch: {
     form: {
-      handler() {
+      handler() {},
-      },
       deep: true
     }
   },
@@ -233,8 +232,7 @@ export default {
               <el-form-item label="规则类型">
                 <el-select v-model="form.ruleType" placeholder="请选择规则类型">
                   <el-option label="全部规则" value="">全部规则</el-option>
-                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item"
+                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item" :value="reverseRuleType(item)" />
-                             :value="reverseRuleType(item)" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -247,9 +245,15 @@ export default {
             <!-- 创建时间 -->
             <el-col :span="8">
               <el-form-item label="创建时间">
-                <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="至"
+                <el-date-picker
-                                start-placeholder="开始日期" end-placeholder="结束日期"
+                  v-model="form.createdDate"
-                                :picker-options="form.pickerOptions">
+                  type="daterange"
+                  unlink-panels
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :picker-options="form.pickerOptions"
+                >
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -267,10 +271,16 @@ export default {
 
       <!-- 下方规则列表 -->
       <div class="p20">
-        <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+        <r-table
-                 @currentChange="handleCurrentChange" @sizeChange="handleSizeChange"
+          :columns="tableConfig.columns"
-                 :currentPage="tableConfig.currentPage"
+          :data="tableData"
-                 :pageSize="tableConfig.pageSize" />
+          :deletion="false"
+          :total="tableConfig.total"
+          @currentChange="handleCurrentChange"
+          @sizeChange="handleSizeChange"
+          :currentPage="tableConfig.currentPage"
+          :pageSize="tableConfig.pageSize"
+        />
       </div>
     </el-card>
     <edit-prompt-rule ref="editPromptRule" v-if="dialogOptions.currentComponent === 'EditPromptRule'" />

src/views/track/Index.vue

@@ -186,8 +186,7 @@ export default {
           <el-col :span="8">
             <el-form-item label="知识库">
               <!-- 启用远程加载 -->
-              <el-select filterable remote :remote-method="remoteSearchDataset" v-model="form.datasetId"
+              <el-select filterable remote :remote-method="remoteSearchDataset" v-model="form.datasetId" placeholder="输入搜索知识库">
-                         placeholder="输入搜索知识库">
                 <!-- 后续需要添加懒加载 -->
                 <el-option v-for="item in form.datasetList" :key="item.id" :label="item.name" :value="item.id" />
               </el-select>
@@ -213,15 +212,25 @@ export default {
             <el-form-item label="上传状态">
               <el-select v-model="form.documentStatus" placeholder="请选择上传状态">
                 <el-option label="全部上传状态" value="" />
-                <el-option v-for="item in Object.keys(this.tableConfig.uploadStatusType)" :key="item"
+                <el-option
-                           :label="tableConfig.uploadStatusType[item]" :value="Number(item)" />
+                  v-for="item in Object.keys(this.tableConfig.uploadStatusType)"
+                  :key="item"
+                  :label="tableConfig.uploadStatusType[item]"
+                  :value="Number(item)"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="任务时间">
-              <el-date-picker v-model="form.taskTime" type="daterange" unlink-panels range-separator="至"
+              <el-date-picker
-                              start-placeholder="开始日期" end-placeholder="结束日期" />
+                v-model="form.taskTime"
+                type="daterange"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="9" :offset="11" class="mb20">
@@ -235,14 +244,19 @@ export default {
 
       <!-- 任务列表 -->
       <div>
-        <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+        <r-table
-                 @currentChange="handleCurrentChange" @sizeChange="handleSizeChange"
+          :columns="tableConfig.columns"
-                 :currentPage="tableConfig.currentPage"
+          :data="tableData"
-                 :pageSize="tableConfig.pageSize" />
+          :deletion="false"
+          :total="tableConfig.total"
+          @currentChange="handleCurrentChange"
+          @sizeChange="handleSizeChange"
+          :currentPage="tableConfig.currentPage"
+          :pageSize="tableConfig.pageSize"
+        />
 
         <!-- 弹出提示框， 里面是各种详情内容 -->
-        <el-drawer title="上传任务详情" :visible.sync="infoDialogVisible" size="60%"
+        <el-drawer title="上传任务详情" :visible.sync="infoDialogVisible" size="60%" :before-close="() => (infoDialogVisible = false)">
-                   :before-close="() => (infoDialogVisible = false)">
           <knowledge-info :form="activeForm" v-if="infoDialogVisible"></knowledge-info>
         </el-drawer>
       </div>