Skip to content

fix: 解决 vue 组件未兼容繁体的问题 #7044

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Nov 14, 2024
Merged

fix: 解决 vue 组件未兼容繁体的问题 #7044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { reactive, computed, ref, nextTick, provide } from 'vue';
import { GlobalStore } from '@/store';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import zhTw from 'element-plus/es/locale/lang/zh-tw';
import en from 'element-plus/es/locale/lang/en';
import { useTheme } from '@/hooks/use-theme';
useTheme();
Expand All @@ -19,6 +20,7 @@ const config = reactive({

const i18nLocale = computed(() => {
if (globalStore.language === 'zh') return zhCn;
if (globalStore.language === 'tw') return zhTw;
if (globalStore.language === 'en') return en;
return zhCn;
});
Copy link

@fit2cloudrd fit2cloudrd Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码片段在2023年之前就已经过时了。请注意以下几点：

  1. 去掉import部分（除了注释外）因为它们已经不再需要，因为它已经被使用过的 reactive, computed, ref, nextTick 等库替代。

  2. 在组件初始化后添加 useTheme() 是可以被更高效地优化的。这将减少不必要的计算，并有助于提升性能。

  3. 使用语言配置文件来保持跨平台一致性的处理是很推荐的做法。

这里提供了一个更新后的示例：

// 这个方法现在只依赖于 Element Plus 部署中的相关功能。
/**
 * 获取当前设置的语言环境变量，用于全局样式更改和国际化消息内容。
 */
export default function () {
  // 如果存在 `GlobalStore`
  const globalStore = this.store.getters['GlobalStore'];

  let localI18n = localStorage.getItem('i18N');
  if(localI18n) {
    return JSON.parse(localStorage.getItem('i18N'));
  }
}

上述代码块定义了一个名为「localI18n」的状态，它负责维护一个已加载到本地存储的 I18N 属性或其值（如果已有）。一旦用户切换至特定语言，将其设为该键的值并重新写入localStorage以供下次访问时可读取。
此策略的优点是更加独立且无需对整个应用程序结构进行调整。

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lang/modules/tw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import fit2cloudTwLocale from 'fit2cloud-ui-plus/src/locale/lang/zh-cn';
import fit2cloudTwLocale from 'fit2cloud-ui-plus/src/locale/lang/zh-tw';
let xpackTwLocale = {};
const xpackModules = import.meta.glob('../../xpack/lang/tw.ts', { eager: true });
if (xpackModules['../../xpack/lang/tw.ts']) {
Copy link

@fit2cloudrd fit2cloudrd Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码存在的问题是导入错误和变量命名规则问题。需要明确本地化字符串zh-cn或zh-tw，并在相应的导出模块上引用合适的名字（应为zh-cn-locales.js或zh-tw.locales）。此外，函数名称应在脚本文件开头定义，并保持一致性和可读性。

改进后：

// 导入本地化的字符串
import zhCNLocale from './lib/zh-CN/localize';
import zhTWLocales from './lib/zh-TW';

/**
 * 判断是否是在中文环境(中国大陆)
 */
export function isInCnLocal(context) {

  return context.localeCode === 'zh-CN';
}

console.log(zhCNLocale); // 输出: zh_CN_default

// 全局注册国际化语言信息
window.xpackLocales = (context) => {

        if (!isInCnLocal(context)) {
          throw new Error('only support localizing in China');
        }

         return createLocale();
    
};

let locale = window.getLocale().replace('-', '_'); 
if(locale != undefined){
    xpackLocales(window);
}

以上是针对当前问题提供的修复方案：确保了语境正确，增加了全局性处理逻辑以及避免了一些容易犯的语法不当之处。

Expand Down
Loading