增加控制器检测，优化相关代码

README.md

@@ -15,8 +15,9 @@
 1. cargo cache -a
 ```
 
-### can
+### Fn
 - [x] 车辆信号
 - [x] 车辆电量
 - [x] 限时对讲
-- [x] 开启静音
+- [x] 开启静音
+- [x] 控制器

src-tauri/capabilities/default.json

@@ -11,10 +11,10 @@
     "shell:allow-open",
     "core:window:default",
     "core:resources:default",
-    "core:window:allow-start-dragging",
     "core:window:allow-close",
     "core:window:allow-maximize",
     "core:window:allow-minimize",
+    "core:window:allow-start-dragging",
     "core:window:allow-internal-toggle-maximize"
   ]
 }

src/App.vue

@@ -8,7 +8,9 @@
     :date-locale="dateZhCN"
   >
     <n-notification-provider>
-      <router-view />
+      <n-message-provider>
+        <router-view />
+      </n-message-provider>
     </n-notification-provider>
   </n-config-provider>
 </template>

src/assets/native-plugin.ts

@@ -1,14 +1,18 @@
 import {
   create,
   NConfigProvider,
+  NMessageProvider,
   NNotificationProvider,
   NButton
 } from 'naive-ui'
 
 const naive = create({
-  components: [ NConfigProvider,
+  components: [
+    NConfigProvider,
+    NMessageProvider,
     NNotificationProvider,
-    NButton ]
+    NButton
+  ]
 })
 
 export default naive

src/components/audio.vue

@@ -3,7 +3,7 @@
     name="audio"
     :size="20"
     :color="show && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
-    style="margin-left: 5px;"
+    style="margin-left: 8px;"
     @click="change"
   />
 </template>
@@ -11,10 +11,10 @@
 import { computed, ref } from 'vue'
 import useStore from '@/store'
 
-const show = ref(true)
+const emit = defineEmits<{(evt: 'callBack', value: boolean): void }>()
 const store = useStore()
 const rtcConnected = computed(() => store.rtcConnected)
-const emit = defineEmits<{(evt: 'callBack', value: boolean): void }>()
+const show = ref(true)
 
 function change() {
   if (!rtcConnected.value) return

src/components/gauge.vue

@@ -103,7 +103,14 @@ onUnmounted(() => {
 </template>
 <style scoped>
 #charts {
-  width: 100%;
-  height: 100%;
+  width: 30vw;
+  height: 15vw;
+  max-width: 460px;
+  max-height: 230px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
 }
 </style>

src/components/icon.vue

@@ -6,9 +6,10 @@ const props = defineProps<{
   size?: number,
   color?: string
 }>()
-const symbolId = computed(() => `#icon-${props.name}`)
-const newColor = computed(() => `${props.color ?? '#ccc'}`)
 const newSize = computed(() => `${props.size ? (`${props.size}px`) : '16px'}`)
+const newColor = computed(() => `${props.color ?? '#ccc'}`)
+const symbolId = computed(() => `#icon-${props.name}`)
+
 </script>
 <template>
   <svg

src/components/mic.vue

@@ -3,7 +3,7 @@
     name="mic"
     :size="22"
     :color="show && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
-    style="margin-left: 5px;"
+    style="margin-left: 6px;"
     @click="change"
   />
 </template>
@@ -15,12 +15,12 @@ import {
 } from 'vue'
 import useStore from '@/store'
 
-const props = withDefaults(defineProps<{ time?: number }>(), { time: 5000 })
+const props = withDefaults(defineProps<{ value?: number }>(), { value: 5000 })
 const emit = defineEmits<{(evt: 'callBack', value: Blob): void }>()
-const store = useStore()
 const notice = useNotification()
-const show = ref(false)
+const store = useStore()
 const rtcConnected = computed(() => store.rtcConnected)
+const show = ref(false)
 let chunks = [] as Blob[]
 let audio = null as null | MediaRecorder
 let timer = null as Any
@@ -56,7 +56,7 @@ function change() {
   if (!rtcConnected.value) return
   show.value = !show.value
   if (!audio) return
-  if (show.value) { audio?.start(); timer = setTimeout(() => { show.value = false; audio?.stop() }, props.time) } else { audio?.stop(); clearTimeout(timer) }
+  if (show.value) { audio?.start(); timer = setTimeout(() => { show.value = false; audio?.stop() }, props.value) } else { audio?.stop(); clearTimeout(timer) }
   console.log('mic', show.value)
 }
 

src/components/steering.vue

