perf: theme

2025-06-04 07:27:41 +08:00 · 2022-01-07 14:45:21 +08:00 · 2022-01-07 14:45:21 +08:00 · 14adf692ab
commit 14adf692ab
parent aa845fc3f5
8 changed files with 108 additions and 102 deletions
--- a/babel.config.js
+++ b/babel.config.js
@ -1,6 +0,0 @@
-const productPlugins = [];
-process.env.NODE_ENV === "production" &&
-  productPlugins.push("transform-remove-console");
-module.exports = {
-  plugins: [...productPlugins]
-};
--- a/index.html
+++ b/index.html
@ -27,94 +27,78 @@
          display: flex;
          justify-content: center;
          align-items: center;
-          background: #000;
          overflow: hidden;
          font-family: "Reggae One", cursive;
        }

-        p {
-          font-size: 8vw;
-          overflow: hidden;
-          -webkit-text-stroke: 3px #7272a5;
+        .loader,
+        .loader:before,
+        .loader:after {
+          border-radius: 50%;
+          width: 2.5em;
+          height: 2.5em;
+          -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+          -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
+          animation: loadAnimation 1.8s infinite ease-in-out;
        }

-        span {
-          display: block;
-          font-size: 20px;
-          overflow: hidden;
-          color: green;
-          text-align: center;
+        .loader {
+          color: #406eeb;
+          font-size: 10px;
+          margin: 80px auto;
+          position: relative;
+          text-indent: -9999em;
+          -webkit-transform: translateZ(0);
+          -ms-transform: translateZ(0);
+          transform: translateZ(0);
+          -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
        }

-        p::before {
-          content: " ";
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
-          mix-blend-mode: multiply;
-        }
-
-        p::after {
+        .loader:before,
+        .loader:after {
          content: "";
-          background: radial-gradient(circle, #fff, #000 50%);
-          background-size: 25% 25%;
          position: absolute;
-          top: -100%;
-          left: -100%;
-          right: 0;
-          bottom: 0;
-          mix-blend-mode: color-dodge;
-          animation: mix 2s linear infinite;
+          top: 0;
        }

-        @keyframes mix {
-          to {
-            transform: translate(50%, 50%);
+        .loader:before {
+          left: -3.5em;
+          -webkit-animation-delay: -0.32s;
+          animation-delay: -0.32s;
+        }
+
+        .loader:after {
+          left: 3.5em;
+        }
+
+        @-webkit-keyframes loadAnimation {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+
+          40% {
+            box-shadow: 0 2.5em 0 0;
+          }
+        }
+
+        @keyframes loadAnimation {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+
+          40% {
+            box-shadow: 0 2.5em 0 0;
          }
        }
      </style>
-      <div class="g-container">
-        <p>Pure-Admin</p>
-        <span class="_develop"></span>
-      </div>
+      <div class="loader">Loading...</div>
    </div>
-    <script>
-      // 此代码仅用于开发环境的友好提示，项目打包前请去掉这段js代码 This code is only used as a friendly reminder of the development environment, please remove this js code before packaging the project
-      window.onload = function () {
-        (function () {
-          const ua = navigator.userAgent.toLowerCase();
-          const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
-          const m = ua.match(re);
-          const Sys = {
-            browser: m[1].replace(/version/, "'safari"),
-            version: m[2]
-          };
-
-          const browser = Array.of("chrome", "firefox").includes(Sys.browser);
-          const version = parseFloat(Sys.version);
-
-          const el = document.querySelector("._develop");
-
-          if (el) {
-            if (browser && version >= 90) {
-              let success =
-                document.createTextNode("当前浏览器版本很适合开发！！！ 😃");
-              el.appendChild(success);
-            } else {
-              let warn = document.createTextNode(
-                "当前浏览器版本不适合开发，建议使用最新版本的谷歌或者火狐浏览器！！！😯"
-              );
-              el.appendChild(warn);
-              el.style.color = "red";
-            }
-          }
-          return Sys;
-        })();
-      };
-    </script>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -54,7 +54,7 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.0-rc.14",
+    "pinia": "^2.0.9",
    "qs": "^6.10.1",
    "remixicon": "^2.5.0",
    "resize-observer-polyfill": "^1.5.1",
@ -91,7 +91,6 @@
    "@vue/eslint-config-typescript": "7.0.0",
    "@zougt/vite-plugin-theme-preprocessor": "^1.4.0",
    "autoprefixer": "10.2.4",
-    "babel-plugin-transform-remove-console": "6.9.4",
    "cross-env": "7.0.3",
    "eslint": "7.30.0",
    "eslint-plugin-prettier": "3.4.0",
@ -112,6 +111,7 @@
    "typescript": "4.4.2",
    "unplugin-element-plus": "^0.1.3",
    "vite": "2.6.14",
+    "vite-plugin-full-reload": "^1.0.0",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-style-import": "^1.2.1",
    "vite-svg-loader": "^2.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,7 +31,6 @@ specifiers:
  animate.css: ^4.1.1
  autoprefixer: 10.2.4
  axios: ^0.21.1
-  babel-plugin-transform-remove-console: 6.9.4
  cropperjs: ^1.5.11
  cross-env: 7.0.3
  css-color-function: ^1.3.3
@ -52,7 +51,7 @@ specifiers:
  mockjs: ^1.1.0
  nprogress: ^0.2.0
  path: ^0.12.7
-  pinia: ^2.0.0-rc.14
+  pinia: ^2.0.9
  postcss: 8.2.6
  postcss-import: 14.0.0
  prettier: 2.3.2
@ -73,6 +72,7 @@ specifiers:
  unplugin-element-plus: ^0.1.3
  v-contextmenu: 3.0.0
  vite: 2.6.14
+  vite-plugin-full-reload: ^1.0.0
  vite-plugin-mock: ^2.9.6
  vite-plugin-style-import: ^1.2.1
  vite-svg-loader: ^2.2.0
@ -115,7 +115,7 @@ dependencies:
  mockjs: 1.1.0
  nprogress: 0.2.0
  path: 0.12.7
-  pinia: 2.0.2_typescript@4.4.2+vue@3.2.24
+  pinia: 2.0.9_typescript@4.4.2+vue@3.2.24
  qs: 6.10.1
  remixicon: 2.5.0
  resize-observer-polyfill: 1.5.1
@ -152,7 +152,6 @@ devDependencies:
  "@vue/eslint-config-typescript": 7.0.0_e03d82996bd4a66fb128f33523d782ea
  "@zougt/vite-plugin-theme-preprocessor": 1.4.0_sass@1.45.0
  autoprefixer: 10.2.4_postcss@8.2.6
-  babel-plugin-transform-remove-console: 6.9.4
  cross-env: 7.0.3
  eslint: 7.30.0
  eslint-plugin-prettier: 3.4.0_eslint@7.30.0+prettier@2.3.2
@ -173,6 +172,7 @@ devDependencies:
  typescript: 4.4.2
  unplugin-element-plus: 0.1.3_vite@2.6.14+vue@3.2.24
  vite: 2.6.14_sass@1.45.0
+  vite-plugin-full-reload: 1.0.0
  vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.6.14
  vite-plugin-style-import: 1.3.0_vite@2.6.14
  vite-svg-loader: 2.2.0
@ -1048,7 +1048,7 @@ packages:
    dependencies:
      "@types/estree": 0.0.39
      estree-walker: 1.0.1
-      picomatch: 2.3.0
+      picomatch: 2.3.1
    dev: true

  /@rollup/pluginutils/4.1.1:
@ -1479,6 +1479,13 @@ packages:
      }
    dev: false

+  /@vue/devtools-api/6.0.0-beta.21.1:
+    resolution:
+      {
+        integrity: sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
+      }
+    dev: false
+
  /@vue/eslint-config-prettier/6.0.0_82e4252401b0cc5be86f7c2133946f49:
    resolution:
      {
@ -1843,7 +1850,7 @@ packages:
    engines: { node: ">= 8" }
    dependencies:
      normalize-path: 3.0.0
-      picomatch: 2.3.0
+      picomatch: 2.3.1
    dev: true

  /arg/4.1.3:
@ -1956,10 +1963,6 @@ packages:
      - debug
    dev: false

-  /babel-plugin-transform-remove-console/6.9.4:
-    resolution: { integrity: sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A= }
-    dev: true
-
  /bail/1.0.5:
    resolution:
      {
@ -5436,19 +5439,27 @@ packages:
    engines: { node: ">=8.6" }
    dev: true

+  /picomatch/2.3.1:
+    resolution:
+      {
+        integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+      }
+    engines: { node: ">=8.6" }
+    dev: true
+
  /pify/2.3.0:
    resolution: { integrity: sha1-7RQaasBDqEnqWISY59yosVMw6Qw= }
    engines: { node: ">=0.10.0" }
    dev: true

-  /pinia/2.0.2_typescript@4.4.2+vue@3.2.24:
+  /pinia/2.0.9_typescript@4.4.2+vue@3.2.24:
    resolution:
      {
-        integrity: sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==
+        integrity: sha512-iuYdxLJKQ07YPyOHYH05wNG9eKWqkP/4y4GE8+RqEYtz5fwHgPA5kr6zQbg/DoEJGnR2XCm1w1vdt6ppzL9ATg==
      }
    peerDependencies:
-      "@vue/composition-api": ^1.3.0
-      typescript: ^4.4.4
+      "@vue/composition-api": ^1.4.0
+      typescript: ">=4.4.4"
      vue: ^2.6.14 || ^3.2.0
    peerDependenciesMeta:
      "@vue/composition-api":
@ -5456,7 +5467,7 @@ packages:
      typescript:
        optional: true
    dependencies:
-      "@vue/devtools-api": 6.0.0-beta.20
+      "@vue/devtools-api": 6.0.0-beta.21.1
      typescript: 4.4.2
      vue: 3.2.24
      vue-demi: 0.12.1_vue@3.2.24
@ -6183,7 +6194,7 @@ packages:
      }
    engines: { node: ">=8.10.0" }
    dependencies:
-      picomatch: 2.3.0
+      picomatch: 2.3.1
    dev: true

  /redent/3.0.0:
@ -7408,6 +7419,16 @@ packages:
      vfile-message: 2.0.4
    dev: true

+  /vite-plugin-full-reload/1.0.0:
+    resolution:
+      {
+        integrity: sha512-GUhQ4wSm+H6yAlz7d2JwLu+BEcsFqZu1SUH0CNG+uyP4ALXGofUjHi+eGdLX19bYhMuOUWW3EwMt68jFkBsMew==
+      }
+    dependencies:
+      picocolors: 1.0.0
+      picomatch: 2.3.1
+    dev: true
+
  /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.6.14:
    resolution:
      {
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@ -14,6 +14,7 @@ import { unref, watch, getCurrentInstance } from "vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import screenfull from "../components/screenfull/index.vue";
 import globalization from "/@/assets/svg/globalization.svg";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";

 const instance =
  getCurrentInstance().appContext.config.globalProperties.$storage;
@ -26,7 +27,7 @@ const { locale } = useI18n();
 const getDropdownItemStyle = computed(() => {
  return t => {
    return {
-      background: locale.value === t ? "#1b2a47" : "",
+      background: locale.value === t ? useEpThemeStoreHook().epThemeColor : "",
      color: locale.value === t ? "#f4f4f5" : "#000"
    };
  };
@ -149,10 +150,6 @@ function translationEn() {
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
  }

  .vertical-header-right {
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@ -444,7 +444,7 @@ nextTick(() => {

 <style scoped module>
 .isSelect {
-  border: 2px solid #0960bd;
+  border: 2px solid var(--el-color-primary);
 }
 </style>

--- a/src/layout/components/sidebar/hamBurger.vue
+++ b/src/layout/components/sidebar/hamBurger.vue
@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 export interface Props {
  isActive: boolean;
 }
@ -7,6 +9,8 @@ const props = withDefaults(defineProps<Props>(), {
  isActive: false
 });

+const fillColor = ref<string>("");
+
 const emit = defineEmits<{
  (e: "toggleClick"): void;
 }>();
@ -21,8 +25,11 @@ const toggleClick = () => {
    :class="classes.container"
    :title="props.isActive ? '点击折叠' : '点击展开'"
    @click="toggleClick"
+    @mouseenter="fillColor = useEpThemeStoreHook().epThemeColor"
+    @mouseleave="fillColor = ''"
  >
    <svg
+      :fill="fillColor"
      :class="['hamburger', props.isActive ? 'is-active' : '']"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
--- a/vite.config.ts
+++ b/vite.config.ts
@ -4,6 +4,7 @@ import svgLoader from "vite-svg-loader";
 import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import { warpperEnv, regExps } from "./build";
+import fullReload from "vite-plugin-full-reload";
 import { viteMockServe } from "vite-plugin-mock";
 import styleImport from "vite-plugin-style-import";
 import ElementPlus from "unplugin-element-plus/vite";
@ -82,6 +83,8 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
      vue(),
      // jsx、tsx语法支持
      vueJsx(),
+      // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
+      fullReload(["src/layout/**/*"]),
      // 自定义主题
      themePreprocessorPlugin({
        scss: {