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

inventory-web/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-// 不需要引入组件，由 router-view 控制
+// 1. 引入需要的图标组件
+import { InfoFilled } from '@element-plus/icons-vue'
 </script>
 
 <template>
@@ -7,8 +8,8 @@
     <header class="app-header">
       <div class="logo-container">
         <router-link to="/" class="home-link">
-          <img src="./assets/iris.png" class="logo" alt="Logo" />
-          <span class="system-title">库存管理系统</span>
+          <img src="@/assets/iris.png" class="logo" alt="Logo" />
+          <span class="system-title">IRIS 库存管理系统</span>
         </router-link>
       </div>
 
@@ -30,23 +31,32 @@
 </template>
 
 <style>
-/* 全局重置 */
+/* 注意：App.vue 中的 style 标签通常不加 scoped，
+  或者将全局样式(html, body)单独放在一个 style 标签中，
+  以确保 html, body 的高度设置能生效
+*/
+
+/* --- 全局重置样式 Start --- */
 html, body {
   margin: 0;
   padding: 0;
   height: 100%;
+  width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background-color: #f5f7fa;
+  background-color: #f5f7fa; /* 整体背景色 */
+  overflow: hidden; /* 防止最外层出现双滚动条 */
 }
 
 #app {
   height: 100%;
 }
+/* --- 全局重置样式 End --- */
 
 .app-wrapper {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 占满全屏高度 */
+  height: 100vh; /* 强制占满视口高度 */
+  overflow: hidden;
 }
 
 /* 顶部栏样式 */
@@ -59,7 +69,8 @@ html, body {
   justify-content: space-between;
   padding: 0 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  flex-shrink: 0; /* 防止被压缩 */
+  flex-shrink: 0; /* 禁止被压缩 */
+  z-index: 1000; /* 确保头部在最上层 */
 }
 
 .logo-container {
@@ -73,43 +84,52 @@ html, body {
   gap: 15px;
   text-decoration: none;
   cursor: pointer;
+  user-select: none;
 }
 
 .logo {
-  height: 40px;
+  height: 36px; /* 稍微调整高度适配 */
   width: auto;
 }
 
 .system-title {
-  font-size: 18px;
-  font-weight: bold;
+  font-size: 20px;
+  font-weight: 600;
   color: #303133;
+  letter-spacing: 1px;
 }
 
 /* 内容区样式 */
 .app-content {
-  flex: 1; /* 关键：这会让内容区自动撑开，把 footer 挤到最底下 */
-  overflow: auto;
-  padding: 20px;
+  flex: 1; /* 自动占据剩余空间 */
+  overflow: hidden; /* 这里设为 hidden，让内部的 Layout 组件去处理滚动 */
+  position: relative;
+  /* 如果您希望整个页面有内边距，可以加 padding；
+     但通常建议 padding 加在具体的业务页面里，保持 Layout 铺满 */
+  padding: 0;
 }
 
-/* 新增：底部栏样式 */
+/* 底部栏样式 */
 .app-footer {
-  height: 30px; /* 固定高度 */
-  background-color: #e9e9eb; /* 稍微深一点的灰色，区分内容区 */
-  border-top: 1px solid #dcdfe6;
+  height: 36px;
+  background-color: #f0f2f5;
+  border-top: 1px solid #e4e7ed;
   display: flex;
   align-items: center;
-  justify-content: center; /* 文字居中 */
-  flex-shrink: 0; /* 防止被压缩 */
+  justify-content: center;
+  flex-shrink: 0; /* 禁止被压缩 */
   font-size: 12px;
   color: #909399;
+  z-index: 1000;
 }
 
 .version-tag {
   display: flex;
   align-items: center;
   font-weight: 500;
-  color: #e6a23c; /* 使用橙色，表示“测试/警告”意味 */
+  color: #e6a23c; /* 橙色警告色 */
+  background: rgba(230, 162, 60, 0.1); /* 淡橙色背景 */
+  padding: 2px 8px;
+  border-radius: 4px;
 }
 </style>