From 9248be63108aa390c1dac93e9be5e92d760ca655 Mon Sep 17 00:00:00 2001
From: Misaka_Company <pengqiangqiang0@gmail.com>
Date: Mon, 16 Mar 2026 16:16:06 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(ui):=20use=20glob?=
 =?UTF-8?q?al=20toast=20system=20in=20SettingsPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace local message state with global showSuccess/showError
- Remove inline message display component from SettingsPage
- Center toast notifications for better visibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/src/components/ui/Toast.tsx |  2 +-
 src/renderer/src/pages/SettingsPage.tsx  | 32 +++++-------------------
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/renderer/src/components/ui/Toast.tsx b/src/renderer/src/components/ui/Toast.tsx
index 56fff5f..48bda0b 100644
--- a/src/renderer/src/components/ui/Toast.tsx
+++ b/src/renderer/src/components/ui/Toast.tsx
@@ -73,7 +73,7 @@ export function Toast() {
   if (toasts.length === 0) return null
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex flex-col gap-2">
       {toasts.map((toast) => (
         <ToastItem
           key={toast.id}
diff --git a/src/renderer/src/pages/SettingsPage.tsx b/src/renderer/src/pages/SettingsPage.tsx
index 3d2f557..49d7e30 100644
--- a/src/renderer/src/pages/SettingsPage.tsx
+++ b/src/renderer/src/pages/SettingsPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Settings as SettingsIcon, Save, User, Key } from 'lucide-react'
+import { showSuccess, showError } from '../stores/useAppStore'
 
 interface ErpCredentials {
   username: string
@@ -13,10 +14,6 @@ const SettingsPage: React.FC = () => {
   })
   const [isModified, setIsModified] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
-  const [message, setMessage] = useState<{
-    type: 'success' | 'error' | 'info'
-    text: string
-  } | null>(null)
 
   useEffect(() => {
     loadCredentials()
@@ -38,21 +35,16 @@ const SettingsPage: React.FC = () => {
           password: config.erp.password || ''
         })
       } else if (!response.success) {
-        showMessage('error', response.error || '加载 ERP 配置失败')
+        showError(response.error || '加载 ERP 配置失败')
       }
       setIsModified(false)
     } catch (error) {
-      showMessage('error', '加载 ERP 配置失败')
+      showError('加载 ERP 配置失败')
     } finally {
       setIsLoading(false)
     }
   }
 
-  const showMessage = (type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text })
-    setTimeout(() => setMessage(null), 3000)
-  }
-
   const handleSaveCredentials = async () => {
     try {
       // Save ERP credentials to database (current user's config)
@@ -68,12 +60,12 @@ const SettingsPage: React.FC = () => {
 
       if (result.success && saveData?.success !== false) {
         setIsModified(false)
-        showMessage('success', 'ERP 账号密码保存成功')
+        showSuccess('ERP 账号密码保存成功')
       } else {
-        showMessage('error', result.error || saveData?.error || '保存失败')
+        showError(result.error || saveData?.error || '保存失败')
       }
     } catch (error) {
-      showMessage('error', '保存配置时发生错误')
+      showError('保存配置时发生错误')
     }
   }
 
@@ -90,18 +82,6 @@ const SettingsPage: React.FC = () => {
 
   return (
     <div className="flex justify-center animate-in fade-in slide-in-from-bottom-4 duration-500 mt-6">
-      {message && (
-        <div
-          className={`fixed top-5 left-1/2 -translate-x-1/2 px-6 py-3 rounded-lg shadow-lg z-[10000] text-sm font-medium transition-all ${
-            message.type === 'success'
-              ? 'bg-emerald-50 text-emerald-600 border border-emerald-200'
-              : 'bg-red-50 text-red-600 border border-red-200'
-          }`}
-        >
-          {message.text}
-        </div>
-      )}
-
       <div className="w-full max-w-xl bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
         <div className="border-b border-slate-100 bg-slate-50 px-6 py-5">
           <h2 className="text-lg font-semibold flex items-center gap-2 text-slate-800">