diff --git a/package-lock.json b/package-lock.json
index 4a03607..3f682ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3361,6 +3361,15 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/create-ecdh/download/create-ecdh-4.0.3.tgz",
@@ -4354,6 +4363,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",
@@ -6945,6 +6959,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -8803,6 +8822,11 @@
         "utila": "~0.4"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
@@ -9435,6 +9459,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "roboto-fontface": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.6.1.tgz",
+      "integrity": "sha1-vVarPtTkovKaG9IPv1+S6eTPNUA="
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz",
@@ -11186,6 +11215,11 @@
         }
       }
     },
+    "vue-material": {
+      "version": "1.0.0-beta-11",
+      "resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-11.tgz",
+      "integrity": "sha512-1+dIVkQafMIA/zNONb7OwGaTjAxaWk/JhUA2/FInQvbArxf1ToKB+yIdeSfzopQ1KICnBTAmk9E0Vdr5p4MWNA=="
+    },
     "vue-router": {
       "version": "3.1.5",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.5.tgz",
diff --git a/package.json b/package.json
index 3a1126b..1214ef6 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,15 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "crc-32": "^1.2.0",
+    "material-design-icons": "^3.0.1",
     "register-service-worker": "^1.6.2",
+    "roboto-fontface": "^0.6.0",
     "vue": "^2.6.11",
+    "vue-clipboard2": "^0.3.1",
     "vue-material": "^1.0.0-beta-11",
     "vue-router": "^3.1.5",
-    "vuex": "^3.1.2",
-    "roboto-fontface": "^0.6.0",
-    "material-design-icons": "^3.0.1"
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.0",
diff --git a/src/main.js b/src/main.js
index a2926d5..d1fa2fc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,6 +21,10 @@ function setHtmlFontSize() {
 }
 setHtmlFontSize();
 
+// 剪切板
+import VueClipboard from "vue-clipboard2";
+Vue.use(VueClipboard);
+
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/router/index.js b/src/router/index.js
index 46c745e..7d35183 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-const linkActiveClass = 'my-link-active-class'
-
-// // pass custom class to Vue Material
-// Vue.material.router.linkActiveClass = linkActiveClass
-
 Vue.use(VueRouter)
 
 const routes = [
@@ -44,12 +39,17 @@ const routes = [
     name: 'Settings',
     component: () => import(/* webpackChunkName: "settings" */ '../views/Settings/Settings.vue')
   },
+  {
+    path: '/unlock',
+    name: 'Unlock',
+    component: () => import(/* webpackChunkName: "unlock" */ '../views/Unlock/Unlock.vue')
+  },
 ]
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes
+  routes,
 })
 
 export default router
diff --git a/src/store/index.js b/src/store/index.js
index 332b916..be7015f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,12 +4,50 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+	state: {
+		// 用户信息
+		user_info: '',
+		// aes化的密码信息
+		row_data: '',
+		// aes化的用户主密码
+		row_pwd: '',
+	},
+	mutations: {
+		// 设置用户信息
+		SET_USERINFO(state, user_info) {
+			state.user_info = user_info;
+		},
+		// 设置aes化的密码信息
+		SET_ROWDATA(state, row_data) {
+			state.row_data = row_data;
+		},
+		// 设置aes化的用户主密码
+		SET_ROWPWD(state, row_pwd) {
+			state.row_pwd = row_pwd;
+		},
+	},
+	actions: {
+		// 设置用户信息
+		setUserInfo({
+			commit
+		}, arg) {
+			commit('SET_USERINFO', arg[0]);
+			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
+		},
+		// 设置aes化的密码信息
+		setRowData({
+			commit
+		}, arg) {
+			commit('SET_ROWDATA', arg[0]);
+			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
+		},
+		// 设置aes化的用户主密码
+		setRowPwd({
+			commit
+		}, arg) {
+			commit('SET_ROWPWD', arg[0]);
+			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
+		},
+	},
+	modules: {}
 })
diff --git a/src/style/font.scss b/src/style/font.scss
index abaeb56..f3e9a3c 100644
--- a/src/style/font.scss
+++ b/src/style/font.scss
@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@@ -13,7 +13,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
@@ -22,7 +22,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
@@ -31,7 +31,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
@@ -40,7 +40,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@@ -49,7 +49,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@@ -58,10 +58,9 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Roboto'), local('Roboto-Regular'), url(/assets/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-
 // @font-face {
 //   font-family: 'Material Icons';
 //   font-style: normal;
