remove wasm

.env

@@ -0,0 +1 @@
+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 = 409600
+VUE_APP_NOTE_MAX_COUNT = 131072
-VUE_APP_NOTE_MAX_DESC = 400K
+VUE_APP_NOTE_MAX_DESC = 128K
-

.env.production

@@ -1,5 +1,8 @@
-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_COUNT = 131072
-VUE_APP_NOTE_MAX_DESC = 400K
+VUE_APP_NOTE_MAX_DESC = 128K
+VUE_APP_CDN_PROVIDER = jsdelivr
+# VUE_APP_CDN_PROVIDER = unpkg

.env.staging

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

.eslintignore

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

.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
+    }
+}

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
+- This project exposes environment variables on `process.env` object.
-```
+- Different modes (development/staging/production) correspond to different environment files (.env.*).
-yarn serve
+- .env file is always included, duplicate variables are overwritten by the specific mode file (.env.*).
-```
-
-### 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,5 +1,15 @@
-// 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,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
   }
 }

package.json

@@ -1,61 +1,56 @@
 {
   "name": "flagnote-web",
-  "version": "0.1.0",
+  "version": "1.0.0",
-  "private": true,
+  "description": "flagnote web",
   "scripts": {
+    "dev": "npm run serve",
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --mode production",
+    "build": "vue-cli-service build",
-    "build.test": "vue-cli-service build --mode test",
+    "build:staging": "vue-cli-service build --mode=staging",
-    "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.27.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",
     "html2canvas": "^1.4.1",
     "pako": "^2.1.0",
-    "qrcodejs2": "^0.0.2",
+    "qrcodejs2-fixes": "^0.0.2",
-    "view-design": "^4.7.0",
+    "view-ui-plus": "^1.3.10",
-    "vue": "^2.7.14",
+    "vue": "^3.2.13",
     "vue-axios": "^3.5.2",
-    "vue-i18n": "^8.28.2",
+    "vue-i18n": "^9.2.2",
-    "vue-router": "^3.6.5"
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.8",
+    "eslint": "^8.14.0",
-    "@vue/cli-service": "~5.0.8",
+    "eslint-config-airbnb-base": "^15.0.0",
-    "compression-webpack-plugin": "^10.0.0",
+    "eslint-plugin-vue": "^8.7.1",
-    "core-js": "^3.26.1",
+    "husky": "^7.0.4",
-    "eslint": "^7.32.0",
+    "less": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "less-loader": "^10.2.0",
-    "javascript-obfuscator": "^4.0.0",
+    "mockjs": "^1.1.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": {}
   },
   "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,47 +18,21 @@
   <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
+      background-color: #dddddd;
+      height: 100%;
     }
   </style>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" rel="stylesheet"
+  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
-    type="text/javascript"></script>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js" rel="stylesheet"
+  <% } %>
-    type="text/javascript"></script>
+  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
-  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js" rel="stylesheet"
+    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
-    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.min.js" rel="stylesheet"
-    type="text/javascript"></script>
-  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.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>
@@ -69,8 +43,6 @@
     if (!!window.ActiveXObject || "ActiveXObject" in window) {
       document.querySelector('#noie').style.display = 'block';
     }
-
-
   </script>
 </body>
 

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
     <router-view></router-view>
-  </div>
 </template>
 
 <script>
@@ -54,7 +52,7 @@ body {
 }
 
 .noteHeaderShade {
-  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
+  background-color: white;
   width:100%;
   height:40px;
   border-bottom: dashed #ed4014 1px;
@@ -81,23 +79,23 @@ body {
 
 
 #noteText::selection {
-  background: #ed4014;
+  background: #dddddd;
-  color: white;
+  color: #ed4014;
 }
 
 #noteText::-moz-selection {
-  background: #ed4014;
+  background: #dddddd;
-  color: white;
+  color: #ed4014;
 }
 
 #noteText br::selection {
-  background: #ed4014;
+  background: #dddddd;
-  color: white;
+  color: #ed4014;
 }
 
 #noteText br::-moz-selection {
