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

<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="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">
      <span class="header-bar__text">{{ title }}</span>
    </div>
    <div class="header-bar__buttons" >
      <div class="header-bar__button header-bar__button__user" v-if="showUser">


        <el-dropdown>
          <span class="el-dropdown-link">
           {{useUserInfoStore.userInfo.account_name || useUserInfoStore.userInfo.real_name || useUserInfoStore.userInfo.login_name}}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <div class="header-bar_blank"></div>
</template>

<script setup lang="ts">
import { defineProps, reactive } from 'vue';
import useUserInfo from "@/stores/modules/user";
import { useRouter} from "vue-router";
import iconsz from './assets/shezhi@2x.png'
import iconykq from './assets/yaokong@2x.png'
import iconMinimize from './assets/suoxiao@2x.png' // 新增
import iconClose from './assets/guanbi@2x.png' // 新增
import icpList from '@/utils/ipc'
import { getRouterUrl } from '@/utils/appfun'
import client from "@/stores/modules/client";
const clientStore = client();
const useUserInfoStore = useUserInfo();

// 定义 menu 项的类型
interface MenuItem {
  name?: string;    //名称
  icon?: string;    // 图标
  click?: () => void;   // 点击事件
  type?: keyof typeof menuType; // 类型 menuType里面的值
}

// 定义 props
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  menu: {
    type: Array as () => MenuItem[],
    default: () => []
  },
  showUser:{
    type: Boolean,
    default: false
  }
});
const Router = useRouter()
const menuType = reactive({
  setting: {
    name: '设置',
    icon: iconsz,
    click: openSetting
  },
  remoteControl: {
    name: '模拟遥控器',
    icon: iconykq,
    click: openRemoteControl
  },
  developer: {
    name: '初始设备调频设置',
    icon: iconsz,
    click: openDeveloper
  }
});

function getItemClick(item: MenuItem) {
  const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
  if (menuItem && menuItem.click) {
    menuItem.click();
  }
}

function getItemName(item: MenuItem) {
  const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
  return menuItem.name;
}

function getItemIcon(item: MenuItem) {
  const menuItem = item.type ? { ...menuType[item.type], ...item } : item;
  return menuItem.icon;
}

function openSetting() {

  const { href } = Router.resolve({
    name: 'setting',
    query:{
      type:0,
    }
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '设置',
    width: 1920,
    height: 1080,
    frame: true,
    id: "seeting",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}


function openRemoteControl(){

  const { href } = Router.resolve({
    name: 'RemoteControl',
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '模拟遥控器',
    width: 350,
    height: 600,
    frame: true,
    id: "RemoteControl",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}


function openDeveloper(){

  const { href } = Router.resolve({
    name: 'developer',
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '初始设备调频设置',
    width: 900,
    height: 700,
    frame: true,
    id: "developer",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}

function loginOut(){
  useUserInfoStore.loginOut();
  useUserInfoStore.updateLoginShow(true)
}

// 新增
function minimizeWindow() {
  clientStore.ipc.send(icpList.utils.minimizeWindow);
}

// 新增
function closeWindow() {
  clientStore.ipc.send(icpList.utils.closeWindow);
}
</script>

<style  lang="scss" scoped>
.header-bar_blank {
  width: 100%;
  height:30px;
}
.header-bar {
  position: fixed;
  app-drag: drag;
  -webkit-app-region: drag;
  top: 0;
  width: 100%;
  height: 30px;
  z-index: 100000;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.header-bar__menu {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.header-bar__menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
  min-height: 30px;
  cursor: pointer;

  &:hover {
    background: #dcdcdc;
  }
}

.header-bar__menu-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.header-bar__menu-name {
  font-size: 14px;
}

.header-bar__title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  height: 30px;
  line-height: 30px;
  align-items: center;
  justify-content: center;
}

.header-bar__logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.header-bar__text {
  font-weight: 600;
  font-size: 14px;
  color: #474747;
}

.header-bar__buttons {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.header-bar__button {
  min-width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-bar__button__user {
  padding: 0 10px;
}
.header-bar__button:hover {
  background-color: #e0e0e0;
}

.header-bar__button-icon {
  width: 16px;
  height: 16px;
}
</style>