KCGL/inventory-web/src/App.vue

<script setup lang="ts">
// 不需要引入组件，由 router-view 控制
</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">库存管理系统</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>
/* 全局重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f7fa;
}

#app {
  height: 100%;
}

.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满全屏高度 */
}

/* 顶部栏样式 */
.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; /* 防止被压缩 */
}

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

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

.logo {
  height: 40px;
  width: auto;
}

.system-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

/* 内容区样式 */
.app-content {
  flex: 1; /* 关键：这会让内容区自动撑开，把 footer 挤到最底下 */
  overflow: auto;
  padding: 20px;
}

/* 新增：底部栏样式 */
.app-footer {
  height: 30px; /* 固定高度 */
  background-color: #e9e9eb; /* 稍微深一点的灰色，区分内容区 */
  border-top: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center; /* 文字居中 */
  flex-shrink: 0; /* 防止被压缩 */
  font-size: 12px;
  color: #909399;
}

.version-tag {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #e6a23c; /* 使用橙色，表示“测试/警告”意味 */
}
</style>