diff --git a/src/assets/css/components/views/setting/knowledgeBase.scss b/src/assets/css/components/views/setting/knowledgeBase.scss
index e69de29b..ea6e4c61 100644
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -0,0 +1,331 @@
+.edit-knowledge-base {
+  height: 100%;
+
+  .edit-knowledge-base__header {
+    padding: 30px 0 30px 20px;
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: 900;
+    color: #353636;
+  }
+  .edit-knowledge-base__body {
+    display: flex;
+    height: calc(100% - 147px);
+    padding-left: 20px;
+    overflow: auto;
+
+    .el-steps {
+      margin-left: 10px;
+
+      .el-step {
+        transition: flex-basis ease-in-out .28s;
+      }
+      .el-step__head {
+        .el-step__line {
+          top: 26px;
+          bottom: 2px;
+          background-color: #38ACD2;
+          border-color: transparent;
+          opacity: 0.66;
+        }
+
+        &.is-finish, &.is-process {
+          .el-step__icon {
+            border-color: #38ACD2;
+            color: white;
+            background: #38ACD2;
+          }
+        }
+
+        &.is-process {
+          .el-step__line {
+            opacity: 1;
+          }
+        }
+
+        &.is-wait {
+          .el-step__icon {
+            border-color: #38ACD2;
+            color: #38ACD2;
+          }
+        }
+
+        .el-step__icon-inner {
+          font-size: 16px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    .el-collapse {
+      width: 655px;
+      margin-left: 5px;
+      border: none;
+
+      .el-collapse-item.upload-collapse {
+        .el-collapse-item__wrap {
+          height: 260px;
+        }
+      }
+      .el-collapse-item {
+        min-height: 58px;
+
+        .el-collapse-item__header {
+          height: unset;
+          line-height: unset;
+          border: none;
+          font-size: 16px;
+          color: #333333;
+
+          &.focusing:focus:not(:hover) {
+            color: unset;
+          }
+          .form-sub-title {
+            padding-left: 35px;
+          }
+        }
+        .el-collapse-item__header > i {
+          transform: translateX(-630px);
+          color: #38ACD2;
+          font-weight: bold;
+        }
+        .el-collapse-item__header > i.is-active {
+          transform: translateX(-630px) rotate(90deg);
+        }
+        .el-collapse-item__wrap {
+          padding-left: 35px;
+          border: none;
+        }
+        .el-collapse-item__content {
+          padding-bottom: 20px;
+        }
+
+        .upload-error-tip, .preview-error-tip {
+          color: $--color-danger;
+        }
+        .upload-error-tip {
+          margin-top: -11px;
+        }
+        .el-upload {
+          margin-top: 12px;
+
+          .upload-tip {
+            font-size: 12px;
+            color: #999999;
+          }
+          .el-upload-dragger {
+            width: 320px;
+            border-radius: 2px;
+            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+          }
+
+        }
+        .el-upload--error .el-upload-dragger {
+          border-color: $--color-danger;
+        }
+        .el-upload-list {
+          .el-upload-list__item {
+            padding: 0 5px;
+            margin-top: unset;
+            height: 36px;
+            line-height: 36px;
+            background: #F5F8FA;
+            border-radius: 2px;
+            color: #353636;
+
+            .el-icon-close {
+              top: 11px;
+            }
+            .el-icon-close-tip {
+              top: 11px;
+            }
+            .el-progress.el-progress--line {
+              top: unset;
+            }
+          }
+        }
+      }
+    }
+
+    .el-form {
+      margin-top: 20px;
+      width: 620px;
+
+      label {
+        padding-bottom: 6px;
+        font-size: 14px;
+        color: #333333;
+        line-height: unset;
+      }
+
+      .el-form-item {
+        margin-bottom: 12px;
+      }
+      .el-form-item__content {
+        line-height: unset;
+
+        .el-input__inner {
+          padding-left: 8px;
+          font-size: 14px;
+          color: #353636;
+        }
+
+        .form-select {
+          width: 100%;
+
+          .el-input__inner {
+            background-color: #F5F8FA;
+          }
+        }
+      }
+    }
+    .skeleton-border {
+      position: relative;
+      margin-top: 12px;
+      padding: 15px;
+      border: 1px solid #DCDFE6;
+      border-radius: 2px;
+
+      .skeleton-item-row:not(:nth-of-type(6)) {
+        margin-bottom: 5px;
+      }
+      .el-skeleton__item {
+        background: #F5F8FA;
+      }
+      .skeleton-tip {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 14px;
+        color: #353636;
+      }
+    }
+    .imported-tip {
+      margin-top: 8px;
+      margin-bottom: 4px;
+      font-size: 14px;
+      color: #333333;
+
+      .cn-icon {
+        font-size: 16px;
+        color: #38ACD2;
+      }
+    }
+    .imported-table-box {
+      position: relative;
+      height: 367px;
+      border: 1px solid #DEDEDE;
+      border-radius: 2px;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &.imported-table-box--error {
+        border-color: $--color-danger;
+      }
+      .imported-table {
+        padding: 0 12px;
+        width: 100%;
+        table-layout: fixed;
+
+        th {
+          text-align: left;
+          font-size: 14px;
+          color: #353636;;
+        }
+        td {
+          font-size: 14px;
+          color: #353636;
+        }
+        .imported-data-msg, .imported-data-item, .imported-data-value {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .imported-data-msg {
+          width: 140px;
+        }
+
+        .el-icon-close {
+          color: #666;
+          font-weight: bold;
+          cursor: pointer;
+
+          &:hover {
+            color: #111;
+          }
+        }
+        .el-icon-success {
+          color: #749F4D;
+        }
+        .el-icon-error {
+          color: #E26154;
+        }
+      }
+
+      .imported-pagination.pagination {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        margin-top: 4px;
+        padding-top: 8px;
+        height: 42px;
+        border-top: 1px solid #eee;
+
+        .btn-prev, .btn-next, .number {
+          margin: 0 2px;
+        }
+        .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
+          border: none;
+          font-size: 12px;
+        }
+        .el-pagination .el-pager li {
+          color: #353636;
+        }
+        .el-pagination .el-pager li.active {
+          background-color: #38ACD2;
+          color: white;
+        }
+      }
+    }
+  }
+  .edit-knowledge-base__footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    margin-top: 3px;
+    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+
+    .footer__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: #38ACD2;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+    .footer__btn:hover:not(.footer__btn--disabled) {
+      background-color: lighten(#38ACD2, 10%);
+    }
+    .footer__btn--light {
+      background-color: #F5F6F7;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten(#38ACD2, 40%);
+      color: #38ACD2;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+}
diff --git a/src/assets/css/themes/theme-light.scss b/src/assets/css/themes/theme-light.scss
index b6684553..e405c677 100644
--- a/src/assets/css/themes/theme-light.scss
+++ b/src/assets/css/themes/theme-light.scss
@@ -2,10 +2,10 @@
 
 /** 重写element-ui变量 **/
 
-$--color-primary: #0091ff; // 主题色
-$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
-$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
-$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%
+$--color-primary: #699DC9; // 主题色
+$--color-primary-dark-10: darken(#699DC9, 10%); // 默认主题色 深10%
+$--color-primary-light-10: lighten(#699DC9, 10%); // 默认主题色 浅10%
+$--color-primary-light-20: lighten(#699DC9, 20%); // 默认主题色 浅20%
 
 /* menu相关 */
 $--menu-background-color: #00162B; // menu背景色
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index e3e0297a..286c0a95 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -11,6 +11,7 @@
         :page-size="Number(pageObj.pageSize)"
         :layout="layout"
         :total="pageObj.total"
+        v-bind="bind"
     >
       <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"
                  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size"
@@ -42,15 +43,23 @@ export default {
     layout: {
       type: String,
       default: 'total, prev, pager, next, slot'
+    },
+    bind: {
+      type: Object,
+      default: () => {}
+    },
+    storePageNoOnUrl: {
+      type: Boolean,
+      default: true
     }
   },
   /**
    * 添加vue3的setup，目的是添加/获取地址栏的参数
    */
-  setup () {
+  setup (props) {
     const { query } = useRoute()
     const pageSize = ref(defaultPageSize)
-    const currentPageNo = ref(query.pageNo || 1)
+    const currentPageNo = ref(props.storePageNoOnUrl ? (query.pageNo || (props.pageObj.pageNo || 1)) : (props.pageObj.pageNo || 1))
 
     return {
       pageSize,
diff --git a/src/components/table/setting/KnowledgeBaseTable.vue b/src/components/table/setting/KnowledgeBaseTable.vue
index 35aa956c..25f3d40a 100644
--- a/src/components/table/setting/KnowledgeBaseTable.vue
+++ b/src/components/table/setting/KnowledgeBaseTable.vue
@@ -44,6 +44,14 @@
             <span>-</span>
           </template>
         </template>
+        <template v-else-if="item.prop === 'utime'">
+          <template v-if="scope.row[item.prop]">
+            {{dateFormatByAppearance(scope.row[item.prop])}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
@@ -103,7 +111,7 @@ export default {
           show: true
         }, {
           label: this.$t('overall.updateTime'),
-          prop: 'updateTime',
+          prop: 'utime',
           show: true
         }
       ]
diff --git a/src/store/index.js b/src/store/index.js
index 3fd48010..6aac6e55 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,7 +12,8 @@ const store = createStore({
     return {
       i18n: false,
       showEntityTypeSelector: false, // 在entity explore页面时，控制header显示实体类型选择框
-      from: '' // entity type
+      from: '', // entity type
+      test: 'jest' // 用于单测的demo
     }
   },
   getters: {
@@ -24,6 +25,9 @@ const store = createStore({
     },
     entityName (state) {
       return state.entityName
+    },
+    getTest (state) {
+      return state.test
     }
   },
   mutations: {
@@ -37,6 +41,9 @@ const store = createStore({
     },
     showEntityTypeSelector (state, show) {
       state.showEntityTypeSelector = show
+    },
+    setTest (state, test) {
+      state.test = test
     }
   }
 })
diff --git a/src/utils/api.js b/src/utils/api.js
index 08f2cb29..5103d533 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -34,7 +34,7 @@ export const api = {
   // galaxyProxy
   galaxyProxy: '/galaxy/setting',
   // 知识库
-  knowledgeBase: '/knowledgeBase',
+  knowledgeBase: '/knowledge',
 
   // 报告相关
   reportJob: '/report/job',
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 96d4807d..62247abc 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -277,6 +277,21 @@ export const cycle = {
   pre: 1
 }
 
+export const knowledgeBaseType = [
+  {
+    name: 'IP',
+    value: 'ip'
+  },
+  {
+    name: 'Domain',
+    value: 'domain'
+  },
+  {
+    name: 'APP',
+    value: 'app'
+  }
+]
+
 export const curTabState = {
   curTab: 'curTab',
   tableMetric: 'tableMetric',
diff --git a/src/views/setting/KnowledgeBase.vue b/src/views/setting/KnowledgeBase.vue
index 1e91be06..d7163843 100644
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -74,28 +74,6 @@ export default {
           t: +new Date()
         }
       })
-    },
-    getTableData () {
-      this.tools.loading = false
-      this.tableData = [
-        {
-          tagName: '我的IP库',
-          buildIn: 0,
-          id: 1,
-          tagType: 'ip',
-          remark: '我的IP库描述',
-          updateTime: new Date()
-        },
-        {
-          tagName: '我的domain库',
-          buildIn: 0,
-          id: 2,
-          tagType: 'domain',
-          remark: '我的domain库描述',
-          updateTime: new Date()
-        }
-      ]
-      this.pageObj.total = 2
     }
   }
 }
diff --git a/src/views/setting/KnowledgeBaseForm.vue b/src/views/setting/KnowledgeBaseForm.vue
index cf8b05b2..6893370e 100644
--- a/src/views/setting/KnowledgeBaseForm.vue
+++ b/src/views/setting/KnowledgeBaseForm.vue
@@ -1,28 +1,306 @@
 <template>
-  <el-form :model="editObject" label-position="left" label-width="120px" ref="form">
-    <!--name-->
-    <el-form-item :label="$t('config.roles.name')" prop="name">
-      <el-input  maxlength="64" placeholder="" id="role-box-input-name"
-                 show-word-limit size="small" type="text" v-model="editObject.tagName"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('config.roles.name')" prop="name">
-      <el-input  maxlength="64" placeholder="" id="role-box-input-name"
-                 show-word-limit size="small" type="text" v-model="editObject.tagName"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('overall.remark')">
-      <el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editObject.remark" id="role-box-input-remark"/>
-    </el-form-item>
-  </el-form>
+  <div class="edit-knowledge-base">
+    <div class="edit-knowledge-base__header">{{$t('knowledgeBase.createKnowledgeBase')}}</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;`" :key="index"></el-step>
+      </el-steps>
+      <el-collapse v-model="activeCollapses">
+        <el-collapse-item name="0">
+          <template #title><div class="form-sub-title">{{$t('knowledgeBase.editInformation')}}</div></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 maxlength="64" placeholder="" :disabled="!!editObject.id" show-word-limit size="mini" type="text" v-model="editObject.tagName"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('overall.type')" prop="tagType">
+              <el-select v-model="editObject.tagType"
+                         class="form-select"
+                         placeholder=" "
+                         popper-class="form-select-popper"
+                         :disabled="!!editObject.id"
+                         size="mini"
+              >
+                <template v-for="type in knowledgeBaseType" :key="type.name">
+                  <el-option :label="type.name" :value="type.value"></el-option>
+                </template>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('overall.remark')">
+              <el-input maxlength="256" show-word-limit :rows="4" size='mini' type="textarea" v-model="editObject.remark" id="role-box-input-remark"/>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item name="1" class="upload-collapse">
+          <template #title><div class="form-sub-title">{{$t('overall.importFromFile')}}</div></template>
+          <el-upload :action="`${baseUrl}knowledge/import`"
+                     :headers="uploadHeaders"
+                     :data="uploadParams"
+                     :multiple="false"
+                     :file-list="fileList"
+                     :on-change="fileChange"
+                     :on-success="uploadSuccess"
+                     :class="uploadErrorTip ? 'el-upload--error' : ''"
+                     drag
+                     accept=".csv"
+                     ref="upload"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              <div>{{$t('knowledgeBase.dropFileHereOr')}}<em>{{$t('knowledgeBase.clickToUpload')}}</em></div>
+              <div class="upload-tip">{{$t('knowledgeBase.supportCsv')}}</div>
+            </div>
+          </el-upload>
+          <transition name="el-zoom-in-top">
+            <div class="upload-error-tip" v-if="uploadErrorTip">{{uploadErrorTip}}</div>
+          </transition>
+        </el-collapse-item>
+        <el-collapse-item name="2">
+          <template #title><div class="form-sub-title">{{$t('overall.preview')}}</div></template>
+          <div class="skeleton-border" v-if="!uploaded">
+            <el-skeleton>
+              <template #template>
+                <div v-for="item of 6" :key="item" class="skeleton-item-row">
+                  <el-skeleton-item variant="text" style="width: calc(33% - 25px); margin-right: 38px;"/>
+                  <el-skeleton-item variant="text" style="width: calc(33% - 25px); margin-right: 38px;"/>
+                  <el-skeleton-item variant="text" style="width: calc(33% - 26px);"/>
+                </div>
+              </template>
+            </el-skeleton>
+            <div class="skeleton-tip">{{$t('knowledgeBase.skeletonTip')}}</div>
+          </div>
+          <div v-else>
+            <div class="imported-tip"><i class="cn-icon cn-icon-baocuo"/>
+              &nbsp;&nbsp;{{$t('knowledgeBase.importTip', { total: originalImportInfo.total, succeeded: originalImportInfo.succeeded, failed: originalImportInfo.failed })}}
+            </div>
+            <div class="imported-table-box" :class="previewErrorTip ? 'imported-table-box--error' : ''">
+              <table class="imported-table" v-if="!importedDataNoData">
+                <tr>
+                  <th width="230">{{importedTableFirstColumn}}</th>
+                  <th width="180">Label</th>
+                  <th>{{$t('overall.import')}}</th>
+                  <th width="16"></th>
+                </tr>
+                <tr v-for="(d, i) in showImportedData" :key="importedType + d.tagItem + d.tagValue + i">
+                  <td class="imported-data-item" :title="d.tagItem">{{d.tagItem}}</td>
+                  <td class="imported-data-value" :title="d.tagValue">{{d.tagValue}}</td>
+                  <td class="imported-data-msg" :title="d.msg"><i :class="d.status === 1 ? 'el-icon-success' : 'el-icon-error'"></i>&nbsp;&nbsp;{{d.msg}}</td>
+                  <td><i class="el-icon-close" @click="removeImportedData(d)"></i></td>
+                </tr>
+              </table>
+              <chart-no-data v-else></chart-no-data>
+              <Pagination
+                  class="imported-pagination"
+                  :page-obj="importedPageObj"
+                  :store-page-no-on-url="false"
+                  layout="prev,pager,next"
+                  @pageNo='pageNo'
+                  @prev-click="prev"
+                  @next-click="next"
+              ></Pagination>
+            </div>
+            <transition name="el-zoom-in-top">
+              <div class="preview-error-tip" v-if="previewErrorTip">{{previewErrorTip}}</div>
+            </transition>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="edit-knowledge-base__footer">
+      <button class="footer__btn footer__btn--light">
+      <span>{{$t('overall.cancel')}}</span>
+    </button>
+      <button :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
 </template>
-
 <script>
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import _ from 'lodash'
+import { knowledgeBaseType, storageKey } from '@/utils/constants'
+import i18n from '@/i18n'
+import Pagination from '@/components/common/Pagination'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import axios from 'axios'
+import { api } from '@/utils/api'
 export default {
   name: 'CreateKnowledgeBase',
+  components: {
+    Pagination,
+    ChartNoData
+  },
   methods: {
+    fileChange (files, fileList) {
+      this.fileList = fileList.slice(-1)
+    },
+    uploadSuccess (response) {
+      this.uploaded = response.code === 200
+      if (response.code === 200) {
+        // 上传成功后去掉upload和preview的错误提示
+        this.uploadErrorTip = ''
+        this.previewErrorTip = ''
 
+        this.importedType = this.editObject.tagType
+        const originalImportedData = response.data.data
+        this.originalImportInfo = {
+          total: originalImportedData.length,
+          succeeded: originalImportedData.filter(d => d.status === 1).length,
+          failed: originalImportedData.filter(d => d.status !== 1).length
+        }
+        originalImportedData.sort((a, b) => b.status - a.status)
+        this.importedData = originalImportedData
+        this.handleShowImportedData()
+      }
+    },
+    handleShowImportedData () {
+      const startIndex = (this.importedPageObj.pageNo - 1) * this.importedPageObj.pageSize
+      const endIndex = this.importedPageObj.pageNo * this.importedPageObj.pageSize
+      this.showImportedData = this.importedData.slice(startIndex, endIndex)
+    },
+    pageNo (val) {
+      this.importedPageObj.pageNo = val
+    },
+    prev () {
+      this.importedPageObj.pageNo--
+    },
+    next () {
+      this.importedPageObj.pageNo++
+    },
+    removeImportedData (data) {
+      const toRemoveIndex = this.importedData.findIndex(d => d.tagName === data.tagName && d.tagItem === data.tagItem)
+      this.importedData.splice(toRemoveIndex, 1)
+      this.importedPageObj.total = this.importedData.length
+      this.handleShowImportedData()
+      // 若删除后本页无数据，则页码减1，或者提示无数据
+      if (this.showImportedData.length === 0) {
+        if (this.importedData.length > 0) {
+          this.importedPageObj.pageNo--
+          this.handleShowImportedData()
+        } else {
+          this.importedDataNoData = true
+        }
+      }
+      // 删除后若有错误提示且列表中不再有错误项，则清空错误提示
+      if (!this.hasErrorImportedData() && this.previewErrorTip) {
+        this.previewErrorTip = ''
+      }
+    },
+    save () {
+      if (this.blockOperation.save) { return }
+      this.blockOperation.save = true
+      // 校验form + upload + preview
+      let formValid
+      this.$refs.form.validate(valid => {
+        formValid = valid
+      })
+
+      if (!this.uploaded) {
+        this.uploadErrorTip = this.$t('validate.required')
+      } else {
+        this.uploadErrorTip = ''
+      }
+
+      if (this.importedData.length === 0) {
+        this.previewErrorTip = this.$t('validate.required')
+      } else if (this.hasErrorImportedData()) {
+        this.previewErrorTip = this.$t('validate.pleaseCheckForErrorItem')
+      } else {
+        this.previewErrorTip = ''
+      }
+
+      // 校验通过后组织数据、请求接口
+      if (formValid && !this.uploadErrorTip && !this.previewErrorTip) {
+        try {
+          const postData = {
+            tagName: this.editObject.tagName,
+            tagType: this.editObject.tagType,
+            data: []
+          }
+          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({
+                tagValue: d.tagValue,
+                itemList: set
+              })
+            }
+          })
+          postData.data.forEach(d => {
+            d.itemList = [...d.itemList]
+          })
+          axios.post(this.url, postData).then(response => {
+            if (response.code === 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.$router.push({
+                path: this.url,
+                t: +new Date()
+              })
+            } else {
+              this.$message.error(response.msg)
+            }
+          }).finally(() => {
+            this.blockOperation.save = false
+          })
+        } finally {
+          this.blockOperation.save = false
+        }
+      } else {
+        this.blockOperation.save = false
+      }
+    },
+    hasErrorImportedData () {
+      return this.importedData.filter(d => d.status !== 1).length > 0
+    }
+  },
+  computed: {
+    uploadParams () {
+      return {
+        type: this.editObject.tagType
+      }
+    },
+    importedTableFirstColumn () {
+      const t = this.knowledgeBaseType.find(t => t.value === this.importedType)
+      return t ? t.name : ''
+    }
+  },
+  watch: {
+    activeCollapses (n) {
+      const index0 = n.indexOf('0')
+      const index1 = n.indexOf('1')
+      if (index0 > -1) {
+        if (this.stepHeights[0] === this.stepHeightConstant.collapse) {
+          this.stepHeights.splice(0, 1, this.stepHeightConstant.first)
+        }
+      } else {
+        if (this.stepHeights[0] === this.stepHeightConstant.first) {
+          this.stepHeights.splice(0, 1, this.stepHeightConstant.collapse)
+        }
+      }
+      if (index1 > -1) {
+        if (this.stepHeights[1] === this.stepHeightConstant.collapse) {
+          this.stepHeights.splice(1, 1, this.stepHeightConstant.second)
+        }
+      } else {
+        if (this.stepHeights[1] === this.stepHeightConstant.second) {
+          this.stepHeights.splice(1, 1, this.stepHeightConstant.collapse)
+        }
+      }
+    },
+    importedData (n) {
+      this.importedPageObj.total = n.length
+    },
+    'importedPageObj.pageNo': {
+      handler (n) {
+        this.handleShowImportedData()
+      }
+    }
   },
   setup () {
     const { query } = useRoute()
@@ -32,20 +310,77 @@ export default {
       tagName: '',
       buildIn: '',
       id: '',
-      tagType: '',
+      tagType: 'ip',
       remark: '',
       updateTime: ''
     }
+    // form绑定的对象
     const editObject = ref(_.cloneDeep(blankObject))
+    // 折叠组件控制
+    const activeCollapses = ref(['0', '1', '2'])
+    // 步骤条控制
+    const activeStep = ref('')
+    const stepHeightConstant = {
+      collapse: 58,
+      first: 333,
+      second: 284
+    }
+    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.collapse])
+    // 表单校验规则
+    const rules = {
+      tagName: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' }
+      ],
+      tagType: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ]
+    }
+    // 所有导入的数据
+    const importedData = ref([])
+    // 导入数据的原始数量信息
+    const originalImportInfo = ref({
+      total: null,
+      succeeded: null,
+      failed: null
+    })
+    // table中显示的导入的数据
+    const showImportedData = ref([])
+    const importedPageObj = ref({
+      pageNo: 1,
+      pageSize: 10,
+      total: null
+    })
+    const importedType = ref('')
+    // 没上传过文件的提示
+    const uploadErrorTip = ref('')
+    // 预览区无内容的提示
+    const previewErrorTip = ref('')
     return {
       knowledgeBaseId,
       editObject,
-      blankObject
+      blankObject,
+      activeCollapses,
+      activeStep,
+      stepHeightConstant,
+      stepHeights,
+      knowledgeBaseType,
+      rules,
+      importedData,
+      showImportedData,
+      importedPageObj,
+      importedType,
+      baseUrl: BASE_CONFIG.baseUrl,
+      fileList: ref([]),
+      uploadHeaders: {
+        'Cn-Authorization': localStorage.getItem(storageKey.token)
+      },
+      uploaded: ref(false),
+      importedDataNoData: ref(false),
+      url: api.knowledgeBase,
+      originalImportInfo,
+      uploadErrorTip,
+      previewErrorTip
     }
   }
 }
 </script>
-
-<style scoped>
-
-</style>