From c493779a8504fe1eb548c865ff268a7f7436ec01 Mon Sep 17 00:00:00 2001
From: wanshenmean <cathay_xy@163.com>
Date: 星期四, 19 三月 2026 11:43:36 +0800
Subject: [PATCH] feat: 集成机械手客户端并重构模拟器前端工作台
---
Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue | 201 ++++++++++++++++++++++++++++++++++---------------
1 files changed, 138 insertions(+), 63 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 567aee1..10a7a1a 100644
--- a/Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue
+++ b/Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue
@@ -1,94 +1,169 @@
-<template>
- <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>
- <div class="header-nav">
- <router-link to="/protocol-templates" class="nav-link">鍗忚妯℃澘</router-link>
+锘�<template>
+ <el-container class="admin-layout">
+ <el-aside class="admin-aside" width="220px">
+ <div class="brand-area">
+ <el-icon :size="24" class="brand-icon"><Cpu /></el-icon>
+ <div class="brand-text">
+ <div class="brand-title">WCS 妯℃嫙骞冲彴</div>
+ <div class="brand-subtitle">S7 Simulator</div>
</div>
</div>
- </el-header>
- <el-main class="app-main">
- <router-view />
- </el-main>
+ <el-menu
+ class="aside-menu"
+ :default-active="activeMenu"
+ background-color="#1f2a37"
+ text-color="#c7d2fe"
+ active-text-color="#ffffff"
+ router
+ >
+ <el-menu-item index="/">
+ <el-icon><House /></el-icon>
+ <span>瀹炰緥绠＄悊</span>
+ </el-menu-item>
+ <el-menu-item index="/protocol-templates">
+ <el-icon><Files /></el-icon>
+ <span>鍗忚妯℃澘</span>
+ </el-menu-item>
+ <el-menu-item index="/robot-clients">
+ <el-icon><Connection /></el-icon>
+ <span>鏈烘鎵嬪鎴风</span>
+ </el-menu-item>
+ </el-menu>
+ </el-aside>
- <el-footer class="app-footer">
- <span>© 2026 - S7 PLC Simulator Management UI</span>
- </el-footer>
+ <el-container>
+ <el-header class="admin-header">
+ <div class="header-left">
+ <div class="page-title">{{ pageTitle }}</div>
+ <div class="page-path">{{ route.path }}</div>
+ </div>
+ </el-header>
+
+ <el-main class="admin-main">
+ <div class="content-shell">
+ <router-view />
+ </div>
+ </el-main>
+ </el-container>
</el-container>
</template>
<script setup lang="ts">
-import { Cpu } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { Connection, Cpu, Files, House } from '@element-plus/icons-vue'
+
+const route = useRoute()
+
+const activeMenu = computed(() => {
+ if (route.path.startsWith('/protocol-templates')) return '/protocol-templates'
+ if (route.path.startsWith('/robot-clients')) return '/robot-clients'
+ return '/'
+})
+
+const pageTitle = computed(() => {
+ if (route.path.startsWith('/create')) return '鍒涘缓瀹炰緥'
+ if (route.path.startsWith('/edit')) return '缂栬緫瀹炰緥'
+ if (route.path.startsWith('/details')) return '瀹炰緥璇︽儏'
+ if (route.path.startsWith('/protocol-templates')) return '鍗忚妯℃澘'
+ if (route.path.startsWith('/robot-clients')) return '鏈烘鎵嬪鎴风'
+ return '瀹炰緥绠＄悊'
+})
</script>
<style scoped>
-.app-container {
- min-height: 100vh;
+.admin-layout {
+ height: 100vh;
}
-.app-header {
- background: #409eff;
- color: white;
- padding: 0 20px;
+.admin-aside {
+ background: linear-gradient(180deg, #1f2a37 0%, #111827 100%);
+ border-right: 1px solid #263445;
+ display: flex;
+ flex-direction: column;
+}
+
+.brand-area {
+ height: 64px;
+ padding: 0 14px;
display: flex;
align-items: center;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid #2b3a4f;
+ color: #e5e7eb;
}
-.header-content {
- width: 100%;
- max-width: 1400px;
- margin: 0 auto;
- display: flex;
- justify-content: space-between;
- align-items: center;
+.brand-icon {
+ margin-right: 10px;
}
-.logo {
- display: flex;
- align-items: center;
- gap: 8px;
- color: white;
- text-decoration: none;
- font-size: 18px;
- font-weight: 500;
+.brand-title {
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 1.2;
}
-.logo:hover {
- color: white;
+.brand-subtitle {
+ font-size: 12px;
+ color: #94a3b8;
+ line-height: 1.2;
}
-.header-nav {
- display: flex;
- gap: 12px;
-}
-
-.nav-link {
- color: #fff;
- text-decoration: none;
-}
-
-.app-main {
+.aside-menu {
+ border-right: none;
flex: 1;
- padding: 20px;
- max-width: 1400px;
+}
+
+.admin-header {
+ height: 64px;
+ background: #ffffff;
+ border-bottom: 1px solid #e5e7eb;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+}
+
+.header-left {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.page-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #0f172a;
+}
+
+.page-path {
+ font-size: 12px;
+ color: #64748b;
+}
+
+.admin-main {
+ background: #f1f5f9;
+ padding: 14px;
+}
+
+.content-shell {
+ min-height: calc(100vh - 64px - 28px);
width: 100%;
+ max-width: 1680px;
margin: 0 auto;
+ padding: 2px;
}
-.app-footer {
- text-align: center;
- color: #909399;
- border-top: 1px solid #dcdfe6;
- padding: 20px;
-}
+@media (max-width: 960px) {
+ .admin-aside {
+ width: 64px !important;
+ }
-a.router-link-active {
- font-weight: bold;
+ .brand-text {
+ display: none;
+ }
+
+ .admin-header {
+ padding: 0 12px;
+ }
}
</style>
--
Gitblit v1.9.3