feat: 实现简易示波器功能
This commit is contained in:
parent
2e084bfb58
commit
a9ab5926ed
|
|
@ -12,6 +12,7 @@
|
||||||
"@types/lodash": "^4.17.16",
|
"@types/lodash": "^4.17.16",
|
||||||
"@vueuse/core": "^13.5.0",
|
"@vueuse/core": "^13.5.0",
|
||||||
"async-mutex": "^0.5.0",
|
"async-mutex": "^0.5.0",
|
||||||
|
"echarts": "^5.6.0",
|
||||||
"highlight.js": "^11.11.1",
|
"highlight.js": "^11.11.1",
|
||||||
"konva": "^9.3.20",
|
"konva": "^9.3.20",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
|
@ -24,6 +25,7 @@
|
||||||
"ts-log": "^2.2.7",
|
"ts-log": "^2.2.7",
|
||||||
"ts-results-es": "^5.0.1",
|
"ts-results-es": "^5.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-echarts": "^7.0.3",
|
||||||
"vue-konva": "^3.2.1",
|
"vue-konva": "^3.2.1",
|
||||||
"vue-router": "4",
|
"vue-router": "4",
|
||||||
"yocto-queue": "^1.2.1",
|
"yocto-queue": "^1.2.1",
|
||||||
|
|
@ -2618,6 +2620,22 @@
|
||||||
"node": ">=8"
|
"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": {
|
"node_modules/electron-to-chromium": {
|
||||||
"version": "1.5.140",
|
"version": "1.5.140",
|
||||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.140.tgz",
|
"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": {
|
"node_modules/vue-konva": {
|
||||||
"version": "3.2.1",
|
"version": "3.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/vue-konva/-/vue-konva-3.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-konva/-/vue-konva-3.2.1.tgz",
|
||||||
|
|
@ -4788,6 +4851,21 @@
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/colinhacks"
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
"@types/lodash": "^4.17.16",
|
"@types/lodash": "^4.17.16",
|
||||||
"@vueuse/core": "^13.5.0",
|
"@vueuse/core": "^13.5.0",
|
||||||
"async-mutex": "^0.5.0",
|
"async-mutex": "^0.5.0",
|
||||||
|
"echarts": "^5.6.0",
|
||||||
"highlight.js": "^11.11.1",
|
"highlight.js": "^11.11.1",
|
||||||
"konva": "^9.3.20",
|
"konva": "^9.3.20",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
|
@ -30,6 +31,7 @@
|
||||||
"ts-log": "^2.2.7",
|
"ts-log": "^2.2.7",
|
||||||
"ts-results-es": "^5.0.1",
|
"ts-results-es": "^5.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-echarts": "^7.0.3",
|
||||||
"vue-konva": "^3.2.1",
|
"vue-konva": "^3.2.1",
|
||||||
"vue-router": "4",
|
"vue-router": "4",
|
||||||
"yocto-queue": "^1.2.1",
|
"yocto-queue": "^1.2.1",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 };
|
||||||
|
|
@ -1,23 +1,27 @@
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
import HomeView from '../views/HomeView.vue'
|
import HomeView from "../views/HomeView.vue";
|
||||||
import LoginView from '../views/LoginView.vue'
|
import LoginView from "../views/LoginView.vue";
|
||||||
import LabView from '../views/LabView.vue'
|
import LabView from "../views/LabView.vue";
|
||||||
import ProjectView from '../views/ProjectView.vue'
|
import ProjectView from "../views/ProjectView.vue";
|
||||||
import TestView from '../views/TestView.vue'
|
import TestView from "../views/TestView.vue";
|
||||||
import UserView from '../views/UserView.vue'
|
import UserView from "../views/UserView.vue";
|
||||||
import AdminView from '../views/AdminView.vue'
|
import AdminView from "../views/AdminView.vue";
|
||||||
import VideoStreamView from '../views/VideoStreamView.vue'
|
import VideoStreamView from "../views/VideoStreamView.vue";
|
||||||
|
import OscilloscopeView from "@/views/OscilloscopeView.vue";
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
{path: '/', name: 'home', component: HomeView},
|
{ path: "/", name: "home", component: HomeView },
|
||||||
{path: '/login', name: 'login', component: LoginView},
|
{ path: "/login", name: "login", component: LoginView },
|
||||||
{path: '/lab/:id',name: 'lab', component: LabView},
|
{ path: "/lab/:id", name: "lab", component: LabView },
|
||||||
{path: '/project',name: 'project',component: ProjectView},
|
{ path: "/project", name: "project", component: ProjectView },
|
||||||
{path: '/test', name: 'test', component: TestView},
|
{ path: "/test", name: "test", component: TestView },
|
||||||
{path: '/user', name: 'user', component: UserView},
|
{ path: "/user", name: "user", component: UserView },
|
||||||
{path: '/admin', name: 'admin', component: AdminView}, {path: '/video-stream',name: 'video-stream',component: VideoStreamView}]
|
{ 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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue