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

Compare commits

base: lema:scrollbar
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: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

1 Commits
scrollbar ... pageone

Author SHA1 Message Date
Jesse-Ma
a14b8c2d93 suspend 2023-03-14 10:50:55 +08:00
31 changed files with 3048 additions and 2855 deletions
Expand all files Collapse all files

1
.env
View File

@@ -1 +0,0 @@
VUE_APP_TITLE=flagnote.com

8
.env.development
View File

@@ -1,6 +1,6 @@
NODE_ENV=developement
VUE_APP_FLAG=dev
NODE_ENV = developement
VUE_APP_BASE_NAME = developement
VUE_APP_BASE_URL = http://localhost:8080
VUE_APP_NOTE_MAX_COUNT = 131072
VUE_APP_NOTE_MAX_DESC = 128K
VUE_APP_NOTE_MAX_COUNT = 409600
VUE_APP_NOTE_MAX_DESC = 400K

9
.env.production
View File

@@ -1,8 +1,5 @@
NODE_ENV=production
VUE_APP_FLAG=prod
NODE_ENV = production
VUE_APP_BASE_NAME = production
VUE_APP_BASE_URL = https://flagnote.com
VUE_APP_NOTE_MAX_COUNT = 131072
VUE_APP_NOTE_MAX_DESC = 128K
VUE_APP_CDN_PROVIDER = jsdelivr
# VUE_APP_CDN_PROVIDER = unpkg
VUE_APP_NOTE_MAX_COUNT = 409600
VUE_APP_NOTE_MAX_DESC = 400K

1
.env.staging
View File

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

2
.eslintignore
View File

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

31
.eslintrc.json
View File

@@ -1,31 +0,0 @@
{
"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
}
}

51
README.md
View File

@@ -1,35 +1,24 @@
# 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
# flagnote-web
- This operation will also run before git-commit.
```shell
npm run lint
## Project setup
```
### Run with Fixing
```shell
npm run lint:fix
yarn install
```
## .env Description
- This project exposes environment variables on `process.env` object.
- Different modes (development/staging/production) correspond to different environment files (.env.*).
- .env file is always included, duplicate variables are overwritten by the specific mode file (.env.*).
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

20
babel.config.js
View File

@@ -1,15 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
"plugins": [
[
"import",
{
"libraryName": "view-ui-plus",
"libraryDirectory": "src/components"
},
"view-ui-plus"
]
]
};
// module.exports = {
// presets: [
// '@vue/cli-plugin-babel/preset'
// ]
// }

9
jsconfig.json
View File

@@ -1,8 +1,9 @@
{
"compilerOptions": {
"target": "es5",
"target": "esnext",
"module": "esnext",
"baseUrl": "./",
"jsx": "preserve",
"moduleResolution": "node",
"paths": {
"@/*": [
@@ -14,6 +15,10 @@
"dom",
"dom.iterable",
"scripthost"
]
],
"removeComments": true,
},
"vueCompilerOptions": {
"target": 2.7
}
}

78
package.json
View File

@@ -1,56 +1,62 @@
{
"name": "flagnote-web",
"version": "1.0.0",
"description": "flagnote web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:staging": "vue-cli-service build --mode=staging",
"lint": "eslint ./src --ext .js,.vue",
"lint:fix": "eslint ./src --ext .js,.vue --fix",
"prepare": "husky install"
"build": "vue-cli-service build --mode production",
"build.test": "vue-cli-service build --mode test",
"build.production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.27.2",
"babel-plugin-import": "^1.13.6",
"buffer": "^6.0.3",
"bluebird": "^3.7.2",
"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",
"localforage": "^1.10.0",
"pako": "^2.1.0",
"qrcodejs2-fixes": "^0.0.2",
"view-ui-plus": "^1.3.10",
"vue": "^3.2.13",
"qrcodejs2": "^0.0.2",
"view-design": "^4.7.0",
"vue": "^2.7.14",
"vue-axios": "^3.5.2",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.6",
"vuex": "^4.0.0"
"vue-i18n": "^8.28.2",
"vue-router": "^3.6.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^8.14.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-vue": "^8.7.1",
"husky": "^7.0.4",
"less": "^4.0.0",
"less-loader": "^10.2.0",
"mockjs": "^1.1.0"
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-service": "~5.0.8",
"compression-webpack-plugin": "^10.0.0",
"core-js": "^3.26.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"javascript-obfuscator": "^4.0.0",
"webpack": "^5.1.0",
"webpack-obfuscator": "^3.5.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"engines": {
"node": ">= 12.0.0",
"npm": ">= 6.9.0"
}
"not dead"
]
}

48
public/index.html
View File

@@ -18,21 +18,45 @@
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />
<link rel="icon" href="/static/favicon.png" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<title>flagnote.com</title>
<style>
body {
background-color: #dddddd;
height: 100%;
background-color: #dddddd
}
</style>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/iview.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.21.1/dist/vue-i18n.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" rel="stylesheet"
type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js" rel="stylesheet"
type="text/javascript"></script>
<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>
@@ -43,6 +67,8 @@
if (!!window.ActiveXObject || "ActiveXObject" in window) {
document.querySelector('#noie').style.display = 'block';
}
</script>
</body>

