物料-采购件入库页面功能实现

inventory-web/src/layout/index.vue

@@ -1,11 +1,43 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
+  <div class="layout-wrapper">
+    <Sidebar class="sidebar-container" />
 
+    <div class="main-container">
+      <AppMain />
+    </div>
+  </div>
 </template>
 
-<style scoped>
+<script setup lang="ts">
+import Sidebar from './components/Sidebar/index.vue'
+import AppMain from './components/AppMain.vue'
+</script>
 
+<style scoped>
+.layout-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%; /* 继承 App.vue 中 app-content 的高度 */
+  overflow: hidden; /* 防止最外层出现滚动条 */
+}
+
+.sidebar-container {
+  width: 210px; /* 固定侧边栏宽度 */
+  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: 20px; /* 给内部页面留出边距 */
+  box-sizing: border-box;
+}
 </style>