修正组件，及eslint 规则

.eslintrc.json

@@ -29,36 +29,12 @@
     "linebreak-style": [ 0, "error", "windows" ],
     "import/no-unresolved": 0,
     "import/extensions": 0,
-    "import/no-absolute-path": 0,
-    "import/no-extraneous-dependencies": 2,
-    "class-methods-use-this": 0,
-    "no-mixed-operators": 0,
-    "eol-last": 0,
-    "import/newline-after-import": 0,
     "vue/multi-word-component-names": 0,
     "no-param-reassign": 0,
-    "no-restricted-syntax": 0,
-    "no-underscore-dangle": 0,
     "no-plusplus": 0,
-    "no-bitwise": 0,
-    "guard-for-in": 0,
-    "func-names": 0,
-    "import/order": 0,
-    "vue/no-deprecated-slot-attribute": 0,
     "vue/v-on-event-hyphenation": 0,
-    "vue/no-deprecated-filter": 0,
-    "vue/require-explicit-emits": 0,
-    "vue/no-v-html": 0,
-    "vue/order-in-components": 0,
-    "vue/no-reserved-component-names": 0,
     "no-promise-executor-return": 0,
-    "no-sparse-arrays": 0,
-    "no-nested-ternary": 0,
-    "no-continue": 0,
-    "complexity": [ 2, 9 ],
-    "no-return-await": 0,
-    "max-classes-per-file": 0,
-    "consistent-return" : 0,
-    "no-shadow": 0
+    "no-shadow": 0,
+    "prefer-destructuring": 1
   }
 }

src/App.vue

@@ -17,4 +17,4 @@ onMounted(() => {
     electron.ipcRenderer.send('close-loading')
   }
 })
-</script>
+</script>

src/assets/icons/close.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.71148 6.00003L9.89087 2.82065L9.17852 2.10829L5.99916 5.28765L2.81978 2.10828L2.10743 2.82063L5.28677 5.99998L2.10742 9.17933L2.81978 9.89169L5.99913 6.71234L9.17849 9.8917L9.89081 9.17938L6.71148 6.00003Z" />
-</svg>

src/assets/icons/gemePad.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M941 469.9c-43.9-197.4-105.9-246.1-143.6-265.6C737 173 666.9 191.2 643.7 203c-26.4 13.3-44.2 38.7-71 49.7-31 12.7-73.2 16.1-104.9 0.8-25.3-12.2-47.6-38.3-78.2-49.9-38.8-14.7-103.5-35.2-167.4 9.7C207 224 99.1 312.6 66.8 589.6c-20 170.8 75.5 225.7 72 223.2 24.6 17.3 79.6 46.4 154.2 0.7 49.8-30.5 90.3-90.9 90.3-90.9s18-33.6 42-47.8c16.9-10.1 42.3-2.4 42.3-2.4h89.7s28.5-3.5 48.4 5.1c19.4 8.3 30.4 28.8 30.4 28.8s59.1 74.9 115.7 113c24.1 16.2 121 34.9 171.1-25 32.5-39.1 54.8-159.6 18.1-324.4z m-479-17.5c0 15-12.2 27.1-27.2 27.1h-67.9v68c0 15-12.2 27.2-27.2 27.2h-20.4c-15 0-27.2-12.1-27.2-27.2v-68h-67.9c-15 0-27.2-12.1-27.2-27.1V432c0-15 12.2-27.2 27.2-27.2h67.9v-67.9c0-15 12.2-27.2 27.2-27.2h20.4c15 0 27.2 12.2 27.2 27.2v67.9h67.9c15 0 27.2 12.1 27.2 27.2v20.4z m191.4 95.1c-28.1 0-50.9-22.8-50.9-51 0-28.1 22.8-50.9 50.9-50.9 28.1 0 50.9 22.8 50.9 50.9 0 28.2-22.8 51-50.9 51z m93.4-113.2c-27.8 0-50.4-22.6-50.4-50.4s22.6-50.3 50.4-50.3c27.8 0 50.4 22.6 50.4 50.3-0.1 27.8-22.6 50.4-50.4 50.4z" ></path>
+</svg>