18
public/redirect.html
View File

@@ -6,11 +6,18 @@
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<meta name="keywords" content="flagnote" />
<meta name="description" content="flag note" />
<meta name="theme-color" content="#ed4014" />
<meta name="format-detection" content="telephone=no,email=no,adress=no" />
<meta name="google" content="notranslate">
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />
<link rel="icon" href="/static/favicon.png" />
<title>flagnote.com</title>
<style>
body {
@@ -18,7 +25,10 @@
}
</style>
<script>
const servicePath = "";
//const servicePath="https://flagnote.com";
function ajaxGet(url) {
let data = null;
let xmlhttp = new XMLHttpRequest();
@@ -52,12 +62,8 @@
let keyMeta = getKeyMeta();
if (keyMeta && keyMeta.key) {
sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
location.href = "/" + keyMeta.key;
} else {
location.href = "/100006";
}
sessionStorage.setItem("keyMeta", JSON.stringify(keyMeta));
location.href = "/" + keyMeta.key;
</script>
</head>

24
src/App.vue
View File

@@ -1,5 +1,7 @@
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
@@ -52,7 +54,7 @@ body {
}
.noteHeaderShade {
background-color: white;
background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
width:100%;
height:40px;
border-bottom: dashed #ed4014 1px;
@@ -79,23 +81,23 @@ body {
#noteText::selection {
background: #dddddd;
color: #ed4014;
background: #ed4014;
color: white;
}
#noteText::-moz-selection {
background: #dddddd;
color: #ed4014;
background: #ed4014;
color: white;
}
#noteText br::selection {
background: #dddddd;
color: #ed4014;
background: #ed4014;
color: white;
}
#noteText br::-moz-selection {
background: #dddddd;
color: #ed4014;
background: #ed4014;
color: white;
}
.noteUrl {
@@ -120,10 +122,10 @@ body {
display: none;
}
/* button span {
button span {
margin-left: 0px !important;
font-size: 16px !important;
font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
margin-bottom: 6px;
} */
}
</style>

42
src/api/note.js
View File

