From 7deefc8ea371896ffa7fbca544c7ad2f77f971d2 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sun, 22 Feb 2026 17:43:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=85=B7=E7=AE=B1):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E2=80=9CMSU2=20USB=20=E5=B0=8F=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E2=80=9D=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/toolbox-data.js                 |   11 +
 .../Msu2UsbMonitorController.vue              | 1198 +++++++++++++++++
 2 files changed, 1209 insertions(+)
 create mode 100644 src/views/ToolboxView/Other/Msu2UsbMonitorController/Msu2UsbMonitorController.vue

diff --git a/src/assets/js/toolbox-data.js b/src/assets/js/toolbox-data.js
index 50a1779..b1cba3f 100644
--- a/src/assets/js/toolbox-data.js
+++ b/src/assets/js/toolbox-data.js
@@ -356,6 +356,17 @@ export const toolList = [
         version: '1',
         enabled: true,
       },
+      {
+        id: 'msu2-usb-monitor-controller',
+        component: 'Other/Msu2UsbMonitorController/Msu2UsbMonitorController',
+        title: 'MSU2 USB 小屏幕控制',
+        iconClass: 'mdi mdi-usb',
+        desc: 'MSU2 USB 小屏幕控制工具，参考了原 Python 程序的代码。',
+        createdAt: '2026-02-21',
+        updatedAt: '2026-02-21',
+        version: '1',
+        enabled: true,
+      },
       {
         id: 'genshin-impact-clock',
         component: 'Other/GenshinImpactClock/GenshinImpactClock',
diff --git a/src/views/ToolboxView/Other/Msu2UsbMonitorController/Msu2UsbMonitorController.vue b/src/views/ToolboxView/Other/Msu2UsbMonitorController/Msu2UsbMonitorController.vue
new file mode 100644
index 0000000..264d0e0
--- /dev/null
+++ b/src/views/ToolboxView/Other/Msu2UsbMonitorController/Msu2UsbMonitorController.vue
@@ -0,0 +1,1198 @@
+<template>
+  <div class="tool-detail-page">
+
+    <!-- 操作 -->
+    <n-card size="small" title="操作">
+      <n-flex>
+        <n-button
+          type="primary"
+          @click="handleConnectDevice"
+        >连接设备</n-button>
+        <n-button
+          type="error"
+          @click="handleDisconnectDevice"
+        >断开连接</n-button>
+        <n-button
+          type="success"
+          @click="handleStartRender"
+        >开始渲染</n-button>
+        <n-button
+          type="error"
+          @click="handleStopRender"
+        >停止渲染</n-button>
+      </n-flex>
+    </n-card>
+
+    <!-- 配置参数 -->
+    <n-card size="small" title="配置参数">
+      <n-form
+        class="form-no-feedback config-form"
+        label-align="left"
+        label-placement="top"
+        :inline="true"
+      >
+
+        <n-form-item label="分辨率：">
+          <n-select
+            v-model:value="deviceResolution"
+            :options="Object.values(RESOLUTION_LIST).map((item) => {
+              return {
+                label: item.label,
+                value: item.value,
+              };
+            })"
+            @update:value="handleChangeResolution"
+          />
+        </n-form-item>
+
+        <n-form-item label="显示模式：">
+          <n-select
+            v-model:value="displayMode"
+            :options="Object.values(DISPLAY_MODES).map((item) => {
+              return {
+                label: item.label,
+                value: item.value,
+              };
+            })"
+            @update:value="handleChangeDisplayMode"
+          />
+        </n-form-item>
+
+      </n-form>
+    </n-card>
+
+    <!-- 画布 -->
+    <n-card size="small" title="画布">
+      <div class="canvas-container">
+        <canvas ref="canvasElement"></canvas>
+      </div>
+    </n-card>
+
+  </div>
+</template>
+
+<script setup>
+import {
+  NButton, NCard, NFlex,
+  NForm, NFormItem, NSelect,
+} from 'naive-ui';
+
+import {
+  ref, onMounted, onBeforeUnmount,
+} from 'vue';
+
+/** 显示模式列表 */
+const DISPLAY_MODES = {
+  audioSpectrum: {
+    label: '音频频谱',
+    value: 'audioSpectrum',
+  },
+  audioVisualizer1: {
+    label: '音频可视化 - 1',
+    value: 'audioVisualizer1',
+  },
+  audioVisualizer2: {
+    label: '音频可视化 - 2',
+    value: 'audioVisualizer2',
+  },
+  dataText: {
+    label: '数据显示',
+    value: 'dataText',
+  },
+  digitalClock: {
+    label: '数字时钟',
+    value: 'digitalClock',
+  },
+};
+
+/** 分辨率配置选项 */
+const RESOLUTION_LIST = {
+  '160x80': {
+    label: '160x80',
+    lcdX: 160, lcdY: 80,
+    showWidth: 480, showHeight: 240,
+    value: '160x80',
+  },
+  '320x172': {
+    label: '320x172',
+    lcdX: 320, lcdY: 172,
+    showWidth: 320, showHeight: 172,
+    value: '320x172',
+  },
+  '320x240': {
+    label: '320x240',
+    lcdX: 320, lcdY: 240,
+    showWidth: 320, showHeight: 240,
+    value: '320x240',
+  },
+};
+
+/** @type {VueRef<HTMLCanvasElement>} */
+const canvasElement = ref(null);
+
+/** @type {VueRef<CanvasRenderingContext2D >} */
+const canvasCtx = ref(null);
+
+/** 分辨率 */
+const deviceResolution = ref('320x172');
+
+/** 显示模式 */
+const displayMode = ref('dataText');
+
+/**
+ * @desc 串口对象
+ * @type {SerialPort}
+ */
+let serialPort = null;
+
+/**
+ * @desc 串口读取器
+ * @type {ReturnType<typeof serialPort.readable.getReader>}
+ */
+let serialReader = null;
+
+/**
+ * @desc 串口写入器
+ * @type {ReturnType<typeof serialPort.writable.getWriter>}
+ */
+let serialWriter = null;
+
+/** 连接状态，0: 未连接, 1: 已连接 */
+let deviceState = 0;
+
+/** 渲染间隔，毫秒 */
+let renderInterval = 100;
+
+/** 发送间隔，毫秒 */
+let sendInterval = 100;
+
+/** 最后一次渲染的时间戳 */
+let lastRenderTime = 0;
+
+/** 最后一次发送的时间戳 */
+let lastSendTime = 0;
+
+/** 渲染循环 requestAnimationFrame ID */
+let renderAnimationId = null;
+
+/** 发送循环 requestAnimationFrame ID */
+let sendAnimationId = null;
+
+// 音频相关变量
+
+/** @type {AudioContext} */
+let audioContext = null;
+
+/** @type {ReturnType<typeof audioContext.createAnalyser>} */
+let audioAnalyser = null;
+
+/** @type {number} */
+let audioBufferLength = null;
+
+/** @type {Uint8Array} */
+let audioDataArray = null;
+
+/** @type {ReturnType<typeof audioContext.createMediaStreamSource>} */
+let microphone = null;
+
+/** 音频是否已初始化 */
+let isAudioReady = false;
+
+// 显示参数
+let CANVAS_WIDTH = 0;  // 画布显示宽度
+let CANVAS_HEIGHT = 0; // 画布显示高度
+let LCD_WIDTH = 0;     // 设备实际宽度
+let LCD_HEIGHT = 0;    // 设备实际高度
+
+/** 处理更改显示模式 */
+function handleChangeDisplayMode() {
+
+  let info = DISPLAY_MODES[displayMode.value];
+
+  if (info) {
+    console.info(`显示模式切换成功: ${info.label}`);
+  } else {
+    console.error('显示模式切换失败：模式无效');
+  }
+
+}
+
+/** 处理更改分辨率 */
+function handleChangeResolution() {
+
+  let canvas = canvasElement.value;
+  let value = deviceResolution.value;
+  let config = RESOLUTION_LIST[value];
+
+  // 更新显示参数
+  CANVAS_WIDTH = config.showWidth;
+  CANVAS_HEIGHT = config.showHeight;
+  LCD_WIDTH = config.lcdX;
+  LCD_HEIGHT = config.lcdY;
+
+  // 更新画布属性
+  canvas.width = CANVAS_WIDTH;
+  canvas.height = CANVAS_HEIGHT;
+
+  // 显示信息
+  console.info(`分辨率切换成功：${value}`);
+
+}
+
+/** 连接设备 */
+async function handleConnectDevice() {
+  try {
+
+    // 请求用户授权访问串口设备
+    serialPort = await navigator.serial.requestPort();
+
+    // 打开串口
+    await serialPort.open({
+      baudRate: 115200,
+      dataBits: 8,
+      stopBits: 1,
+      parity: 'none',
+      flowControl: 'hardware',
+    });
+
+    const encoder = new TextEncoder();
+    const decoder = new TextDecoder('gbk');
+
+    serialReader = serialPort.readable.getReader();
+    serialWriter = serialPort.writable.getWriter();
+
+    // 开始监听串口数据
+    listenSerialData(serialReader, decoder);
+
+    console.info('MSN 设备连接中...');
+
+    // 发送连接确认消息
+    await sendText('MSNCN');
+
+    // 连接成功后自动开始发送
+    setTimeout(() => {
+      if (!sendAnimationId) {
+        console.info('自动开始发送');
+        sendAnimationId = requestAnimationFrame(sendCanvas);
+      }
+    }, 100);
+
+  } catch (error) {
+    console.error('连接设备失败:', error);
+  }
+}
+
+/** 断开连接 */
+async function handleDisconnectDevice() {
+
+  // 断开连接前自动停止发送
+  if (sendAnimationId) {
+    console.info('自动停止发送');
+    cancelAnimationFrame(sendAnimationId);
+    sendAnimationId = null;
+  }
+
+  if (serialReader) {
+    await serialReader.cancel();
+    serialReader.releaseLock();
+    serialReader = null;
+  }
+
+  if (serialWriter) {
+    await serialWriter.close();
+    serialWriter.releaseLock();
+    serialWriter = null;
+  }
+
+  if (serialPort) {
+    await serialPort.close();
+    serialPort = null;
+  }
+
+  deviceState = 0;
+  console.info('断开连接成功');
+
+}
+
+/** 开始渲染 */
+function handleStartRender() {
+  if (!renderAnimationId) {
+    console.info('开始渲染');
+    renderAnimationId = requestAnimationFrame(renderCanvas);
+  }
+}
+
+/** 停止渲染 */
+function handleStopRender() {
+
+  // 停止循环渲染
+  if (renderAnimationId) {
+    console.info('停止渲染');
+    cancelAnimationFrame(renderAnimationId);
+    renderAnimationId = null;
+  }
+
+  // 停止音频分析
+  audioAnalyserStop();
+
+}
+
+/** 初始化 */
+function initData() {
+
+  handleChangeDisplayMode();
+  handleChangeResolution();
+
+  if (canvasElement.value) {
+    canvasCtx.value = canvasElement.value.getContext('2d');
+  }
+
+}
+
+/** 数据文本渲染类 */
+class DataTextRender {
+
+  constructor() {
+    this.monitorData = {};
+    this.font = '32px Arial';
+  }
+
+  updateDataText() {
+
+    let date = new Date();
+
+    this.monitorData = {
+      row_1: {
+        value: `${String(date.getFullYear()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
+        label: '日期',
+        unit: '',
+        detail: '',
+        color: '#FFFF00',
+        icon: 'I',
+      },
+      row_2: {
+        value: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`,
+        label: '时间',
+        unit: '',
+        detail: '',
+        color: '#00FFFF',
+        icon: 'I',
+      },
+      row_3: {
+        value: `${String(date.getFullYear()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
+        label: '日期',
+        unit: '',
+        detail: '',
+        color: '#FFFF00',
+        icon: 'I',
+      },
+      row_4: {
+        value: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`,
+        label: '时间',
+        unit: '',
+        detail: '',
+        color: '#00FFFF',
+        icon: 'I',
+      },
+    };
+
+    return this.monitorData;
+
+  }
+
+  formatDisplayText(key, showIcon = false) {
+
+    let item = this.monitorData[key];
+
+    if (!item) {
+      return '';
+    }
+
+    let icon = showIcon ? `[${item.icon}] ` : '';
+    let detail = item.detail || '';
+
+    if (detail) {
+      return `${icon}${item.label}: ${item.value}${item.unit} ${detail}`;
+    } else {
+      return `${icon}${item.label}: ${item.value}${item.unit}`;
+    }
+
+  }
+
+  createDisplayImage() {
+
+    // 更新数据
+    this.updateDataText();
+
+    // 清空画布
+    canvasCtx.value.fillStyle = 'black';
+    canvasCtx.value.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+    // 绘制网格布局
+    this.drawGridLayout();
+
+  }
+
+  drawGridLayout() {
+
+    let layouts = [
+      { key: 'row_1', position: [10, 10] },
+      { key: 'row_2', position: [10, 50] },
+      { key: 'row_3', position: [10, 90] },
+      { key: 'row_4', position: [10, 130] },
+    ];
+
+    canvasCtx.value.font = this.font;
+    canvasCtx.value.textBaseline = 'top';
+    canvasCtx.value.textAlign = 'left';
+
+    layouts.forEach(layout => {
+      if (this.monitorData[layout.key]) {
+        let item = this.monitorData[layout.key];
+        let text = this.formatDisplayText(layout.key, false);
+        canvasCtx.value.fillStyle = item['color'];
+        canvasCtx.value.fillText(text, layout.position[0], layout.position[1]);
+      }
+    });
+
+  }
+
+}
+
+/** 数据文本渲染实例 */
+const dataTextRender = new DataTextRender();
+
+/** 开始音频分析，初始化音频上下文和麦克风 */
+async function audioAnalyserStart() {
+  try {
+
+    // 创建音频上下文
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+    // 请求麦克风访问
+    let stream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+      video: false,
+    });
+
+    // 创建麦克风源
+    microphone = audioContext.createMediaStreamSource(stream);
+
+    // 创建分析器
+    audioAnalyser = audioContext.createAnalyser();
+    audioAnalyser.fftSize = 256;
+    audioAnalyser.smoothingTimeConstant = 0.25;
+
+    // 连接麦克风到分析器
+    microphone.connect(audioAnalyser);
+
+    // 获取分析器数据
+    audioBufferLength = audioAnalyser.frequencyBinCount;
+    audioDataArray = new Uint8Array(audioBufferLength);
+
+    // 更新状态
+    isAudioReady = true;
+
+    console.info('音频初始化成功，音频分析已开始');
+
+  } catch (error) {
+    console.error('音频初始化失败:', error);
+    isAudioReady = false;
+  }
+}
+
+/** 停止音频分析 */
+function audioAnalyserStop() {
+
+  if (audioContext) {
+    audioContext.close();
+    audioContext = null;
+  }
+
+  if (microphone) {
+    microphone.disconnect();
+    microphone = null;
+  }
+
+  if (audioAnalyser) {
+    audioAnalyser.disconnect();
+    audioAnalyser = null;
+  }
+
+  isAudioReady = false;
+
+  console.info('音频分析已停止');
+
+}
+
+/** 将 32 位整数拆分为 4 个字节 */
+function convertDigitToInts(di) {
+  return [(di >> 24) & 0xFF, (di >> 16) & 0xFF, (di >> 8) & 0xFF, di & 0xFF];
+}
+
+/**
+ * @description 将 RGB565 颜色转换为 RGB 颜色
+ * @param   {number} color565 RGB565 颜色值
+ * @returns {number[]} RGB 颜色值数组，格式：`[r, g, b]`
+ */
+function convertRgb565ToRgb(color565) {
+  const r = ((color565 >> 11) & 0x1F) << 3;
+  const g = ((color565 >> 5) & 0x3F) << 2;
+  const b = (color565 & 0x1F) << 3;
+  return [r, g, b];
+}
+
+/**
+ * @description 将 RGB888 转换为 RGB565 格式
+ * @param   {ImageData} imageData 包含 RGB888 数据的 ImageData 对象
+ * @returns {number[]} 包含 RGB565 数据的数组
+ */
+function convertRgb888ToRgb565(imageData) {
+
+  let rgb565Array = [];
+
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    let r = imageData.data[i];
+    let g = imageData.data[i + 1];
+    let b = imageData.data[i + 2];
+    let rgb565 = ((r >> 3) << 11) | ((g >> 2) << 5) | (b >> 3);
+    rgb565Array.push(rgb565);
+  }
+
+  return rgb565Array;
+
+}
+
+/**
+ * 对图像数据进行压缩处理，减少传输数据量
+ * - 基于 `compaction.c` 中的 `MSN_compaction` 算法移植
+ */
+function convertDisplayData(imageData = []) {
+
+  let totalDataSize = imageData.length;
+  let dataPerPage = 128;
+  let hexUse = [];
+  let dataIndex = 0;
+
+  // -- 按页处理数据，每页 128 个像素 --
+
+  let totalPages = Math.floor(totalDataSize / dataPerPage);
+
+  for (let page = 0; page < totalPages; page++) {
+    let i = 0;
+    while (i < 128) {
+
+      let a = 0;
+      let a_data = imageData[dataIndex];
+
+      // 统计第 1 种颜色的连续出现次数（最多 15 次）
+      for (let s = 0; s < 15; s++) {
+        if (i < 128 && a_data === imageData[dataIndex]) {
+          a++;
+          i++;
+          dataIndex++;
+        } else {
+          break;
+        }
+      }
+
+      let b = 0;
+      let b_data = 0;
+
+      // 统计第 2 种颜色的连续出现次数（最多 15 次）
+      if (i < 128) {
+        b_data = imageData[dataIndex];
+        for (let s = 0; s < 15; s++) {
+          if (i < 128 && b_data === imageData[dataIndex]) {
+            b++;
+            i++;
+            dataIndex++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      // 输出压缩数据：
+      // [9, a*16+b, a_data 高字节, a_data 低字节, b_data 高字节, b_data 低字节]
+      hexUse.push(9);
+      hexUse.push(a * 16 + b);
+      hexUse.push((a_data >> 8) & 0xFF);
+      hexUse.push(a_data & 0xFF);
+      hexUse.push((b_data >> 8) & 0xFF);
+      hexUse.push(b_data & 0xFF);
+
+    }
+  }
+
+  // -- 处理剩余数据 --
+
+  let remainingDataSize = totalDataSize % dataPerPage;
+
+  if (remainingDataSize !== 0) {
+
+    let remainingData = imageData.slice(totalDataSize - remainingDataSize);
+
+    // 补全数据到 128 字节
+    while (remainingData.length < dataPerPage) {
+      remainingData.push(0xFFFF);
+    }
+
+    let i = 0;
+    let dataIndex = 0;
+
+    while (i < 128) {
+
+      let a = 0;
+      let a_data = remainingData[dataIndex];
+
+      for (let s = 0; s < 15; s++) {
+        if (i < 128 && a_data === remainingData[dataIndex]) {
+          a++;
+          i++;
+          dataIndex++;
+        } else {
+          break;
+        }
+      }
+
+      let b = 0;
+      let b_data = 0;
+
+      if (i < 128) {
+        b_data = remainingData[dataIndex];
+        for (let s = 0; s < 15; s++) {
+          if (i < 128 && b_data === remainingData[dataIndex]) {
+            b++;
+            i++;
+            dataIndex++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      hexUse.push(9);
+      hexUse.push(a * 16 + b);
+      hexUse.push((a_data >> 8) & 0xFF);
+      hexUse.push(a_data & 0xFF);
+      hexUse.push((b_data >> 8) & 0xFF);
+      hexUse.push(b_data & 0xFF);
+
+    }
+  }
+
+  return hexUse;
+
+}
+
+/** 设置 LCD 显示起始坐标 */
+function lcdSetDisplayXY(lcdD0 = 0, lcdD1 = 0) {
+  let hexUse = [];
+  hexUse.push(2);                       // LCD 多次写入命令
+  hexUse.push(0);                       // 设置起始位置指令
+  hexUse.push(Math.floor(lcdD0 / 256)); // X 坐标高字节
+  hexUse.push(lcdD0 % 256);             // X 坐标低字节
+  hexUse.push(Math.floor(lcdD1 / 256)); // Y 坐标高字节
+  hexUse.push(lcdD1 % 256);             // Y 坐标低字节
+  return hexUse;
+}
+
+/** 设置 LCD 显示区域大小 */
+function lcdSetDisplaySize(lcdD0 = 0, lcdD1 = 0) {
+  let hexUse = [];
+  hexUse.push(2);                       // LCD 多次写入命令
+  hexUse.push(1);                       // 设置大小指令
+  hexUse.push(Math.floor(lcdD0 / 256)); // 宽度高字节
+  hexUse.push(lcdD0 % 256);             // 宽度低字节
+  hexUse.push(Math.floor(lcdD1 / 256)); // 高度高字节
+  hexUse.push(lcdD1 % 256);             // 高度低字节
+  return hexUse;
+}
+
+/**
+ * @description 设置 LCD 显示区域并准备写入数据
+ * @param {number} lcdX - 显示区域起始 X 坐标
+ * @param {number} lcdY - 显示区域起始 Y 坐标
+ * @param {number} lcdW - 显示区域宽度
+ * @param {number} lcdH - 显示区域高度
+ */
+async function lcdSetDisplaySend(lcdX = 0, lcdY = 0, lcdW = 0, lcdH = 0) {
+
+  let hexUse = [];
+
+  hexUse.push(...lcdSetDisplayXY(lcdX, lcdY));
+  hexUse.push(...lcdSetDisplaySize(lcdW, lcdH));
+  hexUse.push(2); // LCD 多次写入命令
+  hexUse.push(3); // 设置指令
+  hexUse.push(7); // 载入地址
+  hexUse.push(0, 0, 0);
+
+  await sendData(hexUse);
+
+}
+
+/**
+ * @description 监听串口数据
+ * @param {typeof serialReader} reader
+ * @param {TextDecoder}         decoder
+ */
+async function listenSerialData(reader, decoder) {
+  try {
+    while (true) {
+
+      let { value, done } = await reader.read();
+
+      // 端口已关闭
+      if (done) {
+        console.info('串口已关闭');
+        deviceState = 0;
+        break;
+      }
+
+      // 处理接收到的数据
+      let data = decoder.decode(value);
+
+      console.debug('接收数据:', data);
+
+      // 检测是否为 MSN 设备
+      if (data.length > 5) {
+        for (let n = 0; n < data.length - 5; n++) {
+          if (data.charCodeAt(n) === 0) {
+            if (data.substring(n + 1, n + 4) === 'MSN') {
+              // 确认是 MSN 设备
+              console.info('检测到 MSN 设备');
+              deviceState = 1;
+              // 检查是否收到连接确认
+              if (data.substring(n + 1, n + 6) === 'MSNCN') {
+                console.info('MSN 设备连接完成');
+              }
+              break;
+            }
+          }
+        }
+      }
+
+    }
+  } catch (error) {
+    console.error('读取串口数据失败:', error);
+    deviceState = 0;
+  }
+}
+
+/** 循环发送画布内容到设备 */
+async function sendCanvas(timestamp = 0) {
+
+  // 限制发送频率
+  if (timestamp - lastSendTime >= sendInterval) {
+
+    // 更新时间戳
+    lastSendTime = timestamp;
+
+    // 未连接，结束后续处理
+    if (!deviceState) {
+      sendAnimationId = requestAnimationFrame(sendCanvas);
+      return;
+    }
+
+    // 创建一个临时画布用于图像缩放
+    let tempCanvas = document.createElement('canvas');
+    let tempCtx = tempCanvas.getContext('2d');
+
+    tempCanvas.width = LCD_WIDTH;
+    tempCanvas.height = LCD_HEIGHT;
+
+    // 将原始画布内容缩放到设备实际分辨率
+    tempCtx.drawImage(canvasElement.value, 0, 0, LCD_WIDTH, LCD_HEIGHT);
+
+    // 获取缩放后的图像数据
+    let imageData = tempCtx.getImageData(0, 0, LCD_WIDTH, LCD_HEIGHT);
+
+    // 转换为 RGB565 格式
+    let rgb565 = convertRgb888ToRgb565(imageData);
+
+    // 压缩数据
+    let hexUse = convertDisplayData(rgb565);
+
+    // 设置显示区域
+    await lcdSetDisplaySend(0, 0, LCD_WIDTH, LCD_HEIGHT);
+
+    // 发送数据到设备
+    await sendData(hexUse);
+
+  }
+
+  // 循环发送
+  sendAnimationId = requestAnimationFrame(sendCanvas);
+
+}
+
+/** 发送数据到设备 */
+async function sendData(dataArray = []) {
+
+  if (!serialWriter) {
+    return;
+  }
+
+  try {
+    let data = new Uint8Array(dataArray);
+    await serialWriter.write(data);
+    console.debug('发送数据成功:', dataArray.length, '字节');
+  } catch (error) {
+    console.error('发送数据失败:', error);
+  }
+
+}
+
+/** 发送文本到设备 */
+async function sendText(text = '') {
+
+  if (!serialWriter) {
+    return;
+  }
+
+  try {
+
+    // 构建消息
+    let data = new Uint8Array(text.length + 1);
+
+    // 添加消息头
+    data[0] = 0x00;
+
+    // 处理消息内容
+    for (let i = 0; i < text.length; i++) {
+      data[i + 1] = text.charCodeAt(i);
+    }
+
+    await serialWriter.write(data);
+
+    console.debug('发送文本成功:', text);
+
+  } catch (error) {
+    console.error('发送文本失败:', error);
+  }
+
+}
+
+/** 循环渲染画布内容 */
+async function renderCanvas(timestamp = 0) {
+
+  // 限制渲染频率
+  if (timestamp - lastRenderTime >= renderInterval) {
+
+    // 更新时间戳
+    lastRenderTime = timestamp;
+
+    // 更新画布内容
+    switch (displayMode.value) {
+      case 'audioSpectrum':
+        await renderAudioSpectrum();
+        break;
+      case 'audioVisualizer1':
+        await renderAudioVisualizer1();
+        break;
+      case 'audioVisualizer2':
+        await renderAudioVisualizer2();
+        break;
+      case 'dataText':
+        await renderDataText();
+        break;
+      case 'digitalClock':
+        await renderDigitalClock();
+        break;
+      default:
+        break;
+    }
+
+  }
+
+  // 循环渲染
+  renderAnimationId = requestAnimationFrame(renderCanvas);
+
+}
+
+/** 渲染音频频谱内容 */
+async function renderAudioSpectrum() {
+
+  // 初始化音频
+  if (!isAudioReady) {
+    await audioAnalyserStart();
+  }
+
+  // 清空画布
+  canvasCtx.value.fillStyle = '#000000';
+  canvasCtx.value.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+  if (!audioAnalyser) {
+    await renderCustomText('音频未初始化');
+    return;
+  }
+
+  // 获取频谱数据
+  audioAnalyser.getByteFrequencyData(audioDataArray);
+
+  // 计算柱状图宽度和间距
+  let barWidth = (CANVAS_WIDTH / audioBufferLength) * 2.5;
+  let x = 0;
+
+  // 绘制频谱柱状图
+  for (let i = 0; i < audioBufferLength; i++) {
+
+    // 计算柱状图高度
+    let barHeight = (audioDataArray[i] / 255) * CANVAS_HEIGHT;
+
+    // 生成渐变颜色
+    let r = Math.floor((i / audioBufferLength) * 255);
+    let g = Math.floor((audioDataArray[i] / 255) * 255);
+    let b = 150;
+
+    canvasCtx.value.fillStyle = `rgb(${r}, ${g}, ${b})`;
+
+    // 绘制柱状图
+    canvasCtx.value.fillRect(x, CANVAS_HEIGHT - barHeight, barWidth, barHeight);
+
+    // 移动到下一个柱状图位置
+    x += barWidth + 1;
+
+  }
+
+}
+
+/** 渲染音频可视化内容 */
+async function renderAudioVisualizer1() {
+
+  // 初始化音频
+  if (!isAudioReady) {
+    await audioAnalyserStart();
+  }
+
+  // 清空画布
+  canvasCtx.value.fillStyle = '#000000';
+  canvasCtx.value.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+  if (!audioAnalyser) {
+    await renderCustomText('音频未初始化');
+    return;
+  }
+
+  // 获取频谱数据
+  audioAnalyser.getByteFrequencyData(audioDataArray);
+
+  // 计算圆心
+  let centerX = CANVAS_WIDTH / 2;
+  let centerY = CANVAS_HEIGHT / 2;
+
+  // 基础半径
+  let baseRadius = Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.25;
+  let maxRadiusOffset = Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.2;
+
+  // 获取绘制点数量
+  let pointSum = Math.min(audioBufferLength, 64);
+
+  canvasCtx.value.beginPath();
+
+  // 绘制一个声波圆环
+  for (let i = 0; i <= pointSum; i++) {
+
+    let index = i % pointSum;
+    let angle = (index / pointSum) * Math.PI * 2 - Math.PI / 2;
+
+    let value = audioDataArray[index];
+    let radiusOffset = (value / 255) * maxRadiusOffset;
+
+    let radius = baseRadius + radiusOffset;
+    let x = centerX + Math.cos(angle) * radius;
+    let y = centerY + Math.sin(angle) * radius;
+
+    if (i === 0) {
+      canvasCtx.value.moveTo(x, y);
+    } else {
+      canvasCtx.value.lineTo(x, y);
+    }
+
+  }
+
+  canvasCtx.value.closePath();
+  canvasCtx.value.strokeStyle = '#00FF88';
+  canvasCtx.value.lineWidth = 2;
+  canvasCtx.value.stroke();
+
+  let dataSum = 0;
+
+  for (let i = 0; i < audioBufferLength; i++) {
+    dataSum += audioDataArray[i];
+  }
+
+  // 计算平均音量
+  let avgVolume0 = dataSum / audioBufferLength;
+  let avgVolume1 = avgVolume0 / 255;
+
+  // 计算中心圆形半径（音量越高，圆形越大）
+  let centerCircleRadius = Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.05 + avgVolume1 * Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.15;
+
+  // 绘制中心圆形
+  canvasCtx.value.beginPath();
+  canvasCtx.value.arc(centerX, centerY, centerCircleRadius, 0, Math.PI * 2);
+  canvasCtx.value.fillStyle = `rgba(0, 255, 136, ${0.2 + avgVolume1 * 0.8})`;
+  canvasCtx.value.fill();
+  canvasCtx.value.strokeStyle = '#00FF88';
+  canvasCtx.value.lineWidth = 2;
+  canvasCtx.value.stroke();
+
+  // 绘制外层圆形
+  canvasCtx.value.beginPath();
+  canvasCtx.value.arc(centerX, centerY, baseRadius - 2, 0, Math.PI * 2);
+  canvasCtx.value.strokeStyle = '#004422';
+  canvasCtx.value.lineWidth = 1;
+  canvasCtx.value.stroke();
+
+  // 绘制线段
+  canvasCtx.value.beginPath();
+  canvasCtx.value.strokeStyle = '#00CCFF';
+  canvasCtx.value.lineWidth = 2;
+  // 上
+  canvasCtx.value.moveTo(0, 1);
+  canvasCtx.value.lineTo(avgVolume1 * CANVAS_WIDTH, 1);
+  canvasCtx.value.stroke();
+  // 右
+  canvasCtx.value.moveTo(CANVAS_WIDTH - 4, 0);
+  canvasCtx.value.lineTo(CANVAS_WIDTH - 4, avgVolume1 * CANVAS_HEIGHT);
+  canvasCtx.value.stroke();
+  // 下
+  canvasCtx.value.moveTo(CANVAS_WIDTH, CANVAS_HEIGHT - 1);
+  canvasCtx.value.lineTo(CANVAS_WIDTH - avgVolume1 * CANVAS_WIDTH, CANVAS_HEIGHT - 1);
+  canvasCtx.value.stroke();
+  // 左
+  canvasCtx.value.moveTo(4, CANVAS_HEIGHT);
+  canvasCtx.value.lineTo(4, CANVAS_HEIGHT - avgVolume1 * CANVAS_HEIGHT);
+  canvasCtx.value.stroke();
+
+}
+
+/** 渲染音频可视化内容 */
+async function renderAudioVisualizer2() {
+
+  // 初始化音频
+  if (!isAudioReady) {
+    await audioAnalyserStart();
+  }
+
+  // 清空画布
+  canvasCtx.value.fillStyle = '#000000';
+  canvasCtx.value.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+  if (!audioAnalyser) {
+    await renderCustomText('音频未初始化');
+    return;
+  }
+
+  // 获取频谱数据
+  audioAnalyser.getByteFrequencyData(audioDataArray);
+
+  // 频谱粒子矩阵
+  let cols = 20;
+  let rows = 10;
+  let padding = 10;
+  let cellWidth = (CANVAS_WIDTH - padding * 2) / cols;
+  let cellHeight = (CANVAS_HEIGHT - padding * 2) / rows;
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+
+      let x = padding + col * cellWidth + cellWidth / 2;
+      let y = padding + row * cellHeight + cellHeight / 2;
+
+      let dataIndex = Math.floor((col / cols) * audioBufferLength);
+      let value = audioDataArray[dataIndex];
+
+      let threshold = (rows - 1 - row) / rows;
+      let normalizedValue = value / 255;
+
+      if (normalizedValue > threshold) {
+
+        let size = cellHeight * 0.35;
+        let brightness = normalizedValue;
+
+        canvasCtx.value.beginPath();
+        canvasCtx.value.arc(x, y, size, 0, Math.PI * 2);
+        canvasCtx.value.fillStyle = `rgba(0, 255, 255, ${0.2 + brightness * 0.8})`;
+        canvasCtx.value.fill();
+
+      }
+
+    }
+  }
+
+}
+
+/** 渲染自定义文本 */
+async function renderCustomText(text = '') {
+  canvasCtx.value.fillStyle = '#000000';
+  canvasCtx.value.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+  canvasCtx.value.fillStyle = '#FFFFFF';
+  canvasCtx.value.font = '16px Arial';
+  canvasCtx.value.textAlign = 'center';
+  canvasCtx.value.fillText(text, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
+}
+
+/** 渲染数据文本内容 */
+async function renderDataText() {
+
+  // 更新画布内容
+  dataTextRender.createDisplayImage();
+
+}
+
+/** 渲染数字时钟内容 */
+async function renderDigitalClock() {
+
+  // 清空画布
+  canvasCtx.value.fillStyle = '#000000';
+  canvasCtx.value.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+  // 获取当前时间
+  let date = new Date();
+  let hours = String(date.getHours()).padStart(2, '0');
+  let minutes = String(date.getMinutes()).padStart(2, '0');
+  let seconds = String(date.getSeconds()).padStart(2, '0');
+
+  // 计算字体大小，确保不超出画布
+  let padding = 10;
+  let fontSize = Math.floor((CANVAS_HEIGHT - padding * 2) / 3);
+  let timeFont = `${fontSize}px monospace`;
+  let timeText = `${hours}:${minutes}:${seconds}`;
+
+  // 绘制时间
+  canvasCtx.value.font = timeFont;
+  canvasCtx.value.textAlign = 'center';
+  canvasCtx.value.textBaseline = 'middle';
+  canvasCtx.value.fillStyle = '#FFFFFF';
+  canvasCtx.value.fillText(timeText, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
+
+}
+
+onMounted(() => {
+  initData();
+});
+
+onBeforeUnmount(() => {
+  handleDisconnectDevice();
+  handleStopRender();
+});
+</script>
+
+<style lang="less" scoped>
+.config-form {
+  .n-form-item {
+    flex-grow: 1;
+    width: 0;
+    max-width: 200px;
+  }
+}
+
+.canvas-container {
+  canvas {
+    max-width: 100%;
+  }
+}
+</style>