简化过度设计,恢复原生弹窗
- 删除 ConfirmModal 和 MessageModal 组件 - 恢复原生 alert() 和 confirm() 弹窗 - 移除不必要的加载状态指示器 - 移除切换供应商的确认对话框 - 简化代码,提升响应速度和用户体验
This commit is contained in:
@@ -3,8 +3,6 @@ import { Provider } from '../shared/types'
|
|||||||
import ProviderList from './components/ProviderList'
|
import ProviderList from './components/ProviderList'
|
||||||
import AddProviderModal from './components/AddProviderModal'
|
import AddProviderModal from './components/AddProviderModal'
|
||||||
import EditProviderModal from './components/EditProviderModal'
|
import EditProviderModal from './components/EditProviderModal'
|
||||||
import ConfirmModal from './components/ConfirmModal'
|
|
||||||
import MessageModal from './components/MessageModal'
|
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
@@ -13,21 +11,6 @@ function App() {
|
|||||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false)
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false)
|
||||||
const [configPath, setConfigPath] = useState<string>('')
|
const [configPath, setConfigPath] = useState<string>('')
|
||||||
const [editingProviderId, setEditingProviderId] = useState<string | null>(null)
|
const [editingProviderId, setEditingProviderId] = useState<string | null>(null)
|
||||||
|
|
||||||
// Modal states
|
|
||||||
const [confirmModal, setConfirmModal] = useState<{
|
|
||||||
show: boolean
|
|
||||||
title: string
|
|
||||||
message: string
|
|
||||||
onConfirm: () => void
|
|
||||||
} | null>(null)
|
|
||||||
const [messageModal, setMessageModal] = useState<{
|
|
||||||
show: boolean
|
|
||||||
title: string
|
|
||||||
message: string
|
|
||||||
type: 'success' | 'error' | 'info'
|
|
||||||
} | null>(null)
|
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
|
||||||
|
|
||||||
// 加载供应商列表
|
// 加载供应商列表
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -65,53 +48,20 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleDeleteProvider = async (id: string) => {
|
const handleDeleteProvider = async (id: string) => {
|
||||||
setConfirmModal({
|
if (confirm('确定要删除这个供应商吗?')) {
|
||||||
show: true,
|
await window.electronAPI.deleteProvider(id)
|
||||||
title: '删除供应商',
|
await loadProviders()
|
||||||
message: '确定要删除这个供应商吗?',
|
}
|
||||||
onConfirm: async () => {
|
|
||||||
await window.electronAPI.deleteProvider(id)
|
|
||||||
await loadProviders()
|
|
||||||
setConfirmModal(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSwitchProvider = async (id: string) => {
|
const handleSwitchProvider = async (id: string) => {
|
||||||
const provider = providers[id]
|
const success = await window.electronAPI.switchProvider(id)
|
||||||
if (!provider) return
|
if (success) {
|
||||||
|
setCurrentProviderId(id)
|
||||||
// 如果是当前供应商,直接返回
|
alert('切换成功!')
|
||||||
if (id === currentProviderId) return
|
} else {
|
||||||
|
alert('切换失败,请检查配置')
|
||||||
setConfirmModal({
|
}
|
||||||
show: true,
|
|
||||||
title: '切换供应商',
|
|
||||||
message: `确定要切换到"${provider.name}"吗?`,
|
|
||||||
onConfirm: async () => {
|
|
||||||
setIsLoading(true)
|
|
||||||
const success = await window.electronAPI.switchProvider(id)
|
|
||||||
setIsLoading(false)
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
setCurrentProviderId(id)
|
|
||||||
setMessageModal({
|
|
||||||
show: true,
|
|
||||||
title: '切换成功',
|
|
||||||
message: '供应商已成功切换!',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
setMessageModal({
|
|
||||||
show: true,
|
|
||||||
title: '切换失败',
|
|
||||||
message: '切换失败,请检查配置',
|
|
||||||
type: 'error'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
setConfirmModal(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleEditProvider = async (provider: Provider) => {
|
const handleEditProvider = async (provider: Provider) => {
|
||||||
@@ -119,20 +69,10 @@ function App() {
|
|||||||
await window.electronAPI.updateProvider(provider)
|
await window.electronAPI.updateProvider(provider)
|
||||||
await loadProviders()
|
await loadProviders()
|
||||||
setEditingProviderId(null)
|
setEditingProviderId(null)
|
||||||
setMessageModal({
|
alert('保存成功!')
|
||||||
show: true,
|
|
||||||
title: '保存成功',
|
|
||||||
message: '供应商信息已更新!',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('更新供应商失败:', error)
|
console.error('更新供应商失败:', error)
|
||||||
setMessageModal({
|
alert('保存失败,请重试')
|
||||||
show: true,
|
|
||||||
title: '保存失败',
|
|
||||||
message: '保存失败,请重试',
|
|
||||||
type: 'error'
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -164,7 +104,6 @@ function App() {
|
|||||||
onSwitch={handleSwitchProvider}
|
onSwitch={handleSwitchProvider}
|
||||||
onDelete={handleDeleteProvider}
|
onDelete={handleDeleteProvider}
|
||||||
onEdit={setEditingProviderId}
|
onEdit={setEditingProviderId}
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{configPath && (
|
{configPath && (
|
||||||
@@ -195,24 +134,6 @@ function App() {
|
|||||||
onClose={() => setEditingProviderId(null)}
|
onClose={() => setEditingProviderId(null)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{confirmModal && (
|
|
||||||
<ConfirmModal
|
|
||||||
title={confirmModal.title}
|
|
||||||
message={confirmModal.message}
|
|
||||||
onConfirm={confirmModal.onConfirm}
|
|
||||||
onCancel={() => setConfirmModal(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{messageModal && (
|
|
||||||
<MessageModal
|
|
||||||
title={messageModal.title}
|
|
||||||
message={messageModal.message}
|
|
||||||
type={messageModal.type}
|
|
||||||
onClose={() => setMessageModal(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,23 +5,21 @@ import './AddProviderModal.css'
|
|||||||
interface AddProviderModalProps {
|
interface AddProviderModalProps {
|
||||||
onAdd: (provider: Omit<Provider, 'id'>) => void
|
onAdd: (provider: Omit<Provider, 'id'>) => void
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
onError?: (message: string) => void
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose, onError }) => {
|
const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) => {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: '',
|
name: '',
|
||||||
apiUrl: '',
|
apiUrl: '',
|
||||||
apiKey: ''
|
apiKey: ''
|
||||||
})
|
})
|
||||||
const [showPassword, setShowPassword] = useState(false)
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
const [error, setError] = useState<string>('')
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
||||||
setError('请填写所有必填字段')
|
alert('请填写所有必填字段')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -77,12 +75,6 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose, onE
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
{error && (
|
|
||||||
<div style={{ color: 'red', marginBottom: '1rem', padding: '0.5rem', backgroundColor: '#ffe6e6', borderRadius: '4px' }}>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="name">供应商名称 *</label>
|
<label htmlFor="name">供应商名称 *</label>
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -1,40 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import './AddProviderModal.css'
|
|
||||||
|
|
||||||
interface ConfirmModalProps {
|
|
||||||
title: string
|
|
||||||
message: string
|
|
||||||
confirmText?: string
|
|
||||||
cancelText?: string
|
|
||||||
onConfirm: () => void
|
|
||||||
onCancel: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
|
||||||
title,
|
|
||||||
message,
|
|
||||||
confirmText = '确定',
|
|
||||||
cancelText = '取消',
|
|
||||||
onConfirm,
|
|
||||||
onCancel
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="modal-overlay" onClick={onCancel}>
|
|
||||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<h2>{title}</h2>
|
|
||||||
<p>{message}</p>
|
|
||||||
|
|
||||||
<div className="form-actions">
|
|
||||||
<button type="button" className="cancel-btn" onClick={onCancel}>
|
|
||||||
{cancelText}
|
|
||||||
</button>
|
|
||||||
<button type="button" className="submit-btn" onClick={onConfirm}>
|
|
||||||
{confirmText}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ConfirmModal
|
|
||||||
@@ -15,7 +15,6 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
|
|||||||
apiKey: provider.apiKey
|
apiKey: provider.apiKey
|
||||||
})
|
})
|
||||||
const [showPassword, setShowPassword] = useState(false)
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
const [error, setError] = useState<string>('')
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setFormData({
|
setFormData({
|
||||||
@@ -29,7 +28,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
||||||
setError('请填写所有必填字段')
|
alert('请填写所有必填字段')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -53,12 +52,6 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
|
|||||||
<h2>编辑供应商</h2>
|
<h2>编辑供应商</h2>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
{error && (
|
|
||||||
<div style={{ color: 'red', marginBottom: '1rem', padding: '0.5rem', backgroundColor: '#ffe6e6', borderRadius: '4px' }}>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="name">供应商名称 *</label>
|
<label htmlFor="name">供应商名称 *</label>
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -1,44 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import './AddProviderModal.css'
|
|
||||||
|
|
||||||
interface MessageModalProps {
|
|
||||||
title: string
|
|
||||||
message: string
|
|
||||||
type?: 'success' | 'error' | 'info'
|
|
||||||
onClose: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const MessageModal: React.FC<MessageModalProps> = ({
|
|
||||||
title,
|
|
||||||
message,
|
|
||||||
type = 'info',
|
|
||||||
onClose
|
|
||||||
}) => {
|
|
||||||
const getIcon = () => {
|
|
||||||
switch (type) {
|
|
||||||
case 'success':
|
|
||||||
return '✅'
|
|
||||||
case 'error':
|
|
||||||
return '❌'
|
|
||||||
default:
|
|
||||||
return 'ℹ️'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="modal-overlay" onClick={onClose}>
|
|
||||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<h2>{getIcon()} {title}</h2>
|
|
||||||
<p>{message}</p>
|
|
||||||
|
|
||||||
<div className="form-actions">
|
|
||||||
<button type="button" className="submit-btn" onClick={onClose}>
|
|
||||||
确定
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MessageModal
|
|
||||||
@@ -8,7 +8,6 @@ interface ProviderListProps {
|
|||||||
onSwitch: (id: string) => void
|
onSwitch: (id: string) => void
|
||||||
onDelete: (id: string) => void
|
onDelete: (id: string) => void
|
||||||
onEdit: (id: string) => void
|
onEdit: (id: string) => void
|
||||||
isLoading?: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProviderList: React.FC<ProviderListProps> = ({
|
const ProviderList: React.FC<ProviderListProps> = ({
|
||||||
@@ -16,8 +15,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
|||||||
currentProviderId,
|
currentProviderId,
|
||||||
onSwitch,
|
onSwitch,
|
||||||
onDelete,
|
onDelete,
|
||||||
onEdit,
|
onEdit
|
||||||
isLoading = false
|
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="provider-list">
|
<div className="provider-list">
|
||||||
@@ -54,21 +52,20 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
|||||||
<button
|
<button
|
||||||
className="enable-btn"
|
className="enable-btn"
|
||||||
onClick={() => onSwitch(provider.id)}
|
onClick={() => onSwitch(provider.id)}
|
||||||
disabled={isCurrent || isLoading}
|
disabled={isCurrent}
|
||||||
>
|
>
|
||||||
{isLoading ? '处理中...' : '启用'}
|
启用
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="edit-btn"
|
className="edit-btn"
|
||||||
onClick={() => onEdit(provider.id)}
|
onClick={() => onEdit(provider.id)}
|
||||||
disabled={isLoading}
|
|
||||||
>
|
>
|
||||||
编辑
|
编辑
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="delete-btn"
|
className="delete-btn"
|
||||||
onClick={() => onDelete(provider.id)}
|
onClick={() => onDelete(provider.id)}
|
||||||
disabled={isCurrent || isLoading}
|
disabled={isCurrent}
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user