version: v4.6.4

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGE LOG
 
+## 4.6.4
+
+稳定了 `4.6.4` 版本。
+
+## Feats
+
+- 更新 `naive-ui` 版本至 `2.38.1`，详细更细请查看 [CHANGELOG.zh-CN](https://github.com/tusen-ai/naive-ui/blob/main/CHANGELOG.zh-CN.md)
+  - 同步更新 `ModalProvider` 在顶层的注入（但是 `resolver` 暂为更新，所以需要手动导入）
+- `useI18n` 方法
+  - 重写 `overrideLocaleFunc` 方法
+
+## Fixes
+
+- 修复 `useI18n` 方法在 `HMR` 时可能会报错的问题
+
 ## 4.6.4-beta1.1
 
 更新了一大波的开发依赖。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.6.4-beta1.1",
+  "version": "4.6.4",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -44,7 +44,7 @@
     "interactjs": "1.10.26",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
-    "naive-ui": "^2.37.3",
+    "naive-ui": "^2.38.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",

pnpm-lock.yaml

@@ -42,8 +42,8 @@ dependencies:
     specifier: 1.1.0
     version: 1.1.0
   naive-ui:
-    specifier: ^2.37.3
-    version: 2.37.3(vue@3.4.20)
+    specifier: ^2.38.1
+    version: 2.38.1(vue@3.4.20)
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.2.2)(vue@3.4.20)
@@ -5926,8 +5926,8 @@ packages:
       minimatch: 3.1.2
     dev: true
 
