lema/flagnote-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: lema:pageone
Branches Tags
lema:main lema:scrollbar lema:view-ui-plus lema:dev-logo-switch lema:iview4 lema:dev-hex lema:redirect lema:pageone lema:asynchronization lema:dev
...
pull from: lema:dev-hex
Branches Tags
lema:main lema:scrollbar lema:view-ui-plus lema:dev-logo-switch lema:iview4 lema:dev-hex lema:redirect lema:pageone lema:asynchronization lema:dev

7 Commits
pageone ... dev-hex

Author SHA1 Message Date
Jesse-Ma
9f1a0b75e3 hex 2023-03-29 20:39:29 +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
13 changed files with 441 additions and 161 deletions
Expand all files Collapse all files

4
.env.development
View File

@@ -1,6 +1,6 @@
NODE_ENV = developement NODE_ENV = developement
VUE_APP_BASE_NAME = developement VUE_APP_BASE_NAME = developement
VUE_APP_BASE_URL = http://localhost:8080 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

4
.env.production
View File

@@ -1,5 +1,5 @@
NODE_ENV = production NODE_ENV = production
VUE_APP_BASE_NAME = production VUE_APP_BASE_NAME = production
VUE_APP_BASE_URL = https://flagnote.com 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

1
package.json
View File

@@ -15,6 +15,7 @@
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"pako": "^2.1.0", "pako": "^2.1.0",
"qrcodejs2": "^0.0.2", "qrcodejs2": "^0.0.2",
"view-design": "^4.7.0", "view-design": "^4.7.0",

4
public/index.html
View File

@@ -44,7 +44,9 @@
type="text/javascript"></script> type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" rel="stylesheet" <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" rel="stylesheet"
type="text/javascript"></script> type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js" rel="stylesheet" <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> type="text/javascript"></script>
<script> <script>
window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm" window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm"

67
public/redirect.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="theme-color" content="#ed4014" />
<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" />
<title>flagnote.com</title>
<style>
body {
background-color: #dddddd
}
</style>
<script>
const servicePath = "";
function ajaxGet(url) {
let data = null;
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200 || xmlhttp.status == 304) {
if (xmlhttp.responseText) {
let rs = JSON.parse(xmlhttp.responseText);
if (rs && rs.code == "000000") {
data = rs.data;
}
}
}
}
};
xmlhttp.send();
return data;
}
function getKeyMeta() {
let url = servicePath + "/note/keyMeta";
let keyMeta = null;
try {
keyMeta = ajaxGet(url);
} catch (error) {
console.log(error);
}
return keyMeta;
}
let keyMeta = getKeyMeta();
if (keyMeta && keyMeta.key) {
sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
location.href = "/" + keyMeta.key;
} else {
location.href = "/100006";
}
</script>
</head>
<body><noscript><strong>Please enable JavaScript to continue.</strong></noscript>
</body>
</html>

11
src/api/note.js
View File

@@ -1,7 +1,7 @@
import axios from "axios"; import axios from "axios";
import { getStoreKey } from "@/api/lock"; import { getStoreKey } from "@/api/lock";
import storage from "@/libs/storage"; import storage from "@/libs/storage";
import { md5, wrap} from "@/libs/secret"; import { md5, wrap, convertHexStringToUint8Array} from "@/libs/secret";
import NoteConstant from "@/libs/constants"; import NoteConstant from "@/libs/constants";
axios.interceptors.response.use(undefined, (err) => { axios.interceptors.response.use(undefined, (err) => {
@@ -48,8 +48,13 @@ export function saveNote(noteForm, secret) {
}); });
} }
let bufferArrary = eval("[100,111,32,110,111,116,32," + note.text + ",100,111,32,101,118,105,108]"); // let bufferArrary = eval("[" + note.text + "]");
let array = Uint8Array.from(bufferArrary); // let array = Uint8Array.from(bufferArrary);
// let encoder = new TextEncoder()
// let array = encoder.encode(note.text)
let array = convertHexStringToUint8Array(note.text)
let blob = new Blob([array], { type: "application/octet-stream" }); let blob = new Blob([array], { type: "application/octet-stream" });
let form = new FormData(); let form = new FormData();
form.append("file", blob, noteForm.key); form.append("file", blob, noteForm.key);

3
src/i18n/config/zh.js
View File

