💄 优化手机端体验

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

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 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)">
-              <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>
           <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,16 +15,28 @@
           </el-col>
         </el-col>
         <el-col v-else>
-          <el-col :xs="20" :sm="20" :xl="20">
+          <el-col :xs="4" :xl="2">
-            <el-link :underline="false" style="font-size: 1.1em;" v-html="notification.dataSummary"></el-link>
+            <el-avatar :src="notification.author.userAvatarURL"></el-avatar>
-            <el-col>{{ notification.createdTime }}</el-col>
           </el-col>
-          <el-col :xs="4" :sm="4" :xl="4" class="text-right" style="padding-right: 1rem;">
+          <el-col :xs="20" :xl="22">
-            <el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
+            <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>
           <el-divider></el-divider>
         </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({
+        window.location.href = notification.dataUrl;
-            path: '/article/' + notification.dataId
-          })
-        }
       }
     }
   }

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,11 +19,11 @@
             @select="handleSelect"
           />
         </el-col>
-        <!--<el-col v-if="isLogin" :xs="0" :sm="8" :xl="6">-->
+        <!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
-        <el-col v-if="isLogin">
+        <client-only>
-          <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-portfolio">创建作品集
+          <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;" 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">
@@ -62,7 +49,7 @@
                                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 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>
@@ -70,7 +57,7 @@
               </el-dropdown>
             </el-link>
           </el-col>
-        <el-col v-else>
+          <el-col v-else style="text-align: right;">
             <nuxt-link to="/login">
               <el-link :underline="false" style="margin-left: 10px;">登录</el-link>
             </nuxt-link>
@@ -78,6 +65,7 @@
               <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,74 +133,68 @@
         let _ts = this;
         let activeMenu = _ts.$store.state.activeMenu;
         if (activeMenu !== item) {
-          if (item === 'topic') {
+          switch (item) {
-            _ts.$router.push(
+            case 'topic':
-              {
+              _ts.$router.push({
-                name: item,
+                path: '/topic/news'
-                params: {
+              })
-                  name: '51mcu'
+              break;
-                }
+            case 'github':
-              }
+              window.open("https://github.com/rymcu");
-            )
-          }
-          if (item === 'github') {
-            window.open("https://github.com/Hugh-rymcu");
               return false;
-          }
+              break;
+            default:
               _ts.$router.push(
                 {
                   name: item
                 }
               )
           }
+        }
       },
       handleSelect(item) {
         console.log(item)
       },
       handleCommand(item) {
         let _ts = this;
-        if (item === 'user') {
+        switch (item) {
+          case 'user':
             _ts.$router.push({
-            path: '/user/' + _ts.$store.state.nickname
+              path: '/user/' + _ts.nickname
             })
-        }
+            break;
-        if (item === 'user-info') {
+          case 'user-info':
             _ts.$router.push({
-            name: 'account',
+              path: '/user/settings/account'
-            params: {
-              id: _ts.$store.state.idUser
-            }
             })
-        }
+            break;
-        if (item === 'logout') {
+          case 'logout':
             Cookie.remove('auth')
             _ts.$store.commit('setAuth', null)
             item = 'login';
-        }
+            break;
+          default:
             _ts.$router.push({
               name: item
             })
+        }
       },
       getUnreadNotifications() {
         let _ts = this;
-        if (_ts.isLogin) {
+        if (_ts.user) {
-          _ts.$axios.$get('/api/notification/unread', {
+          _ts.$axios.$get('/api/notification/unread').then(function (res) {
-            headers: {
-              Authorization: _ts.$store.state.oauth?.accessToken
-            }
-          }).then(function (res) {
             if (res) {
-              _ts.$set(_ts, 'notifications', res.data.notifications);
+              _ts.$set(_ts, 'notifications', res.notifications);
-              _ts.$set(_ts, 'notificationNumbers', res.data.notifications.length == 0 ? "" : res.data.notifications.length);
+              _ts.$set(_ts, 'notificationNumbers', res.notifications.length == 0 ? "" : res.notifications.length);
             }
           })
         }
       }
     },
     mounted() {
-      this.restaurants = this.loadAll();
+      // this.restaurants = this.loadAll();
-      let isLogin = this.isLogin;
+      let user = this.user;
-      if (isLogin) {
+      if (user) {
         this.getUnreadNotifications();
       }
     }

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;
   }
 

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 v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :xs="16" :xl="8">
-                    <el-col :xs="3" :sm="3" :xl="3">
+                    <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">

pages/portfolio/_portfolio_id.vue

@@ -24,7 +24,7 @@
     </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>

store/global.js

@@ -13,7 +13,10 @@ export const getters = {
 }
 
 export const mutations = {
-
+  // 设置是否移动端状态
+  updateMobileState(state, action) {
+  state.isMobile = action
+}
 }
 
 export const actions ={

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)