update

src/App.vue

@@ -10,7 +10,7 @@ import Signal from '@/components/signal.vue'
 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
 const iceServers = [
   {
-    urls: ['stun:caner.top:3478']
+    urls: [ 'stun:caner.top:3478' ]
   },
   {
     urls: 'turn:caner.top:3478',
@@ -210,7 +210,7 @@ window.$electron.on('message', async (msg: any) => {
 window.$electron.send('close-loading')
 
 // 监听按钮状态
-watch([audioState, warnAudio, conctrlGrears], () => {
+watch([ audioState, warnAudio, conctrlGrears ], () => {
   if (showLoading.value) return
   if (audioState.value) {
     audioStateNum.value++
@@ -226,31 +226,66 @@ onUnmounted(() => close())
 </script>
 <template>
   <template v-if="isLogin">
-    <video ref="remoteVideo" autoplay playsinline />
+    <video
+      ref="remoteVideo"
+      autoplay
+      playsinline
+    />
     <div class="marke">
       <div class="marke-left">
         <!-- 音频状态 -->
-        <Record class="marke-audio" :size="25" :audio-state="micState" @callBack="sendAudio" />
+        <Record
+          class="marke-audio"
+          :size="25"
+          :audio-state="micState"
+          @callBack="sendAudio"
+        />
         <!-- 喇叭状态 -->
-        <Icon name="audio" :size="25" :color="(!!(audioStateNum % 2)) ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" />
+        <Icon
+          name="audio"
+          :size="25"
+          :color="(!!(audioStateNum % 2)) ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+        />
         <!-- 电量状态 -->
         <Battery :quantity="quantity" />
         <!-- 信号 -->
         <Signal :signal-value="signalValue" />
       </div>
       <div class="marke-right">
-        <Icon name="min" :size="20" color="#fff" @click="titleEvent('minWin')" />
-        <Icon :name="winMaxOrMin ? 'max' : 'maxMin'" :size="20" color="#fff" @click="titleEvent('maxWin')" />
-        <Icon name="close" :size="20" color="#fff" @click="titleEvent('closeWin')" />
+        <Icon
+          name="min"
+          :size="20"
+          color="#fff"
+          @click="titleEvent('minWin')"
+        />
+        <Icon
+          :name="winMaxOrMin ? 'max' : 'maxMin'"
+          :size="20"
+          color="#fff"
+          @click="titleEvent('maxWin')"
+        />
+        <Icon
+          name="close"
+          :size="20"
+          color="#fff"
+          @click="titleEvent('closeWin')"
+        />
       </div>
     </div>
     <!-- 码数 -->
     <div class="gauge">
-      <Gauge :value="SpeedValue" :gears="conctrlNum % 2 ? '倒档' : '前进'" />
+      <Gauge
+        :value="SpeedValue"
+        :gears="conctrlNum % 2 ? '倒档' : '前进'"
+      />
     </div>
     <Loading v-if="showLoading" />
   </template>
-  <Login v-else v-model="error" @loginBack="login" />
+  <Login
+    v-else
+    v-model="error"
+    @loginBack="login"
+  />
 </template>
 <style scoped lang="scss">
 video {

src/components/battery.vue

@@ -1,7 +1,13 @@
 <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">
       {{ quantity }}%

src/components/gauge.vue

@@ -8,7 +8,7 @@ import {
   onMounted, ref, watch
 } from 'vue'
 
-echarts.use([GaugeChart, LabelLayout, UniversalTransition, CanvasRenderer])
+echarts.use([ GaugeChart, LabelLayout, UniversalTransition, CanvasRenderer ])
 const props = defineProps<{
   value: number,
   gears: string
@@ -52,9 +52,9 @@ const option = ref({
       show: true
     },
     radius: '190%',
-    center: ['50%', '98%'],
+    center: [ '50%', '98%' ],
     detail: {
-      offsetCenter: [0, -25],
+      offsetCenter: [ 0, -25 ],
       valueAnimation: true,
       formatter: (value: number) => `{value|${value.toFixed(0)}}{unit|km/h}\n{num|${props.gears}}`,
       rich: {
@@ -66,19 +66,19 @@ const option = ref({
         unit: {
           fontSize: 20,
           color: '#FFFFFF',
-          padding: [0, 0, 0, 10]
+          padding: [ 0, 0, 0, 10 ]
         },
         num: {
           fontSize: 20,
           color: '#FFFFFF',
-          padding: [0, 0, 0, 10]
+          padding: [ 0, 0, 0, 10 ]
         }
       }
     },
     pointer: {
       show: false
     },
-    data: [0]
+    data: [ 0 ]
   }
 })
 
@@ -111,7 +111,10 @@ onUnmounted(() => {
 })
 </script>
 <template>
-  <div id="charts" ref="chartDom" />
+  <div
+    id="charts"
+    ref="chartDom"
+  />
 </template>
 <style scoped>
 #charts {

src/components/icon.vue

@@ -11,7 +11,14 @@ const newColor = computed(() => `${props.color ?? '#ccc'}`)
 const newSize = computed(() => `${props.size ? (`${props.size}px`) : '16px'}`)
 </script>
 <template>
-  <svg aria-hidden="true" :fill="newColor" :style="`width:${newSize};height:${newSize}`">
-    <use :href="symbolId" :fill="newColor" />
+  <svg
+    aria-hidden="true"
+    :fill="newColor"
+    :style="`width:${newSize};height:${newSize}`"
+  >
+    <use
+      :href="symbolId"
+      :fill="newColor"
+    />
   </svg>
 </template>

src/components/login.vue

@@ -6,8 +6,7 @@ const room = ref(localStorage.getItem('ROOM') || '')
 const url = ref(localStorage.getItem('URL') || '')
 const props = defineProps<{ modelValue: string }>()
 const err = computed(() => props.modelValue)
-const emit = defineEmits<{
-  (evt: 'update:modelValue', value: string): void
+const emit = defineEmits<{(evt: 'update:modelValue', value: string): void
   (evt: 'loginBack', value: { name: string, room: string, url: string }): void
 }>()
 
@@ -19,7 +18,7 @@ function titleEvent(type: string) {
   window.$electron?.send(type)
 }
 
-watch([name, room, url], ([_, __, ___], [_o, __o, ___o]) => {
+watch([ name, room, url ], ([ _, __, ___ ], [ _o, __o, ___o ]) => {
   if (_ && __ && ___) emit('update:modelValue', '')
   if (___ !== ___o) localStorage.setItem('URL', ___)
   if (_ !== _o) localStorage.setItem('NAME', _)
@@ -29,29 +28,69 @@ watch([name, room, url], ([_, __, ___], [_o, __o, ___o]) => {
 <template>
   <div class="login">
     <div class="login-title">
-      <Icon name="min" :size="20" color="#fff" @click="titleEvent('minWin')" />
-      <Icon name="close" :size="20" color="#fff" @click="titleEvent('closeWin')" />
+      <Icon
+        name="min"
+        :size="20"
+        color="#fff"
+        @click="titleEvent('minWin')"
+      />
+      <Icon
+        name="close"
+        :size="20"
+        color="#fff"
+        @click="titleEvent('closeWin')"
+      />
     </div>
     <div class="login-content">
       <div class="login-content-left" />
-      <div class="login-content-right" @keydown.enter="login">
+      <div
+        class="login-content-right"
+        @keydown.enter="login"
+      >
         <p>Hello, 欢迎登录</p>
         <div>
-          <Icon name="server" :size="25" />
-          <input v-model="url" type="text" placeholder="mqtts://*******" maxlength="50">
+          <Icon
+            name="server"
+            :size="25"
+          />
+          <input
+            v-model="url"
+            type="text"
+            placeholder="mqtts://*******"
+            maxlength="50"
+          >
         </div>
         <div>
-          <Icon name="username" :size="25" />
-          <input v-model="room" type="text" placeholder="请输入房间" maxlength="20">
+          <Icon
+            name="username"
+            :size="25"
+          />
+          <input
+            v-model="room"
+            type="text"
+            placeholder="请输入房间"
+            maxlength="20"
+          >
         </div>
         <div>
-          <Icon name="password" :size="25" />
-          <input v-model="name" type="text" placeholder="请输入名称" maxlength="20">
+          <Icon
+            name="password"
+            :size="25"
+          />
+          <input
+            v-model="name"
+            type="text"
+            placeholder="请输入名称"
+            maxlength="20"
+          >
         </div>
         <span>{{ err }}</span>
         <div>
-          <button :disabled="!name && !room && !url && !url.includes('mqtts://')"
-            :class="{ resetStyle: name && room && url && url.includes('mqtts://') }" @click="login">
+          <button
+            :disabled="!name && !room && !url && !url.includes('mqtts://')"
+            :class="{ resetStyle: name && room && url && url.includes('mqtts://') }"
+            @click="login"
+          >
             加入
           </button>
         </div>

src/components/record.vue

@@ -1,5 +1,9 @@
 <template>
-  <Icon name="mic" :size="size" :color="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'" />
+  <Icon
+    name="mic"
+    :size="size"
+    :color="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
+  />
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
@@ -12,7 +16,7 @@ const props = defineProps<{
   audioState: boolean,
   size: number
 }>()
-const emit = defineEmits<{ (evt: 'callBack', value: Blob): void }>()
+const emit = defineEmits<{(evt: 'callBack', value: Blob): void }>()
 
 // 初始化音频
 async function initRecorder() {

src/components/signal.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="signal-box">
     <ul>
-      <li v-for="(item, idex) in list" :key="idex" :class="item.class" />
+      <li
+        v-for="(item, idex) in list"
+        :key="idex"
+        :class="item.class"
+      />
     </ul>
   </div>
 </template>