Skip to content

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

fix: settings copy to clipboard

parent 6bec1bcd
Show 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 {
export {
default as EllipsisOutline
} from '@ant-design/icons/lib/outline/EllipsisOutline'
export {
default as NotificationOutline
} from '@ant-design/icons/lib/outline/NotificationOutline'
/* Layout end */
examples/src/layouts/BasicLayout.jsx
View file @ 20d4329b
......@@ -96,9 +96,9 @@ export default {
// 媒体查询
query: {},
// 布局类型
layout: 'topmenu', // 'sidemenu', 'topmenu'
layout: 'sidemenu', // 'sidemenu', 'topmenu'
// 定宽: true / 流式: false
contentWidth: true,
contentWidth: false,
fixedHeader: false,
fixSiderbar: false,
// 主题 'dark' | 'light'
......@@ -114,8 +114,7 @@ export default {
collapsed,
autoHideHeader,
layout,
theme,
primaryColor
theme
} = this
const handleMediaQuery = (val) => {
......@@ -134,29 +133,45 @@ export default {
}
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)
if (type === 'contentWidth') {
this.contentWidth = value === 'Fixed'
}
if (type === 'fixedHeader') {
this.fixedHeader = value
}
const handleColorChange = (color) => {
this.primaryColor = color
if (type === 'fixSiderbar') {
this.fixSiderbar = value
}
const handleLayoutChange = (value) => {
if (type === 'layout') {
this.layout = value
if (value === 'sidemenu') {
this.contentWidth = false
// this.fixSiderbar = false
} else {
this.fixSiderbar = false
}
}
const handleLayoutSttingChange = ({ type, value }) => {
console.log('type', type, 'value', value)
if (type === 'contentWidth') {
this.contentWidth = value === 'Fixed'
if (type === 'theme') {
this.theme = value
}
if (type === 'fixedHeader') {
this.fixedHeader = value
if (type === 'primaryColor') {
this.primaryColor = value
}
if (type === 'fixSiderbar') {
this.fixSiderbar = 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 = {
......@@ -187,17 +202,8 @@ export default {
return (
<ProLayout {...cdProps}>
<SettingDrawer
settings={{}}
navTheme={theme}
layout={layout}
primaryColor={primaryColor}
contentWidth={this.contentWidth}
fixedHeader={this.fixedHeader}
fixSiderbar={this.fixSiderbar}
onThemeChange={handleThemeChange}
onColorChange={handleColorChange}
onLayoutChange={handleLayoutChange}
onLayoutSettingChange={handleLayoutSttingChange}
settings={settings}
onChange={handleSettingChange}
/>
<router-view />
</ProLayout>
......
examples/src/locales/lang/en-US.js
View file @ 20d4329b
......@@ -60,5 +60,9 @@ export default {
'app.setting.content-width.fixed': 'Fixed',
'app.setting.content-width.fluid': 'Fluid',
'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 @@
</template>
<div>
<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>
</page-header-wrapper>
</template>
......
package.json
View file @ 20d4329b
......@@ -25,9 +25,9 @@
"lib"
],
"peerDependencies": {
"vue": ">=2.5.0",
"ant-design-vue": "^1.5.4",
"umi-request": "^1.2.11",
"vue": ">=2.5.0",
"vue-container-query": "^0.1.0",
"vue-template-compiler": ">=2.5.0"
},
......@@ -59,8 +59,10 @@
"classnames": "^2.2.6",
"insert-css": "^2.0.0",
"lodash": "^4.17.15",
"omit.js": "^1.0.2",
"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": {
"port": 9528,
......
src/BasicLayout.jsx
View file @ 20d4329b
......@@ -67,7 +67,6 @@ const headerRender = (h, props) => {
if (props.headerRender === false) {
return null
}
console.log('headerRender', props)
return <HeaderView { ...{ props } } />
}
......@@ -107,7 +106,6 @@ const BasicLayout = {
rightContentRender,
collapsedButtonRender
}
console.log('cdProps', cdProps)
return (
<ConfigProvider i18nRender={i18nRender} contentWidth={contentWidth}>
......
src/components/SettingDrawer/index.jsx
View file @ 20d4329b
import './index.less'
import omit from 'omit.js'
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 ThemeColor from './ThemeColor'
import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange'
import { updateTheme } from '../../utils/dynamicTheme'
import { genStringToTheme } from '../../utils/util'
import CopyToClipboard from 'vue-copy-to-clipboard'
const baseClassName = 'ant-pro-setting-drawer'
......@@ -100,7 +104,7 @@ const getThemeList = (i18nRender) => {
}
}
const changeSetting = (key, value, hideMessageLoading) => {
const handleChangeSetting = (key, value, hideMessageLoading) => {
if (key === 'navTheme') {
// 更新主题
}
......@@ -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']),
primaryColor: PropTypes.string,
layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
......@@ -124,6 +140,13 @@ export const SettingDrawerProps = {
contentWidth: PropTypes.bool,
fixedHeader: 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 = {
......@@ -139,28 +162,33 @@ const SettingDrawer = {
const {
setShow,
getContainer,
settings
} = this
const {
navTheme = 'dark',
primaryColor = 'daybreak',
layout = 'sidemenu',
fixedHeader = false,
fixSiderbar = false,
contentWidth = false,
hideHintAlert,
hideCopyButton,
colorWeak
} = this
const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
} = settings
const i18n = this.$props.i18nRender || this.locale
const themeList = getThemeList(i18n)
const isTopMenu = layout === 'topmenu'
const iconStyle = {
color: '#fff',
fontSize: 20
}
const handleThemeChange = (key) => {
this.$emit('themeChange', key)
}
const handleLayoutSettingChange = (val) => {
this.$emit('layoutSettingChange', val)
const changeSetting = (type, value) => {
this.$emit('change', { type, value })
handleChangeSetting(type, value, false)
}
return (
......@@ -192,7 +220,9 @@ const SettingDrawer = {
</template>
<div class={`${baseClassName}-content`}>
<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>
<ThemeColor
......@@ -200,7 +230,6 @@ const SettingDrawer = {
value={primaryColor}
colors={themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light']}
onChange={(color) => {
this.$emit('colorChange', color)
changeSetting('primaryColor', color, null)
}}
/>
......@@ -209,7 +238,6 @@ const SettingDrawer = {
<Body title={i18n('app.setting.navigationmode')}>
<BlockCheckbox value={layout} onChange={(value) => {
this.$emit('layoutChange', value)
changeSetting('layout', value, null)
}} />
</Body>
......@@ -217,9 +245,11 @@ const SettingDrawer = {
<LayoutSetting
contentWidth={contentWidth}
fixedHeader={fixedHeader}
fixSiderbar={fixSiderbar}
fixSiderbar={isTopMenu ? false : fixSiderbar}
layout={layout}
onChange={handleLayoutSettingChange}
onChange={({ type, value }) => {
changeSetting(type, value)
}}
/>
<Divider />
......@@ -242,6 +272,31 @@ const SettingDrawer = {
/>
</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>
</Drawer>
)
......
src/components/SiderMenu/SiderMenu.jsx
View file @ 20d4329b
......@@ -129,7 +129,6 @@ const SiderMenu = {
i18nRender,
menuHeaderRender
} = this
console.log('fixSiderbar', fixSiderbar)
const siderCls = ['ant-pro-sider-menu-sider']
if (fixSiderbar) siderCls.push('fix-sider-bar')
if (theme === 'light') siderCls.push('light')
......
src/utils/util.js
View file @ 20d4329b
......@@ -22,10 +22,28 @@ const themeConfig = {
'#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) {
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 {
......
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