TabScaffold 重构
This commit is contained in:
parent
1778c8a2b9
commit
5fef2f5805
@ -5,9 +5,9 @@
|
||||
<transition name="fade" mode="out-in">
|
||||
<div style="height: 100vh">
|
||||
<component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
|
||||
:key="route.path"/>
|
||||
:key="route.meta.groups ? route.meta.groups : route.path"/>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.path"/>
|
||||
<component :is="Component" :key="route.meta.groups ? route.meta.groups : route.path"/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</transition>
|
||||
@ -17,8 +17,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, onBeforeUnmount, onMounted} from "vue";
|
||||
import {createDebugger, destroyDebugger, switchDebugger} from "src/utils/debugger/eruda";
|
||||
import {computed, onBeforeUnmount} from "vue";
|
||||
import {destroyDebugger, switchDebugger} from "src/utils/debugger/eruda";
|
||||
import {useGlobalConfig} from "src/store/globalConfig";
|
||||
import {mapWritableState} from "pinia";
|
||||
import {useMagicKeys, whenever} from "@vueuse/core";
|
||||
|
||||
@ -2,26 +2,88 @@
|
||||
import {useGlobalTabs} from "src/store/globalTabs";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {onBeforeMount, watch} from "vue";
|
||||
const globalTabsState = useGlobalTabs()
|
||||
const {tab, tabs} = storeToRefs(globalTabsState)
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const props = defineProps({
|
||||
init: {
|
||||
required: true
|
||||
},
|
||||
initCanCloseable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
rollBack: {
|
||||
default: "/",
|
||||
required: false
|
||||
},
|
||||
rollBackCanCloseable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeMount(()=>{
|
||||
let initRoute = router.resolve(props.init)
|
||||
|
||||
globalTabsState.addTab({
|
||||
name: initRoute.path,
|
||||
title: initRoute.meta.title,
|
||||
closable: props.initCanCloseable,
|
||||
})
|
||||
globalTabsState.tab = initRoute.path
|
||||
router.push(initRoute)
|
||||
})
|
||||
|
||||
|
||||
watch(route,()=>{
|
||||
if(route.path === tab.value) {
|
||||
return
|
||||
}
|
||||
|
||||
let index = tabs.value.findIndex(item => item.name === name)
|
||||
if(index === -1){
|
||||
globalTabsState.addTab({
|
||||
name: route.path,
|
||||
title: route.meta.title
|
||||
})
|
||||
}
|
||||
globalTabsState.tab = route.path
|
||||
})
|
||||
|
||||
function tabChange(name){
|
||||
console.log("tabChange", name)
|
||||
globalTabsState.tab = name
|
||||
router.push({
|
||||
path: name
|
||||
})
|
||||
}
|
||||
|
||||
function tabRemove(name){
|
||||
console.log("tabRemove", name)
|
||||
let index = tabs.value.findIndex(item => item.name === name)
|
||||
if(index >= tabs.value.length){
|
||||
tab.value = tabs.value[0].name
|
||||
} else {
|
||||
tab.value = tabs.value[index-1].name
|
||||
tabs.value.splice(index,1)
|
||||
if(index === 0 && tabs.value.length === 1){
|
||||
tabs.value.splice(index,1)
|
||||
let r = router.resolve(props.rollBack)
|
||||
tabs.value.push({
|
||||
name: r.path,
|
||||
title: r.meta.title,
|
||||
closable: props.rollBackCanCloseable
|
||||
})
|
||||
tab.value = tabs.value[0].name
|
||||
router.push(r)
|
||||
} else {
|
||||
let nextIndex = index === tabs.value.length - 1? index - 1: index + 1
|
||||
tab.value = tabs.value[nextIndex].name
|
||||
tabs.value.splice(index,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -11,27 +11,31 @@ const routes = [
|
||||
meta: {
|
||||
title: "首页",
|
||||
keepAlive: true,
|
||||
groups: "/"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/home",
|
||||
component: ()=>import("src/views/home/Home.vue"),
|
||||
component: ()=>import("src/views/tabs/home/Home.vue"),
|
||||
meta: {
|
||||
title: "首页"
|
||||
title: "首页",
|
||||
groups: "/"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "environment",
|
||||
component:()=>import("src/views/environment/index.vue"),
|
||||
component:()=>import("src/views/tabs/environment/index.vue"),
|
||||
meta:{
|
||||
title: "环境变量"
|
||||
title: "环境变量",
|
||||
groups: "/"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/test",
|
||||
component: ()=>import("src/views/home/Test.vue"),
|
||||
component: ()=>import("src/views/tabs/home/Test.vue"),
|
||||
meta: {
|
||||
title: "测试"
|
||||
title: "测试",
|
||||
groups: "/"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -8,7 +8,8 @@ export const useGlobalTabs = defineStore("globalTabs",{
|
||||
actions:{
|
||||
addTab(tab){
|
||||
let index = this.tabs.findIndex(item => item.name === tab.name)
|
||||
if( index === -1){
|
||||
console.log("addTab", tab, index)
|
||||
if( index === -1 ){
|
||||
this.tabs.push(tab)
|
||||
} else {
|
||||
this.tabs[index] = Object.assign(this.tabs[index],tab)
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
|
||||
import {ElAutoResizer} from "element-plus";
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
key: "name",
|
||||
dataKey: "name",
|
||||
title: "名称",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
key: "value",
|
||||
dataKey: "value",
|
||||
title: "值",
|
||||
width: 150,
|
||||
minWidth: "150px",
|
||||
flexGrow: 1
|
||||
}
|
||||
],
|
||||
data: []
|
||||
})
|
||||
|
||||
GetAllEnv().then((data)=>{
|
||||
table.data = Object.entries(data).map(item => {
|
||||
return {
|
||||
name: item[0],
|
||||
value: item[1]
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<el-auto-resizer>
|
||||
<template #default="{ height, width}">
|
||||
<el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns"/>
|
||||
</template>
|
||||
</el-auto-resizer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,31 +1,9 @@
|
||||
<script setup>
|
||||
import TabScaffold from "src/components/scaffold/TabScaffold.vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {useGlobalTabs} from "src/store/globalTabs";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const globalTabsState = useGlobalTabs()
|
||||
globalTabsState.tab = route.path
|
||||
if(globalTabsState.tabs.find(item => item.name === route.path) == null && route.path !== "/"){
|
||||
globalTabsState.tabs = [...new Set(globalTabsState.tabs).add({
|
||||
name: route.path,
|
||||
title: route.meta.title,
|
||||
})]
|
||||
}
|
||||
|
||||
if(route.path === "/"){
|
||||
let r = router.resolve("/home")
|
||||
router.push(r)
|
||||
globalTabsState.addTab({
|
||||
name: "/home",
|
||||
title: r.meta.title,
|
||||
closable: false,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabScaffold style="height: 100%"></TabScaffold>
|
||||
<TabScaffold class="w-full h-full" init="/home" rollBack="/home"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
65
app/wails/frontend/src/views/tabs/environment/index.vue
Normal file
65
app/wails/frontend/src/views/tabs/environment/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
|
||||
import {ElAutoResizer} from "element-plus";
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
key: "name",
|
||||
dataKey: "name",
|
||||
title: "名称",
|
||||
width: 300,
|
||||
minWidth: "300px",
|
||||
},
|
||||
{
|
||||
key: "value",
|
||||
dataKey: "value",
|
||||
title: "值",
|
||||
width: 300,
|
||||
minWidth: "300px",
|
||||
flexGrow: 1
|
||||
}
|
||||
],
|
||||
data: []
|
||||
})
|
||||
|
||||
GetAllEnv().then((data)=>{
|
||||
table.data = Object.entries(data).map(item => {
|
||||
return {
|
||||
name: item[0],
|
||||
value: item[1]
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<el-auto-resizer>
|
||||
<template #default="{ height, width}">
|
||||
<el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns">
|
||||
<template #cell="scope">
|
||||
<el-tooltip teleported>
|
||||
<template #content>
|
||||
<div v-for="(item,index) in (scope.rowData[scope.column.dataKey].split(';'))" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="w-full truncate">
|
||||
{{scope.rowData[scope.column.dataKey]}}
|
||||
</div>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-v2>
|
||||
</template>
|
||||
</el-auto-resizer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user