Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab
This commit is contained in:
alivender
commit
23236b22bd
10
flake.lock
10
flake.lock
|
|
@ -2,12 +2,12 @@
|
|||
"nodes": {
|
||||
"nixpkgs": {
|
||||
"locked": {
|
||||
"lastModified": 1741246872,
|
||||
"narHash": "sha256-Q6pMP4a9ed636qilcYX8XUguvKl/0/LGXhHcRI91p0U=",
|
||||
"rev": "10069ef4cf863633f57238f179a0297de84bd8d3",
|
||||
"revCount": 763342,
|
||||
"lastModified": 1748929857,
|
||||
"narHash": "sha256-lcZQ8RhsmhsK8u7LIFsJhsLh/pzR9yZ8yqpTzyGdj+Q=",
|
||||
"rev": "c2a03962b8e24e669fb37b7df10e7c79531ff1a4",
|
||||
"revCount": 810143,
|
||||
"type": "tarball",
|
||||
"url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.763342%2Brev-10069ef4cf863633f57238f179a0297de84bd8d3/01956ed4-f66c-7a87-98e4-b7e58f4aa591/source.tar.gz"
|
||||
"url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.810143%2Brev-c2a03962b8e24e669fb37b7df10e7c79531ff1a4/01973914-8b42-7168-9ee2-4d6ea6946695/source.tar.gz"
|
||||
},
|
||||
"original": {
|
||||
"type": "tarball",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -16,17 +16,23 @@
|
|||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "^3.2.4",
|
||||
"@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",
|
||||
"log-symbols": "^7.0.0",
|
||||
"lucide-vue-next": "^0.525.0",
|
||||
"marked": "^12.0.0",
|
||||
"mathjs": "^14.4.0",
|
||||
"pinia": "^3.0.1",
|
||||
"tinypool": "^1.0.2",
|
||||
"reka-ui": "^2.3.1",
|
||||
"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",
|
||||
"zod": "^3.24.2"
|
||||
|
|
@ -45,6 +51,7 @@
|
|||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.0.12",
|
||||
"typescript": "~5.7.3",
|
||||
"unplugin-vue-components": "^28.8.0",
|
||||
"vite": "^6.1.0",
|
||||
"vite-plugin-vue-devtools": "^7.7.2",
|
||||
"vue-tsc": "^2.2.2"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="form-control">
|
||||
<label class="label" v-if="label || icon">
|
||||
<component :is="icon" class="w-4 h-4" v-if="icon" />
|
||||
<span class="label-text" v-if="label">{{ label }}</span>
|
||||
</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:class="inputClasses"
|
||||
:value="modelValue"
|
||||
@input="handleInput"
|
||||
@blur="handleBlur"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<slot name="suffix"></slot>
|
||||
</div>
|
||||
|
||||
<label class="label" v-if="error">
|
||||
<span class="label-text-alt text-error">{{ error }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue?: string | number
|
||||
label?: string
|
||||
placeholder?: string
|
||||
error?: string
|
||||
type?: 'text' | 'number' | 'email' | 'password'
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg'
|
||||
variant?: 'default' | 'bordered' | 'ghost'
|
||||
icon?: any
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'text',
|
||||
size: 'md',
|
||||
variant: 'bordered'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | number]
|
||||
'blur': [event: FocusEvent]
|
||||
}>()
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const inputClasses = computed(() => {
|
||||
const baseClasses = ['input', 'flex-1']
|
||||
|
||||
// 添加变体样式
|
||||
if (props.variant === 'bordered') baseClasses.push('input-bordered')
|
||||
else if (props.variant === 'ghost') baseClasses.push('input-ghost')
|
||||
|
||||
// 添加尺寸样式
|
||||
if (props.size === 'xs') baseClasses.push('input-xs')
|
||||
else if (props.size === 'sm') baseClasses.push('input-sm')
|
||||
else if (props.size === 'lg') baseClasses.push('input-lg')
|
||||
|
||||
// 添加错误样式
|
||||
if (props.error) baseClasses.push('input-error')
|
||||
|
||||
// 添加状态样式
|
||||
if (props.disabled) baseClasses.push('input-disabled')
|
||||
|
||||
return baseClasses
|
||||
})
|
||||
|
||||
const handleInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
let value: string | number = target.value
|
||||
|
||||
// 如果是数字类型，转换为数字
|
||||
if (props.type === 'number' && value !== '') {
|
||||
value = Number(value)
|
||||
}
|
||||
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
const handleBlur = (event: FocusEvent) => {
|
||||
emit('blur', event)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<BaseInputField
|
||||
v-model="value"
|
||||
:label="label"
|
||||
:placeholder="placeholder || '192.168.1.100'"
|
||||
:error="validationError"
|
||||
:icon="icon || Globe"
|
||||
type="text"
|
||||
v-bind="$attrs"
|
||||
@blur="validateOnBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { z } from 'zod'
|
||||
import { Globe } from 'lucide-vue-next'
|
||||
import BaseInputField from './BaseInputField.vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
icon?: any
|
||||
required?: boolean
|
||||
validateOnBlur?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'IP 地址',
|
||||
validateOnBlur: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const hasBlurred = ref(false)
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
// IP地址验证模式
|
||||
const ipSchema = z.string().ip({
|
||||
version: 'v4',
|
||||
message: '请输入有效的IPv4地址'
|
||||
})
|
||||
|
||||
const validationError = computed(() => {
|
||||
// 如果是必填且为空
|
||||
if (props.required && !props.modelValue) {
|
||||
return '请输入IP地址'
|
||||
}
|
||||
|
||||
// 如果有值但格式不正确，并且设置了在失焦时验证且已经失焦过
|
||||
if (props.modelValue && (!props.validateOnBlur || hasBlurred.value)) {
|
||||
const result = ipSchema.safeParse(props.modelValue)
|
||||
return result.success ? '' : result.error.errors[0]?.message || '无效的IP地址'
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
|
||||
const validateOnBlur = () => {
|
||||
if (props.validateOnBlur) {
|
||||
hasBlurred.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<BaseInputField
|
||||
v-model="value"
|
||||
:label="label"
|
||||
:placeholder="placeholder || '8080'"
|
||||
:error="validationError"
|
||||
:icon="icon || Network"
|
||||
type="number"
|
||||
v-bind="$attrs"
|
||||
@blur="validateOnBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { z } from 'zod'
|
||||
import { Network } from 'lucide-vue-next'
|
||||
import BaseInputField from './BaseInputField.vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: number
|
||||
label?: string
|
||||
placeholder?: string
|
||||
icon?: any
|
||||
required?: boolean
|
||||
validateOnBlur?: boolean
|
||||
min?: number
|
||||
max?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: '端口',
|
||||
validateOnBlur: true,
|
||||
min: 1,
|
||||
max: 65535
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number]
|
||||
}>()
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const hasBlurred = ref(false)
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', Number(val))
|
||||
})
|
||||
|
||||
// 端口验证模式
|
||||
const portSchema = computed(() =>
|
||||
z.number()
|
||||
.int('端口必须是整数')
|
||||
.min(props.min, `端口必须大于等于${props.min}`)
|
||||
.max(props.max, `端口必须小于等于${props.max}`)
|
||||
)
|
||||
|
||||
const validationError = computed(() => {
|
||||
// 如果是必填且为空
|
||||
if (props.required && (!props.modelValue && props.modelValue !== 0)) {
|
||||
return '请输入端口号'
|
||||
}
|
||||
|
||||
// 如果有值但格式不正确，并且设置了在失焦时验证且已经失焦过
|
||||
if ((props.modelValue || props.modelValue === 0) && (!props.validateOnBlur || hasBlurred.value)) {
|
||||
const result = portSchema.value.safeParse(props.modelValue)
|
||||
return result.success ? '' : result.error.errors[0]?.message || '无效的端口号'
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
|
||||
const validateOnBlur = () => {
|
||||
if (props.validateOnBlur) {
|
||||
hasBlurred.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as BaseInputField } from './BaseInputField.vue'
|
||||
export { default as IpInputField } from './IpInputField.vue'
|
||||
export { default as PortInputField } from './PortInputField.vue'
|
||||
|
|
@ -2,81 +2,80 @@
|
|||
<div class="navbar bg-base-100 shadow-xl">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button"
|
||||
class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out">
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
<House class="icon" />
|
||||
首页
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/user" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<User class="icon" />
|
||||
用户界面
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/project" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
||||
</svg>
|
||||
<PencilRuler class="icon" />
|
||||
工程界面
|
||||
</router-link>
|
||||
</li> <li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/test" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
<FlaskConical class="icon" />
|
||||
测试功能
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/video-stream" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
HTTP视频流 </router-link>
|
||||
<Video class="icon" />
|
||||
HTTP视频流
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/oscilloscope" class="text-base font-medium">
|
||||
<SquareActivity class="icon" />
|
||||
示波器
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/markdown-test" class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
<FileText class="icon" />
|
||||
Markdown测试
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
|
||||
class="text-base font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 3h18v18H3z"></path>
|
||||
<path d="M8 8h8v8H8z" fill="currentColor"></path>
|
||||
</svg>
|
||||
<a
|
||||
href="http://localhost:5000/swagger"
|
||||
target="_self"
|
||||
rel="noopener noreferrer"
|
||||
class="text-base font-medium"
|
||||
>
|
||||
<BookOpenText class="icon" />
|
||||
OpenAPI文档
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -84,13 +83,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="navbar-center lg:flex">
|
||||
<router-link to="/" class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105">
|
||||
<router-link
|
||||
to="/"
|
||||
class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<span class="text-primary">FPGA</span> Web Lab
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<router-link to="/login"
|
||||
class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
|
||||
<router-link
|
||||
to="/login"
|
||||
class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
|
||||
>
|
||||
登录
|
||||
</router-link>
|
||||
<div class="ml-2 transition-all duration-500 hover:rotate-12">
|
||||
|
|
@ -102,8 +106,22 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import ThemeControlButton from "./ThemeControlButton.vue";
|
||||
import {
|
||||
SquareActivity,
|
||||
FileText,
|
||||
BookOpenText,
|
||||
Video,
|
||||
FlaskConical,
|
||||
House,
|
||||
User,
|
||||
PencilRuler,
|
||||
} from "lucide-vue-next";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../assets/main.css";
|
||||
|
||||
.icon {
|
||||
@apply h-5 w-5 opacity-70;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,178 @@
|
|||
<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";
|
||||
import { type WaveformDataType } from "./index";
|
||||
|
||||
// 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?: WaveformDataType;
|
||||
}>(),
|
||||
{
|
||||
data: () => ({
|
||||
x: [],
|
||||
y: [],
|
||||
xUnit: "s",
|
||||
yUnit: "V",
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
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)} ${props.data.xUnit}<br/>`;
|
||||
params.forEach((param: any) => {
|
||||
result += `${param.seriesName}: ${param.data[1].toFixed(3)} ${props.data.yUnit}<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: `时间 (${props.data.xUnit})`,
|
||||
nameLocation: "middle",
|
||||
nameGap: 30,
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: `电压 (${props.data.yUnit})`,
|
||||
nameLocation: "middle",
|
||||
nameGap: 40,
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import WaveformDisplay from "./WaveformDisplay.vue";
|
||||
|
||||
type WaveformDataType = {
|
||||
x: number[];
|
||||
y: number[][];
|
||||
xUnit: "s" | "ms" | "us";
|
||||
yUnit: "V" | "mV" | "uV";
|
||||
};
|
||||
|
||||
// Test data generator
|
||||
function generateTestData(): WaveformDataType {
|
||||
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, xUnit: "ms", yUnit: "V" };
|
||||
}
|
||||
|
||||
export { WaveformDisplay, generateTestData , type WaveformDataType };
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,184 @@
|
|||
<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">
|
||||
<IpInputField
|
||||
v-model="tempConfig.ip"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<PortInputField
|
||||
v-model="tempConfig.port"
|
||||
required
|
||||
/>
|
||||
</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,
|
||||
Save,
|
||||
RotateCcw,
|
||||
Activity,
|
||||
} from "lucide-vue-next";
|
||||
import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
|
||||
import { IpInputField, PortInputField } from "@/components/InputField";
|
||||
|
||||
// 配置类型定义
|
||||
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 isValidConfig = computed(() => {
|
||||
return tempConfig.ip && tempConfig.port &&
|
||||
tempConfig.port >= 1 && tempConfig.port <= 65535 &&
|
||||
/^(\d{1,3}\.){3}\d{1,3}$/.test(tempConfig.ip);
|
||||
});
|
||||
|
||||
// 检查是否有更改
|
||||
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>
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<!-- 标题栏 -->
|
||||
<div class="bg-base-200 p-4 border-b border-base-300">
|
||||
<h1 class="text-2xl font-bold text-base-content">HTTP 视频流</h1>
|
||||
<p class="text-base-content/70 mt-1">FPGA WebLab 视频流传输功能</p>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 space-y-6">
|
||||
<!-- 控制面板 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
|
|
|
|||
Loading…
Reference in New Issue