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,24 +333,24 @@ 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)
           },
           {
             deep: true,
           },
         )
+      } else {
+        watchCallback?.()
       }
 
       props.loading
@@ -531,7 +377,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       unmount()
-      watchOptionsReturn?.()
+      watchCallback?.()
     })
 
     return {