CN-1096 fix: 知识库update逻辑实现

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -1551,11 +1551,11 @@ height:300px !important;
 }
 }
 .update-knowledge-tip {
-display:flex;
+  display:flex;
-flex-direction: column;
+  flex-direction: column;
-padding-bottom:0px !important;
+  padding-bottom: 0 !important;
-width:480px !important;
+  width: 480px !important;
-.el-dialog__header{
+  .el-dialog__header{
     display: flex;
     flex-direction: row;
     border-bottom:1px solid #eee;
@@ -1585,8 +1585,8 @@ width:480px !important;
       letter-spacing: 0;
       font-weight: 400;
     }
-}
+  }
-.el-dialog__body {
+  .el-dialog__body {
     height:96px;
     min-height:96px;
     font-size: 14px;
@@ -1598,11 +1598,11 @@ width:480px !important;
     padding-right:20px;
     padding-left:20px;
     .dialog-message {
-    padding-left:0px !important;
+      padding-left: 0 !important;
-    padding-right:0px !important;
+      padding-right: 0 !important;
     }
-}
+  }
-.el-dialog__footer {
+  .el-dialog__footer {
     height:52px;
     min-height:52px;
     border-top:1px solid #eee;
@@ -1633,23 +1633,27 @@ width:480px !important;
       border: 1px solid rgba(46,136,166,1);
       border-radius: 2px;
     }
-}
+  }
 }
 .center-dialog {
-display: flex;
+  display: flex;
-align-items: center;
+  align-items: center;
-justify-content: center;
+  justify-content: center;
 }
 .update-knowledge {
-display:flex;
+  display:flex;
-flex-direction: column;
+  flex-direction: column;
-padding-bottom:0px !important;
+  padding-bottom:0 !important;
-width:1080px !important;
+  width: 1080px !important;
-height:fit-content;
+  height: calc(100% - 240px);
-margin:15vh auto !important;
+  overflow: hidden;
-top:0;
+  &.update-knowledge--upload {
-left:0;
+    height: auto;
-.knowledge-update__top {
+  }
+  .el-dialog__body {
+    overflow: hidden;
+  }
+  .knowledge-update__top {
     display: flex;
     flex-direction: row;
     margin-bottom:22px;
@@ -1692,8 +1696,8 @@ left:0;
         font-weight: 400;
       }
     }
-}
+  }
-.knowledge-update {
+  .knowledge-update {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -1740,8 +1744,8 @@ left:0;
         border-color: #2E88A6 !important;
       }
     }
-}
+  }
-.el-dialog__header{
+  .el-dialog__header{
     display: flex;
     flex-direction: row;
     height:32px;
@@ -1766,8 +1770,8 @@ left:0;
       letter-spacing: 0;
       font-weight: 400;
     }
-}
+  }
-.el-dialog__body {
+  .el-dialog__body {
     font-size: 14px;
     color: #353636;
     letter-spacing: 0;
@@ -1859,5 +1863,5 @@ left:0;
         border-radius: 2px;
       }
     }
-}
+  }
 }

src/components/rightBox/settings/I18nBox.vue

@@ -37,7 +37,7 @@
           </el-form-item>
           <!--value-->
           <el-form-item :label="$t('config.i18n.value')" label-width="200px" prop="value">
-            <el-input id="account-input-value" v-model="editObject.value"  maxlength="64" placeholder=""
+            <el-input id="account-input-value" v-model="editObject.value"  maxlength="256" placeholder=""
                       show-word-limit size="small"></el-input>
           </el-form-item>
         </el-form>

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -9,7 +9,7 @@
               <el-tooltip
                   effect="light"
                   trigger="hover"
-                  :content="$t('tip.notAvailableYet')"
+                  :content="$t('tip.notAvailable')"
                   placement="right"
                   popper-class="panel-tooltip"
               >
@@ -31,7 +31,7 @@
             <div class="card-title">
               <div class="card-title-name" :title="data.label">{{data.label}}</div>
             </div>
-            <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
+            <div class="card-desc" :title="data.desc">{{data.desc ? data.desc : '—'}}</div>
           </div>
           <div class="card-operate__footer">
             <button v-if="data.showUpdate"
@@ -55,7 +55,7 @@
           <div class="card-title">
             <div class="card-title-name" :title="data.label">{{data.label}}</div>
           </div>
-          <div class="card-desc" :title="data.description?data.description:'—'">{{data.description?data.description:'—'}}</div>
+          <div class="card-desc" :title="data.desc ? data.desc:'—'">{{data.desc ? data.desc : '—'}}</div>
         </div>
         <div class="card-operate__footer">
           <button v-if="data.showUpdate" :title="$t('overall.update')" class="top-tool-btn--update"
@@ -75,26 +75,35 @@
 
   <div class="center-dialog">
     <el-dialog v-model="showUpdateDialog"
