perf: 移除vue3-seamless-scroll插件

@@ -35,8 +35,7 @@
     "sortablejs": "^1.15.0",
     "video.js": "^7.20.3",
     "videojs-flvjs-es6": "^1.0.1",
-    "vue": "^3.3.4",
-    "vue3-seamless-scroll": "^2.0.1"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.1",

@@ -68,9 +68,6 @@ dependencies:
   vue:
     specifier: ^3.3.4
     version: 3.3.4
-  vue3-seamless-scroll:
-    specifier: ^2.0.1
-    version: 2.0.1
 
 devDependencies:
   '@iconify/vue':
@@ -6412,12 +6409,6 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue3-seamless-scroll@2.0.1:
-    resolution: {integrity: sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==}
-    dependencies:
-      throttle-debounce: 5.0.0
-    dev: false
-
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies:

+import type { AlarmStatusEnum } from '@/enums/datasource'
+
 /**
  * 告警列表
  */
@@ -28,7 +30,7 @@ export interface AlarmListItemType {
   deviceName: string
   type: string
   severity: string
-  status: string
+  status: AlarmStatusEnum
   startTs: string
   endTs: string
   ackTs: string

+import type { CSSProperties } from 'vue'
+import type { RenderComponentProps } from '../types'
+import { NodeUtils } from '@/hooks/business/useNodeUtils'
+import { EnableEnum, GradientDirectionEnum, type MxShapeStyleType } from '@/fitCore/types'
+
+const gradientDirectionMap = {
+  [GradientDirectionEnum.NORTH]: 'to top',
+  [GradientDirectionEnum.EAST]: 'to right',
+  [GradientDirectionEnum.SOUTH]: 'to bottom',
+  [GradientDirectionEnum.WEST]: 'to left',
+}
+
+export interface UseComponentStyleReturnType {
+  style: CSSProperties
+  textAalign?: string
+  borderColor?: string
+  borderWidth?: number
+  borderStyle?: string
+  backgroundColor?: string
+  fontFamily?: string
+  color?: string
+  fontSize?: number
+  gradientBackgroundColor?: string
+  gradientDirection?: GradientDirectionEnum
+  opacity?: number
+}
+
+export function useComponentStyle(props: RenderComponentProps): UseComponentStyleReturnType {
+  const result: UseComponentStyleReturnType = { style: {} }
+
+  const nodeUtils = new NodeUtils()
+  const { cellInfo } = props.config
+  const { id } = cellInfo || {}
+  if (!id) return result
+  const cell = nodeUtils.getCellById(id)
+
+  if (!cell) return result
+
+  const cellState = nodeUtils.getCellState(cell)
+
+  const {
+    align,
+    dashed,
+    fillColor,
+    fontColor,
+    fontFamily,
+    fontSize,
+    gradientColor,
+    gradientDirection,
+    opacity,
+    // shadow,
+    strokeColor,
+    // sketch,
+    strokeWidth = 1,
+  } = cellState.style as MxShapeStyleType
+
+  const getBackgroundColor = () => {
+    return {
+      background: gradientColor !== 'none'
+        ? gradientDirection === GradientDirectionEnum.RADIAL
+          ? `radial-gradient(${fillColor}, ${gradientColor})`
+          : `linear-gradient(${gradientDirectionMap[gradientDirection]}, ${fillColor}, ${gradientColor})`
+        : fillColor,
+    } as CSSProperties
+  }
+
+  const getBorderStyle = () => {
+    return {
+      borderColor: strokeColor,
+      borderWidth: strokeWidth,
+      borderStyle: strokeColor
+        ? dashed === EnableEnum.ENABLE
+          ? 'dashed'
+          : 'solid'
+        : 'none',
+    } as CSSProperties
+  }
+
+  return {
+    style: {
+      textAlign: align,
+      opacity,
+      fontSize,
+      fontFamily,
+      color: fontColor,
+      ...getBorderStyle(),
+      ...getBackgroundColor(),
+    },
+    textAalign: align,
+    borderColor: strokeColor,
+    borderWidth: strokeWidth,
+    borderStyle: dashed === EnableEnum.ENABLE ? 'dashed' : 'solid',
+    backgroundColor: fillColor,
+    fontFamily,
+    color: fontColor,
+    fontSize,
+    gradientBackgroundColor: gradientColor,
+    gradientDirection,
+    opacity,
+  }
+}

+import type { CSSProperties } from 'vue'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import { useThrottleFn } from '@vueuse/core'
+
+interface PropsType {
+  modelValue: boolean
+  list: Array<unknown>
+  step: number
+  limitScrollNum: number
+  hover: boolean
+  direction: String
+  singleHeight: number
+  singleWidth: number
+  singleWaitTime: number
+  isRemUnit: boolean
+  isWatch: boolean
+  delay: number
+  ease: any
+  count: number
+  copyNum: number
+  wheel: boolean
+  singleLine: boolean
+}
+
+function useExpose(apis: Record<string, any>) {
+  const instance = getCurrentInstance()
+  if (instance)
+    Object.assign(instance.proxy as Object, apis)
+}
+
+const Props = {
+  // 是否开启自动滚动
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  // 原始数据列表
+  list: {
+    type: Array,
+    required: true,
+    default: [],
+  },
+  // 步进速度，step 需是单步大小的约数
+  step: {
+    type: Number,
+    default: 1,
+  },
+  // 开启滚动的数据量
+  limitScrollNum: {
+    type: Number,
+    default: 3,
+  },
+  // 是否开启鼠标悬停
+  hover: {
+    type: Boolean,
+    default: false,
+  },
+  // 控制滚动方向
+  direction: {
+    type: String,
+    default: 'up',
+  },
+  // 单步运动停止的高度
+  singleHeight: {
+    type: Number,
+    default: 0,
+  },
+  // 单步运动停止的宽度
+  singleWidth: {
+    type: Number,
+    default: 0,
+  },
+  // 单步停止等待时间 (默认值 1000ms)
+  singleWaitTime: {
+    type: Number,
+    default: 1000,
+  },
+  // 是否开启 rem 度量
+  isRemUnit: {
+    type: Boolean,
+    default: false,
+  },
+  // 开启数据更新监听
+  isWatch: {
+    type: Boolean,
+    default: true,
+  },
+  // 动画时间
+  delay: {
+    type: Number,
+    default: 0,
+  },
+  // 动画方式
+  ease: {
+    type: [String, Object],
+    default: 'ease-in',
+  },
+  // 动画循环次数，-1 表示一直动画
+  count: {
+    type: Number,
+    default: -1,
+  },
+  // 拷贝几份滚动列表
+  copyNum: {
+    type: Number,
+    default: 1,
+  },
+  // 开启鼠标悬停时支持滚轮滚动
+  wheel: {
+    type: Boolean,
+    default: false,
+  },
+  // 启用单行滚动
+  singleLine: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+globalThis.window.cancelAnimationFrame = (function () {
+  return (
+    globalThis.window.cancelAnimationFrame
+    || function (id) {
+      return globalThis.window.clearTimeout(id)
+    }
+  )
+})()
+globalThis.window.requestAnimationFrame = (function () {
+  return (
+    globalThis.window.requestAnimationFrame
+    || function (callback) {
+      return globalThis.window.setTimeout(callback, 1000 / 60)
+    }
+  )
+})()
+
+function dataWarm(list: any[]) {
+  if (list && typeof list !== 'boolean' && list.length > 100) {
+    console.warn(
+      `数据达到了${list.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`,
+    )
+  }
+}
+
+const ScrollList = defineComponent({
+  name: 'ScrollList',
+  inheritAttrs: false,
+  props: Props,
+  emits: ['stop', 'count', 'move'],
+  setup(_props, { slots, emit, attrs }) {
+    const props = _props as unknown as PropsType
+    const scrollRef = ref(null)
+    const slotListRef = ref<HTMLDivElement | null>(null)
+    const realBoxRef = ref<HTMLDivElement | null>(null)
+    const reqFrame = ref<number | null>(null)
+    const singleWaitTimeout = ref<NodeJS.Timeout | null>(null)
+    const realBoxWidth = ref(0)
+    const realBoxHeight = ref(0)
+    const xPos = ref(0)
+    const yPos = ref(0)
+    const isHover = ref(false)
+    const _count = ref(0)
+
+    const isScroll = computed(() => props.list ? (props.list.length >= props.limitScrollNum) : false)
+
+    const realBoxStyle = computed(() => {
+      return {
+        width: realBoxWidth.value ? `${realBoxWidth.value}px` : 'auto',
+        transform: `translate(${xPos.value}px,${yPos.value}px)`,
+
+        transition: `all ${typeof props.ease === 'string'
+            ? props.ease
+            : `cubic-bezier(${
+             props.ease.x1
+             },${
+             props.ease.y1
+             },${
+             props.ease.x2
+             },${
+             props.ease.y2
+             })`
+          } ${props.delay}ms`,
+        overflow: 'hidden',
+        display: props.singleLine ? 'flex' : 'block',
+      }
+    })
+
+    const isHorizontal = computed(
+      () => props.direction === 'left' || props.direction === 'right',
+    )
+
+    const floatStyle = computed<CSSProperties>(() => {
+      return isHorizontal.value
+        ? {
+            float: 'left',
+            overflow: 'hidden',
+            display: props.singleLine ? 'flex' : 'block',
+            flexShrink: props.singleLine ? 0 : 1,
+          }
+        : { overflow: 'hidden' }
+    })
+
+    const baseFontSize = computed(() => {
+      return props.isRemUnit
+        ? parseInt(
+          globalThis.window.getComputedStyle(
+            globalThis.document.documentElement,
+            null,
+          ).fontSize,
+        )
+        : 1
+    })
+
+    const realSingleStopWidth = computed(
+      () => props.singleWidth * baseFontSize.value,
+    )
+
+    const realSingleStopHeight = computed(
+      () => props.singleHeight * baseFontSize.value,
+    )
+
+    const step = computed(() => {
+      let singleStep: number
+      const _step = props.step
+      if (isHorizontal.value)
+        singleStep = realSingleStopWidth.value
+
+      else
+        singleStep = realSingleStopHeight.value
+
+      if (singleStep > 0 && singleStep % _step > 0) {
+        console.error(
+          '如果设置了单步滚动, step 需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确。~~~~~',
+        )
+      }
+      return _step
+    })
+
+    const cancel = () => {
+      cancelAnimationFrame(reqFrame.value as number)
+      reqFrame.value = null
+    }
+
+    const animation = (
+      _direction: 'up' | 'down' | 'left' | 'right',
+      _step: number,
+      isWheel?: boolean,
+    ) => {
+      reqFrame.value = requestAnimationFrame(() => {
+        const h = realBoxHeight.value / 2
+        const w = realBoxWidth.value / 2
+        if (_direction === 'up') {
+          if (Math.abs(yPos.value) >= h) {
+            yPos.value = 0
+            _count.value += 1
+            emit('count', _count.value)
+          }
+          yPos.value -= _step
+        }
+        else if (_direction === 'down') {
+          if (yPos.value >= 0) {
+            yPos.value = h * -1
+            _count.value += 1
+            emit('count', _count.value)
+          }
+          yPos.value += _step
+        }
+        else if (_direction === 'left') {
+          if (Math.abs(xPos.value) >= w) {
+            xPos.value = 0
+            _count.value += 1
+            emit('count', _count.value)
+          }
+          xPos.value -= _step
+        }
+        else if (_direction === 'right') {
+          if (xPos.value >= 0) {
+            xPos.value = w * -1
+            _count.value += 1
+            emit('count', _count.value)
+          }
+          xPos.value += _step
+        }
+        if (isWheel)
+          return
+
+        const { singleWaitTime } = props
+        if (singleWaitTimeout.value)
+          clearTimeout(singleWaitTimeout.value)
+
+        if (realSingleStopHeight.value) {
+          if (Math.abs(yPos.value) % realSingleStopHeight.value < _step) {
+            singleWaitTimeout.value = setTimeout(() => {
+              move()
+            }, singleWaitTime)
+          }
+          else {
+            move()
+          }
+        }
+        else if (realSingleStopWidth.value) {
+          if (Math.abs(xPos.value) % realSingleStopWidth.value < _step) {
+            singleWaitTimeout.value = setTimeout(() => {
+              move()
+            }, singleWaitTime)
+          }
+          else {
+            move()
+          }
+        }
+        else {
+          move()
+        }
+      })
+    }
+
+    function move() {
+      cancel()
+      if (isHover.value || !isScroll.value || _count.value === props.count) {
+        emit('stop', _count.value)
+        _count.value = 0
+        return
+      }
+      animation(
+        props.direction as 'up' | 'down' | 'left' | 'right',
+        step.value,
+        false,
+      )
+    }
+
+    const initMove = () => {
+      dataWarm(props.list)
+      if (isHorizontal.value) {
+        let slotListWidth = (slotListRef.value as HTMLDivElement).offsetWidth
+        slotListWidth = slotListWidth * 2 + 1
+        realBoxWidth.value = slotListWidth
+      }
+
+      if (isScroll.value) {
+        realBoxHeight.value = (realBoxRef.value as HTMLDivElement).offsetHeight
+        if (props.modelValue)
+          move()
+      }
+      else {
+        cancel()
+        yPos.value = xPos.value = 0
+      }
+    }
+
+    const startMove = () => {
+      isHover.value = false
+      move()
+    }
+
+    const stopMove = () => {
+      isHover.value = true
+      if (singleWaitTimeout.value)
+        clearTimeout(singleWaitTimeout.value)
+
+      cancel()
+    }
+
+    const hoverStop = computed(
+      () => props.hover && props.modelValue && isScroll.value,
+    )
+
+    const throttleFunc = useThrottleFn((e: WheelEvent) => {
+      cancel()
+      const singleHeight = realSingleStopHeight.value
+        ? realSingleStopHeight.value
+        : 15
+      if (e.deltaY < 0)
+        animation('down', singleHeight, true)
+
+      if (e.deltaY > 0)
+        animation('up', singleHeight, true)
+    }, 30)
+
+    const onWheel = (e: WheelEvent) => {
+      throttleFunc(e)
+    }
+
+    const reset = () => {
+      cancel()
+      isHover.value = false
+      initMove()
+    }
+
+    const Reset = () => {
+      reset()
+    }
+
+    useExpose({ Reset })
+
+    watch(
+      () => props.list,
+      () => {
+        if (props.isWatch) {
+          nextTick(() => {
+            reset()
+          })
+        }
+      },
+      {
+        deep: true,
+      },
+    )
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        if (newValue)
+          startMove()
+
+        else
+          stopMove()
+      },
+    )
+
+    watch(
+      () => props.count,
+      (newValue) => {
+        if (newValue !== 0)
+          startMove()
+      },
+    )
+
+    onBeforeMount(() => {
+      cancel()
+      clearTimeout(singleWaitTimeout.value as unknown as number)
+    })
+
+    onMounted(() => {
+      if (isScroll.value)
+        initMove()
+    })
+
+    const { default: $default, html } = slots
+    const copyNum = new Array(props.copyNum).fill(null)
+
+    const getHtml = () => {
+      return (
+        <>
+          <div ref={slotListRef} style={floatStyle.value}>
+            {$default && $default()}
+          </div>
+          {isScroll.value
+            ? copyNum.map(() => {
+              if (html && typeof html === 'function')
+                return <div style={floatStyle.value}>{html()}</div>
+
+              else
+                return <div style={floatStyle.value}>{$default && $default()}</div>
+            })
+            : null}
+        </>
+      )
+    }
+
+    return () => (
+      <div ref={scrollRef} class={attrs.class}>
+        {props.wheel && props.hover
+          ? (
+          <div
+            ref={realBoxRef}
+            style={realBoxStyle.value}
+            onMouseenter={() => {
+              if (hoverStop.value)
+                stopMove()
+            }}
+            onMouseleave={() => {
+              if (hoverStop.value)
+                startMove()
+            }}
+            onWheel={(e) => {
+              if (hoverStop.value)
+                onWheel(e)
+            }}
+          >
+            {getHtml()}
+          </div>
+            )
+          : (
+          <div
+            ref={realBoxRef}
+            style={realBoxStyle.value}
+            onMouseenter={() => {
+              if (hoverStop.value)
+                stopMove()
+            }}
+            onMouseleave={() => {
+              if (hoverStop.value)
+                startMove()
+            }}
+          >
+            {getHtml()}
+          </div>
+            )}
+      </div>
+    )
+  },
+})
+
+export default ScrollList
+
+export { ScrollList }

