diff --git a/package.json b/package.json
index 8179754..8a79d1c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "element-plus": "^2.2.9",
+    "pinia": "^2.0.16",
     "vue": "^3.2.25",
     "vue-router": "4"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e8eca8f..961920f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,7 @@ specifiers:
   eslint-plugin-vue: ^9.2.0
   husky: ^8.0.1
   less: ^4.1.3
+  pinia: ^2.0.16
   prettier: ^2.7.1
   typescript: ^4.5.4
   vite: ^2.9.9
@@ -28,6 +29,7 @@ specifiers:
 
 dependencies:
   element-plus: 2.2.9_vue@3.2.37
+  pinia: 2.0.17_typescript@4.7.4+vue@3.2.37
   vue: 3.2.37
   vue-router: 4.1.1_vue@3.2.37
 
@@ -634,6 +636,10 @@ packages:
     resolution: {integrity: sha512-pF1G4wky+hkifDiZSWn8xfuLOJI1ZXtuambpBEYaf7Xaf6zC/pM29rvAGpd3qaGXnr4BAXU1Pxz/VfvBGwexGA==}
     dev: false
 
+  /@vue/devtools-api/6.2.1:
+    resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
+    dev: false
+
   /@vue/reactivity-transform/3.2.37:
     resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
     dependencies:
@@ -2949,6 +2955,24 @@ packages:
     dev: true
     optional: true
 
+  /pinia/2.0.17_typescript@4.7.4+vue@3.2.37:
+    resolution: {integrity: sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.2.1
+      typescript: 4.7.4
+      vue: 3.2.37
+      vue-demi: 0.13.4_vue@3.2.37
+    dev: false
+
   /posix-character-classes/0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}
diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg
new file mode 100644
index 0000000..7e876cb
--- /dev/null
+++ b/src/assets/icons/delete.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4 10H44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/export-json.svg b/src/assets/icons/export-json.svg
new file mode 100644
index 0000000..c4451ac
--- /dev/null
+++ b/src/assets/icons/export-json.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
+    <path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zm18.6-251.7L765 393.7c-5.3-4.2-13-.4-13 6.3v76H438c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/group.svg b/src/assets/icons/group.svg
new file mode 100644
index 0000000..c911c2c
--- /dev/null
+++ b/src/assets/icons/group.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 4H4V12H12V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M44 36H36V44H44V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M12 36H4V44H12V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M44 4H36V12H44V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M8 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M40 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 8H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 40H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 16H25.6V22.4H32V32H22.4V25.6H16V16Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/import-json.svg b/src/assets/icons/import-json.svg
new file mode 100644
index 0000000..7b9895e
--- /dev/null
+++ b/src/assets/icons/import-json.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
+    <path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zM902 476H588v-76c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-76h314c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg
new file mode 100644
index 0000000..c945ad8
--- /dev/null
+++ b/src/assets/icons/lock.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/menu-fold.svg b/src/assets/icons/menu-fold.svg
new file mode 100644
index 0000000..7831a7b
--- /dev/null
+++ b/src/assets/icons/menu-fold.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8 19L16 24L8 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/menu-unfold.svg b/src/assets/icons/menu-unfold.svg
new file mode 100644
index 0000000..00e9e9b
--- /dev/null
+++ b/src/assets/icons/menu-unfold.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16 19L8 24L16 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/preview.svg b/src/assets/icons/preview.svg
new file mode 100644
index 0000000..7a0ce8d
--- /dev/null
+++ b/src/assets/icons/preview.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/redo.svg b/src/assets/icons/redo.svg
new file mode 100644
index 0000000..3e65431
--- /dev/null
+++ b/src/assets/icons/redo.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M36.728 36.728A17.943 17.943 0 0 1 24 42c-9.941 0-18-8.059-18-18S14.059 6 24 6c4.97 0 9.47 2.015 12.728 5.272C38.386 12.93 42 17 42 17"></path>
+        <path d="M42 8v9h-9"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/tree-list.svg b/src/assets/icons/tree-list.svg
new file mode 100644
index 0000000..2897b47
--- /dev/null
+++ b/src/assets/icons/tree-list.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M38 20H18V28H38V20Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M32 6H18V14H32V6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M44 34H18V42H44V34Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M17 10H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17 24H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17 38H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5 44V4" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/undo.svg b/src/assets/icons/undo.svg
new file mode 100644
index 0000000..bb7e92e
--- /dev/null
+++ b/src/assets/icons/undo.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6 9V17H14" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ungroup.svg b/src/assets/icons/ungroup.svg
new file mode 100644
index 0000000..22c1250
--- /dev/null
+++ b/src/assets/icons/ungroup.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.2727 4H4V11.2727H11.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M43.9998 36.7271H36.7271V43.9998H43.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M11.2727 24H4V31.2727H11.2727V24Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M23.9998 36.7271H16.7271V43.9998H23.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M31.2727 4H24V11.2727H31.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M43.9998 16.7271H36.7271V23.9998H43.9998V16.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M11.2729 7.63623H24.0002" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 40.3638H36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M11.2729 27.6366H27.6366V11.2729" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M28.8275 20.3633H36.7269M20.3633 36.7269V27.6282V36.7269Z" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.63672 11.2725V23.9997" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M40.3633 24V36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/unlock.svg b/src/assets/icons/unlock.svg
new file mode 100644
index 0000000..fb73dbb
--- /dev/null
+++ b/src/assets/icons/unlock.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect x="7" y="22.0476" width="34" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+    <path d="M14 22V14.0047C13.9948 8.87022 17.9227 4.56718 23.0859 4.05117C28.249 3.53516 32.9673 6.97408 34 12.0059" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/webtopo-svgedit/components/top-panel/index.vue b/src/components/webtopo-svgedit/components/top-panel/index.vue
index 6c44a16..c8554f9 100644
--- a/src/components/webtopo-svgedit/components/top-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/top-panel/index.vue
@@ -1 +1,97 @@
-<template><div>顶部</div></template>
+<template>
+  <div class="flex justify-between" style="width: 100%">
+    <div class="flex items-center justify-between" style="width: 220px">
+      <div class="flex items-center"> </div>
+      <el-icon
+        size="22"
+        style="cursor: pointer"
+        @click="svgEditLayoutStore.left_nav = !svgEditLayoutStore.left_nav"
+      >
+        <svg-analysis v-if="svgEditLayoutStore.left_nav" name="menu-fold"></svg-analysis>
+        <svg-analysis v-else name="menu-unfold"></svg-analysis>
+      </el-icon>
+    </div>
+    <div class="flex justify-between" style="width: calc(100% - 440px)">
+      <div class="flex items-center">
+        <el-icon title="撤销" :size="20" :class="'icon-normal'" class="ml-20px">
+          <svg-analysis name="undo"></svg-analysis>
+        </el-icon>
+        <el-icon title="重做" class="ml-5px" :class="'icon-disable'" :size="20">
+          <svg-analysis name="redo"></svg-analysis>
+        </el-icon>
+        <el-divider direction="vertical"></el-divider>
+        <el-icon title="清空" class="icon-normal" :size="20">
+          <svg-analysis name="delete"></svg-analysis>
+        </el-icon>
+        <el-divider direction="vertical"></el-divider>
+        <el-icon title="组件树" class="icon-normal" :size="20">
+          <svg-analysis name="tree-list"></svg-analysis>
+        </el-icon>
+        <el-divider direction="vertical"></el-divider>
+        <el-icon title="导入json" class="icon-normal" :size="20">
+          <svg-analysis name="import-json"></svg-analysis>
+        </el-icon>
+        <el-icon title="导出json" :size="20" class="icon-normal ml-5px">
+          <svg-analysis name="export-json"></svg-analysis>
+        </el-icon>
+        <el-divider direction="vertical"></el-divider>
+        <el-icon title="组合" class="icon-normal" :size="20">
+          <svg-analysis name="group"></svg-analysis>
+        </el-icon>
+        <el-divider direction="vertical"></el-divider>
+        <el-icon title="取消组合" class="icon-normal" :size="20">
+          <svg-analysis name="ungroup"></svg-analysis>
+        </el-icon>
+        <el-divider direction="vertical"></el-divider>
+        <el-icon title="锁定" class="icon-normal" :size="20">
+          <svg-analysis name="lock"></svg-analysis>
+        </el-icon>
+      </div>
+      <div class="flex items-center mr-20px">
+        <el-icon title="预览" class="icon-normal" :size="20">
+          <svg-analysis name="preview"></svg-analysis>
+        </el-icon>
+      </div>
+    </div>
+    <div class="flex items-center" style="width: 220px">
+      <el-icon
+        size="22"
+        style="cursor: pointer"
+        @click="svgEditLayoutStore.right_nav = !svgEditLayoutStore.right_nav"
+      >
+        <svg-analysis v-if="svgEditLayoutStore.right_nav" name="menu-unfold"></svg-analysis>
+        <svg-analysis v-else name="menu-fold"></svg-analysis>
+      </el-icon>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ElIcon, ElDivider } from 'element-plus';
+  import SvgAnalysis from '../../../../components/svg-analysis/index.vue';
+  import { useSvgEditLayoutStore } from '../../../../store/svgedit-layout';
+  const svgEditLayoutStore = useSvgEditLayoutStore();
+</script>
+<style scoped lang="less">
+  .logoimg {
+    height: 40px;
+    width: 160px;
+  }
+
+  .logo-title {
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .icon-normal {
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(80, 76, 76);
+    }
+  }
+
+  .icon-disable {
+    cursor: not-allowed;
+    color: #ccc;
+  }
+</style>
diff --git a/src/components/webtopo-svgedit/index.vue b/src/components/webtopo-svgedit/index.vue
index af7b0cf..725e2b3 100644
--- a/src/components/webtopo-svgedit/index.vue
+++ b/src/components/webtopo-svgedit/index.vue
@@ -5,7 +5,7 @@
         <top-panel></top-panel>
       </el-header>
       <el-container class="middle">
