From 6b2688a8405dab08fedf7a97c084af8928c9cf7a Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Tue, 21 Aug 2018 17:50:13 +0800
Subject: [PATCH] feat: add setting components

---
 src/components/layout/GlobalLayout.vue | 20 ++++++++++-
 src/components/setting/Setting.vue     | 50 ++++++++++++++++++++++++++
 src/components/setting/SettingItem.vue | 27 ++++++++++++++
 src/components/setting/StyleItem.vue   | 38 ++++++++++++++++++++
 src/components/setting/ThemeColor.vue  | 28 +++++++++++++++
 5 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 src/components/setting/Setting.vue
 create mode 100644 src/components/setting/SettingItem.vue
 create mode 100644 src/components/setting/StyleItem.vue
 create mode 100644 src/components/setting/ThemeColor.vue

diff --git a/src/components/layout/GlobalLayout.vue b/src/components/layout/GlobalLayout.vue
index 0591366..b5012b1 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/components/layout/GlobalLayout.vue
@@ -4,6 +4,12 @@
       <sider-menu :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
     <sider-menu v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+    <drawer :open-drawer="showSetting" placement="right"  @change="onSettingDrawerChange">
+      <div class="setting" slot="handler">
+        <a-icon :type="showSetting ? 'close' : 'setting'" />
+      </div>
+      <setting />
+    </drawer>
     <a-layout>
       <global-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
       <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
@@ -24,6 +30,7 @@ import IMenu from '../menu/menu'
 import GlobalFooter from './GlobalFooter'
 import Drawer from '../tool/Drawer'
 import SiderMenu from '../menu/SiderMenu'
+import Setting from '../setting/Setting'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
@@ -36,6 +43,7 @@ let menuData = []
 export default {
   name: 'GlobalLayout',
   components: {
+    Setting,
     SiderMenu,
     Drawer,
     GlobalFooter,
@@ -52,7 +60,7 @@ export default {
       minHeight: minHeight + 'px',
       collapsed: false,
       menuData: menuData,
-      showSetting: true
+      showSetting: false
     }
   },
   computed: {
@@ -81,4 +89,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .setting{
+    background-color: #1890ff;
+    color: #fff;
+    border-radius: 5px 0 0 5px;
+    line-height: 40px;
+    font-size: 22px;
+    width: 40px;
+    height: 40px;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  }
 </style>
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
new file mode 100644
index 0000000..b41eb48
--- /dev/null
+++ b/src/components/setting/Setting.vue
@@ -0,0 +1,50 @@
+<template>
+  <a-layout-sider class="sider" width="273">
+    <setting-item title="整体风格设置">
+      <div class="theme">
+        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :selected="true"/>
+        <style-item img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :selected="false"/>
+      </div>
+    </setting-item>
+    <setting-item title="主题色">
+      <div>
+        <theme-color color="rgb(245, 34, 45)" />
+        <theme-color color="rgb(250, 84, 28)" />
+        <theme-color color="rgb(250, 173, 20)" />
+        <theme-color color="rgb(19, 194, 194)" />
+        <theme-color color="rgb(82, 196, 26)" />
+        <theme-color color="rgb(24, 144, 255)" />
+        <theme-color color="rgb(47, 84, 235)" />
+        <theme-color color="rgb(114, 46, 209)" :selected="true" />
+      </div>
+    </setting-item>
+  </a-layout-sider>
+</template>
+
+<script>
+import ALayoutSider from 'ant-design-vue/es/layout/Sider'
+import AIcon from 'ant-design-vue/es/icon/icon'
+import SettingItem from './SettingItem'
+import StyleItem from './StyleItem'
+import ADivider from 'ant-design-vue/es/divider/index'
+import ThemeColor from './ThemeColor'
+export default {
+  name: 'Setting',
+  components: {ThemeColor, ADivider, StyleItem, SettingItem, AIcon, ALayoutSider}
+}
+</script>
+
+<style lang="less" scoped>
+  .sider{
+    background-color: #fff;
+    height: 100%;
+    padding: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    position: relative;
+    .theme{
+      display: flex;
+    }
+  }
+</style>
diff --git a/src/components/setting/SettingItem.vue b/src/components/setting/SettingItem.vue
new file mode 100644
index 0000000..1e340a7
--- /dev/null
+++ b/src/components/setting/SettingItem.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="setting-item">
+    <h3 class="title">{{title}}</h3>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingItem',
+  props: ['title']
+}
+</script>
+
+<style lang="less" scoped>
+  .setting-item{
+    margin-bottom: 24px;
+    .title{
+      font-size: 14px;
+      color: rgba(0,0,0,.85);
+      line-height: 22px;
+      margin-bottom: 12px;
+    }
+  }
+</style>
diff --git a/src/components/setting/StyleItem.vue b/src/components/setting/StyleItem.vue
new file mode 100644
index 0000000..66ece5d
--- /dev/null
+++ b/src/components/setting/StyleItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="style">
+    <img :src="img" />
+    <div v-if="selected" class="select-item">
+      <a-icon type="check" />
+    </div>
+  </div>
+</template>
+
+<script>
+import AIcon from 'ant-design-vue/es/icon/icon'
+export default {
+  name: 'StyleItem',
+  props: ['selected', 'img'],
+  components: {AIcon}
+}
+</script>
+
+<style lang="less" scoped>
+  .style{
+    margin-right: 16px;
+    position: relative;
+    border-radius: 4px;
+    cursor: pointer;
+    .select-item{
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      height: 100%;
+      color: #1890ff;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+</style>
diff --git a/src/components/setting/ThemeColor.vue b/src/components/setting/ThemeColor.vue
new file mode 100644
index 0000000..7e33ce1
--- /dev/null
+++ b/src/components/setting/ThemeColor.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="theme-color" :style="{backgroundColor: color}">
+    <a-icon v-if="selected" type="check" />
+  </div>
+</template>
+
+<script>
+import AIcon from 'ant-design-vue/es/icon/icon'
+export default {
+  name: 'ThemeColor',
+  components: {AIcon},
+  props: ['color', 'selected']
+}
+</script>
+
+<style lang="less" scoped>
+  .theme-color{
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    float: left;
+    cursor: pointer;
+    margin-right: 8px;
+    text-align: center;
+    color: #fff;
+    font-weight: bold;
+  }
+</style>