diff --git a/package-lock.json b/package-lock.json
index 8837735..61712d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@types/lodash": "^4.17.16",
         "@vueuse/core": "^13.5.0",
         "async-mutex": "^0.5.0",
+        "echarts": "^5.6.0",
         "highlight.js": "^11.11.1",
         "konva": "^9.3.20",
         "lodash": "^4.17.21",
@@ -24,6 +25,7 @@
         "ts-log": "^2.2.7",
         "ts-results-es": "^5.0.1",
         "vue": "^3.5.13",
+        "vue-echarts": "^7.0.3",
         "vue-konva": "^3.2.1",
         "vue-router": "4",
         "yocto-queue": "^1.2.1",
@@ -2618,6 +2620,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.140",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.140.tgz",
@@ -4660,6 +4678,51 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-7.0.3.tgz",
+      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-konva": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vue-konva/-/vue-konva-3.2.1.tgz",
@@ -4788,6 +4851,21 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }
diff --git a/package.json b/package.json
index 25ddf1a..c989293 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@types/lodash": "^4.17.16",
     "@vueuse/core": "^13.5.0",
     "async-mutex": "^0.5.0",
+    "echarts": "^5.6.0",
     "highlight.js": "^11.11.1",
     "konva": "^9.3.20",
     "lodash": "^4.17.21",
