json

auto height and markdown
markdown
2024-07-16 19:36:04 +12:00 · 2024-07-13 22:01:42 +12:00 · 2024-07-13 14:41:05 +12:00 · 2024-07-12 16:26:30 +12:00 · 2024-07-12 00:25:52 +12:00 · 2024-03-07 17:54:50 +13:00
19 changed files with 4515 additions and 2950 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+/package-lock.json
+/yarn.lock
--- a/README.md
+++ b/README.md
@@ -1,35 +1,6 @@
-# view-ui-project-vuecli
-This project build for Vue3, Vue-router, Vuex, ViewUIPlus and Vue-cli.
-## Install
-```shell
-npm install
-```
-## Run
-```shell
-npm run serve
-```
-## Build
-### Build for Production
-```shell
-npm run build
-```
-### Build for Staging
-```shell
-npm run build:staging
-```
-## Run Eslint
-### Run without Fixing
+yarn install

- This operation will also run before git-commit.
-```shell
-npm run lint
-```
-### Run with Fixing
-```shell
-npm run lint:fix
-```
-## .env Description
+yarn build:prod
+
+yarn dev

- This project exposes environment variables on `process.env` object.
- Different modes (development/staging/production) correspond to different environment files (.env.*).
- .env file is always included, duplicate variables are overwritten by the specific mode file (.env.*).
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,14 @@ module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
-  plugins: [
-  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "view-ui-plus",
+        "libraryDirectory": "src/components"
+      },
+      "view-ui-plus"
+    ]
+  ]
 };
--- a/package.json
+++ b/package.json
@@ -2,46 +2,56 @@
  "name": "flagnote-web",
  "version": "1.0.0",
  "description": "flagnote web",
+  "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"
  },
  "dependencies": {
-    "axios": "^0.27.2",
+    "axios": "^0.28.1",
    "babel-plugin-import": "^1.13.6",
    "buffer": "^6.0.3",
    "clipboard": "^2.0.11",
-    "core-js": "^3.8.3",
-    "crypto-js": "^4.1.1",
+    "core-js": "^3.37.1",
+    "crypto-js": "^4.2.0",
    "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",
    "pako": "^2.1.0",
    "qrcodejs2-fixes": "^0.0.2",
-    "view-ui-plus": "^1.3.10",
-    "vue": "^3.2.13",
+    "view-ui-plus": "^1.3.18",
+    "vue": "^3.4.31",
    "vue-axios": "^3.5.2",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6",
-    "vuex": "^4.0.0"
+    "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"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-plugin-babel": "~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",
-    "less": "^4.0.0",
-    "less-loader": "^10.2.0",
-    "mockjs": "^1.1.0"
+    "javascript-obfuscator": "^4.1.1",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
+    "mockjs": "^1.1.0",
+    "webpack-obfuscator": "^3.5.1"
  },
  "browserslist": [
    "> 1%",
--- a/public/index.html
+++ b/public/index.html
@@ -22,9 +22,7 @@
    <%= htmlWebpackPlugin.options.title %>
  </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>
@@ -32,9 +30,6 @@
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
  <% } %>
-  <script>
-    window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm"
-  </script>
 </head>

 <body><noscript><strong>Please enable JavaScript to continue.</strong></noscript>
--- a/public/redirect.html
+++ b/public/redirect.html
@@ -53,7 +53,7 @@
        let keyMeta = getKeyMeta();

        if (keyMeta && keyMeta.key) {
-            sessionStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
+            localStorage.setItem(keyMeta.key + ".keyMeta", JSON.stringify(keyMeta));
            location.href = "/" + keyMeta.key;
        } else {
            location.href = "/100006";
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
-    <router-view></router-view>
-  </div>
+  <router-view></router-view>
 </template>

 <script>
@@ -13,27 +11,65 @@ export default {
 </script>

 <style>
-
-.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;
-}
-
 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%;
 }

+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: medium;
+}
+
+.ivu-layout-content {
+  padding: 0px;
+}
+
+.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;
 }
