调整

app/wails/frontend/src/App.vue

@@ -3,7 +3,7 @@
         <el-config-provider v-bind="globalConfig">
             <router-view v-slot="{ Component, route  }">
                 <transition name="fade" mode="out-in">
-                    <div>
+                    <div style="height: 100vh">
                         <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
                                    :key="route.path"/>
                         <keep-alive v-else>
@@ -18,14 +18,15 @@
 
 <script setup>
 import {computed, onBeforeUnmount, onMounted} from "vue";
-import {createDebugger, destroyDebugger} from "src/utils/debugger/eruda";
+import {createDebugger, destroyDebugger, switchDebugger} from "src/utils/debugger/eruda";
 import {useGlobalConfig} from "src/store/globalConfig";
 import {mapWritableState} from "pinia";
-
+import {useMagicKeys, whenever} from "@vueuse/core";
+const {ctrl_alt_shift_x} = useMagicKeys()
 const globalConfig = computed(mapWritableState(useGlobalConfig,['ui']).ui)
 
-onMounted(()=>{
+whenever(ctrl_alt_shift_x,()=>{
-    createDebugger()
+    switchDebugger()
 })
 
 onBeforeUnmount(()=>{

app/wails/frontend/src/components/scaffold/TabScaffold.vue

@@ -27,12 +27,12 @@ function tabRemove(name){
 </script>
 
 <template>
-    <el-tabs v-model="tab" @tab-change="tabChange" @tab-remove="tabRemove">
+    <el-tabs v-model="tab" @tab-change="tabChange" @tab-remove="tabRemove" style="height:100%">
         <el-tab-pane
             v-for="item in tabs"
             :key="item.name"
             :label="item.title"
-            :closable="item.closable"
+            :closable="item.closable == null || item.closable"
             :name="item.name">
             <router-view v-slot="{ Component, route  }">
                 <transition name="fade" mode="out-in">

app/wails/frontend/src/router/router.js

@@ -7,7 +7,7 @@ import * as  VueRouter from "vue-router"
 const routes = [
     {
         path: '/',
-        component: ()=>import("src/views/home/index.vue"),
+        component: ()=>import("src/views/scaffold/index.vue"),
         meta: {
             title: "首页",
             keepAlive: true,

app/wails/frontend/src/utils/debugger/eruda.js

@@ -1,6 +1,14 @@
 import eruda from 'eruda'
 let isCreated = false
-
+export function switchDebugger(){
+    if(!isCreated){
+        createDebugger()
+        showDebugger()
+    } else {
+        hideDebugger()
+        destroyDebugger()
+    }
+}
 export function showDebugger(){
     if(!isCreated){
         return
@@ -23,6 +31,7 @@ export function createDebugger(){
         eruda.init({
             useShadowDom: true,
             autoScale: true,
+
             defaults: {
                 displaySize: 50,
                 transparency: 1,

app/wails/frontend/src/views/environment/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

app/wails/frontend/src/views/home/Home.vue

@@ -40,6 +40,7 @@ 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'){
@@ -59,7 +60,6 @@ function addTab(){
     globalTabState.addTab({
         name: "/test",
         title: "测试",
-        closable: true,
     })
     globalTabState.tab = "/test"
 }
@@ -73,8 +73,27 @@ Array.from({ length }).map((_, 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)
+    columns: generateColumns(10),
+    data: generateData(generateColumns(10),20)
 })
 
 </script>
@@ -83,7 +102,6 @@ const table = reactive({
     <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>
@@ -94,7 +112,14 @@ const table = reactive({
     </div>
 
     <el-button @click="switchLocale()">切换 locale</el-button>
-    <el-table-v2 mb-1 :data="[]" :columns="table.columns"/>
+    <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>

app/wails/frontend/src/views/scaffold/index.vue

@@ -15,6 +15,11 @@ if(globalTabsState.tabs.find(item => item.name === route.path) == null && route.
 
 if(route.path === "/"){
     router.push("/home")
+    globalTabsState.addTab({
+        name: "/home",
+        title: "首页",
+        closable: false,
+    })
 }
 </script>