diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
index 7e14ba2e3..0360a9848 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -304,7 +304,7 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ],
         authProtocolPort: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          // { required: true, message: this.$t('validate.required'), trigger: 'change' },
           { validator: port, trigger: 'blur' }
         ]
       },
diff --git a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
deleted file mode 100644
index d11de4e44..000000000
--- a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
+++ /dev/null
@@ -1,1138 +0,0 @@
-<template>
-  <div class="right-box right-box-asset" v-clickoutside="{obj:editAsset,func:clickOutside}">
-    <!--顶部按钮-->
-    <!--<div class="right-box-top-btns right-box-form-delete">-->
-    <!--<button v-if="editAsset.id" type="button" @click="del" id="asset-edit-del"-->
-    <!--class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">-->
-    <!--<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
-    <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
-    <!--</button>-->
-    <!--</div>-->
-
-    <div class="right-box-title">{{$t("asset.batchEditAsset")}}</div>
-
-    <div class="right-box-form-box" ref="scrollbar">
-      <el-form ref="assetEditForm" :model="editAsset" label-width="120px" class="right-box-form right-box-form-left"
-               :rules="rules">
-        <!--assets-->
-        <div class="right-box-form-row right-child-boxes">
-          <div class="right-child-box assets-box">
-            <!--begin--标题-->
-            <div class="right-child-box-title">{{$t('asset.asset')}}</div>
-            <!--end--标题-->
-            <!--begin--搜索框-->
-            <div style="float: right;padding: 9px 9px 0 0;">
-              <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search"
-                   style="margin: 0">
-                <button id="search-asset-drop" type="button"
-                        class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend"
-                        @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
-                  <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
-                  <span>
-                    <i v-if="assetSearch.dropdownShow" class="nz-icon nz-icon-caret-up"></i>
-                    <i v-if="!assetSearch.dropdownShow" class="nz-icon nz-icon-caret-bottom"></i>
-                  </span>
-                </button>
-                <el-input style="width: 100px;" @keydown.enter.native="searchAssetKeydown" id="batch-edit-search-input"
-                          class="input-x-mini-24 nz-input-group-middle" placeholder=""
-                          v-model="assetSearch.text"></el-input>
-                <button
-                  type="button"
-                  class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append"
-                  id="search-asset"><i @click="searchAsset" class="nz-icon nz-icon-search"></i></button>
-
-                <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
-                  <div @click="dropdownSelect('Host')" class="endpoint-asset-search-dropdown-item" id="search-asset-ip">
-                    Host
-                  </div>
-                  <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn" >
-                    SN
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!--end--搜索框-->
-
-            <!-- begin--table-->
-            <div class="endpoint-sub-table">
-              <div class="endpoint-sub-table-head">
-                <div class="endpoint-sub-table-col" style="width: 15px;">
-                  <el-checkbox v-model="assetListAll" :indeterminate="assetListHalf" id="batch-edit-select-all"
-                               @change="assetListSelAll"></el-checkbox>
-                </div>
-                <div class="endpoint-sub-table-col">Host</div>
-                <div class="endpoint-sub-table-col">SN</div>
-              </div>
-              <div class="line-100"></div>
-              <div class="endpoint-sub-table-body">
-                <div ref="assetScrollbar" style="height: 100%; overflow: auto;">
-                  <div v-for="(item, index) in assetList" :id="'select-asset-'+item.id" :key="index"
-                       :data="item.id" class="endpoint-sub-table-row">
-                    <div class="endpoint-sub-table-col" style="width: 15px;">
-                      <el-checkbox v-model="item.sel" @change="selectAsset" id="batch-edit-select-one"></el-checkbox>
-                    </div>
-                    <div class="endpoint-sub-table-col" style="width: 50%">{{item.host}}</div>
-                    <el-popover trigger="hover" placement="right-start" :content="item.sn">
-                      <div slot="reference" class="endpoint-sub-table-col" style="width: calc(50% - 55px)">{{item.sn}}
-                      </div>
-                    </el-popover>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="line-100" style="border-color:#dcdfe6"></div>
-            <div>
-              <button type="button" @click="addToEndpointList" id="batch-edit-add-list"
-                      class="nz-btn nz-btn-size-small-new nz-btn-style-light-new endpoints-clear-btn"
-              style="margin-top: 3px;">
-                {{$t('overall.addAssetList')}}
-              </button>
-              <span style="display: inline-block; font-size: 14px; float: right;padding-right: 15px;margin-top: 3px;">All: {{this.assetList.length}}</span>
-            </div>
-            <!--end--table-->
-          </div>
-          <!--右侧endpoint列表-->
-          <div class="right-child-box endpoints-box endpoints-box-snmp">
-            <div class="endpoints-box-module-info">
-              <div class="title">{{$t('asset.selectAsset')}}</div>
-            </div>
-            <!--endpoints-->
-            <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
-              <el-table
-                :data="assetSelList"
-                ref="endpointTable"
-                style="width: 100%;border-radius: 4px;"
-                height="calc(100% - 36px)"
-                :row-class-name="setRowIndex"
-                empty-text=" ">
-                <el-table-column
-                  type="selection"
-                  width="25"
-                  style="padding: 0 1px;">
-                </el-table-column>
-                <el-table-column
-                  label-class-name="endpoints-box-endpoints-title"
-                  v-for="(title, index) in endpointTableTitle"
-                  v-if="title.show"
-                  :width="title.width"
-                  :key="`col-${index}`"
-                  :label="title.label"
-                >
-                  <template slot-scope="scope" :column="title">
-                     <span v-if="title.prop == 'host'">
-                      <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
-                      <span @mousedown.stop v-else>
-                        <el-form-item :prop="'assetSelList[' + scope.row.index + '].host'"
-                                      :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
-                        </el-form-item>
-                      </span>
-                    </span>
-                    <span v-if="title.prop == 'sn'">
-                     <el-popover trigger="hover" placement="right-start" :content="scope.row.sn">
-                      <div slot="reference"
-                           style="width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"> {{scope.row.sn}}</div>
-                    </el-popover></span>
-                  </template>
-                </el-table-column>
-                <!--<el-table-column label="" width="56">-->
-                <!--<template slot-scope="scope" :column="title">-->
-                <!--<div>-->
-                <!--<span :id="'ep-asset-toedit-'+scope.row.assetId" v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>-->
-                <!--<span :id="'ep-asset-edit-'+scope.row.assetId" v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="nz-icon nz-icon-check"></i></span>-->
-                <!--&lt;!&ndash;<span :id="'ep-asset-remove-'+scope.row.assetId" class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-shanchu1"></i></span>&ndash;&gt;-->
-                <!--</div>-->
-                <!--</template>-->
-                <!--</el-table-column>-->
-              </el-table>
-              <div class="el-form-item__error"
-                   :style="{opacity: endpointTouch && this.assetSelList.length == 0 ? '1' : '0'}"
-                   style="left: unset; transition: all .2s">{{$t('validate.required')}}
-              </div>
-              <div>
-                <button id="clear-select-asset" type="button" @click="clearSelection"
-                        class="nz-btn nz-btn-size-small-new nz-btn-style-light-new endpoints-clear-btn">
-                  {{$t('overall.clear')}}
-                </button>
-                <span
-                  style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.assetSelList.length}}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!--tag-->
-        <div class="right-box-sub-title">{{$t('overall.tag')}}
-          <div class="right-box-form-btns">
-            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-            <button id="module-add-param" type="button" @click="addTag">
-           <span class="create-square-box">
-              <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
-            </span>
-            </button>
-          </div>
-        </div>
-        <div class="right-box-line"></div>
-        <el-form-item :label-width="'0px'">
-        <div class="tag-edit-box">
-          <div class="tag-edit-box-head">
-            <div class="tag-edit-tag">Tag</div>
-            <div class="tag-edit-value">Value</div>
-            <div class="tag-edit-action">Action</div>
-          </div>
-          <div ref="tagEditBoxScrollbar" style="height: calc(100% - 32px); overflow: auto;" id="batch-edit-tags-box">
-            <div v-for="(item, index) in editAsset.tags" :key="index" class="tag-edit-box-body">
-              <el-form-item class="tag-edit tag-edit-tag" :label-width="'0px'"
-                            :rules="{required: true, message: $t('validate.required'), trigger: 'change'}"
-                            :prop="'tags.' + index + '.tag'">
-                <el-autocomplete placeholder="tag" size="mini" v-model="item.tag" :fetch-suggestions="filterKey"
-                                 @blur="loadValues(item)" @select="loadValues"
-                                 popper-class="no-style-class"></el-autocomplete>
-              </el-form-item>
-              <el-form-item class="tag-edit tag-edit-value" :label-width="'0px'"
-                            :rules="{required: true, message: $t('validate.required'), trigger: 'change'}"
-                            :prop="'tags.' + index + '.value'">
-                <el-autocomplete placeholder="value" size="mini" v-model="item.value" :fetch-suggestions="filterValue"
-                                 popper-class="no-style-class"></el-autocomplete>
-              </el-form-item>
-              <div class="param-box-row-symbol tag-edit-action" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i
-                class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
-            </div>
-          </div>
-        </div>
-        </el-form-item>
-        <!--<div class="right-box-sub-title">{{$t('asset.location')}}</div>-->
-        <!--<div class="right-box-line"></div>-->
-        <!------------------------------------------IDC---------------------------------------------->
-        <!--cli-->
-        <div class="right-box-sub-title">{{$t('config.account.account')}}
-          <el-popover placement="right" width="70" trigger="click" :disabled="editAsset.accounts.length == 3"
-                      v-model="showAccountOp" popper-class="no-style-class">
-            <button slot="reference" id="add-type" type="button" class="float-right"
-                    :class="{'nz-btn-disabled': editAsset.accounts.length == 3}">
-              <span><i class="nz-icon nz-icon-create-square"></i></span>
-            </button>
-            <ul class="el-select-dropdown__list" >
-              <li @click="addAccount(type)" v-for="(type, index) in selectableAccountTypes" :key="index" :id="'batch-edit-account-'+type"
-                  class="el-select-dropdown__item"><span>{{type}}</span></li>
-            </ul>
-          </el-popover>
-        </div>
-        <div class="right-box-line"></div>
-        <div class="nz-tab" style="padding-left: 70px;">
-          <div class="nz-tab-item-box" v-for="(account, index) in editAsset.accounts" :key="index"
-               @click="changeProtocolType(account.protocol)" :id="`account-login-type-${index}`">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active': accountType == account.protocol}"
-                 style="position: relative;">
-              <span>{{account.protocol}}</span>
-              <transition name="el-zoom-in-top">
-                <div v-if="errorProtocol.indexOf(account.protocol) > -1" class="nz-tab-error el-form-item__error">
-                  Required
-                </div>
-              </transition>
-            </div>&nbsp;
-            <span class="nz-tab-item-close" @click.stop="removeAccount(index)"><i
-              class="nz-icon nz-icon-circle-close"></i></span>
-          </div>
-        </div>
-        <account-config-box v-for="(account,index) in editAsset.accounts" :account="account"
-                            v-show="account.protocol == accountType" :key="index" ref="accountConfigBox"
-                            @setValidateResult="setAccountValidResult"
-                            @protocol-type-change="protocolTypeChange"></account-config-box>
-      </el-form>
-    </div>
-
-    <!--底部按钮-->
-    <div class="right-box__footer">
-      <button v-cancel="{obj:editAsset,func:esc}" class="footer__btn footer__btn--light" id="asset-edit-cancel">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn" id="asset-edit-save">
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import accountConfig from '../../page/asset/accountConfig'
-import { host, port } from '../js/validate'
-
-export default {
-  name: 'batchEditAsset',
-  components: {
-    'account-config-box': accountConfig
-  },
-  watch: {
-    assetSelList (n) {
-      this.endpoint.assetSelList = n
-      if (n.length > 0) {
-        this.paramBorderColor = '#dcdfe6'
-      } else {
-        this.paramBorderColor = '#F56C6C'
-      }
-    }
-  },
-  data () {
-    return {
-      editAsset: {
-        assetIds: [],
-        tags: [],
-        accounts: []
-      },
-      assetSelList: [],
-      assetList: [],
-      assetListAll: false,
-      assetListHalf: false,
-      assetSearch: { host: '', sn: '', text: '', label: 'Host', dropdownShow: false }, // 侧滑框中asset的搜索相关
-      assetPageObj: { pageNo: 1, pageSize: -1 },
-      endpointTouch: false,
-      paramBorderColor: '#dcdfe6',
-      endpointTableTitle: [
-        {
-          label: this.$t('project.endpoint.asset'),
-          prop: 'asset',
-          width: 121,
-          show: false
-        }, {
-          label: this.$t('project.endpoint.host'),
-          prop: 'host',
-          width: 121,
-          show: true
-        }, {
-          label: 'SN',
-          prop: 'sn',
-          show: true
-        }, {
-          label: this.$t('project.endpoint.port'),
-          prop: 'port',
-          width: 54,
-          show: false
-        }, {
-          label: this.$t('project.endpoint.param'),
-          prop: 'param',
-          width: 90,
-          show: false
-        }, {
-          label: this.$t('project.endpoint.path'),
-          prop: 'path',
-          width: 66,
-          show: false
-        }
-      ],
-      endpoint: { projectId: '', moduleId: '', assetSelList: [] },
-      rightBox: { model: { show: false } },
-      modelData: [],
-      dcData: [],
-      assetTypeData: [],
-      cabinetData: [],
-      vendorAndModelOptionData: [], // 厂商型号下拉框选择数据
-
-      showAccountOp: false,
-      errorProtocol: [], // 校验不通过的account
-      selectableAccountTypes: ['SSH', 'TELNET', 'SNMP'],
-
-      modelSize: 1,
-      locationInfo: null,
-
-      accountType: '',
-      model: {},
-      blankModel: {
-        id: '',
-        name: '',
-        vendor: { id: '', value: '', code: '', type: '' },
-        type: { id: '', value: '', code: '', type: '' },
-        assetStat: { total: '', inStock: '', outStock: '' },
-        remark: '',
-        vendorCode: '',
-        typeCode: ''
-      },
-      userData: [], // 用户（人）信息
-      cabinetSelectedData: {
-        name: '',
-        uSize: 0,
-        remark: '',
-        idcId: ''
-      },
-      rules: {
-        sn: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        host: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: host, trigger: 'blur' }
-        ],
-        modelId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'model.type.code': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        idcId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'impi.host': [
-          { validator: host, trigger: 'blur' }
-        ],
-        'impi.port': [
-          { 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' }
-        ],
-        idcId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
-      formData: null,
-      accountValidResult: true,
-      changeProtocolSwitch: true,
-      exporterDisableSwitch: false,
-      tagKeys: [],
-      tagValues: [],
-      tagValuesCache: new Map()
-    }
-  },
-  methods: {
-    clickOutside () {
-      this.esc(false)
-    },
-    /* 关闭弹框 */
-    esc (refresh) {
-      this.prevent_opt.save = false
-      this.$emit('close', refresh)
-    },
-    modelReload () {
-
-    },
-    // 获取endpoint弹框中的asset子弹框里asset列表数据
-    getAssetList () {
-      this.$get('asset', this.assetPageObj).then(response => {
-        if (response.code === 200) {
-          const respData = response.data.list
-          for (let i = 0; i < respData.length; i++) {
-            respData[i].sel = false
-            for (let j = 0; j < this.assetSelList.length; j++) {
-              if (respData[i].id == this.assetSelList[j].id) {
-                respData.splice(i, 1)
-                i--
-                break
-              }
-            }
-          }
-          this.assetList = response.data.list
-        }
-      })
-    },
-    // 回车搜索searchAsset
-    searchAssetKeydown (e) {
-      e = e || window.event
-      const keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode
-      if (keyCode === 13) {
-        this.searchAsset()
-      }
-    },
-    // endpoint弹框中的asset子弹框搜索
-    searchAsset () {
-      if (this.assetSearch.label == 'Host') {
-        this.assetSearch.host = this.assetSearch.text
-        this.assetSearch.sn = ''
-      } else if (this.assetSearch.label == 'SN') {
-        this.assetSearch.sn = this.assetSearch.text
-        this.assetSearch.host = ''
-      }
-      this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
-      this.getAssetList()
-    },
-    // endpoint弹框的asset子弹框顶部搜索条件选中事件
-    dropdownSelect (label) {
-      this.assetSearch.label = label
-      this.assetSearch.dropdownShow = false
-    },
-    // endpoint弹框中的asset子弹框里asset选择事件
-    selectAsset () {
-      this.$nextTick(() => {
-        let index = 0
-        this.assetList.forEach(item => {
-          if (item.sel) {
-            index++
-          }
-        })
-        if (index == 0) {
-          this.assetListAll = false
-          this.assetListHalf = false
-        } else if (index < this.assetList.length) {
-          this.assetListAll = true
-          this.assetListHalf = true
-        } else {
-          this.assetListAll = true
-          this.assetListHalf = false
-        }
-      })
-    },
-    addToEndpointList () {
-      const arr = []
-      this.assetListAll = false
-      this.assetListHalf = false
-      this.endpointTouch = true
-      this.assetList = this.assetList.filter(item => {
-        const flag = item.sel
-        if (flag) {
-          item.sel = false
-          arr.push(item)
-        }
-        return !flag
-      })
-      this.assetSelList = this.assetSelList.concat(arr)
-    },
-    assetListSelAll (flag) {
-      if (flag) {
-        this.assetListHalf = false
-        this.assetList.forEach(item => {
-          item.sel = flag
-        })
-      } else if (!flag && !this.assetListHalf) {
-        this.assetList.forEach(item => {
-          item.sel = flag
-        })
-      } else if (!flag && this.assetListHalf) {
-        this.assetListHalf = false
-        this.assetListAll = true
-        this.assetList.forEach(item => {
-          item.sel = !flag
-        })
-      }
-    },
-    setRowIndex ({ row, rowIndex }) {
-      row.index = rowIndex
-    },
-    // 清空勾选的endpoint
-    clearSelection () {
-      const selections = this.$refs.endpointTable.selection
-      if (selections && selections.length > 0) {
-        for (let i = 0; i < selections.length; i++) {
-          this.removeEndpoint(selections[i])
-        }
-      }
-    },
-    // 移除endpoint
-    removeEndpoint (endpoint) {
-      endpoint.isEdit = false
-      for (let i = 0; i < this.assetSelList.length; i++) {
-        if (this.assetSelList[i].id == endpoint.id) {
-          this.assetSelList.splice(i, 1)
-          this.assetList.unshift(endpoint)
-          i--
-          break
-        }
-      }
-    },
-    // 组织符合cascader的数据格式
-    addTag () {
-      !this.editAsset.tags && (this.$set(this.editAsset, 'tags', []))
-      this.editAsset.tags.push({ tag: '', value: '' })
-    },
-    addAccount (type) {
-      if (type == 'SSH') {
-        this.editAsset.accounts.push({
-          authType: 1,
-          protocol: 'SSH',
-          port: 22,
-          params: {
-            user: '',
-            method: 'pin',
-            pin: '',
-            key: '',
-            pinKey: ''
-          }
-        })
-      } else if (type == 'TELNET') {
-        this.editAsset.accounts.push({
-          protocol: 'TELNET',
-          port: 23,
-          params: {
-            user: '',
-            pin: '',
-            userTip: '',
-            pinTip: '',
-            reloginTip: ''
-          }
-        })
-      } else if (type == 'SNMP') {
-        this.editAsset.accounts.push({
-          protocol: 'SNMP',
-          port: 161,
-          params: {
-            version: 2,
-            community: 'public',
-            securityName: '',
-            securityLevel: '',
-            pin: '',
-            privPin: '',
-            authProtocol: '',
-            privProtocol: '',
-            contextName: ''
-          }
-        })
-      }
-      this.accountType = type
-      this.showAccountOp = false
-      this.$nextTick(() => {
-        const sbWrap = this.$refs.scrollbar.$refs.wrap
-        sbWrap.scrollTop = sbWrap.scrollHeight
-      })
-    },
-    removeAccount (index) {
-      this.editAsset.accounts.splice(index, 1)
-      if (this.editAsset.accounts.length > 0) {
-        this.accountType = this.editAsset.accounts[0].protocol
-      } else {
-        this.accountType = ''
-      }
-    },
-    removeTag (index) {
-      this.editAsset.tags.splice(index, 1)
-    },
-    getUserData () {
-      return new Promise(resolve => {
-        this.$get('sys/user/list').then(response => {
-          if (response.code === 200) {
-            this.userData = response.data.list
-          }
-          resolve(this.userData)
-        })
-      })
-    },
-    setAccountValidResult (result, protocol) {
-      this.accountValidResult = result
-      const index = this.errorProtocol.indexOf(protocol)
-      if (result) {
-        index != -1 && this.errorProtocol.splice(index, 1)
-      } else {
-        index == -1 && this.errorProtocol.push(protocol)
-      }
-    },
-    changeProtocolType (type) {
-      this.accountType = type
-      this.$nextTick(() => {
-        const sbWrap = this.$refs.scrollbar.$refs.wrap
-        sbWrap.scrollTop = sbWrap.scrollHeight
-      })
-    },
-    save () {
-      if (this.prevent_opt.save) { return } ;
-      if (this.locationInfo) {
-        if (this.locationInfo.idc) {
-          this.editAsset.idcId = this.locationInfo.idc.id
-        }
-        if (this.locationInfo.cabinet) {
-          this.editAsset.cabinetId = this.locationInfo.cabinet.id
-        } else {
-          this.editAsset.cabinetId = null
-        }
-        if (this.locationInfo.u && this.locationInfo.u.length > 0) {
-          this.editAsset.cabinetStart = this.locationInfo.u[0]
-          this.editAsset.cabinetEnd = this.locationInfo.u[1]
-        } else {
-          this.editAsset.cabinetStart = null
-          this.editAsset.cabinetEnd = null
-        }
-      }
-      this.endpointTouch = true
-      if (this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
-        this.$refs.accountConfigBox.forEach(box => {
-          box.validateAccount()
-        })
-      }
-      this.$refs.assetEditForm.validate((valid) => {
-        if (valid && this.accountValidResult) {
-          if (this.assetSelList.length === 0) {
-            return false
-          }
-          this.assetSelList.forEach((item) => {
-            this.editAsset.assetIds.push(item.id)
-          })
-          this.prevent_opt.save = true
-          this.$put('/asset/batch', 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
-        }
-      })
-    },
-    protocolTypeChange (protocol) {
-      if (protocol == 'TELNET') {
-        this.exporterDisableSwitch = true
-      } else {
-        this.exporterDisableSwitch = false
-      }
-    },
-    loadValues: function (tag) {
-      const tagVal = tag.tag && tag.tag != '' ? tag.tag : tag.value
-      if (!tagVal || tagVal == '') {
-        this.tagValues = []
-        return
-      }
-
-      let value = this.tagValuesCache.get(tagVal)
-      if (!value) {
-        value = []
-        this.$get('/asset/tagValue', { key: encodeURIComponent(tagVal) }).then(res => {
-          if (res.code == 200) {
-            value = res.data.list.map(item => {
-              return { value: item }
-            })
-
-            this.tagValues = Object.assign([], value)
-            this.tagValuesCache.set(tag.tag, Object.assign([], value))
-          }
-        })
-      } else {
-        this.tagValues = Object.assign([], value)
-      }
-    },
-    filterKey: function (input, callback) {
-      if (!input || input == '') {
-        callback(this.tagKeys)
-      } else {
-        const result = this.tagKeys.filter(item => {
-          return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1
-        })
-        callback(result)
-      }
-    },
-    filterValue: function (input, callback) {
-      if (!input || input == '') {
-        callback(this.tagValues)
-      } else {
-        const result = this.tagValues.filter(item => {
-          return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1
-        })
-        callback(result)
-      }
-    }
-  },
-  mounted () {
-    this.getUserData()
-    this.getAssetList()
-    this.showAccountOp = false
-  }
-}
-</script>
-<style>
-  .location-selector {
-    width: 512px;
-  }
-
-  .location-selector .el-select-dropdown__item {
-    position: relative;
-  }
-
-  .location-selector .el-cascader-node__prefix {
-    display: none !important;
-  }
-
-  .cabinet-u-label .el-checkbox__original:checked + span {
-    background-color: orange;
-  }
-
-  .cabinet-u-label .el-checkbox__original:checked + span:after {
-    -webkit-transform: rotate(45deg) scaleY(1);
-    transform: rotate(45deg) scaleY(1);
-  }
-
-  .cabinet-u-label .is-disabled {
-    cursor: not-allowed;
-    border-color: #C0C4CC;
-  }
-
-  .cabinet-u-label .is-disabled-bg {
-    background-color: #F2F6FC !important;
-  }
-
-  .cabinet-u-label .is-disabled-check:after {
-    border-color: #C0C4CC !important;
-  }
-
-  .endpoints-box-endpoints-title {
-    color: black;
-    font-weight: 400;
-  }
-
-  .endpoints-box-endpoints .el-table td, .endpoints-box-endpoints .el-table th {
-    padding: 5px 0 !important;
-  }
-
-  .endpoints-box-endpoints .cell {
-    padding: 0 2px 0 10px;
-  }
-
-  .endpoints-box-endpoints .el-table .el-table__row td {
-    padding: 5px 0;
-  }
-
-  .module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner,
-  .endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner {
-    cursor: pointer;
-    background-color: white;
-    border-color: #DCDFE6;
-    color: #606266;
-    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
-  }
-
-  .module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover,
-  .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
-    border-color: #c0c4cc;
-  }
-
-  .endpoints-box-endpoints .el-form-item {
-    margin-bottom: 0;
-  }
-
-  .endpoints-box-endpoints .el-form-item.is-error {
-    margin-bottom: 22px;
-  }
-</style>
-<style scoped>
-  #module-add-param, #add-type {
-    border: none;
-    cursor: pointer;
-    outline: none;
-    margin-right: 5px;
-
-  }
-
-  .nz-icon.nz-icon-shanchu1 {
-    font-size: 14px;
-  }
-
-  /* start--param*/
-  .param-btn {
-    float: right;
-    height: 27px;
-    margin-top: -3px;
-  }
-
-  .param-btn-active {
-    background-color: #656565;
-    color: white;
-    border: 1px solid #656565;
-  }
-
-  .param-btn-active:hover, .param-btn-active:focus {
-    background-color: #656565;
-    color: white;
-  }
-
-  .param-btn-clear {
-    background-color: #D4D4D4;
-    border: 1px solid #D4D4D4;
-    color: white;
-  }
-
-  .param-btn-clear:hover, .param-btn-clear:focus {
-    background-color: #D4D4D4;
-    color: white;
-  }
-
-  .param-box {
-    height: 200px;
-    overflow: auto;
-    border: none;
-  }
-
-  .param-box-row {
-    padding: 7px 10px 0 10px;
-    position: relative;
-  }
-
-  .param-box-row:last-of-type {
-    padding-bottom: 7px;
-  }
-
-  .param-box-row-key, .param-box-row-value {
-    display: inline-block;
-    width: 50px;
-  }
-
-  .param-box-row-eq {
-    display: inline-block;
-    width: 14px;
-    text-align: center;
-    height: 22px;
-    line-height: 22px;
-    color: #c4c7cF;
-  }
-
-  /* end--param*/
-
-  /* begin--小盒子*/
-  .right-child-boxes {
-    height: 400px;
-    position: relative;
-    display: flex;
-    width: 100%;
-  }
-
-  .endpoint-to-right-symbol {
-    position: absolute;
-    top: calc(50% - 30px);
-    left: 274px;
-    cursor: pointer;
-    font-size: 18px;
-  }
-
-  .right-child-box {
-    height: 100%;
-  }
-
-  .assets-box {
-    border: 1px solid #DCDFE6;
-    border-radius: 4px;
-    width: 395px;
-    height: calc(100% - 22px);
-  }
-
-  .endpoints-box {
-    margin: 0 0 0 20px;
-    width: 540px;
-  }
-
-  .endpoints-box.endpoints-box-snmp {
-    width: 400px;
-  }
-
-  .right-child-box .el-input-group {
-    width: 187px;
-    float: right;
-    margin: 7px 5px 0 0;
-  }
-
-  .right-child-box .module-info .el-input {
-    display: inline-block;
-  }
-
-  .right-child-box .module-info {
-    display: inline-block;
-    height: 22px;
-    vertical-align: middle;
-    position: absolute;
-    top: 5px;
-  }
-
-  .right-child-box-title {
-    padding: 9px 0 0 9px;
-    display: inline-block;
-  }
-
-  .endpoints-box-module-info {
-    background: #eeeeee;
-    width: 100%;
-    height: 33px;
-    position: relative;
-  }
-
-  .endpoints-box-module-info .title {
-    line-height: 33px;
-    color: #5e5e5e;
-    padding-left: 5px;
-    display: inline-block;
-  }
-
-  .module-info-port {
-    width: 53px;
-    right: 209px;
-  }
-
-  .module-info-port-snmp {
-    right: 50px;
-  }
-
-  .module-info-param {
-    width: 89px;
-    right: 116px;
-  }
-
-  .module-info-path {
-    width: 70px;
-    right: 42px;
-  }
-
-  .endpoint-info-param {
-    width: 80px;
-  }
-
-  .right-child-box .module-info-cover {
-    right: 4px;
-    padding: 0px 6px;
-    margin-right: 5px;
-  }
-
-  .endpoints-box-endpoints {
-    border-radius: 4px;
-    border: 1px solid #dcdfe6;
-    height: calc(100% - 54px);
-    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
-    position: relative;
-  }
-
-  .endpoint-param-pop {
-    max-height: 200px;
-    overflow: auto;
-  }
-
-  /* end--小盒子*/
-
-  /* begin--子弹框*/
-  .right-sub-box {
-    width: 170px;
-    height: 225px;
-    position: fixed;
-    z-index: 2;
-    padding: 0;
-  }
-
-  /* begin--搜索框*/
-  .endpoint-asset-search {
-    position: relative;
-    margin-left: 44px;
-  }
-
-  .endpoint-asset-search button {
-    height: 24px !important;
-  }
-
-  .endpoint-asset-search-dropdown {
-    position: absolute;
-    top: 25px;
-    background-color: #444;
-    border-radius: 4px;
-    width: 44px;
-    left: 0;
-  }
-
-  .endpoint-asset-search-dropdown-item {
-    text-align: center;
-    line-height: 22px;
-    height: 22px;
-    cursor: default;
-    color: white;
-    font-size: 12px;
-  }
-
-  .endpoint-asset-label-txt {
-    display: inline-block;
-    min-width: 19px;
-    text-align: center;
-  }
-
-  .endpoint-asset-search-dropdown-item:first-of-type {
-    border-radius: 4px 4px 0 0;
-  }
-
-  .endpoint-asset-search-dropdown-item:last-of-type {
-    border-radius: 0 0 4px 4px;
-  }
-
-  .endpoint-asset-search-dropdown-item:hover {
-    background-color: #222;
-    color: #ff9900;
-  }
-
-  .endpoint-asset-search-input {
-    display: inline-block;
-    width: 100px;
-    vertical-align: top;
-  }
-
-  /* end--搜索框*/
-
-  /* begin--table*/
-  .endpoint-sub-table {
-    padding-top: 5px;
-    height: calc(100% - 72px);
-  }
-
-  .line-100 {
-    margin-bottom: 3px;
-  }
-
-  .endpoint-sub-table-head {
-    line-height: 28px;
-    height: 30px;
-  }
-
-  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
-    line-height: 28px;
-    height: 30px;
-    color: #656565;
-    position: relative;
-  }
-
-  .endpoint-sub-table-row:hover {
-    background-color: #dadada;
-    cursor: default;
-  }
-
-  .endpoint-sub-table-row-active {
-    background-color: #dadada;
-  }
-
-  .endpoint-sub-table-row-selected {
-    background-color: #656565;
-    color: white;
-  }
-
-  .endpoint-sub-table-col {
-    display: inline-block;
-    width: calc(50% - 28px);
-    padding-left: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .endpoint-sub-table-paginate-all {
-    position: absolute;
-    left: 10px;
-    bottom: 17px;
-    color: #5a5a5a;
-  }
-
-  .endpoint-sub-table-body {
-    font-size: 15px;
-    position: relative;
-    overflow: auto;
-    height: calc(100% - 37px);
-    width: 390px;
-  }
-
-  .endpoint-sub-table-body-dialog {
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.7);
-    position: absolute;
-  }
-
-  .endpoints-clear-btn {
-    margin: 6px 0 0 7px;
-  }
-  /deep/.el-table td{
-    padding: 5px 0;
-  }
-  /* end--table*/
-
-  /* end--子弹框*/
-</style>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
deleted file mode 100644
index fbb5c2d8d..000000000
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ /dev/null
@@ -1,612 +0,0 @@
-<template>
-  <div class="right-box right-box-edit-endpoint" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="edit-ep-del" type="button" v-has="['project_endpoint_delete', 'asset_endpoint_delete']" v-if="editEndpoint.id">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-      </button>
-    </div>
-    <!-- end--顶部按钮-->
-
-    <!-- begin--标题-->
-    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") }}</div>
-    <!-- end--标题-->
-
-    <!-- begin--表单-->
-    <div class="right-box-form-box">
-      <el-form class="right-box-form  right-box-form-left" :model="editEndpoint" label-position = "top" label-width="120px" :rules="rules" ref="endpointForm">
-        <!--project-->
-        <el-form-item :label="$t('project.project.projectName')" prop="project.id">
-          <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small" id="edit-endpoint-input-project">
-            <el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <!--module-->
-        <el-form-item :label="$t('project.module.module')" prop="module.id">
-          <el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small" id="edit-endpoint-input-project">
-            <el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <!--asset-->
-        <el-form-item :label="$t('asset.asset')" prop="assetId">
-          <el-autocomplete
-            id="edit-endpoint-input-project"
-            :fetch-suggestions="assetSuggestion"
-            v-model.trim="editEndpoint.asset.host"
-            placeholder=""
-            @select="selectAsset"
-            @change.native="inputAsset"
-            size="small"
-            :disabled="true"
-            value-key="host"
-            popper-class="no-style-class"
-            style="width: 100%;"
-          >
-          </el-autocomplete>
-        </el-form-item>
-        <!--host-->
-        <el-form-item :label="$t('project.endpoint.host')" prop="host">
-          <el-input placeholder="" v-model="editEndpoint.host" size="small" id="edit-endpoint-input-host"></el-input>
-        </el-form-item>
-        <!--port-->
-        <el-form-item :label="$t('project.endpoint.port')" prop="port">
-          <el-input placeholder="" v-model="editEndpoint.port" size="small" id="edit-endpoint-input-port"></el-input>
-        </el-form-item>
-        <!--path-->
-        <el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
-          <el-input placeholder="" v-model="editEndpoint.path" size="small" id="edit-endpoint-input-path"></el-input>
-        </el-form-item>
-        <!--param-->
-        <el-form-item class="right-box-form-param" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
-          <template slot="label">
-            <span>{{$t('project.endpoint.param')}}</span>
-          </template>
-          <div style="text-align: right">
-            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-            <!--<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
-              <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
-            <!--</button>-->
-            <span id="edit-add-param" @click="addParam" class="right-box-form-add">
-              <i style="" class="nz-icon nz-icon-create-square"></i>
-            </span>
-          </div>
-          <div class="param-box param-box-module">
-            <div style="height: 100%; overflow: auto" id="edit-endpoint-params">
-              <div v-for="(item, index) in editEndpoint.paramObj" :key="index" class="param-box-row">
-                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                </el-form-item>
-                <span class="param-box-row-eq">=</span>
-                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                </el-form-item>
-                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></span>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-        <!--label-->
-        <el-form-item :label="$t('project.endpoint.labels')" class="right-box-form-param">
-
-          <div style="text-align: right;margin-bottom: 5px">
-            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-            <!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
-            <!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
-            <!--</button>-->
-            <span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add">
-              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
-            </span>
-          </div>
-
-          <div class="param-box param-box-module">
-            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="edit-endpoint-labels">
-              <div v-for="(item, index) in editEndpoint.labelModule" :key="index" class="param-box-row" >
-                <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
-                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                </el-form-item>
-                <span class="param-box-row-eq">=</span>
-                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.value'">
-                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                </el-form-item>
-                <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-        <!--enable-->
-        <el-form-item :label="$t('config.account.enable')">
-          <el-switch v-model.number="editEndpoint.enabled" active-color="#ee9d3f" :active-value="1" :inactive-value="0" id="edit-endpoint-input-enabled"></el-switch>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!-- end--表单-->
-
-    <!--底部按钮-->
-    <div class="right-box__footer">
-      <button v-cancel="{obj:editEndpoint,func:esc}" id="ep-edit-esc" class="footer__btn footer__btn--light">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn" id="ep-edit-save">
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'endpointBox',
-  props: {
-    endpoint: Object
-  },
-  data () {
-    return {
-      editEndpoint: {},
-      subBox: { show: false, title: this.$t('overall.asset') }, // asset子弹框
-      assetSearch: { host: '', sn: '', text: '', label: 'IP', dropdownShow: false }, // 侧滑框中asset的搜索相关
-      assetPageObj: { pageNo: 1, pageSize: 11, total: 0 },
-      selectedAsset: { id: '', host: '', sn: '' }, // endpoint侧滑框中选中的asset
-      projectList: [],
-      moduleList: [],
-      assetList: [],
-      rules: {
-        'project.id': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'module.id': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        assetId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        port: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        path: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    // endpoint弹框中asset子弹框控制
-    showSubBox (show) {
-      this.subBox.show = show
-    },
-
-    /* 关闭弹框 */
-    esc (refresh) {
-      this.$emit('close', refresh)
-    },
-
-    /* 关闭子弹框 */
-    subEsc () {
-      this.subBox.show = false
-    },
-
-    clickOutside () {
-      this.esc(false)
-    },
-
-    // 清除param
-    clearAllParam () {
-      this.editEndpoint.paramObj = []
-    },
-
-    // 新增param
-    addParam () {
-      this.editEndpoint.paramObj.push({ key: '', value: '' })
-    },
-
-    // 移除单个param
-    removeParam (index) {
-      this.editEndpoint.paramObj.splice(index, 1)
-    },
-
-    // 将param转为json字符串格式
-    paramToJson (param) {
-      const tempParam = {}
-      for (let i = 0; i < param.length; i++) {
-        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
-      }
-      const jsonString = JSON.stringify(tempParam)
-      if (jsonString == '{}') {
-        return ''
-      } else {
-        return jsonString
-      }
-    },
-
-    // 新增label
-    addLabel () {
-      this.editEndpoint.labelModule.push({ key: '', value: '' })
-    },
-    // 移除单个Label
-    removeLabel (index) {
-      this.editEndpoint.labelModule.splice(index, 1)
-    },
-
-    // 将labels转为json字符串格式
-    labelsToJson (param) {
-      const tempParam = {}
-      for (let i = 0; i < param.length; i++) {
-        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
-      }
-      const jsonString = JSON.stringify(tempParam)
-      if (jsonString == '{}') {
-        return ''
-      } else {
-        return jsonString
-      }
-    },
-    /* 获取project列表 */
-    getProjectList () {
-      return new Promise(resolve => {
-        this.$get('project', { pageSize: -1, pageNo: 1 }).then(response => {
-          if (response.code === 200) {
-            this.projectList = response.data.list
-            if (!this.editEndpoint.projectId && this.projectList.length > 0) {
-              this.editEndpoint.projectId = this.projectList[0].id
-            }
-          }
-          resolve()
-        })
-      })
-    },
-
-    // project下拉框点击事件
-    changeProject (projectId) {
-      this.getModuleList(projectId)
-      this.editEndpoint.projectId = projectId
-      this.editEndpoint.moduleId = ''
-    },
-
-    // project下拉框点击事件
-    changeModule (moduleId) {
-      const newModule = this.moduleList.find(item => { return item.id == this.endpoint.moduleId })
-      this.editEndpoint.moduleId = moduleId
-      this.editEndpoint.port = newModule.port
-      this.editEndpoint.path = newModule.path
-      this.editEndpoint.paramObj = newModule.paramObj
-    },
-
-    // 获取endpoint弹框中的asset子弹框里asset列表数据
-    getAssetList (currentPage) {
-      if (currentPage) {
-        this.assetPageObj.pageNo = currentPage
-      } else {
-        this.assetPageObj.pageNo = 1
-      }
-      this.$get('asset', this.assetPageObj).then(response => {
-        if (response.code === 200) {
-          this.assetList = response.data.list
-          this.assetPageObj.total = response.data.total
-        }
-      })
-    },
-
-    // endpoint弹框中的asset子弹框搜索
-    searchAsset () {
-      if (this.assetSearch.label == 'IP') {
-        this.assetSearch.host = this.assetSearch.text
-        this.assetSearch.sn = ''
-      } else if (this.assetSearch.label == 'SN') {
-        this.assetSearch.sn = this.assetSearch.text
-        this.assetSearch.host = ''
-      }
-      this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
-      this.getAssetList(false)
-    },
-
-    // endpoint弹框中的asset子弹框里asset选择事件
-    selectAsset (obj) {
-      this.selectedAsset = obj
-      this.editEndpoint.host = obj.host
-      this.editEndpoint.assetId = obj.id
-      this.$refs.endpointForm.validate()
-    },
-    inputAsset (e) {
-      this.editEndpoint.assetId = ''
-      const host = e.target.value
-      if (host) {
-        for (let i = 0; i < this.assetList.length; i++) {
-          if (host == this.assetList[i].host) {
-            this.editEndpoint.assetId = this.assetList[i].id
-            this.selectedAsset = this.assetList[i]
-            this.editEndpoint.host = host
-            break
-          }
-        }
-      }
-    },
-    // 获取endpoint弹框中module下拉框数据
-    getModuleList (projectId, setCurModule = false) {
-      this.$get('module', { projectId: projectId }).then(response => {
-        if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            try {
-              const tempObj = JSON.parse(response.data.list[i].param)
-              response.data.list[i].paramObj = []
-              for (const k in tempObj) {
-                response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
-              }
-            } catch (err) {
-            }
-          }
-          this.moduleList = response.data.list
-          if (setCurModule) {
-            this.editEndpoint.moduleId = this.moduleList.find(item => { return item.id == this.editEndpoint.moduleId }).id
-          }
-        }
-      })
-    },
-    // 保存endpoint
-    save () {
-      if (this.prevent_opt.save) { return } ;
-      this.prevent_opt.save = true
-      this.$refs.endpointForm.validate(valide => {
-        if (valide) {
-          this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj)
-          this.editEndpoint.labels = this.labelsToJson(this.editEndpoint.labelModule)
-          const requestData = []
-          requestData.push(this.editEndpoint)
-          this.$put('endpoint', requestData).then(response => {
-            this.prevent_opt.save = false
-            if (response.code === 200) {
-              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.esc(true)
-            } else {
-              this.$message.error(response.msg)
-            }
-          })
-        } else {
-          this.prevent_opt.save = false
-          return false
-        }
-      })
-    },
-
-    // 删除endpoint
-    del () {
-      if (this.prevent_opt.save) { return } ;
-      this.prevent_opt.save = true
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('endpoint?ids=' + this.editEndpoint.id).then(response => {
-          this.prevent_opt.save = false
-          if (response.code === 200) {
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.esc(true)
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      }).catch(() => {
-        this.prevent_opt.save = false
-      })
-    },
-    // endpoint弹框的asset子弹框顶部搜索条件选中事件
-    dropdownSelect (label) {
-      this.assetSearch.label = label
-      this.assetSearch.dropdownShow = false
-    },
-    /* asset搜索建议 */
-    assetSuggestion (queryString, callback) {
-      let data = []
-      if (!queryString) {
-        data = this.assetList
-      } else {
-        for (let i = 0; i < this.assetList.length; i++) {
-          if (this.assetList[i].host.indexOf(queryString.toLowerCase()) != -1) {
-            data.push(this.assetList[i])
-          }
-        }
-      }
-      callback(data)
-    }
-  },
-  mounted () {
-    this.getProjectList().then(response => {
-      this.getModuleList(this.editEndpoint.projectId)
-    })
-    this.getAssetList()
-  },
-  watch: {
-    endpoint: {
-      immediate: true,
-      deep: true,
-      handler (n, o) {
-        this.editEndpoint = JSON.parse(JSON.stringify(n))
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.nz-btn-edit-ok{
-  position: absolute;
-  bottom: 0;
-  right:0;
-}
-.nz-btn-edit-esc{
-  position: absolute;
-  bottom: 0;
-  left:0;
-}
-
-/* begin--搜索框*/
-.endpoint-asset-search {
-  display: inline-block;
-  position: relative;
-  margin-top: -16px;
-}
-.endpoint-asset-search button {
-  height: 22px !important;
-}
-.endpoint-asset-search-dropdown {
-  position: absolute;
-  top: 25px;
-  background-color: #444;
-  border-radius: 4px;
-  width: 44px;
-  left: 0;
-}
-.endpoint-asset-search-dropdown-item {
-  text-align: center;
-  line-height: 22px;
-  height: 22px;
-  cursor: default;
-  color: white;
-  font-size: 12px;
-}
-.endpoint-asset-label-txt {
-  display: inline-block;
-  width: 19px;
-  text-align: center;
-}
-.endpoint-asset-search-dropdown-item:first-of-type {
-  border-radius: 4px 4px 0 0;
-}
-.endpoint-asset-search-dropdown-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-.endpoint-asset-search-dropdown-item:hover {
-  background-color: #222;
-  color: #ff9900;
-}
-.endpoint-asset-search-input {
-  display: inline-block;
-  width: 150px;
-  vertical-align: top;
-}
-/* end--搜索框*/
-
-/* begin--table*/
-.endpoint-sub-table {
-  padding-top: 30px;
-  height: 440px;
-}
-.line-100 {
-  margin-bottom: 3px;
-}
-.endpoint-sub-table-head {
-  line-height: 28px;
-  height: 30px;
-}
-.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
-  line-height: 28px;
-  height: 30px;
-  color: #656565;
-}
-.endpoint-sub-table-row:hover {
-  background-color: #dadada;
-  cursor: default;
-}
-.endpoint-sub-table-row-active {
-  background-color: #dadada;
-}
-.endpoint-sub-table-row-selected {
-  background-color: #656565;
-  color: white;
-}
-.endpoint-sub-table-col {
-  display: inline-block;
-  width: calc(50% - 15px);
-  padding-left: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.endpoint-sub-table-paginate-all {
-  position: absolute;
-  left: 10px;
-  bottom: 17px;
-  color: #5a5a5a;
-}
-.endpoint-sub-table-body {
-  font-size: 15px;
-  position: relative;
-  overflow: auto;
-  height: calc(100% - 34px);
-}
-.endpoint-sub-table-body-dialog {
-  width: 100%;
-  height: 100%;
-  background-color: #e9ebec;
-  position: absolute;
-  opacity: 0.2;
-}
-.endpoints-clear-btn {
-  margin: 6px 0 0 7px;
-}
-/* end--table*/
-</style>
-
-<style lang="scss">
-  .right-box-edit-endpoint .el-pagination__total {
-    float: left;
-  }
-  right-box-edit-endpoint .pagination {
-    padding-top: 12px;
-    text-align: center;
-  }
-
-  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
-    font-size: 13px;
-    min-width: 20px !important;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-    border: 1px solid rgba(154,154,154,0.20);
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
-    color: white !important;
-  }
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
-    color: #666;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pager li.number{
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pager li.number.active{
-    font-family: NotoSansSC-Regular;
-    color: #FFFFFF;
-    letter-spacing: 0;
-  }
-
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: $global-text-color-active;
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
-    height: 20px;
-    border-color: rgba(154,154,154,0.20);
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
-    border-color: rgba(154,154,154,0.20);
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
deleted file mode 100644
index 4926330df..000000000
--- a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-  <transition name="right-box">
-    <div class="right-box right-box-panel z-top" v-if="rightBox.show">
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-        </button>
-        <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
-          <span class="top-tool-btn-txt"><i class="nz-icon nz-icon-close"></i></span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
-
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
-
-      <!-- begin--表单-->
-      <div class="right-box-form">
-          <el-form :model="chartSaveInfo" ref="chartSaveInfo">
-            <el-form-item  label="Chart Name" prop="title" :rules="{ required: true, type: 'string', message: '请输入图表名称', trigger: 'change' }">
-              <el-input size="small" maxlength="64" show-word-limit v-model="chartSaveInfo.title"></el-input>
-            </el-form-item>
-            <el-form-item v-if="isCreatePanel"  label="Panel Name" prop="name" :rules="{ required: true, type: 'string', message: '请输入看板名称', trigger: 'change' }">
-              <el-input size="small" maxlength="64" show-word-limit v-model="chartSaveInfo.name"></el-input>
-            </el-form-item>
-            <el-form-item v-else  label="Select Panel" prop="panelId" :rules="{ required: true, type: 'number', message: '请选择看板', trigger: 'change' }">
-              <el-select ref="panelSelect"  width="100%" v-model="chartSaveInfo.panelId"
-                         popper-class="" placeholder="" size="small"
-                         @change="panelSelect"
-                         filterable>
-                <el-option v-for="(item, index) in panelList"
-                           :key="index"
-                           :value="item.id"
-                           :label="item.name">{{item.name}}</el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-      </div>
-
-      <!-- end--表单-->
-
-      <!-- begin--底部按钮-->
-      <!--
-      <div class="right-box-bottom-btns">
-        <div @click="esc()" :class="{'right-box-bottom-btn-50': true}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()"  class="right-box-bottom-btn right-box-bottom-btn-50">{{panel.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
-      </div>
-      -->
-      <!-- end--底部按钮-->
-
-    </div>
-  </transition>
-</template>
-<script>
-import bus from '../../../libs/bus'
-import axios from 'axios'
-
-export default {
-  name: 'metricPrePanelBox',
-  props: {
-    chartInfo: Object,
-    elementTarget: Object,
-    seriesData: Array,
-    chartCount: String,
-    series: Array
-  },
-  data () {
-    return {
-      rightBox: { // 面板弹出框相关
-        show: false,
-        title: this.$t('dashboard.panel.createPanelTitle')
-      },
-      isCreatePanel: false,
-      // 创建看板信息
-      chartSaveInfo: {
-        title: '', // 图表名称
-        name: '', // panel名称
-        panelId: '' // 选择以后panelId
-      },
-      panelList: [],
-      panelItem: {}, // 保存看板信息
-      panelId: 0,
-      createChartList: [] // 创建多个图表的图表信息
-    }
-  },
-  methods: {
-    show (show) {
-      this.rightBox.show = show
-    },
-    setTitle (title) {
-      this.rightBox.title = title
-    },
-    setIsCreatePanel (isCreate) {
-      this.isCreatePanel = isCreate
-    },
-    setChartTitle (title) {
-      this.chartSaveInfo.title = title
-    },
-    // 选择看板
-    panelSelect (id) {
-      if (id) {
-        const panel = this.panelList.find(p => p.id === id)
-        if (panel) {
-          this.panelItem = panel
-        }
-      }
-    },
-    // 生成图表的时候,使用该函数,汇总创建图表参数
-    getOptions () {
-      // this.$refs.chartInfo.validate((valid) => {
-      const params = {
-        // panelId: this.panelId,
-        // title: this.chartSaveInfo.title,
-        type: this.chartInfo.type,
-        span: this.chartInfo.span,
-        height: this.chartInfo.height
-      }
-      // 多图模式
-      if (this.chartCount === 'multiple') {
-        this.createChartList = []
-        this.seriesData.forEach((queryItem) => {
-          const soleParam = Object.assign({}, params)
-          const elements = []
-          // 图表中每条线的名字,后半部分
-          // let host = `${queryItem.metric.__name__}`;//up,
-          // let charTitle=`${queryItem.metric.__name__}`;//up,
-          let host = ''// up,
-          let charTitle = ''
-          if (queryItem.metric.__name__) {
-            host = `${queryItem.metric.__name__}`// up,
-            charTitle = `${queryItem.metric.__name__}`// up,
-          }
-          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-          // 判断是否有数据
-          if (queryItem.values.length > 0 && tagsArr.length > 0) {
-            host += '{'
-            tagsArr.forEach((tag, i) => {
-              if (tag !== '__name__') {
-                host += `${tag}="${queryItem.metric[tag]}",`
-              }
-              if (tag === 'asset') {
-                const labVal = `${queryItem.metric[tag]}`
-                if (labVal !== '') {
-                  charTitle += `(${queryItem.metric[tag]})`
-                }
-              }
-            })
-            if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
-            host += '}'
-          }
-          soleParam.title = charTitle
-          elements.push({
-            expression: host,
-            type: this.elementTarget.type
-          })
-          soleParam.elements = elements
-          this.addMultipleChart(soleParam)
-        })
-      } else if (this.chartCount === 'single') {
-        params.title = this.chartSaveInfo.title
-        const elements = []
-        if (this.elementTarget.type === 'normal') {
-          const metricStr = bus.tagsToString(this.elementTarget.metric, this.elementTarget.selectedTagList)
-          elements.push({
-            expression: metricStr,
-            type: this.elementTarget.type
-          })
-        } else if (this.elementTarget.type === 'expert') {
-          elements.push({
-            expression: this.elementTarget.expression,
-            type: this.elementTarget.type
-          })
-        }
-        params.elements = elements
-        // if (valid) {
-        this.addCharts(params)
-        // }
-      }
-      // });
-    },
-    // 新建单个图表single
-    addCharts (params) {
-      this.$post('panel/' + this.panelId + '/charts', params).then(response => {
-        if (response.code === 200) {
-          const panelId = this.panelId
-          this.esc()
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-          this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
-            confirmButtonText: this.$t('tip.yes'),
-            cancelButtonText: this.$t('tip.no'),
-            type: 'success'
-          }).then(() => {
-            // this.$store.state.assetData.moduleData = 'panel';
-            this.$store.state.showPanel.id = panelId
-            this.$store.state.showPanel.name = this.panelItem.name
-            this.$router.push({
-              path: '/panel',
-              query: {
-                t: +new Date()
-              }
-            })
-          })
-          this.$emit('reload')
-        } else {
-          this.$message.error(response.msg)
-        }
-      })
-    },
-
-    // 创建多个图表
-    addMultipleChart (params) {
-      this.createChartList.push(params)
-      if (this.seriesData.length === this.createChartList.length) {
-        this.$nextTick(() => {
-          const api = []
-          this.createChartList.forEach((item) => {
-            api.push(this.$post('panel/' + this.panelId + '/charts', item))
-          })
-          axios.all(api).then((res) => {
-            let successFlag = true
-            res.forEach((item) => {
-              if (item.code !== 200) {
-                successFlag = false
-              }
-            })
-            if (successFlag) {
-              // this.saveDisabled = true; // 创建成功后,不能再次创建
-              const panelId = this.panelId
-              this.createChartList = []
-              this.esc()
-
-              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
-                confirmButtonText: this.$t('tip.yes'),
-                cancelButtonText: this.$t('tip.no'),
-                type: 'success'
-              }).then(() => {
-                // this.$store.state.assetData.moduleData = 'panel';
-                this.$store.state.showPanel.id = panelId
-                this.$store.state.showPanel.name = this.panelItem.name
-                this.$router.push({
-                  path: '/panel',
-                  query: {
-                    t: +new Date()
-                  }
-                })
-              })
-              // this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-              // this.elementTarget = {};
-              /*
-                this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
-                  confirmButtonText: this.$t("tip.yes"),
-                  cancelButtonText: this.$t("tip.no"),
-                  type: 'info'
-                }).then(() => {
-                  alert('multi-ok');
-                  /*
-                  this.$router.push({
-                      path: `/console/panel/detail/${this.panelId}/${this.productId}`,
-                      query: {
-                        panel: this.panelItem.name,
-                      },
-                  });
-    */
-              // });
-              this.$emit('reload')
-            } else {
-              this.$message.error('Something is wrong')
-            }
-          })
-        })
-      }
-    },
-
-    save: function () {
-      this.$refs.chartSaveInfo.validate((flag) => {
-        if (flag) { // 再判断弹出窗口内内容是否正确
-          if (this.isCreatePanel) { // 创建看板
-            this.panelItem.name = this.chartSaveInfo.name
-            this.$post('panel', this.panelItem).then(response => {
-              if (response.code === 200) {
-                this.panelId = response.data.panel.id
-                this.panelItem = response.data.panel
-                this.getOptions()
-              } else {
-                this.$message.error(response.msg)
-              }
-            })
-          } else { // 选择看板
-            this.panelId = this.chartSaveInfo.panelId
-            this.getOptions()
-          }
-        }
-      })
-    },
-    esc: function () {
-      this.rightBox.show = false
-      // 取消创建modal
-      this.panelList = []
-      this.chartSaveInfo.panelId = '' // 选择panel
-      this.chartSaveInfo.name = '' // panel名称创建
-      if (this.$refs.chartSaveInfo) {
-        this.$refs.chartSaveInfo.resetFields()
-      }
-      if (this.$refs.panelSelect) {
-        this.chartSaveInfo.panelId = ''
-        this.panelId = 0
-        // this.$refs.panelSelect..reset();
-      }
-    },
-    getTableData: function () {
-      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelList = response.data.list
-        } else {
-          this.panelList = []
-        }
-      })
-    }
-  },
-  created () {
-
-  },
-  mounted: function () {
-
-  },
-  watch: {
-
-  }
-}
-</script>
-
-<style scoped>
-  .z-top{
-    z-index: 50;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/rightBox/paramEditBox.vue b/nezha-fronted/src/components/common/rightBox/paramEditBox.vue
deleted file mode 100644
index 12d6e3563..000000000
--- a/nezha-fronted/src/components/common/rightBox/paramEditBox.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <!--start--param编辑框-->
-  <transition name="right-sub-box">
-    <div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
-      <div class="param-box">
-        <div v-for="(item, index) in currentModule.paramObj" :key="index" class="param-box-row">
-          <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
-          <span class="param-box-row-eq">=</span>
-          <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
-          <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus"></i></span>
-        </div>
-      </div>
-      <div style="width: 100%; text-align: center; height: 25px;">
-        <el-button @click="addParam" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
-      </div>
-    </div>
-  </transition>
-  <!--end--param编辑框-->
-</template>
-
-<script>
-export default {
-  name: 'paramEditBox',
-  props: {
-    editParamBox: Object,
-    paramObj: Array
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style scoped>
-  /* begin--子弹框*/
-  .right-sub-box {
-    width: 170px;
-    height: 225px;
-    position: fixed;
-    z-index: 2;
-    padding: 0 0 0 10px;
-  }
-  .param-box {
-    height: 200px;
-    overflow: auto;
-  }
-  .param-box-row {
-    padding: 7px 0 0 0;
-    position: relative;
-  }
-  .param-box-row:last-of-type {
-    padding-bottom: 7px;
-  }
-  .param-box-row-key, .param-box-row-value {
-    display: inline-block;
-    width: 50px;
-  }
-  .param-box-row-eq {
-    display: inline-block;
-    width: 18px;
-    text-align: center;
-    height: 22px;
-    line-height: 22px;
-    color: #c4c7cF;
-  }
-  .param-box-row-symbol:first-of-type {
-    font-size: 18px;
-    color: #bbbbbb;
-    text-align: center;
-    display: inline-block;
-    position: absolute;
-    top: 7px;
-    right: 34px;
-    cursor: pointer;
-  }
-  .param-box-row-symbol:last-of-type {
-    font-size: 12px;
-    color: #bbbbbb;
-    border: 1px solid #bbbbbb;
-    text-align: center;
-    height: 12px;
-    width: 14px;
-    display: inline-block;
-    position: absolute;
-    top: 12px;
-    left: 135px;
-    cursor: pointer;
-  }
-  .param-box-row-symbol>i {
-    position: absolute;
-    top: 1px;
-    right: 1px;
-  }
-  /* end--param*/
-</style>
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
deleted file mode 100644
index 60ac47f12..000000000
--- a/nezha-fronted/src/components/common/rightBox/roleBox.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-  <div class="right-box right-box-role" v-clickoutside="{obj:editRole,func:clickOutside}">
-    <!-- begin--顶部按钮-->
-    <div class="right-box-top-btns right-box-form-delete">
-      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="roles-edit-del"
-              type="button" v-has="'role_delete'"
-              v-if="editRole.id && !detail">
-        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-      </button>
-    </div>
-    <!-- end--顶部按钮-->
-
-    <!-- begin--标题-->
-    <div class="right-box-title">{{editRole.id ? ($t("config.roles.editRole")) : $t("config.roles.createRole")}}</div>
-    <!-- end--标题-->
-
-    <!-- begin--表单-->
-    <div class="right-box-form-box">
-      <el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" ref="roleForm">
-        <!--name-->
-        <el-form-item :label="$t('config.roles.name')" prop="name">
-          <el-input  maxlength="64" placeholder="" id="role-box-input-name"
-                    show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('config.roles.description')">
-          <el-input :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
-        </el-form-item>
-
-        <el-form-item :label="$t('config.roles.permission')">
-          <!--<div class="tree-option">
-            <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
-            <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
-          </div>-->
-          <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
-            <div slot-scope="{ node, data }">
-              <span>
-                <i v-if="data.type == '1'" class="el-icon-menu"></i>
-                <i v-if="data.type == '2'" class="el-icon-edit"></i>
-              </span>
-              {{$t(data.i18n)}}
-            </div>
-          </el-tree>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- end--表单-->
-    <!--底部按钮-->
-    <div class="right-box__footer" v-if="!detail">
-      <button v-cancel="{obj:editRole,func:esc}" class="footer__btn footer__btn--light"
-              id="roles-esc">
-        <span>{{$t('overall.cancel')}}</span>
-      </button>
-      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn"
-              id="roles-save">
-        <span>{{$t('overall.save')}}</span>
-      </button>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'roleBox',
-  props: {
-    role: Object,
-    detail: Boolean
-  },
-  computed: {
-  },
-  data () {
-    return {
-      rules: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
-      editRole: {},
-      menus: [],
-      selectAllFlag: false,
-      expandAllFlag: true
-    }
-  },
-  methods: {
-    /* 关闭弹框 */
-    esc (refresh) {
-      this.$emit('close', refresh)
-    },
-    clickOutside () {
-      this.esc(false)
-    },
-    /* 保存 */
-    save () {
-      this.$refs.roleForm.validate(valid => {
-        if (valid) {
-          this.prevent_opt.save = true
-          if (this.editRole.id) {
-            this.$put('sys/role', this.editRole).then(response => {
-              if (response.code === 200) {
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(response.msg)
-              }
-              this.prevent_opt.save = false
-            })
-          } else {
-            this.$post('sys/role', this.editRole).then(response => {
-              if (response.code === 200) {
-                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(response.msg)
-              }
-              this.prevent_opt.save = false
-            })
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    /* 删除 */
-    del () {
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('sys/role/?ids=' + this.editRole.id).then(response => {
-          if (response.code === 200) {
-            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.esc(true)
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      })
-    },
-    getMenus: function () {
-      this.menus = []
-
-      this.$get('sys/menu').then(response => {
-        if (response.code == 200) {
-          this.menus = response.data.list
-        } else {
-          this.$message.error('load menu faild')
-        }
-      })
-    },
-    labelFormatter: function (data, node) {
-      return data && data.i18n ? this.$t(data.i18n) : data.name
-    },
-    selectChange: function (data, isCheck, childIsCheck) {
-      if (this.$refs.menuTree) {
-        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
-      }
-    },
-    selectAllOrNone: function () {
-      if (this.$refs.menuTree) {
-        if (!this.selectAllFlag) {
-          this.$refs.menuTree.setCheckedNodes(this.menus)
-        } else {
-          this.$refs.menuTree.setCheckedNodes([])
-        }
-        this.selectAllFlag = !this.selectAllFlag
-      }
-    },
-    expandAllOrNone: function () {
-      this.expandAllFlag = !this.expandAllFlag
-      const $self = this
-      if (this.$refs.menuTree) {
-        this.menus.forEach(t => {
-          $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag
-        })
-      }
-    }
-  },
-  created () {
-    this.getMenus()
-  },
-  mounted () {
-    if (this.$refs.menuTree && this.editRole.menuIds && this.editRole.menuIds.length > 0) {
-      this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds, true)
-    }
-  },
-  watch: {
-    // 将prop里的user转为组件内部对象
-    role: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        this.editRole = JSON.parse(JSON.stringify(n))
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-  .right-box-role .tree-border{
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #fff none;
-    border-radius: 4px;
-    /*margin-top: 40px;*/
-  }
-  .right-box-role .tree-option{
-    float: right;
-  }
-  .right-box-role .option-btn{
-    margin: 6px 0 0 7px;
-  }
-  .right-box-role .btn-active{
-    color: #ee9d3f;
-    font-weight: bold;
-    border-color: #ee9d3f !important;
-  }
-</style>
-<style scoped>
-  .form-item-title{
-    position: absolute;
-    left: -120px;
-  }
-</style>