mod:设置

frontend/src/components/header-bar/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="header-bar">
     <div class="header-bar__menu">
-      <div v-for="(item, index) in menu" :key="index" class="header-bar__menu-item" @click="item.click">
-        <img v-if="item.icon" :src="item.icon" class="header-bar__menu-icon" />
-        <span class="header-bar__menu-name">{{ item.name }}</span>
+      <div v-for="(item, index) in menu" :key="index" class="header-bar__menu-item" @click="getItemClick(item)">
+        <img v-if="getItemIcon(item)" :src="getItemIcon(item)" class="header-bar__menu-icon" />
+        <span class="header-bar__menu-name">{{ getItemName(item) }}</span>
       </div>
     </div>
     <div class="header-bar__title">
@@ -13,7 +13,12 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { defineProps, reactive } from 'vue';
+import iconsz from './assets/shezhi@2x.png'
+import iconykq from './assets/yaokong@2x.png'
+import  icpList from '@/utils/ipc'
+import client from "@/stores/modules/client";
+const clientStore = client();
 
 // 定义 props
 const props = defineProps({
@@ -27,9 +32,52 @@ const props = defineProps({
   }
 });
 
+const menuType = reactive({
+  setting: {
+    name: '设置',
+    icon: iconsz,
+    click: openSeeting
+  },
+  remoteControl:{
+    name: '模拟遥控器',
+    icon: iconykq,
+    click: openSeeting
+
+  }
+});
+
+function getItemClick(item) {
+  const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
+  if (menuItem && menuItem.click) {
+    menuItem.click();
+  }
+}
+
+function getItemName(item) {
+  const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
+  return menuItem.name;
+}
+
+function getItemIcon(item) {
+  const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
+  return menuItem.icon;
+}
+
+function openSeeting() {
+  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
+  let params = {
+    title: '设置',
+    width: 900,
+    height: 630,
+    frame: true,
+    id: "seeting",
+    url: "http://localhost:3000/#/setting"
+  }
+  clientStore.ipc.send(icpList.utils.openMain, params);
+}
 </script>
 
-<style scoped>
+<style  lang="scss" scoped>
 .header-bar {
   position: fixed;
   app-drag: drag;
@@ -52,11 +100,18 @@ const props = defineProps({
 
 .header-bar__menu-item {
   display: flex;
+  justify-content: center;
   align-items: center;
-  margin-right: 10px;
+  padding: 2px 10px;
   cursor: pointer;
+
+
+  &:hover {
+    background: #dcdcdc;
+  }
 }
 
+
 .header-bar__menu-icon {
   width: 16px;
   height: 16px;

frontend/src/views/Home/index.vue

@@ -5,9 +5,10 @@
     title="拍摄物体镜头矫正"
     :menu="[
         {
-          name:'首页',
-          icon:'设置',
-          onClick: openSeeting
+          type:'setting'
+        },
+        {
+          type:'remoteControl'
         },
     ]"
   />