src/assets/icons/mic.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M614.84 89.599c85.46-42.521 191.999-23.278 256.64 52.699 62.14 73.011 66.346 175.864 17.175 252.606-12.245 0.043-25.069-2.053-38.196-5.972-52.092-15.542-106.511-58.221-150.317-110.832-43.937-52.727-76.121-114.288-83.697-167.478-1.026-7.244-1.575-14.27-1.605-21.023zM183.277 673.503c-0.65 37.807 18.39 58.627 54.853 64.452l401.174-269.607c-55.417-35.016-102.607-92.76-127.041-153.483L183.277 673.503z m13.099 85.561c-33.353 34.785-43.416 70.844-35.552 97.735 3.21 11.001 9.616 20.502 18.766 27.571 9.687 7.488 22.743 12.42 38.674 13.792 54.361 4.671 135.657-30.433 230.659-136.886C544.402 654.29 630.44 603.529 700.922 591.152c42.649-7.475 80.095-1.257 111.194 15.08 31.084 16.337 55.171 42.664 71.234 75.383 25.069 51.093 30.245 118.177 11.189 186.245l-55.763-15.644c15.181-54.245 11.653-106.495-7.345-145.199-10.67-21.745-26.342-39.05-46.293-49.547-19.967-10.497-44.892-14.328-74.226-9.18-58.727 10.294-132.866 55.373-218.688 151.532-109.184 122.34-208.898 162.143-278.716 156.157-27.469-2.357-50.919-11.61-69.295-25.821-18.94-14.646-32.255-34.396-38.935-57.253-13.287-45.442 0.289-102.78 49.372-153.96l41.726 40.119z m660.039-326.86C791.529 410.72 726.7 360.119 675.794 298.991c-46.351-55.648-82.018-120.955-96.419-181.749-38.096 46.901-53.58 106.986-45.195 164.703 23.306 70.047 83.783 142.568 151.184 173.536 56.502 16.353 118.888 9.021 171.051-23.277z" ></path></svg>

src/components/battery.vue

@@ -1,27 +1,35 @@
 <template>
-  <div class="electric" :class="bgClass">
+  <div
+    class="electric"
+    :class="bgClass"
+  >
     <div class="electric-panel">
-      <div class="electric-panel-remainder" :style="{ width: quantity + '%' }" />
+      <div
+        class="electric-panel-remainder"
+        :style="{ width: quantity + '%' }"
+      />
+    </div>
+    <div class="electric-berText">
+      50%
     </div>
-    <div class="electric-berText">50%</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+
 const props = defineProps<{
   quantity: number
 }>()
 const bgClass = computed(() => {
   if (props.quantity >= 50) {
-    return "success";
-  } else if (props.quantity >= 20) {
-    return "warning";
-  } else if (props.quantity >= 1) {
-    return "danger";
-  } else {
-    return "danger";
+    return 'success'
+  } if (props.quantity >= 20) {
+    return 'warning'
+  } if (props.quantity >= 1) {
+    return 'danger'
   }
+  return 'danger'
 })
 </script>
 
