i18n

showSkeleton
milestone
2023-04-12 10:51:10 +08:00 · 2023-04-07 09:26:38 +08:00 · 2023-04-06 13:40:18 +08:00 · 2023-04-03 11:05:00 +08:00 · 2023-03-31 17:19:37 +08:00 · 2023-03-31 15:59:13 +08:00
31 changed files with 2129 additions and 2280 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
+VUE_APP_TITLE=flagnote.com
--- a/.env.development
+++ b/.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 = 409600
-VUE_APP_NOTE_MAX_DESC = 400K
-
+VUE_APP_NOTE_MAX_COUNT = 131072
+VUE_APP_NOTE_MAX_DESC = 128K
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,6 @@
-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 = 409600
-VUE_APP_NOTE_MAX_DESC = 400K
+VUE_APP_NOTE_MAX_COUNT = 131072
+VUE_APP_NOTE_MAX_DESC = 128K
--- a/.env.staging
+++ b/.env.staging
@@ -0,0 +1 @@
+VUE_APP_FLAG=staging
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+assets
+mock
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,31 @@
+{
+    "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
+    }
+}
--- a/README.md
+++ b/README.md
@@ -1,24 +1,35 @@
-# flagnote-web
+# view-ui-project-vuecli
+This project build for Vue3, Vue-router, Vuex, ViewUIPlus and Vue-cli.
+## Install
+```shell
+npm install
+```
+## Run
+```shell
+npm run serve
+```
+## Build
+### Build for Production
+```shell
+npm run build
+```
+### Build for Staging
+```shell
+npm run build:staging
+```
+## Run Eslint
+### Run without Fixing

-## Project setup
+- This operation will also run before git-commit.
+```shell
+npm run lint
 ```
-yarn install
+### Run with Fixing
+```shell
+npm run lint:fix
 ```
+## .env Description

-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+- This project exposes environment variables on `process.env` object.
+- Different modes (development/staging/production) correspond to different environment files (.env.*).
+- .env file is always included, duplicate variables are overwritten by the specific mode file (.env.*).
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,7 @@
-// module.exports = {
-//   presets: [
-//     '@vue/cli-plugin-babel/preset'
-//   ]
-// }
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+  plugins: [
+  ],
+};
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,9 +1,8 @@
 {
  "compilerOptions": {
-    "target": "esnext",
+    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
-    "jsx": "preserve",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
@@ -15,10 +14,6 @@
      "dom",
      "dom.iterable",
      "scripthost"
-    ],
-    "removeComments": true,
-  },
-  "vueCompilerOptions": {
-    "target": 2.7
+    ]
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,62 +1,56 @@
 {
  "name": "flagnote-web",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
+  "description": "flagnote web",
  "scripts": {
+    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --mode production",
-    "build.test": "vue-cli-service build --mode test",
-    "build.production": "vue-cli-service build --mode production",
-    "lint": "vue-cli-service lint"
+    "build": "vue-cli-service build",
+    "build:staging": "vue-cli-service build --mode=staging",
+    "lint": "eslint ./src --ext .js,.vue",
+    "lint:fix": "eslint ./src --ext .js,.vue --fix",
+    "prepare": "husky install"
  },
  "dependencies": {
    "axios": "^0.27.2",
-    "bluebird": "^3.7.2",
+    "babel-plugin-import": "^1.13.6",
+    "buffer": "^6.0.3",
    "clipboard": "^2.0.11",
+    "core-js": "^3.8.3",
    "crypto-js": "^4.1.1",
    "escape-html": "^1.0.3",
    "file-saver": "^2.0.5",
-    "localforage": "^1.10.0",
+    "html2canvas": "^1.4.1",
    "pako": "^2.1.0",
-    "qrcodejs2": "^0.0.2",
-    "view-design": "^4.7.0",
-    "vue": "^2.7.14",
+    "qrcodejs2-fixes": "^0.0.2",
+    "view-ui-plus": "^1.3.10",
+    "vue": "^3.2.13",
    "vue-axios": "^3.5.2",
-    "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5"
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.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-service": "~5.0.8",
-    "compression-webpack-plugin": "^10.0.0",
-    "core-js": "^3.26.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "javascript-obfuscator": "^4.0.0",
-    "webpack": "^5.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": {}
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^8.14.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "husky": "^7.0.4",
+    "less": "^4.0.0",
+    "less-loader": "^10.2.0",
+    "mockjs": "^1.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
-    "not dead"
-  ]
+    "not dead",
+    "not ie 11"
+  ],
+  "engines": {
+    "node": ">= 12.0.0",
+    "npm": ">= 6.9.0"
+  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -18,45 +18,23 @@
  <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>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
  <style>
    body {
      background-color: #dddddd
    }
  </style>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" rel="stylesheet"
-    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js" rel="stylesheet"
-    type="text/javascript"></script>
-  <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>
+  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+  <% } %>
+  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+  <% } %>
  <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>