@@ -1,10 +1,8 @@
import axios from "axios";
import { getStoreKey } from "@/api/lock";
import storage from "@/libs/storage";
import { md5, wrap} from "@/libs/secret";
import { md5, wrap } from "@/libs/secret";
import NoteConstant from "@/libs/constants";
import { setStoreText } from "@/libs/noteStorage";
import { Buffer } from 'buffer';
axios.interceptors.response.use(undefined, (err) => {
const { config: originalRequest } = err;
@@ -19,12 +17,10 @@ axios.interceptors.response.use(undefined, (err) => {
}
});
export function saveNote(noteForm,state, secret) {
setStoreText(noteForm, state, secret);
export async function saveNote(noteForm, secret) {
let storeKey = secret.storeKey;
let storeInfo = storage.local.getText(storeKey);
const storeInfo = await storage.local.getText(storeKey);
let starray = storeInfo.split("|");
if (starray[2] == "1") {
@@ -52,8 +48,8 @@ export function saveNote(noteForm,state, secret) {
});
}
let array = Buffer.from(note.text, 'base64')
let bufferArrary = eval("[100,111,32,110,111,116,32," + note.text + ",100,111,32,101,118,105,108]");
let array = Uint8Array.from(bufferArrary);
let blob = new Blob([array], { type: "application/octet-stream" });
let form = new FormData();
form.append("file", blob, noteForm.key);
@@ -75,11 +71,13 @@ export function saveNote(noteForm,state, secret) {
});
}
export function deleteNote(key) {
export async function deleteNote(key) {
let storeKey = getStoreKey(key);
const storeInfo = await storage.local.getText(storeKey);
let note = {
cipher: storeInfo.substring(2, 34),
key: key,
};
return axios({
url: NoteConstant.servicePath + "/note/" + key + "/delete",
method: "post",
@@ -98,6 +96,28 @@ export function getNoteBlob(key) {
});
}
export function getNoteMetaNew(key) {
let url = NoteConstant.servicePath + "/note/" + key + "/noteMeta";
return axios({
url: url,
method: "get",
ignoreError: 1,
original: true,
source: true,
});
}
export function getKeyMetaNew() {
let url = NoteConstant.servicePath + "/note/keyMeta";
return axios({
url: url,
method: "get",
ignoreError: 1,
original: true,
source: true,
});
}
export function getNoteMeta(key) {
let url = NoteConstant.servicePath + "/note/" + key + "/noteMeta";
let noteMeta = null;

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

2
src/i18n/config/en.js
View File

@@ -4,7 +4,7 @@ const en = {
},
content: {
blankTip: "I am Blank.",
noteTip: "Write here.",
noteTip: "Start writing something...",
deleteTip: "The note will be deleted automatically. ttl:"
},
button: {

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

@@ -4,7 +4,7 @@ const zh = {
},
content: {
blankTip: "空白的内容。",
noteTip: "写在这儿。",
noteTip: "开始写下一些东西吧。。。",
deleteTip: "笔记将被自动删除。剩余时间："
},
button: {
@@ -26,9 +26,6 @@ const zh = {
"100006": "服务器不可用！",
"100011": "笔记为空!",
"100012": "笔记过大，超过{0}!",
"100013": "The address is used, Copy to a new address.",
"100014": "The text has been modified.",
"800001": "Repetitive Submit!",
}
};
export default zh;

13
src/i18n/index.js
View File

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

197
src/libs/page.js Normal file
View File

@@ -0,0 +1,197 @@
import { getStoreKey } from "@/api/lock";
import storage from "@/libs/storage";
import { getNoteMetaNew, getNoteBlob } from "@/api/note";
import { reject } from "bluebird";
import { unwrap, md5 } from '@/libs/secret'
export async function initPageData(view) {
let noteKey = view.noteForm.key;
let storeKey = getStoreKey(noteKey);
view.secret.storeKey = storeKey;
let keyMeta = storage.session.getObject("keyMeta");
if (keyMeta) {
view.state.lock = 0;
view.secret.cipher = keyMeta.cipher;
view.secret.secretKey = keyMeta.secretKey;
view.state.serverTime = keyMeta.serverTime;
// key init Time
view.state.initTime = keyMeta.serverTime;
await storage.local.setText(storeKey, "0|" + view.secret.cipher + "|0|" + view.state.initTime + "|");
storage.session.delete("keyMeta");
return "000000";
}
let noteMeta = storage.session.getObject(noteKey+".noteMeta");
if(null==noteMeta){
let resp = await getNoteMetaNew(view.noteForm.key);
if (null == resp || null == resp.data) {
return "100006";
}
let result = resp.data;
if (result.code != '000000') {
return result.code;
}
let noteMeta = result.data;
if (null == noteMeta) {
return "100001";
}
if (null == noteMeta.key) {
return "100002";
}
storage.session.setObject(noteKey+".noteMeta",noteMeta);
}else{
getNoteMetaNew(view.noteForm.key).then(function(resp){
if (null == resp || null == resp.data) {
return "100006";
}
let result = resp.data;
if (result.code != '000000') {
return result.code;
}
let noteMeta = result.data;
if (null == noteMeta) {
return "100001";
}
if (null == noteMeta.key) {
return "100002";
}
});
}
//view
if (1 == noteMeta.state) {
view.secret.secretKey = noteMeta.secretKey;
view.state.lock = noteMeta.lock;
view.state.initTime = new Date().getTime();
view.state.initTtl = noteMeta.ttl;
view.state.ttl = noteMeta.ttl;
view.state.serverTime = noteMeta.serverTime;
view.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
view.secret.md5 = noteMeta.md5;
await loadText(view);
return "000000";
}
//deleted
if (0 == noteMeta.state) {
let storeKey = getStoreKey(noteKey);
storage.local.delete(storeKey);
// user deleted
if (noteMeta.ttl > 0) {
// errorMeta = 100003;
return "100003";
//return errorRouter(100003);
} else {// timeout
// errorMeta = 100004;
return "100004";
//return errorRouter(100004);
}
}
//edit or unsubmitted
if (null == noteMeta.state) {
let storeKey = getStoreKey(noteKey);
const storeInfo = await storage.local.getText(storeKey);
//if has storage , then edit
if (null != storeInfo) {
view.secret.secretKey = noteMeta.secretKey;
let starray = storeInfo.split('|');
view.state.lock = parseInt(starray[0]);
view.secret.cipher = starray[1];
view.state.initTime = parseInt(starray[3]);
//draw text;
if (starray[4]) {
view.noteForm.text = unwrap(starray[4], view.secret.secretKey);
}
return "000000";
}
//storage is empty
let df = storage.session.getText(storeKey + "_delete")
if (df) {//unsubmitted,user deleted.
// errorMeta = 100003;
return "100003";
} else {//unsubmitted
// errorMeta = 100005;
return "100005";
}
}
}
async function loadText(view) {
let storeInfo = await storage.local.getText(view.secret.storeKey);
let starray = [];
if (storeInfo) {
starray = storeInfo.split('|');
}
if (!storeInfo || !starray[4] || (md5(starray[4]) != view.secret.md5)) {
let bytesString = await getServerNote(view.noteForm.key);
view.noteForm.text = unwrap(bytesString, view.secret.secretKey);
} else {
starray = storeInfo.split('|');
if (!starray[4]) {
return;
}
view.noteForm.text = unwrap(starray[4], view.secret.secretKey);
//this.noteForm.escapeText = getEscapeText(this.noteForm.text);
// local is usable, and set commited flag
if ("0" == starray[2]) {
storage.local.setText(this.secret.storeKey, starray[0] + "|" + starray[1] + "|1|" + starray[3] + "|" + starray[4]);
}
}
}
async function getServerNote(key) {
let resp = await getNoteBlob(key)
if (!resp.data || resp.data.size == 0) {
return "100006";
}
let blob = new Blob([resp.data], {
type: resp.data.type
});
let bytesString = await fileReader(blob);
return bytesString;
}
async function fileReader(blob) {
return new Promise(function (resolve) {
let reader = new FileReader();
reader.onload = function (e) {
if (!e.target.result || e.target.result.byteLength == 0) {
reject("");
}
var bytes = new Uint8Array(e.target.result);
bytes = bytes.subarray(7, bytes.length - 7);
let bytesString = bytes.join(",");
resolve(bytesString);
};
reader.readAsArrayBuffer(blob)
});
}

135
src/libs/secret.js
View File

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

12
src/libs/storage.js
View File

@@ -1,3 +1,5 @@
import localforage from "localforage";
class Storage {
constructor() {
this.session = new Session();
@@ -29,23 +31,23 @@ class Session {
class Local {
setObject(key, value) {
localStorage.setItem(key, JSON.stringify(value));
return localforage.setItem(key, JSON.stringify(value));
}
getObject(key) {
return JSON.parse(localStorage.getItem(key));
return JSON.parse(localforage.getItem(key));
}
delete(key) {
localStorage.removeItem(key);
return localforage.removeItem(key);
}
setText(key, value) {
localStorage.setItem(key, value);
return localforage.setItem(key, value);
}
getText(key) {
return localStorage.getItem(key);
return localforage.getItem(key);
}
getUseSize() {

47
src/main.js
View File

@@ -1,44 +1,25 @@
import { createApp } from 'vue'
// import ViewUIPlus from 'view-ui-plus'
import Vue from 'vue'
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 {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';
import NoteConstant from "@/libs/constants";
axios.defaults.baseURL = NoteConstant.servicePath;
Vue.use(VueAxios, axios)
const debugFlag = process.env.NODE_ENV !== 'production';
Vue.config.debug = debugFlag;
Vue.config.devtools = debugFlag;
Vue.config.productionTip = debugFlag;
const app = createApp(App)
app.config.debug = debugFlag;
app.config.devtools = debugFlag;
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);
new Vue({
i18n,
router,
render: h => h(App)
}).$mount('#app')
app.use(router)
.use(i18n)
.use(VueAxios, axios)
.mount('#app')

6
src/plugins/iview.js Normal file
View File

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

126
src/router/index.js
View File

@@ -1,126 +1,22 @@
import { createRouter, createWebHistory } from 'vue-router'
import EditNote from "@/views/EditNote.vue";
import ViewNote from "@/views/ViewNote.vue";
import ErrorRoute from "@/views/ErrorRoute.vue";
import ErrorNote from "@/views/ErrorNote.vue";
import { getNoteMeta } from "@/api/note";
import { getStoreKey } from "@/api/lock";
import storage from "@/libs/storage";
import Vue from "vue";
import VueRouter from "vue-router";
import NoteView from "@/views/NoteView.vue";
import ErrorView from "@/views/ErrorView.vue";
var keyMeta = null;
var noteMeta = null;
var errorMeta = null;
function getKeyMetaParam() {
return keyMeta;
}
function getNoteMetaParam() {
return noteMeta;
}
function getErrorMetaParam() {
return errorMeta;
}
function getNoteView() {
if (errorMeta) {
return;
}
let path = location.pathname;
let key = path.substring(1, path.length);
keyMeta = storage.session.getObject(key+".keyMeta");
if (keyMeta && keyMeta.key) {
key = keyMeta.key;
}
let regKey = /^[abcdefhikmnopqstuvwxyz23456789]{16}$/;
if (!regKey.test(key)) {
errorMeta = 100002;
return ErrorNote;
}
if (keyMeta && keyMeta.key) {
//firstEdit
return EditNote;
}
//set noteMeta
noteMeta = getNoteMeta(key);
//server error
if (!noteMeta) {
errorMeta = 100006;
return ErrorNote;
}
//invalidated key
if (!noteMeta.key) {
errorMeta = 100002;
return ErrorNote;
}
//validated state
if (1 == noteMeta.state) {
return ViewNote;
}
//deleted
if (0 == noteMeta.state) {
let storeKey = getStoreKey(key);
storage.local.delete(storeKey);
// user deleted
if (noteMeta.ttl > 0) {
errorMeta = 100003;
return ErrorNote;
} else {// timeout
errorMeta = 100004;
return ErrorNote;
}
}
if (null == noteMeta.state) {
let storeKey = getStoreKey(key);
//if has storage , then edit
if (storage.local.getText(storeKey)) {
return EditNote;
} else {
//storage is empty
let df = storage.session.getText(storeKey + "_delete")
if (df) {//unsubmitted,user deleted.
errorMeta = 100003;
return ErrorNote;
} else {//unsubmitted
errorMeta = 100005;
return ErrorNote;
}
}
}
// other exception
errorMeta = 100001;
return ErrorNote;
}
Vue.use(VueRouter);
const routes = [
{ path: "/error_:code([0-9]{6})", component: ErrorNote },
{
path: "/:name([a-z0-9]{10,20})",
path: "/:name([abcdefhikmnopqstuvwxyz23456789]{16})",
name: "note",
component: getNoteView(),
meta: { keyMeta: getKeyMetaParam(), noteMeta: getNoteMetaParam(), errorMeta: getErrorMetaParam() },
component: NoteView,
},
{ path: "/:path(.*)", component: ErrorRoute }
{ path: "/:path(.*)", component: ErrorView }
];
const router = createRouter({
history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
linkExactActiveClass: "active",
const router = new VueRouter({
routes,
mode: "history",
routes
})
});
export default router;

234
src/views/EditNote.vue
View File

@@ -38,13 +38,6 @@
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 {
@@ -75,30 +68,42 @@
<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 }">
<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>
icon="md-share"></Button>
<Button aria-label="menu" type="error" style="margin-left:3px; border-radius: 0px;font-size: 24px;"
@click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
</Button-group>
</div>
</div>
@@ -108,12 +113,18 @@
<Button-group vertical size="large">
<Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu(); " icon="md-add"></Button>
<!--
<Button aria-label="crop" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();" icon="md-crop"></Button>
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
icon="md-download"></Button>
<Button aria-label="history text" v-show="model.showHistoryText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@@ -123,22 +134,13 @@
</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>
</Col>
</Row>
</Header>
<Content class="content">
<div style="min-height: 650px;">
@@ -147,15 +149,13 @@
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Card :padding="0">
<Form :model="noteForm" :label-width="80">
<div ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
<div id="wrapper" style="border-left: 2px solid #ed4014;">
<Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
:autosize="{ minRows: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
@on-keydown="recordEventKdown" />
</div>
</Form>
</Card>
<WordCount :value="noteForm.text" :total="100000" style="border-top:1px solid #ed4014;float:left" />
</Col>
</Row>
@@ -163,10 +163,10 @@
</Content>
<Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
<Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
</Layout>
<Modal scrollable 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 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ $t("message.askTodelete") }}
</p>
@@ -177,7 +177,7 @@
</p>
</Modal>
<Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ errorInfo }}
</p>
@@ -197,12 +197,10 @@ 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',
@@ -224,7 +222,6 @@ export default {
lock: 0,
locking: 0,
commited: 0,
deleted: 0,
serverTime: '',
initTime: '',
},
@@ -238,25 +235,22 @@ export default {
toTopState: false,
showMenuState: false,
showHeaderShade: false,
pageSession: '',
errorInfo: '',
lastEditTime: 0,
backStoreTextInterval: null,
lastStoreCount: 0,
lastStoreTime: 0,
}
},
created() {
this.editTime = new Date().getTime();
this.pageSession = new Date().getTime();
// read $route
this.noteForm.key = this.$route.params.name;
let keyMeta = this.$route.meta.keyMeta;
//ipad chrome url not redirect
// let path = location.pathname;
// if ("/" == path) {
// history.pushState('', '', '/' + this.noteForm.key);
// }
let path = location.pathname;
if ("/" == path) {
history.pushState('', '', '/' + this.noteForm.key);
}
//wx does not show downloadText
this.model.showDownloadText = !isWeixin();
@@ -282,7 +276,6 @@ export default {
// }
storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
storage.session.delete(keyMeta.key + ".keyMeta");
} else {
// second edit
let noteMeta = this.$route.meta.noteMeta;
@@ -300,26 +293,32 @@ 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);
}
window.wasm_bindgen(window.wasm_flate_bg_path);
},
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
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);
},
updated() {
},
beforeDestroy() {
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
},
computed: {},
watch: {},
@@ -356,49 +355,7 @@ 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);
}
}
}
setStoreText(this.noteForm, this.state, this.secret);
},
// recordEventKup(event) {
// let tn = event.currentTarget.value;
@@ -438,7 +395,7 @@ export default {
}
this.noteForm.text = event.currentTarget.value;
this.recordText();
setStoreText(this.noteForm, this.state, this.secret);
} else if (event.ctrlKey && (event.which == 13)) {
//save
@@ -446,7 +403,7 @@ export default {
}
},
save() {
return saveNote(this.noteForm,this.state,this.secret);
return saveNote(this.noteForm, this.secret);
},
validateForm() {
let text = this.noteForm.text;
@@ -492,9 +449,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;
}
}
@@ -513,7 +470,6 @@ 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();
@@ -541,67 +497,7 @@ export default {
}
}
}
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = window.atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
saveImage() {
let canvasID = this.$refs["html2canvas"];
let that = this;
let a = document.createElement('a');
html2canvas(canvasID, {
scale: 1,
windowWidth: parseInt(document.getElementById("noteText").offsetWidth) + 2,
onclone: (clonedDocument) => {
let nt = clonedDocument.getElementById("noteText");
const div = clonedDocument.createElement('div')
div.innerText = nt.value
div.style.color = "black";
div.style.padding = "10px";
div.style.textAlign = "left";
div.style.wordBreak = "break-word";
div.style.whiteSpace = "pre-wrap";
div.style.verticalAlign = "top";
div.style.fontSize = "15px";
div.style.width = "100%";
div.style.border = "0px";
div.style.fontFamily = "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
nt.style.display = 'none'
nt.parentElement.parentElement.style.borderLeftColor = "white";
nt.parentElement.append(div)
}
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = 'none';
a.style.display = 'none';
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
a.setAttribute('href', URL.createObjectURL(blob));
a.setAttribute('download', that.noteForm.key + '.png');
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
beforeunloadHandler() {
if (this.state.deleted == 0) {
setStoreText(this.noteForm, this.state, this.secret);
}
},
}
}
}
</script>