@@ -8,7 +8,7 @@ import { ComponentEnum } from '@/components/Form/src/enum'
 import { useContentDataStoreWithOut } from '@/store/modules/contentData'
 import { DateFormatEnum } from '@/enums/timeEnum'
 import type { BasicColumn } from '@/components/Table'
-import type { CodeTypeEnum, ContentDataFieldsEnum } from '@/enums/datasource'
+import { AlarmStatusEnum, type CodeTypeEnum, type ContentDataFieldsEnum } from '@/enums/datasource'
 
 const contentDataStore = useContentDataStoreWithOut()
 
@@ -31,37 +31,12 @@ export interface TableRecordItemType {
   [ContentDataFieldsEnum.CODE_TYPE]?: Nullable<CodeTypeEnum>
 }
 
-// 告警状态
-export const alarmStatus = [
-  {
-    label: '清除未确认',
-    value: 'CLEARED_UNACK',
-    color: 'red',
-  },
-  {
-    label: '激活未确认',
-    value: 'ACTIVE_UNACK',
-    color: 'orange',
-  },
-  {
-    label: '清除已确认',
-    value: 'CLEARED_ACK',
-    color: 'cyan',
-  },
-  {
-    label: '激活已确认',
-    value: 'ACTIVE_ACK',
-    color: 'green',
-  },
-]
-
-export interface alarmListInterface {
-  deviceName: string
-  deviceAlias: string
-  status: string
-  startTs: string
+export const AlarmColorMap = {
+  [AlarmStatusEnum.CLEARED_UN_ACK]: 'red',
+  [AlarmStatusEnum.ACTIVE_UN_ACK]: 'orange',
+  [AlarmStatusEnum.CLEARED_ACK]: 'cyan',
+  [AlarmStatusEnum.ACTIVE_ACK]: 'green',
 }
-
 /**
  * 告警列表相关枚举
  */

 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
 import { Divider, Tag } from 'ant-design-vue'
-import Vue3SeamlessScroll from 'vue3-seamless-scroll/package/Vue3SeamlessScroll'
-import { useAlarmList } from './useAlarmList.hook'
-import { type alarmListInterface, alarmStatus } from './form.config'
+import { ScrollList } from './ScrollList'
 import { fetchAlarmList } from '@/api/alarm'
+import type { AlarmListItemType } from '@/api/alarm/model'
 import type { CreateComponentType } from '@/core/Library/types'
 import { useContentDataStore } from '@/store/modules/contentData'
 import { isLightboxMode } from '@/utils/env'
+import { AlarmStatusColorEnum, AlarmStatusEnum, AlarmStatusNameEnum } from '@/enums/datasource'
 import { formatToDateTime } from '@/utils/dateUtil'
 
 const props = defineProps<{
@@ -20,10 +20,8 @@ const getCellBounds = computed(
 
 const contentDataStore = useContentDataStore()
 
-const { byStatusFindLabel } = useAlarmList()
-
 const initOptions = reactive<{
-  alarmList: alarmListInterface[]
+  alarmList: AlarmListItemType[]
   scroll: boolean
   interval: number
   polling: number
@@ -72,6 +70,7 @@ onMounted(async () => {
       setInterval(initFetchAlarmList, initOptions.polling * 1000)
   }
   else {
+    const statusList = Object.values(AlarmStatusEnum)
     Object.assign(initOptions, {
       scroll: false,
       interval: 0,
@@ -80,9 +79,7 @@ onMounted(async () => {
         deviceName: `示例设备${index + 1}`,
         deviceAlias: `示例设备${index + 1}`,
         startTs: formatToDateTime(),
-        status: alarmStatus.map(item => item.value)[
-          Math.floor(Math.random() * alarmStatus.length)
-        ],
+        status: statusList[index % 4],
       })),
     })
   }
@@ -91,26 +88,28 @@ onMounted(async () => {
 
 <template>
   <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
-    <Vue3SeamlessScroll
-      v-model="initOptions.scroll" :single-wait-time="initOptions.interval"
-      :list="initOptions.alarmList" :limit-scroll-num="10" :is-rem-unit="true" :delay="10" :wheel="true" hover :style="{
+    <ScrollList
+      v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
+      :limit-scroll-num="10" :is-rem-unit="true" :delay="10" :wheel="true" hover :style="{
         width: `${getCellBounds.width}px`,
         height: `${getCellBounds.height}px`,
       }"
     >
       <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start h-15 px-2">
         <p class="text-xs">
-          设备：{{ item.deviceAlias || item.deviceName }}
+          <span>设备:</span>
+          <span class="ml-1">{{ item.deviceAlias || item.deviceName }}</span>
         </p>
-        <div class="flex items-center justify-between -mt-2">
-          <span class="text-xs">时间：{{ item.startTs }}</span>
-          <Tag class="ml-2 text-xs" :color="byStatusFindLabel(item.status, 'color')">
-            {{ byStatusFindLabel(item.status, "") }}
+        <div class="flex items-center justify-between -mt-2 text-xs">
+          <span>时间:</span>
+          <span class="ml-1">{{ item.startTs }}</span>
+          <Tag class="ml-2" :color="AlarmStatusColorEnum[item.status]">
+            {{ AlarmStatusNameEnum[item.status] }}
           </Tag>
         </div>
         <Divider class="mt-2 divider" />
       </div>
-    </Vue3SeamlessScroll>
+    </ScrollList>
   </div>
 </template>
 

-import { alarmStatus } from './form.config'
-
-export const useAlarmList = () => {
-  // 映射label
-  const byStatusFindLabel = (status: string, color: string) => {
-    if (!color) return alarmStatus.find(item => item.value === status)?.label
-    return alarmStatus.find(item => item.value === status)?.color
-  }
-  return {
-    byStatusFindLabel,
-  }
-}

@@ -335,3 +335,25 @@ export enum SocketSubscriberEnum {
   TS_SUB_CMDS = 'tsSubCmds',
   HISTORY_CMDS = 'historyCmds',
 }
+
+export enum AlarmStatusEnum {
+  CLEARED_UN_ACK = 'CLEARED_UNACK',
+  ACTIVE_UN_ACK = 'ACTIVE_UNACK',
+  CLEARED_ACK = 'CLEARED_ACK',
+  ACTIVE_ACK = 'ACTIVE_ACK',
+}
+
+export enum AlarmStatusColorEnum {
+  CLEARED_UNACK = 'red',
+  ACTIVE_UNACK = 'orange',
+  CLEARED_ACK = 'cyan',
+  ACTIVE_ACK = 'green',
+}
+
+export enum AlarmStatusNameEnum {
+  CLEARED_UNACK = '清除未确认',
+  ACTIVE_UNACK = '激活未确认',
+  CLEARED_ACK = '清除已确认',
+  ACTIVE_ACK = '激活已确认',
+}
+

@@ -18,6 +18,39 @@ export type MxState = mxgraph.mxCellState
 
 export type MxEditor = mxgraph.mxEditor
 
+export enum EnableEnum {
+  ENABLE = 1,
+  CLOSE = 0,
+}
+
+export enum GradientDirectionEnum {
+  WEST = 'west',
+  NORTH = 'north',
+  EAST = 'east',
+  SOUTH = 'south',
+  RADIAL = 'radial',
+}
+
+export interface MxShapeStyleType {
+  align: 'center'
+  dashed: EnableEnum
+  fillColor: string
+  fontColor: string
+  fontFamily: string
+  fontSize: number
+  gradientColor: string
+  gradientDirection: GradientDirectionEnum
+  opacity: number
+  shadow: EnableEnum
+  strokeColor: string
+  // fillStyle:
+  /**
+   * @description 草图模式
+   */
+  sketch: EnableEnum
+  strokeWidth: number
+}
+
 interface Entries {
   title: string
   key?: string