feat：新增吸附修改的全局设置

src/components/SystemSet/index.d.ts

@@ -1,8 +1,11 @@
 export type ListType = {
-  key: string
+  key: any
   type: string
   name: string
   desc: string
   value: any
+  suffix?: string
+  step?: number
+  min?: number
   tip?: string
 }

src/components/SystemSet/index.vue

@@ -21,6 +21,17 @@
                 @update:value="handleChange($event, item)"
               />
             </template>
+            <template v-else-if="item.type === 'number'">
+              <n-input-number
+                v-model:value="item.value"
+                class="input-num-width"
+                size="small"
+                :step="item.step || null"
+                :suffix="item.suffix || null"
+                :min="item.min || 0"
+                @update:value="handleChange($event, item)"
+              />
+            </template>
           </n-space>
           <n-space>
             <n-text class="item-right">{{ item.desc }}</n-text>
@@ -58,6 +69,16 @@ defineProps({
 const settingStore = useSettingStore()
 
 const list = reactive<ListType[]>([
+  {
+    key: SettingStoreEnums.CHART_ALIGN_RANGE,
+    value: settingStore.getChartAlignRange,
+    type: 'number',
+    name: '吸附距离',
+    min: 10,
+    suffix: 'px',
+    step: 2,
+    desc: '移动图表时的吸附距离'
+  },
   {
     key: SettingStoreEnums.ASIDE_ALL_COLLAPSED,
     value: settingStore.getAsideAllCollapsed,
@@ -86,18 +107,21 @@ const closeHandle = () => {
   emit('update:modelShow', false)
 }
 
-const handleChange = (e: Event, item: ListType) => {
+const handleChange = (e: MouseEvent, item: ListType) => {
   settingStore.setItem(item.key, item.value)
 }
 </script>
 
 <style lang="scss" scoped>
-@include go('system-setting') {
+@include go("system-setting") {
   @extend .go-background-filter;
   min-width: 100px;
   max-width: 60vw;
   .item-left {
     width: 200px;
   }
+  .input-num-width {
+    width: 100px;
+  }
 }
 </style>

src/settings/systemSetting.ts

@@ -8,3 +8,6 @@ export const hidePackageOneCategory = true
 
 // 切换语言是否进行路由刷新
 export const changeLangReload = false
+
+// 图表拖拽时的吸附距离（px）
+export const chartAlignRange = '10'

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -39,8 +39,10 @@ export const useChartLayoutStore = defineStore({
     }
   },
   actions: {
-    setItem(key: string, value: boolean): void {
+    setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
-      ;(this as any)[key] = value
+      this.$patch(state => {
+        state[key]= value
+      });
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
       // 重新计算拖拽区域缩放比例
       setTimeout(() => {

src/store/modules/settingStore/settingStore.d.ts

@@ -2,10 +2,12 @@ export enum SettingStoreEnums {
   HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory',
   CHANGE_LANG_RELOAD = 'changeLangReload',
   ASIDE_ALL_COLLAPSED = 'asideAllCollapsed',
+  CHART_ALIGN_RANGE = 'chartAlignRange',
 }
 
 export interface SettingStoreType {
   [SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: boolean
   [SettingStoreEnums.CHANGE_LANG_RELOAD]: boolean
   [SettingStoreEnums.ASIDE_ALL_COLLAPSED]: boolean
+  [SettingStoreEnums.CHART_ALIGN_RANGE]: number
 }

src/store/modules/settingStore/settingStore.ts

@@ -2,7 +2,8 @@ import { defineStore } from 'pinia'
 import {
   hidePackageOneCategory,
   changeLangReload,
-  asideAllCollapsed
+  asideAllCollapsed,
+  chartAlignRange
 } from '@/settings/systemSetting'
 import { asideCollapsedWidth } from '@/settings/designSetting'
 import { SettingStoreType } from './settingStore.d'
@@ -19,7 +20,8 @@ export const useSettingStore = defineStore({
     storageSetting || {
       hidePackageOneCategory,
       changeLangReload,
-      asideAllCollapsed
+      asideAllCollapsed,
+      chartAlignRange
     },
   getters: {
     getHidePackageOneCategory(): boolean {
@@ -33,11 +35,16 @@ export const useSettingStore = defineStore({
     },
     getAsideCollapsedWidth(): number {
       return this.asideAllCollapsed ? 0 : asideCollapsedWidth
+    },
+    getChartAlignRange(): number {
+      return this.chartAlignRange
     }
   },
   actions: {
-    setItem(key: string, value: boolean): void {
+    setItem<T extends keyof SettingStoreType, K extends SettingStoreType[T]>(key: T, value: K): void {
-      ; (this as any)[key] = value
+      this.$patch(state => {
+        state[key]= value
+      });
       setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state)
     },
   },

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

@@ -18,6 +18,7 @@ import { ref, reactive, computed, watch } from 'vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { CreateComponentType } from '@/packages/index.d'
 import throttle from 'lodash/throttle'
 import cloneDeep  from 'lodash/cloneDeep'
@@ -26,11 +27,10 @@ const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
 const chartEditStore = useChartEditStore()
+const settingStore = useSettingStore()
 
-// 线条集合
+// * 线条集合
 const line = reactive({
-  // 吸附距离（px）
-  minDistance: 10,
   // 行横向row（上中下），列竖线col（左中右）
   lineArr: ['rowt', 'rowc', 'rowb', 'coll', 'colc', 'colr'],
   // 展示线
@@ -42,7 +42,7 @@ const line = reactive({
   }
 })
 
-// 位置计算
+// * 位置计算
 const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
   if (!attr) return {}
   const componentStyle = {
@@ -52,26 +52,32 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
   return componentStyle
 }
 
-// 是否开始计算
+// * 吸附距离
+const minDistance = computed(()=>{
+  return settingStore.getChartAlignRange
+})
+
+// * 是否开始计算
 const isComputedLine = computed(() => {
   const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
   return isDrag
 })
 
-// 吸附判定
+// * 吸附判定
 const isSorption = (selectValue: number, componentValue: number) => {
-  const isSorption = Math.abs(selectValue - componentValue) <= line.minDistance
+  console.log(minDistance.value);
+  const isSorption = Math.abs(selectValue - componentValue) <= minDistance.value
   return isSorption
 }
 
-// 当前目标
+// * 当前目标
 const selectId = computed(() => chartEditStore.getTargetChart.selectId)
 const selectTatget = computed(
   () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
 )
 const selectAttr = computed(() => selectTatget.value.attr)
 
-// 画布坐标
+// * 画布坐标
 const canvasPositionList = computed(() => {
   return {
     id: '0',
@@ -85,7 +91,7 @@ const canvasPositionList = computed(() => {
   }
 })
 
-// 监听鼠标移动
+// * 监听鼠标移动
 watch(
   () => chartEditStore.getMousePosition,
   throttle(e => {
@@ -282,7 +288,8 @@ watch(
     deep: true
   }
 )
-// 取消对齐线
+
+// * 取消对齐线
 watch(
   () => isComputedLine.value,
   (val: boolean) => {