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

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

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>