v4.2.4

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGE LOG
 
+## 4.2.4
+
+### Feats
+
+- 优化 utils/element 包下的方法
+- 更新 vue-hooks-plus 版本至 1.8.5
+- 移除不必要的 cdn
+- 优化了类型包的一些基础类型，剔除了一些无意义的类型
+- 提取 RChart props 单独维护
+- RTable 组件新增 onContextmenu props 属性。用于在启用右键菜单时被组件强行代理右键点击事件的回调
+
+### Fixes
+
+- 修复 RChart 组件不能被正常取消 watchOptions 问题
+
 ## 4.2.3
 
 ### Fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.2.3",
+  "version": "4.2.4",
   "type": "module",
   "engines": {
     "node": ">=16.0.0",
@@ -39,7 +39,7 @@
     "pinia-plugin-persistedstate": "^3.1.0",
     "print-js": "^1.6.0",
     "vue": "^3.3.4",
-    "vue-hooks-plus": "1.8.2",
+    "vue-hooks-plus": "1.8.5",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4",
     "vuedraggable": "^4.1.0",

src/app-components/app/AppLockScreen/components/LockScreen/index.tsx

@@ -77,6 +77,11 @@ const LockScreen = defineComponent({
               clearable
               minlength={6}
               maxlength={12}
+              onKeydown={(e: KeyboardEvent) => {
+                if (e.code === 'Enter') {
+                  this.lockScreen()
+                }
+              }}
             />
           </NFormItem>
           <NButton type="primary" onClick={this.lockScreen.bind(this)}>

src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx

@@ -115,6 +115,11 @@ const UnlockScreen = defineComponent({
                   clearable
                   minlength={6}
                   maxlength={12}
+                  onKeydown={(e: KeyboardEvent) => {
+                    if (e.code === 'Enter') {
+                      this.unlockScreen()
+                    }
+                  }}
                 />
               </NFormItem>
               <NSpace justify="space-between">

src/components/RChart/index.tsx

@@ -38,188 +38,34 @@ import {
 import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
 import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
 
+import props from './props'
 import { useSetting } from '@/store'
 import { cloneDeep, throttle } from 'lodash-es'
 import { on, off, completeSize } from '@/utils/element'
 import { call } from '@/utils/vue/index'
-import { setupChartTheme, loadingOptions } from './helper'
+import { setupChartTheme } from './helper'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useResizeObserver } from '@vueuse/core'
 
-import type { PropType, WatchStopHandle } from 'vue'
-import type { AnyFC, MaybeArray } from '@/types/modules/utils'
+import type { WatchStopHandle } from 'vue'
+import type { AnyFC } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'
-import type {
-  LoadingOptions,
-  AutoResize,
-  ChartTheme,
-} from '@/components/RChart/type'
-import type {
-  UseResizeObserverReturn,
-  MaybeComputedElementRef,
-  MaybeElement,
-} from '@vueuse/core'
+import type { ChartTheme } from '@/components/RChart/type'
+import type { UseResizeObserverReturn } from '@vueuse/core'
 import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core'
 
-export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
-export type { RayChartInst } from './type'
+export type { RayChartInst, EChartsExtensionInstallRegisters } from './type'
+
+const defaultChartOptions = {
+  notMerge: false,
+  lazyUpdate: true,
+  silent: false,
+  replaceMerge: [],
+}
 
 export default defineComponent({
   name: 'RChart',
-  props: {
-    width: {
-      /**
-       *
-       * chart 容器初始化宽度
-       *
-       * 如果未能继承宽度, 则会以 200px 宽度填充
-       */
-      type: String,
-      default: '100%',
-    },
-    height: {
-      /**
-       *
-       * chart 容器初始化高度
-       *
-       * 如果未能继承高度, 则会以 200px 宽度填充
-       */
-      type: String,
-      default: '100%',
-    },
-    autoResize: {
-      /**
-       *
-       * `chart` 是否跟随窗口尺寸变化自动变化
-       *
-       * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果
-       * 默认每秒触发一次的频率
-       */
-      type: [Boolean, Object] as PropType<AutoResize>,
-      default: true,
-    },
-    canvasRender: {
-      /**
-       *
-       * `chart` 渲染器, 默认使用 `canvas`
-       *
-       * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入
-       */
-      type: Boolean,
-      default: true,
-    },
-    showAria: {
-      /**
-       *
-       * 是否开启 `chart` 无障碍访问
-       *
-       * 此选项会覆盖 `options` 中的 `aria` 配置
-       */
-      type: Boolean,
-      default: false,
-    },
-    options: {
-      type: Object as PropType<echarts.EChartsCoreOption>,
-      default: () => ({}),
-    },
-    onSuccess: {
-      /**
-       *
-       * 返回 chart 实例
-       *
-       * 渲染成功回调函数
-       *
-       * () => ECharts
-       */
-      type: [Function, Array] as PropType<MaybeArray<(e: ECharts) => void>>,
-      default: null,
-    },
-    onError: {
-      /**
-       *
-       * 渲染失败回调函数
-       *
-       * () => void
-       */
-      type: [Function, Array] as PropType<MaybeArray<() => void>>,
-      default: null,
-    },
-    theme: {
-      type: [String, Object] as PropType<ChartTheme>,
-      default: '',
-    },
-    autoChangeTheme: {
-      /**
-       *
-       * 是否自动跟随模板主题切换
-       * 如果开启此属性, 则会覆盖 `theme` 属性
-       *
-       * 注意: 这个属性重度依赖此模板
-       */
-      type: Boolean,
-      default: true,
-    },
-    use: {
-      /**
-       *
-       * 拓展 `echarts` 图表
-       * 用于自己手动拓展相关的包
-       */
-      type: Array as PropType<EChartsExtensionInstallRegisters[]>,
-      default: () => [],
-    },
-    watchOptions: {
-      /** 主动监听 options 变化 */
-      type: Boolean,
-      default: true,
-    },
-    loading: {
-      /** 加载动画 */
-      type: Boolean,
-      default: false,
-    },
-    loadingOptions: {
-      /** 配置加载动画样式 */
-      type: Object as PropType<LoadingOptions>,
-      default: () => loadingOptions(),
-    },
-    observer: {
-      /**
-       *
-       * 需要被监听尺寸的元素
-       * 需要开启 autoResize 才能生效
-       * 默认以父元素作为监听对象
-       */
-      type: Object as PropType<MaybeComputedElementRef<MaybeElement>>,
-      default: null,
-    },
-    throttleWait: {
-      /** 节流等待时间 */
-      type: Number,
-      default: 500,
-    },
-    animation: {
-      /** 是否强制启用渲染动画 */
-      type: Boolean,
-      default: true,
-    },
-    setChartOptions: {
-      /**
-       *
-       * 当 options 配置项更改时候，setOptions 方法配置项
-       *
-       * 默认值
-       * notMerge: false,
-       * lazyUpdate: true,
-       * silent: false,
-       * replaceMerge: [],
-       *
-       * 会自动进行合并配置项
-       */
-      type: Object as PropType<SetOptionOpts>,
-      default: () => ({}),
-    },
-  },
+  props,
   setup(props, { expose }) {
     const settingStore = useSetting()
     const { themeValue } = storeToRefs(settingStore)
@@ -229,7 +75,7 @@ export default defineComponent({
     let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例
     let resizeOvserverReturn: UseResizeObserverReturn | null
     const { echartTheme } = APP_THEME
-    let watchOptionsReturn: WatchStopHandle | null
+    let watchCallback: WatchStopHandle | null
 
     const cssVarsRef = computed(() => {
       const cssVars = {
@@ -266,7 +112,7 @@ export default defineComponent({
         CandlestickChart,
         ScatterChart,
         PictorialBarChart,
-      ]) // 注册类型
+      ]) // 注册 chart series type
 
       echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
 
@@ -487,17 +333,15 @@ export default defineComponent({
     watchEffect(() => {
       /** 监听 options 变化 */
       if (props.watchOptions) {
-        watchOptionsReturn = watch(
+        watchCallback = watch(
           () => props.options,
           (noptions) => {
             /** 重新组合 options */
             const options = combineChartOptions(noptions)
-            const setOpt = Object.assign({}, props.setChartOptions, {
-              notMerge: false,
-              lazyUpdate: true,
-              silent: false,
-              replaceMerge: [],
-            })
+            const setOpt = Object.assign(
+              props.setChartOptions,
+              defaultChartOptions,
+            )
             /** 如果 options 发生变动更新 echarts */
             echartInstanceRef.value?.setOption(options, setOpt)
           },
@@ -505,6 +349,8 @@ export default defineComponent({
             deep: true,
           },
         )
+      } else {
+        watchCallback?.()
       }
 
       props.loading
@@ -531,7 +377,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       unmount()
-      watchOptionsReturn?.()
+      watchCallback?.()
     })
 
     return {

src/components/RChart/props.ts

@@ -0,0 +1,170 @@
+import type * as echarts from 'echarts/core' // `echarts` 核心模块
+import type { PropType } from 'vue'
+import type { MaybeArray } from '@/types/modules/utils'
+import type {
+  LoadingOptions,
+  AutoResize,
+  ChartTheme,
+} from '@/components/RChart/type'
+import type { ECharts, SetOptionOpts } from 'echarts/core'
+import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'
+import type { EChartsExtensionInstallRegisters } from './type'
+
+import { loadingOptions } from './helper'
+
+const props = {
+  width: {
+    /**
+     *
+     * chart 容器初始化宽度
+     *
+     * 如果未能继承宽度, 则会以 200px 宽度填充
+     */
+    type: String,
+    default: '100%',
+  },
+  height: {
+    /**
+     *
+     * chart 容器初始化高度
+     *
+     * 如果未能继承高度, 则会以 200px 宽度填充
+     */
+    type: String,
+    default: '100%',
+  },
+  autoResize: {
+    /**
+     *
+     * `chart` 是否跟随窗口尺寸变化自动变化
+     *
+     * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果
+     * 默认每秒触发一次的频率
+     */
+    type: [Boolean, Object] as PropType<AutoResize>,
+    default: true,
+  },
+  canvasRender: {
+    /**
+     *
+     * `chart` 渲染器, 默认使用 `canvas`
+     *
+     * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入
+     */
+    type: Boolean,
+    default: true,
+  },
+  showAria: {
+    /**
+     *
+     * 是否开启 `chart` 无障碍访问
+     *
+     * 此选项会覆盖 `options` 中的 `aria` 配置
+     */
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Object as PropType<echarts.EChartsCoreOption>,
+    default: () => ({}),
+  },
+  onSuccess: {
+    /**
+     *
+     * 返回 chart 实例
+     *
+     * 渲染成功回调函数
+     *
+     * () => ECharts
+     */
+    type: [Function, Array] as PropType<MaybeArray<(e: ECharts) => void>>,
+    default: null,
+  },
+  onError: {
+    /**
+     *
+     * 渲染失败回调函数
+     *
+     * () => void
+     */
+    type: [Function, Array] as PropType<MaybeArray<() => void>>,
+    default: null,
+  },
+  theme: {
+    type: [String, Object] as PropType<ChartTheme>,
+    default: '',
+  },
+  autoChangeTheme: {
+    /**
+     *
+     * 是否自动跟随模板主题切换
+     * 如果开启此属性, 则会覆盖 `theme` 属性
+     *
+     * 注意: 这个属性重度依赖此模板
+     */
+    type: Boolean,
+    default: true,
+  },
+  use: {
+    /**
+     *
+     * 拓展 `echarts` 图表
+     * 用于自己手动拓展相关的包
+     */
+    type: Array as PropType<EChartsExtensionInstallRegisters[]>,
+    default: () => [],
+  },
+  watchOptions: {
+    /** 主动监听 options 变化 */
+    type: Boolean,
+    default: true,
+  },
+  loading: {
+    /** 加载动画 */
+    type: Boolean,
+    default: false,
+  },
+  loadingOptions: {
+    /** 配置加载动画样式 */
+    type: Object as PropType<LoadingOptions>,
+    default: () => loadingOptions(),
+  },
+  observer: {
+    /**
+     *
+     * 需要被监听尺寸的元素
+     * 需要开启 autoResize 才能生效
+     * 默认以父元素作为监听对象
+     */
+    type: Object as PropType<MaybeComputedElementRef<MaybeElement>>,
+    default: null,
+  },
+  throttleWait: {
+    /** 节流等待时间 */
+    type: Number,
+    default: 500,
+  },
+  animation: {
+    /** 是否强制启用渲染动画 */
+    type: Boolean,
+    default: true,
+  },
+  setChartOptions: {
+    /**
+     *
+     * 当 options 配置项更改时候，setOptions 方法配置项
+     *
+     * 默认值
+     * notMerge: false,
+     * lazyUpdate: true,
+     * silent: false,
+     * replaceMerge: [],
+     *
+     * 会自动进行合并配置项
+     */
+    type: Object as PropType<SetOptionOpts>,
+    default: () => ({}),
+  },
+}
+
+export default props

src/components/RChart/type.ts

@@ -10,6 +10,7 @@
  */
 
 import type { ECharts, EChartsCoreOption } from 'echarts/core'
+import type { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
 
 export interface ChartThemeRawModules {
   default: Record<string, UnknownObjectKey>
@@ -66,3 +67,5 @@ export interface RayChartInst {
    */
   render: () => void
 }
+
+export type EChartsExtensionInstallRegisters = typeof CanvasRenderer

src/components/RIcon/index.tsx

@@ -65,7 +65,6 @@ const RIcon = defineComponent({
     },
   },
   setup(props) {
-    const modelColor = computed(() => props.color)
     const symbolId = computed(() => `#${props.prefix}-${props.name}`)
     const cssVars = computed(() => {
       const cssVar = {
@@ -82,7 +81,7 @@ const RIcon = defineComponent({
       return cssVar
     })
 
-    const handleClick = (e: MouseEvent) => {
+    const iconClick = (e: MouseEvent) => {
       const { onClick } = props
 
       if (onClick) {
@@ -91,10 +90,9 @@ const RIcon = defineComponent({
     }
 
     return {
-      modelColor,
       symbolId,
       cssVars,
-      handleClick,
+      iconClick,
     }
   },
   render() {
@@ -102,12 +100,12 @@ const RIcon = defineComponent({
       <span
         class={['ray-icon', this.customClassName]}
         style={[this.cssVars]}
-        onClick={this.handleClick.bind(this)}
+        onClick={this.iconClick.bind(this)}
       >
         <svg
           {...({ RayIconAttribute: 'ray-icon', ariaHidden: true } as object)}
         >
-          <use {...{ 'xlink:href': this.symbolId }} fill={this.modelColor} />
+          <use {...{ 'xlink:href': this.symbolId }} fill={this.color} />
         </svg>
       </span>
     )

src/components/RIframe/src/index.tsx

@@ -53,24 +53,18 @@ const RIframe = defineComponent({
       }
     }
 
-    const getIframeRef = () => {
-      const iframeEl = iframeRef.value as HTMLElement
-
-      return iframeEl
-    }
-
     expose({
       iframeInst: iframeRef,
     })
 
     onMounted(() => {
-      on(getIframeRef(), 'load', iframeLoadSuccess.bind(this))
-      on(getIframeRef(), 'error', iframeLoadError)
+      on(iframeRef.value, 'load', iframeLoadSuccess.bind(this))
+      on(iframeRef.value, 'error', iframeLoadError)
     })
 
     onBeforeUnmount(() => {
-      off(getIframeRef(), 'load', iframeLoadSuccess)
-      off(getIframeRef(), 'error', iframeLoadError)
+      off(iframeRef.value, 'load', iframeLoadSuccess)
+      off(iframeRef.value, 'error', iframeLoadError)
     })
 
     return {

src/components/RQRCode/src/index.tsx

@@ -129,6 +129,8 @@ export default defineComponent({
           () => props.text,
           () => renderQRCode(),
         )
+      } else {
+        watchCallback?.()
       }
     })
 
@@ -141,7 +143,7 @@ export default defineComponent({
       renderQRCode()
     })
     onBeforeUnmount(() => {
-      watchCallback && watchCallback()
+      watchCallback?.()
     })
 
     return {
@@ -175,7 +177,7 @@ export default defineComponent({
                 this.$slots.errorAction()
               ) : (
                 <>
-                  <NButton text color="#ffffff">
+                  <NButton text>
                     {{
                       default: () => this.errorActionDescription,
                       icon: () => (

src/components/RTable/src/Table.tsx

@@ -21,8 +21,13 @@ import props from './props'
 import { call } from '@/utils/vue/index'
 import { uuid } from '@use-utils/hook'
 import config from './config'
+import { throttle } from 'lodash-es'
 
-import type { DropdownOption, DataTableInst } from 'naive-ui'
+import type {
+  DropdownOption,
+  DataTableInst,
+  DataTableCreateRowProps,
+} from 'naive-ui'
 import type { ComponentSize } from '@/types/modules/component'
 import type { C as CType } from './type'
 
@@ -69,8 +74,8 @@ export default defineComponent({
      * 合并 RTable 的所有 rowProps
      * 如果开启了右键菜单功能，自动会拦截右键事件
      */
-    const combineRowProps = (arr: Record<string, unknown>, idx: number) => {
-      const interceptRowProps = props.rowProps?.(arr, idx)
+    const combineRowProps = (row: Record<string, unknown>, idx: number) => {
+      const interceptRowProps = props.rowProps?.(row, idx)
 
       return {
         ...interceptRowProps,

src/components/RTable/src/props.ts

@@ -15,6 +15,7 @@ import type { PropType, VNode, VNodeChild } from 'vue'
 import type { MaybeArray } from '@/types/modules/utils'
 import type { DropdownOption, DataTableColumn } from 'naive-ui'
 import type { DownloadTableOptions, PrintTableOptions } from './type'
+import type { Recordable } from '@/types/modules/helper'
 
 const props = {
   ...dataTableProps,
@@ -107,6 +108,17 @@ const props = {
     >,
     default: null,
   },
+  onContextmenu: {
+    /**
+     *
+     * 该属性用于启用右键菜单后被 Table 强行代理后的右键点击事件回调
+     * 当右键菜单不启用时，不生效。只需要使用 rowProps 属性配置右键菜单事件即可
+     */
+    type: [Function, Array] as PropType<
+      MaybeArray<(row: Recordable, index: number, e: MouseEvent) => void>
+    >,
+    default: null,
+  },
 }
 
 export default props

src/components/RTransitionComponent/index.vue

@@ -26,7 +26,7 @@
 import { useKeepAlive } from '@/store'
 import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
 
-import type { PropType } from 'vue'
+import type { TransitionProps } from './type'
 
 /**
  *
@@ -36,20 +36,10 @@ import type { PropType } from 'vue'
 defineOptions({
   name: 'RTransitionComponent',
 })
-
-defineProps({
-  transitionPropName: {
-    type: String,
-    default: 'fade',
-  },
-  transitionMode: {
-    type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>,
-    default: 'out-in',
-  },
-  transitionAppear: {
-    type: Boolean,
-    default: false,
-  },
+withDefaults(defineProps<TransitionProps>(), {
+  transitionPropName: 'fade',
+  transitionMode: 'out-in',
+  transitionAppear: true,
 })
 
 const keepAliveStore = useKeepAlive()

src/components/RTransitionComponent/type.ts

@@ -0,0 +1,7 @@
+import type { BaseTransitionProps } from 'vue'
+
+export interface TransitionProps {
+  transitionPropName?: string
+  transitionMode?: BaseTransitionProps['mode']
+  transitionAppear?: boolean
+}

src/router/helper/helper.ts

@@ -75,7 +75,7 @@ export const orderRoutes = (routes: AppRouteRecordRaw[]) => {
     const nextOrder = next.meta?.order ?? 0
 
     if (typeof currOrder !== 'number' || typeof nextOrder !== 'number') {
-      throw new Error('orderRoutes error: order must be a number!')
+      throw new TypeError('orderRoutes error: order must be a number!')
     }
 
     if (currOrder === nextOrder) {

src/store/modules/setting/index.ts

@@ -1,7 +1,7 @@
 import { getAppDefaultLanguage } from '@/locales/helper'
 import { setStorage } from '@use-utils/cache'
 import { set } from 'lodash-es'
-import { addClass, removeClass, colorToRgba } from '@/utils/element'
+import { colorToRgba } from '@/utils/element'
 import { useI18n } from '@/hooks/web/index'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useDayjs } from '@/hooks/web/index'

src/types/modules/element.ts

@@ -1,8 +0,0 @@
-import type { VueInstance } from './vue'
-
-export type MaybeElement =
-  | HTMLElement
-  | SVGElement
-  | VueInstance
-  | undefined
-  | null

src/types/modules/utils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type CryptoJS from 'crypto-js'
+import type { BasicTarget } from './vue'
 
 export type StorageLike = 'sessionStorage' | 'localStorage'
 
@@ -56,3 +57,7 @@ export type ElementSelector = string | `attr:${string}`
 export type MaybeArray<T> = T | T[]
 
 export type DownloadAnyFileDataType = Blob | File | string | ArrayBuffer
+
+export type EventListenerTarget = BasicTarget<
+  HTMLElement | Element | Window | Document
+>

src/types/modules/vue.ts

@@ -1,14 +1,16 @@
-import type { ComponentPublicInstance, MaybeRef } from 'vue'
-import type { MaybeElement } from './element'
+import type { ComponentPublicInstance } from 'vue'
 
-export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>
+export type TargetValue<T> = T | undefined | null
 
-export type VueInstance = ComponentPublicInstance
+export type TargetType =
+  | HTMLElement
+  | Element
+  | SVGElement
+  | Window
+  | Document
+  | ComponentPublicInstance
 
-export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
-
-export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
-  MaybeRefOrGetter<T>
-
-export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
-  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
+export type BasicTarget<T extends TargetType = Element> =
+  | (() => TargetValue<T>)
+  | TargetValue<T>
+  | Ref<TargetValue<T>>

src/utils/element.ts

@@ -1,15 +1,18 @@
 import { isValueType } from '@use-utils/hook'
 import { APP_REGEX } from '@/app-config/regexConfig'
+import { unrefElement } from '@/utils/vue/index'
 
 import type {
   EventListenerOrEventListenerObject,
   PartialCSSStyleDeclaration,
   ElementSelector,
 } from '@/types/modules/utils'
+import type { EventListenerTarget } from '@/types/modules/utils'
+import type { BasicTarget } from '@/types/modules/vue'
 
 /**
  *
- * @param element Target element dom
+ * @param target Target element dom
  * @param event 绑定事件类型
  * @param handler 事件触发方法
  * @param useCapture 是否冒泡
@@ -17,19 +20,21 @@ import type {
  * @remark 给元素绑定某个事件柄方法
  */
 export const on = (
-  element: HTMLElement | Document | Window,
+  target: EventListenerTarget,
   event: string,
   handler: EventListenerOrEventListenerObject,
   useCapture: boolean | AddEventListenerOptions = false,
 ) => {
-  if (element && event && handler) {
-    element.addEventListener(event, handler, useCapture)
+  const targetElement = unrefElement(target, window)
+
+  if (targetElement && event && handler) {
+    targetElement.addEventListener(event, handler, useCapture)
   }
 }
 
 /**
  *
- * @param element Target element dom
+ * @param target Target element dom
  * @param event 卸载事件类型
  * @param handler 所需卸载方法
  * @param useCapture 是否冒泡
@@ -37,30 +42,37 @@ export const on = (
  * @remark 卸载元素上某个事件柄方法
  */
 export const off = (
-  element: HTMLElement | Document | Window,
+  target: EventListenerTarget,
   event: string,
   handler: EventListenerOrEventListenerObject,
   useCapture: boolean | AddEventListenerOptions = false,
 ) => {
-  if (element && event && handler) {
-    element.removeEventListener(event, handler, useCapture)
+  const targetElement = unrefElement(target, window)
+
+  if (targetElement && event && handler) {
+    targetElement.removeEventListener(event, handler, useCapture)
   }
 }
 
 /**
  *
- * @param element Target element dom
+ * @param target Target element dom
  * @param className 所需添加className，可: 'xxx xxx' | 'xxx' 格式添加(参考向元素绑定 css 语法)
  *
  * @remark 添加元素className(可: 'xxx xxx' | 'xxx'格式添加)
  */
-export const addClass = (element: HTMLElement, className: string) => {
-  if (element) {
+export const addClass = (
+  target: BasicTarget<Element | HTMLElement | SVGAElement>,
+  className: string,
+) => {
+  const targetElement = unrefElement(target)
+
+  if (targetElement) {
     const classes = className.trim().split(' ')
 
     classes.forEach((item) => {
       if (item) {
-        element.classList.add(item)
+        targetElement.classList.add(item)
       }
     })
   }
@@ -68,19 +80,21 @@ export const addClass = (element: HTMLElement, className: string) => {
 
 /**
  *
- * @param element Target element dom
+ * @param target Target element dom
  * @param className 所需删除className，可: 'xxx xxx' | 'xxx' 格式删除(参考向元素绑定 css 语法)
  *
  * @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
  * @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name
  */
 export const removeClass = (
-  element: HTMLElement,
+  target: BasicTarget<Element | HTMLElement | SVGAElement>,
   className: string | 'removeAllClass',
 ) => {
-  if (element) {
+  const targetElement = unrefElement(target)
+
+  if (targetElement) {
     if (className === 'removeAllClass') {
-      const classList = element.classList
+      const classList = targetElement.classList
 
       classList.forEach((curr) => classList.remove(curr))
     } else {
@@ -88,7 +102,7 @@ export const removeClass = (
 
       classes.forEach((item) => {
         if (item) {
-          element.classList.remove(item)
+          targetElement.classList.remove(item)
         }
       })
     }
@@ -97,15 +111,21 @@ export const removeClass = (
 
 /**
  *
- * @param element Target element dom
+ * @param target Target element dom
  * @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx' 格式查询(参考向元素绑定 css 语法)
  *
  * @returns 返回boolean
  *
  * @remark 元素是否含有某个className(可: 'xxx xxx' | 'xxx' 格式查询)
  */
-export const hasClass = (element: HTMLElement, className: string) => {
-  const elementClassName = element.className
+export const hasClass = (target: BasicTarget, className: string) => {
+  const targetElement = unrefElement(target)
+
+  if (!targetElement) {
+    return false
+  }
+
+  const elementClassName = targetElement.className
 
   const classes = className
     .trim()
@@ -117,7 +137,7 @@ export const hasClass = (element: HTMLElement, className: string) => {
 
 /**
  *
- * @param el Target element dom
+ * @param target Target element dom
  * @param styles 所需绑定样式(如果为字符串, 则必须以分号结尾每个行内样式描述)
  *
  *
@@ -139,10 +159,12 @@ export const hasClass = (element: HTMLElement, className: string) => {
  * ```
  */
 export const addStyle = (
-  el: HTMLElement,
+  target: BasicTarget<HTMLElement | SVGAElement>,
   styles: PartialCSSStyleDeclaration | string,
 ) => {
-  if (!el) {
+  const targetElement = unrefElement(target)
+
+  if (!targetElement) {
     return
   }
 
@@ -165,8 +187,8 @@ export const addStyle = (
   Object.keys(styleObj).forEach((key) => {
     const value = styleObj[key]
 
-    if (key in el.style) {
-      el.style[key] = value
+    if (key in targetElement.style) {
+      targetElement.style[key] = value
     }
   })
 }
@@ -177,15 +199,17 @@ export const addStyle = (
  * @param styles 所需卸载样式
  */
 export const removeStyle = (
-  el: HTMLElement,
+  target: BasicTarget<HTMLElement | SVGAElement>,
   styles: (keyof CSSStyleDeclaration & string)[],
 ) => {
-  if (!el) {
+  const targetElement = unrefElement(target)
+
+  if (!targetElement) {
     return
   }
 
   styles.forEach((curr) => {
-    el.style.removeProperty(curr)
+    targetElement.style.removeProperty(curr)
   })
 }
 

src/utils/vue/unrefElement.ts

@@ -9,17 +9,27 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import type {
-  MaybeComputedElementRef,
-  UnRefElementReturn,
-  VueInstance,
-} from '@/types/modules/vue'
-import type { MaybeElement } from '@/types/modules/element'
+import type { BasicTarget, TargetType, TargetValue } from '@/types/modules/vue'
+import type { ComponentPublicInstance } from 'vue'
 
-export function unrefElement<T extends MaybeElement>(
-  elRef: MaybeComputedElementRef<T>,
-): UnRefElementReturn<T> {
-  const plain = toValue(elRef)
+export function unrefElement<T extends TargetType>(
+  target: BasicTarget<T>,
+  defaultTarget?: T,
+) {
+  if (!target) {
+    return defaultTarget
+  }
 
-  return (plain as VueInstance)?.$el ?? plain
+  let targetElement: TargetValue<T>
+
+  if (typeof target === 'function') {
+    targetElement = target()
+  } else if (isRef(target)) {
+    targetElement =
+      (target.value as ComponentPublicInstance)?.$el ?? target.value
+  } else {
+    targetElement = target
+  }
+
+  return targetElement
 }

vite.pliugin.config.ts

@@ -23,7 +23,6 @@ import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
 import viteAutoImport from 'unplugin-auto-import/vite'
 import viteEslint from 'vite-plugin-eslint'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
-import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import unpluginViteComponents from 'unplugin-vue-components/vite'
 import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
@@ -41,7 +40,13 @@ export default function (mode: string): PluginOption[] {
     vue(),
     viteVueJSX(),
     title,
-    viteVeI18nPlugin({}),
+    viteVeI18nPlugin({
+      runtimeOnly: true,
+      compositionOnly: true,
+      forceStringify: true,
+      defaultSFCLang: 'json',
+      include: [path.resolve(__dirname, '../locales/**')],
+    }),
     viteAutoImport({
       eslintrc: {
         enabled: true,
@@ -149,13 +154,6 @@ export default function (mode: string): PluginOption[] {
       reload: true,
       build: true,
     }),
-    vueI18nPlugin({
-      runtimeOnly: true,
-      compositionOnly: true,
-      forceStringify: true,
-      defaultSFCLang: 'json',
-      include: [path.resolve(__dirname, '../locales/**')],
-    }),
     createSvgIconsPlugin({
       iconDirs: [path.resolve(process.cwd(), 'src/icons')],
       symbolId: 'icon-[dir]-[name]',
@@ -165,7 +163,6 @@ export default function (mode: string): PluginOption[] {
     viteCDNPlugin({
       modules: [
         'vue',
-        'vue-demi',
         'pinia',
         'naive-ui',
         'vue-router',