perf: replace crypto-es with crypto-js

CHANGELOG.zh_CN.md

@@ -9,6 +9,7 @@
 - 登录界面动画优化
 - 修复 github 仓库体积过大问题.
 - 默认隐藏表格全屏按钮
+- `crypto-es`改为`crypto-js`，减小打包体积
 
 ### 🐛 Bug Fixes
 

build/vite/plugin/visualizer.ts

@@ -9,6 +9,10 @@ export function configVisualizerConfig() {
     return visualizer({
       filename: './node_modules/.cache/visualizer/stats.html',
       open: true,
+      // @ts-ignore
+      gzipSize: true,
+      // @ts-ignore
+      brotliSize: true,
     }) as Plugin;
   }
   return [];

package.json

@@ -31,7 +31,7 @@
     "ant-design-vue": "2.0.0",
     "apexcharts": "^3.25.0",
     "axios": "^0.21.1",
-    "crypto-es": "^1.2.7",
+    "crypto-js": "^4.0.0",
     "echarts": "^5.0.2",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
@@ -49,11 +49,12 @@
     "xlsx": "^0.16.9"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.0.0",
-    "@commitlint/config-conventional": "^12.0.0",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
     "@iconify/json": "^1.1.308",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.7.0",
+    "@types/crypto-js": "^4.0.1",
     "@types/fs-extra": "^9.0.7",
     "@types/http-proxy": "^1.17.5",
     "@types/lodash-es": "^4.17.4",
@@ -102,7 +103,7 @@
     "vite-plugin-imagemin": "^0.2.8",
     "vite-plugin-mock": "^2.1.5",
     "vite-plugin-purge-icons": "^0.7.0",
-    "vite-plugin-pwa": "^0.5.3",
+    "vite-plugin-pwa": "^0.5.4",
     "vite-plugin-style-import": "^0.7.5",
     "vite-plugin-theme": "^0.4.8",
     "vite-plugin-windicss": "0.5.0",

src/components/Scrollbar/src/index.vue

@@ -29,6 +29,7 @@
     nextTick,
     provide,
     computed,
+    unref,
   } from 'vue';
   import Bar from './bar';
 
@@ -73,18 +74,25 @@
 
       provide('scroll-bar-wrap', wrap);
 
+      const style = computed(() => {
+        if (Array.isArray(props.wrapStyle)) {
+          return toObject(props.wrapStyle);
+        }
+        return props.wrapStyle;
+      });
+
       const handleScroll = () => {
         if (!props.native) {
-          moveY.value = (wrap.value.scrollTop * 100) / wrap.value.clientHeight;
-          moveX.value = (wrap.value.scrollLeft * 100) / wrap.value.clientWidth;
+          moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight;
+          moveX.value = (unref(wrap).scrollLeft * 100) / unref(wrap).clientWidth;
         }
       };
 
       const update = () => {
-        if (!wrap.value) return;
+        if (!unref(wrap)) return;
 
-        const heightPercentage = (wrap.value.clientHeight * 100) / wrap.value.scrollHeight;
-        const widthPercentage = (wrap.value.clientWidth * 100) / wrap.value.scrollWidth;
+        const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
+        const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
 
         sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
         sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
@@ -94,25 +102,21 @@
         if (props.native) return;
         nextTick(update);
         if (!props.noresize) {
-          addResizeListener(resize.value, update);
-          addResizeListener(wrap.value, update);
+          addResizeListener(unref(resize), update);
+          addResizeListener(unref(wrap), update);
+          addEventListener('resize', update);
         }
       });
 
       onBeforeUnmount(() => {
         if (props.native) return;
         if (!props.noresize) {
-          removeResizeListener(resize.value, update);
-          removeResizeListener(wrap.value, update);
+          removeResizeListener(unref(resize), update);
+          removeResizeListener(unref(wrap), update);
+          removeEventListener('resize', update);
         }
       });
-      const style = computed(() => {
-        let style: any = props.wrapStyle;
-        if (Array.isArray(props.wrapStyle)) {
-          style = toObject(props.wrapStyle);
-        }
-        return style;
-      });
+
       return {
         moveX,
         moveY,

src/design/public.less

@@ -6,19 +6,26 @@
 // =================================
 // ==============scrollbar==========
 // =================================
+
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 10px;
 }
 
+// ::-webkit-scrollbar-track {
+//   background: transparent;
+// }
+
 ::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.05);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.6);
+  background-color: rgba(144, 147, 153, 0.3);
+  // background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 2px;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/router/routes/index.ts

@@ -36,5 +36,5 @@ export const LoginRoute: AppRouteRecordRaw = {
   },
 };
 
-// 基础路由 不用权限
+// Basic routing without permission
 export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE];

src/utils/encryption/aesEncryption.ts → src/utils/cache/aesEncryption.ts

