feat(remote-control): 添加左右脚配置切换功能

- 在遥控器界面添加左脚配置和右脚配置按钮
- 实现右键点击切换配置的功能
- 添加配置选择上下文菜单显示已保存的配置选项
- 集成API调用来获取和设置左右脚配置
- 添加点击其他区域关闭配置菜单的功能
- 移除代码中的多余引用和变量
- 优化样式实现弹出菜单的视觉效果

frontend/src/views/Photography/mixin/usePhotography.ts

@@ -851,6 +851,7 @@ export default function usePhotography() {
       } catch (e) { }
     }
 
+
     // 监听蓝牙扫描
     checkInfoStore.set_blue_tooth_scan_NO('')
     watchEffect(async () => {

frontend/src/views/Photography/shot.vue

@@ -43,6 +43,7 @@
                 <img  referrerpolicy="no-referrer"
                      src="@/assets/images/Photography/wifi.png" style="width: 60px" />
               </div>
+
               <div class="remote-control-wrap">
                 <RemoteControl
                     @onRemoteControl="onRemoteControl"
@@ -226,7 +227,7 @@ const selectedGoods = ref<Set<string>>(new Set())
 
 // thumbnails
 const containerRef = ref<HTMLElement | null>(null)
-const { thumbnailMap, observe, stop, placeholderDataUrl } = useThumbnails(getFilePath)
+const { thumbnailMap, observe, stop } = useThumbnails(getFilePath)
 
 // 全选状态
 const isSelectAll = computed(() => {
@@ -534,6 +535,8 @@ watch(goodsList, () => {
         .shooting-container {
           width: 353px;
           height: auto;
+
+
           .remote-control-wrap {
             width: 353px;
             height: 300px;

frontend/src/views/RemoteControl/index.vue

@@ -7,11 +7,19 @@
 
   <div class="remote-control_main-container">
     <div class="te-c"  style="color: #8C92A7">遥控器模拟器</div>
-    <el-row align="middle" class="mar-top-50">
+
+    <el-row align="middle"class="mar-top-20" >
+      <el-col :span="3"></el-col>
+      <el-col :span="6"><div class="button up"  @click="handleLeftRightClick($event, 'left')"><span style="font-size: 12px;">左脚配置</span></div></el-col>
+      <el-col :span="6"></el-col>
+      <el-col :span="6"><div class="button up"  @click="handleLeftRightClick($event, 'right')"><span style="font-size: 12px;">右脚配置</span></div></el-col>
+      <el-col :span="3"></el-col>
+    </el-row>
+    <el-row align="middle" >
       <el-col :span="3"></el-col>
-      <el-col :span="6"><div class="button up" @click="runLeft">左脚</div></el-col>
+      <el-col :span="6"><div class="button up" title="单击鼠标右键可切换配置" @click="runLeft" @contextmenu="handleLeftRightClick($event, 'left')">左脚</div></el-col>
       <el-col :span="6"><div class="button up" @click="run_take_picture">拍照</div></el-col>
-      <el-col :span="6"><div class="button up" @click="runRight">右脚</div></el-col>
+      <el-col :span="6"><div class="button up" title="单击鼠标右键可切换配置" @click="runRight" @contextmenu="handleLeftRightClick($event, 'right')">右脚</div></el-col>
       <el-col :span="3"></el-col>
     </el-row>
     <el-row align="middle">
@@ -27,19 +35,51 @@
       </el-col>
       <el-col :span="3"></el-col>
     </el-row>
+
+    <!-- 左脚配置菜单 -->
+    <div v-if="showLeftMenu" class="context-menu" :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }" @click.stop>
+      <div class="menu-title">左脚配置</div>
+      <div class="menu-items">
+        <div
+            v-for="tab in leftTabs"
+            :key="tab.id"
+            class="menu-item"
+            :class="{ active: leftConfigId === tab.id }"
+            @click="selectConfig('left', tab.id)"
+        >
+          {{ leftConfigId === tab.id ? '✓ ' : '' }}{{ tab.mode_name }}
+      </div>
+      </div>
+    </div>
+
+    <!-- 右脚配置菜单 -->
+    <div v-if="showRightMenu" class="context-menu" :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }" @click.stop>
+      <div class="menu-title">右脚配置</div>
+      <div class="menu-items">
+        <div
+          v-for="tab in rightTabs"
+          :key="tab.id"
+          class="menu-item"
+          :class="{ active: rightConfigId === tab.id }"
+          @click="selectConfig('right', tab.id)"
+        >
+          {{ rightConfigId === tab.id ? '✓ ' : '' }}{{ tab.mode_name }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 点击其他地方关闭菜单 -->
+    <div v-if="showLeftMenu || showRightMenu" class="menu-overlay" @click="closeMenus"></div>
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps } from 'vue'
-import headerBar from '@/components/header-bar/index.vue'
-import icpList from '@/utils/ipc'
-import client from "@/stores/modules/client";
+import { defineEmits, defineProps, ref } from 'vue'
 import socket from "@/stores/modules/socket";
-import {Switch} from "@element-plus/icons-vue";
+import { getTopTabs, setLeftRightConfig } from '@/apis/setting';
+import { ElMessage } from 'element-plus';
 
-const clientStore = client();
 // 初始化 WebSocket 状态管理
 const socketStore = socket()
 
@@ -48,6 +88,16 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['onRemoteControl'])
+
+// 配置切换相关
+const leftConfigId = ref(0)
+const rightConfigId = ref(0)
+const leftTabs = ref([]) // 左脚配置选项
+const rightTabs = ref([]) // 右脚配置选项
+const showLeftMenu = ref(false) // 显示左脚菜单
+const showRightMenu = ref(false) // 显示右脚菜单
+const menuPosition = ref({ x: 0, y: 0 }) // 菜单位置
+
 const runLeft = async () => {
   emit('onRemoteControl','left')
 }
@@ -84,6 +134,79 @@ const oneClickStop = () => {
   })
 }
 
+
+// 右击左脚按钮
+const handleLeftRightClick = (event, type) => {
+  event.preventDefault()
+  menuPosition.value = { x: event.clientX, y: event.clientY }
+
+  if (type === 'left') {
+    showLeftMenu.value = true
+    showRightMenu.value = false
+    loadLeftConfig()
+  } else {
+    showRightMenu.value = true
+    showLeftMenu.value = false
+    loadRightConfig()
+  }
+}
+
+// 加载左脚配置
+const loadLeftConfig = async () => {
+  try {
+    const result = await getTopTabs({ type: 0 })
+    if (result.code === 0) {
+      leftConfigId.value = result.data.select_configs.left
+      leftTabs.value = result.data.tabs
+    }
+  } catch (error) {
+    console.error('加载左脚配置失败:', error)
+  }
+}
+
+// 加载右脚配置
+const loadRightConfig = async () => {
+  try {
+    const result = await getTopTabs({ type: 1 })
+    if (result.code === 0) {
+      rightConfigId.value = result.data.select_configs.right
+      rightTabs.value = result.data.tabs
+    }
+  } catch (error) {
+    console.error('加载右脚配置失败:', error)
+  }
+}
+
+// 选择配置
+const selectConfig = async (type, configId) => {
+  try {
+    const result = await setLeftRightConfig({
+      type: type,
+      id: configId
+    })
+
+    if (result.code === 0) {
+      if (type === 'left') {
+        leftConfigId.value = configId
+        showLeftMenu.value = false
+      } else {
+        rightConfigId.value = configId
+        showRightMenu.value = false
+      }
+      ElMessage.success('配置切换成功')
+    }
+  } catch (error) {
+    console.error('切换配置失败:', error)
+    ElMessage.error('配置切换失败')
+  }
+}
+
+// 关闭菜单
+const closeMenus = () => {
+  showLeftMenu.value = false
+  showRightMenu.value = false
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -140,4 +263,54 @@ const oneClickStop = () => {
   cursor: not-allowed;
   pointer-events: none;
 }
+
+.context-menu {
+  position: fixed;
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  min-width: 120px;
+  max-width: 200px;
+}
+
+.menu-title {
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #606266;
+  border-bottom: 1px solid #ebeef5;
+  background-color: #f5f7fa;
+}
+.menu-items {
+
+  max-height: 250px;
+  overflow: auto;
+}
+.menu-item {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+
+  &.active {
+    color: #2957FF;
+    font-weight: 600;
+  }
+}
+
+.menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1999;
+}
 </style>

frontend/src/views/Setting/index.vue

@@ -20,7 +20,7 @@
         <img src="@/assets/images/setting/icon3a.png" class="nav-icon" v-else/>
         <span>其他设置</span>
       </div>
-      <div class="nav-item" v-if="configInfoStore.appModel === 1"  :class="{'active': activeIndex === 4}"  @click="toggleTab(4)" v-log="{ describe: { action: '点击切换设置Tab', tab: '左右脚程序设置' } }">
+      <div class="nav-item"  :class="{'active': activeIndex === 4}"  @click="toggleTab(4)" v-log="{ describe: { action: '点击切换设置Tab', tab: '左右脚程序设置' } }">
         <img src="@/assets/images/setting/icon4.png" class="nav-icon" v-if="activeIndex !== 4"/>
         <img src="@/assets/images/setting/icon4a.png" class="nav-icon" v-else/>
         <span>左右脚程序设置</span>