peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 优化手机端体验

Browse Source
This commit is contained in:
x ronger 2020-08-04 21:50:59 +08:00
parent f27757d677
commit f5f1175079
8 changed files with 150 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/archive/list.vue
View File

@ -23,7 +23,7 @@
<el-avatar v-else size="medium" <el-avatar v-else size="medium"
src="https://static.rymcu.com/article/1578475481946.png"></el-avatar> src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
</el-col> </el-col>
<el-col :xs="20" :sm="20" :xl="20"> <el-col :xs="16" :sm="16" :xl="16">
<div> <div>
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default"> <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">
{{ article.articleAuthorName }} {{ article.articleAuthorName }}

51
components/common/notification/list.vue
View File

@ -6,18 +6,7 @@
<el-col :xs="9" :sm="11" :xl="11"> <el-col :xs="9" :sm="11" :xl="11">
<el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;" <el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;"
v-html="notification.dataSummary"></el-link> 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>
<el-col :xs="3" :sm="1" :xl="1" class="mr-3"> <el-col :xs="3" :sm="1" :xl="1" class="mr-3">
<el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)"> <el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
@ -26,14 +15,26 @@
</el-col> </el-col>
</el-col> </el-col>
<el-col v-else> <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>
<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">
<i class="el-icon-check" style="font-weight: bold;"></i> 标记已读 <el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;"
</el-link> 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-col>
<el-col> <el-col>
@ -68,19 +69,15 @@
}, },
read(id) { read(id) {
let _ts = this; 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); _ts.currentChange(1);
}).catch(error => console.log(error)); }).catch(error => console.log(error));
}, },
onRouter(notification) { onRouter(notification) {
if ('0' === notification.dataType) { if (notification.hasRead === '0') {
if (notification.hasRead === '0') { this.read(notification.idNotification);
this.read(notification.idNotification);
}
this.$router.push({
path: '/article/' + notification.dataId
})
} }
window.location.href = notification.dataUrl;
} }
} }
} }

202
components/layouts/mobile/header.vue
View File

