From 737dec3c384f394fd6f9849b4480b697d1ba35d5 Mon Sep 17 00:00:00 2001
From: wanshenmean <cathay_xy@163.com>
Date: 星期二, 17 三月 2026 09:16:44 +0800
Subject: [PATCH] chore: 提交所有当前改动

---
 Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue |  102 ++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue b/Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue
index 9492370..567aee1 100644
--- a/Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue
+++ b/Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue
@@ -1,52 +1,94 @@
 <template>
-  <div id="app">
-    <nav class="navbar navbar-expand-sm navbar-dark bg-primary shadow-sm mb-4">
-      <div class="container-fluid">
-        <router-link class="navbar-brand" to="/">
-          <i class="bi bi-cpu-fill me-2"></i>S7 PLC Simulator
+  <el-container class="app-container">
+    <el-header class="app-header">
+      <div class="header-content">
+        <router-link to="/" class="logo">
+          <el-icon :size="24"><Cpu /></el-icon>
+          <span>S7 PLC Simulator</span>
         </router-link>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="navbar-collapse collapse">
-          <ul class="navbar-nav flex-grow-1">
-            <li class="nav-item">
-              <router-link class="nav-link" to="/">
-                <i class="bi bi-house-door me-1"></i>瀹炰緥鍒楄〃
-              </router-link>
-            </li>
-          </ul>
+        <div class="header-nav">
+          <router-link to="/protocol-templates" class="nav-link">鍗忚妯℃澘</router-link>
         </div>
       </div>
-    </nav>
+    </el-header>
 
-    <div class="container-fluid px-4">
+    <el-main class="app-main">
       <router-view />
-    </div>
+    </el-main>
 
-    <footer class="border-top py-3 mt-4 bg-light">
-      <div class="container-fluid text-center text-muted">
-        <small>&copy; 2026 - S7 PLC Simulator Management UI</small>
-      </div>
-    </footer>
-  </div>
+    <el-footer class="app-footer">
+      <span>&copy; 2026 - S7 PLC Simulator Management UI</span>
+    </el-footer>
+  </el-container>
 </template>
 
 <script setup lang="ts">
+import { Cpu } from '@element-plus/icons-vue'
 </script>
 
-<style>
-#app {
+<style scoped>
+.app-container {
   min-height: 100vh;
+}
+
+.app-header {
+  background: #409eff;
+  color: white;
+  padding: 0 20px;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.container-fluid {
+.header-content {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.logo:hover {
+  color: white;
+}
+
+.header-nav {
+  display: flex;
+  gap: 12px;
+}
+
+.nav-link {
+  color: #fff;
+  text-decoration: none;
+}
+
+.app-main {
   flex: 1;
+  padding: 20px;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
 }
 
-.navbar-nav .nav-link.router-link-active {
+.app-footer {
+  text-align: center;
+  color: #909399;
+  border-top: 1px solid #dcdfe6;
+  padding: 20px;
+}
+
+a.router-link-active {
   font-weight: bold;
 }
 </style>

--
Gitblit v1.9.3