suspend

.env

@@ -1 +0,0 @@
-VUE_APP_TITLE=flagnote.com

.env.development

@@ -1,6 +1,6 @@
-NODE_ENV=developement
+NODE_ENV = developement
-VUE_APP_FLAG=dev
 VUE_APP_BASE_NAME = developement
 VUE_APP_BASE_URL = http://localhost:8080
-VUE_APP_NOTE_MAX_COUNT = 131072
+VUE_APP_NOTE_MAX_COUNT = 409600
-VUE_APP_NOTE_MAX_DESC = 128K
+VUE_APP_NOTE_MAX_DESC = 400K
+

.env.production

@@ -1,6 +1,5 @@
-NODE_ENV=production
+NODE_ENV = production
-VUE_APP_FLAG=prod
 VUE_APP_BASE_NAME = production
 VUE_APP_BASE_URL = https://flagnote.com
-VUE_APP_NOTE_MAX_COUNT = 131072
+VUE_APP_NOTE_MAX_COUNT = 409600
-VUE_APP_NOTE_MAX_DESC = 128K
+VUE_APP_NOTE_MAX_DESC = 400K

.env.staging

@@ -1 +0,0 @@
-VUE_APP_FLAG=staging

.eslintignore

@@ -1,2 +0,0 @@
-assets
-mock

.eslintrc.json

@@ -1,31 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "plugin:vue/essential",
-        "airbnb-base"
-    ],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "vue"
-    ],
-    "rules": {
-        "semi": [2, "never"],
-        "comma-dangle": 0,
-        "no-console": 0,
-        "quotes": [2, "single"],
-        "no-undef": 0,
-        "no-debugger": 0,
-        "import/no-unresolved": 0,
-        "import/extensions": 0,
-        "no-param-reassign": 0,
-        "vue/multi-word-component-names": 0,
-        "vue/no-multiple-template-root": 0,
-        "import/no-extraneous-dependencies": 0
-    }
-}

.gitignore

@@ -21,5 +21,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-/package-lock.json
-/yarn.lock

README.md

@@ -1,6 +1,24 @@
+# flagnote-web
+
+## Project setup
+```
 yarn install
+```
 
-yarn build:prod
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
 
-yarn dev
+### Compiles and minifies for production
+```
+yarn build
+```
 
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -1,15 +1,5 @@
-module.exports = {
+// module.exports = {
-  presets: [
+//   presets: [
-    '@vue/cli-plugin-babel/preset',
+//     '@vue/cli-plugin-babel/preset'
-  ],
+//   ]
-  "plugins": [
+// }
-    [
-      "import",
-      {
-        "libraryName": "view-ui-plus",
-        "libraryDirectory": "src/components"
-      },
-      "view-ui-plus"
-    ]
-  ]
-};

jsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "module": "esnext",
     "baseUrl": "./",
+    "jsx": "preserve",
     "moduleResolution": "node",
     "paths": {
       "@/*": [
@@ -14,6 +15,10 @@
       "dom",
       "dom.iterable",
       "scripthost"
-    ]
+    ],
+    "removeComments": true,
+  },
+  "vueCompilerOptions": {
+    "target": 2.7
   }
 }

package.json

@@ -1,66 +1,62 @@
 {
   "name": "flagnote-web",
-  "version": "1.0.0",
+  "version": "0.1.0",
-  "description": "flagnote web",
   "private": true,
   "scripts": {
-    "dev": "npm run serve",
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --mode production",
-    "build:staging": "vue-cli-service build --mode=staging",
+    "build.test": "vue-cli-service build --mode test",
-    "build:prod": "vue-cli-service build --mode=production",
+    "build.production": "vue-cli-service build --mode production",
-    "lint": "eslint ./src --ext .js,.vue",
+    "lint": "vue-cli-service lint"
-    "lint:fix": "eslint ./src --ext .js,.vue --fix",
-    "prepare": "husky install"
   },
   "dependencies": {
-    "axios": "^0.28.1",
+    "axios": "^0.27.2",
-    "babel-plugin-import": "^1.13.6",
+    "bluebird": "^3.7.2",
-    "buffer": "^6.0.3",
     "clipboard": "^2.0.11",
-    "core-js": "^3.37.1",
+    "crypto-js": "^4.1.1",
-    "crypto-js": "^4.2.0",
     "escape-html": "^1.0.3",
     "file-saver": "^2.0.5",
-    "github-markdown-css": "^5.6.1",
+    "localforage": "^1.10.0",
-    "html2canvas": "^1.4.1",
-    "json-editor-vue": "^0.15.1",
     "pako": "^2.1.0",
-    "qrcodejs2-fixes": "^0.0.2",
+    "qrcodejs2": "^0.0.2",
-    "view-ui-plus": "^1.3.18",
+    "view-design": "^4.7.0",
-    "vue": "^3.4.31",
+    "vue": "^2.7.14",
     "vue-axios": "^3.5.2",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "^8.28.2",
-    "vue-json-pretty": "^2.4.0",
+    "vue-router": "^3.6.5"
-    "vue-markdown-render": "^2.2.1",
-    "vue-router": "^4.4.0",
-    "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "compression-webpack-plugin": "^11.1.0",
+    "compression-webpack-plugin": "^10.0.0",
-    "eslint": "^8.14.0",
+    "core-js": "^3.26.1",
-    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-vue": "^8.0.3",
-    "eslint-plugin-vue": "^8.7.1",
+    "javascript-obfuscator": "^4.0.0",
-    "husky": "^7.0.4",
+    "webpack": "^5.1.0",
-    "javascript-obfuscator": "^4.1.1",
-    "less": "^4.2.0",
-    "less-loader": "^12.2.0",
-    "mockjs": "^1.1.0",
     "webpack-obfuscator": "^3.5.1"
   },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not dead",
+    "not dead"
-    "not ie 11"
+  ]
-  ],
-  "engines": {
-    "node": ">= 12.0.0",
-    "npm": ">= 6.9.0"
-  }
 }

public/index.html

@@ -18,18 +18,45 @@
   <meta http-equiv="Cache-control" content="no-cache" />
   <meta http-equiv="Cache" content="no-cache" />
   <link rel="icon" href="/static/favicon.png" />
-  <title>
+  <title>flagnote.com</title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
   <style>
-
+    body {
+      background-color: #dddddd
+    }
   </style>
-  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" rel="stylesheet"
-    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    type="text/javascript"></script>
-  <% } %>
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js" rel="stylesheet"
-  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+    type="text/javascript"></script>
-    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+  <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" rel="stylesheet"
+    type="text/javascript"></script>
+  <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" rel="stylesheet"
+    type="text/javascript"></script>
+  <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" rel="stylesheet"
+    type="text/javascript"></script>
+  <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" rel="stylesheet"
+    type="text/javascript"></script>
+  <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js" rel="stylesheet"
+    type="text/javascript"></script>
+  <script>
+    window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm"
+  </script>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/styles/iview.css">
+  <!--Global site tag(gtag.js)-Google Analytics-->
+  <!--
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-FPS9PD2DFF"></script>
+
+  <script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) } gtag("js", new Date()); gtag("config", "G-FPS9PD2DFF");</script>
+    -->
 </head>
 
 <body><noscript><strong>Please enable JavaScript to continue.</strong></noscript>
@@ -40,6 +67,8 @@
     if (!!window.ActiveXObject || "ActiveXObject" in window) {
       document.querySelector('#noie').style.display = 'block';
     }
+
+
   </script>
 </body>
 

public/redirect.html

@@ -6,11 +6,18 @@
     <meta name="renderer" content="webkit" />
     <meta name="force-rendering" content="webkit" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport"
+        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
+    <meta name="keywords" content="flagnote" />
+    <meta name="description" content="flag note" />
     <meta name="theme-color" content="#ed4014" />
+    <meta name="format-detection" content="telephone=no,email=no,adress=no" />
+    <meta name="google" content="notranslate">
     <meta http-equiv="Expires" content="0" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Cache-control" content="no-cache" />
     <meta http-equiv="Cache" content="no-cache" />
+    <link rel="icon" href="/static/favicon.png" />
     <title>flagnote.com</title>
     <style>
         body {
@@ -18,7 +25,10 @@
         }
     </style>
     <script>
+
         const servicePath = "";
