Skip to content
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

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

Merged
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

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']) {
Expand Down
Loading