Merge pull request #34 from visiky/intl

feat: 增加国际化
visiky · Jan 3, 2022 · 0ba02f4 · 0ba02f4
2 parents 7b9ae1e + ac0e3e8
commit 0ba02f4
Show file tree

Hide file tree

Showing 29 changed files with 931 additions and 278 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@
 | template | 模板        | 默认: template1 |
 | branch | 分支名        | 默认: master |
 | mode | 模式        | 备注: 默认为‘只读’模式，设置为: `mode=edit` 即可进入编辑模式 |
+| lang | 语言        | 默认: zh_CN |
 
 ## ✨ Recommendation
 

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -11,7 +11,7 @@ module.exports = {
   },
   plugins: [
     {
-      // https://developers.google.com/analytics/devguides/collection/gtagjs?hl=zh-cn
+      // https://developers.google.com/analytics/devguides/collection/gtagjs?hl=zh_CN
       resolve: `gatsby-plugin-google-gtag`,
       options: {
         // The property ID; the tracking code won't be generated without it
@@ -31,7 +31,7 @@ module.exports = {
         lessOptions: {
           javascriptEnabled: true,
           modifyVars: {
-            'font-family': 'roboto-regular',
+            'font-family': 'roboto-regular, Arial',
             'primary-color': '#2f5785',
           },
         },

diff --git a/src/components/Drawer/ConfigTheme/index.tsx b/src/components/Drawer/ConfigTheme/index.tsx
@@ -1,3 +1,4 @@
+import { getLocale } from '@/locale';
 import React, { useEffect } from 'react';
 import { ColorPicker } from '../../FormCreator/ColorPicker';
 import { ThemeConfig } from '../../types';
@@ -9,10 +10,12 @@ type Props = ThemeConfig & {
 const FormItemStyle = {
   display: 'flex',
   alignItems: 'center',
-  minWidth: '80px',
+  minWidth: '100px',
 };
 
 export const ConfigTheme: React.FC<Props> = props => {
+  const i18n = getLocale();
+
   useEffect(() => {
     let $style = document.getElementById('dynamic');
     if (!$style) {
@@ -32,14 +35,14 @@ export const ConfigTheme: React.FC<Props> = props => {
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <div style={FormItemStyle}>
-        <span style={{ marginRight: '4px' }}>主题色</span>
+        <span style={{ marginRight: '4px' }}>{i18n.get('主题色')}</span>
         <ColorPicker
           value={props.color}
           onChange={v => props.onChange({ color: v })}
         />
       </div>
       <div style={FormItemStyle}>
-        <span style={{ marginRight: '4px' }}>tag 标签色</span>
+        <span style={{ marginRight: '4px' }}>{i18n.get('tag 标签色')}</span>
         <ColorPicker
           value={props.tagColor}
           onChange={v => props.onChange({ tagColor: v })}

diff --git a/src/components/Drawer/Templates/index.less b/src/components/Drawer/Templates/index.less
@@ -9,6 +9,10 @@
     flex-direction: column;
     align-items: center;
 
+    .template-id {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.65);
+    }
     .template-description {
       font-size: 12px;
       color: rgba(0, 0, 0, 0.45);

diff --git a/src/components/Drawer/Templates/index.tsx b/src/components/Drawer/Templates/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ReactSVG } from 'react-svg';
 import cx from 'classnames';
 import './index.less';
+import { getLocale } from '@/locale';
 
 type Props = {
   template: string;
@@ -23,10 +24,13 @@ const TEMPLATES = [
     url: 'https://gw.alipayobjects.com/zos/antfincdn/Kn2jUKcBme/moban2.svg',
     id: 'template3',
     description: '简易模板(适用于多页)',
+    disabled: false,
   },
 ];
 
 export const Templates: React.FC<Props> = props => {
+  const i18n = getLocale();
+
   return (
     <div className="templates">
       {TEMPLATES.map(item => {
@@ -45,7 +49,8 @@ export const Templates: React.FC<Props> = props => {
                 svg.setAttribute('class', 'template');
               }}
             />
-            <span className="template-description">{item.description}</span>
+            <span className="template-id">{item.id}</span>
+            <span className="template-description">{i18n.get(item.description)}</span>
           </div>
         );
       })}

diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import {
   Drawer as AntdDrawer,
   Button,
@@ -18,6 +18,7 @@ import { ResumeConfig, ThemeConfig } from '../types';
 import { ConfigTheme } from './ConfigTheme';
 import { Templates } from './Templates';
 import './index.less';
+import { getLocale } from '@/locale';
 
 const { Panel } = Collapse;
 
@@ -78,6 +79,8 @@ const DragableRow = ({ index, moveRow, ...restProps }) => {
  * @description 简历配置区
  */
 export const Drawer: React.FC<Props> = props => {
+  const i18n = getLocale();
+
   const [visible, setVisible] = useState(false);
   const [childrenDrawer, setChildrenDrawer] = useState(null);
   const [currentContent, updateCurrentContent] = useState(null);
@@ -98,23 +101,31 @@ export const Drawer: React.FC<Props> = props => {
     });
   };
 
+  const modules = useMemo(() => {
+    return MODULES({ i18n });
+  }, [i18n]);
+
+  const contentOfModule = useMemo(() => {
+    return CONTENT_OF_MODULE({ i18n });
+  }, [i18n]);
+
   return (
     <>
       <Button
         type="primary"
         onClick={() => setVisible(true)}
         style={props.style}
       >
-        进行配置
-        <Popover content="移动端模式下，只支持预览，不支持配置">
+        {i18n.get('进行配置')}
+        <Popover content={i18n.get('移动端模式下，只支持预览，不支持配置')}>
           <InfoCircleFilled style={{ marginLeft: '4px' }} />
         </Popover>
       </Button>
       <AntdDrawer
         title={
           <Radio.Group value={type} onChange={e => setType(e.target.value)}>
-            <Radio.Button value="template">选择模板</Radio.Button>
-            <Radio.Button value="module">配置简历</Radio.Button>
+            <Radio.Button value="template">{i18n.get('选择模板')}</Radio.Button>
+            <Radio.Button value="module">{i18n.get('配置简历')}</Radio.Button>
           </Radio.Group>
         }
         width={480}
@@ -126,7 +137,7 @@ export const Drawer: React.FC<Props> = props => {
           <React.Fragment>
             <DndProvider backend={HTML5Backend}>
               <div className="module-list">
-                {MODULES.map((module, idx) => {
+                {modules.map((module, idx) => {
                   if (_.endsWith(module.key, 'List')) {
                     const values = _.get(props.value, module.key, []);
                     return (
@@ -166,7 +177,7 @@ export const Drawer: React.FC<Props> = props => {
                                   <DeleteFilled
                                     onClick={() => {
                                       Modal.confirm({
-                                        content: '确认删除',
+                                        content: i18n.get('确认删除'),
                                         onOk: () => deleteItem(module.key, idx),
                                       });
                                     }}
@@ -180,7 +191,7 @@ export const Drawer: React.FC<Props> = props => {
                                   updateCurrentContent(null);
                                 }}
                               >
-                                继续添加
+                                {i18n.get('继续添加')}
                               </div>
                             </div>
                           </Panel>
@@ -222,13 +233,13 @@ export const Drawer: React.FC<Props> = props => {
                 })}
               </div>
               <AntdDrawer
-                title={MODULES.find(m => m.key === childrenDrawer)?.name}
+                title={modules.find(m => m.key === childrenDrawer)?.name}
                 width={450}
                 onClose={() => setChildrenDrawer(null)}
                 visible={!!childrenDrawer}
               >
                 <FormCreator
-                  config={CONTENT_OF_MODULE[childrenDrawer]}
+                  config={contentOfModule[childrenDrawer]}
                   value={currentContent}
                   onChange={v => {
                     if (_.endsWith(childrenDrawer, 'List')) {

diff --git a/src/components/FormCreator/index.tsx b/src/components/FormCreator/index.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Input, InputNumber, Button } from 'antd';
+import { Form, Input, InputNumber, Button, Checkbox } from 'antd';
 import { FormItemProps } from 'antd/lib/form';
 import _ from 'lodash';
 import { ColorPicker } from './ColorPicker';
+import { getLocale } from '@/locale';
 
 type Props = {
   /** 表单配置 */
   config: Array<{
     type: string /** 组件类型 */;
     attributeId: string;
     displayName: string;
-    rules?: FormItemProps['rules'];
+    formItemProps?: FormItemProps;
     cfg?: {
       [k: string]: any /**其它和组件本身有关的配置 */;
     };
@@ -26,6 +27,8 @@ const FormItemComponentMap = (type: string) => (
   props: { value: any; onChange?: (v) => void } = { value: null }
 ) => {
   switch (type) {
+    case 'checkbox':
+      return <Checkbox {...props} />;
     case 'input':
       return <Input {...props} />;
     case 'number':
@@ -40,6 +43,7 @@ const FormItemComponentMap = (type: string) => (
 };
 
 export const FormCreator: React.FC<Props> = props => {
+  const i18n = getLocale();
   const [fields, setFields] = useState([]);
 
   useEffect(() => {
@@ -68,18 +72,18 @@ export const FormCreator: React.FC<Props> = props => {
               label={c.displayName}
               wrapperCol={c.displayName ? { span: 18 } : { span: 24 }}
               name={c.attributeId}
-              rules={c.rules}
+              {...(c.formItemProps || {})}
             >
               {FormItemComponentMap(c.type)({
                 ...(c.cfg || {}),
-                value: props.value?.[c.attributeId],
+                value: _.get(props.value, [c.attributeId]),
               })}
             </Form.Item>
           );
         })}
         <Form.Item wrapperCol={{ offset: 6 }}>
           <Button type="primary" htmlType="submit">
-            提交
+            {i18n.get('提交')}
           </Button>
         </Form.Item>
       </Form>

diff --git a/src/components/LangSwitcher/index.less b/src/components/LangSwitcher/index.less
@@ -0,0 +1,16 @@
+.language-switcher {
+  margin: 0 7px;
+  display: inline-block;
+  font-size: 12px;
+
+  .divider {
+    padding: 0 4px;
+  }
+
+  span.lang {
+    &.unselected {
+      color: rgba(255, 255, 255, 0.25);
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/components/LangSwitcher/index.tsx b/src/components/LangSwitcher/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popover } from 'antd';
+import qs from 'query-string';
+import { getLanguage, getLocale } from '@/locale';
+import { getMode } from '@/hooks/useModeSwitcher';
+import './index.less';
+
+export const LangSwitcher = ({ className }: { className?: string }) => {
+  const lang = getLanguage();
+  const mode = getMode();
+  const i18n = getLocale();
+
+  const changeLanguage = value => {
+    if (value === lang) return;
+
+    const {
+      pathname,
+      hash: currentHash,
+      search: currentSearch,
+    } = window.location;
+    const hash = currentHash === '#/' ? '' : currentHash;
+    const search = qs.stringify({
+      ...qs.parse(currentSearch),
+      lang: value,
+    });
+    window.location.href = `${pathname}?${search}${hash}`;
+  };
+
+  const RadioContent = (
+    <span>
+      <span
+        className={cx('lang', { unselected: lang !== 'zh_CN' })}
+        onClick={() => changeLanguage('zh_CN')}
+      >
+        中
+      </span>
+      <span className="divider">/</span>
+      <span
+        className={cx('lang', { unselected: lang !== 'en_US' })}
+        onClick={() => changeLanguage('en_US')}
+      >
+        En
+      </span>
+    </span>
+  );
+
+  return (
+    <div className={cx('language-switcher', className)}>
+      {mode === 'edit' ? (
+        <Popover
+          content={i18n.get(
+            '编辑模式下, 切换国际化会导致正在配置的内容丢失，请及时保存'
+          )}
+          placement="left"
+        >
+          {RadioContent}
+        </Popover>
+      ) : (
+        { RadioContent }
+      )}
+    </div>
+  );
+};