diff --git a/nezha-fronted/src/assets/css/main.scss b/nezha-fronted/src/assets/css/main.scss
index fc01fc78b..599f0d77e 100644
--- a/nezha-fronted/src/assets/css/main.scss
+++ b/nezha-fronted/src/assets/css/main.scss
@@ -2,3 +2,4 @@
 @import './theme.scss';
 @import './common.scss';
 @import '../stylus/index.scss';
+@import './common/rightBoxCommon.scss';
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index f0f10cc1c..c1496e2b2 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -1,6 +1,3 @@
-<style scoped lang="scss">
-  @import '@/assets/css/common/rightBoxCommon.scss';
-</style>
 <template>
   <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-clickoutside="{obj:endpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
index 3f2466a06..144c55e6a 100644
--- a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
@@ -1,6 +1,3 @@
-<style scoped lang="scss">
-  @import '@/assets/css/common/rightBoxCommon.scss';
-</style>
 <template>
   <div class="right-box right-box-add-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index cebfd8df2..7eb4f1c3c 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -1,6 +1,3 @@
-<style scoped lang="scss">
-  @import '@/assets/css/common/rightBoxCommon.scss';
-</style>
 <template>
   <div class="right-box right-box-module" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
     <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
index 769324c67..1b3f94528 100644
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -1,6 +1,3 @@
-<style scoped lang="scss">
-  @import '@/assets/css/common/rightBoxCommon.scss';
-</style>
 <template>
   <div class="right-box right-box-menu" v-clickoutside="{obj:editMenu,func:clickOutside}">
     <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index c95d9087c..16cadcb7a 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1,6 +1,3 @@
-<style scoped lang="scss">
-  @import '@/assets/css/common/rightBoxCommon.scss';
-</style>
 <template>
   <div class="right-box right-box-module" v-clickoutside="{obj:editModule,func:clickOutside}">
     <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 156210e4d..06c5de63c 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -1,6 +1,3 @@
