diff --git a/src/App.vue b/src/App.vue
index 7c3b360..3cdcc64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,45 +1,47 @@
 <template>
-	<div id="app">
-		<icon class="bg" name="canary"></icon>
-		<router-view />
-	</div>
+  <div id="app">
+    <icon class="bg" name="canary"></icon>
+    <router-view />
+  </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions } from "vuex";
 export default {
-	name: 'App',
-	mounted() {
-		window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
-		window.addEventListener('unload', e => this.unloadHandler(e))
-	},
-	destroyed() {
-		window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
-		window.removeEventListener('unload', e => this.unloadHandler(e))
-	},
-	methods: {
-		...mapActions(['setRowPwd']),
-		beforeunloadHandler(){
-			this._beforeUnload_time=new Date().getTime();
-		},
-		unloadHandler(e){
-			this._gap_time=new Date().getTime()-this._beforeUnload_time;
-			//判断是窗口关闭还是刷新
-			if(this._gap_time<=5){
-				// debugger
-				console.log('退出程序清除主密码')
-				this.setRowPwd(['', this]);
-				// debugger
-			}
-		}
-	}
+  name: "App",
+  mounted() {
+    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
+    window.addEventListener("unload", (e) => this.unloadHandler(e));
+  },
+  destroyed() {
+    window.removeEventListener("beforeunload", (e) =>
+      this.beforeunloadHandler(e)
+    );
+    window.removeEventListener("unload", (e) => this.unloadHandler(e));
+  },
+  methods: {
+    ...mapActions(["setRowPwd"]),
+    beforeunloadHandler() {
+      this._beforeUnload_time = new Date().getTime();
+    },
+    unloadHandler(e) {
+      this._gap_time = new Date().getTime() - this._beforeUnload_time;
+      //判断是窗口关闭还是刷新
+      if (this._gap_time <= 5) {
+        // debugger
+        console.log("退出程序清除主密码");
+        this.setRowPwd(["", this]);
+        // debugger
+      }
+    },
+  },
 };
 </script>
 <style lang="scss">
-@import './style/main';
-@import './style/font';
-@import '~vue-material/dist/theme/engine';
-@import '~vue-material/dist/theme/all';
+@import "./style/main";
+@import "./style/font";
+@import "~vue-material/dist/theme/engine";
+@import "~vue-material/dist/theme/all";
 body,
 h1,
 h2,