15
src/views/ErrorNote.vue
View File

@@ -81,7 +81,7 @@
</Content>
<Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
<Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
</Layout>
</div>
@@ -135,6 +135,19 @@ 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);
},

2
src/views/ErrorRoute.vue → src/views/ErrorView.vue
View File

@@ -6,7 +6,7 @@
<script>
export default {
name: 'ErrorRoute',
name: 'ErrorView',
components: {},
data() {
return {}

449
src/views/NoteView.vue Normal file
View File

@@ -0,0 +1,449 @@
<style scoped>
.layout {
height: 100%;
background: #dddddd;
}
.header {
background: #dddddd;
}
.ivu-layout-header {
line-height: normal;
height: auto;
padding: 0px;
}
.content {
background: #dddddd;
}
.ivu-layout-content {
padding: 0px;
}
.layout-footer-center {
background: #dddddd;
text-align: center;
}
.ivu-card-bordered {
border: 0px solid #dcdee2;
border-color: #e8eaec;
}
.fnmodal {
align-items: center;
justify-content: center;
}
@media print {
@page {
size: portrait;
margin: 20px;
}
body {
margin: 0.8cm;
background-color: #ffffff;
}
.header {
display: none;
}
.layout-footer-center {
display: none;
}
}
</style>
<template>
<div class="layout">
<Layout>
<Header class="header">
<Row>
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Affix :offset-top="0">
<div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
<img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
v-on:click="refreshPage()" />
<div style="float:left;width:auto;">
<Button-group size="large">
<Button aria-label="to top" v-show="toTopState" type="text"
style="margin-left:5px; border-radius: 0px; font-size: 28px;color:red;line-height: 20px;"
@click="toTop()" icon="ios-arrow-up" ghost></Button>
</Button-group>
</div>
<div style="float:right;width:auto;">
<Button-group size="large">
<Button aria-label="publish" type="error" :loading="model.submitting"
style="margin-left:5px; border-radius: 0px;font-size: 21px;" @click="submitNote()"
icon="md-share"></Button>
<Button aria-label="menu" type="error" style="margin-left:3px; border-radius: 0px;font-size: 24px;"
@click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
</Button-group>
</div>
</div>
<div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
<Button-group vertical size="large">
<Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu(); " icon="md-add"></Button>
<!--
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
icon="md-download"></Button>
<Button aria-label="history text" v-show="model.showHistoryText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@click="showDeleteModel(); switchMenu(); "></Button>
</Button-group>
</div>
</Affix>
</Col>
</Row>
</Header>
<Content class="content">
<div style="min-height: 650px;">
<Row>
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Card :padding="0">
<Form :model="noteForm" :label-width="80">
<div id="wrapper" style="border-left: 2px solid #ed4014;">
<Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
@on-keydown="recordEventKdown" />
</div>
</Form>
</Card>
</Col>
</Row>
</div>
</Content>
<Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
</Layout>
<Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ $t("message.askTodelete") }}
</p>
<p style="text-align: center;">
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
$t("button.yes")
}}</Button>
</p>
</Modal>
<Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ errorInfo }}
</p>
<p style="text-align: center;">
<Button type="error" style="border-radius: 0px;font-size: 19px;" @click="cloaseErrorMessage()">{{
$t("button.close")
}}</Button>
</p>
</Modal>
</div>
</template>
<script>
import { initPageData } from "@/libs/page"
import { saveNote } from "@/api/note";
import storage from "@/libs/storage";
import { setStoreText, setNewStoreText } from "@/libs/noteStorage";
import { saveAs } from 'file-saver';
import { isWeixin } from "@/libs/utils";
import NoteConstant from "@/libs/constants";
export default {
name: 'NoteView',
props: {},
components: {},
data() {
return {
noteForm: {
text: '',
key: '',
},
secret: {
storeKey: '',
secretKey: '',
cipher: '',
password: '',
},
state: {
lock: 0,
locking: 0,
commited: 0,
serverTime: '',
initTime: '',
},
model: {
submitting: false,
showDelete: false,
deleting: false,
showDownloadText: false,
showError: false,
},
toTopState: false,
showMenuState: false,
showHeaderShade: false,
pageSession: '',
errorInfo: '',
}
},
created() {
this.noteForm.key = this.$route.params.name;
//wx does not show downloadText
this.model.showDownloadText = !isWeixin();
// let noteMeta = this.$route.meta.noteMeta;
initPageData(this);
},
mounted() {
const myObserver = new ResizeObserver(entries => {
// iterate over the entries, do something.
entries.forEach(entry => {
let affix = document.querySelector('.ivu-affix');
if (affix) {
affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
}
});
});
const someOtherEl = document.querySelector('#wrapper');
myObserver.observe(someOtherEl);
this.bindCtrlAllEvent();
this.bindToTopEvent();
window.wasm_bindgen(window.wasm_flate_bg_path);
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
computed: {},
watch: {},
methods: {
toTop() {
window.scrollTo(0, 0);
let elent = document.querySelector('#noteText');
elent.selectionStart = 0;
elent.selectionEnd = 0;
elent.focus();
},
refreshPage() {
window.location.reload();
},
switchMenu() {
this.showMenuState = !this.showMenuState;
},
hideMenu() {
let hbt = document.querySelector('#noteMenu > div > button:hover');
if (!hbt) {
this.showMenuState = false;
}
},
downLoadText() {
var blob = new Blob([this.noteForm.text], { type: "application/octet-stream;charset=utf-8" });
saveAs(blob, this.noteForm.key + ".txt");
},
recordText() {
let text = this.noteForm.text;
if (text.length > NoteConstant.noteMaxCount) {
this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
this.model.showError = true;
return;
}
setStoreText(this.noteForm, this.state, this.secret);
},
recordEventKdown(event) {
if (event.key == "Tab") {
let start = event.currentTarget.selectionStart;
let end = event.currentTarget.selectionEnd;
let text = event.currentTarget.value;
if (text.length > NoteConstant.noteMaxCount) {
this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
this.model.showError = true;
return;
}
let tab = '\t';//\t
text = text.substr(0, start) + tab + text.substr(start);
event.currentTarget.value = text;
event.currentTarget.selectionStart = start + tab.length;
event.currentTarget.selectionEnd = end + tab.length;
event.stopPropagation();
if (event.preventDefault) {
event.preventDefault();
}
this.noteForm.text = event.currentTarget.value;
setStoreText(this.noteForm, this.state, this.secret);
} else if (event.ctrlKey && (event.which == 13)) {
//save
this.submitNote();
}
},
save() {
return saveNote(this.noteForm, this.secret);
},
validateForm() {
let text = this.noteForm.text;
if (text.length > NoteConstant.noteMaxCount) {
this.errorInfo = this.$t('error.100012', [NoteConstant.noteMaxDesc]);
this.model.showError = true;
return false;
}
if (text.length == 0) {
this.errorInfo = this.$t('error.100011');
this.model.showError = true;
return false;
}
return true;
},
cloaseErrorMessage() {
this.errorInfo = '';
this.model.showError = false;
},
submitNote() {
if (this.state.locking == 1) {
return;
}
if (!this.validateForm()) {
this.state.locking = 0;
return;
}
this.model.submitting = true;
let that = this;
this.save().then(res => {
if (res.data && res.data.code == "000000") {
storage.session.setText(that.secret.storeKey + "_share", '1');
that.state.commited = 1;
setStoreText(this.noteForm, this.state, this.secret);
location.reload();
this.state.locking = 0;
} else {
alert(res.data.code);
this.model.submitting = false;
this.state.locking = 0;
if (res.data.code == "100013" || res.data.code == "800001") {
let key = setNewStoreText(this.noteForm);
location.href = "/" + key;
}
}
}).catch(error => {
alert(error);
});
},
refresh() {
location.reload();
},
createNote() {
window.open("/");
},
showDeleteModel() {
this.model.showDelete = true;
},
dropNote() {
this.model.deleting = true;
storage.local.delete(this.secret.storeKey);
storage.session.setText(this.secret.storeKey + "_delete", 1);
location.reload();
},
bindToTopEvent() {
let that = this;
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop >= 20) {
that.toTopState = true;
that.showHeaderShade = true;
} else {
that.toTopState = false;
that.showHeaderShade = false;
}
}
},
bindCtrlAllEvent() {
if (window.getSelection && document.createRange) {
document.onkeydown = (e) => {
if ((e.ctrlKey || e.metaKey) && e.key == "a") {
e.preventDefault();
var element = document.getElementById("noteText");
element.select();
}
}
}
}
}
}
</script>