+        //const servicePath="https://flagnote.com";
+
         function ajaxGet(url) {
             let data = null;
             let xmlhttp = new XMLHttpRequest();
@@ -52,12 +62,8 @@
 
         let keyMeta = getKeyMeta();
 
-        if (keyMeta && keyMeta.key) {
+        sessionStorage.setItem("keyMeta", JSON.stringify(keyMeta));
-            localStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
+        location.href = "/" + keyMeta.key;
-            location.href = "/" + keyMeta.key;
-        } else {
-            location.href = "/100006";
-        }
     </script>
 </head>
 

src/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <router-view></router-view>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
@@ -11,65 +13,27 @@ export default {
 </script>
 
 <style>
-body {
+
-  -webkit-text-size-adjust: 100% !important;
+.ivu-btn:focus {
-  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+  box-shadow: none !important;
-    "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
-    sans-serif;
-  background-color: #dddddd;
-  height: 100%;
 }
 
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-align: center;
   font-size: medium;
 }
 
-.ivu-layout-content {
+body {
-  padding: 0px;
+  -webkit-text-size-adjust: 100% !important;
+  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+    "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
+    sans-serif;
+  background-color: #dddddd;
 }
 
-.header {
-  background: #dddddd;
-}
-
-.ivu-layout-header {
-  line-height: normal;
-  height: auto;
-  padding: 0px;
-}
-
-.ivu-layout-footer {
-    padding: 5px;
-}
-
-.layout-footer-center {
-  background: #dddddd;
-  text-align: center;
-}
-
-.ivu-card-bordered {
-  border: 0px solid #dcdee2;
-  border-color: #e8eaec;
-}
-
-.ivu-btn:focus {
-  box-shadow: none !important;
-}
-
-.layout {
-  height: 100%;
-  background: #dddddd;
-}
-
-.content {
-  background: #dddddd;
-}
-
-
-
 .monoFt {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -85,14 +49,14 @@ body {
 
 .noteHeader {
   background-color: white;
-  width: 100%;
+  width:100%;
-  height: 40px;
+  height:40px;
 }
 
 .noteHeaderShade {
-  background-color: white;
+  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
-  width: 100%;
+  width:100%;
-  height: 40px;
+  height:40px;
   border-bottom: dashed #ed4014 1px;
 }
 
@@ -116,24 +80,24 @@ body {
 }
 
 
-::selection {
+#noteText::selection {
-  background: #dddddd;
+  background: #ed4014;
-  color: #ed4014;
+  color: white;
 }
 
-::-moz-selection {
+#noteText::-moz-selection {
-  background: #dddddd;
+  background: #ed4014;
-  color: #ed4014;
+  color: white;
 }
 
-br::selection {
+#noteText br::selection {
-  background: #dddddd;
+  background: #ed4014;
-  color: #ed4014;
+  color: white;
 }
 
-br::-moz-selection {
+#noteText br::-moz-selection {
-  background: #dddddd;
+  background: #ed4014;
-  color: #ed4014;
+  color: white;
 }
 
 .noteUrl {
@@ -158,8 +122,10 @@ br::-moz-selection {
   display: none;
 }
 
-.fnmodal {
+button span {
-  align-items: center;
+  margin-left: 0px !important;
-  justify-content: center;
+  font-size: 16px !important;
+  font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
+  margin-bottom: 6px;
 }
 </style>

src/api/note.js

@@ -1,10 +1,8 @@
 import axios from "axios";
 import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
-import { md5, wrap} from "@/libs/secret";
+import { md5, wrap } from "@/libs/secret";
 import NoteConstant from "@/libs/constants";
-import { setStoreText } from "@/libs/noteStorage";
-import { Buffer } from 'buffer';
 
 axios.interceptors.response.use(undefined, (err) => {
   const { config: originalRequest } = err;
@@ -19,12 +17,10 @@ axios.interceptors.response.use(undefined, (err) => {
   }
 });
 
-export function saveNote(noteForm,state, secret) {
+export async function saveNote(noteForm, secret) {
-  setStoreText(noteForm, state, secret);
-
   let storeKey = secret.storeKey;
 
-  let storeInfo = storage.local.getText(storeKey);
+  const storeInfo = await storage.local.getText(storeKey);
   let starray = storeInfo.split("|");
 
   if (starray[2] == "1") {
@@ -52,8 +48,8 @@ export function saveNote(noteForm,state, secret) {
     });
   }
 
-  let array = Buffer.from(note.text, 'base64')
+  let bufferArrary = eval("[100,111,32,110,111,116,32," + note.text + ",100,111,32,101,118,105,108]");
-
+  let array = Uint8Array.from(bufferArrary);
   let blob = new Blob([array], { type: "application/octet-stream" });
   let form = new FormData();
   form.append("file", blob, noteForm.key);
@@ -75,11 +71,13 @@ export function saveNote(noteForm,state, secret) {
   });
 }
 
-export function deleteNote(key) {
+export async function deleteNote(key) {
+  let storeKey = getStoreKey(key);
+  const storeInfo = await storage.local.getText(storeKey);
   let note = {
+    cipher: storeInfo.substring(2, 34),
     key: key,
   };
-
   return axios({
     url: NoteConstant.servicePath + "/note/" + key + "/delete",
     method: "post",
@@ -98,6 +96,28 @@ export function getNoteBlob(key) {
   });
 }
 
+export function getNoteMetaNew(key) {
+  let url = NoteConstant.servicePath + "/note/" + key + "/noteMeta";
+  return axios({
+    url: url,
+    method: "get",
+    ignoreError: 1,
+    original: true,
+    source: true,
+  });
+}
+
+export function getKeyMetaNew() {
+  let url = NoteConstant.servicePath + "/note/keyMeta";
+  return axios({
+    url: url,
+    method: "get",
+    ignoreError: 1,
+    original: true,
+    source: true,
+  });
+}
+
 export function getNoteMeta(key) {
   let url = NoteConstant.servicePath + "/note/" + key + "/noteMeta";
   let noteMeta = null;

src/i18n/config/en.js

@@ -4,7 +4,7 @@ const en = {
   },
   content: {
     blankTip: "I am Blank.",
-    noteTip: "Write here.",
+    noteTip: "Start writing something...",
     deleteTip: "The note will be deleted automatically. ttl:"
   },
   button: {

src/i18n/config/zh.js

@@ -4,7 +4,7 @@ const zh = {
   },
   content: {
     blankTip: "空白的内容。",
-    noteTip: "写在这儿。",
+    noteTip: "开始写下一些东西吧。。。",
     deleteTip: "笔记将被自动删除。剩余时间："
   },
   button: {
@@ -26,9 +26,6 @@ const zh = {
     "100006": "服务器不可用！",
     "100011": "笔记为空!",
     "100012": "笔记过大，超过{0}!",
-    "100013": "The address is used, Copy to a new address.",
-    "100014": "The text has been modified.",
-    "800001": "Repetitive Submit!",
   }
 };
 export default zh;

src/i18n/index.js

@@ -1,4 +1,6 @@
-import { createI18n } from "vue-i18n";
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+Vue.use(VueI18n);
 
 import zh from "./config/zh";
 import en from "./config/en";
@@ -8,16 +10,11 @@ const messages = {
   en,
 }
 
-const i18n = createI18n({
+const i18n = new VueI18n({
-  allowComposition: true,
+  messages: messages,
-  globalInjection: true,
-  legacy: false,
   locale: getLocale(),
-  messages
 });
 
-
-
 function getLocale() {
   var lang = navigator.language;
   if (lang) {

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/libs/secret.js

@@ -1,41 +1,8 @@
 import CryptoJS from "crypto-js";
 import pako from "pako";
-import { Buffer } from "buffer";
+//import {gzip_encode_raw,gzip_decode_raw} from 'wasm-flate';
-
-CryptoJS.enc.Uint8Array = {
-  /**
-  * WordArray转Uint8Array
-  * @param wordArray
-  * @returns {Uint8Array}
-  */
-  stringify: function (wordArray) {
-    var len = wordArray.words.length,
-      u8_array = new Uint8Array(len << 2),
-      offset = 0, word, i;
-    for (i = 0; i < len; i++) {
-      word = wordArray.words[i];
-      u8_array[offset++] = word >> 24;
-      u8_array[offset++] = (word >> 16) & 0xff;
-      u8_array[offset++] = (word >> 8) & 0xff;
-      u8_array[offset++] = word & 0xff;
-    }
-    return u8_array;
-  },
-  /**
-  * Uint8Array转WordArray
-  * @param u8arr
-  * @returns {WordArray}
-  */
-  parse: function (u8arr) {
-    var len = u8arr.length;
-    var words = [];
-    for (var i = 0; i < len; i++) {
-      words[i >>> 2] |= (u8arr[i] & 0xff) << (24 - (i % 4) * 8);
-    }
-    return CryptoJS.lib.WordArray.create(words, len);
-  }
-};
 
+const wasmFlate = window.wasm_bindgen;
 
 /**
  * @word 要加密的内容
@@ -44,14 +11,14 @@ CryptoJS.enc.Uint8Array = {
 
 export function wrap(text, secretKey) {
   text = "FLAGNOTE#" + text;
-  let ui8ary = noteZip(text);
+  let result = aesEncrypt(text, secretKey);
-  let result = aesEncrypt(convertUint8ArrayToWordArray(ui8ary), secretKey);
+  result = noteZip(result);
   return result;
 }
 
-export function unwrap(text, secretKey) {
+export function unwrap(storeText, secretKey) {
-  let wdary = aesDecrypt(text, secretKey);
+  let result = noteUnzip(storeText);
-  let result = noteUnzip(convertWordArrayToUint8Array(wdary));
+  result = aesDecrypt(result, secretKey);
   if (result.startsWith("FLAGNOTE#")) {
     return result.substring(9);
   }
@@ -70,7 +37,7 @@ export function aesEncrypt(word, keyWord) {
   let key = CryptoJS.enc.Utf8.parse(keyWord);
   let encrypted = CryptoJS.AES.encrypt(word, key, {
     mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.ZeroPadding,
+    padding: CryptoJS.pad.Pkcs7,
   });
   return encrypted.toString();
 }
@@ -81,24 +48,28 @@ export function aesDecrypt(word, keyWord) {
   let key = CryptoJS.enc.Utf8.parse(keyWord);
   let decrypt = CryptoJS.AES.decrypt(word, key, {
     mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.ZeroPadding,
+    padding: CryptoJS.pad.Pkcs7,
   });
-  return decrypt;
+  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
 }
 
-//base64 encode btoa
+//base64 encode
-export function base64Encode(text) {
+export function encode(text) {
   return Buffer.from(text, 'utf-8').toString('base64');
 }
 
-//base64 decode atob
+//base64 decode
-export function base64Decode(text) {
+export function decode(text) {
-  return Buffer.from(text, 'base64').toString('utf-8');
+  return Buffer.from(text,'base64').toString('utf-8');
 }
 
-export function noteUnzip(wdary) {
+export function noteUnzip(text) {
-  let data = unzip(wdary);
+  let charData = text.split(",").map(function (x) {
-  let text = new TextDecoder().decode(data);
+    return parseInt(x);
+  });
+  let binData = new Uint8Array(charData);
+  let data = unzip(binData);
+  text   = String.fromCharCode.apply(null, new Uint8Array(data));
   return text;
 }
 
@@ -109,35 +80,51 @@ export function noteZip(text) {
   return text;
 }
 
-export function zip(data) {
+export function zip(data){
+   if(wasmFlate.__wbindgen_wasm_module){
+     return wasmFlate.gzip_encode_raw(data);
+   }
+
   return pako.gzip(data);
 }
 
-export function unzip(data) {
+export function unzip(data){
+  if(wasmFlate.__wbindgen_wasm_module){
+    return wasmFlate.gzip_decode_raw(data);
+  }
+
   return pako.ungzip(data);
 }
 
+// function convertWordArrayToUint8Array(wordArray) {
+// 	var len = wordArray.words.length,
+// 		u8_array = new Uint8Array(len << 2),
+// 		offset = 0, word, i
+// 	;
+// 	for (i=0; i<len; i++) {
+// 		word = wordArray.words[i];
+// 		u8_array[offset++] = word >> 24;
+// 		u8_array[offset++] = (word >> 16) & 0xff;
+// 		u8_array[offset++] = (word >> 8) & 0xff;
+// 		u8_array[offset++] = word & 0xff;
+// 	}
+// 	return u8_array;
+// }
 
-export function convertBase64ToHexString(base64) {
+// function convertUint8ArrayToWordArray(u8Array) {
-  return CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(base64));
+// 	var words = [], i = 0, len = u8Array.length;
-}
  
-export function convertHexStringToBase64(hexString) {
+// 	while (i < len) {
-  return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(hexString));
+// 		words.push(
-}
+// 			(u8Array[i++] << 24) |
-
+// 			(u8Array[i++] << 16) |
-export function convertHexStringToUint8Array(hexString) {
+// 			(u8Array[i++] << 8)  |
-  return Uint8Array.from(Buffer.from(hexString, 'hex'));
+// 			(u8Array[i++])
-}
+// 		);
-export function convertUint8ArrayToHexString(byteArray) {
+// 	}
-  return Buffer.from(byteArray).toString('hex');
-}
-
-function convertWordArrayToUint8Array(wordArray) {
-  return CryptoJS.enc.Uint8Array.stringify(wordArray);
-}
-
-function convertUint8ArrayToWordArray(u8Array) {
-  return CryptoJS.enc.Uint8Array.parse(u8Array);
-}
  
+// 	return {
+// 		sigBytes: words.length * 4,
+// 		words: words
+// 	};
+// }

src/libs/storage.js

@@ -1,3 +1,5 @@
+import localforage from "localforage";
+
 class Storage {
   constructor() {
     this.session = new Session();
@@ -29,23 +31,23 @@ class Session {
 
 class Local {
   setObject(key, value) {
-    localStorage.setItem(key, JSON.stringify(value));
+    return localforage.setItem(key, JSON.stringify(value));
   }
 
   getObject(key) {
-    return JSON.parse(localStorage.getItem(key));
+    return JSON.parse(localforage.getItem(key));
   }
 
   delete(key) {
-    localStorage.removeItem(key);
+    return localforage.removeItem(key);
   }
 
   setText(key, value) {
-    localStorage.setItem(key, value);
+    return localforage.setItem(key, value);
   }
 
   getText(key) {
-    return localStorage.getItem(key);
+    return localforage.getItem(key);
   }
 
   getUseSize() {

src/main.js

@@ -1,44 +1,25 @@
-import { createApp } from 'vue'
+import Vue from 'vue'
-// import ViewUIPlus from 'view-ui-plus'
 import App from './App.vue'
 import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import './plugins/iview.js'
 import i18n from './i18n/'
-import NoteConstant from "@/libs/constants"
+import NoteConstant from "@/libs/constants";
-
-import {Layout,Header,Row,Col,Modal,Button,ButtonGroup,Card,Content,Input,Form,WordCount,Footer,Badge,Icon,Tag} from 'view-ui-plus';
-//import 'view-ui-plus/dist/styles/viewuiplus.css';
 
 axios.defaults.baseURL = NoteConstant.servicePath;
+
+Vue.use(VueAxios, axios)
+
 const debugFlag = process.env.NODE_ENV !== 'production';
+Vue.config.debug = debugFlag;
+Vue.config.devtools = debugFlag;
+Vue.config.productionTip = debugFlag;
 
-const app = createApp(App)
+new Vue({
-
+    i18n,
-app.config.debug = debugFlag;
+    router,
-app.config.devtools = debugFlag;
+    render: h => h(App)
-app.config.productionTip = debugFlag;
+}).$mount('#app')
-
-app.component('Layout', Layout);
-app.component('Header', Header);
-app.component('Row', Row);
-app.component('Col', Col);
-app.component('Modal', Modal);
-app.component('Button', Button);
-app.component('ButtonGroup', ButtonGroup);
-app.component('Card', Card);
-app.component('Content', Content);
-app.component('Input', Input);
-app.component('Form', Form);
-app.component('WordCount', WordCount);
-app.component('Footer', Footer);
-app.component('Badge', Badge);
-app.component('Icon', Icon);
-app.component('Tag', Tag);
 
 
-app.use(router)
-  .use(i18n)
-  .use(VueAxios, axios)
-  .mount('#app')
-

src/plugins/iview.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import ViewUI from 'view-design'
+
+Vue.use(ViewUI)
+
+//import 'view-design/dist/styles/iview.css'

src/router/index.js

@@ -1,174 +1,22 @@
-import { createRouter, createWebHistory } from "vue-router";
+import Vue from "vue";
-import EditNote from "@/views/EditNote.vue";
+import VueRouter from "vue-router";
-import ViewNote from "@/views/ViewNote.vue";
+import NoteView from "@/views/NoteView.vue";
-// import ViewMdNote from "@/views/ViewMdNote.vue";
+import ErrorView from "@/views/ErrorView.vue";
-// import ViewJsonNote from "@/views/ViewJsonNote.vue";
-import ErrorRoute from "@/views/ErrorRoute.vue";
-import ErrorNote from "@/views/ErrorNote.vue";
-import { getNoteMeta } from "@/api/note";
-import { getStoreKey } from "@/api/lock";
-import storage from "@/libs/storage";
 
-var keyMeta = null;
+Vue.use(VueRouter);
-var noteMeta = null;
-var errorMeta = null;
-
-function getKeyMetaParam() {
-  return keyMeta;
-}
-
-function getNoteMetaParam() {
-  return noteMeta;
-}
-
-function getErrorMetaParam() {
-  return errorMeta;
-}
-
-function getNoteView() {
-  if (errorMeta) {
-    return;
-  }
-
-  let path = location.pathname;
-
-  let key = path.substring(1, path.length);
-
-  let isMd = path.endsWith(".md");
-  if (isMd) {
-    key = path.substring(1, path.length - 3);
-  }
-
-  let isJson = path.endsWith(".json");
-  if (isJson) {
-    key = path.substring(1, path.length - 5);
-  }
-
-  keyMeta = storage.local.getObject(key + ".keyMeta");
-  if (keyMeta && keyMeta.key) {
-    key = keyMeta.key;
-  }
-
-  let regKey = /^[abcdefhikmnopqstuvwxyz23456789]{16}$/;
-
-  if (!regKey.test(key)) {
-    errorMeta = 100002;
-    return ErrorNote;
-  }
-
-  if (keyMeta && keyMeta.key && !isMd && !isJson) {
-    //firstEdit
-    return EditNote;
-  }
-
-  //set noteMeta
-  if (noteMeta == null) {
-    noteMeta = getNoteMeta(key);
-  }
-
-  //server error
-  if (!noteMeta) {
-    errorMeta = 100006;
-    return ErrorNote;
-  }
-
-  //invalidated key
-  if (!noteMeta.key) {
-    errorMeta = 100002;
-    return ErrorNote;
-  }
-
-  //validated state
-  if (1 == noteMeta.state) {
-    if (isMd) {
-      return ViewMdNote;
-    } else if (isJson) {
-      return ViewJsonNote;
-    } else {
-      return ViewNote;
-    }
-  }
-
-  //deleted
-  if (0 == noteMeta.state) {
-    let storeKey = getStoreKey(key);
-    storage.local.delete(storeKey);
-    // user deleted
-    if (noteMeta.ttl > 0) {
-      errorMeta = 100003;
-      return ErrorNote;
-    } else {
-      // timeout
-      errorMeta = 100004;
-      return ErrorNote;
-    }
-  }
-
-  if (null == noteMeta.state) {
-    let storeKey = getStoreKey(key);
-    //if has storage , then edit
-    if (storage.local.getText(storeKey)) {
-      return EditNote;
-    } else {
-      //storage is empty
-      let df = storage.session.getText(storeKey + "_delete");
-      if (df) {
-        //unsubmitted,user deleted.
-        errorMeta = 100003;
-        return ErrorNote;
-      } else {
-        //unsubmitted
-        errorMeta = 100005;
-        return ErrorNote;
-      }
-    }
-  }
-
-  // other exception
-  errorMeta = 100001;
-  return ErrorNote;
-}
 
 const routes = [
-  { path: "/error_:code([0-9]{6})", component: ErrorNote },
   {
-    path: "/:name([a-z0-9]{10,20})",
+    path: "/:name([abcdefhikmnopqstuvwxyz23456789]{16})",
     name: "note",
-    component: getNoteView(),
+    component: NoteView,
-    meta: {
-      keyMeta: getKeyMetaParam(),
-      noteMeta: getNoteMetaParam(),
-      errorMeta: getErrorMetaParam(),
-    },
   },
-  // {
+  { path: "/:path(.*)", component: ErrorView }
-  //   path: "/:name([a-z0-9]{10,20}).md",
-  //   name: "md",
-  //   component: getNoteView(),
-  //   meta: {
-  //     keyMeta: getKeyMetaParam(),
-  //     noteMeta: getNoteMetaParam(),
-  //     errorMeta: getErrorMetaParam(),
-  //   },
-  // },
-  // {
-  //   path: "/:name([a-z0-9]{10,20}).json",
-  //   name: "json",
-  //   component: getNoteView(),
-  //   meta: {
-  //     keyMeta: getKeyMetaParam(),
-  //     noteMeta: getNoteMetaParam(),
-  //     errorMeta: getErrorMetaParam(),
-  //   },
-  // },
-  { path: "/:path(.*)", component: ErrorRoute },
 ];
 
-const router = createRouter({
+const router = new VueRouter({
-  history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
-  linkExactActiveClass: "active",
-  mode: "history",
   routes,
+  mode: "history",
 });
 
 export default router;

src/views/EditNote.vue

@@ -1,6 +1,66 @@
 <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>
@@ -8,30 +68,42 @@
 
     <Layout>
 
-      <div style="position:fixed;z-index:10;width:100%">
+      <Header class="header">
-        <Header class="header">
+        <Row>
-          <Row>
+          <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
-            <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 }">
-              :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-cloud-upload"></Button>
+                    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>
@@ -40,56 +112,50 @@
               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>
+                  @click="createNote(); switchMenu(); " icon="md-add"></Button>
+                <!--
 
-                <Button aria-label="crop" v-show="model.showDownloadText" type="error"
+                    <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
-                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"
+                    @click="refreshPage()"></Button>
-                  icon="md-crop"></Button>
+                  -->
 
                 <Button aria-label="download text" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
+                  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>
+                  @click="showDeleteModel(); switchMenu(); "></Button>
 
               </Button-group>
 
 
             </div>
+          </Affix>
 
-            </Col>
+
-          </Row>
+
-        </Header>
+          </Col>
-      </div>
+        </Row>
+      </Header>
 
       <Content class="content">
-        <div>
+        <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 }">
-            <div class="noteHeader" style="height:40px;border-left: 2px solid #ed4014;"></div>
-            </Col>
-          </Row>
-        </div>
-      </Content>
-
-      <Content class="content">
-        <div style="min-height: 250px;">
           <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 ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
+                <div id="wrapper" style="border-left: 2px solid #ed4014;">
                   <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
-                    :autosize="{maxRows: 100000 }" :placeholder="$t('content.noteTip')"
+                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
-                    @input="recordText" @on-keydown="recordEventKdown" />
+                    @on-keydown="recordEventKdown" />
-
                 </div>
               </Form>
             </Card>
-            <WordCount :value="noteForm.text" :total="100000" style="border-top:1px solid #ed4014;float:left" />
             </Col>
 
           </Row>
@@ -97,24 +163,21 @@
 
       </Content>
 
-      <Footer class="layout-footer-center">2024 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
     </Layout>
 
-    <Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal"
+    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
-      :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;"
+        <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
-          @click="dropNote()">{{
+          $t("button.yes")
-            $t("button.yes")
+        }}</Button>
-          }}</Button>
       </p>
     </Modal>
 
-    <Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal"
+    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
-      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
         {{ errorInfo }}
       </p>
@@ -134,12 +197,10 @@ import { unwrap } from '../libs/secret'
 import { saveNote } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
-import { setStoreText, setNewStoreText } from "@/libs/noteStorage";
+import { setStoreText,setNewStoreText } from "@/libs/noteStorage";
 import { saveAs } from 'file-saver';
 import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
-import html2canvas from "html2canvas";
-
 
 export default {
   name: 'EditNote',
@@ -161,7 +222,6 @@ export default {
         lock: 0,
         locking: 0,
         commited: 0,
-        deleted: 0,
         serverTime: '',
         initTime: '',
       },
@@ -175,20 +235,23 @@ export default {
       toTopState: false,
       showMenuState: false,
       showHeaderShade: false,
+      pageSession: '',
       errorInfo: '',
-      lastEditTime: 0,
-      backStoreTextInterval: null,
-      lastStoreCount: 0,
-      lastStoreTime: 0,
     }
   },
   created() {
-    this.editTime = new Date().getTime();
+    this.pageSession = new Date().getTime();
 
     // read $route
     this.noteForm.key = this.$route.params.name;
     let keyMeta = this.$route.meta.keyMeta;
 
+    //ipad chrome url not redirect
+    let path = location.pathname;
+    if ("/" == path) {
+      history.pushState('', '', '/' + this.noteForm.key);
+    }
+
     //wx does not show downloadText
     this.model.showDownloadText = !isWeixin();
 
@@ -213,7 +276,6 @@ export default {
       // }
 
       storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
-      storage.local.delete(keyMeta.key + ".keyMeta");
     } else {
       // second edit
       let noteMeta = this.$route.meta.noteMeta;
@@ -231,36 +293,32 @@ export default {
       }
     }
 
-    this.lastStoreCount = this.noteForm.text.length;
-    this.lastEditTime = new Date().getTime();
-    this.lastStoreTime = this.lastEditTime;
-
     this.bindCtrlAllEvent();
     this.bindToTopEvent();
 
-    this.$nextTick(() => {
+    window.wasm_bindgen(window.wasm_flate_bg_path);
-      let clientHeight = document.documentElement.clientHeight;
-      let elementNoteText = document.getElementById("noteText");
-      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
-    })
-
   },
   mounted() {
-    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    const myObserver = new ResizeObserver(entries => {
-    window.onresize = () => {
+      // iterate over the entries, do something.
-      return (() => {
+      entries.forEach(entry => {
-      let clientHeight = document.documentElement.clientHeight;
+        let affix = document.querySelector('.ivu-affix');
-      let elementNoteText = document.getElementById("noteText");
+        if (affix) {
-      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
+          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-      })()
+        }
-    }
+
+      });
+    });
+
+    const someOtherEl = document.querySelector('#wrapper');
+
+    myObserver.observe(someOtherEl);
   },
   updated() {
   },
   beforeDestroy() {
   },
   destroyed() {
-    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
   },
   computed: {},
   watch: {},
@@ -297,49 +355,7 @@ export default {
         return;
       }
 
-      let nowEditCount = this.noteForm.text.length;
+      setStoreText(this.noteForm, this.state, this.secret);
-      let nowEditTime = new Date().getTime();
-
-      if (nowEditCount < 1024) {
-        setStoreText(this.noteForm, this.state, this.secret);
-        this.lastStoreTime = nowEditTime;
-        this.lastStoreCount = nowEditCount;
-      } else {
-        if (null == this.backStoreTextInterval) {
-          this.backStoreTextInterval = window.setInterval(this.backStoreFunction(), 500);
-        }
-      }
-
-      this.lastEditTime = nowEditTime;
-    },
-    backStoreFunction() {
-      let that = this;
-      return function () {
-        that.backStoreText();
-      }
-    },
-    backStoreText() {
-      let nowEditCount = this.noteForm.text.length;
-      let nowEditTime = new Date().getTime();
-      if (Math.abs(nowEditCount - this.lastStoreCount) > 10) {
-        setStoreText(this.noteForm, this.state, this.secret);
-        this.lastStoreTime = this.lastEditTime;
-        this.lastStoreCount = nowEditCount;
-      } else {
-        if (nowEditTime - this.lastEditTime >= 1000 && nowEditTime - this.lastEditTime < 20000) {
-          if (this.lastEditTime != this.lastStoreTime) {
-            setStoreText(this.noteForm, this.state, this.secret);
-            this.lastStoreTime = this.lastEditTime;
-            this.lastStoreCount = nowEditCount;
-          }
-        } else if (nowEditTime - this.lastEditTime >= 20000) {
-          if (this.backStoreTextInterval != null) {
-            let ivl = this.backStoreTextInterval;
-            this.backStoreTextInterval = null;
-            window.clearInterval(ivl);
-          }
-        }
-      }
     },
     // recordEventKup(event) {
     // let tn = event.currentTarget.value;
@@ -379,17 +395,15 @@ export default {
         }
 
         this.noteForm.text = event.currentTarget.value;
-        this.recordText();
+        setStoreText(this.noteForm, this.state, this.secret);
 
       } else if (event.ctrlKey && (event.which == 13)) {
         //save
         this.submitNote();
       }
-
+    },
-
-     },
     save() {
-      return saveNote(this.noteForm, this.state, this.secret);
+      return saveNote(this.noteForm, this.secret);
     },
     validateForm() {
       let text = this.noteForm.text;
@@ -435,9 +449,9 @@ export default {
           alert(res.data.code);
           this.model.submitting = false;
           this.state.locking = 0;
-          if (res.data.code == "100013" || res.data.code == "800001") {
+          if(res.data.code=="100013"||res.data.code=="800001"){
             let key = setNewStoreText(this.noteForm);
-            location.href = "/" + key;
+            location.href="/"+key;
           }
 
         }
@@ -456,7 +470,6 @@ export default {
     },
     dropNote() {
       this.model.deleting = true;
-      this.state.deleted = 1;
       storage.local.delete(this.secret.storeKey);
       storage.session.setText(this.secret.storeKey + "_delete", 1);
       location.reload();
@@ -484,67 +497,7 @@ export default {
           }
         }
       }
-    },
+    }
-    dataURLToBlob(dataurl) {
-      let arr = dataurl.split(',');
-      let mime = arr[0].match(/:(.*?);/)[1];
-      let bstr = window.atob(arr[1]);
-      let n = bstr.length;
-      let u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new Blob([u8arr], { type: mime });
-    },
-    saveImage() {
-      let canvasID = this.$refs["html2canvas"];
-
-      let that = this;
-      let a = document.createElement('a');
-      html2canvas(canvasID, {
-        scale: 1,
-        windowWidth: parseInt(document.getElementById("noteText").offsetWidth) + 2,
-        onclone: (clonedDocument) => {
-          let nt = clonedDocument.getElementById("noteText");
-          const div = clonedDocument.createElement('div')
-          div.innerText = nt.value
-
-          div.style.color = "black";
-          div.style.padding = "10px";
-          div.style.textAlign = "left";
-          div.style.wordBreak = "break-word";
-          div.style.whiteSpace = "pre-wrap";
-          div.style.verticalAlign = "top";
-          div.style.fontSize = "15px";
-          div.style.width = "100%";
-          div.style.border = "0px";
-          div.style.fontFamily = "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
-
-          nt.style.display = 'none'
-
-          nt.parentElement.parentElement.style.borderLeftColor = "white";
-
-          nt.parentElement.append(div)
-        }
-      }).then(canvas => {
-        let dom = document.body.appendChild(canvas);
-        dom.style.display = 'none';
-        a.style.display = 'none';
-        document.body.removeChild(dom);
-        let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
-        a.setAttribute('href', URL.createObjectURL(blob));
-        a.setAttribute('download', that.noteForm.key + '.png');
-        document.body.appendChild(a);
-        a.click();
-        URL.revokeObjectURL(blob);
-        document.body.removeChild(a);
-      });
-    },
-    beforeunloadHandler() {
-      if (this.state.deleted == 0) {
-        setStoreText(this.noteForm, this.state, this.secret);
-      }
-    },
   }
 }
 </script>

src/views/ErrorNote.vue

@@ -1,7 +1,43 @@
 <style scoped>
-.ivu-layout-footer {
+.layout {
-    padding-top: 30px;
+  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;
+}
+</style>
+
+<style>
+
 </style>
 <template>
   <div class="layout" onkeydown="keydown">
@@ -11,31 +47,31 @@
           <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 }">
-            <div style="background: white;width:100%;height:40px;">
+              <div style="background: white;width:100%;height:40px;">
-              <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
+                <img style="height:40px;float:left;" src="/static/logo.png">
-                v-on:click="refreshPage()" />
 
-              <div style="float:right;width:auto;">
+                <div style="float:right;width:auto;">
-                <Button-group size="large">
+                  <Button-group size="large">
-                  <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
+                    <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
-                    @click="createNote()" icon="md-add"></Button>
+                      @click="createNote()" icon="md-add"></Button>
-                </Button-group>
+                  </Button-group>
+                </div>
               </div>
-            </div>
             </Col>
           </Row>
         </div>
       </Header>
 
       <Content class="content">
-        <div style="min-height: 250px;">
+        <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">
               <div id="wrapper" style="border-left: 0px solid #FF3366;">
-                <div id="noteText" style="text-align: center;min-height: 250px;" class="monoFt">
+                <div id="noteText" style="text-align: center;min-height: 650px;" class="monoFt">
-                  <p>{{ $t("error." + this.errorInfo.code) }}</p>
+                  <h1></h1>
+                  {{ $t("error." + this.errorInfo.code) }}
                 </div>
               </div>
             </Card>
@@ -45,7 +81,7 @@
       </Content>
 
 
-      <Footer class="layout-footer-center">2024 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
 
     </Layout>
   </div>
@@ -91,28 +127,29 @@ export default {
     if (this.$route.params.name) {
       this.noteForm.key = this.$route.params.name;
     }
-
-    this.$nextTick(() => {
-      let clientHeight = document.documentElement.clientHeight;
-      let elementNoteText = document.getElementById("noteText");
-      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
-    })
   },
   mounted() {
     this.$nextTick(() => {
-      //window.scrollTo(0, 0);
+      window.scrollTo(0, 0);
     });
 
     //this.bindCopyTextEvent();
 
+    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);
+
 
-    window.onresize = () => {
-      return (() => {
-      let clientHeight = document.documentElement.clientHeight;
-      let elementNoteText = document.getElementById("noteText");
-      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
-      })()
-    }
   },
   methods: {
     refreshPage() {
@@ -125,3 +162,4 @@ export default {
   }
 }
 </script>
+

src/views/ErrorView.vue

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

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/ViewJsonNote.vue.bak

@@ -1,301 +0,0 @@
-<style scoped>
-.markdown-body {
-    box-sizing: border-box;
-    min-width: 200px;
-    margin: 0 auto;
-    padding: 10px;
-    background: #fff;
-    color: #000;
-}
-
-.ivu-layout-footer {
-    padding-top: 30px;
-}
-
-@media (max-width: 767px) {
-    .markdown-body {
-        padding: 15px;
-    }
-}
-
-.jse-theme-red {
-  /* over all fonts, sizes, and colors */
-  --jse-theme-color: #ed4014;
-  --jse-theme-color-highlight: #ed4014;
-  --jse-background-color: #fff;
-  --jse-text-color: #d4d4d4;
-  --jse-text-color-inverse: #4d4d4d;
-
-  /* main, menu, modal */
-  --jse-main-border: 1px solid #ed4014;
-  --jse-menu-color: #fff;
-  --jse-modal-background: #2f2f2f;
-  --jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
-  --jse-modal-code-background: #2f2f2f;
-
-  /* tooltip in text mode */
-  --jse-tooltip-color: var(--jse-text-color);
-  --jse-tooltip-background: #fff;
-  --jse-tooltip-border: 1px solid #fff;
-  --jse-tooltip-action-button-color: inherit;
-  --jse-tooltip-action-button-background: #fff;
-
-  /* panels: navigation bar, gutter, search box */
-  --jse-panel-background: #fff;
-  --jse-panel-background-border: 1px solid #fff;
-  --jse-panel-color: var(--jse-text-color);
-  --jse-panel-color-readonly: #737373;
-  --jse-panel-border: 1px solid #ed4014;
-  --jse-panel-button-color-highlight: #e5e5e5;
-  --jse-panel-button-background-highlight: #464646;
-
-  /* navigation-bar */
-  --jse-navigation-bar-background: #656565;
-  --jse-navigation-bar-background-highlight: #7e7e7e;
-  --jse-navigation-bar-dropdown-color: var(--jse-text-color);
-
-  /* context menu */
-  --jse-context-menu-background: #4b4b4b;
-  --jse-context-menu-background-highlight: #595959;
-  --jse-context-menu-separator-color: #595959;
-  --jse-context-menu-color: var(--jse-text-color);
-  --jse-context-menu-pointer-background: #737373;
-  --jse-context-menu-pointer-background-highlight: #818181;
-  --jse-context-menu-pointer-color: var(--jse-context-menu-color);
-
-  /* contents: json key and values */
-  --jse-key-color: #1a1a1a;
-  --jse-value-color: var(--jse-text-color);
-  --jse-value-color-number: #ee422e;
-  --jse-value-color-boolean: #ff8c00;
-  --jse-value-color-null: #004ed0;
-  --jse-value-color-string: #008000;
-  --jse-value-color-url: #ce9178;
-  --jse-delimiter-color: #949494;
-  --jse-edit-outline: 2px solid var(--jse-text-color);
-
-  /* contents: selected or hovered */
-  --jse-selection-background-color: #464646;
-  --jse-selection-background-inactive-color: #333333;
-  --jse-hover-background-color: #343434;
-  --jse-active-line-background-color: rgba(255, 255, 255, 0.06);
-  --jse-search-match-background-color: #343434;
-
-  /* contents: section of collapsed items in an array */
-  --jse-collapsed-items-background-color: #333333;
-  --jse-collapsed-items-selected-background-color: #565656;
-  --jse-collapsed-items-link-color: #b2b2b2;
-  --jse-collapsed-items-link-color-highlight: #ec8477;
-
-  /* contents: highlighting of search results */
-  --jse-search-match-color: #724c27;
-  --jse-search-match-outline: 1px solid #966535;
-  --jse-search-match-active-color: #9f6c39;
-  --jse-search-match-active-outline: 1px solid #bb7f43;
-
-  /* contents: inline tags inside the JSON document */
-  --jse-tag-background: #444444;
-  --jse-tag-color: #bdbdbd;
-
-  /* contents: table */
-  --jse-table-header-background: #333333;
-  --jse-table-header-background-highlight: #424242;
-  --jse-table-row-odd-background: rgba(255, 255, 255, 0.1);
-
-  /* controls in modals: inputs, buttons, and `a` */
-  --jse-input-background: #3d3d3d;
-  --jse-input-border: var(--jse-main-border);
-  --jse-button-background: #808080;
-  --jse-button-background-highlight: #7a7a7a;
-  --jse-button-color: #e0e0e0;
-  --jse-button-secondary-background: #494949;
-  --jse-button-secondary-background-highlight: #5d5d5d;
-  --jse-button-secondary-background-disabled: #9d9d9d;
-  --jse-button-secondary-color: var(--jse-text-color);
-  --jse-a-color: #55abff;
-  --jse-a-color-highlight: #4387c9;
-
-  /* svelte-select */
-  --jse-svelte-select-background: #3d3d3d;
-  --jse-svelte-select-border: 1px solid #4f4f4f;
-  --list-background: #3d3d3d;
-  --item-hover-bg: #505050;
-  --multi-item-bg: #5b5b5b;
-  --input-color: #d4d4d4;
-  --multi-clear-bg: #8a8a8a;
-  --multi-item-clear-icon-color: #d4d4d4;
-  --multi-item-outline: 1px solid #696969;
-  --list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
-
-  /* color picker */
-  --jse-color-picker-background: #656565;
-  --jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px;
-
-
-  --jse-menu-button-size: 32px;
-}
-
-
-</style>
-<script setup>
-import { Mode } from 'vanilla-jsoneditor'
-</script>
-<template>
-    <div class="layout">
-        <Layout>
-            <Content class="content">
-                <div style="min-height: 250px;height: 100%;margin:7px 0px">
-                    <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">
-                            <div id="wrapper" style="border-left: 0px solid #FF3366;" class="markdown-body">
-                                <JsonEditorVue id="noteMdText" :mode="Mode.text" v-model="this.noteForm.text" class="jse-theme-red" />
-                            </div>
-                        </Card>
-                        </Col>
-                    </Row>
-                </div>
-            </Content>
-        </Layout>
-    </div>
-</template>
-
-<script scoped>
-import { md5, unwrap } from "@/libs/secret";
-import { getStoreKey } from "@/api/lock";
-import { getNoteBlob } from "@/api/note";
-import storage from "@/libs/storage";
-import { Buffer } from 'buffer';
-import JsonEditorVue from 'json-editor-vue'
-
-
-export default {
-    name: 'ViewJsonNote',
-    components: {JsonEditorVue },
-    data() {
-        return {
-            noteForm: {
-                url: '',
-                noteUrl: '',
-                text: '',
-                renderedMarkdown: '',
-                key: '',
-            },
-            secret: {
-                storeKey: '',
-                secretKey: '',
-                cipher: '',
-                md5: '',
-            },
-            state: {
-                lock: null,
-                initTime: null,
-                initTtl: null,
-                ttl: null,
-                ttlDesc: '-- : --',
-                serverTime: null,
-            },
-            model: {
-                showError: false,
-            },
-            errorInfo: '',
-        }
-    },
-    created() {
-        // read $route
-        this.noteForm.key = this.$route.params.name;
-        let noteMeta = this.$route.meta.noteMeta;
-        this.secret.secretKey = noteMeta.secretKey;
-
-        this.secret.storeKey = getStoreKey(this.noteForm.key);
-
-        if (noteMeta) {
-
-            this.state.lock = noteMeta.lock;
-            this.state.initTime = new Date().getTime();
-            this.state.initTtl = noteMeta.ttl;
-            this.state.ttl = noteMeta.ttl;
-            this.targetTime = noteMeta.ttl + new Date().getTime();
-            this.state.serverTime = noteMeta.serverTime;
-
-            this.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
-            this.secret.md5 = noteMeta.md5;
-
-            storage.local.dynamicClear();
-
-            this.loadText();
-
-        } else {
-            this.errorInfo = this.$t('error.100001');
-            this.model.showError = true;
-            return false;
-        }
-
-        this.$nextTick(() => {
-            let clientHeight = document.documentElement.clientHeight;
-            let elementNoteText = document.getElementById("noteMdText");
-            elementNoteText.style.minHeight = (clientHeight - 15) + "px";
-        })
-
-    }, mounted() {
-        window.onresize = () => {
-            return (() => {
-                let clientHeight = document.documentElement.clientHeight;
-                let elementNoteText = document.getElementById("noteMdText");
-                elementNoteText.style.minHeight = (clientHeight - 15) + "px";
-            })()
-        }
-    },
-    methods: {
-        loadText() {
-            let that = this;
-
-            let storeInfo = storage.local.getText(this.secret.storeKey);
-
-            let starray = [];
-            if (storeInfo) {
-                starray = storeInfo.split('|');
-            }
-
-            if (!storeInfo || !starray[4] || (md5(starray[4]) != this.secret.md5)) {
-                // local is useless
-                getNoteBlob(this.noteForm.key).then((res) => {
-                    if (!res.data || res.data.size == 0) {
-                        return;
-                    }
-
-                    res.data.arrayBuffer().then(function (ab) {
-                        if (!ab || ab.byteLength == 0) {
-                            return;
-                        }
-
-                        let base64String = Buffer.from(ab).toString('base64')
-                        that.noteForm.text = unwrap(base64String, that.secret.secretKey);
-                        // if local is enough, set local
-                        if (storage.local.getAvailableSize() > 1 * 1024 * 1024) {
-                            storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + base64String);
-                        }
-                    });
-                });
-
-            } else {
-                starray = storeInfo.split('|');
-                if (!starray[4]) {
-                    return;
-                }
-
-                this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
-
-                // 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]);
-                }
-            }
-        },
-
-    }
-}
-</script>
-
-

src/views/ViewMdNote.vue.bak

@@ -1,213 +0,0 @@
-<style scoped>
-.markdown-body {
-    box-sizing: border-box;
-    min-width: 200px;
-    margin: 0 auto;
-    padding: 10px;
-    background: #fff;
-    color: #000;
-}
-
-.ivu-layout-footer {
-    padding-top: 30px;
-}
-
-@media (max-width: 767px) {
-    .markdown-body {
-        padding: 15px;
-    }
-}
-</style>
-<template>
-    <div class="layout">
-        <Layout>
-            <Content class="content">
-                <div style="min-height: 250px;height: 100%;margin:7px 0px">
-                    <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">
-                            <div id="wrapper" style="border-left: 0px solid #FF3366;" class="markdown-body">
-                                <vue-markdown id="noteMdText" :source="this.noteForm.text" :options="this.options" />
-                            </div>
-                        </Card>
-                        </Col>
-                    </Row>
-                </div>
-            </Content>
-        </Layout>
-    </div>
-</template>
-
-<script scroped>
-import { md5, unwrap } from "@/libs/secret";
-import { getStoreKey } from "@/api/lock";
-import { getNoteBlob } from "@/api/note";
-import storage from "@/libs/storage";
-import { Buffer } from 'buffer';
-import VueMarkdown from 'vue-markdown-render'
-import 'github-markdown-css'
-import hljs from 'highlight.js'
-import 'highlight.js/styles/github.css'
-import escapeHtml from "escape-html";
-
-export default {
-    name: 'ViewMdNote',
-    components: { VueMarkdown },
-    data() {
-        return {
-            noteForm: {
-                url: '',
-                noteUrl: '',
-                text: '',
-                renderedMarkdown: '',
-                key: '',
-            },
-            secret: {
-                storeKey: '',
-                secretKey: '',
-                cipher: '',
-                md5: '',
-            },
-            state: {
-                lock: null,
-                initTime: null,
-                initTtl: null,
-                ttl: null,
-                ttlDesc: '-- : --',
-                serverTime: null,
-            },
-            model: {
-                showError: false,
-            },
-            options: {
-                // Enable HTML tags in source
-                html: true,
-                // Use '/' to close single tags (<br />).
-                // This is only for full CommonMark compatibility.
-                xhtmlOut: true,
-                // Convert '\n' in paragraphs into <br>
-                breaks: true,
-                // CSS language prefix for fenced blocks. Can be
-                // useful for external highlighters.
-                langPrefix: 'language-',
-                // Autoconvert URL-like text to links
-                linkify: true,
-                // Enable some language-neutral replacement + quotes beautification
-                // For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.mjs
-                typographer: true,
-                // Highlighter function. Should return escaped HTML,
-                // or '' if the source string is not changed and should be escaped externally.
-                // If result starts with <pre... internal wrapper is skipped.
-                highlight: function (str, lang) {
-                    if (lang && hljs.getLanguage(lang)) {
-                        try {
-                            return '<pre><code class="hljs">' +
-                                hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
-                                '</code></pre>';
-                        } catch (e) {
-                            console.log(e);
-                        }
-                    }
-
-                    return '<pre><code class="hljs">' + escapeHtml(str) + '</code></pre>';
-                }
-            },
-            errorInfo: '',
-        }
-    },
-    created() {
-        // read $route
-        this.noteForm.key = this.$route.params.name;
-        let noteMeta = this.$route.meta.noteMeta;
-        this.secret.secretKey = noteMeta.secretKey;
-
-        this.secret.storeKey = getStoreKey(this.noteForm.key);
-
-        if (noteMeta) {
-
-            this.state.lock = noteMeta.lock;
-            this.state.initTime = new Date().getTime();
-            this.state.initTtl = noteMeta.ttl;
-            this.state.ttl = noteMeta.ttl;
-            this.targetTime = noteMeta.ttl + new Date().getTime();
-            this.state.serverTime = noteMeta.serverTime;
-
-            this.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
-            this.secret.md5 = noteMeta.md5;
-
-            storage.local.dynamicClear();
-
-            this.loadText();
-
-        } else {
-            this.errorInfo = this.$t('error.100001');
-            this.model.showError = true;
-            return false;
-        }
-
-        this.$nextTick(() => {
-            let clientHeight = document.documentElement.clientHeight;
-            let elementNoteText = document.getElementById("noteMdText");
-            elementNoteText.style.minHeight = (clientHeight - 15) + "px";
-        })
-
-    }, mounted() {
-        window.onresize = () => {
-            return (() => {
-                let clientHeight = document.documentElement.clientHeight;
-                let elementNoteText = document.getElementById("noteMdText");
-                elementNoteText.style.minHeight = (clientHeight - 15) + "px";
-            })()
-        }
-    },
-    methods: {
-        loadText() {
-            let that = this;
-
-            let storeInfo = storage.local.getText(this.secret.storeKey);
-
-            let starray = [];
-            if (storeInfo) {
-                starray = storeInfo.split('|');
-            }
-
-            if (!storeInfo || !starray[4] || (md5(starray[4]) != this.secret.md5)) {
-                // local is useless
-                getNoteBlob(this.noteForm.key).then((res) => {
-                    if (!res.data || res.data.size == 0) {
-                        return;
-                    }
-
-                    res.data.arrayBuffer().then(function (ab) {
-                        if (!ab || ab.byteLength == 0) {
-                            return;
-                        }
-
-                        let base64String = Buffer.from(ab).toString('base64')
-                        that.noteForm.text = unwrap(base64String, that.secret.secretKey);
-                        // if local is enough, set local
-                        if (storage.local.getAvailableSize() > 1 * 1024 * 1024) {
-                            storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + base64String);
-                        }
-                    });
-                });
-
-            } else {
-                starray = storeInfo.split('|');
-                if (!starray[4]) {
-                    return;
-                }
-
-                this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
-
-                // 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]);
-                }
-            }
-        },
-
-    }
-}
-</script>

src/views/ViewNote.vue

@@ -1,6 +1,69 @@
 <style scoped>
-.ivu-layout-footer {
+.layout {
-    padding-top: 30px;
+  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>
 
@@ -17,8 +80,8 @@
 }
 
 #qrUrl::selection {
-  background: #dddddd;
+  background-color: #ed4014;
-  color: #ed4014;
+  color: #ffffff;
 }
 
 #copyBtn {
@@ -80,24 +143,48 @@
   font-family: "Bitstream Vera Sans Mono", Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
 }
 
+
+
 .ivu-modal-content {
   border-radius: 0px !important;
 }
 
+
+
+/* #noteMenu button span{
+  font-size: 20px;
+  line-height: 20px;
+  margin-left: 7px !important;
+  margin-right: 5px !important;
+} */
 </style>
 
 <template>
   <div class="layout">
     <Layout>
-      <div style="position:fixed;z-index:10;width:100%">
-        <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 }">
 
+      <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;vertical-align: center;">
+                    <div style="font-size: 18px;
+                    color: red;
+                    line-height: 40px;
+                    display: inline-block;
+                    font-weight: bold;
+                    height: 40px;">{{
+                        state.ttlDesc
+                    }}</div>
+              </div>
+              -->
+
+
               <div style="float:left;width:auto;">
 
                 <Button-group size="large">
@@ -116,16 +203,8 @@
                 <Button-group size="large">
 
                   <Button aria-label="ttl" type="error"
-                    style="margin-left:5px; border-radius: 0px;font-size: 21px; padding-left: 3px !important;padding-right: 7px !important; font-family: Arial, sans-serif"
+                    style="margin-left:5px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
-                    @click="showTtlDeleteModel()">
+                    @click="showTtlDeleteModel()" icon="md-alarm">{{ state.ttlDesc }}</Button>
-                    <Badge :offset="[8, 0]" style="padding-top:1px;">
-                      <Icon type="md-trash" color="#FFFFFF" size="24" />
-                      <template #count>
-                        <Icon type="md-time" color="#FFFFFF" size="14" />
-                      </template>
-                    </Badge>
-                    <span style="font-size:18px;margin-left: 7px">{{ state.ttlDesc }}</span>
-                  </Button>
 
                   <Button aria-label="share" type="error"
                     style="margin-left:3px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
@@ -141,19 +220,18 @@
             <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="new note" type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
+                <Button type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
                   @click="createNote(); switchMenu();"></Button>
 
                 <!--
 
-                                  <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
+                  <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
-                                  @click="refreshPage()"></Button>
+                  @click="refreshPage()"></Button>
-                                -->
+                -->
-                <Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
-                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
 
                 <Button aria-label="download text" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText();" icon="md-download"></Button>
+                  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>
@@ -162,35 +240,23 @@
 
             </div>
 
+          </Affix>
 
 
 
-
+          </Col>
-            </Col>
+        </Row>
-          </Row>
+      </Header>
-        </Header>
-      </div>
 
       <Content class="content">
-        <div>
+        <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 }">
-            <div class="noteHeader" style="height:40px;border-left: 2px solid white;"></div>
-            </Col>
-          </Row>
-        </div>
-      </Content>
-
-      <Content class="content">
-        <div style="min-height: 250px;">
           <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">
-              <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
+              <div id="wrapper" style="border-left: 2px solid white;">
                 <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                  :autosize="{}" />
+                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
               </div>
             </Card>
             </Col>
@@ -200,14 +266,19 @@
 
 
       <Footer class="layout-footer-center">
-        2024 &copy; flagnote.com
+        2022 &copy; flagnote.com
       </Footer>
 
     </Layout>
 
-    <Modal scrollable v-model="model.showShare" width="360" footer-hide class-name="qrmodal"
+    <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
-      :styles="{ borderRadius: 0 }" @on-cancel="closeShareModel">
+      @on-cancel="closeShareModel">
-      <p style="text-align: center; z-index: 1000; position: absolute; top: -2px; left: 0px; width: 100%;">
+      <p style="text-align: center;
+          z-index: 1000;
+          position: absolute;
+          top: -2px;
+          left: 0px;
+          width: 100%;">
         <Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
       </p>
       <p style="text-align: center;margin-top:20px;line-height:100%">
@@ -221,48 +292,48 @@
       </div>
       <p style="text-align: center;margin-top:10px;">
         <Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeShareModel()">{{ $t("button.close")
-          }}</Button>
+        }}</Button>
       </p>
     </Modal>
 
-    <Modal scrollable v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal"
+    <Modal v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
-      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-top:20px;">
         {{ $t("content.deleteTip") }}{{ state.ttlDesc }}
       </p>
 
       <p style="text-align: center;margin-top:10px;">
         <Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeTtlDeleteModel()">{{
-          $t("button.close")
+            $t("button.close")
         }}</Button>
       </p>
     </Modal>
 
