fix:联调算法

feat:初始化代码
37 changed files with 8692 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,8 @@
+# 开发环境配置
+VITE_APP_TITLE = 'SOP作业检测系统'
+
+# 后端接口地址
+VITE_API_BASE_URL = 'http://10.23.22.43:8188/api'
+
+# 请求超时时间（毫秒）
+VITE_API_TIMEOUT = 15000
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,8 @@
+# 生产环境配置
+VITE_APP_TITLE = 'SOP作业检测系统'
+
+# 后端接口地址
+VITE_API_BASE_URL = '/api'
+
+# 请求超时时间（毫秒）
+VITE_API_TIMEOUT = 15000
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SOP作业检测系统</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,27 @@
+{
+  "name": "sop-system",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.18.1",
+    "echarts": "^6.1.0",
+    "element-plus": "^2.9.7",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.38",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "sass": "^1.83.0",
+    "unplugin-auto-import": "^0.19.0",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^8.1.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -0,0 +1,3 @@
+allowBuilds:
+  '@parcel/watcher': false
+  vue-demi: false
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#2d5af0"/>
+  <path d="M8 10h6v12H8V10zm10 0h6v12h-6V10z" fill="white" opacity="0.9"/>
+  <path d="M11 14h12M11 18h12" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
+  <circle cx="20" cy="12" r="2" fill="#22c55e"/>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user'
+import { computed } from 'vue'
+
+const userStore = useUserStore()
+const isLoggedIn = computed(() => userStore.isLoggedIn)
+</script>
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// ============ 登录相关 ============
+
+/**
+ * 账号密码登录
+ * @param {Object} data - { username, password }
+ */
+export function loginApi(data) {
+  return request({
+    url: '/auth/login',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取用户信息
+ */
+export function getUserInfoApi() {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
+
+// ============ 后续在此添加业务接口 ============
+
+/**
+ * 示例：获取首页统计数据
+ */
+export function getHomeStatsApi() {
+  return request({
+    url: '/home/stats',
+    method: 'get'
+  })
+}
--- a/src/components/WebRtcPlayer.vue
+++ b/src/components/WebRtcPlayer.vue
@ -0,0 +1,282 @@
+<template>
+  <div class="webrtc-wrapper">
+    <video 
+      ref="videoRef" 
+      autoplay 
+      muted 
+      playsinline 
+      class="video-player"
+    ></video>
+    
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-overlay">
+      <span class="spinner"></span>
+      <span>连接中...</span>
+    </div>
+
+    <!-- 录制状态指示器 -->
+    <div v-if="isRecording" class="recording-indicator">
+      <span class="dot"></span> 录制中 {{ recordTime }}s
+    </div>
+
+    <div v-if="error" class="error-overlay">{{ error }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+const props = defineProps({
+  src: { type: String, required: true }
+});
+
+// 监听 src 变化，重新连接
+watch(() => props.src, (newSrc, oldSrc) => {
+  if (newSrc && newSrc !== oldSrc) {
+    disconnect();
+    connect();
+  }
+});
+
+// 暴露给父组件的方法
+const emit = defineEmits(['record-status-change','record-complete','connection-status']);
+
+const videoRef = ref(null);
+const error = ref('');
+const loading = ref(false);
+let pc = null;
+
+// --- 录屏相关状态 ---
+const isRecording = ref(false);
+const recordTime = ref(0);
+let mediaRecorder = null;
+let recordedChunks = [];
+let timerInterval = null;
+
+// 1. 断开 WebRTC 连接
+const disconnect = () => {
+  if (pc) {
+    pc.close();
+    pc = null;
+  }
+  if (videoRef.value) {
+    videoRef.value.srcObject = null;
+  }
+  error.value = '';
+};
+
+// 2. 连接 WebRTC
+const connect = async () => {
+  loading.value = true;
+  error.value = '';
+  try {
+    pc = new RTCPeerConnection();
+    pc.ontrack = (event) => {
+      if (videoRef.value && event.streams[0]) {
+        videoRef.value.srcObject = event.streams[0];
+        emit('connection-status', true);
+      }
+    };
+    pc.addTransceiver('video', { direction: 'recvonly' });
+    pc.addTransceiver('audio', { direction: 'recvonly' });
+
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+
+    const res = await fetch(props.src, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/sdp' },
+      body: pc.localDescription.sdp
+    });
+    
+    if (!res.ok) throw new Error(`Status: ${res.status}`);
+    
+    const answer = await res.text();
+    await pc.setRemoteDescription({ type: 'answer', sdp: answer });
+  } catch (e) {
+    error.value = '连接失败，请检查视频地址';
+    emit('connection-status', false);
+    console.error(e);
+  } finally {
+    let timeout = setTimeout(() => {
+      loading.value = false;
+      clearTimeout(timeout);
+    }, 1500);
+  }
+};
+
+// 2. 截图功能
+const takeSnapshot = () => {
+  if (!videoRef.value) return null;
+  
+  const video = videoRef.value;
+  const canvas = document.createElement('canvas');
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+  
+  // 转换为 Blob (格式可选: image/png, image/jpeg)
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => {
+      resolve(blob);
+    }, 'image/jpeg', 0.9);
+  });
+};
+
+// 3. 开始录屏
+const startRecord = () => {
+  if (!videoRef.value || isRecording.value) return;
+
+  try {
+    // 捕获视频流的 MediaStream
+    // 注意：captureStream 是实验性 API，但在现代 Chrome/Edge/Firefox 中支持良好
+    const stream = videoRef.value.captureStream ? videoRef.value.captureStream() : videoRef.value.mozCaptureStream();
+    
+    if (!stream) {
+      error.value = '浏览器不支持捕获视频流';
+      return;
+    }
+
+    recordedChunks = [];
+    // 创建 MediaRecorder
+    // mimeType 可以根据需要选择，例如 'video/webm; codecs=vp9'
+    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+      }
+    };
+
+    mediaRecorder.onstop = () => {
+        const blob = new Blob(recordedChunks, { type: 'video/webm' });
+        recordedChunks = []; // 清空数组释放内存
+        
+        // 【关键】将 blob 发送给父组件
+        emit('record-complete', blob);
+        
+        console.log('录制完成，Blob大小:', blob.size);
+    };
+
+    mediaRecorder.start();
+    isRecording.value = true;
+    recordTime.value = 0;
+    
+    // 计时器
+    timerInterval = setInterval(() => {
+      recordTime.value++;
+    }, 1000);
+
+    emit('record-status-change', true);
+
+  } catch (err) {
+    console.error('录制启动失败:', err);
+    error.value = '录制启动失败';
+  }
+};
+
+// 4. 停止录屏
+const stopRecord = () => {
+  if (mediaRecorder && isRecording.value) {
+    mediaRecorder.stop();
+    isRecording.value = false;
+    clearInterval(timerInterval);
+    emit('record-status-change', false);
+  }
+};
+
+// 5. 处理录制完成（这里可以改为直接上传后端）
+const handleRecordComplete = (blob) => {
+  console.log('录制完成，文件大小:', blob.size, 'bytes');
+  
+  // 【示例】如何上传给后端
+  // uploadVideoToServer(blob);
+  
+  // 如果需要在前端预览或下载，可以创建 URL
+  // const url = URL.createObjectURL(blob);
+};
+
+// 【可选】上传函数示例
+const uploadVideoToServer = async (blob) => {
+  const formData = new FormData();
+  formData.append('file', blob, `record_${new Date().getTime()}.webm`);
+  
+  try {
+    // 替换为你的后端上传接口
+    // await axios.post('/api/upload/video', formData);
+    console.log('视频上传成功');
+  } catch (e) {
+    console.error('上传失败', e);
+  }
+};
+
+onMounted(() => connect());
+
+onUnmounted(() => {
+  if (pc) pc.close();
+  if (isRecording.value) stopRecord();
+});
+
+// 暴露方法给父组件
+defineExpose({
+  takeSnapshot,
+  startRecord,
+  stopRecord
+});
+</script>
+
+<style scoped>
+.webrtc-wrapper { width: 100%; height: 100%; position: relative; background: #000; }
+.video-player { width: 100%; height: 100%; object-fit: contain; }
+.error-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }
+
+.loading-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #409eff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.recording-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  background-color: red;
+  border-radius: 50%;
+  animation: blink 1s infinite;
+}
+@keyframes blink {
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+</style>
--- a/src/layout/AppHeader.vue
+++ b/src/layout/AppHeader.vue
@ -0,0 +1,134 @@
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <div class="breadcrumb">
+        <el-icon class="breadcrumb-icon" :size="16"><HomeFilled /></el-icon>
+        <span class="breadcrumb-text">工作台</span>
+      </div>
+    </div>
+    <div class="header-right">
+      <el-dropdown trigger="click" placement="bottom-end">
+        <div class="user-info">
+          <el-avatar :size="32" class="user-avatar">
+            <el-icon :size="18"><UserFilled /></el-icon>
+          </el-avatar>
+          <span class="user-name">{{ userStore.realName || userStore.username }}</span>
+          <el-icon class="arrow-down" :size="14"><ArrowDown /></el-icon>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item divided @click="handleLogout">
+              <el-icon><SwitchButton /></el-icon>
+              退出登录
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { useAppStore } from '@/stores/app'
+
+const router = useRouter()
+const userStore = useUserStore()
+const appStore = useAppStore()
+
+function handleLogout() {
+  userStore.logout()
+  router.push('/login')
+}
+</script>
+
+<style lang="scss" scoped>
+.app-header {
+  height: $header-height;
+  background: $bg-white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.header-left {
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .breadcrumb-icon {
+      color: $primary-color;
+    }
+
+    .breadcrumb-text {
+      font-size: 14px;
+      color: $text-primary;
+      font-weight: 500;
+    }
+  }
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  .header-actions {
+    .action-btn {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: $radius-sm;
+      cursor: pointer;
+      transition: $transition;
+      color: $text-secondary;
+
+      &:hover {
+        background: $bg-color;
+        color: $primary-color;
+      }
+
+      .badge-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 10px 4px 4px;
+    border-radius: $radius-md;
+    cursor: pointer;
+    transition: $transition;
+
+    &:hover {
+      background: $bg-color;
+    }
+
+    .user-avatar {
+      background: linear-gradient(135deg, $primary-color, $primary-light);
+    }
+
+    .user-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: $text-primary;
+    }
+
+    .arrow-down {
+      color: $text-light;
+    }
+  }
+}
+</style>
--- a/src/layout/MainLayout.vue
+++ b/src/layout/MainLayout.vue
@ -0,0 +1,67 @@
+<template>
+  <div class="main-layout">
+    <SideMenu />
+    <div class="main-container" :class="{ collapsed: appStore.sidebarCollapsed }">
+      <AppHeader />
+      <div class="main-content">
+        <router-view v-slot="{ Component }">
+          <transition name="fade-slide" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SideMenu from './SideMenu.vue'
+import AppHeader from './AppHeader.vue'
+import { useAppStore } from '@/stores/app'
+
+const appStore = useAppStore()
+</script>
+
+<style lang="scss" scoped>
+.main-layout {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: $sidebar-width;
+  transition: $transition;
+  min-width: 0;
+
+  &.collapsed {
+    margin-left: 64px;
+  }
+}
+
+.main-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background-color: $bg-color;
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
--- a/src/layout/SideMenu.vue
+++ b/src/layout/SideMenu.vue
@ -0,0 +1,182 @@
+<template>
+  <aside class="sidebar" :class="{ collapsed: appStore.sidebarCollapsed }">
+    <div class="logo-area">
+      <div class="logo-icon">
+        <svg viewBox="0 0 40 40" width="36" height="36">
+          <rect width="40" height="40" rx="10" fill="url(#logoGrad)"/>
+          <path d="M11 14h7v12H11V14zm12 0h7v12h-7V14z" fill="white" opacity="0.85"/>
+          <path d="M14 18h12M14 22h12" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.45"/>
+          <defs>
+            <linearGradient id="logoGrad" x1="0" y1="0" x2="40" y2="40">
+              <stop offset="0%" stop-color="#2d5af0"/>
+              <stop offset="100%" stop-color="#6366f1"/>
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      <transition name="fade">
+        <span v-show="!appStore.sidebarCollapsed" class="logo-title">SOP检测系统</span>
+      </transition>
+    </div>
+
+    <nav class="menu-list">
+      <div
+        v-for="item in menuItems"
+        :key="item.path"
+        class="menu-item"
+        :class="{ active: activeMenu === item.path }"
+        @click="handleMenuClick(item)"
+      >
+        <el-icon class="menu-icon" :size="20">
+          <component :is="item.icon" />
+        </el-icon>
+        <span v-show="!appStore.sidebarCollapsed" class="menu-label">{{ item.title }}</span>
+      </div>
+    </nav>
+
+    <div class="sidebar-footer">
+      <div class="collapse-btn" @click="appStore.toggleSidebar()">
+        <el-icon :size="18">
+          <Fold v-if="!appStore.sidebarCollapsed" />
+          <Expand v-else />
+        </el-icon>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+
+const menuItems = [
+  { path: '/home', title: '首页', icon: 'HomeFilled' }
+  // 后续在此添加菜单项
+]
+
+const activeMenu = computed(() => {
+  return route.path
+})
+
+function handleMenuClick(item) {
+  router.push(item.path)
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: $sidebar-width;
+  background: linear-gradient(180deg, #1a1f2e 0%, #1e2538 100%);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  transition: $transition;
+  overflow: hidden;
+
+  &.collapsed {
+    width: 64px;
+  }
+}
+
+.logo-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+
+  .logo-icon {
+    flex-shrink: 0;
+  }
+
+  .logo-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #ffffff;
+    white-space: nowrap;
+    letter-spacing: 0.5px;
+  }
+}
+
+.menu-list {
+  flex: 1;
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: $radius-md;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: $transition;
+  white-space: nowrap;
+
+  .menu-icon {
+    flex-shrink: 0;
+  }
+
+  .menu-label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  &.active {
+    background: rgba(45, 90, 240, 0.25);
+    color: #ffffff;
+
+    .menu-icon {
+      color: #7b9ffa;
+    }
+  }
+}
+
+.sidebar-footer {
+  padding: 12px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+
+  .collapse-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border-radius: $radius-sm;
+    color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: $transition;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,30 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+import App from './App.vue'
+import router from './router'
+import { createPersistPlugin } from '@/stores/plugins/persist'
+import './styles/global.scss'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App)
+
+// Pinia 实例化并注册持久化插件
+const pinia = createPinia()
+pinia.use(createPersistPlugin({
+  whiteList: ['token', 'userInfo']
+}))
+
+// 全局注册 Element Plus Icon
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(pinia)
+app.use(router)
+app.use(ElementPlus, { locale: zhCn })
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,53 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/home'
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', noAuth: true }
+  },
+  {
+    path: '/',
+    component: () => import('@/layout/MainLayout.vue'),
+    children: [
+      {
+        path: 'home',
+        name: 'Home',
+        component: () => import('@/views/home/index.vue'),
+        meta: { title: '首页', icon: 'HomeFilled' }
+      }
+      // 后续在此添加新菜单路由
+    ]
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+router.beforeEach((to, from, next) => {
+  const userStore = useUserStore()
+
+  document.title = `${to.meta.title || ''} - SOP作业检测系统`
+
+  if (to.meta.noAuth) {
+    next()
+    return
+  }
+
+  if (!userStore.isLoggedIn) {
+    next({ name: 'Login', query: { redirect: to.fullPath } })
+    return
+  }
+
+  next()
+})
+
+export default router
--- a/src/stores/app.js
+++ b/src/stores/app.js
@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  const sidebarCollapsed = ref(false)
+
+  function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value
+  }
+
+  return {
+    sidebarCollapsed,
+    toggleSidebar
+  }
+})
--- a/src/stores/plugins/persist.js
+++ b/src/stores/plugins/persist.js
@ -0,0 +1,64 @@
+/**
+ * Pinia 持久化插件
+ * 将指定 store 的状态自动同步到 localStorage，刷新页面不丢失
+ */
+
+const STORAGE_PREFIX = 'sop_'
+
+function getStorageKey(storeId) {
+  return STORAGE_PREFIX + storeId
+}
+
+export function createPersistPlugin(options = {}) {
+  const {
+    keyPrefix = STORAGE_PREFIX,
+    whiteList = [],  // 需要持久化的字段，为空则全部持久化
+    storage = localStorage
+  } = options
+
+  return ({ store }) => {
+    const storageKey = getStorageKey(store.$id)
+
+    // 初始化：从 storage 恢复状态
+    try {
+      const stored = storage.getItem(storageKey)
+      if (stored) {
+        const parsed = JSON.parse(stored)
+        Object.keys(parsed).forEach((key) => {
+          if (whiteList.length === 0 || whiteList.includes(key)) {
+            store[key] = parsed[key]
+          }
+        })
+      }
+    } catch (e) {
+      console.error(`[persist] 读取 ${storageKey} 失败:`, e)
+    }
+
+    // 监听变化：状态更新时写入 storage
+    store.$subscribe((mutation, state) => {
+      try {
+        const toSave = {}
+        const keys = whiteList.length > 0 ? whiteList : Object.keys(state)
+
+        keys.forEach((key) => {
+          if (key in state && !key.startsWith('$')) {
+            toSave[key] = state[key]
+          }
+        })
+
+        storage.setItem(storageKey, JSON.stringify(toSave))
+      } catch (e) {
+        console.error(`[persist] 写入 ${storageKey} 失败:`, e)
+      }
+    })
+
+    // 提供清除方法
+    store.$persistClear = () => {
+      try {
+        storage.removeItem(storageKey)
+      } catch (e) {
+        console.error(`[persist] 清除 ${storageKey} 失败:`, e)
+      }
+    }
+  }
+}
--- a/src/stores/user.js
+++ b/src/stores/user.js
@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { loginApi } from '@/api'
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref('')
+  const userInfo = ref(null)
+
+  const isLoggedIn = computed(() => !!token.value)
+  const username = computed(() => userInfo.value?.username || '')
+  const realName = computed(() => userInfo.value?.realName || '')
+
+  /**
+   * 登录
+   * @param {Object} credentials - { username, password }
+   */
+  async function login(credentials) {
+    const data = await loginApi(credentials)
+    // 后端返回的 data 结构：
+    // { token, tokenType, userId, username, realName, avatar, role, roleName, schoolName }
+    token.value = data.token
+    userInfo.value = data
+    return data
+  }
+
+  function logout() {
+    token.value = ''
+    userInfo.value = null
+  }
+
+  return {
+    token,
+    userInfo,
+    isLoggedIn,
+    username,
+    realName,
+    login,
+    logout
+  }
+})
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -0,0 +1,44 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
+  font-size: 14px;
+  color: #1e293b;
+  background-color: #f0f4f8;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+
+  &:hover {
+    background: #94a3b8;
+  }
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -0,0 +1,26 @@
+// 全局SCSS变量
+$primary-color: #2d5af0;
+$primary-light: #5b7ff5;
+$primary-dark: #1a3fb8;
+$success-color: #22c55e;
+$warning-color: #f59e0b;
+$danger-color: #ef4444;
+$info-color: #6366f1;
+
+$bg-color: #f0f4f8;
+$bg-white: #ffffff;
+$text-primary: #1e293b;
+$text-secondary: #64748b;
+$text-light: #94a3b8;
+$border-color: #e2e8f0;
+
+$sidebar-width: 240px;
+$header-height: 56px;
+$radius-sm: 6px;
+$radius-md: 10px;
+$radius-lg: 16px;
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
+
+$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--- a/src/utils/fileHttp.js
+++ b/src/utils/fileHttp.js
@ -0,0 +1,4 @@
+const fileHttp = {
+    ptApi: '10.23.22.43:8001'
+}
+export default fileHttp
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,87 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+import router from '@/router'
+
+// 创建 axios 实例
+const request = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: Number(import.meta.env.VITE_API_TIMEOUT) || 15000,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    const userStore = useUserStore()
+
+    // 如果有 token 则携带
+    if (userStore.token) {
+      config.headers.Authorization = `Bearer ${userStore.token}`
+    }
+
+    return config
+  },
+  (error) => {
+    console.error('请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    const res = response.data
+
+    // 根据后端约定的数据结构判断
+    // 假设后端返回格式: { code: 200, data: {...}, message: 'success' }
+    if (res.code === 200 || res.code === 0) {
+      return res.data
+    }
+
+    // 业务错误
+    ElMessage.error(res.message || '请求失败')
+    return Promise.reject(new Error(res.message || '请求失败'))
+  },
+  (error) => {
+    const { response } = error
+
+    if (response) {
+      const { status, data } = response
+
+      switch (status) {
+        case 401:
+          // token 过期或未登录
+          ElMessage.error('登录已过期，请重新登录')
+          const userStore = useUserStore()
+          userStore.logout()
+          router.push({
+            name: 'Login',
+            query: { redirect: router.currentRoute.value.fullPath }
+          })
+          break
+        case 403:
+          ElMessage.error('没有权限访问该资源')
+          break
+        case 404:
+          ElMessage.error('请求的资源不存在')
+          break
+        case 500:
+          ElMessage.error('服务器内部错误')
+          break
+        default:
+          ElMessage.error(data?.message || `请求错误 (${status})`)
+      }
+    } else if (error.code === 'ECONNABORTED') {
+      ElMessage.error('请求超时，请检查网络连接')
+    } else {
+      ElMessage.error('网络异常，请检查网络连接')
+    }
+
+    return Promise.reject(error)
+  }
+)
+
+export default request
--- a/src/utils/websocket.js
+++ b/src/utils/websocket.js
@ -0,0 +1,400 @@
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+
+/**
+ * WebSocket 长连接管理类
+ * 支持心跳检测、自动重连、消息分发等功能
+ */
+class WebSocketClient {
+  constructor(options = {}) {
+    this.url = options.url || '' // WebSocket 地址
+    this.protocols = options.protocols || [] // 子协议
+    this.reconnectInterval = options.reconnectInterval || 3000 // 重连间隔（ms）
+    this.maxReconnectTimes = options.maxReconnectTimes || 10 // 最大重连次数
+    this.heartbeatInterval = options.heartbeatInterval || 30000 // 心跳间隔（ms）
+    this.heartbeatTimeout = options.heartbeatTimeout || 5000 // 心跳超时时间（ms）
+    this.autoReconnect = options.autoReconnect !== false // 是否自动重连，默认 true
+    this.debug = options.debug || false // 调试模式
+    this.binaryType = options.binaryType || 'arraybuffer' // 二进制数据类型
+
+    this.ws = null // WebSocket 实例
+    this.reconnectTimes = 0 // 当前重连次数
+    this.reconnectTimer = null // 重连定时器
+    this.heartbeatTimer = null // 心跳定时器
+    this.heartbeatCheckTimer = null // 心跳检测定时器
+    this.isConnected = false // 是否已连接
+    this.isDestroyed = false // 是否已销毁
+    this.pendingMessages = [] // 待发送消息队列
+
+    // 事件监听器
+    this.listeners = {
+      open: [],
+      close: [],
+      error: [],
+      message: [],
+      reconnect: [],
+      heartbeat: []
+    }
+
+    // 心跳消息内容
+    this.pingMessage = options.pingMessage || JSON.stringify({ type: 'ping' })
+    this.pongMessage = options.pongMessage || JSON.stringify({ type: 'pong' })
+
+    // 绑定 this
+    this._onOpen = this._onOpen.bind(this)
+    this._onClose = this._onClose.bind(this)
+    this._onError = this._onError.bind(this)
+    this._onMessage = this._onMessage.bind(this)
+  }
+
+  /**
+   * 连接 WebSocket
+   * @param {string} url - 可选的连接地址，不传则使用初始化时的地址
+   */
+  connect(url) {
+    if (this.isDestroyed) return
+
+    if (url) {
+      this.url = url
+    }
+
+    if (!this.url) {
+      console.error('[WebSocket] 连接地址不能为空')
+      return
+    }
+
+    // 如果已有连接，先关闭
+    if (this.ws) {
+      this.close()
+    }
+
+    this._log('正在连接 WebSocket:', this.url)
+
+    try {
+      if (this.protocols && this.protocols.length > 0) {
+        this.ws = new WebSocket(this.url, this.protocols)
+      } else {
+        this.ws = new WebSocket(this.url)
+      }
+
+      this.ws.onopen = this._onOpen
+      this.ws.onclose = this._onClose
+      this.ws.onerror = this._onError
+      this.ws.onmessage = this._onMessage
+      this.ws.binaryType = this.binaryType
+    } catch (err) {
+      console.error('[WebSocket] 创建连接失败:', err)
+      this._emit('error', err)
+      this._tryReconnect()
+    }
+  }
+
+  /**
+   * 关闭连接
+   */
+  close() {
+    this._clearHeartbeat()
+    this._clearReconnectTimer()
+
+    if (this.ws) {
+      try {
+        this.ws.onopen = null
+        this.ws.onclose = null
+        this.ws.onerror = null
+        this.ws.onmessage = null
+        this.ws.close(1000, '客户端主动关闭')
+      } catch (err) {
+        this._log('关闭连接出错:', err)
+      }
+      this.ws = null
+    }
+
+    this.isConnected = false
+  }
+
+  /**
+   * 销毁实例（彻底释放资源）
+   */
+  destroy() {
+    this.isDestroyed = true
+    this.close()
+    this.listeners.open = []
+    this.listeners.close = []
+    this.listeners.error = []
+    this.listeners.message = []
+    this.listeners.reconnect = []
+    this.listeners.heartbeat = []
+    this.pendingMessages = []
+  }
+
+  /**
+   * 发送消息
+   * @param {string|Object} data - 要发送的数据
+   */
+  send(data) {
+    const message = typeof data === 'object' ? JSON.stringify(data) : String(data)
+
+    if (this.isConnected && this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(message)
+      return true
+    }
+
+    // 未连接时加入待发送队列
+    this.pendingMessages.push(message)
+    this._log('消息加入待发送队列，当前队列长度:', this.pendingMessages.length)
+    return false
+  }
+
+  /**
+   * 发送二进制数据（ArrayBuffer），用于文件切片上传等场景
+   * @param {ArrayBuffer} buffer - 二进制数据
+   */
+  sendBinary(buffer) {
+    if (this.isConnected && this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(buffer)
+      return true
+    }
+    return false
+  }
+
+  // ==================== 事件监听 ====================
+
+  on(event, callback) {
+    if (this.listeners[event]) {
+      this.listeners[event].push(callback)
+    }
+    return this
+  }
+
+  off(event, callback) {
+    if (this.listeners[event]) {
+      if (callback) {
+        this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback)
+      } else {
+        this.listeners[event] = []
+      }
+    }
+    return this
+  }
+
+  // ==================== 内置事件处理 ====================
+
+  _onOpen(event) {
+    this.isConnected = true
+    this.reconnectTimes = 0
+    this._log('WebSocket 已连接')
+    this._startHeartbeat()
+    this._emit('open', event)
+
+    // 发送认证信息（带 token）
+    // this._sendAuthMessage()
+
+    // 发送待发送队列中的消息
+    this._flushPendingMessages()
+  }
+
+  _onClose(event) {
+    this.isConnected = false
+    this._clearHeartbeat()
+    this._log('WebSocket 已关闭, code:', event.code, 'reason:', event.reason)
+
+    this._emit('close', event)
+
+    // 非主动关闭时自动重连（code 1000 表示主动关闭）
+    if (event.code !== 1000 && this.autoReconnect && !this.isDestroyed) {
+      this._tryReconnect()
+    }
+  }
+
+  _onError(event) {
+    this._log('WebSocket 发生错误:', event)
+    this._emit('error', event)
+  }
+
+  _onMessage(event) {
+    try {
+      const data = JSON.parse(event.data)
+      this._log('收到消息:', data)
+
+      // 任何服务端消息都视为心跳信号，重置超时检测
+      if (this.heartbeatCheckTimer) {
+        clearTimeout(this.heartbeatCheckTimer)
+        this.heartbeatCheckTimer = null
+      }
+
+      // 处理心跳回复
+      if (data.type === 'pong') {
+        return
+      }
+
+      // 处理服务端 ping
+      if (data.type === 'ping') {
+        this.send(this.pongMessage)
+        return
+      }
+
+      this._emit('message', data)
+    } catch {
+      // 非 JSON 格式（如二进制文件chunk接收），也重置心跳
+      if (this.heartbeatCheckTimer) {
+        clearTimeout(this.heartbeatCheckTimer)
+        this.heartbeatCheckTimer = null
+      }
+      this._emit('message', event.data)
+    }
+  }
+
+  // ==================== 认证 ====================
+
+  _sendAuthMessage() {
+    try {
+      const userStore = useUserStore()
+      if (userStore.token) {
+        this.send({
+          type: 'auth',
+          token: userStore.token
+        })
+      }
+    } catch {
+      this._log('获取 token 失败，跳过认证')
+    }
+  }
+
+  // ==================== 心跳机制 ====================
+
+  _startHeartbeat() {
+    this._clearHeartbeat()
+
+    // heartbeatInterval 为 0 或非正值时关闭主动心跳
+    if (!this.heartbeatInterval || this.heartbeatInterval <= 0) return
+
+    // 定时发送 ping
+    this.heartbeatTimer = setInterval(() => {
+      if (this.isConnected && this.ws) {
+        this.ws.send(this.pingMessage)
+        this._log('发送心跳 ping')
+
+        // 设置超时检测
+        this.heartbeatCheckTimer = setTimeout(() => {
+          this._log('心跳超时，准备重连')
+          this._emit('heartbeat', { status: 'timeout' })
+          this.close()
+          this._tryReconnect()
+        }, this.heartbeatTimeout)
+      }
+    }, this.heartbeatInterval)
+  }
+
+  _clearHeartbeat() {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer)
+      this.heartbeatTimer = null
+    }
+    if (this.heartbeatCheckTimer) {
+      clearTimeout(this.heartbeatCheckTimer)
+      this.heartbeatCheckTimer = null
+    }
+  }
+
+  // ==================== 重连机制 ====================
+
+  _tryReconnect() {
+    if (this.isDestroyed || !this.autoReconnect) return
+
+    if (this.reconnectTimes >= this.maxReconnectTimes) {
+      this._log('已达到最大重连次数，停止重连')
+      ElMessage.error('连接服务器失败，请刷新页面重试')
+      return
+    }
+
+    this.reconnectTimes++
+    this._log(`第 ${this.reconnectTimes} 次重连...`)
+
+    this._emit('reconnect', {
+      times: this.reconnectTimes,
+      maxTimes: this.maxReconnectTimes
+    })
+
+    // 指数退避：重连间隔逐渐增大（最大 30 秒）
+    const interval = Math.min(
+      this.reconnectInterval * Math.pow(1.5, this.reconnectTimes - 1),
+      30000
+    )
+
+    this._clearReconnectTimer()
+    this.reconnectTimer = setTimeout(() => {
+      this.connect()
+    }, interval)
+  }
+
+  _clearReconnectTimer() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+  }
+
+  // ==================== 内部工具方法 ====================
+
+  _emit(event, data) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((callback) => {
+        try {
+          callback(data)
+        } catch (err) {
+          console.error(`[WebSocket] ${event} 事件回调出错:`, err)
+        }
+      })
+    }
+  }
+
+  _flushPendingMessages() {
+    while (this.pendingMessages.length > 0) {
+      const msg = this.pendingMessages.shift()
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send(msg)
+      }
+    }
+  }
+
+  _log(...args) {
+    if (this.debug) {
+      console.log('[WebSocket]', ...args)
+    }
+  }
+
+  /**
+   * 获取当前连接状态
+   * @returns {number} 0-未连接, 1-已连接, 2-正在连接, 3-正在关闭
+   */
+  getReadyState() {
+    return this.ws ? this.ws.readyState : WebSocket.CLOSED
+  }
+
+  /**
+   * 是否已连接
+   */
+  get connected() {
+    return this.isConnected
+  }
+}
+
+// 单例模式 - 全局默认 WebSocket 实例（可选使用）
+let defaultInstance = null
+
+/**
+ * 获取或创建全局默认 WebSocket 实例
+ * @param {Object} options - 配置选项
+ * @returns {WebSocketClient}
+ */
+export function useWebSocket(options = {}) {
+  if (!defaultInstance || options.forceNew) {
+    if (defaultInstance && options.forceNew) {
+      defaultInstance.destroy()
+    }
+    defaultInstance = new WebSocketClient(options)
+  }
+  return defaultInstance
+}
+
+export default WebSocketClient
--- a/src/views/home/components/ChartsPanel.vue
+++ b/src/views/home/components/ChartsPanel.vue
@ -0,0 +1,173 @@
+<template>
+  <div class="charts-panel">
+    <div class="chart-box">
+      <div ref="pieChartRef" class="chart"></div>
+    </div>
+    <div class="chart-box">
+      <div ref="barChartRef" class="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts/core'
+import { PieChart, BarChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, MarkLineComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, MarkLineComponent, CanvasRenderer])
+
+const props = defineProps({
+  processStats: { type: Object, default: () => ({ completed: 0, incomplete: 0 }) },
+  counts: { type: Array, default: () => [] }
+})
+
+const pieChartRef = ref(null)
+const barChartRef = ref(null)
+let pieInstance = null
+let barInstance = null
+
+function initCharts() {
+  if (pieChartRef.value) {
+    pieInstance = echarts.init(pieChartRef.value)
+  }
+  if (barChartRef.value) {
+    barInstance = echarts.init(barChartRef.value)
+  }
+}
+
+function updatePieChart() {
+  if (!pieInstance) return
+  const { completed, incomplete } = props.processStats
+  pieInstance.setOption({
+    title: { text: '流程完成状态', left: 'center', textStyle: { fontSize: 14 } },
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 25 },
+    series: [{
+      type: 'pie',
+      radius: ['30%', '60%'],
+      center: ['50%', '50%'],
+      data: [
+        { name: '已完成', value: completed, itemStyle: { color: '#67c23a' } },
+        { name: '未完成', value: incomplete, itemStyle: { color: '#e6a23c' } }
+      ],
+      label: { show: true, formatter: '{b}\n{c}个' }
+    }]
+  })
+}
+
+function lightenColor(hex, amount) {
+  const num = parseInt(hex.slice(1), 16)
+  const r = Math.min(255, (num >> 16) + Math.round((255 - (num >> 16)) * amount))
+  const g = Math.min(255, ((num >> 8) & 0xff) + Math.round((255 - ((num >> 8) & 0xff)) * amount))
+  const b = Math.min(255, (num & 0xff) + Math.round((255 - (num & 0xff)) * amount))
+  return `rgb(${r},${g},${b})`
+}
+
+function updateBarChart() {
+  if (!barInstance) return
+  const names = props.counts.map(item => item.name)
+  const colors = ['#ff4500', '#FFA500', '#C0C0C0', '#32CD32', '#00CED1', '#4169E1', '#9932CC', '#FF1493', '#8B4513']
+
+  // 实际值 — 深色，每个柱子不同颜色
+  const actualData = props.counts.map((item, idx) => ({
+    value: item.count,
+    itemStyle: { color: colors[idx % colors.length], borderRadius: [0, 0, 4, 4] }
+  }))
+  // 剩余值（9 - 实际值）— 用当前数据的浅色版本
+  const remainData = props.counts.map((item, idx) => ({
+    value: Math.max(0, 9 - item.count),
+    itemStyle: { color: lightenColor(colors[idx % colors.length], 0.7), borderRadius: [4, 4, 0, 0] }
+  }))
+
+  barInstance.setOption({
+    title: { text: '检测计数', left: 'center', textStyle: { fontSize: 14 } },
+    tooltip: {
+      trigger: 'axis',
+      formatter(params) {
+        const actual = params.find(p => p.seriesName === '实际值')
+        if (!actual) return ''
+        return `${actual.name}<br/>${actual.marker} 检测数: ${actual.value}/9`
+      }
+    },
+    grid: { left: '5%', right: '5%', bottom: '5%', top: '15%', containLabel: true },
+    xAxis: { type: 'category', data: names, axisLabel: { rotate: 30, fontSize: 12 } },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      max: 9,
+      splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }
+    },
+    series: [
+      {
+        type: 'bar',
+        name: '实际值',
+        stack: 'total',
+        barWidth: 22,
+        data: actualData,
+        markLine: {
+          silent: true,
+          symbol: 'none',
+          lineStyle: { color: '#e6a23c', type: 'dashed', width: 2 },
+          label: {
+            formatter: '上限: 9',
+            color: '#e6a23c',
+            fontSize: 12,
+            position: 'insideEndTop'
+          },
+          data: [{ yAxis: 9 }]
+        }
+      },
+      {
+        type: 'bar',
+        name: '',
+        stack: 'total',
+        barWidth: 22,
+        data: remainData
+      }
+    ]
+  })
+}
+
+watch(() => ({ ...props.processStats }), updatePieChart, { deep: true })
+watch(() => [...props.counts], updateBarChart, { deep: true })
+
+onMounted(() => {
+  nextTick(() => {
+    initCharts()
+    updatePieChart()
+    updateBarChart()
+  })
+})
+
+onUnmounted(() => {
+  pieInstance?.dispose()
+  barInstance?.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.charts-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+
+  .chart-box {
+    flex: 1;
+    background: $bg-white;
+    border-radius: $radius-md;
+    box-shadow: $shadow-sm;
+    overflow: hidden;
+    min-height: 0;
+
+    .chart {
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+  }
+}
+</style>
--- a/src/views/home/components/ControlButtons.vue
+++ b/src/views/home/components/ControlButtons.vue
@ -0,0 +1,46 @@
+<template>
+  <div class="control-buttons">
+    <el-button 
+      :type="streamRunning ? 'danger' : 'primary'" 
+      size="default"
+      @click="$emit('toggleStream')"
+      :disabled="streamAddressEmpty || (algorithmRunning && !streamRunning)"
+    >
+      {{ streamRunning ? '关闭视频流' : '启动视频流' }}
+    </el-button>
+    <el-button 
+      :type="algorithmRunning ? 'danger' : 'success'" 
+      size="default"
+      @click="$emit('toggleAlgorithm')"
+      :disabled="offlineVideoMissing"
+    >
+      {{ algorithmRunning ? '关闭算法' : '启动算法' }}
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  streamRunning: Boolean,
+  algorithmRunning: Boolean,
+  streamAddressEmpty: Boolean,
+  offlineVideoMissing: Boolean
+})
+
+defineEmits(['toggleStream', 'toggleAlgorithm'])
+</script>
+
+<style lang="scss" scoped>
+.control-buttons {
+  display: flex;
+  gap: 12px;
+  background: $bg-white;
+  padding: 16px;
+  border-radius: $radius-md;
+  box-shadow: $shadow-sm;
+
+  .el-button {
+    flex: 1;
+  }
+}
+</style>
--- a/src/views/home/components/CountsCard.vue
+++ b/src/views/home/components/CountsCard.vue
@ -0,0 +1,64 @@
+<template>
+  <div class="counts-card" v-if="hasCounts">
+    <div class="counts-header">检测计数</div>
+    <div class="counts-body">
+      <div class="count-item" v-for="(item, index) in counts" :key="index">
+        <span class="count-label">{{ item.name }}</span>
+        <span class="count-value">{{ item.count }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  counts: { type: Array, default: () => [] }
+})
+
+const hasCounts = computed(() => props.counts.length > 0)
+</script>
+
+<style lang="scss" scoped>
+.counts-card {
+  background: $bg-white;
+  border-radius: $radius-md;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+
+  .counts-header {
+    padding: 10px 16px;
+    background: #e3f2fd;
+    font-size: 14px;
+    font-weight: 600;
+    color: #1565c0;
+  }
+
+  .counts-body {
+    padding: 10px 16px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+
+    .count-item {
+      flex: 1 1 calc(50% - 6px);
+      display: flex;
+      justify-content: space-between;
+      padding: 6px 10px;
+      background: #f5f5f5;
+      border-radius: 6px;
+      font-size: 13px;
+
+      .count-label {
+        color: $text-secondary;
+      }
+
+      .count-value {
+        font-weight: 700;
+        color: $primary-color;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/home/components/DetectionProgress.vue
+++ b/src/views/home/components/DetectionProgress.vue
@ -0,0 +1,66 @@
+<template>
+  <div class="video-bottom-controls" v-if="visible">
+    <div class="detect-progress">
+      <div class="progress-info">
+        <span>{{ statusText || '检测中...' }}</span>
+        <span class="progress-pct">{{ progress.toFixed(1) }}%</span>
+      </div>
+      <el-progress :percentage="Math.round(progress)" :stroke-width="8" />
+      <div class="progress-actions">
+        <el-button size="small" :type="paused ? 'warning' : 'info'" @click="$emit('togglePause')" :disabled="ending">
+          <el-icon :size="14"><component :is="paused ? 'VideoPlay' : 'VideoPause'" /></el-icon>
+          {{ paused ? '恢复处理' : '暂停处理' }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  visible: Boolean,
+  progress: { type: Number, default: 0 },
+  statusText: String,
+  paused: Boolean,
+  ending: Boolean
+})
+
+defineEmits(['togglePause'])
+</script>
+
+<style lang="scss" scoped>
+.video-bottom-controls {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 8px 0;
+
+  .detect-progress {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    .progress-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      color: $text-secondary;
+
+      .progress-pct {
+        color: $primary-color;
+        font-weight: 600;
+      }
+    }
+
+    .progress-actions {
+      display: flex;
+      gap: 8px;
+
+      .el-button {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/home/components/FlowLog.vue
+++ b/src/views/home/components/FlowLog.vue
@ -0,0 +1,103 @@
+<template>
+  <div class="log-section">
+    <div class="log-header">流程日志</div>
+    <div class="log-body" ref="logBodyRef">
+      <div 
+        v-for="(log, index) in logs" 
+        :key="index" 
+        class="log-item"
+        :class="'log-' + log.type"
+      >
+        <span class="log-time">{{ log.time }}</span>
+        <div class="log-msg">{{ log.message }}</div>
+      </div>
+      <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  logs: { type: Array, default: () => [] }
+})
+
+const logBodyRef = ref(null)
+
+watch(() => props.logs.length, () => {
+  nextTick(() => {
+    if (logBodyRef.value) {
+      logBodyRef.value.scrollTop = logBodyRef.value.scrollHeight
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.log-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #fffacd;
+  border-radius: $radius-md;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+  min-height: 0;
+
+  .log-header {
+    padding: 10px 16px;
+    background: #fff176;
+    font-size: 14px;
+    font-weight: 600;
+    color: $text-primary;
+  }
+
+  .log-body {
+    flex: 1;
+    padding: 10px 16px;
+    overflow-y: auto;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+
+    .log-item {
+      width: 200%;
+      padding: 4px 0;
+      border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .log-time {
+        color: #666;
+        margin-right: 8px;
+      }
+
+      .log-msg {
+        color: $text-primary;
+        white-space: pre-wrap;
+      }
+
+      &.log-success .log-msg {
+        color: $success-color;
+      }
+
+      &.log-error .log-msg {
+        color: $danger-color;
+      }
+
+      &.log-warning .log-msg {
+        color: $warning-color;
+      }
+    }
+
+    .log-empty {
+      text-align: center;
+      color: #999;
+      padding: 20px 0;
+    }
+  }
+}
+</style>
--- a/src/views/home/components/VideoPlayer.vue
+++ b/src/views/home/components/VideoPlayer.vue
@ -0,0 +1,104 @@
+<template>
+  <div class="video-container">
+    <!-- 实时流模式 -->
+    <WebRtcPlayer
+      v-if="videoMode === 'live'"
+      :src="webrtcUrl"
+      @connection-status="$emit('connectionChange', $event)"
+    />
+    <!-- 离线视频模式 -->
+    <div v-else-if="videoMode === 'offline'" class="offline-player">
+      <video
+        ref="offlineVideoRef"
+        :src="offlineVideoUrl"
+        class="video-element"
+        controls
+      ></video>
+    </div>
+    <!-- 空状态 -->
+    <div v-else class="empty-video">
+      <el-icon :size="48"><VideoCamera /></el-icon>
+      <p class="empty-title">暂无视频画面</p>
+      <p class="empty-hint">点击上方「切换」加载实时流，或上传离线视频</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+import WebRtcPlayer from '@/components/WebRtcPlayer.vue'
+
+const props = defineProps({
+  videoMode: String,
+  webrtcUrl: String,
+  offlineVideoUrl: String,
+  videoAutoplayTrigger: Number
+})
+
+defineEmits(['connectionChange'])
+
+const offlineVideoRef = ref(null)
+
+// 外部触发自动播放（启动算法时）
+watch(() => props.videoAutoplayTrigger, () => {
+  if (props.videoMode === 'offline') {
+    nextTick(() => offlineVideoRef.value?.play())
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.video-container {
+  flex: 1;
+  background: #1a1a2e;
+  border-radius: $radius-md;
+  overflow: hidden;
+  position: relative;
+  min-height: 300px;
+
+  :deep(.webrtc-wrapper) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .offline-player {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .video-element {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      object-fit: contain;
+      background: #000;
+    }
+  }
+
+  .empty-video {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.5);
+
+    .empty-title {
+      margin-top: 16px;
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.45);
+    }
+
+    .empty-hint {
+      margin-top: 8px;
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
+</style>
--- a/src/views/home/components/VideoToolbar.vue
+++ b/src/views/home/components/VideoToolbar.vue
@ -0,0 +1,76 @@
+<template>
+  <div class="video-toolbar">
+    <div class="stream-info">
+      <span class="label">实时视频流:</span>
+      <el-input
+        :model-value="streamAddress"
+        size="small"
+        placeholder="输入地址如: 10.23.22.xx"
+        class="stream-input"
+        @update:model-value="$emit('update:streamAddress', $event)"
+      />
+      <el-button type="primary" size="small" @click="$emit('switchStream')" :disabled="disabled">切换</el-button>
+    </div>
+    <div class="upload-area">
+      <el-upload
+        :auto-upload="false"
+        :show-file-list="false"
+        accept="video/*"
+        :on-change="handleUpload"
+        :disabled="disabled"
+      >
+        <el-button size="small">
+          <el-icon :size="14"><Upload /></el-icon>
+          离线视频
+        </el-button>
+      </el-upload>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  streamAddress: String,
+  disabled: Boolean
+})
+
+const emit = defineEmits(['update:streamAddress', 'switchStream', 'uploadVideo'])
+
+function handleUpload(file) {
+  emit('uploadVideo', file)
+}
+</script>
+
+<style lang="scss" scoped>
+.video-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: $bg-white;
+  padding: 12px 16px;
+  border-radius: $radius-md;
+  box-shadow: $shadow-sm;
+
+  .stream-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .label {
+      font-size: 13px;
+      color: $text-secondary;
+      white-space: nowrap;
+    }
+
+    .stream-input {
+      width: 180px;
+    }
+  }
+
+  .upload-area {
+    :deep(.el-upload) {
+      display: block;
+    }
+  }
+}
+</style>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -0,0 +1,452 @@
+<template>
+  <div class="home-page">
+    <div class="left-section">
+      <ControlButtons
+        :stream-running="streamRunning"
+        :algorithm-running="algorithmRunning"
+        :stream-address-empty="!streamAddress"
+        :offline-video-missing="!offlineVideoUrl"
+        @toggle-stream="toggleStream"
+        @toggle-algorithm="toggleAlgorithm"
+      />
+
+      <div class="stats-panel">
+        <div v-for="item in detectCounts" :key="item.name" class="stat-box">
+          <div class="stat-label">{{ item.name }}</div>
+          <div class="stat-value">{{ item.count }}</div>
+        </div>
+      </div>
+
+      <FlowLog :logs="flowLogs" />
+    </div>
+    <div class="center-section">
+      <VideoToolbar
+        :stream-address="streamAddress"
+        :disabled="algorithmRunning || streamRunning"
+        @update:stream-address="streamAddress = $event"
+        @switch-stream="switchStream"
+        @upload-video="handleVideoUpload"
+      />
+
+      <VideoPlayer
+        :video-mode="videoMode"
+        :webrtc-url="webrtcUrl"
+        :offline-video-url="offlineVideoUrl"
+        :video-autoplay-trigger="videoAutoplayTrigger"
+        @connection-change="onConnectionChange"
+      />
+
+      <DetectionProgress
+        :visible="videoMode === 'offline' && !!offlineVideoUrl && algorithmRunning"
+        :progress="detectProgress"
+        :status-text="detectStatusText"
+        :paused="paused"
+        :ending="ending"
+        @toggle-pause="togglePause"
+      />
+    </div>
+    <div class="right-section">
+      <ChartsPanel :process-stats="processStats" :counts="detectCounts" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import WebSocketClient from '@/utils/websocket'
+
+import VideoToolbar from './components/VideoToolbar.vue'
+import VideoPlayer from './components/VideoPlayer.vue'
+import DetectionProgress from './components/DetectionProgress.vue'
+import ControlButtons from './components/ControlButtons.vue'
+import FlowLog from './components/FlowLog.vue'
+import ChartsPanel from './components/ChartsPanel.vue'
+import fileHttp from '@/utils/fileHttp.js'
+
+// ============ 视频流相关 ============
+const videoMode = ref('idle')
+const streamAddress = ref('')
+const webrtcUrl = computed(() => {
+  return import.meta.env.VITE_WEBRTC_URL || `http://${streamAddress.value}/stream`
+})
+const streamRunning = ref(false)
+
+function switchStream() {
+  if (!streamAddress.value) {
+    ElMessage.warning('请输入视频流地址')
+    return
+  }
+  videoMode.value = 'live'
+  ElMessage.success('已切换到实时视频流')
+}
+
+function toggleStream() {
+  streamRunning.value = !streamRunning.value
+  if (streamRunning.value) {
+    // 防呆：如果已有上传的离线视频，清空它，避免启动算法按钮未禁用
+    if (offlineVideoUrl.value) {
+      URL.revokeObjectURL(offlineVideoUrl.value)
+      offlineVideoUrl.value = ''
+      detectionFile.value = null
+      resetDetectionState()
+      addLog('已清空离线视频文件，如需检测请重新上传', 'warning')
+    }
+    videoMode.value = 'live'
+    ElMessage.success('视频流已启动')
+  } else {
+    videoMode.value = 'idle'
+    ElMessage.info('视频流已关闭')
+  }
+}
+
+function onConnectionChange(status) {
+  streamRunning.value = status
+}
+
+// ============ 离线视频相关 ============
+const offlineVideoUrl = ref('')
+const detectionFile = ref(null)
+
+function handleVideoUpload(file) {
+  if (offlineVideoUrl.value) {
+    URL.revokeObjectURL(offlineVideoUrl.value)
+  }
+  offlineVideoUrl.value = URL.createObjectURL(file.raw)
+  detectionFile.value = file.raw
+  videoMode.value = 'offline'
+  resetDetectionState()
+  ElMessage.success('离线视频已加载')
+}
+
+// ============ 离线视频检测（WebSocket 协议） ============
+const WS_URL = `ws://${fileHttp.ptApi}/ws/detect`
+const HTTP_BASE = `http://${fileHttp.ptApi}`
+
+const detectProgress = ref(0)
+const detectStatusText = ref('')
+
+const DEFAULT_COUNTS = [
+  { name: '附件包白板', count: 0 },
+  { name: '充电头', count: 0 },
+  { name: '充电线1', count: 0 },
+  { name: '充电线2', count: 0 },
+  { name: '附件包', count: 0 },
+  { name: '产品1', count: 0 },
+  { name: '隔板', count: 0 },
+  { name: '信封', count: 0 },
+  { name: '胶带', count: 0 }
+]
+const detectCounts = reactive(DEFAULT_COUNTS.map(c => ({ ...c })))
+const processStats = reactive({ completed: 0, incomplete: 0 })
+
+function mergeCounts(newCounts) {
+  newCounts.forEach(newItem => {
+    const existing = detectCounts.find(item => item.name === newItem.name)
+    if (existing) {
+      existing.count = newItem.count
+    }
+  })
+}
+
+function resetDetectionState() {
+  detectProgress.value = 0
+  detectStatusText.value = ''
+  detectCounts.forEach(item => { item.count = 0 })
+  processStats.completed = 0
+  processStats.incomplete = 0
+}
+
+async function sendFileInChunks(socket, file) {
+  const chunkSize = 1024 * 1024
+  let offset = 0
+  while (offset < file.size) {
+    const chunk = file.slice(offset, offset + chunkSize)
+    const buffer = await chunk.arrayBuffer()
+    socket.sendBinary(buffer)
+    offset += chunkSize
+  }
+}
+
+// ============ 算法控制 ============
+const algorithmRunning = ref(false)
+const paused = ref(false)
+const ending = ref(false)
+let wsClient = null
+const videoAutoplayTrigger = ref(0)
+
+function toggleAlgorithm() {
+  if (algorithmRunning.value && videoMode.value === 'offline' && detectionFile.value) {
+    endDetection()
+    return
+  }
+
+  algorithmRunning.value = !algorithmRunning.value
+
+  if (algorithmRunning.value) {
+    paused.value = false
+    ending.value = false
+    flowLogs.value = []
+
+    if (videoMode.value === 'offline' && detectionFile.value) {
+      resetDetectionState()
+      detectStatusText.value = '正在连接 WebSocket...'
+      addLog('开始连接算法检测服务', 'info')
+      // 触发视频自动播放
+      videoAutoplayTrigger.value++
+
+      wsClient = new WebSocketClient({
+        url: WS_URL,
+        binaryType: 'arraybuffer',
+        autoReconnect: false,
+        heartbeatInterval: 0,
+        heartbeatTimeout: 0,
+        debug: false
+      })
+
+      wsClient.on('open', () => {
+        detectStatusText.value = '已连接，正在打开算法开关...'
+        addLog('WebSocket 已连接，发送算法开关', 'info')
+        wsClient.send({ type: 'switch', enabled: true })
+      })
+
+      wsClient.on('message', async (msg) => {
+        switch (msg.type) {
+          case 'ready':
+            addLog('服务端 ready', 'info')
+            break
+
+          case 'switch':
+            addLog('算法开关已开启', 'success')
+            wsClient.send({
+              type: 'start',
+              filename: detectionFile.value.name,
+              options: {
+                conf: 0.6, iou: 0.45, skip: 5, imgsz: 640, max_frames: 0, save_video: true
+              }
+            })
+            break
+
+          case 'upload_started':
+            detectStatusText.value = '正在上传视频...'
+            addLog('开始上传视频文件', 'info')
+            await sendFileInChunks(wsClient, detectionFile.value)
+            wsClient.send({ type: 'end' })
+            addLog('视频上传完成，等待服务端处理', 'info')
+            break
+
+          case 'processing_started':
+            detectStatusText.value = '服务端正在处理视频...'
+            addLog('检测开始', 'success')
+            break
+
+          case 'pause':
+            paused.value = Boolean(msg.paused)
+            addLog(msg.message || (paused.value ? '检测已暂停' : '检测已恢复'), 'warning')
+            break
+
+          case 'progress':
+            detectProgress.value = Number(msg.progress || 0)
+            detectStatusText.value = `处理中 (${msg.frame || 0}/${msg.total_frames || 0})`
+            break
+
+          case 'counts':
+            mergeCounts(msg.counts || [])
+            break
+
+          case 'log':
+            addLog(msg.message || '', 'info')
+            break
+
+          case 'stopping':
+            ending.value = true
+            detectStatusText.value = msg.message || '正在结束检测...'
+            addLog(msg.message || '已请求结束检测', 'warning')
+            break
+
+          case 'cancelled':
+            ending.value = true
+            detectStatusText.value = msg.message || '检测已结束，正在生成当前结果...'
+            addLog(msg.message || '检测已结束', 'warning')
+            break
+
+          case 'done':
+            const videoUrl = HTTP_BASE.replace(/\/$/, '') + msg.output_video_url
+            if (offlineVideoUrl.value) {
+              URL.revokeObjectURL(offlineVideoUrl.value)
+            }
+            offlineVideoUrl.value = videoUrl
+            videoMode.value = 'offline'
+            detectStatusText.value = '检测完成'
+            detectProgress.value = 100
+            addLog('检测完成，视频已更新', 'success')
+            // 更新流程统计（饼图数据）
+            const processes = msg.processes || []
+            processStats.completed = processes.filter(p => p.is_complete).length
+            processStats.incomplete = processes.filter(p => !p.is_complete).length
+            // 更新检测计数（柱状图数据）
+            mergeCounts(msg.counts || [])
+            ElMessage.success('视频检测完成')
+            algorithmRunning.value = false
+            paused.value = false
+            ending.value = false
+            wsClient.close()
+            videoAutoplayTrigger.value++
+            break
+
+          case 'error':
+            detectStatusText.value = '检测出错'
+            addLog('服务端错误: ' + (msg.message || ''), 'error')
+            ElMessage.error(msg.message || '服务端处理出错')
+            algorithmRunning.value = false
+            paused.value = false
+            ending.value = false
+            wsClient.close()
+            break
+        }
+      })
+
+      wsClient.on('close', () => {
+        addLog('连接关闭', 'warning')
+        algorithmRunning.value = false
+        paused.value = false
+        ending.value = false
+      })
+
+      wsClient.on('error', () => {
+        detectStatusText.value = '连接失败'
+        addLog('WebSocket 连接失败，请检查服务地址', 'error')
+        ElMessage.error('WebSocket 连接失败')
+        algorithmRunning.value = false
+        paused.value = false
+        ending.value = false
+      })
+
+      wsClient.connect()
+    } else if (videoMode.value === 'offline' && !detectionFile.value) {
+      ElMessage.warning('请先上传离线视频')
+      algorithmRunning.value = false
+    } else {
+      wsClient = new WebSocketClient({
+        url: WS_URL, debug: true, autoReconnect: true
+      })
+      wsClient.on('open', () => {
+        ElMessage.success('算法已启动')
+        addLog('算法连接成功', 'info')
+      })
+      wsClient.on('message', (data) => {
+        console.log('[WebSocket] 收到算法数据:', data)
+      })
+      wsClient.on('close', () => addLog('算法连接已关闭', 'warning'))
+      wsClient.on('error', () => addLog('算法连接出错', 'error'))
+      wsClient.connect()
+    }
+  } else {
+    if (wsClient) {
+      wsClient.destroy()
+      wsClient = null
+    }
+    ElMessage.info('算法已关闭')
+    addLog('算法已关闭', 'info')
+  }
+}
+
+function togglePause() {
+  if (!wsClient || wsClient.getReadyState() !== WebSocket.OPEN) return
+  paused.value = !paused.value
+  wsClient.send({ type: 'pause', paused: paused.value })
+  addLog(paused.value ? '发送暂停请求...' : '发送恢复请求...', 'info')
+}
+
+function endDetection() {
+  if (!wsClient || wsClient.getReadyState() !== WebSocket.OPEN || ending.value) return
+  ending.value = true
+  detectStatusText.value = '已发送结束请求，等待服务端生成结果...'
+  addLog('前端请求结束检测', 'warning')
+  wsClient.send({ type: 'stop' })
+}
+
+// ============ 流程日志 ============
+const flowLogs = ref([])
+
+function addLog(message, type = 'info') {
+  const now = new Date()
+  const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
+  flowLogs.value.push({ time, message, type })
+  if (flowLogs.value.length > 200) {
+    flowLogs.value.shift()
+  }
+}
+
+// ============ 生命周期 ============
+onMounted(() => {
+  addLog('页面已加载，可上传离线视频或连接实时流', 'info')
+})
+
+onUnmounted(() => {
+  if (offlineVideoUrl.value) {
+    URL.revokeObjectURL(offlineVideoUrl.value)
+  }
+  if (wsClient) {
+    wsClient.destroy()
+    wsClient = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.home-page {
+  display: flex;
+  gap: 16px;
+  height: calc(100vh - #{$header-height} - 32px);
+  padding: 0;
+}
+
+.left-section, .right-section{
+  width: 500px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.left-section{
+  width: 400px;
+}
+.center-section{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  min-height: 0;
+}
+
+.stats-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  .stat-box {
+    flex: 0 0 calc(33.33% - 4px);
+    background: $bg-white;
+    padding: 6px 4px;
+    border-radius: $radius-md;
+    box-shadow: $shadow-sm;
+    text-align: center;
+
+    .stat-label {
+      font-size: 14px;
+      color: $text-secondary;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .stat-value {
+      font-size: 16px;
+      font-weight: 700;
+      color: $primary-color;
+    }
+  }
+}
+</style>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -0,0 +1,512 @@
+<template>
+  <div class="login-page">
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+      <div class="bg-circle circle-1"></div>
+      <div class="bg-circle circle-2"></div>
+      <div class="bg-circle circle-3"></div>
+      <div class="bg-grid"></div>
+    </div>
+
+    <!-- 登录卡片 -->
+    <div class="login-container">
+      <div class="login-card">
+        <!-- 左侧品牌区 -->
+        <div class="brand-section">
+          <div class="brand-content">
+            <div class="brand-logo">
+              <svg viewBox="0 0 60 60" width="60" height="60">
+                <rect width="60" height="60" rx="16" fill="white"/>
+                <path d="M16 20h10v20H16V20zm18 0h10v20H34V20z" fill="#2d5af0"/>
+                <path d="M20 26h20M20 32h20" stroke="#2d5af0" stroke-width="2" stroke-linecap="round"/>
+                <circle cx="35" cy="23" r="3.5" fill="#22c55e"/>
+              </svg>
+            </div>
+            <h1 class="brand-title">SOP作业检测系统</h1>
+            <p class="brand-desc">
+              智能化作业工序检测，精准把控每一道工序<br/>
+              确保产品装配零遗漏
+            </p>
+            <div class="brand-features">
+              <div class="feature-item">
+                <div class="feature-icon">
+                  <el-icon :size="18"><Checked /></el-icon>
+                </div>
+                <span>工序步骤实时检测</span>
+              </div>
+              <div class="feature-item">
+                <div class="feature-icon">
+                  <el-icon :size="18"><Box /></el-icon>
+                </div>
+                <span>配件完整性校验</span>
+              </div>
+              <div class="feature-item">
+                <div class="feature-icon">
+                  <el-icon :size="18"><DocumentChecked /></el-icon>
+                </div>
+                <span>检测报告自动生成</span>
+              </div>
+            </div>
+          </div>
+          <div class="brand-decoration">
+            <div class="decoration-line"></div>
+            <div class="decoration-line"></div>
+            <div class="decoration-line"></div>
+          </div>
+        </div>
+
+        <!-- 右侧表单区 -->
+        <div class="form-section">
+          <div class="form-header">
+            <h2>欢迎回来</h2>
+            <p>请登录您的账号以继续使用</p>
+          </div>
+
+          <el-form
+            ref="loginFormRef"
+            :model="loginForm"
+            :rules="rules"
+            class="login-form"
+            @keyup.enter="handleLogin"
+          >
+            <el-form-item prop="username">
+              <el-input
+                v-model="loginForm.username"
+                placeholder="请输入账号"
+                :prefix-icon="User"
+                size="large"
+                clearable
+              />
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                placeholder="请输入密码"
+                :prefix-icon="Lock"
+                size="large"
+                show-password
+              />
+            </el-form-item>
+
+            <div class="form-options">
+              <el-checkbox v-model="rememberMe">记住账号</el-checkbox>
+            </div>
+
+            <el-button
+              type="primary"
+              size="large"
+              class="login-btn"
+              :loading="loading"
+              @click="handleLogin"
+            >
+              {{ loading ? '登录中...' : '登 录' }}
+            </el-button>
+          </el-form>
+        </div>
+      </div>
+
+      <!-- 底部版权 -->
+      <div class="login-copyright">
+        © 2026 SOP作业检测系统 · 智能化工序管理平台
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+const REMEMBER_KEY = 'sop_remember_account'
+
+const loginFormRef = ref(null)
+const loading = ref(false)
+const rememberMe = ref(false)
+
+const loginForm = reactive({
+  username: '',
+  password: ''
+})
+
+// 初始化：读取本地存储的记住账号
+onMounted(() => {
+  try {
+    const saved = localStorage.getItem(REMEMBER_KEY)
+    if (saved) {
+      const data = JSON.parse(saved)
+      loginForm.username = data.username || ''
+      rememberMe.value = data.remember || false
+    }
+  } catch {
+    // ignore
+  }
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入账号', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不少于6位', trigger: 'blur' }
+  ]
+}
+
+// 保存/清除记住的账号
+function saveAccount() {
+  try {
+    if (rememberMe.value && loginForm.username) {
+      localStorage.setItem(REMEMBER_KEY, JSON.stringify({
+        username: loginForm.username,
+        remember: true
+      }))
+    } else {
+      localStorage.removeItem(REMEMBER_KEY)
+    }
+  } catch {
+    // ignore
+  }
+}
+
+async function handleLogin() {
+  if (!loginFormRef.value) return
+
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+
+    // 登录前先保存记住账号状态
+    saveAccount()
+
+    await userStore.login({
+      username: loginForm.username,
+      password: loginForm.password
+    })
+    ElMessage.success('登录成功，欢迎回来！')
+    const redirect = route.query.redirect || '/home'
+    router.push(redirect)
+  } catch (error) {
+    ElMessage.error(error.message || '登录失败，请重试')
+    // 登录失败时恢复记住状态
+    saveAccount()
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 30%, #f5f7fc 70%, #eef2fb 100%);
+}
+
+// 背景装饰
+.bg-decoration {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  .bg-circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.12;
+
+    &.circle-1 {
+      width: 600px;
+      height: 600px;
+      background: linear-gradient(135deg, #2d5af0, #6366f1);
+      top: -200px;
+      right: -150px;
+      animation: float 8s ease-in-out infinite;
+    }
+
+    &.circle-2 {
+      width: 400px;
+      height: 400px;
+      background: linear-gradient(135deg, #22c55e, #10b981);
+      bottom: -120px;
+      left: -80px;
+      animation: float 10s ease-in-out infinite reverse;
+    }
+
+    &.circle-3 {
+      width: 250px;
+      height: 250px;
+      background: linear-gradient(135deg, #f59e0b, #f97316);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      animation: float 7s ease-in-out infinite;
+      opacity: 0.05;
+    }
+  }
+
+  .bg-grid {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(45, 90, 240, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(45, 90, 240, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(3deg); }
+}
+
+// 登录容器
+.login-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+// 登录卡片
+.login-card {
+  display: flex;
+  width: 900px;
+  min-height: 520px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.06),
+    0 1px 4px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+// 左侧品牌区
+.brand-section {
+  width: 420px;
+  background: linear-gradient(160deg, #1e3a8a 0%, #2d5af0 40%, #4f46e5 100%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 40px;
+  overflow: hidden;
+
+  .brand-content {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+  }
+
+  .brand-logo {
+    margin-bottom: 24px;
+  }
+
+  .brand-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #ffffff;
+    margin-bottom: 12px;
+    letter-spacing: 1px;
+  }
+
+  .brand-desc {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.8;
+    margin-bottom: 36px;
+  }
+
+  .brand-features {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .feature-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 16px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      transition: $transition;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.18);
+      }
+
+      .feature-icon {
+        width: 32px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        flex-shrink: 0;
+      }
+
+      span {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 13px;
+        font-weight: 500;
+        text-align: left;
+      }
+    }
+  }
+
+  .brand-decoration {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    opacity: 0.08;
+
+    .decoration-line {
+      width: 160px;
+      height: 2px;
+      background: #ffffff;
+      border-radius: 1px;
+
+      &:nth-child(2) {
+        width: 120px;
+      }
+      &:nth-child(3) {
+        width: 80px;
+      }
+    }
+  }
+}
+
+// 右侧表单区
+.form-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 48px 40px;
+
+  .form-header {
+    margin-bottom: 36px;
+
+    h2 {
+      font-size: 26px;
+      font-weight: 700;
+      color: $text-primary;
+      margin-bottom: 8px;
+    }
+
+    p {
+      font-size: 14px;
+      color: $text-secondary;
+    }
+  }
+}
+
+.login-form {
+  .el-form-item {
+    margin-bottom: 20px;
+
+    :deep(.el-input__wrapper) {
+      border-radius: $radius-md;
+      box-shadow: 0 0 0 1px $border-color inset;
+      transition: $transition;
+      padding: 2px 12px;
+
+      &:hover {
+        box-shadow: 0 0 0 1px $primary-light inset;
+      }
+
+      &.is-focus {
+        box-shadow: 0 0 0 1px $primary-color inset, 0 0 0 3px rgba(45, 90, 240, 0.1);
+      }
+    }
+
+    :deep(.el-input__prefix) {
+      color: $text-light;
+      margin-right: 6px;
+    }
+  }
+
+  .form-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 28px;
+
+    :deep(.el-checkbox__label) {
+      font-size: 13px;
+      color: $text-secondary;
+    }
+  }
+
+  .login-btn {
+    width: 100%;
+    height: 46px;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 4px;
+    border-radius: $radius-md;
+    background: linear-gradient(135deg, #2d5af0, #4f46e5);
+    border: none;
+    transition: $transition;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 20px rgba(45, 90, 240, 0.35);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+// 版权信息
+.login-copyright {
+  font-size: 12px;
+  color: $text-light;
+  letter-spacing: 0.5px;
+}
+
+// 响应式
+@media (max-width: 960px) {
+  .login-card {
+    width: 90vw;
+    flex-direction: column;
+
+    .brand-section {
+      width: 100%;
+      padding: 32px 24px;
+
+      .brand-features {
+        display: none;
+      }
+    }
+
+    .form-section {
+      padding: 32px 24px;
+    }
+  }
+}
+</style>
--- a/test_websocket_frontend(2).html
+++ b/test_websocket_frontend(2).html
@ -0,0 +1,431 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SOP WebSocket 前端测试</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: Arial, "Microsoft YaHei", sans-serif;
+      background: #f5f7fb;
+      color: #1f2937;
+    }
+    .container {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    .card {
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+      padding: 20px;
+      margin-bottom: 16px;
+    }
+    h1 {
+      margin: 0 0 16px;
+      font-size: 24px;
+    }
+    label {
+      display: block;
+      margin: 10px 0 6px;
+      font-weight: 600;
+    }
+    input, button {
+      font-size: 14px;
+    }
+    input[type="text"], input[type="number"] {
+      width: 100%;
+      box-sizing: border-box;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      padding: 10px;
+    }
+    input[type="file"] {
+      width: 100%;
+      padding: 10px 0;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      gap: 10px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    button {
+      border: 0;
+      border-radius: 8px;
+      padding: 10px 16px;
+      cursor: pointer;
+      color: #fff;
+      background: #2563eb;
+    }
+    button:disabled {
+      cursor: not-allowed;
+      background: #9ca3af;
+    }
+    .danger {
+      background: #dc2626;
+    }
+    .status {
+      padding: 10px 12px;
+      border-radius: 8px;
+      background: #eef2ff;
+      color: #3730a3;
+      margin-bottom: 12px;
+      white-space: pre-wrap;
+    }
+    .progress-wrap {
+      height: 16px;
+      background: #e5e7eb;
+      border-radius: 999px;
+      overflow: hidden;
+    }
+    .progress-bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, #22c55e, #16a34a);
+      transition: width 0.2s;
+    }
+    .counts {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 8px;
+    }
+    .count-item {
+      padding: 10px;
+      border-radius: 8px;
+      background: #f3f4f6;
+      display: flex;
+      justify-content: space-between;
+    }
+    .log {
+      height: 280px;
+      overflow: auto;
+      background: #111827;
+      color: #d1d5db;
+      border-radius: 8px;
+      padding: 12px;
+      font-family: Consolas, monospace;
+      font-size: 13px;
+      white-space: pre-wrap;
+    }
+    video {
+      width: 100%;
+      max-height: 520px;
+      background: #000;
+      border-radius: 8px;
+    }
+    a {
+      color: #2563eb;
+      word-break: break-all;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="card">
+      <h1>SOP 视频检测 WebSocket 前端测试</h1>
+      <div id="status" class="status">未连接</div>
+
+      <label>WebSocket 地址</label>
+      <input id="wsUrl" type="text" value="ws://10.21.221.41:8000/ws/detect" />
+
+      <label>HTTP 服务地址，用于播放结果视频</label>
+      <input id="httpBase" type="text" value="http://10.21.221.41:8000" />
+
+      <label>选择要上传的视频</label>
+      <input id="videoFile" type="file" accept="video/*" />
+
+      <div class="grid">
+        <div>
+          <label>conf</label>
+          <input id="conf" type="number" value="0.5" min="0" max="1" step="0.01" />
+        </div>
+        <div>
+          <label>iou</label>
+          <input id="iou" type="number" value="0.45" min="0" max="1" step="0.01" />
+        </div>
+        <div>
+          <label>skip</label>
+          <input id="skip" type="number" value="5" min="1" step="1" />
+        </div>
+        <div>
+          <label>max_frames，0 表示完整视频</label>
+          <input id="maxFrames" type="number" value="0" min="0" step="1" />
+        </div>
+      </div>
+
+      <div class="buttons">
+        <button id="startBtn">上传并开始检测</button>
+        <button id="pauseBtn" disabled>暂停处理</button>
+        <button id="endBtn" class="danger" disabled>结束检测</button>
+        <button id="stopBtn" class="danger" disabled>关闭连接</button>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>实时进度</h2>
+      <div class="progress-wrap"><div id="progressBar" class="progress-bar"></div></div>
+      <p id="progressText">0%</p>
+    </div>
+
+    <div class="card">
+      <h2>实时计数</h2>
+      <div id="counts" class="counts">暂无计数</div>
+    </div>
+
+    <div class="card">
+      <h2>实时日志</h2>
+      <div id="log" class="log"></div>
+    </div>
+
+    <div class="card">
+      <h2>处理后视频</h2>
+      <video id="resultVideo" controls></video>
+      <p id="resultLinks"></p>
+    </div>
+  </div>
+
+  <script>
+    const statusEl = document.getElementById("status");
+    const logEl = document.getElementById("log");
+    const countsEl = document.getElementById("counts");
+    const progressBar = document.getElementById("progressBar");
+    const progressText = document.getElementById("progressText");
+    const resultVideo = document.getElementById("resultVideo");
+    const resultLinks = document.getElementById("resultLinks");
+    const startBtn = document.getElementById("startBtn");
+    const pauseBtn = document.getElementById("pauseBtn");
+    const endBtn = document.getElementById("endBtn");
+    const stopBtn = document.getElementById("stopBtn");
+
+    let ws = null;
+    let paused = false;
+    let ending = false;
+
+    function setStatus(text) {
+      statusEl.textContent = text;
+    }
+
+    function appendLog(text) {
+      logEl.textContent += text + "\n";
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+
+    function renderCounts(counts) {
+      const entries = Object.entries(counts || {});
+      if (!entries.length) {
+        countsEl.textContent = "暂无计数";
+        return;
+      }
+      countsEl.innerHTML = entries.map(([name, value]) => (
+        `<div class="count-item"><span>${name}</span><strong>${value}</strong></div>`
+      )).join("");
+    }
+
+    function renderProgress(msg) {
+      const progress = Number(msg.progress || 0);
+      progressBar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
+      progressText.textContent = `${progress.toFixed(1)}% | ${msg.frame || 0}/${msg.total_frames || 0}`;
+    }
+
+    async function sendFileInChunks(socket, file) {
+      const chunkSize = 1024 * 1024;
+      let offset = 0;
+      while (offset < file.size) {
+        const chunk = file.slice(offset, offset + chunkSize);
+        const buffer = await chunk.arrayBuffer();
+        socket.send(buffer);
+        offset += chunkSize;
+      }
+    }
+
+    startBtn.onclick = async () => {
+      const file = document.getElementById("videoFile").files[0];
+      const wsUrl = document.getElementById("wsUrl").value.trim();
+
+      if (!file) {
+        alert("请先选择视频文件");
+        return;
+      }
+      if (!wsUrl.startsWith("ws://") && !wsUrl.startsWith("wss://")) {
+        alert("WebSocket 地址必须以 ws:// 或 wss:// 开头");
+        return;
+      }
+
+      logEl.textContent = "";
+      resultLinks.innerHTML = "";
+      resultVideo.removeAttribute("src");
+      resultVideo.load();
+      renderCounts({});
+      renderProgress({ progress: 0, frame: 0, total_frames: 0 });
+
+      startBtn.disabled = true;
+      pauseBtn.disabled = true;
+      pauseBtn.textContent = "暂停处理";
+      paused = false;
+      ending = false;
+      endBtn.disabled = true;
+      stopBtn.disabled = false;
+      setStatus("正在连接 WebSocket...");
+
+      ws = new WebSocket(wsUrl);
+      ws.binaryType = "arraybuffer";
+
+      ws.onopen = () => {
+        setStatus("已连接，正在打开算法开关...");
+        ws.send(JSON.stringify({ type: "switch", enabled: true }));
+      };
+
+      ws.onmessage = async (event) => {
+        const msg = JSON.parse(event.data);
+
+        if (msg.type === "ready") {
+          appendLog("服务端 ready");
+          return;
+        }
+
+        if (msg.type === "switch") {
+          appendLog("算法开关已开启");
+          ws.send(JSON.stringify({
+            type: "start",
+            filename: file.name,
+            options: {
+              conf: Number(document.getElementById("conf").value),
+              iou: Number(document.getElementById("iou").value),
+              skip: Number(document.getElementById("skip").value),
+              imgsz: 640,
+              max_frames: Number(document.getElementById("maxFrames").value),
+              save_video: true
+            }
+          }));
+          return;
+        }
+
+        if (msg.type === "upload_started") {
+          setStatus("正在上传视频...");
+          appendLog("开始上传视频");
+          await sendFileInChunks(ws, file);
+          ws.send(JSON.stringify({ type: "end" }));
+          appendLog("视频上传完成，等待服务端处理");
+          return;
+        }
+
+        if (msg.type === "processing_started") {
+          setStatus("服务端正在处理视频...");
+          appendLog("检测开始");
+          pauseBtn.disabled = false;
+          endBtn.disabled = false;
+          return;
+        }
+
+        if (msg.type === "stopping") {
+          ending = true;
+          pauseBtn.disabled = true;
+          endBtn.disabled = true;
+          setStatus(msg.message || "正在结束检测...");
+          appendLog(msg.message || "已请求结束检测");
+          return;
+        }
+
+        if (msg.type === "cancelled") {
+          ending = true;
+          pauseBtn.disabled = true;
+          endBtn.disabled = true;
+          setStatus(msg.message || "检测已结束，正在生成当前结果...");
+          appendLog(msg.message || "检测已结束");
+          return;
+        }
+
+        if (msg.type === "pause") {
+          paused = Boolean(msg.paused);
+          pauseBtn.textContent = paused ? "恢复处理" : "暂停处理";
+          setStatus(paused ? "检测已暂停，服务仍在运行" : "服务端正在处理视频...");
+          appendLog(msg.message || (paused ? "检测已暂停" : "检测已恢复"));
+          return;
+        }
+
+        if (msg.type === "progress") {
+          renderProgress(msg);
+          return;
+        }
+
+        if (msg.type === "counts") {
+          renderCounts(msg.counts);
+          return;
+        }
+
+        if (msg.type === "log") {
+          appendLog(msg.message || "");
+          return;
+        }
+
+        if (msg.type === "done") {
+          const httpBase = document.getElementById("httpBase").value.replace(/\/$/, "");
+          const videoUrl = httpBase + msg.output_video_url;
+          const reportUrl = httpBase + msg.report_url;
+
+          setStatus("检测完成");
+          pauseBtn.disabled = true;
+          endBtn.disabled = true;
+          renderCounts(msg.counts || {});
+          resultVideo.src = videoUrl;
+          resultLinks.innerHTML = `结果视频：<a href="${videoUrl}" target="_blank">${videoUrl}</a><br>` +
+            `检测报告：<a href="${reportUrl}" target="_blank">${reportUrl}</a>`;
+          appendLog("检测完成");
+          ws.close();
+          return;
+        }
+
+        if (msg.type === "error") {
+          setStatus("服务端错误：" + msg.message);
+          appendLog("错误：" + msg.message);
+          pauseBtn.disabled = true;
+          endBtn.disabled = true;
+          ws.close();
+        }
+      };
+
+      ws.onerror = () => {
+        setStatus("WebSocket 连接失败，请检查服务地址、端口、防火墙和服务是否以 0.0.0.0 启动");
+      };
+
+      ws.onclose = () => {
+        startBtn.disabled = false;
+        pauseBtn.disabled = true;
+        pauseBtn.textContent = "暂停处理";
+        endBtn.disabled = true;
+        stopBtn.disabled = true;
+      };
+    };
+
+    pauseBtn.onclick = () => {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      paused = !paused;
+      ws.send(JSON.stringify({ type: "pause", paused }));
+      pauseBtn.textContent = paused ? "恢复处理" : "暂停处理";
+    };
+
+    endBtn.onclick = () => {
+      if (!ws || ws.readyState !== WebSocket.OPEN || ending) return;
+      ending = true;
+      pauseBtn.disabled = true;
+      endBtn.disabled = true;
+      setStatus("已发送结束检测请求，等待服务端生成当前结果...");
+      appendLog("前端请求结束检测");
+      ws.send(JSON.stringify({ type: "stop" }));
+    };
+
+    stopBtn.onclick = () => {
+      if (ws) ws.close();
+      setStatus("连接已关闭");
+    };
+  </script>
+</body>
+</html>
--- a/test_websocket_frontend.html
+++ b/test_websocket_frontend.html
@ -0,0 +1,368 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SOP WebSocket 前端测试</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: Arial, "Microsoft YaHei", sans-serif;
+      background: #f5f7fb;
+      color: #1f2937;
+    }
+    .container {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    .card {
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+      padding: 20px;
+      margin-bottom: 16px;
+    }
+    h1 {
+      margin: 0 0 16px;
+      font-size: 24px;
+    }
+    label {
+      display: block;
+      margin: 10px 0 6px;
+      font-weight: 600;
+    }
+    input, button {
+      font-size: 14px;
+    }
+    input[type="text"], input[type="number"] {
+      width: 100%;
+      box-sizing: border-box;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      padding: 10px;
+    }
+    input[type="file"] {
+      width: 100%;
+      padding: 10px 0;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      gap: 10px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    button {
+      border: 0;
+      border-radius: 8px;
+      padding: 10px 16px;
+      cursor: pointer;
+      color: #fff;
+      background: #2563eb;
+    }
+    button:disabled {
+      cursor: not-allowed;
+      background: #9ca3af;
+    }
+    .danger {
+      background: #dc2626;
+    }
+    .status {
+      padding: 10px 12px;
+      border-radius: 8px;
+      background: #eef2ff;
+      color: #3730a3;
+      margin-bottom: 12px;
+      white-space: pre-wrap;
+    }
+    .progress-wrap {
+      height: 16px;
+      background: #e5e7eb;
+      border-radius: 999px;
+      overflow: hidden;
+    }
+    .progress-bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, #22c55e, #16a34a);
+      transition: width 0.2s;
+    }
+    .counts {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 8px;
+    }
+    .count-item {
+      padding: 10px;
+      border-radius: 8px;
+      background: #f3f4f6;
+      display: flex;
+      justify-content: space-between;
+    }
+    .log {
+      height: 280px;
+      overflow: auto;
+      background: #111827;
+      color: #d1d5db;
+      border-radius: 8px;
+      padding: 12px;
+      font-family: Consolas, monospace;
+      font-size: 13px;
+      white-space: pre-wrap;
+    }
+    video {
+      width: 100%;
+      max-height: 520px;
+      background: #000;
+      border-radius: 8px;
+    }
+    a {
+      color: #2563eb;
+      word-break: break-all;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="card">
+      <h1>SOP 视频检测 WebSocket 前端测试</h1>
+      <div id="status" class="status">未连接</div>
+
+      <label>WebSocket 地址</label>
+      <input id="wsUrl" type="text" value="ws://10.21.221.41:8000/ws/detect" />
+
+      <label>HTTP 服务地址，用于播放结果视频</label>
+      <input id="httpBase" type="text" value="http://10.21.221.41:8000" />
+
+      <label>选择要上传的视频</label>
+      <input id="videoFile" type="file" accept="video/*" />
+
+      <div class="grid">
+        <div>
+          <label>conf</label>
+          <input id="conf" type="number" value="0.5" min="0" max="1" step="0.01" />
+        </div>
+        <div>
+          <label>iou</label>
+          <input id="iou" type="number" value="0.45" min="0" max="1" step="0.01" />
+        </div>
+        <div>
+          <label>skip</label>
+          <input id="skip" type="number" value="5" min="1" step="1" />
+        </div>
+        <div>
+          <label>max_frames，0 表示完整视频</label>
+          <input id="maxFrames" type="number" value="0" min="0" step="1" />
+        </div>
+      </div>
+
+      <div class="buttons">
+        <button id="startBtn">上传并开始检测</button>
+        <button id="stopBtn" class="danger" disabled>关闭连接</button>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>实时进度</h2>
+      <div class="progress-wrap"><div id="progressBar" class="progress-bar"></div></div>
+      <p id="progressText">0%</p>
+    </div>
+
+    <div class="card">
+      <h2>实时计数</h2>
+      <div id="counts" class="counts">暂无计数</div>
+    </div>
+
+    <div class="card">
+      <h2>实时日志</h2>
+      <div id="log" class="log"></div>
+    </div>
+
+    <div class="card">
+      <h2>处理后视频</h2>
+      <video id="resultVideo" controls></video>
+      <p id="resultLinks"></p>
+    </div>
+  </div>
+
+  <script>
+    const statusEl = document.getElementById("status");
+    const logEl = document.getElementById("log");
+    const countsEl = document.getElementById("counts");
+    const progressBar = document.getElementById("progressBar");
+    const progressText = document.getElementById("progressText");
+    const resultVideo = document.getElementById("resultVideo");
+    const resultLinks = document.getElementById("resultLinks");
+    const startBtn = document.getElementById("startBtn");
+    const stopBtn = document.getElementById("stopBtn");
+
+    let ws = null;
+
+    function setStatus(text) {
+      statusEl.textContent = text;
+    }
+
+    function appendLog(text) {
+      logEl.textContent += text + "\n";
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+
+    function renderCounts(counts) {
+      const entries = Object.entries(counts || {});
+      if (!entries.length) {
+        countsEl.textContent = "暂无计数";
+        return;
+      }
+      countsEl.innerHTML = entries.map(([name, value]) => (
+        `<div class="count-item"><span>${name}</span><strong>${value}</strong></div>`
+      )).join("");
+    }
+
+    function renderProgress(msg) {
+      const progress = Number(msg.progress || 0);
+      progressBar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
+      progressText.textContent = `${progress.toFixed(1)}% | ${msg.frame || 0}/${msg.total_frames || 0}`;
+    }
+
+    async function sendFileInChunks(socket, file) {
+      const chunkSize = 1024 * 1024;
+      let offset = 0;
+      while (offset < file.size) {
+        const chunk = file.slice(offset, offset + chunkSize);
+        const buffer = await chunk.arrayBuffer();
+        socket.send(buffer);
+        offset += chunkSize;
+      }
+    }
+
+    startBtn.onclick = async () => {
+      const file = document.getElementById("videoFile").files[0];
+      const wsUrl = document.getElementById("wsUrl").value.trim();
+
+      if (!file) {
+        alert("请先选择视频文件");
+        return;
+      }
+      if (!wsUrl.startsWith("ws://") && !wsUrl.startsWith("wss://")) {
+        alert("WebSocket 地址必须以 ws:// 或 wss:// 开头");
+        return;
+      }
+
+      logEl.textContent = "";
+      resultLinks.innerHTML = "";
+      resultVideo.removeAttribute("src");
+      resultVideo.load();
+      renderCounts({});
+      renderProgress({ progress: 0, frame: 0, total_frames: 0 });
+
+      startBtn.disabled = true;
+      stopBtn.disabled = false;
+      setStatus("正在连接 WebSocket...");
+
+      ws = new WebSocket(wsUrl);
+      ws.binaryType = "arraybuffer";
+
+      ws.onopen = () => {
+        setStatus("已连接，正在打开算法开关...");
+        ws.send(JSON.stringify({ type: "switch", enabled: true }));
+      };
+
+      ws.onmessage = async (event) => {
+        const msg = JSON.parse(event.data);
+
+        if (msg.type === "ready") {
+          appendLog("服务端 ready");
+          return;
+        }
+
+        if (msg.type === "switch") {
+          appendLog("算法开关已开启");
+          ws.send(JSON.stringify({
+            type: "start",
+            filename: file.name,
+            options: {
+              conf: Number(document.getElementById("conf").value),
+              iou: Number(document.getElementById("iou").value),
+              skip: Number(document.getElementById("skip").value),
+              imgsz: 640,
+              max_frames: Number(document.getElementById("maxFrames").value),
+              save_video: true
+            }
+          }));
+          return;
+        }
+
+        if (msg.type === "upload_started") {
+          setStatus("正在上传视频...");
+          appendLog("开始上传视频");
+          await sendFileInChunks(ws, file);
+          ws.send(JSON.stringify({ type: "end" }));
+          appendLog("视频上传完成，等待服务端处理");
+          return;
+        }
+
+        if (msg.type === "processing_started") {
+          setStatus("服务端正在处理视频...");
+          appendLog("检测开始");
+          return;
+        }
+
+        if (msg.type === "progress") {
+          renderProgress(msg);
+          return;
+        }
+
+        if (msg.type === "counts") {
+          renderCounts(msg.counts);
+          return;
+        }
+
+        if (msg.type === "log") {
+          appendLog(msg.message || "");
+          return;
+        }
+
+        if (msg.type === "done") {
+          const httpBase = document.getElementById("httpBase").value.replace(/\/$/, "");
+          const videoUrl = httpBase + msg.output_video_url;
+          const reportUrl = httpBase + msg.report_url;
+
+          setStatus("检测完成");
+          renderCounts(msg.counts || {});
+          resultVideo.src = videoUrl;
+          resultLinks.innerHTML = `结果视频：<a href="${videoUrl}" target="_blank">${videoUrl}</a><br>` +
+            `检测报告：<a href="${reportUrl}" target="_blank">${reportUrl}</a>`;
+          appendLog("检测完成");
+          ws.close();
+          return;
+        }
+
+        if (msg.type === "error") {
+          setStatus("服务端错误：" + msg.message);
+          appendLog("错误：" + msg.message);
+          ws.close();
+        }
+      };
+
+      ws.onerror = () => {
+        setStatus("WebSocket 连接失败，请检查服务地址、端口、防火墙和服务是否以 0.0.0.0 启动");
+      };
+
+      ws.onclose = () => {
+        startBtn.disabled = false;
+        stopBtn.disabled = true;
+      };
+    };
+
+    stopBtn.onclick = () => {
+      if (ws) ws.close();
+      setStatus("连接已关闭");
+    };
+  </script>
+</body>
+</html>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { fileURLToPath, URL } from 'node:url'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/styles/variables.scss" as *;`
+      }
+    }
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 3001,
+    open: true
+  }
+})
Author	SHA1	Message	Date
zhoulexin	8ff1b05f22	fix:联调算法	8 hours ago
zhoulexin	69259d9de7	feat:初始化代码	3 days ago