caseEditor/src/view/case/draw/header.vue

<template>
  <div class="header-top" :style="{flexDirection: route.name == 'drawShareFile'?'row-reverse':'row'}">
    <el-button type="primary"  v-show="route.name != 'drawShareFile'"  plain @click="emit('backPage')">返 回</el-button>
    <h2 v-if="route.name == 'drawShareFile'">现场勘查平面图</h2>
    <h2 v-else>创建{{ BoardTypeDesc[type] }}</h2>
    <div class="right-pano">
      <div class="actions">
        <i
          class="iconfont icon-repeal"
          @click="emit('back')"
          :class="{ disable: backDisabled }"
        />
        <i
          class="iconfont icon-recover"
          @click="emit('forward')"
          :class="{ disable: forwardDisabled }"
        />
        <el-popover placement="bottom-start" trigger="hover" width="300">
          <template #reference>
            <i class="iconfont icon-keyboard" />
          </template>
          <h4 class="quistart-title">快捷键</h4>
          <el-form ref="form" label-width="70px" class="quistart">
            <el-form-item label="撤销">
              <el-input model-value="Ctrl + Z" disabled />
            </el-form-item>
            <el-form-item label="重做">
              <el-input model-value="Ctrl + Y" disabled />
            </el-form-item>
            <el-form-item label="删除">
              <el-input model-value="Backspace、Delete" disabled />
            </el-form-item>
            <el-form-item label="中心定位">
              <el-input model-value="Space" disabled />
            </el-form-item>
          </el-form>
        </el-popover>
      </div>
      <el-button type="primary" plain @click="emit('save')">保存</el-button>
      <el-button plain @click="emit('export')">导出</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouteName, router } from "@/router";
import { BoardType } from "@/store/caseFile";
import { BoardTypeDesc } from "@/constant/caseFile";
import { onMounted, onUnmounted } from "vue";
import { inputIng } from "./c";

const route = router.currentRoute.value;

const props = defineProps<{
  type: BoardType;
  forwardDisabled?: boolean;
  backDisabled?: boolean;
}>();

const emit = defineEmits<{
  (e: "backPage"): void;
  (e: "forward"): void;
  (e: "back"): void;
  (e: "viewInit"): void;
  (e: "save"): void;
  (e: "export"): void;
}>();

const keydownHandler = (ev: KeyboardEvent) => {
  if (ev.keyCode === 32) {
    emit("viewInit");
  } else if (["Control", "Ctrl"].includes(ev.key)) {
    const downKey = ev.key;
    const secondaryHandler = (ev: KeyboardEvent) => {
      if (!inputIng.value) {
        if (ev.key.toUpperCase() === "Y" && !props.forwardDisabled) {
          emit("forward");
        } else if (ev.key.toUpperCase() === "Z" && !props.backDisabled) {
          emit("back");
        }
      }
    };
    window.addEventListener("keydown", secondaryHandler);
    window.addEventListener("keyup", function upHandler(ev) {
      if (ev.key === downKey) {
        window.removeEventListener("keydown", secondaryHandler);
        window.removeEventListener("keyup", upHandler);
      }
    });
  }
};
onMounted(() => window.addEventListener("keydown", keydownHandler));
onUnmounted(() => window.removeEventListener("keydown", keydownHandler));
</script>

<style scoped lang="scss">
.header-top {
  position: relative;

  h2 {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff;
    pointer-events: none;
  }
}

.right-pano {
  display: flex;
  align-items: center;
}

.actions {
  margin-right: 60px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 15px;

  > * {
    cursor: pointer;
  }

  > *:not(:last-child) {
    margin-right: 32px;
  }
}

.quistart {
  padding: 12px 16px;
}
.quistart-title {
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 7px;
  padding: 5px 16px 4px;
  font-weight: 500;
  font-size: 16px;
  font-weight: normal;
  border-bottom: 1px solid #f0f0f0;
}
</style>

<style lang="scss">
.header-top {
  .el-button--primary:focus,
  .el-button--primary:active,
  .el-button--primary:hover,
  .el-button--primary:focus {
    --el-button-hover-text-color: var(--el-color-primary);
    --el-button-hover-bg-color: var(--el-fill-color-blank);
    --el-button-hover-border-color: var(--el-color-primary);

    --el-button-active-text-color: var(--el-color-primary);
    --el-button-active-border-color: var(--el-color-primary);
    --el-button-active-bg-color: var(--el-fill-color-blank);
  }
}
</style>