@@ -33,7 +41,6 @@ const bgClass = computed(() => {
   position: relative;
   z-index: 3;
   color: white;
-
   &-panel {
     box-sizing: border-box;
     width: 0.22rem;
@@ -68,6 +75,9 @@ const bgClass = computed(() => {
       background: #fff;
     }
   }
+  &-berText{
+    font-size: 0.14rem;
+  }
 }
 
 .success .electric-panel {
@@ -105,4 +115,4 @@ const bgClass = computed(() => {
 .danger .electric-panel-remainder {
   background: #ed4014;
 }
-</style>
+</style>

src/components/gauge.vue

@@ -1,111 +1,124 @@
-<template>
-  <div ref="chartDom" id="charts"></div>
-</template>
 <script setup lang="ts">
 import * as echarts from 'echarts'
-import { GaugeChart } from "echarts/charts"
-import { LabelLayout, UniversalTransition } from "echarts/features"
-import { CanvasRenderer } from "echarts/renderers"
-import { onMounted, ref, watch } from 'vue';
-echarts.use([GaugeChart, LabelLayout, UniversalTransition, CanvasRenderer])
+import { GaugeChart } from 'echarts/charts'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import {
+  onUnmounted,
+  onMounted, ref, watch
+} from 'vue'
 
+echarts.use([ GaugeChart, LabelLayout, UniversalTransition, CanvasRenderer ])
+const props = defineProps<{
+  value: number,
+  gears: number
+}>()
 const chartDom = ref()
-const chart = ref()
+const chart = ref(null as any)
 const option = ref({
   series: {
-    name: "Pressure",
-    type: "gauge",
+    name: 'Pressure',
+    type: 'gauge',
     itemStyle: {
-      color: "#FFFFFF",
+      color: '#FFFFFF'
     },
     startAngle: 180,
     max: 60,
     endAngle: 0,
     axisLine: {
       lineStyle: {
-        width: 1,
-      },
+        width: 1
+      }
     },
     axisTick: {
       distance: 0,
       length: 10,
       lineStyle: {
-        color: "#FFFFFF",
-      },
+        color: '#FFFFFF'
+      }
     },
     splitLine: {
       length: 15,
       distance: 0,
       lineStyle: {
-        color: "#FFFFFF",
-      },
+        color: '#FFFFFF'
+      }
     },
     axisLabel: {
       distance: 8,
-      color: "#FFFFFF",
+      color: '#FFFFFF'
     },
     progress: {
-      show: true,
+      show: true
     },
-    radius: "160%",
-    center: ["50%", "90%"],
+    radius: '160%',
+    center: [ '50%', '90%' ],
     detail: {
-      offsetCenter: [0, -25],
+      offsetCenter: [ 0, -25 ],
       valueAnimation: true,
-      formatter: (value: number) => {
-        return `{value|${value.toFixed(0)}}{unit|km/h}\n{num|${props.gears}}`;
-      },
+      formatter: (value: number) => `{value|${value.toFixed(0)}}{unit|km/h}\n{num|${props.gears}}`,
       rich: {
         value: {
           fontSize: 20,
-          fontWeight: "bolder",
-          color: "#FFFFFF",
+          fontWeight: 'bolder',
+          color: '#FFFFFF'
         },
         unit: {
           fontSize: 20,
-          color: "#FFFFFF",
-          padding: [0, 0, 0, 10],
+          color: '#FFFFFF',
+          padding: [ 0, 0, 0, 10 ]
         },
         num: {
           fontSize: 20,
-          color: "#FFFFFF",
-          padding: [0, 0, 0, 10],
-        },
-      },
+          color: '#FFFFFF',
+          padding: [ 0, 0, 0, 10 ]
+        }
+      }
     },
     pointer: {
-      show: false,
+      show: false
     },
-    data: [0],
+    data: [ 0 ]
   }
 })
-const props = defineProps<{
-  value: number,
-  gears: number
-}>()
 
+function resetChart() {
+  if (!chart.value) return
+  chart.value.resize()
+}
 
