add vue-touch
This commit is contained in:
parent
496fda0686
commit
022f1d48ed
@ -5,11 +5,13 @@
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"buildsuper": "vue-cli-service build --modern"
|
||||
"buildsuper": "vue-cli-service build --modern"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"core-js": "^3.6.4",
|
||||
"crc-32": "^1.2.0",
|
||||
"crypto-js": "^4.0.0",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"roboto-fontface": "^0.6.0",
|
||||
|
||||
@ -30,6 +30,10 @@ setHtmlFontSize();
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
Vue.use(VueClipboard);
|
||||
|
||||
// 手势控件
|
||||
var VueTouch = require('vue-touch')
|
||||
Vue.use(VueTouch, {name: 'v-touch'})
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
|
||||
@ -4,37 +4,39 @@
|
||||
<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">{{lang.title}}</span>
|
||||
<span class="md-title">{{ lang.title }}</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<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>
|
||||
<md-menu-content>
|
||||
<md-menu-item @click="changeSortType('Alphabetically')">{{lang.menu[0]}}</md-menu-item>
|
||||
<md-menu-item @click="changeSortType('Recently Used')">{{lang.menu[1]}}</md-menu-item>
|
||||
<md-menu-item @click="changeSortType('Alphabetically')">{{ lang.menu[0] }}</md-menu-item>
|
||||
<md-menu-item @click="changeSortType('Recently Used')">{{ lang.menu[1] }}</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
<div class="md-toolbar-row" v-if="search_start">
|
||||
<md-autocomplete class="search" v-model="search_content" :md-options="titles" md-layout="box"><label>{{lang.search}}</label></md-autocomplete>
|
||||
<md-autocomplete class="search" v-model="search_content" :md-options="titles" md-layout="box">
|
||||
<label>{{ lang.search }}</label>
|
||||
</md-autocomplete>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
@ -44,51 +46,49 @@
|
||||
<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('/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[2]}}</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="downloadApk()">
|
||||
<md-icon>file_download</md-icon>
|
||||
<span class="md-list-item-text">{{lang.drawer[3]}}</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[2] }}</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="downloadApk()">
|
||||
<md-icon>file_download</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[4] }}</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-list-item @click="turnToUnlock('用户点击锁定')">
|
||||
<md-icon>beenhere</md-icon>
|
||||
<span class="md-list-item-text">{{lang.drawer[4]}}</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<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>
|
||||
</md-empty-state>
|
||||
<v-touch @swiperight="menuVisible = true">
|
||||
<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>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in show_list" :key="index" @click="turnToDetail(code)">
|
||||
<p class="md-title">{{ code.title }}</p>
|
||||
<p class="md-caption">{{ code.user_name }}</p>
|
||||
</div>
|
||||
<div class="code-card" v-for="(code, index) in show_list" :key="index" @click="turnToDetail(code)">
|
||||
<p class="md-title">{{ code.title }}</p>
|
||||
<p class="md-caption">{{ code.user_name }}</p>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0 || search_start">
|
||||
<md-speed-dial-target class="md-primary" @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0 || search_start">
|
||||
<md-speed-dial-target class="md-primary" @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
</v-touch>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
@ -98,7 +98,7 @@
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||
import { lang } from '@/utils/language.js'
|
||||
import { lang } from '@/utils/language.js';
|
||||
export default {
|
||||
name: 'Home',
|
||||
data() {
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
|
||||
this.$refs.list_placeholder.parentNode.style.maxHeight = clientHeight + 'px';
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
|
||||
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
|
||||
},
|
||||
|
||||
@ -154,29 +154,29 @@ export default {
|
||||
if (this.row_data) {
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
let data_decrypt
|
||||
let data_decrypt;
|
||||
// 解密密码本
|
||||
try{
|
||||
try {
|
||||
data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
// 不正确
|
||||
// 跳转到解锁界面
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
this.turnToUnlock('密码错误');
|
||||
return
|
||||
return;
|
||||
}
|
||||
// 判断密码是否正确
|
||||
if(!data_decrypt) {
|
||||
if (!data_decrypt) {
|
||||
// 不正确
|
||||
// 跳转到解锁界面
|
||||
this.turnToUnlock('密码错误');
|
||||
return
|
||||
return;
|
||||
}
|
||||
// 刷新显示内容
|
||||
let data_list = JSON.parse(data_decrypt);
|
||||
this.show_list = data_list
|
||||
this.show_list = data_list;
|
||||
// 抽离title
|
||||
this.separateTitle(data_list)
|
||||
this.separateTitle(data_list);
|
||||
} else {
|
||||
// 空密码本
|
||||
this.show_list = [];
|
||||
@ -208,10 +208,10 @@ export default {
|
||||
}
|
||||
console.log('用户信息初始化完成');
|
||||
},
|
||||
|
||||
|
||||
// 初始化配置信息
|
||||
initSettings(){
|
||||
if (Object.keys(this.settings).length == 0 ) {
|
||||
initSettings() {
|
||||
if (Object.keys(this.settings).length == 0) {
|
||||
// 初始化配置信息
|
||||
let settings = {
|
||||
is_chinese: true,
|
||||
@ -221,13 +221,13 @@ export default {
|
||||
this.setSettings([settings, this]);
|
||||
console.log('配置信息覆写完成');
|
||||
}
|
||||
|
||||
if(this.settings.is_chinese) {
|
||||
this.lang = lang().home.CHS
|
||||
|
||||
if (this.settings.is_chinese) {
|
||||
this.lang = lang().home.CHS;
|
||||
} else {
|
||||
this.lang = lang().home.EN
|
||||
this.lang = lang().home.EN;
|
||||
}
|
||||
console.log('语言配置完成')
|
||||
console.log('语言配置完成');
|
||||
console.log('配置信息初始化完成');
|
||||
},
|
||||
|
||||
@ -264,7 +264,7 @@ export default {
|
||||
console.log('点击搜索无内容拦截');
|
||||
return;
|
||||
}
|
||||
this.search_start = !this.search_start
|
||||
this.search_start = !this.search_start;
|
||||
},
|
||||
|
||||
// 跳转到添加界面
|
||||
@ -276,11 +276,11 @@ export default {
|
||||
}
|
||||
this.$router.push('/add');
|
||||
},
|
||||
|
||||
|
||||
turnToDetail(content) {
|
||||
this.$router.push({name: 'Detail', params:{code_content: content}})
|
||||
this.$router.push({ name: 'Detail', params: { code_content: content } });
|
||||
},
|
||||
|
||||
|
||||
// 跳转到某页面
|
||||
turnToPage(url) {
|
||||
this.$router.push(url);
|
||||
@ -297,49 +297,49 @@ export default {
|
||||
this.snakebar_msg = this.lang.copy.failed;
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
|
||||
// 分离数据title
|
||||
separateTitle(data_list) {
|
||||
let title_list = []
|
||||
for(let i in data_list) {
|
||||
title_list.push(data_list[i].title)
|
||||
let title_list = [];
|
||||
for (let i in data_list) {
|
||||
title_list.push(data_list[i].title);
|
||||
}
|
||||
this.titles = title_list
|
||||
console.log('数据头部分离完成')
|
||||
this.titles = title_list;
|
||||
console.log('数据头部分离完成');
|
||||
},
|
||||
|
||||
|
||||
// 模糊搜索
|
||||
fuzzySearch(cache_list) {
|
||||
// 空内容拦截器，显示全部密码
|
||||
if(!this.search_content.trim()) {
|
||||
this.show_list = cache_list
|
||||
return
|
||||
if (!this.search_content.trim()) {
|
||||
this.show_list = cache_list;
|
||||
return;
|
||||
}
|
||||
let data_list = []
|
||||
let data_list = [];
|
||||
for (let i in cache_list) {
|
||||
if(this.generReg(this.search_content.trim()).test(cache_list[i].title)) {
|
||||
data_list.push(cache_list[i])
|
||||
if (this.generReg(this.search_content.trim()).test(cache_list[i].title)) {
|
||||
data_list.push(cache_list[i]);
|
||||
}
|
||||
}
|
||||
this.show_list = data_list
|
||||
this.show_list = data_list;
|
||||
},
|
||||
|
||||
|
||||
// 模糊搜索辅助轮
|
||||
generReg(val) {
|
||||
let head = '(.*)('
|
||||
let tail = ')(.*)'
|
||||
let body = val.split('').join(')(.*)(')
|
||||
return new RegExp(head + body + tail, 'i')
|
||||
let head = '(.*)(';
|
||||
let tail = ')(.*)';
|
||||
let body = val.split('').join(')(.*)(');
|
||||
return new RegExp(head + body + tail, 'i');
|
||||
},
|
||||
|
||||
|
||||
// 下载apk
|
||||
downloadApk() {
|
||||
window.open('https://ccb.canary.moe/download/Canary.apk')
|
||||
window.open('https://ccb.canary.moe/download/Canary.apk');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.lang = lang().home.CHS
|
||||
console.log('临时语言系统加载完成')
|
||||
this.lang = lang().home.CHS;
|
||||
console.log('临时语言系统加载完成');
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
@ -357,18 +357,18 @@ export default {
|
||||
},
|
||||
// 如果 `search_start` 发生改变，这个函数就会运行
|
||||
search_start: function() {
|
||||
if(this.search_start) {
|
||||
this.cache_list = JSON.parse(JSON.stringify(this.show_list))
|
||||
console.log('搜索阵列展开，缓存设置完成')
|
||||
if (this.search_start) {
|
||||
this.cache_list = JSON.parse(JSON.stringify(this.show_list));
|
||||
console.log('搜索阵列展开，缓存设置完成');
|
||||
} else {
|
||||
this.show_list = JSON.parse(JSON.stringify(this.cache_list))
|
||||
this.cache_list = []
|
||||
console.log('搜索阵列关闭，缓存清空完成')
|
||||
this.show_list = JSON.parse(JSON.stringify(this.cache_list));
|
||||
this.cache_list = [];
|
||||
console.log('搜索阵列关闭，缓存清空完成');
|
||||
}
|
||||
},
|
||||
// 如果 `search_content` 发生改变，这个函数就会运行
|
||||
search_content: function() {
|
||||
this.fuzzySearch(this.cache_list)
|
||||
this.fuzzySearch(this.cache_list);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
@ -421,7 +421,6 @@ export default {
|
||||
.md-speed-dial.md-bottom-right {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
@ -429,7 +428,7 @@ export default {
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
.md-app-scroller > div {
|
||||
overflow-y:scroll!important;
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.face {
|
||||
color: #fff !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user