简单整合 eruda 和 el-config-provider
This commit is contained in:
parent
a7af27c68f
commit
6d539a3055
@ -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",
|
||||
|
||||
@ -1 +1 @@
|
||||
17691e1d827cc40ab9ca3fff6eb7aa05
|
||||
7dc8355d48f99175c4067c253750bda0
|
||||
@ -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 -->
|
||||
<div class="header">
|
||||
<!-- navigation -->
|
||||
<div class="nav">
|
||||
<router-link to="/">{{ t("nav.home") }}</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) }}
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<!-- navigation -->
|
||||
<div class="nav">
|
||||
<router-link to="/">{{ t("nav.home") }}</router-link>
|
||||
<router-link to="/about">{{ t("nav.about") }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div class="bar-btn" @click="onclickMinimise">
|
||||
{{ t("topbar.minimise") }}
|
||||
<!-- 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>
|
||||
<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="view">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<style lang="scss">
|
||||
@ -62,126 +104,138 @@ document.body.addEventListener("click", function (event) {
|
||||
@import url("./assets/css/font.css");
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "JetBrainsMono";
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "JetBrainsMono";
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
// width: 900px;
|
||||
// height: 520px;
|
||||
height: 100%;
|
||||
background-color: rgba(219, 188, 239, 0.9);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// width: 900px;
|
||||
// height: 520px;
|
||||
height: 100%;
|
||||
background-color: rgba(219, 188, 239, 0.9);
|
||||
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 {
|
||||
margin-right: 20px;
|
||||
border-radius: 2px;
|
||||
background-color: #c3c3c3;
|
||||
overflow: hidden;
|
||||
.lang-item {
|
||||
display: inline-block;
|
||||
min-width: 50px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 5px;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background-color: #ff050542;
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
|
||||
.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;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 5px;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
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;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
15
frontend/src/stores/globalConfig.ts
Normal file
15
frontend/src/stores/globalConfig.ts
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
52
frontend/src/utils/debugger/eruda.js
Normal file
52
frontend/src/utils/debugger/eruda.js
Normal file
@ -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
|
||||
}
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user