ui build

src/components/global.less

@@ -504,7 +504,4 @@ body {
       }
     }
   }
-  .ant-card-body{
-    padding: 16px!important;
-  }
 }

src/components/page/GlobalLayout.vue

@@ -67,7 +67,6 @@
       <a-layout-footer style="padding: 0">
         <global-footer />
       </a-layout-footer>
-      <setting-drawer></setting-drawer>
     </a-layout>
   </a-layout>
 </template>
@@ -76,7 +75,6 @@
 import SideMenu from '@/components/menu/SideMenu'
 import GlobalHeader from '@/components/page/GlobalHeader'
 import GlobalFooter from '@/components/page/GlobalFooter'
-import SettingDrawer from '@/components/setting/SettingDrawer'
 import { asyncRouterMap } from '@/config/router.config.js'
 import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
@@ -87,8 +85,7 @@ export default {
   components: {
     SideMenu,
     GlobalHeader,
-    GlobalFooter,
+    GlobalFooter
-    SettingDrawer
   },
   mixins: [mixin, mixinDevice],
   data() {

src/components/setting/SettingDrawer.vue

@@ -8,21 +8,20 @@
       :visible="visible"
       :getContainer="() => $refs.settingDrawer"
       :style="{}"
+      :mask="false"
     >
       <div class="setting-drawer-index-content">
-
         <div :style="{ marginBottom: '24px' }">
           <h3 class="setting-drawer-index-title">整体风格设置</h3>
-
           <div class="setting-drawer-index-blockChecbox">
             <a-tooltip>
               <template slot="title">
                 暗色菜单风格
               </template>
               <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark" />
                 <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
-                  <a-icon type="check"/>
+                  <a-icon type="check" />
                 </div>
               </div>
             </a-tooltip>
@@ -32,9 +31,9 @@
                 亮色菜单风格
               </template>
               <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light" />
                 <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
-                  <a-icon type="check"/>
+                  <a-icon type="check" />
                 </div>
               </div>
             </a-tooltip>
@@ -43,7 +42,6 @@
 
         <div :style="{ marginBottom: '24px' }">
           <h3 class="setting-drawer-index-title">主题色</h3>
-
           <div style="height: 20px">
             <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
               <template slot="title">
@@ -53,7 +51,6 @@
                 <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
               </a-tag>
             </a-tooltip>
-
           </div>
         </div>
         <a-divider />
@@ -62,29 +59,19 @@
           <h3 class="setting-drawer-index-title">导航模式</h3>
 
           <div class="setting-drawer-index-blockChecbox">
-            <a-tooltip>
+            <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
-              <template slot="title">
+              <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu" />
-                侧边栏导航
+              <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
-              </template>
+                <a-icon type="check" />
-              <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
-                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
-                  <a-icon type="check"/>
-                </div>
               </div>
-            </a-tooltip>
+            </div>
 
-            <a-tooltip>
+            <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
-              <template slot="title">
+              <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu" />
-                顶部栏导航
+              <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
-              </template>
+                <a-icon type="check" />
-              <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
-                <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
-                  <a-icon type="check"/>
-                </div>
               </div>
-            </a-tooltip>
+            </div>
           </div>
           <div :style="{ marginTop: '24px' }">
             <a-list :split="false">
@@ -93,7 +80,12 @@
                   <template slot="title">
                     该设定仅 [顶部栏导航] 时有效
                   </template>
-                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
+                  <a-select
+                    size="small"
+                    style="width: 80px;"
+                    :defaultValue="contentWidth"
+                    @change="handleContentWidthChange"
+                  >
                     <a-select-option value="Fixed">固定</a-select-option>
                     <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
                   </a-select>
@@ -109,36 +101,31 @@
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
+                <a-switch
+                  slot="actions"
+                  size="small"
+                  :disabled="!fixedHeader"
+                  :defaultChecked="autoHideHeader"
+                  @change="handleFixedHeaderHidden"
+                />
                 <a-list-item-meta>
-                  <div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑时隐藏 Header</div>
+                  <div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">
-                </a-list-item-meta>
+                    下滑时隐藏 Header
-              </a-list-item>
+                  </div>
-              <a-list-item >
-                <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
-                <a-list-item-meta>
-                  <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '24px' }">
-          <h3 class="setting-drawer-index-title">其他设置</h3>
-          <div>
-            <a-list :split="false">
-              <a-list-item>
-                <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
-                <a-list-item-meta>
-                  <div slot="title">色弱模式</div>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
+                <a-switch
+                  slot="actions"
+                  size="small"
+                  :disabled="layoutMode === 'topmenu'"
+                  :defaultChecked="fixSiderbar"
+                  @change="handleFixSiderbar"
+                />
                 <a-list-item-meta>
-                  <div slot="title">多页签模式</div>
+                  <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">
+                    固定侧边菜单
+                  </div>
                 </a-list-item-meta>
               </a-list-item>
             </a-list>
@@ -146,23 +133,13 @@
         </div>
         <a-divider />
         <div :style="{ marginBottom: '24px' }">
-          <a-button
+          <a-list :split="false">
-            @click="doCopy"
+            <a-list-item>
-            icon="copy"
+               <a-icon type="double-right" @click="toggle" class="iconClose"/>
-            block
+            </a-list-item>
-          >拷贝设置</a-button>
+          </a-list>
-          <a-alert type="warning" :style="{ marginTop: '24px' }">
-            <span slot="message">
-              配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
-              <a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js" target="_blank">src/config/defaultSettings.js</a>
-            </span>
-          </a-alert>
         </div>
       </div>
-      <div class="setting-drawer-index-handle" @click="toggle">
-        <a-icon type="setting" v-if="!visible"/>
-        <a-icon type="close" v-else/>
-      </div>
     </a-drawer>
   </div>
 </template>
@@ -171,7 +148,7 @@
 import DetailList from '@/components/tools/DetailList'
 import SettingItem from '@/components/setting/SettingItem'
 import config from '@/config/defaultSettings'
-import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
+import { updateTheme, colorList } from '@/components/tools/setting'
 import { mixin, mixinDevice } from '@/utils/mixin'
 
 export default {
@@ -187,9 +164,7 @@ export default {
       baseConfig: Object.assign({}, config)
     }
   },
-  watch: {
+  watch: {},
-
-  },
   mounted() {
     const vm = this
     setTimeout(() => {
@@ -199,9 +174,6 @@ export default {
     if (this.primaryColor !== config.primaryColor) {
       updateTheme(this.primaryColor)
     }
-    if (this.colorWeak !== config.colorWeak) {
-      updateColorWeak(this.colorWeak)
-    }
   },
   methods: {
     showDrawer() {
@@ -213,45 +185,10 @@ export default {
     toggle() {
       this.visible = !this.visible
     },
-    onColorWeak(checked) {
-      this.baseConfig.colorWeak = checked
-      this.$store.dispatch('ToggleWeak', checked)
-      updateColorWeak(checked)
-    },
-    onMultiTab(checked) {
-      this.baseConfig.multiTab = checked
-      this.$store.dispatch('ToggleMultiTab', checked)
-    },
     handleMenuTheme(theme) {
       this.baseConfig.navTheme = theme
       this.$store.dispatch('ToggleTheme', theme)
     },
-    doCopy() {
-      const text = `export default {
-  primaryColor: '${this.baseConfig.primaryColor}', // primary color of ant design
-  navTheme: '${this.baseConfig.navTheme}', // theme for nav menu
-  layout: '${this.baseConfig.layout}', // nav menu position: sidemenu or topmenu
-  contentWidth: '${this.baseConfig.contentWidth}', // layout of content: Fluid or Fixed, only works when layout is topmenu
-  fixedHeader: ${this.baseConfig.fixedHeader}, // sticky header
-  fixSiderbar: ${this.baseConfig.fixSiderbar}, // sticky siderbar
-  autoHideHeader: ${this.baseConfig.autoHideHeader}, //  auto hide header
-  colorWeak: ${this.baseConfig.colorWeak},
-  multiTab: ${this.baseConfig.multiTab},
-  // vue-ls options
-  storageOptions: {
-    namespace: 'pro__',
-    name: 'ls',
-    storage: 'local',
-  }
-}`
-      this.$copyText(text).then(message => {
-        console.log('copy', message)
-        this.$message.success('复制完毕')
-      }).catch(err => {
-        console.log('copy.err', err)
-        this.$message.error('复制失败')
-      })
-    },
     handleLayout(mode) {
       this.baseConfig.layout = mode
       this.$store.dispatch('ToggleLayoutMode', mode)
@@ -292,75 +229,77 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.setting-drawer-index-content {
+  .setting-drawer-index-blockChecbox {
+    display: flex;
 
-  .setting-drawer-index-content {
+    .setting-drawer-index-item {
-
+      margin-right: 16px;
-    .setting-drawer-index-blockChecbox {
+      position: relative;
-      display: flex;
+      border-radius: 4px;
-
-      .setting-drawer-index-item {
-        margin-right: 16px;
-        position: relative;
-        border-radius: 4px;
-        cursor: pointer;
-
-        img {
-          width: 48px;
-        }
-
-        .setting-drawer-index-selectIcon {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 100%;
-          padding-top: 15px;
-          padding-left: 24px;
-          height: 100%;
-          color: #1890ff;
-          font-size: 14px;
-          font-weight: 700;
-        }
-      }
-    }
-    .setting-drawer-theme-color-colorBlock {
-      width: 20px;
-      height: 20px;
-      border-radius: 2px;
-      float: left;
       cursor: pointer;
-      margin-right: 8px;
-      padding-left: 0px;
-      padding-right: 0px;
-      text-align: center;
-      color: #fff;
-      font-weight: 700;
 
-      i {
+      img {
+        width: 48px;
+      }
+
+      .setting-drawer-index-selectIcon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        padding-top: 15px;
+        padding-left: 24px;
+        height: 100%;
+        color: #1890ff;
         font-size: 14px;
+        font-weight: 700;
       }
     }
   }
-
+  .setting-drawer-theme-color-colorBlock {
-  .setting-drawer-index-handle {
+    width: 20px;
-    position: absolute;
+    height: 20px;
-    top: 240px;
+    border-radius: 2px;
-    background: #1890ff;
+    float: left;
-    width: 48px;
-    height: 48px;
-    right: 300px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     cursor: pointer;
-    pointer-events: auto;
+    margin-right: 8px;
-    z-index: 1001;
+    padding-left: 0px;
+    padding-right: 0px;
     text-align: center;
-    font-size: 16px;
+    color: #fff;
-    border-radius: 4px 0 0 4px;
+    font-weight: 700;
 
     i {
-      color: rgb(255, 255, 255);
+      font-size: 14px;
-      font-size: 20px;
     }
   }
+  .iconClose{
+    font-size: 24px;
+    cursor: pointer;
+  }
+}
+
+.setting-drawer-index-handle {
+  position: absolute;
+  top: 240px;
+  background: #1890ff;
+  width: 48px;
+  height: 48px;
+  right: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  pointer-events: auto;
+  z-index: 1001;
+  text-align: center;
+  font-size: 16px;
+  border-radius: 4px 0 0 4px;
+
+  i {
+    color: rgb(255, 255, 255);
+    font-size: 20px;
+  }
+}
 </style>

src/components/tools/HeaderComment.vue

@@ -25,7 +25,7 @@
     </template>
     <span @click="fetchComment" class="header-comment">
       <a-badge dot>
-        <a-icon type="bell"/>
+        <a-icon type="bell" />
       </a-badge>
     </span>
   </a-popover>

src/components/tools/UserMenu.vue

@@ -2,12 +2,12 @@
   <div class="user-wrapper">
     <a href="/" target="_blank">
       <span class="action">
-        <a-icon type="link"></a-icon>
+        <a-icon type="link" />
       </span>
     </a>
     <a href="javascript:void(0)" @click="showOptionModal">
       <span class="action">
-        <a-icon type="setting"></a-icon>
+        <a-icon type="setting" />
       </span>
     </a>
     <header-comment class="action"/>
@@ -31,25 +31,30 @@
         </a-menu-item>
       </a-menu>
     </a-dropdown>
-    <a-modal title="样式设置" v-model="optionVisible"></a-modal>
+    <setting-drawer ref="drawer"></setting-drawer>
   </div>
 </template>
 
 <script>
 import HeaderComment from './HeaderComment'
+import SettingDrawer from '@/components/setting/SettingDrawer'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'UserMenu',
   components: {
-    HeaderComment
+    HeaderComment,
+    SettingDrawer
   },
   data() {
     return {
-      optionVisible: false,
+      optionVisible: true,
       avatar: 'https://gravatar.loli.net/avatar/?s=256&d=mm'
     }
   },
+  mounted() {
+    this.optionVisible = this.$refs.drawer.visible
+  },
   methods: {
     ...mapActions(['Logout']),
     ...mapGetters(['nickname']),
@@ -76,7 +81,8 @@ export default {
       })
     },
     showOptionModal() {
-      this.optionVisible = true
+      this.optionVisible = this.$refs.drawer.visible
+      this.$refs.drawer.toggle()
     }
   }
 }

src/components/tools/setting.js

@@ -5,11 +5,11 @@ let lessNodesAppended
 
 const colorList = [
   {
-    key: '薄暮',
+    key: '红色',
     color: '#F5222D'
   },
   {
-    key: '火山',
+    key: '浅红色',
     color: '#FA541C'
   },
   {
@@ -17,23 +17,23 @@ const colorList = [
     color: '#FAAD14'
   },
   {
-    key: '明青',
+    key: '青色',
     color: '#13C2C2'
   },
   {
-    key: '极光绿',
+    key: '绿色',
     color: '#52C41A'
   },
   {
-    key: '拂晓蓝（默认）',
+    key: '默认',
     color: '#1890FF'
   },
   {
-    key: '极客蓝',
+    key: '蓝色',
     color: '#2F54EB'
   },
   {
-    key: '酱紫',
+    key: '紫色',
     color: '#722ED1'
   }
 ]
@@ -95,9 +95,4 @@ const updateTheme = primaryColor => {
   }
 }
 
-const updateColorWeak = colorWeak => {
+export { updateTheme, colorList }
-  // document.body.className = colorWeak ? 'colorWeak' : '';
-  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
-}
-
-export { updateTheme, colorList, updateColorWeak }

src/views/system/OptionForm.vue

@@ -600,16 +600,16 @@ export default {
     },
     handleAttachChange(e) {
       switch (e) {
-        case '0':
+        case 'local':
-        case '3':
+        case 'smms':
           this.upyunFormHidden = false
           this.qiniuFormHidden = false
           break
-        case '1':
+        case 'ypyun':
           this.upyunFormHidden = true
           this.qiniuFormHidden = false
           break
-        case '2':
+        case 'qnyun':
           this.qiniuFormHidden = true
           this.upyunFormHidden = false
           break

src/views/user/Profile.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="page-header-index-wide page-header-wrapper-grid-content-main">
     <a-row :gutter="24">
-      <a-col
+      <a-col :md="24" :lg="10">
-        :md="24"
+        <a-card :bordered="false" :bodyStyle="{ padding: '16' }">
-        :lg="10"
-      >
-        <a-card :bordered="false">
           <div class="profile-center-avatarHolder">
             <div class="avatar">
-              <img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'">
+              <img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" />
             </div>
             <div class="username">{{ user.nickname }}</div>
             <div class="bio">{{ user.description }}</div>
@@ -25,10 +22,7 @@
           </div>
           <a-divider />
           <div class="general-profile">
-            <a-list
+            <a-list itemLayout="horizontal" :loading="countsLoading">
-              itemLayout="horizontal"
-              :loading="countsLoading"
-            >
               <a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章。</a-list-item>
               <a-list-item>累计创建了 {{ counts.linkCount || 0 }} 个标签。</a-list-item>
               <a-list-item>累计获得了 {{ counts.commentCount || 0 }} 条评论。</a-list-item>
@@ -39,21 +33,11 @@
           </div>
         </a-card>
       </a-col>
-      <a-col
+      <a-col :md="24" :lg="14">
-        :md="24"
+        <a-card :bordered="false" title="个人资料" :bodyStyle="{ padding: '0' }">
-        :lg="14"
-      >
-        <a-card
-          :bordered="false"
-          title="个人资料"
-          :bodyStyle="{ padding: '0' }"
-        >
           <div class="card-container">
             <a-tabs type="card">
-              <a-tab-pane
+              <a-tab-pane tab="基本资料" key="1">
-                tab="基本资料"
-                key="1"
-              >
                 <a-form layout="vertical">
                   <a-form-item label="用户名：">
                     <a-input v-model="user.username" />
@@ -65,49 +49,31 @@
                     <a-input v-model="user.email" />
                   </a-form-item>
                   <a-form-item label="个人说明：">
-                    <a-input
+                    <a-input type="textarea" :autosize="{ minRows: 5 }" v-model="user.description" />
-                      type="textarea"
-                      :autosize="{ minRows: 5 }"
-                      v-model="user.description"
-                    />
                   </a-form-item>
                   <a-form-item>
-                    <a-button
+                    <a-button type="primary" @click="updateProfile">保存</a-button>
-                      type="primary"
-                      @click="updateProfile"
-                    >保存</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
-              <a-tab-pane
+              <a-tab-pane tab="密码" key="2">
-                tab="密码"
-                key="2"
-              >
                 <a-form layout="vertical">
                   <a-form-item label="原密码：">
-                    <a-input
+                    <a-input v-model="passwordParam.oldPassword" type="password" />
-                      v-model="passwordParam.oldPassword"
-                      type="password"
-                    />
                   </a-form-item>
                   <a-form-item label="新密码：">
-                    <a-input
+                    <a-input v-model="passwordParam.newPassword" type="password" />
-                      v-model="passwordParam.newPassword"
-                      type="password"
-                    />
                   </a-form-item>
                   <a-form-item label="确认密码：">
-                    <a-input
+                    <a-input v-model="passwordParam.confirmPassword" type="password" />
-                      v-model="passwordParam.confirmPassword"
-                      type="password"
-                    />
                   </a-form-item>
                   <a-form-item>
                     <a-button
                       type="primary"
                       :disabled="passwordUpdateButtonDisabled"
                       @click="updatePassword"
-                    >确认更改</a-button>
+                    >确认更改</a-button
+                    >
                   </a-form-item>
                 </a-form>
               </a-tab-pane>