修复组件多语言bug

CHANGELOG.md

@@ -15,6 +15,10 @@
 
 ## 3.1.2
 
+### Fixes
+
+- 修复 DatePicker 组件国际化部分失效问题
+
 ### Feats
 
 - 修改 demo 页面展示

src/components/RayGlobalProvider/index.tsx

@@ -9,7 +9,7 @@ import {
   NGlobalStyle,
 } from 'naive-ui'
 import { useSetting } from '@/store'
-
+import { naiveLocales } from '@/language/index'
 const GlobalProvider = defineComponent({
   name: 'GlobalProvider',
   setup() {
@@ -21,7 +21,11 @@ const GlobalProvider = defineComponent({
     const modelThemeValue = computed(() =>
       settingStore.themeValue ? darkTheme : null,
     )
-    const modelLocal = computed(() => settingStore.naiveLocal)
+    const localePackage = computed(() => {
+      const key = settingStore.localeLanguage
+
+      return naiveLocales(key)
+    })
 
     const { message, notification, dialog, loadingBar } = createDiscreteApi(
       ['message', 'dialog', 'notification', 'loadingBar'],
@@ -40,7 +44,7 @@ const GlobalProvider = defineComponent({
     return {
       modelPrimaryColorOverride,
       modelThemeValue,
-      modelLocal,
+      localePackage,
     }
   },
   render() {
@@ -48,8 +52,8 @@ const GlobalProvider = defineComponent({
       <NConfigProvider
         themeOverrides={this.modelPrimaryColorOverride}
         theme={this.modelThemeValue}
-        locale={this.modelLocal.local}
+        locale={this.localePackage.locale}
-        dateLocal={this.modelLocal.dateLocal}
+        dateLocale={this.localePackage.dateLocal}
       >
         <NLoadingBarProvider>
           <NMessageProvider>

src/language/language.ts

@@ -10,7 +10,6 @@
  */
 
 import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
-import { enUS, dateEnUS } from 'naive-ui' // 导入 `naive ui` 英文包
 
 /** 语言包语种添加后, 需要在此文件配置语言包 */
 export const localOptions = [
@@ -30,24 +29,25 @@ export const localOptions = [
  * @returns 组件库对应语言包
  *
  * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
+ * @remark naive ui 默认为英文
  */
 export const naiveLocales = (key: string) => {
   switch (key) {
     case 'zh-CN':
       return {
-        local: zhCN,
+        locale: zhCN,
         dateLocal: dateZhCN,
       }
 
     case 'en-US':
       return {
-        local: enUS,
+        locale: null,
-        dateLocal: dateEnUS,
+        dateLocal: null,
       }
 
     default:
       return {
-        local: zhCN,
+        locale: zhCN,
         dateLocal: dateZhCN,
       }
   }

src/store/modules/setting.ts

@@ -1,4 +1,4 @@
-import { naiveLocales, getDefaultNaiveLocal } from '@/language/index'
+import { getDefaultLocal } from '@/language/index'
 import { setCache } from '@use-utils/cache'
 
 export const useSetting = defineStore(
@@ -14,16 +14,16 @@ export const useSetting = defineStore(
       themeValue: false, // `true` 为黑夜主题, `false` 为白色主题
       reloadRouteSwitch: true, // 刷新路由开关
       menuTagSwitch: true, // 多标签页开关
-      naiveLocal: getDefaultNaiveLocal(), // `naive ui` 语言包
       spinSwitch: false, // 全屏加载
       breadcrumbSwitch: true, // 面包屑开关
+      localeLanguage: getDefaultLocal(),
     })
     const { locale } = useI18n()
 
     const updateLocale = (key: string) => {
       // TODO: 修改语言
       locale.value = key
-      settingState.naiveLocal = naiveLocales(key)
+      settingState.localeLanguage = key
 
       setCache('localeLanguage', key, 'localStorage')
     }

src/views/table/index.tsx

@@ -169,7 +169,17 @@ const TableView = defineComponent({
           </NLi>
           <NLi>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</NLi>
         </NUl>
-        <NH2>配合 RayCollapseGird 组件使用</NH2>
+        <NH2>配合 RayCollapseGird 组件使用与 RayTable 拓展功能</NH2>
+        <NP>
+          使用响应式方法代理 columns 并且打开 action
+          则可以启用操作栏(v-model:columns)
+        </NP>
+        <NP>拖拽操作栏动态切换表格列</NP>
+        <NP>点击左右固定按钮，即可动态固定列</NP>
+        <NP>点击修改列宽度，即可拖动列修改宽度</NP>
+        <NP>点击导出按钮即可导出 excel 表格，默认以列为表头输出</NP>
+        <NP>点击打印按钮即可打印该表格</NP>
+        <NP>右键菜单</NP>
         <RayCollapseGrid
           bordered={false}
           collapsedRows={this.gridCollapsedRows}
@@ -219,26 +229,17 @@ const TableView = defineComponent({
           )}
           data={this.tableData}
           columns={this.baseColumns}
-          action={false}
           pagination={{
             pageSize: 10,
           }}
           loading={this.tableLoading}
+          rightClickMenu={this.tableMenuOptions}
+          onMenuSelect={this.handleMenuSelect.bind(this)}
         >
           {{
             tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
           }}
         </RayTable>
-        <NH2>RayTable 拓展功能</NH2>
-        <NP>
-          使用响应式方法代理 columns 并且打开 action
-          则可以启用操作栏(v-model:columns)
-        </NP>
-        <NP>拖拽操作栏动态切换表格列</NP>
-        <NP>点击左右固定按钮，即可动态固定列</NP>
-        <NP>点击修改列宽度，即可拖动列修改宽度</NP>
-        <NP>点击导出按钮即可导出 excel 表格，默认以列为表头输出</NP>
-        <NP>点击打印按钮即可打印该表格</NP>
         <RayTable
           title={h(NInput, {
             placeholder: '请输入检索条件',
@@ -247,13 +248,6 @@ const TableView = defineComponent({
           data={this.tableData}
           v-model:columns={this.actionColumns}
           bordered={false}
-        />
-        <NH2>右键菜单</NH2>
-        <RayTable
-          title="右键菜单表格"
-          action={false}
-          data={this.tableData}
-          columns={this.baseColumns}
           rightClickMenu={this.tableMenuOptions}
           onMenuSelect={this.handleMenuSelect.bind(this)}
         />