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

Compare commits

base: lema:dev
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
..
compare: lema:redirect
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

4 Commits
dev ... redirect

Author SHA1 Message Date
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
10 changed files with 240 additions and 81 deletions
Expand all files Collapse all files

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>

2
src/api/note.js
View File

@@ -48,7 +48,7 @@ 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 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();

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;

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})",

84
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,13 @@
<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 +144,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 +158,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 }">
@@ -201,6 +196,7 @@ 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',
@@ -247,10 +243,10 @@ export default {
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 +272,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;
@@ -497,7 +494,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: 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);
});
},
} }
} }
</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>

74
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,9 +332,6 @@
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
@@ -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 {
@@ -591,7 +590,6 @@ export default {
} }
var bytes = new Uint8Array(e.target.result); var bytes = new Uint8Array(e.target.result);
bytes = bytes.subarray(7,bytes.length-7);
let bytesString = bytes.join(","); let bytesString = bytes.join(",");
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 +662,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>

8
vue.config.js
View File

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