Compare commits
3 Commits
main
...
asynchroni
| Author | SHA1 | Date | |
|---|---|---|---|
|
89d099fecf | ||
|
|
8ce9342b8e | ||
|
|
11987b0a77 |
@@ -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
|
||||
|
||||
|
||||
@@ -1,6 +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_NOTE_MAX_COUNT = 409600
|
||||
VUE_APP_NOTE_MAX_DESC = 400K
|
||||
@@ -1 +0,0 @@
|
||||
VUE_APP_FLAG=staging
|
||||
@@ -1,2 +0,0 @@
|
||||
assets
|
||||
mock
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -21,5 +21,3 @@ pnpm-debug.log*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
/package-lock.json
|
||||
/yarn.lock
|
||||
|
||||
22
README.md
22
README.md
@@ -1,6 +1,24 @@
|
||||
# flagnote-web
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
yarn build:prod
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn serve
|
||||
```
|
||||
|
||||
yarn dev
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
@@ -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'
|
||||
// ]
|
||||
// }
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
20618
package-lock.json
generated
Normal file
20618
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
82
package.json
82
package.json
@@ -1,66 +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",
|
||||
"build:prod": "vue-cli-service build --mode=production",
|
||||
"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.28.1",
|
||||
"babel-plugin-import": "^1.13.6",
|
||||
"buffer": "^6.0.3",
|
||||
"axios": "^0.27.2",
|
||||
"bluebird": "^3.7.2",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.37.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"github-markdown-css": "^5.6.1",
|
||||
"html2canvas": "^1.4.1",
|
||||
"json-editor-vue": "^0.15.1",
|
||||
"localforage": "^1.10.0",
|
||||
"pako": "^2.1.0",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"view-ui-plus": "^1.3.18",
|
||||
"vue": "^3.4.31",
|
||||
"qrcodejs2": "^0.0.2",
|
||||
"view-design": "^4.7.0",
|
||||
"vue": "^2.7.14",
|
||||
"vue-axios": "^3.5.2",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-markdown-render": "^2.2.1",
|
||||
"vue-router": "^4.4.0",
|
||||
"vuex": "^4.1.0"
|
||||
"vue-i18n": "^8.28.2",
|
||||
"vue-router": "^3.6.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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-plugin-vuex": "~5.0.8",
|
||||
"@vue/cli-service": "~5.0.8",
|
||||
"compression-webpack-plugin": "^11.1.0",
|
||||
"eslint": "^8.14.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-vue": "^8.7.1",
|
||||
"husky": "^7.0.4",
|
||||
"javascript-obfuscator": "^4.1.1",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^12.2.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -18,18 +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
|
||||
}
|
||||
</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"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/iview.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.21.1/dist/vue-i18n.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.js"
|
||||
type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
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>
|
||||
@@ -40,6 +67,8 @@
|
||||
if (!!window.ActiveXObject || "ActiveXObject" in window) {
|
||||
document.querySelector('#noie').style.display = 'block';
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -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) {
|
||||
localStorage.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>
|
||||
|
||||
|
||||
104
src/App.vue
104
src/App.vue
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -11,65 +13,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
-webkit-text-size-adjust: 100% !important;
|
||||
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
|
||||
"PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
|
||||
sans-serif;
|
||||
background-color: #dddddd;
|
||||
height: 100%;
|
||||
|
||||
.ivu-btn:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.ivu-layout-content {
|
||||
padding: 0px;
|
||||
body {
|
||||
-webkit-text-size-adjust: 100% !important;
|
||||
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
|
||||
"PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
|
||||
sans-serif;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.ivu-layout-header {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.ivu-layout-footer {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.layout-footer-center {
|
||||
background: #dddddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ivu-card-bordered {
|
||||
border: 0px solid #dcdee2;
|
||||
border-color: #e8eaec;
|
||||
}
|
||||
|
||||
.ivu-btn:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.layout {
|
||||
height: 100%;
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.monoFt {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
@@ -85,14 +49,14 @@ body {
|
||||
|
||||
.noteHeader {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
width:100%;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
.noteHeaderShade {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -116,24 +80,24 @@ body {
|
||||
}
|
||||
|
||||
|
||||
::selection {
|
||||
background: #dddddd;
|
||||
color: #ed4014;
|
||||
#noteText::selection {
|
||||
background: #ed4014;
|
||||
color: white;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #dddddd;
|
||||
color: #ed4014;
|
||||
#noteText::-moz-selection {
|
||||
background: #ed4014;
|
||||
color: white;
|
||||
}
|
||||
|
||||
br::selection {
|
||||
background: #dddddd;
|
||||
color: #ed4014;
|
||||
#noteText br::selection {
|
||||
background: #ed4014;
|
||||
color: white;
|
||||
}
|
||||
|
||||
br::-moz-selection {
|
||||
background: #dddddd;
|
||||
color: #ed4014;
|
||||
#noteText br::-moz-selection {
|
||||
background: #ed4014;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.noteUrl {
|
||||
@@ -158,8 +122,10 @@ br::-moz-selection {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fnmodal {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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>
|
||||
|
||||
@@ -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
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@@ -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: {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { getKeyMeta } from "@/api/note";
|
||||
import { getStoreKey } from "@/api/lock";
|
||||
import { wrap } from "@/libs/secret";
|
||||
import storage from "@/libs/storage";
|
||||
@@ -12,7 +11,7 @@ export function setStoreText(noteForm, state, secret) {
|
||||
storeText = wrap(text, secret.secretKey);
|
||||
}
|
||||
|
||||
storage.local.setText(
|
||||
return storage.local.setText(
|
||||
secret.storeKey,
|
||||
state.lock +
|
||||
"|" +
|
||||
@@ -26,8 +25,7 @@ export function setStoreText(noteForm, state, secret) {
|
||||
);
|
||||
}
|
||||
|
||||
export function setNewStoreText(noteForm) {
|
||||
let keyMeta =getKeyMeta();
|
||||
export function setNewStoreText(noteForm,keyMeta) {
|
||||
let storeKey = getStoreKey(keyMeta.key);
|
||||
|
||||
let text = noteForm.text;
|
||||
@@ -38,7 +36,7 @@ export function setNewStoreText(noteForm) {
|
||||
storeText = wrap(text, keyMeta.secretKey);
|
||||
}
|
||||
|
||||
storage.local.setText(
|
||||
return storage.local.setText(
|
||||
storeKey,
|
||||
"0|" +
|
||||
keyMeta.cipher +
|
||||
@@ -47,8 +45,6 @@ export function setNewStoreText(noteForm) {
|
||||
"|" +
|
||||
storeText
|
||||
);
|
||||
|
||||
return keyMeta.key;
|
||||
}
|
||||
|
||||
export function clearStoreText(key) {
|
||||
@@ -69,4 +65,4 @@ export function getEscapeText(text) {
|
||||
'<pre class="tab_pre">	</pre>'
|
||||
);
|
||||
return textEscape;
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// function convertUint8ArrayToWordArray(u8Array) {
|
||||
// var words = [], i = 0, len = u8Array.length;
|
||||
|
||||
// while (i < len) {
|
||||
// words.push(
|
||||
// (u8Array[i++] << 24) |
|
||||
// (u8Array[i++] << 16) |
|
||||
// (u8Array[i++] << 8) |
|
||||
// (u8Array[i++])
|
||||
// );
|
||||
// }
|
||||
|
||||
// return {
|
||||
// sigBytes: words.length * 4,
|
||||
// words: words
|
||||
// };
|
||||
// }
|
||||
|
||||
@@ -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() {
|
||||
|
||||
52
src/main.js
52
src/main.js
@@ -1,44 +1,30 @@
|
||||
import { createApp } from 'vue'
|
||||
// import ViewUIPlus from 'view-ui-plus'
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import getRouter from './router/'
|
||||
import axios from 'axios'
|
||||
import VueAxios from 'vue-axios'
|
||||
import './plugins/iview.js'
|
||||
import {Promise} from "bluebird";
|
||||
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);
|
||||
Promise.try(getRouter).then((router)=>{
|
||||
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
6
src/plugins/iview.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import ViewUI from 'view-design'
|
||||
|
||||
Vue.use(ViewUI)
|
||||
|
||||
//import 'view-design/dist/styles/iview.css'
|
||||
@@ -1,174 +1,131 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { getNoteMetaNew } from "@/api/note";
|
||||
import VueRouter from "vue-router";
|
||||
import EditNote from "@/views/EditNote.vue";
|
||||
import ViewNote from "@/views/ViewNote.vue";
|
||||
// import ViewMdNote from "@/views/ViewMdNote.vue";
|
||||
// import ViewJsonNote from "@/views/ViewJsonNote.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 { getStoreKey } from "@/api/lock";
|
||||
|
||||
var keyMeta = null;
|
||||
var noteMeta = null;
|
||||
var errorMeta = null;
|
||||
|
||||
function getKeyMetaParam() {
|
||||
return keyMeta;
|
||||
}
|
||||
export default async function getRouter() {
|
||||
let path = location.pathname;
|
||||
let key = path.substring(1, path.length);
|
||||
//let errorMeta = null;
|
||||
|
||||
function getNoteMetaParam() {
|
||||
return noteMeta;
|
||||
}
|
||||
|
||||
function getErrorMetaParam() {
|
||||
return errorMeta;
|
||||
}
|
||||
|
||||
function getNoteView() {
|
||||
if (errorMeta) {
|
||||
return;
|
||||
}
|
||||
|
||||
let path = location.pathname;
|
||||
|
||||
let key = path.substring(1, path.length);
|
||||
|
||||
let isMd = path.endsWith(".md");
|
||||
if (isMd) {
|
||||
key = path.substring(1, path.length - 3);
|
||||
}
|
||||
|
||||
let isJson = path.endsWith(".json");
|
||||
if (isJson) {
|
||||
key = path.substring(1, path.length - 5);
|
||||
}
|
||||
|
||||
keyMeta = storage.local.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 && !isMd && !isJson) {
|
||||
//firstEdit
|
||||
return EditNote;
|
||||
}
|
||||
|
||||
//set noteMeta
|
||||
if (noteMeta == null) {
|
||||
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) {
|
||||
if (isMd) {
|
||||
return ViewMdNote;
|
||||
} else if (isJson) {
|
||||
return ViewJsonNote;
|
||||
} else {
|
||||
return ViewNote;
|
||||
if (path == "/") {
|
||||
//errorMeta = 100002;
|
||||
return errorRouter(100002);
|
||||
}
|
||||
}
|
||||
|
||||
//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;
|
||||
let keyMeta = storage.session.getObject("keyMeta");
|
||||
storage.session.delete("keyMeta");
|
||||
|
||||
let regKey = /^[abcdefhikmnopqstuvwxyz23456789]{16}$/;
|
||||
|
||||
if (!regKey.test(key)) {
|
||||
return errorRouter(100002);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
if (keyMeta && keyMeta.key) {
|
||||
// if(document.referrer=="/"){
|
||||
// }
|
||||
return noteRouter(EditNote, keyMeta, null);
|
||||
}
|
||||
}
|
||||
|
||||
// other exception
|
||||
errorMeta = 100001;
|
||||
return ErrorNote;
|
||||
let resp = await getNoteMetaNew(key);
|
||||
|
||||
|
||||
if (null == resp || null == resp.data) {
|
||||
return errorRouter(100006);
|
||||
}
|
||||
|
||||
let result = resp.data;
|
||||
if (result.code != '000000') {
|
||||
return errorRouter(parseInt(result.code));
|
||||
}
|
||||
|
||||
let noteMeta = result.data;
|
||||
if (null == noteMeta) {
|
||||
return errorRouter(100001);
|
||||
}
|
||||
if (null == noteMeta.key) {
|
||||
return errorRouter(100002);
|
||||
}
|
||||
|
||||
//view
|
||||
if (1 == noteMeta.state) {
|
||||
return noteRouter(ViewNote, keyMeta, noteMeta);
|
||||
}
|
||||
|
||||
//deleted
|
||||
if (0 == noteMeta.state) {
|
||||
let storeKey = getStoreKey(key);
|
||||
storage.local.delete(storeKey);
|
||||
// user deleted
|
||||
if (noteMeta.ttl > 0) {
|
||||
// errorMeta = 100003;
|
||||
return errorRouter(100003);
|
||||
} else {// timeout
|
||||
// errorMeta = 100004;
|
||||
return errorRouter(100004);
|
||||
}
|
||||
}
|
||||
|
||||
//edit or unsubmitted
|
||||
if (null == noteMeta.state) {
|
||||
let storeKey = getStoreKey(key);
|
||||
const storeInfo = await storage.local.getText(storeKey);
|
||||
|
||||
//if has storage , then edit
|
||||
if (null != storeInfo) {
|
||||
return noteRouter(EditNote, keyMeta, noteMeta);
|
||||
}
|
||||
|
||||
//storage is empty
|
||||
let df = storage.session.getText(storeKey + "_delete")
|
||||
if (df) {//unsubmitted,user deleted.
|
||||
// errorMeta = 100003;
|
||||
return errorRouter(100003);
|
||||
} else {//unsubmitted
|
||||
// errorMeta = 100005;
|
||||
return errorRouter(100005);
|
||||
}
|
||||
}
|
||||
return errorRouter(100001);
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{ path: "/error_:code([0-9]{6})", component: ErrorNote },
|
||||
{
|
||||
path: "/:name([a-z0-9]{10,20})",
|
||||
name: "note",
|
||||
component: getNoteView(),
|
||||
meta: {
|
||||
keyMeta: getKeyMetaParam(),
|
||||
noteMeta: getNoteMetaParam(),
|
||||
errorMeta: getErrorMetaParam(),
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/:name([a-z0-9]{10,20}).md",
|
||||
// name: "md",
|
||||
// component: getNoteView(),
|
||||
// meta: {
|
||||
// keyMeta: getKeyMetaParam(),
|
||||
// noteMeta: getNoteMetaParam(),
|
||||
// errorMeta: getErrorMetaParam(),
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "/:name([a-z0-9]{10,20}).json",
|
||||
// name: "json",
|
||||
// component: getNoteView(),
|
||||
// meta: {
|
||||
// keyMeta: getKeyMetaParam(),
|
||||
// noteMeta: getNoteMetaParam(),
|
||||
// errorMeta: getErrorMetaParam(),
|
||||
// },
|
||||
// },
|
||||
{ path: "/:path(.*)", component: ErrorRoute },
|
||||
];
|
||||
function noteRouter(noteView, keyMeta, noteMeta) {
|
||||
const routes = [
|
||||
{
|
||||
path: "/:name([a-z0-9]{10,20})",
|
||||
name: "note",
|
||||
component: noteView,
|
||||
meta: { keyMeta: keyMeta, noteMeta: noteMeta },
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
|
||||
linkExactActiveClass: "active",
|
||||
mode: "history",
|
||||
routes,
|
||||
});
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
mode: "history",
|
||||
});
|
||||
return router;
|
||||
}
|
||||
|
||||
|
||||
function errorRouter(errorCode) {
|
||||
const routes = [
|
||||
{
|
||||
path: "/:name([a-z0-9]{10,20})",
|
||||
name: "error",
|
||||
component: ErrorNote,
|
||||
errorMeta: errorCode
|
||||
}
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
mode: "history",
|
||||
});
|
||||
return router;
|
||||
}
|
||||
|
||||
export default router;
|
||||
|
||||
@@ -1,6 +1,66 @@
|
||||
<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>
|
||||
@@ -8,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>
|
||||
@@ -40,56 +112,50 @@
|
||||
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>
|
||||
@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;"
|
||||
@click="showDeleteModel(); switchMenu();"></Button>
|
||||
@click="showDeleteModel(); switchMenu(); "></Button>
|
||||
|
||||
</Button-group>
|
||||
|
||||
|
||||
</div>
|
||||
</Affix>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
</div>
|
||||
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
|
||||
<Content class="content">
|
||||
<div>
|
||||
<Row>
|
||||
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
|
||||
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
|
||||
<div class="noteHeader" style="height:40px;border-left: 2px solid #ed4014;"></div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<Content class="content">
|
||||
<div style="min-height: 250px;">
|
||||
<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 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="{maxRows: 100000 }" :placeholder="$t('content.noteTip')"
|
||||
@input="recordText" @on-keydown="recordEventKdown" />
|
||||
|
||||
: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>
|
||||
@@ -97,24 +163,21 @@
|
||||
|
||||
</Content>
|
||||
|
||||
<Footer class="layout-footer-center">2024 © flagnote.com</Footer>
|
||||
<Footer class="layout-footer-center">2022 © 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>
|
||||
<p style="text-align: center;">
|
||||
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;"
|
||||
@click="dropNote()">{{
|
||||
$t("button.yes")
|
||||
}}</Button>
|
||||
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
|
||||
$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>
|
||||
@@ -134,12 +197,11 @@ 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";
|
||||
|
||||
import { getKeyMeta } from "@/api/note";
|
||||
|
||||
export default {
|
||||
name: 'EditNote',
|
||||
@@ -161,7 +223,6 @@ export default {
|
||||
lock: 0,
|
||||
locking: 0,
|
||||
commited: 0,
|
||||
deleted: 0,
|
||||
serverTime: '',
|
||||
initTime: '',
|
||||
},
|
||||
@@ -175,20 +236,23 @@ 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);
|
||||
// }
|
||||
|
||||
//wx does not show downloadText
|
||||
this.model.showDownloadText = !isWeixin();
|
||||
|
||||
@@ -213,54 +277,53 @@ export default {
|
||||
// }
|
||||
|
||||
storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
|
||||
storage.local.delete(keyMeta.key + ".keyMeta");
|
||||
} else {
|
||||
// second edit
|
||||
let noteMeta = this.$route.meta.noteMeta;
|
||||
this.secret.secretKey = noteMeta.secretKey;
|
||||
|
||||
let storeInfo = storage.local.getText(storeKey);
|
||||
let starray = storeInfo.split('|');
|
||||
this.state.lock = parseInt(starray[0]);
|
||||
this.secret.cipher = starray[1];
|
||||
this.state.initTime = parseInt(starray[3]);
|
||||
let that = this;
|
||||
|
||||
storage.local.getText(storeKey).then(function(storeInfo){
|
||||
let starray = storeInfo.split('|');
|
||||
that.state.lock = parseInt(starray[0]);
|
||||
that.secret.cipher = starray[1];
|
||||
that.state.initTime = parseInt(starray[3]);
|
||||
|
||||
//draw text;
|
||||
if (starray[4]) {
|
||||
that.noteForm.text = unwrap(starray[4], that.secret.secretKey);
|
||||
}
|
||||
});
|
||||
|
||||
//draw text;
|
||||
if (starray[4]) {
|
||||
this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
|
||||
}
|
||||
}
|
||||
|
||||
this.lastStoreCount = this.noteForm.text.length;
|
||||
this.lastEditTime = new Date().getTime();
|
||||
this.lastStoreTime = this.lastEditTime;
|
||||
|
||||
this.bindCtrlAllEvent();
|
||||
this.bindToTopEvent();
|
||||
|
||||
this.$nextTick(() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 100) + "px";
|
||||
})
|
||||
|
||||
window.wasm_bindgen(window.wasm_flate_bg_path);
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 100) + "px";
|
||||
})()
|
||||
}
|
||||
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: {},
|
||||
@@ -297,49 +360,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;
|
||||
@@ -379,17 +400,12 @@ 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
|
||||
|
||||
this.submitNote();
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
save() {
|
||||
return saveNote(this.noteForm, this.state, this.secret);
|
||||
},
|
||||
validateForm() {
|
||||
let text = this.noteForm.text;
|
||||
@@ -419,25 +435,28 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
setStoreText(this.noteForm, this.state, this.secret);
|
||||
|
||||
this.model.submitting = true;
|
||||
|
||||
let that = this;
|
||||
this.save().then(res => {
|
||||
saveNote(this.noteForm, this.secret).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;
|
||||
setStoreText(this.noteForm, this.state, this.secret).then(function(){
|
||||
location.reload();
|
||||
});
|
||||
} 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;
|
||||
if(res.data.code=="100013"||res.data.code=="800001"){
|
||||
let keyMeta = getKeyMeta();
|
||||
setNewStoreText(this.noteForm,keyMeta).then(function () {
|
||||
location.href="/"+keyMeta.key;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -456,7 +475,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();
|
||||
@@ -484,67 +502,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>
|
||||
|
||||
@@ -1,7 +1,43 @@
|
||||
<style scoped>
|
||||
.ivu-layout-footer {
|
||||
padding-top: 30px;
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div class="layout" onkeydown="keydown">
|
||||
@@ -11,31 +47,31 @@
|
||||
<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;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
|
||||
v-on:click="refreshPage()" />
|
||||
<div style="background: white;width:100%;height:40px;">
|
||||
<img style="height:40px;float:left;" src="/static/logo.png">
|
||||
|
||||
<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-group>
|
||||
<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-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Header>
|
||||
|
||||
<Content class="content">
|
||||
<div style="min-height: 250px;">
|
||||
<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 id="wrapper" style="border-left: 0px solid #FF3366;">
|
||||
<div id="noteText" style="text-align: center;min-height: 250px;" class="monoFt">
|
||||
<p>{{ $t("error." + this.errorInfo.code) }}</p>
|
||||
<div id="noteText" style="text-align: center;min-height: 650px;" class="monoFt">
|
||||
<h1></h1>
|
||||
{{ $t("error." + this.errorInfo.code) }}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -45,7 +81,7 @@
|
||||
</Content>
|
||||
|
||||
|
||||
<Footer class="layout-footer-center">2024 © flagnote.com</Footer>
|
||||
<Footer class="layout-footer-center">2022 © flagnote.com</Footer>
|
||||
|
||||
</Layout>
|
||||
</div>
|
||||
@@ -91,28 +127,29 @@ export default {
|
||||
if (this.$route.params.name) {
|
||||
this.noteForm.key = this.$route.params.name;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 100) + "px";
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
//window.scrollTo(0, 0);
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
|
||||
//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);
|
||||
|
||||
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 100) + "px";
|
||||
})()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refreshPage() {
|
||||
@@ -125,3 +162,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -16,6 +16,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,301 +0,0 @@
|
||||
<style scoped>
|
||||
.markdown-body {
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.ivu-layout-footer {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.markdown-body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.jse-theme-red {
|
||||
/* over all fonts, sizes, and colors */
|
||||
--jse-theme-color: #ed4014;
|
||||
--jse-theme-color-highlight: #ed4014;
|
||||
--jse-background-color: #fff;
|
||||
--jse-text-color: #d4d4d4;
|
||||
--jse-text-color-inverse: #4d4d4d;
|
||||
|
||||
/* main, menu, modal */
|
||||
--jse-main-border: 1px solid #ed4014;
|
||||
--jse-menu-color: #fff;
|
||||
--jse-modal-background: #2f2f2f;
|
||||
--jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
|
||||
--jse-modal-code-background: #2f2f2f;
|
||||
|
||||
/* tooltip in text mode */
|
||||
--jse-tooltip-color: var(--jse-text-color);
|
||||
--jse-tooltip-background: #fff;
|
||||
--jse-tooltip-border: 1px solid #fff;
|
||||
--jse-tooltip-action-button-color: inherit;
|
||||
--jse-tooltip-action-button-background: #fff;
|
||||
|
||||
/* panels: navigation bar, gutter, search box */
|
||||
--jse-panel-background: #fff;
|
||||
--jse-panel-background-border: 1px solid #fff;
|
||||
--jse-panel-color: var(--jse-text-color);
|
||||
--jse-panel-color-readonly: #737373;
|
||||
--jse-panel-border: 1px solid #ed4014;
|
||||
--jse-panel-button-color-highlight: #e5e5e5;
|
||||
--jse-panel-button-background-highlight: #464646;
|
||||
|
||||
/* navigation-bar */
|
||||
--jse-navigation-bar-background: #656565;
|
||||
--jse-navigation-bar-background-highlight: #7e7e7e;
|
||||
--jse-navigation-bar-dropdown-color: var(--jse-text-color);
|
||||
|
||||
/* context menu */
|
||||
--jse-context-menu-background: #4b4b4b;
|
||||
--jse-context-menu-background-highlight: #595959;
|
||||
--jse-context-menu-separator-color: #595959;
|
||||
--jse-context-menu-color: var(--jse-text-color);
|
||||
--jse-context-menu-pointer-background: #737373;
|
||||
--jse-context-menu-pointer-background-highlight: #818181;
|
||||
--jse-context-menu-pointer-color: var(--jse-context-menu-color);
|
||||
|
||||
/* contents: json key and values */
|
||||
--jse-key-color: #1a1a1a;
|
||||
--jse-value-color: var(--jse-text-color);
|
||||
--jse-value-color-number: #ee422e;
|
||||
--jse-value-color-boolean: #ff8c00;
|
||||
--jse-value-color-null: #004ed0;
|
||||
--jse-value-color-string: #008000;
|
||||
--jse-value-color-url: #ce9178;
|
||||
--jse-delimiter-color: #949494;
|
||||
--jse-edit-outline: 2px solid var(--jse-text-color);
|
||||
|
||||
/* contents: selected or hovered */
|
||||
--jse-selection-background-color: #464646;
|
||||
--jse-selection-background-inactive-color: #333333;
|
||||
--jse-hover-background-color: #343434;
|
||||
--jse-active-line-background-color: rgba(255, 255, 255, 0.06);
|
||||
--jse-search-match-background-color: #343434;
|
||||
|
||||
/* contents: section of collapsed items in an array */
|
||||
--jse-collapsed-items-background-color: #333333;
|
||||
--jse-collapsed-items-selected-background-color: #565656;
|
||||
--jse-collapsed-items-link-color: #b2b2b2;
|
||||
--jse-collapsed-items-link-color-highlight: #ec8477;
|
||||
|
||||
/* contents: highlighting of search results */
|
||||
--jse-search-match-color: #724c27;
|
||||
--jse-search-match-outline: 1px solid #966535;
|
||||
--jse-search-match-active-color: #9f6c39;
|
||||
--jse-search-match-active-outline: 1px solid #bb7f43;
|
||||
|
||||
/* contents: inline tags inside the JSON document */
|
||||
--jse-tag-background: #444444;
|
||||
--jse-tag-color: #bdbdbd;
|
||||
|
||||
/* contents: table */
|
||||
--jse-table-header-background: #333333;
|
||||
--jse-table-header-background-highlight: #424242;
|
||||
--jse-table-row-odd-background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* controls in modals: inputs, buttons, and `a` */
|
||||
--jse-input-background: #3d3d3d;
|
||||
--jse-input-border: var(--jse-main-border);
|
||||
--jse-button-background: #808080;
|
||||
--jse-button-background-highlight: #7a7a7a;
|
||||
--jse-button-color: #e0e0e0;
|
||||
--jse-button-secondary-background: #494949;
|
||||
--jse-button-secondary-background-highlight: #5d5d5d;
|
||||
--jse-button-secondary-background-disabled: #9d9d9d;
|
||||
--jse-button-secondary-color: var(--jse-text-color);
|
||||
--jse-a-color: #55abff;
|
||||
--jse-a-color-highlight: #4387c9;
|
||||
|
||||
/* svelte-select */
|
||||
--jse-svelte-select-background: #3d3d3d;
|
||||
--jse-svelte-select-border: 1px solid #4f4f4f;
|
||||
--list-background: #3d3d3d;
|
||||
--item-hover-bg: #505050;
|
||||
--multi-item-bg: #5b5b5b;
|
||||
--input-color: #d4d4d4;
|
||||
--multi-clear-bg: #8a8a8a;
|
||||
--multi-item-clear-icon-color: #d4d4d4;
|
||||
--multi-item-outline: 1px solid #696969;
|
||||
--list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* color picker */
|
||||
--jse-color-picker-background: #656565;
|
||||
--jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px;
|
||||
|
||||
|
||||
--jse-menu-button-size: 32px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script setup>
|
||||
import { Mode } from 'vanilla-jsoneditor'
|
||||
</script>
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Layout>
|
||||
<Content class="content">
|
||||
<div style="min-height: 250px;height: 100%;margin:7px 0px">
|
||||
<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 id="wrapper" style="border-left: 0px solid #FF3366;" class="markdown-body">
|
||||
<JsonEditorVue id="noteMdText" :mode="Mode.text" v-model="this.noteForm.text" class="jse-theme-red" />
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script scoped>
|
||||
import { md5, unwrap } from "@/libs/secret";
|
||||
import { getStoreKey } from "@/api/lock";
|
||||
import { getNoteBlob } from "@/api/note";
|
||||
import storage from "@/libs/storage";
|
||||
import { Buffer } from 'buffer';
|
||||
import JsonEditorVue from 'json-editor-vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'ViewJsonNote',
|
||||
components: {JsonEditorVue },
|
||||
data() {
|
||||
return {
|
||||
noteForm: {
|
||||
url: '',
|
||||
noteUrl: '',
|
||||
text: '',
|
||||
renderedMarkdown: '',
|
||||
key: '',
|
||||
},
|
||||
secret: {
|
||||
storeKey: '',
|
||||
secretKey: '',
|
||||
cipher: '',
|
||||
md5: '',
|
||||
},
|
||||
state: {
|
||||
lock: null,
|
||||
initTime: null,
|
||||
initTtl: null,
|
||||
ttl: null,
|
||||
ttlDesc: '-- : --',
|
||||
serverTime: null,
|
||||
},
|
||||
model: {
|
||||
showError: false,
|
||||
},
|
||||
errorInfo: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// read $route
|
||||
this.noteForm.key = this.$route.params.name;
|
||||
let noteMeta = this.$route.meta.noteMeta;
|
||||
this.secret.secretKey = noteMeta.secretKey;
|
||||
|
||||
this.secret.storeKey = getStoreKey(this.noteForm.key);
|
||||
|
||||
if (noteMeta) {
|
||||
|
||||
this.state.lock = noteMeta.lock;
|
||||
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; //读者有没有值可配置
|
||||
this.secret.md5 = noteMeta.md5;
|
||||
|
||||
storage.local.dynamicClear();
|
||||
|
||||
this.loadText();
|
||||
|
||||
} else {
|
||||
this.errorInfo = this.$t('error.100001');
|
||||
this.model.showError = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteMdText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 15) + "px";
|
||||
})
|
||||
|
||||
}, mounted() {
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteMdText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 15) + "px";
|
||||
})()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadText() {
|
||||
let that = this;
|
||||
|
||||
let storeInfo = storage.local.getText(this.secret.storeKey);
|
||||
|
||||
let starray = [];
|
||||
if (storeInfo) {
|
||||
starray = storeInfo.split('|');
|
||||
}
|
||||
|
||||
if (!storeInfo || !starray[4] || (md5(starray[4]) != this.secret.md5)) {
|
||||
// local is useless
|
||||
getNoteBlob(this.noteForm.key).then((res) => {
|
||||
if (!res.data || res.data.size == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
res.data.arrayBuffer().then(function (ab) {
|
||||
if (!ab || ab.byteLength == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let base64String = Buffer.from(ab).toString('base64')
|
||||
that.noteForm.text = unwrap(base64String, that.secret.secretKey);
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} else {
|
||||
starray = storeInfo.split('|');
|
||||
if (!starray[4]) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
|
||||
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,213 +0,0 @@
|
||||
<style scoped>
|
||||
.markdown-body {
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.ivu-layout-footer {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.markdown-body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Layout>
|
||||
<Content class="content">
|
||||
<div style="min-height: 250px;height: 100%;margin:7px 0px">
|
||||
<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 id="wrapper" style="border-left: 0px solid #FF3366;" class="markdown-body">
|
||||
<vue-markdown id="noteMdText" :source="this.noteForm.text" :options="this.options" />
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script scroped>
|
||||
import { md5, unwrap } from "@/libs/secret";
|
||||
import { getStoreKey } from "@/api/lock";
|
||||
import { getNoteBlob } from "@/api/note";
|
||||
import storage from "@/libs/storage";
|
||||
import { Buffer } from 'buffer';
|
||||
import VueMarkdown from 'vue-markdown-render'
|
||||
import 'github-markdown-css'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/github.css'
|
||||
import escapeHtml from "escape-html";
|
||||
|
||||
export default {
|
||||
name: 'ViewMdNote',
|
||||
components: { VueMarkdown },
|
||||
data() {
|
||||
return {
|
||||
noteForm: {
|
||||
url: '',
|
||||
noteUrl: '',
|
||||
text: '',
|
||||
renderedMarkdown: '',
|
||||
key: '',
|
||||
},
|
||||
secret: {
|
||||
storeKey: '',
|
||||
secretKey: '',
|
||||
cipher: '',
|
||||
md5: '',
|
||||
},
|
||||
state: {
|
||||
lock: null,
|
||||
initTime: null,
|
||||
initTtl: null,
|
||||
ttl: null,
|
||||
ttlDesc: '-- : --',
|
||||
serverTime: null,
|
||||
},
|
||||
model: {
|
||||
showError: false,
|
||||
},
|
||||
options: {
|
||||
// Enable HTML tags in source
|
||||
html: true,
|
||||
// Use '/' to close single tags (<br />).
|
||||
// This is only for full CommonMark compatibility.
|
||||
xhtmlOut: true,
|
||||
// Convert '\n' in paragraphs into <br>
|
||||
breaks: true,
|
||||
// CSS language prefix for fenced blocks. Can be
|
||||
// useful for external highlighters.
|
||||
langPrefix: 'language-',
|
||||
// Autoconvert URL-like text to links
|
||||
linkify: true,
|
||||
// Enable some language-neutral replacement + quotes beautification
|
||||
// For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.mjs
|
||||
typographer: true,
|
||||
// Highlighter function. Should return escaped HTML,
|
||||
// or '' if the source string is not changed and should be escaped externally.
|
||||
// If result starts with <pre... internal wrapper is skipped.
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return '<pre><code class="hljs">' +
|
||||
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
|
||||
'</code></pre>';
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
return '<pre><code class="hljs">' + escapeHtml(str) + '</code></pre>';
|
||||
}
|
||||
},
|
||||
errorInfo: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// read $route
|
||||
this.noteForm.key = this.$route.params.name;
|
||||
let noteMeta = this.$route.meta.noteMeta;
|
||||
this.secret.secretKey = noteMeta.secretKey;
|
||||
|
||||
this.secret.storeKey = getStoreKey(this.noteForm.key);
|
||||
|
||||
if (noteMeta) {
|
||||
|
||||
this.state.lock = noteMeta.lock;
|
||||
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; //读者有没有值可配置
|
||||
this.secret.md5 = noteMeta.md5;
|
||||
|
||||
storage.local.dynamicClear();
|
||||
|
||||
this.loadText();
|
||||
|
||||
} else {
|
||||
this.errorInfo = this.$t('error.100001');
|
||||
this.model.showError = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteMdText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 15) + "px";
|
||||
})
|
||||
|
||||
}, mounted() {
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteMdText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 15) + "px";
|
||||
})()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadText() {
|
||||
let that = this;
|
||||
|
||||
let storeInfo = storage.local.getText(this.secret.storeKey);
|
||||
|
||||
let starray = [];
|
||||
if (storeInfo) {
|
||||
starray = storeInfo.split('|');
|
||||
}
|
||||
|
||||
if (!storeInfo || !starray[4] || (md5(starray[4]) != this.secret.md5)) {
|
||||
// local is useless
|
||||
getNoteBlob(this.noteForm.key).then((res) => {
|
||||
if (!res.data || res.data.size == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
res.data.arrayBuffer().then(function (ab) {
|
||||
if (!ab || ab.byteLength == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let base64String = Buffer.from(ab).toString('base64')
|
||||
that.noteForm.text = unwrap(base64String, that.secret.secretKey);
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} else {
|
||||
starray = storeInfo.split('|');
|
||||
if (!starray[4]) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
|
||||
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,69 @@
|
||||
<style scoped>
|
||||
.ivu-layout-footer {
|
||||
padding-top: 30px;
|
||||
.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>
|
||||
|
||||
@@ -17,8 +80,8 @@
|
||||
}
|
||||
|
||||
#qrUrl::selection {
|
||||
background: #dddddd;
|
||||
color: #ed4014;
|
||||
background-color: #ed4014;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#copyBtn {
|
||||
@@ -80,24 +143,48 @@
|
||||
font-family: "Bitstream Vera Sans Mono", Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ivu-modal-content {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* #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">
|
||||
@@ -116,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"
|
||||
@@ -141,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>
|
||||
@@ -162,35 +240,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
</Affix>
|
||||
|
||||
|
||||
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
|
||||
<Content class="content">
|
||||
<div>
|
||||
<Row>
|
||||
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
|
||||
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
|
||||
<div class="noteHeader" style="height:40px;border-left: 2px solid white;"></div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<Content class="content">
|
||||
<div style="min-height: 250px;">
|
||||
<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 ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
|
||||
<div id="wrapper" style="border-left: 2px solid white;">
|
||||
<Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
|
||||
:autosize="{}" />
|
||||
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
@@ -200,14 +266,19 @@
|
||||
|
||||
|
||||
<Footer class="layout-footer-center">
|
||||
2024 © flagnote.com
|
||||
2022 © flagnote.com
|
||||
</Footer>
|
||||
|
||||
</Layout>
|
||||
|
||||
<Modal scrollable 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%;">
|
||||
<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%;">
|
||||
<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%">
|
||||
@@ -221,48 +292,48 @@
|
||||
</div>
|
||||
<p style="text-align: center;margin-top:10px;">
|
||||
<Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeShareModel()">{{ $t("button.close")
|
||||
}}</Button>
|
||||
}}</Button>
|
||||
</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>
|
||||
@@ -272,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',
|
||||
@@ -319,8 +388,6 @@ export default {
|
||||
showMenuState: false,
|
||||
showHeaderShade: false,
|
||||
errorInfo: '',
|
||||
targetTime: null,
|
||||
showSkeleton: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -346,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; //读者有没有值可配置
|
||||
@@ -354,9 +420,13 @@ export default {
|
||||
|
||||
this.startClock();
|
||||
|
||||
storage.local.dynamicClear();
|
||||
|
||||
let that = this;
|
||||
storage.local.getText(this.secret.storeKey).then(function(storeInfo){
|
||||
that.loadText(storeInfo);
|
||||
});
|
||||
|
||||
this.loadText();
|
||||
storage.local.dynamicClear();
|
||||
|
||||
this.bindCtrlAllEvent();
|
||||
this.bindCopyUrlEvent();
|
||||
@@ -368,14 +438,29 @@ export default {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 100) + "px";
|
||||
})
|
||||
|
||||
},
|
||||
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 = {
|
||||
@@ -388,21 +473,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);
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let elementNoteText = document.getElementById("noteText");
|
||||
elementNoteText.style.minHeight = (clientHeight - 100) + "px";
|
||||
})()
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
},
|
||||
@@ -411,8 +481,7 @@ export default {
|
||||
destroyed() {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
switchMenu() {
|
||||
this.showMenuState = !this.showMenuState;
|
||||
@@ -440,7 +509,9 @@ export default {
|
||||
} else if (mins < 10) {
|
||||
mins = "0" + mins;
|
||||
}
|
||||
|
||||
let seds = parseInt(ittl % 60);
|
||||
|
||||
if (seds < 0) {
|
||||
seds = "00";
|
||||
} else if (seds < 10) {
|
||||
@@ -448,9 +519,11 @@ 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();
|
||||
storage.local.delete(that.secret.storeKey).then(function(){
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
@@ -485,9 +558,10 @@ export default {
|
||||
this.model.deleting = true;
|
||||
let that = this;
|
||||
deleteNote(this.noteForm.key).then(res => {
|
||||
if (res.data && res.data.code == "000000") {
|
||||
storage.local.delete(that.secret.storeKey);
|
||||
location.reload();
|
||||
if (res.data&&res.data.code=="000000") {
|
||||
storage.local.delete(that.secret.storeKey).then(function(){
|
||||
location.reload();
|
||||
});
|
||||
} else {
|
||||
that.model.deleting = false;
|
||||
}
|
||||
@@ -495,11 +569,9 @@ export default {
|
||||
alert(error);
|
||||
});
|
||||
},
|
||||
loadText() {
|
||||
loadText(storeInfo) {
|
||||
let that = this;
|
||||
|
||||
let storeInfo = storage.local.getText(this.secret.storeKey);
|
||||
|
||||
let starray = [];
|
||||
if (storeInfo) {
|
||||
starray = storeInfo.split('|');
|
||||
@@ -512,19 +584,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 {
|
||||
@@ -535,7 +616,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
|
||||
@@ -588,62 +668,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: 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>
|
||||
|
||||
|
||||
142
vue.config.js
142
vue.config.js
@@ -1,130 +1,78 @@
|
||||
const { defineConfig } = require("@vue/cli-service");
|
||||
const CompressionPlugin = require("compression-webpack-plugin");
|
||||
const WebpackObfuscator = require("webpack-obfuscator");
|
||||
const path = require("path");
|
||||
const WebpackObfuscator = require('webpack-obfuscator');
|
||||
|
||||
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.4.31/dist/vue.global.min.js',
|
||||
// 'https://cdn.jsdelivr.net/npm/vue-router@4.4.0/dist/vue-router.global.min.js',
|
||||
// 'https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/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.18/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.18/dist/styles/viewuiplus.min.css",
|
||||
],
|
||||
};
|
||||
|
||||
const config = {
|
||||
assetsDir: "static",
|
||||
productionSourceMap: NODE_ENV !== "production",
|
||||
module.exports = defineConfig({
|
||||
|
||||
assetsDir: 'static',
|
||||
productionSourceMap: false,
|
||||
|
||||
configureWebpack: (config) => {
|
||||
config.devtool = 'source-map'
|
||||
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") {
|
||||
config.devtool = false
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
config.plugins.push(
|
||||
new WebpackObfuscator(
|
||||
{
|
||||
compact: true, //压缩代码
|
||||
controlFlowFlattening: false, //是否启用控制流扁平化(降低1.5倍的运行速度)
|
||||
deadCodeInjection: true, //随机的死代码块(增加了混淆代码的大小)
|
||||
debugProtection: true, //此选项几乎不可能使用开发者工具的控制台选项卡
|
||||
disableConsoleOutput: true, //通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
|
||||
identifierNamesGenerator: "mangled", //标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
|
||||
log: false,
|
||||
renameGlobals: true, //是否启用全局变量和函数名称的混淆
|
||||
rotateStringArray: true, //通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
|
||||
selfDefending: true, //混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
|
||||
// transformObjectKeys: true,
|
||||
unicodeEscapeSequence: true, //允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
|
||||
},
|
||||
["static/js/chunk-vendors.*.js"]
|
||||
),
|
||||
new WebpackObfuscator({
|
||||
compact: true,//压缩代码
|
||||
controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度)
|
||||
deadCodeInjection: true,//随机的死代码块(增加了混淆代码的大小)
|
||||
debugProtection: true,//此选项几乎不可能使用开发者工具的控制台选项卡
|
||||
disableConsoleOutput: true,//通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
|
||||
identifierNamesGenerator: 'mangled',//标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
|
||||
log: false,
|
||||
renameGlobals: true,//是否启用全局变量和函数名称的混淆
|
||||
rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
|
||||
selfDefending: true,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
|
||||
// transformObjectKeys: true,
|
||||
unicodeEscapeSequence: true//允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
|
||||
}, ['static/js/chunk-vendors.*.js']),
|
||||
|
||||
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的数据压缩
|
||||
deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
|
||||
})
|
||||
);
|
||||
}),
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
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: {
|
||||
"/redirect": {
|
||||
//target: "https://flagnote.com/", // 后台接口域名
|
||||
target: "http://localhost:21000/", // 后台接口域名
|
||||
secure: false, // 如果是https接口，需要配置这个参数
|
||||
changeOrigin: true, //是否跨域
|
||||
pathRewrite: {
|
||||
"^/": "/html/",
|
||||
},
|
||||
},
|
||||
"/note": {
|
||||
target: "https://flagnote.com/", // 后台接口域名
|
||||
//target: "http://localhost:21000/", // 后台接口域名
|
||||
// target: "http://localhost:10000/", // 后台接口域名
|
||||
secure: false, // 如果是https接口，需要配置这个参数
|
||||
changeOrigin: true, //是否跨域
|
||||
pathRewrite: {
|
||||
// '^/': '/'
|
||||
},
|
||||
},
|
||||
"^/[abcdefhikmnopqstuvwxyz23456789]{16}\\.txt$": {
|
||||
//target: "https://flagnote.com/", // 后台接口域名
|
||||
target: "http://localhost:21000/", // 后台接口域名
|
||||
secure: false, // 如果是https接口，需要配置这个参数
|
||||
changeOrigin: true, //是否跨域
|
||||
pathRewrite: {
|
||||
"^/": "/note/",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = defineConfig(config);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user