diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..200376b
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+www.l2k.tech
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6cbac8c..25a3df4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,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",
@@ -13538,6 +13539,12 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
+      "license": "MIT"
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index cebf9db..1b4ae31 100644
--- 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
new file mode 100644
index 0000000..e69de29
diff --git a/public/index.html b/public/index.html
index f1b44e8..b4f2a02 100644
--- 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
index fee2136..89a7501 100644
--- 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
new file mode 100644
index 0000000..68d4d44
--- /dev/null
+++ 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
index 21c549c..9060f1a 100644
--- 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
new file mode 100644
index 0000000..8df8308
--- /dev/null
+++ 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
diff --git a/src/views/KalmanView.vue b/src/views/KalmanView.vue
new file mode 100644
index 0000000..7e9b60b
--- /dev/null
+++ b/src/views/KalmanView.vue
@@ -0,0 +1,713 @@
+<template>
+	<div>
+		<h1 class="title">卡尔曼滤波器 2D 演示</h1>
+		<h3 class="subtitle">交互式噪声过滤演示 - 实时可视化</h3>
+		<mu-row gutter class="stats">
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+			<mu-col style="font-size:18px;" sm="12" md="10" lg="8" span="12">
+				<center>
+					<h3 style="color:#388e3c; font-weight: 600;">🟢 绿色点 = 带噪声的轨迹</h3>
+					<p style="line-height: 1.8;">程序会给真实路径人为添加随机噪声（就像信号干扰），生成绿色的"脏数据"点。这些点看起来会很杂乱抖动。</p>
+
+					<h3 style="color:#dd2c00; font-weight: 600;">🔴 红色点 = 过滤后的轨迹</h3>
+					<p style="line-height: 1.8;">卡尔曼滤波算法会分析绿色的噪声数据，通过数学计算"猜测"出真实的轨迹，最终生成平滑的红色路径。这就像从嘈杂的录音中还原清晰的声音。</p>
+
+					<div style="background-color:#f5f5f5; padding:15px; border-radius:8px; margin:15px 0;">
+						<h4 style="margin-top:0;">💡 简单理解卡尔曼滤波器</h4>
+						<p style="line-height: 1.8; text-align: left;">
+							想象你在雾天开车，视线模糊（噪声干扰）。卡尔曼滤波器就像一个聪明的副驾驶：<br>
+							✓ 它记住之前的路线（历史数据）<br>
+							✓ 观察当前模糊的路况（当前测量）<br>
+							✓ 结合两者推测出最可能的真实路径（最优估计）<br><br>
+							这个算法在1960年代被用于阿波罗登月计划的导航系统，现在广泛应用于GPS定位、自动驾驶、手机陀螺仪等领域。
+						</p>
+					</div>
+
+					<p style="font-size:16px; background-color:#e3f2fd; padding:10px; border-radius:5px;">
+						<strong>👆 操作提示：</strong>选择"鼠标"模式，然后在画布上移动鼠标，就可以亲手绘制路径，观察过滤效果！
+					</p>
+					<p style="font-size:14px; margin-top:10px;">
+						<a href="https://courses.engr.illinois.edu/ece420/sp2017/UnderstandingKalmanFilter.pdf">点击这里</a> 查看算法的详细数学解释（英文PDF）
+					</p>
+				</center>
+			</mu-col>
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+		</mu-row><br>
+		<br>
+		<mu-row gutter class="stats">
+			<mu-col style="padding-left:5%;padding-right:2.5%; padding: 15px" sm="12" md="12" lg="4" span="12">
+				<div class="grid-cell">
+					<mu-button @click="handleStartButton" :color="startBtnColor">
+						<mu-icon :value="startBtnIcon"></mu-icon>{{ startBtnText }}
+					</mu-button>&nbsp;
+					<mu-button @click="init" color="red">
+						<mu-icon value="undo"></mu-icon> 重置
+					</mu-button>
+					<br /><br />
+					<h4 style="margin-bottom: 10px;">🎮 控制面板</h4>
+					<strong>运动模式：</strong>
+					<mu-select @change="init" v-model="mode">
+						<mu-option v-for="(option, index) in options" :key="option" :label="option" :value="index"></mu-option>
+					</mu-select>
+					<small style="display:block; margin-top:5px; color:#666;">选择不同的路径生成方式</small>
+					<br />
+					<strong>目标帧率：</strong> <b>{{ framerate }}</b> FPS
+					<mu-slider type="range" :min="0" :max="80" :step="1" value="50" class="slider" v-model="framerate" />
+					<small style="display:block; margin-top:-10px; color:#666;">数值越高动画越流畅</small>
+
+					<strong>轨迹保留时长：</strong> <b>{{ ttl }}</b> 帧
+					<mu-slider type="range" :min="0" :max="200" :step="1" value="50" class="slider" v-model="ttl" />
+					<small style="display:block; margin-top:-10px; color:#666;">每个点在画布上保留的帧数</small>
+
+					<strong>噪声强度 σ：</strong> <b>{{ sigma }}</b>
+					<mu-slider :min="0" :max="width / 3" :step="1" class="demo-slider" v-model="sigma"></mu-slider>
+					<small style="display:block; margin-top:-10px; color:#666;">数值越大，绿色点越杂乱（噪声越大）</small>
+
+					<strong>预测步数：</strong> <b>{{ predSteps }}</b>
+					<mu-slider :min="1" :max="50" :step="1" class="demo-slider" v-model="predSteps"></mu-slider>
+					<small style="display:block; margin-top:-10px; color:#666;">算法向未来预测的步数</small>
+					<!--
+					<mu-checkbox
+						v-model="traj"
+						label="Trajectory"
+					></mu-checkbox>-->
+					<br><strong>显示选项：</strong><br>
+					<mu-checkbox v-model="drawReal" label="真实路径（蓝色）"></mu-checkbox>
+					<mu-checkbox v-model="drawNoisy" label="噪声点（绿色）"></mu-checkbox>
+					<mu-checkbox v-model="drawNoisyTraj" label="噪声轨迹线"></mu-checkbox><br>
+					<mu-checkbox v-model="drawFiltered" label="过滤后的点（红色）"></mu-checkbox>
+					<mu-checkbox v-model="drawFilteredTraj" label="过滤后的轨迹线"></mu-checkbox>
+					<mu-checkbox v-model="prediction" label="未来预测（白色）"></mu-checkbox>
+					<br><br>
+					<strong>画布信息</strong><br>
+					宽度：{{ width }}px<br />
+					<mu-slider v-if="showCanvasControls" type="range" :min="0" :max="1800" :step="1" value="75" class="slider" v-model="widthC" />
+					高度：{{ height }}px<br />
+					<mu-slider v-if="showCanvasControls" type="range" :min="0" :max="1000" :step="1" value="75" class="slider" v-model="height" /><br>
+					状态：<code>{{ status }}</code><br />
+					已绘制 <code>{{ states.length }}</code> 个状态<br />
+					每帧耗时 <code>{{ Math.round(ms) }}</code> 毫秒
+				</div>
+			</mu-col>
+			<mu-col sm="12" md="12" lg="8" span="12">
+				<div class="grid-cell">
+					<canvas class="kalmandemo" @mouseleave="mouseLeave" @pointermove="mouseOver" ref="ccont" :width="widthC" :height="heightC"></canvas></div>
+			</mu-col>
+		</mu-row>
+		<br />
+		<br />
+		<span class="stats"> </span>
+		<mu-row gutter class="stats">
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+			<mu-col style="font-size:16px;" sm="12" md="10" lg="8" span="12">
+				<center>
+					<div style="background-color:#fff3e0; padding:20px; border-radius:8px; border-left:4px solid #ff6f00;">
+						<h4 style="margin-top:0;">📚 什么是卡尔曼滤波器？</h4>
+						<i style="line-height: 1.8;">卡尔曼滤波器是一种算法，它通过分析一系列包含噪声和误差的测量数据，估算出比单次测量更准确的真实值。它会为每个时间点的变量估算一个联合概率分布。最早的应用包括 <a href="https://github.com/chrislgarry/Apollo-11/blob/master/Luminary099/KALMAN_FILTER.agc">1969年阿波罗11号登月软件</a>。<br><br>
+						<strong>现实应用举例：</strong><br>
+						🛰️ <strong>GPS定位</strong>：你的手机GPS信号有误差，卡尔曼滤波让导航更准确<br>
+						🚗 <strong>自动驾驶</strong>：汽车传感器数据有噪声，算法帮助判断真实位置<br>
+						📱 <strong>手机陀螺仪</strong>：游戏中的运动检测需要过滤掉手抖动的干扰<br>
+						🎯 <strong>导弹追踪</strong>：军事雷达数据有干扰，需要准确预测目标位置
+						</i>
+					</div>
+				</center>
+			</mu-col>
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+		</mu-row>
+		<mu-col style="font-size:14px; padding-left: 15%;padding-right: 15%" sm="12" md="12" lg="12" span="12"> <br><br></mu-col>
+		<small style="font-size:1rem">
+			<p>
+				<a style="color:#2c3e50;" href="https://github.com/q442333521/kalman">
+					<img style="vertical-align: text-bottom;" height="24px" src="https://akveo.github.io/eva-icons/outline/svg/github-outline.svg" />&nbsp;源代码</a> | <a style="color:#2c3e50;" href="https://github.com/avivace/kalman/blob/develop/slides.pdf">演示文稿</a> | <a style="color:#2c3e50;" href="https://github.com/avivace/kalman#references-and-papers">参考文献</a>
+			</p>
+			<p style="font-size:0.85rem; color:#888;">
+				原作者：Antonio Vivace | 中文汉化版
+			</p>
+		</small>
+	</div>
+</template>
+<script>
+// randomGaussian taken from http://www.ollysco.de/2012/04/gaussian-normal-functions-in-javascript.html
+(function() {
+	/**
+	 * Returns a Gaussian Random Number around a normal distribution defined by the mean
+	 * and standard deviation parameters.
+	 *
+	 * Uses the algorithm used in Java's random class, which in turn comes from
+	 * Donald Knuth's implementation of the BoxÐMuller transform.
+	 *
+	 * @param {Number} [mean = 0.0] The mean value, default 0.0
+	 * @param {Number} [standardDeviation = 1.0] The standard deviation, default 1.0
+	 * @return {Number} A random number
+	 */
+	Math.randomGaussian = function(mean, standardDeviation) {
+		mean = defaultTo(mean, 0.0);
+		standardDeviation = defaultTo(standardDeviation, 1.0);
+
+		if (Math.randomGaussian.nextGaussian !== undefined) {
+			var nextGaussian = Math.randomGaussian.nextGaussian;
+			delete Math.randomGaussian.nextGaussian;
+			return nextGaussian * standardDeviation + mean;
+		} else {
+			var v1, v2, s, multiplier;
+			do {
+				v1 = 2 * Math.random() - 1; // between -1 and 1
+				v2 = 2 * Math.random() - 1; // between -1 and 1
+				s = v1 * v1 + v2 * v2;
+			} while (s >= 1 || s == 0);
+			multiplier = Math.sqrt((-2 * Math.log(s)) / s);
+			Math.randomGaussian.nextGaussian = v2 * multiplier;
+			return v1 * multiplier * standardDeviation + mean;
+		}
+	};
+
+	/**
+	 * Returns a normal probability density function for the given parameters.
+	 * The function will return the probability for given values of X
+	 *
+	 * @param {Number} [mean = 0] The center of the peak, usually at X = 0
+	 * @param {Number} [standardDeviation = 1.0] The width / standard deviation of the peak
+	 * @param {Number} [maxHeight = 1.0] The maximum height of the peak, usually 1
+	 * @returns {Function} A function that will return the value of the distribution at given values of X
+	 */
+	Math.getGaussianFunction = function(mean, standardDeviation, maxHeight) {
+		mean = defaultTo(mean, 0.0);
+		standardDeviation = defaultTo(standardDeviation, 1.0);
+		maxHeight = defaultTo(maxHeight, 1.0);
+
+		return function getNormal(x) {
+			return (
+				maxHeight *
+				Math.pow(
+					Math.E,
+					-Math.pow(x - mean, 2) /
+					(2 * (standardDeviation * standardDeviation))
+				)
+			);
+		};
+	};
+
+	function defaultTo(value, defaultValue) {
+		return isNaN(value) ? defaultValue : value;
+	}
+})();
+
+export default {
+	data: () => ({
+		// Canvas size
+		width: 350,
+		height: 350,
+		heightC: 700,
+		widthC: 700,
+		ctx: null,
+		// Performance
+		lastCalledTime: null,
+		fps: 0, // (Measured) framerate
+		framecount: 0,
+		status: "paused",
+		states: [],
+		framerate: 60,
+		lastPoint: null,
+		A: null,
+		B: null,
+		H: null,
+		Q: null,
+		R: null,
+		B: null,
+		c: null,
+		last: null,
+		ms: 0,
+		mode: 1,
+		options: ["鼠标", "方形路径", "一维运动", "随机路径"],
+		realPoint: null,
+		drawPhase: 0,
+		sigma: 15,
+		startBtnText: "开始",
+		startBtnIcon: "play_arrow",
+		startBtnColor: "blue",
+		traj: false,
+		drawReal: false,
+		drawNoisy: true,
+		drawNoisyTraj: false,
+		drawFiltered: true,
+		drawFilteredTraj: true,
+		drawPrediction: false,
+		prediction: false,
+		predSteps: 7,
+		ttl: 50,
+		oldmov: null,
+		oldoldmov: null,
+		cscale: 1,
+		showCanvasControls: false
+	}),
+	mounted() {
+		var c = this.$refs.ccont;
+		this.ctx = c.getContext("2d", { alpha: false });
+		this.ctx.scale(2, 2);
+		this.handleStartButton();
+	},
+	methods: {
+		handleStartButton() {
+			this.init();
+			this.frame();
+			this.showCanvasControls = false;
+			if (this.status == "paused") {
+				this.status = "running";
+				this.startBtnText = "暂停";
+				this.startBtnIcon = "pause";
+			} else {
+				this.status = "paused";
+				this.startBtnText = "开始";
+				this.startBtnIcon = "play_arrow";
+			}
+		},
+		getRandomInt(max) {
+			return Math.floor(Math.random() * Math.floor(max));
+		},
+		mouseLeave() {
+			//this.status = "paused";
+		},
+		mouseOver(event) {
+			let canvas = this.$refs.ccont;
+			var rect = canvas.getBoundingClientRect();
+
+			this.clientX = event.clientX - rect.left;
+			this.clientY = event.clientY - rect.top;
+		},
+		init() {
+			this.drawPhase = 0;
+			this.states = [];
+			this.realPoint = null;
+
+			// Sylvester is available under the window context, since we imported
+			//  it globally in the html template.
+			let m = window.$M;
+			let v = window.$V;
+
+			this.c = v([0, 0, 0, 0]);
+
+			// State Transition
+			this.A = m([
+				[1, 0, 0.2, 0],
+				[0, 1, 0, 0.2],
+				[0, 0, 1, 0],
+				[0, 0, 0, 1]
+			]);
+
+			// Input Control Matrix is ignored
+			this.B = m([
+				[1, 0, 0, 0],
+				[0, 1, 0, 0],
+				[0, 0, 1, 0],
+				[0, 0, 0, 1]
+			]);
+
+
+			this.H = m([
+				[1, 0, 1, 0],
+				[0, 1, 0, 1],
+				[0, 0, 0, 0],
+				[0, 0, 0, 0]
+			]);
+
+			// Process Noise
+			this.Q = m([
+				[0, 0, 0, 0],
+				[0, 0, 0, 0],
+				[0, 0, 0.1, 0],
+				[0, 0, 0, 0.1]
+			]);
+
+			// Measurement Noise
+			this.R = m([
+				[this.sigma, 0, 0, 0],
+				[0, this.sigma, 0, 0],
+				[0, 0, this.sigma, 0],
+				[0, 0, 0, this.sigma]
+			]);
+
+			this.lastPoint = v([0, 0, 0, 0]);
+
+			this.last = m([
+				[0, 0, 0, 0],
+				[0, 0, 0, 0],
+				[0, 0, 0, 0],
+				[0, 0, 0, 0]
+			]);
+
+			this.height = this.heightC / 2;
+			this.width = this.widthC / 2;
+			this.ctx.fillStyle = "#37474f";
+			this.ctx.fillRect(0, 0, this.width, this.height);
+
+			this.State = class State {
+				constructor(realInput, noisyInput, kalmanPoint) {
+					this.realInput = realInput;
+					this.noisyInput = noisyInput;
+					this.kalmanPoint = kalmanPoint;
+					this.dead = false;
+				}
+
+				get() {
+					return [
+						this.noisyInput.x,
+						this.noisyInput.y,
+						this.noisyInput.ttl
+					];
+				}
+				getK() {
+					return [this.kalmanPoint.x, this.kalmanPoint.y];
+				}
+				displayReal() {
+					this.realInput.display("#0d47a1");
+				}
+				displayFiltered() {
+					this.kalmanPoint.display("#dd2c00");
+				}
+				displayNoisy() {
+					this.noisyInput.display("#388e3c");
+				}
+				displayPrediction() {
+					//
+				}
+
+				update() {
+					this.realInput.update();
+					this.noisyInput.update();
+					this.kalmanPoint.update();
+					if (this.realInput.ttl == 0) this.dead = true;
+				}
+			};
+
+			var self = this;
+			this.Point = class Point {
+				constructor(x, y, ctx) {
+					this.x = x;
+					this.y = y;
+					this.ttl = self.ttl;
+					this.ctx = ctx;
+				}
+
+				display(color) {
+					// Map remaining TTL to 0-255, convert it to two hex digits
+					//  and use it as Alpha channel (ttl -> 0, alpha -> 1)
+
+					let alpha = Math.round(
+						(this.ttl * 255) / self.ttl
+					).toString(16);
+					this.ctx.beginPath();
+					this.ctx.arc(this.x, this.y, 1.25, 0, 2 * Math.PI);
+					this.ctx.fillStyle = color + alpha;
+
+					this.ctx.fill();
+
+					//this.ctx.fillRect(this.x, this.y, 4, 4);
+				}
+
+				update() {
+					this.ttl--;
+				}
+			};
+		},
+		frame() {
+			let start = performance.now();
+			if (this.status == "running") {
+				let v = window.$V;
+
+				let ctx = this.ctx;
+				this.ctx.fillStyle = "#1f1f31";
+				this.ctx.fillRect(0, 0, this.width, this.height);
+
+				let step = 4;
+				// Real point
+				if (this.mode == 0) {
+					this.realPoint = new this.Point(
+						this.clientX / 2,
+						this.clientY / 2,
+						ctx
+					);
+				} else if (this.mode == 1) {
+					if (this.realPoint == null) {
+						this.realPoint = new this.Point(180, 180, ctx);
+					}
+
+					if (this.drawPhase == 0) {
+						this.realPoint = new this.Point(
+							this.realPoint.x + step,
+							this.realPoint.y,
+							ctx
+						);
+						if (
+							this.realPoint.x >
+							this.width - Math.round(this.width / 5)
+						) {
+							this.drawPhase = 1;
+						}
+					} else if (this.drawPhase == 1) {
+						this.realPoint = new this.Point(
+							this.realPoint.x,
+							this.realPoint.y + step,
+							ctx
+						);
+						if (
+							this.realPoint.y >
+							this.height - Math.round(this.height / 5)
+						) {
+							this.drawPhase = 2;
+						}
+					} else if (this.drawPhase == 2) {
+						this.realPoint = new this.Point(
+							this.realPoint.x - step,
+							this.realPoint.y,
+							ctx
+						);
+						if (this.realPoint.x < Math.round(this.width / 5)) {
+							this.drawPhase = 3;
+						}
+					} else if (this.drawPhase == 3) {
+						this.realPoint = new this.Point(
+							this.realPoint.x,
+							this.realPoint.y - step,
+							ctx
+						);
+						if (this.realPoint.y < Math.round(this.height / 5)) {
+							this.drawPhase = 0;
+						}
+					}
+				} else if (this.mode == 2) {
+					if (this.realPoint == null) {
+						this.realPoint = new this.Point(
+							0,
+							this.height / 2,
+							ctx
+						);
+						this.drawPhase = 0;
+					} else {
+						this.realPoint = new this.Point(
+							this.realPoint.x + 5,
+							this.realPoint.y,
+							ctx
+						);
+						if (this.realPoint.x == this.width) {
+							this.realPoint.x = 0;
+							this.states = [];
+							this.lastPoint = v([
+								this.realPoint.x,
+								this.realPoint.y,
+								0,
+								0
+							]);
+						}
+					}
+				} else if (this.mode == 3) {
+					if (this.realPoint == null) {
+						this.realPoint = new this.Point(
+							this.width / 2,
+							this.height / 2,
+							ctx
+						);
+					}
+					let step = 10;
+					do {
+						var mov = Math.floor(Math.random() * 4);
+						if (mov == 1) {
+							var newX = this.realPoint.x + step;
+							var newY = this.realPoint.y;
+						} else if (mov == 2) {
+							var newX = this.realPoint.x - step;
+							var newY = this.realPoint.y;
+						} else if (mov == 3) {
+							var newX = this.realPoint.x;
+							var newY = this.realPoint.y + step;
+						} else {
+							var newX = this.realPoint.x;
+							var newY = this.realPoint.y - step;
+						}
+					} while (
+						newX >= this.width ||
+						newX <= 0 ||
+						newY >= this.height ||
+						newY <= 0 ||
+						this.oldmov == mov
+					);
+					this.oldmov = mov;
+
+					this.realPoint = new this.Point(newX, newY, ctx);
+				}
+
+				// Add noise to the clean input
+				if (this.mode != 2) {
+					var noisyX = Math.round(
+						this.realPoint.x + Math.randomGaussian(0, this.sigma)
+					);
+				} else {
+					var noisyX = this.realPoint.x;
+				}
+
+				let noisyY = Math.round(
+					this.realPoint.y + Math.randomGaussian(0, this.sigma)
+				);
+
+				let n = new this.Point(noisyX, noisyY, ctx);
+
+				/* 
+
+				KALMAN FILTER implementation
+
+				We ignore the control vector (c) and the Input Control Matrix (B)
+
+				*/
+
+				// m = [noisyX, noisyY, deltaX, deltaY]
+				let deltaX = noisyX - this.lastPoint.elements[0];
+				let deltaY = noisyY - this.lastPoint.elements[1];
+				let measurement = v([noisyX, noisyY, deltaX, deltaY]);
+
+				// PREDICTION step
+				// x = (A * x) + (B * c)
+				var x = this.A.multiply(this.lastPoint).add(
+					this.B.multiply(this.c)
+				);
+				// P = (A * P * AT) + Q
+				var P = this.A.multiply(this.last)
+					.multiply(this.A.transpose())
+					.add(this.Q);
+
+				// CORRECTION step
+				// S = (H * P * HT) + R
+				var S = this.H.multiply(P)
+					.multiply(this.H.transpose())
+					.add(this.R);
+				// K = P * HT * S-1
+				var K = P.multiply(this.H.transpose()).multiply(S.inverse());
+				// y = m - (H * x)
+				var y = measurement.subtract(this.H.multiply(x));
+
+				// x = x + (K * y)
+				//  this is the final filtered point for this iteration
+				this.lastPoint = x.add(K.multiply(y));
+				// P = (I - (K * H)) * P
+				this.last = window.Matrix.I(4)
+					.subtract(K.multiply(this.H))
+					.multiply(P);
+
+				// ---
+
+				let k = new this.Point(
+					this.lastPoint.elements[0],
+					this.lastPoint.elements[1],
+					ctx
+				);
+
+				if (this.prediction) {
+					var predX = this.lastPoint;
+					var count = this.predSteps;
+					var pPoints = Array();
+					for (var i = 0; i < count; i++) {
+						predX = this.A.multiply(predX).add(
+							this.B.multiply(this.c)
+						);
+						let x = predX.elements[0];
+						let y = predX.elements[1];
+						pPoints.push(new this.Point(x, y, ctx));
+						//var P = ((A.multiply(last_P)).multiply(A.transpose())).add(Q);
+					}
+				}
+				// Push the final state (real, noisy, filtered)
+				this.states.push(new this.State(this.realPoint, n, k));
+
+				// Draw every state in the stack, and kill the older ones
+				for (let i = this.states.length - 1; i > 0; --i) {
+					let state = this.states[i];
+					//state.display();
+					if (this.drawReal) {
+						state.displayReal();
+					}
+
+					if (this.drawNoisy) {
+						state.displayNoisy();
+					}
+					if (this.drawFiltered) {
+						state.displayFiltered();
+					}
+
+					state.update();
+
+					if (i > 1) {
+						var p1 = state.get();
+						let alpha = Math.round(
+							(p1[2] * 255) / this.ttl
+						).toString(16);
+						if (this.drawNoisyTraj) {
+							var p2 = this.states[i - 1].get();
+							ctx.strokeStyle = "#229922" + alpha;
+							ctx.lineWidth = 1;
+							ctx.beginPath();
+							ctx.moveTo(p1[0], p1[1]);
+							ctx.lineTo(p2[0], p2[1]);
+							ctx.stroke();
+						}
+
+						if (this.drawFilteredTraj) {
+							var p1 = state.getK();
+							var p2 = this.states[i - 1].getK();
+							ctx.strokeStyle = "#993399" + alpha;
+							ctx.lineWidth = 1.5;
+							ctx.beginPath();
+							ctx.moveTo(p1[0], p1[1]);
+							ctx.lineTo(p2[0], p2[1]);
+							ctx.stroke();
+						}
+					}
+
+					if (state.dead) {
+						this.states.splice(i, 1);
+					}
+				}
+				if (this.prediction) {
+					for (var i = 0; i < pPoints.length; i++) {
+						pPoints[i].display("#ffffff");
+					}
+				}
+			}
+
+			// See ya in 1000/desiredFramerate milliseconds
+			this.lastCalledTime = performance.now();
+			let ms = performance.now() - start;
+			this.ms = ms;
+			setTimeout(this.frame, 1000 / this.framerate - ms);
+		}
+	}
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+a {
+	text-decoration: none;
+}
+
+.stats {
+	font-size: 1.2rem;
+}
+
+.title {
+	font-weight: 700;
+	font-size: 3rem;
+	letter-spacing: -0.06em;
+	line-height: 1;
+	margin-bottom: 0.1em;
+}
+
+.subtitle {
+	font-weight: 500;
+	font-size: 1.6rem;
+	letter-spacing: -0.05em;
+	line-height: 1;
+	margin-top: 0;
+}
+
+.kalmandemo {
+	box-shadow: 0 27.125px 50px -12.125px rgba(0, 0, 0, 0.4);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/PIDView.vue b/src/views/PIDView.vue
new file mode 100644
index 0000000..26e1d21
--- /dev/null
+++ b/src/views/PIDView.vue
@@ -0,0 +1,584 @@
+<template>
+	<div class="pid-container">
+		<h1 class="title">机械臂 PID 闭环控制演示</h1>
+		<h3 class="subtitle">交互式 PID 控制器学习 - 实时可视化</h3>
+
+		<mu-row gutter class="stats">
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+			<mu-col style="font-size:18px;" sm="12" md="10" lg="8" span="12">
+				<center>
+					<div style="background-color:#f5f5f5; padding:15px; border-radius:8px; margin:15px 0;">
+						<h4 style="margin-top:0;">💡 什么是 PID 控制器？</h4>
+						<p style="line-height: 1.8; text-align: left;">
+							<strong>PID</strong> 是 <strong>P</strong>roportional（比例）、<strong>I</strong>ntegral（积分）、<strong>D</strong>erivative（微分）的缩写。<br>
+							就像骑自行车时保持平衡，你会根据当前倾斜程度、倾斜持续时间和倾斜速度来调整身体：<br><br>
+							<strong>🎯 P - 比例控制</strong>：看现在离目标有多远 → 距离越大，修正力度越大<br>
+							<strong>⏱️ I - 积分控制</strong>：累计误差，消除长期偏差 → 记住历史误差，防止一直差一点点<br>
+							<strong>⚡ D - 微分控制</strong>：看误差变化速度 → 快到目标时提前减速，避免冲过头<br><br>
+							三者配合，就能让机械臂精准、平稳地到达目标位置！
+						</p>
+					</div>
+
+					<p style="font-size:16px; background-color:#e3f2fd; padding:10px; border-radius:5px;">
+						<strong>👆 操作提示：</strong>拖动滑块调整目标角度，或点击"添加干扰"按钮，观察 PID 如何自动修正！
+					</p>
+				</center>
+			</mu-col>
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+		</mu-row>
+
+		<br>
+		<mu-row gutter class="stats">
+			<mu-col style="padding-left:5%;padding-right:2.5%; padding: 15px" sm="12" md="12" lg="4" span="12">
+				<div class="grid-cell control-panel">
+					<h4 style="margin-bottom: 10px;">🎮 控制面板</h4>
+
+					<mu-button @click="handleStartButton" :color="startBtnColor" full-width>
+						<mu-icon :value="startBtnIcon"></mu-icon>{{ startBtnText }}
+					</mu-button>
+					<br /><br />
+
+					<div class="control-group">
+						<strong>🎯 目标角度：</strong> <b style="color:#2196F3;">{{ targetAngle }}°</b>
+						<mu-slider :min="-90" :max="90" :step="1" v-model="targetAngle"></mu-slider>
+						<small style="display:block; margin-top:-10px; color:#666;">拖动设置机械臂的目标位置</small>
+					</div>
+
+					<div class="control-group">
+						<strong style="color:#4CAF50;">📊 P - 比例系数 Kp：</strong> <b>{{ Kp }}</b>
+						<mu-slider :min="0" :max="5" :step="0.1" v-model="Kp"></mu-slider>
+						<small style="display:block; margin-top:-10px; color:#666;">控制响应强度，越大反应越激烈</small>
+					</div>
+
+					<div class="control-group">
+						<strong style="color:#FF9800;">⏱️ I - 积分系数 Ki：</strong> <b>{{ Ki }}</b>
+						<mu-slider :min="0" :max="0.5" :step="0.01" v-model="Ki"></mu-slider>
+						<small style="display:block; margin-top:-10px; color:#666;">消除稳态误差，修正长期偏差</small>
+					</div>
+
+					<div class="control-group">
+						<strong style="color:#E91E63;">⚡ D - 微分系数 Kd：</strong> <b>{{ Kd }}</b>
+						<mu-slider :min="0" :max="2" :step="0.1" v-model="Kd"></mu-slider>
+						<small style="display:block; margin-top:-10px; color:#666;">阻尼振荡，防止超调和震荡</small>
+					</div>
+
+					<br>
+					<mu-button @click="addDisturbance" color="orange" full-width>
+						<mu-icon value="flash_on"></mu-icon> 添加随机干扰
+					</mu-button>
+					<small style="display:block; margin-top:5px; text-align:center; color:#666;">模拟外力干扰</small>
+
+					<br>
+					<mu-button @click="resetPID" color="red" full-width>
+						<mu-icon value="undo"></mu-icon> 重置参数
+					</mu-button>
+
+					<br><br>
+					<div class="info-box">
+						<strong>📈 实时数据</strong><br>
+						当前角度：<code>{{ currentAngle.toFixed(2) }}°</code><br>
+						当前误差：<code>{{ error.toFixed(2) }}°</code><br>
+						角速度：<code>{{ velocity.toFixed(2) }}°/s</code><br>
+						状态：<code>{{ status }}</code><br>
+						FPS：<code>{{ Math.round(fps) }}</code>
+					</div>
+
+					<div class="preset-buttons">
+						<h5>⚙️ 快速预设</h5>
+						<mu-button @click="setPreset('fast')" size="small" color="primary">快速响应</mu-button>
+						<mu-button @click="setPreset('smooth')" size="small" color="success">平滑稳定</mu-button>
+						<mu-button @click="setPreset('damped')" size="small" color="secondary">阻尼优先</mu-button>
+					</div>
+				</div>
+			</mu-col>
+
+			<mu-col sm="12" md="12" lg="8" span="12">
+				<div class="grid-cell">
+					<canvas
+						ref="armCanvas"
+						:width="canvasWidth"
+						:height="canvasHeight"
+						class="arm-canvas"
+					></canvas>
+					<div class="legend">
+						<span class="legend-item"><span class="dot" style="background:#2196F3;"></span> 目标角度</span>
+						<span class="legend-item"><span class="dot" style="background:#4CAF50;"></span> 当前角度</span>
+						<span class="legend-item"><span class="dot" style="background:#FF5722;"></span> 机械臂</span>
+					</div>
+				</div>
+			</mu-col>
+		</mu-row>
+
+		<br><br>
+		<mu-row gutter class="stats">
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+			<mu-col style="font-size:16px;" sm="12" md="10" lg="8" span="12">
+				<center>
+					<div style="background-color:#fff3e0; padding:20px; border-radius:8px; border-left:4px solid #ff6f00;">
+						<h4 style="margin-top:0;">📚 PID 控制器的现实应用</h4>
+						<div style="line-height: 1.8; text-align:left;">
+							<strong>🏭 工业机器人</strong>：焊接、装配、搬运机器人的精确定位<br>
+							<strong>🚁 无人机</strong>：姿态稳定、高度控制、航向保持<br>
+							<strong>🚗 汽车</strong>：巡航控制、电子稳定系统、自动泊车<br>
+							<strong>🌡️ 温度控制</strong>：空调、恒温箱、化工反应器<br>
+							<strong>🛩️ 飞行控制</strong>：飞机自动驾驶仪、火箭姿态控制<br>
+							<strong>🎮 游戏手柄</strong>：震动反馈、力反馈方向盘
+						</div>
+					</div>
+
+					<br>
+					<div style="background-color:#e8f5e9; padding:20px; border-radius:8px; border-left:4px solid #4CAF50;">
+						<h4 style="margin-top:0;">🔧 调参技巧</h4>
+						<div style="line-height: 1.8; text-align:left;">
+							<strong>1️⃣ 先调 P</strong>：从 0 开始慢慢增大，直到系统开始振荡<br>
+							<strong>2️⃣ 再加 D</strong>：增加 D 来抑制振荡，让系统更稳定<br>
+							<strong>3️⃣ 最后调 I</strong>：如果有稳态误差（一直差一点点），加一点 I<br>
+							<strong>⚠️ 注意</strong>：I 不要太大，否则会导致超调和振荡<br><br>
+							<strong>💡 小贴士</strong>：试试把 Kp 调到 2.0，Kd 调到 0.5，看看效果！
+						</div>
+					</div>
+				</center>
+			</mu-col>
+			<mu-col style="font-size:16px;" sm="0" md="1" lg="2" span="12"></mu-col>
+		</mu-row>
+
+		<mu-col style="font-size:14px; padding-left: 15%;padding-right: 15%" sm="12" md="12" lg="12" span="12"> <br><br></mu-col>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PIDView',
+	data: () => ({
+		// Canvas
+		canvasWidth: 800,
+		canvasHeight: 600,
+		ctx: null,
+
+		// Simulation state
+		status: 'paused',
+		startBtnText: '开始',
+		startBtnIcon: 'play_arrow',
+		startBtnColor: 'blue',
+
+		// Arm properties
+		armLength: 200,
+		currentAngle: 0,  // 当前角度
+		targetAngle: 45,  // 目标角度
+		velocity: 0,      // 角速度
+
+		// PID parameters
+		Kp: 1.5,    // 比例系数
+		Ki: 0.05,   // 积分系数
+		Kd: 0.8,    // 微分系数
+
+		// PID state
+		error: 0,           // 当前误差
+		lastError: 0,       // 上次误差
+		integral: 0,        // 误差积分
+
+		// Performance
+		lastTime: null,
+		fps: 60,
+
+		// Animation
+		animationId: null
+	}),
+
+	mounted() {
+		const canvas = this.$refs.armCanvas;
+		this.ctx = canvas.getContext('2d');
+		this.drawScene();
+	},
+
+	beforeDestroy() {
+		if (this.animationId) {
+			cancelAnimationFrame(this.animationId);
+		}
+	},
+
+	methods: {
+		handleStartButton() {
+			if (this.status === 'paused') {
+				this.status = 'running';
+				this.startBtnText = '暂停';
+				this.startBtnIcon = 'pause';
+				this.startBtnColor = 'orange';
+				this.lastTime = performance.now();
+				this.animate();
+			} else {
+				this.status = 'paused';
+				this.startBtnText = '开始';
+				this.startBtnIcon = 'play_arrow';
+				this.startBtnColor = 'blue';
+				if (this.animationId) {
+					cancelAnimationFrame(this.animationId);
+				}
+			}
+		},
+
+		animate() {
+			if (this.status !== 'running') return;
+
+			const currentTime = performance.now();
+			const dt = this.lastTime ? (currentTime - this.lastTime) / 1000 : 0.016;
+			this.lastTime = currentTime;
+
+			// 计算 FPS
+			if (dt > 0) {
+				this.fps = 1 / dt;
+			}
+
+			// PID 控制
+			this.error = this.targetAngle - this.currentAngle;
+			this.integral += this.error * dt;
+
+			// 限制积分项防止积分饱和
+			this.integral = Math.max(-100, Math.min(100, this.integral));
+
+			const derivative = (this.error - this.lastError) / dt;
+
+			// PID 输出（力矩）
+			const output = this.Kp * this.error +
+			               this.Ki * this.integral +
+			               this.Kd * derivative;
+
+			// 简化的动力学模型（考虑摩擦和惯性）
+			const friction = -0.5 * this.velocity;  // 摩擦力
+			const inertia = 2.0;  // 转动惯量
+
+			const acceleration = (output + friction) / inertia;
+			this.velocity += acceleration * dt;
+			this.currentAngle += this.velocity * dt;
+
+			this.lastError = this.error;
+
+			// 绘制场景
+			this.drawScene();
+
+			// 继续动画
+			this.animationId = requestAnimationFrame(this.animate);
+		},
+
+		drawScene() {
+			const canvas = this.$refs.armCanvas;
+			const ctx = this.ctx;
+
+			// 清空画布
+			ctx.fillStyle = '#1a1a2e';
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+			const centerX = canvas.width / 2;
+			const centerY = canvas.height / 2;
+
+			// 绘制网格
+			this.drawGrid(ctx, centerX, centerY);
+
+			// 绘制角度刻度
+			this.drawAngleMarkers(ctx, centerX, centerY);
+
+			// 绘制目标角度指示线
+			this.drawTargetLine(ctx, centerX, centerY);
+
+			// 绘制机械臂
+			this.drawArm(ctx, centerX, centerY);
+
+			// 绘制信息文本
+			this.drawInfo(ctx);
+		},
+
+		drawGrid(ctx, cx, cy) {
+			ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+			ctx.lineWidth = 1;
+
+			// 画圆形网格
+			for (let r = 50; r <= 250; r += 50) {
+				ctx.beginPath();
+				ctx.arc(cx, cy, r, 0, Math.PI * 2);
+				ctx.stroke();
+			}
+
+			// 画径向线
+			for (let angle = 0; angle < 360; angle += 30) {
+				const rad = (angle * Math.PI) / 180;
+				ctx.beginPath();
+				ctx.moveTo(cx, cy);
+				ctx.lineTo(cx + Math.cos(rad) * 250, cy + Math.sin(rad) * 250);
+				ctx.stroke();
+			}
+		},
+
+		drawAngleMarkers(ctx, cx, cy) {
+			ctx.fillStyle = '#ffffff';
+			ctx.font = '14px Inter';
+			ctx.textAlign = 'center';
+
+			const markers = [-90, -60, -30, 0, 30, 60, 90];
+			markers.forEach(angle => {
+				const rad = ((angle - 90) * Math.PI) / 180;
+				const x = cx + Math.cos(rad) * 270;
+				const y = cy + Math.sin(rad) * 270;
+				ctx.fillText(angle + '°', x, y);
+			});
+		},
+
+		drawTargetLine(ctx, cx, cy) {
+			const rad = ((this.targetAngle - 90) * Math.PI) / 180;
+
+			// 绘制目标扇形区域
+			ctx.fillStyle = 'rgba(33, 150, 243, 0.1)';
+			ctx.beginPath();
+			ctx.moveTo(cx, cy);
+			ctx.arc(cx, cy, this.armLength + 20, rad - 0.05, rad + 0.05);
+			ctx.closePath();
+			ctx.fill();
+
+			// 绘制目标线
+			ctx.strokeStyle = '#2196F3';
+			ctx.lineWidth = 3;
+			ctx.setLineDash([10, 5]);
+			ctx.beginPath();
+			ctx.moveTo(cx, cy);
+			ctx.lineTo(
+				cx + Math.cos(rad) * (this.armLength + 30),
+				cy + Math.sin(rad) * (this.armLength + 30)
+			);
+			ctx.stroke();
+			ctx.setLineDash([]);
+
+			// 目标点
+			ctx.fillStyle = '#2196F3';
+			ctx.beginPath();
+			ctx.arc(
+				cx + Math.cos(rad) * this.armLength,
+				cy + Math.sin(rad) * this.armLength,
+				8,
+				0,
+				Math.PI * 2
+			);
+			ctx.fill();
+		},
+
+		drawArm(ctx, cx, cy) {
+			const rad = ((this.currentAngle - 90) * Math.PI) / 180;
+			const endX = cx + Math.cos(rad) * this.armLength;
+			const endY = cy + Math.sin(rad) * this.armLength;
+
+			// 绘制机械臂阴影
+			ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+			ctx.lineWidth = 16;
+			ctx.lineCap = 'round';
+			ctx.beginPath();
+			ctx.moveTo(cx + 2, cy + 2);
+			ctx.lineTo(endX + 2, endY + 2);
+			ctx.stroke();
+
+			// 绘制机械臂主体
+			const gradient = ctx.createLinearGradient(cx, cy, endX, endY);
+			gradient.addColorStop(0, '#FF5722');
+			gradient.addColorStop(1, '#FF9800');
+
+			ctx.strokeStyle = gradient;
+			ctx.lineWidth = 14;
+			ctx.beginPath();
+			ctx.moveTo(cx, cy);
+			ctx.lineTo(endX, endY);
+			ctx.stroke();
+
+			// 绘制关节
+			ctx.fillStyle = '#424242';
+			ctx.beginPath();
+			ctx.arc(cx, cy, 20, 0, Math.PI * 2);
+			ctx.fill();
+
+			ctx.fillStyle = '#FF5722';
+			ctx.beginPath();
+			ctx.arc(cx, cy, 15, 0, Math.PI * 2);
+			ctx.fill();
+
+			// 绘制末端执行器
+			ctx.fillStyle = '#4CAF50';
+			ctx.beginPath();
+			ctx.arc(endX, endY, 12, 0, Math.PI * 2);
+			ctx.fill();
+
+			// 绘制当前角度弧线
+			ctx.strokeStyle = '#4CAF50';
+			ctx.lineWidth = 2;
+			ctx.beginPath();
+			ctx.arc(cx, cy, 80, -Math.PI / 2, rad, this.currentAngle > 0);
+			ctx.stroke();
+		},
+
+		drawInfo(ctx) {
+			// 绘制误差显示
+			const errorText = `误差: ${this.error.toFixed(2)}°`;
+			ctx.fillStyle = Math.abs(this.error) < 1 ? '#4CAF50' : '#FF9800';
+			ctx.font = 'bold 20px Inter';
+			ctx.textAlign = 'left';
+			ctx.fillText(errorText, 20, 40);
+
+			// 绘制 PID 分量
+			const p = this.Kp * this.error;
+			const i = this.Ki * this.integral;
+			const d = this.Kd * (this.error - this.lastError);
+
+			ctx.font = '14px Inter';
+			ctx.fillStyle = '#4CAF50';
+			ctx.fillText(`P: ${p.toFixed(2)}`, 20, 70);
+			ctx.fillStyle = '#FF9800';
+			ctx.fillText(`I: ${i.toFixed(2)}`, 20, 90);
+			ctx.fillStyle = '#E91E63';
+			ctx.fillText(`D: ${d.toFixed(2)}`, 20, 110);
+		},
+
+		addDisturbance() {
+			// 添加随机干扰
+			const disturbance = (Math.random() - 0.5) * 60;
+			this.currentAngle += disturbance;
+			this.velocity += (Math.random() - 0.5) * 20;
+		},
+
+		resetPID() {
+			this.Kp = 1.5;
+			this.Ki = 0.05;
+			this.Kd = 0.8;
+			this.targetAngle = 45;
+			this.currentAngle = 0;
+			this.velocity = 0;
+			this.error = 0;
+			this.lastError = 0;
+			this.integral = 0;
+		},
+
+		setPreset(type) {
+			switch(type) {
+				case 'fast':
+					this.Kp = 3.0;
+					this.Ki = 0.1;
+					this.Kd = 0.5;
+					break;
+				case 'smooth':
+					this.Kp = 1.2;
+					this.Ki = 0.02;
+					this.Kd = 1.5;
+					break;
+				case 'damped':
+					this.Kp = 1.0;
+					this.Ki = 0.01;
+					this.Kd = 2.0;
+					break;
+			}
+			this.integral = 0;
+		}
+	}
+}
+</script>
+
+<style scoped>
+.pid-container {
+	padding: 20px;
+	max-width: 1400px;
+	margin: 0 auto;
+}
+
+.title {
+	font-weight: 700;
+	font-size: 2.8rem;
+	letter-spacing: -0.06em;
+	line-height: 1;
+	margin-bottom: 0.1em;
+	color: #2c3e50;
+}
+
+.subtitle {
+	font-weight: 500;
+	font-size: 1.5rem;
+	letter-spacing: -0.05em;
+	line-height: 1;
+	margin-top: 0;
+	color: #546e7a;
+}
+
+.control-panel {
+	background: white;
+	padding: 20px;
+	border-radius: 12px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.control-group {
+	margin-bottom: 25px;
+}
+
+.arm-canvas {
+	width: 100%;
+	max-width: 800px;
+	height: auto;
+	border-radius: 12px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+	background: #1a1a2e;
+}
+
+.info-box {
+	background: #f5f5f5;
+	padding: 15px;
+	border-radius: 8px;
+	border-left: 4px solid #2196F3;
+	font-size: 0.95rem;
+	line-height: 1.8;
+}
+
+.legend {
+	margin-top: 15px;
+	display: flex;
+	justify-content: center;
+	gap: 20px;
+	flex-wrap: wrap;
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 0.9rem;
+	color: #546e7a;
+}
+
+.dot {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.preset-buttons {
+	margin-top: 20px;
+	padding: 15px;
+	background: #f5f5f5;
+	border-radius: 8px;
+}
+
+.preset-buttons h5 {
+	margin-top: 0;
+	margin-bottom: 10px;
+}
+
+.preset-buttons button {
+	margin: 5px;
+}
+
+@media (max-width: 768px) {
+	.title {
+		font-size: 2rem;
+	}
+
+	.subtitle {
+		font-size: 1.2rem;
+	}
+
+	.canvasWidth {
+		width: 100%;
+	}
+}
+</style>