235
src/views/ViewNote.vue
View File

@@ -80,8 +80,8 @@
}
#qrUrl::selection {
background: #dddddd;
color: #ed4014;
background-color: #ed4014;
color: #ffffff;
}
#copyBtn {
@@ -151,26 +151,40 @@
/* 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;
/* #noteMenu button span{
font-size: 20px;
line-height: 20px;
margin-left: 7px !important;
margin-right: 5px !important;
} */
</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 }">
<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">
@@ -189,16 +203,8 @@
<Button-group size="large">
<Button aria-label="ttl" type="error"
style="margin-left:5px; border-radius: 0px;font-size: 21px; padding-left: 3px !important;padding-right: 7px !important; font-family: Arial, sans-serif"
@click="showTtlDeleteModel()">
<Badge :offset="[8, 0]" style="padding-top:1px;">
<Icon type="md-trash" color="#FFFFFF" size="24" />
<template #count>
<Icon type="md-time" color="#FFFFFF" size="14" />
</template>
</Badge>
<span style="font-size:18px;margin-left: 7px">{{ state.ttlDesc }}</span>
</Button>
style="margin-left:5px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
@click="showTtlDeleteModel()" icon="md-alarm">{{ state.ttlDesc }}</Button>
<Button aria-label="share" type="error"
style="margin-left:3px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
@@ -214,19 +220,18 @@
<div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
<Button-group vertical size="large">
<Button aria-label="new note" type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
<Button type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu();"></Button>
<!--
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@click="showDeleteModel(); switchMenu();"></Button>
@@ -235,25 +240,13 @@
</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>
</Col>
</Row>
</Header>
<Content class="content">
<div style="min-height: 650px;">
@@ -261,9 +254,9 @@
<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 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: 35 }" />
<div id="wrapper" style="border-left: 2px solid white;">
<Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
</div>
</Card>
</Col>
@@ -273,14 +266,19 @@
<Footer class="layout-footer-center">
2023 &copy; flagnote.com
2022 &copy; flagnote.com
</Footer>
</Layout>
<Modal scrollable v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
<Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
@on-cancel="closeShareModel">
<p style="text-align: center; z-index: 1000; position: absolute; top: -2px; left: 0px; width: 100%;">
<p style="text-align: center;
z-index: 1000;
position: absolute;
top: -2px;
left: 0px;
width: 100%;">
<Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
</p>
<p style="text-align: center;margin-top:20px;line-height:100%">
@@ -298,41 +296,44 @@
</p>
</Modal>
<Modal scrollable v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
<Modal 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>
<p style="text-align: center;margin-top:10px;">
<Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeTtlDeleteModel()">{{
$t("button.close")
$t("button.close")
}}</Button>
</p>
</Modal>
<Modal scrollable 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 }">
<p style="text-align: center;font-size:medium;margin-bottom: 20px;">
{{ $t("message.askTodelete") }}
</p>
<p style="text-align: center;">
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size:19px;" @click="dropNote()">{{
$t("button.yes")
$t("button.yes")
}}</Button>
</p>
</Modal>
<Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ errorInfo }}
</p>
<p style="text-align: center;">
<Button type="error" style="border-radius: 0px;font-size: 19px;" @click="cloaseErrorMessage()">{{
$t("button.close")
$t("button.close")
}}</Button>
</p>
</Modal>
</div>
</template>
<script>
@@ -342,12 +343,10 @@ 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-fixes";
import QRCode from "qrcodejs2";
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',
@@ -389,8 +388,6 @@ export default {
showMenuState: false,
showHeaderShade: false,
errorInfo: '',
targetTime: null,
showSkeleton: true,
}
},
created() {
@@ -416,7 +413,6 @@ 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; //读者有没有值可配置
@@ -440,6 +436,27 @@ 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 = {
@@ -452,13 +469,6 @@ 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() {
},
@@ -495,7 +505,9 @@ export default {
} else if (mins < 10) {
mins = "0" + mins;
}
let seds = parseInt(ittl % 60);
if (seds < 0) {
seds = "00";
} else if (seds < 10) {
@@ -503,6 +515,7 @@ 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();
@@ -540,7 +553,7 @@ export default {
this.model.deleting = true;
let that = this;
deleteNote(this.noteForm.key).then(res => {
if (res.data && res.data.code == "000000") {
if (res.data&&res.data.code=="000000") {
storage.local.delete(that.secret.storeKey);
location.reload();
} else {
@@ -567,19 +580,28 @@ export default {
return;
}
res.data.arrayBuffer().then(function (ab) {
if (!ab || ab.byteLength == 0) {
let blob = new Blob([res.data], {
type: res.data.type
});
let reader = new FileReader();
reader.onload = function (e) {
if (!e.target.result || e.target.result.byteLength == 0) {
return;
}
let base64String = Buffer.from(ab).toString('base64')
that.noteForm.text = unwrap(base64String, that.secret.secretKey);
that.showSkeleton = false;
var bytes = new Uint8Array(e.target.result);
bytes = bytes.subarray(7,bytes.length-7);
let bytesString = bytes.join(",");
that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
//that.noteForm.escapeText = getEscapeText(that.noteForm.text);
// 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 + '|' + base64String);
storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + bytesString);
}
});
};
reader.readAsArrayBuffer(blob);
});
} else {
@@ -590,7 +612,6 @@ 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
@@ -643,62 +664,6 @@ export default {
}
}
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = window.atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
saveImage() {
let canvasID = this.$refs["html2canvas"];
let that = this;
let a = document.createElement('a');
html2canvas(canvasID, {
scale: 1,
windowWidth: document.getElementById("noteText").offsetWidth,
onclone: (clonedDocument) => {
let nt = clonedDocument.getElementById("noteText");
const div = clonedDocument.createElement('div')
div.innerText = nt.value
div.style.color = "black";
div.style.padding = "0px";
div.style.textAlign = "left";
div.style.wordBreak = "break-word";
div.style.whiteSpace = "pre-wrap";
div.style.verticalAlign = "top";
div.style.fontSize = "15px";
div.style.width = "100%";
div.style.border = "0px";
div.style.fontFamily = "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
nt.style.display = 'none'
nt.parentElement.parentElement.style.borderLeftColor = "white";
nt.parentElement.append(div)
}
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = 'none';
a.style.display = 'none';
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
a.setAttribute('href', URL.createObjectURL(blob));
a.setAttribute('download', that.noteForm.key + '.png');
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
}
}
</script>

95
vue.config.js
View File

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

3976
yarn.lock
View File

File diff suppressed because it is too large Load Diff