@@ -67,8 +45,6 @@
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      document.querySelector('#noie').style.display = 'block';
    }
-
-
  </script>
 </body>

--- a/public/redirect.html
+++ b/public/redirect.html
@@ -6,18 +6,11 @@
    <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 {
@@ -25,10 +18,7 @@
        }
    </style>
    <script>
-
        const servicePath = "";
-        //const servicePath="https://flagnote.com";
-
        function ajaxGet(url) {
            let data = null;
            let xmlhttp = new XMLHttpRequest();
@@ -62,8 +52,12 @@

        let keyMeta = getKeyMeta();

-        sessionStorage.setItem("keyMeta", JSON.stringify(keyMeta));
-        location.href = "/" + keyMeta.key;
+        if (keyMeta && keyMeta.key) {
+            sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
+            location.href = "/" + keyMeta.key;
+        } else {
+            location.href = "/100006";
+        }
    </script>
 </head>

--- a/src/App.vue
+++ b/src/App.vue
@@ -81,23 +81,23 @@ body {


 #noteText::selection {
-  background: #ed4014;
-  color: white;
+  background: #dddddd;
+  color: #ed4014;
 }

 #noteText::-moz-selection {
-  background: #ed4014;
-  color: white;
+  background: #dddddd;
+  color: #ed4014;
 }

 #noteText br::selection {
-  background: #ed4014;
-  color: white;
+  background: #dddddd;
+  color: #ed4014;
 }

 #noteText br::-moz-selection {
