fix: 网站设置输入框输入1字符丢失焦点 - 将 FormGroup/FormRow/FormActions 提升到模块作用域避免每次重渲染重建组件
This commit is contained in:
1 parent
363ef7d7b6
commit
821438cfe4
1 file changed
+20
-18
@@ -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) {
|
||||
|
||||
Reference in new issue
Block a user