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

<template>
  <div class="go-edit-bottom">
    <edit-history></edit-history>

    <n-space class="bottom-ri">
      <!-- 快捷键提示 -->
      <n-popselect :options="shortcutKeyOptions" size="medium">
        <n-button class="scale-btn" quaternary size="mini">
          <n-icon class="lock-icon" size="18" :depth="2">
            <DicomOverlayIcon></DicomOverlayIcon>
          </n-icon>
        </n-button>
      </n-popselect>

      <!-- 缩放比例 -->
      <n-select
        :disabled="lockScale"
        class="scale-btn"
        v-model:value="filterValue"
        size="mini"
        :options="filterOptions"
        @update:value="selectHandle"
     ></n-select>

      <!-- 锁定缩放 -->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button @click="lockHandle" text>
            <n-icon
              class="lock-icon"
              :class="{ color: lockScale }"
              size="18"
              :depth="2"
            >
              <lock-closed-outline-icon v-if="lockScale"></lock-closed-outline-icon>
              <lock-open-outline-icon v-else></lock-open-outline-icon>
            </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="sliderFormatTooltip"
        :disabled="lockScale"
        :marks="sliderMaks"
        @update:value="sliderHandle"
     ></n-slider>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { icon } from '@/plugins'
import { EditHistory } from '../EditHistory/index'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'

const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
const { DicomOverlayIcon } = icon.carbon


// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)

const chartEditStore = useChartEditStore()
const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)

// 缩放选项
let filterOptions = [
  {
    label: '200%',
    value: 200
  },
  {
    label: '150%',
    value: 150
  },
  {
    label: '100%',
    value: 100
  },
  {
    label: '50%',
    value: 50
  },
  {
    label: '自适应',
    value: 0
  }
]

// 选择值
const filterValue = ref('')

// 用户自选择
const selectHandle = (v: number) => {
  if (v === 0) {
    chartEditStore.computedScale()
    return
  }
  chartEditStore.setScale(v / 100)
}

// 点击锁处理
const lockHandle = () => {
  chartEditStore.setEditCanvas(EditCanvasTypeEnum.LOCK_SCALE, !lockScale.value)
}

// 拖动
const sliderValue = ref(100)

// 拖动格式化
const sliderFormatTooltip = (v: string) => `${v}%`

// 拖动处理
const sliderHandle = (v: number) => {
  chartEditStore.setScale(v / 100)
}

const sliderMaks = reactive({
  100: ''
})

// 快捷键
const shortcutKeyOptions = [
  {
    label: '键盘快捷键列表',
    value: '1'
  },
  {
    label: 'Alt + ↑ 向上移动',
    value: '2'
  },
  {
    label: 'Alt + → 向右移动',
    value: '3'
  },
  {
    label: 'Alt + ↓ 向下移动',
    value: '4'
  },
  {
    label: 'Alt + ← 向左移动',
    value: '5'
  },
  {
    label: 'Alt + Delete 删除',
    value: '6'
  },
  {
    label: 'Alt + C 复制',
    value: '7'
  },
  {
    label: 'Alt + X 剪切',
    value: '8'
  },
  {
    label: 'Alt + Z 后退',
    value: '9'
  },
  {
    label: 'Alt + Shift + Z 前进',
    value: '10'
  }
]

// 监听 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 10px;
  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>