改进用户体验:供应商列表为空时自动弹出导入配置对话框

- 当供应商列表为空时,自动显示导入配置对话框,引导用户导入当前配置
- 为导入配置对话框添加isEmpty属性,针对空列表场景优化界面文案
- 空列表场景下显示更友好的标题和说明文本
- 优化按钮文本:空列表时取消按钮显示为"稍后设置"
This commit is contained in:
farion1231
2025-08-07 20:27:16 +08:00
parent c268f962af
commit 9541970d10
2 changed files with 25 additions and 9 deletions

View File

@@ -75,6 +75,11 @@ function App() {
const currentId = await window.electronAPI.getCurrentProvider();
setProviders(loadedProviders);
setCurrentProviderId(currentId);
// 如果供应商列表为空,自动弹出导入配置对话框
if (Object.keys(loadedProviders).length === 0) {
setIsImportModalOpen(true);
}
};
const loadConfigPath = async () => {
@@ -228,6 +233,7 @@ function App() {
<ImportConfigModal
onImport={handleImportCurrentConfig}
onClose={() => setIsImportModalOpen(false)}
isEmpty={Object.keys(providers).length === 0}
/>
)}

View File

@@ -4,9 +4,10 @@ import './AddProviderModal.css'
interface ImportConfigModalProps {
onImport: (name: string) => void
onClose: () => void
isEmpty?: boolean // 供应商列表是否为空
}
const ImportConfigModal: React.FC<ImportConfigModalProps> = ({ onImport, onClose }) => {
const ImportConfigModal: React.FC<ImportConfigModalProps> = ({ onImport, onClose, isEmpty = false }) => {
const [name, setName] = useState('')
const [error, setError] = useState('')
@@ -25,13 +26,22 @@ const ImportConfigModal: React.FC<ImportConfigModalProps> = ({ onImport, onClose
return (
<div className="modal-overlay">
<div className="modal-content">
<h2></h2>
<h2>{isEmpty ? '供应商列表为空' : '导入当前配置'}</h2>
{isEmpty ? (
<p style={{marginBottom: '1.5rem', color: '#666', fontSize: '0.9rem'}}>
Claude Code
<code>~/.claude/settings.json</code>
<br />
<strong></strong>
</p>
) : (
<p style={{marginBottom: '1.5rem', color: '#666', fontSize: '0.9rem'}}>
<code>~/.claude/settings.json</code>
<br />
<strong></strong>
</p>
)}
{error && <div className="error-message">{error}</div>}
@@ -44,7 +54,7 @@ const ImportConfigModal: React.FC<ImportConfigModalProps> = ({ onImport, onClose
name="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="例如:我的当前配置"
placeholder={isEmpty ? "例如:我的默认配置" : "例如:我的当前配置"}
required
autoFocus
/>
@@ -52,7 +62,7 @@ const ImportConfigModal: React.FC<ImportConfigModalProps> = ({ onImport, onClose
<div className="form-actions">
<button type="button" className="cancel-btn" onClick={onClose}>
{isEmpty ? '稍后设置' : '取消'}
</button>
<button type="submit" className="submit-btn">