feat: 优化提示组件，支持位置和图标显示选项

algerkong · algerkong · commit 155bdf246c5c · 2025-06-06T23:37:24.000+08:00
diff --git a/src/renderer/components/ShortcutToast.vue b/src/renderer/components/ShortcutToast.vue
@@ -1,8 +1,8 @@
 <template>
   <transition name="shortcut-toast">
-    <div v-if="visible" class="shortcut-toast">
+    <div v-if="visible" class="shortcut-toast" :class="`shortcut-toast-${position}`">
       <div class="shortcut-toast-content">
-        <div class="shortcut-toast-icon">
+        <div v-if="showIcon" class="shortcut-toast-icon">
           <i :class="icon"></i>
         </div>
         <div class="shortcut-toast-text">{{ text }}</div>
@@ -14,12 +14,24 @@
 <script lang="ts" setup>
 import { onBeforeUnmount, ref } from 'vue';
 
+defineProps({
+  position: {
+    type: String,
+    default: 'center',
+    validator: (val: string) => ['top', 'center', 'bottom'].includes(val)
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
+  }
+});
+
 const visible = ref(false);
 const text = ref('');
 const icon = ref('');
 let timer: NodeJS.Timeout | null = null;
 
-const show = (message: string, iconName: string) => {
+const show = (message: string, iconName = '') => {
   if (timer) {
     clearTimeout(timer);
   }
@@ -54,9 +66,28 @@ defineExpose({
 
 <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 fixed left-1/2 z-[9999];
   @apply flex items-center justify-center;
 
+  // 位置变体
+  &-center {
+    @apply top-1/2 -translate-y-1/2;
+    .shortcut-toast-content {
+      @apply p-2;
+    }
+  }
+
+  &-top {
+    @apply top-20;
+  }
+
+  &-bottom {
+    @apply bottom-40;
+  }
+
+  // 水平居中
+  @apply -translate-x-1/2;
+
   &-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;
diff --git a/src/renderer/utils/shortcutToast.ts b/src/renderer/utils/shortcutToast.ts
@@ -5,7 +5,16 @@ import ShortcutToast from '@/components/ShortcutToast.vue';
 let container: HTMLDivElement | null = null;
 let toastInstance: any = null;
 
-export function showShortcutToast(message: string, iconName: string) {
+interface ToastOptions {
+  position?: 'top' | 'center' | 'bottom';
+  showIcon?: boolean;
+}
+
+export function showShortcutToast(
+  message: string, 
+  iconName = '', 
+  options: ToastOptions = {}
+) {
   // 如果容器不存在，创建一个新的容器
   if (!container) {
     container = document.createElement('div');
@@ -20,6 +29,8 @@ export function showShortcutToast(message: string, iconName: string) {
 
   // 创建新的 toast 实例
   const vnode = createVNode(ShortcutToast, {
+    position: options.position || 'center',
+    showIcon: options.showIcon !== undefined ? options.showIcon : true,
     onDestroy: () => {
       if (container) {
         render(null, container);
@@ -35,6 +46,11 @@ export function showShortcutToast(message: string, iconName: string) {
 
   // 显示 toast
   if (toastInstance) {
-    toastInstance.show(message, iconName);
+    toastInstance.show(message, iconName, { showIcon: options.showIcon });
   }
 }
+
+// 新增便捷方法 - 底部无图标 toast
+export function showBottomToast(message: string) {
+  showShortcutToast(message, '', { position: 'bottom', showIcon: false });
+}
