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

inventory-web/src/layout/components/AppMain.vue

@@ -0,0 +1,36 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component }">
+      <transition name="fade-transform" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.app-main {
+  /* 确保占满容器 */
+  width: 100%;
+  position: relative;
+}
+
+/* 简单的页面切换动画 */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>

inventory-web/src/layout/components/Sidebar/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-menu
+      :default-active="activeMenu"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="#409EFF"
+      :unique-opened="true"
+      router
+      class="el-menu-vertical"
+  >
+    <template v-for="route in menuRoutes" :key="route.path">
+
+      <el-menu-item
+          v-if="!route.children || route.children.length === 1"
+          :index="resolvePath(route)"
+      >
+        <el-icon v-if="getMeta(route).icon">
+          <component :is="getMeta(route).icon" />
+        </el-icon>
+        <span>{{ getMeta(route).title }}</span>
+      </el-menu-item>
+
+      <el-sub-menu v-else :index="route.path">
+        <template #title>
+          <el-icon v-if="route.meta && route.meta.icon">
+            <component :is="route.meta.icon" />
+          </el-icon>
+          <span>{{ route.meta?.title }}</span>
+        </template>
+
+        <el-menu-item
+            v-for="child in route.children"
+            :key="child.path"
+            :index="resolvePath(route, child)"
+        >
+          <template #title>
+            <span>{{ child.meta?.title }}</span>
+          </template>
+        </el-menu-item>
+      </el-sub-menu>
+
+    </template>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+// 1. 获取当前激活的菜单路径
+const activeMenu = computed(() => {
+  return route.path
+})
+
+// 2. 获取需要在菜单中显示的路由（过滤掉 hidden 的路由）
+const menuRoutes = computed(() => {
+  return router.options.routes.filter((r: any) => !r.meta?.hidden)
+})
+
+// 3. 辅助函数：获取 meta 信息
+const getMeta = (route: any) => {
+  if (route.meta) return route.meta
+  // 如果是 layout 嵌套层（如首页），取第一个子路由的 meta
+  if (route.children && route.children.length > 0) {
+    return route.children[0].meta
+  }
+  return {}
+}
+
+// 4. 辅助函数：拼接路径
+const resolvePath = (parent: any, child?: any) => {
+  // 如果是首页这种 layout 嵌套结构
+  if (!child && parent.children && parent.children.length === 1) {
+    return parent.path === '/' ? '/dashboard' : parent.path + '/' + parent.children[0].path
+  }
+  // 如果是普通子菜单
+  if (child) {
+    return parent.path + '/' + child.path
+  }
+  return parent.path
+}
+</script>
+
+<style scoped>
+.el-menu-vertical {
+  border-right: none; /* 去掉 Element Plus 菜单默认的右边框 */
+  width: 100%;
+}
+:deep(.el-menu-item.is-active) {
+  background-color: #263445 !important;
+}
+</style>

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>