-onMounted(() => {
-  chart.value = echarts.init(chartDom.value)
+watch(() => props.value, (v: number) => {
+  if (!chart.value) return
+  if (v >= 60) v = 60
+  if (v <= 0) v = 0
+  option.value.series.data[0] = v
   chart.value.setOption(option.value)
 })
 
-watch(() => props.value, (v: number) => {
-  if (!chart.value) return;
-  if (v >= 60) v = 60;
-  if (v <= 0) v = 0;
-  option.value.series.data[0] = v;
-  chart.value.setOption(option.value);
+watch(() => props.gears, (v) => {
+  if (!chart.value) return
+  chart.value.setOption(option.value)
 })
 
-watch(() => props.gears, (v) => {
-  if (!chart.value) return;
-  chart.value.setOption(option.value);
+onMounted(() => {
+  chart.value = echarts.init(chartDom.value)
+  chart.value.setOption(option.value)
+  window.addEventListener('resize', resetChart, false)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resetChart, false)
 })
 </script>
+<template>
+  <div
+    id="charts"
+    ref="chartDom"
+  />
+</template>
 <style scoped>
 #charts {
-  width: 5rem;
-  height: 2rem;
+  width: 100%;
+  height: 100%;
 }
-</style>
+</style>

src/components/icon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+
 const props = defineProps<{
   name: string,
   size?: number,
@@ -15,6 +16,7 @@ const newSize = computed(() => `${props.size ?? 16}`)
     :font-size="newSize"
     :width="newSize"
     :height="newSize"
+    :fill="newColor"
   >
 
     <use
@@ -22,4 +24,4 @@ const newSize = computed(() => `${props.size ?? 16}`)
       :fill="newColor"
     />
   </svg>
-</template>
+</template>

src/components/loading.vue

@@ -21,4 +21,4 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
-</style>
+</style>

src/components/login.vue

@@ -1,32 +1,48 @@
 <template>
   <div class="login">
     <div @keydown.enter="login">
-      <div class="login-logo">登陆</div>
-      <input type="text" placeholder="房间" maxlength="20" v-model="roomID" />
-      <input type="text" placeholder="昵称" maxlength="20" v-model="name" />
-      <div class="login-err">{{ err || error }}</div>
-      <button @click="login">加入</button>
+      <div class="login-logo">
+        登陆
+      </div>
+      <input
+        v-model="roomID"
+        type="text"
+        placeholder="房间"
+        maxlength="20"
+      >
+      <input
+        v-model="name"
+        type="text"
+        placeholder="昵称"
+        maxlength="20"
+      >
+      <div class="login-err">
+        {{ err || error }}
+      </div>
+      <button @click="login">
+        加入
+      </button>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
+
 const name = ref('')
 const roomID = ref('')
 const error = ref('')
 defineProps<{
   err: string
 }>()
-const emit = defineEmits<{
-  (evt: 'loginBack', value: { name: string, roomID: string }): void;
+const emit = defineEmits<{(evt: 'loginBack', value: { name: string, roomID: string }): void;
 }>()
 async function login() {
   if (!roomID.value) {
-    error.value = "请输入房间号";
+    error.value = '请输入房间号'
   } else if (!name.value) {
-    error.value = "请输入昵称";
+    error.value = '请输入昵称'
   } else {
-    emit("loginBack", { name: name.value, roomID: roomID.value });
+    emit('loginBack', { name: name.value, roomID: roomID.value })
   }
 }
 </script>
@@ -56,12 +72,11 @@ async function login() {
     outline: none;
     border-radius: 0;
     background: none;
+    font-size: 0.16rem;
   }
 
   button {
     display: block;
-    width: 1.3rem;
-    height: 0.3rem;
     background: #79b8fa;
     border: none;
     color: white;
@@ -72,6 +87,7 @@ async function login() {
     margin: 0 auto;
     margin-top: 0.2rem;
     line-height: 0.3rem;
+    padding: 0.05rem 0.5rem;
   }
 
   button:hover {
@@ -92,4 +108,4 @@ async function login() {
   }
 
 }
-</style>
+</style>

src/components/record.vue

@@ -1,8 +1,13 @@
 <template>
-  <div :style="`color:${show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'}`">&#xe6c1;</div>
+  <Icon
+    name="mic"
+    :size="25"
+    :color="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+  />
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch } from 'vue'
+
 const chunks = ref([] as Blob[])
 const mediaRecorder = ref(null as null | MediaRecorder)
 const show = ref(false)
@@ -10,51 +15,49 @@ const show = ref(false)
 const props = defineProps<{
   audioState: boolean
 }>()
-const emit = defineEmits<{
-  (evt: 'callBack', value: Blob): void;
+const emit = defineEmits<{(evt: 'callBack', value: Blob): void;
 }>()
 
 // 初始化音频
 async function initRecorder() {
   try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    mediaRecorder.value = new MediaRecorder(stream);
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    mediaRecorder.value = new MediaRecorder(stream)
 
     // 事件监听
     mediaRecorder.value.ondataavailable = (e: { data: Blob }) => {
-      chunks.value.push(e.data);
-    };
+      chunks.value.push(e.data)
+    }
     mediaRecorder.value.onstart = () => {
-      chunks.value = [];
-    };
+      chunks.value = []
+    }
     mediaRecorder.value.onstop = () => {
       const blob = new Blob(chunks.value, {
-        type: "audio/webm;codecs=opus",
-      });
-      emit("callBack", blob);
-    };
+        type: 'audio/webm;codecs=opus'
+      })
+      emit('callBack', blob)
+    }
   } catch (error: any) {
-    show.value = false;
-    mediaRecorder.value = null;
-    let txt = "不支持的音频";
-    if (error.toString().includes("getUserMedia")) {
-      txt = "不支持webrtc音频";
+    show.value = false
+    mediaRecorder.value = null
+    let txt = '不支持的音频'
+    if (error.toString().includes('getUserMedia')) {
+      txt = '不支持webrtc音频'
     } else {
-      txt = "未获取到音频设备";
+      txt = '未获取到音频设备'
     }
     alert(txt)
   }
 }
 
 watch(() => props.audioState, (v) => {
-  if (!mediaRecorder.value) return;
+  if (!mediaRecorder.value) return
   if (v) {
-    mediaRecorder.value.start();
+    mediaRecorder.value.start()
   } else {
-    mediaRecorder.value.stop();
+    mediaRecorder.value.stop()
   }
-  show.value = v;
-
+  show.value = v
 })
 
-</script>
+</script>

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
-import App from './App.vue'
 import { createRouter, RouteRecordRaw, createWebHistory } from 'vue-router'
+import App from './App.vue'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
 import '@/services/rem'

src/services/rem.ts

@@ -11,9 +11,10 @@
     // 1rem =100px
     const width = docEl.clientWidth
     docEl.style.fontSize = `${100 * (width / 1920)}px`
+    window.$width = width
   }
   recalc()
   if (!doc.addEventListener) { return }
   win.addEventListener(resizeEvt, recalc, false)
   console.log('rem自适应')
-}(document, window))
+}(document, window))

