<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>
|
</div>
|
</div>
|
</nav>
|
|
<div class="container-fluid px-4">
|
<router-view />
|
</div>
|
|
<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>
|
</template>
|
|
<script setup lang="ts">
|
</script>
|
|
<style>
|
#app {
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.container-fluid {
|
flex: 1;
|
}
|
|
.navbar-nav .nav-link.router-link-active {
|
font-weight: bold;
|
}
|
</style>
|
