From f5f11750798aca9f1000568905279a080f7c5ef5 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Tue, 4 Aug 2020 21:50:59 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E4=BC=98=E5=8C=96=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E7=AB=AF=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/archive/list.vue             |   2 +-
 components/common/notification/list.vue |  51 +++---
 components/layouts/mobile/header.vue    | 202 +++++++++++-------------
 components/layouts/mobile/main.vue      |   4 +-
 pages/article/_article_id.vue           |   4 +-
 pages/portfolio/_portfolio_id.vue       |   4 +-
 store/global.js                         |   5 +-
 store/index.js                          |  23 +++
 8 files changed, 150 insertions(+), 145 deletions(-)

diff --git a/components/archive/list.vue b/components/archive/list.vue
index 18cb4b1..edd7652 100644
--- a/components/archive/list.vue
+++ b/components/archive/list.vue
@@ -23,7 +23,7 @@
                 <el-avatar v-else size="medium"
                            src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
               </el-col>
-              <el-col :xs="20" :sm="20" :xl="20">
+              <el-col :xs="16" :sm="16" :xl="16">
                 <div>
                   <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">
                     {{ article.articleAuthorName }}
diff --git a/components/common/notification/list.vue b/components/common/notification/list.vue
index d6278a8..71e8393 100644
--- a/components/common/notification/list.vue
+++ b/components/common/notification/list.vue
@@ -6,18 +6,7 @@
           <el-col :xs="9" :sm="11" :xl="11">
             <el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;"
                      v-html="notification.dataSummary"></el-link>
-            <el-col>{{ notification.createdTime }}</el-col>
-          </el-col>
-          <el-col :xs="3" :sm="1" :xl="1" class="mr-3">
-            <el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
-              <i class="el-icon-check"></i>
-            </el-link>
-          </el-col>
-        </el-col>
-        <el-col v-else-if="notification.dataType == 1">
-          <el-col :xs="9" :sm="11" :xl="11">
-            <el-link :underline="false" style="font-size: 1.1em;" v-html="notification.dataSummary"></el-link>
-            <el-col>{{ notification.createdTime }}</el-col>
+            <el-col style="font-size: 12px;color: #7f828b;">{{ notification.createdTime }}</el-col>
           </el-col>
           <el-col :xs="3" :sm="1" :xl="1" class="mr-3">
             <el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
@@ -26,14 +15,26 @@
           </el-col>
         </el-col>
         <el-col v-else>
-          <el-col :xs="20" :sm="20" :xl="20">
-            <el-link :underline="false" style="font-size: 1.1em;" v-html="notification.dataSummary"></el-link>
-            <el-col>{{ notification.createdTime }}</el-col>
+          <el-col :xs="4" :xl="2">
+            <el-avatar :src="notification.author.userAvatarURL"></el-avatar>
           </el-col>
-          <el-col :xs="4" :sm="4" :xl="4" class="text-right" style="padding-right: 1rem;">
-            <el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
-              <i class="el-icon-check" style="font-weight: bold;"></i> 标记已读
-            </el-link>
+          <el-col :xs="20" :xl="22">
+            <el-col :xs="16" :sm="20" :xl="20">
+              <el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;"
+                       v-html="notification.dataTitle"></el-link>
+              <el-col style="font-size: 12px;color: #7f828b;">
+                {{ notification.createdTime }}
+              </el-col>
+              <el-col>
+                {{ notification.dataSummary }}
+              </el-col>
+            </el-col>
+            <el-col :xs="8" :sm="4" :xl="4" class="text-right" style="padding-right: 1rem;">
+              <el-link v-if="notification.hasRead === '0'" :underline="false"
+                       @click="read(notification.idNotification)">
+                <i class="el-icon-check" style="font-weight: bold;"></i> 标记已读
+              </el-link>
+            </el-col>
           </el-col>
         </el-col>
         <el-col>
