From cd2e2de6d8d50267416508481b25d9cf05f78aed Mon Sep 17 00:00:00 2001
From: yangy <eafonyang@gamilc.com>
Date: Wed, 22 Apr 2026 14:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/BottomNav.tsx |    2 +-
 client/src/old/Coeff.js             |   48 -
 client/src/old/audio.js             |  512 --------
 client/src/old/peq.js               |  314 -----
 client/src/old/peq.vue              | 1830 ---------------------------
 client/src/pages/IOPage.tsx         |    2 +
 client/src/pages/VUPage.tsx         |    2 +
 7 files changed, 5 insertions(+), 2705 deletions(-)
 delete mode 100644 client/src/old/Coeff.js
 delete mode 100644 client/src/old/audio.js
 delete mode 100644 client/src/old/peq.js
 delete mode 100644 client/src/old/peq.vue

diff --git a/client/src/components/BottomNav.tsx b/client/src/components/BottomNav.tsx
index 0a0a532..615ed31 100644
--- a/client/src/components/BottomNav.tsx
+++ b/client/src/components/BottomNav.tsx
@@ -35,7 +35,7 @@ export default function BottomNav() {
 
   return (
     <nav
-      className="fixed bottom-0 left-0 right-0 z-50 lg:hidden"
+      className="fixed bottom-0 left-0 right-0 z-50"
       style={{
         background: "rgba(10, 10, 12, 0.96)",
         backdropFilter: "blur(40px) saturate(200%)",
diff --git a/client/src/old/Coeff.js b/client/src/old/Coeff.js
deleted file mode 100644
index 73fa396..0000000
--- a/client/src/old/Coeff.js
+++ /dev/null
@@ -1,48 +0,0 @@
-class Coeff{
-    constructor() {
-        this.b0 = 0;
-        this.b1 = 0;
-        this.b2 = 0;
-        this.a0 = 0;
-        this.a1 = 0;
-        this.a2 = 0;
-    }
-
-    setB0(value){
-        this.b0 = value;
-    }
-
-    setB1(value){
-        this.b1 = value;
-    }
-
-    setB2(value){
-        this.b2 = value;
-    }
-
-    setA0(value){
-        this.a0 = value;
-    }
-
-    setA1(value){
-        this.a1 = value;
-    }
-
-    setA2(value){
-        this.a2 = value;
-    }
-
-    getSectionsMatrix(gain, fc, bw, type, bypass, fs){
-        const w = 2 * fc / fs;
-        const q = fc / bw;
-        const bypassStatus = bypass ? 1 : 0;
-        const bqtype = type + bypassStatus * 10;
-        const sA = Math.pow(10, gain / 40);
-        const sqrt_sA = Math.sqrt(sA);
-        const sin_w = Math.sin(Math.PI * w);
-        const cos_w = Math.cos(Math.PI * w);
-        const alpha = sin_w / (2 * q);
-
-        let b0, b1, b2, a0, a1, a2;
-    }
-}
\ No newline at end of file
diff --git a/client/src/old/audio.js b/client/src/old/audio.js
deleted file mode 100644
index 6816132..0000000
--- a/client/src/old/audio.js
+++ /dev/null
@@ -1,512 +0,0 @@
-import * as echarts from 'echarts'
-
-export const TYPE_PEAK = 0;
-export const TYPE_LOWSHELF = 1;
-export const TYPE_HIGHSHELF = 2;
-export const TYPE_LOWPASS = 3;
-export const TYPE_HIGHPASS = 4;
-export const TYPE_BANDPASS = 5;
-export const TYPE_NOTCH = 6;
-export const TYPE_ALLPASS = 7;
-export const LPF_1ST = 8;
-
-
-
-// Audio bean
-export class AudioBean {
-    constructor(gain, fc, fs, type, bypass, q) {
-        this.gain = gain;
-        this.fc = fc;
-        this.fs = fs;
-        this.type = type;
-        this.bypass = bypass;
-        this.q = q;
-    }
-
-    getGain(){return this.gain;}
-    getFc(){return this.fc;}
-    getFs(){return this.fs;}
-    getType(){return this.type;}
-    getBypass(){return this.bypass;}
-    getQ(){return this.q;}
-    setGain(gain){this.gain = gain;}
-    setFc(fc){this.fc = fc;}
-    setFs(fs){this.fs = fs;}
-    setType(type){this.type = type;}
-    setBypass(bypass){this.bypass = bypass;}
-    setQ(q){this.q = q;}
-
-    toString(){
-        return "AudioTunningEQ [gain=" + this.gain + ", fc=" + this.fc + ", fs=" + this.fs + ", type=" + this.type + ", bypass=" + this.bypass + ", q=" + this.q + "]";
-    }
-}
-//Coeff bean
-class Coeff {
-    constructor(props) {
-        this.b0 = 0;
-        this.b1 = 0;
-        this.b2 = 0;
-        this.a0 = 0;
-        this.a1 = 0;
-        this.a2 = 0;
-
-    }
-
-    setB0(b0) {this.b0 = b0;}
-    setB1(b1) {this.b1 = b1;}
-    setB2(b2) {this.b2 = b2;}
-    setA0(a0) {this.a0 = a0;}
-    setA1(a1) {this.a1 = a1;}
-    setA2(a2) {this.a2 = a2;}
-    getB0(){return this.b0;}
-    getB1(){return this.b1;}
-    getB2(){return this.b2;}
-    getA0(){return this.a0;}
-    getA1(){return this.a1;}
-    getA2(){return this.a2;}
-
-    toString() {
-
-    }
-}
-
-//Complex bean
-class Complex {
-    constructor(real, image) {
-        this.real = real;
-        this.image = image;
-    }
-
-    getReal() {return this.real;}
-    getImage() {return this.image;}
-    setReal(real) {this.real = real;}
-    setImage(image) {this.image = image;}
-
-    add(a) {
-        return new Complex(this.real + a.real, this.image + a.image);
-    }
-
-    sub(a) { // 复数相减
-        return new Complex(this.real - a.real, this.image - a.image);
-    }
-
-    div(a) { // 复数相除
-        const denominator = a.real * a.real + a.image * a.image;
-        const newReal = (this.real * a.real + this.image * a.image) / denominator;
-        const newImage = (this.image * a.real - this.real * a.image) / denominator;
-        return new Complex(newReal, newImage);
-    }
-
-    mul(a) { // 复数相乘
-        const newReal = this.real * a.real - this.image * a.image;
-        const newImage = this.image * a.real + this.real * a.image;
-        return new Complex(newReal, newImage);
-    }
-
-    mulScalar(a) { // 复数与实数相乘
-        return new Complex(this.real * a, this.image * a);
-    }
-
-    addScalar(a) { // 复数与实数相加
-        return new Complex(this.real + a, this.image);
-    }
-}
-
-function getFreqznList(coeffList, fs, f) {
-    let n = f.length;
-    let h = new Array(n);
-    for (let i = 0; i < n; i++) {
-        let w = 2*Math.PI*(f[i])/fs;
-        let complex = getFreqwList(coeffList, w);
-        h[i] = 20*Math.log10(Math.abs(getAmplitude(complex)));
-    }
-    return h;
-}
-
-function getFreqzn(coeff, fs, f) {
-    let n = f.length;
-    let h = new Array(n);
-    for (let i = 0; i < n; i++) {
-        let w = 2*Math.PI*(f[i])/fs;
-        let complex = getFreqw(coeff, w);
-        h[i] = 20*Math.log10(Math.abs(getAmplitude(complex)));
-    }
-    return h;
-}
-
-function getAmplitude(complex) {
-    return Math.sqrt(Math.pow(complex.getReal(),2)+Math.pow(complex.getImage(),2));
-}
-
-function getFreqw(coeff, w) {
-    const complex = new Complex(Math.cos(w), -Math.sin(w));
-    const b2 = (complex.mul(complex)).mulScalar(coeff.getB2());
-    const b1 = complex.mulScalar(coeff.getB1());
-    const hup = b2.add(b1).addScalar(coeff.getB0());
-    const a2 = (complex.mul(complex)).mulScalar(coeff.getA2());
-    const a1 = complex.mulScalar(coeff.getA1());
-    const hdown = a2.add(a1).addScalar(coeff.getA0());
-    return hup.div(hdown);
-}
-
-function getFreqwList(coeffList, w){
-    let h = getFreqw(coeffList[0], w);
-    coeffList.slice(1).forEach((item) => {
-        h = h.mul(getFreqw(item, w));
-    });
-    return h;
-}
-
-function test(fc, q) {
-    let w = fc * 2 / (48000*1000);
-    let down = Math.sqrt(Math.pow((1 - w * w), 2) + w * w / (q * q));
-    let gain = 1 / down;
-    let db = 20 * Math.log10(gain);
-    return db;
-}
-
-export function visualizeResponse(coeffList, fs) {
-  let validCoeffList = []
-  let n = 349
-  let startF = 20
-  let endF = 20000
-  let logStep = (Math.log10(20000) - Math.log10(20)) / n
-  let f = new Array(n)
-  let step = Math.pow(10, logStep)
-  for (let i = 0; i < n; i++) {
-    f[i] = startF * Math.pow(step, i)
-  }
-
-  let semilogf = new Array(n)
-  // 注意：此函数逻辑不能改动，保持与原项目一致，仅计算前 200 个点
-  for (let i = 0; i < 200; i++) {
-    semilogf[i] = Math.log10(f[i])
-  }
-
-  let xValues = []
-  let yValues = []
-  let titleList = []
-  coeffList.forEach((coeff, i) => {
-    if (
-      !Number.isNaN(coeff.getB0()) &&
-      !Number.isNaN(coeff.getB1()) &&
-      !Number.isNaN(coeff.getB2()) &&
-      !Number.isNaN(coeff.getA0()) &&
-      !Number.isNaN(coeff.getA1()) &&
-      !Number.isNaN(coeff.getA2())
-    ) {
-      validCoeffList.push(coeff)
-      let h = getFreqzn(coeff, fs, f)
-      xValues.push(semilogf)
-      yValues.push(h)
-      titleList.push('Band' + i)
-    }
-  })
-
-  if (yValues.length > 1) {
-    let overall = getFreqznList(validCoeffList, fs, f)
-    xValues.push(semilogf)
-    yValues.push(overall)
-    titleList.push('overall')
-  }
-
-  let testArray = new Array(n)
-  for (let i = 0; i < f.length; i++) {
-    testArray[i] = test(f[i], 1)
-  }
-  return [xValues[xValues.length - 1], yValues[yValues.length - 1]]
-}
-
-export function getSectionsMatrix(gain, fc, q, type, bypass, fs) {
-    let w = 2*fc/fs;
-    let bypassStatus = bypass ? 1 : 0;
-    let bqtype = type + bypassStatus * 10;
-    const sA = Math.pow(10, gain / 40);
-    const sqrt_sA = Math.sqrt(sA);
-    const sin_w = Math.sin(Math.PI * w);
-    const cos_w = Math.cos(Math.PI * w);
-    const alpha = sin_w / (2*q);
-    let b0, b1, b2, a0, a1, a2;
-    switch (bqtype){
-        case TYPE_PEAK:
-            b0 = 1 + alpha * sA;
-            b1 = -2 * cos_w;
-            b2 = 1 - alpha * sA;
-            a0 = 1 + alpha / sA;
-            a1 = b1;
-            a2 = 1 - alpha / sA;
-            break;
-        case TYPE_LOWSHELF:
-            b0 = sA * ((sA + 1) - (sA - 1) * cos_w + 2 * sqrt_sA * alpha);
-            b1 = 2 * sA * ((sA - 1) - (sA + 1) * cos_w);
-            b2 = sA * ((sA + 1) - (sA - 1) * cos_w - 2 * sqrt_sA * alpha);
-            a0 = (sA + 1) + (sA - 1) * cos_w + 2 * sqrt_sA * alpha;
-            a1 = -2 * ((sA - 1) + (sA + 1) * cos_w);
-            a2 = (sA + 1) + (sA - 1) * cos_w - 2 * sqrt_sA * alpha;
-            break;
-        case TYPE_HIGHSHELF:
-            b0 = sA * ((sA + 1) + (sA - 1) * cos_w + 2 * sqrt_sA * alpha);
-            b1 = -2 * sA * ((sA - 1) + (sA + 1) * cos_w);
-            b2 = sA * ((sA + 1) + (sA - 1) * cos_w - 2 * sqrt_sA * alpha);
-            a0 = (sA + 1) - (sA - 1) * cos_w + 2 * sqrt_sA * alpha;
-            a1 = 2 * ((sA - 1) - (sA + 1) * cos_w);
-            a2 = (sA + 1) - (sA - 1) * cos_w - 2 * sqrt_sA * alpha;
-            break;
-        case TYPE_LOWPASS:
-            b0 = (1 - cos_w) / 2;
-            b1 = 1 - cos_w;
-            b2 = b0;
-            a0 = 1 + alpha;
-            a1 = -2 * cos_w;
-            a2 = 1 - alpha;
-            break;
-        case TYPE_HIGHPASS:
-            b0 = (1 + cos_w) / 2;
-            b1 = -(1 + cos_w);
-            b2 = b0;
-            a0 = 1 + alpha;
-            a1 = -2 * cos_w;
-            a2 = 1 - alpha;
-            break;
-        case TYPE_BANDPASS:
-            b0 = alpha;
-            b1 = 0;
-            b2 = -alpha;
-            a0 = 1 + alpha;
-            a1 = -2 * cos_w;
-            a2 = 1 - alpha;
-            break;
-        case TYPE_NOTCH:
-            b0 = 1;
-            b1 = -2 * cos_w;
-            b2 = 1;
-            a0 = 1 + alpha;
-            a1 = -2 * cos_w;
-            a2 = 1 - alpha;
-            break;
-        case TYPE_ALLPASS:
-            b0 = 1 - alpha;
-            b1 = -2 * cos_w;
-            b2 = 1 + alpha;
-            a0 = b2;
-            a1 = b1;
-            a2 = b0;
-            break;
-        case LPF_1ST:
-            let alpha_1st = sin_w / (cos_w + 1);
-            b0 = alpha_1st / (1 + alpha_1st);
-            b1 = b0;
-            b2 = 0;
-            a0 = 1;
-            a1 = (alpha_1st - 1) / (1 + alpha_1st);
-            a2 = 0;
-            break;
-        default:
-            b0 = 1;
-            b1 = 0;
-            b2 = 0;
-            a0 = 1;
-            a1 = 0;
-            a2 = 0;
-            break;
-    }
-    let coeff = new Coeff();
-    coeff.setB0(b0/a0);
-    coeff.setB1(b1/a0);
-    coeff.setB2(b2/a0);
-    coeff.setA0(a0/a0);
-    coeff.setA1(a1/a0);
-    coeff.setA2(a2/a0);
-    return coeff;
-}
-
-export function getFilterShortName(type){
-    switch (type){
-        case "LOW_PASS": return "LPF";
-        case "HIGH_PASS": return "HPF";
-        case "BAND_PASS": return "BPF";
-        case "LOW_SHELF": return "LSHELF";
-        case "HIGH_SHELF": return "HSHELF";
-        case "ALL_PASS": return "APF";
-        case "PEAKING": return "PEAK";
-        default: return type;
-    }
-}
-
-function getFilterTypeName(val){
-    switch(val){
-        case TYPE_LOWPASS: return "LPF";
-        case TYPE_HIGHPASS: return "HPF";
-        case TYPE_BANDPASS: return "BPF";
-        case TYPE_NOTCH: return "NOTCH";
-        case TYPE_PEAK: return "PEAK";
-        case TYPE_LOWSHELF: return "LSHELF";
-        case TYPE_HIGHSHELF: return "HSHELF";
-        case TYPE_ALLPASS: return "APF";
-    }
-}
-
-export function getFilterType(typeName) {
-    if(typeName === 'LPF' || typeName === 'LOWP_ASS'){
-        return TYPE_LOWPASS;
-    }
-    else if(typeName === 'HPF' || typeName === 'HIGH_PASS'){
-        return TYPE_HIGHPASS;
-    }
-    else if(typeName === 'BPF' || typeName === 'BAND_PASS'){
-        return TYPE_BANDPASS;
-    }
-    else if(typeName === 'NOTCH'){
-        return TYPE_NOTCH;
-    }
-    else if(typeName === 'PEAK' || typeName === 'PEAKING'){
-        return TYPE_PEAK;
-    }
-    else if(typeName === 'LSHELF' || typeName === 'LOW_SHELF'){
-        return TYPE_LOWSHELF;
-    }
-    else if(typeName === 'HSHELF' || typeName === 'HIGH_SHELF'){
-        return TYPE_HIGHSHELF;
-    }
-    else if(typeName === 'APF' || typeName === 'ALL_PASS'){
-        return TYPE_ALLPASS;
-    }
-}
-
-export function getChartOps(dataSet, yMax, yMin, lineColor) {
-  //要显示的x轴刻度
-  const labelsToShow = [0, 43, 85, 116, 160, 200, 233, 281, 320, 348]
-
-  return {
-    xAxis: {
-      type: 'category',
-      data: dataSet[0],
-      axisLabel: {
-        formatter: function (value, index) {
-          // 指定只显示 index 在（0，47，93，115）的标签
-          if (labelsToShow.includes(index)) {
-            switch (index) {
-              case 0:
-                return '20'
-              case 43:
-                return '50'
-              case 85:
-                return '100'
-              case 116:
-                return '200'
-              case 160:
-                return '500'
-              case 200:
-                return '1K'
-              case 233:
-                return '2K'
-              case 281:
-                return '5K'
-              case 320:
-                return '10K'
-              case 348:
-                return '20K'
-            }
-          }
-        },
-        interval: function (index) {
-          return labelsToShow.includes(index)
-        },
-        fontSize: 14,
-        color: '#999'
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'solid',
-          color: '#3A4348'
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#3A4348'
-        }
-      }
-    },
-    yAxis: {
-      type: 'value',
-      min: yMin,
-      max: yMax,
-      interval: 5,
-
-      axisLabel: {
-        fontSize: 14,
-        color: '#999'
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'solid',
-          color: '#3A4348'
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#3A4348'
-        }
-      }
-    },
-    legend: {
-      show: true,
-      top: 15,
-      data: [
-        {
-          name: 'Equalizer',
-          icon: 'circle',
-          textStyle: { color: lineColor }, // 单独设置颜色
-          itemStyle: {
-            color: lineColor, // 设置图标颜色
-            borderColor: lineColor // 如果需要边框
-          }
-        },
-        {
-          name: 'Raw',
-          icon: 'circle',
-          textStyle: { color: '#ffffff' },
-          itemStyle: {
-            color: '#ffffff', // 设置图标颜色
-            borderColor: '#ffffff' // 如果需要边框
-          }
-        },
-        {
-          name: 'Equalized',
-          icon: 'circle',
-          textStyle: { color: '#23d2fe' },
-          itemStyle: {
-            color: '#23d2fe', // 设置图标颜色
-            borderColor: '#23d2fe' // 如果需要边框
-          }
-        }
-      ],
-      textStyle: {
-        fontSize: 13
-      }
-    },
-    series: [
-      {
-        name: 'Equalizer',
-        data: dataSet[1],
-        type: 'line',
-        showSymbol: false,
-        lineStyle: {
-          color: lineColor
-        },
-        areaStyle: {
-          opacity: 0.3,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#578400' },
-            {
-              offset: 1,
-              color: '#578400'
-            }
-          ])
-        }
-      }
-    ]
-  }
-}
diff --git a/client/src/old/peq.js b/client/src/old/peq.js
deleted file mode 100644
index 98a06cb..0000000
--- a/client/src/old/peq.js
+++ /dev/null
@@ -1,314 +0,0 @@
-import axios from 'axios'
-import { base64DecodedToString, base64Encoded, PEQAPI, setProperty, UPGRADEPEQ } from '@/api/common.js'
-import { ref } from 'vue'
-
-import {
-  AudioBean,
-  getChartOps,
-  getFilterType,
-  getSectionsMatrix,
-  visualizeResponse
-} from '@/api/audio.js'
-import * as echarts from 'echarts'
-import { i18n } from '@/main.js'
-import { ElMessageBox } from 'element-plus'
-export const getPeqData = async () => {
-  const peqItems = ref([])
-  const peqSelect = ref(0)
-  const resp = await axios.get(PEQAPI)
-  const peqEnable = ref(0)
-  const msgCount = ref(0);
-  const data = JSON.parse(base64DecodedToString(resp.data));
-
-  console.log('peq 数据=', data);
-  if(data.peq.length > 0){
-    data.peq.forEach((item, index) => {
-      item['index'] = index
-      item['filters'] = JSON.parse(item.filters)
-    })
-    peqItems.value = data.peq
-    peqSelect.value = data.peqSelect
-  }
-  peqEnable.value = data.peqEnable
-  msgCount.value = data.msgCount
-  return {
-    peqItems,
-    peqSelect,
-    peqEnable,
-    msgCount
-  }
-}
-
-export function changePeq(val, peqItems) {
-  setProperty('peqSelect', val)
-
-  const selectedItem = peqItems.find((item) => item.index === val)
-  if (selectedItem) {
-    console.log('选中了：' + selectedItem.name + ' filters = ' + selectedItem.filters)
-  }
-
-  return true
-}
-
-export const renderCharts = (peq, raw, changeParam) => {
-  const list = []
-  const fs = 48000
-  peq.filters.forEach((item) => {
-    const bean = new AudioBean(item.gain, item.fc, fs, getFilterType(item.type), false, item.q)
-    list.push(
-      getSectionsMatrix(
-        bean.getGain(),
-        bean.getFc(),
-        bean.getQ(),
-        bean.getType(),
-        bean.getBypass(),
-        bean.getFs()
-      )
-    )
-  })
-  const dataSet = visualizeResponse(list, fs)
-  const ops = getChartOps(dataSet, 20, -20, '#FFED00')
-
-  // 统一获取DOM元素
-  const chartDom = document.getElementById('main')
-
-  // 尝试获取已存在的实例
-  let myChart = echarts.getInstanceByDom(chartDom)
-
-  // 如果实例不存在，则初始化
-  if (!myChart) {
-    myChart = echarts.init(chartDom)
-  }
-
-  if (changeParam && myChart) {
-    // 只有在changeParam为true且图表存在时才获取原始数据
-    raw = myChart.getOption().series[1].data
-  }
-
-  // 不再重新初始化，直接使用现有的myChart实例
-  myChart.clear()
-
-  if (raw) {
-    ops.series.push({
-      name: 'Raw',
-      data: raw,
-      type: 'line',
-      showSymbol: false,
-      lineStyle: {
-        color: '#ffffff'
-      }
-    })
-
-    const equalized_raw = dataSet[1].map((value, index) => value + raw[index])
-    ops.series.push({
-      name: 'Equalized',
-      data: equalized_raw,
-      type: 'line',
-      showSymbol: false,
-      lineStyle: {
-        color: '#23d2fe',
-        width: 6,
-        opacity: 0.7
-      }
-    })
-  }
-
-  myChart.setOption(ops, true)
-}
-
-/**
- * 切换auto开关
- * @param peq
- */
-export const upgradeAutoPre = (peq, autoPre) => {
-  const filters = peq.filters.map((item) => ({
-    type: getFilterVal(item.type),
-    fc: item.fc,
-    gain: item.gain,
-    q: item.q
-  }))
-  const data = {
-    peqChange: {
-      name: peq.name,
-      filters: filters,
-      autoPre: autoPre ? 1 : 0,
-      preamp: peq.preamp,
-      canDel: peq.canDel
-    }
-  }
-  upgradePeq(data)
-  peq.autoPre = autoPre ? 1 : 0
-}
-
-//修改总增益
-export const upgradePreamp = (peq, preamp) => {
-  const filters = peq.filters.map((item) => ({
-    type: getFilterVal(item.type),
-    fc: item.fc,
-    gain: item.gain,
-    q: item.q
-  }))
-  const data = {
-    peqChange: {
-      name: peq.name,
-      filters: filters,
-      autoPre: peq.autoPre,
-      preamp: preamp,
-      canDel: peq.canDel
-    }
-  }
-  upgradePeq(data)
-
-  peq.preamp = preamp
-}
-
-export const upgradeEdit = (peq) => {
-  const filters = peq.filters.map((item) => ({
-    type: getFilterVal(item.type),
-    fc: item.fc,
-    gain: item.gain,
-    q: item.q
-  }))
-  const data = {
-    peqChange: {
-      name: peq.name,
-      filters: filters,
-      autoPre: peq.autoPre,
-      preamp: peq.preamp,
-      canDel: peq.canDel
-    }
-  }
-  upgradePeq(data)
-}
-
-//这里有个问题，当接口超时时，由于代码是同步，所以会一直阻塞等待
-export const upgradePeq = async (peq) => {
-  await axios.post(
-    UPGRADEPEQ,
-    { json: base64Encoded(JSON.stringify(peq)) },
-    { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }
-  )
-}
-
-export const getFilterVal = (filterName) => {
-  let result = -1
-  if (filterName === 'HIGH_PASS' || filterName === 'HPF') {
-    result = 1
-  } else if (filterName === 'BAND_PASS' || filterName === 'BPF') {
-    result = 2
-  } else if (filterName === 'NOTCH') {
-    result = 3
-  } else if (filterName === 'PEAKING' || filterName === 'PEAK') {
-    result = 4
-  } else if (filterName === 'LOW_SHELF' || filterName === 'LSHELF') {
-    result = 5
-  } else if (filterName === 'HIGH_SHELF' || filterName === 'HSHELF') {
-    result = 6
-  } else if (filterName === 'ALL_PASS' || filterName === 'APF') {
-    result = 7
-  } else if (filterName === 'LOW_PASS' || filterName === 'LPF') {
-    result = 0
-  }
-  return result
-}
-
-/**
- * 改变滤波器的属性（频率，gain，q， 类型）
- * @param currentFilter  当前选中的滤波器
- * @param val 值
- */
-export const changeFilterVal = (currentFilter, val, name, peq) => {
-  //currentFilter !== undefined  表示当前有某一个滤波器被选中，才需要更新下面的值
-  if (currentFilter !== undefined) {
-    if (name === 'freq') {
-      currentFilter.fc = val
-    } else if (name === 'gain') {
-      currentFilter.gain = val
-    } else if (name === 'q') {
-      currentFilter.q = val
-    } else if (name === 'type') {
-      currentFilter.type = val
-    }
-
-    //调用接口，更新peq
-    //需要将滤波器类型转换为数字，因为是引用类型，所以这里还需要遍历filters，声明新的filters，将值传过去，不能直接用peq.filters
-    const filters = peq.filters.map((item) => ({
-      type: getFilterVal(item.type),
-      fc: item.fc,
-      gain: item.gain,
-      q: item.q
-    }))
-
-    const data = {
-      peqChange: {
-        name: peq.name,
-        filters: filters,
-        autoPre: peq.autoPre,
-        preamp: peq.preamp,
-        canDel: peq.canDel
-      }
-    }
-    upgradePeq(data)
-    renderCharts(peq)
-  }
-}
-
-/**
- * 渲染添加耳机型号窗口数据
- */
-export const renderAddHeadPhone = () => {
-  const menus = [
-    { value: 'Brands', label: 'Brands' },
-    { value: 'Models', label: 'Models' },
-    { value: 'Target', label: 'Target' }
-  ]
-  const selectedMenu = ref('Brands')
-  const targetList = ref([
-    { name: 'Harman over-ear 2018', bassBoost: { fc: 105, q: 0.7, gain: 6 } , ear: 'over'},
-    { name: 'HMS II.3 Harman over-ear 2018', bassBoost: { fc: 105, q: 0.7, gain: 6 }, ear: 'over'},
-    { name: 'crinacle EARS + 711 Harman over-ear 2018', bassBoost: { fc: 105, q: 0.7, gain: 6 } , ear: 'over'},
-    { name: 'Harman in-ear 2019', bassBoost: { fc: 105, q: 0.7, gain: 9.5 } ,ear: 'in'},
-    { name: 'AutoEq in-ear', bassBoost: { fc: 105, q: 0.7, gain: 8 }, ear: 'in'},
-    { name: 'HMS II.3 AutoEq in-ear', bassBoost: { fc: 105, q: 0.7, gain: 8 } ,ear: 'in'},
-    { name: 'HMS II.3 Harman in-ear 2019', bassBoost: { fc: 105, q: 0.7, gain: 9.5 } ,ear: 'in'},
-    { name: 'Diffuse Field 5128 (-1 dB/oct)', bassBoost: { fc: 105, q: 0.7, gain: 0 }, ear: 'over'},
-    { name: 'LMG 5128 0.6 without bass', bassBoost: { fc: 105, q: 0.7, gain: 6 } ,ear: 'over'},
-    { name: 'JM-1 with Harman filters', bassBoost: { fc: 105, q: 0.7, gain: 6.5 } ,ear: 'all'},
-    { name: 'oratory1990 in-ear', bassBoost: { fc: 105, q: 0.7, gain: 9.5 } ,ear: 'in'},
-    { name: 'oratory1990 over-ear', bassBoost: { fc: 105, q: 0.7, gain: 6 } ,ear: 'over'},
-    { name: 'Harman over-ear 2013', bassBoost: { fc: 105, q: 0.7, gain: 6 } ,ear: 'over'},
-    { name: 'Flat', bassBoost: { fc: 105, q: 0.7, gain: 0 } ,ear: 'all'}
-  ]);
-  return { menus, selectedMenu, targetList }
-}
-
-export const getCurve = async (brand, name, target) =>{
-  const resp = await axios.get('//api.luxsin.com.cn/audio/getCurve?brand='+encodeURIComponent(brand)+'&name='+encodeURIComponent(name)+'&target='+encodeURIComponent(target));
-  const data = JSON.parse(base64DecodedToString(resp.data));
-
-  if(data.hasOwnProperty('parametric_eq')) {
-    return data.parametric_eq;
-  }
-  return null;
-};
-
-export const getModelCurve = async (brand, name) => {
-  const resp = await axios.get(
-    '//api.luxsin.com.cn/audio/modelCurve?brand=' +
-      encodeURIComponent(brand) +
-      '&name=' +
-      encodeURIComponent(name)
-  )
-  const data = JSON.parse(base64DecodedToString(resp.data))
-  console.log('型号的原始数据：', data)
-  if (data.hasOwnProperty('fr')) {
-    return data.fr
-  }
-  return null
-}
-
-export const msg = (context) => {
-  ElMessageBox.alert(context, i18n.global.t('prompt.prompt'), {
-    confirmButtonText: i18n.global.t('prompt.confirm')
-  })
-}
diff --git a/client/src/old/peq.vue b/client/src/old/peq.vue
deleted file mode 100644
index a7035bd..0000000
--- a/client/src/old/peq.vue
+++ /dev/null
@@ -1,1830 +0,0 @@
-<template>
-  <div>
-    <div class="desktop portrait" style="height: 12vh"></div>
-    <div class="peq">
-      <div class="title mobile">
-        <div class="back" @click="$router.back()">
-          <img src="@/assets/vue_controlSystem_overview/back.png" alt="" />
-        </div>
-        <div style="color: #fff" class="hpeq">HP-EQ</div>
-        <div>
-          <el-switch
-            style="--el-switch-on-color: #00fff6; --el-switch-off-color: #7d7d7d"
-            v-model="peqEnable"
-            @click="setProperty('peqEnable', peqEnable ? 1 : 0)"
-          />
-        </div>
-      </div>
-      <!-- 批量编辑 -->
-      <div class="titleText desktop">
-        <h1>HP-EQ</h1>
-        <div>
-          <el-switch
-            style="--el-switch-on-color: #00fff6; --el-switch-off-color: #7d7d7d"
-            v-model="peqEnable"
-            @click="setProperty('peqEnable', peqEnable ? 1 : 0)"
-          />
-        </div>
-      </div>
-      <div class="peqContent">
-        <div class="peqContentBox" @click="openEdit()">
-          <div>
-            <div class="imgBox">
-              <img src="@/assets/vue_controlSystem_overview/peq_icon_edit.png" alt="" />
-            </div>
-            <p>{{ $t('peq.edit') }}</p>
-          </div>
-        </div>
-        <!-- 添加耳机型号 -->
-        <div class="peqContentBox" @click="getBrands">
-          <div>
-            <div class="imgBox">
-              <img src="@/assets/vue_controlSystem_overview/peq_icon_headset_add.png" alt="" />
-            </div>
-            <p>{{ $t('peq.headset') }}</p>
-          </div>
-        </div>
-      </div>
-      <div class="titleText select">
-        <div class="selectModel">
-          <el-select
-            v-if="peqItems.length > 0"
-            v-model="peqSelect"
-            placeholder="选择耳机型号"
-            size="large"
-            style="width: 50vw"
-            @change="selectPeq"
-            :disabled="!peqEnable"
-            @click="isEnable"
-          >
-            <el-option
-              v-for="item in peqItems"
-              :key="item.index"
-              :label="item.name"
-              :value="item.index"
-            />
-          </el-select>
-          <el-text style="font-size: 24px; font-weight: 700" v-else>{{
-            $t('peq.peqNoneItem')
-          }}</el-text>
-        </div>
-        <div class="selectBox">
-          <div class="jia" @click="del(currentPeq)">
-            <img src="@/assets/vue_controlSystem_overview/peq_icon_delete.png" alt="" />
-          </div>
-
-          <div class="jia" @click="openAddPeqDialog(currentPeq, peqItems)">
-            <img src="@/assets/vue_controlSystem_overview/peq_icon_add.png" alt="" />
-          </div>
-        </div>
-      </div>
-
-      <div class="mainInfo">
-        <div id="main"></div>
-        <div class="mainCon" v-if="currentPeq">
-          <div
-            v-for="(obj, index) in currentPeq.filters"
-            :key="index"
-            :class="{ action: selected === index }"
-            @click="addFilter(index)"
-          >
-            <p>{{ obj.fc }}</p>
-            <p>{{ getFilterShortName(obj.type) }}</p>
-          </div>
-        </div>
-      </div>
-      <!-- 滤波器 -->
-      <div class="content contentTwo" style="margin-bottom: 2.60417vw">
-        <div class="contentTwoBox">
-          <p>{{ $t('peq.filters.label') }}</p>
-          <div>
-            <el-dropdown
-              trigger="click"
-              @command="dropdownMenu"
-              placement="top"
-              :disabled="!peqEnable"
-            >
-              <p class="dropdownText display">
-                {{ dropdownValue }} <img src="@/assets/controlSystem_icon/select-icon.png" alt="" />
-              </p>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="LPF">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/LPF.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>LPF</h3>
-                        <p>{{ $t('peq.filters.options[0].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[0].desc2') }}</p>
-                        <p>{{ $t('peq.filters.options[0].desc3') }}</p>
-                      </div>
-                    </div>
-                  </el-dropdown-item>
-                  <el-dropdown-item command="HPF">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/HPF.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>HPF</h3>
-                        <p>{{ $t('peq.filters.options[1].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[1].desc2') }}</p>
-                        <p>{{ $t('peq.filters.options[1].desc3') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                  <el-dropdown-item command="BPF">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/BPF.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>BPF</h3>
-                        <p>{{ $t('peq.filters.options[2].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[2].desc2') }}</p>
-                        <p>{{ $t('peq.filters.options[2].desc3') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                  <el-dropdown-item command="NOTCH">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/NOTCH.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>NOTCH</h3>
-                        <p>{{ $t('peq.filters.options[3].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[3].desc2') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                  <el-dropdown-item command="PEAK">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/PEAK.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>PEAK</h3>
-                        <p>{{ $t('peq.filters.options[4].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[4].desc2') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                  <el-dropdown-item command="LSHELF">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/LSHELF.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>LSHELF</h3>
-                        <p>{{ $t('peq.filters.options[5].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[5].desc2') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                  <el-dropdown-item command="HSHELF">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/HSHELF.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>HSHELF</h3>
-                        <p>{{ $t('peq.filters.options[6].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[6].desc2') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                  <el-dropdown-item command="APF">
-                    <div class="dropdown_content">
-                      <div class="img_box">
-                        <img src="@/assets/controlSystem_icon/APF.png" alt="" />
-                      </div>
-                      <div class="dropdown_content_right">
-                        <h3>APF</h3>
-                        <p>{{ $t('peq.filters.options[7].desc1') }}</p>
-                        <p>{{ $t('peq.filters.options[7].desc2') }}</p>
-                      </div>
-                    </div></el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
-        </div>
-        <div class="display filter">
-          <p @click="filterIniput('FREQ', '20Hz - 20000Hz', 'Hz', '1')">
-            FREQ:&nbsp;{{ elSliderfreq }}Hz
-          </p>
-          <el-slider
-            :min="20"
-            :max="20000"
-            v-model="elSliderfreq"
-            :step="1"
-            :show-tooltip="false"
-            @change="
-              changeFilterVal(currentPeq.filters[selected], elSliderfreq, 'freq', currentPeq)
-            "
-            :disabled="!peqEnable"
-            @click="isEnable"
-          />
-        </div>
-        <div class="display filter">
-          <p @click="filterIniput('GAIN', '-15dB - 15dB', 'dB', '2')">
-            GAIN:&nbsp;{{ elSlidergain }}dB
-          </p>
-          <el-slider
-            :min="-15"
-            :max="15"
-            :step="0.1"
-            v-model="elSlidergain"
-            :show-tooltip="false"
-            @change="
-              changeFilterVal(currentPeq.filters[selected], elSlidergain, 'gain', currentPeq)
-            "
-            :disabled="!peqEnable"
-            @click="isEnable"
-          />
-        </div>
-        <div class="display filter">
-          <p @click="filterIniput($t('peq.q'), '0.1dB - 10dB', 'dB', '3')">
-            {{ $t('peq.q') }}:&nbsp;{{ elSliderQzhi }}dB
-          </p>
-          <el-slider
-            :min="0.1"
-            :max="10"
-            :step="0.01"
-            v-model="elSliderQzhi"
-            :show-tooltip="false"
-            @change="changeFilterVal(currentPeq.filters[selected], elSliderQzhi, 'q', currentPeq)"
-            :disabled="!peqEnable"
-            @click="isEnable"
-          />
-        </div>
-      </div>
-
-      <div class="content contentTwo" style="margin-bottom: 2.60417vw" v-if="currentPeq">
-        <div class="contentTwoBox">
-          <p>{{ $t('peq.preamp') }}：{{ preamp }}dB</p>
-          <div>
-            <span>AUTO &nbsp;</span>
-            <el-switch
-              style="--el-switch-on-color: #00fff6; --el-switch-off-color: #7d7d7d"
-              v-model="autoPre"
-              @change="upgradeAutoPre(currentPeq, autoPre)"
-              :disabled="!peqEnable"
-              @click="isEnable"
-            />
-          </div>
-        </div>
-        <div>
-          <el-slider
-            v-model="preamp"
-            :step="0.1"
-            :show-tooltip="false"
-            :min="-15"
-            :max="15"
-            :disabled="autoPre || !peqEnable"
-            @change="upgradePreamp(currentPeq, preamp)"
-            @click="isEnable"
-          />
-        </div>
-      </div>
-      <div class="desktop" style="height: 150px"></div>
-    </div>
-    <!-- 弹出层 -->
-    <el-drawer
-      v-model="drawer"
-      direction="btt"
-      title="I am the title"
-      :with-header="false"
-      size="60%"
-    >
-      <div v-loading="loading" style="height: 60vh">
-        <div class="display" style="width: 100%">
-          <el-segmented
-            style="width: 100%; margin-bottom: 10px"
-            v-model="selectedMenu"
-            :options="menus"
-            size="default"
-            @change="changeModels"
-          />
-        </div>
-        <el-input @input="handleInput" v-model="search" clearable @clear="clearSearch">
-          <template #prefix>
-            <el-icon><Search /></el-icon>
-          </template>
-        </el-input>
-
-        <div class="drawerContent2 display" v-if="selectedMenu === 'Target'">
-          <div class="btnInfo" @click="ConfirmTrue" :style="{ color: loadBtnColor }">
-            {{ $t('peq.loadDeviceBtn') }}
-          </div>
-          <div class="selectInfo">
-            <el-scrollbar height="100%">
-              <p
-                v-for="(item, index) in targetList"
-                :key="index"
-                :class="{ selectInfoActive: targetIndex === index }"
-                @click="selectMenu(index)"
-              >
-                {{ item.name }}
-              </p>
-            </el-scrollbar>
-          </div>
-        </div>
-
-        <!-- 最左边的数据 -->
-        <div
-          class="drawerContent"
-          v-if="!searchContent && selectedMenu !== 'Target'"
-          :key="searchContent + '-' + selectedMenu"
-        >
-          <div class="drawerContent_left">
-            <el-scrollbar height="100%">
-              <p @click="getModels(item.name)" v-for="(item, index) in brands" :key="index">
-                {{ item.name }}
-              </p>
-            </el-scrollbar>
-          </div>
-          <div class="drawerContent_right">
-            <el-scrollbar height="100%">
-              <p @click="clickModels(item)" v-for="(item, index) in models" :key="index">
-                {{ item.name }}
-              </p>
-            </el-scrollbar>
-          </div>
-        </div>
-
-        <div class="drawerContent" v-if="searchContent && selectedMenu !== 'Target'">
-          <div>
-            <el-scrollbar height="100%">
-              <p @click="clickModels(it)" v-for="(it, index) in searchModelList" :key="index">
-                {{ it.brand_name }} {{ it.name }}
-              </p>
-            </el-scrollbar>
-          </div>
-        </div>
-      </div>
-    </el-drawer>
-    <!-- 批量编辑弹出层 -->
-    <div class="peqDialog">
-      <el-dialog
-        lock-scroll
-        v-model="dialogVisible"
-        :title="$t('peq.Standard')"
-        @close="handleClose"
-      >
-        <div class="dialogContent">
-          <el-input
-            v-model="batchEdit"
-            style="width: 100%"
-            :autosize="{ minRows: 2, maxRows: 4 }"
-            type="textarea"
-          />
-        </div>
-        <template #footer>
-          <div class="dialog-footer">
-            <el-button type="primary" @click="editOk()">{{ $t('prompt.confirm') }}</el-button>
-            <el-button @click="dialogVisible = false"> {{ $t('prompt.cancel') }} </el-button>
-          </div>
-        </template>
-      </el-dialog>
-    </div>
-    <!-- 输出弹出层 -->
-    <div class="inputDialog">
-      <el-dialog v-model="centerDialogVisible" @open="handleOpen" width="400" align-center>
-        <div class="inputInfo">
-          <h3>{{ dialogTitle }}</h3>
-          <el-input ref="dialogInput" :autofocus="true" v-model="inputContent">
-            <template #append>{{ dialogUnit }}</template>
-          </el-input>
-          <p>{{ $t('prompt.range') }}：{{ dialogScope }}</p>
-          <div class="btnBox">
-            <el-button @click="dialogCancel">{{ $t('prompt.EnableEffectN') }}</el-button>
-            <el-button type="primary" @click="dialogConfirm">{{
-              $t('prompt.EnableEffectY')
-            }}</el-button>
-          </div>
-        </div>
-      </el-dialog>
-    </div>
-
-    <!-- 加号弹出层   -->
-    <div>
-      <el-dialog
-        v-model="addPeqDialogVisible"
-        width="400"
-        align-center
-        :title="t('prompt.SavePreset')"
-      >
-        <div class="addPeqDialog">
-          <el-form>
-            <el-form-item v-if="addDialogShowOpsOne">
-              <el-col :span="2">
-                <el-radio v-model="addPeqRadio" value="1" checked></el-radio>
-              </el-col>
-              <el-col :span="20">
-                <el-input v-model="addPeqName" />
-              </el-col>
-            </el-form-item>
-
-            <el-form-item>
-              <el-col :span="2">
-                <el-radio v-model="addPeqRadio" value="2"></el-radio>
-              </el-col>
-              <el-col :span="20">
-                <el-input v-model="addPeqFlatName" />
-              </el-col>
-            </el-form-item>
-
-            <el-form-item>
-              <el-col :span="5"></el-col>
-              <el-col :span="5">
-                <el-button color="#BFBFBF" round @click="addCopyPeq(false, currentPeq, peqItems)">{{
-                  t('prompt.cancel')
-                }}</el-button>
-              </el-col>
-              <el-col :span="5"></el-col>
-              <el-col :span="5">
-                <el-button color="#00FFF6" round @click="addCopyPeq(true, currentPeq, peqItems)">{{
-                  t('prompt.save')
-                }}</el-button>
-              </el-col>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-dialog>
-    </div>
-    <div class="circle-container" @click="router.push('/aiHpeq')">
-      <div class="big-circle">
-        <span class="text">AI</span>
-
-        <!-- 小圆的轨道（只旋转这个，不转大圆） -->
-        <div class="dot-orbit">
-          <div class="small-dot"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { nextTick, onMounted, ref, onUnmounted } from 'vue'
-import axios from 'axios'
-import { Search } from '@element-plus/icons-vue'
-import {
-  changeFilterVal,
-  changePeq,
-  getCurve,
-  getFilterVal,
-  getModelCurve,
-  getPeqData,
-  msg,
-  renderAddHeadPhone,
-  renderCharts,
-  upgradeAutoPre,
-  upgradeEdit,
-  upgradePeq,
-  upgradePreamp
-} from '@/api/peq.js'
-import { getFilterShortName } from '@/api/audio.js'
-import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import { base64DecodedToString, reqMsgCount, reqSyncPeq, setProperty } from '@/api/common.js'
-import { useI18n } from 'vue-i18n'
-import router from '@/router'
-
-const addPeqDialogVisible = ref(false)
-const addPeqRadio = ref('1')
-const addPeqName = ref('')
-const addPeqFlatName = ref('Flat')
-
-const openAddPeqDialog = (currentPeq, peqItems) => {
-  if (peqEnable.value) {
-    if (peqItems.length === 0) {
-      addPeqName.value = 'Flat'
-      addPeqFlatName.value = 'Flat'
-      addDialogShowOpsOne.value = false
-      addPeqRadio.value = '2'
-    } else {
-      addDialogShowOpsOne.value = true
-      addPeqRadio.value = '1'
-      let counter = 0
-      let flat_count = 0
-      const currentName = currentPeq.name.split('_')[0]
-      peqItems.forEach((item) => {
-        const name = item.name.split('_')[0]
-        if (currentName === name) {
-          counter += 1
-        }
-        if (name === 'Flat') {
-          flat_count += 1
-        }
-      })
-      addPeqName.value = currentName + '_' + counter
-      addPeqFlatName.value = flat_count > 0 ? 'Flat_' + flat_count : 'Flat'
-    }
-
-    addPeqDialogVisible.value = true
-  } else {
-    msg(t('prompt.HP-EQ'))
-  }
-}
-
-const addCopyPeq = async (open, currentPeq, peqItems) => {
-  if (open) {
-    if (addPeqRadio.value === '1') {
-      const filters = currentPeq.filters.map((item) => ({
-        type: getFilterVal(item.type),
-        fc: parseFloat(item.fc.toFixed(2)),
-        gain: parseFloat(item.gain.toFixed(2)),
-        q: parseFloat(item.q.toFixed(2))
-      }))
-      const postPeq = {
-        name: addPeqName.value,
-        filters: filters,
-        preamp: parseFloat(currentPeq.preamp.toFixed(2)),
-        autoPre: 0,
-        canDel: 1,
-        brand: currentPeq.brand,
-        model: currentPeq.model
-      }
-
-      await upgradePeq({ peqChange: postPeq })
-      await renderPeqData()
-    } else if (addPeqRadio.value === '2') {
-      const flatPeq = {
-        name: addPeqFlatName.value,
-        preamp: 0,
-        canDel: 1,
-        autoPre: 0,
-        filters: [
-          { type: 4, fc: 80, gain: 0, q: 0.1 },
-          { type: 4, fc: 150, gain: 0, q: 0.1 },
-          { type: 4, fc: 350, gain: 0, q: 0.1 },
-          { type: 4, fc: 750, gain: 0, q: 0.1 },
-          { type: 4, fc: 1500, gain: 0, q: 0.1 },
-          { type: 4, fc: 3000, gain: 0, q: 0.1 },
-          { type: 4, fc: 6000, gain: 0, q: 0.1 },
-          { type: 4, fc: 10000, gain: 0, q: 0.1 },
-          { type: 4, fc: 14000, gain: 0, q: 0.1 },
-          { type: 4, fc: 18000, gain: 0, q: 0.1 }
-        ]
-      }
-      await upgradePeq({ peqChange: flatPeq })
-      await renderPeqData()
-    }
-  }
-
-  addPeqDialogVisible.value = false
-}
-
-const loading = ref(false)
-const { t } = useI18n()
-const drawer = ref(false)
-const peqItems = ref([])
-const peqSelect = ref(0)
-const peqEnable = ref(0)
-const msgCount = ref(0)
-const currentPeq = ref(null)
-const preamp = ref(0)
-const autoPre = ref(false)
-const search = ref('')
-// 批量选择器
-const dialogVisible = ref(false)
-const handleClose = (el) => {}
-const { menus, selectedMenu, targetList } = renderAddHeadPhone()
-const loadBtnColor = ref('#fff')
-
-const searchContent = ref(false)
-// 选中状态
-const selected = ref(null)
-const addFilter = (index) => {
-  if (peqEnable.value) {
-    selected.value = index // 更新选中的索引
-    //当前选中的filter
-    const filter = currentPeq.value['filters'][selected.value]
-    dropdownValue.value = getFilterShortName(filter.type)
-    elSliderfreq.value = filter.fc
-    elSlidergain.value = filter.gain
-    elSliderQzhi.value = filter.q
-  } else {
-    isEnable()
-  }
-}
-
-/**
- * 渲染peq下拉菜单，和10个滤波器
- * @returns {Promise<void>}
- */
-const renderPeqData = async () => {
-  const {
-    peqItems: items,
-    peqSelect: index,
-    peqEnable: enable,
-    msgCount: count
-  } = await getPeqData()
-  peqItems.value = items.value
-  peqSelect.value = index.value
-  peqEnable.value = enable.value === 1
-  msgCount.value = count
-
-  if (peqItems.value !== undefined && peqItems.value.length > 0) {
-    currentPeq.value = peqItems.value[peqSelect.value]
-    let raw = null
-    if (currentPeq.value.brand && currentPeq.value.model) {
-      //获取原始曲线
-      const modelCurve = await getModelCurve(currentPeq.value.brand, currentPeq.value.model)
-      console.log('modelCurve = ', modelCurve)
-      if (null !== modelCurve && 'raw' in modelCurve) {
-        raw = modelCurve.raw
-      }
-    }
-    preamp.value = parseFloat(currentPeq.value.preamp.toFixed(2))
-    autoPre.value = currentPeq.value.autoPre === 1
-
-    //渲染图表
-    renderCharts(currentPeq.value, raw, false)
-  }
-}
-
-//切换peq的时候要调用接口切换，并且要更新图表
-const selectPeq = async (val) => {
-  if (changePeq(val, peqItems.value)) {
-    currentPeq.value = peqItems.value[val]
-    preamp.value = parseFloat(currentPeq.value.preamp.toFixed(2))
-    autoPre.value = currentPeq.value.autoPre === 1
-    elSliderfreq.value = 20
-    elSlidergain.value = -15
-    elSliderQzhi.value = 0.1
-    selected.value = null
-    let raw = null
-    if (currentPeq.value.brand && currentPeq.value.model) {
-      //获取原始曲线
-      const modelCurve = await getModelCurve(currentPeq.value.brand, currentPeq.value.model)
-      console.log('modelCurve = ', modelCurve)
-      if (null !== modelCurve && 'raw' in modelCurve) {
-        raw = modelCurve.raw
-      }
-    }
-
-    renderCharts(currentPeq.value, raw, false)
-  }
-}
-const intervalId = ref(null)
-
-onMounted(async () => {
-  await renderPeqData()
-
-  isEnable()
-
-  if (peqEnable.value && peqItems.value.length <= 0) {
-    ElMessageBox.confirm(t('prompt.NotAdded'), {
-      confirmButtonText: t('prompt.EnableEffectY'),
-      cancelButtonText: t('prompt.EnableEffectN'),
-      type: 'info'
-    }).then(getBrands)
-  }
-
-  intervalId.value = setInterval(getDataVersion, 3000)
-})
-
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-    intervalId.value = null
-  }
-})
-
-const getDataVersion = () => {
-  reqMsgCount()
-    .then((ver) => {
-      if (ver !== msgCount.value) {
-        reqSyncPeq().then((data) => {
-          peqSelect.value = data.peqSelect
-          peqEnable.value = data.peqEnable === 1
-          msgCount.value = data.msgCount
-          console.log('版本已更新:', msgCount.value)
-        })
-      }
-    })
-    .catch((err) => {})
-}
-
-// 添加耳机型号
-const brands = ref([])
-const models = ref([])
-const currentTarget = ref(null)
-const selectedBrand = ref(null)
-const searchModelList = ref([])
-
-const getBrands = () => {
-  if (peqEnable.value) {
-    drawer.value = true
-    loading.value = true
-    axios.get('//api.luxsin.com.cn/audio/getBrand').then((response) => {
-      brands.value = JSON.parse(base64DecodedToString(response.data))
-      loading.value = false
-    })
-
-    //每次重新打开耳机窗口时，要把当前选中的型号和品牌清空
-    currentTarget.value = null
-    targetIndex.value = null
-    selectedBrand.value = null
-  } else {
-    isEnable()
-  }
-}
-const getModels = (brandName) => {
-  selectedMenu.value = 'Models'
-  axios
-    .get('//api.luxsin.com.cn/audio/getModel?brandName=' + encodeURIComponent(brandName))
-    .then((response) => {
-      models.value = JSON.parse(base64DecodedToString(response.data))
-    })
-}
-const clickModels = (model) => {
-  selectedMenu.value = 'Target'
-  selectedBrand.value = {
-    brand: model.brand_name,
-    model: model.name,
-    rig: model.rig,
-    source: model.source,
-    form: model.form
-  }
-
-  targetList.value = [
-    { name: 'Harman over-ear 2018', bassBoost: { fc: 105, q: 0.7, gain: 6 }, ear: 'over' },
-    { name: 'HMS II.3 Harman over-ear 2018', bassBoost: { fc: 105, q: 0.7, gain: 6 }, ear: 'over' },
-    {
-      name: 'crinacle EARS + 711 Harman over-ear 2018',
-      bassBoost: { fc: 105, q: 0.7, gain: 6 },
-      ear: 'over'
-    },
-    { name: 'Harman in-ear 2019', bassBoost: { fc: 105, q: 0.7, gain: 9.5 }, ear: 'in' },
-    { name: 'AutoEq in-ear', bassBoost: { fc: 105, q: 0.7, gain: 8 }, ear: 'in' },
-    { name: 'HMS II.3 AutoEq in-ear', bassBoost: { fc: 105, q: 0.7, gain: 8 }, ear: 'in' },
-    { name: 'HMS II.3 Harman in-ear 2019', bassBoost: { fc: 105, q: 0.7, gain: 9.5 }, ear: 'in' },
-    {
-      name: 'Diffuse Field 5128 (-1 dB/oct)',
-      bassBoost: { fc: 105, q: 0.7, gain: 0 },
-      ear: 'over'
-    },
-    { name: 'LMG 5128 0.6 without bass', bassBoost: { fc: 105, q: 0.7, gain: 6 }, ear: 'over' },
-    { name: 'JM-1 with Harman filters', bassBoost: { fc: 105, q: 0.7, gain: 6.5 }, ear: 'all' },
-    { name: 'oratory1990 in-ear', bassBoost: { fc: 105, q: 0.7, gain: 9.5 }, ear: 'in' },
-    { name: 'oratory1990 over-ear', bassBoost: { fc: 105, q: 0.7, gain: 6 }, ear: 'over' },
-    { name: 'Harman over-ear 2013', bassBoost: { fc: 105, q: 0.7, gain: 6 }, ear: 'over' },
-    { name: 'Flat', bassBoost: { fc: 105, q: 0.7, gain: 0 }, ear: 'all' }
-  ]
-  if (model.form === 'in-ear') {
-    targetList.value = targetList.value.filter((item) => item.ear === 'in' || item.ear === 'all')
-  } else if (model.form === 'over-ear') {
-    targetList.value = targetList.value.filter((item) => item.ear === 'over' || item.ear === 'all')
-  }
-}
-const ConfirmTrue = () => {
-  if (selectedBrand.value && currentTarget.value) {
-    drawer.value = false
-    selectedMenu.value = 'Brands'
-    //将新数据添加到设备
-    getEqualize()
-  } else {
-    ElMessage({
-      message: t('prompt.selectedYet'),
-      type: 'warning',
-      duration: 1500
-    })
-  }
-}
-
-/**
- * 封装数据，请求接口得到该型号的eq数据
- * @returns {Promise<void>}
- */
-const getEqualize = async () => {
-  const loading = ElLoading.service({
-    lock: true,
-    text: '加载中...',
-    background: 'rgba(0, 0, 0, 0.7)'
-  })
-
-  const name = selectedBrand.value.brand + ' ' + selectedBrand.value.model
-
-  const result = await getCurve(
-    selectedBrand.value.brand,
-    selectedBrand.value.model,
-    currentTarget.value.name
-  )
-
-  if (result) {
-    const filters = result.filters.map((item) => ({
-      type: getFilterVal(item.type),
-      fc: parseFloat(item.fc.toFixed(2)),
-      gain: parseFloat(item.gain.toFixed(2)),
-      q: parseFloat(item.q.toFixed(2))
-    }))
-    const postPeq = {
-      name: name,
-      brand: selectedBrand.value.brand,
-      model: selectedBrand.value.model,
-      target: currentTarget.value.name,
-      form: selectedBrand.value.form,
-      filters: filters,
-      preamp: parseFloat(result.preamp.toFixed(2)),
-      autoPre: 0,
-      canDel: 1
-    }
-
-    await upgradePeq({ peqChange: postPeq })
-    await renderPeqData()
-  }
-
-  //将请求到的数据，添加到设备
-  loading.close()
-}
-
-// 滤波器
-const elSliderfreq = ref(20)
-const elSlidergain = ref(-15)
-const elSliderQzhi = ref(0.1)
-const dropdownValue = ref('LPF')
-const dropdownMenu = (value) => {
-  console.log(value)
-  dropdownValue.value = value
-  changeFilterVal(
-    currentPeq.value.filters[selected.value],
-    dropdownValue.value,
-    'type',
-    currentPeq.value
-  )
-}
-
-//打开批量编辑窗口
-const batchEdit = ref('')
-const openEdit = () => {
-  if (peqEnable.value) {
-    dialogVisible.value = true
-    let text = `Preamp:${currentPeq.value.preamp.toFixed(2)}dB\n`
-    text += currentPeq.value.filters
-      .map(
-        (item, index) =>
-          `Filter ${index + 1}: ON ${getFilterShortName(item.type)} Fc ${item.fc} Hz Gain ${item.gain} dB Q ${item.q}`
-      )
-      .join('\n')
-    batchEdit.value = text
-  } else {
-    isEnable()
-  }
-}
-
-//批量编辑窗口点击确定按钮
-const editOk = () => {
-  const datas = batchEdit.value.split('\n')
-  let pass = true
-  for (let index = 0; index < datas.length; index++) {
-    const item = datas[index]
-    if (index === 0) {
-      currentPeq.value.preamp = parseFloat(item.split('Preamp:')[1].split('dB')[0].trim())
-      preamp.value = currentPeq.value.preamp
-    } else {
-      const filter = currentPeq.value.filters[index - 1]
-      const matches = item.match(
-        /ON (.+?) Fc (\d+(?:\.\d+)?) Hz Gain (-?\d+(?:\.\d+)?) dB Q (\d+(?:\.\d+)?)/
-      )
-      if (matches) {
-        const [, type, freq, gain, q] = matches
-        filter.fc = parseFloat(freq)
-        filter.gain = parseFloat(gain)
-        filter.q = parseFloat(q)
-
-        if (getFilterVal(type) >= 0) {
-          filter.type = type
-        } else {
-          console.log('滤波器类型不符合')
-          pass = false
-          break
-        }
-      } else {
-        console.log('正则匹配不符合', item)
-        pass = false
-        break
-      }
-    }
-  }
-
-  if (pass) {
-    upgradeEdit(currentPeq.value)
-  } else {
-    msg(t('prompt.invalidData'))
-  }
-  //
-  dialogVisible.value = false
-}
-
-const changeModels = (val) => {
-  console.log(val)
-}
-
-const targetIndex = ref(null)
-const selectMenu = (index) => {
-  targetIndex.value = index
-  currentTarget.value = targetList.value[index]
-  loadBtnColor.value = '#00fff6'
-}
-// 点击搜索栏叉号时
-const clearSearch = () => {
-  setTimeout(() => {
-    searchContent.value = false
-  }, 300)
-}
-// 输入框输入东西时
-const handleInput = (val) => {
-  searchContent.value = true
-  if (val === '') {
-    searchContent.value = false
-  }
-  axios.get('//api.luxsin.com.cn/audio/modelList?key=' + val + '&count=1000').then((response) => {
-    searchModelList.value = JSON.parse(base64DecodedToString(response.data))
-  })
-}
-
-const del = async (currentPeq) => {
-  if (peqEnable.value) {
-    if (currentPeq.canDel === 1) {
-      ElMessageBox.confirm(t('prompt.deleteConfirm') + currentPeq.name, t('prompt.prompt'), {
-        confirmButtonText: t('prompt.confirm'),
-        cancelButtonText: t('prompt.cancel'),
-        type: 'info'
-      })
-        .then(async () => {
-          await upgradePeq({ peqRemove: [currentPeq.name] })
-          await renderPeqData()
-        })
-        .catch(() => {
-          //取消，无需做什么操作
-        })
-    } else {
-      msg(t('prompt.noDelete'))
-    }
-  } else {
-    msg(t('prompt.HP-EQ'))
-  }
-}
-
-const add = async (currentPeq, peqItems) => {
-  if (peqEnable.value) {
-    let counter = 0
-    const currentName = currentPeq.name.split('_')[0]
-    peqItems.forEach((item) => {
-      const name = item.name.split('_')[0]
-      if (currentName === name) {
-        counter += 1
-      }
-    })
-
-    ElMessageBox.prompt('', t('prompt.SavePreset'), {
-      confirmButtonText: t('prompt.save'),
-      cancelButtonText: t('prompt.cancel'),
-      inputValue: currentName + '_' + counter
-    })
-      .then(async ({ value }) => {
-        const filters = currentPeq.filters.map((item) => ({
-          type: getFilterVal(item.type),
-          fc: parseFloat(item.fc.toFixed(2)),
-          gain: parseFloat(item.gain.toFixed(2)),
-          q: parseFloat(item.q.toFixed(2))
-        }))
-        const postPeq = {
-          name: value,
-          filters: filters,
-          preamp: parseFloat(currentPeq.preamp.toFixed(2)),
-          autoPre: 0,
-          canDel: 1
-        }
-
-        await upgradePeq({ peqChange: postPeq })
-        await renderPeqData()
-      })
-      .catch(() => {
-        console.log('取消')
-      })
-  } else {
-    msg(t('prompt.HP-EQ'))
-  }
-}
-// dialog输入框
-const centerDialogVisible = ref(false)
-const inputContent = ref('')
-const dialogTitle = ref('')
-const dialogScope = ref('')
-const dialogUnit = ref('')
-const dialogSerial = ref('')
-const filterIniput = (title, scope, unit, serial) => {
-  if (!peqEnable.value) {
-    ElMessageBox.confirm(t('prompt.HP-EQ'), {
-      confirmButtonText: t('prompt.EnableEffectY'),
-      cancelButtonText: t('prompt.EnableEffectN'),
-      type: 'info'
-    }).then(() => {
-      setProperty('peqEnable', 1)
-      peqEnable.value = true
-    })
-  } else {
-    dialogTitle.value = title
-    dialogScope.value = scope
-    dialogUnit.value = unit
-    dialogSerial.value = serial
-    centerDialogVisible.value = true
-  }
-}
-// dialog点击确定时
-const dialogConfirm = () => {
-  centerDialogVisible.value = false
-  if (inputContent.value) {
-    switch (dialogSerial.value) {
-      case '1':
-        elSliderfreq.value = parseFloat(inputContent.value)
-        changeFilterVal(
-          currentPeq.value.filters[selected.value],
-          elSliderfreq.value,
-          'freq',
-          currentPeq.value
-        )
-        break
-      case '2':
-        elSlidergain.value = parseFloat(inputContent.value)
-        changeFilterVal(
-          currentPeq.value.filters[selected.value],
-          elSlidergain.value,
-          'gain',
-          currentPeq.value
-        )
-        break
-      case '3':
-        elSliderQzhi.value = parseFloat(inputContent.value)
-        changeFilterVal(
-          currentPeq.value.filters[selected.value],
-          elSliderQzhi.value,
-          'q',
-          currentPeq.value
-        )
-        break
-    }
-  }
-  inputContent.value = ''
-}
-const dialogCancel = () => {
-  centerDialogVisible.value = false
-  inputContent.value = ''
-}
-// 自动获取焦点
-const dialogInput = ref(null)
-const handleOpen = () => {
-  nextTick(() => {
-    setTimeout(() => {
-      const inputElement = dialogInput.value?.$el?.querySelector('input')
-      if (inputElement) {
-        inputElement.focus()
-      }
-    }, 300)
-  })
-}
-
-const isEnable = (el) => {
-  if (!peqEnable.value) {
-    ElMessageBox.confirm(t('prompt.HP-EQ'), {
-      confirmButtonText: t('prompt.EnableEffectY'),
-      cancelButtonText: t('prompt.EnableEffectN'),
-      type: 'info'
-    }).then(() => {
-      if (peqItems.value.length <= 0) {
-        ElMessageBox.confirm(t('prompt.NotAdded'), {
-          confirmButtonText: t('prompt.EnableEffectY'),
-          cancelButtonText: t('prompt.EnableEffectN'),
-          type: 'info'
-        }).then(() => {
-          getBrands()
-        })
-      }
-      setProperty('peqEnable', 1)
-      peqEnable.value = true
-    })
-  }
-}
-
-const addDialogShowOpsOne = ref(true)
-</script>
-
-<style>
-::selection {
-  background-color: #fff;
-  color: #000;
-}
-::-moz-selection {
-  background-color: #fff;
-
-  color: #000;
-}
-::-webkit-selection {
-  background-color: #fff;
-  color: #000;
-}
-
-/* 批量选择弹出层样式 */
-.peqDialog .el-overlay {
-  z-index: 9999999 !important; /* 确保遮罩层在最上层 */
-}
-.peqDialog .el-dialog {
-  padding: 0;
-  width: 90%;
-}
-.peqDialog .el-dialog__header {
-  padding: 10px 10px;
-  background: linear-gradient(45deg, #444444, #232323);
-}
-.peqDialog .el-dialog__title {
-  color: #fff;
-}
-.peqDialog .el-dialog__footer {
-  padding: 0;
-}
-.dialog-footer {
-  text-align: center;
-  padding: 10px 0;
-  background: linear-gradient(45deg, #444444, #232323);
-}
-.dialogContent {
-  height: 60vh;
-  padding: 10px 10px;
-  background-color: #000;
-}
-.el-textarea {
-  width: 100%;
-  height: 100%;
-}
-.el-textarea__inner {
-  height: 100% !important;
-  background-color: #000;
-  color: #fff;
-  box-shadow: none;
-}
-
-.el-segmented__item-selected {
-  background-color: #575757;
-}
-@media (max-width: 767px) {
-  /* 手机样式 */
-  .el-textarea__inner {
-    font-size: 12px;
-  }
-}
-</style>
-<style scoped>
-* {
-  box-sizing: border-box;
-  /* color: #fff; */
-}
-
-p,
-span,
-h1 {
-  color: #fff;
-}
-img {
-  width: 100%;
-  height: 100%;
-}
-textarea {
-  width: 100%;
-  background-color: #000;
-  border: none;
-}
-/* 重置textarea的 focus-visible 样式 */
-textarea:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-.title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  margin-top: 30px;
-}
-
-.action {
-  background-color: #00fff6 !important;
-}
-.action p {
-  color: #000 !important;
-}
-h1 {
-  font-weight: normal;
-}
-.back {
-  width: 20px;
-  height: 16px;
-}
-.peq {
-  padding: 0 30px;
-}
-.hpeq {
-  position: absolute;
-
-  width: 100%;
-  text-align: center;
-  pointer-events: none;
-}
-.titleText {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.peqContent {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-.peqContentBox {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 344px;
-  height: 160px;
-  background: linear-gradient(45deg, #444444, #232323);
-  border-radius: 10px 10px 10px 10px;
-}
-.mainInfo {
-  margin-top: 10px;
-  background: linear-gradient(45deg, #444444, #232323);
-  border-radius: 10px 10px 10px 10px;
-}
-
-:deep(.el-select__selected-item) span {
-  font-weight: 700;
-  font-size: 24px;
-}
-
-#main {
-  height: 350px;
-}
-.mainCon {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-  width: 100%;
-  height: 150px;
-}
-.mainCon div {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 18%;
-  height: 40%;
-  background-color: #525252;
-  border-radius: 10px 10px 10px 10px;
-  font-size: 12px;
-}
-.peqContentBox > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.imgBox {
-  width: 50px;
-  height: 50px;
-  margin-bottom: 20px;
-}
-.select {
-  padding: 20px 0;
-}
-.select h1 {
-  font-size: 22px;
-}
-.select .imgBox2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-left: 10px;
-}
-.selectBox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.jia {
-  margin-left: 10px;
-  width: 44px;
-  height: 33px;
-  border: 1px solid rgba(255, 255, 255, 0.65);
-  border-radius: 10px;
-  overflow: hidden;
-}
-.content {
-  margin-top: 20px;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  width: 100%;
-  background: linear-gradient(45deg, #444444, #232323);
-  border-radius: 10px 10px 10px 10px;
-  padding: 20px 20px;
-}
-.contentTwo {
-  flex-direction: column;
-}
-.contentTwoBox {
-  display: flex;
-  justify-content: space-between;
-}
-:deep(.el-slider__bar) {
-  background-color: #00fff6;
-}
-:deep(.el-slider__runway) {
-  background-color: #575757;
-}
-:deep(.el-select__placeholder) {
-  color: #fff;
-}
-:deep(.el-select__wrapper) {
-  background-color: transparent;
-  box-shadow: none;
-  padding: 0;
-}
-/* 下拉框的图标样式 */
-:deep(.el-select__icon) {
-  background: transparent url(@/assets/vue_controlSystem_overview/effect_icon_arrow_down.png)
-    no-repeat;
-  background-size: cover;
-}
-:deep(.el-select__icon svg) {
-  display: none;
-}
-/* 分段控制器 */
-:deep(.el-segmented__item) {
-  border-radius: 0;
-  /* background: linear-gradient(45deg, #444444, #232323); */
-}
-:deep(.el-segmented) {
-  background: linear-gradient(45deg, #444444, #232323);
-}
-.drawerContent {
-  display: flex;
-  width: 100%;
-  height: 84%;
-  margin-top: 2vw;
-}
-
-.drawerContent_left {
-  width: 35%;
-
-  overflow: hidden;
-}
-
-.drawerContent_right {
-  width: 65%;
-
-  overflow: hidden; /* 防止右侧内容区滚动 */
-}
-
-.drawerContent p {
-  padding: 1vw 0;
-  color: #000;
-  padding-left: 1vw;
-}
-
-.drawerContent p:hover {
-  background-color: #575757;
-  color: #fff;
-}
-
-.filter {
-  flex-direction: column;
-  /* margin-top: 20px; */
-}
-.filter p {
-  padding-top: 20px;
-  padding-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-.dropdown_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.drawerContent2 {
-  margin-top: 4vw;
-  flex-direction: column;
-}
-.drawerContent2 .btnInfo {
-  width: 80%;
-  height: 6vw;
-  background-color: #575757;
-  text-align: center;
-  line-height: 6vw;
-  border-radius: 5vw;
-}
-.selectInfo {
-  margin-top: 20px;
-  width: 100%;
-}
-.selectInfo p {
-  color: #000;
-  text-align: center;
-  padding: 10px 0;
-  border-bottom: #232323 solid 1px;
-}
-
-.selectInfoActive {
-  background-color: #575757;
-  color: #fff !important;
-}
-.img_box {
-  width: 8vw;
-  padding: 0 1vw;
-}
-.img_box img {
-  width: 100%;
-  height: auto;
-}
-.dropdownText img {
-  margin-left: 1vw;
-  width: 1.5vw;
-  height: auto;
-}
-.dropdown_content_right {
-  text-align: left;
-}
-.dropdown_content_right p {
-  font-size: 12px;
-  color: #000;
-  line-height: 14px;
-}
-.dropdownText:focus-visible {
-  outline: none; /* 或者其他你想要的样式，比如 box-shadow: none; */
-}
-/* 输出框dialog的样式  */
-.inputInfo h3 {
-  color: #fff;
-  text-align: center;
-  font-weight: normal;
-  margin-bottom: 20px;
-}
-.inputInfo :deep(.el-input-group) {
-  border: #fff 1px solid;
-  border-radius: 5px;
-}
-.inputInfo :deep(.el-input__wrapper) {
-  height: 5vw;
-  background-color: transparent;
-  box-shadow: none;
-}
-.inputInfo :deep(.el-input__inner) {
-  color: #fff;
-}
-.inputInfo :deep(.el-input-group__append) {
-  background-color: transparent;
-  box-shadow: none;
-}
-.inputInfo :deep(.el-input-group__append) {
-  color: #fff;
-}
-.inputInfo p {
-  margin-top: 10px;
-  margin-bottom: 60px;
-}
-.btnBox {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.btnBox :deep(.el-button) {
-  border-radius: 20px;
-  padding-left: 20px;
-  padding-right: 20px;
-  background-color: #a0a0a1;
-  color: #000;
-  border: none;
-}
-.btnBox :deep(.el-button:nth-child(2)) {
-  background-color: #fff;
-}
-
-/* 旋转动画 */
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-/* px-to-viewport-ignore-next */
-.circle-container::before {
-  content: '';
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
-  background: var(--gradient-color);
-  border-radius: 50%;
-  z-index: 1;
-  animation: rotate-border 3s linear infinite;
-}
-@media (min-width: 768px) {
-  /* 电脑样式 */
-  .mobile {
-    display: none !important;
-  }
-
-  .circle-container {
-    position: fixed;
-    top: 62%;
-    right: 6px;
-    --gradient-color: linear-gradient(115deg, #4fcf70, #fad648, #a99eb5, #12bcfe, #44ce7b);
-
-    width: 80px; /* 控制圆的大小 */
-    height: 80px;
-
-    border-radius: 50%; /* 设为圆形 */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    /* 遮罩层，只显示边框 */
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: #05fff6;
-      /* background-color: #000; */
-      border-radius: 50%;
-      z-index: 2;
-    }
-  }
-
-  /* 内部的大圆和文字 */
-  .big-circle {
-    width: calc(100% - 6px); /* 减去边框宽度 */
-    height: calc(100% - 6px);
-    border-radius: 50%;
-    background: #05fff6;
-    /* background-color: #000; */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 3; /* 确保在最上层 */
-
-    .text {
-      /* color: white; */
-      color: #000;
-      font-size: 28px;
-      font-weight: bold;
-      text-align: center;
-      z-index: 4;
-    }
-  }
-
-  /* 旋转动画 */
-  @keyframes rotate-border {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
-@media (max-width: 767px) {
-  /* 手机样式 */
-
-  .desktop {
-    display: none;
-  }
-  .inputInfo :deep(.el-input__wrapper) {
-    height: auto;
-  }
-  .mainInfo {
-    margin-top: 20px;
-    border-radius: 10px 10px 10px 10px;
-  }
-  .peqContentBox {
-    border-radius: 10px 10px 10px 10px;
-  }
-  .peq {
-    padding: 0 15px;
-  }
-  .mainCon {
-    height: 26vw;
-  }
-
-  .imgBox {
-    width: 32px;
-    height: 32px;
-    margin-bottom: 10px;
-  }
-  .select {
-    padding: 0;
-    padding-top: 20px;
-  }
-  .select h1 {
-    font-size: 15px;
-  }
-  .back {
-    width: 20px;
-    height: 16px;
-  }
-  .peqContent {
-    margin-top: 20px;
-  }
-  .content {
-    margin-top: 20px;
-    border-radius: 10px 10px 10px 10px;
-    margin-bottom: 20px;
-    padding: 15px 15px;
-  }
-  .jia {
-    margin-left: 10px;
-    width: 43px;
-    height: 33px;
-    border: 1px solid rgba(255, 255, 255, 0.65);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-  .peqContentBox {
-    width: 44.1vw;
-    height: 25.641vw;
-    font-size: 12px;
-  }
-  .dropdown_content_right p {
-    line-height: 3.5vw;
-  }
-
-  #main {
-    height: 300px;
-    padding-left: 10px;
-  }
-
-  .circle-container {
-    position: fixed;
-    top: 52%;
-    right: 6px;
-    --gradient-color: linear-gradient(115deg, #4fcf70, #fad648, #a99eb5, #12bcfe, #44ce7b);
-
-    width: 60px; /* 控制圆的大小 */
-    height: 60px;
-
-    border-radius: 50%; /* 设为圆形 */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    /* 遮罩层，只显示边框 */
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: #05fff6;
-      /* background-color: #000; */
-      border-radius: 50%;
-      z-index: 2;
-    }
-  }
-
-  /* 内部的大圆和文字 */
-  .big-circle {
-    width: calc(100% - 6px); /* 减去边框宽度 */
-    height: calc(100% - 6px);
-    border-radius: 50%;
-    background: #05fff6;
-    /* background-color: #000; */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 3; /* 确保在最上层 */
-
-    .text {
-      /* color: white; */
-      color: #000;
-      font-size: 28px;
-      font-weight: bold;
-      text-align: center;
-      z-index: 4;
-    }
-  }
-
-  /* 旋转动画 */
-  @keyframes rotate-border {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
-/* 当设备处于竖屏状态时应用的CSS样式 */
-@media screen and (orientation: portrait) {
-  /* 这里写入针对竖屏的CSS样式 */
-  .landscape {
-    display: none;
-  }
-}
-
-/* 当设备处于横屏状态时应用的CSS样式 */
-@media screen and (orientation: landscape) and (max-width: 1024px) {
-  /* 这里写入针对横屏的CSS样式 */
-  .portrait {
-    display: none;
-  }
-  .peqContentBox {
-    width: 35vw;
-  }
-  .titleText {
-    margin-top: 3vw;
-  }
-}
-
-@media (min-width: 1025px) {
-  .selectModel :deep(.el-select) {
-    width: 450px !important;
-  }
-
-  .peqContent {
-    width: 100%;
-  }
-  .peqContentBox {
-    width: 48%;
-    height: 220px;
-    cursor: pointer;
-    border-radius: 20px;
-  }
-  .peqContentBox .imgBox {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 40px;
-  }
-  .peq {
-    margin-top: 10vh;
-    position: relative;
-  }
-  :deep(.inputDialog .el-dialog) {
-    width: 50%;
-  }
-  .jia {
-    cursor: pointer;
-    width: 57px;
-    height: 42px;
-    border-radius: 20px;
-    margin-left: 15px;
-  }
-  #main {
-    height: 450px;
-  }
-  .mainInfo {
-    margin-top: 0;
-    border-radius: 20px;
-  }
-  .select {
-    padding: 40px 0;
-  }
-  .content {
-    margin-top: 40px;
-    border-radius: 20px;
-    padding: 30px 30px;
-  }
-  .filter p {
-    padding-top: 30px;
-    padding-bottom: 15px;
-    cursor: pointer;
-  }
-  .dropdownText img {
-    width: 15px;
-  }
-
-  /* AI页面圆圈 */
-  .circle-container {
-    top: 74%;
-    right: calc(50% - 410px);
-    transform: translateX(-50%);
-    width: 70px;
-    height: 70px;
-  }
-}
-</style>
diff --git a/client/src/pages/IOPage.tsx b/client/src/pages/IOPage.tsx
index a82402a..da10772 100644
--- a/client/src/pages/IOPage.tsx
+++ b/client/src/pages/IOPage.tsx
@@ -7,6 +7,7 @@
    ============================================================ */
 import { useDevice } from "@/contexts/DeviceContext";
 import { cn } from "@/lib/utils";
+import BottomNav from "@/components/BottomNav";
 import { ChevronLeft } from "lucide-react";
 import { useLocation } from "wouter";
 
@@ -138,6 +139,7 @@ export default function IOPage() {
           </div>
         </div>
       </div>
+      <BottomNav />
     </div>
   );
 }
diff --git a/client/src/pages/VUPage.tsx b/client/src/pages/VUPage.tsx
index 6fb68b2..909721b 100644
--- a/client/src/pages/VUPage.tsx
+++ b/client/src/pages/VUPage.tsx
@@ -7,6 +7,7 @@
    ============================================================ */
 import { useDevice } from "@/contexts/DeviceContext";
 import { cn } from "@/lib/utils";
+import BottomNav from "@/components/BottomNav";
 import { Check, ChevronLeft } from "lucide-react";
 import { useLocation } from "wouter";
 
@@ -83,6 +84,7 @@ export default function VUPage() {
           );
         })}
       </div>
+      <BottomNav />
     </div>
   );
 }