@@ -26,6 +26,9 @@ const zh = {
"100006": "服务器不可用！", "100006": "服务器不可用！",
"100011": "笔记为空!", "100011": "笔记为空!",
"100012": "笔记过大，超过{0}!", "100012": "笔记过大，超过{0}!",
"100013": "The address is used, Copy to a new address.",
"100014": "The text has been modified.",
"800001": "Repetitive Submit!",
} }
}; };
export default zh; export default zh;

175
src/libs/secret.js
View File

@@ -4,6 +4,43 @@ import pako from "pako";
const wasmFlate = window.wasm_bindgen; 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 要加密的内容 * @word 要加密的内容
* @keyWord String 服务器随机返回的关键字 * @keyWord String 服务器随机返回的关键字
@@ -11,14 +48,14 @@ const wasmFlate = window.wasm_bindgen;
export function wrap(text, secretKey) { export function wrap(text, secretKey) {
text = "FLAGNOTE#" + text; text = "FLAGNOTE#" + text;
let result = aesEncrypt(text, secretKey); let ui8ary = noteZip(text);
result = noteZip(result); let result = aesEncrypt(convertUint8ArrayToWordArray(ui8ary), secretKey);
return result; 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#")) { if (result.startsWith("FLAGNOTE#")) {
return result.substring(9); return result.substring(9);
} }
@@ -37,39 +74,37 @@ export function aesEncrypt(word, keyWord) {
let key = CryptoJS.enc.Utf8.parse(keyWord); let key = CryptoJS.enc.Utf8.parse(keyWord);
let encrypted = CryptoJS.AES.encrypt(word, key, { let encrypted = CryptoJS.AES.encrypt(word, key, {
mode: CryptoJS.mode.ECB, mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7, padding: CryptoJS.pad.ZeroPadding,
}); });
return encrypted.toString(); return encrypted.ciphertext.toString();
} }
//解密 //解密
export function aesDecrypt(word, keyWord) { export function aesDecrypt(word, keyWord) {
let key = CryptoJS.enc.Utf8.parse(keyWord); let key = CryptoJS.enc.Utf8.parse(keyWord);
let decrypt = CryptoJS.AES.decrypt(word, key, { var srcs = CryptoJS.enc.Hex.parse(word);
let decrypt = CryptoJS.AES.decrypt({
ciphertext: srcs
}, key, {
mode: CryptoJS.mode.ECB, 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
export function encode(text) { // export function encode(text) {
return Buffer.from(text, 'utf-8').toString('base64'); // return Buffer.from(text, 'utf-8').toString('base64');
} // }
//base64 decode //base64 decode
export function decode(text) { // export function decode(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; return text;
} }
@@ -80,51 +115,77 @@ export function noteZip(text) {
return text; return text;
} }
export function zip(data){ export function zip(data) {
if(wasmFlate.__wbindgen_wasm_module){ if (wasmFlate.__wbindgen_wasm_module) {
return wasmFlate.gzip_encode_raw(data); return wasmFlate.gzip_encode_raw(data);
} }
return pako.gzip(data); return pako.gzip(data);
} }
export function unzip(data){ export function unzip(data) {
if(wasmFlate.__wbindgen_wasm_module){ if (wasmFlate.__wbindgen_wasm_module) {
return wasmFlate.gzip_decode_raw(data); return wasmFlate.gzip_decode_raw(data);
} }
return pako.ungzip(data); return pako.ungzip(data);
} }
// function convertWordArrayToUint8Array(wordArray) { 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) { let rr = CryptoJS.enc.Uint8Array.stringify(wordArray);
// var words = [], i = 0, len = u8Array.length; return rr;
// console.log(rr)
// while (i < len) {
// words.push(
// (u8Array[i++] << 24) |
// (u8Array[i++] << 16) |
// (u8Array[i++] << 8) |
// (u8Array[i++])
// );
// }
// return { // var len = wordArray.words.length,
// sigBytes: words.length * 4, // u8_array = new Uint8Array(len << 2),
// words: words // 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) {
let rr = CryptoJS.enc.Uint8Array.parse(u8Array);
return rr;
// console.log(rr)
// 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 convertHexStringToUint8Array(hexString) {
var result = [];
for (var i = 0; i < hexString.length; i += 2) {
result.push(parseInt(hexString.substr(i, 2), 16));
}
return Uint8Array.from(result);
// Uint8Array.from(hexString.match(/.{1,2}/g).map((byte) => parseInt(byte, 16)));
}
export function convertUint8ArrayToHexString(byteArray) {
return Array.prototype.map.call(byteArray, function(byte) {
return ('0' + (byte & 0xFF).toString(16)).slice(-2);
}).join('');
}

26
src/router/index.js
View File

@@ -4,7 +4,7 @@ import EditNote from "@/views/EditNote.vue";
import ViewNote from "@/views/ViewNote.vue"; import ViewNote from "@/views/ViewNote.vue";
import ErrorRoute from "@/views/ErrorRoute.vue"; import ErrorRoute from "@/views/ErrorRoute.vue";
import ErrorNote from "@/views/ErrorNote.vue"; import ErrorNote from "@/views/ErrorNote.vue";
import { getKeyMeta, getNoteMeta } from "@/api/note"; import { getNoteMeta } from "@/api/note";
import { getStoreKey } from "@/api/lock"; import { getStoreKey } from "@/api/lock";
import storage from "@/libs/storage"; import storage from "@/libs/storage";
@@ -35,6 +35,7 @@ function getNoteView() {
let key = path.substring(1, path.length); let key = path.substring(1, path.length);
keyMeta = storage.session.getObject(key+".keyMeta");
if (keyMeta && keyMeta.key) { if (keyMeta && keyMeta.key) {
key = keyMeta.key; key = keyMeta.key;
} }
@@ -107,30 +108,7 @@ function getNoteView() {
return ErrorNote; return ErrorNote;
} }
function getHomeRedirect() {
let path = location.pathname;
if (path != "/") {
return;
}
//setKeyMeta
keyMeta = getKeyMeta();
// server error
if (!keyMeta) {
errorMeta = 100006;
return "/error_"+errorMeta;
}
return "/" + keyMeta.key;
}
const routes = [ const routes = [
{
path: "/",
name: "home",
redirect: getHomeRedirect(),
},
{ path: "/error_:code([0-9]{6})", component: ErrorNote }, { path: "/error_:code([0-9]{6})", component: ErrorNote },
{ {
path: "/:name([a-z0-9]{10,20})", path: "/:name([a-z0-9]{10,20})",

150
src/views/EditNote.vue
View File

@@ -100,7 +100,7 @@
<Button-group size="large"> <Button-group size="large">
<Button aria-label="publish" type="error" :loading="model.submitting" <Button aria-label="publish" type="error" :loading="model.submitting"
style="margin-left:5px; border-radius: 0px;font-size: 21px;" @click="submitNote()" 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;" <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> @click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
@@ -113,18 +113,12 @@
<Button-group vertical size="large"> <Button-group vertical size="large">
<Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;" <Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu(); " icon="md-add"></Button> @click="createNote(); switchMenu(); " icon="md-add"></Button>
<!--
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;" <Button aria-label="crop" v-show="model.showDownloadText" type="error"
@click="refreshPage()"></Button> 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" <Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); " style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
icon="md-download"></Button>
<Button aria-label="history text" v-show="model.showHistoryText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
icon="md-download"></Button> icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;" <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@@ -149,7 +143,7 @@
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }"> :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Card :padding="0"> <Card :padding="0">
<Form :model="noteForm" :label-width="80"> <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 <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: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
@on-keydown="recordEventKdown" /> @on-keydown="recordEventKdown" />
@@ -163,7 +157,7 @@
</Content> </Content>
<Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer> <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
</Layout> </Layout>
<Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }"> <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
@@ -197,10 +191,11 @@ import { unwrap } from '../libs/secret'
import { saveNote } from "@/api/note"; import { saveNote } from "@/api/note";
import { getStoreKey } from "@/api/lock"; import { getStoreKey } from "@/api/lock";
import storage from "@/libs/storage"; import storage from "@/libs/storage";
import { setStoreText,setNewStoreText } from "@/libs/noteStorage"; import { setStoreText, setNewStoreText } from "@/libs/noteStorage";
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { isWeixin } from "@/libs/utils"; import { isWeixin } from "@/libs/utils";
import NoteConstant from "@/libs/constants"; import NoteConstant from "@/libs/constants";
import html2canvas from "html2canvas";
export default { export default {
name: 'EditNote', name: 'EditNote',
@@ -235,22 +230,25 @@ export default {
toTopState: false, toTopState: false,
showMenuState: false, showMenuState: false,
showHeaderShade: false, showHeaderShade: false,
pageSession: '',
errorInfo: '', errorInfo: '',
lastEditTime: 0,
backStoreTextInterval: null,
lastStoreCount: 0,
lastStoreTime: 0,
} }
}, },
created() { created() {
this.pageSession = new Date().getTime(); this.editTime = new Date().getTime();
// read $route // read $route
this.noteForm.key = this.$route.params.name; this.noteForm.key = this.$route.params.name;
let keyMeta = this.$route.meta.keyMeta; let keyMeta = this.$route.meta.keyMeta;
//ipad chrome url not redirect //ipad chrome url not redirect
let path = location.pathname; // let path = location.pathname;
if ("/" == path) { // if ("/" == path) {
history.pushState('', '', '/' + this.noteForm.key); // history.pushState('', '', '/' + this.noteForm.key);
} // }
//wx does not show downloadText //wx does not show downloadText
this.model.showDownloadText = !isWeixin(); this.model.showDownloadText = !isWeixin();
@@ -276,6 +274,7 @@ export default {
// } // }
storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|"); storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
storage.session.delete(keyMeta.key + ".keyMeta");
} else { } else {
// second edit // second edit
let noteMeta = this.$route.meta.noteMeta; let noteMeta = this.$route.meta.noteMeta;
@@ -293,6 +292,10 @@ export default {
} }
} }
this.lastStoreCount = this.noteForm.text.length;
this.lastEditTime = new Date().getTime();
this.lastStoreTime = this.lastEditTime;
this.bindCtrlAllEvent(); this.bindCtrlAllEvent();
this.bindToTopEvent(); this.bindToTopEvent();
@@ -313,12 +316,15 @@ export default {
const someOtherEl = document.querySelector('#wrapper'); const someOtherEl = document.querySelector('#wrapper');
myObserver.observe(someOtherEl); myObserver.observe(someOtherEl);
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}, },
updated() { updated() {
}, },
beforeDestroy() { beforeDestroy() {
}, },
destroyed() { destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}, },
computed: {}, computed: {},
watch: {}, watch: {},
@@ -355,7 +361,49 @@ export default {
return; return;
} }
let nowEditCount = this.noteForm.text.length;
let nowEditTime = new Date().getTime();
if (nowEditCount < 1024) {
setStoreText(this.noteForm, this.state, this.secret); 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(that);
}
},
backStoreText(that) {
let nowEditCount = that.noteForm.text.length;
let nowEditTime = new Date().getTime();
if (Math.abs(nowEditCount - that.lastStoreCount) > 10) {
setStoreText(that.noteForm, that.state, that.secret);
that.lastStoreTime = that.lastEditTime;
that.lastStoreCount = nowEditCount;
} else {
if (nowEditTime - that.lastEditTime >= 1000 && nowEditTime - that.lastEditTime < 20000) {
if (that.lastEditTime != that.lastStoreTime) {
setStoreText(that.noteForm, that.state, that.secret);
that.lastStoreTime = that.lastEditTime;
that.lastStoreCount = nowEditCount;
}
} else if (nowEditTime - that.lastEditTime >= 20000) {
if (that.backStoreTextInterval != null) {
let ivl = that.backStoreTextInterval;
that.backStoreTextInterval = null;
window.clearInterval(ivl);
}
}
}
}, },
// recordEventKup(event) { // recordEventKup(event) {
// let tn = event.currentTarget.value; // let tn = event.currentTarget.value;
@@ -395,7 +443,7 @@ export default {
} }
this.noteForm.text = event.currentTarget.value; this.noteForm.text = event.currentTarget.value;
setStoreText(this.noteForm, this.state, this.secret); this.recordText();
} else if (event.ctrlKey && (event.which == 13)) { } else if (event.ctrlKey && (event.which == 13)) {
//save //save
@@ -449,9 +497,9 @@ export default {
alert(res.data.code); alert(res.data.code);
this.model.submitting = false; this.model.submitting = false;
this.state.locking = 0; 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); let key = setNewStoreText(this.noteForm);
location.href="/"+key; location.href = "/" + key;
} }
} }
@@ -497,7 +545,65 @@ export default {
} }
} }
} }
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = 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() {
this.recordText();
},
} }
} }
</script> </script>