@@ -49,14 +85,14 @@ body {

 .noteHeader {
  background-color: white;
-  width:100%;
-  height:40px;
+  width: 100%;
+  height: 40px;
 }

 .noteHeaderShade {
-  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
-  width:100%;
-  height:40px;
+  background-color: white;
+  width: 100%;
+  height: 40px;
  border-bottom: dashed #ed4014 1px;
 }

@@ -80,22 +116,22 @@ body {
 }


-#noteText::selection {
+::selection {
  background: #dddddd;
  color: #ed4014;
 }

-#noteText::-moz-selection {
+::-moz-selection {
  background: #dddddd;
  color: #ed4014;
 }

-#noteText br::selection {
+br::selection {
  background: #dddddd;
  color: #ed4014;
 }

-#noteText br::-moz-selection {
+br::-moz-selection {
  background: #dddddd;
  color: #ed4014;
 }
@@ -122,10 +158,8 @@ body {
  display: none;
 }

-/* 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;
-} */
+.fnmodal {
+  align-items: center;
+  justify-content: center;
+}
 </style>
--- a/src/api/note.js
+++ b/src/api/note.js
@@ -3,6 +3,7 @@ import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
 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) => {
@@ -18,7 +19,9 @@ axios.interceptors.response.use(undefined, (err) => {
  }
 });