-        <el-aside class="side-nav" :class="'show-nav'">
+        <el-aside class="side-nav" :class="svgEditLayoutStore.left_nav ? 'show-nav' : 'hide-nav'">
           <el-scrollbar class="elscrooll-pc">
             <left-panel class="content-left"></left-panel>
           </el-scrollbar>
@@ -17,7 +17,7 @@
             </div>
           </el-scrollbar>
         </el-main>
-        <el-aside class="side-nav" :class="'show-nav'">
+        <el-aside class="side-nav" :class="svgEditLayoutStore.right_nav ? 'show-nav' : 'hide-nav'">
           <el-scrollbar class="elscrooll-pc">
             <right-panel></right-panel>
           </el-scrollbar>
@@ -37,6 +37,8 @@
   import CenterPanel from './components/center-panel/index.vue';
   import RightPanel from './components/right-panel/index.vue';
   import BottomPanel from './components/bottom-panel/index.vue';
+  import { useSvgEditLayoutStore } from '../../store/svgedit-layout';
+  const svgEditLayoutStore = useSvgEditLayoutStore();
 </script>
 <style scoped lang="less">
   @headerHeight: 60px;
diff --git a/src/main.ts b/src/main.ts
index 815c60e..49c4865 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,9 @@ import App from './App.vue';
 import router from './router/index';
 import 'virtual:windi.css';
 import 'virtual:svg-icons-register';
+import { createPinia } from 'pinia';
+const pinia = createPinia();
 const app = createApp(App);
+app.use(pinia);
 app.use(router);
 app.mount('#app');
diff --git a/src/store/svgedit-layout/index.ts b/src/store/svgedit-layout/index.ts
new file mode 100644
index 0000000..da27259
--- /dev/null
+++ b/src/store/svgedit-layout/index.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+import { ISvgEditLayoutStore } from './types';
+/**
+ * 编辑器布局状态
+ */
+export const useSvgEditLayoutStore = defineStore('svgedit-layout-store', {
+  state: (): ISvgEditLayoutStore => {
+    return {
+      left_nav: true,
+      right_nav: true
+    };
+  },
+  getters: {},
+  actions: {}
+});
diff --git a/src/store/svgedit-layout/types.ts b/src/store/svgedit-layout/types.ts
new file mode 100644
index 0000000..a2ffb84
--- /dev/null
+++ b/src/store/svgedit-layout/types.ts
@@ -0,0 +1,4 @@
+export interface ISvgEditLayoutStore {
+  left_nav: boolean;
+  right_nav: boolean;
+}
diff --git a/tsconfig.json b/tsconfig.json
index bcc4abd..efd52b8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,8 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["vite-plugin-svg-icons/client"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/vite.config.ts b/vite.config.ts
index 7867012..9ea6314 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,9 +15,14 @@ export default defineConfig({
     WindiCSS(),
     createSvgIconsPlugin({
       // 指定需要缓存的图标文件夹
-      iconDirs: [resolve(process.cwd(), 'src/assets/svgs')],
+      iconDirs: [
+        resolve(process.cwd(), 'src/assets/svgs'),
+        resolve(process.cwd(), 'src/assets/icons')
+      ],
       // 指定symbolId格式
-      symbolId: 'svg-[name]'
+      symbolId: 'svg-[name]',
+      // 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
+      svgoOptions: false
     })
   ]
 });