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,66 +226,31 @@ 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,13 +1,7 @@
 <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,10 +111,7 @@ onUnmounted(() => {
 })
 </script>
 <template>
-  <div
-    id="charts"
-    ref="chartDom"
-  />
+  <div id="charts" ref="chartDom" />
 </template>
 <style scoped>
 #charts {

src/components/icon.vue

@@ -11,14 +11,7 @@ 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/loading.vue

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

src/components/login.vue

@@ -6,7 +6,8 @@ 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
 }>()
 
@@ -18,7 +19,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', _)
@@ -28,69 +29,29 @@ 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,9 +1,5 @@
 <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'
@@ -16,7 +12,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,11 +1,7 @@
 <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>