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

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

@ -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,16 +15,28 @@
</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)">
<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>
<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({
path: '/article/' + notification.dataId
})
}
window.location.href = notification.dataUrl;
}
}
}

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

@ -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="isLogin">
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-portfolio">创建作品集
<!--<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;" 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') {
_ts.$router.push(
{
name: item,
params: {
name: '51mcu'
}
}
)
}
if (item === 'github') {
window.open("https://github.com/Hugh-rymcu");
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
}
)
}
}
},
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
})
}
if (item === 'user-info') {
break;
case 'user-info':
_ts.$router.push({
name: 'account',
params: {
id: _ts.$store.state.idUser
}
path: '/user/settings/account'
})
}
if (item === 'logout') {
break;
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) {
_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();
}
}

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

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

4
pages/article/_article_id.vue
View File

@ -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">

2
pages/portfolio/_portfolio_id.vue
View File

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

5
store/global.js
View File

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

23
store/index.js
View File

@ -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)