admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

简化过度设计，恢复原生弹窗

Browse Source 
- 删除 ConfirmModal 和 MessageModal 组件
- 恢复原生 alert() 和 confirm() 弹窗
- 移除不必要的加载状态指示器
- 移除切换供应商的确认对话框
- 简化代码，提升响应速度和用户体验
This commit is contained in:
farion1231
2025-08-06 07:59:11 +08:00
parent caa289bd7d
commit 3bd65c2acb
6 changed files with 20 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/renderer/App.tsx
View File

@@ -3,8 +3,6 @@ import { Provider } from '../shared/types'
import ProviderList from './components/ProviderList'
import AddProviderModal from './components/AddProviderModal'
import EditProviderModal from './components/EditProviderModal'
import ConfirmModal from './components/ConfirmModal'
import MessageModal from './components/MessageModal'
import './App.css'
function App() {
@@ -13,21 +11,6 @@ function App() {
const [isAddModalOpen, setIsAddModalOpen] = useState(false)
const [configPath, setConfigPath] = useState<string>('')
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(() => {
@@ -65,53 +48,20 @@ function App() {
}
const handleDeleteProvider = async (id: string) => {
setConfirmModal({
show: true,
title: '删除供应商',
message: '确定要删除这个供应商吗？',
onConfirm: async () => {
await window.electronAPI.deleteProvider(id)
await loadProviders()
setConfirmModal(null)
}
})
if (confirm('确定要删除这个供应商吗？')) {
await window.electronAPI.deleteProvider(id)
await loadProviders()
}
}
const handleSwitchProvider = async (id: string) => {
const provider = providers[id]
if (!provider) return
// 如果是当前供应商，直接返回
if (id === currentProviderId) return
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 success = await window.electronAPI.switchProvider(id)
if (success) {
setCurrentProviderId(id)
alert('切换成功！')
} else {
alert('切换失败，请检查配置')
}
}
const handleEditProvider = async (provider: Provider) => {
@@ -119,20 +69,10 @@ function App() {
await window.electronAPI.updateProvider(provider)
await loadProviders()
setEditingProviderId(null)
setMessageModal({
show: true,
title: '保存成功',
message: '供应商信息已更新！',
type: 'success'
})
alert('保存成功！')
} catch (error) {
console.error('更新供应商失败:', error)
setMessageModal({
show: true,
title: '保存失败',
message: '保存失败，请重试',
type: 'error'
})
alert('保存失败，请重试')
}
}
@@ -164,7 +104,6 @@ function App() {
onSwitch={handleSwitchProvider}
onDelete={handleDeleteProvider}
onEdit={setEditingProviderId}
isLoading={isLoading}
/>
{configPath && (
@@ -195,24 +134,6 @@ function App() {
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>
)
}

12
src/renderer/components/AddProviderModal.tsx
View File

@@ -5,23 +5,21 @@ import './AddProviderModal.css'
interface AddProviderModalProps {
onAdd: (provider: Omit<Provider, 'id'>) => 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({
name: '',
apiUrl: '',
apiKey: ''
})
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState<string>('')
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
setError('请填写所有必填字段')
alert('请填写所有必填字段')
return
}
@@ -77,12 +75,6 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose, onE
</div>
<form onSubmit={handleSubmit}>
{error && (
<div style={{ color: 'red', marginBottom: '1rem', padding: '0.5rem', backgroundColor: '#ffe6e6', borderRadius: '4px' }}>
{error}
</div>
)}
<div className="form-group">
<label htmlFor="name">供应商名称 *</label>
<input

40
src/renderer/components/ConfirmModal.tsx
View File

@@ -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

9
src/renderer/components/EditProviderModal.tsx
View File

@@ -15,7 +15,6 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
apiKey: provider.apiKey
})
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState<string>('')
useEffect(() => {
setFormData({
@@ -29,7 +28,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
e.preventDefault()
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
setError('请填写所有必填字段')
alert('请填写所有必填字段')
return
}
@@ -53,12 +52,6 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
<h2>编辑供应商</h2>
<form onSubmit={handleSubmit}>
{error && (
<div style={{ color: 'red', marginBottom: '1rem', padding: '0.5rem', backgroundColor: '#ffe6e6', borderRadius: '4px' }}>
{error}
</div>
)}
<div className="form-group">
<label htmlFor="name">供应商名称 *</label>
<input

44
src/renderer/components/MessageModal.tsx
View File

@@ -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

11
src/renderer/components/ProviderList.tsx
View File

@@ -8,7 +8,6 @@ interface ProviderListProps {
onSwitch: (id: string) => void
onDelete: (id: string) => void
onEdit: (id: string) => void
isLoading?: boolean
}
const ProviderList: React.FC<ProviderListProps> = ({
@@ -16,8 +15,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
currentProviderId,
onSwitch,
onDelete,
onEdit,
isLoading = false
onEdit
}) => {
return (
<div className="provider-list">
@@ -54,21 +52,20 @@ const ProviderList: React.FC<ProviderListProps> = ({
<button
className="enable-btn"
onClick={() => onSwitch(provider.id)}
disabled={isCurrent || isLoading}
disabled={isCurrent}
>
{isLoading ? '处理中...' : '启用'}
启用
</button>
<button
className="edit-btn"
onClick={() => onEdit(provider.id)}
disabled={isLoading}
>
编辑
</button>
<button
className="delete-btn"
onClick={() => onDelete(provider.id)}
disabled={isCurrent || isLoading}
disabled={isCurrent}
>
删除
</button>