diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
new file mode 100644
index 000000000..2f2b8f839
--- /dev/null
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -0,0 +1,186 @@
+.right-box, .right-sub-box {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  right: 0;
+  top: 50px;
+  padding: 0;
+  height: calc(100% - 50px);
+  width: 700px;
+  box-shadow: 0 0 5px #ccc;
+  background-color: white;
+  z-index: 410;
+
+  .el-date-editor {
+    .el-input__inner {
+      padding-left: 32px;
+    }
+  }
+}
+
+.right-box__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  padding: 0 20px;
+  border-bottom: 1px solid $--right-box-border-color;
+  box-sizing: border-box;
+
+  .header__title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+  }
+  .header__operation {
+    i {
+      color: #999;
+      font-size: 14px;
+    }
+  }
+}
+
+.right-box__container {
+  height: calc(100% - 130px);
+  padding: 0 30px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .el-input__inner {
+    padding: 0 10px;
+    border-radius: $--primary-border-radius;
+    border: 1px solid $--right-box-border-color;
+  }
+  .el-form {
+    padding-top: 20px;
+
+    .el-form-item {
+      margin-bottom: 16px;
+
+      .el-form-item__label {
+        padding-bottom: 6px;
+        font-size: 14px;
+        line-height: 16px;
+        color: #666;
+      }
+
+      .el-input__inner:hover {
+        border-color: darken($--right-box-border-color, 10%);
+      }
+      .el-input__inner:focus {
+        border-color: darken($--right-box-border-color, 20%);
+      }
+    }
+    .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
+      border-color: #F56C6C
+    }
+
+    .form__sub-title {
+      padding: 0 10px;
+      margin-bottom: 20px;
+      line-height: 32px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #555;
+      background-color: #F6F6F6;
+    }
+    /* 虚线框类型的form-item */
+    .form__dotted-item {
+      padding: 10px 10px 6px 10px;
+      margin-bottom: 10px;
+      border: 1px dashed $--primary-border-color;
+      border-radius: $--primary-border-radius;
+
+      .el-form-item {
+        margin-bottom: 0;
+
+        .el-form-item__label {
+          width: 100%;
+        }
+        .form__labels-label {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+    .form__create-btn {
+      margin-bottom: 20px;
+      width: 300px;
+      height: 28px;
+      border: 1px solid var(--theme-color-light-71);
+      border-radius: $--primary-border-radius;
+      background-color: var(--theme-color-light-98);
+
+      i {
+        color: var(--theme-color);
+      }
+    }
+    .form__flex-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.right-box__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70px;
+  box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
+
+  .footer__btn {
+    margin: 0 15px;
+    height: 30px;
+    min-width: 74px;
+    padding: 0 15px;
+    color: white;
+    background-color: var(--theme-color);
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color linear .2s, color linear .1s;
+  }
+  .footer__btn:hover:not(.footer__btn--disabled) {
+    background-color: var(--theme-color-light-20);
+  }
+  .footer__btn--light {
+    background-color: white;
+    border: 1px solid $--primary-border-color;
+    color: #333;
+  }
+  .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+    background-color: white;
+    border-color: var(--theme-color-light-50);
+    color: var(--theme-color);
+  }
+  .footer__btn--disabled {
+    opacity: .6;
+    cursor: default;
+  }
+}
+/* 隐藏label新增按钮处级联选择器的input */
+.hide-casc-input {
+  position: relative;
+
+  .hide-input {
+    position: absolute;
+    top: 0;
+    width: 300px;
+    opacity: 0;
+  }
+}
+.label__multi-text {
+  display: flex;
+  justify-content: space-between;
+}
+.right-box__select {
+  width: 100%;
+}
+.right-box-select-dropdown {
+  width: 625px;
+}
diff --git a/nezha-fronted/src/assets/css/theme.scss b/nezha-fronted/src/assets/css/theme.scss
index 724a0d5d6..63be4c51b 100644
--- a/nezha-fronted/src/assets/css/theme.scss
+++ b/nezha-fronted/src/assets/css/theme.scss
@@ -1,11 +1,24 @@
 :root {
-  --theme-color: #FA901C; // 默认主题色
+  --theme-color: #FA901C; // 默认主题色，下方深化、浅化的色值默认值是写死的；用户自定义修改主题色后，由js计算新值
+  --theme-color-dark-10: #E18219; // 默认主题色 深10%
+  --theme-color-light-10: #FA9B33; // 默认主题色 浅10%
+  --theme-color-light-20: #FBA649; // 默认主题色 浅20%
+  --theme-color-light-30: #FBB160; // 默认主题色 浅30%
+  --theme-color-light-40: #FBBC77; // 默认主题色 浅40%
+  --theme-color-light-50: #FCC88D; // 默认主题色 浅50%
+  --theme-color-light-60: #FCD4A4; // 默认主题色 浅60%
+  --theme-color-light-71: #FFDFBD; // 默认主题色 浅71%
+  --theme-color-light-80: #FFEAD2; // 默认主题色 浅80%
+  --theme-color-light-90: #FFF5E8; // 默认主题色 浅90%
+  --theme-color-light-98: #FFFCF8; // 默认主题色 浅98%
 }
 $--theme-color: var(--theme-color); // 主题色
 
 $--primary-border-color: #DEDEDE;
 $--primary-border-radius: 2px;
 
+$--right-box-border-color: #E7EAED;
+
 /* 按钮 */
 $--button-border-radius: $--primary-border-radius; // 按钮圆角
 
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 23608ee90..a3de12421 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -964,32 +964,31 @@ li{
 /* end--右侧内容*/
 
 /* begin--右侧弹框*/
-.right-box, .right-sub-box {
+/*.right-box, */.right-sub-box {
   position: fixed;
   top: 50px;
   right: 0;
   z-index: 410;
   box-shadow: 0 0 15px #ccc;
   background-color: white;
-  padding: 0 0 0 15px;
   height: calc(100% - 50px);
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
+/*.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
 .right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart, .right-box-asset-type,
 .right-box-asset-state , .right-box-credential{
   width: 850px;
-}
+}*/
 .right-box-chart .el-input__inner, .right-box-chart input {
   background-color: white;
 }
-.right-box-add-endpoint {
+/*.right-box-add-endpoint {
   width: 850px;
 }
 .right-box-add-endpoint.right-box-add-endpoint-snmp {
   width: 850px;
-}
+}*/
 .snmp-form {
   .el-form-item__content {
     margin-left: 10px !important;
@@ -1016,12 +1015,6 @@ li{
   top: 21px;
   transform: translateX(-50%);
 }
-.right-box .el-input__inner {
-  background-color: white;
-}
-.right-box .el-form-item__label {
-  line-height: 30px;
-}
 .right-box-line {
   margin-bottom: 18px;
   background-color: #DCDFE6;
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 272d78248..7aea1d0d9 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -78,7 +78,54 @@ export const asset = {
     { value: 1, label: i18n.t('asset.inStock') },
     { value: 2, label: i18n.t('asset.notInStock') },
     { value: 3, label: i18n.t('asset.suspended') }
-  ]
+  ],
+  authProtocolOptions: [
+    { value: 0, label: 'Non' },
+    { value: 1, label: 'SSH' },
+    { value: 2, label: 'TELNET' }
+  ],
+  authProtocolData: {
+    non: 0,
+    ssh: 1,
+    telnet: 2
+  },
+  authTypeOptions: [
+    { value: 1, label: 'Username' },
+    { value: 2, label: 'Key' }
+  ],
+  authTypeData: {
+    username: 1,
+    key: 2
+  },
+  editTypeOptions: [
+    { value: 1, label: i18n.t('overall.account') },
+    { value: 2, label: 'Label' },
+    { value: 3, label: i18n.t('asset.state') },
+    { value: 4, label: i18n.t('asset.snmpCredential') }
+  ],
+  editTypeData: {
+    account: 1,
+    label: 2,
+    state: 3,
+    snmpCredential: 4
+  },
+  labelTypeData: {
+    TEXT: 'TEXT',
+    MULTITEXT: 'MULTITEXT',
+    TEXTAREA: 'TEXTAREA',
+    RADIO: 'RADIO',
+    CHECKBOX: 'CHECKBOX',
+    SELECT: 'SELECT',
+    INTEGER: 'INTEGER',
+    DOUBLE: 'DOUBLE',
+    DATETIME: 'DATETIME',
+    EMAIL: 'EMAIL'
+  },
+  labelSubTypeData: {
+    date: 'date',
+    time: 'time',
+    dateTime: 'dateTime'
+  }
 }
 
 export const alertMessage = {
@@ -170,6 +217,7 @@ export const fromRoute = {
   asset: 'asset',
   assetType: 'assetType',
   assetState: 'assetState',
+  assetLabel: 'assetLabel',
   expressionTemplate: 'expressionTemplate',
   user: 'user',
   agent: 'agent',
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index 914089ca7..5ecb43168 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -23,7 +23,7 @@ export default {
     }
   },
   methods: {
-    tableOperation ([command, row]) {
+    tableOperation ([command, row, param]) {
       switch (command) {
         case 'edit': {
           this.$emit('edit', row)
@@ -37,6 +37,14 @@ export default {
           this.$emit('showBottomBox', 'record', row)
           break
         }
+        case 'cli': {
+          this.$emit('cli', row)
+          break
+        }
+        case 'copy': {
+          this.$emit('copy', row)
+          break
+        }
         default:
           break
       }
diff --git a/nezha-fronted/src/components/common/nzTransfer.vue b/nezha-fronted/src/components/common/nzTransfer.vue
new file mode 100644
index 000000000..2ada5bea8
--- /dev/null
+++ b/nezha-fronted/src/components/common/nzTransfer.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="nz-transfer">
+    <div :style="calcStyle" class="nz-transfer__box nz-transfer__box--left">
+      <div class="box__header">
+        <search-input
+          ref="searchInput"
+          :placeholder="$t('overall.placeHolder')"
+          :search-msg="searchMsg"
+          :show-history="false"
+          :show-search="false"
+          style="width:100%"
+          @search="search"
+        ></search-input>
+      </div>
+      <div class="box__table">
+        <el-table
+          v-loading="loading"
+          :data="selectableData"
+          :row-class-name="setRowShow"
+          height="100%"
+          size="small"
+          @selection-change="selectableSelectionChange"
+        >
+          <el-table-column
+            :resizable="false"
+            align="center"
+            type="selection"
+            width="36">
+          </el-table-column>
+          <el-table-column
+            :label="$t('overall.name')"
+          >
+           <template slot-scope="scope">{{scope.row.name}}</template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('asset.host')"
+          >
+            <template slot-scope="scope">{{scope.row.manageIp}}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="box__footer">
+        <el-pagination
+          :current-page.sync="selectablePage.pageNo"
+          :page-size="selectablePage.pageSize"
+          :total="selectablePage.total"
+          layout="prev, slot, next"
+          small
+        >
+          <template>
+            <el-input ref="jumpInput" v-model="selectablePage.pageNo" class="jump-input" @change="selectableChange" @keyup.enter.native="selectableChange"/>
+            <span class="jump-pages">/&nbsp{{selectablePage.pages}}</span>
+          </template>
+        </el-pagination>
+        <button :class="{'top-tool-btn--disabled': selectableSelection.length === 0}"
+                class="top-tool-btn"
+                type="button"
+                @click="leftToRight">
+          <i class="nz-icon nz-icon-arrow-right"></i>
+        </button>
+      </div>
+    </div>
+    <div :style="calcStyle" class="nz-transfer__box nz-transfer__box--right">
+      <div class="box__header">
+        <slot name="title"></slot>
+        <slot></slot>
+      </div>
+      <div class="box__table">
+        <el-table
+          :data="selectedData"
+          height="100%"
+          size="small"
+          @selection-change="selectedSelectionChange"
+        >
+          <el-table-column
+            :resizable="false"
+            align="center"
+            type="selection"
+            width="36">
+          </el-table-column>
+          <el-table-column
+            :label="$t('overall.name')"
+          >
+            <template slot-scope="scope">{{scope.row.name}}</template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('asset.host')"
+          >
+            <template slot-scope="scope">{{scope.row.host}}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="box__footer">
+        <button :class="{'top-tool-btn--disabled': selectedSelection.length === 0}"
+                :disabled="selectedSelection.length === 0"
+                class="top-tool-btn"
+                type="button"
+                @click="rightToLeft">
+          <i class="nz-icon nz-icon-arrow-left"></i>
+        </button>
+<!--        <el-pagination
+          :current-page.sync="selectedPage.pageNo"
+          :page-size="selectedPage.pageSize"
+          :total="selectedPage.total"
+          layout="prev, slot, next"
+          small
+        >
+          <template>
+            <el-input ref="jumpInput" class="jump-input" v-model="selectedPage.pageNo" @change="selectedChange" @keyup.enter.native="selectedChange"/>
+            <span class="jump-pages">/&nbsp{{selectedPage.pages}}</span>
+          </template>
+        </el-pagination>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'nzTransfer',
+  props: {
+    height: {
+      type: String,
+      default: '430'
+    },
+    tableData: { // 左侧待选
+      type: Array
+    },
+    searchMsg: {
+      type: Object
+    },
+    pageObj: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      selectedData: [], // 右侧已选
+      searchLabel: {},
+      loading: false,
+      selectablePage: {},
+      selectedPage: {
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        pages: 0
+      },
+      selectableSelection: [],
+      selectedSelection: []
+    }
+  },
+  computed: {
+    selectableData () {
+      return this.tableData.filter(d => {
+        return !this.selectedData.find(s => d.id === s.id)
+      })
+    },
+    calcStyle () {
+      const style = {}
+      let height
+      if (parseInt(this.height)) {
+        height = `${this.height}px`
+      } else {
+        height = this.height
+      }
+      style.height = height
+      return style
+    }
+  },
+  methods: {
+    search (searchLabel) {
+      this.searchLabel = { ...searchLabel }
+      this.$emit('search', this.searchLabel, this.selectablePage)
+    },
+    selectableChange (current) { // 左侧table翻页
+      this.selectablePage.pageNo = current
+      this.$emit('search', this.searchLabel, this.selectablePage)
+    },
+    selectedChange (current) { // 右侧table翻页
+
+    },
+    selectableSelectionChange (val) { // 左侧选项变化
+      this.selectableSelection = val
+    },
+    selectedSelectionChange (val) { // 右侧选项变化
+      this.selectedSelection = val
+    },
+    leftToRight () {
+      this.$emit('leftToRight', this.selectableSelection)
+      this.selectedData.splice(0, 0, ...this.selectableSelection)
+    },
+    rightToLeft () {
+      this.$emit('rightToLeft', this.selectedSelection)
+      this.selectedData = this.selectedData.filter(d => !this.selectedSelection.find(s => d.id === s.id))
+      console.info(this.selectableSelection)
+      console.info(this.selectedData)
+    },
+    startLoading () {
+      this.loading = true
+    },
+    endLoading () {
+      this.loading = false
+    },
+    setRowShow ({ row }) {
+      if (this.tableData.some(d => d.hide && row.id === d.id)) {
+        return 'hide-row'
+      }
+      return ''
+    }
+  },
+  watch: {
+    pageObj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.selectablePage = { ...n }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '@/assets/css/common/tableCommon.scss';
+.nz-transfer {
+  display: flex;
+  justify-content: space-between;
+
+  .nz-transfer__box {
+    width: calc(50% - 7.5px);
+    border: 1px solid $--right-box-border-color;
+    border-radius: $--primary-border-radius;
+
+    .box__header {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      height: 52px;
+      color: #666;
+      box-sizing: border-box;
+      border-bottom: 1px solid $--right-box-border-color;
+
+      input {
+        background-color: transparent !important;
+      }
+    }
+
+    .box__table {
+      height: calc(100% - 94px);
+      border-bottom: 1px solid $--right-box-border-color;
+
+      .el-table--border::after, .el-table--group::after, .el-table::before {
+        height: 0;
+      }
+      .el-table__row {
+        td {
+          border-color: $--right-box-border-color;
+
+          &:first-of-type .cell {
+            text-overflow: unset;
+          }
+        }
+      }
+    }
+
+    .box__footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 8px 1px;
+      height: 42px;
+      box-sizing: border-box;
+
+      .jump-input {
+        width: 40px;
+
+        .el-input__inner {
+          padding: 0 5px;
+          height: 24px;
+          line-height: 24px;
+        }
+      }
+
+      .jump-pages {
+        padding-left: 9px;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .top-tool-btn {
+        height: 28px;
+        width: 28px;
+        line-height: 28px;
+      }
+
+      .el-pagination {
+        display: flex;
+        align-items: center;
+        padding: 0;
+
+        .btn-prev, .btn-next {
+          border: none;
+          background-color: transparent !important;
+        }
+        .btn-prev {
+          margin: 0 5px;
+        }
+        .btn-next {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+.hide-row {
+  display: none !important;
+}
+</style>
diff --git a/nezha-fronted/src/components/common/popBox/selectAssetType.vue b/nezha-fronted/src/components/common/popBox/selectAssetType.vue
index 63a26b195..d53ae05ce 100644
--- a/nezha-fronted/src/components/common/popBox/selectAssetType.vue
+++ b/nezha-fronted/src/components/common/popBox/selectAssetType.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-popover :placement="placement" popper-class="nz-pop nz-pop-select-panel" ref="selectAssetTypePopBox" transition="slide" v-model="popBox.show" width="820">
+  <el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel" transition="slide">
     <div>
       <div class="pop-item-wider">
 
@@ -37,13 +37,14 @@ export default {
   props: {
     placement: { type: String },
     assetTypeData: { type: Array },
-    showParent: { type: Object }
+    showType: { type: Object },
+    width: { type: String, default: '625' }
   },
   mounted () {
     this.$refs.assetTypeTree.setCurrentKey(this.assetType)
   },
   watch: {
-    showParent: {
+    showType: {
       immediate: true,
       handler (n) {
         if (n) {
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
new file mode 100644
index 000000000..c74d63f1c
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -0,0 +1,407 @@
+<template>
+  <div v-clickoutside="{obj: editData, func: esc}" class="right-box right-box-asset-batch">
+    <div class="right-box__header">
+      <div class="header__title">{{$t('asset.batchEditAsset')}}</div>
+      <div class="header__operation">
+        <span><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <!-- Edit type -->
+        <el-form ref="assetEditForm" :model="editData" :rules="rules" label-position="top" label-width="120px">
+          <el-form-item :label="$t('overall.name')" prop="editType">
+            <el-select v-model="editData.editType" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+              <el-option v-for="type in assetConstants.editTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
+            </el-select>
+          </el-form-item>
+          <!-- 第一级：Edit type = account -->
+          <template v-if="editData.editType === assetConstants.editTypeData.account">
+            <el-form-item :label="$t('asset.authProtocol')" prop="authProtocol">
+              <el-select v-model="editData.authProtocol" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+                <el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/>
+              </el-select>
+            </el-form-item>
+            <!--   第二级：Protocol type = SSH -->
+            <template v-if="editData.authProtocol === assetConstants.authProtocolData.ssh">
+              <div class="form__sub-title">{{$t('asset.sshAccount')}}</div>
+              <el-form-item :label="$t('asset.authType')" prop="authType">
+                <el-select v-model="editData.authType" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+                  <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
+                </el-select>
+              </el-form-item>
+              <!--     第三级：Auth type = username | key -->
+              <el-form-item :label="$t('asset.username')" prop="authUsername">
+                <el-input v-model="editData.authUsername" size="small"/>
+              </el-form-item>
+              <template v-if="editData.authType === assetConstants.authTypeData.key">
+                <!-- Key支持私钥 -->
+                <el-form-item :label="$t('asset.privateKey')" prop="authPriKey">
+                  <el-input v-model="editData.authPriKey" size="small"/>
+                </el-form-item>
+              </template>
+              <el-form-item :label="$t('asset.password')" prop="authPin">
+                <el-input v-model="editData.authPin" size="small"/>
+              </el-form-item>
+              <el-form-item :label="$t('asset.port')" prop="authProtocolPort">
+                <el-input v-model="editData.authProtocolPort" size="small"/>
+              </el-form-item>
+            </template>
+
+            <!--   第二级：Protocol type = TELNET -->
+            <template v-if="editData.authProtocol === assetConstants.authProtocolData.telnet">
+              <div class="form__sub-title">TELNET</div>
+              <el-form-item :label="$t('asset.username')" prop="authUsername">
+                <el-input v-model="editData.authUsername" size="small"/>
+              </el-form-item>
+              <el-form-item :label="$t('asset.password')" prop="authPin">
+                <el-input v-model="editData.authPin" size="small"/>
+              </el-form-item>
+              <el-form-item :label="$t('asset.usernamePrompt')" prop="authUserTip">
+                <el-input v-model="editData.authUserTip" size="small"/>
+              </el-form-item>
+              <el-form-item :label="$t('asset.passwordPrompt')" prop="authPinTip">
+                <el-input v-model="editData.authPinTip" size="small"/>
+              </el-form-item>
+            </template>
+          </template>
+
+          <!-- 第一级：Edit type = label -->
+          <template v-if="editData.editType === assetConstants.editTypeData.label">
+            <div class="form__sub-title">{{$t('overall.labels')}}</div>
+            <div v-for="(label, i) in editData.fields" :key="i" class="form__dotted-item">
+              <el-form-item :prop="'fields.' + i + '.value'">
+                <template v-slot:label>
+                  <div class="form__labels-label">
+                    <span>{{label.name}}</span>
+                    <div>
+                      <el-checkbox v-model="label.action" :false-label="0" :label="$t('overall.delete')" :true-label="1" size="small" style="padding-right: 20px;"></el-checkbox>
+                      <span v-if="label.type.toUpperCase() === assetConstants.labelTypeData.MULTITEXT" @click="addMultiTextRow(label)"><i class="nz-icon nz-icon-create-square"></i></span>
+                      <span @click="removeLabel(label)"><i class="nz-icon nz-icon-minus"></i></span>
+                    </div>
+                  </div>
+                </template>
+                <template v-if="label.action !== 1">
+                  <template v-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXT">
+                    <el-input v-model="label.value" size="small"/>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.MULTITEXT">
+                    <div v-for="(value, i) in label.value" :key="i" class="label__multi-text">
+                      <el-input v-model="label.value[i]" size="small"/>
+                      <span><i class="nz-icon nz-icon-minus"></i></span>
+                    </div>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA">
+                    <el-input v-model="label.value" :maxlength="4096" size="small" type="textarea"/>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.RADIO">
+                    <el-radio v-for="item in JSON.parse(label.param).items" :key="item.name" v-model="label.value" :label="item.name">{{item.name}}</el-radio>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.CHECKBOX">
+                    <el-checkbox-group v-model="label.value">
+                      <el-checkbox v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-checkbox>
+                    </el-checkbox-group>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
+                    <el-select v-model="label.value" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
+                      <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
+                    </el-select>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.INTEGER">
+                    <el-input v-model="label.value" oninput="value=value.replace(/[^\d]/g,'')" size="small"></el-input>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DOUBLE">
+                    <el-input v-model="label.value" oninput="value=value.replace(/[^0-9.]/g,'')" size="small"></el-input>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DATETIME">
+                    <template v-if="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.time">
+                      <div v-if="label.interval" style="display: flex; justify-content: space-between">
+                        <el-time-select v-model="label.value[0]" size="small"></el-time-select>
+                        <el-time-select v-model="label.value[1]" size="small"></el-time-select>
+                      </div>
+                      <template v-else>
+                        <el-time-select v-model="label.value" size="small" style="width: 100%"></el-time-select>
+                      </template>
+                    </template>
+                    <template v-else>
+                      <template v-if="label.interval">
+                        <el-date-picker
+                          id="asset-box-input-purchase-date"
+                          v-model="label.value"
+                          :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
+                          placeholder=""
+                          size="small"
+                          style="width: 100%">
+                        </el-date-picker>
+                      </template>
+                      <template v-else>
+                        <el-date-picker
+                          id="asset-box-input-parchase-date"
+                          v-model="label.value"
+                          :type="JSON.parse(label.param).subType"
+                          placeholder=""
+                          size="small"
+                          style="width: 100%"
+                          value-format="yyyy-MM-dd">
+                        </el-date-picker>
+                      </template>
+                    </template>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.EMAIL">
+                    <input v-model="label.value" size="small"></input>
+                  </template>
+                </template>
+              </el-form-item>
+            </div>
+            <!-- label的新增按钮 -->
+            <div class="form__flex-container hide-casc-input">
+              <button class="form__create-btn" type="button" @click.stop><i class="nz-icon nz-icon-create-square"></i></button>
+              <el-cascader
+                v-if="labelCascShow"
+                :options="fieldGroupData"
+                :props="labelCascProp"
+                class="hide-input"
+                popper-class="prevent-clickoutside"
+                size="small"
+                @change="addLabel"
+              ></el-cascader>
+            </div>
+          </template>
+
+          <!-- 第一级：Edit type = state -->
+          <template v-if="editData.editType === assetConstants.editTypeData.state">
+            <el-form-item :label="$t('asset.state')" prop="stateId">
+              <el-select v-model="editData.stateId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+                <el-option v-for="state in stateData" :key="state.id" :label="state.name" :value="state.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </template>
+
+          <!-- 第一级：Edit type = snmp credential -->
+          <template v-if="editData.editType === assetConstants.editTypeData.snmpCredential">
+            <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
+              <el-select v-model="editData.snmpCredentialId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+                <el-option v-for="snmp in snmpCredentialData" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </template>
+
+          <!-- 选择资产，穿梭框 -->
+          <div class="form__sub-title">{{$t('overall.select')}}</div>
+          <nz-transfer ref="transfer"
+                       :page-obj="transfer.pageObj"
+                       :search-msg="transfer.searchMsg"
+                       :table-data="transfer.tableData"
+                       style="margin-bottom: 20px;"
+                       @leftToRight="addAsset"
+                       @rightToLeft="removeAsset">
+            <template v-slot:title>Selected</template>
+          </nz-transfer>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editData, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import nzTransfer from '@/components/common/nzTransfer'
+import { asset as assetConstants } from '@/components/common/js/constants'
+export default {
+  name: 'assetBatchEditBox',
+  components: {
+    nzTransfer
+  },
+  props: {
+    fieldGroupData: {
+      type: Array
+    },
+    stateData: {
+      type: Array
+    },
+    snmpCredentialData: {
+      type: Array
+    }
+  },
+  data () {
+    const vm = this
+    return {
+      assetConstants,
+      url: 'asset/asset',
+      editData: {
+        editType: 1,
+        authProtocol: 0,
+        authType: 1,
+        fields: [],
+        snmpCredentialId: null
+      },
+      labelCascProp: {
+        lazy: true,
+        value: 'id',
+        label: 'name',
+        lazyLoad (node, resolve) {
+          const { level } = node
+          vm.$get('asset/field/meta', { groupIds: node.data.id }).then(response => {
+            if (response.code === 200) {
+              const meta = response.data.list.map(item => ({
+                ...item,
+                leaf: level >= 1,
+                disabled: vm.editData.fields.some(a => a.id === item.id)
+              }))
+              vm.metaData = meta
+              resolve(meta)
+            }
+          })
+        }
+      },
+      labelCascShow: true, // 用来控制label的cascader的重新渲染
+      transfer: {
+        tableData: [],
+        selectedData: [],
+        searchLabel: {},
+        searchMsg: { // 给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [
+            {
+              id: 1,
+              name: 'ID',
+              type: 'input',
+              label: 'id',
+              disabled: false
+            }, {
+              id: 20,
+              name: 'SN',
+              type: 'input',
+              label: 'sn',
+              disabled: false
+            }, {
+              id: 21,
+              name: 'Host',
+              type: 'input',
+              label: 'host',
+              disabled: false
+            }, {
+              id: 22,
+              name: this.$t('asset.state'),
+              type: 'select',
+              label: 'assetState',
+              disabled: false
+            }, {
+              id: 23,
+              name: 'pingStatus',
+              type: 'select',
+              label: 'pingStatus',
+              disabled: false
+            }, {
+              id: 23,
+              name: this.$t('asset.tableTitle.cabinet'),
+              type: 'input',
+              label: 'cabinetName',
+              disabled: false
+            }
+          ]
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: 10,
+          pages: 1,
+          total: 0
+        }
+      },
+      rules: {},
+      metaData: []
+    }
+  },
+  methods: {
+    search (searchLabel, page) {
+      this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
+      this.transfer.pageObj = JSON.parse(JSON.stringify(page))
+      this.getTableData()
+    },
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.editData.ids = this.transfer.selectedData.map(d => d.id)
+      this.$put('asset/asset/bulkEdit', this.editData).then(res => {
+        if (res.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.esc(true)
+        }
+      })
+    },
+    addLabel ([groupId, metaId]) {
+      const label = this.metaData.find(m => m.id === metaId)
+      this.editData.fields.push({ ...label, value: this.blankLabelValue(label), action: 0 })
+      this.labelCascShow = false
+      this.$nextTick(() => {
+        this.labelCascShow = true
+      })
+    },
+    addMultiTextRow (label) {
+      label.value.push('')
+    },
+    blankLabelValue (label) {
+      if (label.type.toUpperCase() === this.assetConstants.labelTypeData.CHECKBOX) {
+        return []
+      } else if (label.type.toUpperCase() === this.assetConstants.labelTypeData.MULTITEXT) {
+        return ['']
+      } else {
+        return ''
+      }
+    },
+    removeLabel (label) {
+      let index = 0
+      this.editData.fields.find((f, i) => {
+        if (label.id === f.id) {
+          index = i
+          return true
+        }
+        return false
+      })
+      this.editData.fields.splice(index, 1)
+      this.labelCascShow = false
+      this.$nextTick(() => {
+        this.labelCascShow = true
+      })
+    },
+    getTableData () {
+      this.$refs.transfer.startLoading()
+      this.$get(this.url, { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
+        this.$refs.transfer.endLoading()
+        if (response.code === 200) {
+          this.transfer.tableData = response.data.list
+          this.transfer.pageObj.total = response.data.total
+        }
+      })
+    },
+    addAsset (toAdd) {
+      this.transfer.selectedData = toAdd
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+    },
+    removeAsset (toRemove) {
+      this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+      // dc, brand, model, type
+    }
+  },
+  mounted () {
+    this.getTableData()
+  }
+}
+</script>
+
+<style lang="scss">
+  @import '@/assets/css/common/rightBoxCommon.scss';
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
new file mode 100644
index 000000000..6935182d3
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -0,0 +1,476 @@
+<template>
+  <div v-clickoutside="{obj: editAsset, func: esc}" class="right-box right-box-asset">
+    <div class="right-box__header">
+      <div class="header__title">{{editAsset.id ? $t('asset.editAsset') : $t('asset.createAsset')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editAsset, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="assetEditForm" :model="editAsset" :rules="rules" label-position="top" label-width="120px">
+          <el-form-item :label="$t('overall.name')" prop="name">
+            <el-input v-model="editAsset.name" size="small"/>
+          </el-form-item>
+          <el-form-item :label="$t('overall.type')" prop="typeId">
+            <select-asset-type id="asset-type" :asset-type-data="typeData" :show-type="editAsset.type" size="small"
+                               @selectAssetType="selectType">
+              <template v-slot:trigger>
+                <el-input v-model="editAsset.type.name" :clearable="true" :readonly="true" placeholder="" size="small"></el-input>
+              </template>
+            </select-asset-type>
+          </el-form-item>
+          <el-form-item v-if="editAsset.type && editAsset.type.vm === 1" :label="$t('overall.parent')" prop="pid">
+            <el-select
+              v-model="editAsset.pid"
+              class="right-box__select"
+              popper-class="right-box-select-dropdown prevent-clickoutside"
+              size="small"
+              value-key="id">
+              <el-option v-for="p in parentAssetData" :key="p.id" :label="p.name" :value="p.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('asset.state')" prop="stateId">
+            <el-select v-model="editAsset.stateId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+              <el-option v-for="state in stateData" :key="state.id" :label="state.name" :value="state.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('asset.manageIp')" prop="manageIp">
+            <el-input v-model="editAsset.manageIp" size="small"/>
+          </el-form-item>
+          <el-form-item :label="$t('asset.sn')" prop="sn">
+            <el-input v-model="editAsset.sn" size="small"/>
+          </el-form-item>
+          <el-form-item :label="$t('asset.number')" prop="number">
+            <el-input v-model="editAsset.number" size="small"/>
+          </el-form-item>
+          <el-form-item :label="$t('asset.brandAndModel')" class="placeholder-emphasize" prop="brandAndModel">
+            <el-cascader
+              v-if="!vmLock"
+              v-model="brandAndModelData"
+              :options="brandData"
+              :placeholder="lockModelInputValue"
+              :props="modelCascProp"
+              popper-class="prevent-clickoutside"
+              size="small"
+              style="width: 100%;"
+            ></el-cascader>
+            <el-input v-else v-model="lockModelInputValue" disabled size="small"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('asset.location')" prop="location">
+            <location-cascader v-if="!vmLock" ref="locationCascader" :dc-option="dcData" :default-model-u-size="1" @change="setLocationData"></location-cascader>
+            <el-input v-else v-model="lockLocationInputValue" disabled size="small"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('asset.purchaseDate')" prop="purchaseDate">
+            <el-date-picker
+              id="asset-box-input-parchase-date"
+              v-model="editAsset.purchaseDate"
+              placeholder=""
+              size="small"
+              style="width: 100%"
+              type="date"
+              value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+          <!-- labels -->
+          <div class="form__sub-title">{{$t('overall.labels')}}</div>
+          <div v-for="(label, i) in editAsset.fields" :key="i" class="form__dotted-item">
+            <el-form-item :prop="'fields.' + i + '.value'">
+              <template v-slot:label>
+                <div class="form__labels-label">
+                  <span>{{label.name}}</span>
+                  <span @click="removeLabel(label)"><i class="nz-icon nz-icon-minus"></i></span>
+                </div>
+              </template>
+              <el-input v-model="label.value" size="small"/>
+            </el-form-item>
+          </div>
+          <!-- label的新增按钮 -->
+          <div class="form__flex-container hide-casc-input">
+            <button class="form__create-btn" type="button" @click.stop><i class="nz-icon nz-icon-create-square"></i></button>
+            <el-cascader
+              v-if="labelCascShow"
+              :options="fieldGroupData"
+              :props="labelCascProp"
+              class="hide-input"
+              popper-class="prevent-clickoutside"
+              size="small"
+              @change="addLabel"
+            ></el-cascader>
+          </div>
+          <!-- SSH -->
+          <template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.ssh">
+            <div class="form__sub-title">SSH</div>
+            <el-form-item :label="$t('asset.authType')" prop="authType">
+              <el-select v-model="editAsset.authType" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+                <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('asset.username')" prop="authUsername">
+              <el-input v-model="editAsset.authUsername" size="small"/>
+            </el-form-item>
+            <!-- Key支持私钥 -->
+            <template v-if="editAsset.authType === assetConstants.authTypeData.key">
+              <el-form-item :label="$t('asset.privateKey')" prop="authPriKey">
+                <el-input v-model="editAsset.authPriKey" size="small"/>
+              </el-form-item>
+            </template>
+            <el-form-item :label="$t('asset.password')" prop="authPin">
+              <el-input v-model="editAsset.authPin" size="small"/>
+            </el-form-item>
+            <el-form-item :label="$t('asset.port')" prop="authProtocolPort">
+              <el-input v-model="editAsset.authProtocolPort" size="small"/>
+            </el-form-item>
+          </template>
+          <!-- TELNET -->
+          <template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.telnet">
+            <div class="form__sub-title">TELNET</div>
+            <el-form-item :label="$t('asset.username')" prop="authUsername">
+              <el-input v-model="editAsset.authUsername" size="small"/>
+            </el-form-item>
+            <el-form-item :label="$t('asset.password')" prop="authPin">
+              <el-input v-model="editAsset.authPin" size="small"/>
+            </el-form-item>
+            <el-form-item :label="$t('asset.usernamePrompt')" prop="authUserTip">
+              <el-input v-model="editAsset.authUserTip" size="small"/>
+            </el-form-item>
+            <el-form-item :label="$t('asset.passwordPrompt')" prop="authPinTip">
+              <el-input v-model="editAsset.authPinTip" size="small"/>
+            </el-form-item>
+          </template>
+          <!-- SNMP -->
+          <template v-if="editAsset.type && editAsset.type.snmpEnable === 1">
+            <div class="form__sub-title">SNMP</div>
+            <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
+              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+                <el-option v-for="snmp in snmpCredentialData" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </template>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editAsset, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { host, port } from '@/components/common/js/validate'
+import { asset as assetConstants } from '@/components/common/js/constants'
+import selectAssetType from '@/components/common/popBox/selectAssetType'
+import locationCascader from '@/components/common/rightBox/locationCascader'
+export default {
+  name: 'assetBox',
+  components: {
+    selectAssetType,
+    locationCascader
+  },
+  props: {
+    obj: {
+      type: Object
+    },
+    dcData: {
+      type: Array
+    },
+    brandData: {
+      type: Array
+    },
+    stateData: {
+      type: Array
+    },
+    typeData: {
+      type: Array
+    },
+    snmpCredentialData: {
+      type: Array
+    },
+    fieldGroupData: {
+      type: Array
+    }
+  },
+  data () {
+    const vm = this
+    return {
+      assetConstants,
+      editAsset: {},
+      url: 'asset/asset',
+      rightBox: { model: { show: false } },
+
+      vmLock: false, // 当自己是虚拟机时，锁定品牌型号位置为parent的，无法修改
+      lockModelInputValue: '', // model锁定时的显示内容
+      lockLocationInputValue: '', // location锁定时显示的内容
+
+      cabinetData: [],
+      parentAssetData: [],
+      metaData: [], // 下拉选项列表
+      labelCascShow: true, // 用来控制label的cascader的重新渲染
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        pid: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        manageIp: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: host, trigger: 'blur' }
+        ],
+        modelId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        typeId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        stateId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        dcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authProtocolPort: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          { validator: port, trigger: 'blur' }
+        ]
+      },
+      cabRules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        uSize: [
+          { required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        dcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      brandAndModelData: [],
+      modelCascProp: {
+        lazy: true,
+        value: 'id',
+        label: 'name',
+        lazyLoad (node, resolve) {
+          const { level } = node
+          vm.$get('asset/model', { brandIds: node.data.id }).then(response => {
+            if (response.code === 200) {
+              const models = response.data.list.map(item => ({
+                ...item,
+                leaf: level >= 1
+              }))
+              resolve(models)
+            }
+          })
+        }
+      },
+      labelCascProp: {
+        lazy: true,
+        value: 'id',
+        label: 'name',
+        lazyLoad (node, resolve) {
+          const { level } = node
+          vm.$get('asset/field/meta', { groupIds: node.data.id }).then(response => {
+            if (response.code === 200) {
+              const meta = response.data.list.map(item => ({
+                ...item,
+                leaf: level >= 1,
+                disabled: vm.editAsset.fields.some(a => a.id === item.id)
+              }))
+              vm.metaData = meta
+              resolve(meta)
+            }
+          })
+        }
+      }
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editAsset = JSON.parse(JSON.stringify(n))
+        this.$nextTick(() => {
+          this.editAsset.stateId = n.state ? n.state.id : ''
+          this.editAsset.typeId = n.type ? n.type.id : ''
+          if (n.id) {
+            this.lockModelInputValue = `${n.brand.name} / ${n.model.name}`
+          }
+          this.$refs.locationCascader.initComponet({ cabinet: n.cabinet, dc: n.dc, u: [n.cabinetStart, n.cabinetEnd] })
+        })
+      }
+    },
+    'editAsset.type': {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.vmLock = n.vm === 1 // vm == 1 时，锁定model和location
+          if (!this.editAsset.authProtocolPort) {
+            if (n.authProtocol === this.assetConstants.authProtocolData.ssh) {
+              this.editAsset.authProtocolPort = 22
+            } else if (n.authProtocol === this.assetConstants.authProtocolData.telnet) {
+              this.editAsset.authProtocolPort = 23
+            }
+          }
+        }
+      }
+    },
+    'editAsset.pid': {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n) {
+          if (this.vmLock) {
+            if (this.parentAssetData.length === 0) {
+              this.getParentAsset().then(res => {
+                const asset = this.parentAssetData.find(a => a.id === n)
+                if (asset) {
+                  this.editAsset.brandId = asset.brand.id
+                  this.editAsset.modelId = asset.model.id
+                  this.editAsset.dcId = asset.dc.id
+                  this.editAsset.cabinetId = asset.cabinet.id
+                  this.editAsset.cabinetStart = asset.cabinetStart
+                  this.editAsset.cabinetEnd = asset.cabinetEnd
+
+                  this.lockModelInputValue = `${asset.brand.name} / ${asset.model.name}`
+                  this.lockLocationInputValue = `${asset.dc.name} / ${asset.cabinet.name} / ${asset.cabinetStart}-${asset.cabinetEnd}`
+                }
+              })
+            } else {
+              const asset = this.parentAssetData.find(a => a.id === n)
+              if (asset) {
+                this.editAsset.brandId = asset.brand.id
+                this.editAsset.modelId = asset.model.id
+                this.editAsset.dcId = asset.dc.id
+                this.editAsset.cabinetId = asset.cabinet.id
+                this.editAsset.cabinetStart = asset.cabinetStart
+                this.editAsset.cabinetEnd = asset.cabinetEnd
+
+                this.lockModelInputValue = `${asset.brand.name} / ${asset.model.name}`
+                this.lockLocationInputValue = `${asset.dc.name} / ${asset.cabinet.name} / ${asset.cabinetStart}-${asset.cabinetEnd}`
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    this.getParentAsset()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    setLocationData ({ cabinet, dc, u }) {
+      if (dc) {
+        this.editAsset.dcId = dc.id
+        this.editAsset.cabinetId = cabinet.id
+        this.editAsset.cabinetStart = u[0]
+        this.editAsset.cabinetEnd = u[1]
+      }
+    },
+    removeLabel (label) {
+      let index = 0
+      this.editAsset.fields.find((f, i) => {
+        if (label.id === f.id) {
+          index = i
+          return true
+        }
+        return false
+      })
+      this.editAsset.fields.splice(index, 1)
+      this.labelCascShow = false
+      this.$nextTick(() => {
+        this.labelCascShow = true
+      })
+    },
+    getParentAsset () {
+      return new Promise(resolve => {
+        this.$get(this.url, { pageSize: -1, vmh: 1 }).then(response => {
+          if (response.code === 200) {
+            this.parentAssetData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    selectType (type) {
+      this.editAsset.type = { ...type }
+      this.editAsset.typeId = type.id ? type.id : ''
+    },
+    addLabel ([groupId, metaId]) {
+      const label = this.metaData.find(m => m.id === metaId)
+      this.editAsset.fields.push({ id: label.id, value: '', name: label.name })
+      this.labelCascShow = false
+      this.$nextTick(() => {
+        this.labelCascShow = true
+      })
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    getCabinetData (id) {
+      return new Promise(resolve => {
+        this.$get('cabinet?dcId=' + id).then(response => {
+          if (response.code === 200) {
+            this.cabinetData = response.data.list
+            for (let i = 0; i < this.cabinetData.length; i++) {
+              this.$set(this.cabinetData[i], 'children', this.dcData)
+            }
+          }
+          resolve(this.cabinetData)
+        })
+      })
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+
+      this.$refs.assetEditForm.validate((valid) => {
+        if (valid) {
+          if (this.editAsset.id) {
+            this.$put(this.url, this.editAsset).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            this.$post(this.url, this.editAsset).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+  @import '@/assets/css/common/rightBoxCommon.scss';
+
+  .placeholder-emphasize input::-webkit-input-placeholder {
+    color: #606266 !important;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index f34c9ff44..7e10d3ce1 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-asset" v-clickoutside="{obj:editAsset,func:clickOutside}">
+  <div v-clickoutside="{obj:editAsset, func:clickOutside}" class="right-box right-box-asset">
     <!--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" id="asset-edit-del" type="button" v-has="'asset_delete'" v-if="editAsset.id"
@@ -686,7 +686,8 @@ export default {
   }
 }
 </script>
-<style >
+<style lang="scss">
+@import '@/assets/css/common/rightBoxCommon.scss';
   .location-selector{
     width: 512px;
   }
diff --git a/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
index 147b11cfd..bfb2e20dc 100644
--- a/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
@@ -24,7 +24,7 @@
         </el-form-item>
         <!--parent-->
         <el-form-item :label="$t('config.assetType.parent')" prop="pid">
-          <select-asset-type :asset-type-data="assetTypeData2" :show-parent="showParentAssetType" @selectAssetType="selectParent" id="asset-type-parent"
+          <select-asset-type id="asset-type-parent" :asset-type-data="assetTypeData2" :show-type="showParentAssetType" @selectAssetType="selectParent"
                               size="small">
             <template v-slot:trigger>
               <el-input :clearable="true" :readonly="true" placeholder="" size="small" v-model="showParentAssetType.name">
@@ -79,7 +79,7 @@
   </div>
 </template>
 <script>
-import selectAssetType from '../popBox/selectAssetType'
+import selectAssetType from '@/components/common/popBox/selectAssetType'
 export default {
   name: 'asset-type-right-box',
   props: {
diff --git a/nezha-fronted/src/components/common/rightBox/locationCascader.vue b/nezha-fronted/src/components/common/rightBox/locationCascader.vue
index e6d09bfae..f9e92b007 100644
--- a/nezha-fronted/src/components/common/rightBox/locationCascader.vue
+++ b/nezha-fronted/src/components/common/rightBox/locationCascader.vue
@@ -6,13 +6,13 @@
       </el-input>
     </div>
     <div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}" >
-      <div class="container">
+      <div class="location-container">
         <div class="container-item">
           <div style="height: 100%; overflow: auto;">
-            <ul v-if="idcInfos&& idcInfos.length>0">
-              <li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
+            <ul v-if="dcInfos&& dcInfos.length>0">
+              <li v-for="(item,index) in dcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
                 <div class="container-item-content">
-                  <div :title="item.name" class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div>
+                  <div :class="{'selected':selectedData.dc&&selectedData.dc.id == item.id}" :title="item.name" class="container-item-content_label">{{item.name}}</div>
                   <div><i class="el-icon-arrow-right"></i></div>
                 </div>
               </li>
@@ -36,7 +36,7 @@
         <div class="container-item" v-show="isShowCabinetU || uChecked.length>0" style="border-right: unset">
           <div style="height: 100%; overflow: auto;">
             <el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
-              <el-checkbox v-for="(item,index) in showUInfos" :key="index" :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
+              <el-checkbox v-for="(item,index) in showUInfos" :key="index" :ref="'u-'+selectedData.dc.id+'-'+selectedData.cabinet.id+'-'+item.value" :checked="item.occupy==true||item.checked==true" :disabled="item.occupy==true" :label="item.label" :value="item.value" style="width: 50%"></el-checkbox>
             </el-checkbox-group>
           </div>
         </div>
@@ -60,19 +60,19 @@ export default {
     defaultModelUSize: { default: 1 },
     value: { default: null },
     disabled: { type: Boolean },
-    idcOption: { type: Array }
+    dcOption: { type: Array }
   },
   data () {
     return {
       initData: null,
       dropDownVisible: false,
-      idcInfos: [],
+      dcInfos: [],
       cabinetInfos: new Map(),
       showCabinetInfos: [],
       uInfos: new Map(),
       showUInfos: [],
       selectedData: {
-        idc: null,
+        dc: null,
         cabinet: null,
         u: null
       },
@@ -88,7 +88,7 @@ export default {
   mounted () {
   },
   methods: {
-    toggleDropdown: function () {
+    toggleDropdown () {
       if (this.disabled == false) {
         this.dropDownVisible = !this.dropDownVisible
         if (this.dropDownVisible) {
@@ -103,30 +103,22 @@ export default {
         }
       }
     },
-    queryIdcInfos: function () {
-      this.idcInfos = this.idcOption
-      /* this.$get('idc?pageSize=-1').then(response=>{
-          console.info(2)
-          if(response.code == 200){
-              this.idcInfos=response.data.list;
-          }else{
-            console.error(response.msg);
-          }
-        }) */
+    queryDcInfos () {
+      this.dcInfos = this.dcOption
     },
-    loadCabinetInfos: function (idc) {
-      if (!idc) {
+    loadCabinetInfos (dc) {
+      if (!dc) {
         return
       }
-      this.selectedData.idc = idc
+      this.selectedData.dc = dc
       this.selectedData.cabinet = null
       this.selectedData.u = null
-      const cabinetKey = 'idc-' + idc.name + '-' + idc.id
+      const cabinetKey = 'dc-' + dc.name + '-' + dc.id
       this.showCabinetInfos = []
       if (this.cabinetInfos.has(cabinetKey) && this.cabinetInfos.get(cabinetKey) && this.cabinetInfos.get(cabinetKey).length > 0) {
         this.showCabinetInfos = this.cabinetInfos.get(cabinetKey)
       } else {
-        this.$get('cabinet?pageSize=-1&idcId=' + idc.id).then(response => {
+        this.$get('cabinet?pageSize=-1&dcId=' + dc.id).then(response => {
           if (response.code == 200) {
             this.cabinetInfos.set(cabinetKey, response.data.list)
             this.showCabinetInfos = response.data.list
@@ -139,14 +131,14 @@ export default {
       this.isShowCabinetU = false
       this.showUInfos = []
     },
-    loadCabinetUInfos: function (cabinet, isInit = false) {
+    loadCabinetUInfos (cabinet, isInit = false) {
       if (!cabinet) {
         return
       }
       // console.log('load u',cabinet,isInit)
       this.selectedData.cabinet = cabinet
       this.selectedData.u = null
-      const cabinetUKey = 'cabinet-' + this.selectedData.idc.id + '-' + cabinet.id
+      const cabinetUKey = 'cabinet-' + this.selectedData.dc.id + '-' + cabinet.id
       this.showUInfos = []
       this.uChecked = []
       this.oldUChecked = []
@@ -196,7 +188,7 @@ export default {
       this.isShowCabinetU = true
       this.refreshCheckBox()
     },
-    uChange: function (data) {
+    uChange (data) {
       if (data.length < this.oldUChecked.length) { // 取消选择操作
         // 1.判断是否仅剩下defualtModelusize 的u位选中
         const checkedValues = this.findUnoccupyU(this.oldUChecked)
@@ -300,11 +292,11 @@ export default {
       this.oldUChecked = this.uChecked
       this.selectedData.u = this.findOldCheckedMinMax(this.uChecked)
     },
-    clearUChecked: function () { // 取消所有选中，恢复到刚打开时的状态
+    clearUChecked () { // 取消所有选中，恢复到刚打开时的状态
       this.uChecked = []
       this.uChecked = this.uChecked.concat(this.occupyU)
     },
-    findOldCheckedMinMax: function () {
+    findOldCheckedMinMax () {
       let oldUCheckCopy = Object.assign([], this.oldUChecked)
       oldUCheckCopy = this.findUnoccupyU(oldUCheckCopy)
       if (oldUCheckCopy && oldUCheckCopy.length > 0) {
@@ -316,14 +308,14 @@ export default {
         return []
       }
     },
-    findUnoccupyU: function (arr) {
+    findUnoccupyU (arr) {
       // console.log('findUnoccupyU')
       // console.log(this.occupyU)
       return arr.filter((item, index) => {
         return !this.occupyU.includes(item)
       })
     },
-    findSuitableU: function (checkValue) {
+    findSuitableU (checkValue) {
       // 将u位数组分为左右两部分，先查找右边的是否符合
       let left = this.showUInfos.filter((item, index) => { return item.value < checkValue })
       left = left.reverse()// 自下而上查找
@@ -353,39 +345,39 @@ export default {
       }
       return result
     },
-    refreshCheckBox: function () {
+    refreshCheckBox () {
       this.refresh = false
       this.$nextTick(() => {
         this.refresh = true
       })
     },
-    initComponet: function (initData) {
+    initComponet (initData) {
       this.initData = Object.assign({}, initData)
       if (initData) {
-        this.selectedData.idc = initData.idc
+        this.selectedData.dc = initData.dc
         this.selectedData.cabinet = initData.cabinet
         this.selectedData.u = initData.u
-        this.loadCabinetInfos(initData.idc)
+        this.loadCabinetInfos(initData.dc)
         this.loadCabinetUInfos(initData.cabinet, true)
       }
     }
   },
   computed: {
     inputShowInfo () {
-      const idcName = this.selectedData.idc ? this.selectedData.idc.name + '/' : ''
+      const dcName = this.selectedData.dc ? this.selectedData.dc.name + ' / ' : ''
 
-      const cabinetName = this.selectedData.cabinet ? this.selectedData.cabinet.name + '/' : ''
+      const cabinetName = this.selectedData.cabinet ? this.selectedData.cabinet.name + ' / ' : ''
 
       const uValues = this.selectedData.u && this.selectedData.u.length > 0 && this.selectedData.u[0] && this.selectedData.u[1] ? this.selectedData.u[0] + '-' + this.selectedData.u[1] : ''
 
-      if (!this.selectedData.idc) {
+      if (!this.selectedData.dc) {
         return ''
-      } else if (this.selectedData.idc && !this.selectedData.cabinet) {
-        return idcName
-      } else if (this.selectedData.idc && this.selectedData.cabinet && !this.selectedData.u) {
-        return idcName + cabinetName
-      } else if (this.selectedData.idc && this.selectedData.cabinet && this.selectedData.u) {
-        return idcName + cabinetName + uValues
+      } else if (this.selectedData.dc && !this.selectedData.cabinet) {
+        return dcName
+      } else if (this.selectedData.dc && this.selectedData.cabinet && !this.selectedData.u) {
+        return dcName + cabinetName
+      } else if (this.selectedData.dc && this.selectedData.cabinet && this.selectedData.u) {
+        return dcName + cabinetName + uValues
       }
       return ''
     }
@@ -398,11 +390,11 @@ export default {
         this.$emit('change', n)
       }
     },
-    idcOption: {
+    dcOption: {
       deep: true,
       immediate: true,
       handler (n, o) {
-        this.queryIdcInfos()
+        this.queryDcInfos()
       }
     }
   }
@@ -448,12 +440,12 @@ export default {
     height: 200px;
     width: 100%;
   }
-  .container{
+  .location-container{
     height: 100%;
     width: 100%;
     display: flex;
   }
-  .container .container-item{
+  .location-container .container-item{
     height: 100%;
     flex: 1;
     width: 0;
@@ -469,6 +461,7 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: #606266;
   }
   .container-item-content .selected{
     font-weight: 700;
diff --git a/nezha-fronted/src/components/common/rightBox/userBox.vue b/nezha-fronted/src/components/common/rightBox/userBox.vue
index 3dc609810..46fa13430 100644
--- a/nezha-fronted/src/components/common/rightBox/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/userBox.vue
@@ -311,6 +311,7 @@ export default {
 }
 </script>
 <style lang="scss">
+@import '@/assets/css/common/rightBoxCommon.scss';
   .right-box-account {
     .right-box-sub-title {
       #add-notification {
diff --git a/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
new file mode 100644
index 000000000..fd79a3245
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-table
+    id="assetMetaTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <div v-if="item.prop === 'group'">
+          {{scope.row[item.prop] ? scope.row[item.prop].name : '-'}}
+        </div>
+        <div v-else-if=" item.prop === 'display' ">
+          <el-switch
+            v-model="scope.row[item.prop]"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#ee9d3f"
+            @change="putMeta(scope.row)">
+          </el-switch>
+        </div>
+        <div v-else-if=" item.prop === 'search' ">
+          <el-switch
+            v-model="scope.row[item.prop]"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#ee9d3f"
+            @change="putMeta(scope.row)">
+          </el-switch>
+        </div>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-has="'asset_label_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'roleTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.assetMeta.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.key'),
+          prop: 'metaKey',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.group'),
+          prop: 'group',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.search'),
+          prop: 'search',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.display'),
+          prop: 'display',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.type'),
+          prop: 'type',
+          show: true
+        }, {
+          label: this.$t('config.assetMeta.params'),
+          prop: 'param',
+          show: false
+        }
+      ]
+    }
+  },
+  methods: {
+    putMeta (row) {
+      this.tools.loading = true
+      this.$put('asset/field/meta', row).then(response => {
+        this.prevent_opt.save = false
+        if (response.code === 200) {
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(response.msg)
+        }
+        this.getTableData()
+      })
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/table/asset/assetTable.vue b/nezha-fronted/src/components/common/table/asset/assetTable.vue
new file mode 100644
index 000000000..0c8437268
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -0,0 +1,206 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
+        <template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
+        <template v-else-if="item.prop === 'endpointNum'">
+          <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(`${$t('asset.down')} / ${$t('asset.suspended')} / ${$t('asset.total')}`, true, $event)" @mouseleave="hideTableTooltip">
+            <span class="link" style="padding: 2px 8px" @click="showEndpoint(scope.row)">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
+          </div>
+        </template>
+        <template v-else-if="item.prop === 'alertNum'">
+          <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(scope.row.alertNum+' '+$t('overall.active'), scope.row.alertNum >= 99, $event)" @mouseleave="hideTableTooltip">
+            <span :id="'asset-alerts-'+scope.row.id" class="link" @click="jumpToAlertMsg(scope.row)">
+              {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
+                <sup v-if="scope.row.alertNum > 99" class="linkSup">+</sup>
+              {{' ' + $t('overall.active')}}
+            </span>
+          </div>
+        </template>
+        <template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template>
+        <template v-else-if="item.prop === 'cabinet'">
+          <span v-if="scope.row.cabinet && scope.row.cabinet !== '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span>
+          <span v-else >--</span>
+        </template>
+        <template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
+        <template v-else-if="item.prop === 'parent'">{{scope.row.parent ? scope.row.parent.name : '-'}}</template>
+        <template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
+        <template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '--'}}</template>
+        <template v-else>{{scope.row[item.prop]}}</template>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="tableOperation(['detail', scope.row])"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">Copy</span></el-dropdown-item>
+            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">Connect</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
+export default {
+  name: 'assetTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('overall.id'),
+          prop: 'id',
+          show: false,
+          width: 110
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          width: 110
+        }, {
+          label: 'SN',
+          prop: 'sn',
+          show: true
+        }, {
+          label: this.$t('overall.parent'),
+          prop: 'parent',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.state'),
+          prop: 'state',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.brand'),
+          prop: 'brand',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('asset.model'),
+          prop: 'model',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('overall.dc'),
+          prop: 'dc',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.cabinet'),
+          prop: 'cabinet',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.manageIp'),
+          prop: 'manageIp',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('asset.alertNum'),
+          prop: 'alert',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('asset.endpointNum2'),
+          prop: 'endpointNum',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('asset.purchaseDate'),
+          prop: 'purchaseDate',
+          show: false,
+          width: 110
+        }
+      ]
+    }
+  },
+  methods: {
+    showTableTooltip,
+    hideTableTooltip,
+    messageStyle (title, row) {
+      if (title.prop === 'alertNum') {
+        if (row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+      if (title.label === 'endpointNum') {
+        if (row.state === 3) {
+          return 'suspended'
+        } else {
+          if (row.endpointDownNum > 0) {
+            return 'danger'
+          } else {
+            return 'success'
+          }
+        }
+      }
+      return ''
+    },
+    showEndpoint (asset) {
+      this.bottomBox.asset = Object.assign({}, asset)
+      this.bottomBox.targetTab = 'endpoint'
+      this.bottomBox.showSubList = true
+    },
+    returnCabinet (start, end) { // 返回机柜u位信息
+      if (!start || !end) {
+        return ''
+      }
+      return `[${start}-${end}]`
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
index 76193608d..df4d5d3f2 100644
--- a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
@@ -43,7 +43,7 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" title="Copy" @click="copyRow(scope.row,'exprTemp')"><i class="nz-icon nz-icon-override"></i></button>
+        <button class="table-operation-item" title="Copy" @click="tableOperation('copy', scope.row)"><i class="nz-icon nz-icon-override"></i></button>
         <el-dropdown size="medium" trigger="hover" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 43a992b26..febaa3412 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,281 +1,133 @@
 <template>
-  <div class="asset" ref="asset">
-    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-      <div class="main-modal"></div>
-      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-          <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input></div>
-          <export-excel
-            id="asset-list"
-            export-file-name="asset"
-            export-url="/asset/export"
-            import-url="/asset/import"
-            :params="searchLabel"
-            :permissions="{import: 'asset_import', export: 'asset_export'}"
-            @afterImport="afterTableListChange"
-          >
-            <template slot="optionZone">
-              <button :title="$t('overall.createAsset')" @click.stop="add" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset" v-has="'asset_toAdd'">
-                <i class="nz-icon nz-icon-create-square"></i></button>
-            </template>
-          </export-excel>
-          <button :title="$t('overall.batchEdit')" @click.stop="batchEdit" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-batch-asset" style="margin-left: 15px" v-has="'asset_toBatchEdit'">
-            <i class="nz-icon nz-icon-batch-edit"></i>
-          </button>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="asset" v-has="'asset_delete'" id="asset-list-batch-delete"></delete-button>
-        </div>
-        <div class="pagination-top pagination-top-hide display-none"></div>
-      </div>
-      <!-- 自定义table列 -->
-      <transition name="el-zoom-in-top">
-        <element-set
+  <div>
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.asset"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg">
+      <template v-slot:top-tool-right>
+        <export-excel
           id="asset-list"
-          v-if="tools.showCustomTableTitle"
-          @close="tools.showCustomTableTitle = false"
-          :custom-table-title.sync="tools.customTableTitle"
-          :original-table-title="tableTitle"
-          ref="customTableTitle"
-        ></element-set>
-      </transition>
-      <el-table
-        id="asset-list-table"
-        class="nz-table"
-        :height="mainTableHeight"
-        style="width: 100%;position: relative;z-index: 99"
-        :data="tableData"
-        v-show="bottomBox.mainResizeShow"
-        border
-        v-loading="tools.loading"
-        ref="assetTable"
-        @sort-change="tableDataSort"
-        @row-dblclick="detail"
-        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-      >
-        <el-table-column
-          :resizable="false"
-          type="selection"
-          width="40"
-          align="center">
-        </el-table-column>
-        <el-table-column
-          :resizable="true"
-          v-for="(item, index) in tools.customTableTitle"
-          v-if="item.show"
-          :key="`col_${index}`"
-          :label="item.label"
-          :fixed="item.fixed"
-          :width="item.width"
-          :class-name="item.prop == 'option' ? 'content-right-options' : ''"
-          :sortable="$tableSet.sortableShow(item.prop,'asset')"
-          :prop="$tableSet.propTitle(item.prop,'asset')"
-          :sort-orders="['ascending', 'descending']"
+          :params="searchLabel"
+          :permissions="{import: 'asset_add', export: 'asset_view'}"
+          class="top-tool-export margin-r-10"
+          export-file-name="asset"
+          export-url="/asset/export"
+          import-url="/asset/import"
+          @afterImport="getTableData"
         >
-          <template slot="header">
-            <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span class="tag-mark">&nbsp;[Tag]</span></span>
-            <span v-else>
-              <span>{{item.label}}</span>
-              <div class="col-resize-area"></div>
-            </span>
+          <template slot="optionZone">
+            <button id="asset-create-asset" v-has="'asset_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="add">
+              <i class="nz-icon nz-icon-create-square"></i></button>
           </template>
-          <template slot-scope="scope" :column="item">
-            <div v-if="item.prop=='ID'">
-              <span>{{scope.row.id}}</span>
-            </div>
-            <div v-if="item.prop=='assetType'">
-              <span>{{scope.row.model.type.value}}</span>
-            </div>
-            <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
-            <div v-if="item.prop=='HOST'">
-              <span>{{scope.row.host}}</span>
-            </div>
-            <div v-if="item.prop=='state'">
-              <span v-if="scope.row.state==1">{{ $t('asset.inStock')}}</span>
-              <span v-if="scope.row.state==2">{{ $t('asset.notInStock')}}</span>
-              <span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span>
-            </div>
-          <div @mouseenter="showTableTooltip(formatPingTime(scope.row.pingLastUpdate), true, $event)" @mouseleave="hideTableTooltip" v-if="item.prop == 'pingStatus'">
-            <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
-            <!--<el-popover
-              placement="right"
-              width="200"
-              trigger="hover"
-              :content="formatPingTime(scope.row.pingLastUpdate)">
-              <div slot="reference" style="width: 100%">
-                <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
-              </div>
-            </el-popover>-->
-          </div>
-          <template v-if="item.prop=='Module'">
-            <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(`${$t('asset.down')} / ${$t('asset.suspended')} / ${$t('asset.total')}`, true, $event)" @mouseleave="hideTableTooltip">
-              <span @click="showEndpoint(scope.row)" class="link" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
-            </div>
-            <!--<el-tooltip placement="right" effect="light">
-              <div slot="content">
-                {{$t('asset.down')}} / {{$t('asset.suspended')}} / {{$t('asset.total')}}
-              </div>
-              <span :class="messageStyle(item, scope.row)">
-                <span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
-              </span>
-            </el-tooltip>-->
-          </template>
-          <template v-if="item.prop=='Alert'">
-            <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(scope.row.alertNum+' '+$t('overall.active'), scope.row.alertNum >= 99, $event)" @mouseleave="hideTableTooltip">
-              <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
-                {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
-                  <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
-                {{' ' + $t('overall.active')}}
-              </span>
-            </div>
-            <!--<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
-              <span :class="messageStyle(item, scope.row)">
-                <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
-                  {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
-                    <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
-                  {{' ' + $t('overall.active')}}
-                </span>
-              </span>
-            </el-tooltip>-->
-          </template>
-          <div v-if="item.prop=='dataCenter'">
-            <span  >{{scope.row.idc.name}}</span>
-          </div>
-          <template v-if="item.prop=='cabinet'">
-            <span v-if="scope.row.cabinet && scope.row.cabinet != '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span>
-            <span v-else >--</span>
-          </template>
-          <div v-if="item.prop=='model'">
-            <span>{{scope.row.model.name}}</span>
-          </div>
-          <div v-if="item.prop=='vendor'">
-            <span>{{scope.row.model.vendor.value}}</span>
-          </div>
-          <div v-if="item.prop=='purchaseDate'">
-            <span v-if="scope.row.purchaseDate">{{scope.row.purchaseDate}}</span>
-            <span v-else>==</span>
-          </div>
-          <div v-if="item.prop=='principal'">
-            <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
-          </div>
-          <div v-if="item.prop=='tel'">
-            <span>{{scope.row.idc.tel}}</span>
-          </div>
-          <template v-if="item.prop == 'tags'">
-            <span>{{filterTags(scope)}}</span>
-          </template>
-          <template v-if="item.prop == 'option'">
-            <span :title="$t('overall.view')" @click.stop="detail(scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
-              class="nz-icon nz-icon-view"></i>
-            </span>
-              &nbsp;
-              <span :id="'asset-edit-'+scope.row.id" :title="$t('overall.edit')" @click.stop="edit(scope.row)" class="content-right-option" v-has="'asset_toEdit'"><i
-                class="nz-icon nz-icon-edit"></i>
-            </span>
-              &nbsp;
-              <span :id="'asset-del-'+scope.row.id" :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" v-has="'asset_delete'"><i
-                class="nz-icon nz-icon-delete"></i>
-            </span>
-              &nbsp;
-            <el-dropdown @command="cli" trigger="hover" v-has="'asset_connect'">
-              <span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
-                class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0 || (scope.row.accounts.length==1&&scope.row.accounts.find(t=>t.protocol == 'SNMP'))}"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="[scope.row.id ,scope.row.host, account]" :key="index" v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'">{{account.protocol}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            </template>
-          </template>
-        </el-table-column>
-        <el-table-column width="28" fixed="right" :resizable="false">
-          <template slot="header">
-          <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
-            <i class="nz-icon nz-icon-gear"></i>
-          </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
-      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-        <Pagination :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      </div>
-    </div>
-    <transition name="el-zoom-in-bottom">
-      <bottom-box :detail="bottomBox.assetDetail" :from="$CONSTANTS.fromRoute.asset" :isFullScreen="bottomBox.isFullScreen" :obj="bottomBox.asset" :sub-resize-show="bottomBox.subResizeShow" :targetTab.sync="bottomBox.targetTab" v-if="bottomBox.showSubList"
-                  @reload="getTableData"
-                  @closeSubList="bottomBox.showSubList = false"
-                  @fullScreen="fullScreen"
-                  @exitFullScreen="exitFullScreen"
-                  @listResize="listResize" ></bottom-box>
+        </export-excel>
+        <button id="asset-batch-asset" v-has="'asset_edit'" :title="$t('overall.batchEdit')" class="top-tool-btn margin-r-10" @click.stop="batchEdit">
+          <i class="nz-icon nz-icon-batch-edit"></i>
+        </button>
+        <delete-button id="asset-list-batch-delete" v-has="'asset_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot:default="slotProps">
+        <asset-table
+          ref="dataTable"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @cli="cli"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></asset-table>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <asset-box v-if="rightBox.show"
+                 ref="assetBox"
+                 :brand-data="brandData"
+                 :dc-data="dcData"
+                 :field-group-data="fieldGroupData"
+                 :from="fromRoute.asset"
+                 :obj="object"
+                 :snmp-credential-data="snmpCredentialData"
+                 :state-data="stateData"
+                 :type-data="typeData"
+                 @close="closeRightBox"
+                 @refresh="getTableData"></asset-box>
     </transition>
     <transition name="right-box">
-      <asset-box v-if="rightBox.show" :asset="asset" @refresh="getTableData" ref="assetBox" @close="closeRightBox"></asset-box>
-    </transition>
-    <transition name="right-box">
-      <batch-edit-asset v-if="rightBox.batchShow"  @refresh="getTableData" ref="assetBox" @close="closeRightBox"></batch-edit-asset>
+      <asset-batch-edit-box v-if="rightBox.batchShow"
+                            :field-group-data="fieldGroupData"
+                            :snmp-credential-data="snmpCredentialData"
+                            :state-data="stateData"
+                            @close="closeRightBox"
+                            @refresh="getTableData"></asset-batch-edit-box>
     </transition>
   </div>
 </template>
 
 <script>
-import bus from '../../../libs/bus'
-import exportXLSX from '../../common/exportXLSX'
-import deleteButton from '../../common/deleteButton'
-import { showTableTooltip, hideTableTooltip } from '../../common/js/tools'
+import bus from '@/libs/bus'
+import exportXLSX from '@/components/common/exportXLSX'
+import deleteButton from '@/components/common/deleteButton'
+import assetBox from '@/components/common/rightBox/asset/assetBox'
+import assetBatchEditBox from '@/components/common/rightBox/asset/assetBatchEditBox'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import assetTable from '@/components/common/table/asset/assetTable'
+import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
 
 export default {
   name: 'asset',
   components: {
-    'export-excel': exportXLSX,
-    'delete-button': deleteButton
+    deleteButton,
+    assetBox,
+    nzDataList,
+    assetBatchEditBox,
+    assetTable,
+    'export-excel': exportXLSX
   },
+  mixins: [dataListMixin],
   data () {
     return {
+      url: 'asset/asset',
       // 侧滑
       rightBox: {
-        show: false,
         batchShow: false
       },
-      /* 二级页面相关 */
-      bottomBox: {
-        assetDetail: {}, // asset详情
-        asset: {}, // 告警信息对应的asset对象
-        mainResizeShow: true, // dom高度改变时是否展示|隐藏
-        subResizeShow: true,
-        isFullScreen: false, // 全屏状态
-        showSubList: false, // 是否显示二级列表
-        targetTab: '', // 显示二级列表中的哪个页签
-        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
-      },
-
-      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
-
-      /* 工具参数 */
-      tools: {
-        loading: false, // 是否显示table加载动画
-        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
-        tableHover: false, // 控制滚动条和top按钮同时出现
-        showTopBtn: false, // 显示To top按钮
-        showCustomTableTitle: false, // 自定义列弹框是否显示
-        customTableTitle: [] // 自定义列工具的数据
-      },
-      batchDeleteObjs: [],
-      asset: {},
-      blankAsset: {
+      blankObject: {
         id: '',
+        name: '',
+        pid: '',
         sn: '',
-        host: '',
-        state: 1,
-        purchaseDate: '',
-        idcId: '',
+        manageIp: '',
+        stateId: '',
+        purchaseDate: null,
+        dcId: '',
         cabinetId: '',
+        brandId: '',
+        brand: { id: '', name: '' },
         modelId: '',
-        model: { type: { code: '' } },
-        assetType: '',
-        impi: {
-          host: '',
-          port: ''
-        },
-        tags: [],
+        model: { id: '', name: '' },
+        type: { name: '', id: '' },
+        brandAndModel: [],
+        typeId: '',
+        authProtocolPort: '',
+        authType: '',
+        authUsername: '',
+        authPin: '',
+        authPriKey: '',
+        authUserTip: '',
+        authPinTip: '',
+        fields: [],
         accounts: []
       },
       tableId: 'assetTable', // 需要分页的table的id，用于记录每页数量
@@ -320,170 +172,23 @@ export default {
         }]
       },
 
-      searchLabel: {}, // 搜索参数
-      activeType: 'dataCenter',
-
-      tableTitle: [
-        {
-          label: this.$t('asset.tableTitle.host'),
-          prop: 'HOST',
-          show: true,
-          width: 130,
-          fixed: 'left'
-        },
-        {
-          label: this.$t('asset.tableTitle.id'),
-          prop: 'ID',
-          show: false,
-          allowed: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.assetType'),
-          prop: 'assetType',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.device'),
-          prop: 'SN',
-          show: true
-        }, {
-          label: this.$t('asset.tableTitle.assetState'),
-          prop: 'state',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.assetPing'),
-          prop: 'pingStatus',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.modules'),
-          prop: 'Module',
-          show: true,
-          width: 120
-        }, {
-          label: this.$t('asset.tableTitle.alerts'),
-          prop: 'Alert',
-          show: true,
-          width: 120
-        }, {
-          label: this.$t('asset.tableTitle.dataCenter'),
-          prop: 'dataCenter',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.cabinet'),
-          prop: 'cabinet',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.model'),
-          prop: 'model',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.vendor'),
-          prop: 'vendor',
-          show: true,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.procurementDate'),
-          prop: 'purchaseDate',
-          show: false,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.principal'),
-          prop: 'principal',
-          show: false,
-          width: 110
-        }, {
-          label: this.$t('asset.tableTitle.principalTel'),
-          prop: 'tel',
-          show: false,
-          width: 115
-        }, {
-          label: this.$t('config.account.option'),
-          prop: 'option',
-          show: true,
-          fixed: 'right'
-        }],
-      tableData: [],
-
-      pageObj: {
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0,
-        idcId: '',
-        idcIds: ''
-      },
-      assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
-      tagKeys: [],
-
-      scrollbarWrap: null,
-      delFlag: false
+      brandData: [],
+      modelData: [],
+      stateData: [],
+      typeData: [],
+      dcData: [],
+      snmpCredentialData: [],
+      fieldGroupData: []
     }
   },
-  computed: {
-    headerCurrentDc: function () {
+  /* computed: {
+    headerCurrentDc () {
       return this.$store.state.currentDc
     }
-  },
-  watch: {
-    'bottomBox.showSubList': function (n) {
-      const vm = this
-      this.$bottomBoxWindow.showSubListWatch(vm, n)
-    },
-    'bottomBox.asset': {
-      deep: true,
-      handler (n) {
-        if (n.id) {
-          this.bottomBox.assetDetail = this.convertToDetail(n)
-          if (n.model.id) {
-            n.modelId = n.model.id
-          }
-        }
-      }
-    },
-    'tools.customTableTitle': {
-      deep: true,
-      immediate: true,
-      handler (n, o) {
-        const pingTitle = n.find(item => { return item.prop == 'pingStatus' })
-        if (pingTitle) {
-          this.dispatchEvent('asset-ping-switch-change', pingTitle.show)
-        }
-      }
-    },
-    tableData: {
-      deep: true,
-      handler (n) {
-        if (n.length === 0 && this.pageObj.pageNo > 1) {
-          this.pageNo(this.pageObj.pageNo - 1)
-        }
-
-        if (!this.delFlag) { // 不是删除时回到顶部
-          this.$refs.assetTable.bodyWrapper.scrollTop = 0
-        } else {
-          this.delFlag = false
-        }
-      }
-    }
-  },
+  }, */
   methods: {
     showTableTooltip,
     hideTableTooltip,
-    fullScreen () {
-      const vm = this
-      this.$bottomBoxWindow.fullScreen(vm)
-    },
-    exitFullScreen () {
-      const vm = this
-      this.$bottomBoxWindow.exitFullScreen(vm)
-    },
-    listResize (e) {
-      const vm = this
-      this.$bottomBoxWindow.listResize(vm, e)
-    },
     cli ([id, host, account]) {
       const consoleParam = {
         id: id,
@@ -493,137 +198,84 @@ export default {
       }
       this.$store.commit('addConsole', consoleParam)
     },
-    jumpToAlertMsg (asset) {
-      if (!this.hasButton('asset_alerts_view')) {
-        return
-      }
-      this.bottomBox.targetTab = 'alertMessage'
-      this.bottomBox.asset = JSON.parse(JSON.stringify(asset))
-      this.bottomBox.showSubList = true
-    },
-    checkSearchLabel (n, o) {
-      const nKeys = Object.keys(n)
-      const oKeys = Object.keys(o)
-      if (nKeys.length != oKeys.length) {
-        return true
-      } else {
-        let flag = false
-        nKeys.forEach(key => {
-          n[key] != o[key] && (flag = true)
-        })
-        return flag
-      }
-    },
-    getTableData () {
-      this.searchLabel = Object.assign(this.searchLabel, this.pageObj)
-      delete this.searchLabel.total
-      this.tools.loading = true
-      if (this.searchLabel.tags && this.searchLabel.tags != '') {
-        this.searchLabel.tags = encodeURIComponent(this.searchLabel.tags)
-      }
-      Object.keys(this.searchLabel).forEach(key => {
-        if (!this.searchLabel[key] && this.searchLabel[key] !== 0) {
-          delete this.searchLabel[key]
-        }
-      })
-      this.$get('asset', this.searchLabel).then(response => {
-        this.tools.loading = false
-        if (response.code === 200) {
-          this.tableData = response.data.list
-          this.pageObj.total = response.data.total
-          bus.$emit('asset-property-change')
-
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.assetTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    },
     getUserData () {
       return new Promise(resolve => {
-        this.$get('sys/user/list').then(response => {
+        this.$get('sys/user').then(response => {
           if (response.code === 200) {
             this.userData = response.data.list
           }
-          resolve(this.userData)
+          resolve()
         })
       })
     },
-    messageStyle (title, row) {
-      if (title.label == 'Alerts' || title.label == this.$t('asset.tableTitle.alerts')) {
-        if (row.alertNum > 0) {
-          return 'danger'
-        } else {
-          return 'success'
-        }
-      }
-      if (title.label == 'Module' || title.label == this.$t('asset.tableTitle.modules')) {
-        if (row.state == 3) {
-          return 'suspended'
-        } else {
-          if (row.endpointDownNum > 0) {
-            return 'danger'
-          } else {
-            return 'success'
-          }
-        }
-      }
-      /* if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
-          if (e.row.alertNum > 0) {
-            return 'danger';
-          } else {
-            return 'success';
-          }
-        }
-        if(e.column.label == 'Module' || e.column.label == this.$t("asset.tableTitle.modules")){
-          if (e.row.state == 3) {
-            return 'suspended';
-          } else {
-            if (e.row.endpointDownNum > 0) {
-              return 'danger';
-            } else {
-              return 'success';
-            }
-          }
-        } */
-      return ''
-    },
-    edit (asset) {
-      this.asset = JSON.parse(JSON.stringify(asset))
-      this.rightBox.show = true
-    },
-    detail (asset) {
-      this.bottomBox.asset = JSON.parse(JSON.stringify(asset))
-      this.bottomBox.targetTab = 'panel'
-      this.bottomBox.showSubList = true
-    },
-    del (asset) {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('asset?ids=' + asset.id).then(response => {
+    getStateData () {
+      return new Promise(resolve => {
+        this.$get('asset/stateConf').then(response => {
           if (response.code === 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.delFlag = true
-            this.getTableData()
-          } else {
-            this.$message.error(response.msg)
+            this.stateData = response.data.list
           }
+          resolve()
         })
       })
     },
-    markOptionData (data) {
-      data.forEach(item => {
-        this.$set(item, 'isEdit', false)
-        this.$set(item, 'oldName', item.value)
-        this.$set(item, item.name, false)
-        this.$set(item, item.id, false)
-        this.$set(item, item.id + item.name, false)
+    getTypeData () {
+      return new Promise(resolve => {
+        this.$get('asset/typeConf/tree').then(response => {
+          if (response.code === 200) {
+            this.typeData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getDcData () {
+      return new Promise(resolve => {
+        this.$get('dc', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.dcData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getSnmpCredentialData () {
+      return new Promise(resolve => {
+        this.$get('snmp/credential', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.snmpCredentialData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getFieldGroupData () {
+      return new Promise(resolve => {
+        this.$get('asset/field/group', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.fieldGroupData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getBrandData () {
+      return new Promise(resolve => {
+        this.$get('asset/brand').then(response => {
+          if (response.code === 200) {
+            this.brandData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getModelData (brandId) {
+      return new Promise(resolve => {
+        this.$get('asset/model').then(response => {
+          if (response.code === 200) {
+            this.modelData = response.data.list
+          }
+          resolve()
+        })
       })
     },
     showEndpoint (asset) {
@@ -634,44 +286,19 @@ export default {
       this.bottomBox.targetTab = 'endpoint'
       this.bottomBox.showSubList = true
     },
-    add () {
-      this.asset = this.newAsset()
-      this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          if (this.asset.model && !this.asset.model.type.code) {
-            this.asset.model.type.code = response.data[0].code
-          }
-        }
-      })
-      this.rightBox.show = true
-    },
+
     batchEdit () {
       this.rightBox.batchShow = true
     },
-    newAsset () {
-      return JSON.parse(JSON.stringify(this.blankAsset))
-    },
     closeRightBox (refresh) {
       this.rightBox.show = false
       this.rightBox.batchShow = false
       if (refresh) {
         this.delFlag = true
         this.getTableData()
-        this.loadKeys()
+        // this.loadKeys()
       }
     },
-    afterTableListChange: function () {
-      bus.$emit('asset-list-change')
-    },
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.getTableData()
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      this.getTableData()
-    },
     getPrincipalName (data) {
       for (const item in this.userData) {
         if (this.userData[item].userId === data) {
@@ -679,78 +306,7 @@ export default {
         }
       }
     },
-    returnData (data) {
-      if (data && data !== '--') {
-        return data
-      } else if (data === '--') {
-        return '--'
-      } else {
-        return '--'
-      }
-    },
-    returnCabinet (start, end) { // 返回机柜u位信息
-      if (!start || !end) {
-        return ''
-      }
-      return `[${start}-${end}]`
-    },
-    closeAllPop () {
-      this.$refs.idcConfigBox.forEach((item) => {
-        item.show(false)
-      })
-      this.$refs.cabinetConfigBox.forEach((item) => {
-        item.show(false)
-      })
-    },
-    search (searchObj) {
-      let orderBy = ''
-      if (this.searchLabel.orderBy) {
-        orderBy = this.searchLabel.orderBy
-      }
-      this.searchLabel = {}
-      this.pageObj.pageNo = 1
-      for (const item in searchObj) {
-        if (searchObj[item]) {
-          this.$set(this.searchLabel, item, searchObj[item])
-        }
-      }
-      if (orderBy) {
-        this.$set(this.searchLabel, 'orderBy', orderBy)
-      }
-      if (this.$refs.assetTable && this.$refs.assetTable.bodyWrapper) {
-        this.$refs.assetTable.bodyWrapper.scrollTop = 0
-      }
-      this.getTableData()
-    },
-    convertToDetail (obj) {
-      const detail = JSON.parse(JSON.stringify(obj))
-      detail.state = obj.state == 1 ? this.$t('asset.inStock') : this.$t('asset.notInStock')
-      detail.assetType = obj.model.type.value
-      detail.vendorModel = obj.model.vendor.value + ' ' + obj.model.name
-      detail.dataCenter = obj.idc ? obj.idc.name : ''
-      detail.location = obj.idc ? obj.idc.location : ''
-      detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : ''
-      detail.tel = obj.idc ? obj.idc.tel : ''
-      detail.cabinet = obj.cabinet ? obj.cabinet.name : ''
-      detail.uSize = obj.cabinet ? obj.cabinet.uSize : ''
-      detail.remark = obj.idc ? obj.idc.remark : ''
-      if (obj.accounts && obj.accounts.length > 0) {
-        const account = obj.accounts[0]
-        detail.protocol = account.protocol
-        detail.account = account.user
-        let loginType = ''
-        if (account.authType == 1) {
-          loginType = this.$t('asset.password')
-        } else if (account.authType == 2) {
-          loginType = this.$t('asset.ssh')
-        }
-        detail.loginType = loginType
-        detail.port = account.port
-      }
-
-      return detail
-    },
-    formatPingTime: function (str) {
+    /* formatPingTime (str) {
       if (!str) {
         return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
       }
@@ -764,19 +320,8 @@ export default {
       const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
       const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
       return this.$t('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
-    },
+    }, */
     // 数据排序
-    tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        orderBy = item.prop
-      }
-      if (item.order === 'descending') {
-        orderBy = '-' + item.prop
-      }
-      this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getTableData()
-    },
     initEvent () {
       bus.$on('asset-filter-change', (column, content) => {
         this.pageObj.pageNo = 1
@@ -803,7 +348,7 @@ export default {
         bus.$emit(event, param)
       })
     },
-    loadKeys: function () {
+    loadKeys () {
       this.$get('/asset/tagKey').then(res => {
         if (res.code == 200) {
           this.tagKeys = res.data.list.map(item => {
@@ -812,128 +357,23 @@ export default {
           this.resetTableTitle()
         }
       })
-    },
-    resetTableTitle: function () {
-      const title = this.tools.customTableTitle
-
-      const tableTitle = title.slice(0, this.tableTitle.length)
-
-      const tagTitle = title.slice(this.tableTitle.length, title.length)
-
-      const $self = this
-      const newTags = this.tagKeys.filter(item => { return !tagTitle.find(t => { return item.label == t.label }) })
-      const keepTags = tagTitle.filter(item => { return $self.tagKeys.find(t => { return item.label == t.label }) })
-
-      let result = tableTitle.concat([{ label: 'Tag', show: false, NotSet: true, type: 'title', prop: 'table-tag' }])
-
-      result = result.concat(keepTags).concat(newTags)
-
-      this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
-    },
-    filterTags: function (scope) {
-      const tag = scope.column.label.split(' [Tag]')[0]
-      const tagVals = scope.row.tags
-      if (tagVals) {
-        const showTag = tagVals.find(item => { return item.tag == tag })
-        if (showTag) {
-          return showTag.value
-        }
-      }
-    }
-  },
-  created () {
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
     }
   },
   mounted () {
-    // 初始化表头
-    const tableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
-      : this.tableTitle
-
-    this.tableTitleReset(this.tableTitle, tableTitle)
-
-    if (this.assetPingSwitch == 'off') {
-      this.dispatchEvent('asset-ping-switch-change', false)
-      for (const i in tableTitle) {
-        const label = tableTitle[i]
-        if (label.prop == 'pingStatus') {
-          label.show = false
-          label.NotSet = true
-          break
-        }
-      }
-    } else {
-      for (const i in tableTitle) {
-        const label = tableTitle[i]
-        if (label.prop == 'pingStatus') {
-          label.show = true
-          label.NotSet = false
-          break
-        }
-      }
-    }
-    this.tools.customTableTitle = tableTitle
-
-    this.loadKeys()
-
+    // this.loadKeys()
     // 初始化数据
-    this.getUserData()
-
-    this.pageObj.idcId = this.headerCurrentDc
-
-    this.getTableData()
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
-    }
+    // this.getUserData()
     this.initEvent()
+    this.getBrandData()
+    this.getStateData()
+    this.getTypeData()
+    this.getDcData()
+    this.getSnmpCredentialData()
+    this.getFieldGroupData()
   },
   beforeDestroy () {
     bus.$off('asset-filter-change')
     bus.$off('alert-message-change')
-    if (this.scrollbarWrap) {
-      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
-    }
   }
 }
 </script>
-
-<style scoped lang="scss">
-  .asset {
-    height: 100%;
-  }
-  /deep/ .el-table .cell.el-tooltip{
-    min-width: 88px;
-  }
-  .linkSup{
-    position: absolute;
-    top: -15px;
-    left: 17px;
-  }
-  .link{
-    position: relative;
-  }
-
-  .mark{
-    vertical-align: middle;
-    display: inline-flex;
-  }
-  .tag-header{
-    display: flex; width: 100%; align-items: center; flex-wrap: nowrap;
-    .tag-value{
-      max-width: calc(100% - 40px); min-width: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-    }
-    .tag-mark{
-      color:orange; width: 42px;
-    }
-  }
-  /*/deep/ .sidebar-info-item .el-checkbox__label{*/
-    /*padding-right: 15px;*/
-    /*width: calc(100% - 32px);*/
-  /*}*/
-</style>
diff --git a/nezha-fronted/src/components/page/config/assetMeta.vue b/nezha-fronted/src/components/page/config/assetMeta.vue
index b3b47500c..8c6f6afa0 100644
--- a/nezha-fronted/src/components/page/config/assetMeta.vue
+++ b/nezha-fronted/src/components/page/config/assetMeta.vue
@@ -1,20 +1,19 @@
 <template>
-  <div style="height: 100%">
+  <div>
     <nz-data-list
       ref="dataList"
-      :components="['searchInput', 'elementSet']"
+      :api="url"
+      :from="fromRoute.assetLabel"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.role"
-      :search-msg="searchMsg"
-      :table-id="tableId"
-      :table-title="tableTitle">
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg">
       <template v-slot:top-tool-left>
         <select-group ref="selectGroup" :filter-object="filterGroup" :object-data="groupData" :placement="'bottom-start'"
                       :show-object="showGroup" style="width: 300px;" @del="delGroup" @edit="editGroup" @selectObject="groupChange">
           <template v-slot:header>
             <div class="panel-select-header">
               <el-input id="panel-list-search" v-model="filterGroup" :placeholder="$t('overall.search')" clearable size="mini" style="width: 240px; margin-right: 5px;"></el-input>
-              <span id="panel-list-toadd" v-has="'panel_toAdd'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="addGroup"><i class="nz-icon nz-icon-plus"></i></span>
+              <span id="panel-list-toadd" v-has="'asset_label_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="addGroup"><i class="nz-icon nz-icon-plus"></i></span>
             </div>
           </template>
           <template v-slot:trigger>
@@ -23,94 +22,28 @@
         </select-group>
       </template>
       <template v-slot:top-tool-right>
-        <button id="meta-add-meta" v-has="'expr_temp_save'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-l-20"
+        <button id="meta-add-meta" v-has="'asset_label_add'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">
           <i class="nz-icon nz-icon-create-square"></i>
         </button>
         <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
-                       :api="'asset/field/meta'" v-has="'expr_temp_delete'" id="meta-msg-batch-delete"></delete-button>
+                       id="meta-msg-batch-delete" v-has="'asset_label_delete'" :api="url"></delete-button>
       </template>
       <template v-slot:default="slotProps">
-        <el-table
-          id="role-list-table"
+        <asset-meta-table
           ref="dataTable"
-          v-loading="tools.loading"
-          :data="tableData"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
-          border
-          @header-dragend="dragend"
-          @sort-change="tableDataSort"
-          @selection-change="(selection)=>{batchDeleteObjs=selection}"
-        >
-          <el-table-column
-            :resizable="false"
-            align="center"
-            type="selection"
-            width="55">
-          </el-table-column>
-          <el-table-column
-            v-for="(item, index) in tools.customTableTitle"
-            v-if="item.show"
-            :key="`col-${index}`"
-            :fixed="item.fixed"
-            :label="item.label"
-            :prop="item.prop"
-            :resizable="true"
-            :sort-orders="['ascending', 'descending']"
-            :width="`${item.width}`"
-            class="data-column"
-          >
-            <template slot="header">
-              <span>
-                <span>{{item.label}}</span>
-                <div class="col-resize-area"></div>
-              </span>
-            </template>
-            <template slot-scope="scope" :column="item">
-              <div v-if="item.prop === 'group'">
-                {{scope.row[item.prop] ? scope.row[item.prop].name : '-'}}
-              </div>
-              <div v-else-if=" item.prop === 'display' ">
-                <el-switch
-                  v-model="scope.row[item.prop]"
-                  active-color="#ee9d3f"
-                  :active-value="1"
-                  @change="putMeta(scope.row)"
-                  :inactive-value="0">
-                </el-switch>
-              </div>
-              <div v-else-if=" item.prop === 'search' ">
-                <el-switch
-                  v-model="scope.row[item.prop]"
-                  active-color="#ee9d3f"
-                  :active-value="1"
-                  @change="putMeta(scope.row)"
-                  :inactive-value="0">
-                </el-switch>
-              </div>
-              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
-              <template v-else>-</template>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-            <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
-            <div slot-scope="scope" class="table-operation-items">
-              <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-              <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-                <div class="table-operation-item table-operation-item--more">
-                  <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
-                </div>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item :command="['edit', scope.row]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-                  <el-dropdown-item :command="['delete', scope.row, `asset/field/meta?ids=${scope.row.id}`]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-          </el-table-column>
-        </el-table>
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
+        ></asset-meta-table>
         <!-- 回到table顶部的按钮 -->
         <button v-show="tools.showTopBtn && slotProps.mainResizeShow" id="role-list-totop" :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" class="to-top" @click="toTop(scrollbarWrap)"><i class="nz-icon nz-icon-top"></i></button>
       </template>
@@ -137,62 +70,29 @@ import assetMetaGroup from '@/components/common/rightBox/assetMetaGroup'
 import assetMetaBox from '@/components/common/rightBox/assetMetaBox'
 import selectGroup from '@/components/common/popBox/selectAssetMetaGroup'
 import nzDataList from '@/components/common/table/nzDataList'
-import tableMixin from '@/components/common/mixin/table'
+import dataListMixin from '@/components/common/mixin/dataList'
+import assetMetaTable from '@/components/common/table/asset/assetMetaTable'
 
 export default {
   name: 'assetMeta',
   components: {
     deleteButton,
     assetMetaGroup,
-    assetMetaBox,
     selectGroup,
-    nzDataList
+    nzDataList,
+    assetMetaBox,
+    assetMetaTable
   },
-  mixins: [tableMixin],
+  mixins: [dataListMixin],
   data () {
     return {
+      url: 'asset/field/meta',
       tableId: 'assetMeta',
       // 侧滑
       rightBox: {
         metaShow: false,
         groupShow: false
       },
-      tableTitle: [
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 80
-        }, {
-          label: this.$t('config.assetMeta.name'),
-          prop: 'name',
-          show: true
-        }, {
-          label: this.$t('config.assetMeta.key'),
-          prop: 'metaKey',
-          show: true
-        }, {
-          label: this.$t('config.assetMeta.group'),
-          prop: 'group',
-          show: true
-        }, {
-          label: this.$t('config.assetMeta.search'),
-          prop: 'search',
-          show: true
-        }, {
-          label: this.$t('config.assetMeta.display'),
-          prop: 'display',
-          show: true
-        }, {
-          label: this.$t('config.assetMeta.type'),
-          prop: 'type',
-          show: true
-        }, {
-          label: this.$t('config.assetMeta.params'),
-          prop: 'param',
-          show: false
-        }
-      ],
       groupData: [{
         name: this.$t('config.assetMeta.all'),
         id: -1,
@@ -233,7 +133,6 @@ export default {
         param: {},
         remark: ''
       },
-      object: {},
       blankMetaGroup: {
         id: '',
         name: '',
@@ -266,25 +165,21 @@ export default {
       if (!this.searchLabel.groupId) {
         delete this.searchLabel.groupId
       }
-      this.$get('asset/field/meta', this.searchLabel).then(response => {
+      this.$get(this.url, this.searchLabel).then(response => {
         this.tools.loading = false
         if (response.code == 200) {
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
-          // console.info(this.$refs.dataTable)
           if (!this.scrollbarWrap) {
             this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.dataTable.bodyWrapper
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
               this.toTopBtnHandler(this.scrollbarWrap)
             })
           }
         }
       })
     },
-    afterTableListChange () {
-      this.getTableData()
-    },
     addGroup () {
       this.metaGroup = JSON.parse(JSON.stringify(this.blankMetaGroup))
       this.rightBox.groupShow = true
@@ -330,26 +225,16 @@ export default {
       this.getTableData()
     },
     add () {
-      this.assetMeta = JSON.parse(JSON.stringify(this.blankObject))
+      this.object = JSON.parse(JSON.stringify(this.blankObject))
       this.rightBox.metaShow = true
     },
     edit (row) {
-      this.$get('asset/field/meta/' + row.id).then(res => {
-        this.assetMeta = { ...res.data, param: JSON.parse(res.data.param) }
+      /* this.$get('asset/field/meta/' + row.id).then(res => {
+        this.object = { ...res.data, param: JSON.parse(res.data.param) }
         this.rightBox.metaShow = true
-      })
-    },
-    putMeta (row) {
-      this.tools.loading = true
-      this.$put('asset/field/meta', row).then(response => {
-        this.prevent_opt.save = false
-        if (response.code === 200) {
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.getTableData()
-      })
+      }) */
+      this.object = JSON.parse(JSON.stringify(row))
+      this.rightBox.metaShow = true
     },
     closeRightBox (refresh) {
       this.rightBox.metaShow = false
diff --git a/nezha-fronted/src/components/page/config/exprTemp.vue b/nezha-fronted/src/components/page/config/exprTemp.vue
index 8f9caf505..4bf32c9a7 100644
--- a/nezha-fronted/src/components/page/config/exprTemp.vue
+++ b/nezha-fronted/src/components/page/config/exprTemp.vue
@@ -10,12 +10,11 @@
       <template v-slot:top-tool-right>
         <export-excel
           id="expression-template-list"
-          v-has="'expressionTemplate_add'"
           export-url="expression/tmpl/export"
           import-url="expression/tmpl/import"
           export-file-name="expression-template"
           :params="searchLabel"
-          :permissions="{import: 'asset_import', export: 'asset_export'}"
+          :permissions="{import: 'expressionTemplate_add', export: 'expressionTemplate_view'}"
           @afterImport="getTableData"
           class="top-tool-export margin-r-10"
         >
@@ -39,6 +38,7 @@
           :table-data="tableData"
           @del="del"
           @edit="edit"
+          @copy="(row) => {copyRow(row, 'exprTmpl')}"
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"