milestone

.env

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

.env.development

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

.env.production

@@ -1,4 +1,5 @@
-NODE_ENV = production
+NODE_ENV=production
+VUE_APP_FLAG=prod
 VUE_APP_BASE_NAME = production
 VUE_APP_BASE_URL = https://flagnote.com
 VUE_APP_NOTE_MAX_COUNT = 131072

.env.staging

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

.eslintignore

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

.eslintrc.json

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

README.md

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

babel.config.js

@@ -1,5 +1,7 @@
-// module.exports = {
+module.exports = {
-//   presets: [
+  presets: [
-//     '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset',
-//   ]
+  ],
-// }
+  plugins: [
+  ],
+};

jsconfig.json

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

package.json

@@ -1,62 +1,56 @@
 {
   "name": "flagnote-web",
-  "version": "0.1.0",
+  "version": "1.0.0",
-  "private": true,
+  "description": "flagnote web",
   "scripts": {
+    "dev": "npm run serve",
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --mode production",
+    "build": "vue-cli-service build",
-    "build.test": "vue-cli-service build --mode test",
+    "build:staging": "vue-cli-service build --mode=staging",
-    "build.production": "vue-cli-service build --mode production",
+    "lint": "eslint ./src --ext .js,.vue",
-    "lint": "vue-cli-service lint"
+    "lint:fix": "eslint ./src --ext .js,.vue --fix",
+    "prepare": "husky install"
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "babel-plugin-import": "^1.13.6",
     "buffer": "^6.0.3",
     "clipboard": "^2.0.11",
+    "core-js": "^3.8.3",
     "crypto-js": "^4.1.1",
     "escape-html": "^1.0.3",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "pako": "^2.1.0",
-    "qrcodejs2": "^0.0.2",
+    "qrcodejs2-fixes": "^0.0.2",
-    "view-design": "^4.7.0",
+    "view-ui-plus": "^1.3.10",
-    "vue": "^2.7.14",
+    "vue": "^3.2.13",
     "vue-axios": "^3.5.2",
-    "vue-i18n": "^8.28.2",
+    "vue-i18n": "^9.2.2",
-    "vue-router": "^3.6.5"
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.8",
+    "eslint": "^8.14.0",
-    "@vue/cli-service": "~5.0.8",
+    "eslint-config-airbnb-base": "^15.0.0",
-    "compression-webpack-plugin": "^10.0.0",
+    "eslint-plugin-vue": "^8.7.1",
-    "core-js": "^3.26.1",
+    "husky": "^7.0.4",
-    "eslint": "^7.32.0",
+    "less": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "less-loader": "^10.2.0",
-    "javascript-obfuscator": "^4.0.0",
+    "mockjs": "^1.1.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 dead",
-  ]
+    "not ie 11"
+  ],
+  "engines": {
+    "node": ">= 12.0.0",
+    "npm": ">= 6.9.0"
+  }
 }

public/index.html

@@ -18,26 +18,27 @@
   <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>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
   <style>
     body {
       background-color: #dddddd
     }
   </style>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"
+  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"
-    type="text/javascript"></script>
+    type="text/javascript"></script> -->
-  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js"
+  <!-- <script src="
-    type="text/javascript"></script>
+    https://cdn.jsdelivr.net/npm/vue-router@4.1.6/dist/vue-router.global.min.js
+    "></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"
+  <!-- <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"
-    type="text/javascript"></script>
+    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/buffer@6.0.3/index.min.js"
     type="text/javascript"></script> -->
-  <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"
+  <!-- <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"
-    type="text/javascript"></script>
+    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"
@@ -46,15 +47,23 @@
     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.min.js"
+  <!-- <script src="https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.min.js"
-    type="text/javascript"></script>
+    type="text/javascript"></script> -->
-  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"
+  <!-- <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"
-    type="text/javascript"></script>
+    type="text/javascript"></script> -->
+
+
+  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+  <% } %>
   <script>
     window.wasm_flate_bg_path = "https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate_bg.wasm"
   </script>
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/view-design@4.7.0/dist/styles/iview.css">
+  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+    <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+  <% } %>
+
           <!--Global site tag(gtag.js)-Google Analytics-->
           <!--
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-FPS9PD2DFF"></script>
@@ -71,8 +80,6 @@
     if (!!window.ActiveXObject || "ActiveXObject" in window) {
       document.querySelector('#noie').style.display = 'block';
     }
-
-
   </script>
 </body>
 

src/api/note.js

