feat: 新增侧边栏

index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit" />
+    <meta name="description" content="低代码平台">
+    <meta name="keywords" content="GoView，goview，低代码，可视化">
+    <meta name="author" content="奔跑的面条，面条">
     <meta
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"

src/components/GoUserInfo/index.ts

@@ -0,0 +1,3 @@
+import GoUserInfo from './index.vue';
+
+export { GoUserInfo };

src/components/UserInfo/index.ts

@@ -1,3 +0,0 @@
-import UserInfo from './index.vue';
-
-export { UserInfo };

src/layout/components/LayoutHeaderPro/index.vue

@@ -10,12 +10,12 @@
       <slot name="ri-left"></slot>
     </template>
     <template #ri-right>
-      <user-info></user-info>
+      <go-user-info></go-user-info>
       <slot name="ri-right"></slot>
     </template>
   </layout-header>
 </template>
 <script setup lang="ts">
 import { LayoutHeader } from '@/layout/components/LayoutHeader'
-import { UserInfo } from '@/components/UserInfo'
+import { GoUserInfo } from '@/components/GoUserInfo'
 </script>

src/plugins/icon.ts

@@ -10,7 +10,7 @@ import {
   DesktopOutline as DesktopOutlineIcon,
   Download as DownloadIcon,
   DownloadOutline as DownloadOutlineIcon,
-  Open as OpenIcon,
+  Share as ShareIcon,
   Send as SendIcon,
   InformationCircleOutline as InformationCircleIcon,
   Grid as GridIcon,
@@ -50,7 +50,8 @@ import {
   Leaf as LeafIcon,
   ColorWand as ColorWandIcon,
   ArrowBack as ArrowBackIcon,
-  ArrowForward as ArrowForwardIcon
+  ArrowForward as ArrowForwardIcon,
+  Planet as PawIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -125,7 +126,7 @@ const ionicons5 = {
   DownloadIcon,
   DownloadOutlineIcon,
   // 导出
-  OpenIcon,
+  ShareIcon,
   // 导出
   SendIcon,
   // 信息
@@ -180,7 +181,9 @@ const ionicons5 = {
   // 撤回
   ArrowBackIcon,
   // 前进
-  ArrowForwardIcon
+  ArrowForwardIcon,
+  // 狗爪
+  PawIcon
 }
 
 const carbon = {

src/styles/common/_dark.scss

@@ -29,6 +29,7 @@ $dark: (
     ),
   // hover 边框颜色
     hover-border-color: $--color-dark-bg-5,
+    hover-border-color-shallow: $--color-dark-bg-3,
   // 阴影
     box-shadow: 0 8px 10px #1e1e1e1f
     

src/styles/common/_light.scss

@@ -31,6 +31,7 @@ $light: (
     ),
   // hover 边框颜色
     hover-border-color: $--color-light-bg-4,
-  // 阴影
+    hover-border-color-shallow: $--color-light-bg-3,
+    // 阴影
     box-shadow: 0 8px 10px #00000012
 );

src/styles/common/var.scss

@@ -25,7 +25,6 @@ $--color-light-bg-4: #e3e3e4;
 $--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
 $--color-light-bg-5: #bebebe;
 $--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
-$--color-light-border: #efeff5;
 
 // 变暗值
 $--dark-shalow: 2%;
@@ -42,7 +41,6 @@ $--color-dark-bg-4: #313132;
 $--color-dark-bg-4-shallow: darken($--color-dark-bg-4, $--dark-shalow);
 $--color-dark-bg-5: #373739;
 $--color-dark-bg-5-shallow: darken($--color-dark-bg-5, $--dark-shalow);
-$--color-dark-border: #333335;
 
 // 最大宽度
 $--max-width: 1920px;

src/views/chart/ContentBox/index.vue

@@ -151,11 +151,16 @@ $topOrBottomHeight: 40px;
     border-bottom: 1px solid;
     @include filter-border-color('background-color1');
   }
+  
   .content {
     height: calc(100vh - #{$--header-height});
     overflow: hidden;
   }
 
+  .aside {
+    position: relative;
+  }
+
   .content-height-show-top-bottom {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
   }

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

@@ -1,38 +1,172 @@
 <template>
-  <div class="go-chart-edit-tools" :class="settingStore.getChartToolsStatus">
+  <div
-    <!-- aside -->
+    class="go-chart-edit-tools"
-    <div v-if="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE" class="tools-aside"></div>
+    :class="[
-    <!-- dock -->
+      settingStore.getChartToolsStatus,
-    <div v-else class="tools-dock"></div>
+      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;
+$dockBottom: 60px;
-$asideBottom: 100px;
+$dockMiniWidth: 200px;
-@include go('chart-edit-tools') {
+$dockMiniBottom: 53px;
+$asideBottom: 70px;
+
+@include go("chart-edit-tools") {
+  @extend .go-background-filter;
   position: absolute;
-  &.dock {
+  display: flex;
-    right: 10px;
+  justify-content: space-around;
-    bottom: $asideBottom;
+  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;
+    padding: 8px 30px;
-  }
+    bottom: $dockBottom;
-  .tools-aside {
+    transform: translateX(-50%);
-
-  }
-  .tools-dock {
 
+    .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 = () => {
+
+}

src/views/chart/HeaderRightBtn/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space class="go-mt-0">
-    <n-button v-for="item in btnList" :key="item.title" ghost size="small" @click="item.event">
+    <n-button v-for="item in btnList" :key="item.title" ghost @click="item.event">
       <template #icon>
         <component :is="item.icon"></component>
       </template>
@@ -14,13 +14,12 @@ import { shallowReactive } from 'vue'
 import { renderIcon, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
-import { canvasCut, downloadTextFile } from '@/utils'
 import { useRoute } from 'vue-router'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { icon } from '@/plugins'
 
-const { BrowsersOutlineIcon, SendIcon, DownloadIcon } = icon.ionicons5
+const { BrowsersOutlineIcon, SendIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 
 const routerParamsInfo = useRoute()
@@ -54,45 +53,6 @@ const previewHandle = () => {
   routerTurnByPath(path, [previewId], undefined, true)
 }
 
-// 导入
-const importHandle = () => {}
-
-// 导出
-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)
-}
-
 // 发布
 const sendHandle = () => {
   window['$message'].warning('该功能暂未实现（因为压根没有后台）')
@@ -105,12 +65,6 @@ const btnList = shallowReactive([
     icon: renderIcon(BrowsersOutlineIcon),
     event: previewHandle
   },
-  {
-    select: true,
-    title: '下载',
-    icon: renderIcon(DownloadIcon),
-    event: exportHandle
-  },
   {
     select: true,
     title: '发布',