diff --git a/src/utils/aes.js b/src/utils/aes.js
new file mode 100644
index 0000000..03e766e
--- /dev/null
+++ b/src/utils/aes.js
@@ -0,0 +1,48 @@
+import CryptoJS from 'crypto-js'
+import CRC32 from 'crc-32'
+
+// aes加密
+export function encrypt(code, json_row) {
+	// 循环冗余校验
+  let aesKey = CRC32.str(code)
+	// 取八位
+	aesKey = aesKey.toString().slice(0,8)
+	// 字符串化
+  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();
+}
+
+// aes解密
+export function decrypt(code, encrypt_str) {
+	// 循环冗余校验
+  let aesKey = CRC32.str(code)
+	// 取八位
+	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);
+}
+
+// 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
+	}).toString();
+}
+
+// aes解密用户密码
+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
+	}).toString(CryptoJS.enc.Utf8);
+}
\ No newline at end of file
diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
index e69de29..660278f 100644
--- a/src/views/Account/Account.vue
+++ b/src/views/Account/Account.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 660278f..1c8e614 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -1,188 +1,291 @@
 <template>
-  <div class="home" ref="home">
-    <md-app md-waterfall md-mode="fixed">
-      <md-app-toolbar class="md-primary">
-        <div class="md-toolbar-section-start">
-          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
-            <md-icon>menu</md-icon>
-          </md-button>
-          <span class="md-title">Codebook</span>
-        </div>
-        <div class="md-toolbar-section-end">
-          <md-button class="md-icon-button">
-            <md-icon>search</md-icon>
-          </md-button>
-          <md-menu md-align-trigger>
-            <md-button md-menu-trigger class="md-icon-button">
-              <md-icon>more_vert</md-icon>
-            </md-button>
-            <md-menu-content>
-              <md-menu-item>Alphabetically</md-menu-item>
-              <md-menu-item>Recently Used</md-menu-item>
-            </md-menu-content>
-          </md-menu>
-        </div>
-      </md-app-toolbar>
+	<div class="home" ref="home">
+		<md-app md-waterfall md-mode="fixed">
+			<md-app-toolbar class="md-primary">
+				<div class="md-toolbar-section-start">
+					<md-button class="md-icon-button" @click="menuVisible = !menuVisible"><md-icon>menu</md-icon></md-button>
+					<span class="md-title">Codebook</span>
+				</div>
+				<div class="md-toolbar-section-end">
+					<md-button class="md-icon-button" @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')">Alphabetically</md-menu-item>
+							<md-menu-item @click="changeSortType('Recently Used')">Recently Used</md-menu-item>
+						</md-menu-content>
+					</md-menu>
+				</div>
+			</md-app-toolbar>
 
-      <md-app-drawer :md-active.sync="menuVisible">
-        <div class="drawer-banner">
-          <md-icon class="default-avatar md-size-2x">face</md-icon>
-          <p class="md-title">Canary Codebook</p>
-          <p class="md-caption">zhaoyingbo@live.cn</p>
-        </div>
+			<md-app-drawer :md-active.sync="menuVisible">
+				<div class="drawer-banner">
+					<md-icon class="default-avatar md-size-2x">face</md-icon>
+					<p class="md-title">Canary Codebook</p>
+					<p class="md-caption">{{ user_info.user_name }}</p>
+				</div>
 
-        <md-list>
-          <md-list-item>
-            <md-icon>person</md-icon>
-            <span class="md-list-item-text">Account</span>
-          </md-list-item>
+				<md-list>
+					<md-list-item @click="turnToPage('/account')">
+						<md-icon>person</md-icon>
+						<span class="md-list-item-text">Account</span>
+					</md-list-item>
 
-          <md-list-item>
-            <md-icon>help</md-icon>
-            <span class="md-list-item-text">FAQ</span>
-          </md-list-item>
+					<md-list-item @click="turnToPage('/faq')">
+						<md-icon>help</md-icon>
+						<span class="md-list-item-text">FAQ</span>
+					</md-list-item>
 
