python-flask和Vue两种模式初模板

inventory-web/src/App.vue

@@ -1,30 +1,115 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+// 不需要引入组件，由 router-view 控制
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <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>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
-<style scoped>
+<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: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+  height: 40px;
+  width: auto;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+.system-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
 }
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+/* 内容区样式 */
+.app-content {
+  flex: 1; /* 关键：这会让内容区自动撑开，把 footer 挤到最底下 */
+  overflow: auto;
+  padding: 20px;
 }
-</style>
+
+/* 新增：底部栏样式 */
+.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>