工作台自适应

src/views/nav.vue

@@ -1,5 +1,5 @@
 <template>
-  <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="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]">
@@ -23,15 +23,50 @@
 import Sidebar from '../components/Sidebar.vue';
 import hostsList from '@/views/hosts/hostsList.vue'
 import workbenches from '@/views/hosts/workbenches.vue'
-import { ref } from '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>
@@ -44,5 +79,10 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  overflow: hidden;
+}
+
+.nav-container {
+  transform-origin: center center;
 }
 </style>