src/views/index/index.vue

@@ -1,232 +1,235 @@
 <script setup lang="ts">
-import { Socket, io } from 'socket.io-client';
-import { onMounted, onUnmounted, watch } from 'vue';
-import { ref } from 'vue';
-const sleep = (ms:number) => new Promise((res) => setTimeout(res, ms));
+import { Socket, io } from 'socket.io-client'
+import {
+  onMounted, onUnmounted, watch, ref
+} from 'vue'
+import Login from '@/components/login.vue'
+import Gauge from '@/components/gauge.vue'
+import Record from '@/components/record.vue'
+import Battery from '@/components/battery.vue'
+
+const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
 const socket = ref(null as null | Socket)
-const HOST = ref("wss://car.caner.top")
+const HOST = ref('wss://car.caner.top')
 const Peer = ref(null as null | RTCPeerConnection | undefined)
 const isLogin = ref(false)
-const error = ref("")
+const error = ref('')
 const remoteVideo = ref()
 const showLoading = ref(true)
 const contrlState = ref(false)
 const audioState = ref(false)
 const mutedState = ref(true)
 const warnAudio = ref(false)// 鸣笛
-const speed = ref(1) //1低速档 | 2 高速档
+const speed = ref(1) // 1低速档 | 2 高速档
 const muted = ref(true)// 是否静音
 const SpeedValue = ref(0)
 const iceServers = ref([
   {
-    urls: ["stun:caner.top:3478"],
+    urls: [ 'stun:caner.top:3478' ]
   },
   {
-    urls: "turn:caner.top:3478",
-    username: "admin",
-    credential: "123456",
-  },
+    urls: 'turn:caner.top:3478',
+    username: 'admin',
+    credential: '123456'
+  }
 ])
 const num = ref(0)
 
