CN-1016 知识库支持卡片和table切换

2023-05-29 13:00:28 +08:00
parent 8ea82d0e34
commit b2c76aa2c7
12 changed files with 779 additions and 291 deletions
--- a/public/config.js
+++ b/public/config.js
@@ -1,4 +1,5 @@
 var BASE_CONFIG = {
-  baseUrl: 'http://192.168.44.54:8090/',
-  version: '2.0.2021.05.11.19.43'
+  baseUrl: 'http://192.168.44.54:8091/',
+  version: '23.06',
+  apiVersion:'v1'
 }
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -95,8 +95,29 @@
          }
        }
        .filter__body {
-          padding: 0 0 0 20px;
-
+          padding: 3px 0 0 20px;
+          .el-tree {
+            font-size:14px;
+            color: #353636;
+            font-weight: 400;
+            .el-tree-node {
+              .el-tree-node__content {
+                margin-bottom: 2px;
+                .custom-tree-node {
+                  flex: 1;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  padding-right: 20px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  .count-tree-node {
+                    color: #717171;
+                  }
+                }
+              }
+            }
+          }
          .el-checkbox-group {
            display: flex;
            flex-direction: column;
@@ -113,6 +134,15 @@
                border-radius: 2px;
              }
            }
+            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+              border-color: #38ACD2;
+              background: #38ACD2;
+              border-radius: 2px;
+            }
+            .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
+              background: #FFFFFF;
+              border-radius: 1px;
+            }
            .el-checkbox__input.is-checked {
              .el-checkbox__inner {
                border-color: #38ACD2;
@@ -526,6 +556,23 @@
            padding-right:16px;
            padding-bottom:20px;
            .card-type {
+              display:flex;
+              flex-direction:row;
+              .card-category {
+                font-size: 12px;
+                line-height: 16px;
+                color: #38ACD2;
+                font-weight: 400;
+                border: 1px solid rgba(56,172,210,1);
+                height:20px;
+                width: fit-content;
+                padding-left:11px;
+                padding-right:11px;
+                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                border-radius: 10px;
+                margin-right:4px;
+              }
+              .card-source {
                height:20px;
                width: fit-content;
                padding-left:11px;
@@ -537,6 +584,7 @@
                color: #046ECA;
                font-weight: 400;
              }
+            }
            .card-enable {
            }
          }
@@ -576,6 +624,12 @@
    padding-left: 20px;
    overflow: auto;

+    .enable-form__mt {
+      .el-form {
+        margin-top:6px;
+      }
+    }
+
    .el-steps {
      margin-left: 10px;

--- a/src/components/table/setting/KnowledgeBaseTableForRow.vue
+++ b/src/components/table/setting/KnowledgeBaseTableForRow.vue
@@ -33,21 +33,24 @@
        <div class="col-resize-area"></div>
      </template>
      <template  #default="scope" :column="item">
-        <template v-if="item.prop === 'name'">
+        <template v-if="item.prop === 'name'" >
          <template v-if="scope.row.i18n">
-            <span>{{$t(scope.row.i18n)}}</span>
+            <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
          </template>
          <template v-else-if="scope.row.name">
-            <span>{{scope.row.name}}</span>
+            <span :title="scope.row[item.prop]">{{scope.row.name}}</span>
          </template>
          <template v-else>
            <span>-</span>
          </template>
        </template>
-        <template v-else-if="item.prop === 'tagType'">
-          <span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
+        <template v-else-if="item.prop === 'category'">
+          <span >{{tagCategoryText(scope.row[item.prop])}}</span>
        </template>
-        <template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
+        <template v-else-if="item.prop === 'source'">
+          <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+        </template>
+        <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
          <template v-if="scope.row[item.prop]">
            {{dateFormatByAppearance(scope.row[item.prop])}}
          </template>
@@ -63,9 +66,18 @@
            <span>-</span>
          </template>
        </template>
-        <template v-else-if="item.prop === 'remark'">
+        <template v-else-if="item.prop === 'description'">
          <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
        </template>
+        <template v-else-if="item.prop === 'status'">
+          <el-switch class="card-enable"
+                     v-model="scope.row['status']"
+                     active-color="#38ACD2"
+                     inactive-color="#C0CEDB"
+                     @change="changeStatus($event,scope.row.knowledgeId)"
+          >
+          </el-switch>
+        </template>
        <span v-else>{{scope.row[item.prop] || '-'}}</span>
      </template>
    </el-table-column>
@@ -74,7 +86,7 @@

 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
  name: 'KnowledgeBaseTableForRow',
  mixins: [table],
@@ -83,29 +95,36 @@ export default {
      tableTitle: [ // 原table列
        {
          label: 'ID',
-          prop: 'id',
+          prop: 'knowledgeId',
          show: true,
-          width: 100,
+          width: 60,
          sortable: 'custom'
        }, {
          label: this.$t('config.roles.name'),
-          prop: 'tagName',
+          prop: 'name',
+          minWidth: 100,
          show: true,
          sortable: 'custom'
        }, {
-          label: this.$t('overall.type'),
-          prop: 'tagType',
-          minWidth: 80,
+          label: this.$t('overall.category'),
+          prop: 'category',
+          width: 100,
+          show: true
+        }, {
+          label: this.$t('overall.source'),
+          prop: 'source',
+          width: 130,
          show: true
        }, {
          label: this.$t('overall.remark'),
-          prop: 'remark',
+          prop: 'description',
+          minWidth: 150,
          show: true
        },
        {
          label: this.$t('overall.createdBy'),
-          prop: 'cuser',
-          show: true
+          prop: 'opUser',
+          show: false
        },
        {
          label: this.$t('config.user.createTime'),
@@ -120,17 +139,29 @@ export default {
        },
        {
          label: this.$t('overall.updateTime'),
-          prop: 'utime',
-          show: false,
+          prop: 'opTime',
+          show: true,
          sortable: 'custom'
+        },
+        {
+          label: this.$t('knowledge.status'),
+          prop: 'status',
+          show: true,
+          minWidth: 40
        }
      ]
    }
  },
  computed: {
-    tagTypeText () {
+    tagCategoryText () {
      return function (type) {
-        const t = knowledgeBaseType.find(t => t.value === type)
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
        return t ? t.name : ''
      }
    }
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -1,29 +1,32 @@
 <template>
  <el-checkbox-group v-model="checkList">
-    <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+    <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
      <div class="card-content">
        <div class="card-title">
-          <div class="card-title-name" :title="data.tagName">{{data.tagName}}</div>
+          <div class="card-title-name" :title="data.name">{{data.name}}</div>
          <div class="card-title-more">
            <span v-show="!isSelectedStatus && data.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(data)" test-id="mouseenter-dark"></i></span>
            <div class="card-operate" v-show="!isSelectedStatus && data.moreOptions" @mouseleave="mouseleaveMore(data)">
-              <div class="card-title-more-edit" @click="edit(data.id)" >{{$t('overall.edit')}}</div>
+              <div class="card-title-more-edit" @click="edit(data.knowledgeId)" >{{$t('overall.edit')}}</div>
              <div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
            </div>
-            <el-checkbox @click.stop="" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.id" :label="data"><br></el-checkbox>
+            <el-checkbox @click.stop="" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.knowledgeId" :label="data"><br></el-checkbox>

          </div>
        </div>
-        <div class="card-id">ID:{{data.id}}</div>
-        <div class="card-desc" :title="data.remark">{{data.remark?data.remark:'—'}}</div>
+        <div class="card-id">ID:{{data.knowledgeId}}</div>
+        <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
      </div>
      <div class="card-operate__footer">
-        <div class="card-type">{{data.tagType}}</div>
+        <div class="card-type">
+          <div class="card-category">{{tagCategoryText(data.category)}}</div>
+          <div class="card-source">{{tagSourceText(data.source)}}</div>
+        </div>
        <el-switch class="card-enable"
-                   disabled
                   v-model="data.status"
                   active-color="#38ACD2"
                   inactive-color="#C0CEDB"
+                   @change="changeStatus($event,data.knowledgeId)"
        >
        </el-switch>
      </div>
@@ -33,7 +36,7 @@

 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
  name: 'knowledgeBaseTableForCard',
  mixins: [table],
@@ -53,7 +56,7 @@ export default {
      handler (n) {
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.forEach(item => {
-            item.status = true
+            // item.status = true
          })
        }
      }
@@ -98,28 +101,28 @@ export default {
    },
    mouseenterMore (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.moreOptions = true
        }
      })
    },
    mouseleaveMore (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.moreOptions = false
        }
      })
    },
    mouseenter (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.showMore = true
        }
      })
    },
    mouseleave (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.showMore = false
          t.moreOptions = false
        }