2
src/views/ErrorNote.vue
View File

@@ -81,7 +81,7 @@
</Content> </Content>
<Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer> <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
</Layout> </Layout>
</div> </div>

81
src/views/ViewNote.vue
View File

@@ -220,7 +220,7 @@
<div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']" <div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;"> style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
<Button-group vertical size="large"> <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> @click="createNote(); switchMenu();"></Button>
<!-- <!--
@@ -228,10 +228,11 @@
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;" <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button> @click="refreshPage()"></Button>
--> -->
<Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
<Button aria-label="download text" v-show="model.showDownloadText" type="error" <Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();" style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>
icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;" <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@click="showDeleteModel(); switchMenu();"></Button> @click="showDeleteModel(); switchMenu();"></Button>
@@ -254,7 +255,7 @@
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }" <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }"> :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Card :padding="0"> <Card :padding="0">
<div id="wrapper" style="border-left: 2px solid white;"> <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
<Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text" <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" /> :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
</div> </div>
@@ -266,7 +267,7 @@
<Footer class="layout-footer-center"> <Footer class="layout-footer-center">
2022 &copy; flagnote.com 2023 &copy; flagnote.com
</Footer> </Footer>
</Layout> </Layout>
@@ -331,14 +332,11 @@
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
import { md5, unwrap } from "@/libs/secret"; import { md5, unwrap, convertUint8ArrayToHexString} from "@/libs/secret";
import { getStoreKey } from "@/api/lock"; import { getStoreKey } from "@/api/lock";
import { deleteNote, getNoteBlob } from "@/api/note"; import { deleteNote, getNoteBlob } from "@/api/note";
import storage from "@/libs/storage"; import storage from "@/libs/storage";
@@ -347,6 +345,7 @@ import QRCode from "qrcodejs2";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { isWeixin, getNoteUrl } from "@/libs/utils"; import { isWeixin, getNoteUrl } from "@/libs/utils";
import html2canvas from "html2canvas";
export default { export default {
name: 'ViewNote', name: 'ViewNote',
@@ -553,7 +552,7 @@ export default {
this.model.deleting = true; this.model.deleting = true;
let that = this; let that = this;
deleteNote(this.noteForm.key).then(res => { 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); storage.local.delete(that.secret.storeKey);
location.reload(); location.reload();
} else { } else {
@@ -590,9 +589,9 @@ export default {
return; return;
} }
var bytes = new Uint8Array(e.target.result); // let decoder = new TextDecoder();
bytes = bytes.subarray(7,bytes.length-7); // let bytesString = decoder.decode(e.target.result);
let bytesString = bytes.join(","); let bytesString = convertUint8ArrayToHexString(new Uint8Array(e.target.result));
that.noteForm.text = unwrap(bytesString, that.secret.secretKey); that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
//that.noteForm.escapeText = getEscapeText(that.noteForm.text); //that.noteForm.escapeText = getEscapeText(that.noteForm.text);
@@ -664,6 +663,62 @@ export default {
} }
} }
}, },
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = 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> </script>

