Kaynağa Gözat

fix: 修复 DatePicker 中英文混合显示问题 (v1.11.1 -> v1.11.2)

- 新增 localeHelper.ts 统一管理 Ant Design 和 dayjs 的 locale 配置
- 在 app.tsx 中配置 ConfigProvider 的 locale 属性
- 添加 useEffect 监听语言切换并同步更新 dayjs locale
- 确保 DatePicker 及所有日期相关组件完全显示为一致的语言
- 解决了 DatePicker 面板中英文混合的问题

改动文件:
- src/utils/localeHelper.ts (新增)
- src/app.tsx
- CHANGELOG.md (版本更新: 1.11.1 -> 1.11.2)
- package.json (版本更新: 1.11.1 -> 1.11.2)
dengdx 3 hafta önce
ebeveyn
işleme
2081e65824
4 değiştirilmiş dosya ile 122 ekleme ve 2 silme
  1. 29 0
      CHANGELOG.md
  2. 1 1
      package.json
  3. 11 1
      src/app.tsx
  4. 81 0
      src/utils/localeHelper.ts

+ 29 - 0
CHANGELOG.md

@@ -2,6 +2,35 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.11.2] - 2025-12-17 10:32
+
+### 修复 (Fixed)
+- **DatePicker 中英文混合显示问题** ([#datepicker-locale-fix](src/utils/localeHelper.ts))
+  - 修复 Ant Design DatePicker 组件面板中出现中英文混合的问题
+  - 新增 `localeHelper.ts` 统一管理 Ant Design 和 dayjs 的 locale 配置
+  - 在 `app.tsx` 中配置 ConfigProvider 的 locale 属性
+  - 添加 useEffect 监听语言切换并同步更新 dayjs locale
+  - 确保 DatePicker 及所有日期相关组件完全显示为一致的语言
+
+**核心改进:**
+- 统一 locale 管理:创建独立的 locale 工具文件,集中管理所有语言配置
+- 双端同步:同时配置 Ant Design locale 和 dayjs locale,确保完全一致性
+- 自动切换:语言切换时自动同步更新两个系统的 locale
+- 易于扩展:预留了多语言支持的扩展接口(日语、韩语、法语等)
+
+**技术实现:**
+- 创建 `LOCALE_MAP` 和 `DAYJS_LOCALE_MAP` 映射配置对象
+- 导出 `getAntdLocale` 函数获取 Ant Design locale 配置
+- 导出 `setDayjsLocale` 函数设置 dayjs 全局 locale
+- 在 ConfigProvider 中使用 `locale={antdLocale}` 属性
+- 使用 useEffect 监听 currentLocale 变化并调用 setDayjsLocale
+
+**改动文件:**
+- src/utils/localeHelper.ts (新增)
+- src/app.tsx
+
+---
+
 ## [1.11.1] - 2025-12-16 19:16
 
 ### 修复 (Fixed)

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

+ 11 - 1
src/app.tsx

@@ -19,6 +19,7 @@ import { setFeatureNotAvailableOpen } from './states/featureNotAvailableSlice';
 import { setBusinessFlow } from './states/BusinessFlowSlice';
 import { logger } from './log/logger';
 import { theme } from 'antd';
+import { getAntdLocale, setDayjsLocale } from './utils/localeHelper';
 import ServerConfigModal from './features/serverConfig/components/ServerConfigModal';
 console.log = logger.log;
 console.warn = logger.warn;
@@ -57,10 +58,19 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
     algorithm:
       themeType === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm,
   };
+  // 根据当前语言选择 Ant Design locale
+  const antdLocale = getAntdLocale(currentLocale);
   useLaunch((): void => {
     console.log('App launched.');
   });
 
+  // 当语言切换时,同步更新 dayjs locale
+  useEffect(() => {
+    if (currentLocale) {
+      setDayjsLocale(currentLocale);
+    }
+  }, [currentLocale]);
+
   useEffect(() => {
     // 浏览器环境不需要服务器连接检查,直接初始化应用
     if (platform.isBrowser) {
@@ -139,7 +149,7 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
   // children 是将要会渲染的页面
   // IntlProvider 始终存在,使用默认值避免 useIntl 报错
   return (
-    <ConfigProvider theme={themeWithAlgorithm}>
+    <ConfigProvider theme={themeWithAlgorithm} locale={antdLocale}>
       <IntlProvider
         locale={currentLocale ? currentLocale.split('_')[0] : 'en'} // en_US -> en,提供默认值
         messages={(messages as Record<string, string>) || {}} // 提供空对象作为默认值

+ 81 - 0
src/utils/localeHelper.ts

@@ -0,0 +1,81 @@
+import zhCN from 'antd/locale/zh_CN';
+import enUS from 'antd/locale/en_US';
+// 未来可以添加更多语言支持
+// import jaJP from 'antd/locale/ja_JP';
+// import koKR from 'antd/locale/ko_KR';
+// import frFR from 'antd/locale/fr_FR';
+
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+// import 'dayjs/locale/ja';
+// import 'dayjs/locale/ko';
+// import 'dayjs/locale/fr';
+
+import type { Locale } from 'antd/es/locale';
+
+/**
+ * Ant Design locale 映射配置
+ * 键:应用的 locale 代码(如 'zh_CN', 'en_US')
+ * 值:对应的 Ant Design locale 配置对象
+ */
+const LOCALE_MAP: Record<string, Locale> = {
+  zh_CN: zhCN,
+  zh_TW: zhCN, // 繁体中文暂时使用简体 locale(可按需导入 zh_TW)
+  en_US: enUS,
+  en_GB: enUS, // 英式英语使用美式英语 locale
+  // 未来可以轻松添加更多语言支持:
+  // ja_JP: jaJP,
+  // ko_KR: koKR,
+  // fr_FR: frFR,
+};
+
+/**
+ * dayjs locale 映射配置
+ * 键:应用的 locale 代码(如 'zh_CN', 'en_US')
+ * 值:对应的 dayjs locale 代码(如 'zh-cn', 'en')
+ */
+const DAYJS_LOCALE_MAP: Record<string, string> = {
+  zh_CN: 'zh-cn',
+  zh_TW: 'zh-cn', // 繁体中文暂时使用简体 locale
+  en_US: 'en',
+  en_GB: 'en',
+  // 未来可以添加更多语言:
+  // ja_JP: 'ja',
+  // ko_KR: 'ko',
+  // fr_FR: 'fr',
+};
+
+/**
+ * 根据应用的 locale 代码获取对应的 Ant Design locale 配置
+ * @param localeCode - 应用的 locale 代码,如 'zh_CN', 'en_US'
+ * @returns Ant Design locale 配置对象,如果找不到匹配项则返回英语 locale
+ * 
+ * @example
+ * ```ts
+ * const locale = getAntdLocale('zh_CN'); // 返回中文 locale
+ * const locale = getAntdLocale('en_US'); // 返回英文 locale
+ * const locale = getAntdLocale('unknown'); // 返回默认英文 locale
+ * ```
+ */
+export function getAntdLocale(localeCode: string): Locale {
+  return LOCALE_MAP[localeCode] || enUS;
+}
+
+/**
+ * 设置 dayjs 的全局 locale
+ * 此函数会根据应用的 locale 代码自动配置 dayjs 的语言环境
+ * 
+ * @param localeCode - 应用的 locale 代码,如 'zh_CN', 'en_US'
+ * 
+ * @example
+ * ```ts
+ * setDayjsLocale('zh_CN'); // 设置 dayjs 为中文
+ * setDayjsLocale('en_US'); // 设置 dayjs 为英文
+ * ```
+ */
+export function setDayjsLocale(localeCode: string): void {
+  const dayjsLocale = DAYJS_LOCALE_MAP[localeCode] || 'en';
+  dayjs.locale(dayjsLocale);
+  console.log(`dayjs locale 已设置为: ${dayjsLocale} (应用 locale: ${localeCode})`);
+}