-          <md-list-item>
-            <md-icon>question_answer</md-icon>
-            <span class="md-list-item-text">Provide Feedback</span>
-          </md-list-item>
+					<md-list-item @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-icon>settings</md-icon>
-            <span class="md-list-item-text">Settings</span>
-          </md-list-item>
-          <md-list-item>
-            <md-icon>reply</md-icon>
-            <span class="md-list-item-text">Share</span>
-          </md-list-item>
-        </md-list>
-      </md-app-drawer>
+					<md-list-item @click="turnToPage('/settings')">
+						<md-icon>settings</md-icon>
+						<span class="md-list-item-text">Settings</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">Share</span>
+					</md-list-item>
+				</md-list>
+			</md-app-drawer>
 
-      <md-app-content>
-        <md-empty-state
-          md-icon="devices_other"
-          md-label="Create your first code"
-          md-description="Creating code, you'll be able to upload your information to the server and save it."
-          v-if="test_data.length == 0"
-        >
-          <md-button class="md-primary md-raised">Create first code</md-button>
-        </md-empty-state>
+			<md-app-content>
+				<md-empty-state
+					md-icon="devices_other"
+					md-label="Create your first code"
+					md-description="Creating code, you'll be able to upload your information to the server and save it."
+					v-if="show_list.length == 0"
+				>
+					<md-button class="md-primary md-raised" @click="turnToAdd()">Create first code</md-button>
+				</md-empty-state>
 
-        <div class="code-card" v-for="(code, index) in test_data" :key="index">
-          <p class="md-title">{{code.title}}</p>
-          <p class="md-caption">{{code.user_name}}</p>
-        </div>
+				<div class="code-card" v-for="(code, index) in show_list" :key="index">
+					<p class="md-title">{{ code.title }}</p>
+					<p class="md-caption">{{ code.user_name }}</p>
+				</div>
 
-        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
-          <md-speed-dial-target>
-            <md-icon>add</md-icon>
-          </md-speed-dial-target>
-        </md-speed-dial>
-      </md-app-content>
-    </md-app>
-  </div>
+				<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
+					<md-speed-dial-target><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-button class="md-primary" @click="show_snackbar = false" v-if="snakebar_msg=='复制失败'">重试</md-button>
+				</md-snackbar>
+			</md-app-content>
+		</md-app>
+	</div>
 </template>
 
 <script>
 // @ is an alias to /src
