简单整合 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,12 +1,38 @@
 <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;
+    item !== locale.value ? (locale.value = item) : false;
 };
 
 const onclickMinimise = () => {
@@ -18,43 +44,59 @@ const onclickQuit = () => {
 };
 
 document.body.addEventListener("click", function (event) {
-  event.preventDefault();
+    event.preventDefault();
 });
 </script>
 
 <template>
-  <!-- Header -->
+    <!-- Header -->
-  <div class="header">
+    <div class="header">
-    <!-- navigation -->
+        <!-- navigation -->
-    <div class="nav">
+        <div class="nav">
-      <router-link to="/">{{ t("nav.home") }}</router-link>
+            <router-link to="/">{{ t("nav.home") }}</router-link>
-      <router-link to="/about">{{ t("nav.about") }}</router-link>
+            <router-link to="/about">{{ t("nav.about") }}</router-link>
-    </div>
-    <!-- Menu -->
-    <div class="menu">
-      <div class="language">
-        <div
-          v-for="item in languages"
-          :key="item"
-          :class="{ active: item === locale }"
-          @click="onclickLanguageHandle(item)"
-          class="lang-item"
-        >
-          {{ t("languages." + item) }}
         </div>
-      </div>
+        <!-- Menu -->
-      <div class="bar">
+        <div class="menu">
-        <div class="bar-btn" @click="onclickMinimise">
+            <div class="language">
-          {{ t("topbar.minimise") }}
+                <div
+                    v-for="item in languages"
+                    :key="item"
+                    :class="{ active: item === locale }"
+                    @click="onclickLanguageHandle(item)"
+                    class="lang-item"
+                >
+                    {{ t("languages." + item) }}
+                </div>
+            </div>
+            <div class="bar">
+                <div class="bar-btn" @click="onclickMinimise">
+                    {{ t("topbar.minimise") }}
+                </div>
+                <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
+            </div>
         </div>
-        <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
-      </div>
     </div>
-  </div>
+
-  <!-- Page -->
+    <div class="mx-1">
-  <div class="view">
+        <el-config-provider v-bind="elementUIConfig">
-    <router-view />
+            <el-select></el-select>
-  </div>
+            <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>
 
 <style lang="scss">
@@ -62,126 +104,138 @@ document.body.addEventListener("click", function (event) {
 @import url("./assets/css/font.css");
 
 html {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
 }
+
 body {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  font-family: "JetBrainsMono";
+    font-family: "JetBrainsMono";
-  background-color: transparent;
+    background-color: transparent;
 }
 
 #app {
-  position: relative;
+    position: relative;
-  // width: 900px;
+    // width: 900px;
-  // height: 520px;
+    // height: 520px;
-  height: 100%;
+    height: 100%;
-  background-color: rgba(219, 188, 239, 0.9);
+    background-color: rgba(219, 188, 239, 0.9);
-  overflow: hidden;
+    overflow: hidden;
 }
+
 .header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 10px;
-  background-color: rgba(171, 126, 220, 0.9);
-  .nav {
-    a {
-      display: inline-block;
-      min-width: 50px;
-      height: 30px;
-      line-height: 30px;
-      padding: 0 5px;
-      margin-right: 8px;
-      background-color: #ab7edc;
-      border-radius: 2px;
-      text-align: center;
-      text-decoration: none;
-      color: #000000;
-      font-size: 14px;
-      white-space: nowrap;
-      &:hover,
-      &.router-link-exact-active {
-        background-color: #d7a8d8;
-        color: #ffffff;
-      }
-    }
-  }
-  .menu {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
     justify-content: space-between;
-    .language {
+    height: 50px;
-      margin-right: 20px;
+    padding: 0 10px;
-      border-radius: 2px;
+    background-color: rgba(171, 126, 220, 0.9);
-      background-color: #c3c3c3;
+
-      overflow: hidden;
+    .nav {
-      .lang-item {
+        a {
-        display: inline-block;
+            display: inline-block;
-        min-width: 50px;
+            min-width: 50px;
-        height: 30px;
+            height: 30px;
-        line-height: 30px;
+            line-height: 30px;
-        padding: 0 5px;
+            padding: 0 5px;
-        background-color: transparent;
+            margin-right: 8px;
-        text-align: center;
+            background-color: #ab7edc;
-        text-decoration: none;
+            border-radius: 2px;
-        color: #000000;
+            text-align: center;
-        font-size: 14px;
+            text-decoration: none;
-        &:hover {
+            color: #000000;
-          background-color: #ff050542;
+            font-size: 14px;
-          cursor: pointer;
+            white-space: nowrap;
+
+            &:hover,
+            &.router-link-exact-active {
+                background-color: #d7a8d8;
+                color: #ffffff;
+            }
         }
-        &.active {
-          background-color: #ff050542;
-          color: #ffffff;
-          cursor: not-allowed;
-        }
-      }
     }
-    .bar {
+
-      display: flex;
+    .menu {
-      flex-direction: row;
+        display: flex;
-      flex-wrap: nowrap;
+        flex-direction: row;
-      align-items: center;
+        flex-wrap: nowrap;
-      justify-content: flex-end;
+        align-items: center;
-      min-width: 150px;
+        justify-content: space-between;
-      .bar-btn {
+
-        display: inline-block;
+        .language {
-        min-width: 80px;
+            margin-right: 20px;
-        height: 30px;
+            border-radius: 2px;
-        line-height: 30px;
+            background-color: #c3c3c3;
-        padding: 0 5px;
+            overflow: hidden;
-        margin-left: 8px;
+
-        background-color: #ab7edc;
+            .lang-item {
-        border-radius: 2px;
+                display: inline-block;
-        text-align: center;
+                min-width: 50px;
-        text-decoration: none;
+                height: 30px;
-        color: #000000;
+                line-height: 30px;
-        font-size: 14px;
+                padding: 0 5px;
-        &:hover {
+                background-color: transparent;
-          background-color: #d7a8d8;
+                text-align: center;
-          color: #ffffff;
+                text-decoration: none;
-          cursor: pointer;
+                color: #000000;
+                font-size: 14px;
+
+                &:hover {
+                    background-color: #ff050542;
+                    cursor: pointer;
+                }
+
+                &.active {
+                    background-color: #ff050542;
+                    color: #ffffff;
+                    cursor: not-allowed;
+                }
+            }
+        }
+
+        .bar {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: flex-end;
+            min-width: 150px;
+
+            .bar-btn {
+                display: inline-block;
+                min-width: 80px;
+                height: 30px;
+                line-height: 30px;
+                padding: 0 5px;
+                margin-left: 8px;
+                background-color: #ab7edc;
+                border-radius: 2px;
+                text-align: center;
+                text-decoration: none;
+                color: #000000;
+                font-size: 14px;
+
+                &:hover {
+                    background-color: #d7a8d8;
+                    color: #ffffff;
+                    cursor: pointer;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .view {
-  position: absolute;
+    position: absolute;
-  top: 50px;
+    top: 50px;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  bottom: 0;
+    bottom: 0;
-  overflow: hidden;
+    overflow: hidden;
 }
 </style>

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"