feat: 新增侧边栏

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -1,38 +1,172 @@
 <template>
-  <div class="go-chart-edit-tools" :class="settingStore.getChartToolsStatus">
-    <!-- aside -->
-    <div v-if="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE" class="tools-aside"></div>
-    <!-- dock -->
-    <div v-else class="tools-dock"></div>
+  <div
+    class="go-chart-edit-tools"
+    :class="[
+      settingStore.getChartToolsStatus,
+      isMini && 'isMini',
+    ]"
+    @click="isMini && (isMini = false)"
+    @mouseenter="toolsMouseoverHandle"
+    @mouseleave="toolsMouseoutHandle"
+  >
+    <n-tooltip
+      v-for="item in btnList"
+      :key="item.key"
+      :disabled="!isAside"
+      trigger="hover"
+      placement="left"
+    >
+      <template #trigger>
+        <n-button
+          v-show="!isMini"
+          class="btn-item"
+          :circle="isAside"
+          secondary
+          @click="item.handle"
+        >
+          <template #icon>
+            <n-icon size="22" v-if="isAside">
+              <component :is="item.icon"></component>
+            </n-icon>
+            <component v-else :is="item.icon"></component>
+          </template>
+          <n-text depth="3" v-show="!isAside">{{ item.name }}</n-text>
+        </n-button>
+      </template>
+      <!-- 提示 -->
+      <span>{{ item.name }}</span>
+    </n-tooltip>
+    <!-- PawIcon -->
+    <n-icon
+      v-show="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE && isMini"
+      size="22"
+      v-if="isAside"
+    >
+      <PawIcon></PawIcon>
+    </n-icon>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, h } from 'vue';
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
+import { importHandle, exportHandle } from './utils'
+import { icon } from '@/plugins'
 
+const { DownloadIcon, ShareIcon, PawIcon } = icon.ionicons5
 const settingStore = useSettingStore()
+// 鼠标悬停定时器
+let mouseTime: any = null
+// 最小化
+const isMini = ref<boolean>(true)
+// 是否是侧边栏
+const isAside = computed(() => settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE)
+
+const btnList = [{
+  key: 'import',
+  name: '导入',
+  icon: DownloadIcon,
+  handle: importHandle
+}, {
+  key: 'export',
+  name: '导出',
+  icon: ShareIcon,
+  handle: exportHandle
+}]
+
+const toolsMouseoverHandle = () => {
+  mouseTime = setTimeout(() => {
+    if (isMini.value) {
+      isMini.value = false
+    }
+  }, 200);
+}
+
+const toolsMouseoutHandle = () => {
+  clearTimeout(mouseTime)
+  if (!isMini.value) {
+    isMini.value = true
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 /* 底部区域的高度 */
-$topOrBottomHeight: 40px;
-$asideBottom: 100px;
-@include go('chart-edit-tools') {
+$dockBottom: 60px;
+$dockMiniWidth: 200px;
+$dockMiniBottom: 53px;
+$asideBottom: 70px;
+
+@include go("chart-edit-tools") {
+  @extend .go-background-filter;
   position: absolute;
-  &.dock {
-    right: 10px;
-    bottom: $asideBottom;
-    }
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 25px;
+  border: 1px solid;
+  mix-blend-mode: luminosity;
+  transition: height ease-in 1s, padding 0.4s, bottom .4s;
+  @include filter-border-color("hover-border-color-shallow");
   &.aside {
+    flex-direction: column;
+    height: auto;
+    right: 20px;
+    padding: 20px 8px;
+    bottom: $asideBottom;
+    .btn-item {
+      margin-bottom: 10px;
+      padding-bottom: 6px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      @include deep() {
+        .n-button__icon {
+          margin-right: 4px;
+        }
+      }
+    }
+    &.isMini {
+      cursor: pointer;
+      padding: 12px 8px;
+      background-color: var(--n-toggle-bar-color);
+    }
+  }
+
+  &.dock {
+    width: auto;
     left: 50%;
-    bottom: $topOrBottomHeight;
-  }
-  .tools-aside {
-
-  }
-  .tools-dock {
+    padding: 8px 30px;
+    bottom: $dockBottom;
+    transform: translateX(-50%);
 
+    .btn-item {
+      margin-right: 20px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    /* 最小化 */
+    &.isMini {
+      height: 0;
+      padding: 5px;
+      width: $dockMiniWidth;
+      bottom: $dockMiniBottom;
+      border-radius: 8px;
+      cursor: pointer;
+      border: 0px;
+      mix-blend-mode: screen;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 30px;
+      bottom: -25px;
+      cursor: pointer;
+    }
   }
 }
 </style>

src/views/chart/ContentEdit/components/EditTools/utils/index.ts

@@ -0,0 +1,47 @@
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { canvasCut, downloadTextFile } from '@/utils'
+const chartEditStore = useChartEditStore()
+
+// 导入
+export const importHandle = () => { }
+
+// 导出
+export const exportHandle = () => {
+  // 导出数据
+  downloadTextFile(JSON.stringify(chartEditStore.getStorageInfo || []), undefined, 'json')
+
+  // 导出图片
+  const ruler = document.getElementById('mb-ruler')
+  const range = document.querySelector('.go-edit-range') as HTMLElement
+  const watermark = document.getElementById('go-edit-watermark')
+  // 隐藏边距线
+  if (!ruler || !range || !watermark) {
+    window['$message'].error('导出失败！')
+    return
+  }
+  // 记录缩放比例
+  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // 去除标尺Dom
+  ruler.style.display = 'none'
+  // 百分百展示页面
+  chartEditStore.setScale(1, true)
+  // 展示水印
+  watermark.style.display = 'block'
+  
+  window['$message'].warning('生成截图和数据中, 请耐心等待...')
+  setTimeout(() => {
+    canvasCut(range, () => {
+      // 隐藏水印
+      if (watermark) watermark.style.display = 'none'
+      // 放开边距线
+      if (ruler) ruler.style.display = 'block'
+      // 还原页面大小
+      chartEditStore.setScale(scaleTemp, true)
+    })
+  }, 600)
+}
+
+// 改变工具栏展示样式
+export const changeTypeHandle = () => {
+
+}