perf: theme

babel.config.js

@@ -1,6 +0,0 @@
-const productPlugins = [];
-process.env.NODE_ENV === "production" &&
-  productPlugins.push("transform-remove-console");
-module.exports = {
-  plugins: [...productPlugins]
-};

index.html

@@ -27,94 +27,78 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          background: #000;
           overflow: hidden;
           font-family: "Reggae One", cursive;
         }
 
-        p {
+        .loader,
-          font-size: 8vw;
+        .loader:before,
-          overflow: hidden;
+        .loader:after {
-          -webkit-text-stroke: 3px #7272a5;
+          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 {
+        .loader {
-          display: block;
+          color: #406eeb;
-          font-size: 20px;
+          font-size: 10px;
-          overflow: hidden;
+          margin: 80px auto;
-          color: green;
+          position: relative;
-          text-align: center;
+          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 {
+        .loader:before,
-          content: " ";
+        .loader:after {
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
-          mix-blend-mode: multiply;
-        }
-
-        p::after {
           content: "";
-          background: radial-gradient(circle, #fff, #000 50%);
-          background-size: 25% 25%;
           position: absolute;
-          top: -100%;
+          top: 0;
-          left: -100%;
-          right: 0;
-          bottom: 0;
-          mix-blend-mode: color-dodge;
-          animation: mix 2s linear infinite;
         }
 
-        @keyframes mix {
+        .loader:before {
-          to {
+          left: -3.5em;
-            transform: translate(50%, 50%);
+          -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">
+      <div class="loader">Loading...</div>
-        <p>Pure-Admin</p>
-        <span class="_develop"></span>
-      </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>

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",

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
+      "@vue/composition-api": ^1.4.0
-      typescript: ^4.4.4
+      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:
       {

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 {

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>
 

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"

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: {