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">
      <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="">查看快捷键的信息

              <img class="img-close" src="@/assets/images/close.png" alt="" @click="closeModal">
            </div>
          </div>
          <n-divider />
          <div class="title">
            全局快捷方式
          </div>
          <div class="wrapper-global">
            <table style="margin-left: 100px;">
              <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 />
          <div class="title">
            任务审批/任务终审/AI工单明细动作
          </div>
          <div class="wrapper-request">
            <table style="margin-left: 100px;">
              <tr>
                <td><div class="key" data-key="c" /></td>
                <td>关闭（关闭当前场景弹窗）</td>
              </tr>
              <tr>
                <td><div class="key" data-key="p p" /></td>
                <td>通过</td>
              </tr>
              <tr>
                <td><div class="key" data-key="x x" /></td>
                <td>不通过</td>
              </tr>
            </table>
            <table style="margin-left: 155px;">
              <tr>
                <td><div class="key" data-key="t t" /></td>
                <td>真</td>
              </tr>
              <tr>
                <td><div class="key" data-key="f f" /></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;
    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: Regular;
    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: #333333;
    line-height: 25px;
  }

  .title{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 30px;
  }
  &-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;
    font-weight: bold;
    text-align: center;
    padding: 2px 6px;
    border: 1px solid #d6d6d6;
    border-left: 3px solid #d6d6d6;
    border-bottom: 3px solid #d6d6d6;
    background-color: #fdfdfd;
  }

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