tkPage/src/views/nav.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>