-               custom-class="update-knowledge"
+               :custom-class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
-               :before-close="handleClose">
+               :after-close="handleClose">
       <div class="knowledge-update__top" >
         <div class="update-left__icon">
-          <img :src="updateKnowledge.iconUrl"/>
+          <img width="60" height="60" :src="updateKnowledge.iconUrl"/>
         </div>
         <div class="update-right">
           <div class="knowledge-enable">
             <div class="update-title">
               <div class="card-title-name" :title="updateKnowledge.label">{{updateKnowledge.label}}</div>
             </div>
-            <el-switch v-model="updateKnowledge.status"
+            <el-tooltip
+                effect="light"
+                trigger="hover"
                 v-if="showEnable"
+                :content="$t('tip.notAvailable')"
+                placement="right"
+                popper-class="panel-tooltip"
+            >
+              <el-switch v-model="updateKnowledge.status"
                          active-color="#38ACD2"
                          inactive-color="#C0CEDB"
+                         :disabled="true"
                          :active-value="1"
                          :inactive-value="0"
                          @change="changeStatus($event,updateKnowledge.knowledgeId)"
               >
               </el-switch>
+            </el-tooltip>
           </div>
           <div class="knowledge-desc" :title="updateKnowledge.description">{{updateKnowledge.description?updateKnowledge.description:'—'}}</div>
         </div>
@@ -106,7 +115,7 @@
           </div>
           <div class="update-operate">
             <button :title="$t('overall.update')" class="top-tool-btn--update"
-                    @click="uploadRecord()">
+                    @click="uploadRecord">
               <i class="cn-icon-update-knowledge-base cn-icon"></i>
               <span>{{$t('overall.update')}}</span>
             </button>
@@ -116,19 +125,24 @@
                   border
                   :data="updateHistoryList"
                   @selection-change="secondSelectionChange"
-                  max-height="653px"
                   width="100%"
+                  height="calc(100% - 125px)"
                   class="update-dialog__table"
                   cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
                   header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
-          <el-table-column property="opTime" label="Update time" width="150" ></el-table-column>
+          <el-table-column prop="opTime" label="Update time" width="150" ></el-table-column>
-          <el-table-column property="opUser" label="Operating user" width="150" ></el-table-column>
+          <el-table-column prop="user" label="Operating user" width="150" >
-          <el-table-column property="version" label="Version information" width="150"  ></el-table-column>
+            <template #default="scope" :column="item">
-          <el-table-column property="description" label="Description"></el-table-column>
+              <span>{{$_.get(scope.row, 'user.name', '-')}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="commitVersion" label="Version information" width="150"  ></el-table-column>
+          <el-table-column prop="description" label="Description"></el-table-column>
         </el-table>
       </template>
       <template v-if="showAddUpdateDialog">
-        <div class="update-knowledge-form"  >
+        <div class="update-knowledge-form">
+          <loading :loading="uploadLoading"></loading>
           <el-form :model="updateObject" label-position="top" ref="form" :rules="rules">
             <!--name-->
             <el-form-item :label="$t('overall.name')" prop="name">
@@ -144,10 +158,10 @@
                          :on-change="fileChange"
                          :on-success="uploadSuccess"
                          :before-upload="beforeUpload"
-                         :on-progress="onUpload"
                          :on-error="uploadError"
                          :class="uploadErrorTip ? 'el-upload--error' : ''"
                          :accept="fileTypeLimit"
+                         :auto-upload="false"
                          ref="knowledgeUpload"
                          id="knowledgeUpload"
               >
@@ -157,7 +171,7 @@
 
             <el-form-item :label="$t('knowledge.version')" prop="version">
               <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
-                        size="mini" type="text" v-model="updateObject.version" @blur="tagNameBlur"></el-input>
+                        size="mini" type="text" v-model="currentVersion"></el-input>
             </el-form-item>
             <el-form-item :label="$t('overall.remark')" prop="description" class="knowledge-remark">
               <el-input  maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
@@ -188,6 +202,7 @@
 
 <script>
 import table from '@/mixins/table'
+import Loading from '@/components/common/Loading'
 import { knowledgeCategoryValue, storageKey, builtInKnowledgeBaseBasicInfo } from '@/utils/constants'
 import { ref } from 'vue'
 import { api } from '@/utils/api'
@@ -204,6 +219,9 @@ export default {
       type: Boolean
     }
   },