@@ -73,10 +73,7 @@ export function saveNote(noteForm, secret) {
 }
 
 export function deleteNote(key) {
-  let storeKey = getStoreKey(key);
-  let storeInfo = storage.local.getText(storeKey);
   let note = {
-    cipher: storeInfo.substring(2, 34),
     key: key,
   };
 

src/i18n/index.js

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

src/main.js

@@ -1,25 +1,29 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
+import ViewUIPlus from 'view-ui-plus'
 import App from './App.vue'
 import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
-import './plugins/iview.js'
 import i18n from './i18n/'
-import NoteConstant from "@/libs/constants";
+import 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;
 
-new Vue({
+const app = createApp(App)
-    i18n,
-    router,
-    render: h => h(App)
-}).$mount('#app')
 
+app.config.debug = debugFlag;
+app.config.devtools = debugFlag;
+app.config.productionTip = debugFlag;
+
+app.use(router)
+  .use(i18n)
+  .use(VueAxios, axios)
+  .use(ViewUIPlus, {
+    i18n: i18n,
+    transfer: true,
+    size: 'large',
+    capture: false,
+  })
+  .mount('#app')
 

src/plugins/iview.js

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

src/router/index.js

@@ -1,5 +1,4 @@
-import Vue from "vue";
+import { createRouter, createWebHistory } from 'vue-router'
-import VueRouter from "vue-router";
 import EditNote from "@/views/EditNote.vue";
 import ViewNote from "@/views/ViewNote.vue";
 import ErrorRoute from "@/views/ErrorRoute.vue";
@@ -8,8 +7,6 @@ import { getNoteMeta } from "@/api/note";
 import { getStoreKey } from "@/api/lock";
 import storage from "@/libs/storage";
 
-Vue.use(VueRouter);
-
 var keyMeta = null;
 var noteMeta = null;
 var errorMeta = null;
@@ -119,9 +116,11 @@ const routes = [
   { path: "/:path(.*)", component: ErrorRoute }
 ];
 
-const router = new VueRouter({
+const router = createRouter({
-  routes,
+  history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
+  linkExactActiveClass: "active",
   mode: "history",
-});
+  routes
+})
 
 export default router;

src/views/EditNote.vue

@@ -217,6 +217,7 @@ export default {
         lock: 0,
         locking: 0,
         commited: 0,
+        deleted: 0,
         serverTime: '',
         initTime: '',
       },
@@ -518,6 +519,7 @@ 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();
@@ -602,7 +604,9 @@ export default {
       });
     },
     beforeunloadHandler() {
+      if(this.state.deleted==0){
         setStoreText(this.noteForm, this.state, this.secret);
+      }
     },
   }
 }

src/views/ErrorNote.vue

@@ -135,19 +135,6 @@ export default {
 
     //this.bindCopyTextEvent();
 
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width +2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-    myObserver.observe(someOtherEl);
 
 
   },

src/views/ViewNote.vue

@@ -341,7 +341,7 @@ 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";
+import QRCode from "qrcodejs2-fixes";
 import Clipboard from "clipboard";
 import { saveAs } from 'file-saver';
 import { isWeixin, getNoteUrl } from "@/libs/utils";

vue.config.js

@@ -1,33 +1,70 @@
-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')
 
-module.exports = defineConfig({
+const { NODE_ENV, VUE_APP_TITLE = '' } = process.env
+
+const assetsCDN = {
+  // 忽略打包的第三方库
+  externals: {
+    'vue': 'Vue',
+    'vue-router': 'VueRouter',
+    "crypto-js": "CryptoJS",
+    'pako': 'pako',
+    "html2canvas": "html2canvas",
+    'view-ui-plus':'ViewUIPlus',
+  },
+
+  // 通过cdn方式使用
+  js: [
+    'https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js',
+    'https://cdn.jsdelivr.net/npm/vue-router@4.1.6/dist/vue-router.global.min.js',
+    'https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js',
+    'https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js',
+    'https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.10/dist/viewuiplus.min.js',
+    
+    'https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.min.js',
+    'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js',
+  ],
+
+  css: [
+    'https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.10/dist/styles/viewuiplus.min.css',
+  ]
+}
+
+
+const config = {
 
   assetsDir: 'static',
-  productionSourceMap: false,
+  productionSourceMap: NODE_ENV !== 'production',
 
   configureWebpack: (config) => {
     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'
+    //   ]
+    // }
 
-    config.externals = {
-      'vue': 'Vue',
-      'vue-router': 'VueRouter',
-      // 'axios': 'axios',
-      //'vue-axios':'VueAxios',
-      //'buffer': 'Buffer',
-      "crypto-js": "CryptoJS",
-      // 'qrcodejs2': 'QRCode',
-      'pako': 'pako',
-      "view-design": 'iview',
-      "iview": 'ViewUI',
-      //"file-saver": 'saveAs',
-      // "clipboard": "ClipboardJS",
-      // "vue-i18n": "VueI18n",
-      "html2canvas": "html2canvas",
-      "wasm_flate": "wasm_flate"
-    };
 
     // 为生产环境修改配置
     if (process.env.NODE_ENV === 'production') {
@@ -58,26 +95,41 @@ module.exports = defineConfig({
       )
     }
   },
-  transpileDependencies: true,
+
-  chainWebpack: (config) => {
+  transpileDependencies: false,
-    config.plugin("html").tap((args) => {
+
-      args[0].title = "flagnote.com";
+
+  chainWebpack: (setting) => {
+    setting.plugin("html").tap((args) => {
+      args[0].cdn = assetsCDN
+      args[0].title = VUE_APP_TITLE;
       return args;
     });
+
+
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          javascriptEnabled: true,
+        }
+      }
+    }
   },
   devServer: {
     proxy: {
       "/note": {
-        //target: "https://flagnote.com/", // 后台接口域名
+        target: "https://flagnote.com/", // 后台接口域名
-        target: "http://localhost:20000/", // 后台接口域名
+        //target: "http://localhost:20000/", // 后台接口域名
         secure: false, // 如果是https接口，需要配置这个参数
         changeOrigin: true, //是否跨域
         pathRewrite: {
           // '^/': '/'
         },
       }, "^/[abcdefhikmnopqstuvwxyz23456789]{16}\\.txt$": {
-        //target: "https://flagnote.com/", // 后台接口域名
+        target: "https://flagnote.com/", // 后台接口域名
-        target: "http://localhost:20000/", // 后台接口域名
+        //target: "http://localhost:20000/", // 后台接口域名
         secure: false, // 如果是https接口，需要配置这个参数
         changeOrigin: true, //是否跨域
         pathRewrite: {
@@ -85,5 +137,7 @@ module.exports = defineConfig({
         },
       },
     },
-  },
+  }
-});
+}
+
+module.exports = defineConfig(config)