@@ -30,6 +31,7 @@
     "ts-log": "^2.2.7",
     "ts-results-es": "^5.0.1",
     "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
     "vue-konva": "^3.2.1",
     "vue-router": "4",
     "yocto-queue": "^1.2.1",
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Alert/index.ts b/src/components/Alert/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Oscilloscope/WaveformDisplay.vue b/src/components/Oscilloscope/WaveformDisplay.vue
new file mode 100644
index 0000000..4841334
--- /dev/null
+++ b/src/components/Oscilloscope/WaveformDisplay.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="w-full h-100">
+    <v-chart v-if="true" class="w-full h-full" :option="option" autoresize />
+    <div
+      v-else
+      class="w-full h-full flex items-center justify-center text-gray-500"
+    >
+      暂无数据
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults } from "vue";
+import { forEach } from "lodash";
+import VChart from "vue-echarts";
+
+// Echarts
+import { use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  GridComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import type { ComposeOption } from "echarts/core";
+import type { LineSeriesOption } from "echarts/charts";
+import type {
+  TitleComponentOption,
+  TooltipComponentOption,
+  LegendComponentOption,
+  ToolboxComponentOption,
+  DataZoomComponentOption,
+  GridComponentOption,
+} from "echarts/components";
+
+use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+]);
+
+type EChartsOption = ComposeOption<
+  | TitleComponentOption
+  | TooltipComponentOption
+  | LegendComponentOption
+  | ToolboxComponentOption
+  | DataZoomComponentOption
+  | GridComponentOption
+  | LineSeriesOption
+>;
+
+const props = withDefaults(
+  defineProps<{
+    data?: {
+      x: number[];
+      y: number[][];
+    };
+  }>(),
+  {
+    data: () => ({
+      x: [],
+      y: [],
+    }),
+  },
+);
+
+const hasData = computed(() => {
+  return (
+    props.data &&
+    props.data.x &&
+    props.data.y &&
+    props.data.x.length > 0 &&
+    props.data.y.length > 0 &&
+    props.data.y.some((channel) => channel.length > 0)
+  );
+});
+
+const option = computed((): EChartsOption => {
+  const series: LineSeriesOption[] = [];
+
+  forEach(props.data.y, (yData, index) => {
+    // 将 x 和 y 数据组合成 [x, y] 格式
+    const seriesData = props.data.x.map((xValue, i) => [xValue, yData[i] || 0]);
+
+    series.push({
+      type: "line",
+      name: `通道 ${index + 1}`,
+      data: seriesData,
+      smooth: false, // 示波器通常显示原始波形
+      symbol: "none", // 不显示数据点标记
+      lineStyle: {
+        width: 2,
+      },
+    });
+  });
+
+  return {
+    grid: {
+      left: "10%",
+      right: "10%",
+      top: "15%",
+      bottom: "25%",
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: (params: any) => {
+        let result = `时间: ${params[0].data[0].toFixed(2)} ms<br/>`;
+        params.forEach((param: any) => {
+          result += `${param.seriesName}: ${param.data[1].toFixed(3)} V<br/>`;
+        });
+        return result;
+      },
+    },
+    legend: {
+      top: "5%",
+      data: series.map((s) => s.name) as string[],
+    },
+    toolbox: {
+      feature: {
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    dataZoom: [
+      {
+        type: "inside",
+        start: 0,
+        end: 100,
+      },
+      {
+        start: 0,
+        end: 100,
+      },
+    ],
+    xAxis: {
+      type: "value",
+      name: "时间 (ms)",
+      nameLocation: "middle",
+      nameGap: 30,
+      axisLine: {
+        show: true,
+      },
+      axisTick: {
+        show: true,
+      },
+    },
+    yAxis: {
+      type: "value",
+      name: "电压 (V)",
+      nameLocation: "middle",
+      nameGap: 40,
+      axisLine: {
+        show: true,
+      },
+      axisTick: {
+        show: true,
+      },
+    },
+    series: series,
+  };
+});
+</script>
diff --git a/src/components/Oscilloscope/index.ts b/src/components/Oscilloscope/index.ts
new file mode 100644
index 0000000..a06dd05
--- /dev/null
+++ b/src/components/Oscilloscope/index.ts
@@ -0,0 +1,26 @@
+import WaveformDisplay from "./WaveformDisplay.vue";
+
+// Test data generator
+const generateTestData = () => {
+    const sampleRate = 1000; // 1kHz
+    const duration = 0.1; // 10ms
+    const points = Math.floor(sampleRate * duration);
+    
+    const x = Array.from({ length: points }, (_, i) => i / sampleRate * 1000); // time in ms
+    
+    // Generate multiple channels with different waveforms
+    const y = [
+        // Channel 1: Sine wave 50Hz
+        Array.from({ length: points }, (_, i) => Math.sin(2 * Math.PI * 50 * i / sampleRate) * 3.3),
+        // Channel 2: Square wave 25Hz
+        Array.from({ length: points }, (_, i) => Math.sign(Math.sin(2 * Math.PI * 25 * i / sampleRate)) * 5),
+        // Channel 3: Sawtooth wave 33Hz
+        Array.from({ length: points }, (_, i) => (2 * ((33 * i / sampleRate) % 1) - 1) * 2.5),
+        // Channel 4: Noise + DC offset
+        Array.from({ length: points }, () => Math.random() * 0.5 + 1.5)
+    ];
+    
+    return { x, y };
+};
+
+export { WaveformDisplay, generateTestData };
diff --git a/src/router/index.ts b/src/router/index.ts
index c36ca1b..f9761e5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,23 +1,27 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import LoginView from '../views/LoginView.vue'
-import LabView from '../views/LabView.vue'
-import ProjectView from '../views/ProjectView.vue'
-import TestView from '../views/TestView.vue'
-import UserView from '../views/UserView.vue'
-import AdminView from '../views/AdminView.vue'
-import VideoStreamView from '../views/VideoStreamView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+import LoginView from "../views/LoginView.vue";
+import LabView from "../views/LabView.vue";
+import ProjectView from "../views/ProjectView.vue";
+import TestView from "../views/TestView.vue";
+import UserView from "../views/UserView.vue";
+import AdminView from "../views/AdminView.vue";
+import VideoStreamView from "../views/VideoStreamView.vue";
+import OscilloscopeView from "@/views/OscilloscopeView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {path: '/',       name: 'home',   component: HomeView},
-    {path: '/login',  name: 'login',  component: LoginView},
-    {path: '/lab/:id',name: 'lab',    component: LabView},
-    {path: '/project',name: 'project',component: ProjectView},
-    {path: '/test',   name: 'test',   component: TestView},
-    {path: '/user',   name: 'user',   component: UserView},
-    {path: '/admin',  name: 'admin',  component: AdminView},    {path: '/video-stream',name: 'video-stream',component: VideoStreamView}]
-})
+    { path: "/", name: "home", component: HomeView },
+    { path: "/login", name: "login", component: LoginView },
+    { path: "/lab/:id", name: "lab", component: LabView },
+    { path: "/project", name: "project", component: ProjectView },
+    { path: "/test", name: "test", component: TestView },
+    { path: "/user", name: "user", component: UserView },
+    { path: "/admin", name: "admin", component: AdminView },
+    { path: "/video-stream", name: "videoStream", component: VideoStreamView },
+    { path: "/oscilloscope", name: "oscilloscope", component: OscilloscopeView },
+  ],
+});
 
