Просмотр исходного кода

feat: add customLink configuration UI in header nav settings

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
master
fengsilin 3 недель назад
Родитель
Сommit
54573991a4
1 измененных файлов: 103 добавлений и 0 удалений
  1. +103
    -0
      web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx

+ 103
- 0
web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx Просмотреть файл

@@ -23,6 +23,7 @@ import {
Card, Card,
Col, Col,
Form, Form,
Input,
Row, Row,
Switch, Switch,
Typography, Typography,
@@ -48,6 +49,11 @@ export default function SettingsHeaderNavModules(props) {
}, },
docs: true, docs: true,
about: true, about: true,
customLink: {
enabled: false,
text: '',
url: '',
},
}); });


// 处理顶栏模块配置变更 // 处理顶栏模块配置变更
@@ -60,6 +66,11 @@ export default function SettingsHeaderNavModules(props) {
...newModules[moduleKey], ...newModules[moduleKey],
enabled: checked, enabled: checked,
}; };
} else if (moduleKey === 'customLink') {
newModules.customLink = {
...newModules.customLink,
enabled: checked,
};
} else { } else {
newModules[moduleKey] = checked; newModules[moduleKey] = checked;
} }
@@ -77,6 +88,24 @@ export default function SettingsHeaderNavModules(props) {
setHeaderNavModules(newModules); setHeaderNavModules(newModules);
} }


function handleCustomLinkTextChange(value) {
const newModules = { ...headerNavModules };
newModules.customLink = {
...newModules.customLink,
text: value,
};
setHeaderNavModules(newModules);
}

function handleCustomLinkUrlChange(value) {
const newModules = { ...headerNavModules };
newModules.customLink = {
...newModules.customLink,
url: value,
};
setHeaderNavModules(newModules);
}

// 重置顶栏模块为默认配置 // 重置顶栏模块为默认配置
function resetHeaderNavModules() { function resetHeaderNavModules() {
const defaultModules = { const defaultModules = {
@@ -88,6 +117,11 @@ export default function SettingsHeaderNavModules(props) {
}, },
docs: true, docs: true,
about: true, about: true,
customLink: {
enabled: false,
text: '',
url: '',
},
}; };
setHeaderNavModules(defaultModules); setHeaderNavModules(defaultModules);
showSuccess(t('已重置为默认配置')); showSuccess(t('已重置为默认配置'));
@@ -142,6 +176,15 @@ export default function SettingsHeaderNavModules(props) {
}; };
} }


// 确保 customLink 有完整结构
if (!modules.customLink || typeof modules.customLink !== 'object') {
modules.customLink = {
enabled: false,
text: '',
url: '',
};
}

setHeaderNavModules(modules); setHeaderNavModules(modules);
} catch (error) { } catch (error) {
// 使用默认配置 // 使用默认配置
@@ -154,6 +197,11 @@ export default function SettingsHeaderNavModules(props) {
}, },
docs: true, docs: true,
about: true, about: true,
customLink: {
enabled: false,
text: '',
url: '',
},
}; };
setHeaderNavModules(defaultModules); setHeaderNavModules(defaultModules);
} }
@@ -188,6 +236,12 @@ export default function SettingsHeaderNavModules(props) {
title: t('关于'), title: t('关于'),
description: t('关于系统的详细信息'), description: t('关于系统的详细信息'),
}, },
{
key: 'customLink',
title: t('自定义链接'),
description: t('自定义导航链接,可设置文案和跳转地址'),
hasSubConfig: true,
},
]; ];


return ( return (
@@ -247,6 +301,8 @@ export default function SettingsHeaderNavModules(props) {
checked={ checked={
module.key === 'pricing' module.key === 'pricing'
? headerNavModules[module.key]?.enabled ? headerNavModules[module.key]?.enabled
: module.key === 'customLink'
? headerNavModules.customLink?.enabled
: headerNavModules[module.key] : headerNavModules[module.key]
} }
onChange={handleHeaderNavModuleChange(module.key)} onChange={handleHeaderNavModuleChange(module.key)}
@@ -310,6 +366,53 @@ export default function SettingsHeaderNavModules(props) {
</div> </div>
</div> </div>
)} )}
{module.key === 'customLink' &&
headerNavModules.customLink?.enabled && (
<div
style={{
borderTop: '1px solid var(--semi-color-border)',
marginTop: '12px',
paddingTop: '12px',
}}
>
<div style={{ marginBottom: '8px' }}>
<div
style={{
fontWeight: '500',
fontSize: '12px',
color: 'var(--semi-color-text-1)',
marginBottom: '4px',
}}
>
{t('导航文案')}
</div>
<Input
value={headerNavModules.customLink?.text || ''}
onChange={handleCustomLinkTextChange}
placeholder={t('请输入导航文案')}
size='small'
/>
</div>
<div>
<div
style={{
fontWeight: '500',
fontSize: '12px',
color: 'var(--semi-color-text-1)',
marginBottom: '4px',
}}
>
{t('跳转链接')}
</div>
<Input
value={headerNavModules.customLink?.url || ''}
onChange={handleCustomLinkUrlChange}
placeholder={t('如 https://example.com 或 /docs')}
size='small'
/>
</div>
</div>
)}
</Card> </Card>
</Col> </Col>
))} ))}


Загрузка…
Отмена
Сохранить