-  background: #ed4014;
+  background: #dddddd;
-  color: white;
+  color: #ed4014;
 }
 
 .noteUrl {
@@ -122,10 +120,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>

src/api/note.js

@@ -3,6 +3,8 @@ import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
 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;
@@ -17,7 +19,9 @@ axios.interceptors.response.use(undefined, (err) => {
   }
 });
 
-export function saveNote(noteForm, secret) {
+export function saveNote(noteForm,state, secret) {
+  setStoreText(noteForm, state, secret);
+
   let storeKey = secret.storeKey;
 
   let storeInfo = storage.local.getText(storeKey);
@@ -48,8 +52,8 @@ export function saveNote(noteForm, secret) {
     });
   }
 
-  let bufferArrary = eval("[" + note.text + "]");
+  let array = Buffer.from(note.text, 'base64')
-  let array = Uint8Array.from(bufferArrary);
+
   let blob = new Blob([array], { type: "application/octet-stream" });
   let form = new FormData();
   form.append("file", blob, noteForm.key);
@@ -72,10 +76,7 @@ export function saveNote(noteForm, secret) {
 }
 
 export function deleteNote(key) {
-  let storeKey = getStoreKey(key);
-  let storeInfo = storage.local.getText(storeKey);
   let note = {
-    cipher: storeInfo.substring(2, 34),
     key: key,
   };
 

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: {

src/i18n/config/zh.js

@@ -4,7 +4,7 @@ const zh = {
   },
   content: {
     blankTip: "空白的内容。",
-    noteTip: "开始写下一些东西吧。。。",
+    noteTip: "写在这儿。",
     deleteTip: "笔记将被自动删除。剩余时间："
   },
   button: {

src/i18n/index.js

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

src/libs/secret.js

@@ -1,8 +1,41 @@
 import CryptoJS from "crypto-js";
 import pako from "pako";
-//import {gzip_encode_raw,gzip_decode_raw} from 'wasm-flate';
+import { Buffer } from "buffer";
+
+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 要加密的内容
@@ -11,14 +44,14 @@ const wasmFlate = window.wasm_bindgen;
 
 export function wrap(text, secretKey) {
   text = "FLAGNOTE#" + text;
-  let result = aesEncrypt(text, secretKey);
+  let ui8ary = noteZip(text);
-  result = noteZip(result);
+  let result = aesEncrypt(convertUint8ArrayToWordArray(ui8ary), secretKey);
   return result;
 }
 
-export function unwrap(storeText, secretKey) {
+export function unwrap(text, secretKey) {
-  let result = noteUnzip(storeText);
+  let wdary = aesDecrypt(text, secretKey);
-  result = aesDecrypt(result, secretKey);
+  let result = noteUnzip(convertWordArrayToUint8Array(wdary));
   if (result.startsWith("FLAGNOTE#")) {
     return result.substring(9);
   }
@@ -37,7 +70,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 +81,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
+//base64 encode btoa
-export function encode(text) {
+export function base64Encode(text) {
   return Buffer.from(text, 'utf-8').toString('base64');
 }
 
-//base64 decode
+//base64 decode atob
-export function decode(text) {
+export function base64Decode(text) {
-  return Buffer.from(text,'base64').toString('utf-8');
+  return Buffer.from(text, 'base64').toString('utf-8');
 }
 
-export function noteUnzip(text) {
+export function noteUnzip(wdary) {
-  let charData = text.split(",").map(function (x) {
+  let data = unzip(wdary);
-    return parseInt(x);
+  let text = new TextDecoder().decode(data);
-  });
-  let binData = new Uint8Array(charData);
-  let data = unzip(binData);
-  text   = String.fromCharCode.apply(null, new Uint8Array(data));
   return text;
 }
 
@@ -80,51 +109,35 @@ 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;
-// }
 
-// function convertUint8ArrayToWordArray(u8Array) {
+export function convertBase64ToHexString(base64) {
-// 	var words = [], i = 0, len = u8Array.length;
+  return CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(base64));
+}
 
-// 	while (i < len) {
+export function convertHexStringToBase64(hexString) {
-// 		words.push(
+  return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(hexString));
-// 			(u8Array[i++] << 24) |
+}
-// 			(u8Array[i++] << 16) |
+
-// 			(u8Array[i++] << 8)  |
+export function convertHexStringToUint8Array(hexString) {
-// 			(u8Array[i++])
+  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);
+}
 
-// 	return {
-// 		sigBytes: words.length * 4,
-// 		words: words
-// 	};
-// }

src/main.js

@@ -1,25 +1,44 @@
-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"
+
+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;
 
-new Vue({
+const app = createApp(App)
-    i18n,
+
-    router,
+app.config.debug = debugFlag;
-    render: h => h(App)
+app.config.devtools = debugFlag;
-}).$mount('#app')
+app.config.productionTip = debugFlag;
+
+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

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

src/router/index.js

@@ -1,5 +1,4 @@
-import Vue from "vue";
+import { createRouter, createWebHistory } from 'vue-router'
-import VueRouter from "vue-router";
 import EditNote from "@/views/EditNote.vue";
 import ViewNote from "@/views/ViewNote.vue";
 import ErrorRoute from "@/views/ErrorRoute.vue";
@@ -8,8 +7,6 @@ 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;
@@ -119,9 +116,11 @@ const routes = [
   { path: "/:path(.*)", component: ErrorRoute }
 ];
 
-const router = new VueRouter({
+const router = createRouter({
-  routes,
+  history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
+  linkExactActiveClass: "active",
   mode: "history",
-});
+  routes
+})
 
 export default router;

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 {
@@ -68,42 +75,30 @@
 
     <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 }">
-
-          <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>
                   <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>
@@ -115,8 +110,7 @@
                   @click="createNote(); switchMenu(); " icon="md-add"></Button>
 
                 <Button aria-label="crop" v-show="model.showDownloadText" type="error"
-                 style="border-radius: 0px;font-size: 24px;" @click="saveImage();switchMenu();"
+                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();" icon="md-crop"></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();"
@@ -129,13 +123,22 @@
 
 
             </div>
-          </Affix>
-
-
 
             </Col>
           </Row>
         </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <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: 650px;">
@@ -146,11 +149,13 @@
               <Form :model="noteForm" :label-width="80">
                 <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>
@@ -161,7 +166,7 @@
       <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 }">
+    <Modal scrollable  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>
@@ -172,7 +177,7 @@
       </p>
     </Modal>
 
-    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable  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>
@@ -192,12 +197,13 @@ 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',
   props: {},
@@ -218,6 +224,7 @@ export default {
         lock: 0,
         locking: 0,
         commited: 0,
+        deleted: 0,
         serverTime: '',
         initTime: '',
       },
@@ -231,12 +238,15 @@ 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;
@@ -272,7 +282,7 @@ export default {
       // }
 
       storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
-      storage.session.delete(keyMeta.key+".keyMeta");
+      storage.session.delete(keyMeta.key + ".keyMeta");
     } else {
       // second edit
       let noteMeta = this.$route.meta.noteMeta;
@@ -290,32 +300,26 @@ export default {
       }
     }
 
+    this.lastStoreCount = this.noteForm.text.length;
+    this.lastEditTime = new Date().getTime();
+    this.lastStoreTime = this.lastEditTime;
+
     this.bindCtrlAllEvent();
     this.bindToTopEvent();
 
+    if(window.wasm_flate_bg_path){
       window.wasm_bindgen(window.wasm_flate_bg_path);
+    }
   },
   mounted() {
-    const myObserver = new ResizeObserver(entries => {
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
-      // 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);
   },
   updated() {
   },
   beforeDestroy() {
   },
   destroyed() {
+    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
   },
   computed: {},
   watch: {},
@@ -352,7 +356,49 @@ export default {
         return;
       }
 
+      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;
@@ -392,7 +438,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
@@ -400,7 +446,7 @@ export default {
       }
     },
     save() {
-      return saveNote(this.noteForm, this.secret);
+      return saveNote(this.noteForm,this.state,this.secret);
     },
     validateForm() {
       let text = this.noteForm.text;
@@ -446,9 +492,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;
           }
 
         }
@@ -467,6 +513,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();
@@ -498,7 +545,7 @@ export default {
     dataURLToBlob(dataurl) {
       let arr = dataurl.split(',');
       let mime = arr[0].match(/:(.*?);/)[1];
-      let bstr = atob(arr[1]);
+      let bstr = window.atob(arr[1]);
       let n = bstr.length;
       let u8arr = new Uint8Array(n);
       while (n--) {
@@ -511,24 +558,24 @@ export default {
 
       let that = this;
       let a = document.createElement('a');
-      html2canvas(canvasID,{
+      html2canvas(canvasID, {
         scale: 1,
-        windowWidth: parseInt(document.getElementById("noteText").offsetWidth)+2,
+        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.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.fontSize = "15px";
-          div.style.width= "100%";
+          div.style.width = "100%";
-          div.style.border="0px";
+          div.style.border = "0px";
-          div.style.fontFamily="'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
+          div.style.fontFamily = "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
 
           nt.style.display = 'none'
 
@@ -550,6 +597,11 @@ export default {
         document.body.removeChild(a);
       });
     },
+    beforeunloadHandler() {
+      if (this.state.deleted == 0) {
+        setStoreText(this.noteForm, this.state, this.secret);
+      }
+    },
   }
 }
 </script>

src/views/ErrorNote.vue

@@ -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);
 
 
   },

src/views/ViewNote.vue

@@ -80,8 +80,8 @@
 }
 
 #qrUrl::selection {
-  background-color: #ed4014;
+  background: #dddddd;
-  color: #ffffff;
+  color: #ed4014;
 }
 
 #copyBtn {
@@ -151,40 +151,26 @@
 
 
 
-/* #noteMenu button span{
+/* button span {
-  font-size: 20px;
+  margin-left: 0px !important;
-  line-height: 20px;
+  font-size: 16px !important;
-  margin-left: 7px !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-right: 5px !important;
+  margin-bottom: 6px;
 } */
 </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 }">
-          <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">
@@ -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"
+                    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()" icon="md-alarm">{{ state.ttlDesc }}</Button>
+                    @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"
@@ -241,13 +235,25 @@
 
             </div>
 
-          </Affix>
+
 
 
 
             </Col>
           </Row>
         </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <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: 650px;">
@@ -257,7 +263,7 @@
             <Card :padding="0">
               <div ref="html2canvas" 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')" />
+                      :autosize="{ minRows: 35 }" />
               </div>
             </Card>
             </Col>
@@ -272,14 +278,9 @@
 
     </Layout>
 
-    <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
+    <Modal scrollable  v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
       @on-cancel="closeShareModel">
-      <p style="text-align: center;
+      <p style="text-align: center; z-index: 1000; position: absolute; top: -2px; left: 0px; width: 100%;">
-              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%">
@@ -297,7 +298,7 @@
       </p>
     </Modal>
 
-    <Modal v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable  v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-top:20px;">
         {{ $t("content.deleteTip") }}{{ state.ttlDesc }}
       </p>
@@ -309,7 +310,7 @@
       </p>
     </Modal>
 
-    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable  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>
@@ -320,7 +321,7 @@
       </p>
     </Modal>
 
-    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable  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>
@@ -341,11 +342,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',
@@ -387,6 +389,8 @@ export default {
       showMenuState: false,
       showHeaderShade: false,
       errorInfo: '',
+      targetTime: null,
+      showSkeleton: true,
     }
   },
   created() {
@@ -412,6 +416,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; //读者有没有值可配置
@@ -435,27 +440,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 => {
-        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 = {
@@ -468,6 +452,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() {
   },
@@ -504,9 +495,7 @@ export default {
         } else if (mins < 10) {
           mins = "0" + mins;
         }
-
         let seds = parseInt(ittl % 60);
-
         if (seds < 0) {
           seds = "00";
         } else if (seds < 10) {
@@ -514,7 +503,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();
@@ -579,27 +567,19 @@ export default {
             return;
           }
 
-          let blob = new Blob([res.data], {
+          res.data.arrayBuffer().then(function (ab) {
-            type: res.data.type
+            if (!ab || ab.byteLength == 0) {
-          });
-
-          let reader = new FileReader();
-          reader.onload = function (e) {
-            if (!e.target.result || e.target.result.byteLength == 0) {
               return;
             }
 
-            var bytes = new Uint8Array(e.target.result);
+            let base64String = Buffer.from(ab).toString('base64')
-            let bytesString = bytes.join(",");
+            that.noteForm.text = unwrap(base64String, that.secret.secretKey);
-            that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
+            that.showSkeleton = false;
-            //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 + '|' + bytesString);
+              storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + base64String);
             }
-          };
+          });
-          reader.readAsArrayBuffer(blob);
         });
 
       } else {
@@ -610,6 +590,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
@@ -665,7 +646,7 @@ export default {
     dataURLToBlob(dataurl) {
       let arr = dataurl.split(',');
       let mime = arr[0].match(/:(.*?);/)[1];
-      let bstr = atob(arr[1]);
+      let bstr = window.atob(arr[1]);
       let n = bstr.length;
       let u8arr = new Uint8Array(n);
       while (n--) {
@@ -677,7 +658,7 @@ export default {
       let canvasID = this.$refs["html2canvas"];
       let that = this;
       let a = document.createElement('a');
-      html2canvas(canvasID,{
+      html2canvas(canvasID, {
         scale: 1,
         windowWidth: document.getElementById("noteText").offsetWidth,
         onclone: (clonedDocument) => {
@@ -685,16 +666,16 @@ export default {
           const div = clonedDocument.createElement('div')
           div.innerText = nt.value
 
-          div.style.color="black";
+          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.fontSize = "15px";
-          div.style.width= "100%";
+          div.style.width = "100%";
-          div.style.border="0px";
+          div.style.border = "0px";
-          div.style.fontFamily="'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
+          div.style.fontFamily = "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
 
           nt.style.display = 'none'
 

vue.config.js

@@ -1,32 +1,47 @@
-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
 
-  assetsDir: 'static',
+const assetsCDN = {
-  productionSourceMap: false,
+  // 忽略打包的第三方库
-  
+  externals: {
-  configureWebpack: (config) => {
-    config.experiments = { asyncWebAssembly: true,syncWebAssembly:true }
-    
-
-    config.externals = {
     'vue': 'Vue',
     'vue-router': 'VueRouter',
-      'axios': 'axios',
-      //'vue-axios':'VueAxios',
     "crypto-js": "CryptoJS",
-      'qrcodejs2': 'QRCode',
     'pako': 'pako',
-      "view-design": 'iview',
+    "html2canvas": "html2canvas",
-      "iview": 'ViewUI',
+  //  'view-ui-plus':'ViewUIPlus',
-      "file-saver": 'saveAs',
+  },
-      "clipboard": "ClipboardJS",
+
-      "vue-i18n": "VueI18n",
+  // 通过cdn方式使用
-      "html2canvas":"html2canvas",
+  js: [
-      "wasm_flate":"wasm_flate"
+    '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/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: NODE_ENV !== 'production',
+
+  configureWebpack: (config) => {
+    config.experiments = { asyncWebAssembly: true, syncWebAssembly: true }
+
+    config.externals = assetsCDN.externals;
 
     // 为生产环境修改配置
     if (process.env.NODE_ENV === 'production') {
@@ -48,7 +63,7 @@ module.exports = defineConfig({
 
         new CompressionPlugin({
           algorithm: "gzip", // 使用gzip压缩
-          test: /\.js$|\.html$|\.png$|\.jpg$|\.svg$|\.wasm$|\.css$/, // 匹配文件名
+          test: /\.js$|\.html$|\.png$|\.jpg$|\.svg$|\.css$/, // 匹配文件名
           filename: "[path][base].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
           minRatio: 1, // 压缩率小于1才会压缩
           threshold: 5120, // 对超过10k的数据压缩
@@ -57,24 +72,48 @@ module.exports = defineConfig({
       )
     }
   },
-  transpileDependencies: true,
+
-  chainWebpack: (config) => {
+  transpileDependencies: false,
-    config.plugin("html").tap((args) => {
+
-      args[0].title = "flagnote.com";
+  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)