KCGL/inventory-web/src/App.vue

<script setup lang="ts">
// 1. 引入需要的图标组件
import { InfoFilled } from '@element-plus/icons-vue'
</script>

<template>
  <div class="app-wrapper">
    <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">IRIS 库存管理系统</span>
        </router-link>
      </div>

      <div class="header-right">
      </div>
    </header>

    <main class="app-content">
      <router-view />
    </main>

    <footer class="app-footer">
      <span class="version-tag">
        <el-icon style="vertical-align: middle; margin-right: 4px"><InfoFilled /></el-icon>
        当前版本: 1.0 Beta (测试版)
      </span>
    </footer>
  </div>
</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; /* 整体背景色 */
  overflow: hidden; /* 防止最外层出现双滚动条 */
}

#app {
  height: 100%;
}
/* --- 全局重置样式 End --- */

.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 强制占满视口高度 */
  overflow: hidden;
}

/* 顶部栏样式 */
.app-header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0; /* 禁止被压缩 */
  z-index: 1000; /* 确保头部在最上层 */
}

.logo-container {
  display: flex;
  align-items: center;
}

.home-link {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.logo {
  height: 36px; /* 稍微调整高度适配 */
  width: auto;
}

.system-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 1px;
}

/* 内容区样式 */
.app-content {
  flex: 1; /* 自动占据剩余空间 */
  overflow: hidden; /* 这里设为 hidden，让内部的 Layout 组件去处理滚动 */
  position: relative;
  /* 如果您希望整个页面有内边距，可以加 padding；
     但通常建议 padding 加在具体的业务页面里，保持 Layout 铺满 */
  padding: 0;
}

/* 底部栏样式 */
.app-footer {
  height: 36px;
  background-color: #f0f2f5;
  border-top: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  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; /* 橙色警告色 */
  background: rgba(230, 162, 60, 0.1); /* 淡橙色背景 */
  padding: 2px 8px;
  border-radius: 4px;
}
</style>