+  components: {
+    Loading
+  },
   data () {
     return {
       tableTitle: [],
@@ -216,7 +234,9 @@ export default {
       updateKnowledge: {},
       showEnable: false,
       updateHistoryList: [],
-      updateObject: {}
+      updateObject: {},
+      currentVersion: 0,
+      uploadLoading: false
     }
   },
   setup () {
@@ -238,45 +258,32 @@ export default {
       this.fileList = fileList.slice(-1)
     },
     uploadError () {
+      this.uploadLoading = false
       this.$message.error(this.$t('tip.uploadFailed', { msg: 'error' }))
     },
     uploadSuccess (response) {
-      const uploadFile = this.fileList ? this.fileList[0] : null
+      this.uploadLoading = false
-      let fileName = uploadFile ? uploadFile.name : ''
-      fileName = fileName.substring(0, fileName.indexOf('.'))
-      this.updateObject.version = fileName.length >= 8 ? fileName.substring(fileName.length - 8) : fileName
       this.uploaded = response.code === 200
       if (response.code === 200) {
-
+        this.$message.success(this.$t('tip.success'))
+        this.showAddUpdateDialog = false
+        axios.get(api.knowledgeBaseLog + '/' + this.updateKnowledge.knowledgeId, { params: { pageSize: 999 } }).then(res => {
+          this.updateHistoryList = res.data.data.list
+          this.currentVersion = this.updateHistoryList[0].commitVersion + 1
+        })
       } else {
         this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
       }
     },
     beforeUpload (file) {
-
+      this.uploadLoading = true
-    },
+      this.showConfirmDialog = false
-    onUpload () {
-
-    },
-    updateKnowledgeBase () {
-      axios.post(this.updateKnowledgeUrl + '?knowledgeIds=' + ids).then(response => {
-        if (response.data.code === 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
-          // 重新查询历史记录
-        } else {
-          this.$message.error(response.data.message)
-        }
-      }).finally(() => {
-
-      })
     },
     submitConfirm () {
       this.showConfirmDialog = true
     },
     submit () {
-      // this.updateKnowledgeBase()//更新列表数据
+      this.$refs.knowledgeUpload.submit()
-      this.showConfirmDialog = false
-      this.showAddUpdateDialog = false
     },
     clickCard (data, event) {
       if (data.isSelected) { // 原来为选中，当前点击后未选中
@@ -301,6 +308,7 @@ export default {
     handleClose () {
       this.showUpdateDialog = false
       this.showAddUpdateDialog = false
+      this.uploadLoading = false
     },
     handleConfirmClose () {
       this.showConfirmDialog = false
@@ -314,17 +322,18 @@ export default {
     },
     jumpToUpdatePage (data, showEnable) {
       axios.get(api.knowledgeBaseLog + '/' + data.knowledgeId, { params: { pageSize: 999 } }).then(res => {
-
-      })
         this.updateKnowledge = data
+        this.updateHistoryList = res.data.data.list
+        this.currentVersion = this.updateHistoryList[0].commitVersion + 1
         this.showEnable = showEnable
         this.showUpdate()
+      })
     },
     uploadRecord () {
       this.showAddUpdateDialog = true
       this.updateObject.name = this.updateKnowledge.name
       this.updateObject.label = this.updateKnowledge.label
-      this.updateObject.version = ''
+      this.updateObject.description = ''
     },
     clearSelect () {
       this.$nextTick(() => {
@@ -415,7 +424,8 @@ export default {
     uploadParams () {
       return {
         knowledgeId: this.updateKnowledge.knowledgeId,
-        action: 'update'
+        action: 'update',
+        description: this.updateObject.description
       }
     }
   }

src/utils/constants.js

@@ -1730,52 +1730,62 @@ export const builtInKnowledgeBaseBasicInfo = [
   {
     knowledgeId: 10,
     label: 'Psiphon3 VPN',
-    iconUrl: 'images/knowledge-base-logo/psiphon3-vpn.png'
+    iconUrl: 'images/knowledge-base-logo/psiphon3-vpn.png',
+    desc: 'Psiphon3 is a circumvention software for Windows and other platforms that provides uncensored access to Internet content.'
   },
   {
     knowledgeId: 5,
-    label: 'FQDN Category',
+    label: 'Domain Category',
-    iconUrl: 'images/knowledge-base-logo/fqdn.png'
+    iconUrl: 'images/knowledge-base-logo/fqdn.png',
+    desc: 'Domain category provides basic information including categories, providers, reputation score.'
   },
   {
     knowledgeId: 6,
-    label: 'FQDN Whois',
+    label: 'Domain Whois',
-    iconUrl: 'images/knowledge-base-logo/fqdn-whois.png'
+    iconUrl: 'images/knowledge-base-logo/fqdn-whois.png',
+    desc: 'Domain whois contains registration and ownership information for domain names. It includes details like domain registrar, registrant, creation/expiry dates, and contact information.'
   },
   {
     knowledgeId: 2,
     label: 'IP ASN',
-    iconUrl: 'images/knowledge-base-logo/ip-asn.png'
+    iconUrl: 'images/knowledge-base-logo/ip-asn.png',
+    desc: 'ASN Database associates IP addresses with their corresponding Autonomous System Numbers, which are unique identifiers assigned to internet networks. This database helps identify the network and its owner, facilitating network analysis and monitoring tasks.'
   },
   {
     knowledgeId: 3,
     label: 'DNS Server Info',
-    iconUrl: 'images/knowledge-base-logo/dns-server-info.png'
+    iconUrl: 'images/knowledge-base-logo/dns-server-info.png',
+    desc: 'A DNS Server Info stores information about Domain Name System (DNS) servers. It includes details such as IP addresses, host names, locations, software name, operation system, and roles of the servers.'
   },
   {
     knowledgeId: 9,
     label: 'APP Category',
-    iconUrl: 'images/knowledge-base-logo/app-category.png'
+    iconUrl: 'images/knowledge-base-logo/app-category.png',
+    desc: 'APP category provides basic information for over 3000 popular applications, including their categories and service providers.'
   },
   {
     knowledgeId: 7,
     label: 'Indicators of Compromise',
-    iconUrl: 'images/knowledge-base-logo/indicators-of-compromise.png'
+    iconUrl: 'images/knowledge-base-logo/indicators-of-compromise.png',
+    desc: 'Indicator of Compromise (IoC) refers to forensic artifacts, such as unusual network traffic or malicious files, indicating a security breach or cyberattack.'
   },
   {
     knowledgeId: 4,
     label: 'ICP',
-    iconUrl: 'images/knowledge-base-logo/icp.png'
+    iconUrl: 'images/knowledge-base-logo/icp.png',
+    desc: 'ICP (Internet Content Provider) license is a permit issued by Chinese authorities, mandatory for websites to legally operate and publish content within mainland China.'
   },
   {
     knowledgeId: 1,
     label: 'IP Location',
-    iconUrl: 'images/knowledge-base-logo/ip-location.png'
+    iconUrl: 'images/knowledge-base-logo/ip-location.png',
+    desc: 'IP location Database is a repository containing geographical data associated with IP addresses, such as country, city, ISP, organization, latitude, longitude, and other relevant details.'
   },
   {
     knowledgeId: 8,
     label: 'Anonymity',
-    iconUrl: 'images/knowledge-base-logo/anonymity.png'
+    iconUrl: 'images/knowledge-base-logo/anonymity.png',
+    desc: 'Communication system that conceals users\' identities and activities to protect privacy and prevent tracking or surveillance. This database provides lists of Tor nodes, I2P nodes, obfs4, etc.'
   }
 ]
 

src/views/setting/KnowledgeBase.vue

@@ -477,93 +477,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-  .del-model__hint {
-    display:flex;
-    flex-direction: column;
-    padding-bottom:0px !important;
-    width:480px !important;
-    height:190px;
-    .el-message-box__header{
-      display: flex;
-      flex-direction: row;
-      border-bottom:1px solid #eee;
-      height:42px;
-      background: #F7F7F7;
-      box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
-      padding-left:20px;
-      padding-top:14px;
-      padding-bottom:14px;
-      .el-message-box__headerbtn {
-        display: flex !important;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
-        font-size: 10px;
-        line-height: 10px;
-        padding-right: 5px !important;
-        i {
-          width:10px;
-          height:10px;
-        }
-      }
-      .el-message-box__title {
-        font-size: 14px !important;
-        color: #353636;
-        letter-spacing: 0;
-        font-weight: 400;
-      }
-    }
-    .el-message-box__content {
-      height:96px;
-      font-size: 14px;
-      color: #353636;
-      letter-spacing: 0;
-      line-height: 22px;
-      font-weight: 400;
-      padding-top:8px;
-      padding-right:20px;
-      padding-left:20px;
-      .el-message-box__message {
-        padding-left:0px !important;
-        padding-right:0px !important;
-      }
-    }
-    .el-message-box__btns {
-      height:52px;
-      border-top:1px solid #eee;
-      box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
-      padding:11px 0px 12px!important;
-      .el-button--small {
-        padding:8px 21px !important;
-        line-height: 12px;
-        //font-family: NotoSansHans-Medium !important;
-        font-size: 12px;
-        font-weight: 500;
-        min-height: 28px;
-      }
-      .el-button:nth-child(1) {
-        margin-right:20px;
-        width:80px;
-        height:28px;
-        color: #353636;
-      }
-      .el-button:nth-child(2) {
-        width:80px;
-        height:28px;
-        margin-right:20px;
-        margin-left:0px !important;
-        background-color:#2d8cf0;
-        border-color:#2d8cf0;
-      }
-    }
-  }
-  .el-dialog {
-    display: flex;
-    flex-direction: column; // 水平分布
-    margin: 0 !important;
-    position: absolute;
-    top: calc(50% - 150px);
-    left: calc(50% - 240px);
-  }
-</style>