88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<div class="nav-container bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid shadow-2xl overflow-hidden" :style="containerStyle">
|
|
<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 hostsList from '@/views/hosts/hostsList.vue'
|
|
import workbenches from '@/views/hosts/workbenches.vue'
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
|
|
// 设计稿尺寸
|
|
const DESIGN_WIDTH = 1600
|
|
const DESIGN_HEIGHT = 900
|
|
|
|
let activeIndexA = ref(1)
|
|
const version = ref('v0.1.0')
|
|
|
|
// 缩放比例
|
|
const zoomRatio = ref(1)
|
|
|
|
// 计算缩放比例
|
|
const calcZoom = () => {
|
|
const windowWidth = window.innerWidth
|
|
const windowHeight = window.innerHeight
|
|
|
|
// 根据宽高比例计算缩放值，取较小值保证完整显示
|
|
const widthRatio = windowWidth / DESIGN_WIDTH
|
|
const heightRatio = windowHeight / DESIGN_HEIGHT
|
|
|
|
zoomRatio.value = Math.min(widthRatio, heightRatio)
|
|
}
|
|
|
|
// 容器样式
|
|
const containerStyle = computed(() => ({
|
|
width: `${DESIGN_WIDTH}px`,
|
|
height: `${DESIGN_HEIGHT}px`,
|
|
zoom: zoomRatio.value
|
|
}))
|
|
|
|
function activeIndexFn(data) {
|
|
activeIndexA.value = data
|
|
console.log(data)
|
|
}
|
|
|
|
onMounted(() => {
|
|
calcZoom()
|
|
window.addEventListener('resize', calcZoom)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', calcZoom)
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
/* Global resets if needed, but Tailwind handles most */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f3f5f9; /* Match background */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-container {
|
|
transform-origin: center center;
|
|
}
|
|
</style> |