version: 4.4.7

CHANGELOG.md

@@ -1,5 +1,27 @@
 # CHANGE LOG
 
+## 4.4.7
+
+## Feats
+
+- 更新 `vue` 版本至 `3.3.13` 版本
+- 更新 `naive-ui` 版本至 `3.36.0`。新增了几个新组件
+- 更新 `vite` 版本至 `5.0.10`
+- `appConfig` 相关
+  - 移除 `APP_WATERMARK_CONFIG` 配置项，现在水印配置项会被 `watermarkConfig` 替代
+  - 移除 `ROOT_ROUTE` 配置项，现在根路由配置项会被 `appRootRoute` 替代
+- `variable` 相关
+  - 移除 `variable` 管理 `ROO_ROUTE` 配置项
+- `commit-message` 新增 `plugin` 更新相关前缀配置
+- `RQRCode` 组件
+  - 调整 `loading` 透明度
+  - `downloadQRCode` 方法将会返回一个 `Promise` 对象
+- `basic` 包
+  - `downloadAnyFile` 方法将会返回一个 `Promise` 对象
+- `types` 包
+  - 新增 `ReturnPromiseType` 工具类型，用于获取函数返回值的 `Promise` 类型
+  - 新增 `ConditionalExclude` 工具类型，用于条件排除指定类型
+
 ## 4.4.6
 
 ## Feats

commitlint.config.cjs

@@ -8,6 +8,7 @@
 // style: 代码格式（不影响功能，例如空格、分号等格式修正） | Code format (no functional impact, such as space, semicolon, etc.)
 // version: 更新迭代 package.json 版本号 | Update the package.json version number
 // build: 构建 | Build
+// plugin: 更新插件版本 | Update plugin version
 
 module.exports = {
   ignores: [(commit) => commit.includes('init')],
@@ -33,6 +34,7 @@ module.exports = {
         'style',
         'version',
         'build',
+        'plugin',
       ],
     ],
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.4.6",
+  "version": "4.4.7",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -44,11 +44,11 @@
     "interactjs": "1.10.26",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
-    "naive-ui": "^2.35.0",
+    "naive-ui": "^2.36.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
-    "vue": "^3.3.11",
+    "vue": "^3.3.13",
     "vue-hooks-plus": "1.8.5",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",
@@ -93,7 +93,7 @@
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^5.0.8",
+    "vite": "^5.0.10",
     "vite-plugin-cdn2": "0.15.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",

src/app-config/appConfig.ts

@@ -11,11 +11,7 @@
 
 /** 系统配置 */
 
-import type {
+import type { LayoutSideBarLogo, PreloadingConfig } from '@/types/modules/cfg'
-  LayoutSideBarLogo,
-  PreloadingConfig,
-  RootRoute,
-} from '@/types/modules/cfg'
 import type { AppMenuConfig, AppKeepAlive } from '@/types/modules/appConfig'
 
 /**
@@ -44,21 +40,6 @@ export const PRE_LOADING_CONFIG: PreloadingConfig = {
   titleColor: '#2d8cf0',
 }
 
-/**
- *
- * 配置根路由信息
- * 模板维护一个根路由 ROOT_ROUTE，所有的重定向操作、回到 Layout Root Path 操作都依赖该 path
- *
- * 该变量的值，会传递给 globalRootRoute
- * 这么做也是为了能够在兼容老版本的模板，并且也是为了能够动态的维护根路由信息
- *
- * 有些时候，如果你希望动态的维护 Root Route 信息，可以使用 useAppRoot 方法
- */
-export const ROOT_ROUTE: RootRoute = {
-  name: 'Dashboard',
-  path: '/dashboard',
-}
-
 /**
  *
  * icon: LOGO 图标, 依赖 `RIcon` 实现(如果为空则不会渲染图标)
@@ -111,19 +92,3 @@ export const APP_CATCH_KEY = {
   localeLanguage: 'localeLanguage',
   token: 'token',
 } as const
-
-/**
- *
- * 系统水印配置
- * 具体配置信息查看官网: https://www.naiveui.com/zh-CN/dark/components/watermark#API
- */
-export const APP_WATERMARK_CONFIG = {
-  content: 'Trying be better~',
-  fontSize: 16,
-  lineHeight: 16,
-  width: 384,
-  height: 384,
-  xOffset: 12,
-  yOffset: 60,
-  rotate: -15,
-} as const

src/components/RQRCode/src/index.tsx

@@ -60,7 +60,7 @@ export default defineComponent({
 
     const qrcodeURL = ref<QRCodeRenderResponse>()
     const spinOverrides = {
-      opacitySpinning: '0.1',
+      opacitySpinning: '0.01',
     }
     let gifBuffer: GIFBuffer
     let watchCallback!: WatchStopHandle
@@ -119,10 +119,12 @@ export default defineComponent({
 
     const downloadQRCode = (fileName?: DownloadFilenameType) => {
       if (qrcodeURL.value && isValueType<string>(qrcodeURL.value, 'String')) {
-        downloadAnyFile(
+        return downloadAnyFile(
           qrcodeURL.value,
           fileName || new Date().getTime() + '.png',
         )
+      } else {
+        return Promise.reject()
       }
     }
 

src/global-variable/variable.ts

@@ -27,11 +27,7 @@
  * createVariableState({ your state })
  */
 
-import { ROOT_ROUTE, APP_WATERMARK_CONFIG } from '@/app-config/appConfig'
-import { cloneDeep } from 'lodash-es'
-
 import type { AnyFC } from '@/types/modules/utils'
-import type { Mutable } from '@/types/modules/helper'
 
 /**
  *
@@ -47,7 +43,6 @@ const variableState = reactive({
   globalDrawerValue: false, // 全局抽屉控制器（小尺寸设备可用）
   globalMainLayoutLoad: true, // LayoutContent 区域加载控制器，会触发强制刷新
   layoutContentMaximize: false, // LayoutContent 区域全屏控制器
-  globalRootRoute: cloneDeep(ROOT_ROUTE), // 全局根路由配置，同步至 ROOT_ROUTE
   layoutContentSpinning: false, // LayoutContent 区域加载控制器，不会触发强制刷新
 })
 

src/hooks/template/useAppRoot.ts

@@ -9,29 +9,29 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { setVariable, getVariableToRefs } from '@/global-variable'
+import { useSettingGetters, useSettingActions } from '@/store'
-import { cloneDeep } from 'lodash-es'
 
-import type { DeepMutable } from '@/types/modules/helper'
+import type { AppRootRoute } from '@/store/modules/setting/type'
 
 export function useAppRoot() {
-  const globalRootRoute = getVariableToRefs('globalRootRoute')
+  const { getAppRootRoute } = useSettingGetters()
+  const { updateSettingState } = useSettingActions()
 
   /**
    *
    * @remark 获取根路由
    */
-  const getRootRoute = computed(() => globalRootRoute.value)
+  const getRootRoute = getAppRootRoute
   /**
    *
    * @remark 获取根路由 path
    */
-  const getRootPath = computed(() => globalRootRoute.value.path)
+  const getRootPath = computed(() => getAppRootRoute.value.path)
   /**
    *
    * @remark 获取根路由 name
    */
-  const getRootName = computed(() => globalRootRoute.value.name)
+  const getRootName = computed(() => getAppRootRoute.value.name)
 
   /**
    *
@@ -42,11 +42,11 @@ export function useAppRoot() {
    * @example
    * setRootRoute({ path: '/your root path', name: 'your root name' })
    */
-  const setRootRoute = (route: DeepMutable<typeof globalRootRoute.value>) => {
+  const setRootRoute = (route: AppRootRoute) => {
-    const routeRef = getVariableToRefs('globalRootRoute')
+    updateSettingState(
-    const assignRoute = Object.assign(cloneDeep(routeRef.value), route)
+      'appRootRoute',
-
+      Object.assign({}, getAppRootRoute.value, route),
-    setVariable('globalRootRoute', assignRoute)
+    )
   }
 
   return {

src/hooks/web/useDevice.ts

@@ -17,6 +17,10 @@
 import { useWindowSize } from '@vueuse/core'
 import { watchEffectWithTarget } from '@/utils'
 
+import type { UseWindowSizeOptions } from '@vueuse/core'
+
+export interface UseDeviceOptions extends UseWindowSizeOptions {}
+
 /**
  *
  * 检测当前尺寸是否为平板或者更小
@@ -28,8 +32,8 @@ import { watchEffectWithTarget } from '@/utils'
  * isTabletOrSmaller.value => true // 当前尺寸为平板或者更小
  * isTabletOrSmaller.value => false // 当前尺寸为桌面或者更大
  */
-export function useDevice() {
+export function useDevice(options?: UseDeviceOptions) {
-  const { width, height } = useWindowSize()
+  const { width, height } = useWindowSize(options)
   const isTabletOrSmaller = ref(false)
 
   const update = () => {

src/hooks/web/useDomToImage.ts

@@ -102,10 +102,11 @@ export const useDomToImage = <T extends HTMLElement>(
     created,
     createdError,
     finally: _finally,
+    imageType: _imageType,
   } = options ?? {}
 
   const run = (
-    imageType: UseDomToImageOptions['imageType'] = 'jpeg',
+    imageType?: UseDomToImageOptions['imageType'],
   ): Promise<DomToImageResult> => {
     return new Promise((resolve, reject) => {
       const element = unrefElement(target)
@@ -118,10 +119,7 @@ export const useDomToImage = <T extends HTMLElement>(
         return reject('useDomToImage: element is undefined.')
       }
 
-      const type = imageType ?? options?.imageType
+      domToImageMethods[imageType ?? _imageType ?? 'jpeg']?.(element, options)
-      const matchFc = domToImageMethods[type] || domToImageMethods['jpeg']
-
-      matchFc(element, options)
         .then((res) => {
           created?.(res, element)
 

src/store/hooks/useSettingStore.ts

@@ -71,6 +71,12 @@ export const useSettingGetters = () => {
    */
   const getWatermarkConfig = computed(() => variable.watermarkConfig)
 
+  /**
+   *
+   * @remark 获取 app 根路由
+   */
+  const getAppRootRoute = computed(() => variable.appRootRoute)
+
   return {
     getDrawerPlacement,
     getPrimaryColorOverride,
@@ -83,6 +89,7 @@ export const useSettingGetters = () => {
     getContentTransition,
     getWatermarkSwitch,
     getWatermarkConfig,
+    getAppRootRoute,
   }
 }
 

src/store/modules/setting/index.ts

@@ -4,8 +4,6 @@ import { colorToRgba, setStorage } from '@/utils'
 import { useI18n } from '@/hooks/web'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useDayjs } from '@/hooks/web'
-import { APP_WATERMARK_CONFIG } from '@/app-config/appConfig'
-import { cloneDeep } from 'lodash-es'
 
 import type { SettingState } from '@/store/modules/setting/type'
 import type { LocalKey } from '@/hooks/web'
@@ -37,7 +35,20 @@ export const piniaSettingStore = defineStore(
       copyrightSwitch: true, // 底部区域开关
       contentTransition: 'scale', // 切换过渡效果
       watermarkSwitch: false, // 水印开关,
-      watermarkConfig: cloneDeep(APP_WATERMARK_CONFIG),
+      watermarkConfig: {
+        content: 'Trying be better~',
+        fontSize: 16,
+        lineHeight: 16,
+        width: 384,
+        height: 384,
+        xOffset: 12,
+        yOffset: 60,
+        rotate: -15,
+      },
+      appRootRoute: {
+        name: 'Dashboard',
+        path: '/dashboard',
+      },
     })
 
     /** 修改当前语言 */

src/store/modules/setting/type.ts

@@ -1,6 +1,21 @@
 import type { GlobalThemeOverrides } from 'naive-ui'
 import type { Placement } from '@/types/modules/component'
-import type { APP_WATERMARK_CONFIG } from '@/app-config/appConfig'
+
+export interface WatermarkConfig {
+  content: string
+  fontSize: number
+  lineHeight: number
+  width: number
+  height: number
+  xOffset: number
+  yOffset: number
+  rotate: number
+}
+
+export interface AppRootRoute {
+  name: string
+  path: string
+}
 
 export interface SettingState {
   drawerPlacement: Placement
@@ -13,5 +28,6 @@ export interface SettingState {
   watermarkSwitch: boolean
   copyrightSwitch: boolean
   contentTransition: string
-  watermarkConfig: typeof APP_WATERMARK_CONFIG
+  watermarkConfig: WatermarkConfig
+  appRootRoute: AppRootRoute
 }

src/types/modules/helper.ts

@@ -13,6 +13,18 @@ export type ConditionalKeys<Base, Condition> = NonNullable<
   }[keyof Base]
 >
 
+/**
+ *
+ * 从目标类型中排除符合条件的属性
+ *
+ * @example
+ * ConditionalExclude<{ a: string, b: number }, string> // { b: number }
+ */
+export type ConditionalExclude<Base, Condition> = Omit<
+  Base,
+  ConditionalKeys<Base, Condition>
+>
+
 /**
  *
  * 从目标类型中挑选出符合条件的属性
@@ -68,3 +80,17 @@ export type DeepMutable<T> = {
     ? DeepMutable<T[P]>
     : T[P]
 }
+
+/**
+ *
+ * 获取 Promise 返回值类型
+ *
+ * @example
+ * ReturnPromiseType<Promise<string>> // string
+ * ReturnPromiseType<Promise<string> | Promise<number>> // string | number
+ */
+export type ReturnPromiseType<T extends Promise<any>> = T extends Promise<
+  infer U
+>
+  ? U
+  : never

src/utils/basic.ts

@@ -150,9 +150,7 @@ export const downloadAnyFile = (
     try {
       if (typeof data === 'string') {
         downloadBase64File(data, fileName)
-        resolve()
+        return resolve()
-
-        return
       }
 
       if (data instanceof ArrayBuffer) {
@@ -162,9 +160,7 @@ export const downloadAnyFile = (
       } else if (data instanceof File || data instanceof Blob) {
         blobData = data
       } else {
-        reject(new Error('downloadAnyFile: Unsupported data type.'))
+        return reject(new Error('downloadAnyFile: Unsupported data type.'))
-
-        return
       }
 
       const url = URL.createObjectURL(blobData)
@@ -181,18 +177,18 @@ export const downloadAnyFile = (
 
       link.addEventListener('load', () => {
         remove()
-        resolve()
+        return resolve()
       })
 
       link.addEventListener('error', (error) => {
         remove()
-        reject(error)
+        return reject(error)
       })
 
       document.body.appendChild(link)
       link.click()
     } catch (error) {
-      reject(error)
+      return reject(error)
     }
   })
 }