sk-matrix-project/app/wails/frontend/src/views/tabs/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 CPUUsage from "src/components/system/cpu/CPUUsage.vue";
import MemoryUsage from "src/components/system/memory/MemoryUsage.vue";
import CPUUsageChart from "src/components/system/cpu/CPUUsageChart.vue";
import MemoryUsageChart from "src/components/system/memory/MemoryUsageChart.vue";
import NetworkCounter from "src/components/system/network/NetworkCounter.vue";
import NetworkSumRateChart from "src/components/system/network/NetworkSumRateChart.vue"
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,
            }
        )
    })
</script>

<template>

    <el-row>
        <el-col :span="4">
            <CPUUsage/>
        </el-col>
        <el-col :span="4">
            <MemoryUsage>
                <template #footer="{used, total}">
                    <div class="text-sm">{{ used }}/{{ total }}</div>
                </template>
            </MemoryUsage>
        </el-col>
        <el-col :span="4">
            <NetworkCounter></NetworkCounter>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="8">
            <CPUUsageChart style="height: 300px"/>
        </el-col>
        <el-col :span="8">
            <MemoryUsageChart style="height: 300px"/>
        </el-col>
        <el-col :span="8">
            <NetworkSumRateChart style="height: 300px"/>
        </el-col>
    </el-row>


    <el-button class="btn" @click="sendNotify()">通知</el-button>
    <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-button @click="addTab()">添加tab</el-button>
    <el-button @click="router.push('/environment')">环境变量</el-button>
</template>

<style scoped>

</style>