+// 发送语音
+function sendAudio(blob: Blob) {
+  if (!socket.value && !socket.value!.connected) return
+  socket.value?.emit('msg', {
+    type: 'Meadia',
+    Meadia: blob
+  })
+}
+
+// 挡位
+function Gear(speed: number, num: number) {
+  // 低速档
+  if (speed === 1) {
+    if (num < 116) {
+      // 前
+      num = 120
+    } else if (num >= 120 && num <= 131) {
+      num = 128
+    } else if (num > 140) {
+      // 后
+      num = 140
+    }
+  }
+  // 高速档
+  if (speed === 2) {
+    if (num < 96) {
+      num = 96
+    } else if (num >= 120 && num <= 131) {
+      num = 128
+    } else if (num > 160) {
+      num = 160
+    }
+  }
+  return num
+}
+
+// 登录
+function login(data: { name: string, roomID: string }) {
+  if (socket.value) {
+    socket.value.auth = {
+      roomID: data.roomID,
+      name: data.name
+    }
+    socket.value.connect()
+  } else {
+    error.value = '服务器连接失败'
+  }
+}
+
+// 手柄数据
+function ControlData() {
+  const data = navigator.getGamepads()
+  const db = data[0]
+  if (!db) return
+  // 挡位选择AB
+  if (db.buttons[1].touched) speed.value = 2
+  if (db.buttons[0].touched) speed.value = 1
+  // 语音按键R2
+  audioState.value = db.buttons[7].touched
+  // 静音X3
+  mutedState.value = db.buttons[3].touched
+  // 播放警笛Y2
+  warnAudio.value = db.buttons[2].touched
+  // console.log(db.buttons);
+  const params = {
+    v0: Math.floor(db.axes[0] * 128 + 128),
+    v1: Math.floor(db.axes[1] * 128 + 128),
+    v2: Math.floor(db.axes[2] * 128 + 128),
+    v3: Gear(speed.value, Math.floor(db.axes[3] * 128 + 128))
+  }
+
+  if (socket.value && socket.value.connected) socket.value.emit('msg', { type: 'conctrl', conctrl: params })
+  requestAnimationFrame(ControlData)
+}
+
+// 手柄连接
+function conControl() {
+  contrlState.value = true
+  ControlData()
+}
+
+// 手柄断开连接
+function disControl() {
+  contrlState.value = false
+  cancelAnimationFrame(ControlData as any)
+}
+
+// 关闭
+function close(err?: string) {
+  if (Peer.value) Peer.value?.close()
+  if (remoteVideo.value) remoteVideo.value.srcObject = null
+  if (socket.value) socket.value?.disconnect()
+  isLogin.value = false
+  showLoading.value = false
+  error.value = err || ''
+  socket.value = null
+  Peer.value = null
+  num.value = 0
+  cancelAnimationFrame(ControlData as any)
+  window.removeEventListener('gamepadconnected', conControl)
+  window.removeEventListener('gamepaddisconnected', disControl)
+}
 /**
  * 网络连接
- * @param host 
+ * @param host
  */
 function intSoketRtc(host: string) {
   // int socket
   socket.value = io(host, {
     autoConnect: false,
-    transports: ["websocket"],
-  });
+    transports: [ 'websocket' ]
+  })
 
   // socket
-  socket.value.on("connect", () => {
+  socket.value.on('connect', () => {
     try {
-      isLogin.value = true;
+      isLogin.value = true
       // init webrtc
       Peer.value = new RTCPeerConnection({
         iceServers: iceServers.value,
-        bundlePolicy: "max-bundle",
-      });
+        bundlePolicy: 'max-bundle'
+      })
 
       // listen state
       Peer.value.onicegatheringstatechange = () => {
-        console.log("GatheringState: ", Peer.value?.iceGatheringState);
-        if (Peer.value?.iceGatheringState === "complete") {
-          const answer = Peer.value.localDescription;
-          socket.value?.emit("msg", answer);
+        console.log('GatheringState: ', Peer.value?.iceGatheringState)
+        if (Peer.value?.iceGatheringState === 'complete') {
+          const answer = Peer.value.localDescription
+          socket.value?.emit('msg', answer)
         }
-      };
+      }
 
       // listen track
       Peer.value.ontrack = async (evt) => {
-        console.log("track", evt);
-        remoteVideo.value.srcObject = evt.streams[0];
-      };
+        console.log('track', evt)
+        remoteVideo.value.srcObject = evt.streams[0]
+      }
 
       // listen changestate·
       Peer.value.oniceconnectionstatechange = async () => {
-        const state = Peer.value?.iceConnectionState;
-        console.log("ICE状态", state);
+        const state = Peer.value?.iceConnectionState
+        console.log('ICE状态', state)
         if (
-          state === "failed" ||
-          state === "disconnected" ||
-          state === "closed"
+          state === 'failed'
+          || state === 'disconnected'
+          || state === 'closed'
         ) {
-          close("P2P通信失败");
+          close('P2P通信失败')
         }
 
         // ICE连接成功|初始化摇杆
-        if (state === "connected") {
+        if (state === 'connected') {
           // init Control
-          window.addEventListener("gamepadconnected", conControl);
-          window.addEventListener("gamepaddisconnected", disControl);
-          await sleep(3000);
-          showLoading.value = false;
+          window.addEventListener('gamepadconnected', conControl)
+          window.addEventListener('gamepaddisconnected', disControl)
+          await sleep(3000)
+          showLoading.value = false
         }
-      };
+      }
     } catch (error) {
       close('webrtc初始化失败')
     }
-  });
+  })
 
