sk-matrix-project/app/wails/frontend/src/views/Home.vue

<script setup>
import {Greet} from 'frontend/wailsjs/go/main/App';
import {reactive} from "vue";
import {toReactive, useWebNotification} from '@vueuse/core'
import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
import {hideDebugger, showDebugger} from "src/utils/debugger/eruda";
import {useGlobalConfig} from "src/store/globalConfig";
import {storeToRefs} from "pinia";

const controller = reactive({
    input: ""
})

function greet() {
    let resultElement = document.getElementById("result");

    // Get name
    let name = controller.input

    // Check if the input is empty
    if (name === "") return;

    // Call App.Greet(name)
    try {
        Greet(name)
            .then((result) => {
                // Update result with data back from App.Greet()
                resultElement.innerText = result;
            })
            .catch((err) => {
                console.error(err);
            });
    } catch (err) {
        console.error(err);
    }
}

function sendNotify() {
    Greet(controller.input)
        .then((result) => {
            /**
             *
             * @type {UseWebNotificationOptions}
             */
            const options = {
                title: '通知测试',
                dir: 'auto',
                body: result,
                lang: 'zh-CN',
                renotify: true,
                tag: 'notify',
            };

            const notification = useWebNotification(options);
            setTimeout(()=>{
                notification.close()
            }, 5 * 1000)
            notification.show()
        })
        .catch((err) => {
            console.error(err);
        });
}

function getAllEnv(){
    GetAllEnv().then(allEnv => {
        console.log(allEnv)
    })
}

const globalConfig = useGlobalConfig()
const globalConfigState = storeToRefs(globalConfig)

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
function switchLocale(){
    console.log(globalConfigState.ui.value.locale)
    if(globalConfigState.ui.value.locale.name === 'zh-cn'){
        globalConfig.$patch(state=>{
            state.ui.locale = en
        })
    } else {
        globalConfig.$patch(state=>{
            state.ui.locale = zhCn
        })
    }
}
</script>

<template>
    <div class="result w-full text-center" id="result">Please enter your name below 👇</div>
    <div class="input-box w-full text-center" id="input">
        <el-input v-model="controller.input" type="text" autocomplete="off"></el-input>
        <el-button class="btn" @click="greet()">Greet</el-button>
        <el-button class="btn" @click="sendNotify()">通知</el-button>
    </div>
    <el-button @click="getAllEnv()">获取所有环境变量</el-button>

    <div>
        <el-button @click="showDebugger()">显示 debugger</el-button>
        <el-button @click="hideDebugger()">隐藏 debugger</el-button>
    </div>

    <el-button @click="switchLocale()">切换 locale</el-button>
    <el-table mb-1 :data="[]" />
    <el-pagination :total="100" />
</template>

<style scoped>

</style>