-    <Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal"
+    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
-      :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")
+            $t("button.yes")
         }}</Button>
       </p>
     </Modal>
 
-    <Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal"
+    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
-      :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")
+            $t("button.close")
         }}</Button>
       </p>
     </Modal>
 
   </div>
+
+
+
 </template>
 
 <script>
@@ -272,12 +343,10 @@ import { getStoreKey } from "@/api/lock";
 import { deleteNote, getNoteBlob } from "@/api/note";
 import storage from "@/libs/storage";
 //import { getEscapeText } from "@/libs/noteStorage";
-import QRCode from "qrcodejs2-fixes";
+import QRCode from "qrcodejs2";
 import Clipboard from "clipboard";
 import { saveAs } from 'file-saver';
 import { isWeixin, getNoteUrl } from "@/libs/utils";
-import html2canvas from "html2canvas";
-import { Buffer } from 'buffer';
 
 export default {
   name: 'ViewNote',
@@ -319,8 +388,6 @@ export default {
       showMenuState: false,
       showHeaderShade: false,
       errorInfo: '',
-      targetTime: null,
-      showSkeleton: true,
     }
   },
   created() {
@@ -346,7 +413,6 @@ export default {
       this.state.initTime = new Date().getTime();
       this.state.initTtl = noteMeta.ttl;
       this.state.ttl = noteMeta.ttl;
-      this.targetTime = noteMeta.ttl + new Date().getTime();
       this.state.serverTime = noteMeta.serverTime;
 
       this.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
@@ -368,14 +434,29 @@ export default {
       return false;
     }
 
-    this.$nextTick(() => {
-      let clientHeight = document.documentElement.clientHeight;
-      let elementNoteText = document.getElementById("noteText");
-      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
-    })
-
   },
   mounted() {
+
+    let stateInfo = storage.session.getText(this.secret.storeKey + "_share");
+    if (stateInfo == '1') {
+      storage.session.setText(this.secret.storeKey + "_share", '0');
+      this.showShareModel();
+    }
+
+    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);
+
     let qrimg = document.getElementById("qrImg");
     let qrurl = "https://flagnote.com/" + this.noteForm.key;
     var opts = {
@@ -388,21 +469,6 @@ export default {
     }
     new QRCode(qrimg, opts);
 
-    let stateInfo = storage.session.getText(this.secret.storeKey + "_share");
-    if (stateInfo == '1') {
-      storage.session.setText(this.secret.storeKey + "_share", '0');
-      setTimeout(() => {
-        this.showShareModel();
-      }, 100);
-    }
-
-    window.onresize = () => {
-      return (() => {
-      let clientHeight = document.documentElement.clientHeight;
-      let elementNoteText = document.getElementById("noteText");
-      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
-      })()
-    }
   },
   updated() {
   },
@@ -411,8 +477,7 @@ export default {
   destroyed() {
   },
   computed: {},
-  watch: {
+  watch: {},
-  },
   methods: {
     switchMenu() {
       this.showMenuState = !this.showMenuState;
@@ -440,7 +505,9 @@ export default {
         } else if (mins < 10) {
           mins = "0" + mins;
         }
+
         let seds = parseInt(ittl % 60);
+
         if (seds < 0) {
           seds = "00";
         } else if (seds < 10) {
@@ -448,6 +515,7 @@ export default {
         }
         that.state.ttlDesc = mins + ":" + seds;
         that.state.ttl = that.state.initTtl - (new Date().getTime() - that.state.initTime);
+
         if (that.state.ttl <= 0) {
           storage.local.delete(that.secret.storeKey);
           location.reload();
@@ -485,7 +553,7 @@ export default {
       this.model.deleting = true;
       let that = this;
       deleteNote(this.noteForm.key).then(res => {
-        if (res.data && res.data.code == "000000") {
+        if (res.data&&res.data.code=="000000") {
           storage.local.delete(that.secret.storeKey);
           location.reload();
         } else {
@@ -512,19 +580,28 @@ export default {
             return;
           }
 
-          res.data.arrayBuffer().then(function (ab) {
+          let blob = new Blob([res.data], {
-            if (!ab || ab.byteLength == 0) {
+            type: res.data.type
+          });
+
+          let reader = new FileReader();
+          reader.onload = function (e) {
+            if (!e.target.result || e.target.result.byteLength == 0) {
               return;
             }
 
-            let base64String = Buffer.from(ab).toString('base64')
+            var bytes = new Uint8Array(e.target.result);
-            that.noteForm.text = unwrap(base64String, that.secret.secretKey);
+            bytes = bytes.subarray(7,bytes.length-7);
-            that.showSkeleton = false;
+            let bytesString = bytes.join(",");
+            that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
+            //that.noteForm.escapeText = getEscapeText(that.noteForm.text);
+
             // if local is enough, set local
             if (storage.local.getAvailableSize() > 1 * 1024 * 1024) {
-              storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + base64String);
+              storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + bytesString);
             }
-          });
+          };
+          reader.readAsArrayBuffer(blob);
         });
 
       } else {
@@ -535,7 +612,6 @@ export default {
         }
 
         this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
-        this.showSkeleton = false;
         //this.noteForm.escapeText = getEscapeText(this.noteForm.text);
 
         // local is usable, and set commited flag
@@ -588,62 +664,7 @@ export default {
         }
       }
     },
-    dataURLToBlob(dataurl) {
-      let arr = dataurl.split(',');
-      let mime = arr[0].match(/:(.*?);/)[1];
-      let bstr = window.atob(arr[1]);
-      let n = bstr.length;
-      let u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new Blob([u8arr], { type: mime });
-    },
-    saveImage() {
-      let canvasID = this.$refs["html2canvas"];
-      let that = this;
-      let a = document.createElement('a');
-      html2canvas(canvasID, {
-        scale: 1,
-        windowWidth: document.getElementById("noteText").offsetWidth,
-        onclone: (clonedDocument) => {
-          let nt = clonedDocument.getElementById("noteText");
-          const div = clonedDocument.createElement('div')
-          div.innerText = nt.value
-
-          div.style.color = "black";
-          div.style.padding = "0px";
-          div.style.textAlign = "left";
-          div.style.wordBreak = "break-word";
-          div.style.whiteSpace = "pre-wrap";
-          div.style.verticalAlign = "top";
-          div.style.fontSize = "15px";
-          div.style.width = "100%";
-          div.style.border = "0px";
-          div.style.fontFamily = "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
-
-          nt.style.display = 'none'
-
-          nt.parentElement.parentElement.style.borderLeftColor = "white";
-
-          nt.parentElement.append(div)
-        }
-      }).then(canvas => {
-        let dom = document.body.appendChild(canvas);
-        dom.style.display = 'none';
-        a.style.display = 'none';
-        document.body.removeChild(dom);
-        let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
-        a.setAttribute('href', URL.createObjectURL(blob));
-        a.setAttribute('download', that.noteForm.key + '.png');
-        document.body.appendChild(a);
-        a.click();
-        URL.revokeObjectURL(blob);
-        document.body.removeChild(a);
-      });
-    },
-
-
   }
 }
 </script>
+

vue.config.js

@@ -1,130 +1,78 @@
 const { defineConfig } = require("@vue/cli-service");
 const CompressionPlugin = require("compression-webpack-plugin");
-const WebpackObfuscator = require("webpack-obfuscator");
+const WebpackObfuscator = require('webpack-obfuscator');
-const path = require("path");
 
-const { NODE_ENV, VUE_APP_TITLE = "" } = process.env;
+module.exports = defineConfig({
 
-const assetsCDN = {
+  assetsDir: 'static',
-  // 忽略打包的第三方库
+  productionSourceMap: false,
-  externals: {
-    //  'vue': 'Vue',
-    //  'vue-router': 'VueRouter',
-    //  "crypto-js": "CryptoJS",
-    //  'pako': 'pako',
-    html2canvas: "html2canvas",
-    //   'view-ui-plus':'ViewUIPlus',
-  },
-
-  // 通过cdn方式使用
-  js: [
-    //  'https://cdn.jsdelivr.net/npm/vue@3.4.31/dist/vue.global.min.js',
-    //  'https://cdn.jsdelivr.net/npm/vue-router@4.4.0/dist/vue-router.global.min.js',
-    //  'https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js',
-    //  'https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js',
-    //   'https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.18/dist/viewuiplus.min.js',
-    "https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js",
-  ],
-
-  css: [
-    "https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.18/dist/styles/viewuiplus.min.css",
-  ],
-};
-
-const config = {
-  assetsDir: "static",
-  productionSourceMap: NODE_ENV !== "production",
   
   configureWebpack: (config) => {
-    config.devtool = 'source-map'
+    config.experiments = { asyncWebAssembly: true,syncWebAssembly:true }
     
-    config.experiments = { asyncWebAssembly: true, syncWebAssembly: true };
 
-    config.externals = assetsCDN.externals;
+    config.externals = {
+      'vue': 'Vue',
+      'vue-router': 'VueRouter',
+      'axios': 'axios',
+      //'vue-axios':'VueAxios',
+      "crypto-js": "CryptoJS",
+      'qrcodejs2': 'QRCode',
+      'pako': 'pako',
+      "view-design": 'iview',
+      "iview": 'ViewUI',
+      "file-saver": 'saveAs',
+      "clipboard": "ClipboardJS",
+      "vue-i18n": "VueI18n"
+    };
 
     // 为生产环境修改配置
-    if (process.env.NODE_ENV === "production") {
+    if (process.env.NODE_ENV === 'production') {
-      config.devtool = false
       config.plugins.push(
-        new WebpackObfuscator(
+        new WebpackObfuscator({
-          {
+          compact: true,//压缩代码
-            compact: true, //压缩代码
+          controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度)
-            controlFlowFlattening: false, //是否启用控制流扁平化(降低1.5倍的运行速度)
+          deadCodeInjection: true,//随机的死代码块(增加了混淆代码的大小)
-            deadCodeInjection: true, //随机的死代码块(增加了混淆代码的大小)
+          debugProtection: true,//此选项几乎不可能使用开发者工具的控制台选项卡
-            debugProtection: true, //此选项几乎不可能使用开发者工具的控制台选项卡
+          disableConsoleOutput: true,//通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
-            disableConsoleOutput: true, //通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
+          identifierNamesGenerator: 'mangled',//标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
-            identifierNamesGenerator: "mangled", //标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
+          log: false,
-            log: false,
+          renameGlobals: true,//是否启用全局变量和函数名称的混淆
-            renameGlobals: true, //是否启用全局变量和函数名称的混淆
+          rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
-            rotateStringArray: true, //通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
+          selfDefending: true,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
-            selfDefending: true, //混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
+          // transformObjectKeys: true,
-            // transformObjectKeys: true,
+          unicodeEscapeSequence: true//允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
-            unicodeEscapeSequence: true, //允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
+        }, ['static/js/chunk-vendors.*.js']),
-          },
-          ["static/js/chunk-vendors.*.js"]
-        ),
 
         new CompressionPlugin({
           algorithm: "gzip", // 使用gzip压缩
-          test: /\.js$|\.html$|\.png$|\.jpg$|\.svg$|\.css$/, // 匹配文件名
+          test: /\.js$|\.html$|\.png$|\.jpg$|\.svg$|\.wasm$|\.css$/, // 匹配文件名
           filename: "[path][base].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
           minRatio: 1, // 压缩率小于1才会压缩
           threshold: 5120, // 对超过10k的数据压缩
           deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
-        })
+        }),
-      );
+      )
     }
   },
-
+  transpileDependencies: true,
-  transpileDependencies: false,
+  chainWebpack: (config) => {
-
+    config.plugin("html").tap((args) => {
-  chainWebpack: (setting) => {
+      args[0].title = "flagnote.com";
-    setting.plugin("html").tap((args) => {
-      args[0].cdn = assetsCDN;
-      args[0].title = VUE_APP_TITLE;
       return args;
     });
   },
-  css: {
-    loaderOptions: {
-      less: {
-        lessOptions: {
-          javascriptEnabled: true,
-        },
-      },
-    },
-  },
   devServer: {
     proxy: {
-      "/redirect": {
-        //target: "https://flagnote.com/", // 后台接口域名
-        target: "http://localhost:21000/", // 后台接口域名
-        secure: false, // 如果是https接口，需要配置这个参数
-        changeOrigin: true, //是否跨域
-        pathRewrite: {
-          "^/": "/html/",
-        },
-      },
       "/note": {
         target: "https://flagnote.com/", // 后台接口域名
-        //target: "http://localhost:21000/", // 后台接口域名
+//        target: "http://localhost:10000/", // 后台接口域名
         secure: false, // 如果是https接口，需要配置这个参数
         changeOrigin: true, //是否跨域
         pathRewrite: {
           // '^/': '/'
         },
       },
-      "^/[abcdefhikmnopqstuvwxyz23456789]{16}\\.txt$": {
-        //target: "https://flagnote.com/", // 后台接口域名
-        target: "http://localhost:21000/", // 后台接口域名
-        secure: false, // 如果是https接口，需要配置这个参数
-        changeOrigin: true, //是否跨域
-        pathRewrite: {
-          "^/": "/note/",
-        },
-      },
     },
   },
-};
+});
-
-module.exports = defineConfig(config);