简单整合 eruda 和 el-config-provider

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.2",
     "element-plus": "^2.5.5",
+    "eruda": "^3.0.1",
     "pinia": "^2.0.21",
     "vue": "^3.2.38",
     "vue-i18n": "^9.2.2",

frontend/package.json.md5

@@ -1 +1 @@
-17691e1d827cc40ab9ca3fff6eb7aa05
+7dc8355d48f99175c4067c253750bda0

frontend/src/App.vue

@@ -1,9 +1,35 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+import {useI18n} from "vue-i18n";
 import {WindowMinimise} from "../wailsjs/runtime";
 import {ForceClose} from "../wailsjs/go/core/App";
+import {useGlobalConfig} from "@/stores/globalConfig";
+import {watch,onBeforeUnmount } from "vue";
+import {useMagicKeys, whenever} from "@vueuse/core";
+import {destroyDebugger, switchDebugger} from "@/utils/debugger/eruda";
 
-const { t, availableLocales: languages, locale } = useI18n();
+const {t, availableLocales: languages, locale} = useI18n();
+let globalConfig = useGlobalConfig();
+const elementUIConfig = globalConfig.ui
+
+watch(locale,(value)=>{
+    if(elementUIConfig.supportLocale[value]){
+        elementUIConfig.locale = elementUIConfig.supportLocale[value]
+    } else {
+        elementUIConfig.locale = elementUIConfig.supportLocale["zh-Hans"]
+    }
+}, {
+    immediate: true
+})
+
+
+const {ctrl_alt_shift_x} = useMagicKeys()
+whenever(ctrl_alt_shift_x,()=>{
+    switchDebugger()
+})
+
+onBeforeUnmount(()=>{
+    destroyDebugger()
+})
 
 const onclickLanguageHandle = (item: string) => {
     item !== locale.value ? (locale.value = item) : false;
@@ -51,9 +77,25 @@ document.body.addEventListener("click", function (event) {
             </div>
         </div>
     </div>
-  <!-- Page -->
-  <div class="view">
-    <router-view />
+
+    <div class="mx-1">
+        <el-config-provider v-bind="elementUIConfig">
+            <el-select></el-select>
+            <router-view v-slot="{ Component, route  }">
+                <component v-if="!route.children" :is="Component"/>
+                <transition v-else name="fade" mode="out-in">
+                    <div style="height: 100vh" class="overflow-auto">
+                        <component
+                            v-if="route.meta.keepAlive != null && (route.meta.groups ? true: route.meta.keepAlive === false)"
+                            :is="Component"
+                            :key="route.meta.groups ? route.meta.groups : route.path"/>
+                        <keep-alive v-else>
+                            <component :is="Component" :key="route.meta.groups ? route.meta.groups : route.path"/>
+                        </keep-alive>
+                    </div>
+                </transition>
+            </router-view>
+        </el-config-provider>
     </div>
 </template>
 
@@ -65,6 +107,7 @@ html {
     width: 100%;
     height: 100%;
 }
+
 body {
     width: 100%;
     height: 100%;
@@ -82,6 +125,7 @@ body {
     background-color: rgba(219, 188, 239, 0.9);
     overflow: hidden;
 }
+
 .header {
     display: flex;
     flex-direction: row;
@@ -91,6 +135,7 @@ body {
     height: 50px;
     padding: 0 10px;
     background-color: rgba(171, 126, 220, 0.9);
+
     .nav {
         a {
             display: inline-block;
@@ -106,6 +151,7 @@ body {
             color: #000000;
             font-size: 14px;
             white-space: nowrap;
+
             &:hover,
             &.router-link-exact-active {
                 background-color: #d7a8d8;
@@ -113,17 +159,20 @@ body {
             }
         }
     }
+
     .menu {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: center;
         justify-content: space-between;
+
         .language {
             margin-right: 20px;
             border-radius: 2px;
             background-color: #c3c3c3;
             overflow: hidden;
+
             .lang-item {
                 display: inline-block;
                 min-width: 50px;
@@ -135,10 +184,12 @@ body {
                 text-decoration: none;
                 color: #000000;
                 font-size: 14px;
+
                 &:hover {
                     background-color: #ff050542;
                     cursor: pointer;
                 }
+
                 &.active {
                     background-color: #ff050542;
                     color: #ffffff;
@@ -146,6 +197,7 @@ body {
                 }
             }
         }
+
         .bar {
             display: flex;
             flex-direction: row;
@@ -153,6 +205,7 @@ body {
             align-items: center;
             justify-content: flex-end;
             min-width: 150px;
+
             .bar-btn {
                 display: inline-block;
                 min-width: 80px;
@@ -166,6 +219,7 @@ body {
                 text-decoration: none;
                 color: #000000;
                 font-size: 14px;
+
                 &:hover {
                     background-color: #d7a8d8;
                     color: #ffffff;

frontend/src/main.ts

@@ -13,8 +13,8 @@ import "./style.scss";
 
 const app = createApp(App);
 
-app.use(ElementPlus);
 app.use(createPinia());
+app.use(ElementPlus);
 app.use(router);
 app.use(i18n);
 

frontend/src/stores/globalConfig.ts

@@ -0,0 +1,15 @@
+import {defineStore} from "pinia";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import en from "element-plus/dist/locale/en.mjs";
+
+export const useGlobalConfig = defineStore("globalConfig",{
+    state:()=>({
+        ui: {
+            locale: zhCn,
+            supportLocale: {
+                "zh-Hans": zhCn,
+                en
+            }
+        }
+    })
+})

frontend/src/utils/debugger/eruda.js

@@ -0,0 +1,52 @@
+import eruda from 'eruda'
+let isCreated = false
+export function switchDebugger(){
+    if(!isCreated){
+        createDebugger()
+    } else {
+        hideDebugger()
+        destroyDebugger()
+    }
+}
+export function showDebugger(){
+    if(!isCreated){
+        return
+    }
+
+    eruda.show()
+}
+
+export function hideDebugger(){
+    if(!isCreated){
+        return
+    }
+
+    eruda.hide()
+}
+
+export function createDebugger(){
+    if(!isCreated){
+        isCreated = true
+        eruda.init({
+            useShadowDom: true,
+            autoScale: true,
+
+            defaults: {
+                displaySize: 50,
+                transparency: 1,
+                theme: 'Atom One Light'
+            }
+        })
+    } else {
+        eruda.show()
+    }
+}
+
+export function destroyDebugger(){
+    if(!isCreated){
+        return
+    }
+
+    eruda.destroy()
+    isCreated = false
+}

frontend/yarn.lock

@@ -1134,6 +1134,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+eruda@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/eruda/-/eruda-3.0.1.tgz#6c07ae2b3ced54151c6e9b21f9b8da11e6ec988a"
+  integrity sha512-6q1Xdwga4JTr1mKSW4mzuWSSbmXgqpm/8Wa1QGFGfCWRjC0bCQjbS4u06M1te1moucIS3hBLlbSTPWYH2W0qbQ==
+
 es-abstract@^1.22.1, es-abstract@^1.22.3:
   version "1.22.4"
   resolved "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.22.4.tgz#26eb2e7538c3271141f5754d31aabfdb215f27bf"