New update log page
This commit is contained in:
parent
fbc3491105
commit
40574741c6
@ -19,11 +19,11 @@ const routes = [
|
||||
name: 'Account',
|
||||
component: () => import(/* webpackChunkName: "account" */ '../views/Account/Account.vue')
|
||||
},
|
||||
// {
|
||||
// path: '/faq',
|
||||
// name: 'FAQ',
|
||||
// component: () => import(/* webpackChunkName: "faq" */ '../views/FAQ/FAQ.vue')
|
||||
// },
|
||||
{
|
||||
path: '/updatelog',
|
||||
name: 'UpdateLog',
|
||||
component: () => import(/* webpackChunkName: "updatelog" */ '../views/UpdateLog/UpdateLog.vue')
|
||||
},
|
||||
// {
|
||||
// path: '/feedback',
|
||||
// name: 'Feedback',
|
||||
|
||||
@ -5,7 +5,7 @@ export function lang() {
|
||||
title: '密码本',
|
||||
search: '搜索...',
|
||||
menu: ['按首字母', '按最常使用'],
|
||||
drawer: ['账户', '设置', '生成密码' ,'分享链接', '下载apk', '立即锁定'],
|
||||
drawer: ['账户', '设置', '生成密码', '更新日志', '分享链接', '下载apk', '立即锁定'],
|
||||
empty_state: {
|
||||
label: '创建你的第一个密码',
|
||||
description: '创建密码后，您就可以将信息上载到服务器并保存',
|
||||
@ -24,7 +24,7 @@ export function lang() {
|
||||
title: 'Codebook',
|
||||
search: 'Search...',
|
||||
menu: ['Alphabetically', 'Recently Used'],
|
||||
drawer: ['Account', 'Settings', 'Generate Password', 'Share', 'Download apk', 'Lock Now'],
|
||||
drawer: ['Account', 'Settings', 'Generate Password', 'Update Log', 'Share', 'Download apk', 'Lock Now'],
|
||||
empty_state: {
|
||||
label: 'Create your first code',
|
||||
description: "Creating code, you'll be able to upload your information to the server and save it.",
|
||||
@ -251,6 +251,82 @@ export function lang() {
|
||||
copy_failed: 'Failed to copy, but failed in some cases. Try to paste',
|
||||
code_res_empty: 'Not generated'
|
||||
}
|
||||
},
|
||||
update_log: {
|
||||
CHS:{
|
||||
title: '更新日志',
|
||||
timeline: [
|
||||
{
|
||||
label: '新增更新日志页',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'主页呼出菜单栏即可发现功能入口。',
|
||||
'2020-03-03'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增一键回顶',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'在主页点击导航栏页面标题即可一键回顶。',
|
||||
'2020-03-02'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增密码生成页',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'主页呼出菜单栏即可发现功能入口',
|
||||
'2020-02-29'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增呼出菜单手势',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'在主页非导航栏任意处右滑即可呼出菜单栏。',
|
||||
'2020-02-26'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
EN:{
|
||||
title: 'Update Log',
|
||||
timeline: [
|
||||
{
|
||||
label: 'New update log page',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Call out the menu bar on the homepage to find the function entry。',
|
||||
'2020-03-03'
|
||||
]
|
||||
},
|
||||
{
|
||||
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。',
|
||||
'2020-03-02'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'New password generation page',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Call out the menu bar on the homepage to find the function entry',
|
||||
'2020-02-29'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Added callout menu gesture',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Swipe right anywhere on the homepage other than the navigation bar to bring up the menu bar。',
|
||||
'2020-02-26'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,190 +0,0 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<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">Codebook</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button">
|
||||
<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>Alphabetically</md-menu-item>
|
||||
<md-menu-item>Recently Used</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-drawer :md-active.sync="menuVisible">
|
||||
<div class="drawer-banner">
|
||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||
<p class="md-title">Canary Codebook</p>
|
||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
||||
</div>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">Account</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>help</md-icon>
|
||||
<span class="md-list-item-text">FAQ</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>question_answer</md-icon>
|
||||
<span class="md-list-item-text">Provide Feedback</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>settings</md-icon>
|
||||
<span class="md-list-item-text">Settings</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>reply</md-icon>
|
||||
<span class="md-list-item-text">Share</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
md-label="Create your first code"
|
||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
||||
v-if="test_data.length == 0"
|
||||
>
|
||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
||||
<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="test_data.length != 0">
|
||||
<md-speed-dial-target>
|
||||
<md-icon>add</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { setHtmlFontSize } from '@/utils/px2rem.js'
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
menuVisible: false,
|
||||
has_data: false,
|
||||
clientHeight: "",
|
||||
test_data: [
|
||||
{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'微信',
|
||||
user_name:'15143211127',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},{
|
||||
open_count:0,
|
||||
title:'QQ',
|
||||
user_name:'1144131090',
|
||||
password:'test',
|
||||
node:'测试用',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([]),
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.code-card {
|
||||
padding: .3rem 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
</style>
|
||||
@ -55,20 +55,25 @@
|
||||
<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 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[3] }}</span>
|
||||
<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[4] }}</span>
|
||||
<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[5] }}</span>
|
||||
<span class="md-list-item-text">{{ lang.drawer[6] }}</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
|
||||
146
src/views/UpdateLog/UpdateLog.vue
Normal file
146
src/views/UpdateLog/UpdateLog.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="account">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary toolbar">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||
<h3 class="md-title" style="flex: 1">{{lang.title}}</h3>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<div style="height: 54px;"></div>
|
||||
<md-steppers md-vertical>
|
||||
<md-step v-for="(item, index) in lang.timeline" :key="index" :id="index.toString()" :md-label="item.label" :md-description="item.tag">
|
||||
<p v-for="(content, content_index) in item.content" :key="content_index">{{content}}</p>
|
||||
</md-step>
|
||||
</md-steppers>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState } from 'vuex';
|
||||
import { lang } from '@/utils/language.js'
|
||||
import { setHtmlFontSize } from '@/utils/px2rem.js'
|
||||
|
||||
export default {
|
||||
name: 'UpdateLog',
|
||||
data() {
|
||||
return {
|
||||
// 语言
|
||||
lang: '',
|
||||
// 页面高度
|
||||
clientHeight:'',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['row_pwd', 'settings'])
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
|
||||
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
// 判断有无用户密码
|
||||
if (Object.keys(this.row_pwd).length != 0) {
|
||||
// 有密码，已经输入过了
|
||||
let now = new Date().getTime();
|
||||
if (now - this.row_pwd.create_time < this.settings.expired_time) {
|
||||
// 上次写入时间距离现在在（默认五分钟）之内
|
||||
// 初始化本页信息
|
||||
this.initLanguage()
|
||||
} else {
|
||||
// 密码超时
|
||||
this.turnToHome('密码超时');
|
||||
}
|
||||
} else {
|
||||
// 没有密码
|
||||
this.turnToHome('无密码');
|
||||
}
|
||||
},
|
||||
|
||||
// 配置语言
|
||||
initLanguage() {
|
||||
if(this.settings.is_chinese) {
|
||||
this.lang = lang().update_log.CHS
|
||||
} else {
|
||||
this.lang = lang().update_log.EN
|
||||
}
|
||||
console.log('语言配置完成')
|
||||
},
|
||||
|
||||
//返回上一页
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
||||
// 强制返回Home
|
||||
turnToHome(msg) {
|
||||
console.log(msg);
|
||||
this.$router.replace('/');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.lang = lang().update_log.CHS
|
||||
console.log('临时语言系统加载完成')
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import '../../style/main';
|
||||
.account {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
.expand {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
min-height: 1.2rem !important;
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
.time-content {
|
||||
text-align: right !important;
|
||||
}
|
||||
.loading-box {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
margin-right: -11px;
|
||||
margin-top: -11px;
|
||||
}
|
||||
.toolbar {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user