@ -1,25 +1,12 @@
<template> <template>
<el-row justify="space-between" type="flex"> <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;"> <el-col :xs="8" :sm="4" :md="4" :xl="3" style="padding-top: 1rem;">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img"> <img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img">
<span>RYMCU</span> <span>RYMCU</span>
</a> </a>
</el-col> </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="16" :sm="8" :md="6" :xl="3" style="padding-top: 1rem;">
<!--<el-col :xs="24" :sm="16" :xl="12">--> <!--<el-col :xs="24" :sm="16" :xl="12">-->
<el-col :xs="0" :sm="0" :xl="0"> <el-col :xs="0" :sm="0" :xl="0">
@ -32,52 +19,53 @@
@select="handleSelect" @select="handleSelect"
/> />
</el-col> </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> <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/article/post">发帖
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-article">发帖</el-link> </el-link>
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;"> <el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<el-badge :value="notificationNumbers" class="item"> <el-badge :value="notificationNumbers" class="item">
<el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link> <el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
</el-badge> </el-badge>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="notification in notifications" :key="notification.idNotification" <el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
command="notification">{{ notification.dataSummary }} command="notification">{{ notification.dataSummary }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="notification">查看所有消息</el-dropdown-item> <el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-link> </el-link>
<el-link :underline="false" style="margin-left: 10px;"> <el-link :underline="false" style="margin-left: 10px;">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar> <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-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="user" style="align-items: center;"> <el-dropdown-item command="user" style="align-items: center;">
<el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;" <el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
:src="avatarURL"></el-avatar> :src="avatarURL"></el-avatar>
<el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;" <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
src="https://static.rymcu.com/article/1578475481946.png"></el-avatar> 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-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
</el-dropdown-item> </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="user-info">资料与账号</el-dropdown-item>
<el-dropdown-item command="drafts">我的草稿</el-dropdown-item> <el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-link> </el-link>
</el-col> </el-col>
<el-col v-else> <el-col v-else style="text-align: right;">
<nuxt-link to="/login"> <nuxt-link to="/login">
<el-link :underline="false" style="margin-left: 10px;">登录</el-link> <el-link :underline="false" style="margin-left: 10px;">登录</el-link>
</nuxt-link> </nuxt-link>
<nuxt-link to="/register"> <nuxt-link to="/register">
<el-link :underline="false" style="margin-left: 10px;">注册</el-link> <el-link :underline="false" style="margin-left: 10px;">注册</el-link>
</nuxt-link> </nuxt-link>
</el-col> </el-col>
</client-only>
</el-col> </el-col>
</el-col> </el-col>
</el-row> </el-row>
@ -91,7 +79,7 @@
getActiveMenu() { getActiveMenu() {
return this.$store.state.activeMenu; return this.$store.state.activeMenu;
}, },
isLogin() { user() {
return this.$store.state.oauth; return this.$store.state.oauth;
}, },
avatarURL() { avatarURL() {
@ -115,7 +103,7 @@
}; };
}, },
watch: { watch: {
isLogin: function () { user: function () {
this.getUnreadNotifications(); this.getUnreadNotifications();
} }
}, },
@ -145,25 +133,23 @@
let _ts = this; let _ts = this;
let activeMenu = _ts.$store.state.activeMenu; let activeMenu = _ts.$store.state.activeMenu;
if (activeMenu !== item) { 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");
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) { handleSelect(item) {
@ -171,48 +157,44 @@
}, },
handleCommand(item) { handleCommand(item) {
let _ts = this; let _ts = this;
if (item === 'user') { switch (item) {
_ts.$router.push({ case 'user':
path: '/user/' + _ts.$store.state.nickname _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() { getUnreadNotifications() {
let _ts = this; 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) { 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() { mounted() {
this.restaurants = this.loadAll(); // this.restaurants = this.loadAll();
let isLogin = this.isLogin; let user = this.user;
if (isLogin) { if (user) {
this.getUnreadNotifications(); this.getUnreadNotifications();
} }
} }

4
components/layouts/mobile/main.vue
View File

@ -6,7 +6,7 @@
<el-main> <el-main>
<nuxt :nuxt-child-key="$route.name" /> <nuxt :nuxt-child-key="$route.name" />
</el-main> </el-main>
<el-footer> <el-footer style="height: 6rem;">
<footer-view/> <footer-view/>
</el-footer> </el-footer>
</el-container> </el-container>
@ -41,7 +41,7 @@
padding: 20px 0; padding: 20px 0;
background-attachment: fixed; background-attachment: fixed;
min-height: 280px; min-height: 280px;
margin-bottom: 60px; margin-bottom: 6rem;
overflow-x: hidden; overflow-x: hidden;
} }

4
pages/article/_article_id.vue
View File

@ -46,8 +46,8 @@
<h4>所属作品集</h4> <h4>所属作品集</h4>
</el-col> </el-col>
<el-col style="padding: 1rem"> <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-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
</el-col> </el-col>
<el-col :xs="20" :sm="20" :xl="20"> <el-col :xs="20" :sm="20" :xl="20">

4
pages/portfolio/_portfolio_id.vue
View File

@ -24,13 +24,13 @@
</el-col> </el-col>
<el-col> <el-col>
<el-col v-if="isAuthor" style="text-align: right;"> <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-link @click="managerPortfolio(portfolio.idPortfolio)" :underline="false" class="text-default">管理</el-link>
</el-col> </el-col>
</el-col> </el-col>
<el-divider><i class="el-icon-loading"></i></el-divider> <el-divider><i class="el-icon-loading"></i></el-divider>
<el-col> <el-col>
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list> <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
</el-col> </el-col>
</el-col> </el-col>
</el-row> </el-row>

5
store/global.js
View File

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

23
store/index.js
View File

@ -1,3 +1,5 @@
import { isServer } from '~/environment'
const cookieparser = process.server ? require('cookieparser') : undefined const cookieparser = process.server ? require('cookieparser') : undefined
export const state = () => { export const state = () => {
@ -28,6 +30,27 @@ export const mutations = {
export const actions = { export const actions = {
nuxtServerInit(store, {req}) { 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 let auth = null
if (req.headers.cookie) { if (req.headers.cookie) {
const parsed = cookieparser.parse(req.headers.cookie) const parsed = cookieparser.parse(req.headers.cookie)