l2ktech · l2ktech · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+www.l2k.tech
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "material-design-icons": "^3.0.1",
     "material-design-icons-iconfont": "^5.0.1",
     "muse-ui": "^3.0.2",
-    "vue": "^2.5.22"
+    "vue": "^2.5.22",
+    "vue-router": "^3.6.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",

diff --git a/public/.nojekyll b/public/.nojekyll
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <!-- Statically import Sylvester (Matrix math JS library) -->
     <script src="sylvester.js"> </script>
-    <title>kalman</title>
+    <title>控制算法学习平台 - 卡尔曼滤波器 & PID 控制器</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,16 @@
 <template>
 	<div id="app">
-		<Kalman />
+		<NavBar />
+		<router-view />
 	</div>
 </template>
 <script>
-import Kalman from "./components/Kalman.vue";
+import NavBar from "./components/NavBar.vue";
 
 export default {
 	name: "app",
 	components: {
-		Kalman
+		NavBar
 	}
 };
 </script>
@@ -32,6 +33,12 @@ html {
 	-moz-osx-font-smoothing: grayscale;
 	text-align: center;
 	color: #2c3e50;
-	margin-top: 20px;
+	min-height: 100vh;
+	background: linear-gradient(to bottom, #f5f7fa 0%, #ffffff 100%);
+}
+
+body {
+	margin: 0;
+	padding: 0;
 }
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="navbar">
+    <div class="navbar-container">
+      <div class="navbar-brand">
+        <span class="brand-icon">🎓</span>
+        <span class="brand-text">控制算法学习平台</span>
+      </div>
+      <nav class="navbar-menu">
+        <router-link
+          to="/kalman"
+          class="nav-item"
+          active-class="active"
+        >
+          <span class="nav-icon">📊</span>
+          <span class="nav-text">卡尔曼滤波器</span>
+        </router-link>
+        <router-link
+          to="/pid"
+          class="nav-item"
+          active-class="active"
+        >
+          <span class="nav-icon">🤖</span>
+          <span class="nav-text">PID 控制器</span>
+        </router-link>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NavBar'
+}
+</script>
+
+<style scoped>
+.navbar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+}
+
+.navbar-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: white;
+  font-weight: 700;
+  font-size: 1.3rem;
+}
+
+.brand-icon {
+  font-size: 1.8rem;
+}
+
+.brand-text {
+  letter-spacing: -0.02em;
+}
+
+.navbar-menu {
+  display: flex;
+  gap: 10px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.85);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  transform: translateY(-2px);
+}
+
+.nav-item.active {
+  background: white;
+  color: #667eea;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.nav-icon {
+  font-size: 1.2rem;
+}
+
+.nav-text {
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .navbar-container {
+    flex-direction: column;
+    height: auto;
+    padding: 15px 10px;
+    gap: 15px;
+  }
+
+  .navbar-brand {
+    font-size: 1.1rem;
+  }
+
+  .brand-icon {
+    font-size: 1.4rem;
+  }
+
+  .navbar-menu {
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .nav-item {
+    padding: 6px 15px;
+    font-size: 0.9rem;
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import App from "./App.vue";
+import router from "./router";
 import MuseUI from 'muse-ui';
 import 'muse-ui/dist/muse-ui.css';
 import 'material-design-icons-iconfont'
@@ -9,5 +10,6 @@ Vue.use(MuseUI);
 Vue.config.productionTip = false;
 
 new Vue({
+	router,
 	render: h => h(App)
 }).$mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import KalmanView from '../views/KalmanView.vue'
+import PIDView from '../views/PIDView.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/kalman'
+  },
+  {
+    path: '/kalman',
+    name: 'Kalman',
+    component: KalmanView,
+    meta: { title: '卡尔曼滤波器' }
+  },
+  {
+    path: '/pid',
+    name: 'PID',
+    component: PIDView,
+    meta: { title: 'PID 控制器' }
+  }
+]
+
+const router = new VueRouter({
+  mode: 'hash',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router