zhaoyingbo/canary_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add vConsole & Expand one click back to top click area

Browse Source
This commit is contained in:
RainSun 2020-03-04 09:55:11 +08:00
parent 40574741c6
commit a460327222
4 changed files with 145 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.vue
View File

@ -183,4 +183,11 @@ html[data-theme='light'] {
left: 0.2rem !important;
}
}
#__vconsole {
display: none;
}
.vconsole-show {
display: block !important;
}
</style>

4
src/main.js
View File

@ -27,6 +27,10 @@ Vue.use(VueClipboard);
var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})
// vconsole
import Vconsole from 'vconsole';
new Vconsole();
Vue.config.productionTip = false
new Vue({

42
src/utils/language.js
View File

@ -256,11 +256,27 @@ export function lang() {
CHS:{
title: '更新日志',
timeline: [
{
label: '新增控制台vConsole',
tag:'功能更新',
content: [
'主页呼出菜单栏点击头像十次即可唤出或隐藏控制台',
'2020-03-04'
]
},
{
label: '扩大一键回顶点击面积',
tag:'功能更新',
content: [
'一键回顶点击范围从标题文字延展到整个导航栏非功能区',
'2020-03-03'
]
},
{
label: '新增更新日志页',
tag:'功能更新',
content: [
'主页呼出菜单栏即可发现功能入口。',
'主页呼出菜单栏即可发现功能入口',
'2020-03-03'
]
},
@ -268,7 +284,7 @@ export function lang() {
label: '新增一键回顶',
tag:'功能更新',
content: [
'在主页点击导航栏页面标题即可一键回顶。',
'在主页点击导航栏页面标题即可一键回顶',
'2020-03-02'
]
},
@ -284,7 +300,7 @@ export function lang() {
label: '新增呼出菜单手势',
tag:'功能更新',
content: [
'在主页非导航栏任意处右滑即可呼出菜单栏。',
'在主页非导航栏任意处右滑即可呼出菜单栏',
'2020-02-26'
]
}
@ -293,11 +309,27 @@ export function lang() {
EN:{
title: 'Update Log',
timeline: [
{
label: 'Add vConsole',
tag:'Feature update',
content: [
'Home callout menu bar Click the avatar ten times to call up or hide the console',
'2020-03-04'
]
},
{
label: 'Expand one click back to top click area',
tag:'Feature update',
content: [
'The one-click back to top click extends from the title text to the non-functional area of the entire navigation bar',
'2020-03-03'
]
},
{
label: 'New update log page',
tag:'Feature update',
content: [
'Call out the menu bar on the homepage to find the function entry。',
'Call out the menu bar on the homepage to find the function entry',
'2020-03-03'
]
},
@ -305,7 +337,7 @@ export function lang() {
label: 'Added one-click back to top',
tag:'Feature update',
content: [
'Click the navigation page title on the homepage to return to the top with one click。',
'Click the navigation page title on the homepage to return to the top with one click',
'2020-03-02'
]
},

143
src/views/Home/Home.vue
View File

@ -4,9 +4,10 @@
<md-app-toolbar class="md-primary">
<div class="md-toolbar-section-start">
<md-button class="md-icon-button" @click="menuVisible = !menuVisible"><md-icon>menu</md-icon></md-button>
<span class="md-title" @click="scrollTop()">{{ lang.title }}</span>
<span class="md-title page-title" @click="scrollTop()">{{ lang.title }}</span>
</div>
<div class="md-toolbar-section-end">
<div class="sroll-top-area" @click="scrollTop()"></div>
<md-button class="md-icon-button" @click="turnToSearch()"><md-icon>search</md-icon></md-button>
<md-menu md-align-trigger>
<md-button md-menu-trigger class="md-icon-button"><md-icon>more_vert</md-icon></md-button>
@ -24,19 +25,19 @@
</md-app-toolbar>
<md-app-drawer :md-active.sync="menuVisible">
<div class="drawer-banner">
<md-icon class="default-avatar md-size-2x face">face</md-icon>
<p class="md-title">Canary Codebook</p>
<p class="md-caption">{{ user_infos.mail_addr }}</p>
</div>
<div class="drawer-banner" @click="toggleVc()">
<md-icon class="default-avatar md-size-2x face">face</md-icon>
<p class="md-title">Canary Codebook</p>
<p class="md-caption">{{ user_infos.mail_addr }}</p>
</div>
<md-list>
<md-list-item @click="turnToPage('/account')">
<md-icon>person</md-icon>
<span class="md-list-item-text">{{ lang.drawer[0] }}</span>
</md-list-item>
<md-list>
<md-list-item @click="turnToPage('/account')">
<md-icon>person</md-icon>
<span class="md-list-item-text">{{ lang.drawer[0] }}</span>
</md-list-item>
<!-- <md-list-item @click="turnToPage('/faq')">
<!-- <md-list-item @click="turnToPage('/faq')">
<md-icon>help</md-icon>
<span class="md-list-item-text">FAQ</span>
</md-list-item>
@ -46,41 +47,40 @@
<span class="md-list-item-text">Provide Feedback</span>
</md-list-item> -->
<md-list-item @click="turnToPage('/settings')">
<md-icon>settings</md-icon>
<span class="md-list-item-text">{{ lang.drawer[1] }}</span>
</md-list-item>
<md-list-item @click="turnToPage('/generator')">
<md-icon>extension</md-icon>
<span class="md-list-item-text">{{ lang.drawer[2] }}</span>
</md-list-item>
<md-list-item @click="turnToPage('/updatelog')">
<md-icon>event_note</md-icon>
<span class="md-list-item-text">{{ lang.drawer[3] }}</span>
</md-list-item>
<md-list-item @click="turnToPage('/settings')">
<md-icon>settings</md-icon>
<span class="md-list-item-text">{{ lang.drawer[1] }}</span>
</md-list-item>
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
<md-icon>reply</md-icon>
<span class="md-list-item-text">{{ lang.drawer[4] }}</span>
</md-list-item>
<md-list-item @click="turnToPage('/generator')">
<md-icon>extension</md-icon>
<span class="md-list-item-text">{{ lang.drawer[2] }}</span>
</md-list-item>
<md-list-item @click="downloadApk()">
<md-icon>file_download</md-icon>
<span class="md-list-item-text">{{ lang.drawer[5] }}</span>
</md-list-item>
<md-list-item @click="turnToPage('/updatelog')">
<md-icon>event_note</md-icon>
<span class="md-list-item-text">{{ lang.drawer[3] }}</span>
</md-list-item>
<md-list-item @click="turnToUnlock('用户点击锁定')">
<md-icon>beenhere</md-icon>
<span class="md-list-item-text">{{ lang.drawer[6] }}</span>
</md-list-item>
</md-list>
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
<md-icon>reply</md-icon>
<span class="md-list-item-text">{{ lang.drawer[4] }}</span>
</md-list-item>
<md-list-item @click="downloadApk()">
<md-icon>file_download</md-icon>
<span class="md-list-item-text">{{ lang.drawer[5] }}</span>
</md-list-item>
<md-list-item @click="turnToUnlock('用户点击锁定')">
<md-icon>beenhere</md-icon>
<span class="md-list-item-text">{{ lang.drawer[6] }}</span>
</md-list-item>
</md-list>
</md-app-drawer>
<md-app-content>
<v-touch @swiperight="menuVisible = true" :swipe-options="{direction: 'horizontal'}">
<v-touch @swiperight="menuVisible = true" :swipe-options="{ direction: 'horizontal' }">
<div ref="list_placeholder" :style="`height:${search_start ? '86' : '40'}px`"></div>
<md-empty-state md-icon="devices_other" :md-label="lang.empty_state.label" :md-description="lang.empty_state.description" v-if="show_list.length == 0 && !search_start">
<md-button class="md-primary md-raised" @click="turnToAdd()">{{ lang.empty_state.button }}</md-button>
@ -109,7 +109,7 @@
import { mapState, mapActions } from 'vuex';
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
import { lang } from '@/utils/language.js';
import { setHtmlFontSize } from '@/utils/px2rem.js'
import { setHtmlFontSize } from '@/utils/px2rem.js';
export default {
name: 'Home',
@ -130,7 +130,10 @@ export default {
titles: [],
search_content: '',
search_start: false,
lang: ''
lang: '',
// vcnsole模块
lastClickTime: 0,
count: 0
};
},
computed: {
@ -145,7 +148,7 @@ export default {
// console.log(clientHeight);
this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = (clientHeight - 32) + 'px';
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
@ -349,14 +352,53 @@ export default {
downloadApk() {
window.open('https://ccb.canary.moe/download/Canary.apk');
},
// 一键回顶
scrollTop() {
console.log(1)
this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
top: 0,
behavior: "smooth"
behavior: 'smooth'
});
console.log('一键回顶成功');
},
// 判断是否有class
hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
},
// 增加class
addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += ' ' + cls;
},
// 改变class
toggleClass(obj, cls) {
if (this.hasClass(obj, cls)) {
this.removeClass(obj, cls);
} else {
this.addClass(obj, cls);
}
},
// 移除class
removeClass(obj, cls) {
if (this.hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
},
// 点击处理vconsole
toggleVc() {
const nowTime = new Date().getTime();
if (nowTime - this.lastClickTime < 3000) {
this.count++;
} else {
this.count = 0;
}
this.lastClickTime = nowTime;
if (this.count >= 10) {
let vconDom = document.getElementById('__vconsole');
this.toggleClass(vconDom, 'vconsole-show');
this.count = 0;
}
}
},
created() {
@ -456,4 +498,13 @@ export default {
.face {
color: #fff !important;
}
.page-title {
flex: 1;
min-height: 56px;
line-height: 56px;
}
.sroll-top-area {
flex: 1;
min-height: 56px;
}
</style>