@@ -130,12 +133,14 @@ export default {
    },
    edit (id) {
      const pageNo = this.$router.currentRoute.value.query.pageNo
+      const listMode = this.$router.currentRoute.value.query.listMode
      this.$router.push({
        path: '/knowledgeBase/edit',
        query: {
          t: +new Date(),
          pageNoForTable: pageNo || 1,
-          id: id
+          id: id,
+          listMode: listMode
        }
      })
    }
@@ -144,9 +149,23 @@ export default {
    this.tableData.forEach(item => {
      item.showMore = false
      item.moreOptions = false
-      item.status = true
+      // item.status = true
    })
  },
-  computed: {}
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+
+  }
 }
 </script>
--- a/src/mixins/data-list.js
+++ b/src/mixins/data-list.js
@@ -74,29 +74,6 @@ export default {
          break
      }
    },
-    checkboxStatusChange (isCheck, data) {
-      if (isCheck) {
-        const delObj = this.batchDeleteObjs.find(item => item.id === data.id)
-        if (delObj === undefined) {
-          this.batchDeleteObjs.push(data)
-        }
-      } else {
-        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.id === data.id)
-        if (cancleObjIndex > -1) {
-          this.batchDeleteObjs.splice(cancleObjIndex, 1)
-        }
-      }
-      if (this.batchDeleteObjs.length > 1) {
-        this.disableEdit = true
-      } else {
-        this.disableEdit = false
-      }
-      if (this.batchDeleteObjs.length >= 1) {
-        this.disableDelete = false
-      } else {
-        this.disableDelete = true
-      }
-    },
    selectionChange (objs) {
      this.batchDeleteObjs = []
      objs.forEach(obj => {
@@ -120,7 +97,8 @@ export default {
      if (isAll) {
        this.searchLabel = null
      } else if (isClearType) {
-        this.searchLabel.tagType = ''
+        // this.searchLabel.tagType = ''
+        this.searchLabel.type = ''// 换新接口需要修改的属性名称
      }
      if (params) {
        this.searchLabel = { ...this.searchLabel, ...params }
@@ -136,7 +114,7 @@ export default {
        this.tools.loading = false
        if (response.code === 200) {
          for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
+            response.data.list[i].status = response.data.list[i].status === 1
          }
          this.tableData = response.data.list
          this.pageObj.total = response.data.total
@@ -364,7 +342,7 @@ export default {
    },
    dragend () {
      this.$nextTick(() => {
-        if (this.$refs.dataTable.$refs.dataTable) {
+        if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
          this.$refs.dataTable.$refs.dataTable.doLayout()
        }
      })
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -1,5 +1,7 @@
 import { chartTableOrderOptionsMapping, storageKey } from '@/utils/constants'
 import { getWidthByLanguage } from '@/utils/tools'
+import { put, patch } from '@/utils/http'
+import { api } from '@/utils/api'
 export default {
  props: {
    tableData: {
@@ -99,6 +101,21 @@ export default {
        })
      }
    },
+    changeStatus (status, id) {
+      const statusNum = status ? 1 : 0
+      patch(api.knowledgeBaseEnable, { list: [{ knowledgeId: id, status: 0 }] }).then(response => {
+        if (response.code === 200) {
+
+        } else {
+          console.error(response)
+          if (response.message) {
+            this.$message.error(response.message)
+          } else {
+            this.$message.error('Something went wrong...')
+          }
+        }
+      })
+    },
    tableOperation ([command, row]) {
      switch (command) {
        default:
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -35,7 +35,9 @@ export const api = {
  // galaxyProxy
  galaxyProxy: '/galaxy/setting',
  // 知识库
-  knowledgeBase: '/knowledgeBase',
+  knowledgeBase: BASE_CONFIG.apiVersion + '/knowledgeBase',
+  knowledgeBaseList: BASE_CONFIG.apiVersion + '/knowledgeBase/list',
+  knowledgeBaseEnable: BASE_CONFIG.apiVersion + '/knowledgeBase/status',

  // 报告相关
  reportJob: '/report/job',
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -299,18 +299,97 @@ export const cycle = {
  pre: 1
 }

+export const itemListHeight = {
+  hasData: 478,
+  noData: 250
+}
+
 export const knowledgeBaseType = [
  {
-    name: 'IP',
-    value: 'ip'
+    label: 'IP',
+    value: 'cn_ip_tag_user_defined',
+    name: 'ip'
  },
  {
-    name: 'Domain',
-    value: 'domain'
+    label: 'Domain',
+    value: 'cn_domain_tag_user_defined',
+    name: 'domain'
  },
  {
-    name: 'APP',
-    value: 'app'
+    label: 'APP',
+    value: 'cn_app_tag_user_defined',
+    name: 'app'
+  }
+]
+
+export const knowledgeBaseCategory = [
+  {
+    name: 'WebSketch',
+    value: 'websketch'
+  },
+  {
+    name: 'AI Tagging',
+    value: 'ai_tagging'
+  },
+  {
+    name: 'User-defined',
+    value: 'user_defined'
+  }
+]
+
+export const knowledgeCategoryValue = {
+  webSketch: 'websketch',
+  aiTagging: 'ai_tagging',
+  userDefined: 'user_defined'
+}
+export const knowledgeSourceValue = {
+  fqdnCategory: 'cn_fqdn_category_built_in',
+  iocMalware: 'cn_ioc_malware',
+  iocDarkweb: 'cn_ioc_darkweb',
+  ipLocation: 'cn_ip_location_built_in',
+  asn: 'cn_ip_asn_built_in',
+  psiphon3: 'cn_psiphon3_ip',
+  ipTag: 'cn_ip_tag_user_defined',
+  domainTag: 'cn_domain_tag_user_defined',
+  appTag: 'cn_app_tag_user_defined'
+}
+
+export const knowledgeBaseSource = [
+  {
+    name: 'FQDN Category',
+    value: 'cn_fqdn_category_built_in'
+  },
+  {
+    name: 'Ioc Malware',
+    value: 'cn_ioc_malware'
+  },
+  {
+    name: 'Ioc Darkweb',
+    value: 'cn_ioc_darkweb'
+  },
+  {
+    name: 'IP Location',
+    value: 'cn_ip_location_built_in'
+  },
+  {
+    name: 'ASN',
+    value: 'cn_ip_asn_built_in'
+  },
+  {
+    name: 'Psiphon3',
+    value: 'cn_psiphon3_ip'
+  },
+  {
+    name: 'IP Tag',
+    value: 'cn_ip_tag_user_defined'
+  },
+  {
+    name: 'Domain Tag',
+    value: 'cn_domain_tag_user_defined'
+  },
+  {
+    name: 'APP Tag',
+    value: 'cn_app_tag_user_defined'
  }
 ]

--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -142,6 +142,21 @@ export function put (url, params, headers) {
  })
 }

+export function patch (url, params, headers) {
+  return new Promise((resolve) => {
+    axios.patch(url, params, { headers: headers }).then(response => {
+      resolve(response.data, response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response.data)
+        console.error(err)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
 export function del (url, params) {
  return new Promise((resolve) => {
    axios.delete(url, params).then(response => {
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -18,12 +18,18 @@
              <i class="cn-icon-xinjian cn-icon"></i>
              <span>{{$t('overall.create')}}</span>
            </button>
-            <button v-if="listMode === 'block'" id="knowledge-base-edit" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
+            <button v-if="listMode === 'block'" id="knowledge-base-select" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
                    style="width:72px;"
                    @click="toSelect">
              <i class="cn-icon-select cn-icon" ></i>
              <span>{{$t('overall.select')}}</span>
            </button>
+            <button v-if="listMode === 'list'" id="knowledge-base-edit" :title="$t('knowledgeBase.editKnowledgeBase')" class="top-tool-btn margin-r-10"  :disabled="disableEdit"
+                    style="width:72px;"
+                    @click="editSelectRecord">
+              <i class="cn-icon-edit cn-icon" ></i>
+              <span>{{$t('overall.edit')}}</span>
+            </button>
            <button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
                    style="width:72px;" :disabled="disableDelete"
                    @click="toDelete">
@@ -39,8 +45,8 @@
          </div>
          <div class="top-tools__right" >
            <el-button-group size="mini">
-              <el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
-              <el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
+              <el-button size="mini" @click="modeChange('list')" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
+              <el-button size="mini" @click="modeChange('block')" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
            </el-button-group>
          </div>
        </div>
@@ -68,7 +74,7 @@
        <template v-else-if="listMode === 'block'">
          <div class="list-mode__card" >
            <knowledge-base-table-for-card
-                    ref="dataTable"
+                    ref="dataTableCard"
                    v-loading="tools.loading"
                    :api="url"
                    :custom-table-title="tools.customTableTitle"
@@ -110,9 +116,10 @@
              type="selection"
              width="50">
      </el-table-column>
-      <el-table-column property="id" label="ID" width="112"></el-table-column>
-      <el-table-column property="tagType" label="Type" width="112"></el-table-column>
-      <el-table-column property="tagName" label="Name"></el-table-column>
+      <el-table-column property="knowledgeId" label="ID" width="50"></el-table-column>
+      <el-table-column property="category" label="Category" width="100"></el-table-column>
+      <el-table-column property="source" label="Source" width="110"></el-table-column>
+      <el-table-column property="name" label="Name"></el-table-column>
    </el-table>
    <template #footer>
        <span class="dialog-footer">
@@ -128,6 +135,7 @@ import dataListMixin from '@/mixins/data-list'
 import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
 import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
 import { api } from '@/utils/api'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import axios from 'axios'
 import KnowledgeFilter from '@/views/setting/KnowledgeFilter'

@@ -143,6 +151,7 @@ export default {
  data () {
    return {
      url: api.knowledgeBase,
+      listUrl: api.knowledgeBaseList,
      tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
      isSelectedStatus: false,
      keyWord: '',
@@ -176,12 +185,53 @@ export default {
    secondSelectionChange (objs) {
      this.secondBatchDeleteObjs = objs
    },
-
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      if (this.batchDeleteObjs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
+      }
+    },
+    checkboxStatusChange (isCheck, data) {
+      if (isCheck) {
+        const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(data)
+        }
+      } else {
+        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
+        if (cancleObjIndex > -1) {
+          this.batchDeleteObjs.splice(cancleObjIndex, 1)
+        }
+      }
+      if (this.batchDeleteObjs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
+      }
+    },
    delBatchKnowledge () {
      const ids = []
      if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
        this.secondBatchDeleteObjs.forEach(item => {
-          ids.push(item.id)
+          ids.push(item.knowledgeId)
        })
      }
      if (ids.length === 0) {
@@ -191,7 +241,7 @@ export default {
        }).catch(() => {})
      } else {
        this.tools.loading = true
-        axios.delete(this.url + '?ids=' + ids).then(response => {
+        axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
          if (response.data.code === 200) {
            this.delFlag = true
            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -260,7 +310,7 @@ export default {
      this.pageObj.total = 0
    },
    toSelect () {
-      this.$refs.dataTable.clearSelect()
+      this.$refs.dataTableCard.clearSelect()
      this.isSelectedStatus = !this.isSelectedStatus
      this.disableDelete = true
      this.batchDeleteObjs = []
@@ -273,11 +323,11 @@ export default {
          type: 'warning'
        }).catch(() => {})
      } else {
-        this.jumpToEditPage(this.batchDeleteObjs[0].id)
+        this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
      }
    },
    toDelete (data) {
-      if (data && data.id) {
+      if (data && data.knowledgeId) {
        this.secondBatchDeleteObjs = []
        this.batchDeleteObjs = []
        this.secondBatchDeleteObjs.push(data)
@@ -285,6 +335,12 @@ export default {
      }
      this.showDelDialog()
    },
+    modeChange (mode) {
+      this.listMode = mode
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, { listMode: mode })
+      overwriteUrl(newUrl)
+    },
    del (row) {
      this.$confirm(this.$t('tip.confirmDelete'), {
        confirmButtonText: this.$t('tip.yes'),
@@ -292,7 +348,7 @@ export default {
        type: 'warning'
      }).then(() => {
        this.tools.loading = true
-        axios.delete(this.url + '?ids=' + row.id).then(response => {
+        axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
          if (response.data.code === 200) {
            this.delFlag = true
            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -317,7 +373,8 @@ export default {
        path: '/knowledgeBase/edit',
        query: {
          t: +new Date(),
-          id: id
+          id: id,
+          listMode: this.listMode
        }
      })
    },
@@ -325,13 +382,15 @@ export default {
      this.$router.push({
        path: '/knowledgeBase/create',
        query: {
-          t: +new Date()
+          t: +new Date(),
+          listMode: this.listMode
        }
      })
    }
  },
  mounted () {
-
+    const curMode = this.$router.currentRoute.value.query.listMode
+    this.listMode = curMode || 'list'
  },
  computed: {
  }
--- a/src/views/setting/KnowledgeBaseForm.vue
+++ b/src/views/setting/KnowledgeBaseForm.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="edit-knowledge-base">
    <loading :loading="initLoading"></loading>
-    <div class="edit-knowledge-base__header">{{ editObject.id ? $t('overall.edit') : $t('overall.create') }}</div>
+    <div class="edit-knowledge-base__header">{{ editObject.knowledgeId ? $t('overall.edit') : $t('overall.create') }}</div>
    <div class="edit-knowledge-base__body">
      <el-steps direction="vertical" :active="activeStep">
        <el-step v-for="(height, index) in stepHeights" :style="`flex-basis: ${height}px; flex-shrink: 0;`"
@@ -14,26 +14,26 @@
          </template>
          <el-form :model="editObject" label-position="top" ref="form" :rules="rules">
            <!--name-->
-            <el-form-item :label="$t('config.roles.name')" prop="tagName">
-              <el-input class="form-input" maxlength="64" placeholder="" :disabled="!!editObject.id" show-word-limit
-                        size="mini" type="text" v-model="editObject.tagName" @blur="tagNameBlur"></el-input>
+            <el-form-item :label="$t('config.roles.name')" prop="name">
+              <el-input class="form-input" maxlength="64" placeholder="" :disabled="!!editObject.knowledgeId" show-word-limit
+                        size="mini" type="text" v-model="editObject.name" @blur="tagNameBlur"></el-input>
            </el-form-item>
-            <el-form-item :label="$t('overall.type')" prop="tagType">
-              <el-select v-model="editObject.tagType"
+            <el-form-item :label="$t('overall.type')" prop="source">
+              <el-select v-model="editObject.source"
                         class="form-select"
                         placeholder=" "
                         popper-class="form-select-popper"
-                         :disabled="!!editObject.id || typeSelectDisable"
+                         :disabled="!!editObject.knowledgeId || typeSelectDisable"
                         size="mini"
              >
                <template v-for="type in knowledgeBaseType" :key="type.name">
-                  <el-option :label="type.name" :value="type.value"></el-option>
+                  <el-option :label="type.label" :value="type.value"></el-option>
                </template>
              </el-select>
            </el-form-item>
-            <el-form-item :label="$t('overall.remark')" prop="remark">
+            <el-form-item :label="$t('overall.remark')" prop="description">
              <el-input maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
-                        v-model="editObject.remark" id="role-box-input-remark"/>
+                        v-model="editObject.description" id="role-box-input-remark"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>
@@ -42,7 +42,7 @@
            <div class="form-sub-title">{{ $t('overall.importFromFile') }}</div>
          </template>
          <loading :loading="uploadLoading"></loading>
-          <el-upload :action="`${baseUrl}knowledge/import`"
+          <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/parser`"
                     :headers="uploadHeaders"
                     :data="uploadParams"
                     :multiple="false"
@@ -72,7 +72,7 @@
          <template #title>
            <div class="form-sub-title">{{ $t('overall.preview') }}</div>
          </template>
-          <div class="skeleton-border" v-if="!uploaded && !editObject.id">
+          <div class="skeleton-border" v-if="!uploaded && !editObject.knowledgeId">
            <el-skeleton>
              <template #template>
                <div v-for="item of 6" :key="item" class="skeleton-item-row">
@@ -86,7 +86,7 @@
          </div>
          <template v-else>
            <div class="imported-tip"><i class="cn-icon cn-icon-baocuo"/>
-              &nbsp;&nbsp;{{ editObject.id && isLoad? $t('knowledgeBase.loadTip', {
+              &nbsp;&nbsp;{{ editObject.knowledgeId && isLoad? $t('knowledgeBase.loadTip', {
              load: originalImportInfo.total
              }) : $t('knowledgeBase.importTip', {
              total: originalImportInfo.total,
@@ -100,45 +100,45 @@
                  <tr>
                    <th style="width: 230px">{{ importedTableFirstColumn }}</th>
                    <th style="width: 180px">Label</th>
-                    <th v-if="!editObject.id">{{ $t('overall.import') }}</th>
+                    <th v-if="!editObject.knowledgeId">{{ $t('overall.import') }}</th>
                    <th style="width: 16px"></th>
                  </tr>
-                  <tr v-for="(d, i) in showImportedData" :key="importedType + d.tagItem + d.tagValue + i">
-                    <td class="imported-data-item" :title="d.tagItem">
-                      <el-form-item v-if="(editObject.id && editIndex === i)  || (addEditFlag && d.tagItem === '' && d.tagValue === '')" prop="tagItem">
+                  <tr v-for="(d, i) in showImportedData" :key="importedType + d.tagName + d.tagValue + i">
+                    <td class="imported-data-item" :title="d.tagName">
+                      <el-form-item v-if="(editObject.knowledgeId && editIndex === i)  || (addEditFlag && d.tagName === '' && d.tagValue === '')" prop="tagName">
                        <span class="imported-data-item-edit__input">
-                          <el-input v-model="editTagForm.tagItem" @blur="onBlurTagItem"></el-input>
+                          <el-input v-model="editTagForm.tagName" @blur="onBlurTagItem"></el-input>
                        </span>
                      </el-form-item>
-                      <span v-else>{{ d.tagItem }}</span>
+                      <span v-else>{{ d.tagName }}</span>
                    </td>
                    <td class="imported-data-value" :title="d.tagValue">
-                      <el-form-item v-if="(editObject.id && editIndex === i) || (addEditFlag && d.tagItem === '' && d.tagValue === '')" prop="tagValue">
+                      <el-form-item v-if="(editObject.knowledgeId && editIndex === i) || (addEditFlag && d.tagName === '' && d.tagValue === '')" prop="tagValue">
                        <span class="imported-data-item-edit__input">
                          <el-input v-model="editTagForm.tagValue" @blur="onBlurTagItem"></el-input>
                        </span>
                      </el-form-item>
                      <span v-else>{{ d.tagValue }}</span>
                    </td>
-                    <td v-if="!editObject.id" class="imported-data-msg" :title="d.msg">
-                      <i :class="d.status === 1 ? 'el-icon-success' : 'el-icon-error'"></i>&nbsp;&nbsp;{{ d.msg }}
+                    <td v-if="!editObject.knowledgeId" class="imported-data-msg" :title="d.msg">
+                      <i :class="d.isValid === 1 ? 'el-icon-success' : 'el-icon-error'"></i>&nbsp;&nbsp;{{ d.msg }}
                    </td>
                    <td v-else></td>
                    <!--返回和保存按钮-->
-                    <td v-if="editObject.id && backEditFlag && !addEditFlag && editIndex === i" class="imported-data-btn">
-                      <i v-if="editObject.id" class="cn-icon cn-icon-revoke imported-data-left-btn imported-data-back"
+                    <td v-if="editObject.knowledgeId && backEditFlag && !addEditFlag && editIndex === i" class="imported-data-btn">
+                      <i v-if="editObject.knowledgeId" class="cn-icon cn-icon-revoke imported-data-left-btn imported-data-back"
                         @click="backImportedData"></i>
                      <i class="cn-icon cn-icon-save imported-data-save" @click="saveImportedData(i)"></i>
                    </td>
                    <!--保存和删除按钮-->
-                    <td v-else-if="(editObject.id && addEditFlag && editIndex === i) || (addEditFlag && d.tagItem === '' && d.tagValue === '')" class="imported-data-btn">
+                    <td v-else-if="(editObject.knowledgeId && addEditFlag && editIndex === i) || (addEditFlag && d.tagName === '' && d.tagValue === '')" class="imported-data-btn">
                      <i class="cn-icon cn-icon-save imported-data-save" style="margin: 0 7px"
                         @click="saveImportedData(i)"></i>
                      <i class="el-icon-close" @click="removeImportedData(i)"></i>
                    </td>
                    <!--编辑和删除按钮-->
                    <td v-else class="imported-data-btn">
-                      <i v-if="editObject.id" class="cn-icon cn-icon-edit1 imported-data-left-btn"
+                      <i v-if="editObject.knowledgeId" class="cn-icon cn-icon-edit1 imported-data-left-btn"
                         @click="editImportedData(i)"></i>
                      <i class="el-icon-close" @click="removeImportedData(i)"></i>
                    </td>
@@ -148,7 +148,7 @@
              </el-form>
              <Pagination
                  class="imported-pagination"
-                  :style="{'bottom': editObject.id ? '48px' : '0'}"
+                  :style="{'bottom': editObject.knowledgeId ? '48px' : '0'}"
                  :page-obj="importedPageObj"
                  :store-page-no-on-url="false"
                  layout="prev,pager,next"
@@ -168,6 +168,18 @@
            </transition>
          </template>
        </el-collapse-item>
+        <el-collapse-item name="3" class="enable-form__mt">
+          <template #title>
+            <div class="form-sub-title">{{ $t('knowledge.enable') }}</div>
+          </template>
+
+              <el-switch class="card-enable"
+                         v-model="status"
+                         active-color="#38ACD2"
+                         inactive-color="#C0CEDB"
+              >
+              </el-switch>
+        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="edit-knowledge-base__footer">
@@ -186,7 +198,7 @@
 import { useRoute } from 'vue-router'
 import { nextTick, reactive, ref } from 'vue'
 import _ from 'lodash'
-import { knowledgeBaseType, storageKey, unitTypes } from '@/utils/constants'
+import { knowledgeBaseType, storageKey, unitTypes, knowledgeSourceValue, itemListHeight } from '@/utils/constants'
 import Pagination from '@/components/common/Pagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import axios from 'axios'
@@ -210,11 +222,11 @@ export default {
    }
    const nameAndTypeValidator = async (rule, value, callback) => {
      let validate = true
-      if (!this.editObject.id) {
-        this.$refs.form.clearValidate('tagType')
+      if (!this.editObject.knowledgeId) {
+        this.$refs.form.clearValidate('type')
        const response = await this.getKnowledgeBaseList()
        if (response.data.code === 200) {
-          const find = response.data.data.list.find(d => d.tagName === value && d.tagType === this.editObject.tagType)
+          const find = response.data.data.list.find(d => d.name === value && d.source === this.editObject.source)
          if (find) {
            validate = false
            callback(new Error())
@@ -225,11 +237,11 @@ export default {
    }
    const typeAndNameValidator = async (rule, value, callback) => {
      let validate = true
-      if (!this.editObject.id) {
-        this.$refs.form.clearValidate('tagName')
+      if (!this.editObject.knowledgeId) {
+        this.$refs.form.clearValidate('name')
        const response = await this.getKnowledgeBaseList()
        if (response.data.code === 200) {
-          const find = response.data.data.list.find(d => d.tagName === this.editObject.tagName && d.tagType === value)
+          const find = response.data.data.list.find(d => d.name === this.editObject.name && d.source === value)
          if (find) {
            validate = false
            callback(new Error())
@@ -241,10 +253,10 @@ export default {
    const nameAndLabelDuplicateValidator = (rule, value, callback) => {
      let validate = true
      let index = -1 // 当前编辑的键值index
-      // 查看是否重名前，需要对名称进行校验，分别是IP、domain、APP的校验
+      //查看是否重名前，需要对名称进行校验，分别是IP、domain、APP的校验
      const findData = this.importedData.find((item, i) => {
        index = i
-        return (item.tagItem === this.editTagForm.tagItem && item.tagValue === this.editTagForm.tagValue)
+        return (item.tagName === this.editTagForm.tagName && item.tagValue === this.editTagForm.tagValue)
      })
      if (findData) { // 找到1条记录
        // 如果name重复的第一个键值不是当前编辑item的index，即代表后续有重名的项了，提示重名
@@ -279,8 +291,8 @@ export default {
    }
    const nameFormatValidator = (rule, value, callback) => {
      let validate = true
-      const tagType = this.editObject.tagType// 当前选中的类型
-      if (tagType === 'ip') {
+      const type = this.editObject.source// 当前选中的类型
+      if (type === knowledgeSourceValue.ipTag) {
        const formal = value.replace(/\s+/g, '')// 去掉空格
        if (formal.indexOf('/') !== -1) {
          if (!(regular.ipv4CIDR.test(formal)) && !(regular.ipv6CIDR.test(formal))) {
@@ -295,14 +307,14 @@ export default {
            callback(new Error())
          }
        }
-      } else if (tagType === 'app') {
+      } else if (type === knowledgeSourceValue.appTag) {
        const pattern = /.*[*?!&$%#^,.;:<>/@\"{}\-\]\[=+_\\|].*$/
        if (pattern.test(value)) {
          validate = false
          this.editTagErrorTip = rule.message
          callback(new Error())
        }
-      } else if (tagType === 'domain') { // 域名只支持 字母数字.-_
+      } else if (type === knowledgeSourceValue.domainTag) { // 域名只支持 字母数字.-_
        if ((value.substr(0, 1) === '*' || value.substr(0, 1) === '$') &&
            !(value.substr(-1) === '*' || value.substr(-1) === '$')) {
          if (value.substr(0, 1) === '$') { // 处理$开头的情况
@@ -348,7 +360,7 @@ export default {
    }
    return {
      rules: {
-        tagName: [
+        name: [
          {
            required: true,
            message: this.$t('validate.required'),
@@ -365,7 +377,7 @@ export default {
            trigger: 'blur'
          }
        ],
-        tagType: [
+        source: [
          {
            required: true,
            message: this.$t('validate.required'),
@@ -379,7 +391,7 @@ export default {
        ]
      },
      editTagFormRules: {
-        tagItem: [
+        tagName: [
          {
            // required: true,
            validator: requiredItemValidator,
@@ -412,7 +424,9 @@ export default {
      isShowUploadTips: false,
      isPreviewChange: false,
      isClick: false,
-      pageNoForTable: 1
+      pageNoForTable: 1,
+      listMode: 'list',
+      status: true
    }
  },
  methods: {
@@ -435,29 +449,47 @@ export default {
      this.uploadLoading = false
      this.$message.error(this.$t('tip.uploadFailed', { msg: 'error' }))
    },
+    handleSpeticalTypeData (originalImportedData) {
+      originalImportedData.forEach(item => {
+        const names = item.tagNames
+        if (this.editObject.source === knowledgeSourceValue.ipTag && names) {
+          const format = names.addrFormat
+          if (format === 'Single') {
+            item.tagName = names.ip1
+          } else if (format === 'CIDR') {
+            item.tagName = names.ip1 + '/' + names.ip2
+          } else if (format === 'Range') {
+            item.tagName = names.ip1 + '~' + names.ip2
+          }
+        }
+      })
+      return originalImportedData
+    },
    uploadSuccess (response) {
      this.uploaded = response.code === 200
      if (response.code === 200) {
        // 上传成功后去掉upload和preview的错误提示
        this.uploadErrorTip = ''
        this.previewErrorTip = ''
-        this.importedType = this.editObject.tagType
+        this.importedType = this.editObject.source
        const originalImportedData = _.cloneDeep(response.data.data)
        this.importedDataNoData = originalImportedData.length === 0
        this.originalImportInfo = {
          total: originalImportedData.length,
-          succeeded: originalImportedData.filter(d => d.status === 1).length,
-          failed: originalImportedData.filter(d => d.status !== 1).length
+          succeeded: originalImportedData.filter(d => d.isValid === 1).length,
+          failed: originalImportedData.filter(d => d.isValid !== 1).length
        }
        this.isLoad = false
-        originalImportedData.sort((a, b) => b.status - a.status)
-        this.importedData = originalImportedData
+        originalImportedData.sort((a, b) => b.isValid - a.isValid)
+        this.importedData = this.handleSpeticalTypeData(originalImportedData)

        this.handleShowImportedData()
        this.addEditFlag = false
        this.editTagErrorTip = ''
        this.editIndex = -1
        this.isPreviewChange = true
+        this.stepHeights[2] = itemListHeight.hasData
+        this.stepHeightConstant.third = itemListHeight.hasData
      } else {
        this.uploadLoading = false
        this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
@@ -479,6 +511,11 @@ export default {
        this.editIndex = -1
        this.isPreviewChange = true
        this.importedDataNoData = true
+
+        if (!this.editObject.knowledgeId) { // 新增且删除文件时，高度变为250
+          this.stepHeights[2] = itemListHeight.noData
+          this.stepHeightConstant.third = itemListHeight.noData
+        }
      }
      if (this.fileListBack !== undefined && this.fileListBack.status === 'success' &&
            this.importedData.length > 0) {
@@ -582,7 +619,7 @@ export default {
      // 删除内容为空的新增记录
      const lastIndex = this.importedData.length - 1
      const lastData = this.importedData[lastIndex]
-      if (lastData !== undefined && lastData.tagItem === '' && lastData.tagValue === '') {
+      if (lastData !== undefined && lastData.tagName === '' && lastData.tagValue === '') {
        this.importedData.pop()
      }
      this.importedPageObj.total = this.importedData.length
@@ -618,7 +655,8 @@ export default {
            path: '/knowledgeBase',
            query: {
              pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-              t: +new Date()
+              t: +new Date(),
+              listMode: this.listMode
            }
          })
        }).catch(() => {})
@@ -627,7 +665,8 @@ export default {
          path: '/knowledgeBase',
          query: {
            pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-            t: +new Date()
+            t: +new Date(),
+            listMode: this.listMode
          }
        })
      }
@@ -639,8 +678,8 @@ export default {
      this.blockOperation.save = true
      // 校验form + upload + preview
      this.$refs.form.validate(valid => {
-        this.$refs.form.validateField('tagName')
-        if (!this.uploaded && !this.editObject.id) {
+        this.$refs.form.validateField('name')
+        if (!this.uploaded && !this.editObject.knowledgeId) {
          this.uploadErrorTip = this.$t('validate.required')
        } else {
          this.uploadErrorTip = ''
@@ -658,38 +697,54 @@ export default {
              if (validImportData) {
                // 校验通过后组织数据、请求接口
                if (valid && !this.uploadErrorTip && !this.previewErrorTip) {
-                  if (this.importedData.length === 1 && this.importedData[0].tagItem === '') {
+                  if (this.importedData.length === 1 && this.importedData[0].tagName === '') {
                    // this.blockOperation.save = false
                  } else {
+                    const t = this.knowledgeBaseType.find(t => t.value === this.editObject.source)
                    const postData = {
-                      tagName: this.editObject.tagName,
-                      tagType: this.editObject.tagType,
-                      data: []
+                      name: this.editObject.name,
+                      category: 'user_defined',
+                      type: t ? t.name : '',
+                      description: this.editObject.description,
+                      status: this.status ? 1 : 0
                    }
                    // 避免点击新增后，并没有保存新增项就点击了save，此时删除新增的空白项
-                    if (this.importedData[this.importedData.length - 1].tagItem === '') {
+                    if (this.importedData[this.importedData.length - 1].tagName === '') {
                      this.importedData.pop()
                    }
+
+                    const self = this
+                    if (!this.editObject.knowledgeId) {
+                      postData.addItemList = []
                      this.importedData.forEach(d => {
-                      const findData = postData.data.find(d2 => d2.tagValue === d.tagValue)
-                      if (findData) {
-                        findData.itemList.add(d.tagItem)
-                      } else {
-                        const set = new Set()
-                        set.add(d.tagItem)
-                        postData.data.push({
+                        if (this.editObject.source === knowledgeSourceValue.ipTag) {
+                          const sepIndex = d.tagName.indexOf('/')
+                          if (sepIndex > -1) { // CIDR
+                            postData.addItemList.push({
                              tagValue: d.tagValue,
-                          itemList: set
+                              tagNames: {
+                                addrFormat: 'CIDR',
+                                ip1: d.tagName.substring(0, sepIndex),
+                                ip2: d.tagName.substring(sepIndex + 1)
+                              }
+                            })
+                          } else { // Single
+                            postData.addItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'Single',
+                                ip1: d.tagName,
+                                ip2: ''
+                              }
+                            })
+                          }
+                        } else {
+                          postData.addItemList.push({
+                            tagValue: d.tagValue,
+                            tagName: d.tagName
                          })
                        }
                      })
-                    postData.data.forEach(d => {
-                      // d.itemList = [...d.itemList]
-                      d.itemList = Array.from(d.itemList)
-                    })
-                    postData.remark = this.editObject.remark
-                    const self = this
-                    if (!this.editObject.id) {
                      axios.post(this.url, postData).then(response => {
                        if (response.data.code === 200) {
                          this.$message({
@@ -701,7 +756,8 @@ export default {
                            path: '/knowledgeBase',
                            query: {
                              pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-                              t: +new Date()
+                              t: +new Date(),
+                              listMode: this.listMode
                            }
                          })
                        } else {
@@ -714,7 +770,37 @@ export default {
                        this.blockOperation.save = false
                      })
                    } else {
-                      postData.id = this.editObject.id
+                      postData.updateItemList = []
+                      this.importedData.forEach(d => {
+                        if (this.editObject.source === knowledgeSourceValue.ipTag) {
+                          const sepIndex = d.tagName.indexOf('/')
+                          if (sepIndex > -1) { // CIDR
+                            postData.updateItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'CIDR',
+                                ip1: d.tagName.substring(0, sepIndex),
+                                ip2: d.tagName.substring(sepIndex + 1)
+                              }
+                            })
+                          } else { // Single
+                            postData.updateItemList.push({
+                              tagValue: d.tagValue,
+                              tagNames: {
+                                addrFormat: 'Single',
+                                ip1: d.tagName,
+                                ip2: ''
+                              }
+                            })
+                          }
+                        } else {
+                          postData.updateItemList.push({
+                            tagValue: d.tagValue,
+                            tagName: d.tagName
+                          })
+                        }
+                      })
+                      postData.knowledgeId = this.editObject.knowledgeId
                      axios.put(this.url, postData).then(response => {
                        if (response.data.code === 200) {
                          this.$message({
@@ -726,7 +812,8 @@ export default {
                            path: '/knowledgeBase',
                            query: {
                              pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-                              t: +new Date()
+                              t: +new Date(),
+                              listMode: this.listMode
                            }
                          })
                        } else {
@@ -756,16 +843,16 @@ export default {
      })
    },
    hasErrorImportedData () {
-      return this.importedData.filter(d => d.status !== 1).length > 0
+      return this.importedData.filter(d => d.isValid !== 1).length > 0
    },
    async getKnowledgeBaseList () {
-      return await axios.get(this.url, { params: { pageSize: 999 } }).catch(e => {
+      return await axios.get(this.listUrl, { params: { pageSize: 999 } }).catch(e => {
        console.error(e)
        this.errorMsgHandler(e)
      })
    },
    editImportedData (index) {
-      this.editTagForm.tagItem = this.showImportedData[index].tagItem
+      this.editTagForm.tagName = this.showImportedData[index].tagName
      this.editTagForm.tagValue = this.showImportedData[index].tagValue

      // 点击编辑时，如正处于新增状态，则去除新增项（此时新增并为保存，不必保留）
@@ -785,7 +872,7 @@ export default {
    },
    backImportedData () {
      this.editTagForm = reactive({
-        tagItem: '',
+        tagName: '',
        tagValue: ''
      })

@@ -796,18 +883,18 @@ export default {
    saveImportedData (index) {
      this.$refs.editForm.validate(valid => {
        if (valid) {
-          this.showImportedData[index].tagItem = this.editTagForm.tagItem
+          this.showImportedData[index].tagName = this.editTagForm.tagName
          this.showImportedData[index].tagValue = this.editTagForm.tagValue
-          this.showImportedData[index].status = 1
+          this.showImportedData[index].isValid = 1
          let num = -1
          const findData = this.importedData.find((item, i) => {
            num = i
-            return (item.tagItem === this.editTagForm.tagItem && item.tagValue === this.editTagForm.tagValue)
+            return (item.tagName === this.editTagForm.tagName && item.tagValue === this.editTagForm.tagValue)
          })
          if (!findData) {
-            this.importedData[num].tagItem = this.editTagForm.tagItem
+            this.importedData[num].tagName = this.editTagForm.tagName
            this.importedData[num].tagValue = this.editTagForm.tagValue
-            this.importedData[num].status = 1
+            this.importedData[num].isValid = 1
          }

          this.addEditFlag = false
@@ -825,18 +912,18 @@ export default {
      })
    },
    addTagAtLast () {
-      this.editTagForm.tagItem = ''
+      this.editTagForm.tagName = ''
      this.editTagForm.tagValue = ''
      const total = this.importedData.length
      this.addEditFlag = true
      // 如果已经有新增空白项，则不再进行新增操作
-      if (this.importedData.length === 0 || (this.importedData[this.importedData.length - 1].tagItem !== '' && this.importedData[this.importedData.length - 1].tagValue !== '')) {
+      if (this.importedData.length === 0 || (this.importedData[this.importedData.length - 1].tagName !== '' && this.importedData[this.importedData.length - 1].tagValue !== '')) {
        if (total >= 10) {
          const lastPageSize = Math.ceil((total + 1) / 10)
          this.pageNo(lastPageSize)
        }
-        this.importedData.push({ tagItem: '', tagValue: '', status: 1 })
-        this.showImportedData.push({ tagItem: '', tagValue: '', status: 1 })
+        this.importedData.push({ tagName: '', tagValue: '', status: 1 })
+        this.showImportedData.push({ tagName: '', tagValue: '', status: 1 })
        this.importedDataNoData = false

        this.importedPageObj.total = this.importedData.length
@@ -848,8 +935,9 @@ export default {
  },
  computed: {
    uploadParams () {
+      const t = this.knowledgeBaseType.find(t => t.value === this.editObject.source)
      return {
-        type: this.editObject.tagType
+        type: t ? t.name : ''
      }
    },
    importedTableFirstColumn () {
@@ -857,9 +945,10 @@ export default {
      return t ? t.name : ''
    },
    activeStep () {
-      if (this.editObject.id) {
-        return 2
+      if (this.editObject.knowledgeId) {
+        return 3
      } else if (this.tagNameFirstBlur) {
+        // return this.uploaded ? 2 : 1
        return this.uploaded ? 2 : 1
      } else {
        return 0
@@ -868,7 +957,9 @@ export default {
  },
  mounted () {
    const pageNo = this.$router.currentRoute.value.query.pageNoForTable
+    const listMode = this.$router.currentRoute.value.query.listMode
    this.pageNoForTable = pageNo || 1
+    this.listMode = listMode || 'list'
    const div = document.getElementsByClassName('el-upload-dragger')[0]
    const self = this
    div.addEventListener('click', function (event) {
@@ -878,6 +969,8 @@ export default {
      self.uploadTip(event)
    })
    if (this.knowledgeBaseId) {
+      this.stepHeights[2] = itemListHeight.hasData// 修改的时候一直是478
+      this.stepHeightConstant.third = itemListHeight.hasData// 修改的时候一直是478
      this.isLoad = true
      axios.get(`${api.knowledgeBase}/${this.knowledgeBaseId}`).then(response => {
        if (response.data.code === 200) {
@@ -885,7 +978,10 @@ export default {
            throw new Error('No data found, id: ' + this.knowledgeBaseId)
          }
          this.editObject = response.data.data
-          this.importedData = this.revertImportedData(this.editObject.data)
+          this.status = this.editObject.isValid === 1
+          // this.importedData = this.revertImportedData(this.editObject.data)
+          this.importedData = this.handleSpeticalTypeData(this.editObject.list)
+
          this.handleShowImportedData()
          this.originalImportInfo = {
            total: this.importedData.length,
@@ -893,7 +989,7 @@ export default {
            failed: 0
          }
          this.importedPageObj.total = this.importedData.length
-          this.importedType = this.editObject.tagType
+          this.importedType = this.editObject.source
          this.initLoading = false
        } else {
          this.$message.error(this.errorMsgHandler(response))
@@ -905,17 +1001,21 @@ export default {
          path: '/knowledgeBase',
          query: {
            pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
-            t: +new Date()
+            t: +new Date(),
+            listMode: this.listMode
          }
        })
      })
+    } else {
+      this.stepHeightConstant.third = itemListHeight.noData// 进入新增时为250
    }
  },
  watch: {
    activeCollapses (n) {
      const index0 = n.indexOf('0')
      const index1 = n.indexOf('1')
-      if (index0 > -1) {
+      const index2 = n.indexOf('2')
+      if (index0 > -1) { // 第一个折叠为发开状态
        if (this.stepHeights[0] === this.stepHeightConstant.collapse) {
          this.stepHeights.splice(0, 1, this.stepHeightConstant.first)
        }
@@ -933,6 +1033,15 @@ export default {
          this.stepHeights.splice(1, 1, this.stepHeightConstant.collapse)
        }
      }
+      if (index2 > -1) {
+        if (this.stepHeights[2] === this.stepHeightConstant.collapse) {
+          this.stepHeights.splice(2, 1, this.stepHeightConstant.third)
+        }
+      } else {
+        if (this.stepHeights[2] === this.stepHeightConstant.third) {
+          this.stepHeights.splice(2, 1, this.stepHeightConstant.collapse)
+        }
+      }
    },
    importedData (n) {
      this.importedPageObj.total = n.length
@@ -941,7 +1050,7 @@ export default {
      if (!n) {
        const lastIndex = this.importedData.length - 1
        const lastData = this.importedData[lastIndex]
-        if (lastData && lastData.tagItem === '' && lastData.tagValue === '') {
+        if (lastData && lastData.tagName === '' && lastData.tagValue === '') {
          this.importedData.pop()
        }
      }
@@ -956,14 +1065,16 @@ export default {
    const { query } = useRoute()
    const knowledgeBaseId = query.id || ''
    const url = api.knowledgeBase
+    const listUrl = api.knowledgeBaseList
    // 空白对象
    const blankObject = {
-      tagName: '',
+      name: '',
      buildIn: '',
-      id: '',
-      tagType: 'ip',
-      remark: '',
-      updateTime: ''
+      knowledgeId: '',
+      source: 'cn_ip_tag_user_defined',
+      description: '',
+      updateTime: '',
+      status: true
    }
    /* 将组织后的数据还原拉平 */
    const revertImportedData = (data) => {
@@ -971,9 +1082,9 @@ export default {
      data.forEach(d => {
        d.itemList.forEach(item => {
          importedData.push({
-            tagItem: item,
+            tagName: item,
            tagValue: d.tagValue,
-            status: 1
+            isValid: 1
          })
        })
      })
@@ -1008,14 +1119,16 @@ export default {
      uploadLoading.value = false
    }
    // 折叠组件控制
-    const activeCollapses = ref(['0', '1', '2'])
+    const activeCollapses = ref(['0', '1', '2', '3'])
    // 步骤条控制
    const stepHeightConstant = {
      collapse: 58,
      first: 333,
-      second: 284
+      second: 284,
+      third: itemListHeight.noData
    }
-    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.collapse])
+
+    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.third, stepHeightConstant.collapse])

    // 没上传过文件的提示
    const uploadErrorTip = ref('')
@@ -1023,7 +1136,7 @@ export default {
    const previewErrorTip = ref('')
    // 编辑项的form表单内容
    const editTagForm = reactive({
-      tagItem: '', // 待编辑的item项，如ip、domain、app等
+      tagName: '', // 待编辑的item项，如ip、domain、app等
      tagValue: '' // 待编辑的label
    })

@@ -1045,6 +1158,7 @@ export default {
      revertImportedData,
      handleShowImportedData,
      baseUrl: BASE_CONFIG.baseUrl,
+      apiVersion: BASE_CONFIG.apiVersion,
      fileList: ref([]),
      fileListBack: ref(),
      uploadHeaders: {
@@ -1053,6 +1167,7 @@ export default {
      uploaded: ref(false),
      importedDataNoData: ref(false),
      url,
+      listUrl,
      originalImportInfo,
      uploadErrorTip,
      previewErrorTip,
--- a/src/views/setting/KnowledgeFilter.vue
+++ b/src/views/setting/KnowledgeFilter.vue
@@ -11,34 +11,17 @@
        </div>
        <el-collapse-transition>
          <div class="filter__body" v-show="!filter.collapse">
-            <el-checkbox style="padding-bottom: 5px;" label="all" v-if="index === 0" key="all" @change="handleCheckedAllChange" v-model="checkAll" :indeterminate="isIndeterminateModel">
-              <div class="filter__checkbox-label">
-                <div class="filter-label" style="">
-                  <span>All</span>
-                </div>
-                <div class="filter-count">{{allCount}}</div>
-              </div>
-            </el-checkbox>
-            <el-checkbox-group v-if="index === 0" v-model="filter.value" @change="handleCheckedItemChange">
-              <el-checkbox checked="true"  v-for="(d, i) in filter.data"  :label="d.value" :key="d.value" >
-                <div class="filter__checkbox-label">
-                  <div class="filter-label" style="">
-                    <span>{{d.label}}</span>
-                  </div>
-                  <div class="filter-count" v-if="d.count || d.count === 0">{{d.count}}</div>
-                </div>
-              </el-checkbox>
-            </el-checkbox-group>
-            <el-checkbox-group v-else v-model="filter.value" >
-              <el-checkbox checked="true" v-for="(d, i) in filter.data" :label="d.value" :key="d.value" >
-                <div class="filter__checkbox-label">
-                  <div class="filter-label" style="">
-                    <span>{{d.label}}</span>
-                  </div>
-                  <div class="filter-count" v-if="d.count || d.count === 0">{{d.count}}</div>
-                </div>
-              </el-checkbox>
-            </el-checkbox-group>
+            <el-tree
+                    :ref="`knowledgeTree${index}`"
+                    :data="filter.data"
+                    show-checkbox
+                    node-key="id"
+                    default-expand-all
+                    :default-checked-keys="[1,2,3]"
+                    :render-content="renderContent"
+                    @check="(data,checkinfo)=>handleCheckedItemChange(data,checkinfo,index)"
+                    >
+            </el-tree>
          </div>
        </el-collapse-transition>
      </div>
@@ -49,6 +32,7 @@
 <script>
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
+import { knowledgeCategoryValue, knowledgeSourceValue } from '@/utils/constants'

 export default {
  name: 'KnowledgeFilter',
@@ -56,7 +40,7 @@ export default {
  },
  data () {
    return {
-      url: api.knowledgeBase,
+      url: api.knowledgeBaseList,
      checkAll: true,
      isIndeterminateModel: false,
      filterData: [
@@ -73,6 +57,10 @@ export default {
          data: []
        }
      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
      allTableData: [],
      allCount: 0
    }
@@ -80,43 +68,43 @@ export default {
  watch: {
  },
  methods: {
-    handleCheckedAllChange (item) {
-      const values = []
-      this.filterData[0].data.forEach(d => {
-        values.push(d.value)
-      })
-      this.filterData[0].value = item ? values : []
-      this.isIndeterminateModel = false
-      if (item) {
-        this.$emit('reload', null, true)
-      } else {
-        this.$emit('clearList')
-      }
+    renderContent (h, { node, data, store }) {
+      return h('span', { class: 'custom-tree-node' }, [
+        h('span', {}, data.label),
+        h('span', { class: 'count-tree-node' }, data.count)
+      ])
    },
-    handleCheckedItemChange (values) {
-      const len = values.length
-      const allTypeLen = this.filterData[0].data.length
+    handleCheckedItemChange (data, checkinfo, index) {
+      let typeCheckedNodes = this.$refs.knowledgeTree0.getCheckedNodes()
+      const typeHalfCheckedNodes = checkinfo.halfCheckedNodes
+      typeCheckedNodes = typeCheckedNodes.concat(typeHalfCheckedNodes)
+      const statusCheckedNodes = this.$refs.knowledgeTree1.getCheckedNodes()
+      const typeCheckedLen = typeCheckedNodes.length
+      const statusCheckedLen = statusCheckedNodes.length
      let params = {}
-      if (len === 0) {
-        this.isIndeterminateModel = false
-        this.checkAll = false
-        // this.$emit('reload',null,true)
+      if (typeCheckedLen === 0 || statusCheckedLen === 0) {
        this.$emit('clearList')
-      } else if (len > 0 && len < allTypeLen) {
-        this.checkAll = true
-        this.isIndeterminateModel = true
-        const types = []
-        values.forEach(val => {
-          types.push(val)
+      } else {
+        const categorys = []
+        const sources = []
+        typeCheckedNodes.forEach(val => {
+          if (val.type === 0) {
+            categorys.push(val.value)
+          } else if (val.type === 1) {
+            sources.push(val.value)
+          }
        })
        params = {
-          tagType: types.toString()
+          category: categorys.toString(),
+          source: sources.toString()
+        }
+        if (statusCheckedLen === 1) {
+          params = {
+            ...params,
+            status: statusCheckedNodes[0].value
+          }
        }
        this.$emit('reload', params, true)
-      } else if (len === allTypeLen) {
-        this.isIndeterminateModel = false
-        this.checkAll = true
-        this.$emit('reload', null, true)
      }
    },
    getAllTableData (params) {
@@ -127,51 +115,181 @@ export default {
      get(this.url, searchParams).then(response => {
        if (response.code === 200) {
          this.allTableData = response.data.list
-          this.initAllData()
-          this.initStatusData()
        } else {
          console.error(response)
        }
+      }).finally(() => {
+        this.initAllData()
+        this.initStatusData()
      })
    },
    initAllData () {
      this.allCount = this.allTableData.length
+      let webSketchCount = 0
+      let fqdnCategoryCount = 0
+      let iocMalwareCount = 0
+      let iocDarkwebCount = 0
+      let ipLocationCount = 0
+      let asnCount = 0
+      const fqdnWhoCount = 0
+      const fqdnIcpCount = 0
+      const appCategoryCount = 0
+
+      let aiTaggingCount = 0
+      let psiphon3Count = 0
+
+      let userDefinedCount = 0
      let ipCount = 0
      let domainCount = 0
      let appCount = 0
-      let builtInCount = 0
+
+      const builtInCount = 0
      this.allTableData.forEach(data => {
-        if (data.tagType === 'ip') {
+        if (data.category === knowledgeCategoryValue.webSketch) {
+          webSketchCount++
+        } else if (data.category === knowledgeCategoryValue.aiTagging) {
+          aiTaggingCount++
+        } else if (data.category === knowledgeCategoryValue.userDefined) {
+          userDefinedCount++
+        }
+
+        if (data.source === knowledgeSourceValue.fqdnCategory) {
+          fqdnCategoryCount++
+        } else if (data.source === knowledgeSourceValue.iocMalware) {
+          iocMalwareCount++
+        } else if (data.source === knowledgeSourceValue.iocDarkweb) {
+          iocDarkwebCount++
+        } else if (data.source === knowledgeSourceValue.ipLocation) {
+          ipLocationCount++
+        } else if (data.source === knowledgeSourceValue.asn) {
+          asnCount++
+        } else if (data.source === knowledgeSourceValue.psiphon3) {
+          psiphon3Count++
+        } else if (data.source === knowledgeSourceValue.ipTag) {
          ipCount++
-        } else if (data.tagType === 'domain') {
+        } else if (data.source === knowledgeSourceValue.domainTag) {
          domainCount++
-        } else if (data.tagType === 'app') {
+        } else if (data.source === knowledgeSourceValue.appTag) {
          appCount++
-        } else if (data.tagType === 'builtIn') {
-          builtInCount++
        }
      })
      this.filterData[0].data = [
-        // { label: 'All', value: 'all', count: 18 },
-        { label: 'IP', value: 'ip', count: ipCount },
-        { label: 'Domain', value: 'domain', count: domainCount },
-        { label: 'Application', value: 'app', count: appCount },
-        { label: 'Built-in', value: 'builtIn', count: builtInCount }
+        {
+          id: 1,
+          label: 'WebSketch',
+          value: knowledgeCategoryValue.webSketch,
+          count: webSketchCount,
+          type: 0,
+          children: [{
+            id: 11,
+            label: 'FQDN Category',
+            value: knowledgeSourceValue.fqdnCategory,
+            count: fqdnCategoryCount,
+            type: 1
+          }, {
+            id: 12,
+            label: 'Ioc Malware',
+            value: knowledgeSourceValue.iocMalware,
+            count: iocMalwareCount,
+            type: 1
+          }, {
+            id: 13,
+            label: 'Ioc Darkweb',
+            value: knowledgeSourceValue.iocDarkweb,
+            count: iocDarkwebCount,
+            type: 1
+          }, {
+            id: 14,
+            label: 'IP Location',
+            value: knowledgeSourceValue.ipLocation,
+            count: ipLocationCount,
+            type: 1
+          }, {
+            id: 15,
+            label: 'ASN',
+            value: knowledgeSourceValue.asn,
+            count: asnCount,
+            type: 1
+          }/*, {
+            id: 16,
+            label: 'FQDN Who',
+            value: 'cn_fqdn_who_isBuiltIn',
+            count:fqdnWhoCount,
+            children: []
+          },{
+            id: 17,
+            label: 'FQDN Icp',
+            value: 'cn_fqdn_icp_built_in',
+            count:fqdnIcpCount,
+            children: []
+          },{
+            id: 18,
+            label: 'APP Category',
+            value: 'cn_app_category_built_indad',
+            count:appCategoryCount,
+            children: []
+          } */
+          ]
+        },
+        {
+          id: 2,
+          label: 'AI Tagging',
+          value: knowledgeCategoryValue.aiTagging,
+          count: aiTaggingCount,
+          type: 0,
+          children: [
+            {
+              id: 21,
+              label: 'Psiphon3',
+              value: knowledgeSourceValue.psiphon3,
+              count: psiphon3Count,
+              type: 1
+            }
+          ]
+        },
+        {
+          id: 3,
+          label: 'User-defined',
+          value: knowledgeCategoryValue.userDefined,
+          count: userDefinedCount,
+          type: 0,
+          children: [
+            {
+              id: 31,
+              label: 'IP Tag',
+              value: knowledgeSourceValue.ipTag,
+              count: ipCount,
+              type: 1
+            }, {
+              id: 32,
+              label: 'Domain Tag',
+              value: knowledgeSourceValue.domainTag,
+              count: domainCount,
+              type: 1
+            }, {
+              id: 33,
+              label: 'APP Tag',
+              value: knowledgeSourceValue.appTag,
+              count: appCount,
+              type: 1
+            }
+          ]
+        }
      ]
    },
    initStatusData () {
      let enableCount = 0
      let disableCount = 0
      this.allTableData.forEach(data => {
-        if (data.status === 'disable') {
+        if (data.status === 0) {
          disableCount++
        } else {
          enableCount++
        }
      })
      this.filterData[1].data = [
-        { label: 'enabled', value: 'enabled', count: enableCount },
-        { label: 'disable', value: 'ip', count: disableCount }
+        { id: 1, label: 'enabled', value: 1, count: enableCount, type: 0 },
+        { id: 2, label: 'disable', value: 0, count: disableCount, type: 0 }
      ]
    },
    reloadFilter () {