diff --git a/src/App.vue b/src/App.vue index dc0de65..7c3b360 100644 --- a/src/App.vue +++ b/src/App.vue @@ -183,4 +183,11 @@ html[data-theme='light'] { left: 0.2rem !important; } } +#__vconsole { + display: none; +} + +.vconsole-show { + display: block !important; +} diff --git a/src/main.js b/src/main.js index 19fce49..28a38eb 100644 --- a/src/main.js +++ b/src/main.js @@ -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({ diff --git a/src/utils/language.js b/src/utils/language.js index 06f72be..a9b8dd7 100644 --- a/src/utils/language.js +++ b/src/utils/language.js @@ -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' ] }, diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue index 970c505..df1cf84 100644 --- a/src/views/Home/Home.vue +++ b/src/views/Home/Home.vue @@ -4,9 +4,10 @@
menu - {{ lang.title }} + {{ lang.title }}
+
search more_vert @@ -24,19 +25,19 @@ -
- face -

Canary Codebook

-

{{ user_infos.mail_addr }}

-
+
+ face +

Canary Codebook

+

{{ user_infos.mail_addr }}

+
- - - person - {{ lang.drawer[0] }} - + + + person + {{ lang.drawer[0] }} + - - - settings - {{ lang.drawer[1] }} - - - - extension - {{ lang.drawer[2] }} - - - - event_note - {{ lang.drawer[3] }} - + + settings + {{ lang.drawer[1] }} + - - reply - {{ lang.drawer[4] }} - + + extension + {{ lang.drawer[2] }} + - - file_download - {{ lang.drawer[5] }} - + + event_note + {{ lang.drawer[3] }} + - - beenhere - {{ lang.drawer[6] }} - - + + reply + {{ lang.drawer[4] }} + + + file_download + {{ lang.drawer[5] }} + + + + beenhere + {{ lang.drawer[6] }} + + - +
{{ lang.empty_state.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; +}