-  background: #ed4014;
-  color: white;
+  background: #dddddd;
+  color: #ed4014;
 }

 .noteUrl {
@@ -122,10 +122,10 @@ body {
  display: none;
 }

-button span {
+/* button span {
  margin-left: 0px !important;
  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>
--- a/src/api/note.js
+++ b/src/api/note.js
@@ -1,8 +1,9 @@
 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 { Buffer } from 'buffer';

 axios.interceptors.response.use(undefined, (err) => {
  const { config: originalRequest } = err;
@@ -17,10 +18,10 @@ axios.interceptors.response.use(undefined, (err) => {
  }
 });

-export async function saveNote(noteForm, secret) {
+export function saveNote(noteForm, secret) {
  let storeKey = secret.storeKey;

-  const storeInfo = await storage.local.getText(storeKey);
+  let storeInfo = storage.local.getText(storeKey);
  let starray = storeInfo.split("|");

  if (starray[2] == "1") {
@@ -48,8 +49,8 @@ export async function saveNote(noteForm, secret) {
    });
  }

-  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 array = Buffer.from(note.text, 'base64')
+
  let blob = new Blob([array], { type: "application/octet-stream" });
  let form = new FormData();
  form.append("file", blob, noteForm.key);
@@ -71,13 +72,11 @@ export async function saveNote(noteForm, secret) {
  });
 }

-export async function deleteNote(key) {
-  let storeKey = getStoreKey(key);
-  const storeInfo = await storage.local.getText(storeKey);
+export function deleteNote(key) {
  let note = {
-    cipher: storeInfo.substring(2, 34),
    key: key,
  };
+
  return axios({
    url: NoteConstant.servicePath + "/note/" + key + "/delete",
    method: "post",
@@ -96,28 +95,6 @@ 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;
@@ -158,4 +135,4 @@ export function ajaxGet(url) {
  };
  xmlhttp.send();
  return data;
-}
+}
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/i18n/config/en.js
+++ b/src/i18n/config/en.js
@@ -4,7 +4,7 @@ const en = {
  },
  content: {
    blankTip: "I am Blank.",
-    noteTip: "Start writing something...",
+    noteTip: "Write here.",
    deleteTip: "The note will be deleted automatically. ttl:"
  },
  button: {
--- a/src/i18n/config/zh.js
+++ b/src/i18n/config/zh.js
@@ -4,7 +4,7 @@ const zh = {
  },
  content: {
    blankTip: "空白的内容。",
-    noteTip: "开始写下一些东西吧。。。",
+    noteTip: "写在这儿。",
    deleteTip: "笔记将被自动删除。剩余时间："
  },
  button: {
@@ -26,6 +26,9 @@ 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;
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,6 +1,4 @@
-import Vue from "vue";
-import VueI18n from "vue-i18n";
-Vue.use(VueI18n);
+import { createI18n } from "vue-i18n";

 import zh from "./config/zh";
 import en from "./config/en";
@@ -10,11 +8,16 @@ const messages = {
  en,
 }

-const i18n = new VueI18n({
-  messages: messages,
+const i18n = createI18n({
+  allowComposition: true,
+  globalInjection: true,
+  legacy: false,
  locale: getLocale(),
+  messages
 });

+
+
 function getLocale() {
  var lang = navigator.language;
  if (lang) {
--- a/src/libs/page.js
+++ b/src/libs/page.js
@@ -1,197 +0,0 @@
-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)
-    });
-}
--- a/src/libs/secret.js
+++ b/src/libs/secret.js
@@ -1,9 +1,45 @@
 import CryptoJS from "crypto-js";
 import pako from "pako";
+import {Buffer} from "buffer";
 //import {gzip_encode_raw,gzip_decode_raw} from 'wasm-flate';

 const wasmFlate = window.wasm_bindgen;

+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);
+  }
+};
+
+
 /**
 * @word 要加密的内容
 * @keyWord String  服务器随机返回的关键字
@@ -11,14 +47,14 @@ const wasmFlate = window.wasm_bindgen;

 export function wrap(text, secretKey) {
  text = "FLAGNOTE#" + text;
-  let result = aesEncrypt(text, secretKey);
-  result = noteZip(result);
+  let  ui8ary = noteZip(text);
+  let result = aesEncrypt(convertUint8ArrayToWordArray(ui8ary), secretKey);
  return result;
 }

-export function unwrap(storeText, secretKey) {
-  let result = noteUnzip(storeText);
-  result = aesDecrypt(result, secretKey);
+export function unwrap(text, secretKey) {
+  let wdary = aesDecrypt(text, secretKey);
+  let result = noteUnzip(convertWordArrayToUint8Array(wdary));
  if (result.startsWith("FLAGNOTE#")) {
    return result.substring(9);
  }
@@ -37,7 +73,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.Pkcs7,
+    padding: CryptoJS.pad.ZeroPadding,
  });
  return encrypted.toString();
 }
@@ -48,28 +84,24 @@ 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.Pkcs7,
+    padding: CryptoJS.pad.ZeroPadding,
  });
-  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+  return decrypt;
 }

-//base64 encode
-export function encode(text) {
+//base64 encode btoa
+export function base64Encode(text) {
  return Buffer.from(text, 'utf-8').toString('base64');
 }

-//base64 decode
-export function decode(text) {
+//base64 decode atob
+export function base64Decode(text) {
  return Buffer.from(text,'base64').toString('utf-8');
 }

-export function noteUnzip(text) {
-  let charData = text.split(",").map(function (x) {
-    return parseInt(x);
-  });
-  let binData = new Uint8Array(charData);
-  let data = unzip(binData);
-  text   = String.fromCharCode.apply(null, new Uint8Array(data));
+export function noteUnzip(wdary) {
+  let data = unzip(wdary);
+  let text = new TextDecoder().decode(data);
  return text;
 }

@@ -96,35 +128,27 @@ export function unzip(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;
-// }

-// function convertUint8ArrayToWordArray(u8Array) {
-// 	var words = [], i = 0, len = u8Array.length;
- 
-// 	while (i < len) {
-// 		words.push(
-// 			(u8Array[i++] << 24) |
-// 			(u8Array[i++] << 16) |
-// 			(u8Array[i++] << 8)  |
-// 			(u8Array[i++])
-// 		);
-// 	}
- 
-// 	return {
-// 		sigBytes: words.length * 4,
-// 		words: words
-// 	};
-// }
+export function convertBase64ToHexString(base64) {
+	return CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(base64));
+}
+
+export function convertHexStringToBase64(hexString) {
+	return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(hexString));
+}
+
+export function convertHexStringToUint8Array(hexString) {
+  return Uint8Array.from(Buffer.from(hexString, 'hex'));
+}
+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);
+}
+
--- a/src/libs/storage.js
+++ b/src/libs/storage.js
@@ -1,5 +1,3 @@
-import localforage from "localforage";
-
 class Storage {
  constructor() {
    this.session = new Session();
@@ -31,23 +29,23 @@ class Session {

 class Local {
  setObject(key, value) {
-    return localforage.setItem(key, JSON.stringify(value));
+    localStorage.setItem(key, JSON.stringify(value));
  }

  getObject(key) {
-    return JSON.parse(localforage.getItem(key));
+    return JSON.parse(localStorage.getItem(key));
  }

  delete(key) {
-    return localforage.removeItem(key);
+    localStorage.removeItem(key);
  }

  setText(key, value) {
-    return localforage.setItem(key, value);
+    localStorage.setItem(key, value);
  }

  getText(key) {
-    return localforage.getItem(key);
+    return localStorage.getItem(key);
  }

  getUseSize() {
@@ -131,4 +129,4 @@ class Local {
 }

 const storage = new Storage();
-export default storage;
+export default storage;
--- a/src/main.js
+++ b/src/main.js
@@ -1,25 +1,29 @@
-import Vue from 'vue'
+import { createApp } 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"

 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;

-new Vue({
-    i18n,
-    router,
-    render: h => h(App)
-}).$mount('#app')
+const app = createApp(App)

+app.config.debug = debugFlag;
+app.config.devtools = debugFlag;
+app.config.productionTip = debugFlag;
+
+app.use(router)
+  .use(i18n)
+  .use(VueAxios, axios)
+  .use(ViewUIPlus, {
+    i18n: i18n,
+    transfer: true,
+    size: 'large',
+    capture: false,
+  })
+  .mount('#app')

--- a/src/plugins/iview.js
+++ b/src/plugins/iview.js
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-import ViewUI from 'view-design'
-
-Vue.use(ViewUI)
-
-//import 'view-design/dist/styles/iview.css'
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,22 +1,126 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import NoteView from "@/views/NoteView.vue";
-import ErrorView from "@/views/ErrorView.vue";
+import { createRouter, createWebHistory } from 'vue-router'
+import EditNote from "@/views/EditNote.vue";
+import ViewNote from "@/views/ViewNote.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";

-Vue.use(VueRouter);
+var keyMeta = null;
+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);
+
+  keyMeta = storage.session.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) {
+    //firstEdit
+    return EditNote;
+  }
+
+  //set noteMeta
+  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) {
+    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([abcdefhikmnopqstuvwxyz23456789]{16})",
+    path: "/:name([a-z0-9]{10,20})",
    name: "note",
-    component: NoteView,
+    component: getNoteView(),
+    meta: { keyMeta: getKeyMetaParam(), noteMeta: getNoteMetaParam(), errorMeta: getErrorMetaParam() },
  },
-  { path: "/:path(.*)", component: ErrorView }
+  { path: "/:path(.*)", component: ErrorRoute }
 ];

-const router = new VueRouter({
-  routes,
+const router = createRouter({
+  history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
+  linkExactActiveClass: "active",
  mode: "history",
-});
+  routes
+})

 export default router;
--- a/src/views/EditNote.vue
+++ b/src/views/EditNote.vue
@@ -38,6 +38,13 @@
  justify-content: center;
 }

+/* button span {
+  margin-left: 0px !important;
+  font-size: 18px !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;
+} */
+


@media print {
@@ -80,30 +87,19 @@
                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>
+                    icon="md-cloud-upload"></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>
@@ -113,18 +109,12 @@
              <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="crop" v-show="model.showDownloadText" type="error"
+                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();" 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(); "
-                  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(); "
+                  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;"
@@ -149,13 +139,15 @@
              :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;">
+                <div ref="html2canvas" 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"
+                    :autosize="{ minRows: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
                    @on-keydown="recordEventKdown" />
+                  
                </div>
              </Form>
            </Card>
+            <WordCount :value="noteForm.text" :total="100000" style="border-top:1px solid #ed4014;float:left" />
            </Col>

          </Row>
@@ -163,7 +155,7 @@

      </Content>

-      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
    </Layout>

    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
@@ -197,10 +189,11 @@ 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',
@@ -222,6 +215,7 @@ export default {
        lock: 0,
        locking: 0,
        commited: 0,
+        deleted: 0,
        serverTime: '',
        initTime: '',
      },
@@ -235,22 +229,25 @@ export default {
      toTopState: false,
      showMenuState: false,
      showHeaderShade: false,
-      pageSession: '',
      errorInfo: '',
+      lastEditTime: 0,
+      backStoreTextInterval: null,
+      lastStoreCount: 0,
+      lastStoreTime: 0,
    }
  },
  created() {
-    this.pageSession = new Date().getTime();
+    this.editTime = 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);
-    }
+    // let path = location.pathname;
+    // if ("/" == path) {
+    //   history.pushState('', '', '/' + this.noteForm.key);
+    // }

    //wx does not show downloadText
    this.model.showDownloadText = !isWeixin();
@@ -276,6 +273,7 @@ export default {
      // }

      storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
+      storage.session.delete(keyMeta.key + ".keyMeta");
    } else {
      // second edit
      let noteMeta = this.$route.meta.noteMeta;
@@ -293,6 +291,10 @@ export default {
      }
    }

+    this.lastStoreCount = this.noteForm.text.length;
+    this.lastEditTime = new Date().getTime();
+    this.lastStoreTime = this.lastEditTime;
+
    this.bindCtrlAllEvent();
    this.bindToTopEvent();

@@ -313,12 +315,15 @@ export default {
    const someOtherEl = document.querySelector('#wrapper');

    myObserver.observe(someOtherEl);
+
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
+    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  computed: {},
  watch: {},
@@ -355,7 +360,49 @@ export default {
        return;
      }

-      setStoreText(this.noteForm, this.state, this.secret);
+      let nowEditCount = this.noteForm.text.length;
+      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;
@@ -395,7 +442,7 @@ export default {
        }

        this.noteForm.text = event.currentTarget.value;
-        setStoreText(this.noteForm, this.state, this.secret);
+        this.recordText();

      } else if (event.ctrlKey && (event.which == 13)) {
        //save
@@ -442,16 +489,16 @@ export default {

          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"){
+          if (res.data.code == "100013" || res.data.code == "800001") {
            let key = setNewStoreText(this.noteForm);
-            location.href="/"+key;
+            location.href = "/" + key;
          }

        }
@@ -470,6 +517,7 @@ 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();
@@ -497,7 +545,67 @@ 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>
--- a/src/views/ErrorNote.vue
+++ b/src/views/ErrorNote.vue
@@ -81,7 +81,7 @@
      </Content>


-      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>

    </Layout>
  </div>
@@ -135,19 +135,6 @@ export default {

    //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);


  },
--- a/src/views/ErrorRoute.vue
+++ b/src/views/ErrorRoute.vue
@@ -6,7 +6,7 @@

 <script>
 export default {
-  name: 'ErrorView',
+  name: 'ErrorRoute',
  components: {},
  data() {
    return {}
--- a/src/views/NoteView.vue
+++ b/src/views/NoteView.vue
@@ -1,449 +0,0 @@
-<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>
--- a/src/views/ViewNote.vue
+++ b/src/views/ViewNote.vue
@@ -80,8 +80,8 @@
 }

 #qrUrl::selection {
-  background-color: #ed4014;
-  color: #ffffff;
+  background: #dddddd;
+  color: #ed4014;
 }

 #copyBtn {
@@ -151,11 +151,11 @@



-/* #noteMenu button span{
-  font-size: 20px;
-  line-height: 20px;
-  margin-left: 7px !important;
-  margin-right: 5px !important;
+/* button span {
+  margin-left: 0px !important;
+  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>

@@ -171,20 +171,6 @@
            <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">
@@ -203,8 +189,16 @@
                <Button-group size="large">

                  <Button aria-label="ttl" type="error"
-                    style="margin-left:5px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
-                    @click="showTtlDeleteModel()" icon="md-alarm">{{ state.ttlDesc }}</Button>
+                    style="margin-left:5px; border-radius: 0px;font-size: 21px; padding-left: 3px !important;padding-right: 7px !important; font-family: Arial, sans-serif"
+                    @click="showTtlDeleteModel()">
+                    <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"
@@ -220,18 +214,19 @@
            <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 type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
+                <Button aria-label="new note" 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;"
-                  @click="refreshPage()"></Button>
-                -->
+                                <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
+                                @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(); switchMenu();"
-                  icon="md-download"></Button>
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>

                <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
                  @click="showDeleteModel(); switchMenu();"></Button>
@@ -254,9 +249,33 @@
            <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: 2px solid white;">
-                <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
+              <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
+                <Skeleton :loading="showSkeleton">
+                  <template #template>
+                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;" >
+                      <SkeletonItem />
+                      <SkeletonItem block width="80%" height="16px" />
+                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="38%" height="16px" />
+                      <SkeletonItem width="88%" height="16px" />
+                      <SkeletonItem block width="80%" height="16px" />
+                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="38%" height="16px" />
+                      <SkeletonItem width="88%" height="16px" />
+                      <SkeletonItem block width="80%" height="16px" />
+                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="38%" height="16px" />
+                      <SkeletonItem width="88%" height="16px" />
+                    </div>
+                  </template>
+                  <template #default>
+                    <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
+                      :autosize="{ minRows: 35 }" />
+                  </template>
+                </Skeleton>
              </div>
            </Card>
            </Col>
@@ -266,19 +285,14 @@


      <Footer class="layout-footer-center">
-        2022 &copy; flagnote.com
+        2023 &copy; flagnote.com
      </Footer>

    </Layout>

    <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
      @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%">
@@ -303,7 +317,7 @@

      <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>
@@ -314,7 +328,7 @@
      </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>
@@ -325,15 +339,12 @@
      </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>
@@ -343,10 +354,12 @@ 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";
+import QRCode from "qrcodejs2-fixes";
 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',
@@ -388,6 +401,8 @@ export default {
      showMenuState: false,
      showHeaderShade: false,
      errorInfo: '',
+      targetTime: null,
+      showSkeleton: true,
    }
  },
  created() {
@@ -413,6 +428,7 @@ 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; //读者有没有值可配置
@@ -437,12 +453,6 @@ export default {
  },
  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 => {
@@ -469,6 +479,13 @@ 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); 
+    }
  },
  updated() {
  },
@@ -505,9 +522,7 @@ export default {
        } else if (mins < 10) {
          mins = "0" + mins;
        }
-
        let seds = parseInt(ittl % 60);
-
        if (seds < 0) {
          seds = "00";
        } else if (seds < 10) {
@@ -515,7 +530,6 @@ 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();
@@ -553,7 +567,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 {
@@ -580,28 +594,19 @@ export default {
            return;
          }

-          let blob = new Blob([res.data], {
-            type: res.data.type
-          });
-
-          let reader = new FileReader();
-          reader.onload = function (e) {
-            if (!e.target.result || e.target.result.byteLength == 0) {
+          res.data.arrayBuffer().then(function (ab) {
+            if (!ab || ab.byteLength == 0) {
              return;
            }

-            var bytes = new Uint8Array(e.target.result);
-            bytes = bytes.subarray(7,bytes.length-7);
-            let bytesString = bytes.join(",");
-            that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
-            //that.noteForm.escapeText = getEscapeText(that.noteForm.text);
-
+            let base64String = Buffer.from(ab).toString('base64')
+            that.noteForm.text = unwrap(base64String, that.secret.secretKey);
+            that.showSkeleton = false;
            // 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 + '|' + bytesString);
+              storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + base64String);
            }
-          };
-          reader.readAsArrayBuffer(blob);
+          });
        });

      } else {
@@ -612,6 +617,7 @@ 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
@@ -664,6 +670,62 @@ 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>
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,30 +1,70 @@
-const { defineConfig } = require("@vue/cli-service");
+const { defineConfig } = require('@vue/cli-service')
 const CompressionPlugin = require("compression-webpack-plugin");
 const WebpackObfuscator = require('webpack-obfuscator');
+const path = require('path')

-module.exports = defineConfig({
+const { NODE_ENV, VUE_APP_TITLE = '' } = process.env
+
+const assetsCDN = {
+  // 忽略打包的第三方库
+  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.2.47/dist/vue.global.min.js',
+    'https://cdn.jsdelivr.net/npm/vue-router@4.1.6/dist/vue-router.global.min.js',
+    'https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/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.10/dist/viewuiplus.min.js',
+    
+    'https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.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.10/dist/styles/viewuiplus.min.css',
+  ]
+}
+
+
+const config = {

  assetsDir: 'static',
-  productionSourceMap: false,
-  
-  configureWebpack: (config) => {
-    config.experiments = { asyncWebAssembly: true,syncWebAssembly:true }
-    
+  productionSourceMap: NODE_ENV !== 'production',
+
+  configureWebpack: (config) => {
+    config.experiments = { asyncWebAssembly: true, syncWebAssembly: true }
+
+    config.externals = assetsCDN.externals;
+
+    // const assetsCDN = {
+    //   // 放置需要使用 cdn 的库
+    //   externals: {
+    //     'vue': 'Vue',
+    //     'vue-router': 'VueRouter',
+    //     "crypto-js": "CryptoJS",
+    //     'pako': 'pako',
+    //     "html2canvas": "html2canvas",
+    //     'view-ui-plus':'ViewUIPlus',
+    //   },
+    //   css: [
+    //     // 存放 引用 css文件的地址
+    //     '//unpkg.com/element-plus@1.0.2-beta.48/lib/theme-chalk/index.css',
+    //   ],
+    //   js: [
+    //     // 存放 引用 js 文件的地址
+    //     '//unpkg.com/vue@3.1.1/dist/vue.global.js',
+    //     '//unpkg.com/element-plus@1.0.2-beta.48/lib/index.full.js'
+    //   ]
+    // }

-    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') {
@@ -55,24 +95,49 @@ module.exports = defineConfig({
      )
    }
  },
-  transpileDependencies: true,
-  chainWebpack: (config) => {
-    config.plugin("html").tap((args) => {
-      args[0].title = "flagnote.com";
+
+  transpileDependencies: false,
+
+
+  chainWebpack: (setting) => {
+    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: {
      "/note": {
        target: "https://flagnote.com/", // 后台接口域名
-//        target: "http://localhost:10000/", // 后台接口域名
+        //target: "http://localhost:20000/", // 后台接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          // '^/': '/'
        },
+      }, "^/[abcdefhikmnopqstuvwxyz23456789]{16}\\.txt$": {
+        target: "https://flagnote.com/", // 后台接口域名
+        //target: "http://localhost:20000/", // 后台接口域名
+        secure: false, // 如果是https接口，需要配置这个参数
+        changeOrigin: true, //是否跨域
+        pathRewrite: {
+          '^/': '/note/'
+        },
      },
    },
-  },
-});
+  }
+}
+
+module.exports = defineConfig(config)
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Jesse-Ma	ff3e77200c	i18n	2023-04-12 10:51:10 +08:00
Jesse-Ma	4e32a23eea	showSkeleton	2023-04-07 09:26:38 +08:00
Jesse-Ma	612c9b2164	milestone	2023-04-06 13:40:18 +08:00
Jesse-Ma	a9e7f88412	selection 样式	2023-04-03 11:05:00 +08:00
Jesse-Ma	d3a29444bf	refresh save	2023-03-31 17:19:37 +08:00
Jesse-Ma	83c3901b86	use more Buffer	2023-03-31 15:59:13 +08:00
Jesse-Ma	64db2300b3	js compact	2023-03-31 15:58:42 +08:00
Jesse-Ma	8e6ce23b98	hex plus plus	2023-03-31 10:21:44 +08:00
Jesse-Ma	f369e59f6f	hex plus	2023-03-30 10:19:18 +08:00
Jesse-Ma	0de98e660b	storetext policies	2023-03-29 16:11:59 +08:00
Jesse-Ma	b017e7bda1	zip first	2023-03-23 11:34:41 +08:00
Jesse-Ma	b31563aaab	compact	2023-03-22 14:28:24 +08:00
Jesse-Ma	bb7085adaa	compact	2023-03-22 14:27:59 +08:00
Jesse-Ma	67035a0abf	add html2canvas	2023-03-15 14:49:19 +08:00
Jesse-Ma	b86cf176dd	redirect done	2023-03-14 14:21:23 +08:00