fix: 网站设置输入框输入1字符丢失焦点 - 将 FormGroup/FormRow/FormActions 提升到模块作用域避免每次重渲染重建组件

This commit is contained in:
qyyfw committed 2026-07-10 21:01:56 +08:00
1 parent 363ef7d7b6
commit 821438cfe4
1 file changed
+20 -18
+20 -18
View File
@@ -7,6 +7,26 @@ const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ child
</svg>
);
// 以下组件定义在模块作用域(不可放在 SiteSettings 内部),否则每次重渲染都会生成新的组件类型,
// 导致内部 input 被反复卸载/重建,输入时光标丢失、无法连续输入。
const FormGroup: React.FC<{ label: string; required?: boolean; children: React.ReactNode }> = ({ label, required, children }) => (
<div className="admin-form-group">
<label className="admin-form-label">
{label}
{required && <span style={{ color: 'var(--color-error)' }}> *</span>}
</label>
{children}
</div>
);
const FormRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<div className="admin-form-row">{children}</div>
);
const FormActions: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<div className="admin-form-actions">{children}</div>
);
type TabKey = 'basic' | 'logo' | 'email' | 'sms' | 'registration';
const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
@@ -308,24 +328,6 @@ const SiteSettings: React.FC = () => {
return <div style={{ padding: 40, textAlign: 'center', color: 'var(--color-text-secondary)' }}>加载中...</div>;
}
const FormGroup = ({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) => (
<div className="admin-form-group">
<label className="admin-form-label">
{label}
{required && <span style={{ color: 'var(--color-error)' }}> *</span>}
</label>
{children}
</div>
);
const FormRow = ({ children }: { children: React.ReactNode }) => (
<div className="admin-form-row">{children}</div>
);
const FormActions = ({ children }: { children: React.ReactNode }) => (
<div className="admin-form-actions">{children}</div>
);
// ========== Render Tab Content ==========
const renderTabContent = () => {
switch (activeTab) {