refactor(knowledge): 重构知识库详情页面布局和样式

- 修改了知识库详情页面的整体布局结构
- 优化了表单内容和知识内容的展示方式- 调整了样式,增加了面包屑导航
- 重构了部分组件,提高了代码复用性

src/assets/js/utils/request.js

@@ -13,7 +13,7 @@ let loading
 function startLoading() {
   //使用Element loading-start 方法
   loading = Loading.service({
-    target: '.main-container'
+    target: '.render-container'
   })
 }
 function endLoading() {
@@ -75,7 +75,10 @@ service.interceptors.response.use(
       })
       return Promise.reject(res)
     }
-    if (response.request.responseType === 'blob' || response.request.responseType === 'Blob') {
+    if (
+      response.request.responseType === 'blob' ||
+      response.request.responseType === 'Blob'
+    ) {
       return response.data
     }
     if (res.content.code !== '0' && res.content.result !== 0) {
@@ -83,18 +86,23 @@ service.interceptors.response.use(
       // token过期或失效 根据项目设置其code
       if (response.headers['content-type'] !== 'application/x-zip-compressed') {
         if (res.content.code === '4001' || res.content.code === '4002') {
-          MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确认退出', {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确认退出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
             store.dispatch('user/resetToken').then(() => {
               location.reload()
             })
           })
         } else {
           Message({
-            message: res.content.message || res.content.resultMessage || 'Error',
+            message:
+              res.content.message || res.content.resultMessage || 'Error',
             type: 'error',
             duration: 5 * 1000
           })
@@ -103,7 +111,11 @@ service.interceptors.response.use(
     } else {
       if (res.content.code === '1' || res.content.code === '') {
         Message({
-          message: res.content.resultMessage ? res.content.resultMessage : res.content.message ? res.content.message : '接口错误',
+          message: res.content.resultMessage
+            ? res.content.resultMessage
+            : res.content.message
+            ? res.content.message
+            : '接口错误',
           type: 'error',
           duration: 5 * 1000
         })

src/assets/sass/renderSass/message.scss

@@ -0,0 +1,86 @@
+.el-message-box {
+  border-radius: $--border-radius;
+  & .el-message-box__headerbtn {
+    &:focus,
+    &:hover {
+      & .el-message-box__close {
+        color: $--color-primary;
+      }
+    }
+  }
+  & .el-message-box__header {
+    & .el-message-box__title {
+      font-size: 16px;
+      font-weight: 600;
+      font-family: PingFangSC, PingFang SC;
+    }
+  }
+}
+
+.el-message--success {
+  background: $--message-success-light;
+  border-radius: 12px;
+  border: 1px solid $--message-success-border;
+  & .el-message__content {
+    font-family: PingFangSC;
+    font-size: 14px;
+    color: #000000;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+}
+
+.el-message--error {
+  width: 255px;
+  height: 46px;
+  border-radius: 12px;
+  border: 1px solid #e44655;
+  background: $--message-error-light;
+  border-radius: 12px;
+  border: 1px solid $--message-error-border;
+  & .el-message__content {
+    font-family: PingFangSC;
+    font-size: 14px;
+    color: #000000;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+}
+
+.el-message--warning {
+  width: 255px;
+  height: 46px;
+  border-radius: 12px;
+  border: 1px solid #e44655;
+  background: $--message-warning-light;
+  border-radius: 12px;
+  border: 1px solid $--message-warning-border;
+  & .el-message__content {
+    font-family: PingFangSC;
+    font-size: 14px;
+    color: #000000;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+}
+
+.el-message--info {
+  width: 255px;
+  height: 46px;
+  border-radius: 12px;
+  border: 1px solid #e44655;
+  background: $--message-info-light;
+  border-radius: 12px;
+  border: 1px solid $--message-info-border;
+  & .el-message__content {
+    font-family: PingFangSC;
+    font-size: 14px;
+    color: #000000;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+}

src/assets/sass/renderSass/theme.scss

@@ -13,12 +13,23 @@ $--color-primary-label: #70778d;
 $--color-primary-button-color: #4f47f5;
 $--color-primary-button-background: #4f47f51a;
 $--color-primary-success: #02a838;
+$--border-radius: 8px;
+$--message-success-light: linear-gradient(180deg, #d6f1de 0%, #ffffff 100%);
+$--message-error-light: linear-gradient(180deg, #fee4e7 0%, #ffffff 100%);
+$--message-warning-light: linear-gradient(180deg, #ffeee1 0%, #ffffff 100%);
+$--message-info-light: linear-gradient(180deg, #edf2fc 0%, #ffffff 100%);
+$--message-success-border: #1cb16f;
+$--message-error-border: #e44655;
+$--message-warning-border: #dd7125;
+$--message-info-border: #cecece;
 
 :root {
   --swiper-theme-color: #4f47f5ff;
   --color-primary: #4f47f5ff;
   --color-primary-disabled: #155aef24;
   --color-primary-danger: #ff0000;
+  --color-primary-label: #70778d;
+  --color-primary-desc-text-drank: #999;
 }
 
 .theme-primary-desc-text {

src/assets/sass/renderUi.scss

@@ -7,6 +7,7 @@
 @import 'renderSass/radio';
 @import 'renderSass/drawer';
 @import 'renderSass/steps';
+@import 'renderSass/message';
 
 html,
 body,

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

@@ -8,42 +8,49 @@
     <!-- drawer title -->
     <template #title>
       <div class="flex align-items-c">
-        <div class="el-icon-document"></div>
+        <img :src="knowledgePng_2" alt="" style="width: 25px;" />
         <div class="ml10">{{ descriptions.dataset.knowledgeName }}</div>
         <el-tag type="info" class="ml10" size="mini">
           {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
         </el-tag>
       </div>
     </template>
-    <div class="drawer-content">
-      <!-- 文件信息详情 -->
-      <el-card :shadow="'none'">
-        <el-descriptions size="small" :column="4">
-          <el-descriptions-item label="文件名称">
-            <i class="el-icon-document"></i
-            >{{ descriptions.dataset.knowledgeName }}
-          </el-descriptions-item>
-          <el-descriptions-item label="分段模式">
-            {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
-          </el-descriptions-item>
-          <el-descriptions-item label="上传时间">
-            {{ descriptions.createdDate }}
-          </el-descriptions-item>
-          <el-descriptions-item label="任务状态">
-            {{ descriptions.documentStatus | filterDocumentStatus }}
-          </el-descriptions-item>
-          <el-descriptions-item label="上传用户">
-            {{ descriptions.createdUser }}
-          </el-descriptions-item>
-          <el-descriptions-item label="高级模式">
-            {{ descriptions.documentSource ? '是' : '否' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="任务号">
-            {{ descriptions.datasetId }}
-          </el-descriptions-item>
-        </el-descriptions>
-      </el-card>
-    </div>
+    <knowledgeInfo
+      :form="descriptions"
+      :fullscreen="true"
+      v-if="visible"
+    ></knowledgeInfo>
+
+    <!--    </template>-->
+    <!--    <div class="drawer-content">-->
+    <!--      &lt;!&ndash; 文件信息详情 &ndash;&gt;-->
+    <!--      <el-card :shadow="'none'">-->
+    <!--        <el-descriptions size="small" :column="4">-->
+    <!--          <el-descriptions-item label="文件名称">-->
+    <!--            <i class="el-icon-document"></i-->
+    <!--            >{{ descriptions.dataset.knowledgeName }}-->
+    <!--          </el-descriptions-item>-->
+    <!--          <el-descriptions-item label="分段模式">-->
+    <!--            {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}-->
+    <!--          </el-descriptions-item>-->
+    <!--          <el-descriptions-item label="上传时间">-->
+    <!--            {{ descriptions.createdDate }}-->
+    <!--          </el-descriptions-item>-->
+    <!--          <el-descriptions-item label="任务状态">-->
+    <!--            {{ descriptions.documentStatus | filterDocumentStatus }}-->
+    <!--          </el-descriptions-item>-->
+    <!--          <el-descriptions-item label="上传用户">-->
+    <!--            {{ descriptions.createdUser }}-->
+    <!--          </el-descriptions-item>-->
+    <!--          <el-descriptions-item label="高级模式">-->
+    <!--            {{ descriptions.documentSource ? '是' : '否' }}-->
+    <!--          </el-descriptions-item>-->
+    <!--          <el-descriptions-item label="任务号">-->
+    <!--            {{ descriptions.datasetId }}-->
+    <!--          </el-descriptions-item>-->
+    <!--        </el-descriptions>-->
+    <!--      </el-card>-->
+    <!--    </div>-->
 
     <!-- 屏蔽规则内容 -->
     <!-- <el-divider></el-divider>
@@ -120,42 +127,43 @@
       </div>
     </div> -->
 
-    <section style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-      <el-card shadow="none">
-        <!-- 分段内容 -->
-        <div class="segment-content-container">
-          <div class="segment-header mb15">
-            <div class="segment-summary">
-              <span
-                >{{
-                  descriptions.data ? descriptions.data.length : 0
-                }}个分段</span
-              >
-            </div>
-          </div>
-          <text-model
-            v-if="descriptions.doc_form === 'text_model'"
-            :descriptions="descriptions"
-            :documentDetail="documentDetail"
-            :activeSegment="activeSegment"
-          />
-          <q-a-model
-            v-else-if="descriptions.doc_form === 'qa_model'"
-            :descriptions="descriptions"
-            :documentDetail="documentDetail"
-            :activeSegment="activeSegment"
-          />
-        </div>
-      </el-card>
-      <!-- 文件展示 -->
-      <el-card shadow="none">
-        <render-file :id="descriptions.id" />
-      </el-card>
-    </section>
+    <!--    <section style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">-->
+    <!--      <el-card shadow="none">-->
+    <!--        &lt;!&ndash; 分段内容 &ndash;&gt;-->
+    <!--        <div class="segment-content-container">-->
+    <!--          <div class="segment-header mb15">-->
+    <!--            <div class="segment-summary">-->
+    <!--              <span-->
+    <!--                >{{-->
+    <!--                  descriptions.data ? descriptions.data.length : 0-->
+    <!--                }}个分段</span-->
+    <!--              >-->
+    <!--            </div>-->
+    <!--          </div>-->
+    <!--          <text-model-->
+    <!--            v-if="descriptions.doc_form === 'text_model'"-->
+    <!--            :descriptions="descriptions"-->
+    <!--            :documentDetail="documentDetail"-->
+    <!--            :activeSegment="activeSegment"-->
+    <!--          />-->
+    <!--          <q-a-model-->
+    <!--            v-else-if="descriptions.doc_form === 'qa_model'"-->
+    <!--            :descriptions="descriptions"-->
+    <!--            :documentDetail="documentDetail"-->
+    <!--            :activeSegment="activeSegment"-->
+    <!--          />-->
+    <!--        </div>-->
+    <!--      </el-card>-->
+    <!--      &lt;!&ndash; 文件展示 &ndash;&gt;-->
+    <!--      <el-card shadow="none">-->
+    <!--        <render-file :id="descriptions.id" />-->
+    <!--      </el-card>-->
+    <!--    </section>-->
   </el-drawer>
 </template>
 
 <script>
+import knowledgeInfo from '@/views/track/views/knowledge-info/Index.vue'
 import TextModel from './TextModel.vue'
 import QAModel from './QAModel.vue'
 import {
@@ -163,9 +171,9 @@ import {
   segmentedModeOptionsMap
 } from '@/assets/js/utils/utilOptions'
 import RenderFile from '@/components/RenderFile/Index.vue'
-
+import knowledgePng_2 from '@/assets/images/konwledge/knowledge-2.png'
 export default {
-  components: { TextModel, QAModel, RenderFile },
+  components: { TextModel, QAModel, RenderFile, knowledgeInfo },
   props: {
     visible: Boolean,
     descriptions: {
@@ -183,6 +191,7 @@ export default {
   },
   data() {
     return {
+      knowledgePng_2,
       localActiveSegment: this.activeSegment,
       documentSourceOptions
     }

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

@@ -9,9 +9,13 @@
         @click="handleSegmentClick(index)"
       >
         <div>
-          <span class="segment-number">分段 - {{ index + 1 }}</span> · <span v-if="segment.word_count > 0">{{ segment.word_count }}个字符</span>
+          <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>
+        <div class="context">
           <p>Q {{ segment.content }}</p>
           <p>A {{ segment.answer }}</p>
         </div>
@@ -23,8 +27,21 @@
     </div>
 
     <!-- 弹窗 -->
-    <r-dialog title="问答详情" :visible.sync="dialogVisible" width="50%" append-to-body :before-close="handleClose">
-      <div v-if="activeSegment !== null && descriptions.data && descriptions.data.length > 0">
+    <el-drawer
+      title="问答详情"
+      :visible.sync="dialogVisible"
+      width="50%"
+      append-to-body
+      :modal="false"
+      :before-close="handleClose"
+    >
+      <div
+        v-if="
+          activeSegment !== null &&
+            descriptions.data &&
+            descriptions.data.length > 0
+        "
+      >
         <div class="segment-content">
           <div>
             <div>
@@ -38,20 +55,31 @@
           </div>
           <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
+            "
             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">
+            <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>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false" size="medium">关 闭</el-button>
+        <el-button @click="dialogVisible = false" size="medium"
+          >关 闭</el-button
+        >
       </span>
-    </r-dialog>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -88,18 +116,21 @@ export default {
 
 .segment-list {
   width: 100%;
-  height: 400px;
+  //height: 400px;
   overflow-y: auto;
 }
-
-.segment-list-item {
-  cursor: pointer;
-  padding: 15px 0 10px 15px;
-  border-radius: 15px;
-  transition: background-color 0.3s;
+.context {
+  color: #3a3f4f;
   font-size: 14px;
-  border: 1px solid #f3f5f7;
-  margin-bottom: 20px;
+}
+.segment-list-item {
+  color: #70778d;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 15px 0 20px 15px;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+  border-bottom: 1px solid #f3f5f7;
   &:hover {
     background: #f3f5f7;
   }
@@ -107,14 +138,18 @@ export default {
   &.active {
     background: #f3f5f7;
   }
+
   p {
     margin: 15px 0;
   }
   .segment-number {
-    color: #0a84ff;
+    //color: #0a84ff;
   }
   .segment-keywords {
-    color: #606266;
+    font-weight: 400;
+    font-size: 12px;
+    color: #70778d;
+    flex-wrap: wrap;
     p {
       margin: 0 10px 0 0;
     }

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

@@ -1,47 +1,48 @@
 <template>
   <div class="segment-split-view">
     <div class="segment-list">
-      <el-checkbox-group v-model="selectedSegments">
-        <div
-          class="segment-list-item"
-          v-for="(segment, index) in descriptions.data"
-          :key="index"
-          :class="{ active: activeSegment === index }"
+      <!--      <el-checkbox-group v-model="selectedSegments">-->
+      <div
+        class="segment-list-item"
+        v-for="(segment, index) in descriptions.data"
+        :key="index"
+        :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
         >
-          <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>
+        <!--          </el-checkbox>-->
+        <div>
+          <p class="context">{{ 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"
             >
-            <span v-if="segment.word_count > 0">
-              · {{ segment.word_count }}个字符 ·</span
-            >
-            <span> {{ 0 }} 次召回次数</span>
-          </el-checkbox>
-          <div @click="handleSegmentClick(index)">
-            <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>
+              #{{ item }}
+            </p>
           </div>
         </div>
-      </el-checkbox-group>
+      </div>
+      <!--      </el-checkbox-group>-->
     </div>
 
     <!-- 弹窗 -->
-    <r-dialog
+    <el-drawer
       title="分段详情"
       :visible.sync="dialogVisible"
-      width="50%"
+      :modal="false"
       append-to-body
       :before-close="handleClose"
     >
@@ -80,7 +81,7 @@
           >关 闭</el-button
         >
       </span>
-    </r-dialog>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -115,7 +116,10 @@ export default {
 .segment-split-view {
   display: block;
 }
-
+.context {
+  color: #3a3f4f;
+  font-size: 14px;
+}
 .segment-list {
   width: 100%;
   height: 100%;
@@ -123,13 +127,14 @@ export default {
 }
 
 .segment-list-item {
+  color: #70778d;
   cursor: pointer;
-  padding: 15px 0 10px 15px;
-  border-radius: 15px;
+  padding: 15px 0 20px 15px;
+  border-radius: 2px;
   transition: background-color 0.3s;
   font-size: 14px;
-  // border: 1px solid #f3f5f7;
-  margin-bottom: 20px;
+  border-bottom: 1px solid #f3f5f7;
+  //margin-bottom: 10px;
 
   &:hover {
     background: #f3f5f7;
@@ -144,11 +149,13 @@ export default {
   }
 
   .segment-number {
-    color: #0a84ff;
+    //color: #0a84ff;
   }
 
   .segment-keywords {
-    color: #606266;
+    font-weight: 400;
+    font-size: 12px;
+    color: #70778d;
     flex-wrap: wrap;
 
     p {

src/views/knowledge/detail/components/viewSegments/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <KnowledgeInfo :form="{ id: this.$route.query.documentId }"></KnowledgeInfo>
-    <div style="position: absolute;bottom:0;right:10px;width: 100%;height:50px;background: #fff;text-align: right">
+    <div
+      style="position: absolute;bottom:10px;left:20px;right:40px;height:50px;background: #fff;text-align: right"
+    >
       <el-button size="medium" @click="back">返回</el-button>
     </div>
   </div>

src/views/knowledge/index.vue

@@ -2,14 +2,30 @@
   <div id="index-container" class="container index-container">
     <el-row>
       <el-col :span="8">
-        <el-input placeholder="输入知识库名称" clearable v-model="nameLike" size="medium" class="underBorder" @keydown.enter.native="getList">
+        <el-input
+          placeholder="输入知识库名称"
+          clearable
+          v-model="nameLike"
+          size="medium"
+          class="underBorder"
+          @keydown.enter.native="getList"
+        >
           <template slot="prepend">
-            <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="getList"
+            ></el-button>
           </template>
         </el-input>
       </el-col>
       <el-col :span="16" class="text-right">
-        <el-button class="render-button line-button pv8 ph10" icon="el-icon-plus" @click="createdKnowLedge()">创建知识库</el-button>
+        <el-button
+          class="render-button line-button pv8 ph10"
+          icon="el-icon-plus"
+          @click="createdKnowLedge()"
+          >创建知识库</el-button
+        >
       </el-col>
     </el-row>
 
@@ -19,14 +35,28 @@
         <p class="mt20 fs14 theme-primary-desc-text" style="line-height: 15px">
           易商数智知识库平台，旨在为用户提供更便捷、更灵敏、更全面的知识存储和操作平台，用户可以通过创建不同的知识库，完成对系统内知识的细分和储备。
         </p>
-        <p class="mt10 fs14 theme-primary-desc-text" style="line-height: 15px">同时也可以通过修改和删除操作，对系统内知识体系进行修正和优化。</p>
-        <el-button type="primary" class="mt20 render-button pv8 ph10" plain icon="el-icon-document-remove">操作文档</el-button>
+        <p class="mt10 fs14 theme-primary-desc-text" style="line-height: 15px">
+          同时也可以通过修改和删除操作，对系统内知识体系进行修正和优化。
+        </p>
+        <el-button
+          type="primary"
+          class="mt20 render-button pv8 ph10"
+          plain
+          icon="el-icon-document-remove"
+          >操作文档</el-button
+        >
       </div>
     </div>
 
     <div class="card-body">
       <div class="ledge-list mt20">
-        <el-card v-for="(item, index) in datasetList" class="item datasetList" shadow="hover" :key="index" @click.native.stop="knowLedgeDetail(item)">
+        <el-card
+          v-for="(item, index) in datasetList"
+          class="item datasetList"
+          shadow="hover"
+          :key="index"
+          @click.native.stop="knowLedgeDetail(item)"
+        >
           <div class="dataset-header">
             <div class="folder-content">
               <!--              <div class="folder">-->
@@ -49,8 +79,21 @@
               {{ item.segmentedMode | filterSegmentedMode }}
             </div>
             <div class="opacity-button">
-              <el-button class="default " size="medium" icon="el-icon-delete" @click.stop="deleteKnowLedge(item)">删除</el-button>
-              <el-button class="line-button" size="medium" icon="el-icon-edit" @click.stop="createdKnowLedge(item)" type="primary">修改</el-button>
+              <el-button
+                class="default "
+                size="medium"
+                icon="el-icon-delete"
+                @click.stop="deleteKnowLedge(item)"
+                >删除</el-button
+              >
+              <el-button
+                class="line-button"
+                size="medium"
+                icon="el-icon-edit"
+                @click.stop="createdKnowLedge(item)"
+                type="primary"
+                >修改</el-button
+              >
             </div>
           </div>
 
@@ -59,7 +102,11 @@
       </div>
     </div>
 
-    <knowledgeForm :visible.sync="drawer" :datasetId="datasetId" @update:visible="getList"></knowledgeForm>
+    <knowledgeForm
+      :visible.sync="drawer"
+      :datasetId="datasetId"
+      @update:visible="getList"
+    ></knowledgeForm>
   </div>
 </template>
 <script>

src/views/track/Index.vue

@@ -5,13 +5,14 @@ import {
 } from '@/api/generatedApi'
 import KnowledgeInfo from '@/views/track/views/knowledge-info/Index.vue'
 import { getUserList } from '@/api/generatedApi/system'
-
+import knowledgePng_2 from '@/assets/images/konwledge/knowledge-2.png'
 export default {
   components: {
     KnowledgeInfo
   },
   data() {
     return {
+      knowledgePng_2,
       infoDialogVisible: false,
       activeForm: {},
       tableData: [],
@@ -69,6 +70,18 @@ export default {
       }
     }
   },
+  filters: {
+    filterSegmentedMode(val) {
+      switch (val) {
+        case 0:
+          return '传统分段模式'
+        case 1:
+          return ' Q&A分段模式'
+        default:
+          return ''
+      }
+    }
+  },
   computed: {
     /**
      * 格式化上传时间
@@ -301,16 +314,39 @@ export default {
 
       <!-- 弹出提示框， 里面是各种详情内容 -->
       <el-drawer
-        title="上传任务详情"
+        :title="activeForm.datasetName"
         :visible.sync="infoDialogVisible"
-        size="95%"
+        size="80%"
         :before-close="() => (infoDialogVisible = false)"
       >
+        <div slot="title">
+          <div class="flex align-items-c">
+            <img :src="knowledgePng_2" alt="" style="width: 25px;" />
+            <div class="ml10">{{ activeForm.datasetName }}</div>
+            <div class="segment-content ml10">
+              {{ activeForm.segmentedMode | filterSegmentedMode }}
+            </div>
+          </div>
+        </div>
         <knowledge-info
           :form="activeForm"
+          :fullscreen="true"
           v-if="infoDialogVisible"
         ></knowledge-info>
       </el-drawer>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+@import '@/assets/sass/renderSass/theme.scss';
+.segment-content {
+  font-family: AppleSystemUIFont;
+  font-size: 12px;
+  background: #f6f8fa;
+  color: #4e5969;
+  text-align: left;
+  font-style: normal;
+  padding: 5px;
+}
+</style>

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

@@ -15,6 +15,10 @@ export default {
     }
   },
   props: {
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
     knowledgeContent: {
       type: Array,
       default: () => []
@@ -92,113 +96,52 @@ export default {
 </script>
 
 <template>
-  <div class="container upload-info-container">
+  <div
+    class=" upload-info-container"
+    :class="!fullscreen ? 'render-container' : ''"
+  >
+    <div class="form-container">
+      <el-descriptions class="" :column="4">
+        <el-descriptions-item label="知识库">
+          {{ newForm.datasetName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="文件名称">
+          {{ newForm.fileName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="上传用户">
+          {{ newForm.userName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="上传时间">
+          {{ newForm.createdDate }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="任务号">
+          {{ newForm.id }}
+        </el-descriptions-item>
+        <el-descriptions-item label="分段模式">
+          {{ newForm.segmentedMode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="高级模式">
+          {{ useMineru }}
+        </el-descriptions-item>
+        <el-descriptions-item label="任务状态">
+          {{ documentStatus }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="失败原因"
+          v-if="newForm.documentStatus === -1"
+        >
+          {{ newForm.errMessage }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
     <div class="card-body">
       <el-row :gutter="20">
         <!-- 左侧：表单内容和知识内容 -->
         <el-col :span="12">
-          <!-- 表单内容 -->
-          <el-card class="content-card">
-            <div slot="header" class="clearfix">
-              <span>基本信息</span>
-            </div>
-            <el-form ref="form" :model="newForm" label-width="120px">
-              <el-form-item label="知识库">
-                <el-input
-                  v-model="newForm.datasetName"
-                  placeholder=""
-                  disabled
-                ></el-input>
-              </el-form-item>
-
-              <el-form-item label="知识文件名称">
-                <el-input
-                  v-model="newForm.fileName"
-                  placeholder=""
-                  disabled
-                ></el-input>
-              </el-form-item>
-
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="上传用户">
-                    <el-input
-                      v-model="newForm.userName"
-                      placeholder=""
-                      disabled
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="上传时间">
-                    <el-input
-                      v-model="newForm.createdDate"
-                      placeholder=""
-                      disabled
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="任务号">
-                    <el-input
-                      v-model="newForm.id"
-                      placeholder=""
-                      disabled
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="分段模式">
-                    <el-input
-                      v-model="newForm.segmentedMode"
-                      placeholder="null"
-                      disabled
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="高级模式">
-                    <el-input
-                      v-model="useMineru"
-                      placeholder=""
-                      disabled
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="任务状态">
-                    <el-input
-                      v-model="documentStatus"
-                      placeholder=""
-                      disabled
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
-              <el-form-item
-                label="失败原因"
-                v-if="newForm.documentStatus === -1"
-              >
-                <el-input
-                  v-model="newForm.errMessage"
-                  placeholder=""
-                ></el-input>
-              </el-form-item>
-            </el-form>
-          </el-card>
-
           <!-- 知识内容 -->
-          <el-card class="content-card mt20">
-            <div slot="header" class="clearfix">
-              <span>知识内容</span>
-            </div>
+          <div class="content-card el-card mt20">
             <div class="knowledge-content" v-if="descriptions">
               <text-model
                 v-if="descriptions.doc_form === 'text_model'"
@@ -209,18 +152,15 @@ export default {
                 :descriptions="descriptions"
               />
             </div>
-            <span v-else>暂无知识内容</span>
-          </el-card>
+            <div v-else class="p20">暂无知识内容</div>
+          </div>
         </el-col>
 
         <!-- 右侧：原文内容 -->
         <el-col :span="12">
-          <el-card class="content-card full-height">
-            <div slot="header" class="clearfix">
-              <span>原文内容</span>
-            </div>
+          <div class="content-card el-card full-height mt20">
             <render-file :id="newForm.id" />
-          </el-card>
+          </div>
         </el-col>
       </el-row>
     </div>
@@ -228,16 +168,28 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.form-container {
+  background: #fff;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+}
+
 .content-card {
   margin-bottom: 20px;
-
+  border-radius: 8px;
+  overflow: hidden;
   .knowledge-content {
-    min-height: 250px;
+    height: calc(100vh - 240px);
+    overflow-y: auto;
+    //&::-webkit-scrollbar {
+    //  width: 4px;
+    //}
   }
 }
 
 .full-height {
-  height: 100%;
+  height: calc(100vh - 240px);
   padding-bottom: 20px;
 }