fix: 修改缩放的联动

src/plugins/icon.ts

@@ -22,6 +22,7 @@ import {
   PersonOutline as PersonOutlineIcon,
   LogOutOutline as LogOutOutlineIcon,
   ChatboxEllipses as ChatboxEllipsesIcon,
+  LockOpenOutline as LockOpenOutlineIcon,
   LockClosedOutline as LockClosedOutlineIcon,
   HelpCircleOutline as HelpOutlineIcon,
   CodeSlash as CodeSlashIcon,
@@ -46,7 +47,8 @@ import {
   GraphicalDataFlow as GraphicalDataFlowIcon,
   Store as StoreIcon,
   Devices as DevicesIcon,
-  ObjectStorage as ObjectStorageIcon
+  ObjectStorage as ObjectStorageIcon,
+  DicomOverlay as DicomOverlayIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -61,6 +63,7 @@ const ionicons5 = {
   // 退出
   LogOutOutlineIcon,
   // 锁
+  LockOpenOutlineIcon,
   LockClosedOutlineIcon,
   // 人
   PersonIcon,
@@ -142,7 +145,9 @@ const carbon = {
   // 模板市场
   StoreIcon,
   // 我的模板
-  ObjectStorageIcon
+  ObjectStorageIcon,
+  // 键盘
+  DicomOverlayIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/plugins/naive.ts

@@ -59,6 +59,7 @@ import {
   NPopover,
   NPagination,
   NSelect,
+  NSlider,
   NRadioGroup,
   NRadio,
   NSteps,
@@ -79,6 +80,7 @@ import {
   NSkeleton,
   NCarousel,
   NScrollbar,
+  NPopselect,
   NCollapseTransition
 } from 'naive-ui';
 
@@ -141,6 +143,7 @@ const naive = create({
     NDataTable,
     NPopover,
     NPagination,
+    NSlider,
     NSelect,
     NRadioGroup,
     NRadio,
@@ -162,6 +165,7 @@ const naive = create({
     NSkeleton,
     NCarousel,
     NScrollbar,
+    NPopselect,
     NCollapseTransition
   ],
 });

src/store/modules/chartEditStore/chartEditStore.ts

@@ -53,7 +53,6 @@ export const useChartEditStoreStore = defineStore({
       value: any
     ): void {
       const dom = this.getEditCanvas.editContentDom
-      console.log(dom);
       if (dom) {
         // @ts-ignore
         dom.style[key] = value
@@ -120,11 +119,12 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 设置缩放
     setScale(scale: number, sys = true): void {
-      console.log(scale);
-      this.setPageAttribute('transform', `scale(${scale})`)
-      this.getEditCanvas.userScale = scale
-      if (sys) {
-        this.getEditCanvas.scale = scale
+      if(!this.getEditCanvas.lockScale) {
+        this.setPageAttribute('transform', `scale(${scale})`)
+        this.getEditCanvas.userScale = scale
+        if (sys) {
+          this.getEditCanvas.scale = scale
+        }
       }
     }
   }

src/views/chart/components/ContentBox/index.vue

@@ -23,7 +23,7 @@
       </n-space>
     </div>
 
-    <aside class="content" :class="{ hideScroll: hideScrollbar }">
+    <aside class="content">
       <n-scrollbar x-scrollable>
         <n-scrollbar>
           <slot></slot>
@@ -72,19 +72,13 @@ defineProps({
   }
 })
 
-const hideScrollbar = computed(() => {
-  return (
-    chartEditStore.getEditCanvas.userScale <= chartEditStore.getEditCanvas.scale
-  )
-})
-
 const backHandle = () => {
   emit('back')
 }
 </script>
 
 <style lang="scss" scoped>
-$topHeight: 36px;
+$topHeight: 40px;
 @include go(content-box) {
   height: calc(100vh - #{$--header-height});
   margin: 1px;
@@ -126,7 +120,7 @@ $topHeight: 36px;
     justify-content: space-between;
     flex-wrap: nowrap;
     align-items: center;
-    height: 36px;
+    height: $topHeight;
     padding: 0 10px;
     .mt-1 {
       margin-top: 2px;
@@ -140,17 +134,5 @@ $topHeight: 36px;
     height: calc(100vh - #{$--header-height} - #{$topHeight});
     overflow: hidden;
   }
-  @include deep() {
-    .content {
-      &.hideScroll {
-        .n-scrollbar-container {
-          overflow: hidden;
-        }
-        .n-scrollbar-rail {
-          display: none;
-        }
-      }
-    }
-  }
 }
 </style>

src/views/chart/components/ContentEdit/components/EditBottom/index.ts

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

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

@@ -0,0 +1,180 @@
+<template>
+  <div class="go-edit-bottom">
+    <n-popselect :options="shortcutKeyOptions" size="medium">
+      <n-button class="scale-btn" secondary size="mini">
+        <n-icon class="lock-icon" size="18" :depth="2">
+          <DicomOverlayIcon />
+        </n-icon>
+      </n-button>
+    </n-popselect>
+
+    <n-space class="bottom-ri">
+      <!-- 缩放比例 -->
+      <n-select
+        :disabled="lockScale"
+        class="scale-btn"
+        v-model:value="filterValue"
+        size="mini"
+        :options="filterOptions"
+        @update:value="selectHandle"
+      />
+
+      <!-- 锁定缩放 -->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-button @click="lockHandle" text>
+            <n-icon
+              class="lock-icon"
+              :class="{ color: lockScale }"
+              size="18"
+              :depth="3"
+            >
+              <LockClosedOutlineIcon v-if="lockScale" />
+              <LockOpenOutlineIcon v-else />
+            </n-icon>
+          </n-button>
+        </template>
+        <span>点击{{ lockScale ? '解锁' : '锁定' }}当前缩放比例</span>
+      </n-tooltip>
+
+      <!-- 拖动 -->
+      <n-slider
+        class="scale-slider"
+        v-model:value="sliderValue"
+        :default-value="50"
+        :min="10"
+        :max="200"
+        :step="5"
+        :format-tooltip="v => `${v}%`"
+        :disabled="lockScale"
+        :marks="sliderMaks"
+        @update:value="sliderHandle"
+      />
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, shallowReactive, watchEffect } from 'vue'
+import { icon } from '@/plugins'
+const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
+const { DicomOverlayIcon } = icon.carbon
+import { getChartEditStore, getChartEditStoreEnum } from '../../hooks/useStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const chartEditStore = getChartEditStore()
+const chartEditStoreEnum = getChartEditStoreEnum()
+const { lockScale, scale, userScale } = toRefs(chartEditStore.getEditCanvas)
+
+// 缩放选项
+let filterOptions = reactive([
+  {
+    label: '自适应',
+    value: 0
+  },
+  {
+    label: '50%',
+    value: 50
+  },
+  {
+    label: '100%',
+    value: 100
+  },
+  {
+    label: '150%',
+    value: 150
+  },
+  {
+    label: '200%',
+    value: 200
+  }
+])
+
+// 选择值
+const filterValue = ref('')
+
+// 用户自选择
+const selectHandle = (v: number) => {
+  if (v === 0) {
+    chartEditStore.computedScale()
+    return
+  }
+  chartEditStore.setScale(v / 100)
+}
+
+// 点击锁处理
+const lockHandle = () => {
+  chartEditStore.setEditCanvasItem(
+    chartEditStoreEnum.LOCKSCALE,
+    !lockScale.value
+  )
+}
+
+// 拖动
+const sliderValue = ref(100)
+
+// 拖动处理
+const sliderHandle = (v: number) => {
+  chartEditStore.setScale(v / 100)
+}
+
+const sliderMaks = reactive({
+  100: ''
+})
+
+// 快捷键
+const shortcutKeyOptions = shallowReactive([
+  {
+    label: '键盘快捷键列表',
+    value: '1'
+  },
+  {
+    label: 'Ctrl + C 复制',
+    value: '2'
+  }
+])
+
+// 监听 scale 变化
+watchEffect(() => {
+  const value = (scale.value * 100).toFixed(0)
+  filterValue.value = `${value}%`
+  sliderValue.value = parseInt(value)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go(edit-bottom) {
+  width: 100%;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .bottom-ri {
+    position: relative;
+    top: 15px;
+    .lock-icon {
+      padding-top: 4px;
+      &.color {
+        color: v-bind('themeColor');
+      }
+    }
+    .scale-btn {
+      font-size: 12px;
+      @include deep() {
+        .n-base-selection-label {
+          padding: 3px;
+        }
+      }
+    }
+    .scale-slider {
+      position: relative;
+      top: -4px;
+      width: 200px;
+    }
+  }
+}
+</style>

src/views/chart/components/ContentEdit/hooks/useStore.ts

@@ -1,6 +1,10 @@
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 const chartEditStore = useChartEditStoreStore()
 
 export const getChartEditStore = () => {
   return chartEditStore
 }
+export const getChartEditStoreEnum = () => {
+  return EditCanvasTypeEnum
+}

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

@@ -9,11 +9,12 @@
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
-      <EditRange>
-      </EditRange>
+      <EditRange> </EditRange>
     </div>
     <!-- 底部控制 -->
-    <template #bottom> </template>
+    <template #bottom> 
+      <EditBottom />
+    </template>
   </ContentBox>
 </template>
 
@@ -21,6 +22,7 @@
 import { ref, onUnmounted, onMounted, computed } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
+import { EditBottom } from './components/EditBottom'
 import { getChartEditStore } from './hooks/useStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -55,6 +57,7 @@ computed(() => {})
 @include goId(chart-edit-layout) {
   position: relative;
   width: 100%;
+  overflow: hidden;
   @include background-image('background-point');
   @extend .go-point-bg;
   @include goId(chart-edit-content) {