-import CryptoES from 'crypto-es';
+import type { lib } from 'crypto-js';
+
+import { encrypt, decrypt } from 'crypto-js/aes';
+import Uft8, { parse } from 'crypto-js/enc-utf8';
+import pkcs7 from 'crypto-js/pad-pkcs7';
 
 export interface EncryptionParams {
   key: string;
@@ -6,30 +10,29 @@ export interface EncryptionParams {
 }
 
 export class Encryption {
-  private key;
-
-  private iv;
+  private key: lib.WordArray;
+  private iv: lib.WordArray;
 
   constructor(opt: EncryptionParams) {
     const { key, iv } = opt;
-    this.key = CryptoES.enc.Utf8.parse(key);
-    this.iv = CryptoES.enc.Utf8.parse(iv);
+    this.key = parse(key);
+    this.iv = parse(iv);
   }
 
-  get getOptions(): CryptoES.lib.CipherCfg {
+  get getOptions() {
     return {
-      mode: CryptoES.mode.CBC,
-      padding: CryptoES.pad.Pkcs7,
+      // mode: mode.CBC,
+      padding: pkcs7,
       iv: this.iv,
     };
   }
 
   encryptByAES(str: string) {
-    return CryptoES.AES.encrypt(str, this.key, this.getOptions).toString();
+    return encrypt(str, this.key, this.getOptions).toString();
   }
 
   decryptByAES(str: string) {
-    return CryptoES.AES.decrypt(str, this.key, this.getOptions).toString(CryptoES.enc.Utf8);
+    return decrypt(str, this.key, this.getOptions).toString(Uft8);
   }
 }
 export default Encryption;

src/utils/cache/index.ts

-import { getStorageShortName } from '/@/utils/helper/envHelper';
+import { getStorageShortName } from '/@/utils/env';
 import { createStorage as create } from './storageCache';
 import { enableStorageEncryption } from '/@/settings/encryptionSetting';
+import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
 
 const createOptions = (storage = sessionStorage) => {
   return {
@@ -8,6 +9,7 @@ const createOptions = (storage = sessionStorage) => {
     hasEncrypt: enableStorageEncryption,
     storage,
     prefixKey: getStorageShortName(),
+    timeout: DEFAULT_CACHE_TIME,
   };
 };
 

src/utils/cache/storageCache.ts

-import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
 import { cacheCipher } from '/@/settings/encryptionSetting';
-import Encryption, { EncryptionParams } from '/@/utils/encryption/aesEncryption';
+
+import Encryption, { EncryptionParams } from './aesEncryption';
 
 export interface CreateStorageParams extends EncryptionParams {
+  prefixKey: string;
   storage: Storage;
-
   hasEncrypt: boolean;
+  timeout?: Nullable<number>;
 }
 export const createStorage = ({
   prefixKey = '',
   storage = sessionStorage,
   key = cacheCipher.key,
   iv = cacheCipher.iv,
+  timeout = null,
   hasEncrypt = true,
-} = {}) => {
+}: Partial<CreateStorageParams> = {}) => {
   if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) {
     throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
   }
@@ -54,7 +56,7 @@ export const createStorage = ({
      * @expire Expiration time in seconds
      * @memberof Cache
      */
-    set(key: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+    set(key: string, value: any, expire: number | null = timeout) {
       const stringData = JSON.stringify({
         value,
         expire: expire !== null ? new Date().getTime() + expire * 1000 : null,

src/utils/helper/envHelper.ts

-import { getEnv } from '/@/utils/env';
-import { useGlobSetting } from '/@/hooks/setting';
-import pkg from '../../../package.json';
-const globSetting = useGlobSetting();
-
-// Generate cache key according to version
-export function getStorageShortName() {
-  return `${globSetting.shortName}__${getEnv()}${`__${pkg.version}`}__`.toUpperCase();
-}

src/views/demo/main-out/index.vue

 <template>
-  <div class="test"> 位于主框架外的页面 </div>
+  <div class="fixed h-full w-full flex flex-col justify-center items-center text-4xl">
+    <div class=""> 位于主框架外的页面 </div>
+    <a-button @click="$router.go(-1)" class="mt-10" type="primary">Back</a-button>
+  </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({});
-</script>
-
-<style scoped>
-  .test {
-    position: fixed;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    font-size: 50px;
-  }
-</style>

yarn.lock

@@ -1298,6 +1298,11 @@
     ejs "^2.6.1"
     magic-string "^0.25.0"
 
+"@types/crypto-js@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.0.1.tgz#3a4bd24518b0e6c5940da4e2659eeb2ef0806963"
+  integrity sha512-6+OPzqhKX/cx5xh+yO8Cqg3u3alrkhoxhE5ZOdSEv0DOzJ13lwJ6laqGU0Kv6+XDMFmlnGId04LtY22PsFLQUw==
+
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -3025,10 +3030,10 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-crypto-es@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.npmjs.org/crypto-es/-/crypto-es-1.2.7.tgz#754a6d52319a94fb4eb1f119297f17196b360f88"
-  integrity sha512-UUqiVJ2gUuZFmbFsKmud3uuLcNP2+Opt+5ysmljycFCyhA0+T16XJmo1ev/t5kMChMqWh7IEvURNCqsg+SjZGQ==
+crypto-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
+  integrity sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg==
 
 crypto-random-string@^2.0.0:
   version "2.0.0"
@@ -8930,10 +8935,10 @@ vite-plugin-purge-icons@^0.7.0:
     "@purge-icons/generated" "^0.7.0"
     rollup-plugin-purge-icons "^0.7.0"
 
-vite-plugin-pwa@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.5.3.tgz#60d97d62335846144c8e6b6a911704d6c0f75171"
-  integrity sha512-xGh0gIgzczvYNj8ED5HhpJ2iT5kMiieim2qI8kT/3+rfo83hTyuzhEICkljIbhausvOaGxtzLKWE8RS6cUg0Fw==
+vite-plugin-pwa@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.5.4.tgz#ce6fb85da140359057290e5eba3c22548392bea5"
+  integrity sha512-Zcr190GixdvvHBS1poTevtuw0irRvRi9rLFdXUbkPyY5hozQ+JhR8i/ORRvl6a9wV6Gl/mVwJ3IaY5IjTf3zFw==
   dependencies:
     debug "^4.3.2"
     fast-glob "^3.2.5"