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

<script setup>
import {reactive} from "vue";
import {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 sendNotify() {
    const options = {
        title: '通知测试',
        dir: 'auto',
        body: "通知测试",
        lang: 'zh-CN',
        renotify: true,
        tag: 'notify',
    };

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

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'
import {useGlobalTabs} from "src/store/globalTabs";
import {useRouter} from "vue-router";
import {ElAutoResizer} from "element-plus";
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
        })
    }
}

const router = useRouter()
const globalTabState = useGlobalTabs()
function addTab(){
    globalTabState.addTab({
        name: "/test",
        title: "测试",
    })
    globalTabState.tab = "/test"
}

const generateColumns = (length = 10, prefix = 'column-', props) =>
Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
}))

const generateData = (
    columns,
    length = 200,
    prefix = 'row-'
) =>
    Array.from({ length }).map((_, rowIndex) => {
        return columns.reduce(
            (rowData, column, columnIndex) => {
                rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
                return rowData
            },
            {
                id: `${prefix}${rowIndex}`,
                parentId: null,
            }
        )
    })

const table = reactive({
    columns: generateColumns(10),
    data: generateData(generateColumns(10),20)
})

</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="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>
    <div style="height: 50vh">
        <el-auto-resizer>
            <template #default="{ height, width}">
                <el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns" fixed/>
            </template>
        </el-auto-resizer>
    </div>

    <el-pagination :total="100" />

    <el-button @click="addTab()">添加tab</el-button>
</template>

<style scoped>

</style>