-  socket.value.on("msg", async (data) => {
+  socket.value.on('msg', async (data) => {
     const key = data.type
     if (key === 'offer') {
-      await Peer.value?.setRemoteDescription(data);
-      const answer = await Peer.value?.createAnswer();
-      await Peer.value?.setLocalDescription(answer);
+      await Peer.value?.setRemoteDescription(data)
+      const answer = await Peer.value?.createAnswer()
+      await Peer.value?.setLocalDescription(answer)
     } else if (key === 'power') {
-      console.log("电量", data);
+      console.log('电量', data)
     } else if (key === 'speed') {
       const d = Math.floor(data.data)
       SpeedValue.value = d
     }
-  });
+  })
 
-  socket.value.on("joined", async () =>
-    socket.value?.emit("msg", { type: "startRTC" })
-  );
+  socket.value.on('joined', async () => socket.value?.emit('msg', { type: 'startRTC' }))
 
-  socket.value.on("leaved", () => close("车端断开"));
+  socket.value.on('leaved', () => close('车端断开'))
 
-  socket.value.on("connect_error", () => close('服务器连接失败'));
-}
-
-// 手柄数据
-function ControlData() {
-  const data = navigator.getGamepads();
-  const db = data[0];
-  if (!db) return;
-  // 挡位选择AB
-  if (db.buttons[1].touched) speed.value = 2;
-  if (db.buttons[0].touched) speed.value = 1;
-  // 语音按键R2
-  audioState.value = db.buttons[7].touched
-  // 静音X3
-  mutedState.value = db.buttons[3].touched
-  // 播放警笛Y2
-  warnAudio.value = db.buttons[2].touched
-  // console.log(db.buttons);
-  const params = {
-    v0: Math.floor(db.axes[0] * 128 + 128),
-    v1: Math.floor(db.axes[1] * 128 + 128),
-    v2: Math.floor(db.axes[2] * 128 + 128),
-    v3: Gear(speed.value, Math.floor(db.axes[3] * 128 + 128)),
-  };
-
-  if (socket.value && socket.value.connected) socket.value.emit("msg", { type: "conctrl", conctrl: params });
-  requestAnimationFrame(ControlData);
-}
-
-// 发送语音
-function sendAudio(blob:Blob) {
-  if (!socket.value && !socket.value!.connected) return;
-  socket.value?.emit("msg", {
-    type: "Meadia",
-    Meadia: blob,
-  });
-}
-
-// 挡位
-function Gear(speed:number, num:number) {
-  // 低速档
-  if (speed === 1) {
-    if (num < 116) {
-      // 前
-      num = 120;
-    } else if (num >= 120 && num <= 131) {
-      num = 128;
-    } else if (num > 140) {
-      // 后
-      num = 140;
-    }
-  }
-  // 高速档
-  if (speed === 2) {
-    if (num < 96) {
-      num = 96;
-    } else if (num >= 120 && num <= 131) {
-      num = 128;
-    } else if (num > 160) {
-      num = 160;
-    }
-  }
-  return num;
-}
-
-// 登录
-function login(data: { name: string, roomID: string }) {
-  if (socket.value) {
-    socket.value.auth = {
-      roomID: data.roomID,
-      name: data.name,
-    };
-    socket.value.connect();
-  } else {
-    error.value = "服务器连接失败";
-  }
-}
-
-// 关闭
-function close(err?: string) {
-  if (Peer) Peer.value?.close();
-  if (remoteVideo) remoteVideo.value.srcObject = null;
-  if (socket) socket.value?.disconnect();
-  isLogin.value = false;
-  showLoading.value = false;
-  error.value = err || "";
-  socket.value = null;
-  Peer.value = null
-  num.value = 0
-  cancelAnimationFrame(ControlData as any);
-  window.removeEventListener("gamepadconnected", conControl);
-  window.removeEventListener("gamepaddisconnected", disControl);
-}
-
-// 手柄连接
-function conControl() {
-  contrlState.value = true;
-  ControlData();
-}
-
-// 手柄断开连接
-function disControl() {
-  contrlState.value = false;
-  cancelAnimationFrame(ControlData as any);
+  socket.value.on('connect_error', () => close('服务器连接失败'))
 }
 
 watch(() => mutedState.value, (v) => {
   if (v) {
     const state = !!(num.value % 2)
     muted.value = state
-    if (socket.value && socket.value.connected) socket.value.emit("msg", { type: "contrlAudio", contrlAudio: state });
+    if (socket.value && socket.value.connected) socket.value.emit('msg', { type: 'contrlAudio', contrlAudio: state })
     num.value++
   }
 })
 watch(() => warnAudio.value, (v) => {
-  if (v && socket.value && socket.value.connected) socket.value.emit("msg", { type: "warnAudio", warnAudio: v });
+  if (v && socket.value && socket.value.connected) socket.value.emit('msg', { type: 'warnAudio', warnAudio: v })
 })
 onMounted(() => {
   intSoketRtc(HOST.value)
@@ -237,24 +240,48 @@ onUnmounted(() => {
 </script>
 <template>
   <template v-if="isLogin">
-    <video ref="remoteVideo" autoplay playsinline muted></video>
+    <video
+      ref="remoteVideo"
+      autoplay
+      playsinline
+      muted
+    />
     <div class="marke">
       <!-- 手柄状态 -->
-      <div class="marke-contrl" :style="`color:${contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'}`">&#xe72a;</div>
+      <Icon
+        name="gemePad"
+        :size="25"
+        :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+      />
       <!-- 音频状态 -->
-      <Record class="marke-audio" @callBack="sendAudio" :audioState="audioState" />
+      <Record
+        class="marke-audio"
+        :audio-state="audioState"
+        @callBack="sendAudio"
+      />
       <!-- 喇叭状态 -->
-      <div class="marke-arcode" :style="`color:${muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'}`">&#xe600;</div>
+      <Icon
+        name="audio"
+        :size="25"
+        :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+      />
       <!-- 电量状态 -->
       <Battery :quantity="60" />
     </div>
     <!-- 码数 -->
     <div class="gauge">
-      <Gauge :value="SpeedValue" :gears="speed" />
+      <Gauge
+        :value="SpeedValue"
+        :gears="speed"
+      />
     </div>
     <Loading v-if="showLoading" />
   </template>
-  <Login v-else :err="error" @loginBack="login" />
+  <Login
+    v-else
+    :err="error"
+    @loginBack="login"
+  />
 </template>
 <style scoped lang="less">
 video {
@@ -268,7 +295,7 @@ video {
   top: 0;
   left: 0;
   width: 100%;
-  padding: 5px 0;
+  padding: 0.05rem 0;
   z-index: 1;
   background: rgba(0, 0, 0, 0.25);
   display: flex;
@@ -276,22 +303,9 @@ video {
   justify-content: center;
   overflow: hidden;
 
-  &>div {
+  &>* {
     margin: 0 0.18rem;
   }
-
-  &-audio,
-  &-arcode {
-    font-size: 24px;
-    color: rgba(0, 0, 0, 0.3);
-  }
-
-  &-contrl {
-    font-size: 32px;
-    color: rgba(0, 0, 0, 0.3);
-  }
-
-
 }
 
 .gauge {
@@ -299,12 +313,11 @@ video {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 0);
-  width: 500px;
-  height: 185px;
+  width: 5rem;
+  height: 1.85rem;
   z-index: 9;
 }
 
-
 /* 隐藏滚动条 */
 ::-webkit-scrollbar {
   width: 0 !important;

src/views/index/route.ts

@@ -6,4 +6,4 @@ export default {
     authorize: true
   },
   component: home
-}
+}

src/vite-env.d.ts

@@ -7,7 +7,8 @@ declare module '*.vue' {
 }
 
 declare interface Window {
-  $electron: Any
+  $electron: any,
+  $width: number
 }
 
 declare module 'echarts'