fix: 更新ui通知组件相关处理逻辑
This commit is contained in:
@@ -40,14 +40,14 @@ const getContainerClass = (type: string) => {
|
|||||||
'bg-green-600': notification.type === 'success',
|
'bg-green-600': notification.type === 'success',
|
||||||
'bg-red-600': notification.type === 'error',
|
'bg-red-600': notification.type === 'error',
|
||||||
'bg-blue-600': notification.type === 'info',
|
'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>
|
<span class="flex-grow break-words text-sm">{{ notification.message }}</span>
|
||||||
<button
|
<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)"
|
@click="notificationsStore.removeNotification(notification.id)"
|
||||||
>
|
>
|
||||||
×
|
×
|
||||||
|
|||||||
@@ -17,17 +17,16 @@ export const useUiNotificationsStore = defineStore('uiNotifications', () => {
|
|||||||
* 添加一个新通知
|
* 添加一个新通知
|
||||||
* @param notification - 通知对象 (至少包含 type 和 message)
|
* @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 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);
|
notifications.value.push(newNotification);
|
||||||
|
|
||||||
// 如果设置了超时,则在超时后自动移除通知
|
// Always set timeout to remove the notification after 3 seconds
|
||||||
if (notification.timeout) {
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
removeNotification(id);
|
removeNotification(id);
|
||||||
}, notification.timeout);
|
}, 3000); // Use fixed 3000ms timeout
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -39,20 +38,20 @@ export const useUiNotificationsStore = defineStore('uiNotifications', () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 便捷方法
|
// 便捷方法
|
||||||
const showError = (message: string, options: { timeout?: number } = {}) => {
|
const showError = (message: string) => { // Removed options
|
||||||
addNotification({ type: 'error', message, timeout: options.timeout ?? 5000 }); // 默认 5 秒超时
|
addNotification({ type: 'error', message }); // Timeout is handled by addNotification
|
||||||
};
|
};
|
||||||
|
|
||||||
const showSuccess = (message: string, options: { timeout?: number } = {}) => {
|
const showSuccess = (message: string) => { // Removed options
|
||||||
addNotification({ type: 'success', message, timeout: options.timeout ?? 3000 }); // 默认 3 秒超时
|
addNotification({ type: 'success', message }); // Timeout is handled by addNotification
|
||||||
};
|
};
|
||||||
|
|
||||||
const showInfo = (message: string, options: { timeout?: number } = {}) => {
|
const showInfo = (message: string) => { // Removed options
|
||||||
addNotification({ type: 'info', message, timeout: options.timeout ?? 3000 });
|
addNotification({ type: 'info', message }); // Timeout is handled by addNotification
|
||||||
};
|
};
|
||||||
|
|
||||||
const showWarning = (message: string, options: { timeout?: number } = {}) => {
|
const showWarning = (message: string) => { // Removed options
|
||||||
addNotification({ type: 'warning', message, timeout: options.timeout ?? 5000 });
|
addNotification({ type: 'warning', message }); // Timeout is handled by addNotification
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user