update: 补充v4.5.0版本新增一些功能，修改了一些bug

.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
     defineExpose: 'readonly',
     withDefaults: 'readonly',
     defineOptions: 'readonly',
+    defineModel: 'readonly',
   },
   rules: {
     'no-undefined': ['error'],

CHANGELOG.md

@@ -15,11 +15,11 @@
 - 放弃 `ReactivityTransform` 支持
 - 放弃 `node14, 16` 版本支持
 - 放弃 `vite4.x` 版本支持
-- 弃用 `defineModel` 方法
+- 弃用 `defineModel` 配置，`vue3.4.0` 版本该功能已经稳定
 
-主要是解决 `sameLevel` 问题与核心包 `store/men` 的一些问题。提高了性能，避免了潜在的空引用问题。
+解决 `sameLevel` 问题与核心包 `store/men` 的一些问题。提高了性能，避免了潜在的空引用问题。
 
-然后就是统一 `types` 包的导入导出行为。
+是统一 `types` 包的导入导出行为。
 
 ## Feats
 
@@ -34,12 +34,18 @@
   - 更新 `vue` 版本至 `3.4.0`
   - 更新 `@vitejs/plugin-vue-jsx` 版本至 `3.1.0`
 - `RModal` 组件相关
-  - 新增 `memoryPosition` 配置项，用于配置是否记忆上一次的位置
+  - 新增 `memo` 配置项，用于配置是否记忆上一次的位置
+- `RChart` 组件
+  - 补充部分注释
+  - 新增 `isDispose` 方法，检测当前图表是否被卸载
+- 新增 `AppVersionProvider` 注入器，用于注入 `appVersion` 全局变量，检测是否需要重新加载页面
 
 ## Fixes
 
 - 修复初始化的时候面包屑为空的问题
 - 修复 `sameLevel` 平级模式面包屑追加问题
+- `RModal` 组件
+  - 修复初始化配置 `show = true` 时，`dad` 属性不生效的问题
 
 ## 4.4.7
 

src/App.tsx

@@ -4,12 +4,14 @@ import AppStyleProvider from '@/app-components/provider/AppStyleProvider'
 import AppLockScreen from '@/app-components/app/AppLockScreen'
 import AppWatermarkProvider from '@/app-components/provider/AppWatermarkProvider'
 import AppGlobalSpin from '@/spin'
+import AppVersionProvider from '@/app-components/provider/AppVersionProvider'
 
 export default defineComponent({
   name: 'App',
   render() {
     return (
       <AppNaiveGlobalProvider>
+        <AppVersionProvider />
         <AppLockScreen />
         <AppStyleProvider />
         <AppWatermarkProvider />

src/app-components/provider/AppRequestCancelerProvider/index.tsx

@@ -29,13 +29,7 @@ const AppRequestCancelerProvider = defineComponent({
     expose()
   },
   render() {
-    return (
-      <div
-        style={{
-          display: 'none',
-        }}
-      ></div>
-    )
+    return <div class="app-style-provider"></div>
   },
 })
 

src/app-components/provider/AppStyleProvider/index.tsx

@@ -9,8 +9,6 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import './index.scss'
-
 import { get } from 'lodash-es'
 import {
   addClass,

src/app-components/provider/AppVersionProvider/index.tsx

@@ -0,0 +1,70 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2024-01-01
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 检测当前版本是否为最新版本
+ * 如果不是最新版本则弹出提示框，提示用户更新，点击确认后退出登录并且刷新资源
+ */
+
+import { RModal } from '@/components'
+
+import { getStorage, setStorage } from '@/utils'
+import { useSigningActions } from '@/store'
+
+export default defineComponent({
+  name: 'AppVersionProvider',
+  setup() {
+    const storageKey = 'appVersionProvider'
+    const {
+      pkg: { version },
+    } = __APP_CFG__
+    const cacheVersion = getStorage<string>(storageKey, 'localStorage')
+    const modalShow = ref(false)
+    const { logout } = useSigningActions()
+
+    if (version !== cacheVersion || !cacheVersion) {
+      modalShow.value = true
+
+      setStorage<string>(storageKey, version, 'localStorage')
+    }
+
+    return {
+      modalShow,
+      logout,
+    }
+  },
+  render() {
+    const { logout } = this
+
+    return (
+      <div class="app-style-provider">
+        <RModal
+          v-model:show={this.modalShow}
+          closeOnEsc={false}
+          maskClosable={false}
+          preset="dialog"
+          closable={false}
+          title="发现新版本"
+          content="当前版本已更新，点击确认加载新版本~"
+          zIndex={999999999}
+          dad
+          positiveText="确认"
+          negativeText="取消"
+          onPositiveClick={logout}
+          onNegativeClick={() => {
+            this.modalShow = false
+          }}
+        />
+      </div>
+    )
+  },
+})

src/app-config/designConfig.ts

@@ -65,6 +65,8 @@ export const APP_THEME: AppTheme = {
    *
    * 配置 echart 主题颜色
    * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json
+   *
+   * [文档地址](https://xiaodaigua-ray.github.io/ray-template-doc/ray-template-docs/advanced/echart-themes.html)
    */
   echartTheme: 'macarons',
 }

src/components/RChart/src/index.tsx

@@ -247,6 +247,7 @@ export default defineComponent({
       }
     }
 
+    // chart 是否已经销毁
     const isDispose = () => !!(echartInst && echartInst.getDom())
 
     /**
@@ -268,6 +269,14 @@ export default defineComponent({
       }
     }
 
+    /**
+     *
+     * @param key moreDropDownOptions key
+     * @param option moreDropDownOptions current click option
+     *
+     * 预设 card 风格下拉框点击
+     * 当前仅实现下载图片功能
+     */
     const dropdownSelect = (key: string | number, option: DropdownOption) => {
       if (key === 'downloadChart' && isDispose()) {
         const { filename, ...args } = props.downloadOptions
@@ -301,7 +310,6 @@ export default defineComponent({
       if (props.autoResize) {
         resizeThrottleReturn = throttle(resizeChart, props.throttleWait)
         /** 监听内容区域尺寸变化更新 chart */
-
         resizeObserverReturn = useResizeObserver(
           props.observer || rayChartWrapperRef,
           resizeThrottleReturn,
@@ -334,7 +342,6 @@ export default defineComponent({
         }
       },
     )
-
     /**
      *
      * 贴花跟随主题渲染
@@ -348,7 +355,6 @@ export default defineComponent({
         updateChartTheme()
       },
     )
-
     watchEffect(() => {
       /** 监听 options 变化 */
       if (props.watchOptions) {
@@ -365,6 +371,7 @@ export default defineComponent({
             echartInst?.setOption(options, setOpt)
           },
           {
+            // 深度监听 options
             deep: true,
           },
         )
@@ -381,6 +388,7 @@ export default defineComponent({
       echart: echartInstanceRef,
       dispose: unmount,
       render: mount,
+      isDispose,
     })
 
     onBeforeMount(async () => {

src/components/RChart/src/props.ts

@@ -52,6 +52,7 @@ const props = {
     type: Array as PropType<DropdownProps['options']>,
   },
   preset: {
+    // 是否启用预设样式
     type: String as PropType<RChartPresetType>,
   },
   contentStyle: {
@@ -153,6 +154,8 @@ const props = {
      *
      * 拓展 `echarts` 图表
      * 用于自己手动拓展相关的包
+     *
+     * 注意，该方法不支持动态调用，及时动态更新了该属性，也不会生效
      */
     type: Array as PropType<EChartsExtensionInstallRegisters[]>,
     default: () => [],

src/components/RModal/src/Modal.tsx

@@ -77,7 +77,7 @@ export default defineComponent({
 
             const target = document.getElementById(uuidEl)
 
-            if (props.memoryPosition && target) {
+            if (props.memo && target) {
               target.style.transform = `translate(${position.x}px, ${position.y}px)`
             }
           })
@@ -87,6 +87,9 @@ export default defineComponent({
           intractable = null
         }
       },
+      {
+        immediate: true,
+      },
     )
 
     return {

src/components/RModal/src/props.ts

@@ -13,7 +13,7 @@ import { modalProps } from 'naive-ui'
 
 const props = {
   ...modalProps,
-  memoryPosition: {
+  memo: {
     /**
      *
      * 是否记住上一次的位置

src/hooks/web/useDomToImage.ts

@@ -90,7 +90,8 @@ const domToImageMethods = {
  * const { create, stop } = useDomToImage(refDom, {
  *   beforeCreate: (element) => { ... },
  *   created: (element, result) => { ... },
- *   createdError: (element, error) => { ... },
+ *   createdError: (error) => { ... },
+ *   finally: () => { ... },
  * })
  */
 export const useDomToImage = <T extends HTMLElement>(

src/main.ts

@@ -1,6 +1,7 @@
 import App from './App'
 
 import '@/styles/base.scss'
+import './app-components/provider/provider.scss'
 
 import 'virtual:svg-icons-register' // vite-plugin-svg-icons 脚本，启用 svg 雪碧图