From 155bdf246c5cb01d00c089d9a2321377e352460b Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 6 Jun 2025 23:37:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=92=8C=E5=9B=BE=E6=A0=87=E6=98=BE=E7=A4=BA=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/ShortcutToast.vue | 39 ++++++++++++++++++++---
 src/renderer/utils/shortcutToast.ts       | 20 ++++++++++--
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ShortcutToast.vue b/src/renderer/components/ShortcutToast.vue
index d7bd12b..8973869 100644
--- 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
index 2992cd5..0de0d60 100644
--- 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 });
+}