<template>
  <qm-dialog
    v-if="store.setting.uiSetting['shortCut.modal']"
    top="10%"
    width="442px"
    height="508px"
    title="快捷键"
    :enableResize="false"
    @close="close"
  >
    <a-row class="short-cut-container">
      <a-col :span="11">
        <div class="cut-item">
          <h4>通用</h4>
        </div>
        <div class="cut-item">
          <div>放大</div>
          <div><span class="cut-key">+</span></div>
        </div>
        <div class="cut-item">
          <div>缩小</div>
          <div><span class="cut-key">-</span></div>
        </div>
        <div class="cut-item">
          <div>向上滑动</div>
          <div><span class="cut-key">w</span></div>
        </div>
        <div class="cut-item">
          <div>向下滑动</div>
          <div><span class="cut-key">s</span></div>
        </div>
        <div class="cut-item">
          <div>向左滑动</div>
          <div><span class="cut-key">a</span></div>
        </div>
        <div class="cut-item">
          <div>向右滑动</div>
          <div><span class="cut-key">d</span></div>
        </div>
        <div class="cut-item">
          <div>图片旋转</div>
          <div><span class="cut-key">鼠标右键</span></div>
        </div>
        <div class="cut-item">
          <div>全屏窗口</div>
          <div><span class="cut-key">F11</span></div>
        </div>
        <div class="cut-item">
          <div>取消全屏</div>
          <div><span class="cut-key">F11</span></div>
        </div>
        <div class="cut-item">
          <div>刷新页面</div>
          <div><span class="cut-key">F5</span></div>
        </div>
      </a-col>
      <a-col :span="13">
        <div class="cut-item">
          <h4>轨迹模式</h4>
        </div>
        <div class="cut-item">
          <div>交卷</div>
          <div>
            <span class="cut-key">Ctrl</span>
            <span>+</span>
            <span class="cut-key">Enter</span>
          </div>
        </div>
        <div class="cut-item">
          <div>切题</div>
          <div><span class="cut-key">Tab</span></div>
        </div>
        <div class="cut-item">
          <div>键盘选分</div>
          <div><span class="cut-key">数字 或 .</span></div>
        </div>
        <div class="cut-item">
          <div>取消选分</div>
          <div><span class="cut-key">Esc</span></div>
        </div>
        <div class="cut-item"></div>

        <div class="cut-item">
          <h4>键盘模式</h4>
        </div>
        <div class="cut-item">
          <div>切题</div>
          <div>
            <span class="cut-key">←</span>
            <span>或</span>
            <span class="cut-key">→</span>
          </div>
        </div>
        <div class="cut-item">
          <div>确认输入</div>
          <div><span class="cut-key">Enter</span></div>
        </div>
        <div class="cut-item">
          <div>撤销上次</div>
          <div><span class="cut-key">Backspace(删除)</span></div>
        </div>
        <div class="cut-item">
          <div>取消输入</div>
          <div><span class="cut-key">Esc</span></div>
        </div>
      </a-col>
    </a-row>
  </qm-dialog>
</template>

<script setup lang="ts">
import { store } from "@/store/store";

const close = () => {
  store.setting.uiSetting["shortCut.modal"] = false;
};
</script>
