stmms-web/src/features/mark/ShortCutModal.vue

<template>
  <qm-dialog
    v-if="store.setting.uiSetting['shortCut.modal']"
    top="10%"
    width="500px"
    height="350px"
    title="快捷键"
    :enableResize="false"
    @close="close"
  >
    <div class="short-cut-container">
      <div class="row">
        <div class="tw-text-base tw-border-b-2 tw-mb-2">通用</div>
      </div>
      <div class="row">
        <div>放大</div>
        <div>+</div>
      </div>
      <div class="row">
        <div>缩小</div>
        <div>-</div>
      </div>
      <div class="row">
        <div>向上滑动</div>
        <div>w</div>
      </div>
      <div class="row">
        <div>向下滑动</div>
        <div>s</div>
      </div>
      <div class="row">
        <div>向左滑动</div>
        <div>a</div>
      </div>
      <div class="row">
        <div>向右滑动</div>
        <div>d</div>
      </div>
      <div class="row">
        <div>图片旋转</div>
        <div>鼠标右键</div>
      </div>
      <div class="row">
        <div>全屏窗口</div>
        <div>F11</div>
      </div>
      <div class="row">
        <div>取消全屏</div>
        <div>F11</div>
      </div>
      <div class="row">
        <div>刷新页面</div>
        <div>F5</div>
      </div>

      <div class="row">
        <div class="tw-text-base tw-border-b-2 tw-mb-2">轨迹模式</div>
      </div>
      <div class="row">
        <div>交卷</div>
        <div>Ctrl + Enter</div>
      </div>
      <div class="row">
        <div>切题</div>
        <div>Tab</div>
      </div>
      <div class="row">
        <div>键盘选分</div>
        <div>数字 或 . 或 #</div>
      </div>
      <div class="row">
        <div>取消选分</div>
        <div>Esc</div>
      </div>

      <div class="row">
        <div class="tw-text-base tw-border-b-2 tw-mt-5">键盘模式</div>
      </div>
      <div class="row">
        <div>切题</div>
        <div>← 或 →</div>
      </div>
      <div class="row">
        <div>确认输入</div>
        <div>Enter</div>
      </div>
      <div class="row">
        <div>撤销上次</div>
        <div>Backspace(删除)</div>
      </div>
      <div class="row">
        <div>取消输入</div>
        <div>Esc</div>
      </div>
    </div>
  </qm-dialog>
</template>

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

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

<style>
.short-cut-container {
  margin: 20px;
  columns: 2;
  column-fill: auto;
  height: calc(100% - 40px);
}

.short-cut-container .row {
  display: flex;
  gap: 2em;
}
.short-cut-container .row div:first-child {
  color: var(--app-bold-text-color);
  min-width: 60px;
}
</style>