add settings drawer i18n

8 years ago · c961cca2cf
6 changed files with 53 additions and 20 deletions
--- a/package.json
+++ b/package.json
@ -51,7 +51,7 @@
    "@babel/polyfill": "^7.0.0-beta.53",
    "@types/react": "^16.4.11",
    "@types/react-dom": "^16.0.6",
-    "antd-pro-merge-less": "^0.0.6",
+    "antd-pro-merge-less": "^0.0.9",
    "antd-theme-webpack-plugin": "^1.0.8",
    "babel-eslint": "^8.2.6",
    "babel-runtime": "^6.9.2",
--- a/src/components/SettingDarwer/ThemeColor.js
+++ b/src/components/SettingDarwer/ThemeColor.js
@ -15,7 +15,7 @@ const Tag = ({ color, check, ...rest }) => {
  );
 };

-const ThemeColor = ({ colors, value, onChange }) => {
+const ThemeColor = ({ colors, title, value, onChange }) => {
  let colorList = colors;
  if (!colors) {
    colorList = [
@ -31,7 +31,7 @@ const ThemeColor = ({ colors, value, onChange }) => {
  }
  return (
    <div className={styles.themeColor}>
-      <h3 className={styles.title}>主题色</h3>
+      <h3 className={styles.title}>{title}</h3>
      <div className={styles.content}>
        {colorList.map(color => {
          return (
--- a/src/components/SettingDarwer/index.js
+++ b/src/components/SettingDarwer/index.js
@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Select, message, Drawer, List, Switch, Divider, Icon, Button } from 'antd';
+import { formatMessage } from 'umi/locale';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { connect } from 'dva';
 import styles from './index.less';
@ -26,7 +27,7 @@ class SettingDarwer extends PureComponent {
    } = this.props;
    return [
      {
-        title: '栅格模式',
+        title: formatMessage({ id: 'app.setting.gridmode' }),
        action: [
          <Select
            value={grid}
@ -34,13 +35,17 @@ class SettingDarwer extends PureComponent {
            onSelect={value => this.changeSetting('grid', value)}
            style={{ width: 80 }}
          >
-            <Select.Option value="Wide">定宽</Select.Option>
-            <Select.Option value="Fluid">流式</Select.Option>
+            <Select.Option value="Wide">
+              {formatMessage({ id: 'app.setting.gridmode.wide' })}
+            </Select.Option>
+            <Select.Option value="Fluid">
+              {formatMessage({ id: 'app.setting.gridmode.fluid' })}
+            </Select.Option>
          </Select>,
        ],
      },
      {
-        title: '固定 Header',
+        title: formatMessage({ id: 'app.setting.fixedheader' }),
        action: [
          <Switch
            size="small"
@ -50,7 +55,7 @@ class SettingDarwer extends PureComponent {
        ],
      },
      {
-        title: '下滑时隐藏 Header',
+        title: formatMessage({ id: 'app.setting.hideheader' }),
        hide: !fixedHeader,
        action: [
          <Switch
@ -61,7 +66,7 @@ class SettingDarwer extends PureComponent {
        ],
      },
      {
-        title: '固定 Siderbar',
+        title: formatMessage({ id: 'app.setting.fixedsidebar' }),
        hide: layout === 'topmenu',
        action: [
          <Switch
@ -143,7 +148,7 @@ class SettingDarwer extends PureComponent {
        }}
      >
        <div className={styles.content}>
-          <Body title="整体风格设置">
+          <Body title={formatMessage({ id: 'app.setting.pagestyle' })}>
            <BlockChecbox
              list={[
                {
@ -161,13 +166,14 @@ class SettingDarwer extends PureComponent {
          </Body>

          <ThemeColor
+            title={formatMessage({ id: 'app.setting.themecolor' })}
            value={themeColor}
            onChange={color => this.changeSetting('themeColor', color)}
          />

          <Divider />

-          <Body title="导航设置 ">
+          <Body title={formatMessage({ id: 'app.setting.navigationmode' })}>
            <BlockChecbox
              list={[
                {
@ -192,7 +198,7 @@ class SettingDarwer extends PureComponent {

          <Divider />

-          <Body title="其他设置 ">
+          <Body title={formatMessage({ id: 'app.setting.othersettings' })}>
            <List.Item
              actions={[
                <Switch
@ -202,17 +208,13 @@ class SettingDarwer extends PureComponent {
                />,
              ]}
            >
-              色弱模式
+              {formatMessage({ id: 'app.setting.weakmode' })}
            </List.Item>
          </Body>
          <Divider />
          <CopyToClipboard
            text={JSON.stringify(setting)}
-            onCopy={() =>
-              message.success(
-                'copy success，please replace defaultSetting in src/models/setting.js'
-              )
-            }
+            onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
          >
            <Button
              style={{
@ -220,7 +222,7 @@ class SettingDarwer extends PureComponent {
              }}
            >
              <Icon type="copy" />
-              拷贝配置
+              {formatMessage({ id: 'app.setting.copy' })}
            </Button>
          </CopyToClipboard>
        </div>
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@ -179,7 +179,12 @@ class BasicLayout extends React.PureComponent {
            {...this.props}
          />
        )}
-        <Layout style={this.getLayoutStyle()}>
+        <Layout
+          style={{
+            ...this.getLayoutStyle(),
+            minHeight: '100vh',
+          }}
+        >
          <Header handleMenuCollapse={this.handleMenuCollapse} logo={logo} {...this.props} />
          <Content style={this.getContentStyle()}>{children}</Content>
          <Footer />
--- a/src/locales/en-US.js
+++ b/src/locales/en-US.js
@ -155,4 +155,17 @@ export default {
  'app.result.success.btn-return': 'Back to list',
  'app.result.success.btn-project': 'View project',
  'app.result.success.btn-print': 'Print',
+  'app.setting.pagestyle': 'Page style setting',
+  'app.setting.gridmode': 'Grid Mode',
+  'app.setting.gridmode.wide': 'Wide',
+  'app.setting.gridmode.fluid': 'Fluid',
+  'app.setting.themecolor': 'Theme Color',
+  'app.setting.navigationmode': 'Navigation Mode',
+  'app.setting.fixedheader': 'Fixed Header',
+  'app.setting.fixedsidebar': 'Fixed Sidebar',
+  'app.setting.hideheader': 'Hidden Header when sliding ',
+  'app.setting.othersettings': 'Other Settings',
+  'app.setting.weakmode': 'Weak Mode',
+  'app.setting.copy': 'Copy Setting',
+  'app.setting.copyinfo': 'copy success，please replace defaultSetting in src/models/setting.js',
 };
--- a/src/locales/zh-CN.js
+++ b/src/locales/zh-CN.js
@ -150,4 +150,17 @@ export default {
  'app.result.success.btn-return': '返回列表',
  'app.result.success.btn-project': '查看项目',
  'app.result.success.btn-print': '打印',
+  'app.setting.pagestyle': '整理风格设置',
+  'app.setting.gridmode': '栅格模式',
+  'app.setting.gridmode.wide': '定宽',
+  'app.setting.gridmode.fluid': '流式',
+  'app.setting.themecolor': '主题色',
+  'app.setting.navigationmode': '导航模式',
+  'app.setting.fixedheader': '固定 Header',
+  'app.setting.fixedsidebar': '固定 Sidebar',
+  'app.setting.hideheader': '下滑时隐藏 Header',
+  'app.setting.othersettings': '其他设置',
+  'app.setting.weakmode': '色弱模式',
+  'app.setting.copy': '拷贝设置',
+  'app.setting.copyinfo': '拷贝成功，请到 src/models/setting.js 中替换 defaultSetting',
 };