add:ota管理与固件上传与下载 (#931)

* 新增ota管理与固件上传于下载

* feat: 支持通过OTA更新websocket地址

* update:合并最新代码

* update:优化OTA增删改查

* update:一个临时下载链接最多只能下载3次，防止盗链和流量攻击

* update:OTA固件增删改查

---------

Co-authored-by: kevin1sMe <linjiang1205@gmail.com>
Co-authored-by: hrz <1710360675@qq.com>

main/manager-web/src/apis/api.js

@@ -5,6 +5,7 @@ import device from './module/device.js'
 import model from './module/model.js'
 import timbre from "./module/timbre.js"
 import user from './module/user.js'
+import ota from './module/ota.js'
 
 /**
  * 接口地址
@@ -31,4 +32,5 @@ export default {
     device,
     model,
     timbre,
+    ota
 }

main/manager-web/src/apis/module/ota.js

@@ -0,0 +1,123 @@
+import { getServiceUrl } from '../api';
+import RequestService from '../httpRequest';
+
+export default {
+    // 分页查询OTA固件信息
+    getOtaList(params, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag`)
+            .method('GET')
+            .data(params)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('获取OTA固件列表失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getOtaList(params, callback);
+                });
+            }).send();
+    },
+    // 获取单个OTA固件信息
+    getOtaInfo(id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag/${id}`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('获取OTA固件信息失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getOtaInfo(id, callback);
+                });
+            }).send();
+    },
+    // 保存OTA固件信息
+    saveOta(entity, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag`)
+            .method('POST')
+            .data(entity)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('保存OTA固件信息失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.saveOta(entity, callback);
+                });
+            }).send();
+    },
+    // 更新OTA固件信息
+    updateOta(id, entity, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag/${id}`)
+            .method('PUT')
+            .data(entity)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('更新OTA固件信息失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.updateOta(id, entity, callback);
+                });
+            }).send();
+    },
+    // 删除OTA固件
+    deleteOta(id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag/${id}`)
+            .method('DELETE')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('删除OTA固件失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.deleteOta(id, callback);
+                });
+            }).send();
+    },
+    // 上传固件文件
+    uploadFirmware(file, callback) {
+        const formData = new FormData();
+        formData.append('file', file);
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag/upload`)
+            .method('POST')
+            .data(formData)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('上传固件文件失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.uploadFirmware(file, callback);
+                });
+            }).send();
+    },
+    // 获取固件下载链接
+    getDownloadUrl(id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/otaMag/getDownloadUrl/${id}`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('获取下载链接失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getDownloadUrl(id, callback);
+                });
+            }).send();
+    }
+}

main/manager-web/src/components/FirmwareDialog.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" width="500px" @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="固件名称" prop="firmwareName">
+        <el-input v-model="form.firmwareName" placeholder="请输入固件名称(板子+版本号)"></el-input>
+      </el-form-item>
+      <el-form-item label="固件类型" prop="type">
+        <el-select v-model="form.type" placeholder="请选择固件类型" style="width: 100%;" filterable>
+          <el-option v-for="item in firmwareTypes" :key="item.key" :label="item.name" :value="item.key"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="版本号" prop="version">
+        <el-input v-model="form.version" placeholder="请输入版本号(x.x.x格式)"></el-input>
+      </el-form-item>
+      <el-form-item label="固件文件" prop="firmwarePath">
+        <el-upload class="upload-demo" action="#" :http-request="handleUpload" :before-upload="beforeUpload"
+          :accept="'.bin,.apk'" :limit="1" :multiple="false" :auto-upload="true">
+          <el-button size="small" type="primary">点击上传</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传固件文件(.bin/.apk)，且不超过100MB</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Api from '@/apis/api';
+import { FIRMWARE_TYPES } from '@/utils';
+
+export default {
+  name: 'FirmwareDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      firmwareTypes: FIRMWARE_TYPES,
+      rules: {
+        firmwareName: [
+          { required: true, message: '请输入固件名称(板子+版本号)', trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: '请选择固件类型', trigger: 'change' }
+        ],
+        version: [
+          { required: true, message: '请输入版本号', trigger: 'blur' },
+          { pattern: /^\d+\.\d+\.\d+$/, message: '版本号格式不正确，请输入x.x.x格式', trigger: 'blur' }
+        ],
+        firmwarePath: [
+          { required: false, message: '请上传固件文件', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$refs.form.clearValidate();
+      this.$emit('cancel');
+    },
+    handleCancel() {
+      this.$refs.form.clearValidate();
+      this.$emit('cancel');
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 如果是新增模式且没有上传文件，则提示错误
+          if (!this.form.id && !this.form.firmwarePath) {
+            this.$message.error('请上传固件文件')
+            return
+          }
+          // 提交成功后将关闭对话框的逻辑交给父组件处理
+          this.$emit('submit', this.form)
+        }
+      })
+    },
+    beforeUpload(file) {
+      const isValidSize = file.size / 1024 / 1024 < 100
+      const isValidType = ['.bin', '.apk'].some(ext => file.name.toLowerCase().endsWith(ext))
+
+      if (!isValidType) {
+        this.$message.error('只能上传.bin/.apk格式的固件文件!')
+        return false
+      }
+      if (!isValidSize) {
+        this.$message.error('固件文件大小不能超过100MB!')
+        return false
+      }
+      return true
+    },
+    handleUpload(options) {
+      const { file } = options
+      Api.ota.uploadFirmware(file, (res) => {
+        res = res.data
+        if (res.code === 0) {
+          this.form.firmwarePath = res.data
+          this.form.size = file.size
+          this.$message.success('固件文件上传成功')
+        } else {
+          this.$message.error(res.msg || '文件上传失败')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-demo {
+  text-align: left;
+}
+
+.el-upload__tip {
+  line-height: 1.2;
+  padding-top: 5px;
+  color: #909399;
+}
+</style>

main/manager-web/src/components/HeaderBar.vue

@@ -32,6 +32,12 @@
             :style="{ filter: $route.path === '/params-management' ? 'brightness(0) invert(1)' : 'None' }" />
           参数管理
         </div>
+        <div v-if="isSuperAdmin" class="equipment-management"
+          :class="{ 'active-tab': $route.path === '/ota-management' }" @click="goOtaManagement">
+          <img loading="lazy" alt="" src="@/assets/header/firmware_update.png"
+            :style="{ filter: $route.path === '/ota-management' ? 'brightness(0) invert(1)' : 'None' }" />
+          OTA管理
+        </div>
       </div>
 
       <!-- 右侧元素 -->
@@ -105,6 +111,9 @@ export default {
     goParamManagement() {
       this.$router.push('/params-management')
     },
+    goOtaManagement() {
+      this.$router.push('/ota-management')
+    },
     // 获取用户信息
     fetchUserInfo() {
       userApi.getUserInfo(({ data }) => {

main/manager-web/src/router/index.js

@@ -62,13 +62,6 @@ const routes = [
       return import('../views/ModelConfig.vue')
     }
   },
-  {
-    path: '/test',
-    name: 'TestServer',
-    component: function () {
-      return import('../views/test.vue')
-    }
-  },
   {
     path: '/params-management',
     name: 'ParamsManagement',
@@ -80,6 +73,17 @@ const routes = [
       title: '参数管理'
     }
   },
+  {
+    path: '/ota-management',
+    name: 'OtaManagement',
+    component: function () {
+      return import('../views/OtaManagement.vue')
+    },
+    meta: {
+      requiresAuth: true,
+      title: 'OTA管理'
+    }
+  },
 ]
 
 const router = new VueRouter({

main/manager-web/src/utils/format.js

@@ -0,0 +1,21 @@
+// 日期格式化函数
+export function formatDate(date) {
+  if (!date) return '';
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hour = String(d.getHours()).padStart(2, '0');
+  const minute = String(d.getMinutes()).padStart(2, '0');
+  const second = String(d.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
+
+// 文件大小格式化函数
+export function formatFileSize(bytes) {
+  if (!bytes || bytes === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + units[i];
+}

main/manager-web/src/utils/index.js

@@ -136,3 +136,63 @@ export function getUUID() {
     })
 }
 
+/**
+ * 固件类型选项
+ */
+export const FIRMWARE_TYPES = [
+    { "key": "bread-compact-wifi", "name": "面包板新版接线（WiFi）" },
+    { "key": "bread-compact-wifi-lcd", "name": "面包板新版接线（WiFi）+ LCD" },
+    { "key": "bread-compact-ml307", "name": "面包板新版接线（ML307 AT）" },
+    { "key": "bread-compact-esp32", "name": "面包板（WiFi） ESP32 DevKit" },
+    { "key": "bread-compact-esp32-lcd", "name": "面包板（WiFi+ LCD） ESP32 DevKit" },
+    { "key": "df-k10", "name": "DFRobot 行空板 k10" },
+    { "key": "esp32-cgc", "name": "ESP32 CGC" },
+    { "key": "esp-box-3", "name": "ESP BOX 3" },
+    { "key": "esp-box", "name": "ESP BOX" },
+    { "key": "esp-box-lite", "name": "ESP BOX Lite" },
+    { "key": "kevin-box-1", "name": "Kevin Box 1" },
+    { "key": "kevin-box-2", "name": "Kevin Box 2" },
+    { "key": "kevin-c3", "name": "Kevin C3" },
+    { "key": "kevin-sp-v3-dev", "name": "Kevin SP V3开发板" },
+    { "key": "kevin-sp-v4-dev", "name": "Kevin SP V4开发板" },
+    { "key": "kevin-yuying-313lcd", "name": "鱼鹰科技3.13LCD开发板" },
+    { "key": "lichuang-dev", "name": "立创·实战派ESP32-S3开发板" },
+    { "key": "lichuang-c3-dev", "name": "立创·实战派ESP32-C3开发板" },
+    { "key": "magiclick-2p4", "name": "神奇按钮 Magiclick_2.4" },
+    { "key": "magiclick-2p5", "name": "神奇按钮 Magiclick_2.5" },
+    { "key": "magiclick-c3", "name": "神奇按钮 Magiclick_C3" },
+    { "key": "magiclick-c3-v2", "name": "神奇按钮 Magiclick_C3_v2" },
+    { "key": "m5stack-core-s3", "name": "M5Stack CoreS3" },
+    { "key": "atoms3-echo-base", "name": "AtomS3 + Echo Base" },
+    { "key": "atoms3r-echo-base", "name": "AtomS3R + Echo Base" },
+    { "key": "atoms3r-cam-m12-echo-base", "name": "AtomS3R CAM/M12 + Echo Base" },
+    { "key": "atommatrix-echo-base", "name": "AtomMatrix + Echo Base" },
+    { "key": "xmini-c3", "name": "虾哥 Mini C3" },
+    { "key": "esp32s3-korvo2-v3", "name": "ESP32S3_KORVO2_V3开发板" },
+    { "key": "esp-sparkbot", "name": "ESP-SparkBot开发板" },
+    { "key": "esp-spot-s3", "name": "ESP-Spot-S3" },
+    { "key": "esp32-s3-touch-amoled-1.8", "name": "Waveshare ESP32-S3-Touch-AMOLED-1.8" },
+    { "key": "esp32-s3-touch-lcd-1.85c", "name": "Waveshare ESP32-S3-Touch-LCD-1.85C" },
+    { "key": "esp32-s3-touch-lcd-1.85", "name": "Waveshare ESP32-S3-Touch-LCD-1.85" },
+    { "key": "esp32-s3-touch-lcd-1.46", "name": "Waveshare ESP32-S3-Touch-LCD-1.46" },
+    { "key": "esp32-s3-touch-lcd-3.5", "name": "Waveshare ESP32-S3-Touch-LCD-3.5" },
+    { "key": "tudouzi", "name": "土豆子" },
+    { "key": "lilygo-t-circle-s3", "name": "LILYGO T-Circle-S3" },
+    { "key": "lilygo-t-cameraplus-s3", "name": "LILYGO T-CameraPlus-S3" },
+    { "key": "movecall-moji-esp32s3", "name": "Movecall Moji 小智AI衍生版" },
+    { "key": "movecall-cuican-esp32s3", "name": "Movecall CuiCan 璀璨·AI吊坠" },
+    { "key": "atk-dnesp32s3", "name": "正点原子DNESP32S3开发板" },
+    { "key": "atk-dnesp32s3-box", "name": "正点原子DNESP32S3-BOX" },
+    { "key": "du-chatx", "name": "嘟嘟开发板CHATX(wifi)" },
+    { "key": "taiji-pi-s3", "name": "太极小派esp32s3" },
+    { "key": "xingzhi-cube-0.85tft-wifi", "name": "无名科技星智0.85(WIFI)" },
+    { "key": "xingzhi-cube-0.85tft-ml307", "name": "无名科技星智0.85(ML307)" },
+    { "key": "xingzhi-cube-0.96oled-wifi", "name": "无名科技星智0.96(WIFI)" },
+    { "key": "xingzhi-cube-0.96oled-ml307", "name": "无名科技星智0.96(ML307)" },
+    { "key": "xingzhi-cube-1.54tft-wifi", "name": "无名科技星智1.54(WIFI)" },
+    { "key": "xingzhi-cube-1.54tft-ml307", "name": "无名科技星智1.54(ML307)" },
+    { "key": "sensecap-watcher", "name": "SenseCAP Watcher" },
+    { "key": "doit-s3-aibox", "name": "四博智联AI陪伴盒子" },
+    { "key": "mixgo-nova", "name": "元控·青春" }
+]
+

main/manager-web/src/views/DeviceManagement.vue

@@ -5,8 +5,8 @@
     <div class="operation-bar">
       <h2 class="page-title">设备管理</h2>
       <div class="right-operations">
-        <el-input placeholder="请输入设备型号或Mac地址查询" v-model="searchKeyword"
-                 class="search-input" @keyup.enter.native="handleSearch" clearable />
+        <el-input placeholder="请输入设备型号或Mac地址查询" v-model="searchKeyword" class="search-input"
+          @keyup.enter.native="handleSearch" clearable />
         <el-button class="btn-search" @click="handleSearch">搜索</el-button>
       </div>
     </div>
@@ -29,7 +29,11 @@
                   <el-checkbox v-model="scope.row.selected"></el-checkbox>
                 </template>
               </el-table-column>
-              <el-table-column label="设备型号" prop="model" align="center"></el-table-column>
+              <el-table-column label="设备型号" prop="model" align="center">
+                <template slot-scope="scope">
+                  {{ getFirmwareTypeName(scope.row.model) }}
+                </template>
+              </el-table-column>
               <el-table-column label="固件版本" prop="firmwareVersion" align="center" ></el-table-column>
               <el-table-column label="Mac地址" prop="macAddress" align="center"></el-table-column>
               <el-table-column label="绑定时间" prop="bindTime" align="center"></el-table-column>
@@ -39,7 +43,8 @@
                   <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini"
                     @blur="stopEditRemark(scope.$index)"></el-input>
                   <span v-else>
-                    <i v-if="!scope.row.remark" class="el-icon-edit" @click="startEditRemark(scope.$index, scope.row)"></i>
+                    <i v-if="!scope.row.remark" class="el-icon-edit"
+                      @click="startEditRemark(scope.$index, scope.row)"></i>
                     <span v-else @click="startEditRemark(scope.$index, scope.row)">
                       {{ scope.row.remark }}
                     </span>
@@ -69,26 +74,17 @@
                 <el-button type="success" size="mini" class="add-device-btn" @click="handleAddDevice">
                   新增
                 </el-button>
-                <el-button size="mini" type="danger" icon="el-icon-delete"
-                  @click="deleteSelected">解绑</el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelected">解绑</el-button>
               </div>
               <div class="custom-pagination">
                 <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
-                    <el-option
-                        v-for="item in pageSizeOptions"
-                        :key="item"
-                        :label="`${item}条/页`"
-                        :value="item">
-                    </el-option>
+                  <el-option v-for="item in pageSizeOptions" :key="item" :label="`${item}条/页`" :value="item">
+                  </el-option>
                 </el-select>
                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
-                <button
-                  v-for="page in visiblePages"
-                  :key="page"
-                  class="pagination-btn"
-                  :class="{ active: page === currentPage }"
-                  @click="goToPage(page)">
+                <button v-for="page in visiblePages" :key="page" class="pagination-btn"
+                  :class="{ active: page === currentPage }" @click="goToPage(page)">
                   {{ page }}
                 </button>
                 <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
@@ -110,6 +106,7 @@
 import Api from '@/apis/api';
 import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
+import { FIRMWARE_TYPES } from "@/utils";
 
 export default {
   components: { HeaderBar, AddDeviceDialog },
@@ -311,7 +308,7 @@ export default {
               rawBindTime: new Date(device.createDate).getTime()
             };
           })
