Browse Source

mod:设置

panqiuyao 8 months ago
parent
commit
f95b719cc4

+ 1 - 1
electron/config/config.default.js

@@ -17,7 +17,7 @@ module.exports = (appInfo) => {
   /**
    * 应用程序顶部菜单
    */
-  config.openAppMenu = true;
+  config.openAppMenu = false;
 
   /**
    * 主窗口

BIN
frontend/src/components/header-bar/assets/guanbi@2x.png


BIN
frontend/src/components/header-bar/assets/suoxiao@2x.png


+ 48 - 16
frontend/src/components/header-bar/index.vue

@@ -9,17 +9,35 @@
     <div class="header-bar__title">
       <span class="header-bar__text">{{ title }}</span>
     </div>
+    <div class="header-bar__buttons">
+      <div class="header-bar__button" @click="minimizeWindow">
+        <img :src="iconMinimize" class="header-bar__button-icon" />
+      </div>
+      <div class="header-bar__button" @click="closeWindow">
+        <img :src="iconClose" class="header-bar__button-icon" />
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 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 iconMinimize from './assets/suoxiao@2x.png' // 新增
+import iconClose from './assets/guanbi@2x.png' // 新增
+import icpList from '@/utils/ipc'
 import client from "@/stores/modules/client";
 const clientStore = client();
 
+// 定义 menu 项的类型
+interface MenuItem {
+  name?: string;    //名称
+  icon?: string;    // 图标
+  click?: () => void;   // 点击事件
+  type?: keyof typeof menuType; // 类型 menuType里面的值
+}
+
 // 定义 props
 const props = defineProps({
   title: {
@@ -27,7 +45,7 @@ const props = defineProps({
     required: true
   },
   menu: {
-    type: Array,
+    type: Array as () => MenuItem[],
     default: () => []
   }
 });
@@ -36,34 +54,33 @@ const menuType = reactive({
   setting: {
     name: '设置',
     icon: iconsz,
-    click: openSeeting
+    click: openSetting
   },
-  remoteControl:{
+  remoteControl: {
     name: '模拟遥控器',
     icon: iconykq,
-    click: openSeeting
-
+    click: openSetting
   }
 });
 
-function getItemClick(item) {
+function getItemClick(item: MenuItem) {
   const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
   if (menuItem && menuItem.click) {
     menuItem.click();
   }
 }
 
-function getItemName(item) {
+function getItemName(item: MenuItem) {
   const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
   return menuItem.name;
 }
 
-function getItemIcon(item) {
+function getItemIcon(item: MenuItem) {
   const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
   return menuItem.icon;
 }
 
-function openSeeting() {
+function openSetting() {
   clientStore.ipc.removeAllListeners(icpList.utils.openMain);
   let params = {
     title: '设置',
@@ -75,6 +92,16 @@ function openSeeting() {
   }
   clientStore.ipc.send(icpList.utils.openMain, params);
 }
+
+// 新增
+function minimizeWindow() {
+  clientStore.ipc.send(icpList.utils.minimizeWindow);
+}
+
+// 新增
+function closeWindow() {
+  clientStore.ipc.send(icpList.utils.closeWindow);
+}
 </script>
 
 <style  lang="scss" scoped>
@@ -105,13 +132,11 @@ function openSeeting() {
   padding: 2px 10px;
   cursor: pointer;
 
-
   &:hover {
     background: #dcdcdc;
   }
 }
 
-
 .header-bar__menu-icon {
   width: 16px;
   height: 16px;
@@ -147,14 +172,21 @@ function openSeeting() {
 }
 
 .header-bar__button {
-  margin-left: 10px;
-  padding: 5px 10px;
+  width: 30px;
+  height: 30px;
   border: none;
-  background-color: #f0f0f0;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .header-bar__button:hover {
   background-color: #e0e0e0;
 }
+
+.header-bar__button-icon {
+  width: 16px;
+  height: 16px;
+}
 </style>

+ 10 - 0
frontend/src/views/Photography/check.vue

@@ -1,4 +1,13 @@
 <template>
+
+  <headerBar
+      title="拍摄物体镜头矫正"
+      :menu="[
+        {
+          type:'setting'
+        },
+    ]"
+  />
   <div class="check-wrap flex">
 
     <div class="check-page flex-col">
@@ -54,6 +63,7 @@ import  { watchEffect } from  'vue'
 import client from "@/stores/modules/client";
 import icpList from '@/utils/ipc'
 import useUserInfo from "@/stores/modules/user";
+import headerBar from '@/components/header-bar/index.vue'
 const clientStore = client();
 
 const show = ref(true)