feat(knowledge): 更新知识库列表和详情页面

- 修改知识库列表 API 接口
- 新增知识库详情 API 接口
- 实现知识库详情页面功能
- 优化知识库列表页面样式
- 调整 API 前缀以适应新环境

.env.dev

@@ -3,4 +3,5 @@ NODE_ENV = 'dev' // 如果是生产环境，请记得切换为production
 
 # flag
 VUE_APP_FLAG='dev'
-VUE_APP_ADMIN='http://39.104.123.254:7195'
+#VUE_APP_ADMIN='http://39.104.123.254:7195'
+VUE_APP_ADMIN='http://192.168.2.62:7196'

src/api/generatedApi/index.js

@@ -1,13 +1,19 @@
-import  request from '@/assets/js/utils/request'
+import request from '@/assets/js/utils/request'
 import getUrl from '@/assets/js/utils/get-url'
 
-
+// 获取知识库列表
-
+export function docManageDataset(data) {
-
-export function docManageDataset(data){
   return request({
-    url: getUrl('/docManage/dataset/page'),
+    url: getUrl('/datasets/list'),
     method: 'post',
     data
   })
 }
+//单一知识库详情
+export function getDatasetById(params) {
+  return request({
+    url: getUrl('/datasets/query'),
+    method: 'get',
+    params: params
+  })
+}

src/assets/sass/public.scss

@@ -235,23 +235,26 @@ body .el-collapse-item__wrap {
   background: #ecf5ff;
 }
 
-.el-card{
+.el-card {
   border-radius: 10px;
 }
 
-
+.danger {
-.danger{
+  color: #f56c6c !important;
-  color: #F56C6C!important;
+  & :disabled {
-  & :disabled{
+    color: rgba(0, 0, 0, 0.25);
-    color: rgba(0,0,0,.25);
   }
-  & :hover{
+  & :hover {
     color: #dd6161;
   }
-  & :focus{
+  & :focus {
     color: #dd6161;
   }
-  & :active{
+  & :active {
     color: #dd6161;
   }
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}

src/config/index.js

@@ -1,6 +1,7 @@
 let envInfo = process.env
-let [admin] = [envInfo.VUE_APP_ADMIN]
+// let [admin] = [envInfo.VUE_APP_ADMIN]
+let [admin] = ['/api']
 
 export default {
-  admin,
+  admin
 }

src/views/knowledge/detail/index.vue

@@ -2,9 +2,13 @@
   <div class="container index-container">
     <el-card shadow="hover">
       <div slot="header" class="clearfix">
-        <h3>{{ knowledgeName }}</h3>
+        <div class="flex align-items-c">
+          <h3 class="mr20" v-if="!editKnowledge">{{ knowledgeName }}</h3>
+          <el-input class="mr20" v-else v-model="knowledgeName">{{ knowledgeName }}</el-input>
+          <el-icon class="el-icon-edit cursor-pointer" @click.native="editKnowledge = true" v-if="!editKnowledge"></el-icon>
+        </div>
         <p class="mt10 fs14" style="line-height: 20px">描述：{{ knowledgeDesc }}</p>
-        <p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode }}</p>
+        <p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode | filterSegmentedMode }}</p>
         <el-button type="text" class="mt10">修改知识库</el-button>
         <el-button type="text" class="mt10">上传知识</el-button>
       </div>
@@ -15,7 +19,7 @@
           </div>
         </el-empty>
 
-        <div class="table-container">
+        <div class="table-container" v-else>
           <div class="">
             <el-form :model="form" label-width="100px">
               <el-row :gutter="20">
@@ -55,27 +59,27 @@
           <r-table :columns="columns" :data="list" :deletion="false"></r-table>
         </div>
       </div>
-      11.
     </el-card>
   </div>
 </template>
 <script>
+import { getDatasetById } from '@/api/generatedApi/index'
 export default {
   name: 'index',
   data() {
     return {
+      editKnowledge: false,
       form: {},
       //知识库名称
       knowledgeName: '监管',
       knowledgeDesc: '监管',
       segmentedMode: '分段模式',
-      list: [{}]
+      list: []
     }
   },
   props: {},
   watch: {},
   components: {},
-  filters: {},
   methods: {
     // 跳转
     handleAddKnowledge() {
@@ -90,10 +94,34 @@ export default {
      * @created_date 2025/4/9
      * @description
      **/
-    getKnowledgeDetail() {}
+    getKnowledgeDetail() {
+      let { datasetId } = this.$route.query
+
+      getDatasetById({ id: datasetId }).then(res => {
+        this.knowledgeName = res.content.content.name
+        this.knowledgeDesc = res.content.content.description
+        this.segmentedMode = res.content.content.segmentedMode
+
+        console.log(res)
+      })
+    }
+  },
+  filters: {
+    filterSegmentedMode(val) {
+      switch (val) {
+        case 0:
+          return '传统分段模式'
+        case 1:
+          return ' Q&A分段模式'
+        default:
+          return ''
+      }
+    }
   },
   created() {},
-  mounted() {},
+  mounted() {
+    this.getKnowledgeDetail()
+  },
   computed: {
     columns() {
       return [

src/views/knowledge/index.vue

@@ -1,73 +1,72 @@
 <template>
-  <div id='index-container' class='container index-container'>
+  <div id="index-container" class="container index-container">
     <el-card shadow="hover">
       <div slot="header" class="clearfix">
         <h3>知识库列表</h3>
-        <p class='mt10 fs14' style='line-height: 20px'>易商数智知识库平台，旨在为用户提供更便捷、更灵敏、更全面的知识存储和操作平台，用户可以通过创建不同的知识库，完成对系统内知识的细分和储备。</p>
+        <p class="mt10 fs14" style="line-height: 20px">
-        <p class='mt10 fs14' style='line-height: 20px'>同时也可以通过修改和删除操作，对系统内知识体系进行修正和优化。</p>
+          易商数智知识库平台，旨在为用户提供更便捷、更灵敏、更全面的知识存储和操作平台，用户可以通过创建不同的知识库，完成对系统内知识的细分和储备。
-        <el-button type='text' disabled class='mt10'>操作文档</el-button>
+        </p>
+        <p class="mt10 fs14" style="line-height: 20px">同时也可以通过修改和删除操作，对系统内知识体系进行修正和优化。</p>
+        <el-button type="text" disabled class="mt10">操作文档</el-button>
       </div>
 
-
+      <div class="card-body">
-      <div class='card-body'>
         <el-row>
-          <el-col :span='8'>
+          <el-col :span="8">
-            <el-input placeholder='输入知识库名称' v-model='nameLike'>
+            <el-input placeholder="输入知识库名称" v-model="nameLike">
-              <el-button slot="append" icon="el-icon-search" @click='getList'></el-button>
+              <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
             </el-input>
           </el-col>
         </el-row>
 
-        <div class='ledge-list mt20'>
+        <div class="ledge-list mt20">
-          <el-card shadow="hover" class='item dashed' >
+          <el-card shadow="hover" class="item dashed">
-            <div @click='createdKnowLedge()'>
+            <div @click="createdKnowLedge()">
               新增知识库
             </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" shadow="hover" :key="index">
-            <div class='item-body flex '>
+            <div class="item-body flex ">
-              <div >
+              <div>
-                <div class='folder-content mr20 '>
+                <div class="folder-content mr20 ">
-                  <svg-icon iconClass='folder' className='folder' ></svg-icon>
+                  <svg-icon iconClass="folder" className="folder"></svg-icon>
                 </div>
               </div>
               <div>
-                <h4>{{item.name}}</h4>
+                <h4>{{ item.name }}</h4>
-                <p class='fs13 mt20 gray'>{{item.description}}</p>
+                <p class="fs13 mt20 gray">{{ item.description }}</p>
               </div>
             </div>
-            <div class='item-bottom mt20'>
+            <div class="item-bottom mt20">
-                <el-button type='text'  class='fs14' @click='knowLedgeDetail(item)'>查看详情</el-button>
+              <el-button type="text" class="fs14" @click="knowLedgeDetail(item)">查看详情</el-button>
-                <el-button type='text' class='fs14'>修改</el-button>
+              <el-button type="text" class="fs14">修改</el-button>
-                <el-button type='text' class='fs14 danger'>删除</el-button>
+              <el-button type="text" class="fs14 danger">删除</el-button>
             </div>
-
           </el-card>
         </div>
       </div>
     </el-card>
-
   </div>
 </template>
 <script>
-import {docManageDataset} from '@/api/generatedApi/index'
+import { docManageDataset } from '@/api/generatedApi/index'
 import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
 
 export default {
   name: 'index',
   data() {
     return {
-      datasetList:[],
+      datasetList: [],
-      nameLike:'',
+      nameLike: '',
-      drawer:false,
+      drawer: false,
-      direction:'ltr',
+      direction: 'ltr',
-      size:'50%',
+      size: '50%',
-      withHeader:false,
+      withHeader: false,
-      drawerTitle:'创建知识库',
+      drawerTitle: '创建知识库',
-      knowledgeId:'',
+      knowledgeId: '',
-      knowledgeForm:{
+      knowledgeForm: {
-        name:'knowledgeForm',
+        name: 'knowledgeForm',
-        component:knowledgeForm
+        component: knowledgeForm
       }
     }
   },
@@ -78,44 +77,37 @@ export default {
   },
   filters: {},
   methods: {
-
+    getList() {
-    getList (){
+      docManageDataset({ nameLike: this.nameLike }).then(res => {
-      docManageDataset({nameLike:this.nameLike}).then(res=>{
+        this.datasetList = res.content.content
-        console.log(res)
-        this.datasetList = res.content.content.list
       })
     },
     createdKnowLedge() {
-
-
       this.$router.push({
-        path:'/knowledge/knowledge-create',
+        path: '/knowledge/knowledge-create',
-        query:{
+        query: {
-          datasetId:''
+          datasetId: ''
         }
       })
     },
-    knowLedgeDetail(item){
+    knowLedgeDetail(item) {
       this.$router.push({
-        path:'/knowledge/detail',
+        path: '/knowledge/detail',
-        query:{
+        query: {
-          datasetId:item.id
+          datasetId: item.id
         }
       })
-    },
+    }
-  },
-  created() {
   },
+  created() {},
   mounted() {
     this.getList()
   },
-  computed: {
+  computed: {}
-
-  }
 }
 </script>
-<style scoped lang='scss'>
+<style scoped lang="scss">
-.ledge-list{
+.ledge-list {
   display: flex;
   flex-wrap: wrap;
   //justify-content: space-between;
@@ -127,79 +119,75 @@ export default {
     margin-bottom: 20px;
     margin-left: 0; // 移除左右内边距
     margin-right: 25px;
-     /deep/ .el-card__body {
+    /deep/ .el-card__body {
-       padding:0;
+      padding: 0;
-      & .item-body{
+      & .item-body {
-        padding:0 20px;
+        padding: 0 20px;
         display: flex;
         height: 119px;
-        margin-top:20px
+        margin-top: 20px;
       }
-      & .item-bottom{
+      & .item-bottom {
         //padding:0 20px;
         display: flex;
         justify-content: space-between;
-        background: #F7F9FA;
+        background: #f7f9fa;
-        border-top: 1px solid #EFF0F1;
+        border-top: 1px solid #eff0f1;
-        & .el-button{
+        & .el-button {
-          color:#8D8F8F;
+          color: #8d8f8f;
-          width:33%;
+          width: 33%;
           text-align: center;
-           &:nth-child(2){
+          &:nth-child(2) {
-             position: relative;
+            position: relative;
-             &::before{
+            &::before {
-               position: absolute;
+              position: absolute;
-               content: '';
+              content: '';
-               left:0;
+              left: 0;
-               height:100%;
+              height: 100%;
-               width:1px;
+              width: 1px;
-               background: #EFF0F1;
+              background: #eff0f1;
-               top:0
+              top: 0;
-             }
+            }
-             &::after{
+            &::after {
-               position: absolute;
+              position: absolute;
-               content: '';
+              content: '';
-               right:0;
+              right: 0;
-               height:100%;
+              height: 100%;
-               width:1px;
+              width: 1px;
-               background: #EFF0F1;
+              background: #eff0f1;
-               top:0
+              top: 0;
-             }
+            }
           }
         }
       }
     }
-
   }
 
   & .item:nth-child(4n) {
-    margin-right:0;
+    margin-right: 0;
   }
 
-  & .dashed{
+  & .dashed {
     border: 1px dashed #dedede;
     cursor: pointer;
     text-align: center;
     line-height: 200px;
     color: #6666;
-    &:hover{
+    &:hover {
-      color: #409EFF;
+      color: #409eff;
-      border: 1px dashed #409EFF;
+      border: 1px dashed #409eff;
     }
   }
 
-
+  & .folder-content {
-  & .folder-content{
+    background-color: rgba(245, 248, 255, 1);
-    background-color: rgba(245, 248, 255,1);
     text-align: center;
     border-radius: 8px;
-    padding:10px;
+    padding: 10px;
-    & .folder{
+    & .folder {
       width: 40px;
-      height:40px;
+      height: 40px;
     }
   }
-
-
 }
 </style>

vue.config.js

@@ -32,6 +32,15 @@ module.exports = {
     overlay: {
       warnings: false,
       errors: true
+    },
+    proxy: {
+      '/api': {
+        target: process.env.VUE_APP_ADMIN,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
     }
   },
   configureWebpack: {