✨ feat: 添加快捷键 以及快捷键管理功能

ref #39

src/renderer/components/ShortcutToast.vue

@@ -0,0 +1,91 @@
+<template>
+  <transition name="shortcut-toast">
+    <div v-if="visible" class="shortcut-toast">
+      <div class="shortcut-toast-content">
+        <div class="shortcut-toast-icon">
+          <i :class="icon"></i>
+        </div>
+        <div class="shortcut-toast-text">{{ text }}</div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, ref } from 'vue';
+
+const visible = ref(false);
+const text = ref('');
+const icon = ref('');
+let timer: NodeJS.Timeout | null = null;
+
+const show = (message: string, iconName: string) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  text.value = message;
+  icon.value = iconName;
+  visible.value = true;
+
+  timer = setTimeout(() => {
+    visible.value = false;
+    // 在动画结束后触发销毁事件
+    setTimeout(() => {
+      emit('destroy');
+    }, 300);
+  }, 1500);
+};
+
+// 清理定时器
+onBeforeUnmount(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+});
+
+const emit = defineEmits(['destroy']);
+
+// 暴露方法给父组件
+defineExpose({
+  show
+});
+</script>
+
+<style lang="scss" scoped>
+.shortcut-toast {
+  @apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999];
+  @apply flex items-center justify-center;
+
+  &-content {
+    @apply flex flex-col items-center gap-2 p-4 rounded-lg;
+    @apply bg-light-200 bg-opacity-70 dark:bg-dark-200 dark:bg-opacity-90;
+    @apply text-dark-100 dark:text-light-100;
+    @apply shadow-lg backdrop-blur-sm;
+    min-width: 120px;
+  }
+
+  &-icon {
+    @apply text-3xl;
+  }
+
+  &-text {
+    @apply text-sm font-medium text-center;
+  }
+}
+
+.shortcut-toast-enter-active,
+.shortcut-toast-leave-active {
+  @apply transition-all duration-300;
+}
+
+.shortcut-toast-enter-from,
+.shortcut-toast-leave-to {
+  @apply opacity-0 scale-90;
+}
+
+.shortcut-toast-enter-to,
+.shortcut-toast-leave-from {
+  @apply opacity-100 scale-100;
+}
+</style>