-export function saveNote(noteForm, secret) {
+export function saveNote(noteForm,state, secret) {
+  setStoreText(noteForm, state, secret);
+
  let storeKey = secret.storeKey;

  let storeInfo = storage.local.getText(storeKey);
--- a/src/libs/secret.js
+++ b/src/libs/secret.js
@@ -1,9 +1,6 @@
 import CryptoJS from "crypto-js";
 import pako from "pako";
-import {Buffer} from "buffer";
-//import {gzip_encode_raw,gzip_decode_raw} from 'wasm-flate';
-
-const wasmFlate = window.wasm_bindgen;
+import { Buffer } from "buffer";

 CryptoJS.enc.Uint8Array = {
  /**
@@ -47,7 +44,7 @@ CryptoJS.enc.Uint8Array = {

 export function wrap(text, secretKey) {
  text = "FLAGNOTE#" + text;
-  let  ui8ary = noteZip(text);
+  let ui8ary = noteZip(text);
  let result = aesEncrypt(convertUint8ArrayToWordArray(ui8ary), secretKey);
  return result;
 }
@@ -96,7 +93,7 @@ export function base64Encode(text) {

 //base64 decode atob
 export function base64Decode(text) {
-  return Buffer.from(text,'base64').toString('utf-8');
+  return Buffer.from(text, 'base64').toString('utf-8');
 }

 export function noteUnzip(wdary) {
@@ -112,29 +109,21 @@ export function noteZip(text) {
  return text;
 }

-export function zip(data){
-   if(wasmFlate.__wbindgen_wasm_module){
-     return wasmFlate.gzip_encode_raw(data);
-   }
-
+export function zip(data) {
  return pako.gzip(data);
 }

-export function unzip(data){
-  if(wasmFlate.__wbindgen_wasm_module){
-    return wasmFlate.gzip_decode_raw(data);
-  }
-
+export function unzip(data) {
  return pako.ungzip(data);
 }


 export function convertBase64ToHexString(base64) {
-	return CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(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));
+  return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(hexString));
 }

 export function convertHexStringToUint8Array(hexString) {
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import ViewUIPlus from 'view-ui-plus'
+// import ViewUIPlus from 'view-ui-plus'
 import App from './App.vue'
 import router from './router'
 import axios from 'axios'
@@ -7,6 +7,9 @@ import VueAxios from 'vue-axios'
 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';
+
 axios.defaults.baseURL = NoteConstant.servicePath;
 const debugFlag = process.env.NODE_ENV !== 'production';

@@ -16,14 +19,26 @@ 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);
+
+
 app.use(router)
  .use(i18n)
  .use(VueAxios, axios)
-  .use(ViewUIPlus, {
-    i18n: i18n,
-    transfer: true,
-    size: 'large',
-    capture: false,
-  })
  .mount('#app')

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } 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";
@@ -32,24 +34,37 @@ function getNoteView() {

  let key = path.substring(1, path.length);

-  keyMeta = storage.session.getObject(key+".keyMeta");
+  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) {
+  if (keyMeta && keyMeta.key && !isMd && !isJson) {
    //firstEdit
    return EditNote;
  }

  //set noteMeta
-  noteMeta = getNoteMeta(key);
+  if (noteMeta == null) {
+    noteMeta = getNoteMeta(key);
+  }

  //server error
  if (!noteMeta) {
@@ -65,7 +80,13 @@ function getNoteView() {

  //validated state
  if (1 == noteMeta.state) {
-    return ViewNote;
+    if (isMd) {
+      return ViewMdNote;
+    } else if (isJson) {
+      return ViewJsonNote;
+    } else {
+      return ViewNote;
+    }
  }

  //deleted
@@ -76,7 +97,8 @@ function getNoteView() {
    if (noteMeta.ttl > 0) {
      errorMeta = 100003;
      return ErrorNote;
-    } else {// timeout
+    } else {
+      // timeout
      errorMeta = 100004;
      return ErrorNote;
    }
@@ -88,12 +110,14 @@ function getNoteView() {
    if (storage.local.getText(storeKey)) {
      return EditNote;
    } else {
-      //storage is empty 
-      let df = storage.session.getText(storeKey + "_delete")
-      if (df) {//unsubmitted,user deleted.
+      //storage is empty
+      let df = storage.session.getText(storeKey + "_delete");
+      if (df) {
+        //unsubmitted,user deleted.
        errorMeta = 100003;
        return ErrorNote;
-      } else {//unsubmitted
+      } else {
+        //unsubmitted
        errorMeta = 100005;
        return ErrorNote;
      }
@@ -111,16 +135,40 @@ const routes = [
    path: "/:name([a-z0-9]{10,20})",
    name: "note",
    component: getNoteView(),
-    meta: { keyMeta: getKeyMetaParam(), noteMeta: getNoteMetaParam(), errorMeta: getErrorMetaParam() },
+    meta: {
+      keyMeta: getKeyMetaParam(),
+      noteMeta: getNoteMetaParam(),
+      errorMeta: getErrorMetaParam(),
+    },
  },
-  { path: "/:path(.*)", component: ErrorRoute }
+  // {
+  //   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 },
 ];

 const router = createRouter({
  history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
  linkExactActiveClass: "active",
  mode: "history",
-  routes
-})
+  routes,
+});

 export default router;
--- a/src/views/EditNote.vue
+++ b/src/views/EditNote.vue
@@ -1,73 +1,6 @@
 <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;
-}
-
-/* button span {
-  margin-left: 0px !important;
-  font-size: 18px !important;
-  font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
-  margin-bottom: 6px;
-} */
-
-
-
-@media print {
-
-  @page {
-    size: portrait;
-    margin: 20px;
-  }
-
-  body {
-    margin: 0.8cm;
-    background-color: #ffffff;
-  }
-
-  .header {
-    display: none;
-  }
-
-  .layout-footer-center {
-    display: none;
-  }
-
-}
 </style>

 <template>
@@ -75,12 +8,11 @@

    <Layout>

-      <Header class="header">
-        <Row>
-          <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
-            :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-
-          <Affix :offset-top="0">
+      <div 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 }">
            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">

              <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
@@ -108,32 +40,42 @@
              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>
+                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"
+                  icon="md-crop"></Button>

                <Button aria-label="download text" v-show="model.showDownloadText" type="error"
                  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>
+            </Col>
+          </Row>
+        </Header>
+      </div>

      <Content class="content">
-        <div style="min-height: 650px;">
+        <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;">
          <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 }">
@@ -141,9 +83,9 @@
              <Form :model="noteForm" :label-width="80">
                <div ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
                  <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
-                    :autosize="{ minRows: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
-                    @on-keydown="recordEventKdown" />
-                  
+                    :autosize="{maxRows: 100000 }" :placeholder="$t('content.noteTip')"
+                    @input="recordText" @on-keydown="recordEventKdown" />
+
                </div>
              </Form>
            </Card>
@@ -155,21 +97,24 @@

      </Content>

-      <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2024 &copy; flagnote.com</Footer>
    </Layout>

-    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable 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 v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable 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>
@@ -195,6 +140,7 @@ import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
 import html2canvas from "html2canvas";

+
 export default {
  name: 'EditNote',
  props: {},
@@ -243,12 +189,6 @@ export default {
    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();

@@ -273,7 +213,7 @@ export default {
      // }

      storage.local.setText(storeKey, "0|" + this.secret.cipher + "|0|" + this.state.initTime + "|");
-      storage.session.delete(keyMeta.key + ".keyMeta");
+      storage.local.delete(keyMeta.key + ".keyMeta");
    } else {
      // second edit
      let noteMeta = this.$route.meta.noteMeta;
@@ -298,25 +238,22 @@ export default {
    this.bindCtrlAllEvent();
    this.bindToTopEvent();

-    window.wasm_bindgen(window.wasm_flate_bg_path);
+    this.$nextTick(() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
+    })
+
  },
  mounted() {
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-
-    myObserver.observe(someOtherEl);
-
    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";
+      })()
+    }
  },
  updated() {
  },
