|
|
@@ -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>
|