371 lines
9.1 KiB
Vue
371 lines
9.1 KiB
Vue
<style scoped>
|
|
.layout {
|
|
height: 100%;
|
|
background: #dddddd;
|
|
}
|
|
|
|
.header {
|
|
background: #dddddd;
|
|
}
|
|
|
|
.ivu-layout-header {
|
|
line-height: normal;
|
|
height: auto;
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
.content {
|
|
background: #dddddd;
|
|
}
|
|
|
|
.ivu-layout-content {
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
|
|
.layout-footer-center {
|
|
background: #dddddd;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.ivu-card-bordered {
|
|
border: 0px solid #dcdee2;
|
|
border-color: #e8eaec;
|
|
}
|
|
|
|
|
|
|
|
.noteKey {
|
|
color: red;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
font-family: "Bitstream Vera Sans Mono", Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
#noteText {
|
|
color: black;
|
|
padding: 15px;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
height: auto;
|
|
background: white;
|
|
min-width: 200px;
|
|
border-radius: 0px;
|
|
overflow-y: auto;
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
/*min-height: 400px;*/
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
#noteText::selection {
|
|
background: firebrick;
|
|
color: white;
|
|
}
|
|
|
|
#noteText::-moz-selection {
|
|
background: firebrick;
|
|
color: white;
|
|
}
|
|
|
|
#noteText br::selection {
|
|
background: firebrick;
|
|
color: white;
|
|
}
|
|
|
|
#noteText br::-moz-selection {
|
|
background: firebrick;
|
|
color: white;
|
|
}
|
|
|
|
button span {
|
|
font-size: 18px;
|
|
margin-left: -1px !important;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class="layout" onkeydown="keydown">
|
|
<Layout>
|
|
<Affix :offset-top="0">
|
|
|
|
|
|
<Header class="header">
|
|
<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 style="background: white;width:100%;height:40px;">
|
|
<img style="height:40px;float:left;" src="favicon.png">
|
|
<div style="float:left;width:auto;">
|
|
|
|
<Button-group size="large">
|
|
|
|
<Button type="error"
|
|
style="margin-left:5px; border-radius: 0px;font-size: 24px; font-family: Arial, sans-serif"
|
|
icon="md-cloud-done">{{ this.noteForm.ttlDesc }}</Button>
|
|
|
|
</Button-group>
|
|
|
|
</div>
|
|
|
|
|
|
<div style="float:right;width:auto;">
|
|
<Button-group size="large">
|
|
<Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
|
|
@click="createNote()" icon="md-add"></Button>
|
|
<Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
|
|
@click="dropNote()" icon="md-trash"></Button>
|
|
</Button-group>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
<div style="width:auto;float:right;font-size: 24px;">
|
|
<Button-group vertical size="large" style="position:absolute;right;0px;top:0px;">
|
|
<Button type="error" style="border-radius: 0px;font-size: 24px;" icon="md-add"
|
|
@click="showExt = true"></Button>
|
|
<Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
|
|
icon="md-cloud-upload"></Button>
|
|
<Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
|
|
icon="logo-googleplus"></Button>
|
|
<Button type="error" v-show="showExt" style="border-radius: 0px;font-size: 24px;"
|
|
icon="logo-tumblr"></Button>
|
|
</Button-group>
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</Header>
|
|
</Affix>
|
|
<Content class="content">
|
|
<div style="min-height: 650px;">
|
|
<Row>
|
|
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
|
|
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
|
|
<Card :padding="0">
|
|
<div style="border-left: 0px solid #FF3366;">
|
|
<div id="noteText" style="text-align: left;min-height: 650px;" class="monoFt"
|
|
v-html="this.noteForm.escapeText">
|
|
view2
|
|
</div>
|
|
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</Content>
|
|
|
|
|
|
<Footer class="layout-footer-center">2022 © flagnote.com</Footer>
|
|
|
|
</Layout>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { aesDecrypt, md5, unzip } from "@/libs/secret";
|
|
import Jquery from "jquery";
|
|
import { getSecretKey, getStoreKey } from "@/api/lock";
|
|
import { deleteNote } from "@/api/note";
|
|
import storage from "@/libs/storage";
|
|
import { getEscapeText } from "@/libs/noteStorage";
|
|
|
|
export default {
|
|
name: 'ViewNote',
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
noteForm: {
|
|
url: '',
|
|
text: '',
|
|
escapeText: '',
|
|
key: '',
|
|
md5: '',
|
|
lock: '0',
|
|
ttl: 3600,
|
|
ttlDesc: '',
|
|
},
|
|
secret: {
|
|
storeKey: '',
|
|
secretKey: '',
|
|
cipher: '',
|
|
},
|
|
state: {
|
|
lock: '0',
|
|
locking: '0',
|
|
commited: '0'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.noteForm.key = this.$route.params.name;
|
|
let storeKey = getStoreKey(this.noteForm.key);
|
|
this.secret.storeKey = storeKey;
|
|
let noteMeta = storage.session.getObject(storeKey + '.noteMeta');
|
|
if (noteMeta) {
|
|
this.state.lock = noteMeta.lock;
|
|
this.secret.cipher = noteMeta.cipher;
|
|
this.noteForm.md5 = noteMeta.md5;
|
|
this.noteForm.ttl = noteMeta.ttl;
|
|
this.startClock();
|
|
|
|
this.loadText();
|
|
}
|
|
|
|
this.bindEvent();
|
|
},
|
|
methods: {
|
|
startClock() {
|
|
let that = this;
|
|
window.setInterval(function () {
|
|
let ittl = parseInt(that.noteForm.ttl / 1000);
|
|
let mins = parseInt(ittl / 60);
|
|
if (mins < 10) {
|
|
mins = "0" + mins;
|
|
}
|
|
if (mins < 0) {
|
|
mins = "00";
|
|
}
|
|
let seds = parseInt(ittl % 60);
|
|
if (seds < 10) {
|
|
seds = "0" + seds;
|
|
}
|
|
if (seds < 0) {
|
|
seds = "00";
|
|
}
|
|
that.noteForm.ttlDesc = mins + ":" + seds;
|
|
that.noteForm.ttl -= 1000;
|
|
if (that.noteForm.ttl <= 0) {
|
|
that.storage.local.delete(that.secret.storeKey + '.text');
|
|
that.storage.session.delete(that.secret.storeKey + '.keyMeta');
|
|
location.reload();
|
|
}
|
|
}, 1000)
|
|
},
|
|
decryptNote() {
|
|
// let password = "123456";
|
|
// let secretKey = getSecretKey(this.noteForm.key, password);
|
|
// this.loadText(secretKey);
|
|
|
|
},
|
|
createNote() {
|
|
window.open("/");
|
|
},
|
|
dropNote() {
|
|
deleteNote(this.noteForm.key).then(res => {
|
|
if (res) {
|
|
storage.local.delete(this.secret.storeKey + '.text');
|
|
storage.session.delete(this.secret.storeKey + '.keyMeta');
|
|
location.reload();
|
|
}
|
|
});
|
|
},
|
|
loadText() {
|
|
|
|
let password;
|
|
|
|
if (this.noteForm.lock == "1") {
|
|
password = "123456"
|
|
}
|
|
|
|
|
|
if (!password) {
|
|
password = "";
|
|
}
|
|
let secretKey = getSecretKey(this.secret.cipher, password);
|
|
let storeText = storage.local.getText(this.secret.storeKey + '.text');
|
|
if (!storeText || md5(storeText.substring(35)) != this.noteForm.md5) {
|
|
let note = this.getNote(this.noteForm.key);
|
|
storeText = this.noteForm.lock + '|' + this.secret.cipher + '|' + note.text;
|
|
storage.local.setText(this.secret.storeKey + '.text', storeText);
|
|
}
|
|
|
|
if (storeText) {
|
|
storeText = unzip(storeText.substring(35));
|
|
let plainText = aesDecrypt(storeText, secretKey);
|
|
if (plainText.startsWith("FLAGNOTE#")) {
|
|
this.noteForm.text = plainText.substring(9);
|
|
let escapeText = getEscapeText(this.noteForm.text);
|
|
this.noteForm.escapeText = escapeText;
|
|
}
|
|
}
|
|
},
|
|
getNote(key) {
|
|
let noteObject;
|
|
Jquery.ajax({
|
|
url: '/note/' + key,
|
|
async: false,
|
|
success: function (data) {
|
|
noteObject = data;
|
|
}
|
|
});
|
|
return noteObject;
|
|
},
|
|
bindEvent() {
|
|
if (document.body.createTextRange) {
|
|
Jquery(document).keydown(function (e) {
|
|
if ((e.ctrlKey || e.metaKey) && e.keyCode == 65) {
|
|
e.preventDefault();
|
|
|
|
var element = document.getElementById("noteText");
|
|
let range = document.body.createTextRange();
|
|
range.moveToElementText(element);
|
|
range.select();
|
|
|
|
}
|
|
});
|
|
} else if (window.getSelection) {
|
|
|
|
Jquery(document).keydown(function (e) {
|
|
if ((e.ctrlKey || e.metaKey) && e.keyCode == 65) {
|
|
e.preventDefault();
|
|
|
|
var element = document.getElementById("noteText");
|
|
|
|
let selection = window.getSelection();
|
|
let range = document.createRange();
|
|
range.selectNodeContents(element);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
|
|
}
|
|
});
|
|
|
|
} else {
|
|
//alert('none');
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|