Skip to content

P
pro-layout
Commit 20d4329b authored by liangliangyin's avatar liangliangyin
Browse files
Options

fix: settings copy to clipboard

parent 6bec1bcd
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 52 deletions
examples/src/core/antd/icons.js
View file @ 20d4329b
...@@ -69,5 +69,7 @@ export { ...@@ -69,5 +69,7 @@ export {
export { export {
default as EllipsisOutline default as EllipsisOutline
} from '@ant-design/icons/lib/outline/EllipsisOutline' } from '@ant-design/icons/lib/outline/EllipsisOutline'
export {
default as NotificationOutline
} from '@ant-design/icons/lib/outline/NotificationOutline'
/* Layout end */ /* Layout end */
examples/src/layouts/BasicLayout.jsx
View file @ 20d4329b
...@@ -96,9 +96,9 @@ export default { ...@@ -96,9 +96,9 @@ export default {
// 媒体查询 // 媒体查询
query: {}, query: {},
// 布局类型 // 布局类型
layout: 'topmenu', // 'sidemenu', 'topmenu' layout: 'sidemenu', // 'sidemenu', 'topmenu'
// 定宽: true / 流式: false // 定宽: true / 流式: false
contentWidth: true, contentWidth: false,
fixedHeader: false, fixedHeader: false,
fixSiderbar: false, fixSiderbar: false,
// 主题 'dark' | 'light' // 主题 'dark' | 'light'
...@@ -114,8 +114,7 @@ export default { ...@@ -114,8 +114,7 @@ export default {
collapsed, collapsed,
autoHideHeader, autoHideHeader,
layout, layout,
theme, theme
primaryColor
} = this } = this
const handleMediaQuery = (val) => { const handleMediaQuery = (val) => {
...@@ -134,20 +133,9 @@ export default { ...@@ -134,20 +133,9 @@ export default {
} }
const menus = asyncRouterMap.find(item => item.path === '/').children const menus = asyncRouterMap.find(item => item.path === '/').children
const handleThemeChange = (theme) => {
this.theme = theme const handleSettingChange = ({ type, value, ...args }) => {
} console.log('type', type, 'value', value, 'args:', args)
const handleColorChange = (color) => {
this.primaryColor = color
}
const handleLayoutChange = (value) => {
this.layout = value
if (value === 'sidemenu') {
this.contentWidth = false
}
}
const handleLayoutSttingChange = ({ type, value }) => {
console.log('type', type, 'value', value)
if (type === 'contentWidth') { if (type === 'contentWidth') {
this.contentWidth = value === 'Fixed' this.contentWidth = value === 'Fixed'
} }
...@@ -157,6 +145,33 @@ export default { ...@@ -157,6 +145,33 @@ export default {
if (type === 'fixSiderbar') { if (type === 'fixSiderbar') {
this.fixSiderbar = value this.fixSiderbar = value
} }
if (type === 'layout') {
this.layout = value
if (value === 'sidemenu') {
this.contentWidth = false
// this.fixSiderbar = false
} else {
this.fixSiderbar = false
}
}
if (type === 'theme') {
this.theme = value
}
if (type === 'primaryColor') {
this.primaryColor = value
}
}
const settings = {
navTheme: this.theme,
primaryColor: this.primaryColor,
layout: this.layout,
colorWeak: this.colorWeak,
contentWidth: this.contentWidth,
fixedHeader: this.fixedHeader,
fixSiderbar: this.fixSiderbar,
hideHintAlert: false,
hideCopyButton: false
} }
const cdProps = { const cdProps = {
...@@ -187,17 +202,8 @@ export default { ...@@ -187,17 +202,8 @@ export default {
return ( return (
<ProLayout {...cdProps}> <ProLayout {...cdProps}>
<SettingDrawer <SettingDrawer
settings={{}} settings={settings}
navTheme={theme} onChange={handleSettingChange}
layout={layout}
primaryColor={primaryColor}
contentWidth={this.contentWidth}
fixedHeader={this.fixedHeader}
fixSiderbar={this.fixSiderbar}
onThemeChange={handleThemeChange}
onColorChange={handleColorChange}
onLayoutChange={handleLayoutChange}
onLayoutSettingChange={handleLayoutSttingChange}
/> />
<router-view /> <router-view />
</ProLayout> </ProLayout>
......
examples/src/locales/lang/en-US.js
View file @ 20d4329b
...@@ -60,5 +60,9 @@ export default { ...@@ -60,5 +60,9 @@ export default {
'app.setting.content-width.fixed': 'Fixed', 'app.setting.content-width.fixed': 'Fixed',
'app.setting.content-width.fluid': 'Fluid', 'app.setting.content-width.fluid': 'Fluid',
'app.setting.othersettings': 'Other Settings', 'app.setting.othersettings': 'Other Settings',
'app.setting.weakmode': 'Weak Mode' 'app.setting.weakmode': 'Weak Mode',
'app.setting.copy': 'Copy Setting',
'app.setting.loading': 'Loading theme',
'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify'
} }
examples/src/views/dashboard/analysis.vue
View file @ 20d4329b
...@@ -39,6 +39,29 @@ ...@@ -39,6 +39,29 @@
</template> </template>
<div> <div>
<strong>Analysis Page</strong> <strong>Analysis Page</strong>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>很长的内容...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>很长的内容...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>很长的内容...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div> </div>
</page-header-wrapper> </page-header-wrapper>
</template> </template>
......
package.json
View file @ 20d4329b
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
"lib" "lib"
], ],
"peerDependencies": { "peerDependencies": {
"vue": ">=2.5.0",
"ant-design-vue": "^1.5.4", "ant-design-vue": "^1.5.4",
"umi-request": "^1.2.11", "umi-request": "^1.2.11",
"vue": ">=2.5.0",
"vue-container-query": "^0.1.0", "vue-container-query": "^0.1.0",
"vue-template-compiler": ">=2.5.0" "vue-template-compiler": ">=2.5.0"
}, },
...@@ -59,8 +59,10 @@ ...@@ -59,8 +59,10 @@
"classnames": "^2.2.6", "classnames": "^2.2.6",
"insert-css": "^2.0.0", "insert-css": "^2.0.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"omit.js": "^1.0.2",
"umi-request": "^1.2.11", "umi-request": "^1.2.11",
"vue-container-query": "^0.1.0" "vue-container-query": "^0.1.0",
"vue-copy-to-clipboard": "1.0.0"
}, },
"config": { "config": {
"port": 9528, "port": 9528,
......
src/BasicLayout.jsx
View file @ 20d4329b
...@@ -67,7 +67,6 @@ const headerRender = (h, props) => { ...@@ -67,7 +67,6 @@ const headerRender = (h, props) => {
if (props.headerRender === false) { if (props.headerRender === false) {
return null return null
} }
console.log('headerRender', props)
return <HeaderView { ...{ props } } /> return <HeaderView { ...{ props } } />
} }
...@@ -107,7 +106,6 @@ const BasicLayout = { ...@@ -107,7 +106,6 @@ const BasicLayout = {
rightContentRender, rightContentRender,
collapsedButtonRender collapsedButtonRender
} }
console.log('cdProps', cdProps)
return ( return (
<ConfigProvider i18nRender={i18nRender} contentWidth={contentWidth}> <ConfigProvider i18nRender={i18nRender} contentWidth={contentWidth}>
......
src/components/SettingDrawer/index.jsx
View file @ 20d4329b
import './index.less' import './index.less'
import omit from 'omit.js'
import PropTypes from 'ant-design-vue/es/_util/vue-types' import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { Divider, Drawer, List, Switch, Icon } from 'ant-design-vue' import { Divider, Drawer, List, Switch, Button, Icon, Alert, message } from 'ant-design-vue'
import BlockCheckbox from './BlockCheckbox' import BlockCheckbox from './BlockCheckbox'
import ThemeColor from './ThemeColor' import ThemeColor from './ThemeColor'
import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange' import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange'
import { updateTheme } from '../../utils/dynamicTheme' import { updateTheme } from '../../utils/dynamicTheme'
import { genStringToTheme } from '../../utils/util'
import CopyToClipboard from 'vue-copy-to-clipboard'
const baseClassName = 'ant-pro-setting-drawer' const baseClassName = 'ant-pro-setting-drawer'
...@@ -100,7 +104,7 @@ const getThemeList = (i18nRender) => { ...@@ -100,7 +104,7 @@ const getThemeList = (i18nRender) => {
} }
} }
const changeSetting = (key, value, hideMessageLoading) => { const handleChangeSetting = (key, value, hideMessageLoading) => {
if (key === 'navTheme') { if (key === 'navTheme') {
// 更新主题 // 更新主题
} }
...@@ -115,8 +119,20 @@ const changeSetting = (key, value, hideMessageLoading) => { ...@@ -115,8 +119,20 @@ const changeSetting = (key, value, hideMessageLoading) => {
} }
} }
const genCopySettingJson = (settings) =>
JSON.stringify(
omit(
{
...settings,
primaryColor: genStringToTheme(settings.primaryColor),
},
['colorWeak'],
),
null,
2,
)
export const SettingDrawerProps = { export const settings = {
navTheme: PropTypes.oneOf(['dark', 'light', 'realDark']), navTheme: PropTypes.oneOf(['dark', 'light', 'realDark']),
primaryColor: PropTypes.string, primaryColor: PropTypes.string,
layout: PropTypes.oneOf(['sidemenu', 'topmenu']), layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
...@@ -124,6 +140,13 @@ export const SettingDrawerProps = { ...@@ -124,6 +140,13 @@ export const SettingDrawerProps = {
contentWidth: PropTypes.bool, contentWidth: PropTypes.bool,
fixedHeader: PropTypes.bool, fixedHeader: PropTypes.bool,
fixSiderbar: PropTypes.bool, fixSiderbar: PropTypes.bool,
hideHintAlert: PropTypes.bool.def(false),
hideCopyButton: PropTypes.bool.def(false)
}
export const SettingDrawerProps = {
getContainer: PropTypes.func,
settings: PropTypes.objectOf(settings)
} }
const SettingDrawer = { const SettingDrawer = {
...@@ -139,28 +162,33 @@ const SettingDrawer = { ...@@ -139,28 +162,33 @@ const SettingDrawer = {
const { const {
setShow, setShow,
getContainer, getContainer,
settings
} = this
const {
navTheme = 'dark', navTheme = 'dark',
primaryColor = 'daybreak', primaryColor = 'daybreak',
layout = 'sidemenu', layout = 'sidemenu',
fixedHeader = false, fixedHeader = false,
fixSiderbar = false, fixSiderbar = false,
contentWidth = false, contentWidth = false,
hideHintAlert,
hideCopyButton,
colorWeak colorWeak
} = this } = settings
const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
const i18n = this.$props.i18nRender || this.locale
const themeList = getThemeList(i18n) const themeList = getThemeList(i18n)
const isTopMenu = layout === 'topmenu'
const iconStyle = { const iconStyle = {
color: '#fff', color: '#fff',
fontSize: 20 fontSize: 20
} }
const handleThemeChange = (key) => { const changeSetting = (type, value) => {
this.$emit('themeChange', key) this.$emit('change', { type, value })
} handleChangeSetting(type, value, false)
const handleLayoutSettingChange = (val) => {
this.$emit('layoutSettingChange', val)
} }
return ( return (
...@@ -192,7 +220,9 @@ const SettingDrawer = { ...@@ -192,7 +220,9 @@ const SettingDrawer = {
</template> </template>
<div class={`${baseClassName}-content`}> <div class={`${baseClassName}-content`}>
<Body title={i18n('app.setting.pagestyle')}> <Body title={i18n('app.setting.pagestyle')}>
<BlockCheckbox list={themeList.themeList} value={navTheme} onChange={handleThemeChange} /> <BlockCheckbox list={themeList.themeList} value={navTheme} onChange={(val) => {
changeSetting('theme', val)
}} />
</Body> </Body>
<ThemeColor <ThemeColor
...@@ -200,7 +230,6 @@ const SettingDrawer = { ...@@ -200,7 +230,6 @@ const SettingDrawer = {
value={primaryColor} value={primaryColor}
colors={themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light']} colors={themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light']}
onChange={(color) => { onChange={(color) => {
this.$emit('colorChange', color)
changeSetting('primaryColor', color, null) changeSetting('primaryColor', color, null)
}} }}
/> />
...@@ -209,7 +238,6 @@ const SettingDrawer = { ...@@ -209,7 +238,6 @@ const SettingDrawer = {
<Body title={i18n('app.setting.navigationmode')}> <Body title={i18n('app.setting.navigationmode')}>
<BlockCheckbox value={layout} onChange={(value) => { <BlockCheckbox value={layout} onChange={(value) => {
this.$emit('layoutChange', value)
changeSetting('layout', value, null) changeSetting('layout', value, null)
}} /> }} />
</Body> </Body>
...@@ -217,9 +245,11 @@ const SettingDrawer = { ...@@ -217,9 +245,11 @@ const SettingDrawer = {
<LayoutSetting <LayoutSetting
contentWidth={contentWidth} contentWidth={contentWidth}
fixedHeader={fixedHeader} fixedHeader={fixedHeader}
fixSiderbar={fixSiderbar} fixSiderbar={isTopMenu ? false : fixSiderbar}
layout={layout} layout={layout}
onChange={handleLayoutSettingChange} onChange={({ type, value }) => {
changeSetting(type, value)
}}
/> />
<Divider /> <Divider />
...@@ -242,6 +272,31 @@ const SettingDrawer = { ...@@ -242,6 +272,31 @@ const SettingDrawer = {
/> />
</Body> </Body>
{hideHintAlert && hideCopyButton ? null : <Divider />}
{hideHintAlert ? null : (
<Alert
type="warning"
message={i18n('app.setting.production.hint')}
icon={(<Icon type={'notification'} />)}
showIcon
style={{ marginBottom: '16px' }}
/>
)}
{hideCopyButton ? null : (
<CopyToClipboard
text={genCopySettingJson(settings)}
onCopy={() =>
message.success(i18n('app.setting.copyinfo'))
}
>
<Button block>
<Icon type={'copy'} />{i18n('app.setting.copy')}
</Button>
</CopyToClipboard>
)}
</div> </div>
</Drawer> </Drawer>
) )
......
src/components/SiderMenu/SiderMenu.jsx
View file @ 20d4329b
...@@ -129,7 +129,6 @@ const SiderMenu = { ...@@ -129,7 +129,6 @@ const SiderMenu = {
i18nRender, i18nRender,
menuHeaderRender menuHeaderRender
} = this } = this
console.log('fixSiderbar', fixSiderbar)
const siderCls = ['ant-pro-sider-menu-sider'] const siderCls = ['ant-pro-sider-menu-sider']
if (fixSiderbar) siderCls.push('fix-sider-bar') if (fixSiderbar) siderCls.push('fix-sider-bar')
if (theme === 'light') siderCls.push('light') if (theme === 'light') siderCls.push('light')
......
src/utils/util.js
View file @ 20d4329b
...@@ -22,10 +22,28 @@ const themeConfig = { ...@@ -22,10 +22,28 @@ const themeConfig = {
'#722ED1': 'purple', '#722ED1': 'purple',
} }
const invertKeyValues = (obj) =>
Object.keys(obj).reduce((acc, key) => {
acc[obj[key]] = key
return acc
}, {})
/**
* #1890ff -> daybreak
* @param val
*/
export function genThemeToString (val) { export function genThemeToString (val) {
return val && themeConfig[val] ? themeConfig[val] : val return val && themeConfig[val] ? themeConfig[val] : val
} }
/**
* daybreak-> #1890ff
* @param val
*/
export function genStringToTheme(val) {
const stringConfig = invertKeyValues(themeConfig)
return val && stringConfig[val] ? stringConfig[val] : val
}
export { export {
......
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