-  /naive-ui@2.37.3(vue@3.4.20):
-    resolution: {integrity: sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==}
+  /naive-ui@2.38.1(vue@3.4.20):
+    resolution: {integrity: sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:

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

@@ -26,6 +26,7 @@ import {
   createDiscreteApi,
   darkTheme,
   NGlobalStyle,
+  NModalProvider,
 } from 'naive-ui'
 
 import { naiveLocales } from '@/locales/helper'
@@ -93,11 +94,13 @@ export default defineComponent({
         <NLoadingBarProvider>
           <NMessageProvider>
             <NDialogProvider>
-              <NNotificationProvider>
-                <NGlobalStyle />
-                {slotDefault?.()}
-                {discreteApi()}
-              </NNotificationProvider>
+              <NModalProvider>
+                <NNotificationProvider>
+                  <NGlobalStyle />
+                  {slotDefault?.()}
+                  {discreteApi()}
+                </NNotificationProvider>
+              </NModalProvider>
             </NDialogProvider>
           </NMessageProvider>
         </NLoadingBarProvider>

src/hooks/web/useI18n.ts

@@ -11,7 +11,13 @@
 
 import { i18n } from '@/locales'
 
-import type { WritableComputedRef } from 'vue'
+import type { I18n } from 'vue-i18n'
+
+export interface OverrideUseI18nReturnType
+  extends Omit<I18n['global'], 't' | 'locale'> {
+  t: <T = unknown>(key: string, ...args: T[]) => T
+  locale: (lang: string) => void
+}
 
 const getI18nKey = (namespace: string | undefined, key: string) => {
   if (!namespace) {
@@ -26,7 +32,21 @@ const getI18nKey = (namespace: string | undefined, key: string) => {
 }
 
 export const useI18n = (namespace?: string) => {
-  const { t, locale, ...methods } = i18n.global
+  /**
+   *
+   * 避免 HMR 时 i18n 未初始化导致报错。
+   * 但是在开发环境下，i18n 始终会被初始化，所以不会影响其正常使用。
+   */
+  if (!i18n) {
+    return {
+      t: (key: string) => {
+        return getI18nKey(namespace, key)
+      },
+      locale: (lang: string) => {},
+    } as OverrideUseI18nReturnType
+  }
+
+  const { t, ...methods } = i18n.global
 
   const overridesTFunc = (key: string, ...args: any[]) => {
     if (!key) {
@@ -43,9 +63,15 @@ export const useI18n = (namespace?: string) => {
 
   /** 重写 locale 方法 */
   const overrideLocaleFunc = (lang: string) => {
-    const localeRef = locale as WritableComputedRef<string>
-
-    localeRef.value = lang
+    if (i18n.mode === 'legacy') {
+      i18n.global.locale = lang
+    } else {
+      if (isRef(i18n.global.locale)) {
+        i18n.global.locale.value = lang
+      } else {
+        i18n.global.locale = lang
+      }
+    }
   }
 
   return {
@@ -57,11 +83,11 @@ export const useI18n = (namespace?: string) => {
 
 /**
  *
- * 该方法为纯函数, 无任何副作用
- * 单纯为了配合 i18n-ally 插件使用
+ * @description
+ * 该方法为纯函数，无任何副作用，单纯为了配合 i18n-ally 插件使用。
  *
- * 该插件识别 t 方法包裹 path 进行提示文案内容
+ * 该插件识别 t 方法包裹 path 进行提示文案内容。
  */
 export const t = (key: string) => key
 
-export type UseI18nReturnType = ReturnType<typeof useI18n>
+export type UseI18nReturnType = OverrideUseI18nReturnType

vite-helper/index.ts

@@ -1,5 +1,7 @@
 import pkg from '../package.json'
 
+import type { DependenciesKey } from './type'
+
 /**
  *
  * @param title 浏览器 title 名称
@@ -50,9 +52,7 @@ export const mixinCSSPlugin = (options?: string[]) => {
  * const vueVersion = getDependenciesVersion('vue') // vue version
  * const unknownVersion = getDependenciesVersion('unknown package') // Error
  */
-export const getDependenciesVersion = (
-  dependenciesKey: keyof typeof pkg.dependencies,
-) => {
+export const getDependenciesVersion = (dependenciesKey: DependenciesKey) => {
   const { dependencies } = pkg
   const result = dependencies[dependenciesKey]
 

vite-helper/type.ts

@@ -1,3 +1,5 @@
+import type pkg from '../package.json'
+
 export interface VitePluginCompression {
   /**
    *
@@ -127,3 +129,5 @@ export interface ImpConfig {
    */
   transpileDependencies?: boolean | Array<string | RegExp>
 }
+
+export type DependenciesKey = keyof (typeof pkg)['dependencies']

vite.plugin.config.ts

@@ -33,6 +33,7 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import config from './vite.custom.config'
 
 import type { PluginOption } from 'vite'
+import type { DependenciesKey } from './vite-helper/type'
 
 // 仅适用于报告模式（report）
 function onlyReportOptions(mode: string) {
@@ -49,7 +50,11 @@ function onlyReportOptions(mode: string) {
 
 // 仅适用于构建模式（任何构建模式：preview、build、report...）
 function onlyBuildOptions(mode: string) {
-  const url = 'https://cdnjs.cloudflare.com/ajax/libs'
+  const cdnBaseUrl = 'https://cdnjs.cloudflare.com/ajax/libs'
+
+  const resolve = (dependenciesKey: DependenciesKey) => {
+    return `${cdnBaseUrl}/${dependenciesKey}/${getDependenciesVersion(dependenciesKey)}`
+  }
 
   return [
     viteCDNPlugin({
@@ -58,42 +63,42 @@ function onlyBuildOptions(mode: string) {
         {
           name: 'vue',
           global: 'Vue',
-          resolve: `${url}/vue/${getDependenciesVersion('vue')}/vue.global.min.js`,
+          resolve: `${resolve('vue')}/vue.global.min.js`,
         },
         {
           name: 'vue-demi',
           global: 'VueDemi',
-          resolve: `${url}/vue-demi/${getDependenciesVersion('vue-demi')}/index.iife.min.js`,
+          resolve: `${resolve('vue-demi')}/index.iife.min.js`,
         },
         {
           name: 'naive-ui',
           global: 'naive',
-          resolve: `${url}/naive-ui/${getDependenciesVersion('naive-ui')}/index.prod.js`,
+          resolve: `${resolve('naive-ui')}/index.prod.js`,
         },
         {
           name: 'pinia',
           global: 'Pinia',
-          resolve: `${url}/pinia/${getDependenciesVersion('pinia')}/pinia.iife.min.js`,
+          resolve: `${resolve('pinia')}/pinia.iife.min.js`,
         },
         {
           name: 'vue-router',
           global: 'VueRouter',
-          resolve: `${url}/vue-router/${getDependenciesVersion('vue-router')}/vue-router.global.min.js`,
+          resolve: `${resolve('vue-router')}/vue-router.global.min.js`,
         },
         {
           name: 'vue-i18n',
           global: 'VueI18n',
-          resolve: `${url}/vue-i18n/${getDependenciesVersion('vue-i18n')}/vue-i18n.global.min.js`,
+          resolve: `${resolve('vue-i18n')}/vue-i18n.global.min.js`,
         },
         {
           name: 'echarts',
           global: 'echarts',
-          resolve: `${url}/echarts/${getDependenciesVersion('echarts')}/echarts.min.js`,
+          resolve: `${resolve('echarts')}/echarts.min.js`,
         },
         {
           name: 'axios',
           global: 'axios',
-          resolve: `${url}/axios/${getDependenciesVersion('axios')}/axios.min.js`,
+          resolve: `${resolve('axios')}/axios.min.js`,
         },
       ],
     }),