From d82e495103071008dda9ef6db3f89b4ea2106d6c Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 03:00:39 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=A0=8F=E5=92=8C=20PID=20=E6=8E=A7=E5=88=B6=E5=99=A8=E5=AD=A6?= =?UTF-8?q?=E4=B9=A0=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增功能： - 添加顶部导航栏，支持多页面切换 - 集成 Vue Router 实现单页应用 - 创建机械臂 PID 闭环控制演示页面 - 实时可视化机械臂运动 - 交互式 PID 参数调节（Kp, Ki, Kd） - 目标角度设置和干扰测试 - 实时显示误差、速度等数据 - 预设参数快速切换 - 详细的中文说明和使用指南 - 现代化 UI 设计，渐变背景和阴影效果 - 响应式布局支持移动端 技术实现： - Canvas 绘图实现机械臂可视化 - PID 算法实现闭环控制 - 动力学模型模拟（惯性、摩擦） - requestAnimationFrame 动画循环 --- package-lock.json | 9 +- package.json | 3 +- src/App.vue | 15 +- src/components/NavBar.vue | 140 ++++++++ src/main.js | 2 + src/router/index.js | 33 ++ src/views/KalmanView.vue | 713 ++++++++++++++++++++++++++++++++++++++ src/views/PIDView.vue | 584 +++++++++++++++++++++++++++++++ 8 files changed, 1493 insertions(+), 6 deletions(-) create mode 100644 src/components/NavBar.vue create mode 100644 src/router/index.js create mode 100644 src/views/KalmanView.vue create mode 100644 src/views/PIDView.vue 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/src/App.vue b/src/App.vue index fee2136..89a7501 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,15 +1,16 @@ @@ -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; } 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 @@ + + + + + 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 @@ + + + + \ 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 @@ + + + + + From 7a3c683cd647f44a0a82fef6dc066740a9386e91 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 03:03:43 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=83=A8=E7=BD=B2?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=9A=E6=B7=BB=E5=8A=A0=20.nojekyll=20?= =?UTF-8?q?=E5=92=8C=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/.nojekyll | 0 public/index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 public/.nojekyll 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 @@ - kalman + 控制算法学习平台 - 卡尔曼滤波器 & PID 控制器