feat:知识库修改

src/views/knowledge/detail/components/knowledgeForm.vue

@@ -15,7 +15,10 @@
               <el-input type="textarea" v-model="model.description"></el-input>
             </el-form-item>
 
-            <el-form-item label="分段模式：" prop="segmentedMode">
+            <el-form-item label="分段模式：" prop="segmentedMode" v-if="$route.query.datasetId">
+              {{ model.segmentedMode | filterSegmentedMode }}
+            </el-form-item>
+            <el-form-item label="分段模式：" prop="segmentedMode" v-else>
               <el-radio-group v-model="model.segmentedMode">
                 <el-radio :label="0">通用分段模式</el-radio>
                 <el-radio :label="1">Q&A分段模式</el-radio>
@@ -63,7 +66,18 @@ export default {
   props: {},
   watch: {},
   components: {},
-  filters: {},
+  filters: {
+    filterSegmentedMode(val) {
+      switch (val) {
+        case 0:
+          return '传统分段模式'
+        case 1:
+          return ' Q&A分段模式'
+        default:
+          return '未知模式'
+      }
+    }
+  },
   methods: {
     jumpKnowledgeList() {
       this.$router.push({

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">
+          <el-card v-for="(item, index) in datasetList" class="item datasetList" shadow="hover" :key="index">
-            <div class="item-body flex ">
+            <div class="dataset-header">
-              <div>
+              <div class="folder-content">
-                <div class="folder-content mr20 ">
                 <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>
+            <div class="dataset-body">
-                <h4>{{ item.name }}</h4>
+              <h4 class="dataset-title">{{ item.name }}</h4>
-                <p class="fs13 mt20 gray">{{ item.description }}</p>
+              <p class="dataset-desc">{{ item.description }}</p>
             </div>
-            </div>
+            <div class="dataset-footer">
-            <div class="item-bottom mt20">
+              <el-button type="text" @click="knowLedgeDetail(item)">查看详情</el-button>
-              <el-button type="text" class="fs14" @click="knowLedgeDetail(item)">查看详情</el-button>
+              <el-button type="text" @click="createdKnowLedge(item)">修改</el-button>
-              <el-button type="text" class="fs14" @click='createdKnowLedge(item)'>修改</el-button>
+              <el-button type="text" class="danger" @click="deleteKnowLedge(item)">删除</el-button>
-              <el-button type="text" class="fs14 danger" @click='deleteKnowLedge(item)'>删除</el-button>
             </div>
           </el-card>
         </div>
@@ -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 => {
@@ -103,8 +109,7 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      })
+      }).then(() => {
-        .then(() => {
         datasetDelete({ id: item.id }).then(res => {
           this.$message({
             type: 'success',
@@ -115,6 +120,18 @@ export default {
       })
     }
   },
+  filters: {
+    filterSegmentedMode(val) {
+      switch (val) {
+        case 0:
+          return '传统分段模式'
+        case 1:
+          return ' Q&A分段模式'
+        default:
+          return '未知模式'
+      }
+    }
+  },
   created() {},
   mounted() {
     this.getList()
@@ -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>