-import { mapState, mapActions } from "vuex";
-
+import { mapState, mapActions } from 'vuex';
+import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
 export default {
-  name: "Home",
-  data() {
-    return {
-      menuVisible: false,
-      has_data: false,
-      clientHeight: "",
-      test_data: [
-        {
-          open_count:0,
-          title:'QQ',
-          user_name:'1144131090',
-          password:'test',
-          node:'测试用',
-        },{
-          open_count:0,
-          title:'微信',
-          user_name:'15143211127',
-          password:'test',
-          node:'测试用',
-        },{
-          open_count:0,
-          title:'QQ',
-          user_name:'1144131090',
-          password:'test',
-          node:'测试用',
-        },{
-          open_count:0,
-          title:'QQ',
-          user_name:'1144131090',
-          password:'test',
-          node:'测试用',
-        },
-      ]
-    };
-  },
-  computed: {
-    ...mapState([])
-  },
-  methods: {
-    ...mapActions([]),
-    changeFixed(clientHeight) {
-      //动态修改样式
-      // console.log(clientHeight);
-      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
-    }
-  },
-  created() {},
-  mounted() {
-    // 获取浏览器可视区域高度
-    this.clientHeight = `${document.documentElement.clientHeight}`;
-    //document.body.clientWidth;
-    window.onresize = function temp() {
-      this.clientHeight = `${document.documentElement.clientHeight}`;
-    };
-  },
-  watch: {
-    // 如果 `clientHeight` 发生改变，这个函数就会运行
-    clientHeight: function() {
-      this.changeFixed(this.clientHeight);
-    }
-  },
-  beforeDestroy() {},
-  components: {}
+	name: 'Home',
+	data() {
+		return {
+			// 显示抽屉开关
+			menuVisible: false,
+			// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
+			clientHeight: '',
+			// 显示的密码列表
+			show_list: [],
+			unlock: false,
+			show_snackbar: false,
+			snakebar_msg: '',
+			web_addr: 'https://codebook.canary.moe'
+		};
+	},
+	computed: {
+		...mapState(['user_info', 'row_data', 'row_pwd'])
+	},
+	methods: {
+		...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
+
+		// 修改md-app的最小高度
+		changeFixed(clientHeight) {
+			//动态修改样式
+			// console.log(clientHeight);
+			this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
+		},
+
+		// 初始化
+		init() {
+			// 刷新vuex
+			this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
+			// 初始化
+			this.initUserInfo();
+			// 判断有无用户密码
+			if (Object.keys(this.row_pwd).length != 0) {
+				// 有密码，已经输入过了
+				let now = new Date().getTime();
+				if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
+					// 上次写入时间距离现在在五分钟之内
+					this.unlock = true;
+					// 判断有无密码本
+					if (this.row_data) {
+						// 解密主密码
+						let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+						// 解密密码本
+						let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+						// 刷新显示内容
+						this.show_list = JSON.parse(data_decrypt);
+					} else {
+						// 空密码本
+						this.show_list = [];
+					}
+				} else {
+					// 跳转到解锁界面
+					this.turnToUnlock('密码超时');
+				}
+			} else {
+				// 没有密码，留存本页
+				this.show_list = [];
+				this.unlock = false;
+			}
+			console.log(this.show_list.length != 0 ? '密码本存在' : '空密码本');
+			console.log(this.unlock ? '已解锁' : '未解锁');
+		},
+
+		// 初始化用户信息
+		initUserInfo() {
+			if (Object.keys(this.user_info).length == 0) {
+				// 初始化用户信息
+				let user_info = {
+					user_name: 'A Little Canary',
+					user_avatar: null
+				};
+				this.setUserInfo([user_info, this]);
+				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) => a['open_count'] - b['open_count']);
+			}
+		},
+
+		// 跳转到解锁界面
+		turnToUnlock(type) {
+			console.log(type);
+			let main_code = '10aeff';
+			let main_code_aes = encryptMainCode(main_code);
+			let row_pwd = {
+				main_code: main_code_aes,
+				create_time: new Date().getTime()
+			};
+			this.setRowPwd([row_pwd, this]);
+			console.log('主密码设置完成，返回init');
+			this.init();
+		},
+
+		// 跳转到搜索界面
+		turnToSearch() {
+			// 没有内容拦截器
+			if (this.show_list.length == 0) {
+				console.log('点击搜索无内容拦截');
+				return;
+			}
+			this.$router.push({ name: 'Search', params: { list: this.show_list } });
+		},
+
+		// 跳转到添加界面
+		turnToAdd() {
+			// 未解锁拦截器
+			if (!this.unlock) {
+				this.turnToUnlock('点击新增未解锁拦截');
+				return;
+			}
+			this.$router.push('/add');
+		},
+
+		// 跳转到某页面
+		turnToPage(url) {
+			this.$router.push(url);
+		},
+
+		// 复制成功
+		onCopyUrl(e) {
+			this.snakebar_msg = '复制成功';
+			this.show_snackbar = true;
+		},
+
+		// 复制失败
+		onErrorUrl(e) {
+			this.snakebar_msg = '复制失败';
+			this.show_snackbar = true;
+		}
+	},
+	created() {
+		// 重置row_pwd
+		// this.setRowPwd(['', this])
+		// this.setUserInfo(['', this])
+		this.init();
+	},
+	mounted() {
+		// 获取浏览器可视区域高度
+		this.clientHeight = `${document.documentElement.clientHeight}`;
+		//document.body.clientWidth;
+		window.onresize = function temp() {
+			this.clientHeight = `${document.documentElement.clientHeight}`;
+		};
+	},
+	watch: {
+		// 如果 `clientHeight` 发生改变，这个函数就会运行
+		clientHeight: function() {
+			this.changeFixed(this.clientHeight);
+		}
+	},
+	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;
-    .default-avatar {
-      color: #fff;
-      margin-bottom: 0.3rem;
-    }
-    .md-caption {
-      color: #fbfbfb;
-    }
-  }
-  .code-card {
-    padding: .3rem 0;
-    border-bottom: 1px #eee solid;
-  }
+	width: 100%;
+	// max-width: 500px;
+	min-height: 100%;
+	background: #fff;
+	// margin: 0 auto;
+	.drawer-banner {
+		padding: 1rem 0.3rem 0.3rem 0.3rem;
+		box-sizing: border-box;
+		background: $main-color;
+		color: #fff;
+		.default-avatar {
+			color: #fff;
+			margin-bottom: 0.3rem;
+		}
+		.md-caption {
+			color: #fbfbfb;
+		}
+	}
+	.code-card {
+		padding: 0.3rem 0;
+		border-bottom: 1px #eee solid;
+	}
 }
 // Demo purposes only
 .md-drawer {
-  width: 240px;
-  max-width: calc(100vw - 125px);
+	width: 240px;
+	max-width: calc(100vw - 125px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index e69de29..660278f 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Unlock/Unlock.vue b/src/views/Unlock/Unlock.vue
new file mode 100644
index 0000000..660278f
--- /dev/null
+++ b/src/views/Unlock/Unlock.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="home" ref="home">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+            <md-icon>menu</md-icon>
+          </md-button>
+          <span class="md-title">Codebook</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button">
+            <md-icon>search</md-icon>
+          </md-button>
+          <md-menu md-align-trigger>
+            <md-button md-menu-trigger class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>Alphabetically</md-menu-item>
+              <md-menu-item>Recently Used</md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-app-toolbar>
+
+      <md-app-drawer :md-active.sync="menuVisible">
+        <div class="drawer-banner">
+          <md-icon class="default-avatar md-size-2x">face</md-icon>
+          <p class="md-title">Canary Codebook</p>
+          <p class="md-caption">zhaoyingbo@live.cn</p>
+        </div>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>person</md-icon>
+            <span class="md-list-item-text">Account</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>help</md-icon>
+            <span class="md-list-item-text">FAQ</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>question_answer</md-icon>
+            <span class="md-list-item-text">Provide Feedback</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>settings</md-icon>
+            <span class="md-list-item-text">Settings</span>
+          </md-list-item>
+          <md-list-item>
+            <md-icon>reply</md-icon>
+            <span class="md-list-item-text">Share</span>
+          </md-list-item>
+        </md-list>
+      </md-app-drawer>
+
+      <md-app-content>
+        <md-empty-state
+          md-icon="devices_other"
+          md-label="Create your first code"
+          md-description="Creating code, you'll be able to upload your information to the server and save it."
+          v-if="test_data.length == 0"
+        >
+          <md-button class="md-primary md-raised">Create first code</md-button>
+        </md-empty-state>
+
+        <div class="code-card" v-for="(code, index) in test_data" :key="index">
+          <p class="md-title">{{code.title}}</p>
+          <p class="md-caption">{{code.user_name}}</p>
+        </div>
+
+        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
+          <md-speed-dial-target>
+            <md-icon>add</md-icon>
+          </md-speed-dial-target>
+        </md-speed-dial>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menuVisible: false,
+      has_data: false,
+      clientHeight: "",
+      test_data: [
+        {
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'微信',
+          user_name:'15143211127',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },{
+          open_count:0,
+          title:'QQ',
+          user_name:'1144131090',
+          password:'test',
+          node:'测试用',
+        },
+      ]
+    };
+  },
+  computed: {
+    ...mapState([])
+  },
+  methods: {
+    ...mapActions([]),
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
+    }
+  },
+  created() {},
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+    };
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.home {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .drawer-banner {
+    padding: 1rem 0.3rem 0.3rem 0.3rem;
+    box-sizing: border-box;
+    background: $main-color;
+    color: #fff;
+    .default-avatar {
+      color: #fff;
+      margin-bottom: 0.3rem;
+    }
+    .md-caption {
+      color: #fbfbfb;
+    }
+  }
+  .code-card {
+    padding: .3rem 0;
+    border-bottom: 1px #eee solid;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/test.js b/src/views/test.js
new file mode 100644
index 0000000..552488f
--- /dev/null
+++ b/src/views/test.js
@@ -0,0 +1,41 @@
+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: '测试用'
+				}
+			];
+			test() {
+				//
+				// let main_code = '10aeff'
+				// let data_aes = encrypt(main_code, this.show_list);
+				// if(!this.row_data) this.setRowData([data_aes, this])
+				// let main_code_aes = encryptMainCode(main_code)
+				// if(!this.row_pwd) this.setRowPwd([main_code_aes, this])
+				// let main_code_decrpt = decryptMainCode(main_code_aes)
+				// let data_decrpt = decrypt(main_code_decrpt, data_aes)
+				// console.log(data_aes, main_code_aes, main_code_decrpt,data_decrpt)
+			},
\ No newline at end of file