@@ -68,19 +69,15 @@
       },
       read(id) {
         let _ts = this;
-        this.$axios.$put('/api/notification/read/' + id).then(function (res) {
+        this.$axios.$put('/api/notification/read/' + id).then(function () {
           _ts.currentChange(1);
         }).catch(error => console.log(error));
       },
       onRouter(notification) {
-        if ('0' === notification.dataType) {
-          if (notification.hasRead === '0') {
-            this.read(notification.idNotification);
-          }
-          this.$router.push({
-            path: '/article/' + notification.dataId
-          })
+        if (notification.hasRead === '0') {
+          this.read(notification.idNotification);
         }
+        window.location.href = notification.dataUrl;
       }
     }
   }
diff --git a/components/layouts/mobile/header.vue b/components/layouts/mobile/header.vue
index ad08646..434800f 100644
--- a/components/layouts/mobile/header.vue
+++ b/components/layouts/mobile/header.vue
@@ -1,25 +1,12 @@
 <template>
   <el-row justify="space-between" type="flex">
-    <el-col>
+    <el-col :span="24">
       <el-col :xs="8" :sm="4" :md="4" :xl="3" style="padding-top: 1rem;">
         <a class="navbar-brand" href="/">
           <img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img">
           <span>RYMCU</span>
         </a>
       </el-col>
-      <el-col :xs="0" :sm="12" :md="14" :xl="18" style="text-align: center;">
-        <el-row type="flex" justify="center">
-          <el-col>
-            <el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
-                     @select="handleSelectMenu">
-              <el-menu-item index="index">首页</el-menu-item>
-              <el-menu-item index="topic">专题</el-menu-item>
-              <el-menu-item index="github">开源代码</el-menu-item>
-              <el-menu-item index="open-source">资料下载</el-menu-item>
-            </el-menu>
-          </el-col>
-        </el-row>
-      </el-col>
       <el-col :xs="16" :sm="8" :md="6" :xl="3" style="padding-top: 1rem;">
         <!--<el-col :xs="24" :sm="16" :xl="12">-->
         <el-col :xs="0" :sm="0" :xl="0">
@@ -32,52 +19,53 @@
             @select="handleSelect"
           />
         </el-col>
-        <!--<el-col v-if="isLogin" :xs="0" :sm="8" :xl="6">-->
-        <el-col v-if="isLogin">
-          <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-portfolio">创建作品集
-          </el-link>
-          <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-article">发帖</el-link>
-          <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
-            <el-dropdown trigger="click" @command="handleCommand">
-              <el-badge :value="notificationNumbers" class="item">
-                <el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
-              </el-badge>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
-                                  command="notification">{{ notification.dataSummary }}
-                </el-dropdown-item>
-                <el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </el-link>
-          <el-link :underline="false" style="margin-left: 10px;">
-            <el-dropdown trigger="click" @command="handleCommand">
-              <el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
-              <el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="user" style="align-items: center;">
-                  <el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
-                             :src="avatarURL"></el-avatar>
-                  <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
-                             src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-                  <el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
-                </el-dropdown-item>
-                <el-dropdown-item v-show="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
-                <el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
-                <el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
-                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </el-link>
-        </el-col>
-        <el-col v-else>
-          <nuxt-link to="/login">
-            <el-link :underline="false" style="margin-left: 10px;">登录</el-link>
-          </nuxt-link>
-          <nuxt-link to="/register">
-            <el-link :underline="false" style="margin-left: 10px;">注册</el-link>
-          </nuxt-link>
-        </el-col>
+        <!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
+        <client-only>
+          <el-col v-if="user" style="text-align: right;">
+            <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/article/post">发帖
+            </el-link>
+            <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <el-badge :value="notificationNumbers" class="item">
+                  <el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
+                </el-badge>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
+                                    command="notification">{{ notification.dataSummary }}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-link>
+            <el-link :underline="false" style="margin-left: 10px;">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
+                <el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="user" style="align-items: center;">
+                    <el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
+                               :src="avatarURL"></el-avatar>
+                    <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
+                               src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
+                    <el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
+                  </el-dropdown-item>
+                  <el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
+                  <el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
+                  <el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
+                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-link>
+          </el-col>
+          <el-col v-else style="text-align: right;">
+            <nuxt-link to="/login">
+              <el-link :underline="false" style="margin-left: 10px;">登录</el-link>
+            </nuxt-link>
+            <nuxt-link to="/register">
+              <el-link :underline="false" style="margin-left: 10px;">注册</el-link>
+            </nuxt-link>
+          </el-col>
+        </client-only>
       </el-col>
     </el-col>
   </el-row>
@@ -91,7 +79,7 @@
       getActiveMenu() {
         return this.$store.state.activeMenu;
       },
-      isLogin() {
+      user() {
         return this.$store.state.oauth;
       },
       avatarURL() {
@@ -115,7 +103,7 @@
       };
     },
     watch: {
-      isLogin: function () {
+      user: function () {
         this.getUnreadNotifications();
       }
     },
@@ -145,25 +133,23 @@
         let _ts = this;
         let activeMenu = _ts.$store.state.activeMenu;
         if (activeMenu !== item) {
-          if (item === 'topic') {
-            _ts.$router.push(
-              {
-                name: item,
-                params: {
-                  name: '51mcu'
+          switch (item) {
+            case 'topic':
+              _ts.$router.push({
+                path: '/topic/news'
+              })
+              break;
+            case 'github':
+              window.open("https://github.com/rymcu");
+              return false;
+              break;
+            default:
+              _ts.$router.push(
+                {
+                  name: item
                 }
-              }
-            )
+              )
           }
-          if (item === 'github') {
-            window.open("https://github.com/Hugh-rymcu");
-            return false;
-          }
-          _ts.$router.push(
-            {
-              name: item
-            }
-          )
         }
       },
       handleSelect(item) {
@@ -171,48 +157,44 @@
       },
       handleCommand(item) {
         let _ts = this;
-        if (item === 'user') {
-          _ts.$router.push({
-            path: '/user/' + _ts.$store.state.nickname
-          })
+        switch (item) {
+          case 'user':
+            _ts.$router.push({
+              path: '/user/' + _ts.nickname
+            })
+            break;
+          case 'user-info':
+            _ts.$router.push({
+              path: '/user/settings/account'
+            })
+            break;
+          case 'logout':
+            Cookie.remove('auth')
+            _ts.$store.commit('setAuth', null)
+            item = 'login';
+            break;
+          default:
+            _ts.$router.push({
+              name: item
+            })
         }
-        if (item === 'user-info') {
-          _ts.$router.push({
-            name: 'account',
-            params: {
-              id: _ts.$store.state.idUser
-            }
-          })
-        }
-        if (item === 'logout') {
-          Cookie.remove('auth')
-          _ts.$store.commit('setAuth', null)
-          item = 'login';
-        }
-        _ts.$router.push({
-          name: item
-        })
       },
       getUnreadNotifications() {
         let _ts = this;
-        if (_ts.isLogin) {
-          _ts.$axios.$get('/api/notification/unread', {
-            headers: {
-              Authorization: _ts.$store.state.oauth?.accessToken
-            }
-          }).then(function (res) {
+        if (_ts.user) {
+          _ts.$axios.$get('/api/notification/unread').then(function (res) {
             if (res) {
-              _ts.$set(_ts, 'notifications', res.data.notifications);
-              _ts.$set(_ts, 'notificationNumbers', res.data.notifications.length == 0 ? "" : res.data.notifications.length);
+              _ts.$set(_ts, 'notifications', res.notifications);
+              _ts.$set(_ts, 'notificationNumbers', res.notifications.length == 0 ? "" : res.notifications.length);
             }
           })
         }
       }
     },
     mounted() {
-      this.restaurants = this.loadAll();
-      let isLogin = this.isLogin;
-      if (isLogin) {
+      // this.restaurants = this.loadAll();
+      let user = this.user;
+      if (user) {
         this.getUnreadNotifications();
       }
     }
diff --git a/components/layouts/mobile/main.vue b/components/layouts/mobile/main.vue
index f9e4ab1..ffa7946 100644
--- a/components/layouts/mobile/main.vue
+++ b/components/layouts/mobile/main.vue
@@ -6,7 +6,7 @@
     <el-main>
       <nuxt :nuxt-child-key="$route.name" />
     </el-main>
-    <el-footer>
+    <el-footer style="height: 6rem;">
       <footer-view/>
     </el-footer>
   </el-container>
@@ -41,7 +41,7 @@
     padding: 20px 0;
     background-attachment: fixed;
     min-height: 280px;
-    margin-bottom: 60px;
+    margin-bottom: 6rem;
     overflow-x: hidden;
   }
 
diff --git a/pages/article/_article_id.vue b/pages/article/_article_id.vue
index d1a1f0a..948c7b8 100644
--- a/pages/article/_article_id.vue
+++ b/pages/article/_article_id.vue
@@ -46,8 +46,8 @@
                   <h4>所属作品集</h4>
                 </el-col>
                 <el-col style="padding: 1rem">
-                  <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
-                    <el-col :xs="3" :sm="3" :xl="3">
+                  <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :xs="16" :xl="8">
+                    <el-col :xs="4" :sm="4" :xl="4">
                       <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
                     </el-col>
                     <el-col :xs="20" :sm="20" :xl="20">
diff --git a/pages/portfolio/_portfolio_id.vue b/pages/portfolio/_portfolio_id.vue
index 0e750f8..55946a6 100644
--- a/pages/portfolio/_portfolio_id.vue
+++ b/pages/portfolio/_portfolio_id.vue
@@ -24,13 +24,13 @@
     </el-col>
     <el-col>
       <el-col v-if="isAuthor" style="text-align: right;">
-        <el-col>
+        <el-col :xs="0" :xl="24">
           <el-link @click="managerPortfolio(portfolio.idPortfolio)" :underline="false" class="text-default">管理</el-link>
         </el-col>
       </el-col>
       <el-divider><i class="el-icon-loading"></i></el-divider>
       <el-col>
-        <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
+          <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
       </el-col>
     </el-col>
   </el-row>
diff --git a/store/global.js b/store/global.js
index 4c96108..177c836 100644
--- a/store/global.js
+++ b/store/global.js
@@ -13,7 +13,10 @@ export const getters = {
 }
 
 export const mutations = {
-
+  // 设置是否移动端状态
+  updateMobileState(state, action) {
+  state.isMobile = action
+}
 }
 
 export const actions ={
diff --git a/store/index.js b/store/index.js
index 09886e5..5493a95 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,3 +1,5 @@
+import { isServer } from '~/environment'
+
 const cookieparser = process.server ? require('cookieparser') : undefined
 
 export const state = () => {
@@ -28,6 +30,27 @@ export const mutations = {
 export const actions = {
   nuxtServerInit(store, {req}) {
     // 初始化时的全局任务
+    const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
+    const browser = {
+      versions: function() {
+        return {     //移动终端浏览器版本信息
+          trident: userAgent.indexOf('Trident') > -1, //IE内核
+          presto: userAgent.indexOf('Presto') > -1, //opera内核
+          webKit: userAgent.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
+          gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1, //火狐内核
+          mobile: !!userAgent.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
+          ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
+          android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1, //android终端或uc浏览器
+          iPhone: userAgent.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
+          iPad: userAgent.indexOf('iPad') > -1, //是否iPad
+          webApp: userAgent.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
+        };
+      } ()
+    }
+    if (browser.versions.mobile) {
+        // 移动端
+        store.commit('global/updateMobileState', true)
+    }
     let auth = null
     if (req.headers.cookie) {
       const parsed = cookieparser.parse(req.headers.cookie)