@@ -448,9 +385,11 @@ export default {
        //save
        this.submitNote();
      }
-    },
+
+
+     },
    save() {
-      return saveNote(this.noteForm, this.secret);
+      return saveNote(this.noteForm, this.state, this.secret);
    },
    validateForm() {
      let text = this.noteForm.text;
@@ -602,7 +541,7 @@ export default {
      });
    },
    beforeunloadHandler() {
-      if(this.state.deleted==0){
+      if (this.state.deleted == 0) {
        setStoreText(this.noteForm, this.state, this.secret);
      }
    },
--- a/src/views/ErrorNote.vue
+++ b/src/views/ErrorNote.vue
@@ -1,43 +1,7 @@
 <style scoped>
-.layout {
-  height: 100%;
-  background: #dddddd;
+.ivu-layout-footer {
+    padding-top: 30px;
 }
-
-.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">
@@ -47,31 +11,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;" src="/static/logo.png">
+            <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="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 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>
            </Col>
          </Row>
        </div>
      </Header>

      <Content class="content">
-        <div style="min-height: 650px;">
+        <div style="min-height: 250px;">
          <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: 650px;" class="monoFt">
-                  <h1></h1>
-                  {{ $t("error." + this.errorInfo.code) }}
+                <div id="noteText" style="text-align: center;min-height: 250px;" class="monoFt">
+                  <p>{{ $t("error." + this.errorInfo.code) }}</p>
                </div>
              </div>
            </Card>
@@ -81,7 +45,7 @@
      </Content>


-      <Footer class="layout-footer-center">2023 &copy; flagnote.com</Footer>
+      <Footer class="layout-footer-center">2024 &copy; flagnote.com</Footer>

    </Layout>
  </div>
@@ -127,16 +91,28 @@ 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();


-
+    window.onresize = () => {
+      return (() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
+      })()
+    }
  },
  methods: {
    refreshPage() {
@@ -149,4 +125,3 @@ export default {
  }
 }
 </script>
-
--- a/src/views/ErrorRoute.vue
+++ b/src/views/ErrorRoute.vue
@@ -16,3 +16,6 @@ export default {
    }
 }
 </script>
+<style scoped>
+
+</style>
--- a/src/views/ViewJsonNote.vue.bak
+++ b/src/views/ViewJsonNote.vue.bak
@@ -0,0 +1,301 @@
+<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>
+
+
--- a/src/views/ViewMdNote.vue.bak
+++ b/src/views/ViewMdNote.vue.bak
@@ -0,0 +1,213 @@
+<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>
--- a/src/views/ViewNote.vue
+++ b/src/views/ViewNote.vue
@@ -1,69 +1,6 @@
 <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;
-  }
-
-
+.ivu-layout-footer {
+    padding-top: 30px;
 }
 </style>

