feat:知识库修改

src/views/knowledge/index.vue

@@ -13,7 +13,7 @@
       <div class="card-body">
         <el-row>
           <el-col :span="8">
-            <el-input placeholder="输入知识库名称" v-model="nameLike">
+            <el-input placeholder="输入知识库名称" clearable v-model="nameLike">
               <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
             </el-input>
           </el-col>
@@ -25,22 +25,23 @@
               新增知识库
             </div>
           </el-card>
-          <el-card v-for="(item, index) in datasetList" class="item" shadow="hover" :key="index">
-            <div class="item-body flex ">
-              <div>
-                <div class="folder-content mr20 ">
-                  <svg-icon iconClass="folder" className="folder"></svg-icon>
-                </div>
-              </div>
-              <div>
-                <h4>{{ item.name }}</h4>
-                <p class="fs13 mt20 gray">{{ item.description }}</p>
+          <el-card v-for="(item, index) in datasetList" class="item datasetList" shadow="hover" :key="index">
+            <div class="dataset-header">
+              <div class="folder-content">
+                <svg-icon iconClass="folder" className="folder"></svg-icon>
               </div>
+              <el-tag size="small" type="primary" effect="plain" class="dataset-type">
+                {{ item.segmentedMode | filterSegmentedMode }}
+              </el-tag>
             </div>
-            <div class="item-bottom mt20">
-              <el-button type="text" class="fs14" @click="knowLedgeDetail(item)">查看详情</el-button>
-              <el-button type="text" class="fs14" @click='createdKnowLedge(item)'>修改</el-button>
-              <el-button type="text" class="fs14 danger" @click='deleteKnowLedge(item)'>删除</el-button>
+            <div class="dataset-body">
+              <h4 class="dataset-title">{{ item.name }}</h4>
+              <p class="dataset-desc">{{ item.description }}</p>
+            </div>
+            <div class="dataset-footer">
+              <el-button type="text" @click="knowLedgeDetail(item)">查看详情</el-button>
+              <el-button type="text" @click="createdKnowLedge(item)">修改</el-button>
+              <el-button type="text" class="danger" @click="deleteKnowLedge(item)">删除</el-button>
             </div>
           </el-card>
         </div>
@@ -49,7 +50,7 @@
   </div>
 </template>
 <script>
-import { docManageDataset,datasetDelete } from '@/api/generatedApi/index'
+import { docManageDataset, datasetDelete } from '@/api/generatedApi/index'
 import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
 
 export default {
@@ -71,11 +72,16 @@ export default {
     }
   },
   props: {},
-  watch: {},
+  watch: {
+    nameLike(newVal) {
+      if (!newVal) {
+        this.getList()
+      }
+    }
+  },
   components: {
     knowledgeForm
   },
-  filters: {},
   methods: {
     getList() {
       docManageDataset({ nameLike: this.nameLike }).then(res => {
@@ -85,8 +91,8 @@ export default {
     createdKnowLedge(item) {
       this.$router.push({
         path: '/knowledge/knowledge-create',
-        query:{
-          datasetId: item?item.id:null
+        query: {
+          datasetId: item ? item.id : null
         }
       })
     },
@@ -103,16 +109,27 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      })
-        .then(() => {
-          datasetDelete({id: item.id}).then(res => {
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            this.getList()
+      }).then(() => {
+        datasetDelete({ id: item.id }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
           })
+          this.getList()
         })
+      })
+    }
+  },
+  filters: {
+    filterSegmentedMode(val) {
+      switch (val) {
+        case 0:
+          return '传统分段模式'
+        case 1:
+          return ' Q&A分段模式'
+        default:
+          return '未知模式'
+      }
     }
   },
   created() {},
@@ -130,7 +147,6 @@ export default {
   //margin-left: 2.5%;
   & .item {
     border-radius: 8px;
-    height: 200px;
     width: calc(25% - 20px); // 每个项目占 25%，并预留间隙
     margin-bottom: 20px;
     margin-left: 0; // 移除左右内边距
@@ -206,4 +222,116 @@ export default {
     }
   }
 }
+
+.datasetList {
+  position: relative;
+  transition: all 0.3s ease;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  /deep/ .el-card__body {
+    padding: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dataset-header {
+    padding: 20px 20px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .folder-content {
+      width: 50px;
+      height: 50px;
+      background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .folder {
+        width: 30px;
+        height: 30px;
+        color: #1890ff;
+      }
+    }
+
+    .dataset-type {
+      font-size: 12px;
+      border-radius: 4px;
+    }
+  }
+
+  .dataset-body {
+    flex: 1;
+    padding: 16px 20px;
+
+    .dataset-title {
+      margin: 0 0 12px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #2c3e50;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .dataset-desc {
+      margin: 0;
+      font-size: 13px;
+      color: #606266;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 1.6;
+      height: 42px;
+    }
+  }
+
+  .dataset-footer {
+    margin-top: auto;
+    display: flex;
+    border-top: 1px solid #f0f2f5;
+    background: linear-gradient(to bottom, #fafbfc, #f5f7fa);
+
+    .el-button {
+      flex: 1;
+      height: 42px;
+      font-size: 14px;
+      padding: 0;
+      border-radius: 0;
+      position: relative;
+      color: #606266;
+      transition: all 0.25s ease;
+
+      &:hover {
+        color: #409eff;
+        background-color: rgba(64, 158, 255, 0.1);
+      }
+
+      &.danger:hover {
+        color: #f56c6c;
+        background-color: rgba(245, 108, 108, 0.1);
+      }
+
+      &:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 20px;
+        background-color: #e8e8e8;
+      }
+    }
+  }
+}
 </style>