Skip to content

GitLab

A
ant-design-pro
Commit c961cca2 authored by 陈帅's avatar 陈帅
Browse files
Options

add settings drawer i18n

parent 983d737f
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 20 deletions
src/components/SettingDarwer/ThemeColor.js
View file @ c961cca2
......@@ -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 (
......
src/components/SettingDarwer/index.js
View file @ c961cca2
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>
......
src/layouts/BasicLayout.js
View file @ c961cca2
......@@ -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 />
......
src/locales/en-US.js
View file @ c961cca2
......@@ -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',
};
src/locales/zh-CN.js
View file @ c961cca2
......@@ -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',
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment