KCGL/inventory-web/src/layout/index.vue

<template>
  <div class="layout-wrapper">
    <Sidebar class="sidebar-container" />

    <div class="main-container">
      <AppMain />
    </div>

    <!-- 全局规格连号助手 -->
    <SpecHelper />
  </div>
</template>

<script setup lang="ts">
import Sidebar from './components/Sidebar/index.vue'
import AppMain from './components/AppMain.vue'
import SpecHelper from '@/components/SpecHelper/index.vue'
</script>

<style scoped>
.layout-wrapper {
  display: flex;
  width: 100%;
  height: 100%; /* 继承 App.vue 中 app-content 的高度 */
  overflow: hidden; /* 防止最外层出现滚动条 */
}

.sidebar-container {
  width: 180px; /* 固定侧边栏宽度 */
  height: 100%;
  background-color: #304156; /* 侧边栏背景色 */
  flex-shrink: 0; /* 防止被挤压 */
  overflow-y: auto; /* 侧边栏内容过多时允许滚动 */
  overflow-x: hidden;
}

.main-container {
  flex: 1; /* 自动占满右侧剩余空间 */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 关键：页面内容过多时，只在右侧区域滚动 */
  background-color: #f0f2f5; /* 右侧灰色背景，让白色卡片更明显 */
  padding: 10px; /* 给内部页面留出边距 */
  box-sizing: border-box;
}
</style>