SpectralPlot/src/components/menubar.vue

<script >
import { BDropdownItem,BDropdown,BDropdownDivider,BButtonGroup,BButton,BModal,BNavbar,BNavbarBrand,BNavbarNav,BNavItem,BNavItemDropdown,BToast,useToast } from 'bootstrap-vue-next';

import { ref,Teleport} from 'vue';

import EventBus from "../eventBus.js";

export default {
  name: 'menubar',
  components: {
    BDropdownItem,
    BDropdown,
    BDropdownDivider,
    BButtonGroup,
    BButton,
    BModal,
    BNavbar,
    BNavbarBrand,
    BNavbarNav,
    BNavItem,
    BNavItemDropdown,
    BToast

  },
  emits: ['menubalclicked'],
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      modal:false,
      DCbutton:{
        state:"init",

      },
      WRbutton:{
        state:"init",

      }

    }
  },
  setup(props, context) {
    const active = ref(false);





    return {active}

  },
  mounted() {
    // 仅在挂载时注册总线，不在这里绑定全局键盘事件（避免 KeepAlive 导致的重复/遗留绑定）
    EventBus.on('SetMenubutton',this.setbutton);
  },
  activated() {
    // 仅在当前页面处于激活状态时绑定
    window.addEventListener("keydown", this.handlekeydown);
  },
  deactivated() {
    // 从可见切换为缓存（隐藏）时，解绑，避免隐藏页误触发
    window.removeEventListener("keydown", this.handlekeydown);
  },
  beforeUnmount() {
    // 彻底卸载时，兜底解绑
    window.removeEventListener("keydown", this.handlekeydown);
    EventBus.off && EventBus.off('SetMenubutton', this.setbutton);
  },
  methods: {
    setbutton(command){
      if (command.name == "DC"){
        this.DCbutton.state = command.state;
      }
      if (command.name == "WR"){
        this.WRbutton.state = command.state;
      }

    },
    
    showbox(){
      EventBus.emit('showbox',"hello","提示11")
    },
    changemainvue() {
      EventBus.emit('changemainvue');
    },

    onmenuclick(type, name) {




      console.log("menu " + name + " click");
      let command = {
        name: name,
        type: type
      }
      this.$emit("menubalclicked", command)
    },
    handlekeydown(event) {
      // 在可编辑环境中不触发应用快捷键
      const t = event.target || {};
      const tag = (t.tagName || '').toLowerCase();
      const isEditable = t.isContentEditable || tag === 'input' || tag === 'textarea' || tag === 'select';
      if (isEditable) return;

      // 只处理来自本应用根节点(#app)内的事件，忽略外部悬浮窗/插件
      const appRoot = document.getElementById('app');
      if (!appRoot || !appRoot.contains(event.target)) return;

      // 不劫持系统复制快捷键 Ctrl+C
      if (event.ctrlKey && !event.shiftKey && (event.key === 'c' || event.key === 'C')) {
        return;
      }

      if (event.ctrlKey) {
        if (event.key == "n" || event.key == "N") {
          this.onmenuclick('Set', 'Workmode');
        }
        if (event.key == "d" || event.key == "D") {
          this.onmenuclick('Set', 'DevInfo');
        }
        if (event.key == "w" || event.key == "W") {
          this.onmenuclick('Set', 'Weavelenth');
        }
        // 将“定标”快捷键改为 Ctrl + Shift + C，避免与系统复制冲突
        if (event.shiftKey && (event.key == "c" || event.key == "C")) {
          this.onmenuclick('Set', 'Calibrate');
        }
      }
    }
  }




}

</script>


<!--<script setup lang="ts">-->
<!--import { BDropdownItem,BDropdown,BDropdownDivider,BButtonGroup,BButton,BModal,BNavbar,BNavbarBrand,BNavbarNav,BNavItem,BNavItemDropdown,BToast,useToast } from 'bootstrap-vue-next';-->
<!--import { ref} from 'vue';-->
<!--const {show1} = useToast();-->
<!--const active = ref(false)-->
<!--</script>-->
<template>
  <BNavbar variant="dark" v-b-color-mode="'dark'" style="height: 5vh">

    <BNavbarNav>
      <BNavItemDropdown text="文件" right>
<BDropdownItem href="#">新建</BDropdownItem>
        <BDropdownItem href="#"  >打开</BDropdownItem>
        <BDropdownItem href="#">保存</BDropdownItem>
        <BDropdownItem href="#">另存为</BDropdownItem>
        <BDropdownDivider></BDropdownDivider>
        <BDropdownItem href="#">退出</BDropdownItem>
        <BDropdownItem href="#"  @click="onmenuclick('File','Advance')">高级</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('info','help')">帮助</BDropdownItem>
      </BNavItemDropdown>

<!--      &lt;!&ndash; Navbar dropdowns &ndash;&gt;-->


      <BNavItemDropdown text="设置" right>
        <BDropdownItem  @click="onmenuclick('Set','Workmode')">工作模式</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('Set','DevInfo')">设备信息</BDropdownItem>
        <!-- <BDropdownItem  @click="onmenuclick('Set','Weavelenth')">波长系数</BDropdownItem> -->
        <BDropdownItem  @click="onmenuclick('Set','Weavelenthcoeff')">波长设定</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('Set','Calibrate')">定标</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('Set','CalibrateHH3')">HH3定标</BDropdownItem>
      </BNavItemDropdown>

      <BNavItemDropdown text="窗口" right>
       

       <BDropdownItem  @click="changemainvue()">数据查看</BDropdownItem>
<!--        <BDropdownItem   >ES</BDropdownItem>-->
<!--        <BDropdownItem href="#">RU</BDropdownItem>-->
<!--        <BDropdownItem href="#">FA</BDropdownItem>-->
     </BNavItemDropdown>





<!--      <Teleport to="body">-->
<!--        <div class="toast-container  position-fixed " style="top:0px;right: 0px;width: 300px" >-->
<!--      <BToast v-model="active" variant="info" interval="10" value="100" progress-props="{-->
<!--          variant: 'danger',-->
<!--          },">-->
<!--        <template #title>-->
<!--          Title-->
<!--        </template>-->
<!--        你好-->
<!--      </BToast>-->
<!--          </div>-->
<!--      </Teleport>-->
<!--      <BButton @click="active = !active">Toggle</BButton>-->
    </BNavbarNav>
    <div class="btgroup">
      <b-button variant="secondary" pill class="siglebt"  @click="onmenuclick('Work','OPT')">OPT</b-button>
      <b-button :variant='DCbutton.state=="OK"?"success":"secondary"' pill class="siglebt"  @click="  onmenuclick('Work','DC') ">DC</b-button>

      <b-button :variant='WRbutton.state=="OK"?"success":"secondary"' pill class="siglebt" @click="onmenuclick('Work','WR')">WR</b-button>
      <b-button variant="secondary" pill class="siglebt"  disabled  @click="onmenuclick('Work','Rad')">Rad</b-button>
      <b-button variant="secondary" pill class="siglebt"    @click="onmenuclick('Work','Save')">Save</b-button>

    </div>
  </BNavbar>
</template>

<style scoped>
.navbar {
  background-color: #f8f9fa;
  width: 100vw;
}
.btgroup{
  position: absolute;
  right: 15%;
}
.siglebt{
  radio: 50%;
  font-size: 10px;
  height: 40px;
  width: 40px;
  text-align: center;
  padding: 0px;
  margin-left: 10px;
}
</style>