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

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>