fix: settings copy to clipboard

examples/src/core/antd/icons.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

 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

@@ -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

@@ -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 {