-              .sort((a, b) => a.rawBindTime - b.rawBindTime);
+            .sort((a, b) => a.rawBindTime - b.rawBindTime);
           this.activeSearchKeyword = "";
           this.searchKeyword = "";
         } else {
@@ -319,12 +316,16 @@ export default {
         }
       });
     },
-    headerCellClassName({columnIndex}) {
+    headerCellClassName({ columnIndex }) {
       if (columnIndex === 0) {
         return "custom-selection-header";
       }
       return "";
-    }
+    },
+    getFirmwareTypeName(type) {
+      const firmwareType = FIRMWARE_TYPES.find(item => item.key === type);
+      return firmwareType ? firmwareType.name : type;
+    },
   }
 };
 </script>
@@ -393,12 +394,12 @@ export default {
   transition: border-color 0.2s;
 }
 
-::v-deep .page-size-select{
+::v-deep .page-size-select {
   width: 100px;
   margin-right: 8px;
 }
 
-::v-deep .page-size-select .el-input__inner{
+::v-deep .page-size-select .el-input__inner {
   height: 32px;
   line-height: 32px;
   border-radius: 4px;
@@ -407,7 +408,8 @@ export default {
   color: #606266;
   font-size: 14px;
 }
-::v-deep .page-size-select .el-input__suffix{
+
+::v-deep .page-size-select .el-input__suffix {
   right: 6px;
   width: 15px;
   height: 20px;
@@ -418,13 +420,14 @@ export default {
   border-radius: 4px;
 }
 
-::v-deep .page-size-select .el-input__suffix-inner{
+::v-deep .page-size-select .el-input__suffix-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }
-::v-deep .page-size-select .el-icon-arrow-up:before{
+
+::v-deep .page-size-select .el-icon-arrow-up:before {
   content: "";
   display: inline-block;
   border-left: 6px solid transparent;

main/manager-web/src/views/OtaManagement.vue

@@ -0,0 +1,643 @@
+<template>
+    <div class="welcome">
+        <HeaderBar />
+
+        <div class="operation-bar">
+            <h2 class="page-title">固件管理</h2>
+            <div class="right-operations">
+                <el-input placeholder="请输入固件名称查询" v-model="searchName" class="search-input"
+                    @keyup.enter.native="handleSearch" clearable />
+                <el-button class="btn-search" @click="handleSearch">搜索</el-button>
+            </div>
+        </div>
+
+        <div class="main-wrapper">
+            <div class="content-panel">
+                <div class="content-area">
+                    <el-card class="params-card" shadow="never">
+                        <el-table ref="paramsTable" :data="paramsList" class="transparent-table"
+                            :header-cell-class-name="headerCellClassName">
+                            <el-table-column label="选择" align="center" width="120">
+                                <template slot-scope="scope">
+                                    <el-checkbox v-model="scope.row.selected"></el-checkbox>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="固件名称" prop="firmwareName" align="center"></el-table-column>
+                            <el-table-column label="固件类型" prop="type" align="center">
+                                <template slot-scope="scope">
+                                    {{ getFirmwareTypeName(scope.row.type) }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="版本号" prop="version" align="center"></el-table-column>
+                            <el-table-column label="文件大小" prop="size" align="center">
+                                <template slot-scope="scope">
+                                    {{ formatFileSize(scope.row.size) }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="备注" prop="remark" align="center"
+                                show-overflow-tooltip></el-table-column>
+                            <el-table-column label="创建时间" prop="createDate" align="center">
+                                <template slot-scope="scope">
+                                    {{ formatDate(scope.row.createDate) }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="操作" align="center">
+                                <template slot-scope="scope">
+                                    <el-button size="mini" type="text"
+                                        @click="downloadFirmware(scope.row)">下载</el-button>
+                                    <el-button size="mini" type="text" @click="editParam(scope.row)">编辑</el-button>
+                                    <el-button size="mini" type="text" @click="deleteParam(scope.row)">删除</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+
+                        <div class="table_bottom">
+                            <div class="ctrl_btn">
+                                <el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">
+                                    {{ isAllSelected ? '取消全选' : '全选' }}
+                                </el-button>
+                                <el-button size="mini" type="success" @click="showAddDialog"
+                                    style="background: #5bc98c;border: None;">新增</el-button>
+                                <el-button size="mini" type="danger" icon="el-icon-delete"
+                                    @click="deleteSelectedParams">删除</el-button>
+                            </div>
+                            <div class="custom-pagination">
+                                <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
+                                    <el-option v-for="item in pageSizeOptions" :key="item" :label="`${item}条/页`"
+                                        :value="item">
+                                    </el-option>
+                                </el-select>
+                                <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
+                                    首页
+                                </button>
+                                <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">
+                                    上一页
+                                </button>
+                                <button v-for="page in visiblePages" :key="page" class="pagination-btn"
+                                    :class="{ active: page === currentPage }" @click="goToPage(page)">
+                                    {{ page }}
+                                </button>
+                                <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">
+                                    下一页
+                                </button>
+                                <span class="total-text">共{{ total }}条记录</span>
+                            </div>
+                        </div>
+                    </el-card>
+                </div>
+            </div>
+        </div>
+
+        <!-- 新增/编辑固件对话框 -->
+        <firmware-dialog :title="dialogTitle" :visible.sync="dialogVisible" :form="firmwareForm" @submit="handleSubmit"
+            @cancel="dialogVisible = false" />
+
+    </div>
+</template>
+
+<script>
+import Api from "@/apis/api";
+import FirmwareDialog from "@/components/FirmwareDialog.vue";
+import HeaderBar from "@/components/HeaderBar.vue";
+import { FIRMWARE_TYPES } from "@/utils";
+import { formatDate, formatFileSize } from "@/utils/format";
+
+export default {
+    components: { HeaderBar, FirmwareDialog },
+    data() {
+        return {
+            searchName: "",
+            paramsList: [],
+            firmwareList: [],
+            currentPage: 1,
+            pageSize: 10,
+            pageSizeOptions: [10, 20, 50, 100],
+            total: 0,
+            dialogVisible: false,
+            dialogTitle: "新增固件",
+            isAllSelected: false,
+            firmwareForm: {
+                id: null,
+                firmwareName: "",
+                type: "",
+                version: "",
+                size: 0,
+                remark: "",
+                firmwarePath: ""
+            },
+        };
+    },
+    created() {
+        this.fetchFirmwareList();
+    },
+
+    computed: {
+        pageCount() {
+            return Math.ceil(this.total / this.pageSize);
+        },
+        visiblePages() {
+            const pages = [];
+            const maxVisible = 3;
+            let start = Math.max(1, this.currentPage - 1);
+            let end = Math.min(this.pageCount, start + maxVisible - 1);
+
+            if (end - start + 1 < maxVisible) {
+                start = Math.max(1, end - maxVisible + 1);
+            }
+
+            for (let i = start; i <= end; i++) {
+                pages.push(i);
+            }
+            return pages;
+        },
+    },
+    methods: {
+        handlePageSizeChange(val) {
+            this.pageSize = val;
+            this.currentPage = 1;
+            this.fetchFirmwareList();
+        },
+        fetchFirmwareList() {
+            const params = {
+                pageNum: this.currentPage,
+                pageSize: this.pageSize,
+                firmwareName: this.searchName || "",
+                orderField: "create_date",
+                order: "desc"
+            };
+            Api.ota.getOtaList(params, (res) => {
+                res = res.data
+                if (res.code === 0) {
+                    this.firmwareList = res.data.list.map(item => ({
+                        ...item,
+                        selected: false
+                    }));
+                    this.paramsList = this.firmwareList;
+                    this.total = res.data.total || 0;
+                } else {
+                    this.firmwareList = [];
+                    this.paramsList = [];
+                    this.total = 0;
+                    this.$message.error({
+                        message: res?.data?.msg || '获取固件列表失败',
+                        showClose: true
+                    });
+                }
+            });
+        },
+        handleSearch() {
+            this.currentPage = 1;
+            this.fetchFirmwareList();
+        },
+        handleSelectAll() {
+            this.isAllSelected = !this.isAllSelected;
+            this.firmwareList.forEach(row => {
+                row.selected = this.isAllSelected;
+            });
+        },
+        showAddDialog() {
+            this.dialogTitle = "新增固件";
+            // 完全重置表单数据
+            this.firmwareForm = {
+                id: null,
+                firmwareName: "",
+                type: "",
+                version: "",
+                size: 0,
+                remark: "",
+                firmwarePath: ""
+            };
+            this.$nextTick(() => {
+                // 重置表单的校验状态
+                if (this.$refs.firmwareDialog && this.$refs.firmwareDialog.$refs.form) {
+                    this.$refs.firmwareDialog.$refs.form.clearValidate();
+                }
+            });
+            this.dialogVisible = true;
+        },
+        editParam(row) {
+            this.dialogTitle = "编辑固件";
+            this.firmwareForm = { ...row };
+            this.dialogVisible = true;
+        },
+        handleSubmit(form) {
+            if (form.id) {
+                // 编辑
+                Api.ota.updateOta(form.id, form, (res) => {
+                    res = res.data;
+                    if (res.code === 0) {
+                        this.$message.success({
+                            message: "修改成功",
+                            showClose: true
+                        });
+                        this.dialogVisible = false;
+                        this.fetchFirmwareList();
+                    } else {
+                        this.$message.error({
+                            message: res.msg || "修改失败",
+                            showClose: true
+                        });
+                    }
+                });
+            } else {
+                // 新增
+                Api.ota.saveOta(form, (res) => {
+                    res = res.data;
+                    if (res.code === 0) {
+                        this.$message.success({
+                            message: "新增成功",
+                            showClose: true
+                        });
+                        this.dialogVisible = false;
+                        this.fetchFirmwareList();
+                    } else {
+                        this.$message.error({
+                            message: res.msg || "新增失败",
+                            showClose: true
+                        });
+                    }
+                });
+            }
+        },
+
+        deleteSelectedParams() {
+            const selectedRows = this.firmwareList.filter(row => row.selected);
+            if (selectedRows.length === 0) {
+                this.$message.warning({
+                    message: "请先选择需要删除的固件",
+                    showClose: true
+                });
+                return;
+            }
+            this.deleteParam(selectedRows);
+        },
+        deleteParam(row) {
+            // 处理单个参数或参数数组
+            const params = Array.isArray(row) ? row : [row];
+
+            if (Array.isArray(row) && row.length === 0) {
+                this.$message.warning({
+                    message: "请先选择需要删除的参数",
+                    showClose: true
+                });
+                return;
+            }
+
+            const paramCount = params.length;
+            this.$confirm(`确定要删除选中的${paramCount}个固件吗？`, '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                distinguishCancelAndClose: true
+            }).then(() => {
+                const ids = params.map(param => param.id);
+                if (ids.some(id => !id)) {
+                    this.$message.error({
+                        message: '存在无效的参数ID',
+                        showClose: true
+                    });
+                    return;
+                }
+
+                Api.ota.deleteOta(ids, (res) => {
+                    res = res.data;
+                    if (res.code === 0) {
+                        this.$message.success({
+                            message: `成功删除${paramCount}个固件`,
+                            showClose: true
+                        });
+                        this.fetchFirmwareList();
+                    } else {
+                        this.$message.error({
+                            message: res.msg || '删除失败，请重试',
+                            showClose: true
+                        });
+                    }
+                });
+            }).catch(action => {
+                if (action === 'cancel') {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除操作',
+                        duration: 1000
+                    });
+                } else {
+                    this.$message({
+                        type: 'info',
+                        message: '操作已关闭',
+                        duration: 1000
+                    });
+                }
+            });
+        },
+        headerCellClassName({ columnIndex }) {
+            if (columnIndex === 0) {
+                return "custom-selection-header";
+            }
+            return "";
+        },
+        goFirst() {
+            this.currentPage = 1;
+            this.fetchFirmwareList();
+        },
+        goPrev() {
+            if (this.currentPage > 1) {
+                this.currentPage--;
+                this.fetchFirmwareList();
+            }
+        },
+        goNext() {
+            if (this.currentPage < this.pageCount) {
+                this.currentPage++;
+                this.fetchFirmwareList();
+            }
+        },
+        goToPage(page) {
+            this.currentPage = page;
+            this.fetchFirmwareList();
+        },
+        downloadFirmware(firmware) {
+            if (!firmware || !firmware.id) {
+                this.$message.error('固件信息不完整');
+                return;
+            }
+            // 先获取下载链接
+            Api.ota.getDownloadUrl(firmware.id, (res) => {
+                if (res.data.code === 0) {
+                    const uuid = res.data.data;
+                    const baseUrl = process.env.VUE_APP_API_BASE_URL || '';
+                    window.open(`${window.location.origin}${baseUrl}/otaMag/download/${uuid}`);
+                } else {
+                    this.$message.error('获取下载链接失败');
+                }
+            });
+        },
+        formatDate,
+        formatFileSize,
+        getFirmwareTypeName(type) {
+            const firmwareType = FIRMWARE_TYPES.find(item => item.key === type);
+            return firmwareType ? firmwareType.name : type;
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.welcome {
+    min-width: 900px;
+    min-height: 506px;
+    height: 100vh;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    background-size: cover;
+    background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
+    -webkit-background-size: cover;
+    -o-background-size: cover;
+    overflow: hidden;
+}
+
+.main-wrapper {
+    margin: 5px 22px;
+    border-radius: 15px;
+    min-height: calc(100vh - 24vh);
+    height: auto;
+    max-height: 80vh;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    position: relative;
+    background: rgba(237, 242, 255, 0.5);
+    display: flex;
+    flex-direction: column;
+}
+
+.operation-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px;
+}
+
+.page-title {
+    font-size: 24px;
+    margin: 0;
+}
+
+.right-operations {
+    display: flex;
+    gap: 10px;
+    margin-left: auto;
+}
+
+.search-input {
+    width: 240px;
+}
+
+.btn-search {
+    background: linear-gradient(135deg, #6b8cff, #a966ff);
+    border: none;
+    color: white;
+}
+
+.content-panel {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+    border-radius: 15px;
+    background: transparent;
+    border: 1px solid #fff;
+}
+
+.content-area {
+    flex: 1;
+    height: 100%;
+    min-width: 600px;
+    overflow: auto;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+.params-card {
+    background: white;
+    border: none;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.table_bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    padding-bottom: 10px;
+}
+
+.ctrl_btn {
+    display: flex;
+    gap: 8px;
+    padding-left: 26px;
+
+    .el-button {
+        min-width: 72px;
+        height: 32px;
+        padding: 7px 12px 7px 10px;
+        font-size: 12px;
+        border-radius: 4px;
+        line-height: 1;
+        font-weight: 500;
+        border: none;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    .el-button--primary {
+        background: #5f70f3;
+        color: white;
+    }
+
+    .el-button--danger {
+        background: #fd5b63;
+        color: white;
+    }
+}
+
+.custom-pagination {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .el-select {
+        margin-right: 8px;
+    }
+
+    .pagination-btn:first-child,
+    .pagination-btn:nth-child(2),
+    .pagination-btn:nth-last-child(2),
+    .pagination-btn:nth-child(3) {
+        min-width: 60px;
+        height: 32px;
+        padding: 0 12px;
+        border-radius: 4px;
+        border: 1px solid #e4e7ed;
+        background: #dee7ff;
+        color: #606266;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+            background: #d7dce6;
+        }
+
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    }
+
+    .pagination-btn:not(:first-child):not(:nth-child(3)):not(:nth-child(2)):not(:nth-last-child(2)) {
+        min-width: 28px;
+        height: 32px;
+        padding: 0;
+        border-radius: 4px;
+        border: 1px solid transparent;
+        background: transparent;
+        color: #606266;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+            background: rgba(245, 247, 250, 0.3);
+        }
+    }
+
+    .pagination-btn.active {
+        background: #5f70f3 !important;
+        color: #ffffff !important;
+        border-color: #5f70f3 !important;
+
+        &:hover {
+            background: #6d7cf5 !important;
+        }
+    }
+}
+
+.total-text {
+    margin-left: 10px;
+    color: #606266;
+    font-size: 14px;
+}
+
+.page-size-select {
+    width: 100px;
+}
+
+.custom-selection-header {
+    text-align: center !important;
+}
+
+:deep(.transparent-table) {
+    background-color: transparent;
+
+    .el-table__header-wrapper {
+        flex-shrink: 0;
+    }
+
+    .el-table__header th {
+        background-color: white !important;
+        color: black;
+        font-weight: 600;
+        height: 40px;
+        padding: 8px 0;
+        font-size: 14px;
+        border-bottom: 1px solid #e4e7ed;
+    }
+
+    .el-table__body-wrapper {
+        td {
+            background-color: transparent;
+            border-bottom: 1px solid #e4e7ed;
+            padding: 8px 0;
+            height: 40px;
+            color: #606266;
+            font-size: 14px;
+        }
+    }
+
+    .el-table__row:hover>td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+:deep(.el-table .el-button--text) {
+    color: #7079aa !important;
+}
+
+:deep(.el-table .el-button--text:hover) {
+    color: #5a64b5 !important;
+}
+
+:deep(.el-checkbox__inner) {
+    background-color: #eeeeee !important;
+    border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__inner:hover) {
+    border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+    background-color: #5f70f3 !important;
+    border-color: #5f70f3 !important;
+}
+</style>

main/manager-web/src/views/test.vue

@@ -1,400 +0,0 @@
-<template>
-  <div class="container">
-    <h1 class="title">XiaoZhi ESP32 Server 测试助手</h1>
-    <div class="chat-container" ref="chatContainer">
-      <div v-for="(message, index) in messages" :key="index"
-        :class="['message', message.role === 'user' ? 'user' : 'assistant']">
-        <span>{{ message.content }}</span>
-      </div>
-    </div>
-    <div class="controls">
-      <button @click="toggleRecording" :disabled="wsStatus !== 'connected'" :class="{ recording: isRecording }">
-        {{ isRecording ? '停止录音' : '开始录音' }}
-      </button>
-      <p>WebSocket: {{ wsStatus }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-import { OpusDecoder } from 'opus-decoder';
-import Recorder from 'opus-recorder';
-
-export default {
-  name: 'TestPage',
-  data() {
-    return {
-      messages: [],
-      wsStatus: 'disconnected',
-      isRecording: false,
-      ws: null,
-      recorder: null,
-      stream: null,
-      audioContext: null,
-      sourceNode: null,
-      audioDecoder: null,
-      audioBufferQueue: [], // 当前句子的音频缓冲区
-      playbackQueue: [], // 播放队列，存储待播放的句子
-      isPlaying: false,
-    }
-  },
-  methods: {
-    connectWebSocket() {
-      this.ws = new WebSocket('ws://192.168.3.97:8000');//修改服务端地址
-      this.ws.binaryType = 'arraybuffer';
-      this.ws.onopen = () => {
-        this.wsStatus = 'connected';
-        console.log('WebSocket 连接成功');
-        this.ws.send(JSON.stringify({ type: 'auth', 'device-id': 'test-device' }));
-        this.audioDecoder = new OpusDecoder({ sampleRate: 16000, channels: 1 });
-      };
-      this.ws.onmessage = async (event) => {
-        if (typeof event.data === 'string') {
-          const msg = JSON.parse(event.data);
-          console.log('收到文本消息:', msg);
-
-          if (msg.type === 'stt') {
-            this.messages.push({ role: 'user', content: msg.text });
-            this.scrollToBottom();
-          } else if (msg.type === 'llm') {
-            this.messages.push({ role: 'assistant', content: msg.text });
-            this.scrollToBottom();
-          } else if (msg.type === 'tts') {
-            if (msg.state === 'sentence_start') {
-              this.audioBufferQueue = [];
-              const lastMessage = this.messages[this.messages.length - 1];
-              if (!lastMessage || lastMessage.content !== msg.text) {
-                this.messages.push({ role: 'assistant', content: msg.text });
-                this.scrollToBottom();
-              }
-            } else if (msg.state === 'sentence_end') {
-              if (this.audioBufferQueue.length > 0) {
-                this.playbackQueue.push([...this.audioBufferQueue]);
-                this.audioBufferQueue = [];
-                this.playNextInQueue();
-              }
-            } else if (msg.state === 'stop') {
-              console.log('TTS 任务结束');
-              if (this.audioBufferQueue.length > 0) {
-                this.playbackQueue.push([...this.audioBufferQueue]);
-                this.audioBufferQueue = [];
-                this.playNextInQueue();
-              }
-            }
-          } else if (msg.type === 'hello') {
-            console.log('收到服务器初始化消息:', msg);
-          }
-        } else if (event.data instanceof ArrayBuffer) {
-          console.log('收到音频帧，大小:', event.data.byteLength, '字节');
-          const opusFrame = new Uint8Array(event.data);
-          const frameHead = Array.from(opusFrame.slice(0, 8))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join(' ');
-          console.log('音频帧前8字节:', frameHead);
-
-          try {
-            const decoded = this.audioDecoder.decodeFrame(opusFrame);
-            console.log('解码结果:', decoded);
-            if (decoded && decoded.channelData && decoded.channelData[0]) {
-              const pcmData = decoded.channelData[0];
-              if (pcmData.length > 0) {
-                this.audioBufferQueue.push(pcmData);
-                console.log('解码音频帧，PCM 数据长度:', pcmData.length);
-                if (this.audioBufferQueue.length >= 5 && this.playbackQueue.length === 0 && !this.isPlaying) {
-                  this.playbackQueue.push([...this.audioBufferQueue]);
-                  this.audioBufferQueue = [];
-                  this.playNextInQueue();
-                }
-              } else {
-                console.warn('解码成功，但 PCM 数据长度为 0');
-              }
-            } else {
-              console.warn('解码结果无效:', decoded);
-            }
-          } catch (e) {
-            console.error('Opus 解码错误:', e);
-          }
-        }
-      };
-      this.ws.onerror = (error) => {
-        console.error('WebSocket 错误:', error);
-        this.wsStatus = 'error';
-      };
-      this.ws.onclose = () => {
-        this.wsStatus = 'disconnected';
-        console.log('WebSocket 断开');
-        setTimeout(this.connectWebSocket, 1000);
-      };
-    },
-    scrollToBottom() {
-      this.$nextTick(() => {
-        if (this.$refs.chatContainer) {
-          this.$refs.chatContainer.scrollTop = this.$refs.chatContainer.scrollHeight;
-        }
-      });
-    },
-    async playNextInQueue() {
-      if (this.isPlaying || this.playbackQueue.length === 0) {
-        return;
-      }
-      this.isPlaying = true;
-
-      if (!this.audioContext || this.audioContext.state === 'closed') {
-        this.audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
-      }
-
-      const pcmBuffers = this.playbackQueue.shift();
-      const totalLength = pcmBuffers.reduce((sum, pcm) => sum + pcm.length, 0);
-      if (totalLength === 0) {
-        console.error('音频缓冲区总长度为 0，无法播放');
-        this.isPlaying = false;
-        this.playNextInQueue();
-        return;
-      }
-
-      const mergedPcm = new Float32Array(totalLength);
-      let offset = 0;
-      for (const pcm of pcmBuffers) {
-        mergedPcm.set(pcm, offset);
-        offset += pcm.length;
-      }
-
-      const audioBuffer = this.audioContext.createBuffer(1, totalLength, 16000);
-      audioBuffer.getChannelData(0).set(mergedPcm);
-
-      const source = this.audioContext.createBufferSource();
-      source.buffer = audioBuffer;
-      source.connect(this.audioContext.destination);
-      source.onended = () => {
-        this.isPlaying = false;
-        console.log('音频播放结束');
-        this.playNextInQueue();
-      };
-      source.start();
-      console.log('开始播放音频，总长度:', totalLength);
-    },
-    stripOggContainer(data) {
-      let arrayBuffer;
-      if (data instanceof ArrayBuffer) {
-        arrayBuffer = data;
-      } else if (data.buffer instanceof ArrayBuffer) {
-        arrayBuffer = data.buffer;
-      } else {
-        console.error('输入数据类型不支持:', data);
-        return [data];
-      }
-
-      const dataView = new DataView(arrayBuffer);
-      const frames = [];
-      let offset = 0;
-
-      while (offset < arrayBuffer.byteLength) {
-        if (dataView.getUint32(offset) === 0x4F676753) { // 'OggS'
-          const segmentTableLength = dataView.getUint8(offset + 26);
-          const segmentTableOffset = offset + 27;
-          let segmentOffset = segmentTableOffset + segmentTableLength;
-
-          for (let i = 0; i < segmentTableLength; i++) {
-            const segmentLength = dataView.getUint8(segmentTableOffset + i);
-            const segmentData = arrayBuffer.slice(segmentOffset, segmentOffset + segmentLength);
-            segmentOffset += segmentLength;
-
-            const header = new TextDecoder().decode(segmentData.slice(0, 8));
-            if (header === 'OpusHead' || header === 'OpusTags') {
-              console.log(`跳过 ${header}，大小: ${segmentLength} 字节`);
-            } else if (segmentLength >= 50 && segmentLength <= 300) {
-              frames.push(segmentData);
-            }
-          }
-          offset = segmentOffset;
-        } else {
-          const remainingLength = arrayBuffer.byteLength - offset;
-          if (remainingLength >= 50 && remainingLength <= 300) {
-            frames.push(arrayBuffer.slice(offset));
-          }
-          break;
-        }
-      }
-
-      if (frames.length === 0) {
-        console.warn('未找到有效裸 Opus 帧，返回原始数据');
-        return [arrayBuffer];
-      }
-      console.log('剥离后找到', frames.length, '个裸 Opus 帧');
-      return frames;
-    },
-    async initRecorder() {
-      console.log('开始初始化录音');
-      try {
-        if (this.stream) {
-          this.stream.getTracks().forEach(track => track.stop());
-        }
-        this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        console.log('获取麦克风权限成功，stream:', this.stream);
-
-        if (!this.audioContext || this.audioContext.state === 'closed') {
-          this.audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
-        }
-        this.sourceNode = this.audioContext.createMediaStreamSource(this.stream);
-
-        this.recorder = new Recorder({
-          encoderPath: '/encoderWorker.min.js',
-          sampleRate: 16000,
-          numberOfChannels: 1,
-          frameSize: 960,
-          encoderApplication: 2048,
-          encoderFrameSize: 60,
-          encoderBitRate: 24000,
-          monitorGain: 0,
-          sourceNode: this.sourceNode,
-          ogg: false,
-          streamPages: false,
-          maxFramesPerPage: 1,
-        });
-
-        this.recorder.ondataavailable = (data) => {
-          console.log('录音数据可用:', data.byteLength, '类型:', data.constructor.name);
-          const frames = this.stripOggContainer(data);
-          frames.forEach((frame, index) => {
-            const frameHead = Array.from(new Uint8Array(frame.slice(0, 8)))
-              .map(b => b.toString(16).padStart(2, '0'))
-              .join(' ');
-            console.log(`帧 ${index} 大小: ${frame.byteLength} 字节，前8字节: ${frameHead}`);
-
-            if (frame.byteLength < 50 || frame.byteLength > 300) {
-              console.warn(`帧 ${index} 大小异常: ${frame.byteLength} 字节，预期 50-300 字节`);
-              return;
-            }
-
-            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-              this.ws.send(frame);
-              console.log('发送裸 Opus 帧:', frame.byteLength);
-            } else {
-              console.warn('WebSocket 未连接，跳过发送');
-            }
-          });
-        };
-
-        this.recorder.onstart = () => {
-          console.log('录音已启动');
-        };
-
-        this.recorder.onstop = () => {
-          console.log('录音停止');
-          this.stream.getTracks().forEach(track => track.stop());
-          this.stream = null;
-          this.sourceNode = null;
-          this.scrollToBottom();
-        };
-
-        console.log('Recorder 初始化成功');
-      } catch (err) {
-        console.error('初始化录音失败:', err);
-        alert('无法访问麦克风或录音初始化失败，请检查权限');
-      }
-    },
-    async toggleRecording() {
-      console.log('点击 toggleRecording，当前状态:', this.isRecording, 'WebSocket 状态:', this.wsStatus);
-      if (!this.recorder) {
-        await this.initRecorder();
-        if (!this.recorder) {
-          console.error('recorder 初始化失败');
-          return;
-        }
-      }
-      if (this.isRecording) {
-        console.log('停止录音');
-        this.recorder.stop();
-        this.isRecording = false;
-      } else {
-        try {
-          console.log('开始录音');
-          await this.initRecorder();
-          await this.recorder.start();
-          console.log('录音开始后，状态:', this.recorder.state);
-          this.isRecording = true;
-        } catch (err) {
-          console.error('录音启动失败:', err);
-        }
-      }
-    },
-  },
-  mounted() {
-    console.log('组件挂载，初始化 WebSocket');
-    this.connectWebSocket();
-  },
-  destroyed() {
-    if (this.ws) this.ws.close();
-    if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-    if (this.recorder) this.recorder.stop();
-    if (this.audioContext) this.audioContext.close();
-    if (this.audioDecoder) this.audioDecoder.destroy();
-  }
-};
-</script>
-
-<style scoped>
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-.title {
-  text-align: center;
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
-.chat-container {
-  height: 60vh;
-  overflow-y: auto;
-  border: 1px solid #ccc;
-  padding: 10px;
-  background: #f9f9f9;
-  border-radius: 5px;
-}
-
-.message {
-  margin: 10px 0;
-  padding: 8px 12px;
-  border-radius: 5px;
-  max-width: 70%;
-}
-
-.user {
-  background: #007bff;
-  color: white;
-  margin-left: auto;
-}
-
-.assistant {
-  background: #e9ecef;
-  color: black;
-}
-
-.controls {
-  text-align: center;
-  margin-top: 20px;
-}
-
-button {
-  padding: 10px 20px;
-  font-size: 16px;
-  cursor: pointer;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-}
-
-button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}
-
-button.recording {
-  background: #dc3545;
-}
-</style>