suspend

public/index.html

@@ -24,29 +24,29 @@
       background-color: #dddddd
     }
   </style>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/iview.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/iview.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.21.1/dist/vue-i18n.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.21.1/dist/vue-i18n.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js"
+  <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js" rel="stylesheet"
     type="text/javascript"></script>
-  <script type="text/javascript">
+  <script>
     window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm"
   </script>
 

src/libs/noteStorage.js

@@ -1,3 +1,4 @@
+import { getKeyMeta } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
 import { wrap } from "@/libs/secret";
 import storage from "@/libs/storage";
@@ -11,7 +12,7 @@ export function setStoreText(noteForm, state, secret) {
     storeText = wrap(text, secret.secretKey);
   }
 
-  return storage.local.setText(
+  storage.local.setText(
     secret.storeKey,
     state.lock +
       "|" +
@@ -25,7 +26,8 @@ export function setStoreText(noteForm, state, secret) {
   );
 }
 
-export function setNewStoreText(noteForm,keyMeta) {
+export function setNewStoreText(noteForm) {
+  let keyMeta =getKeyMeta();
   let storeKey = getStoreKey(keyMeta.key);
 
   let text = noteForm.text;
@@ -36,7 +38,7 @@ export function setNewStoreText(noteForm,keyMeta) {
     storeText = wrap(text, keyMeta.secretKey);
   }
 
-  return storage.local.setText(
+  storage.local.setText(
     storeKey,
       "0|" +
       keyMeta.cipher +
@@ -45,6 +47,8 @@ export function setNewStoreText(noteForm,keyMeta) {
       "|" +
       storeText
   );
+
+  return keyMeta.key;
 }
 
 export function clearStoreText(key) {

src/libs/page.js

@@ -0,0 +1,197 @@
+import { getStoreKey } from "@/api/lock";
+import storage from "@/libs/storage";
+import { getNoteMetaNew, getNoteBlob } from "@/api/note";
+import { reject } from "bluebird";
+import { unwrap, md5 } from '@/libs/secret'
+
+
+export async function initPageData(view) {
+
+    let noteKey = view.noteForm.key;
+
+    let storeKey = getStoreKey(noteKey);
+    view.secret.storeKey = storeKey;
+
+    let keyMeta = storage.session.getObject("keyMeta");
+    if (keyMeta) {
+        view.state.lock = 0;
+        view.secret.cipher = keyMeta.cipher;
+        view.secret.secretKey = keyMeta.secretKey;
+        view.state.serverTime = keyMeta.serverTime;
+        // key init Time
+        view.state.initTime = keyMeta.serverTime;
+
+        await storage.local.setText(storeKey, "0|" + view.secret.cipher + "|0|" + view.state.initTime + "|");
+        storage.session.delete("keyMeta");
+        return "000000";
+    }
+
+    let noteMeta = storage.session.getObject(noteKey+".noteMeta");
+
+    if(null==noteMeta){
+        let resp = await getNoteMetaNew(view.noteForm.key);
+        if (null == resp || null == resp.data) {
+            return "100006";
+        }
+        let result = resp.data;
+        if (result.code != '000000') {
+            return result.code;
+        }
+        let noteMeta = result.data;
+        if (null == noteMeta) {
+            return "100001";
+        }
+        if (null == noteMeta.key) {
+            return "100002";
+        }
+        storage.session.setObject(noteKey+".noteMeta",noteMeta);
+    }else{
+        getNoteMetaNew(view.noteForm.key).then(function(resp){
+            if (null == resp || null == resp.data) {
+                return "100006";
+            }
+            let result = resp.data;
+            if (result.code != '000000') {
+                return result.code;
+            }
+            let noteMeta = result.data;
+            if (null == noteMeta) {
+                return "100001";
+            }
+            if (null == noteMeta.key) {
+                return "100002";
+            }
+        });
+    }
+
+    //view
+    if (1 == noteMeta.state) {
+
+        view.secret.secretKey = noteMeta.secretKey;
+
+        view.state.lock = noteMeta.lock;
+        view.state.initTime = new Date().getTime();
+        view.state.initTtl = noteMeta.ttl;
+        view.state.ttl = noteMeta.ttl;
+        view.state.serverTime = noteMeta.serverTime;
+
+        view.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
+        view.secret.md5 = noteMeta.md5;
+
+        await loadText(view);
+        return "000000";
+    }
+
+    //deleted
+    if (0 == noteMeta.state) {
+        let storeKey = getStoreKey(noteKey);
+        storage.local.delete(storeKey);
+        // user deleted
+        if (noteMeta.ttl > 0) {
+            // errorMeta = 100003;
+            return "100003";
+            //return errorRouter(100003);
+        } else {// timeout
+            // errorMeta = 100004;
+            return "100004";
+            //return errorRouter(100004);
+        }
+    }
+
+    //edit or unsubmitted
+    if (null == noteMeta.state) {
+        let storeKey = getStoreKey(noteKey);
+        const storeInfo = await storage.local.getText(storeKey);
+
+        //if has storage , then edit
+        if (null != storeInfo) {
+            view.secret.secretKey = noteMeta.secretKey;
+
+            let starray = storeInfo.split('|');
+            view.state.lock = parseInt(starray[0]);
+            view.secret.cipher = starray[1];
+            view.state.initTime = parseInt(starray[3]);
+            //draw text;
+            if (starray[4]) {
+                view.noteForm.text = unwrap(starray[4], view.secret.secretKey);
+            }
+
+            return "000000";
+        }
+
+        //storage is empty 
+        let df = storage.session.getText(storeKey + "_delete")
+        if (df) {//unsubmitted,user deleted.
+            // errorMeta = 100003;
+            return "100003";
+        } else {//unsubmitted
+            // errorMeta = 100005;
+            return "100005";
+        }
+    }
+
+
+}
+
+async function loadText(view) {
+
+    let storeInfo = await storage.local.getText(view.secret.storeKey);
+
+    let starray = [];
+    if (storeInfo) {
+        starray = storeInfo.split('|');
+    }
+
+    if (!storeInfo || !starray[4] || (md5(starray[4]) != view.secret.md5)) {
+
+        let bytesString = await getServerNote(view.noteForm.key);
+        view.noteForm.text = unwrap(bytesString, view.secret.secretKey);
+    } else {
+        starray = storeInfo.split('|');
+
+        if (!starray[4]) {
+            return;
+        }
+
+        view.noteForm.text = unwrap(starray[4], view.secret.secretKey);
+        //this.noteForm.escapeText = getEscapeText(this.noteForm.text);
+
+        // local is usable, and set commited flag
+        if ("0" == starray[2]) {
+            storage.local.setText(this.secret.storeKey, starray[0] + "|" + starray[1] + "|1|" + starray[3] + "|" + starray[4]);
+        }
+    }
+}
+
+async function getServerNote(key) {
+    let resp = await getNoteBlob(key)
+    if (!resp.data || resp.data.size == 0) {
+        return "100006";
+    }
+
+    let blob = new Blob([resp.data], {
+        type: resp.data.type
+    });
+
+    let bytesString = await fileReader(blob);
+
+    return bytesString;
+
+
+}
+
+async function fileReader(blob) {
+    return new Promise(function (resolve) {
+        let reader = new FileReader();
+        reader.onload = function (e) {
+            if (!e.target.result || e.target.result.byteLength == 0) {
+                reject("");
+            }
+            var bytes = new Uint8Array(e.target.result);
+            bytes = bytes.subarray(7, bytes.length - 7);
+            let bytesString = bytes.join(",");
+            resolve(bytesString);
+        };
+        reader.readAsArrayBuffer(blob)
+    });
+}

src/main.js

@@ -1,15 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
-import getRouter from './router/'
+import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 import './plugins/iview.js'
-import {Promise} from "bluebird";
 import i18n from './i18n/'
-
 import NoteConstant from "@/libs/constants";
 
-
 axios.defaults.baseURL = NoteConstant.servicePath;
 
 Vue.use(VueAxios, axios)
@@ -19,12 +16,10 @@ Vue.config.debug = debugFlag;
 Vue.config.devtools = debugFlag;
 Vue.config.productionTip = debugFlag;
 
-Promise.try(getRouter).then((router)=>{
-    new Vue({
+new Vue({
     i18n,
     router,
     render: h => h(App)
-    }).$mount('#app')
-});
+}).$mount('#app')
 
 

src/router/index.js

@@ -1,131 +1,22 @@
-import { getNoteMetaNew } from "@/api/note";
+import Vue from "vue";
 import VueRouter from "vue-router";
-import EditNote from "@/views/EditNote.vue";
-import ViewNote from "@/views/ViewNote.vue";
-import ErrorNote from "@/views/ErrorNote.vue";
-import storage from "@/libs/storage";
-import { getStoreKey } from "@/api/lock";
+import NoteView from "@/views/NoteView.vue";
+import ErrorView from "@/views/ErrorView.vue";
 
+Vue.use(VueRouter);
 
-export default async function getRouter() {
-    let path = location.pathname;
-    let key = path.substring(1, path.length);
-    //let errorMeta = null;
-
-    if (path == "/") {
-        //errorMeta = 100002;
-        return errorRouter(100002);
-    }
-
-    let keyMeta = storage.session.getObject("keyMeta");
-    storage.session.delete("keyMeta");
-
-    let regKey = /^[abcdefhikmnopqstuvwxyz23456789]{16}$/;
-
-    if (!regKey.test(key)) {
-        return errorRouter(100002);
-    }
-
-    if (keyMeta && keyMeta.key) {
-        // if(document.referrer=="/"){
-        // }
-        return noteRouter(EditNote, keyMeta, null);
-    }
-
-    let resp = await getNoteMetaNew(key);
-
-
-    if (null == resp || null == resp.data) {
-        return errorRouter(100006);
-    }
-
-    let result = resp.data;
-    if (result.code != '000000') {
-        return errorRouter(parseInt(result.code));
-    }
-
-    let noteMeta = result.data;
-    if (null == noteMeta) {
-        return errorRouter(100001);
-    }
-    if (null == noteMeta.key) {
-        return errorRouter(100002);
-    }
-
-    //view
-    if (1 == noteMeta.state) {
-        return noteRouter(ViewNote, keyMeta, noteMeta);
-    }
-
-    //deleted
-    if (0 == noteMeta.state) {
-        let storeKey = getStoreKey(key);
-        storage.local.delete(storeKey);
-        // user deleted
-        if (noteMeta.ttl > 0) {
-            // errorMeta = 100003;
-            return errorRouter(100003);
-        } else {// timeout
-            // errorMeta = 100004;
-            return errorRouter(100004);
-        }
-    }
-
-    //edit or unsubmitted
-    if (null == noteMeta.state) {
-        let storeKey = getStoreKey(key);
-        const storeInfo = await storage.local.getText(storeKey);
-
-        //if has storage , then edit
-        if (null != storeInfo) {
-            return noteRouter(EditNote, keyMeta, noteMeta);
-        }
-
-        //storage is empty 
-        let df = storage.session.getText(storeKey + "_delete")
-        if (df) {//unsubmitted,user deleted.
-            // errorMeta = 100003;
-            return errorRouter(100003);
-        } else {//unsubmitted
-            // errorMeta = 100005;
-            return errorRouter(100005);
-        }
-    }
-    return errorRouter(100001);
-}
-
-function noteRouter(noteView, keyMeta, noteMeta) {
-    const routes = [
+const routes = [
   {
-            path: "/:name([a-z0-9]{10,20})",
+    path: "/:name([abcdefhikmnopqstuvwxyz23456789]{16})",
     name: "note",
-            component: noteView,
-            meta: { keyMeta: keyMeta, noteMeta: noteMeta },
-        }
-    ];
+    component: NoteView,
+  },
+  { path: "/:path(.*)", component: ErrorView }
+];
 
-    const router = new VueRouter({
+const router = new VueRouter({
   routes,
   mode: "history",
-    });
-    return router;
-}
-
-
-function errorRouter(errorCode) {
-    const routes = [
-        {
-            path: "/:name([a-z0-9]{10,20})",
-            name: "error",
-            component: ErrorNote,
-            errorMeta: errorCode
-        }
-    ];
-
-    const router = new VueRouter({
-        routes,
-        mode: "history",
-    });
-    return router;
-}
+});
 
+export default router;

src/views/EditNote.vue

@@ -201,7 +201,6 @@ import { setStoreText,setNewStoreText } from "@/libs/noteStorage";
 import { saveAs } from 'file-saver';
 import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
-import { getKeyMeta } from "@/api/note";
 
 export default {
   name: 'EditNote',
@@ -248,10 +247,10 @@ export default {
     let keyMeta = this.$route.meta.keyMeta;
 
     //ipad chrome url not redirect
-    // let path = location.pathname;
-    // if ("/" == path) {
-    //   history.pushState('', '', '/' + this.noteForm.key);
-    // }
+    let path = location.pathname;
+    if ("/" == path) {
+      history.pushState('', '', '/' + this.noteForm.key);
+    }
 
     //wx does not show downloadText
     this.model.showDownloadText = !isWeixin();
@@ -282,20 +281,16 @@ export default {
       let noteMeta = this.$route.meta.noteMeta;
       this.secret.secretKey = noteMeta.secretKey;
 
-      let that = this;
-
-      storage.local.getText(storeKey).then(function(storeInfo){
+      let storeInfo = storage.local.getText(storeKey);
       let starray = storeInfo.split('|');
-        that.state.lock = parseInt(starray[0]);
-        that.secret.cipher = starray[1];
-        that.state.initTime = parseInt(starray[3]);
+      this.state.lock = parseInt(starray[0]);
+      this.secret.cipher = starray[1];
+      this.state.initTime = parseInt(starray[3]);
 
       //draw text;
       if (starray[4]) {
-          that.noteForm.text = unwrap(starray[4], that.secret.secretKey);
+        this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
       }
-      });
-
     }
 
     this.bindCtrlAllEvent();
@@ -403,10 +398,13 @@ export default {
         setStoreText(this.noteForm, this.state, this.secret);
 
       } else if (event.ctrlKey && (event.which == 13)) {
-        
+        //save
         this.submitNote();
       }
     },
+    save() {
+      return saveNote(this.noteForm, this.secret);
+    },
     validateForm() {
       let text = this.noteForm.text;
       if (text.length > NoteConstant.noteMaxCount) {
@@ -435,28 +433,25 @@ export default {
         return;
       }
 
-      setStoreText(this.noteForm, this.state, this.secret);
-
       this.model.submitting = true;
 
       let that = this;
-      saveNote(this.noteForm, this.secret).then(res => {
+      this.save().then(res => {
         if (res.data && res.data.code == "000000") {
           storage.session.setText(that.secret.storeKey + "_share", '1');
 
           that.state.commited = 1;
-          setStoreText(this.noteForm, this.state, this.secret).then(function(){
+          setStoreText(this.noteForm, this.state, this.secret);
+          
           location.reload();
-          });
+          this.state.locking = 0;
         } else {
           alert(res.data.code);
           this.model.submitting = false;
           this.state.locking = 0;
           if(res.data.code=="100013"||res.data.code=="800001"){
-            let keyMeta = getKeyMeta();
-            setNewStoreText(this.noteForm,keyMeta).then(function () {
-              location.href="/"+keyMeta.key;
-            });
+            let key = setNewStoreText(this.noteForm);
+            location.href="/"+key;
           }
 
         }

src/views/ErrorView.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'ErrorRoute',
+  name: 'ErrorView',
   components: {},
   data() {
     return {}

src/views/NoteView.vue

@@ -0,0 +1,449 @@
+<style scoped>
+.layout {
+  height: 100%;
+  background: #dddddd;
+}
+
+.header {
+  background: #dddddd;
+}
+
+.ivu-layout-header {
+  line-height: normal;
+  height: auto;
+  padding: 0px;
+}
+
+.content {
+  background: #dddddd;
+}
+
+.ivu-layout-content {
+  padding: 0px;
+}
+
+
+.layout-footer-center {
+  background: #dddddd;
+  text-align: center;
+}
+
+.ivu-card-bordered {
+  border: 0px solid #dcdee2;
+  border-color: #e8eaec;
+}
+
+.fnmodal {
+  align-items: center;
+  justify-content: center;
+}
+
+
+
+@media print {
+
+  @page {
+    size: portrait;
+    margin: 20px;
+  }
+
+  body {
+    margin: 0.8cm;
+    background-color: #ffffff;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .layout-footer-center {
+    display: none;
+  }
+
+}
+</style>
+
+<template>
+  <div class="layout">
+
+    <Layout>
+
+      <Header class="header">
+        <Row>
+          <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+            :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+
+          <Affix :offset-top="0">
+            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
+
+              <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
+                v-on:click="refreshPage()" />
+
+              <div style="float:left;width:auto;">
+
+                <Button-group size="large">
+
+
+
+                  <Button aria-label="to top" v-show="toTopState" type="text"
+                    style="margin-left:5px; border-radius: 0px; font-size: 28px;color:red;line-height: 20px;"
+                    @click="toTop()" icon="ios-arrow-up" ghost></Button>
+
+                </Button-group>
+
+              </div>
+
+
+
+              <div style="float:right;width:auto;">
+
+                <Button-group size="large">
+                  <Button aria-label="publish" type="error" :loading="model.submitting"
+                    style="margin-left:5px; border-radius: 0px;font-size: 21px;" @click="submitNote()"
+                    icon="md-share"></Button>
+                  <Button aria-label="menu" type="error" style="margin-left:3px; border-radius: 0px;font-size: 24px;"
+                    @click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
+
+                </Button-group>
+              </div>
+            </div>
+
+            <div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
+              style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
+              <Button-group vertical size="large">
+                <Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
+                  @click="createNote(); switchMenu(); " icon="md-add"></Button>
+                <!--
+
+                          <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
+                          @click="refreshPage()"></Button>
+                        -->
+
+                <Button aria-label="download text" v-show="model.showDownloadText" type="error"
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
+                  icon="md-download"></Button>
+
+                <Button aria-label="history text" v-show="model.showHistoryText" type="error"
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
+                  icon="md-download"></Button>
+
+                <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
+                  @click="showDeleteModel(); switchMenu(); "></Button>
+
+              </Button-group>
+
+
+            </div>
+          </Affix>
+
+
+
+          </Col>
+        </Row>
+      </Header>
+
+      <Content class="content">
+        <div style="min-height: 650px;">
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <Card :padding="0">
+              <Form :model="noteForm" :label-width="80">
+                <div id="wrapper" style="border-left: 2px solid #ed4014;">
+                  <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
+                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
+                    @on-keydown="recordEventKdown" />
+                </div>
+              </Form>
+            </Card>
+            </Col>
+
+          </Row>
+        </div>
+
+      </Content>
+
+      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
+    </Layout>
+
+    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+      <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
+        {{ $t("message.askTodelete") }}
+      </p>
+      <p style="text-align: center;">
+        <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
+          $t("button.yes")
+        }}</Button>
+      </p>
+    </Modal>
+
+    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+      <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
+        {{ errorInfo }}
+      </p>
+      <p style="text-align: center;">
+        <Button type="error" style="border-radius: 0px;font-size: 19px;" @click="cloaseErrorMessage()">{{
+          $t("button.close")
+        }}</Button>
+      </p>
+    </Modal>
+
+
+  </div>
+</template>
+
+<script>
+import { initPageData } from "@/libs/page"
+import { saveNote } from "@/api/note";
+import storage from "@/libs/storage";
+import { setStoreText, setNewStoreText } from "@/libs/noteStorage";
+import { saveAs } from 'file-saver';
+import { isWeixin } from "@/libs/utils";
+import NoteConstant from "@/libs/constants";
+
+export default {
+  name: 'NoteView',
+  props: {},
+  components: {},
+  data() {
+    return {
+      noteForm: {
+        text: '',
+        key: '',
+      },
+      secret: {
+        storeKey: '',
+        secretKey: '',
+        cipher: '',
+        password: '',
+      },
+      state: {
+        lock: 0,
+        locking: 0,
+        commited: 0,
+        serverTime: '',
+        initTime: '',
+      },
+      model: {
+        submitting: false,
+        showDelete: false,
+        deleting: false,
+        showDownloadText: false,
+        showError: false,
+      },
+      toTopState: false,
+      showMenuState: false,
+      showHeaderShade: false,
+      pageSession: '',
+      errorInfo: '',
+    }
+  },
+  created() {
+    this.noteForm.key = this.$route.params.name;
+
+
+
+
+
+
+    
+
+    //wx does not show downloadText
+    this.model.showDownloadText = !isWeixin();
+    // let noteMeta = this.$route.meta.noteMeta;
+    initPageData(this);
+  },
+  mounted() {
+    const myObserver = new ResizeObserver(entries => {
+      // iterate over the entries, do something.
+      entries.forEach(entry => {
+        let affix = document.querySelector('.ivu-affix');
+        if (affix) {
+          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
+        }
+
+      });
+    });
+
+    const someOtherEl = document.querySelector('#wrapper');
+
+    myObserver.observe(someOtherEl);
+
+    this.bindCtrlAllEvent();
+    this.bindToTopEvent();
+    window.wasm_bindgen(window.wasm_flate_bg_path);
+  },
+  updated() {
+  },
+  beforeDestroy() {
+  },
+  destroyed() {
+  },
+  computed: {},
+  watch: {},
+  methods: {
+
+    toTop() {
+      window.scrollTo(0, 0);
+      let elent = document.querySelector('#noteText');
+      elent.selectionStart = 0;
+      elent.selectionEnd = 0;
+      elent.focus();
+    },
+    refreshPage() {
+      window.location.reload();
+    },
+    switchMenu() {
+      this.showMenuState = !this.showMenuState;
+    },
+    hideMenu() {
+      let hbt = document.querySelector('#noteMenu > div > button:hover');
+      if (!hbt) {
+        this.showMenuState = false;
+      }
+    },
+    downLoadText() {
+      var blob = new Blob([this.noteForm.text], { type: "application/octet-stream;charset=utf-8" });
+      saveAs(blob, this.noteForm.key + ".txt");
+    },
+    recordText() {
+      let text = this.noteForm.text;
+      if (text.length > NoteConstant.noteMaxCount) {
+        this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
+        this.model.showError = true;
+        return;
+      }
+
+      setStoreText(this.noteForm, this.state, this.secret);
+    },
+    recordEventKdown(event) {
+
+      if (event.key == "Tab") {
+
+        let start = event.currentTarget.selectionStart;
+        let end = event.currentTarget.selectionEnd;
+        let text = event.currentTarget.value;
+
+        if (text.length > NoteConstant.noteMaxCount) {
+          this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
+          this.model.showError = true;
+          return;
+        }
+
+        let tab = '\t';//\t
+        text = text.substr(0, start) + tab + text.substr(start);
+        event.currentTarget.value = text;
+        event.currentTarget.selectionStart = start + tab.length;
+        event.currentTarget.selectionEnd = end + tab.length;
+        event.stopPropagation();
+        if (event.preventDefault) {
+          event.preventDefault();
+        }
+
+        this.noteForm.text = event.currentTarget.value;
+        setStoreText(this.noteForm, this.state, this.secret);
+
+      } else if (event.ctrlKey && (event.which == 13)) {
+        //save
+        this.submitNote();
+      }
+    },
+    save() {
+      return saveNote(this.noteForm, this.secret);
+    },
+    validateForm() {
+      let text = this.noteForm.text;
+      if (text.length > NoteConstant.noteMaxCount) {
+        this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
+        this.model.showError = true;
+        return false;
+      }
+      if (text.length == 0) {
+        this.errorInfo = this.$t('error.100011');
+        this.model.showError = true;
+        return false;
+      }
+      return true;
+    },
+    cloaseErrorMessage() {
+      this.errorInfo = '';
+      this.model.showError = false;
+    },
+    submitNote() {
+      if (this.state.locking == 1) {
+        return;
+      }
+
+      if (!this.validateForm()) {
+        this.state.locking = 0;
+        return;
+      }
+
+      this.model.submitting = true;
+
+      let that = this;
+      this.save().then(res => {
+        if (res.data && res.data.code == "000000") {
+          storage.session.setText(that.secret.storeKey + "_share", '1');
+
+          that.state.commited = 1;
+          setStoreText(this.noteForm, this.state, this.secret);
+
+          location.reload();
+          this.state.locking = 0;
+        } else {
+          alert(res.data.code);
+          this.model.submitting = false;
+          this.state.locking = 0;
+          if (res.data.code == "100013" || res.data.code == "800001") {
+            let key = setNewStoreText(this.noteForm);
+            location.href = "/" + key;
+          }
+
+        }
+      }).catch(error => {
+        alert(error);
+      });
+    },
+    refresh() {
+      location.reload();
+    },
+    createNote() {
+      window.open("/");
+    },
+    showDeleteModel() {
+      this.model.showDelete = true;
+    },
+    dropNote() {
+      this.model.deleting = true;
+      storage.local.delete(this.secret.storeKey);
+      storage.session.setText(this.secret.storeKey + "_delete", 1);
+      location.reload();
+    },
+    bindToTopEvent() {
+      let that = this;
+      window.onscroll = function () {
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        if (scrollTop >= 20) {
+          that.toTopState = true;
+          that.showHeaderShade = true;
+        } else {
+          that.toTopState = false;
+          that.showHeaderShade = false;
+        }
+      }
+    },
+    bindCtrlAllEvent() {
+      if (window.getSelection && document.createRange) {
+        document.onkeydown = (e) => {
+          if ((e.ctrlKey || e.metaKey) && e.key == "a") {
+            e.preventDefault();
+            var element = document.getElementById("noteText");
+            element.select();
+          }
+        }
+      }
+    }
+  }
+}
+</script>

src/views/ViewNote.vue

@@ -420,14 +420,10 @@ export default {
 
       this.startClock();
 
-      
-      let that = this;
-      storage.local.getText(this.secret.storeKey).then(function(storeInfo){
-        that.loadText(storeInfo);
-      });
-
       storage.local.dynamicClear();
 
+      this.loadText();
+
       this.bindCtrlAllEvent();
       this.bindCopyUrlEvent();
       this.bindToTopEvent();
@@ -521,9 +517,8 @@ export default {
         that.state.ttl = that.state.initTtl - (new Date().getTime() - that.state.initTime);
 
         if (that.state.ttl <= 0) {
-          storage.local.delete(that.secret.storeKey).then(function(){
+          storage.local.delete(that.secret.storeKey);
           location.reload();
-          });
         }
       }, 1000)
     },
@@ -559,9 +554,8 @@ export default {
       let that = this;
       deleteNote(this.noteForm.key).then(res => {
         if (res.data&&res.data.code=="000000") {
-          storage.local.delete(that.secret.storeKey).then(function(){
+          storage.local.delete(that.secret.storeKey);
           location.reload();
-          });
         } else {
           that.model.deleting = false;
         }
@@ -569,9 +563,11 @@ export default {
         alert(error);
       });
     },
-    loadText(storeInfo) {
+    loadText() {
       let that = this;
 
+      let storeInfo = storage.local.getText(this.secret.storeKey);
+
       let starray = [];
       if (storeInfo) {
         starray = storeInfo.split('|');