@@ -65,15 +67,15 @@ input,
 textarea,
 th,
 td {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
 body,
 button,
 input,
 select,
 textarea {
-	font: 12px/1.5tahoma, arial, \5b8b\4f53;
+  font: 12px/1.5tahoma, arial, \5b8b\4f53;
 }
 h1,
 h2,
@@ -81,113 +83,114 @@ h3,
 h4,
 h5,
 h6 {
-	font-size: 100%;
+  font-size: 100%;
 }
 address,
 cite,
 dfn,
 em,
 var {
-	font-style: normal;
+  font-style: normal;
 }
 code,
 kbd,
 pre,
 samp {
-	font-family: couriernew, courier, monospace;
+  font-family: couriernew, courier, monospace;
 }
 small {
-	font-size: 12px;
+  font-size: 12px;
 }
 ul,
 ol {
-	list-style: none;
+  list-style: none;
 }
 a {
-	text-decoration: none;
+  text-decoration: none;
 }
 a:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 sup {
-	vertical-align: text-top;
+  vertical-align: text-top;
 }
 sub {
-	vertical-align: text-bottom;
+  vertical-align: text-bottom;
 }
 legend {
-	color: #000;
+  color: #000;
 }
 fieldset,
 img {
-	border: 0;
+  border: 0;
 }
 button,
 input,
 select,
 textarea {
-	font-size: 100%;
+  font-size: 100%;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 button {
-	margin: 0;
-	padding: 0;
-	background: none;
-	border: none;
-	outline: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  outline: none;
 }
-html[data-theme='dark'] {
-	@include set-theme-dark();
-	@import '~vue-material/dist/theme/all';
-	.md-caption {
-		color: rgba(255, 255, 255, 0.7);
-	}
+html[data-theme="dark"] {
+  @include set-theme-dark();
+  @import "~vue-material/dist/theme/all";
+  .md-caption {
+    color: rgba(255, 255, 255, 0.7);
+  }
 }
-html[data-theme='light'] {
-	@include set-theme-light();
-	@import '~vue-material/dist/theme/all';
+html[data-theme="light"] {
+  @include set-theme-light();
+  @import "~vue-material/dist/theme/all";
 }
 #app {
-	font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	/* text-align: center; */
-	// color: #2c3e50;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	-khtml-user-select: none;
-	user-select: none;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* text-align: center; */
+  // color: #2c3e50;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
 }
 .bg {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	z-index: -100;
-	height: 5rem;
-	width: 5rem;
-	margin-top: -2.5rem;
-	margin-left: -2.5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -100;
+  height: 5rem;
+  width: 5rem;
+  margin-top: -2.5rem;
+  margin-left: -2.5rem;
 }
 
 @media screen and (max-width: 500px) {
-	.md-autocomplete-box-content {
-		left: 0.2rem !important;
-	}
+  .md-autocomplete-box-content {
+    left: 0.2rem !important;
+  }
 }
 #__vconsole {
   display: none;
 }
 
 .vconsole-show {
-	display: block !important;
+  display: block !important;
 }
 </style>
diff --git a/src/axios/api.js b/src/axios/api.js
index 257a092..978cab4 100644
--- a/src/axios/api.js
+++ b/src/axios/api.js
@@ -5,7 +5,7 @@ var CryptoJS = require("crypto-js");
 
 // 更新本地 传参 data => cid pwd
 export function syncLocal(data) {
-  var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
+  var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g, "'")).toString().toUpperCase();
   data.sign = sign
   let params = new URLSearchParams();
   params.append('data', JSON.stringify(data));
@@ -16,7 +16,7 @@ export function syncLocal(data) {
 export function syncCloud(data) {
   let data_cache = Object.assign({}, data)
   delete data_cache.content
-  var sign = CryptoJS.MD5(JSON.stringify(data_cache).replace(/\"/g,"'")).toString().toUpperCase();
+  var sign = CryptoJS.MD5(JSON.stringify(data_cache).replace(/\"/g, "'")).toString().toUpperCase();
   data.sign = sign
   let params = new URLSearchParams();
   params.append('data', JSON.stringify(data));
diff --git a/src/axios/fetch.js b/src/axios/fetch.js
index 007bc98..9ffce35 100644
--- a/src/axios/fetch.js
+++ b/src/axios/fetch.js
@@ -10,7 +10,7 @@ export const api = axios.create({
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded',
     'Accept': 'application/json',
-		'Access-Control-Allow-Origin': '*'
+    'Access-Control-Allow-Origin': '*'
   },
   timeout: 10 * 1000
 })
diff --git a/src/main.js b/src/main.js
index 28a38eb..6b95e75 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,7 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import store from './store'
-import { setHtmlFontSize } from  './utils/px2rem.js'
+import { setHtmlFontSize } from './utils/px2rem.js'
 // icon-loader
 import Icon from 'vue-svg-icon/Icon.vue'
 Vue.component('icon', Icon);
@@ -25,7 +25,7 @@ Vue.use(VueClipboard);
 
 // 手势控件
 var VueTouch = require('vue-touch')
-Vue.use(VueTouch, {name: 'v-touch'})
+Vue.use(VueTouch, { name: 'v-touch' })
 
 // vconsole
 import Vconsole from 'vconsole';
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index b79acf1..51b9b9f 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -4,29 +4,29 @@ import { register } from 'register-service-worker'
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
+    ready() {
       console.log(
         'App is being served from cache by a service worker.\n' +
         'For more details, visit https://goo.gl/AFskqB'
       )
     },
-    registered () {
+    registered() {
       console.log('Service worker has been registered.')
     },
-    cached () {
+    cached() {
       console.log('Content has been cached for offline use.')
     },
-    updatefound () {
+    updatefound() {
       console.log('New content is downloading.')
     },
-    updated () {
+    updated() {
       console.log('New content is available; please refresh.')
       window.location.reload(true)
     },
-    offline () {
+    offline() {
       console.log('No internet connection found. App is running in offline mode.')
     },
-    error (error) {
+    error(error) {
       console.error('Error during service worker registration:', error)
     }
   })
diff --git a/src/utils/aes.js b/src/utils/aes.js
index 03e766e..4b0b570 100644
--- a/src/utils/aes.js
+++ b/src/utils/aes.js
@@ -4,37 +4,37 @@ import CRC32 from 'crc-32'
 // aes加密
 export function encrypt(code, json_row) {
 	// 循环冗余校验
-  let aesKey = CRC32.str(code)
+	let aesKey = CRC32.str(code)
 	// 取八位
-	aesKey = aesKey.toString().slice(0,8)
+	aesKey = aesKey.toString().slice(0, 8)
 	// 字符串化
-  let json_str = JSON.stringify(json_row)
+	let json_str = JSON.stringify(json_row)
 	// 加密
-  return CryptoJS.AES.encrypt(json_str, CryptoJS.enc.Utf8.parse(aesKey), {
-    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7
-  }).toString();
+	return CryptoJS.AES.encrypt(json_str, CryptoJS.enc.Utf8.parse(aesKey), {
+		mode: CryptoJS.mode.ECB,
+		padding: CryptoJS.pad.Pkcs7
+	}).toString();
 }
 
 // aes解密
 export function decrypt(code, encrypt_str) {
 	// 循环冗余校验
-  let aesKey = CRC32.str(code)
+	let aesKey = CRC32.str(code)
 	// 取八位
-	aesKey = aesKey.toString().slice(0,8)
+	aesKey = aesKey.toString().slice(0, 8)
 	// 解密
-  return CryptoJS.AES.decrypt(encrypt_str, CryptoJS.enc.Utf8.parse(aesKey), {
-    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7
-  }).toString(CryptoJS.enc.Utf8);
+	return CryptoJS.AES.decrypt(encrypt_str, CryptoJS.enc.Utf8.parse(aesKey), {
+		mode: CryptoJS.mode.ECB,
+		padding: CryptoJS.pad.Pkcs7
+	}).toString(CryptoJS.enc.Utf8);
 }
 
 // aes加密用户密码
 export function encryptMainCode(code) {
 	let default_key = 'e08b44a351a3'
 	return CryptoJS.AES.encrypt(code, CryptoJS.enc.Utf8.parse(default_key), {
-	  mode: CryptoJS.mode.ECB,
-	  padding: CryptoJS.pad.Pkcs7
+		mode: CryptoJS.mode.ECB,
+		padding: CryptoJS.pad.Pkcs7
 	}).toString();
 }
 
@@ -42,7 +42,7 @@ export function encryptMainCode(code) {
 export function decryptMainCode(row_code) {
 	let default_key = 'e08b44a351a3'
 	return CryptoJS.AES.decrypt(row_code, CryptoJS.enc.Utf8.parse(default_key), {
-	  mode: CryptoJS.mode.ECB,
-	  padding: CryptoJS.pad.Pkcs7
+		mode: CryptoJS.mode.ECB,
+		padding: CryptoJS.pad.Pkcs7
 	}).toString(CryptoJS.enc.Utf8);
 }
\ No newline at end of file
diff --git a/src/utils/language.js b/src/utils/language.js
index 1872c99..0820587 100644
--- a/src/utils/language.js
+++ b/src/utils/language.js
@@ -43,9 +43,10 @@ export function lang() {
 		settings: {
 			CHS: {
 				title: '设置',
-				subheader: ['重置', '选项'],
+				subheader: ['重置', '选项', '导入 / 导出'],
 				reset_list: ['账户', '密码本', '应用', '主密码'],
-				option_list: ['语言', '黑暗模式', '密码超时时间'],
+        option_list: ['语言', '黑暗模式', '密码超时时间'],
+        import_export_list: ['导入密码本', '导出密码本'],
 				expired_time: '无限',
 				dialog: {
 					title: '输入新的主密码',
@@ -53,12 +54,24 @@ export function lang() {
 					confirm: '完成',
 					cancel: '取消'
 				},
+				copy: {
+					successful: '恭喜！已成功导出至剪切板',
+					failed: '抱歉，导出失败。夸克等浏览器导出成功也会报错，请试着粘贴看看'
+				},
+				import_dialog: {
+					title: '输入导入内容',
+					placeholder: '不要乱输入东西不然会坏掉',
+					confirm: '导入',
+					cancel: '取消'
+				},
 				snakebar_msg: {
 					reset_account: '恭喜! 账户重置完成',
 					reset_codebook: '恭喜! 密码本重置完成',
 					reset_settings: '恭喜! 个性化设置成功',
 					reset_pwd_failed: '密码不能为空',
-					reset_pwd_successful: '恭喜! 新的密码已经应用'
+					reset_pwd_successful: '恭喜! 新的密码已经应用',
+					reset_row_data_failed: '密码本内容不能为空',
+					reset_row_data_successful: '恭喜! 新的密码本已经应用',
 				},
 				reset_dialog: {
 					title: '警告',
@@ -69,22 +82,35 @@ export function lang() {
 			},
 			EN: {
 				title: 'Settings',
-				subheader: ['Reset', 'Option'],
+				subheader: ['Reset', 'Option', 'Import / Export'],
 				reset_list: ['Account', 'Codebook', 'Application', 'Main Password'],
 				option_list: ['Language', 'Dark Mode', 'Expired Time'],
-				expired_time: 'Infinite',
+        expired_time: 'Infinite',
+        import_export_list: ['Import Codebook', 'Export Codebook'],
 				dialog: {
 					title: 'Enter new password',
 					placeholder: 'Enter here...',
 					confirm: 'Done',
 					cancel: 'Cancel'
 				},
+				copy: {
+					successful: 'congratulations! Successfully exported to the clipboard',
+					failed: 'Failed to export, but failed in some cases. Try to paste'
+				},
+				import_dialog: {
+					title: 'Enter new codebook content',
+					placeholder: 'Enter here...',
+					confirm: 'Done',
+					cancel: 'Cancel'
+				},
 				snakebar_msg: {
 					reset_account: 'Congratulations! Reset account completed',
 					reset_codebook: 'Congratulations! Reset codebook completed',
 					reset_settings: 'Congratulations! Reset settings completed',
 					reset_pwd_failed: 'Password can not be none',
-					reset_pwd_successful: 'Congratulations! New password set up successfully'
+					reset_pwd_successful: 'Congratulations! New password set up successfully',
+					reset_row_data_failed: 'Codebook Content can not be none',
+					reset_row_data_successful: 'Congratulations! New Codebook Content set up successfully'
 				},
 				reset_dialog: {
 					title: 'Warning',
@@ -135,11 +161,11 @@ export function lang() {
 				generator: {
 					title: '生成密码',
 					subheader: ['结果', '设置'],
-					length_setter:{
+					length_setter: {
 						label: '密码长度',
-						options:['6 位', '12 位', '18 位', '24 位', '32 位']
+						options: ['6 位', '12 位', '18 位', '24 位', '32 位']
 					},
-					settings:['包含大写', '包含小写', '包含数字', '包含符号'],
+					settings: ['包含大写', '包含小写', '包含数字', '包含符号'],
 					actions: ['生成', '复制', '关闭'],
 					code_res_empty: '未生成',
 					copy_successful: '(复制成功)',
@@ -154,12 +180,12 @@ export function lang() {
 				generator: {
 					title: 'Generate Password',
 					subheader: ['Results (click to copy)', 'Settings'],
-					length_setter:{
+					length_setter: {
 						label: 'Password Length',
-						options:['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
+						options: ['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
 					},
-					settings:['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
-					actions: ['Generate', 'Copy','Close'],
+					settings: ['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
+					actions: ['Generate', 'Copy', 'Close'],
 					code_res_empty: 'Not generated',
 					copy_successful: '(Copy successful)',
 					copy_failed: '(Failed to copy)',
@@ -175,7 +201,7 @@ export function lang() {
 					submit: '登录'
 				},
 				account: {
-					label: ['云端信息最后修改时间','云端信息最后修改设备名', '同步本地密码本至云端', '同步云端密码本至本地'],
+					label: ['云端信息最后修改时间', '云端信息最后修改设备名', '同步本地密码本至云端', '同步云端密码本至本地'],
 					logout: '退出登录'
 				},
 				cid_errmsg: ['教务账号不能为空'],
@@ -197,7 +223,7 @@ export function lang() {
 					submit: 'Login'
 				},
 				account: {
-					label: ['Cloud last modified time','Cloud last modified drivce', 'Sync local codebook to cloud', 'Sync cloud codebook to local'],
+					label: ['Cloud last modified time', 'Cloud last modified drivce', 'Sync local codebook to cloud', 'Sync cloud codebook to local'],
 					logout: 'Logout'
 				},
 				cid_errmsg: ['Mail addr can not be none.'],
@@ -214,9 +240,9 @@ export function lang() {
 		},
 		unlock: {
 			CHS: {
-				title: ['创建主密码','解锁'],
+				title: ['创建主密码', '解锁'],
 				subheader: ['创建主密码', '解锁Canary Codebook'],
-				pwd_label: ['主密码','解锁密码'],
+				pwd_label: ['主密码', '解锁密码'],
 				repeat_pwd: '再次输入主密码',
 				drivce_label: '请输入本设备名(多端同步用)',
 				enter: '提交',
@@ -232,9 +258,9 @@ export function lang() {
 				drivce_error: '设备名不能为空'
 			},
 			EN: {
-				title: ['Create Password','Unlock'],
+				title: ['Create Password', 'Unlock'],
 				subheader: ['Create New Password', 'Unlock Canary Codebook'],
-				pwd_label: ['New Password','Unlock Password'],
+				pwd_label: ['New Password', 'Unlock Password'],
 				repeat_pwd: 'Repeat Password',
 				drivce_label: 'pleace enter drivce name',
 				enter: 'Enter',
@@ -251,28 +277,28 @@ export function lang() {
 			}
 		},
 		generator: {
-			CHS:{
+			CHS: {
 				title: '生成密码',
 				subheader: ['结果(点击复制)', '设置'],
-				length_setter:{
+				length_setter: {
 					label: '密码长度',
-					options:['6 位', '12 位', '18 位', '24 位', '32 位']
+					options: ['6 位', '12 位', '18 位', '24 位', '32 位']
 				},
-				settings:['包含大写', '包含小写', '包含数字', '包含符号'],
+				settings: ['包含大写', '包含小写', '包含数字', '包含符号'],
 				submit: '生成',
 				generate_successful: '生成成功',
 				copy_successful: '复制成功',
 				copy_failed: '抱歉，复制失败。夸克等浏览器复制成功也会报错，请试着粘贴看看',
 				code_res_empty: '未生成'
 			},
-			EN:{
+			EN: {
 				title: 'Generate Password',
 				subheader: ['Results (click to copy)', 'Settings'],
-				length_setter:{
+				length_setter: {
 					label: 'Password Length',
-					options:['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
+					options: ['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
 				},
-				settings:['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
+				settings: ['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
 				submit: 'Generate',
 				generate_successful: 'Generated successfully',
 				copy_successful: 'Copy successful',
@@ -281,12 +307,20 @@ export function lang() {
 			}
 		},
 		update_log: {
-			CHS:{
+			CHS: {
 				title: '更新日志',
 				timeline: [
+          {
+						label: '新增导入导出功能',
+						tag: '功能更新',
+						content: [
+							'为方便老用户转移数据或者自行备份数据，新增导入导出功能',
+							'2020-09-02'
+						]
+					},
 					{
 						label: '修复密码本为空的情况下解锁页面变为创建主密码',
-						tag:'bug修复',
+						tag: 'bug修复',
 						content: [
 							'密码本为空的情况下，解锁的页面会变成创建主密码，会进行不必要的输入，已修复',
 							'2020-09-02'
@@ -294,7 +328,7 @@ export function lang() {
 					},
 					{
 						label: '长理专版密码本改造完成',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'获取了操作长理网盘的接口文档，为了用户信息安全性，将用户加密完的密码存放至网盘canary/codebook.txt',
 							'2020-09-01'
@@ -302,7 +336,7 @@ export function lang() {
 					},
 					{
 						label: '修复搜索后关闭搜索框密码本内容消失',
-						tag:'bug修复',
+						tag: 'bug修复',
 						content: [
 							'进行搜索后关闭搜索框由于执行顺序问题，空缓存覆盖掉了要显示的信息导致密码本“视觉上”的消失，已修复',
 							'2020-03-24'
@@ -310,7 +344,7 @@ export function lang() {
 					},
 					{
 						label: '切换页面之后保存主页状态',
-						tag:'bug修复',
+						tag: 'bug修复',
 						content: [
 							'正常情况下不保存主页状态进行页面跳转的时候会导致每次回到主页都是默认回顶的状态，已修复',
 							'2020-03-15'
@@ -318,7 +352,7 @@ export function lang() {
 					},
 					{
 						label: '设置中的重置功能优化',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'所有重置操作之前会进行弹窗提醒，防止误操作',
 							'2020-03-08'
@@ -326,7 +360,7 @@ export function lang() {
 					},
 					{
 						label: '设置中的重置主密码功能启用',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'设置中的重置主密码功能启用，重置后即可使用新密码解锁密码本，另改进了解锁页的密码错误判断逻辑',
 							'2020-03-08'
@@ -334,7 +368,7 @@ export function lang() {
 					},
 					{
 						label: '新建密码记录生成的密码支持复制',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'在新建密码页生成密码支持一键复制',
 							'2020-03-07'
@@ -342,7 +376,7 @@ export function lang() {
 					},
 					{
 						label: '修复云端最后修改时间不更新的问题',
-						tag:'bug修复',
+						tag: 'bug修复',
 						content: [
 							'之前同步密码本至本地后云端最后修改时间不会同时更新，现已修复',
 							'2020-03-06'
@@ -350,7 +384,7 @@ export function lang() {
 					},
 					{
 						label: '新增页面返回手势',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'所有子页面支持右滑返回上一页面',
 							'2020-03-06'
@@ -358,7 +392,7 @@ export function lang() {
 					},
 					{
 						label: '新建密码记录时支持生成密码',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'新建密码记录页的的密码输入框右侧支持打开生成密码页',
 							'2020-03-05'
@@ -366,7 +400,7 @@ export function lang() {
 					},
 					{
 						label: '修复黑暗模式下主页分割线显示问题',
-						tag:'bug修复',
+						tag: 'bug修复',
 						content: [
 							'之前黑暗模式下主页密码分割线过亮，造成强烈的视觉撕裂感，现已修复',
 							'2020-03-04'
@@ -374,7 +408,7 @@ export function lang() {
 					},
 					{
 						label: '新增控制台vConsole',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'主页呼出菜单栏点击头像十次即可唤出或隐藏控制台',
 							'2020-03-04'
@@ -382,7 +416,7 @@ export function lang() {
 					},
 					{
 						label: '扩大一键回顶点击面积',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'一键回顶点击范围从标题文字延展到整个导航栏非功能区',
 							'2020-03-03'
@@ -390,7 +424,7 @@ export function lang() {
 					},
 					{
 						label: '新增更新日志页',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'主页呼出菜单栏即可发现功能入口',
 							'2020-03-03'
@@ -398,7 +432,7 @@ export function lang() {
 					},
 					{
 						label: '新增一键回顶',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'在主页点击导航栏页面标题即可一键回顶',
 							'2020-03-02'
@@ -406,7 +440,7 @@ export function lang() {
 					},
 					{
 						label: '新增密码生成页',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'主页呼出菜单栏即可发现功能入口',
 							'2020-02-29'
@@ -414,7 +448,7 @@ export function lang() {
 					},
 					{
 						label: '新增呼出菜单手势',
-						tag:'功能更新',
+						tag: '功能更新',
 						content: [
 							'在主页非导航栏任意处右滑即可呼出菜单栏',
 							'2020-02-26'
@@ -422,12 +456,20 @@ export function lang() {
 					}
 				]
 			},
-			EN:{
+			EN: {
 				title: 'Update Log',
 				timeline: [
+          {
+						label: 'New import and export function',
+						tag: 'Feature update',
+						content: [
+							'In order to facilitate old users to transfer data or backup data by themselves, new import and export function is added',
+							'2020-09-02'
+						]
+					},
 					{
 						label: 'Fix that the unlock page becomes create master password when the password book is empty',
-						tag:'Bug fix',
+						tag: 'Bug fix',
 						content: [
 							'When the password book is empty, the unlocked page will become the creation of the master password, and unnecessary input will be made, which is fixed',
 							'2020-09-02'
@@ -435,7 +477,7 @@ export function lang() {
 					},
 					{
 						label: 'Changli special edition codebook transformation completed',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Obtained the interface document for operating the Changli network disk, and stored the encrypted password of the user in the network disk for the security of user information canary/codebook.txt',
 							'2020-09-01'
@@ -443,7 +485,7 @@ export function lang() {
 					},
 					{
 						label: 'Fixed search box password content disappeared after searching',
-						tag:'Bug fix',
+						tag: 'Bug fix',
 						content: [
 							'Close the search box after searching. Due to the execution order problem, the empty cache has overwritten the information to be displayed, causing the codebook to "visually" disappear. It has been fixed.',
 							'2020-03-24'
@@ -451,7 +493,7 @@ export function lang() {
 					},
 					{
 						label: 'Save homepage status after switching pages',
-						tag:'Bug fix',
+						tag: 'Bug fix',
 						content: [
 							'Normally, when you do n’t save the homepage state, the page jump will result in the default backing state every time you return to the homepage.',
 							'2020-03-15'
@@ -459,7 +501,7 @@ export function lang() {
 					},
 					{
 						label: 'Optimization of reset function in settings',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Pop-up window reminder before all reset operations to prevent misoperation',
 							'2020-03-08'
@@ -467,7 +509,7 @@ export function lang() {
 					},
 					{
 						label: 'The reset master password function is enabled in the settings',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'The reset master password function is enabled in the settings. After resetting, you can use the new password to unlock the password book, and improve the password error judgment logic on the unlock page',
 							'2020-03-08'
@@ -475,7 +517,7 @@ export function lang() {
 					},
 					{
 						label: 'Generated passwords support replication',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Generate a password on the new password page',
 							'2020-03-07'
@@ -483,7 +525,7 @@ export function lang() {
 					},
 					{
 						label: 'Fix the problem that the last modification time of the cloud is not updated',
-						tag:'Bug fix',
+						tag: 'Bug fix',
 						content: [
 							'The last modified time in the cloud will not be updated at the same time after syncing the password book to the local, it is now fixed',
 							'2020-03-06'
@@ -491,7 +533,7 @@ export function lang() {
 					},
 					{
 						label: 'Add page back gesture',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'All subpages support swiping right to return to the previous page',
 							'2020-03-06'
@@ -499,7 +541,7 @@ export function lang() {
 					},
 					{
 						label: 'Support password generation when creating new password records',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'The right side of the password input box of the new password record page supports opening a generate password page',
 							'2020-03-05'
@@ -507,7 +549,7 @@ export function lang() {
 					},
 					{
 						label: 'Fixed display of homepage split line in dark mode',
-						tag:'Bug fix',
+						tag: 'Bug fix',
 						content: [
 							'The homepage password dividing line was too bright in the dark mode, causing a strong visual tearing.',
 							'2020-03-04'
@@ -515,7 +557,7 @@ export function lang() {
 					},
 					{
 						label: 'Add vConsole',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Home callout menu bar Click the avatar ten times to call up or hide the console',
 							'2020-03-04'
@@ -523,7 +565,7 @@ export function lang() {
 					},
 					{
 						label: 'Expand one click back to top click area',
-						tag:'Feature update',
+						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'
@@ -531,7 +573,7 @@ export function lang() {
 					},
 					{
 						label: 'New update log page',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Call out the menu bar on the homepage to find the function entry',
 							'2020-03-03'
@@ -539,7 +581,7 @@ export function lang() {
 					},
 					{
 						label: 'Added one-click back to top',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Click the navigation page title on the homepage to return to the top with one click',
 							'2020-03-02'
@@ -547,7 +589,7 @@ export function lang() {
 					},
 					{
 						label: 'New password generation page',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Call out the menu bar on the homepage to find the function entry',
 							'2020-02-29'
@@ -555,7 +597,7 @@ export function lang() {
 					},
 					{
 						label: 'Added callout menu gesture',
-						tag:'Feature update',
+						tag: 'Feature update',
 						content: [
 							'Swipe right anywhere on the homepage other than the navigation bar to bring up the menu bar。',
 							'2020-02-26'
@@ -570,10 +612,10 @@ export function lang() {
 /**
  * 引入
 	import { lang } from '@/utils/language.js'
-	
+
  * data 里边加入lang
 	data -> lang
-	
+
  * create() 初始化语言系统，防止报错
 	this.lang = lang().home.CHS
 	console.log('临时语言系统加载完成')
diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
index 3e66541..d754254 100644
--- a/src/views/Account/Account.vue
+++ b/src/views/Account/Account.vue
@@ -1,431 +1,505 @@
 <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>
+  <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>
-				<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
-					<div ref="list_placeholder" style="height: 54px;"></div>
-					<icon class="logo" name="canary"></icon>
-					<template v-if="page_type == 'login'">
-						<md-field :class="cid_verify ? '' : 'md-invalid'">
-							<label>{{ lang.login.input_placeholder[0] }}</label>
-							<md-input v-model="cid" required></md-input>
-							<span class="md-error">{{ cid_errmsg }}</span>
-						</md-field>
+      <md-app-content>
+        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" style="height: 54px;"></div>
+          <icon class="logo" name="canary"></icon>
+          <template v-if="page_type == 'login'">
+            <md-field :class="cid_verify ? '' : 'md-invalid'">
+              <label>{{ lang.login.input_placeholder[0] }}</label>
+              <md-input v-model="cid" required></md-input>
+              <span class="md-error">{{ cid_errmsg }}</span>
+            </md-field>
 
-						<md-field :class="password_verify ? '' : 'md-invalid'">
-							<label>{{ lang.login.input_placeholder[1] }}</label>
-							<md-input v-model="password" required type="password"></md-input>
-							<span class="md-error">{{ lang.login.password_errmsg }}</span>
-						</md-field>
-						<md-button class="md-raised md-primary expand" @click="judgeLogin()" :disabled="login_loading">
-							{{ lang.login.submit }}
-							<div class="loading-box"><md-progress-spinner v-if="login_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner></div>
-						</md-button>
-					</template>
+            <md-field :class="password_verify ? '' : 'md-invalid'">
+              <label>{{ lang.login.input_placeholder[1] }}</label>
+              <md-input v-model="password" required type="password"></md-input>
+              <span class="md-error">{{ lang.login.password_errmsg }}</span>
+            </md-field>
+            <md-button
+              class="md-raised md-primary expand"
+              @click="judgeLogin()"
+              :disabled="login_loading"
+            >
+              {{ lang.login.submit }}
+              <div class="loading-box">
+                <md-progress-spinner
+                  v-if="login_loading"
+                  :md-diameter="22"
+                  :md-stroke="3"
+                  md-mode="indeterminate"
+                ></md-progress-spinner>
+              </div>
+            </md-button>
+          </template>
 
-					<template v-if="page_type == 'account'">
-						<md-list>
-							<md-list-item>
-								<span class="md-list-item-text">{{ user_infos.cid }} | {{ user_infos.user_name }}</span>
-							</md-list-item>
+          <template v-if="page_type == 'account'">
+            <md-list>
+              <md-list-item>
+                <span class="md-list-item-text">{{ user_infos.cid }} | {{ user_infos.user_name }}</span>
+              </md-list-item>
 
-							<md-divider></md-divider>
+              <md-divider></md-divider>
 
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.account.label[0] }}</span>
-								<span class="time-content">{{ update_time }}</span>
-							</md-list-item>
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.account.label[0] }}</span>
+                <span class="time-content">{{ update_time }}</span>
+              </md-list-item>
 
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.account.label[1] }}</span>
-								<span class="time-content">{{ user_infos.cloud_drivce }}</span>
-							</md-list-item>
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.account.label[1] }}</span>
+                <span class="time-content">{{ user_infos.cloud_drivce }}</span>
+              </md-list-item>
 
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.account.label[2] }}</span>
-								<md-button @click="syncCloudStart()" v-if="!sync_cloud_loading" class="md-icon-button md-list-action"><md-icon>cloud_upload</md-icon></md-button>
-								<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
-							</md-list-item>
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.account.label[2] }}</span>
+                <md-button
+                  @click="syncCloudStart()"
+                  v-if="!sync_cloud_loading"
+                  class="md-icon-button md-list-action"
+                >
+                  <md-icon>cloud_upload</md-icon>
+                </md-button>
+                <md-progress-spinner
+                  v-else
+                  :md-diameter="22"
+                  :md-stroke="3"
+                  md-mode="indeterminate"
+                ></md-progress-spinner>
+              </md-list-item>
 
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.account.label[3] }}</span>
-								<md-button @click="syncLocalStart()" v-if="!sync_local_loading" class="md-icon-button md-list-action"><md-icon>cloud_download</md-icon></md-button>
-								<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
-							</md-list-item>
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.account.label[3] }}</span>
+                <md-button
+                  @click="syncLocalStart()"
+                  v-if="!sync_local_loading"
+                  class="md-icon-button md-list-action"
+                >
+                  <md-icon>cloud_download</md-icon>
+                </md-button>
+                <md-progress-spinner
+                  v-else
+                  :md-diameter="22"
+                  :md-stroke="3"
+                  md-mode="indeterminate"
+                ></md-progress-spinner>
+              </md-list-item>
 
-							<md-button @click="startLogout()" class="md-raised md-primary expand" :disabled="sync_local_loading || sync_cloud_loading">{{ lang.account.logout }}</md-button>
-						</md-list>
-					</template>
-					<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>
+              <md-button
+                @click="startLogout()"
+                class="md-raised md-primary expand"
+                :disabled="sync_local_loading || sync_cloud_loading"
+              >{{ lang.account.logout }}</md-button>
+            </md-list>
+          </template>
+          <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>
 </template>
 
 <script>
 // @ is an alias to /src
-import { mapState, mapActions } from 'vuex';
-import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
-import { syncLocal, syncCloud } from '@/axios/api.js';
-import { lang } from '@/utils/language.js';
-import { setHtmlFontSize } from '@/utils/px2rem.js';
+import { mapState, mapActions } from "vuex";
+import {
+  encrypt,
+  decrypt,
+  encryptMainCode,
+  decryptMainCode,
+} from "@/utils/aes.js";
+import { syncLocal, syncCloud } from "@/axios/api.js";
+import { lang } from "@/utils/language.js";
+import { setHtmlFontSize } from "@/utils/px2rem.js";
 
 export default {
-	name: 'Add',
-	data() {
-		return {
-			page_type: 'login', // login account
-			cid: '',
-			cid_verify: true,
-			cid_errmsg: '',
-			password: '',
-			password_verify: true,
-			sync_local_loading: false,
-			sync_cloud_loading: false,
-			login_loading: false,
-			show_snackbar: false,
-			snakebar_msg: '',
-			lang: '',
-			clientHeight: ''
-		};
-	},
-	computed: {
-		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings']),
-		update_time: function() {
-			return this.formatDateTime(new Date(parseInt(this.user_infos.update_time)));
-		}
-	},
-	methods: {
-		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
-		// 修改md-app的最小高度
-		changeFixed(clientHeight) {
-			//动态修改样式
-			// console.log(clientHeight);
-			// window.document.getElementsByClassName('md-content')[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';
-			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'))));
-			this.initLanguage();
-			// 判断页面类型
-			if(this.user_infos && this.user_infos.cid && this.user_infos.row_login_pwd) this.page_type = 'account'
-			else this.page_type = 'login'
-			console.log('当前用户状态为' + this.page_type);
-		},
+  name: "Add",
+  data() {
+    return {
+      page_type: "login", // login account
+      cid: "",
+      cid_verify: true,
+      cid_errmsg: "",
+      password: "",
+      password_verify: true,
+      sync_local_loading: false,
+      sync_cloud_loading: false,
+      login_loading: false,
+      show_snackbar: false,
+      snakebar_msg: "",
+      lang: "",
+      clientHeight: "",
+    };
+  },
+  computed: {
+    ...mapState(["user_infos", "row_data", "row_pwd", "settings"]),
+    update_time: function () {
+      return this.formatDateTime(
+        new Date(parseInt(this.user_infos.update_time))
+      );
+    },
+  },
+  methods: {
+    ...mapActions(["setUserInfo", "setRowData", "setRowPwd"]),
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      // window.document.getElementsByClassName('md-content')[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";
+      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"))
+        )
+      );
+      this.initLanguage();
+      // 判断页面类型
+      if (
+        this.user_infos &&
+        this.user_infos.cid &&
+        this.user_infos.row_login_pwd
+      )
+        this.page_type = "account";
+      else this.page_type = "login";
+      console.log("当前用户状态为" + this.page_type);
+    },
 
-		// 配置语言
-		initLanguage() {
-			if (this.settings.is_chinese) {
-				this.lang = lang().account.CHS;
-			} else {
-				this.lang = lang().account.EN;
-			}
-			console.log('语言配置完成');
-		},
+    // 配置语言
+    initLanguage() {
+      if (this.settings.is_chinese) {
+        this.lang = lang().account.CHS;
+      } else {
+        this.lang = lang().account.EN;
+      }
+      console.log("语言配置完成");
+    },
 
-		//返回上一页
-		back() {
-			this.$router.go(-1);
-		},
+    //返回上一页
+    back() {
+      this.$router.go(-1);
+    },
 
-		// 强制返回Home
-		turnToHome(msg) {
-			console.log(msg);
-			this.$router.replace('/');
-		},
+    // 强制返回Home
+    turnToHome(msg) {
+      console.log(msg);
+      this.$router.replace("/");
+    },
 
-		// 点击上传
-		judgeLogin() {
-			// 设置flag
-			let can_continue = true;
+    // 点击上传
+    judgeLogin() {
+      // 设置flag
+      let can_continue = true;
 
-			// 处理mail_addr
-			if (!(this.cid = this.cid.trim())) {
-				can_continue = false;
-				this.cid_verify = false;
-				this.cid_errmsg = this.lang.cid_errmsg[0];
-			}
-			// 处理password
-			if (!(this.password = this.password.trim())) {
-				can_continue = false;
-				this.password_verify = false;
-			}
-			// 根据flag判断是否提交
-			if (can_continue) this.startLogin();
-		},
+      // 处理mail_addr
+      if (!(this.cid = this.cid.trim())) {
+        can_continue = false;
+        this.cid_verify = false;
+        this.cid_errmsg = this.lang.cid_errmsg[0];
+      }
+      // 处理password
+      if (!(this.password = this.password.trim())) {
+        can_continue = false;
+        this.password_verify = false;
+      }
+      // 根据flag判断是否提交
+      if (can_continue) this.startLogin();
+    },
 
-		// 开始上传信息
-		startLogin() {
-			this.login_loading = true;
-			let data = {
-				cid: this.cid,
-				pwd: this.password,
-			};
-			syncLocal(data)
-				.then(res => {
-					// console.log(res.data)
-					this.manageLoginRes(res.data);
-				})
-				.catch(err => {
-					console.log(err);
-					this.login_loading = false;
-					if(!err.response){
-						this.snakebar_msg = this.lang.snakebar_msg[0];
-					} else if(err.response.status == 512) {
-						this.snakebar_msg = this.lang.snakebar_msg[1];
-					} else if(err.response.status == 510) {
-						this.snakebar_msg = this.lang.snakebar_msg[2];
-					} else {
-						this.snakebar_msg = this.lang.snakebar_msg[3] + err.response.status;
-					}
-					this.show_snackbar = true;
-				});
-		},
+    // 开始上传信息
+    startLogin() {
+      this.login_loading = true;
+      let data = {
+        cid: this.cid,
+        pwd: this.password,
+      };
+      syncLocal(data)
+        .then((res) => {
+          // console.log(res.data)
+          this.manageLoginRes(res.data);
+        })
+        .catch((err) => {
+          console.log(err);
+          this.login_loading = false;
+          if (!err.response) {
+            this.snakebar_msg = this.lang.snakebar_msg[0];
+          } else if (err.response.status == 512) {
+            this.snakebar_msg = this.lang.snakebar_msg[1];
+          } else if (err.response.status == 510) {
+            this.snakebar_msg = this.lang.snakebar_msg[2];
+          } else {
+            this.snakebar_msg = this.lang.snakebar_msg[3] + err.response.status;
+          }
+          this.show_snackbar = true;
+        });
+    },
 
-		// 处理登录后端返回的信息
-		manageLoginRes(data) {
-			// 登录成功
-			let user_infos = {
-				...this.user_infos,
-				cid: this.cid,
-				row_login_pwd: encryptMainCode(this.password),
-				user_name: data.username,
-				update_time: data.modified,
-				cloud_drivce: this.settings.is_chinese ? '暂无' : 'unknown'
-			};
-			this.setUserInfo([user_infos, this]);
-			console.log('正常用户登录，用户信息覆写完成');
-			this.snakebar_msg = this.lang.snakebar_msg[4];
-			this.show_snackbar = true;
-			this.page_type = 'account';
-			this.login_loading = false;
-		},
+    // 处理登录后端返回的信息
+    manageLoginRes(data) {
+      // 登录成功
+      let user_infos = {
+        ...this.user_infos,
+        cid: this.cid,
+        row_login_pwd: encryptMainCode(this.password),
+        user_name: data.username,
+        update_time: data.modified,
+        cloud_drivce: this.settings.is_chinese ? "暂无" : "unknown",
+      };
+      this.setUserInfo([user_infos, this]);
+      console.log("正常用户登录，用户信息覆写完成");
+      this.snakebar_msg = this.lang.snakebar_msg[4];
+      this.show_snackbar = true;
+      this.page_type = "account";
+      this.login_loading = false;
+    },
 
-		// 处理时间
-		formatDateTime(inputTime) {
-			var date = new Date(inputTime);
-			var y = date.getFullYear();
-			var m = date.getMonth() + 1;
-			m = m < 10 ? '0' + m : m;
-			var d = date.getDate();
-			d = d < 10 ? '0' + d : d;
-			var h = date.getHours();
-			h = h < 10 ? '0' + h : h;
-			var minute = date.getMinutes();
-			var second = date.getSeconds();
-			minute = minute < 10 ? '0' + minute : minute;
-			second = second < 10 ? '0' + second : second;
-			return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
-			// return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
-			// return y + "-" + m + "-" + d;
-		},
+    // 处理时间
+    formatDateTime(inputTime) {
+      var date = new Date(inputTime);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var minute = date.getMinutes();
+      var second = date.getSeconds();
+      minute = minute < 10 ? "0" + minute : minute;
+      second = second < 10 ? "0" + second : second;
+      return y + "-" + m + "-" + d + " " + h + ":" + minute;
+      // return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
+      // return y + "-" + m + "-" + d;
+    },
 
-		// 更新本地密码本
-		syncLocalStart() {
-			this.sync_local_loading = true;
-			let data = {
-				cid: this.user_infos.cid,
-				pwd: decryptMainCode(this.user_infos.row_login_pwd)
-			};
-			syncLocal(data)
-				.then(res => {
-					let data = res.data
-					// 获取成功
-					let content = ''
-					try{
-						content = JSON.parse(data.content)
-						if(typeof content == 'string') throw new Error()
-						if(!content || !content.codebook){
-							// 无数据自动初始化
-							content = {
-								codebook: '',
-								drivce: content.drivce ? content.drivce : (this.settings.is_chinese ? '暂无' : 'unknown')
-							}
-						}
-						if(content.drivce && content.drivce != '暂无' && content.drivce != 'unknown') content.drivce = decodeURIComponent(content.drivce)
-						else content.drivce = this.settings.is_chinese ? '暂无' : 'unknown'
-						this.setRowData([content.codebook, this]);
-						console.log('数据获取成功，密码本覆写成功');
-						let user_infos = this.user_infos;
-						user_infos.update_time = data.modified - 1000 * 60 * 4;
-						user_infos.user_name = data.username;
-						user_infos.cloud_drivce = content.drivce
-						this.setUserInfo([user_infos, this]);
-						console.log('数据获取成功，用户信息覆写成功');
-						this.snakebar_msg = this.lang.snakebar_msg[6];
-						this.show_snackbar = true;
-					} catch(e) {
-						console.log(e)
-						console.log('数据获取成功，内容有误')
-						this.snakebar_msg = this.lang.snakebar_msg[5];
-						this.show_snackbar = true;
-					} finally {
-						setTimeout(
-							function() {
-								this.sync_local_loading = false;
-							}.bind(this),
-							1000
-						);
-					}					
-				})
-				.catch(err => {
-					console.log(err);
-					this.sync_local_loading = false;
-					if(!err.response){
-						this.snakebar_msg = this.lang.snakebar_msg[0];
-					} else if(err.response.status == 512) {
-						this.snakebar_msg = this.lang.snakebar_msg[1];
-					} else if(err.response.status == 510) {
-						this.snakebar_msg = this.lang.snakebar_msg[2];
-					} else {
-						this.snakebar_msg = this.lang.snakebar_msg[3] + err.response.status;
-					}
-					this.show_snackbar = true;
-				});
-		},
+    // 更新本地密码本
+    syncLocalStart() {
+      this.sync_local_loading = true;
+      let data = {
+        cid: this.user_infos.cid,
+        pwd: decryptMainCode(this.user_infos.row_login_pwd),
+      };
+      syncLocal(data)
+        .then((res) => {
+          let data = res.data;
+          // 获取成功
+          let content = "";
+          try {
+            content = JSON.parse(data.content);
+            if (typeof content == "string") throw new Error();
+            if (!content || !content.codebook) {
+              // 无数据自动初始化
+              content = {
+                codebook: "",
+                drivce: content.drivce
+                  ? content.drivce
+                  : this.settings.is_chinese
+                  ? "暂无"
+                  : "unknown",
+              };
+            }
+            if (
+              content.drivce &&
+              content.drivce != "暂无" &&
+              content.drivce != "unknown"
+            )
+              content.drivce = decodeURIComponent(content.drivce);
+            else content.drivce = this.settings.is_chinese ? "暂无" : "unknown";
+            this.setRowData([content.codebook, this]);
+            console.log("数据获取成功，密码本覆写成功");
+            let user_infos = this.user_infos;
+            user_infos.update_time = data.modified - 1000 * 60 * 4;
+            user_infos.user_name = data.username;
+            user_infos.cloud_drivce = content.drivce;
+            this.setUserInfo([user_infos, this]);
+            console.log("数据获取成功，用户信息覆写成功");
+            this.snakebar_msg = this.lang.snakebar_msg[6];
+            this.show_snackbar = true;
+          } catch (e) {
+            console.log(e);
+            console.log("数据获取成功，内容有误");
+            this.snakebar_msg = this.lang.snakebar_msg[5];
+            this.show_snackbar = true;
+          } finally {
+            setTimeout(
+              function () {
+                this.sync_local_loading = false;
+              }.bind(this),
+              1000
+            );
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.sync_local_loading = false;
+          if (!err.response) {
+            this.snakebar_msg = this.lang.snakebar_msg[0];
+          } else if (err.response.status == 512) {
+            this.snakebar_msg = this.lang.snakebar_msg[1];
+          } else if (err.response.status == 510) {
+            this.snakebar_msg = this.lang.snakebar_msg[2];
+          } else {
+            this.snakebar_msg = this.lang.snakebar_msg[3] + err.response.status;
+          }
+          this.show_snackbar = true;
+        });
+    },
 
-		// 更新云端密码本
-		syncCloudStart() {
-			this.sync_cloud_loading = true;
-			let content = {
-				codebook: this.row_data,
-				drivce: encodeURIComponent(this.user_infos.drivce)
-			}
-			let data = {
-				cid: this.user_infos.cid,
-				pwd: decryptMainCode(this.user_infos.row_login_pwd),
-				content: JSON.stringify(content)
-			};
-			console.log(data)
-			syncCloud(data)
-				.then(res => {
-					let user_infos = this.user_infos;
-					user_infos.update_time = new Date().getTime();
-					user_infos.cloud_drivce = user_infos.drivce ? user_infos.drivce : (this.settings.is_chinese ? '暂无' : 'unknown')
-					this.setUserInfo([user_infos, this]);
-					console.log('数据上传成功，用户信息覆写成功');
-					this.snakebar_msg = this.lang.snakebar_msg[7];
-					this.show_snackbar = true;
-					setTimeout(
-						function() {
-							this.sync_cloud_loading = false;
-						}.bind(this),
-						1000
-					);
-				})
-				.catch(err => {
-					console.log(err);
-					this.sync_cloud_loading = false;
-					if(!err.response){
-						this.snakebar_msg = this.lang.snakebar_msg[0];
-					} else if(err.response.status == 512) {
-						this.snakebar_msg = this.lang.snakebar_msg[1];
-					} else if(err.response.status == 510) {
-						this.snakebar_msg = this.lang.snakebar_msg[2];
-					} else {
-						this.snakebar_msg = this.lang.snakebar_msg[3] + err.response.status;
-					}
-					this.show_snackbar = true;
-				});
-		},
+    // 更新云端密码本
+    syncCloudStart() {
+      this.sync_cloud_loading = true;
+      let content = {
+        codebook: this.row_data,
+        drivce: encodeURIComponent(this.user_infos.drivce),
+      };
+      let data = {
+        cid: this.user_infos.cid,
+        pwd: decryptMainCode(this.user_infos.row_login_pwd),
+        content: JSON.stringify(content),
+      };
+      console.log(data);
+      syncCloud(data)
+        .then((res) => {
+          let user_infos = this.user_infos;
+          user_infos.update_time = new Date().getTime();
+          user_infos.cloud_drivce = user_infos.drivce
+            ? user_infos.drivce
+            : this.settings.is_chinese
+            ? "暂无"
+            : "unknown";
+          this.setUserInfo([user_infos, this]);
+          console.log("数据上传成功，用户信息覆写成功");
+          this.snakebar_msg = this.lang.snakebar_msg[7];
+          this.show_snackbar = true;
+          setTimeout(
+            function () {
+              this.sync_cloud_loading = false;
+            }.bind(this),
+            1000
+          );
+        })
+        .catch((err) => {
+          console.log(err);
+          this.sync_cloud_loading = false;
+          if (!err.response) {
+            this.snakebar_msg = this.lang.snakebar_msg[0];
+          } else if (err.response.status == 512) {
+            this.snakebar_msg = this.lang.snakebar_msg[1];
+          } else if (err.response.status == 510) {
+            this.snakebar_msg = this.lang.snakebar_msg[2];
+          } else {
+            this.snakebar_msg = this.lang.snakebar_msg[3] + err.response.status;
+          }
+          this.show_snackbar = true;
+        });
+    },
 
-		// 退出登录
-		startLogout() {
-			// 初始化用户信息
-			let user_infos = {
-				...this.user_infos,
-				user_name: 'A Little Canary',
-				cid: 'Codebook',
-				row_login_pwd: '',
-				cloud_drivce: this.settings.is_chinese ? '暂无' : 'unknown',
-				update_time: new Date().getTime()
-			};
-			this.setUserInfo([user_infos, this]);
-			console.log('用户信息覆写完成');
-			this.back();
-		}
-	},
-	created() {
-		this.lang = lang().account.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);
-		},
-		// 如果 `cid` 发生改变，就会清空错误状态
-		cid: function() {
-			this.cid_verify = true;
-		},
-		// 如果 `password` 发生改变，就会清空错误状态
-		password: function() {
-			this.password_verify = true;
-		},
-		// 如果 `activation_code` 发生改变，就会清空错误状态
-		activation_code: function() {
-			this.activation_code_verify = true;
-		}
-	},
-	beforeDestroy() {},
-	components: {}
+    // 退出登录
+    startLogout() {
+      // 初始化用户信息
+      let user_infos = {
+        ...this.user_infos,
+        user_name: "A Little Canary",
+        cid: "Codebook",
+        row_login_pwd: "",
+        cloud_drivce: this.settings.is_chinese ? "暂无" : "unknown",
+        update_time: new Date().getTime(),
+      };
+      this.setUserInfo([user_infos, this]);
+      console.log("用户信息覆写完成");
+      this.back();
+    },
+  },
+  created() {
+    this.lang = lang().account.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);
+    },
+    // 如果 `cid` 发生改变，就会清空错误状态
+    cid: function () {
+      this.cid_verify = true;
+    },
+    // 如果 `password` 发生改变，就会清空错误状态
+    password: function () {
+      this.password_verify = true;
+    },
+    // 如果 `activation_code` 发生改变，就会清空错误状态
+    activation_code: function () {
+      this.activation_code_verify = true;
+    },
+  },
+  beforeDestroy() {},
+  components: {},
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-@import '../../style/main';
+@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;
-	}
-	.logo {
-		margin: 0 auto;
-		display: block;
-		height: 5rem;
-		width: 5rem;
-	}
-	.time-content {
-		text-align: right !important;
-	}
-	.loading-box {
-		position: absolute;
-		right: 50%;
-		top: 50%;
-		margin-right: -11px;
-		margin-top: -11px;
-	}
-	.toolbar {
-		position: fixed !important;
-	}
+  width: 100%;
+  min-height: 100%;
+  background: #fff;
+  .expand {
+    width: 100%;
+    margin: 0 !important;
+    min-height: 1.2rem !important;
+    margin-top: 0.5rem !important;
+  }
+  .logo {
+    margin: 0 auto;
+    display: block;
+    height: 5rem;
+    width: 5rem;
+  }
+  .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>
diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue
index 53d9779..291ea6f 100644
--- a/src/views/Add/Add.vue
+++ b/src/views/Add/Add.vue
@@ -115,7 +115,7 @@ import {
   encrypt,
   decrypt,
   encryptMainCode,
-  decryptMainCode
+  decryptMainCode,
 } from "@/utils/aes.js";
 import { lang } from "@/utils/language.js";
 import { setHtmlFontSize } from "@/utils/px2rem.js";
@@ -148,11 +148,11 @@ export default {
       // 密码长度
       code_length: 12,
       // 密码复制状态
-      copy_state: ""
+      copy_state: "",
     };
   },
   computed: {
-    ...mapState(["row_data", "row_pwd", "settings"])
+    ...mapState(["row_data", "row_pwd", "settings"]),
   },
   methods: {
     ...mapActions(["setRowData", "setRowPwd"]),
@@ -260,7 +260,7 @@ export default {
         user_name: this.user_name,
         password: this.password,
         node: this.node,
-        web_address: this.web_address
+        web_address: this.web_address,
       };
       // 解密主密码
       let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
@@ -292,7 +292,7 @@ export default {
         user_name: this.user_name,
         password: this.password,
         node: this.node,
-        web_address: this.web_address
+        web_address: this.web_address,
       };
       // 解密主密码
       let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
@@ -363,7 +363,7 @@ export default {
       setTimeout(() => {
         this.copy_state = "";
       }, 2000);
-    }
+    },
   },
   created() {
     this.lang = lang().add.CHS;
@@ -381,12 +381,12 @@ export default {
   },
   watch: {
     // 如果 `clientHeight` 发生改变，这个函数就会运行
-    clientHeight: function() {
+    clientHeight: function () {
       this.changeFixed(this.clientHeight);
-    }
+    },
   },
   beforeDestroy() {},
-  components: {}
+  components: {},
 };
 </script>
 
diff --git a/src/views/Detail/Detail.vue b/src/views/Detail/Detail.vue
index b7ad22e..217aae2 100644
--- a/src/views/Detail/Detail.vue
+++ b/src/views/Detail/Detail.vue
@@ -1,313 +1,359 @@
 <template>
-	<div class="detail">
-		<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">{{ content.title }}</h3>
-				</div>
-				<div class="md-toolbar-section-end">
-					<md-button class="md-icon-button" @click="turnToEdit()"><md-icon>edit</md-icon></md-button>
-					<md-button class="md-icon-button" @click="openDelDialog()"><md-icon>delete</md-icon></md-button>
-				</div>
-			</md-app-toolbar>
+  <div class="detail">
+    <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">{{ content.title }}</h3>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button" @click="turnToEdit()">
+            <md-icon>edit</md-icon>
+          </md-button>
+          <md-button class="md-icon-button" @click="openDelDialog()">
+            <md-icon>delete</md-icon>
+          </md-button>
+        </div>
+      </md-app-toolbar>
 
-			<md-app-content>
-				<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
-					<div ref="list_placeholder" style="height: 54px;"></div>
-					<md-list class="md-double-line">
-						<md-list-item>
-							<label class="md-caption">{{ lang.label[0] }}</label>
-							<div class="msg-box">
-								<p>{{ content.user_name }}</p>
-								<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
-									<icon class="icon" name="file_copy" :class="settings.is_dark_mode ? 'dark-theme-icon' : ''"></icon>
-								</md-button>
-							</div>
-						</md-list-item>
-						<md-list-item>
-							<label class="md-caption">{{ lang.label[1] }}</label>
-							<div class="msg-box">
-								<p class="password">{{ show_password ? content.password : doitPassword }}</p>
-								<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
-								<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
-									<icon class="icon" name="file_copy" :class="settings.is_dark_mode ? 'dark-theme-icon' : ''"></icon>
-								</md-button>
-							</div>
-						</md-list-item>
-						<md-list-item>
-							<label class="md-caption">{{ lang.label[2] }}</label>
-							<div class="msg-box">
-								<p>{{ content.web_address ? content.web_address : lang.empty_placeholder }}</p>
-								<md-button class="md-icon-button" @click="openUrl()"><md-icon>open_in_new</md-icon></md-button>
-							</div>
-						</md-list-item>
-						<md-list-item>
-							<label class="md-caption">{{ lang.label[3] }}</label>
-							<div class="msg-box">
-								<p class="node">{{ content.node ? content.node : lang.empty_placeholder }}</p>
-							</div>
-						</md-list-item>
-					</md-list>
-					<md-dialog-confirm
-						:md-active.sync="show_dialog"
-						:md-title="lang.dialog.title"
-						:md-content="lang.dialog.content"
-						:md-confirm-text="lang.dialog.confirm"
-						:md-cancel-text="lang.dialog.cancel"
-						@md-cancel="onCancel"
-						@md-confirm="delCode"
-					/>
-					<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>
+      <md-app-content>
+        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" style="height: 54px;"></div>
+          <md-list class="md-double-line">
+            <md-list-item>
+              <label class="md-caption">{{ lang.label[0] }}</label>
+              <div class="msg-box">
+                <p>{{ content.user_name }}</p>
+                <md-button
+                  class="md-icon-button"
+                  v-clipboard:copy="content.user_name"
+                  v-clipboard:success="onCopyUrl"
+                  v-clipboard:error="onErrorUrl"
+                >
+                  <icon
+                    class="icon"
+                    name="file_copy"
+                    :class="settings.is_dark_mode ? 'dark-theme-icon' : ''"
+                  ></icon>
+                </md-button>
+              </div>
+            </md-list-item>
+            <md-list-item>
+              <label class="md-caption">{{ lang.label[1] }}</label>
+              <div class="msg-box">
+                <p class="password">{{ show_password ? content.password : doitPassword }}</p>
+                <md-button class="md-icon-button" @click="show_password = !show_password">
+                  <md-icon>remove_red_eye</md-icon>
+                </md-button>
+                <md-button
+                  class="md-icon-button"
+                  v-clipboard:copy="content.password"
+                  v-clipboard:success="onCopyUrl"
+                  v-clipboard:error="onErrorUrl"
+                >
+                  <icon
+                    class="icon"
+                    name="file_copy"
+                    :class="settings.is_dark_mode ? 'dark-theme-icon' : ''"
+                  ></icon>
+                </md-button>
+              </div>
+            </md-list-item>
+            <md-list-item>
+              <label class="md-caption">{{ lang.label[2] }}</label>
+              <div class="msg-box">
+                <p>{{ content.web_address ? content.web_address : lang.empty_placeholder }}</p>
+                <md-button class="md-icon-button" @click="openUrl()">
+                  <md-icon>open_in_new</md-icon>
+                </md-button>
+              </div>
+            </md-list-item>
+            <md-list-item>
+              <label class="md-caption">{{ lang.label[3] }}</label>
+              <div class="msg-box">
+                <p class="node">{{ content.node ? content.node : lang.empty_placeholder }}</p>
+              </div>
+            </md-list-item>
+          </md-list>
+          <md-dialog-confirm
+            :md-active.sync="show_dialog"
+            :md-title="lang.dialog.title"
+            :md-content="lang.dialog.content"
+            :md-confirm-text="lang.dialog.confirm"
+            :md-cancel-text="lang.dialog.cancel"
+            @md-cancel="onCancel"
+            @md-confirm="delCode"
+          />
+          <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>
 </template>
 
 <script>
 // @ 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 { setHtmlFontSize } from '@/utils/px2rem.js';
+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";
 
 export default {
-	name: 'Add',
-	data() {
-		return {
-			show_snackbar: false,
-			snakebar_msg: '',
-			content: {},
-			show_password: false,
-			show_dialog: false,
-			lang: '',
-			clientHeight: ''
-		};
-	},
-	computed: {
-		...mapState(['row_data', 'row_pwd', 'settings']),
-		doitPassword() {
-			if (this.content.password) {
-				let doit = '';
-				for (let i = 0; i < this.content.password.length; i++) {
-					doit += '*';
-				}
-				return doit;
-			}
-		}
-	},
-	methods: {
-		...mapActions(['setRowData', 'setRowPwd']),
-		// 修改md-app的最小高度
-		changeFixed(clientHeight) {
-			//动态修改样式
-			// window.document.getElementsByClassName('md-app-content')[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';
-			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 (this.$route.params.code_content) {
-				// 判断有无用户密码
-				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();
-						this.content = this.$route.params.code_content;
-						this.addCount();
-					} else {
-						// 密码超时
-						this.turnToHome('密码超时');
-					}
-				} else {
-					// 没有密码
-					this.turnToHome('无密码');
-				}
-			} else {
-				// 无参跳转
-				this.turnToHome('无参跳转');
-			}
-		},
+  name: "Add",
+  data() {
+    return {
+      show_snackbar: false,
+      snakebar_msg: "",
+      content: {},
+      show_password: false,
+      show_dialog: false,
+      lang: "",
+      clientHeight: "",
+    };
+  },
+  computed: {
+    ...mapState(["row_data", "row_pwd", "settings"]),
+    doitPassword() {
+      if (this.content.password) {
+        let doit = "";
+        for (let i = 0; i < this.content.password.length; i++) {
+          doit += "*";
+        }
+        return doit;
+      }
+    },
+  },
+  methods: {
+    ...mapActions(["setRowData", "setRowPwd"]),
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // window.document.getElementsByClassName('md-app-content')[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";
+      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 (this.$route.params.code_content) {
+        // 判断有无用户密码
+        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();
+            this.content = this.$route.params.code_content;
+            this.addCount();
+          } else {
+            // 密码超时
+            this.turnToHome("密码超时");
+          }
+        } else {
+          // 没有密码
+          this.turnToHome("无密码");
+        }
+      } else {
+        // 无参跳转
+        this.turnToHome("无参跳转");
+      }
+    },
 
-		// 配置语言
-		initLanguage() {
-			if (this.settings.is_chinese) {
-				this.lang = lang().detail.CHS;
-			} else {
-				this.lang = lang().detail.EN;
-			}
-			console.log('语言配置完成');
-		},
+    // 配置语言
+    initLanguage() {
+      if (this.settings.is_chinese) {
+        this.lang = lang().detail.CHS;
+      } else {
+        this.lang = lang().detail.EN;
+      }
+      console.log("语言配置完成");
+    },
 
-		//返回上一页
-		back() {
-			this.$router.go(-1);
-		},
+    //返回上一页
+    back() {
+      this.$router.go(-1);
+    },
 
-		// 强制返回Home
-		turnToHome(msg) {
-			console.log(msg);
-			this.$router.replace('/');
-		},
+    // 强制返回Home
+    turnToHome(msg) {
+      console.log(msg);
+      this.$router.replace("/");
+    },
 
-		// 跳转至编辑
-		turnToEdit() {
-			this.$router.push({ name: 'Add', params: { modify_content: this.content } });
-		},
+    // 跳转至编辑
+    turnToEdit() {
+      this.$router.push({
+        name: "Add",
+        params: { modify_content: this.content },
+      });
+    },
 
-		// 复制成功
-		onCopyUrl(e) {
-			this.snakebar_msg = this.lang.copy.successful;
-			this.show_snackbar = true;
-		},
+    // 复制成功
+    onCopyUrl(e) {
+      this.snakebar_msg = this.lang.copy.successful;
+      this.show_snackbar = true;
+    },
 
-		// 复制失败
-		onErrorUrl(e) {
-			this.snakebar_msg = this.lang.copy.failed;
-			this.show_snackbar = true;
-		},
+    // 复制失败
+    onErrorUrl(e) {
+      this.snakebar_msg = this.lang.copy.failed;
+      this.show_snackbar = true;
+    },
 
-		// 打开链接
-		openUrl() {
-			if (this.content.web_address) {
-				window.open(this.content.web_address);
-			} else {
-				this.snakebar_msg = this.lang.snakebar_msg_empty;
-				this.show_snackbar = true;
-			}
-		},
-		// 增加点击
-		addCount() {
-			// 解密主密码
-			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-			// 解密密码本
-			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
-			// json化
-			let data_list = JSON.parse(data_decrypt);
-			// 遍历所有密码
-			for (let i in data_list) {
-				// 找到该密码
-				if (data_list[i].id == this.content.id) {
-					// 覆写
-					data_list[i].open_count++;
-				}
-			}
-			let data_list_aes = encrypt(main_code_decrpt, data_list);
-			this.setRowData([data_list_aes, this]);
-			console.log('新加密信息覆写成功,增加点击完成');
-		},
+    // 打开链接
+    openUrl() {
+      if (this.content.web_address) {
+        window.open(this.content.web_address);
+      } else {
+        this.snakebar_msg = this.lang.snakebar_msg_empty;
+        this.show_snackbar = true;
+      }
+    },
+    // 增加点击
+    addCount() {
+      // 解密主密码
+      let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+      // 解密密码本
+      let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+      // json化
+      let data_list = JSON.parse(data_decrypt);
+      // 遍历所有密码
+      for (let i in data_list) {
+        // 找到该密码
+        if (data_list[i].id == this.content.id) {
+          // 覆写
+          data_list[i].open_count++;
+        }
+      }
+      let data_list_aes = encrypt(main_code_decrpt, data_list);
+      this.setRowData([data_list_aes, this]);
+      console.log("新加密信息覆写成功,增加点击完成");
+    },
 
-		// 点击取消
-		onCancel() {},
+    // 点击取消
+    onCancel() {},
 
-		// 打开删除模态框
-		openDelDialog() {
-			this.show_dialog = true;
-		},
-		// 删除该密码
-		delCode() {
-			// 解密主密码
-			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-			// 解密密码本
-			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
-			// json化
-			let data_list = JSON.parse(data_decrypt);
-			// 暂存表
-			let data_cache = [];
-			// 遍历所有密码
-			for (let i in data_list) {
-				// 找到该密码
-				if (data_list[i].id != this.content.id) {
-					// 覆写
-					data_cache.push(data_list[i]);
-				}
-			}
-			let data_list_aes = encrypt(main_code_decrpt, data_cache);
-			this.setRowData([data_list_aes, this]);
-			console.log('新加密信息覆写成功,密码删除完成');
-			this.back();
-		}
-	},
-	created() {
-		this.lang = lang().detail.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: {}
+    // 打开删除模态框
+    openDelDialog() {
+      this.show_dialog = true;
+    },
+    // 删除该密码
+    delCode() {
+      // 解密主密码
+      let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+      // 解密密码本
+      let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+      // json化
+      let data_list = JSON.parse(data_decrypt);
+      // 暂存表
+      let data_cache = [];
+      // 遍历所有密码
+      for (let i in data_list) {
+        // 找到该密码
+        if (data_list[i].id != this.content.id) {
+          // 覆写
+          data_cache.push(data_list[i]);
+        }
+      }
+      let data_list_aes = encrypt(main_code_decrpt, data_cache);
+      this.setRowData([data_list_aes, this]);
+      console.log("新加密信息覆写成功,密码删除完成");
+      this.back();
+    },
+  },
+  created() {
+    this.lang = lang().detail.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';
+@import "../../style/main";
 .detail {
-	width: 100%;
-	min-height: 100%;
-	background: #fff;
-	.md-toolbar {
-		position: fixed !important;
-	}
-	.md-list-item-content {
-		position: relative;
-		label {
-			position: absolute;
-			top: 0.2rem;
-			left: 16px;
-		}
-		.msg-box {
-			margin-top: 0.5rem;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 100%;
-			border-bottom: 1px #eee solid;
-			p {
-				word-wrap: break-word;
-				word-break: normal;
-				white-space: normal;
-				width: 80%;
-				margin: 0.2rem 0;
-			}
-			.icon {
-				height: 24px;
-				width: 24px;
-				color: gray;
-			}
-			.dark-theme-icon {
-				color: #fff !important;
-			}
-			.node {
-				width: 100%;
-			}
-			.password {
-				width: 70%;
-			}
-		}
-	}
+  width: 100%;
+  min-height: 100%;
+  background: #fff;
+  .md-toolbar {
+    position: fixed !important;
+  }
+  .md-list-item-content {
+    position: relative;
+    label {
+      position: absolute;
+      top: 0.2rem;
+      left: 16px;
+    }
+    .msg-box {
+      margin-top: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      border-bottom: 1px #eee solid;
+      p {
+        word-wrap: break-word;
+        word-break: normal;
+        white-space: normal;
+        width: 80%;
+        margin: 0.2rem 0;
+      }
+      .icon {
+        height: 24px;
+        width: 24px;
+        color: gray;
+      }
+      .dark-theme-icon {
+        color: #fff !important;
+      }
+      .node {
+        width: 100%;
+      }
+      .password {
+        width: 70%;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/Feedback/Feedback.vue b/src/views/Feedback/Feedback.vue
index 5098259..7282327 100644
--- a/src/views/Feedback/Feedback.vue
+++ b/src/views/Feedback/Feedback.vue
@@ -86,7 +86,7 @@
 <script>
 // @ is an alias to /src
 import { mapState, mapActions } from "vuex";
-import { setHtmlFontSize } from  '@/utils/px2rem.js'
+import { setHtmlFontSize } from "@/utils/px2rem.js";
 
 export default {
   name: "Home",
@@ -97,35 +97,38 @@ export default {
       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:'测试用',
+          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([])
+    ...mapState([]),
   },
   methods: {
     ...mapActions([]),
@@ -133,7 +136,7 @@ export default {
       //动态修改样式
       // console.log(clientHeight);
       this.$refs.home.children[0].style.minHeight = clientHeight + "px";
-    }
+    },
   },
   created() {},
   mounted() {
@@ -147,12 +150,12 @@ export default {
   },
   watch: {
     // 如果 `clientHeight` 发生改变，这个函数就会运行
-    clientHeight: function() {
+    clientHeight: function () {
       this.changeFixed(this.clientHeight);
-    }
+    },
   },
   beforeDestroy() {},
-  components: {}
+  components: {},
 };
 </script>
 
@@ -178,7 +181,7 @@ export default {
     }
   }
   .code-card {
-    padding: .3rem 0;
+    padding: 0.3rem 0;
     border-bottom: 1px #eee solid;
   }
 }
diff --git a/src/views/Generator/Generator.vue b/src/views/Generator/Generator.vue
index 9d0dcf4..e5751d9 100644
--- a/src/views/Generator/Generator.vue
+++ b/src/views/Generator/Generator.vue
@@ -1,227 +1,252 @@
 <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>
+  <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>
-				<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
-					<div ref="list_placeholder" style="height: 54px;"></div>
-					<md-list>
-						<!-- 生成结果 -->
-						<md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
-						<md-list-item>
-							<p v-clipboard:copy="code_res" v-clipboard:success="onCopyCode" v-clipboard:error="onErrorCode">{{ code_res ? code_res : lang.code_res_empty }}</p>
-						</md-list-item>
-						<!-- settings -->
-						<md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
-						<!-- 长度设置 -->
-						<md-list-item>
-							<md-field>
-								<label for="expired_time">{{ lang.length_setter.label }}</label>
-								<md-select v-model="code_length" name="code_length" id="code_length">
-									<md-option value="6">{{ lang.length_setter.options[0] }}</md-option>
-									<md-option value="12">{{ lang.length_setter.options[1] }}</md-option>
-									<md-option value="18">{{ lang.length_setter.options[2] }}</md-option>
-									<md-option value="24">{{ lang.length_setter.options[3] }}</md-option>
-									<md-option value="32">{{ lang.length_setter.options[4] }}</md-option>
-								</md-select>
-							</md-field>
-						</md-list-item>
-						<!-- 大写字母 -->
-						<md-list-item>
-							<span class="md-list-item-text">{{ lang.settings[0] }}</span>
-							<md-switch v-model="have_upper" class="md-primary"></md-switch>
-						</md-list-item>
-						<!-- 小写字母 -->
-						<md-list-item>
-							<span class="md-list-item-text">{{ lang.settings[1] }}</span>
-							<md-switch v-model="have_lower" class="md-primary"></md-switch>
-						</md-list-item>
-						<!-- 数字 -->
-						<md-list-item>
-							<span class="md-list-item-text">{{ lang.settings[2] }}</span>
-							<md-switch v-model="have_num" class="md-primary"></md-switch>
-						</md-list-item>
-						<!-- 符号 -->
-						<md-list-item>
-							<span class="md-list-item-text">{{ lang.settings[3] }}</span>
-							<md-switch v-model="have_symbol" class="md-primary"></md-switch>
-						</md-list-item>
-						<md-button class="md-raised md-primary expand" @click="generateStart()">{{ lang.submit }}</md-button>
-					</md-list>
-					<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>
+      <md-app-content>
+        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" style="height: 54px;"></div>
+          <md-list>
+            <!-- 生成结果 -->
+            <md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
+            <md-list-item>
+              <p
+                v-clipboard:copy="code_res"
+                v-clipboard:success="onCopyCode"
+                v-clipboard:error="onErrorCode"
+              >{{ code_res ? code_res : lang.code_res_empty }}</p>
+            </md-list-item>
+            <!-- settings -->
+            <md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
+            <!-- 长度设置 -->
+            <md-list-item>
+              <md-field>
+                <label for="expired_time">{{ lang.length_setter.label }}</label>
+                <md-select v-model="code_length" name="code_length" id="code_length">
+                  <md-option value="6">{{ lang.length_setter.options[0] }}</md-option>
+                  <md-option value="12">{{ lang.length_setter.options[1] }}</md-option>
+                  <md-option value="18">{{ lang.length_setter.options[2] }}</md-option>
+                  <md-option value="24">{{ lang.length_setter.options[3] }}</md-option>
+                  <md-option value="32">{{ lang.length_setter.options[4] }}</md-option>
+                </md-select>
+              </md-field>
+            </md-list-item>
+            <!-- 大写字母 -->
+            <md-list-item>
+              <span class="md-list-item-text">{{ lang.settings[0] }}</span>
+              <md-switch v-model="have_upper" class="md-primary"></md-switch>
+            </md-list-item>
+            <!-- 小写字母 -->
+            <md-list-item>
+              <span class="md-list-item-text">{{ lang.settings[1] }}</span>
+              <md-switch v-model="have_lower" class="md-primary"></md-switch>
+            </md-list-item>
+            <!-- 数字 -->
+            <md-list-item>
+              <span class="md-list-item-text">{{ lang.settings[2] }}</span>
+              <md-switch v-model="have_num" class="md-primary"></md-switch>
+            </md-list-item>
+            <!-- 符号 -->
+            <md-list-item>
+              <span class="md-list-item-text">{{ lang.settings[3] }}</span>
+              <md-switch v-model="have_symbol" class="md-primary"></md-switch>
+            </md-list-item>
+            <md-button
+              class="md-raised md-primary expand"
+              @click="generateStart()"
+            >{{ lang.submit }}</md-button>
+          </md-list>
+          <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>
 </template>
 
 <script>
 // @ is an alias to /src
-import { mapState, mapActions } from 'vuex';
-import { lang } from '@/utils/language.js';
-import { generatePassword } from '@/utils/generator.js';
-import { setHtmlFontSize } from '@/utils/px2rem.js';
+import { mapState, mapActions } from "vuex";
+import { lang } from "@/utils/language.js";
+import { generatePassword } from "@/utils/generator.js";
+import { setHtmlFontSize } from "@/utils/px2rem.js";
 
 export default {
-	name: 'Add',
-	data() {
-		return {
-			// snackbar
-			show_snackbar: false,
-			snakebar_msg: '',
-			// 语言
-			lang: '',
-			// 页面高度
-			clientHeight: '',
-			// 大写字母
-			have_upper: true,
-			// 小写字母
-			have_lower: true,
-			// 数字
-			have_num: true,
-			// 符号
-			have_symbol: false,
-			// 密码长度
-			code_length: 12,
-			// 生成密码结果
-			code_res: ''
-		};
-	},
-	computed: {
-		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
-	},
-	methods: {
-		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
+  name: "Add",
+  data() {
+    return {
+      // snackbar
+      show_snackbar: false,
+      snakebar_msg: "",
+      // 语言
+      lang: "",
+      // 页面高度
+      clientHeight: "",
+      // 大写字母
+      have_upper: true,
+      // 小写字母
+      have_lower: true,
+      // 数字
+      have_num: true,
+      // 符号
+      have_symbol: false,
+      // 密码长度
+      code_length: 12,
+      // 生成密码结果
+      code_res: "",
+    };
+  },
+  computed: {
+    ...mapState(["user_infos", "row_data", "row_pwd", "settings"]),
+  },
+  methods: {
+    ...mapActions(["setUserInfo", "setRowData", "setRowPwd", "setSettings"]),
 
-		// 修改md-app的最小高度
-		changeFixed(clientHeight) {
-			//动态修改样式
-			// console.log(clientHeight);
-			// window.document.getElementsByClassName("md-content")[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';
-			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('无密码');
-			}
-		},
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      // window.document.getElementsByClassName("md-content")[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";
+      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().generator.CHS;
-			} else {
-				this.lang = lang().generator.EN;
-			}
-			console.log('语言配置完成');
-		},
+    // 配置语言
+    initLanguage() {
+      if (this.settings.is_chinese) {
+        this.lang = lang().generator.CHS;
+      } else {
+        this.lang = lang().generator.EN;
+      }
+      console.log("语言配置完成");
+    },
 
-		//返回上一页
-		back() {
-			this.$router.go(-1);
-		},
+    //返回上一页
+    back() {
+      this.$router.go(-1);
+    },
 
-		// 强制返回Home
-		turnToHome(msg) {
-			console.log(msg);
-			this.$router.replace('/');
-		},
+    // 强制返回Home
+    turnToHome(msg) {
+      console.log(msg);
+      this.$router.replace("/");
+    },
 
-		// 开始生成
-		generateStart() {
-			this.code_res = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol);
-			this.snakebar_msg = this.lang.generate_successful;
-			this.show_snackbar = true;
-		},
+    // 开始生成
+    generateStart() {
+      this.code_res = generatePassword(
+        this.code_length,
+        this.have_lower,
+        this.have_upper,
+        this.have_num,
+        this.have_symbol
+      );
+      this.snakebar_msg = this.lang.generate_successful;
+      this.show_snackbar = true;
+    },
 
-		// 复制成功
-		onCopyCode() {
-			this.snakebar_msg = this.lang.copy_successful;
-			this.show_snackbar = true;
-		},
+    // 复制成功
+    onCopyCode() {
+      this.snakebar_msg = this.lang.copy_successful;
+      this.show_snackbar = true;
+    },
 
-		// 复制失败
-		onErrorCode() {
-			this.snakebar_msg = this.lang.copy_failed;
-			this.show_snackbar = true;
-		}
-	},
-	created() {
-		this.lang = lang().generator.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: {}
+    // 复制失败
+    onErrorCode() {
+      this.snakebar_msg = this.lang.copy_failed;
+      this.show_snackbar = true;
+    },
+  },
+  created() {
+    this.lang = lang().generator.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';
+@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;
-	}
+  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>
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 665af4e..30fed49 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -1,43 +1,54 @@
 <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 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>
-						<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-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>
-				</div>
-			</md-app-toolbar>
+  <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 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>
+            <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-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>
+        </div>
+      </md-app-toolbar>
 
-			<md-app-drawer :md-active.sync="menuVisible">
-				<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.user_name }}</p>
-				</div>
+      <md-app-drawer :md-active.sync="menuVisible">
+        <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.user_name }}</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>
@@ -45,524 +56,588 @@
 					<md-list-item @click="turnToPage('/feedback')">
 						<md-icon>question_answer</md-icon>
 						<span class="md-list-item-text">Provide Feedback</span>
-					</md-list-item> -->
+          </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 @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('/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('/updatelog')">
+            <md-icon>event_note</md-icon>
+            <span class="md-list-item-text">{{ lang.drawer[3] }}</span>
+          </md-list-item>
 
-					<md-list-item @click="openQQ()">
-						<md-icon>question_answer</md-icon>
-						<span class="md-list-item-text">{{ lang.drawer[7] }}</span>
-					</md-list-item>
+          <md-list-item @click="openQQ()">
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">{{ lang.drawer[7] }}</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
+            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="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-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' }">
-					<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>
+      <md-app-content>
+        <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>
+          </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>
-						<md-divider></md-divider>
-						<div style="margin-bottom: .3rem;"></div>
-					</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>
+            <md-divider></md-divider>
+            <div style="margin-bottom: .3rem;"></div>
+          </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-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>
+          <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>
 </template>
 
 <script>
 // @ 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 { setHtmlFontSize } from '@/utils/px2rem.js';
+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";
 
 export default {
-	name: 'Home',
-	data() {
-		return {
-			// 显示抽屉开关
-			menuVisible: false,
-			// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
-			clientHeight: '',
-			// 显示的密码列表
-			show_list: [],
-			// 搜索暂存list
-			cache_list: [],
-			unlock: false,
-			show_snackbar: false,
-			snakebar_msg: '',
-			web_addr: 'https://canary.lacus.icu',
-			titles: [],
-			search_content: '',
-			search_start: false,
-			lang: '',
-			// vcnsole模块
-			lastClickTime: 0,
-			count: 0,
-			// 滚动记录
-			scrollHeight: 0,
-		};
-	},
-	computed: {
-		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings', 'home_state'])
-	},
-	methods: {
-		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings', 'setHomeState']),
+  name: "Home",
+  data() {
+    return {
+      // 显示抽屉开关
+      menuVisible: false,
+      // 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
+      clientHeight: "",
+      // 显示的密码列表
+      show_list: [],
+      // 搜索暂存list
+      cache_list: [],
+      unlock: false,
+      show_snackbar: false,
+      snakebar_msg: "",
+      web_addr: "https://canary.lacus.icu",
+      titles: [],
+      search_content: "",
+      search_start: false,
+      lang: "",
+      // vcnsole模块
+      lastClickTime: 0,
+      count: 0,
+      // 滚动记录
+      scrollHeight: 0,
+    };
+  },
+  computed: {
+    ...mapState([
+      "user_infos",
+      "row_data",
+      "row_pwd",
+      "settings",
+      "home_state",
+    ]),
+  },
+  methods: {
+    ...mapActions([
+      "setUserInfo",
+      "setRowData",
+      "setRowPwd",
+      "setSettings",
+      "setHomeState",
+    ]),
 
-		// 修改md-app的最小高度
-		changeFixed(clientHeight) {
-			//动态修改样式
-			// 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';
-			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
-		},
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // 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";
+      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'))));
-			// 初始化
-			this.initUserInfo();
-			this.initSettings();
-			// 判断有无用户密码
-			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.unlock = true;
-					// 判断有无密码本
-					if (this.row_data) {
-						// 解密主密码
-						let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-						let data_decrypt;
-						// 解密密码本
-						try {
-							data_decrypt = decrypt(main_code_decrpt, this.row_data);
-						} catch (e) {
-							// 不正确
-							// 跳转到解锁界面
-							console.log(e);
-							this.turnToUnlock('密码错误');
-							return;
-						}
-						// 刷新显示内容
-						let data_list = JSON.parse(data_decrypt);
-						this.show_list = data_list;
-						// 抽离title
-						this.separateTitle(data_list);
-						// 恢复原先状态
-						if(this.home_state) {
-							this.search_start = this.home_state.search_start
-							this.search_content = this.home_state.search_content
-							this.$nextTick(()=>{
-								this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
-									top: this.home_state.scrollHeight
-								});
-								console.log('原状态恢复完成')
-								this.setHomeState(['', this])
-								console.log('主页状态缓存删除完成')
-							})
-						}
-					} else {
-						// 空密码本
-						this.show_list = [];
-					}
-				} else {
-					// 跳转到解锁界面
-					this.turnToUnlock('密码超时');
-				}
-			} else {
-				// 没有密码，跳转到解锁界面创建密码
-				this.turnToUnlock('无密码');
-			}
-			console.log(this.show_list.length != 0 ? '密码本存在' : '空密码本');
-			console.log(this.unlock ? '已解锁' : '未解锁');
-		},
+    // 初始化
+    init() {
+      // 刷新vuex
+      this.$store.replaceState(
+        Object.assign(
+          this.$store.state,
+          JSON.parse(localStorage.getItem("storeState"))
+        )
+      );
+      // 初始化
+      this.initUserInfo();
+      this.initSettings();
+      // 判断有无用户密码
+      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.unlock = true;
+          // 判断有无密码本
+          if (this.row_data) {
+            // 解密主密码
+            let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+            let data_decrypt;
+            let data_list;
+            // 解密密码本
+            try {
+              data_decrypt = decrypt(main_code_decrpt, this.row_data);
+              // 刷新显示内容
+              data_list = JSON.parse(data_decrypt);
+            } catch (e) {
+              // 不正确
+              // 跳转到解锁界面
+              console.log(e);
+              this.turnToUnlock("密码错误");
+              return;
+            }
+            this.show_list = data_list;
+            // 抽离title
+            this.separateTitle(data_list);
+            // 恢复原先状态
+            if (this.home_state) {
+              this.search_start = this.home_state.search_start;
+              this.search_content = this.home_state.search_content;
+              this.$nextTick(() => {
+                this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
+                  top: this.home_state.scrollHeight,
+                });
+                console.log("原状态恢复完成");
+                this.setHomeState(["", this]);
+                console.log("主页状态缓存删除完成");
+              });
+            }
+          } else {
+            // 空密码本
+            this.show_list = [];
+          }
+        } else {
+          // 跳转到解锁界面
+          this.turnToUnlock("密码超时");
+        }
+      } else {
+        // 没有密码，跳转到解锁界面创建密码
+        this.turnToUnlock("无密码");
+      }
+      console.log(this.show_list.length != 0 ? "密码本存在" : "空密码本");
+      console.log(this.unlock ? "已解锁" : "未解锁");
+    },
 
-		// 初始化用户信息
-		initUserInfo() {
-			if (Object.keys(this.user_infos).length == 0) {
-				// 初始化用户信息
-				let user_infos = {
-					user_name: 'A Little Canary',
-					cid: 'Codebook',
-					row_login_pwd: '',
-					drivce: '',
-					cloud_drivce: this.settings.is_chinese ? '暂无' : 'unknown',
-					update_time: new Date().getTime()
-				};
-				this.setUserInfo([user_infos, this]);
-				console.log('用户信息覆写完成');
-			}
-			console.log('用户信息初始化完成');
-		},
+    // 初始化用户信息
+    initUserInfo() {
+      if (Object.keys(this.user_infos).length == 0) {
+        // 初始化用户信息
+        let user_infos = {
+          user_name: "A Little Canary",
+          cid: "Codebook",
+          row_login_pwd: "",
+          drivce: "",
+          cloud_drivce: this.settings.is_chinese ? "暂无" : "unknown",
+          update_time: new Date().getTime(),
+        };
+        this.setUserInfo([user_infos, this]);
+        console.log("用户信息覆写完成");
+      }
+      console.log("用户信息初始化完成");
+    },
 
-		// 初始化配置信息
-		initSettings() {
-			if (Object.keys(this.settings).length == 0) {
-				// 初始化配置信息
-				let settings = {
-					is_chinese: true,
-					is_dark_mode: false,
-					expired_time: 300000 // 5分钟
-				};
-				this.setSettings([settings, this]);
-				console.log('配置信息覆写完成');
-			}
+    // 初始化配置信息
+    initSettings() {
+      if (Object.keys(this.settings).length == 0) {
+        // 初始化配置信息
+        let settings = {
+          is_chinese: true,
+          is_dark_mode: false,
+          expired_time: 300000, // 5分钟
+        };
+        this.setSettings([settings, this]);
+        console.log("配置信息覆写完成");
+      }
 
-			if (this.settings.is_chinese) {
-				this.lang = lang().home.CHS;
-			} else {
-				this.lang = lang().home.EN;
-			}
-			console.log('语言配置完成');
-			console.log('配置信息初始化完成');
-		},
+      if (this.settings.is_chinese) {
+        this.lang = lang().home.CHS;
+      } else {
+        this.lang = lang().home.EN;
+      }
+      console.log("语言配置完成");
+      console.log("配置信息初始化完成");
+    },
 
-		// 修改排序
-		changeSortType(type) {
-			// 没有内容拦截器
-			if (this.show_list.length == 0) {
-				console.log('修改排序无内容拦截');
-				return;
-			}
-			// 排序
-			if (type == 'Alphabetically') {
-				// 按首字母排序
-				this.show_list = this.show_list.sort((a, b) => a['title'].localeCompare(b['title']));
-			} else {
-				// 按使用频率排序
-				this.show_list = this.show_list.sort((a, b) => b['open_count'] - a['open_count']);
-			}
-		},
+    // 修改排序
+    changeSortType(type) {
+      // 没有内容拦截器
+      if (this.show_list.length == 0) {
+        console.log("修改排序无内容拦截");
+        return;
+      }
+      // 排序
+      if (type == "Alphabetically") {
+        // 按首字母排序
+        this.show_list = this.show_list.sort((a, b) =>
+          a["title"].localeCompare(b["title"])
+        );
+      } else {
+        // 按使用频率排序
+        this.show_list = this.show_list.sort(
+          (a, b) => b["open_count"] - a["open_count"]
+        );
+      }
+    },
 
-		// 跳转到解锁界面
-		turnToUnlock(type) {
-			this.setHomeState(['', this])
-			console.log('主页状态缓存删除完成')
-			console.log(type);
-			this.setRowPwd(['', this]);
-			if (type == '密码超时') this.$router.push({ name: 'Unlock', params: { msg: this.lang.unlock_msg.expired } });
-			if (type == '密码错误') this.$router.push({ name: 'Unlock', params: { msg: this.lang.unlock_msg.wrong } });
-			else this.$router.push('/unlock');
-		},
+    // 跳转到解锁界面
+    turnToUnlock(type) {
+      this.setHomeState(["", this]);
+      console.log("主页状态缓存删除完成");
+      console.log(type);
+      this.setRowPwd(["", this]);
+      if (type == "密码超时")
+        this.$router.push({
+          name: "Unlock",
+          params: { msg: this.lang.unlock_msg.expired },
+        });
+      if (type == "密码错误")
+        this.$router.push({
+          name: "Unlock",
+          params: { msg: this.lang.unlock_msg.wrong },
+        });
+      else this.$router.push("/unlock");
+    },
 
-		// 跳转到搜索界面
-		turnToSearch() {
-			// 没有内容拦截器
-			if (this.show_list.length == 0) {
-				console.log('点击搜索无内容拦截');
-				return;
-			}
-			this.search_start = !this.search_start;
-		},
+    // 跳转到搜索界面
+    turnToSearch() {
+      // 没有内容拦截器
+      if (this.show_list.length == 0) {
+        console.log("点击搜索无内容拦截");
+        return;
+      }
+      this.search_start = !this.search_start;
+    },
 
-		// 跳转到添加界面
-		turnToAdd() {
-			// 未解锁拦截器
-			if (!this.unlock) {
-				this.turnToUnlock('点击新增未解锁拦截');
-				return;
-			}
-			let home_state = {
-				search_start : this.search_start,
-				search_content: this.search_content,
-				scrollHeight: this.scrollHeight
-			}
-			this.setHomeState([home_state, this])
-			this.$router.push('/add');
-		},
+    // 跳转到添加界面
+    turnToAdd() {
+      // 未解锁拦截器
+      if (!this.unlock) {
+        this.turnToUnlock("点击新增未解锁拦截");
+        return;
+      }
+      let home_state = {
+        search_start: this.search_start,
+        search_content: this.search_content,
+        scrollHeight: this.scrollHeight,
+      };
+      this.setHomeState([home_state, this]);
+      this.$router.push("/add");
+    },
 
-		turnToDetail(content) {
-			let home_state = {
-				search_start : this.search_start,
-				search_content: this.search_content,
-				scrollHeight: this.scrollHeight
-			}
-			this.setHomeState([home_state, this])
-			this.$router.push({ name: 'Detail', params: { code_content: content } });
-		},
+    turnToDetail(content) {
+      let home_state = {
+        search_start: this.search_start,
+        search_content: this.search_content,
+        scrollHeight: this.scrollHeight,
+      };
+      this.setHomeState([home_state, this]);
+      this.$router.push({ name: "Detail", params: { code_content: content } });
+    },
 
-		// 跳转到某页面
-		turnToPage(url) {
-			let home_state = {
-				search_start : this.search_start,
-				search_content: this.search_content,
-				scrollHeight: this.scrollHeight
-			}
-			this.setHomeState([home_state, this])
-			this.$router.push(url);
-		},
+    // 跳转到某页面
+    turnToPage(url) {
+      let home_state = {
+        search_start: this.search_start,
+        search_content: this.search_content,
+        scrollHeight: this.scrollHeight,
+      };
+      this.setHomeState([home_state, this]);
+      this.$router.push(url);
+    },
 
-		// 复制成功
-		onCopyUrl(e) {
-			this.snakebar_msg = this.lang.copy.successful;
-			this.show_snackbar = true;
-		},
+    // 复制成功
+    onCopyUrl(e) {
+      this.snakebar_msg = this.lang.copy.successful;
+      this.show_snackbar = true;
+    },
 
-		// 复制失败
-		onErrorUrl(e) {
-			this.snakebar_msg = this.lang.copy.failed;
-			this.show_snackbar = true;
-		},
+    // 复制失败
+    onErrorUrl(e) {
+      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);
-			}
-			this.titles = title_list;
-			console.log('数据头部分离完成');
-		},
+    // 分离数据title
+    separateTitle(data_list) {
+      let title_list = [];
+      for (let i in data_list) {
+        title_list.push(data_list[i].title);
+      }
+      this.titles = title_list;
+      console.log("数据头部分离完成");
+    },
 
-		// 模糊搜索
-		fuzzySearch(cache_list) {
-			// 空内容拦截器，显示全部密码
-			if (!this.search_content.trim()) {
-				this.show_list = cache_list;
-				return;
-			}
-			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]);
-				}
-			}
-			this.show_list = data_list;
-			console.log('模糊搜索完成')
-		},
+    // 模糊搜索
+    fuzzySearch(cache_list) {
+      // 空内容拦截器，显示全部密码
+      if (!this.search_content.trim()) {
+        this.show_list = cache_list;
+        return;
+      }
+      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]);
+        }
+      }
+      this.show_list = data_list;
+      console.log("模糊搜索完成");
+    },
 
-		// 模糊搜索辅助轮
-		generReg(val) {
-			let head = '(.*)(';
-			let tail = ')(.*)';
-			let body = val.split('').join(')(.*)(');
-			return new RegExp(head + body + tail, 'i');
-		},
+    // 模糊搜索辅助轮
+    generReg(val) {
+      let head = "(.*)(";
+      let tail = ")(.*)";
+      let body = val.split("").join(")(.*)(");
+      return new RegExp(head + body + tail, "i");
+    },
 
-		// 下载apk
-		downloadApk() {
-			window.open('https://assets.lacus.site/canary/netdisk_canary.apk');
-		},
+    // 下载apk
+    downloadApk() {
+      window.open("https://assets.lacus.site/canary/netdisk_canary.apk");
+    },
 
-		// 一键回顶
-		scrollTop() {
-			this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
-				top: 0,
-				behavior: 'smooth'
-			});
-			console.log('一键回顶成功');
-		},
+    // 一键回顶
+    scrollTop() {
+      this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
+        top: 0,
+        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;
-			}
-		},
+    // 判断是否有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;
+      }
+    },
 
-		// 记录滚动高度
-		scroll(e) {
-			this.scrollHeight = this.$refs.list_placeholder.parentNode.parentNode.scrollTop
-		},
-		
-		openQQ() {
-			window.open('https://jq.qq.com/?_wv=1027&k=KIKWmqys')
-		}
-	},
-	created() {
-		this.lang = lang().home.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);
-		this.$refs.list_placeholder.parentNode.parentNode.addEventListener('scroll', this.scroll)
-	},
-	watch: {
-		// 如果 `clientHeight` 发生改变，这个函数就会运行
-		clientHeight: function() {
-			this.changeFixed(this.clientHeight);
-		},
-		// 如果 `search_start` 发生改变，这个函数就会运行
-		search_start: function() {
-			if (this.search_start) {
-				this.cache_list = JSON.parse(JSON.stringify(this.show_list));
-				console.log('搜索阵列展开，缓存设置完成');
-			} else {
-				this.search_content = ''
-				this.show_list = JSON.parse(JSON.stringify(this.cache_list));
-				this.cache_list = [];
-				console.log('搜索阵列关闭，缓存清空完成');
-			}
-		},
-		// 如果 `search_content` 发生改变，这个函数就会运行
-		search_content: function() {
-			// 确保只有在搜索阵列展开后才会进行搜索
-			if(this.search_start) {
-				this.fuzzySearch(this.cache_list);
-			}
-		}
-	},
-	beforeDestroy() {},
-	components: {}
+    // 记录滚动高度
+    scroll(e) {
+      this.scrollHeight = this.$refs.list_placeholder.parentNode.parentNode.scrollTop;
+    },
+
+    openQQ() {
+      window.open("https://jq.qq.com/?_wv=1027&k=KIKWmqys");
+    },
+  },
+  created() {
+    this.lang = lang().home.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);
+    this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
+      "scroll",
+      this.scroll
+    );
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function () {
+      this.changeFixed(this.clientHeight);
+    },
+    // 如果 `search_start` 发生改变，这个函数就会运行
+    search_start: function () {
+      if (this.search_start) {
+        this.cache_list = JSON.parse(JSON.stringify(this.show_list));
+        console.log("搜索阵列展开，缓存设置完成");
+      } else {
+        this.search_content = "";
+        this.show_list = JSON.parse(JSON.stringify(this.cache_list));
+        this.cache_list = [];
+        console.log("搜索阵列关闭，缓存清空完成");
+      }
+    },
+    // 如果 `search_content` 发生改变，这个函数就会运行
+    search_content: function () {
+      // 确保只有在搜索阵列展开后才会进行搜索
+      if (this.search_start) {
+        this.fuzzySearch(this.cache_list);
+      }
+    },
+  },
+  beforeDestroy() {},
+  components: {},
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-@import '../../style/main';
+@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;
-		position: relative;
-		.default-avatar {
-			color: #fff;
-			margin-bottom: 0.3rem;
-		}
-		.md-caption {
-			color: #fbfbfb;
-		}
-	}
-	.code-card {
-		p:first-of-type {
-			margin-top: 0.3rem;
-		}
-		p:last-of-type {
-			margin-bottom: 0.3rem;
-		}
-		// padding: 0.3rem 0;
-		// border-bottom: 1px #eee solid;
-	}
-	.md-toolbar {
-		position: fixed;
-		top: 0;
-	}
-	.md-toolbar-row {
-		order: 12;
-		// margin-bottom: .3rem !important;
-	}
-	.md-toolbar-section-start,
-	.md-toolbar-section-end,
-	.md-toolbar-row {
-		min-height: 56px;
-	}
-	.md-toolbar-row {
-		margin-top: -10px;
-	}
-	.md-speed-dial.md-bottom-right {
-		position: fixed !important;
-	}
+  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;
+    position: relative;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    p:first-of-type {
+      margin-top: 0.3rem;
+    }
+    p:last-of-type {
+      margin-bottom: 0.3rem;
+    }
+    // padding: 0.3rem 0;
+    // border-bottom: 1px #eee solid;
+  }
+  .md-toolbar {
+    position: fixed;
+    top: 0;
+  }
+  .md-toolbar-row {
+    order: 12;
+    // margin-bottom: .3rem !important;
+  }
+  .md-toolbar-section-start,
+  .md-toolbar-section-end,
+  .md-toolbar-row {
+    min-height: 56px;
+  }
+  .md-toolbar-row {
+    margin-top: -10px;
+  }
+  .md-speed-dial.md-bottom-right {
+    position: fixed !important;
+  }
 }
 // Demo purposes only
 .md-drawer {
-	width: 240px;
-	max-width: calc(100vw - 125px);
+  width: 240px;
+  max-width: calc(100vw - 125px);
 }
 .md-app-scroller > div {
-	overflow-y: scroll !important;
+  overflow-y: scroll !important;
 }
 .face {
-	color: #fff !important;
+  color: #fff !important;
 }
 .page-title {
-	flex: 1;
-	min-height: 56px;
-	line-height: 56px;
+  flex: 1;
+  min-height: 56px;
+  line-height: 56px;
 }
 .sroll-top-area {
-	flex: 1;
-	min-height: 56px;
+  flex: 1;
+  min-height: 56px;
 }
 </style>
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index dfe3d33..a325fc2 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -1,422 +1,516 @@
 <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>
+  <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>
-				<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
-					<div ref="list_placeholder" style="height: 54px;"></div>
-					<md-list>
-						<md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
-						<md-list-item @click="openResetDialog('account')">
-							<md-icon>person</md-icon>
-							<span class="md-list-item-text">{{ lang.reset_list[0] }}</span>
-							<md-progress-spinner v-if="account_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
-						</md-list-item>
+      <md-app-content>
+        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" style="height: 54px;"></div>
+          <md-list>
+            <md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
+            <md-list-item @click="openResetDialog('account')">
+              <md-icon>person</md-icon>
+              <span class="md-list-item-text">{{ lang.reset_list[0] }}</span>
+              <md-progress-spinner
+                v-if="account_loading"
+                :md-diameter="22"
+                :md-stroke="3"
+                md-mode="indeterminate"
+              ></md-progress-spinner>
+            </md-list-item>
 
-						<md-list-item @click="openResetDialog('codebook')">
-							<md-icon>format_align_left</md-icon>
-							<span class="md-list-item-text">{{ lang.reset_list[1] }}</span>
-							<md-progress-spinner v-if="codebook_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
-						</md-list-item>
+            <md-list-item @click="openResetDialog('codebook')">
+              <md-icon>format_align_left</md-icon>
+              <span class="md-list-item-text">{{ lang.reset_list[1] }}</span>
+              <md-progress-spinner
+                v-if="codebook_loading"
+                :md-diameter="22"
+                :md-stroke="3"
+                md-mode="indeterminate"
+              ></md-progress-spinner>
+            </md-list-item>
 
-						<md-list-item @click="openResetDialog('application')">
-							<md-icon>layers</md-icon>
-							<span class="md-list-item-text">{{ lang.reset_list[2] }}</span>
-							<md-progress-spinner v-if="application_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
-						</md-list-item>
+            <md-list-item @click="openResetDialog('application')">
+              <md-icon>layers</md-icon>
+              <span class="md-list-item-text">{{ lang.reset_list[2] }}</span>
+              <md-progress-spinner
+                v-if="application_loading"
+                :md-diameter="22"
+                :md-stroke="3"
+                md-mode="indeterminate"
+              ></md-progress-spinner>
+            </md-list-item>
 
-						<md-list-item @click="open_dialog">
-							<md-icon>vpn_key</md-icon>
-							<span class="md-list-item-text">{{ lang.reset_list[3] }}</span>
-						</md-list-item>
+            <md-list-item @click="open_dialog">
+              <md-icon>vpn_key</md-icon>
+              <span class="md-list-item-text">{{ lang.reset_list[3] }}</span>
+            </md-list-item>
 
-						<md-divider></md-divider>
+            <md-divider></md-divider>
 
-						<md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
-						<md-list-item>
-							<md-icon>format_color_text</md-icon>
-							<span class="md-list-item-text">{{ lang.option_list[0] }}</span>
-							<md-switch v-model="is_chinese" class="md-primary"></md-switch>
-						</md-list-item>
-						<md-list-item>
-							<md-icon>brightness_6</md-icon>
-							<span class="md-list-item-text">{{ lang.option_list[1] }}</span>
-							<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
-						</md-list-item>
+            <md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
+            <md-list-item>
+              <md-icon>format_color_text</md-icon>
+              <span class="md-list-item-text">{{ lang.option_list[0] }}</span>
+              <md-switch v-model="is_chinese" class="md-primary"></md-switch>
+            </md-list-item>
+            <md-list-item>
+              <md-icon>brightness_6</md-icon>
+              <span class="md-list-item-text">{{ lang.option_list[1] }}</span>
+              <md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
+            </md-list-item>
 
-						<md-list-item>
-							<md-icon>update</md-icon>
-							<md-field>
-								<label for="expired_time">{{ lang.option_list[2] }}</label>
-								<md-select v-model="expired_time" name="expired_time" id="expired_time">
-									<md-option value="300000">5 min</md-option>
-									<md-option value="600000">10 min</md-option>
-									<md-option value="900000">15 min</md-option>
-									<md-option :value="Number.MAX_SAFE_INTEGER">{{ lang.expired_time }}</md-option>
-								</md-select>
-							</md-field>
-						</md-list-item>
-					</md-list>
+            <md-list-item>
+              <md-icon>update</md-icon>
+              <md-field>
+                <label for="expired_time">{{ lang.option_list[2] }}</label>
+                <md-select v-model="expired_time" name="expired_time" id="expired_time">
+                  <md-option value="300000">5 min</md-option>
+                  <md-option value="600000">10 min</md-option>
+                  <md-option value="900000">15 min</md-option>
+                  <md-option :value="Number.MAX_SAFE_INTEGER">{{ lang.expired_time }}</md-option>
+                </md-select>
+              </md-field>
+            </md-list-item>
 
-					<md-dialog-prompt
-						:md-active.sync="reset_main_pwd_active"
-						v-model="new_main_pwd"
-						:md-title="lang.dialog.title"
-						md-input-maxlength="30"
-						:md-input-placeholder="lang.dialog.placeholder"
-						:md-confirm-text="lang.dialog.confirm"
-						:md-cancel-text="lang.dialog.cancel"
-						@md-confirm="resetPwd"
-					/>
-					
-					<md-dialog-confirm
-						:md-active.sync="reset_confirm"
-						:md-title="lang.reset_dialog.title"
-						:md-content="lang.reset_dialog.content"
-						:md-confirm-text="lang.reset_dialog.confirm"
-						:md-cancel-text="lang.reset_dialog.cancel"
-						@md-cancel="reset_confirm = false"
-						@md-confirm="resetStart" 
-					/>
+            <md-divider></md-divider>
 
-					<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>
+            <md-subheader class="md-primary">{{ lang.subheader[2] }}</md-subheader>
+
+            <md-list-item style="list-style-type:none;" @click="reset_row_data_active = true">
+              <md-icon>call_merge</md-icon>
+              <span class="md-list-item-text">{{ lang.import_export_list[0] }}</span>
+            </md-list-item>
+
+            <md-list-item
+              style="list-style-type:none;"
+              v-clipboard:copy="copy_data"
+              v-clipboard:success="onCopyCodebook"
+              v-clipboard:error="onErrorCodebook"
+            >
+              <md-icon>call_split</md-icon>
+              <span class="md-list-item-text">{{ lang.import_export_list[1] }}</span>
+            </md-list-item>
+          </md-list>
+
+          <md-dialog-prompt
+            :md-active.sync="reset_row_data_active"
+            v-model="new_row_data"
+            :md-title="lang.import_dialog.title"
+            :md-input-placeholder="lang.import_dialog.placeholder"
+            :md-confirm-text="lang.import_dialog.confirm"
+            :md-cancel-text="lang.import_dialog.cancel"
+            @md-confirm="resetRowData"
+          />
+
+          <md-dialog-prompt
+            :md-active.sync="reset_main_pwd_active"
+            v-model="new_main_pwd"
+            :md-title="lang.dialog.title"
+            md-input-maxlength="30"
+            :md-input-placeholder="lang.dialog.placeholder"
+            :md-confirm-text="lang.dialog.confirm"
+            :md-cancel-text="lang.dialog.cancel"
+            @md-confirm="resetPwd"
+          />
+
+          <md-dialog-confirm
+            :md-active.sync="reset_confirm"
+            :md-title="lang.reset_dialog.title"
+            :md-content="lang.reset_dialog.content"
+            :md-confirm-text="lang.reset_dialog.confirm"
+            :md-cancel-text="lang.reset_dialog.cancel"
+            @md-cancel="reset_confirm = false"
+            @md-confirm="resetStart"
+          />
+
+          <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>
 </template>
 
 <script>
 // @ is an alias to /src
-import { mapState, mapActions } from 'vuex';
-import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
-import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
-import { lang } from '@/utils/language.js';
-import { setHtmlFontSize } from '@/utils/px2rem.js';
+import { mapState, mapActions } from "vuex";
+import {
+  encrypt,
+  decrypt,
+  encryptMainCode,
+  decryptMainCode,
+} from "@/utils/aes.js";
+import { login, activation, syncLocal, syncCloud } from "@/axios/api.js";
+import { lang } from "@/utils/language.js";
+import { setHtmlFontSize } from "@/utils/px2rem.js";
 
 export default {
-	name: 'Add',
-	data() {
-		return {
-			// 重置loading
-			account_loading: false,
-			codebook_loading: false,
-			application_loading: false,
-			reset_main_pwd_active: false,
-			new_main_pwd: '',
-			reset_active: false,
-			// 设置状态
-			is_chinese: false,
-			is_dark_mode: false,
-			// 过期时间 300000 5分钟
-			expired_time: 300000,
-			// snackbar
-			show_snackbar: false,
-			snakebar_msg: '',
-			// 初始化完成状态
-			has_init: false,
-			lang: '',
-			clientHeight: '',
-			// 重置确认
-			reset_confirm: false,
-			reset_type: ''
-		};
-	},
-	computed: {
-		...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
-	},
-	methods: {
-		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
+  name: "Add",
+  data() {
+    return {
+      // 重置loading
+      account_loading: false,
+      codebook_loading: false,
+      application_loading: false,
+      reset_main_pwd_active: false,
+      new_row_data: "",
+      reset_row_data_active: false,
+      new_main_pwd: "",
+      reset_active: false,
+      // 设置状态
+      is_chinese: false,
+      is_dark_mode: false,
+      // 过期时间 300000 5分钟
+      expired_time: 300000,
+      // snackbar
+      show_snackbar: false,
+      snakebar_msg: "",
+      // 初始化完成状态
+      has_init: false,
+      lang: "",
+      clientHeight: "",
+      // 重置确认
+      reset_confirm: false,
+      reset_type: "",
+    };
+  },
+  computed: {
+    ...mapState(["user_infos", "row_data", "row_pwd", "settings"]),
+    copy_data: function () {
+      if (!this.row_data) return "无内容";
+      return this.row_data;
+    },
+  },
+  methods: {
+    ...mapActions(["setUserInfo", "setRowData", "setRowPwd", "setSettings"]),
 
-		// 修改md-app的最小高度
-		changeFixed(clientHeight) {
-			//动态修改样式
-			// console.log(clientHeight);
-			// window.document.getElementsByClassName('md-content')[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';
-			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.is_chinese = this.settings.is_chinese;
-					this.is_dark_mode = this.settings.is_dark_mode;
-					this.expired_time = this.settings.expired_time;
-					this.initLanguage();
-					// 设置flag
-					setTimeout(
-						function() {
-							this.has_init = true;
-							console.log('本页信息覆写完成');
-						}.bind(this),
-						10
-					);
-				} else {
-					// 密码超时
-					this.turnToHome('密码超时');
-				}
-			} else {
-				// 没有密码
-				this.turnToHome('无密码');
-			}
-		},
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      // window.document.getElementsByClassName('md-content')[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";
+      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.is_chinese = this.settings.is_chinese;
+          this.is_dark_mode = this.settings.is_dark_mode;
+          this.expired_time = this.settings.expired_time;
+          this.initLanguage();
+          // 设置flag
+          setTimeout(
+            function () {
+              this.has_init = true;
+              console.log("本页信息覆写完成");
+            }.bind(this),
+            10
+          );
+        } else {
+          // 密码超时
+          this.turnToHome("密码超时");
+        }
+      } else {
+        // 没有密码
+        this.turnToHome("无密码");
+      }
+    },
 
-		// 配置语言
-		initLanguage() {
-			if (this.settings.is_chinese) {
-				this.lang = lang().settings.CHS;
-			} else {
-				this.lang = lang().settings.EN;
-			}
-			console.log('语言配置完成');
-		},
+    // 配置语言
+    initLanguage() {
+      if (this.settings.is_chinese) {
+        this.lang = lang().settings.CHS;
+      } else {
+        this.lang = lang().settings.EN;
+      }
+      console.log("语言配置完成");
+    },
 
-		//返回上一页
-		back() {
-			// 重置处理拦截器
-			if (this.reset_active) {
-				return;
-			}
-			this.$router.go(-1);
-		},
+    //返回上一页
+    back() {
+      // 重置处理拦截器
+      if (this.reset_active) {
+        return;
+      }
+      this.$router.go(-1);
+    },
 
-		// 强制返回Home
-		turnToHome(msg) {
-			console.log(msg);
-			this.$router.replace('/');
-		},
+    // 强制返回Home
+    turnToHome(msg) {
+      console.log(msg);
+      this.$router.replace("/");
+    },
 
-		// 重置账户
-		resetAccount(need_loading = true, need_reset_drvice = false) {
-			this.reset_active = true;
-			if (need_loading) {
-				this.account_loading = true;
-				setTimeout(
-					function() {
-						this.account_loading = false;
-						this.snakebar_msg = this.lang.snakebar_msg.reset_account;
-						this.show_snackbar = true;
-					}.bind(this),
-					1000
-				);
-			} 
-			// 初始化用户信息
-			let user_infos = {
-				user_name: 'A Little Canary',
-				cid: 'Codebook',
-				row_login_pwd: '',
-				drivce: need_reset_drvice ? '' : this.user_infos.drivce,
-				cloud_drivce: this.settings.is_chinese ? '暂无' : 'unknown',
-				update_time: new Date().getTime()
-			};
-			this.setUserInfo([user_infos, this]);
-			console.log('用户信息覆写完成');
-			this.reset_active = false;
-		},
+    // 重置账户
+    resetAccount(need_loading = true, need_reset_drvice = false) {
+      this.reset_active = true;
+      if (need_loading) {
+        this.account_loading = true;
+        setTimeout(
+          function () {
+            this.account_loading = false;
+            this.snakebar_msg = this.lang.snakebar_msg.reset_account;
+            this.show_snackbar = true;
+          }.bind(this),
+          1000
+        );
+      }
+      // 初始化用户信息
+      let user_infos = {
+        user_name: "A Little Canary",
+        cid: "Codebook",
+        row_login_pwd: "",
+        drivce: need_reset_drvice ? "" : this.user_infos.drivce,
+        cloud_drivce: this.settings.is_chinese ? "暂无" : "unknown",
+        update_time: new Date().getTime(),
+      };
+      this.setUserInfo([user_infos, this]);
+      console.log("用户信息覆写完成");
+      this.reset_active = false;
+    },
 
-		// 重置密码本
-		resetCodebook(need_loading = true) {
-			this.reset_active = true;
-			if (need_loading) {
-				this.codebook_loading = true;
-				setTimeout(
-					function() {
-						this.codebook_loading = false;
-						this.snakebar_msg = this.lang.snakebar_msg.reset_codebook;
-						this.show_snackbar = true;
-					}.bind(this),
-					1000
-				);
-			}
-			this.setRowData(['', this]);
-			console.log('密码本覆写完成');
-			this.reset_active = false;
-		},
+    // 重置密码本
+    resetCodebook(need_loading = true) {
+      this.reset_active = true;
+      if (need_loading) {
+        this.codebook_loading = true;
+        setTimeout(
+          function () {
+            this.codebook_loading = false;
+            this.snakebar_msg = this.lang.snakebar_msg.reset_codebook;
+            this.show_snackbar = true;
+          }.bind(this),
+          1000
+        );
+      }
+      this.setRowData(["", this]);
+      console.log("密码本覆写完成");
+      this.reset_active = false;
+    },
 
-		// 重置整个项目
-		resetApplication() {
-			this.application_loading = true;
-			this.reset_active = true;
-			this.resetAccount(false, true);
-			this.resetCodebook(false);
-			this.setRowPwd(['', this]);
-			console.log('主密码覆写完成');
-			let settings = {
-				is_chinese: true,
-				is_dark_mode: false,
-				expired_time: 300000
-			};
-			this.setSettings([settings, this]);
-			console.log('个性化设置覆写完成');
-			this.reset_active = false;
-			this.application_loading = false;
-			this.turnToHome('项目重置完成');
-		},
+    // 重置整个项目
+    resetApplication() {
+      this.application_loading = true;
+      this.reset_active = true;
+      this.resetAccount(false, true);
+      this.resetCodebook(false);
+      this.setRowPwd(["", this]);
+      console.log("主密码覆写完成");
+      let settings = {
+        is_chinese: true,
+        is_dark_mode: false,
+        expired_time: 300000,
+      };
+      this.setSettings([settings, this]);
+      console.log("个性化设置覆写完成");
+      this.reset_active = false;
+      this.application_loading = false;
+      this.turnToHome("项目重置完成");
+    },
 
-		//覆写个性化设置
-		resetSettings() {
-			let settings = {
-				is_chinese: this.is_chinese,
-				is_dark_mode: this.is_dark_mode,
-				expired_time: this.expired_time
-			};
-			this.setSettings([settings, this]);
-			console.log('个性化设置覆写完成');
-			if (this.settings.is_chinese) {
-				this.lang = lang().settings.CHS;
-			} else {
-				this.lang = lang().settings.EN;
-			}
-			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
-			console.log('语言配置完成');
-			this.snakebar_msg = this.lang.snakebar_msg.reset_settings;
-			this.show_snackbar = true;
-		},
+    //覆写个性化设置
+    resetSettings() {
+      let settings = {
+        is_chinese: this.is_chinese,
+        is_dark_mode: this.is_dark_mode,
+        expired_time: this.expired_time,
+      };
+      this.setSettings([settings, this]);
+      console.log("个性化设置覆写完成");
+      if (this.settings.is_chinese) {
+        this.lang = lang().settings.CHS;
+      } else {
+        this.lang = lang().settings.EN;
+      }
+      window.document.documentElement.setAttribute(
+        "data-theme",
+        this.settings.is_dark_mode ? "dark" : "light"
+      );
+      console.log("语言配置完成");
+      this.snakebar_msg = this.lang.snakebar_msg.reset_settings;
+      this.show_snackbar = true;
+    },
 
-		open_dialog() {
-			this.reset_main_pwd_active = true;
-		},
+    open_dialog() {
+      this.reset_main_pwd_active = true;
+    },
 
-		resetPwd(new_main_pwd) {
-			// 空内容拦截器
-			if (!new_main_pwd.trim()) {
-				this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_failed;
-				this.show_snackbar = true;
-			}
-			// 判断有无密码本
-			if (this.row_data) {
-				// 解密主密码
-				let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-				let data_decrypt;
-				// 解密密码本
-				try {
-					data_decrypt = decrypt(main_code_decrpt, this.row_data);
-				} catch (e) {
-					// 不正确
-					// 跳转到解锁界面
-					console.log(e);
-					this.turnToHome('密码错误');
-					return;
-				}
-				let data_list = JSON.parse(data_decrypt);
-				let data_list_aes = encrypt(new_main_pwd, data_list);
-				this.setRowData([data_list_aes, this]);
-				console.log('密码本密码修改成功，覆写完成')
-			}
-			let main_code_aes = encryptMainCode(new_main_pwd);
-			let row_pwd = {
-				main_code: main_code_aes,
-				create_time: new Date().getTime()
-			};
-			this.setRowPwd([row_pwd, this]);
-			this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_successful;
-			this.show_snackbar = true;
-		},
+    resetRowData(new_row_data) {
+      // 空内容拦截器
+      if (!new_row_data.trim()) {
+        this.snakebar_msg = this.lang.snakebar_msg.reset_row_data_failed;
+        this.show_snackbar = true;
+        return;
+      }
+      this.setRowData([new_row_data, this]);
+      this.snakebar_msg = this.lang.snakebar_msg.reset_row_data_successful;
+      this.show_snackbar = true;
+    },
 
-		// 打开重置的警告提醒
-		openResetDialog(type) {
-			this.reset_confirm = true;
-			this.reset_type = type
-		},
+    resetPwd(new_main_pwd) {
+      // 空内容拦截器
+      if (!new_main_pwd.trim()) {
+        this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_failed;
+        this.show_snackbar = true;
+      }
+      // 判断有无密码本
+      if (this.row_data) {
+        // 解密主密码
+        let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+        let data_decrypt;
+        // 解密密码本
+        try {
+          data_decrypt = decrypt(main_code_decrpt, this.row_data);
+        } catch (e) {
+          // 不正确
+          // 跳转到解锁界面
+          console.log(e);
+          this.turnToHome("密码错误");
+          return;
+        }
+        let data_list = JSON.parse(data_decrypt);
+        let data_list_aes = encrypt(new_main_pwd, data_list);
+        this.setRowData([data_list_aes, this]);
+        console.log("密码本密码修改成功，覆写完成");
+      }
+      let main_code_aes = encryptMainCode(new_main_pwd);
+      let row_pwd = {
+        main_code: main_code_aes,
+        create_time: new Date().getTime(),
+      };
+      this.setRowPwd([row_pwd, this]);
+      this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_successful;
+      this.show_snackbar = true;
+    },
 
-		// 提醒完成点击确定
-		resetStart() {
-			console.log('用户点击继续，重置开始')
-			switch(this.reset_type) {
-				case 'account':
-					this.resetAccount();
-					break
-				case 'codebook':
-					this.resetCodebook();
-					break
-				case 'application':
-					this.resetApplication();
-					break
-				default:
-					return
-			}
-			this.reset_type = ''
-		}
-	},
-	created() {
-		this.lang = lang().settings.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);
-		},
-		// 如果 `is_chinese` 发生改变，就会执行设置函数
-		is_chinese: function() {
-			if (this.has_init) this.resetSettings();
-		},
-		// 如果 `is_dark_mode` 发生改变，就会执行设置函数
-		is_dark_mode: function() {
-			if (this.has_init) this.resetSettings();
-		},
-		// 如果 `expired_time` 发生改变，就会执行设置函数
-		expired_time: function() {
-			if (this.has_init) this.resetSettings();
-		}
-	},
-	beforeDestroy() {},
-	components: {}
+    // 打开重置的警告提醒
+    openResetDialog(type) {
+      this.reset_confirm = true;
+      this.reset_type = type;
+    },
+
+    // 提醒完成点击确定
+    resetStart() {
+      console.log("用户点击继续，重置开始");
+      switch (this.reset_type) {
+        case "account":
+          this.resetAccount();
+          break;
+        case "codebook":
+          this.resetCodebook();
+          break;
+        case "application":
+          this.resetApplication();
+          break;
+        default:
+          return;
+      }
+      this.reset_type = "";
+    },
+
+    // 导出成功
+    onCopyCodebook(e) {
+      this.snakebar_msg = this.lang.copy.successful;
+      this.show_snackbar = true;
+    },
+
+    // 导出失败
+    onErrorCodebook(e) {
+      this.snakebar_msg = this.lang.copy.failed;
+      this.show_snackbar = true;
+    },
+  },
+  created() {
+    this.lang = lang().settings.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);
+    },
+    // 如果 `is_chinese` 发生改变，就会执行设置函数
+    is_chinese: function () {
+      if (this.has_init) this.resetSettings();
+    },
+    // 如果 `is_dark_mode` 发生改变，就会执行设置函数
+    is_dark_mode: function () {
+      if (this.has_init) this.resetSettings();
+    },
+    // 如果 `expired_time` 发生改变，就会执行设置函数
+    expired_time: function () {
+      if (this.has_init) this.resetSettings();
+    },
+  },
+  beforeDestroy() {},
+  components: {},
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-@import '../../style/main';
+@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;
-	}
+  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>
 <!-- 
diff --git a/src/views/Unlock/Unlock.vue b/src/views/Unlock/Unlock.vue
index ce7d8dd..a3d599a 100644
--- a/src/views/Unlock/Unlock.vue
+++ b/src/views/Unlock/Unlock.vue
@@ -1,253 +1,266 @@
 <template>
-	<div class="unlock" :class="settings.is_dark_mode ? 'dark-theme-unlock' : ''">
-		<!-- <md-toolbar class="md-primary">
+  <div class="unlock" :class="settings.is_dark_mode ? 'dark-theme-unlock' : ''">
+    <!-- <md-toolbar class="md-primary">
 			<h3 class="md-title" style="flex: 1">{{ is_create ? lang.title[0] : lang.title[1] }}</h3>
-		</md-toolbar> -->
+    </md-toolbar>-->
 
-		<icon class="logo" name="canary"></icon>
+    <icon class="logo" name="canary"></icon>
 
-		<p class="md-title center">{{ is_create ? lang.subheader[0] : lang.subheader[1] }}</p>
+    <p class="md-title center">{{ is_create ? lang.subheader[0] : lang.subheader[1] }}</p>
 
-		<md-field class="input-box" :class="messageClass">
-			<label>{{ is_create ? lang.pwd_label[0] : lang.pwd_label[1] }}</label>
-			<md-input v-model="pwd" type="password"></md-input>
-			<span class="md-error">{{ err_msg }}</span>
-		</md-field>
+    <md-field class="input-box" :class="messageClass">
+      <label>{{ is_create ? lang.pwd_label[0] : lang.pwd_label[1] }}</label>
+      <md-input v-model="pwd" type="password"></md-input>
+      <span class="md-error">{{ err_msg }}</span>
+    </md-field>
 
-		<md-field class="input-box" :class="messageClass" v-if="is_create">
-			<label>{{ lang.repeat_pwd }}</label>
-			<md-input v-model="repeat" type="password"></md-input>
-			<span class="md-error">{{ err_msg }}</span>
-		</md-field>
+    <md-field class="input-box" :class="messageClass" v-if="is_create">
+      <label>{{ lang.repeat_pwd }}</label>
+      <md-input v-model="repeat" type="password"></md-input>
+      <span class="md-error">{{ err_msg }}</span>
+    </md-field>
 
-		<md-field class="input-box" :class="drivceMessageClass" v-if="is_create">
-			<label>{{ lang.drivce_label }}</label>
-			<md-input v-model="drivce"></md-input>
-			<span class="md-error">{{ drivce_err_msg }}</span>
-		</md-field>
+    <md-field class="input-box" :class="drivceMessageClass" v-if="is_create">
+      <label>{{ lang.drivce_label }}</label>
+      <md-input v-model="drivce"></md-input>
+      <span class="md-error">{{ drivce_err_msg }}</span>
+    </md-field>
 
-		<md-button class="md-raised md-primary center" @click="judgePwd()">{{ lang.enter }}</md-button>
+    <md-button class="md-raised md-primary center" @click="judgePwd()">{{ lang.enter }}</md-button>
 
-		<p class="center tips">此密码本为长理专版，未开启同步密码将加密后存放本地，开启同步密码将加密后存放在您的长理网盘中，请放心使用      <span class="qq-link" @click="openQQ()">点我加入用户群</span></p>
+    <p class="center tips">
+      此密码本为长理专版，未开启同步密码将加密后存放本地，开启同步密码将加密后存放在您的长理网盘中，请放心使用
+      <span class="qq-link" @click="openQQ()">点我加入用户群</span>
+    </p>
 
-		<md-dialog-confirm
-			:md-active.sync="show_dialog"
-			:md-title="lang.dialog.title"
-			:md-content="lang.dialog.content"
-			:md-confirm-text="lang.dialog.confirm"
-			:md-cancel-text="lang.dialog.cancel"
-			@md-cancel="onCancel"
-			@md-confirm="submit"
-		/>
+    <md-dialog-confirm
+      :md-active.sync="show_dialog"
+      :md-title="lang.dialog.title"
+      :md-content="lang.dialog.content"
+      :md-confirm-text="lang.dialog.confirm"
+      :md-cancel-text="lang.dialog.cancel"
+      @md-cancel="onCancel"
+      @md-confirm="submit"
+    />
 
-		<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
-			<span>{{ snakebar_msg }}</span>
-		</md-snackbar>
-	</div>
+    <md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
+      <span>{{ snakebar_msg }}</span>
+    </md-snackbar>
+  </div>
 </template>
 
 <script>
 // @ 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 { mapState, mapActions } from "vuex";
+import {
+  encrypt,
+  decrypt,
+  encryptMainCode,
+  decryptMainCode,
+} from "@/utils/aes.js";
+import { lang } from "@/utils/language.js";
 
 export default {
-	name: 'Unlock',
-	data() {
-		return {
-			pwd: '',
-			repeat: '',
-			drivce: '',
-			is_err: false,
-			is_drivce_err: false,
-			err_msg: '',
-			drivce_err_msg:'',
-			show_dialog: false,
-			is_create: false,
-			show_snackbar: false,
-			snakebar_msg: '',
-			lang: ''
-		};
-	},
-	computed: {
-		...mapState(['row_data', 'settings', 'user_infos']),
-		messageClass() {
-			return {
-				'md-invalid': this.is_err
-			};
-		},
-		drivceMessageClass() {
-			return {
-				'md-invalid': this.is_drivce_err
-			}
-		}
-	},
-	methods: {
-		...mapActions(['setRowPwd', 'setUserInfo']),
+  name: "Unlock",
+  data() {
+    return {
+      pwd: "",
+      repeat: "",
+      drivce: "",
+      is_err: false,
+      is_drivce_err: false,
+      err_msg: "",
+      drivce_err_msg: "",
+      show_dialog: false,
+      is_create: false,
+      show_snackbar: false,
+      snakebar_msg: "",
+      lang: "",
+    };
+  },
+  computed: {
+    ...mapState(["row_data", "settings", "user_infos"]),
+    messageClass() {
+      return {
+        "md-invalid": this.is_err,
+      };
+    },
+    drivceMessageClass() {
+      return {
+        "md-invalid": this.is_drivce_err,
+      };
+    },
+  },
+  methods: {
+    ...mapActions(["setRowPwd", "setUserInfo"]),
 
-		// 初始化
-		init() {
-			// 刷新vuex
-			this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
-			this.initLanguage();
-			// 判断是创建密码还是输入密码
-			this.is_create = !this.row_data && !this.user_infos.drivce;
-		},
+    // 初始化
+    init() {
+      // 刷新vuex
+      this.$store.replaceState(
+        Object.assign(
+          this.$store.state,
+          JSON.parse(localStorage.getItem("storeState"))
+        )
+      );
+      this.initLanguage();
+      // 判断是创建密码还是输入密码
+      this.is_create = !this.row_data && !this.user_infos.drivce;
+    },
 
-		// 配置语言
-		initLanguage() {
-			if (this.settings.is_chinese) {
-				this.lang = lang().unlock.CHS;
-			} else {
-				this.lang = lang().unlock.EN;
-			}
-			console.log('语言配置完成');
-		},
+    // 配置语言
+    initLanguage() {
+      if (this.settings.is_chinese) {
+        this.lang = lang().unlock.CHS;
+      } else {
+        this.lang = lang().unlock.EN;
+      }
+      console.log("语言配置完成");
+    },
 
-		// 点击提交判断密码
-		judgePwd() {
-			// 空密码拦截器
-			if (this.pwd.trim().length == 0) {
-				this.is_err = true;
-				this.err_msg = this.lang.empty_pwd_error;
-				console.log('密码为空拦截');
-				return;
-			}
-			// 判断是否有密码本
-			if (!this.is_create) {
-				// 有密码本
-				// 解密密码本
-				let test_decode
-				try {
-					test_decode = decrypt(this.pwd, this.row_data);
-				} catch (e) {
-					// 错误
-					this.is_err = true;
-					this.err_msg = this.lang.wrong_pwd_error;
-					console.log('密码输入错误拦截');
-					return
-				}
-				// 正确,将密码加密放进locolstorage
-				this.submit();
-			} else {
-				if (this.drivce.trim().length == 0) {
-					this.is_drivce_err = true;
-					this.drivce_err_msg = this.lang.drivce_error;
-					console.log('设备名为空拦截');
-					return;
-				}
-				// 空密码本，不论输入什么都是对的，但是需要比较两个输入的是不是一样的
-				if (this.pwd == this.repeat) {
-					// 两次一致，弹窗警告不可更改
-					this.show_dialog = true;
-				} else {
-					// 两次不一致
-					this.is_err = true;
-					this.err_msg = this.lang.match_pwd_error;
-					console.log('密码两次输入不一致拦截');
-				}
-			}
-		},
+    // 点击提交判断密码
+    judgePwd() {
+      // 空密码拦截器
+      if (this.pwd.trim().length == 0) {
+        this.is_err = true;
+        this.err_msg = this.lang.empty_pwd_error;
+        console.log("密码为空拦截");
+        return;
+      }
+      // 判断是否有密码本
+      if (!this.is_create) {
+        // 有密码本
+        // 解密密码本
+        let test_decode;
+        try {
+          test_decode = decrypt(this.pwd, this.row_data);
+        } catch (e) {
+          // 错误
+          this.is_err = true;
+          this.err_msg = this.lang.wrong_pwd_error;
+          console.log("密码输入错误拦截");
+          return;
+        }
+        // 正确,将密码加密放进locolstorage
+        this.submit();
+      } else {
+        if (this.drivce.trim().length == 0) {
+          this.is_drivce_err = true;
+          this.drivce_err_msg = this.lang.drivce_error;
+          console.log("设备名为空拦截");
+          return;
+        }
+        // 空密码本，不论输入什么都是对的，但是需要比较两个输入的是不是一样的
+        if (this.pwd == this.repeat) {
+          // 两次一致，弹窗警告不可更改
+          this.show_dialog = true;
+        } else {
+          // 两次不一致
+          this.is_err = true;
+          this.err_msg = this.lang.match_pwd_error;
+          console.log("密码两次输入不一致拦截");
+        }
+      }
+    },
 
-		// 用户点击取消
-		onCancel() {
-			console.log('用户点击取消');
-		},
+    // 用户点击取消
+    onCancel() {
+      console.log("用户点击取消");
+    },
 
-		// 提交然后返回主页
-		submit() {
-			let main_code_aes = encryptMainCode(this.pwd);
-			let row_pwd = {
-				main_code: main_code_aes,
-				create_time: new Date().getTime()
-			};
-			let user_infos = this.user_infos
-			user_infos.drivce = this.drivce
-			this.setUserInfo([user_infos, this])
-			this.setRowPwd([row_pwd, this]);
-			console.log('主密码设置完成，返回Home');
-			this.$router.replace('/');
-		},
+    // 提交然后返回主页
+    submit() {
+      let main_code_aes = encryptMainCode(this.pwd);
+      let row_pwd = {
+        main_code: main_code_aes,
+        create_time: new Date().getTime(),
+      };
+      let user_infos = this.user_infos;
+      user_infos.drivce = this.drivce;
+      this.setUserInfo([user_infos, this]);
+      this.setRowPwd([row_pwd, this]);
+      console.log("主密码设置完成，返回Home");
+      this.$router.replace("/");
+    },
 
-		openQQ() {
-			window.open('https://jq.qq.com/?_wv=1027&k=KIKWmqys')
-		}
-	},
-	created() {
-		this.lang = lang().unlock.CHS;
-		console.log('临时语言系统加载完成');
-		this.init();
-	},
-	mounted() {
-		// 判断是否显示SnakeBar
-		if (this.$route.params.msg) {
-			// 密码过期
-			this.snakebar_msg = this.$route.params.msg;
-			this.show_snackbar = true;
-		}
-	},
-	watch: {
-		// 如果 `pwd` 发生改变，就会清空错误状态
-		pwd: function() {
-			this.is_err = false;
-			this.err_msg = '';
-		},
-		// 如果 `repeat` 发生改变，就会清空错误状态
-		repeat: function() {
-			this.is_err = false;
-			this.err_msg = '';
-		},
-		// 如果 `drivce` 发生改变，就会清空错误状态
-		drivce: function() {
-			this.is_drivce_err = false;
-			this.drivce_err_msg = ''
-		}
-	},
-	beforeDestroy() {},
-	components: {}
+    openQQ() {
+      window.open("https://jq.qq.com/?_wv=1027&k=KIKWmqys");
+    },
+  },
+  created() {
+    this.lang = lang().unlock.CHS;
+    console.log("临时语言系统加载完成");
+    this.init();
+  },
+  mounted() {
+    // 判断是否显示SnakeBar
+    if (this.$route.params.msg) {
+      // 密码过期
+      this.snakebar_msg = this.$route.params.msg;
+      this.show_snackbar = true;
+    }
+  },
+  watch: {
+    // 如果 `pwd` 发生改变，就会清空错误状态
+    pwd: function () {
+      this.is_err = false;
+      this.err_msg = "";
+    },
+    // 如果 `repeat` 发生改变，就会清空错误状态
+    repeat: function () {
+      this.is_err = false;
+      this.err_msg = "";
+    },
+    // 如果 `drivce` 发生改变，就会清空错误状态
+    drivce: function () {
+      this.is_drivce_err = false;
+      this.drivce_err_msg = "";
+    },
+  },
+  beforeDestroy() {},
+  components: {},
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-@import '../../style/main';
+@import "../../style/main";
 .unlock {
-	width: 100%;
-	min-height: 100%;
-	background: #fff;
-	.logo {
-		margin: 0 auto;
-		display: block;
-		height: 5rem;
-		width: 5rem;
-	}
-	.center {
-		margin: 0 auto;
-		text-align: center;
-		display: block;
-	}
-	.input-box {
-		width: 70%;
-		max-width: 350px;
-		margin: 0.5rem auto;
-	}
-	.md-raised {
-		margin-top: 1rem;
-	}
+  width: 100%;
+  min-height: 100%;
+  background: #fff;
+  .logo {
+    margin: 0 auto;
+    display: block;
+    height: 5rem;
+    width: 5rem;
+  }
+  .center {
+    margin: 0 auto;
+    text-align: center;
+    display: block;
+  }
+  .input-box {
+    width: 70%;
+    max-width: 350px;
+    margin: 0.5rem auto;
+  }
+  .md-raised {
+    margin-top: 1rem;
+  }
 }
 .dark-theme-unlock {
-	background: #424242;
-	.center {
-		color: #fff !important;
-	}
+  background: #424242;
+  .center {
+    color: #fff !important;
+  }
 }
 .tips {
-	font-size: .3rem;
-	max-width: 70%;
-	padding: 1rem 0;
-	color: #989898;
+  font-size: 0.3rem;
+  max-width: 70%;
+  padding: 1rem 0;
+  color: #989898;
 }
 .qq-link {
-	color: #448aff;
+  color: #448aff;
 }
 </style>
diff --git a/src/views/UpdateLog/UpdateLog.vue b/src/views/UpdateLog/UpdateLog.vue
index 71a930c..3e5aae7 100644
--- a/src/views/UpdateLog/UpdateLog.vue
+++ b/src/views/UpdateLog/UpdateLog.vue
@@ -1,149 +1,167 @@
 <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>
+  <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>
-				<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
-					<div ref="list_placeholder" 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>
-				</v-touch>
-			</md-app-content>
-		</md-app>
-	</div>
+      <md-app-content>
+        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" 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>
+        </v-touch>
+      </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';
+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';
-			this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
-			this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
-			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
-		},
+  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';
+      this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
+        clientHeight + "px";
+      this.$refs.list_placeholder.parentNode.style.minHeight =
+        clientHeight - 32 + "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('无密码');
-			}
-		},
+    // 初始化
+    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('语言配置完成');
-		},
+    // 配置语言
+    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);
-		},
+    //返回上一页
+    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: {}
+    // 强制返回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';
+@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;
-	}
+  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>
diff --git a/src/views/test.js b/src/views/test.js
index 9a4e0f2..a738c14 100644
--- a/src/views/test.js
+++ b/src/views/test.js
@@ -1,31 +1,31 @@
 this.show_list = [{
-		open_count: 1,
-		title: 'QQ',
-		user_name: '1144131090',
-		password: 'test',
-		node: '测试用'
-	},
-	{
-		open_count: 2,
-		title: '微信',
-		user_name: '15143211127',
-		password: 'test',
-		node: '测试用'
-	},
-	{
-		open_count: 3,
-		title: 'WIFI',
-		user_name: 'admin',
-		password: 'test',
-		node: '测试用'
-	},
-	{
-		open_count: 4,
-		title: 'WeGame',
-		user_name: '1144131090',
-		password: 'test',
-		node: '测试用'
-	}
+	open_count: 1,
+	title: 'QQ',
+	user_name: '1144131090',
+	password: 'test',
+	node: '测试用'
+},
+{
+	open_count: 2,
+	title: '微信',
+	user_name: '15143211127',
+	password: 'test',
+	node: '测试用'
+},
+{
+	open_count: 3,
+	title: 'WIFI',
+	user_name: 'admin',
+	password: 'test',
+	node: '测试用'
+},
+{
+	open_count: 4,
+	title: 'WeGame',
+	user_name: '1144131090',
+	password: 'test',
+	node: '测试用'
+}
 ];
 
 function test() {
@@ -44,4 +44,4 @@ let test_encode = encrypt('10aeff', '这是一段测试文本');
 console.log('加密后', test_encode)
 let test_decode = decrypt('10aefs', test_encode)
 console.log('解密后', test_decode)
-console.log('类型', typeof(test_decode)) // 密码错误就是空字符串
+console.log('类型', typeof (test_decode)) // 密码错误就是空字符串