mfx/tkPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版ui

Browse Source
This commit is contained in:
没复习
2026-01-16 19:00:07 +08:00
parent 74bf170490
commit 32f9c48c91
7 changed files with 1485 additions and 1955 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/nav.vue
View File

@@ -1,89 +1,48 @@
<template>
<div class="app-container">
<Sidebar class="noneText" @activeIndex="activeIndexFn" />
<div class="content ">
<div v-show="activeIndexA == 1">
<workbenches />
</div>
<div v-show="activeIndexA == 2">
<hostsList />
</div>
<div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div>
<div class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid shadow-2xl overflow-hidden mx-auto" style="width: 1600px; height: 900px;">
<div class="flex h-full overflow-hidden">
<Sidebar class="flex-none h-full" @activeIndex="activeIndexFn" />
<main class="flex-1 overflow-y-auto p-4 relative flex flex-col h-full bg-[#f3f5f9]">
<div v-show="activeIndexA == 1" class="h-full">
<workbenches />
</div>
<div v-show="activeIndexA == 2" class="h-full">
<hostsList />
</div>
<!-- Decorative blobs -->
<!-- <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div> -->
<!-- <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none"></div> -->
<!-- <div class="absolute bottom-2 right-4 text-xs text-slate-400">{{ version }}</div> -->
</main>
</div>
</div>
</template>
<script setup>
import Sidebar from '../components/Sidebar.vue';
import { RouterLink, RouterView } from 'vue-router'
import hostsList from '@/views/hosts/hostsList.vue'
import workbenches from '@/views/hosts/workbenches.vue'
import { ref } from 'vue'
import { getUser } from '@/utils/storage'
// import { usePythonBridge } from '@/utils/pythonBridge'
let activeIndexA = ref(1)
const version = ref('v0.1.0')
function activeIndexFn(data) {
activeIndexA.value = data
console.log(data)
}
</script>
<style lang="less">
body,
html {
<style>
/* Global resets if needed, but Tailwind handles most */
body {
margin: 0;
padding: 0;
height: 100%;
}
.app-container {
background-color: #f3f5f9; /* Match background */
display: flex;
width: 1600px;
height: 900px;
background-color: @bg-color;
position: relative;
}
.noneText {
/* 页面无法选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sidebar {
width: 200px;
background-color: @bg-color;
padding: 20px;
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
}
.content {
margin-left: 280px;
width: 1304px;
height: 868px;
background: #FFFFFF;
border-radius: 36px;
margin-top: 16px;
}
.center-justify {
display: flex;
justify-content: space-around;
justify-content: center;
align-items: center;
min-height: 100vh;
}
</style>