ai-chat-ui/src/components/modals/ShortcutsModal.vue

<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="visible" class="modal-overlay" @click.self="close">
        <div class="shortcuts-modal">
          <!-- 头部 -->
          <div class="modal-header">
            <div class="header-title">
              <Keyboard :size="22" />
              <h3>键盘快捷键</h3>
            </div>
            <button class="close-btn" @click="close">
              <X :size="20" />
            </button>
          </div>

          <!-- 快捷键列表 -->
          <div class="shortcuts-content">
            <div
              v-for="group in shortcutGroups"
              :key="group.title"
              class="shortcut-group"
            >
              <h4 class="group-title">{{ group.title }}</h4>
              <div class="shortcuts-list">
                <div
                  v-for="shortcut in group.shortcuts"
                  :key="shortcut.description"
                  class="shortcut-item"
                >
                  <span class="shortcut-desc">{{ shortcut.description }}</span>
                  <div class="shortcut-keys">
                    <kbd v-for="key in shortcut.keys" :key="key">{{ key }}</kbd>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部 -->
          <div class="modal-footer">
            <span class="tip"
              >按 <kbd>ESC</kbd> 或 <kbd>?</kbd> 关闭此窗口</span
            >
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/settings";
import { Keyboard, X } from "@/components/icons";

const settingsStore = useSettingsStore();
const { showShortcutsModal: visible } = storeToRefs(settingsStore);

const shortcutGroups = computed(() => [
  {
    title: "通用",
    shortcuts: [
      { description: "新建对话", keys: ["⌘", "N"] },
      { description: "搜索对话", keys: ["⌘", "K"] },
      { description: "切换侧边栏", keys: ["⌘", "B"] },
      { description: "切换主题", keys: ["⌘", "⇧", "D"] },
      { description: "显示快捷键", keys: ["⌘", "?"] },
    ],
  },
  {
    title: "对话",
    shortcuts: [
      { description: "发送消息", keys: ["⌘", "↵"] },
      { description: "换行", keys: ["⇧", "↵"] },
      { description: "聚焦输入框", keys: ["⌘", "/"] },
      { description: "停止生成", keys: ["ESC"] },
    ],
  },
  {
    title: "消息操作",
    shortcuts: [
      { description: "复制消息", keys: ["⌘", "C"] },
      { description: "重新生成", keys: ["⌘", "R"] },
    ],
  },
]);

function close() {
  settingsStore.closeShortcutsModal();
}
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.shortcuts-modal {
  width: 480px;
  max-height: 80vh;
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .dark & {
    background: #1e1e2e;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;

  .dark & {
    border-bottom-color: #2d2d3d;
  }
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;

  svg {
    color: #3b82f6;
  }

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;

    .dark & {
      color: #f3f4f6;
    }
  }
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f3f4f6;
    color: #1f2937;

    .dark & {
      background: #374151;
      color: #f3f4f6;
    }
  }
}

.shortcuts-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.shortcut-group {
  &:not(:last-child) {
    margin-bottom: 24px;
  }
}

.group-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;

  .dark & {
    background: #2d2d3d;
  }
}

.shortcut-desc {
  font-size: 14px;
  color: #374151;

  .dark & {
    color: #e5e7eb;
  }
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;

  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .dark & {
      color: #e5e7eb;
      background: #1e1e2e;
      border-color: #4b5563;
    }
  }
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  text-align: center;

  .dark & {
    border-top-color: #2d2d3d;
  }
}

.tip {
  font-size: 13px;
  color: #9ca3af;

  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    margin: 0 2px;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 4px;

    .dark & {
      background: #374151;
      color: #9ca3af;
    }
  }
}

// 过渡动画
.modal-enter-active,
.modal-leave-active {
  transition: all 0.25s ease;

  .shortcuts-modal {
    transition: all 0.25s ease;
  }
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;

  .shortcuts-modal {
    transform: scale(0.9);
    opacity: 0;
  }
}
</style>