feat: 优化工程页面的用户体验，包括删除一些不必要的元素，同时使用storage保存一些界面参数方便用户体验
This commit is contained in:
@@ -1,294 +1,292 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<div class="p-6">
|
||||
<!-- 控制面板 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<Settings class="w-6 h-6" />
|
||||
控制面板
|
||||
</h2>
|
||||
<div class="bg-base-100 flex flex-col gap-7">
|
||||
<!-- 控制面板 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<Settings class="w-6 h-6" />
|
||||
控制面板
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<!-- 服务状态 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<div
|
||||
class="badge"
|
||||
:class="
|
||||
statusInfo.isRunning ? 'badge-success' : 'badge-error'
|
||||
"
|
||||
>
|
||||
{{ statusInfo.isRunning ? "运行中" : "已停止" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-title">服务状态</div>
|
||||
<div class="stat-value text-primary">HTTP</div>
|
||||
<div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流信息 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<Video class="w-8 h-8" />
|
||||
</div>
|
||||
<div class="stat-title">视频规格</div>
|
||||
<div class="stat-value text-secondary">
|
||||
{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
|
||||
</div>
|
||||
<div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接数 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<Users class="w-8 h-8" />
|
||||
</div>
|
||||
<div class="stat-title">连接数</div>
|
||||
<div class="stat-value text-accent">
|
||||
{{ statusInfo.connectedClients }}
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
<div class="dropdown dropdown-hover">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="text-xs underline cursor-help"
|
||||
>
|
||||
查看客户端
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
|
||||
>
|
||||
<li
|
||||
v-for="(client, index) in statusInfo.clientEndpoints"
|
||||
:key="index"
|
||||
class="text-xs"
|
||||
>
|
||||
<a>{{ client }}</a>
|
||||
</li>
|
||||
<li
|
||||
v-if="
|
||||
!statusInfo.clientEndpoints ||
|
||||
statusInfo.clientEndpoints.length === 0
|
||||
"
|
||||
>
|
||||
<a class="text-xs opacity-50">无活跃连接</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="configCamera"
|
||||
:dsiabled="configing"
|
||||
>
|
||||
<RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
|
||||
<CogIcon v-else class="h-4 w-4 mr-2" />
|
||||
{{ configing ? "配置中..." : "配置摄像头" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="refreshStatus"
|
||||
:disabled="loading"
|
||||
>
|
||||
<RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
|
||||
<RefreshCw v-else class="h-4 w-4 mr-2" />
|
||||
{{ loading ? "刷新中..." : "刷新状态" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="testConnection"
|
||||
:disabled="testing"
|
||||
>
|
||||
<RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
|
||||
<TestTube v-else class="h-4 w-4 mr-2" />
|
||||
{{ testing ? "测试中..." : "测试连接" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频预览区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<Video class="w-6 h-6" />
|
||||
视频预览
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="relative bg-black rounded-lg overflow-hidden"
|
||||
style="aspect-ratio: 4/3"
|
||||
>
|
||||
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
|
||||
<div
|
||||
v-show="isPlaying"
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
:src="currentVideoSource"
|
||||
alt="视频流"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
@error="handleVideoError"
|
||||
@load="handleVideoLoad"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 错误信息显示 -->
|
||||
<div
|
||||
v-if="hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
|
||||
>
|
||||
<div class="card bg-error text-white shadow-lg w-full max-w-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title flex items-center gap-2">
|
||||
<AlertTriangle class="h-6 w-6" />
|
||||
视频流加载失败
|
||||
</h3>
|
||||
<p>无法连接到视频服务器，请检查以下内容：</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>视频流服务是否已启动</li>
|
||||
<li>网络连接是否正常</li>
|
||||
<li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
|
||||
</ul>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-primary"
|
||||
@click="tryReconnect"
|
||||
>
|
||||
重试连接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位符 -->
|
||||
<div
|
||||
v-show="!isPlaying && !hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center text-white"
|
||||
>
|
||||
<div class="text-center">
|
||||
<Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
|
||||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||||
<p class="text-sm opacity-60 mt-2">
|
||||
点击"播放视频流"按钮开始查看实时视频
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频控制 -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-base-content/70">
|
||||
流地址:
|
||||
<code class="bg-base-300 px-2 py-1 rounded">{{
|
||||
streamInfo.mjpegUrl
|
||||
}}</code>
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<div class="dropdown dropdown-hover dropdown-top dropdown-end">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<!-- 服务状态 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat bg-base-100">
|
||||
<div class="stat-figure text-primary">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-sm btn-outline btn-accent"
|
||||
class="badge"
|
||||
:class="
|
||||
statusInfo.isRunning ? 'badge-success' : 'badge-error'
|
||||
"
|
||||
>
|
||||
<MoreHorizontal class="w-4 h-4 mr-1" />
|
||||
更多功能
|
||||
{{ statusInfo.isRunning ? "运行中" : "已停止" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-title">服务状态</div>
|
||||
<div class="stat-value text-primary">HTTP</div>
|
||||
<div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流信息 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat bg-base-100">
|
||||
<div class="stat-figure text-secondary">
|
||||
<Video class="w-8 h-8" />
|
||||
</div>
|
||||
<div class="stat-title">视频规格</div>
|
||||
<div class="stat-value text-secondary">
|
||||
{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
|
||||
</div>
|
||||
<div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接数 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat bg-base-100 relative">
|
||||
<div class="stat-figure text-accent">
|
||||
<Users class="w-8 h-8" />
|
||||
</div>
|
||||
<div class="stat-title">连接数</div>
|
||||
<div class="stat-value text-accent">
|
||||
{{ statusInfo.connectedClients }}
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
<div class="dropdown dropdown-hover dropdown-top">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="text-xs underline cursor-help"
|
||||
>
|
||||
查看客户端
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-20 menu p-2 shadow bg-base-200 rounded-box w-64 max-h-48 overflow-y-auto"
|
||||
>
|
||||
<li
|
||||
v-for="(client, index) in statusInfo.clientEndpoints"
|
||||
:key="index"
|
||||
class="text-xs"
|
||||
>
|
||||
<a class="break-all">{{ client }}</a>
|
||||
</li>
|
||||
<li
|
||||
v-if="
|
||||
!statusInfo.clientEndpoints ||
|
||||
statusInfo.clientEndpoints.length === 0
|
||||
"
|
||||
>
|
||||
<a class="text-xs opacity-50">无活跃连接</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<a @click="openInNewTab(streamInfo.htmlUrl)">
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
在新标签打开视频页面
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="takeSnapshot">
|
||||
<Camera class="w-4 h-4" />
|
||||
获取并下载快照
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="copyToClipboard(streamInfo.mjpegUrl)">
|
||||
<Copy class="w-4 h-4" />
|
||||
复制MJPEG地址
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success btn-sm"
|
||||
@click="startStream"
|
||||
:disabled="isPlaying"
|
||||
>
|
||||
<Play class="w-4 h-4 mr-1" />
|
||||
播放视频流
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error btn-sm"
|
||||
@click="stopStream"
|
||||
:disabled="!isPlaying"
|
||||
>
|
||||
<Square class="w-4 h-4 mr-1" />
|
||||
停止视频流
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="configCamera"
|
||||
:dsiabled="configing"
|
||||
>
|
||||
<RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
|
||||
<CogIcon v-else class="h-4 w-4 mr-2" />
|
||||
{{ configing ? "配置中..." : "配置摄像头" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="refreshStatus"
|
||||
:disabled="loading"
|
||||
>
|
||||
<RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
|
||||
<RefreshCw v-else class="h-4 w-4 mr-2" />
|
||||
{{ loading ? "刷新中..." : "刷新状态" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="testConnection"
|
||||
:disabled="testing"
|
||||
>
|
||||
<RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
|
||||
<TestTube v-else class="h-4 w-4 mr-2" />
|
||||
{{ testing ? "测试中..." : "测试连接" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<FileText class="w-6 h-6" />
|
||||
操作日志
|
||||
</h2>
|
||||
<!-- 视频预览区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<Video class="w-6 h-6" />
|
||||
视频预览
|
||||
</h2>
|
||||
|
||||
<div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
|
||||
<div
|
||||
v-for="(log, index) in logs"
|
||||
:key="index"
|
||||
class="text-sm font-mono mb-1"
|
||||
>
|
||||
<span class="text-base-content/50"
|
||||
>[{{ formatTime(log.time) }}]</span
|
||||
>
|
||||
<span :class="getLogClass(log.level)">{{ log.message }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="logs.length === 0"
|
||||
class="text-base-content/50 text-center py-8"
|
||||
>
|
||||
暂无日志记录
|
||||
<div
|
||||
class="relative bg-black rounded-lg overflow-hidden"
|
||||
style="aspect-ratio: 4/3"
|
||||
>
|
||||
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
|
||||
<div
|
||||
v-show="isPlaying"
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
:src="currentVideoSource"
|
||||
alt="视频流"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
@error="handleVideoError"
|
||||
@load="handleVideoLoad"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 错误信息显示 -->
|
||||
<div
|
||||
v-if="hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
|
||||
>
|
||||
<div class="card bg-error text-white shadow-lg w-full max-w-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title flex items-center gap-2">
|
||||
<AlertTriangle class="h-6 w-6" />
|
||||
视频流加载失败
|
||||
</h3>
|
||||
<p>无法连接到视频服务器，请检查以下内容：</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>视频流服务是否已启动</li>
|
||||
<li>网络连接是否正常</li>
|
||||
<li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
|
||||
</ul>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-primary"
|
||||
@click="tryReconnect"
|
||||
>
|
||||
重试连接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button class="btn btn-outline btn-sm" @click="clearLogs">
|
||||
清空日志
|
||||
<!-- 占位符 -->
|
||||
<div
|
||||
v-show="!isPlaying && !hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center text-white"
|
||||
>
|
||||
<div class="text-center">
|
||||
<Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
|
||||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||||
<p class="text-sm opacity-60 mt-2">
|
||||
点击"播放视频流"按钮开始查看实时视频
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频控制 -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-base-content/70">
|
||||
流地址:
|
||||
<code class="bg-base-300 px-2 py-1 rounded">{{
|
||||
streamInfo.mjpegUrl
|
||||
}}</code>
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<div class="dropdown dropdown-hover dropdown-top dropdown-end">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-sm btn-outline btn-accent"
|
||||
>
|
||||
<MoreHorizontal class="w-4 h-4 mr-1" />
|
||||
更多功能
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<a @click="openInNewTab(streamInfo.htmlUrl)">
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
在新标签打开视频页面
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="takeSnapshot">
|
||||
<Camera class="w-4 h-4" />
|
||||
获取并下载快照
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="copyToClipboard(streamInfo.mjpegUrl)">
|
||||
<Copy class="w-4 h-4" />
|
||||
复制MJPEG地址
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success btn-sm"
|
||||
@click="startStream"
|
||||
:disabled="isPlaying"
|
||||
>
|
||||
<Play class="w-4 h-4 mr-1" />
|
||||
播放视频流
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error btn-sm"
|
||||
@click="stopStream"
|
||||
:disabled="!isPlaying"
|
||||
>
|
||||
<Square class="w-4 h-4 mr-1" />
|
||||
停止视频流
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<FileText class="w-6 h-6" />
|
||||
操作日志
|
||||
</h2>
|
||||
|
||||
<div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
|
||||
<div
|
||||
v-for="(log, index) in logs"
|
||||
:key="index"
|
||||
class="text-sm font-mono mb-1"
|
||||
>
|
||||
<span class="text-base-content/50"
|
||||
>[{{ formatTime(log.time) }}]</span
|
||||
>
|
||||
<span :class="getLogClass(log.level)">{{ log.message }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="logs.length === 0"
|
||||
class="text-base-content/50 text-center py-8"
|
||||
>
|
||||
暂无日志记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button class="btn btn-outline btn-sm" @click="clearLogs">
|
||||
清空日志
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user