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 | 185 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 151 insertions(+), 34 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..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,52 +1,169 @@
-<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
- </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>
+锘�<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>
- </nav>
- <div class="container-fluid px-4">
- <router-view />
- </div>
+ <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>
- <footer class="border-top py-3 mt-4 bg-light">
- <div class="container-fluid text-center text-muted">
- <small>© 2026 - S7 PLC Simulator Management UI</small>
- </div>
- </footer>
- </div>
+ <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 { 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>
-#app {
- min-height: 100vh;
+<style scoped>
+.admin-layout {
+ height: 100vh;
+}
+
+.admin-aside {
+ background: linear-gradient(180deg, #1f2a37 0%, #111827 100%);
+ border-right: 1px solid #263445;
display: flex;
flex-direction: column;
}
-.container-fluid {
+.brand-area {
+ height: 64px;
+ padding: 0 14px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #2b3a4f;
+ color: #e5e7eb;
+}
+
+.brand-icon {
+ margin-right: 10px;
+}
+
+.brand-title {
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 1.2;
+}
+
+.brand-subtitle {
+ font-size: 12px;
+ color: #94a3b8;
+ line-height: 1.2;
+}
+
+.aside-menu {
+ border-right: none;
flex: 1;
}
-.navbar-nav .nav-link.router-link-active {
- font-weight: bold;
+.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;
+}
+
+@media (max-width: 960px) {
+ .admin-aside {
+ width: 64px !important;
+ }
+
+ .brand-text {
+ display: none;
+ }
+
+ .admin-header {
+ padding: 0 12px;
+ }
}
</style>
--
Gitblit v1.9.3