diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 50629f6..b82c6a9 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -730,6 +730,7 @@
   }
 }
 
+
 @mixin category-info-item{
   [data-theme="dark"] & {
     margin-bottom: 30px;
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 5ab449d..9caac46 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1034,15 +1034,6 @@
     }
   }
   .des-form{
-    // width: 100% !important;
-    // margin-top: 0 !important;
-    // padding: 20px 38px 0 20px !important;
-    // background-color: transparent !important;
-    // .el-form-item__content,
-    // .el-select,
-    // .el-input__inner{
-    //   width: 264px;
-    // }
     .checkbox-item{
       height: 33px;
       line-height: 33px;
@@ -1682,6 +1673,33 @@ input[type ='number'] {
     @include tree_children_icon_font;
   }
 }
+// 档案门类-基本信息
+.system-base-info {
+  @include category-padding;
+  padding: 20px;
+  .info-item {
+    display: flex;
+    font-size: 14px;
+    @include category-info-item;
+    span {
+      display: block;
+      width: 80px;
+      height: 36px;
+      line-height: 36px;
+      text-align: right;
+      @include pagination-font;
+    }
+    p {
+      width: 300px;
+      padding: 0 10px;
+      line-height: 36px;
+      @include category-info-text;
+    }
+  }
+  .info-content p {
+    height: 120px;
+  }
+}
 
 // 归档章设置
 .format-style{
@@ -1710,7 +1728,7 @@ input[type ='number'] {
   margin-top: 5px;
   .el-switch__core{
     width: 28px !important;
-    height: 16px;
+    height: 16px !important;
     &::after{
       width: 12px;
       height: 12px;
@@ -1749,7 +1767,7 @@ input[type ='number'] {
   }
 }
 
-// 档案门类 
+// 档案门类 2
 .format-main {
   display: flex;
   justify-content: flex-start;
@@ -1765,7 +1783,6 @@ input[type ='number'] {
     flex-grow: 1;
   }
 }
-
 .addEdit-category-form{
   .setting-dialog{
     .el-form{
diff --git a/src/views/system/archivesCategory/baseInfo/index.vue b/src/views/system/archivesCategory/baseInfo/index.vue
index df4d7d9..44408cd 100644
--- a/src/views/system/archivesCategory/baseInfo/index.vue
+++ b/src/views/system/archivesCategory/baseInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="base-info" style="display:flex; justify-content: flex-start;">
+  <div class="system-base-info" style="display:flex; justify-content: flex-start;">
     <div class="base-info-left">
       <div class="info-item">
         <span>名称：</span>
@@ -94,32 +94,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
-.base-info {
-  padding: 20px;
-  .info-item {
-    display: flex;
-    font-size: 14px;
-    @include category-info-item;
-    span {
-      display: block;
-      width: 80px;
-      height: 36px;
-      line-height: 36px;
-      text-align: right;
-      // margin-right: 10px;
-      @include pagination-font;
-    }
-    p {
-      width: 300px;
-      padding: 0 10px;
-      line-height: 36px;
-      @include category-info-text;
-    }
-  }
-  .info-content p {
-    height: 120px;
-  }
-}
 </style>
diff --git a/src/views/system/metadata/baseInfo/index.vue b/src/views/system/metadata/baseInfo/index.vue
new file mode 100644
index 0000000..53edd25
--- /dev/null
+++ b/src/views/system/metadata/baseInfo/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="system-base-info" style="display:flex; justify-content: flex-start;">
+    <div class="base-info-left">
+      <div class="info-item">
+        <span>名称：</span>
+        <p>{{ selectedTreeItem.label }}</p>
+      </div>
+      <div class="info-item">
+        <span>参照标准号：</span>
+        <p>GB/T39362-2020</p>
+      </div>
+      <div class="info-item">
+        <span>参照标准名：</span>
+        <p>党政机关电子公文归档规范</p>
+      </div>
+      <div class="info-item">
+        <span>参照标准类型：</span>
+        <p>党政机关电子公文归档规范</p>
+      </div>
+      <div class="info-item">
+        <span>标准范围说明：</span>
+        <p>本标准适用于各级党政机关电子公文系统产生的电子 公文的归档和处理。其他机关和企业事业单位的电子 公文的归档和处理可参照执行。</p>
+      </div>
+      <div class="info-item">
+        <span>默认方案：</span>
+        <el-switch v-model="defaultSetting" class="isDefault" disabled />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getNoFormatField } from '@/api/category/fileNoFormat'
+export default {
+  name: 'BaseInfo',
+  props: {
+    selectedTreeItem: {
+      type: Object,
+      default: function() {
+        return {
+          label: '',
+          isType: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      defaultSetting: false
+    }
+  },
+  watch: {
+    selectedTreeItem: function(newValue, oldValue) {
+      if (newValue && newValue.id) {
+        this.initData()
+      }
+    }
+  },
+  created() {
+    console.log(this.selectedTreeItem)
+    if (this.selectedTreeItem && this.selectedTreeItem.id) {
+      this.initData()
+    }
+  },
+  methods: {
+    initData() {
+      // getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => {
+      //   this.fileNoFormatStr = ''
+      //   res.forEach((item) => {
+      //     this.fileNoFormatStr += item.fieldCnName + item.connector
+      //   })
+      // })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin baseInfo-font-style{
+  [data-theme="dark"] & {
+    color: #fff;
+  }
+  [data-theme="light"] & {
+    color: #0C0E1E;
+  }
+}
+.system-base-info {
+  .info-item {
+    span {
+      width: 100px;
+    }
+    p{
+      @include baseInfo-font-style;
+    }
+    .isDefault{
+      margin: 8px 0 0 10px;
+      ::v-deep .el-switch__core{
+        width: 28px !important;
+        height: 16px;
+        &::after{
+          width: 12px;
+          height: 12px;
+          margin-left: 0;
+        }
+      }
+
+    }
+  }
+}
+
+::v-deep .el-switch.is-checked .el-switch__core::after{
+  margin-left: -13px !important;
+}
+::v-deep .el-switch.is-checked.is-disabled .el-switch__core{
+  border-color: #0348f3 !important;
+  background-color: #0348f3 !important;
+}
+
+</style>
diff --git a/src/views/system/metadata/data.json b/src/views/system/metadata/data.json
new file mode 100644
index 0000000..e0f16ad
--- /dev/null
+++ b/src/views/system/metadata/data.json
@@ -0,0 +1,19 @@
+[
+  {
+    "id": 1,
+    "label": "元数据方案",
+    "isType": 1,
+    "children": [
+      {
+        "id": 2,
+        "isType": 2,
+        "label": "精简方案"
+      },
+      {
+        "id": 3,
+        "isType": 2,
+        "label": "完全方案"
+      }
+    ]
+  }
+]
diff --git a/src/views/system/metadata/dataList/index.vue b/src/views/system/metadata/dataList/index.vue
new file mode 100644
index 0000000..e2cdbdd
--- /dev/null
+++ b/src/views/system/metadata/dataList/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div class="head-container">
+      <el-button size="mini" @click="crud.toAdd">
+        <i class="iconfont icon-xinzeng" :disabled="crud.selections.length === 0" />
+        新增
+      </el-button>
+      <el-button size="mini" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections)">
+        <i class="iconfont icon-bianji" />
+        编辑
+      </el-button>
+      <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+        <i class="iconfont icon-shanchu" />
+        删除
+      </el-button>
+    </div>
+    <!--表单组件-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+      <div class="setting-dialog">
+        <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px">
+          <el-form-item label="编号" prop="number">
+            <el-input v-model="form.number" />
+          </el-form-item>
+          <el-form-item label="元数据元素" prop="meteItem">
+            <el-input v-model="form.metaItem" />
+          </el-form-item>
+          <el-form-item label="顶级元数据" prop="isTop">
+            <el-radio-group v-model="form.isTop">
+              <el-radio label="1">是</el-radio>
+              <el-radio label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.isTop === '0'" label="父级" prop="parent">
+            <el-select v-model="form.parent" style="width: 225px;">
+              <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <div>
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        highlight-current-row
+        row-key="id"
+        @select="crud.selectChange"
+        @select-all="crud.selectAllChange"
+        @selection-change="crud.selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" label="序号" />
+        <el-table-column prop="number" label="编号" />
+        <el-table-column :show-overflow-tooltip="true" prop="metaItem" label="元数据元素" />
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, header, form } from '@crud/crud'
+import pagination from '@crud/Pagination'
+
+const defaultForm = { id: null, number: null, meteItem: null, isTop: null, parent: null }
+
+export default {
+  name: 'MetaDataList',
+  components: { pagination },
+  cruds() {
+    return CRUD({ title: '元数据', url: 'api/users' })
+  },
+  mixins: [
+    presenter(),
+    header(),
+    form(function() {
+      return Object.assign({ dicPid: this.dicPid }, defaultForm)
+    })
+  ],
+  data() {
+    return {
+      selectOptions: [
+        {
+          id: 1,
+          value: 'M1 公文标识',
+          label: 'M1 公文标识'
+        },
+        {
+          id: 2,
+          value: 'M2 文种',
+          label: 'M2 文种'
+        }
+      ],
+      rules: {
+        number: [
+          { required: true, message: '编号不可为空', trigger: 'blur' }
+        ],
+        meteItem: [
+          { required: true, message: '元数据元素不可为空', trigger: 'blur' }
+        ],
+        isTop: [
+          { required: true, message: '请选择是否为顶级节点', trigger: 'change' }
+        ],
+        parent: [
+          { required: true, message: '请选择父级元数据', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+    },
+    [CRUD.HOOK.afterRefresh]() {
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选元数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        this.crud.doDelete(datas)
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+  padding: 0 16px;
+}
+</style>
diff --git a/src/views/system/metadata/form.vue b/src/views/system/metadata/form.vue
new file mode 100644
index 0000000..9207e6d
--- /dev/null
+++ b/src/views/system/metadata/form.vue
@@ -0,0 +1,184 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+    <div class="setting-dialog">
+      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px">
+        <el-form-item label="" prop="filterItem">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="参照标准类型" prop="filterItem">
+          <el-select v-model="form.filterItem" style="width: 225px;">
+            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="参照标准号" prop="filterItem">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="参照标准名" prop="filterItem">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="标准范围说明" prop="filterItem">
+          <el-input v-model="form.description" rows="5" type="textarea" style="width: 594px;" />
+        </el-form-item>
+        <el-row>
+          <el-form-item label="默认方案" prop="filterItem">
+            <el-radio-group v-model="form.isTop">
+              <el-radio label="1">是</el-radio>
+              <el-radio label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCategoryTree } from '@/api/category/category'
+import { form } from '@crud/crud'
+import CRUD from '@crud/crud'
+
+const defaultForm = { id: null, parentName: null, cnName: null, code: null, packing: '1', isType: null, makeType: 'piece', remark: null, templateId: null }
+export default {
+  mixins: [
+    form(function() {
+      return Object.assign({ pid: this.pid }, defaultForm)
+    })
+  ],
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      pid: null,
+      isAdd: false,
+      rules: {
+        parentLevel: [
+          { required: true, message: '所属父级不可为空', trigger: 'blur' }
+        ],
+        cnName: [
+          { required: true, message: '名称不可为空', trigger: 'blur' }
+        ],
+        isType: [
+          { required: true, message: '节点类型不可为空', trigger: 'change' }
+        ],
+        code: [
+          { required: true, message: '编码不可为空', trigger: 'blur' }
+        ],
+        packing: [
+          { required: true, message: '请选择是否装盒', trigger: 'change' }
+        ],
+        makeType: [
+          { required: true, message: '请选择装盒类型', trigger: 'change' }
+        ]
+      },
+      selectOptions: [
+        {
+          value: '1',
+          label: '门类'
+        },
+        {
+          value: '2',
+          label: '文件夹'
+        }
+      ],
+      templateTree: [],
+      selectedTemplateNode: {}
+    }
+  },
+  created() {
+    this.getSelectOptions()
+  },
+  methods: {
+    // 新建时，判断当前节点类型，“门类类型” option区分可选
+    beforeToAdd() {
+      this.form.isType = null
+      if (this.selectedCategory.isType === 1) {
+        this.selectOptions.forEach(item => {
+          if (item.value === 4) {
+            item.typeState = true
+          } else {
+            item.typeState = false
+          }
+        })
+      } else if (this.selectedCategory.isType === 2) {
+        this.selectOptions.forEach(item => {
+          if (item.value !== 3) {
+            item.typeState = true
+          } else {
+            item.typeState = false
+          }
+        })
+        this.form.isType = 3
+      } else if (this.selectedCategory.isType === 3) {
+        this.selectOptions.forEach(item => {
+          if (item.value !== 4) {
+            item.typeState = true
+          } else {
+            item.typeState = false
+          }
+        })
+        this.form.isType = 4
+      }
+    },
+    [CRUD.HOOK.beforeSubmit]() {
+      if (this.form.templateId) {
+        this.form.children = [this.selectedTemplateNode]
+      } else {
+        this.form.children = null
+      }
+    },
+    updateTemplateValue(node, instanceId) {
+      this.selectedTemplateNode = node
+    },
+    changeType() {
+      this.isAdd = this.form.isType === '1'
+      // if (this.form.isType === 6) {
+      //   // this.crudDict.getDicts()
+      //   this.getTemplateTree()
+      // } else {
+      //   this.form.dicExplain = null
+      // }
+    },
+    getTemplateTree() {
+      getCategoryTree().then(res => {
+        this.templateTree = res
+      })
+    },
+    getSelectOptions() {
+      // getCategoryType().then(res => {
+      //   for (const key in res) {
+      //     this.selectOptions.push({
+      //       value: Number(key),
+      //       label: res[key],
+      //       typeState: false
+      //     })
+      //   }
+      // })
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.cnName,
+        children: node.children,
+        isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/system/metadata/index.vue b/src/views/system/metadata/index.vue
index e69de29..ce5dff5 100644
--- a/src/views/system/metadata/index.vue
+++ b/src/views/system/metadata/index.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="app-container category-container">
+    <!-- 门类列表 -->
+    <div class="container-main">
+      <div class="elect-cont-left">
+        <div class="head-container">
+          <crudOperation :permission="permission">
+            <template v-slot:left>
+              <el-button v-permission="permission.add" size="mini" :disabled="selectedTreeItem.isType === 2 " @click="crud.toAdd">
+                <i class="iconfont icon-xinzeng" />
+                新增
+              </el-button>
+              <el-button v-permission="permission.edit" size="mini" :disabled="selectedTreeItem.isType === 1" @click="crud.toEdit(crud.selections[0])">
+                <i class="iconfont icon-bianji" />
+                编辑
+              </el-button>
+            </template>
+            <template v-slot:right>
+              <el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="selectedTreeItem.isType === 1" @click="toDelete(crud.selections)">
+                <i class="iconfont icon-shanchu" />
+                删除
+              </el-button>
+            </template>
+          </crudOperation>
+        </div>
+        <div class="container-left">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <!--门类树状结构-->
+          <div class="tree-scroll">
+            <el-tree ref="tree" v-loading="crud.loading" :data="treeList" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @node-click="handleNodeClick">
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span v-if="data.isType===1 " class="iconFolder">
+                  {{ data.label }}
+                </span>
+                <span v-if="data.isType===2 " class="iconFile">
+                  {{ data.label }}
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+      </div>
+      <!-- 门类管理tab -->
+      <div class="elect-cont-right">
+        <div class="container-right tab-content">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <ul class="tab-nav">
+            <li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息<i /></li>
+            <li v-if="selectedTreeItem.isType && selectedTreeItem.isType === 2" :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">档案元数据<i /></li>
+            <!-- 最右侧装饰img -->
+            <span class="tab-right-img" />
+          </ul>
+          <!-- :selected-category="selectedTreeItem" -->
+          <component :is="comName" :selected-tree-item="selectedTreeItem" />
+        </div>
+      </div>
+      <el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :before-close="handleClose">
+        <div class="setting-dialog">
+          <div class="tip-content">
+            <p class="tipMsg">此操作将删除当前所选方案</p>
+            <span>你是否还要继续?</span>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="deleteVisible = false">取消</el-button>
+            <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import crudCategory from '@/api/category/category'
+import CRUD, { presenter, header } from '@crud/crud'
+import baseInfo from './baseInfo/index'
+import arcTableList from './dataList/index'
+import crudOperation from '@crud/CRUD.operation'
+import dataJson from './data.json'
+
+export default {
+  name: 'MetaData',
+  components: { crudOperation, baseInfo, arcTableList },
+  cruds() {
+    return [
+      CRUD({
+        title: '元数据', url: 'api/archives-type/menu',
+        crudMethod: { ...crudCategory },
+        optShow: {
+          add: false,
+          edit: false,
+          del: false,
+          download: false,
+          group: false
+        }
+      })
+    ]
+  },
+  mixins: [presenter(), header()],
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'category:add'],
+        edit: ['admin', 'category:edit'],
+        del: ['admin', 'category:del'],
+        sort: ['admin', 'category:sort']
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      treeList: [],
+      deleteVisible: false,
+      selectedTreeItem: {},
+      deleteData: {},
+      activeIndex: 0,
+      brotherNodeNum: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'baseInfo'
+      } else if (this.activeIndex === 1) {
+        return 'arcTableList'
+      }
+      return 'baseInfo'
+    }
+  },
+  created() {
+    this.treeList = dataJson
+  },
+  methods: {
+    // 展开选中的父级
+    expandParents(node) {
+      node.expanded = true
+      if (node.parent) {
+        this.expandParents(node.parent)
+      }
+    },
+    [CRUD.HOOK.afterRefresh]() {
+      let currentKey
+      if (localStorage.getItem('currentMetaDataKey')) {
+        currentKey = JSON.parse(localStorage.getItem('currentMetaDataKey'))
+      } else {
+        currentKey = this.treeList[0]
+      }
+      // 设置某个节点的当前选中状态
+      this.$refs.tree.setCurrentKey(currentKey.id)
+      this.$nextTick(() => {
+        // 设置某个节点的父级展开
+        const selectedKey = this.$refs.tree.getCurrentNode()
+        if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) {
+          this.expandParents(this.$refs.tree.getNode(selectedKey).parent)
+        }
+        // 选中节点的门类详情
+        this.handleNodeClick(selectedKey)
+      })
+    },
+    // 选中门类后，设置门类详情数据
+    handleNodeClick(val) {
+      if (val) {
+        if (val.isType === 1) {
+          this.addBtnShow = true
+        }
+        this.selectedTreeItem = val
+        this.changeActiveTab(0)
+      }
+    },
+    toDelete(data) {
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
+    },
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin metadata-right-hide{
+  [data-theme="dark"] & {
+    width: calc(100vw - 398px);
+  }
+  [data-theme="light"] & {
+    width: calc(100vw - 400px);
+  }
+}
+
+@mixin metadata-right-open{
+  [data-theme="dark"] & {
+    width: calc(100vw - 600px);
+  }
+  [data-theme="light"] & {
+    width: calc(100vw - 600px);
+  }
+}
+
+.category-container{
+  .elect-cont-left{
+    width: 284px;
+  }
+}
+
+.hideSidebar{
+  // siderbar-收起 54 + 间距 60 + treeLeft 284
+  .category-container{
+    .elect-cont-right{
+      @include metadata-right-hide;
+    }
+  }
+}
+
+.openSidebar{
+  // siderbar-展开 256 + 间距 60 + treeLeft 284
+  .category-container{
+    .elect-cont-right{
+      @include metadata-right-open;
+    }
+  }
+}
+.tree-scroll{
+  font-size: 14px;
+}
+</style>