@@ -0,0 +1,51 @@
+<template>
+  <Icon
+    name="stree"
+    :size="20"
+    :color="show && rtcConnected ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
+    style="margin-left: 7px;"
+  />
+</template>
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+import useStore from '@/store'
+
+const emit = defineEmits<{(evt: 'callBack', value: Any): void }>()
+const message = useMessage()
+const store = useStore()
+const rtcConnected = computed(() => store.rtcConnected)
+const show = ref(false)
+
+// 更新游戏手柄数据
+function updateGamepadData() {
+  const gamepads = navigator.getGamepads()
+  const gamepad = gamepads[0] // 获取第一个连接的游戏手柄
+  if (gamepad) {
+    // 显示游戏手柄数据
+    emit('callBack', gamepad)
+  }
+  // 循环更新数据
+  return requestAnimationFrame(updateGamepadData)
+}
+
+// 监听游戏手柄连接事件
+window.addEventListener('gamepadconnected', (event) => {
+  console.log('Gamepad connected:', event.gamepad)
+  show.value = true
+  updateGamepadData()
+})
+
+// 监听游戏手柄断开事件
+window.addEventListener('gamepaddisconnected', () => {
+  show.value = false
+  cancelAnimationFrame(updateGamepadData())
+  message.warning('控制器断开')
+})
+
+onUnmounted(() => {
+  cancelAnimationFrame(updateGamepadData())
+  window.removeEventListener('gamepadconnected', () => { show.value = false })
+  window.removeEventListener('gamepaddisconnected', () => { show.value = false })
+})
+</script>

src/components/topBar.vue

@@ -63,6 +63,12 @@ function close() {
   &-content {
     flex: 1;
     width: 100%;
+    display: flex;
+    align-items: flex-end;
+
+    &>* {
+      margin: 0 0 0 10px;
+    }
   }
 
   &-btns {

src/pages/room/index.vue

@@ -38,26 +38,34 @@ import topBar from '@/components/topBar.vue'
 import Gauge from '@/components/gauge.vue'
 import useStore from '@/store/index'
 
-const remoteVideo = ref(null as unknown as HTMLVideoElement)
 const RTC = new WebRtcService()
 const store = useStore()
 const mqtt = inject('MQTT') as Any
+const remoteVideo = ref(null as unknown as HTMLVideoElement)
+const gauge = ref({ speed: 0, num: 0 })
 const menuList = shallowRef([
   { name: '信号', value: 0, component: defineAsyncComponent(() => import('@/components/signal.vue')) },
   { name: '电量', value: 0, component: defineAsyncComponent(() => import('@/components/battery.vue')) },
   {
-    name: '录音',
-    value: 0,
-    callBack: (blob: Blob) => {
-      console.log('send audio', blob)
-    },
-    component: defineAsyncComponent(() => import('@/components/mic.vue'))
+    name: '方向盘',
+    component: defineAsyncComponent(() => import('@/components/steering.vue')),
+    callBack: () => {
+      console.log('方向盘')
+    }
+  },
+  {
+    name: '静音',
+    component: defineAsyncComponent(() => import('@/components/audio.vue')),
+    callBack: (mute: boolean) => RTC.muteRemoteAudio(mute)
   },
   {
-    name: '静音', value: 0, callBack: (mute: boolean) => RTC.muteRemoteAudio(mute), component: defineAsyncComponent(() => import('@/components/audio.vue'))
+    name: '录音',
+    component: defineAsyncComponent(() => import('@/components/mic.vue')),
+    callBack: (blob: Blob) => {
+      console.log('发送对讲', blob)
+    }
   }
 ])
-const gauge = ref({ speed: 0, num: 0 })
 
 watch(() => store.mqtt_message, async (value: { type: string, data?: RTCSessionDescriptionInit }) => {
   const { type, data } = value
@@ -82,17 +90,6 @@ onUnmounted(() => RTC.distory())
   height: 100%;
   position: relative;
 
-  &-bar {
-    :deep(.topBar-content) {
-      display: flex;
-      align-items: flex-end;
-
-      &>* {
-        margin: 0 0 0 10px;
-      }
-    }
-  }
-
   video {
     width: 100%;
     height: 100%;
@@ -101,17 +98,5 @@ onUnmounted(() => RTC.distory())
     font-size: 0;
     z-index: 1;
   }
-
-  &-gauge {
-    width: 30vw;
-    height: 15vw;
-    max-width: 460px;
-    max-height: 230px;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 2;
-  }
 }
 </style>