-<style scoped lang="scss">
-  @import '@/assets/css/common/rightBoxCommon.scss';
-</style>
 <template>
   <div class="right-box right-box-project" v-clickoutside="{obj:editProject,func:clickOutside}">
     <!-- begin--顶部按钮-->
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
new file mode 100644
index 000000000..1bca99ac1
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :layout="['searchInput', 'elementSet']"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.expressionTemplate"
+      :search-msg="searchMsg">
+      <template v-slot:top-tool-left>
+        <div id="module-type-1"  class="nz-tab-item-box" @click="clickTab([],'exprTemp')"><!--v-has="'snmp_browser_view'"-->
+          <div class="nz-tab-item">{{$t("config.exprTemp.exprTemp")}}</div>
+        </div>
+        <div id="module-type-2"  class="nz-tab-item-box" @click="clickTab([],'chartTemp')"><!--v-has="'snmp_browser_view'"-->
+          <div class="nz-tab-item nz-tab-item-active">{{$t("config.chartTemp.chartTemp")}}</div>
+        </div>
+      </template>
+      <template v-slot:top-tool-right>
+        <export-excel
+          id="expression-template-list"
+          export-url="expression/tmpl/export"
+          import-url="expression/tmpl/import"
+          export-file-name="expression-template"
+          :params="searchLabel"
+          :permissions="{import: 'expressionTemplate_add', export: 'expressionTemplate_view'}"
+          @afterImport="getTableData"
+          class="top-tool-export margin-r-10"
+        >
+          <template slot="optionZone">
+            <button id="expr-tmpl-list-export" v-has="'expressionTemplate_add'" :title="$t('overall.createTemplate')" class="top-tool-btn"
+                    type="button" @click="add">
+              <i class="nz-icon nz-icon-create-square"></i>
+            </button>
+          </template>
+        </export-excel>
+
+        <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
+                       id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button></template>
+      <template v-slot:default="slotProps">
+        <expr-tmpl-table
+          ref="dataTable"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @copy="(row) => {copyRow(row, 'exprTmpl')}"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></expr-tmpl-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">
+      <expr-tmpl-box v-if="rightBox.show" :exprTemp="object" @close="closeRightBox"></expr-tmpl-box>
+    </transition>
+    <!--导出-->
+    <div class="export-xlsx">
+      <el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false'
+                 :show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
+        <div class="upload-body">
+          <button @click="exportCur" class="el-button el-button--default el-button--small" id="alert-msg-exportcur">
+            <span>{{$t('overall.exportCur')}}</span>
+          </button>
+          <button @click="exportAll" class="el-button el-button--default el-button--small" id="alert-msg-exportall">
+            <span>{{$t('overall.exportAll')}}</span>
+          </button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+import exportXLSX from '@/components/common/exportXLSX'
+import exprTmplBox from '@/components/common/rightBox/exprTmplBox'
+import deleteButton from '@/components/common/deleteButton'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import exprTmplTable from '@/components/common/table/settings/exprTmplTable'
+
+export default {
+  name: 'chartTemp',
+  components: {
+    deleteButton,
+    exprTmplBox,
+    nzDataList,
+    exprTmplTable,
+    'export-excel': exportXLSX
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'expression/tmpl',
+      tableId: 'exprTemp',
+      /* 搜素相关 */
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+          {
+            id: 11,
+            name: 'Id',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 12,
+            name: this.$t('config.exprTemp.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          }, {
+            id: 13,
+            name: this.$t('config.exprTemp.gname'),
+            type: 'selectTemp',
+            label: 'gname',
+            disabled: false
+          }
+        ]
+      },
+      // 导出相关
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      // 创建修改相关
+      blankObject: {
+        id: '',
+        name: '',
+        gname: '',
+        expression: '',
+        remark: ''
+      },
+      nowTime: ''
+    }
+  },
+  mounted () {
+    this.initEvent()
+  },
+  methods: {
+    initEvent () {
+      bus.$on('alert-rule-list-change', () => {
+        this.getTableData()
+      })
+      bus.$on('dc-list-change', () => {
+        this.getTableData()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getTableData()
+      })
+    },
+    showExportDialog () {
+      this.importBox.show = true
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    exportCur () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.closeDialog()
+    },
+    exportAll () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.closeDialog()
+    },
+    overtime (row) {
+      if (this.prevent_opt.save) {
+        return
+      }
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmOvertime'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('expression/tmpl?ids=' + row.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/config/exprTemp.vue b/nezha-fronted/src/components/page/config/template/exprTemp.vue
similarity index 93%
rename from nezha-fronted/src/components/page/config/exprTemp.vue
rename to nezha-fronted/src/components/page/config/template/exprTemp.vue
index 4bf32c9a7..9a1f7e311 100644
--- a/nezha-fronted/src/components/page/config/exprTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/exprTemp.vue
@@ -7,6 +7,14 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.expressionTemplate"
       :search-msg="searchMsg">
+      <template v-slot:top-tool-left>
+        <div id="module-type-1" class="nz-tab-item-box">
+          <div class="nz-tab-item nz-tab-item-active">{{$t("config.exprTemp.exprTemp")}}</div>
+        </div>
+        <div id="module-type-2"  class="nz-tab-item-box" @click="clickTab([],'chartTemp')"><!--v-has="'snmp_browser_view'"-->
+          <div class="nz-tab-item">{{$t("config.chartTemp.chartTemp")}}</div>
+        </div>
+      </template>
       <template v-slot:top-tool-right>
         <export-excel
           id="expression-template-list"
diff --git a/nezha-fronted/src/components/page/config/template/index.vue b/nezha-fronted/src/components/page/config/template/index.vue
new file mode 100644
index 000000000..ac85846a8
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/template/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <exprTemp class="template-tab" :show-tab="showTab" v-if="showTab == 'exprTemp'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></exprTemp>
+    <chartTemp class="template-tab" :show-tab="showTab" v-if="showTab == 'chartTemp'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></chartTemp>
+  </div>
+</template>
+
+<script>
+import exprTemp from './exprTemp'
+import chartTemp from './chartTemp'
+export default {
+  name: 'template',
+  components: {
+    exprTemp,
+    chartTemp
+  },
+  data () {
+    return {
+      showTab: 'exprTemp'
+    }
+  },
+  methods: {
+    changeTab: function (paths, tab) {
+      let path = '/'
+      if (paths && paths instanceof Array) {
+        paths.forEach(p => {
+          path += p + '/'
+        })
+        path = path.substring(0, path.length - 1)
+      } else {
+        path = paths
+      }
+      this.showTab = tab // 此处需要组建中有showTab 属性
+      this.toPath(path)
+    },
+    toPath: function (path) {
+      this.$router.push({
+        path: path,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    changeShowTab (showTab) {
+      this.showTab = showTab
+    }
+  },
+  watch: {
+    $routePath: {
+
+      immediate: true,
+      handler (n, o) {
+        if (n.indexOf('mib') != -1 && this.$route.params.tab) {
+          this.$set(this, 'showTab', this.$route.params.tab)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.template-tab{
+  height: 100%;
+}
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 93bd5033e..9d93010d3 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -85,7 +85,7 @@
             class="top-tool-export margin-l-10"
           >
             <template slot="optionZone">
-              <button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_toAdd'"
+              <button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_add'"
                       id="panel-add-chart" class="top-tool-btn">
                 <i class="nz-icon-create-square nz-icon"></i>
               </button>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index fc0b4195a..fb542779a 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -123,8 +123,8 @@ export default new Router({
           component: resolve => require(['../components/page/alert/alertSilence.vue'], resolve)
         },
         {
-          path: '/exprtemp',
-          component: resolve => require(['../components/page/config/exprTemp.vue'], resolve)
+          path: '/template',
+          component: resolve => require(['../components/page/config/template/index.vue'], resolve)
         }
       ]
     }