多语言方案

多语言方案

背景

多语言(i18n)支持 是企业项目走向国际化的必经之路，也是前端工程师最佳实践的内容之一

实现

1.定义全局多语言状态，以中文、英语为例

const contextValue = {
  lang,
  setLang,
}

switch (lang) {
  case 'zh-CN':
    return zhCN;
  case 'en-US':
    return enUS;
  default:
    return zhCN;
}

2.添加多语言配置文件，映射中英文

const i18n = {
  'en-US': {
    'menu.welcome': 'Welcome',
    'menu.dashboard': 'Dashboard',
    'menu.list': 'List',
  },
  'zh-CN': {
    'menu.dashboard': '仪表盘',
    'menu.list': '列表页',
    'menu.result': '结果页',
  },
};

export default i18n;

3.从全局状态中拿到当前状态，显示语言

// An highlighted block
import { useContext } from 'react';
import { GlobalContext } from '../context';
import defaultLocale from '../locale';

function useLocale(locale = null) {
  const { lang } = useContext(GlobalContext);

  return (locale || defaultLocale)[lang] || {};
}

const t = useLocale();

<Menu.Item onClick={handleChangeRole} key="switch role">
  <IconTag className={styles['dropdown-icon']} />
  {t['menu.user.switchRoles']}
</Menu.Item>

4.修改语言

const { setLang, lang } = useContext(GlobalContext);

setLang(value);

风格方案

背景

根据用户的喜好，选择不同的风格，成为产品设计必备的需求之一

实现

1.定义全局风格状态，以黑白风格为例

const contextValue = {
  theme,
  setTheme,
};

2.添加风格样式

body {
  --red-1: 255,236,232;
  --red-2: 253,205,197;
  --red-3: 251,172,163;
}

body[arco-theme='dark'] {
  --red-1: 77,0,10;
  --red-2: 119,6,17;
  --red-3: 161,22,31;
}

3.根据不同的风格显示不同的样式

const { theme, setTheme } = useContext(GlobalContext);

<IconButton
	icon={theme !== 'dark' ? <IconMoonFill /> : <IconSunFill />}
	onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
/>

4.修改风格

function changeTheme(theme) {
  if (theme === 'dark') {
    document.body.setAttribute('arco-theme', 'dark');
  } else {
    document.body.removeAttribute('arco-theme');
  }
}

主题色方案