@@ -143,31 +80,21 @@
  font-family: "Bitstream Vera Sans Mono", Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
 }

-
-
 .ivu-modal-content {
  border-radius: 0px !important;
 }

-
-
-/* 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>

 <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()">
@@ -219,14 +146,14 @@

                <!--

-                                <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
-                                @click="refreshPage()"></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 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();" icon="md-download"></Button>

                <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
                  @click="showDeleteModel(); switchMenu();"></Button>
@@ -235,47 +162,35 @@

            </div>

-          </Affix>



-          </Col>
-        </Row>
-      </Header>
+
+            </Col>
+          </Row>
+        </Header>
+      </div>

      <Content class="content">
-        <div style="min-height: 650px;">
+        <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;">
          <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;">
-                <Skeleton :loading="showSkeleton">
-                  <template #template>
-                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;" >
-                      <SkeletonItem />
-                      <SkeletonItem block width="80%" height="16px" />
-                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
-                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
-                      <SkeletonItem width="38%" height="16px" />
-                      <SkeletonItem width="88%" height="16px" />
-                      <SkeletonItem block width="80%" height="16px" />
-                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
-                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
-                      <SkeletonItem width="38%" height="16px" />
-                      <SkeletonItem width="88%" height="16px" />
-                      <SkeletonItem block width="80%" height="16px" />
-                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
-                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
-                      <SkeletonItem width="38%" height="16px" />
-                      <SkeletonItem width="88%" height="16px" />
-                    </div>
-                  </template>
-                  <template #default>
-                    <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                      :autosize="{ minRows: 35 }" />
-                  </template>
-                </Skeleton>
+                <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
+                  :autosize="{}" />
              </div>
            </Card>
            </Col>
@@ -285,13 +200,13 @@


      <Footer class="layout-footer-center">
-        2023 &copy; flagnote.com
+        2024 &copy; flagnote.com
      </Footer>

    </Layout>

-    <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
-      @on-cancel="closeShareModel">
+    <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%;">
        <Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
      </p>
@@ -306,11 +221,12 @@
      </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 v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable 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>
@@ -322,7 +238,8 @@
      </p>
    </Modal>

-    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable 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>
@@ -333,7 +250,8 @@
      </p>
    </Modal>

-    <Modal v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable 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>
@@ -450,23 +368,14 @@ export default {
      return false;
    }

+    this.$nextTick(() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
+    })
+
  },
  mounted() {
-
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-    myObserver.observe(someOtherEl);
-
    let qrimg = document.getElementById("qrImg");
    let qrurl = "https://flagnote.com/" + this.noteForm.key;
    var opts = {
@@ -484,7 +393,15 @@ export default {
      storage.session.setText(this.secret.storeKey + "_share", '0');
      setTimeout(() => {
        this.showShareModel();
-      }, 100); 
+      }, 100);
+    }
+
+    window.onresize = () => {
+      return (() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 100) + "px";
+      })()
    }
  },
  updated() {
@@ -494,7 +411,8 @@ export default {
  destroyed() {
  },
  computed: {},
-  watch: {},
+  watch: {
+  },
  methods: {
    switchMenu() {
      this.showMenuState = !this.showMenuState;
@@ -729,4 +647,3 @@ export default {
  }
 }
 </script>
-
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,143 +1,130 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require("@vue/cli-service");
 const CompressionPlugin = require("compression-webpack-plugin");
-const WebpackObfuscator = require('webpack-obfuscator');
-const path = require('path')
+const WebpackObfuscator = require("webpack-obfuscator");
+const path = require("path");

-const { NODE_ENV, VUE_APP_TITLE = '' } = process.env
+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',
+    //  'vue': 'Vue',
+    //  'vue-router': 'VueRouter',
+    //  "crypto-js": "CryptoJS",
+    //  'pako': 'pako',
+    html2canvas: "html2canvas",
+    //   'view-ui-plus':'ViewUIPlus',
  },

  // 通过cdn方式使用
  js: [
-    'https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js',
-    'https://cdn.jsdelivr.net/npm/vue-router@4.1.6/dist/vue-router.global.min.js',
-    'https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js',
-    'https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js',
-    'https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.10/dist/viewuiplus.min.js',
-    
-    'https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.min.js',
-    'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.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.10/dist/styles/viewuiplus.min.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',
+  assetsDir: "static",
+  productionSourceMap: NODE_ENV !== "production",

  configureWebpack: (config) => {
-    config.experiments = { asyncWebAssembly: true, syncWebAssembly: true }
+    config.devtool = 'source-map'
+
+    config.experiments = { asyncWebAssembly: true, syncWebAssembly: true };

    config.externals = assetsCDN.externals;

-    // const assetsCDN = {
-    //   // 放置需要使用 cdn 的库
-    //   externals: {
-    //     'vue': 'Vue',
-    //     'vue-router': 'VueRouter',
-    //     "crypto-js": "CryptoJS",
-    //     'pako': 'pako',
-    //     "html2canvas": "html2canvas",
-    //     'view-ui-plus':'ViewUIPlus',
-    //   },
-    //   css: [
-    //     // 存放 引用 css文件的地址
-    //     '//unpkg.com/element-plus@1.0.2-beta.48/lib/theme-chalk/index.css',
-    //   ],
-    //   js: [
-    //     // 存放 引用 js 文件的地址
-    //     '//unpkg.com/vue@3.1.1/dist/vue.global.js',
-    //     '//unpkg.com/element-plus@1.0.2-beta.48/lib/index.full.js'
-    //   ]
-    // }
-
-
    // 为生产环境修改配置
-    if (process.env.NODE_ENV === 'production') {
+    if (process.env.NODE_ENV === "production") {
+      config.devtool = false
      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$|\.wasm$|\.css$/, // 匹配文件名
+          test: /\.js$|\.html$|\.png$|\.jpg$|\.svg$|\.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].cdn = assetsCDN;
      args[0].title = VUE_APP_TITLE;
      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:20000/", // 后台接口域名
+        //target: "http://localhost:21000/", // 后台接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          // '^/': '/'
        },
-      }, "^/[abcdefhikmnopqstuvwxyz23456789]{16}\\.txt$": {
-        target: "https://flagnote.com/", // 后台接口域名
-        //target: "http://localhost:20000/", // 后台接口域名
+      },
+      "^/[abcdefhikmnopqstuvwxyz23456789]{16}\\.txt$": {
+        //target: "https://flagnote.com/", // 后台接口域名
+        target: "http://localhost:21000/", // 后台接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
-          '^/': '/note/'
+          "^/": "/note/",
        },
      },
    },
-  }
-}
+  },
+};

-module.exports = defineConfig(config)
+module.exports = defineConfig(config);
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Le Ma	61521d69ab	json	2024-07-16 19:36:04 +12:00
Le Ma	4694653def	auto height and markdown	2024-07-13 22:01:42 +12:00
Le Ma	25f6111a95	markdown	2024-07-13 14:41:05 +12:00
Le Ma	535bfa5578	2024	2024-07-12 16:26:30 +12:00
Le Ma	4f1d32e122	redirect 10005 error	2024-07-12 00:25:52 +12:00
Jesse-Ma	f401d0d9be	dev env	2024-03-07 17:54:50 +13:00
Jesse-Ma	f3aab357cc	dev env	2024-03-07 17:25:55 +13:00
Jesse-Ma	1a14e237ed	package.json modify	2024-03-06 19:08:16 +13:00
Jesse-Ma	fbca85de5c	remove wasm	2023-05-25 09:36:09 +08:00
Jesse-Ma	8dfb189985	remove wasm	2023-05-19 10:03:57 +08:00
Jesse-Ma	19cef5bb67	Update EditNote.vue	2023-04-12 17:38:21 +08:00
Jesse-Ma	2d4dd7f63d	100014 issue	2023-04-12 17:32:36 +08:00
Jesse-Ma	946343e429	babel	2023-04-12 17:02:32 +08:00
Jesse-Ma	aacb2b71fd	affix	2023-04-12 17:01:48 +08:00