From 06ee669d39f0b5072be6a99bd71fd2f5fbb8aa3e Mon Sep 17 00:00:00 2001
From: AsherTan <jxtanzhiqiang@gmail.com>
Date: Mon, 18 Nov 2024 10:23:27 +0800
Subject: [PATCH] refactor: split home to top/left/right components (#531)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: tanzhiqiang <tanzhiqiang@szewec.com>
Co-authored-by: 秦少卫 <nihaojob@163.com>
---
 src/views/home/components/left/index.vue  | 173 +++++++++
 src/views/home/components/right/index.vue | 183 ++++++++++
 src/views/home/components/top/index.vue   |  80 +++++
 src/views/home/index.vue                  | 408 +---------------------
 4 files changed, 445 insertions(+), 399 deletions(-)
 create mode 100644 src/views/home/components/left/index.vue
 create mode 100644 src/views/home/components/right/index.vue
 create mode 100644 src/views/home/components/top/index.vue

diff --git a/src/views/home/components/left/index.vue b/src/views/home/components/left/index.vue
new file mode 100644
index 00000000..79787525
--- /dev/null
+++ b/src/views/home/components/left/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+// 左侧组件
+import importTmpl from '@/components/importTmpl.vue';
+import fontStyle from '@/components/fontStyle.vue';
+import myMaterial from '@/components/myMaterial/index.vue';
+import tools from '@/components/tools.vue';
+import material from '@/components/material.vue';
+import layer from '@/components/layer.vue';
+import { useI18n } from 'vue-i18n';
+// 路由
+import { useRoute } from 'vue-router';
+
+const { t } = useI18n();
+
+const state = reactive({
+  menuActive: 1,
+  toolsBarShow: true,
+});
+// 左侧菜单渲染
+const menuActive = ref('importTmpl');
+const leftBarComponent = {
+  importTmpl,
+  tools,
+  material,
+  fontStyle,
+  layer,
+  myMaterial,
+};
+
+// fix: 修复vue-i18n function "t" not reactive inside ref object
+// https://github.com/intlify/vue-i18n/issues/1396#issuecomment-1716123143
+const leftBar = reactive([
+  {
+    //模板
+    key: 'importTmpl',
+    name: computed(() => t('templates')),
+    icon: 'md-book',
+  },
+  {
+    //基础元素
+    key: 'tools',
+    name: computed(() => t('elements')),
+    icon: 'md-images',
+  },
+  {
+    //字体样式
+    key: 'fontStyle',
+    name: computed(() => t('font_style')),
+    icon: 'ios-pulse',
+  },
+  {
+    // 图片元素
+    key: 'material',
+    name: computed(() => t('material.cartoon')),
+    icon: 'ios-leaf-outline',
+  },
+  {
+    // 图层
+    key: 'layer',
+    name: computed(() => t('layers')),
+    icon: 'md-reorder',
+  },
+  {
+    // 用户素材
+    key: 'myMaterial',
+    name: computed(() => t('mine')),
+    icon: 'ios-contact-outline',
+  },
+]);
+// 隐藏工具条
+const hideToolsBar = () => {
+  state.toolsBarShow = !state.toolsBarShow;
+};
+// 展示工具条
+const showToolsBar = (val) => {
+  menuActive.value = val;
+  state.toolsBarShow = true;
+};
+
+onMounted(() => {
+  // 有ID时，打开作品面板
+  const route = useRoute();
+  if (route?.query?.id) {
+    menuActive.value = 'myMaterial';
+  }
+});
+</script>
+
+<template>
+  <div :class="`left-bar ${state.toolsBarShow && 'show-tools-bar'}`">
+    <!-- 左侧菜单 -->
+    <Menu :active-name="menuActive" accordion @on-select="showToolsBar" width="65px">
+      <MenuItem v-for="item in leftBar" :key="item.key" :name="item.key" class="menu-item">
+        <Icon :type="item.icon" size="24" />
+        <div>{{ item.name }}</div>
+      </MenuItem>
+    </Menu>
+    <!-- 左侧组件 -->
+    <div class="content" v-show="state.toolsBarShow">
+      <div class="left-panel">
+        <KeepAlive>
+          <component :is="leftBarComponent[menuActive]"></component>
+        </KeepAlive>
+      </div>
+    </div>
+    <!-- 关闭按钮 -->
+    <div
+      :class="`close-btn left-btn ${state.toolsBarShow && 'left-btn-open'}`"
+      @click="hideToolsBar"
+    ></div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+// 左侧容器
+.left-bar {
+  width: 65px;
+  height: 100%;
+  background: #fff;
+  display: flex;
+  position: relative;
+
+  &.show-tools-bar {
+    width: 380px;
+  }
+}
+.ivu-menu-vertical .menu-item {
+  text-align: center;
+  padding: 10px 2px;
+  box-sizing: border-box;
+  font-size: 12px;
+
+  & > i {
+    margin: 0;
+  }
+}
+.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
+  background: none;
+}
+
+.content {
+  flex: 1;
+  width: 220px;
+  padding: 0 10px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+// 关闭按钮
+.close-btn {
+  width: 20px;
+  height: 64px;
+  cursor: pointer;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 50%;
+  position: absolute;
+  right: -20px;
+  z-index: 1;
+  top: 50%;
+  margin-top: -10px;
+
+  &.left-btn {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAgAAAAAAobJzlAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAADf0lEQVR4Ae2cvYsTQRjGE7FQkICFB1pZRyzEJkUKmzOpBEHwX9DCQkmChf4JahewsLpWFOQUzwMRPEgEy0PLpPADvEISDrVyfZ6cK0tIZrI7u7MPMi+8mb35uPnlmXczyeXmrURRdKyibAB8Dz8pywg42if4OUnIGd7Bww8Ut+GHpEATgPEll/y8DGRMtaB8hrryl30B2HzVW1Rcgx8vQ9UqaVac+Cf67cC34C+q1erHFcc5dUsDOD/RGBWv4M/hrwG8jzJ3cwFMwlDdd/BN+BZgd5ONLtd5Ac4zfEYFld0ALMMisxUFmAQa44dHdMB+TTasdM2bxJNxI7gDP7ISWNzJE1xymhF+uBzPbyvL2NZOA+oJIO/BrfP7iEGTSNtovIrY/L6sU9mA5PoAby6DtEq87JnlWF/H7+K+v/DmUQDkc23CNxbFpAogIa/Ab/IiaQoxmOThlnkG8TiKK5UUJNNR+MMYjqUaIJnWEYuXeEFTBCTXv1hUi0HCxXYWsbirqiAhb/BBWcE9KLimDEgB68pLTMAL6oBNdcBT6oBr6oAn1O9i2a2Od/DM1Jc4KBivVOYyLHFm6f4ODAoGBV0VcB0fYjAo6KqA6/gQg0FBVwVcx4cYDAq6KuA6/v+Mwel0Wmm325XhcOgqkH08/h6cyiaTSdRoNPhvBFGtVosGg0Gq8Wk7V9IO6Pf7MzgC+oBMDcgn1Ov1vEFmAvQJmRmQkN1ut3AlnQB9QDoDErLT6RSmZC6ARULmBlgUpPxWl5uCRcVhLoBFwTFsnAGLfi10AiwazklBX/txJgV9wWVSUP7tlvwbVspOyFarVfi7ac4Vvquzfyoy95DfiwOgeQHtrUFBu0bmHkFBsz721qCgXSNzj6CgWR97a1DQrpG5R1DQrI+9NSho18jcIyho1sfauqeuoDzgN3UFv6gD7qh/cK8rA84OGygv8VO+CCkrKH3g5Q1P41BB1SV+QDia4hJvQ72LB3h6gPIH/+5CvVGsntoSPwYQzxr/VgRkJoF1wP1KwvFa4SaRPgDNI+RLT2dTwTJfB+9j/jaWden5dgIe5oNnG2O+WwCb7bXWuflliSfLlAjCh4JULHMqjaIAc0tGkhdgnM6FyXI2EV+5pXNxAeTSMSHOSzg3+H2UuVsaQKq0A/eaUmiVb9yZlOk6vJSkTCZA2bRWsonBpFOrySan+wNoJmOM0LyBGwAAAABJRU5ErkJggg==);
+  }
+
+  &.left-btn-open {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
+    transform: rotateY(360deg);
+  }
+}
+</style>
diff --git a/src/views/home/components/right/index.vue b/src/views/home/components/right/index.vue
new file mode 100644
index 00000000..11f8177c
--- /dev/null
+++ b/src/views/home/components/right/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import align from '@/components/align.vue';
+import centerAlign from '@/components/centerAlign.vue';
+import flip from '@/components/flip.vue';
+
+import clone from '@/components/clone.vue';
+import hide from '@/components/hide.vue';
+import group from '@/components/group.vue';
+import lock from '@/components/lock.vue';
+import dele from '@/components/del.vue';
+
+import bgBar from '@/components/bgBar.vue';
+import setSize from '@/components/setSize.vue';
+import replaceImg from '@/components/replaceImg.vue';
+import filters from '@/components/filters.vue';
+import imgStroke from '@/components/imgStroke.vue';
+// import elementData from '@/components/elementData.vue';
+// 右侧组件
+// import attribute from '@/components/attribute.vue';
+import attributePostion from '@/components/attributePostion.vue';
+import attributeId from '@/components/attributeId.vue';
+import attributeShadow from '@/components/attributeShadow.vue';
+import attributeBorder from '@/components/attributeBorder.vue';
+import attributeRounded from '@/components/attributeRounded.vue';
+import attributeFont from '@/components/attributeFont.vue';
+import attributeTextFloat from '@/components/attributeTextFloat.vue';
+import attributeColor from '@/components/attributeColor.vue';
+import attributeBarcode from '@/components/attributeBarcode.vue';
+import attributeQrCode from '@/components/attributeQrCode.vue';
+// hooks
+import useSelectListen from '@/hooks/useSelectListen';
+
+const canvasEditor: any = inject('canvasEditor');
+
+const { mixinState } = useSelectListen(canvasEditor);
+
+const attrBarShow = ref(true);
+
+// 属性面板开关
+const switchAttrBar = () => {
+  attrBarShow.value = !attrBarShow.value;
+};
+</script>
+
+<template>
+  <!-- 属性区域 380-->
+  <div class="right-bar" v-show="attrBarShow">
+    <div style="padding-top: 10px">
+      <!-- 未选择元素时 展示背景设置 -->
+      <div v-show="!mixinState.mSelectMode">
+        <set-size></set-size>
+        <bg-bar></bg-bar>
+      </div>
+
+      <!-- 多选时展示 -->
+      <div v-show="mixinState.mSelectMode === 'multiple'">
+        <!-- 分组 -->
+        <group></group>
+        <!-- <Divider plain></Divider> -->
+        <!-- 组对齐方式 -->
+        <align></align>
+        <!-- 居中对齐 -->
+        <center-align></center-align>
+      </div>
+
+      <div v-show="mixinState.mSelectMode === 'one'" class="attr-item-box">
+        <!-- <h3>快捷操作</h3> -->
+        <!-- 分组 -->
+        <group></group>
+        <!-- <Divider plain></Divider> -->
+        <Divider plain orientation="left">
+          <h4>快捷操作</h4>
+        </Divider>
+        <div class="bg-item" v-show="mixinState.mSelectMode">
+          <lock></lock>
+          <dele></dele>
+          <clone></clone>
+          <hide></hide>
+          <edit></edit>
+        </div>
+        <!-- <Divider plain></Divider> -->
+        <!-- 居中对齐 -->
+        <center-align></center-align>
+        <!-- 替换图片 -->
+        <replaceImg></replaceImg>
+        <!-- 图片裁切 -->
+        <clip-image></clip-image>
+        <!-- 翻转 -->
+        <flip></flip>
+        <!-- 条形码属性 -->
+        <attributeBarcode></attributeBarcode>
+        <!-- 二维码 -->
+        <attributeQrCode></attributeQrCode>
+        <!-- 图片滤镜 -->
+        <filters></filters>
+        <!-- 图片描边 -->
+        <imgStroke />
+        <!-- 颜色 -->
+        <attributeColor></attributeColor>
+        <!-- 字体属性 -->
+        <attributeFont></attributeFont>
+        <!-- 字体小数点 -->
+        <attributeTextFloat></attributeTextFloat>
+        <!-- 文字内容  -->
+        <attribute-text-content></attribute-text-content>
+        <!-- 位置信息 -->
+        <attributePostion></attributePostion>
+        <!-- 阴影 -->
+        <attributeShadow></attributeShadow>
+        <!-- 边框 -->
+        <attributeBorder></attributeBorder>
+        <!-- 圆角 -->
+        <attributeRounded></attributeRounded>
+        <!-- 关联数据 -->
+        <attributeId></attributeId>
+
+        <!-- 新增字体样式使用 -->
+        <Button @click="canvasEditor.getFontJson()" size="small">获取元素数据</Button>
+      </div>
+    </div>
+    <!-- <attribute v-if="state.show"></attribute> -->
+  </div>
+  <!-- 右侧关闭按钮 -->
+  <div
+    :class="`close-btn right-btn ${attrBarShow && 'right-btn-open'}`"
+    @click="switchAttrBar"
+  ></div>
+</template>
+
+<style lang="less" scoped>
+// 右侧容器
+.right-bar {
+  width: 304px;
+  height: 100%;
+  padding: 10px;
+  overflow-y: auto;
+  background: #fff;
+}
+
+// 属性面板样式
+:deep(.attr-item) {
+  position: relative;
+  margin-bottom: 12px;
+  height: 40px;
+  padding: 0 10px;
+  background: #f6f7f9;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  .ivu-tooltip {
+    text-align: center;
+    flex: 1;
+  }
+}
+
+// 关闭按钮
+.close-btn {
+  width: 20px;
+  height: 64px;
+  cursor: pointer;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 50%;
+  position: absolute;
+  right: -20px;
+  z-index: 1;
+  top: 50%;
+  margin-top: -10px;
+
+  &.right-btn {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAgAAAAAAobJzlAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAADf0lEQVR4Ae2cvYsTQRjGE7FQkICFB1pZRyzEJkUKmzOpBEHwX9DCQkmChf4JahewsLpWFOQUzwMRPEgEy0PLpPADvEISDrVyfZ6cK0tIZrI7u7MPMi+8mb35uPnlmXczyeXmrURRdKyibAB8Dz8pywg42if4OUnIGd7Bww8Ut+GHpEATgPEll/y8DGRMtaB8hrryl30B2HzVW1Rcgx8vQ9UqaVac+Cf67cC34C+q1erHFcc5dUsDOD/RGBWv4M/hrwG8jzJ3cwFMwlDdd/BN+BZgd5ONLtd5Ac4zfEYFld0ALMMisxUFmAQa44dHdMB+TTasdM2bxJNxI7gDP7ISWNzJE1xymhF+uBzPbyvL2NZOA+oJIO/BrfP7iEGTSNtovIrY/L6sU9mA5PoAby6DtEq87JnlWF/H7+K+v/DmUQDkc23CNxbFpAogIa/Ab/IiaQoxmOThlnkG8TiKK5UUJNNR+MMYjqUaIJnWEYuXeEFTBCTXv1hUi0HCxXYWsbirqiAhb/BBWcE9KLimDEgB68pLTMAL6oBNdcBT6oBr6oAn1O9i2a2Od/DM1Jc4KBivVOYyLHFm6f4ODAoGBV0VcB0fYjAo6KqA6/gQg0FBVwVcx4cYDAq6KuA6/v+Mwel0Wmm325XhcOgqkH08/h6cyiaTSdRoNPhvBFGtVosGg0Gq8Wk7V9IO6Pf7MzgC+oBMDcgn1Ov1vEFmAvQJmRmQkN1ut3AlnQB9QDoDErLT6RSmZC6ARULmBlgUpPxWl5uCRcVhLoBFwTFsnAGLfi10AiwazklBX/txJgV9wWVSUP7tlvwbVspOyFarVfi7ac4Vvquzfyoy95DfiwOgeQHtrUFBu0bmHkFBsz721qCgXSNzj6CgWR97a1DQrpG5R1DQrI+9NSho18jcIyho1sfauqeuoDzgN3UFv6gD7qh/cK8rA84OGygv8VO+CCkrKH3g5Q1P41BB1SV+QDia4hJvQ72LB3h6gPIH/+5CvVGsntoSPwYQzxr/VgRkJoF1wP1KwvFa4SaRPgDNI+RLT2dTwTJfB+9j/jaWden5dgIe5oNnG2O+WwCb7bXWuflliSfLlAjCh4JULHMqjaIAc0tGkhdgnM6FyXI2EV+5pXNxAeTSMSHOSzg3+H2UuVsaQKq0A/eaUmiVb9yZlOk6vJSkTCZA2bRWsonBpFOrySan+wNoJmOM0LyBGwAAAABJRU5ErkJggg==);
+    transform: rotateY(180deg);
+    right: 0px;
+  }
+
+  &.right-btn-open {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
+    right: 304px;
+  }
+}
+</style>
diff --git a/src/views/home/components/top/index.vue b/src/views/home/components/top/index.vue
new file mode 100644
index 00000000..679917ac
--- /dev/null
+++ b/src/views/home/components/top/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <Header>
+    <div class="left">
+      <logo></logo>
+      <Divider type="vertical" />
+
+      <!-- 导入 -->
+      <import-Json></import-Json>
+      <Divider type="vertical" />
+      <import-file></import-file>
+      <Divider type="vertical" />
+      <Button type="text" to="/template" target="_blank">全部模板</Button>
+      <Divider type="vertical" />
+
+      <myTemplName></myTemplName>
+      <!-- 标尺开关 -->
+      <Tooltip :content="$t('grid')">
+        <iSwitch v-model="toggleModel" size="small" class="switch"></iSwitch>
+      </Tooltip>
+      <Divider type="vertical" />
+      <history></history>
+    </div>
+
+    <div class="right">
+      <a href="https://pro.kuaitu.cc/" target="_blank" alt="商业版">
+        <img width="15" :src="proIcon" alt="vue-fbric-editor" />
+      </a>
+      <!-- 管理员模式 -->
+      <admin />
+      <!-- 预览 -->
+      <previewCurrent />
+      <waterMark />
+      <save></save>
+      <login></login>
+      <lang></lang>
+    </div>
+  </Header>
+</template>
+
+<script name="Top" setup lang="ts">
+import proIcon from '@/assets/icon/proIcon.png';
+// 导入元素
+import importJson from '@/components/importJSON.vue';
+import importFile from '@/components/importFile.vue';
+
+// 顶部组件
+import logo from '@/components/logo.vue';
+import myTemplName from '@/components/myTemplName.vue';
+import previewCurrent from '@/components/previewCurrent';
+import save from '@/components/save.vue';
+import lang from '@/components/lang.vue';
+import waterMark from '@/components/waterMark.vue';
+import login from '@/components/login';
+import admin from '@/components/admin';
+import history from '@/components/history.vue';
+
+const props = defineProps(['ruler']);
+const emit = defineEmits(['update:ruler']);
+
+const toggleModel = computed({
+  get() {
+    return props.ruler;
+  },
+  set(value) {
+    emit('update:ruler', value);
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.left,
+.right {
+  display: flex;
+  align-items: center;
+  img {
+    display: block;
+    margin-right: 10px;
+  }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 910b711c..53e8fa97 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -9,72 +9,10 @@
   <div class="home">
     <Layout>
       <!-- 头部区域 -->
-      <Header v-if="state.show">
-        <div class="left">
-          <logo></logo>
-          <Divider type="vertical" />
-
-          <!-- 导入 -->
-          <import-Json></import-Json>
-          <Divider type="vertical" />
-          <import-file></import-file>
-          <Divider type="vertical" />
-          <Button type="text" to="/template" target="_blank">全部模板</Button>
-          <Divider type="vertical" />
-
-          <myTemplName></myTemplName>
-          <!-- 标尺开关 -->
-          <Tooltip :content="$t('grid')">
-            <iSwitch
-              v-model="state.ruler"
-              @on-change="rulerSwitch"
-              size="small"
-              class="switch"
-            ></iSwitch>
-          </Tooltip>
-          <Divider type="vertical" />
-          <history></history>
-        </div>
-
-        <div class="right">
-          <a href="https://pro.kuaitu.cc/" target="_blank" alt="商业版">
-            <img width="15" :src="proIcon" alt="vue-fbric-editor" />
-          </a>
-          <!-- 管理员模式 -->
-          <admin />
-          <!-- 预览 -->
-          <previewCurrent />
-          <waterMark />
-          <save></save>
-          <login></login>
-          <lang></lang>
-        </div>
-      </Header>
+      <Top v-if="state.show" :ruler="state.ruler" @update:ruler="rulerSwitch"></Top>
       <Content style="display: flex; height: calc(100vh - 64px); position: relative">
         <!-- 左侧区域 -->
-        <div v-if="state.show" :class="`left-bar ${state.toolsBarShow && 'show-tools-bar'}`">
-          <!-- 左侧菜单 -->
-          <Menu :active-name="menuActive" accordion @on-select="showToolsBar" width="65px">
-            <MenuItem v-for="item in leftBar" :key="item.key" :name="item.key" class="menu-item">
-              <Icon :type="item.icon" size="24" />
-              <div>{{ item.name }}</div>
-            </MenuItem>
-          </Menu>
-          <!-- 左侧组件 -->
-          <div class="content" v-show="state.toolsBarShow">
-            <div class="left-panel">
-              <KeepAlive>
-                <component :is="leftBarComponent[menuActive]"></component>
-              </KeepAlive>
-            </div>
-          </div>
-          <!-- 关闭按钮 -->
-          <div
-            :class="`close-btn left-btn ${state.toolsBarShow && 'left-btn-open'}`"
-            @click="hideToolsBar"
-          ></div>
-        </div>
-
+        <Left v-if="state.show"></Left>
         <!-- 画布区域 -->
         <div id="workspace">
           <div class="canvas-box">
@@ -84,164 +22,22 @@
             <zoom></zoom>
           </div>
         </div>
-
-        <!-- 属性区域 380-->
-        <div class="right-bar" v-show="state.attrBarShow">
-          <div v-if="state.show" style="padding-top: 10px">
-            <!-- 未选择元素时 展示背景设置 -->
-            <div v-show="!mixinState.mSelectMode">
-              <set-size></set-size>
-              <bg-bar></bg-bar>
-            </div>
-
-            <!-- 多选时展示 -->
-            <div v-show="mixinState.mSelectMode === 'multiple'">
-              <!-- 分组 -->
-              <group></group>
-              <!-- <Divider plain></Divider> -->
-              <!-- 组对齐方式 -->
-              <align></align>
-              <!-- 居中对齐 -->
-              <center-align></center-align>
-            </div>
-
-            <div v-show="mixinState.mSelectMode === 'one'" class="attr-item-box">
-              <!-- <h3>快捷操作</h3> -->
-              <!-- 分组 -->
-              <group></group>
-              <!-- <Divider plain></Divider> -->
-              <Divider plain orientation="left">
-                <h4>快捷操作</h4>
-              </Divider>
-              <div class="bg-item" v-show="mixinState.mSelectMode">
-                <lock></lock>
-                <dele></dele>
-                <clone></clone>
-                <hide></hide>
-                <edit></edit>
-              </div>
-              <!-- <Divider plain></Divider> -->
-              <!-- 居中对齐 -->
-              <center-align></center-align>
-              <!-- 替换图片 -->
-              <replaceImg></replaceImg>
-              <!-- 裁剪图片 -->
-              <cropperImg></cropperImg>
-              <!-- 图片裁切 -->
-              <clip-image></clip-image>
-              <!-- 翻转 -->
-              <flip></flip>
-              <!-- 条形码属性 -->
-              <attributeBarcode></attributeBarcode>
-              <!-- 二维码 -->
-              <attributeQrCode></attributeQrCode>
-              <!-- 图片滤镜 -->
-              <filters></filters>
-              <!-- 图片描边 -->
-              <imgStroke />
-              <!-- 颜色 -->
-              <attributeColor></attributeColor>
-              <!-- 字体属性 -->
-              <attributeFont></attributeFont>
-              <!-- 字体小数点 -->
-              <attributeTextFloat></attributeTextFloat>
-              <!-- 文字内容  -->
-              <attribute-text-content></attribute-text-content>
-              <!-- 位置信息 -->
-              <attributePostion></attributePostion>
-              <!-- 阴影 -->
-              <attributeShadow></attributeShadow>
-              <!-- 边框 -->
-              <attributeBorder></attributeBorder>
-              <!-- 圆角 -->
-              <attributeRounded></attributeRounded>
-              <!-- 关联数据 -->
-              <attributeId></attributeId>
-
-              <!-- 新增字体样式使用 -->
-              <Button @click="canvasEditor.getFontJson()" size="small">获取元素数据</Button>
-            </div>
-          </div>
-          <!-- <attribute v-if="state.show"></attribute> -->
-        </div>
-        <!-- 右侧关闭按钮 -->
-        <div
-          :class="`close-btn right-btn ${state.attrBarShow && 'right-btn-open'}`"
-          @click="switchAttrBar"
-        ></div>
+        <Right v-if="state.show"></Right>
       </Content>
     </Layout>
   </div>
 </template>
 
 <script name="Home" setup lang="ts">
-import proIcon from '@/assets/icon/proIcon.png';
-// 导入元素
-import importJson from '@/components/importJSON.vue';
-import importFile from '@/components/importFile.vue';
-// 路由
-import { useRoute } from 'vue-router';
-
-// import fontTmpl from '@/components/fontTmpl.vue';
+import Top from './components/top/index.vue';
+import Left from './components/left/index.vue';
+import Right from './components/right/index.vue';
 
-// 顶部组件
-import logo from '@/components/logo.vue';
-import align from '@/components/align.vue';
-import myTemplName from '@/components/myTemplName.vue';
-import centerAlign from '@/components/centerAlign.vue';
-import flip from '@/components/flip.vue';
-import previewCurrent from '@/components/previewCurrent';
-import save from '@/components/save.vue';
-import lang from '@/components/lang.vue';
-import clone from '@/components/clone.vue';
-import hide from '@/components/hide.vue';
-import group from '@/components/group.vue';
 import zoom from '@/components/zoom.vue';
 import dragMode from '@/components/dragMode.vue';
-import lock from '@/components/lock.vue';
-import dele from '@/components/del.vue';
-import waterMark from '@/components/waterMark.vue';
-import login from '@/components/login';
-import admin from '@/components/admin';
-// 左侧组件
-import importTmpl from '@/components/importTmpl.vue';
-import fontStyle from '@/components/fontStyle.vue';
-import myMaterial from '@/components/myMaterial/index.vue';
-import tools from '@/components/tools.vue';
-import material from '@/components/material.vue';
-import bgBar from '@/components/bgBar.vue';
-import setSize from '@/components/setSize.vue';
-import replaceImg from '@/components/replaceImg.vue';
-import cropperImg from '@/components/cropperImg.vue';
-import filters from '@/components/filters.vue';
-import imgStroke from '@/components/imgStroke.vue';
-// import elementData from '@/components/elementData.vue';
-// 右侧组件
-import history from '@/components/history.vue';
-import layer from '@/components/layer.vue';
-// import attribute from '@/components/attribute.vue';
-import attributePostion from '@/components/attributePostion.vue';
-import attributeId from '@/components/attributeId.vue';
-import attributeShadow from '@/components/attributeShadow.vue';
-import attributeBorder from '@/components/attributeBorder.vue';
-import attributeRounded from '@/components/attributeRounded.vue';
-import attributeFont from '@/components/attributeFont.vue';
-import attributeTextFloat from '@/components/attributeTextFloat.vue';
-import attributeColor from '@/components/attributeColor.vue';
-import attributeBarcode from '@/components/attributeBarcode.vue';
-import attributeQrCode from '@/components/attributeQrCode.vue';
-
 // 功能组件
 import { fabric } from 'fabric';
 
-// hooks
-import useSelectListen from '@/hooks/useSelectListen';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const APIHOST = import.meta.env.APP_APIHOST;
-
 import Editor, {
   IEditor,
   DringPlugin,
@@ -278,74 +74,18 @@ import Editor, {
   AddBaseTypePlugin,
   MaskPlugin,
 } from '@kuaitu/core';
-import Edit from '@/components/edit.vue';
-import ClipImage from '@/components/clipImage.vue';
-import AttributeTextContent from '@/components/attributeTextContent.vue';
+
+const APIHOST = import.meta.env.APP_APIHOST;
 
 // 创建编辑器
 const canvasEditor = new Editor() as IEditor;
 
 const state = reactive({
-  menuActive: 1,
   show: false,
-  toolsBarShow: true,
-  attrBarShow: true,
   select: null,
   ruler: true,
 });
 
-// 左侧菜单渲染
-const menuActive = ref('importTmpl');
-const leftBarComponent = {
-  importTmpl,
-  tools,
-  material,
-  fontStyle,
-  layer,
-  myMaterial,
-};
-
-// fix: 修复vue-i18n function "t" not reactive inside ref object
-// https://github.com/intlify/vue-i18n/issues/1396#issuecomment-1716123143
-const leftBar = reactive([
-  {
-    //模板
-    key: 'importTmpl',
-    name: computed(() => t('templates')),
-    icon: 'md-book',
-  },
-  {
-    //基础元素
-    key: 'tools',
-    name: computed(() => t('elements')),
-    icon: 'md-images',
-  },
-  {
-    //字体样式
-    key: 'fontStyle',
-    name: computed(() => t('font_style')),
-    icon: 'ios-pulse',
-  },
-  {
-    // 图片元素
-    key: 'material',
-    name: computed(() => t('material.cartoon')),
-    icon: 'ios-leaf-outline',
-  },
-  {
-    // 图层
-    key: 'layer',
-    name: computed(() => t('layers')),
-    icon: 'md-reorder',
-  },
-  {
-    // 用户素材
-    key: 'myMaterial',
-    name: computed(() => t('mine')),
-    icon: 'ios-contact-outline',
-  },
-]);
-
 onMounted(() => {
   // 初始化fabric
   const canvas = new fabric.Canvas('canvas', {
@@ -402,12 +142,6 @@ onMounted(() => {
   if (state.ruler) {
     canvasEditor.rulerEnable();
   }
-
-  // 有ID时，打开作品面板
-  const route = useRoute();
-  if (route?.query?.id) {
-    menuActive.value = 'myMaterial';
-  }
 });
 
 onUnmounted(() => canvasEditor.destory());
@@ -421,114 +155,12 @@ const rulerSwitch = (val) => {
   document.activeElement.blur();
 };
 
-// 隐藏工具条
-const hideToolsBar = () => {
-  state.toolsBarShow = !state.toolsBarShow;
-};
-// 展示工具条
-const showToolsBar = (val) => {
-  menuActive.value = val;
-  state.toolsBarShow = true;
-};
-// 属性面板开关
-const switchAttrBar = () => {
-  state.attrBarShow = !state.attrBarShow;
-};
-
-const { mixinState } = useSelectListen(canvasEditor);
-
 provide('fabric', fabric);
 provide('canvasEditor', canvasEditor);
 // provide('mixinState', mixinState);
 </script>
-<style lang="less" scoped>
-// 左侧容器
-.left-bar {
-  width: 65px;
-  height: 100%;
-  background: #fff;
-  display: flex;
-  position: relative;
-
-  &.show-tools-bar {
-    width: 380px;
-  }
-}
-
-// 右侧容器
-.right-bar {
-  width: 304px;
-  height: 100%;
-  padding: 10px;
-  overflow-y: auto;
-  background: #fff;
-}
-
-// 关闭按钮
-.close-btn {
-  width: 20px;
-  height: 64px;
-  cursor: pointer;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: 50%;
-  position: absolute;
-  right: -20px;
-  z-index: 1;
-  top: 50%;
-  margin-top: -10px;
-
-  &.left-btn {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAgAAAAAAobJzlAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAADf0lEQVR4Ae2cvYsTQRjGE7FQkICFB1pZRyzEJkUKmzOpBEHwX9DCQkmChf4JahewsLpWFOQUzwMRPEgEy0PLpPADvEISDrVyfZ6cK0tIZrI7u7MPMi+8mb35uPnlmXczyeXmrURRdKyibAB8Dz8pywg42if4OUnIGd7Bww8Ut+GHpEATgPEll/y8DGRMtaB8hrryl30B2HzVW1Rcgx8vQ9UqaVac+Cf67cC34C+q1erHFcc5dUsDOD/RGBWv4M/hrwG8jzJ3cwFMwlDdd/BN+BZgd5ONLtd5Ac4zfEYFld0ALMMisxUFmAQa44dHdMB+TTasdM2bxJNxI7gDP7ISWNzJE1xymhF+uBzPbyvL2NZOA+oJIO/BrfP7iEGTSNtovIrY/L6sU9mA5PoAby6DtEq87JnlWF/H7+K+v/DmUQDkc23CNxbFpAogIa/Ab/IiaQoxmOThlnkG8TiKK5UUJNNR+MMYjqUaIJnWEYuXeEFTBCTXv1hUi0HCxXYWsbirqiAhb/BBWcE9KLimDEgB68pLTMAL6oBNdcBT6oBr6oAn1O9i2a2Od/DM1Jc4KBivVOYyLHFm6f4ODAoGBV0VcB0fYjAo6KqA6/gQg0FBVwVcx4cYDAq6KuA6/v+Mwel0Wmm325XhcOgqkH08/h6cyiaTSdRoNPhvBFGtVosGg0Gq8Wk7V9IO6Pf7MzgC+oBMDcgn1Ov1vEFmAvQJmRmQkN1ut3AlnQB9QDoDErLT6RSmZC6ARULmBlgUpPxWl5uCRcVhLoBFwTFsnAGLfi10AiwazklBX/txJgV9wWVSUP7tlvwbVspOyFarVfi7ac4Vvquzfyoy95DfiwOgeQHtrUFBu0bmHkFBsz721qCgXSNzj6CgWR97a1DQrpG5R1DQrI+9NSho18jcIyho1sfauqeuoDzgN3UFv6gD7qh/cK8rA84OGygv8VO+CCkrKH3g5Q1P41BB1SV+QDia4hJvQ72LB3h6gPIH/+5CvVGsntoSPwYQzxr/VgRkJoF1wP1KwvFa4SaRPgDNI+RLT2dTwTJfB+9j/jaWden5dgIe5oNnG2O+WwCb7bXWuflliSfLlAjCh4JULHMqjaIAc0tGkhdgnM6FyXI2EV+5pXNxAeTSMSHOSzg3+H2UuVsaQKq0A/eaUmiVb9yZlOk6vJSkTCZA2bRWsonBpFOrySan+wNoJmOM0LyBGwAAAABJRU5ErkJggg==);
-  }
-
-  &.left-btn-open {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
-    transform: rotateY(360deg);
-  }
-
-  &.right-btn {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAgAAAAAAobJzlAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAADf0lEQVR4Ae2cvYsTQRjGE7FQkICFB1pZRyzEJkUKmzOpBEHwX9DCQkmChf4JahewsLpWFOQUzwMRPEgEy0PLpPADvEISDrVyfZ6cK0tIZrI7u7MPMi+8mb35uPnlmXczyeXmrURRdKyibAB8Dz8pywg42if4OUnIGd7Bww8Ut+GHpEATgPEll/y8DGRMtaB8hrryl30B2HzVW1Rcgx8vQ9UqaVac+Cf67cC34C+q1erHFcc5dUsDOD/RGBWv4M/hrwG8jzJ3cwFMwlDdd/BN+BZgd5ONLtd5Ac4zfEYFld0ALMMisxUFmAQa44dHdMB+TTasdM2bxJNxI7gDP7ISWNzJE1xymhF+uBzPbyvL2NZOA+oJIO/BrfP7iEGTSNtovIrY/L6sU9mA5PoAby6DtEq87JnlWF/H7+K+v/DmUQDkc23CNxbFpAogIa/Ab/IiaQoxmOThlnkG8TiKK5UUJNNR+MMYjqUaIJnWEYuXeEFTBCTXv1hUi0HCxXYWsbirqiAhb/BBWcE9KLimDEgB68pLTMAL6oBNdcBT6oBr6oAn1O9i2a2Od/DM1Jc4KBivVOYyLHFm6f4ODAoGBV0VcB0fYjAo6KqA6/gQg0FBVwVcx4cYDAq6KuA6/v+Mwel0Wmm325XhcOgqkH08/h6cyiaTSdRoNPhvBFGtVosGg0Gq8Wk7V9IO6Pf7MzgC+oBMDcgn1Ov1vEFmAvQJmRmQkN1ut3AlnQB9QDoDErLT6RSmZC6ARULmBlgUpPxWl5uCRcVhLoBFwTFsnAGLfi10AiwazklBX/txJgV9wWVSUP7tlvwbVspOyFarVfi7ac4Vvquzfyoy95DfiwOgeQHtrUFBu0bmHkFBsz721qCgXSNzj6CgWR97a1DQrpG5R1DQrI+9NSho18jcIyho1sfauqeuoDzgN3UFv6gD7qh/cK8rA84OGygv8VO+CCkrKH3g5Q1P41BB1SV+QDia4hJvQ72LB3h6gPIH/+5CvVGsntoSPwYQzxr/VgRkJoF1wP1KwvFa4SaRPgDNI+RLT2dTwTJfB+9j/jaWden5dgIe5oNnG2O+WwCb7bXWuflliSfLlAjCh4JULHMqjaIAc0tGkhdgnM6FyXI2EV+5pXNxAeTSMSHOSzg3+H2UuVsaQKq0A/eaUmiVb9yZlOk6vJSkTCZA2bRWsonBpFOrySan+wNoJmOM0LyBGwAAAABJRU5ErkJggg==);
-    transform: rotateY(180deg);
-    right: 0px;
-  }
-
-  &.right-btn-open {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
-    right: 304px;
-  }
-}
-
-// 属性面板样式
-:deep(.attr-item) {
-  position: relative;
-  margin-bottom: 12px;
-  height: 40px;
-  padding: 0 10px;
-  background: #f6f7f9;
-  border: none;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-
-  .ivu-tooltip {
-    text-align: center;
-    flex: 1;
-  }
-}
-
-.ivu-menu-vertical .menu-item {
-  text-align: center;
-  padding: 10px 2px;
-  box-sizing: border-box;
-  font-size: 12px;
-
-  & > i {
-    margin: 0;
-  }
-}
 
+<style lang="less" scoped>
 :deep(.ivu-layout-header) {
   --height: 45px;
   padding: 0 0px;
@@ -540,17 +172,6 @@ provide('canvasEditor', canvasEditor);
   justify-content: space-between;
 }
 
-.left,
-.right {
-  display: flex;
-  align-items: center;
-
-  img {
-    display: block;
-    margin-right: 10px;
-  }
-}
-
 .home,
 .ivu-layout {
   height: 100vh;
@@ -588,17 +209,6 @@ provide('canvasEditor', canvasEditor);
   overflow: hidden;
 }
 
-.content {
-  flex: 1;
-  width: 220px;
-  padding: 0 10px;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
-  background: none;
-}
 
 // 标尺
 .switch {