From a30374c8989b83569f4f83f6aecf2e90f84fa598 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Sat, 3 May 2025 10:01:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0ui=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9B=B8=E5=85=B3=E5=A4=84=E7=90=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/UINotificationDisplay.vue  |  8 ++---
 .../src/stores/uiNotifications.store.ts       | 31 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/components/UINotificationDisplay.vue b/packages/frontend/src/components/UINotificationDisplay.vue
index 33f7366..0617deb 100644
--- a/packages/frontend/src/components/UINotificationDisplay.vue
+++ b/packages/frontend/src/components/UINotificationDisplay.vue
@@ -35,19 +35,19 @@ const getContainerClass = (type: string) => {
         v-for="notification in notifications"
         :key="notification.id"
         :class="[
-          'flex items-center p-3 mb-2 rounded shadow-md min-w-[250px] max-w-[400px] opacity-95 text-white',
+          'flex items-center p-3 mb-2 rounded shadow-md min-w-[250px] max-w-[400px] opacity-95 text-white', 
           {
             'bg-green-600': notification.type === 'success',
             'bg-red-600': notification.type === 'error',
             'bg-blue-600': notification.type === 'info',
-            'bg-yellow-500 text-gray-800': notification.type === 'warning', // Warning text color adjusted
+            'bg-yellow-500 text-gray-800': notification.type === 'warning',
           }
         ]"
       >
-        <i :class="['mr-3 text-lg', getIconClass(notification.type)]"></i>
+        <i :class="['mr-3 text-lg relative top-px', getIconClass(notification.type)]"style="color: white !important;"></i>
         <span class="flex-grow break-words text-sm">{{ notification.message }}</span>
         <button
-          class="ml-4 p-1 bg-transparent border-none text-current opacity-70 hover:opacity-100 cursor-pointer text-lg leading-none"
+          class="ml-4 p-1 bg-transparent border-none text-white opacity-70 hover:opacity-100 cursor-pointer text-lg leading-none"
           @click="notificationsStore.removeNotification(notification.id)"
         >
           &times;
diff --git a/packages/frontend/src/stores/uiNotifications.store.ts b/packages/frontend/src/stores/uiNotifications.store.ts
index 8e254fa..45e6606 100644
--- a/packages/frontend/src/stores/uiNotifications.store.ts
+++ b/packages/frontend/src/stores/uiNotifications.store.ts
@@ -17,17 +17,16 @@ export const useUiNotificationsStore = defineStore('uiNotifications', () => {
    * 添加一个新通知
    * @param notification - 通知对象 (至少包含 type 和 message)
    */
-  const addNotification = (notification: Omit<UINotification, 'id'>) => {
+  const addNotification = (notification: Omit<UINotification, 'id'> & { timeout?: number }) => { // Ensure timeout is part of the input type for clarity
     const id = nextId++;
-    const newNotification: UINotification = { ...notification, id };
+    // Force a 3-second timeout for all notifications
+    const newNotification: UINotification = { ...notification, id, timeout: 3000 };
     notifications.value.push(newNotification);
 
-    // 如果设置了超时，则在超时后自动移除通知
-    if (notification.timeout) {
-      setTimeout(() => {
-        removeNotification(id);
-      }, notification.timeout);
-    }
+    // Always set timeout to remove the notification after 3 seconds
+    setTimeout(() => {
+      removeNotification(id);
+    }, 3000); // Use fixed 3000ms timeout
   };
 
   /**
@@ -39,20 +38,20 @@ export const useUiNotificationsStore = defineStore('uiNotifications', () => {
   };
 
   // 便捷方法
-  const showError = (message: string, options: { timeout?: number } = {}) => {
-    addNotification({ type: 'error', message, timeout: options.timeout ?? 5000 }); // 默认 5 秒超时
+  const showError = (message: string) => { // Removed options
+    addNotification({ type: 'error', message }); // Timeout is handled by addNotification
   };
 
-  const showSuccess = (message: string, options: { timeout?: number } = {}) => {
-    addNotification({ type: 'success', message, timeout: options.timeout ?? 3000 }); // 默认 3 秒超时
+  const showSuccess = (message: string) => { // Removed options
+    addNotification({ type: 'success', message }); // Timeout is handled by addNotification
   };
 
-  const showInfo = (message: string, options: { timeout?: number } = {}) => {
-    addNotification({ type: 'info', message, timeout: options.timeout ?? 3000 });
+  const showInfo = (message: string) => { // Removed options
+    addNotification({ type: 'info', message }); // Timeout is handled by addNotification
   };
 
-  const showWarning = (message: string, options: { timeout?: number } = {}) => {
-    addNotification({ type: 'warning', message, timeout: options.timeout ?? 5000 });
+  const showWarning = (message: string) => { // Removed options
+    addNotification({ type: 'warning', message }); // Timeout is handled by addNotification
   };