From f8bd554dd67bcf7755d22e62b7d7dc93e728cbe0 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Fri, 29 Mar 2019 16:05:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=84=E8=AE=BA=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 babel.config.js                         |  2 +-
 src/components/global.less              |  2 +-
 src/components/page/SHeaderNotice.vue   | 58 ---------------
 src/components/tools/HeaderComment.vue  | 97 +++++++++++++++++++++++++
 src/components/tools/HeaderNotice.vue   | 88 ----------------------
 src/components/tools/TwoStepCaptcha.vue | 89 -----------------------
 src/components/tools/UserMenu.vue       | 19 ++++-
 7 files changed, 114 insertions(+), 241 deletions(-)
 delete mode 100644 src/components/page/SHeaderNotice.vue
 create mode 100644 src/components/tools/HeaderComment.vue
 delete mode 100644 src/components/tools/HeaderNotice.vue
 delete mode 100644 src/components/tools/TwoStepCaptcha.vue

diff --git a/babel.config.js b/babel.config.js
index caab34d7..29ba26bd 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -8,4 +8,4 @@ module.exports = {
       }
     ]
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/global.less b/src/components/global.less
index 9ed608af..1920e0d5 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -147,7 +147,7 @@ body {
         }
 
         .avatar {
-          margin: 20px 8px 20px 0;
+          margin: 20px 0 20px 0;
           color: #1890ff;
           background: hsla(0, 0%, 100%, .85);
           vertical-align: middle;
diff --git a/src/components/page/SHeaderNotice.vue b/src/components/page/SHeaderNotice.vue
deleted file mode 100644
index eae03dff..00000000
--- a/src/components/page/SHeaderNotice.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
-    <template slot="content">
-      <a-spin :spinning="loadding">
-        <a-tabs>
-          <a-tab-pane v-for="(tab, k) in tabs" :tab="tab.title" :key="k">
-
-          </a-tab-pane>
-        </a-tabs>
-      </a-spin>
-    </template>
-    <span @click="fetchNotice" class="header-notice">
-      <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
-      </a-badge>
-    </span>
-  </a-popover>
-</template>
-
-<script>
-export default {
-  name: 'HeaderNotice',
-  props: {
-    tabs: {
-      type: Array,
-      default: null,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loadding: false
-    }
-  },
-  methods: {
-    fetchNotice() {
-      if (this.loadding) {
-        this.loadding = false
-        return
-      }
-      this.loadding = true
-      setTimeout(() => {
-        this.loadding = false
-      }, 2000)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
-    span {
-      vertical-align: initial;
-    }
-  }
-</style>
diff --git a/src/components/tools/HeaderComment.vue b/src/components/tools/HeaderComment.vue
new file mode 100644
index 00000000..b57b9177
--- /dev/null
+++ b/src/components/tools/HeaderComment.vue
@@ -0,0 +1,97 @@
+<template>
+  <a-popover
+    v-model="visible"
+    trigger="click"
+    placement="bottomRight"
+    :autoAdjustOverflow="true"
+    :arrowPointAtCenter="true"
+    overlayClassName="header-comment-wrapper"
+    :overlayStyle="{ width: '300px', top: '50px' }"
+  >
+    <template slot="content">
+      <a-spin :spinning="loadding">
+        <a-list>
+          <a-list-item v-for="comment in comments" :key="comment.id">
+            <a-list-item-meta title="立个Flag，共同努力" description="一天前">
+              <a-avatar
+                style="background-color: white"
+                slot="avatar"
+                src="https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm"
+              />
+            </a-list-item-meta>
+          </a-list-item>
+          <a-list-item>
+            <a-list-item-meta title="感谢！！！非常好的博客系统" description="一天前">
+              <a-avatar
+                style="background-color: white"
+                slot="avatar"
+                src="https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm"
+              />
+            </a-list-item-meta>
+          </a-list-item>
+          <a-list-item>
+            <a-list-item-meta title="token就是P2DygQ1psV86JIag，百度验证是在百度资源平台绑定域名的时候验证用的。" description="一天前">
+              <a-avatar
+                style="background-color: white"
+                slot="avatar"
+                src="https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm"
+              />
+            </a-list-item-meta>
+          </a-list-item>
+        </a-list>
+      </a-spin>
+    </template>
+    <span @click="fetchComment" class="header-comment">
+      <a-badge dot>
+        <a-icon type="bell"/>
+      </a-badge>
+    </span>
+  </a-popover>
+</template>
+
+<script>
+import commentApi from '@/api/comment'
+export default {
+  name: 'HeaderComment',
+  data() {
+    return {
+      loadding: false,
+      visible: false,
+      comments: []
+    }
+  },
+  methods: {
+    fetchComment() {
+      if (!this.visible) {
+        this.loadding = true
+        this.getComment()
+      } else {
+        this.loadding = false
+      }
+      this.visible = !this.visible
+    },
+    getComment() {
+      commentApi.listLatest().then(response => {
+        this.comments = response.data.data
+        this.loadding = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.header-comment-wrapper {
+  top: 50px !important;
+}
+</style>
+<style lang="less" scoped>
+.header-comment {
+  display: inline-block;
+  transition: all 0.3s;
+
+  span {
+    vertical-align: initial;
+  }
+}
+</style>
diff --git a/src/components/tools/HeaderNotice.vue b/src/components/tools/HeaderNotice.vue
deleted file mode 100644
index a81420e9..00000000
--- a/src/components/tools/HeaderNotice.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <a-popover
-    v-model="visible"
-    trigger="click"
-    placement="bottomRight"
-    :autoAdjustOverflow="true"
-    :arrowPointAtCenter="true"
-    overlayClassName="header-notice-wrapper"
-    :overlayStyle="{ width: '300px', top: '50px' }">
-    <template slot="content">
-      <a-spin :spinning="loadding">
-        <a-tabs>
-          <a-tab-pane tab="通知" key="1">
-            <a-list>
-              <a-list-item>
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane tab="消息" key="2">
-            123
-          </a-tab-pane>
-          <a-tab-pane tab="待办" key="3">
-            123
-          </a-tab-pane>
-        </a-tabs>
-      </a-spin>
-    </template>
-    <span @click="fetchNotice" class="header-notice">
-      <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
-      </a-badge>
-    </span>
-  </a-popover>
-</template>
-
-<script>
-export default {
-  name: 'HeaderNotice',
-  data() {
-    return {
-      loadding: false,
-      visible: false
-    }
-  },
-  methods: {
-    fetchNotice() {
-      if (!this.visible) {
-        this.loadding = true
-        setTimeout(() => {
-          this.loadding = false
-        }, 2000)
-      } else {
-        this.loadding = false
-      }
-      this.visible = !this.visible
-    }
-  }
-}
-</script>
-
-<style lang="css">
-  .header-notice-wrapper {
-    top: 50px !important;
-  }
-</style>
-<style lang="less" scoped>
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
-
-    span {
-      vertical-align: initial;
-    }
-  }
-</style>
diff --git a/src/components/tools/TwoStepCaptcha.vue b/src/components/tools/TwoStepCaptcha.vue
deleted file mode 100644
index 6fda582f..00000000
--- a/src/components/tools/TwoStepCaptcha.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <!-- 两步验证 -->
-  <a-modal
-    centered
-    v-model="visible"
-    @cancel="handleCancel"
-    :maskClosable="false"
-  >
-    <div slot="title" :style="{ textAlign: 'center' }">两步验证</div>
-    <template slot="footer">
-      <div :style="{ textAlign: 'center' }">
-        <a-button key="back" @click="handleCancel">返回</a-button>
-        <a-button key="submit" type="primary" :loading="stepLoading" @click="handleStepOk">
-          继续
-        </a-button>
-      </div>
-    </template>
-
-    <a-spin :spinning="stepLoading">
-      <a-form layout="vertical" :auto-form-create="(form)=>{this.form = form}">
-        <div class="step-form-wrapper">
-          <p style="text-align: center" v-if="!stepLoading">请在手机中打开 Google Authenticator 或两步验证 APP<br />输入 6 位动态码</p>
-          <p style="text-align: center" v-else>正在验证..<br/>请稍后</p>
-          <a-form-item
-            :style="{ textAlign: 'center' }"
-            hasFeedback
-            fieldDecoratorId="stepCode"
-            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入 6 位动态码!', pattern: /^\d{6}$/, len: 6 }]}"
-          >
-            <a-input :style="{ textAlign: 'center' }" @keyup.enter.native="handleStepOk" placeholder="000000" />
-          </a-form-item>
-          <p style="text-align: center">
-            <a @click="onForgeStepCode">遗失手机?</a>
-          </p>
-        </div>
-      </a-form>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      stepLoading: false,
-
-      form: null
-    }
-  },
-  methods: {
-    handleStepOk() {
-      const vm = this
-      this.stepLoading = true
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log('values', values)
-          setTimeout(() => {
-            vm.stepLoading = false
-            vm.$emit('success', { values })
-          }, 2000)
-          return
-        }
-        this.stepLoading = false
-        this.$emit('error', { err })
-      })
-    },
-    handleCancel() {
-      this.visible = false
-      this.$emit('cancel')
-    },
-    onForgeStepCode() {
-
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-  .step-form-wrapper {
-    margin: 0 auto;
-    width: 80%;
-    max-width: 400px;
-  }
-</style>
diff --git a/src/components/tools/UserMenu.vue b/src/components/tools/UserMenu.vue
index 3d9315c8..a99457b9 100644
--- a/src/components/tools/UserMenu.vue
+++ b/src/components/tools/UserMenu.vue
@@ -5,11 +5,15 @@
         <a-icon type="link"></a-icon>
       </span>
     </a>
-    <header-notice class="action"/>
+    <a href="javascript:void(0)" @click="showOptionModal">
+      <span class="action">
+        <a-icon type="setting"></a-icon>
+      </span>
+    </a>
+    <header-comment class="action"/>
     <a-dropdown>
       <span class="action ant-dropdown-link user-dropdown-menu">
         <a-avatar class="avatar" size="small" :src="avatar"/>
-        <span>RYAN0UP</span>
       </span>
       <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
         <a-menu-item key="0">
@@ -27,20 +31,24 @@
         </a-menu-item>
       </a-menu>
     </a-dropdown>
+    <a-modal title="样式设置" v-model="optionVisible">
+
+    </a-modal>
   </div>
 </template>
 
 <script>
-import HeaderNotice from './HeaderNotice'
+import HeaderComment from './HeaderComment'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'UserMenu',
   components: {
-    HeaderNotice
+    HeaderComment
   },
   data() {
     return {
+      optionVisible: false,
       avatar: 'https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm'
     }
   },
@@ -68,6 +76,9 @@ export default {
         },
         onCancel() {}
       })
+    },
+    showOptionModal() {
+      this.optionVisible = true
     }
   }
 }