-export default router
+export default router;
diff --git a/src/views/OscilloscopeView.vue b/src/views/OscilloscopeView.vue
new file mode 100644
index 0000000..a3c6857
--- /dev/null
+++ b/src/views/OscilloscopeView.vue
@@ -0,0 +1,224 @@
+<template>
+  <div
+    class="min-h-screen bg-base-100 flex flex-col mx-auto p-6 space-y-6 container"
+  >
+    <!-- 设置 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">
+          <Settings class="w-5 h-5" />
+          示波器配置
+        </h2>
+
+        <div class="flex flex-row justify-around gap-4">
+          <div class="grow">
+            <label class="label">
+              <Globe class="w-4 h-4" />
+              <span class="label-text">IP 地址</span>
+            </label>
+            <div class="input-group">
+              <input
+                type="text"
+                placeholder="192.168.1.100"
+                class="input input-bordered flex-1"
+                v-model="tempConfig.ip"
+                :class="{ 'input-error': ipError }"
+              />
+            </div>
+            <label class="label" v-if="ipError">
+              <span class="label-text-alt text-error">{{ ipError }}</span>
+            </label>
+          </div>
+
+          <div class="grow">
+            <label class="label">
+              <Network class="w-4 h-4" />
+              <span class="label-text">端口</span>
+            </label>
+            <div class="input-group">
+              <input
+                type="number"
+                placeholder="8080"
+                class="input input-bordered flex-1"
+                v-model.number="tempConfig.port"
+                :class="{ 'input-error': portError }"
+              />
+            </div>
+            <label class="label" v-if="portError">
+              <span class="label-text-alt text-error">{{ portError }}</span>
+            </label>
+          </div>
+        </div>
+
+        <div class="card-actions justify-end mt-4">
+          <button
+            class="btn btn-ghost"
+            @click="resetConfig"
+            :disabled="isDefault"
+          >
+            <RotateCcw class="w-4 h-4" />
+            重置
+          </button>
+          <button
+            class="btn btn-primary"
+            @click="saveConfig"
+            :disabled="!isValidConfig || !hasChanges"
+            :class="{ loading: isSaving }"
+          >
+            <Save class="w-4 h-4" v-if="!isSaving" />
+            保存配置
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 波形展示 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">
+          <Activity class="w-5 h-5" />
+          波形显示
+        </h2>
+        <WaveformDisplay :data="generateTestData()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch } from "vue";
+import { useStorage } from "@vueuse/core";
+import { z } from "zod";
+import {
+  Settings,
+  Globe,
+  Network,
+  Save,
+  RotateCcw,
+  CheckCircle,
+  Activity,
+} from "lucide-vue-next";
+import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
+
+// 配置类型定义
+const configSchema = z.object({
+  ip: z
+    .string()
+    .ip({ version: "v4", message: "请输入有效的IPv4地址" })
+    .min(1, "请输入IP地址"),
+  port: z
+    .number()
+    .int("端口必须是整数")
+    .min(1, "端口必须大于0")
+    .max(65535, "端口必须小于等于65535"),
+});
+
+type OscilloscopeConfig = z.infer<typeof configSchema>;
+
+// 默认配置
+const defaultConfig: OscilloscopeConfig = {
+  ip: "192.168.1.100",
+  port: 8080,
+};
+
+// 使用 VueUse 存储配置
+const config = useStorage<OscilloscopeConfig>(
+  "oscilloscope-config",
+  defaultConfig,
+  localStorage,
+  {
+    serializer: {
+      read: (value: string) => {
+        try {
+          const parsed = JSON.parse(value);
+          const result = configSchema.safeParse(parsed);
+          return result.success ? result.data : defaultConfig;
+        } catch {
+          return defaultConfig;
+        }
+      },
+      write: (value: OscilloscopeConfig) => JSON.stringify(value),
+    },
+  },
+);
+
+// 临时配置（用于编辑）
+const tempConfig = reactive<OscilloscopeConfig>({
+  ip: config.value.ip,
+  port: config.value.port,
+});
+
+// 状态管理
+const isSaving = ref(false);
+
+// 验证错误
+const ipError = computed(() => {
+  if (!tempConfig.ip) return "";
+  const result = z.string().ip({ version: "v4" }).safeParse(tempConfig.ip);
+  return result.success
+    ? ""
+    : result.error.errors[0]?.message || "无效的IP地址";
+});
+
+const portError = computed(() => {
+  if (!tempConfig.port && tempConfig.port !== 0) return "";
+  const result = z.number().int().min(1).max(65535).safeParse(tempConfig.port);
+  return result.success ? "" : result.error.errors[0]?.message || "无效的端口";
+});
+
+// 检查配置是否有效
+const isValidConfig = computed(() => {
+  const result = configSchema.safeParse(tempConfig);
+  return result.success;
+});
+
+// 检查是否有更改
+const hasChanges = computed(() => {
+  return (
+    tempConfig.ip !== config.value.ip || tempConfig.port !== config.value.port
+  );
+});
+
+const isDefault = computed(() => {
+  return (
+    defaultConfig.ip === tempConfig.ip && defaultConfig.port === tempConfig.port
+  );
+});
+
+// 保存配置
+const saveConfig = async () => {
+  if (!isValidConfig.value) return;
+
+  isSaving.value = true;
+
+  try {
+    // 模拟保存延迟
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    config.value = {
+      ip: tempConfig.ip,
+      port: tempConfig.port,
+    };
+  } catch (error) {
+    console.error("保存配置失败:", error);
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+// 重置配置
+const resetConfig = () => {
+  tempConfig.ip = defaultConfig.ip;
+  tempConfig.port = defaultConfig.port;
+};
+
+// 监听存储的配置变化，同步到临时配置
+watch(
+  config,
+  (newConfig) => {
+    tempConfig.ip = newConfig.ip;
+    tempConfig.port = newConfig.port;
+  },
+  { deep: true },
+);
+</script>