ocr-web/src/layout/components/Header/ShortcutModal.vue

<script lang="ts" setup>
import { defineOptions, ref } from "vue";

defineOptions({ name: "ShortcutModal" });

const show = ref(false);

const cardStyle = {
  "width": "800px",
  "--n-padding-bottom": "10px",
  "--n-padding-left": "10px",
  "padding-bottom": "100px",
};

function showModal() {
  show.value = true;
}

function closeModal() {
  show.value = false;
}

defineExpose({
  showModal,
});
</script>

<template>
  <div>
    <n-modal
      v-model:show="show"
      transform-origin="center"
      style="width: 808px; height: 606px; margin: -27px auto 0 !important"
    >
      <n-card
        :style="cardStyle"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="wrapper">
          <div class="wrapper-header">
            <span class="wrapper-left">全局快捷键</span>
            <div class="wrapper-right">
              按
              <img
                class="img-question"
                src="@/assets/images/question.png"
                alt=""
                style="width: 18px; height: 18px"
              >查看快捷键的信息

              <img
                class="img-close"
                src="@/assets/images/close.png"
                alt=""
                style="width: 20px; height: 20px"
                @click="closeModal"
              >
            </div>
          </div>
          <n-divider style="margin-bottom: 32px" />
          <div class="title">
            全局快捷方式
          </div>
          <div class="wrapper-global">
            <table style="margin-left: 47px; width: 180px">
              <tr>
                <td><div class="key" data-key="g h" /></td>
                <td>进入“一键查看”主页</td>
              </tr>
              <tr>
                <td><div class="key" data-key="g t" /></td>
                <td>进入“任务审批”主页</td>
              </tr>
              <tr>
                <td><div class="key" data-key="g a" /></td>
                <td>进入“AI工单”主页</td>
              </tr>
              <tr>
                <td><div class="key" data-key="g e" /></td>
                <td>进入“任务终审”主页</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n r" /></td>
                <td>快速打开备忘录</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n t" /></td>
                <td>新建筛选过滤条件</td>
              </tr>
              <tr>
                <td><div class="key" data-key="n n" /></td>
                <td>打开可疑文件夹</td>
              </tr>
            </table>
            <table style="height: 30%; margin-left: 180px">
              <tr>
                <td><div class="key" data-key="[" /></td>
                <td>隐藏/显示当前场景左侧筛选区</td>
              </tr>
              <tr>
                <td><div class="key" data-key="s" /></td>
                <td>打开当前场景搜索</td>
              </tr>
              <tr>
                <td><div class="key" data-key="/" /></td>
                <td>顶部综合搜索</td>
              </tr>
              <tr>
                <td><div class="key" data-key="esc" /></td>
                <td>从字段中取消光标聚集</td>
              </tr>
              <tr>
                <td><div class="key" data-key="mm" /></td>
                <td>唤醒AI智能助理对话框</td>
              </tr>
            </table>
          </div>
          <n-divider style="margin: 24px 24px 32px 24px; color: #d9d9d9" />
          <div class="title" style="margin-top: -16.5px">
            任务审批/任务终审/AI工单明细动作
          </div>
          <div class="wrapper-request">
            <table style="margin-left: 47px; width: 180px">
              <tr>
                <td style="text-align: left; width: 53px">
                  <div class="key" data-key="p p" />
                </td>
                <td>通过</td>
              </tr>
              <tr>
                <td style="text-align: left">
                  <div class="key" data-key="x x" />
                </td>
                <td>不通过</td>
              </tr>
            </table>
            <table style="margin-left: 180px">
              <tr>
                <td><div class="key" data-key="c" /></td>
                <td>关闭（关闭当前场景弹窗）</td>
              </tr>
              <tr>
                <td>
                  <div class="key" data-key="&larr;" />
                  <span>/</span>
                  <div class="key" data-key="&rarr;" />
                </td>
                <td>打开上一条/下一条信息切换</td>
              </tr>
            </table>
          </div>
        </div>
        <!-- <n-divider /> -->

        <!-- <template #footer>
          <div class="wrapper-footer">
            <n-button type="info" @click="closeModal">
              确认
            </n-button>
            <n-button secondary style="margin-left:15px" @click="closeModal">
              取消
            </n-button>
          </div>
        </template> -->
      </n-card>
    </n-modal>
  </div>
</template>

<style lang="less" scoped>
.wrapper-footer {
  margin-top: -20px;
}
.wrapper {
  .wrapper-header {
    padding: 14px 0 14px 0;
    padding-bottom: 0;
  }

  .img-question {
    width: 16px;
    height: 16px;
    margin: 0 2px;
  }

  .img-close {
    width: 16px;
    height: 16px;
    margin-left: 16px;
    cursor: pointer;
  }

  .wrapper-right {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #666666;
    line-height: 22px;
    display: flex;
    align-items: center;
  }

  .wrapper-left {
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 600;
    text-align: left;
    color: #000000;
    line-height: 25px;
  }

  .title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 47px;
    color: #333333;
    font-weight: 600;
    // 分割线自带24px间距
  }
  &-header {
    display: flex;
    justify-content: space-between;

    &-left {
      font-weight: bold;
      font-size: 16px;
    }

    &-right {
      display: inline-flex;
    }

    &-close {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    &-mark {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid red;
      color: red;
      border-radius: 50%;
    }

    &-icon {
      background: #fff;
      display: inline-block;
      width: 18px;
      height: 1px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);

      &:after {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        background: #fff;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
      }
    }
  }

  &-request,
  &-global {
    display: flex;

    table {
      tr td:first-child {
        text-align: right;
        padding-right: 10px;
        color: #515457;
      }
      tr td {
        color: #333333;
      }
      tr span {
        padding: 0 10px;
      }
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }

  .key {
    border-radius: 8px;
    display: inline-block;
    box-sizing: content-box;
    font-size: 16px;
    text-align: center;
    padding: 2px 6px;
    border: 1px solid #d6d6d6;
    border-left: 3px solid #d6d6d6;
    border-bottom: 3px solid #d6d6d6;
    background-color: #fdfdfd;
    // color: #333333;
    font-weight: bold;
  }

  .key[data-key]::after {
    position: relative;
    z-index: 1;
    content: attr(data-key);
  }
}
</style>