remove wasm

Update EditNote.vue
100014 issue
2023-05-19 10:03:57 +08:00 · 2023-04-12 17:38:21 +08:00 · 2023-04-12 17:32:36 +08:00 · 2023-04-12 17:02:32 +08:00 · 2023-04-12 17:01:48 +08:00
11 changed files with 1021 additions and 1063 deletions
--- a/.env.production
+++ b/.env.production
@@ -4,3 +4,5 @@ VUE_APP_BASE_NAME = production
 VUE_APP_BASE_URL = https://flagnote.com
 VUE_APP_NOTE_MAX_COUNT = 131072
 VUE_APP_NOTE_MAX_DESC = 128K
+VUE_APP_CDN_PROVIDER = jsdelivr
+# VUE_APP_CDN_PROVIDER = unpkg
--- 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/public/index.html
+++ b/public/index.html
@@ -23,7 +23,8 @@
  </title>
  <style>
    body {
-      background-color: #dddddd
+      background-color: #dddddd;
+      height: 100%;
    }
  </style>
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
@@ -32,9 +33,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/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
    <router-view></router-view>
-  </div>
 </template>

 <script>
@@ -54,7 +52,7 @@ body {
 }

 .noteHeaderShade {
-  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
+  background-color: white;
  width:100%;
  height:40px;
  border-bottom: dashed #ed4014 1px;
--- 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 = {
  /**
@@ -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,19 +109,11 @@ 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);
 }

--- 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/views/EditNote.vue
+++ b/src/views/EditNote.vue
@@ -75,12 +75,11 @@

    <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 }">
-
-          <Affix :offset-top="0">
            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">

              <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
@@ -124,13 +123,22 @@


            </div>
-          </Affix>
-
-

            </Col>
          </Row>
        </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <div class="noteHeader" style="height:40px;border-left: 2px solid #ed4014;"></div>
+            </Col>
+          </Row>
+        </div>
+      </Content>

      <Content class="content">
        <div style="min-height: 650px;">
@@ -158,7 +166,7 @@
      <Footer class="layout-footer-center">2023 &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>
@@ -169,7 +177,7 @@
      </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 +203,7 @@ import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
 import html2canvas from "html2canvas";

+
 export default {
  name: 'EditNote',
  props: {},
@@ -298,24 +307,11 @@ export default {
    this.bindCtrlAllEvent();
    this.bindToTopEvent();

+    if(window.wasm_flate_bg_path){
      window.wasm_bindgen(window.wasm_flate_bg_path);
+    }
  },
  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))
  },
  updated() {
@@ -450,7 +446,7 @@ export default {
      }
    },
    save() {
-      return saveNote(this.noteForm, this.secret);
+      return saveNote(this.noteForm,this.state,this.secret);
    },
    validateForm() {
      let text = this.noteForm.text;
@@ -602,7 +598,7 @@ export default {
      });
    },
    beforeunloadHandler() {
-      if(this.state.deleted==0){
+      if (this.state.deleted == 0) {
        setStoreText(this.noteForm, this.state, this.secret);
      }
    },
--- a/src/views/ViewNote.vue
+++ b/src/views/ViewNote.vue
@@ -162,12 +162,12 @@
 <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 }">
-          <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()">
@@ -235,13 +235,25 @@

            </div>

-          </Affix>
+



            </Col>
          </Row>
        </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <div class="noteHeader" style="height:40px;border-left: 2px solid white;"></div>
+            </Col>
+          </Row>
+        </div>
+      </Content>

      <Content class="content">
        <div style="min-height: 650px;">
@@ -250,32 +262,8 @@
              :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>
              </div>
            </Card>
            </Col>
@@ -290,7 +278,7 @@

    </Layout>

-    <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
+    <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>
@@ -310,7 +298,7 @@
      </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 +310,7 @@
      </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 +321,7 @@
      </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>
@@ -452,21 +440,6 @@ export default {

  },
  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 = {
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,7 +13,7 @@ const assetsCDN = {
    "crypto-js": "CryptoJS",
    'pako': 'pako',
    "html2canvas": "html2canvas",
-    'view-ui-plus':'ViewUIPlus',
+  //  'view-ui-plus':'ViewUIPlus',
  },

  // 通过cdn方式使用
@@ -22,9 +22,8 @@ const assetsCDN = {
    '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/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',
  ],

@@ -44,28 +43,6 @@ const config = {

    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') {
      config.plugins.push(
@@ -86,7 +63,7 @@ const config = {

        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的数据压缩
@@ -98,7 +75,6 @@ const config = {

  transpileDependencies: false,

-
  chainWebpack: (setting) => {
    setting.plugin("html").tap((args) => {
      args[0].cdn = assetsCDN
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
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