新增数据，开始安全巡检模块

src/layout/index.vue

@@ -1,16 +1,60 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <side-bar class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <div>
-        <navbar ref="navbarRef" @set-layout="setLayout" />
+  <!-- 👇 加这一层全局缩放容器 -->
+  <div class="global-scale-wrapper">
+    <div class="scale-content" :style="{ transform: `scale(${scale})` }">
+      <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+        <side-bar class="sidebar-container" />
+        <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+          <div>
+            <navbar ref="navbarRef" @set-layout="setLayout" />
+          </div>
+          <app-main />
+          <settings ref="settingRef" />
+        </div>
       </div>
-      <app-main />
-      <settings ref="settingRef" />
     </div>
   </div>
 </template>
 
+<script lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// 缩放比例
+const scale = ref(1);
+// 你的设计稿宽度（若伊默认1920，不用改）
+const DESIGN_WIDTH = 1920;
+
+// 计算缩放
+const calcScale = () => {
+  const width = document.documentElement.clientWidth;
+  let ratio = width / DESIGN_WIDTH;
+  // 最小缩到0.7（防止太小看不清）
+  if (ratio < 0.7) ratio = 0.7;
+  // 最大不超过1（大屏不拉伸）
+  if (ratio > 1) ratio = 1;
+  scale.value = ratio;
+  console.log(scale.value);
+};
+
+// 监听窗口变化
+let timer = null;
+const resize = () => {
+  console.log(scale.value);
+  clearTimeout(timer);
+  timer = setTimeout(calcScale, 100);
+};
+
+onMounted(() => {
+  calcScale();
+  window.addEventListener('resize', resize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resize);
+  clearTimeout(timer);
+});
+</script>
+
 <script setup lang="ts">
 import SideBar from './components/Sidebar/index.vue';
 import { AppMain, Navbar, Settings, TagsView } from './components';
@@ -81,6 +125,25 @@ const setLayout = () => {
 @use '@/assets/styles/mixin.scss';
 @use '@/assets/styles/variables.module.scss' as *;
 
+// 全局缩放容器
+.global-scale-wrapper {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+// // 缩放内容区
+// .scale-content {
+//   width: 1920px;
+//   height: 100vh;
+//   position: absolute;
+//   left: 50%;
+//   top: 0;
+//   transform-origin: center center;
+//   margin-left: -960px; /* 1920/2 居中 */
+// }
+
 .app-wrapper {
   @include mixin.clearfix;
   position: relative;