10
vue.config.js
View File

@@ -8,7 +8,7 @@ module.exports = defineConfig({
productionSourceMap: false, productionSourceMap: false,
configureWebpack: (config) => { configureWebpack: (config) => {
config.experiments = { asyncWebAssembly: true,syncWebAssembly:true } config.experiments = { asyncWebAssembly: true, syncWebAssembly: true }
config.externals = { config.externals = {
@@ -23,7 +23,9 @@ module.exports = defineConfig({
"iview": 'ViewUI', "iview": 'ViewUI',
"file-saver": 'saveAs', "file-saver": 'saveAs',
"clipboard": "ClipboardJS", "clipboard": "ClipboardJS",
"vue-i18n": "VueI18n" "vue-i18n": "VueI18n",
"html2canvas": "html2canvas",
"wasm_flate": "wasm_flate"
}; };
// 为生产环境修改配置 // 为生产环境修改配置
@@ -65,8 +67,8 @@ module.exports = defineConfig({
devServer: { devServer: {
proxy: { proxy: {
"/note": { "/note": {
// target: "https://flagnote.com/", // 后台接口域名 target: "https://flagnote.com/", // 后台接口域名
target: "http://localhost:10000/", // 后台接口域名 // target: "http://localhost:10000/", // 后台接口域名
secure: false, // 如果是https接口，需要配置这个参数 secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域 changeOrigin: true, //是否跨域
pathRewrite: { pathRewrite: {