Przeglądaj źródła

feat: add customLink configuration UI in header nav settings

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
master
fengsilin 3 tygodni temu
rodzic
commit
54573991a4
1 zmienionych plików z 103 dodań i 0 usunięć
  1. +103
    -0
      web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx

+ 103
- 0
web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx Wyświetl plik

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

// 处理顶栏模块配置变更
@@ -60,6 +66,11 @@ export default function SettingsHeaderNavModules(props) {
...newModules[moduleKey],
enabled: checked,
};
} else if (moduleKey === 'customLink') {
newModules.customLink = {
...newModules.customLink,
enabled: checked,
};
} else {
newModules[moduleKey] = checked;
}
@@ -77,6 +88,24 @@ export default function SettingsHeaderNavModules(props) {
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() {
const defaultModules = {
@@ -88,6 +117,11 @@ export default function SettingsHeaderNavModules(props) {
},
docs: true,
about: true,
customLink: {
enabled: false,
text: '',
url: '',
},
};
setHeaderNavModules(defaultModules);
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);
} catch (error) {
// 使用默认配置
@@ -154,6 +197,11 @@ export default function SettingsHeaderNavModules(props) {
},
docs: true,
about: true,
customLink: {
enabled: false,
text: '',
url: '',
},
};
setHeaderNavModules(defaultModules);
}
@@ -188,6 +236,12 @@ export default function SettingsHeaderNavModules(props) {
title: t('关于'),
description: t('关于系统的详细信息'),
},
{
key: 'customLink',
title: t('自定义链接'),
description: t('自定义导航链接,可设置文案和跳转地址'),
hasSubConfig: true,
},
];

return (
@@ -247,6 +301,8 @@ export default function SettingsHeaderNavModules(props) {
checked={
module.key === 'pricing'
? headerNavModules[module.key]?.enabled
: module.key === 'customLink'
? headerNavModules.customLink?.enabled
: headerNavModules[module.key]
}
onChange={handleHeaderNavModuleChange(module.key)}
@@ -310,6 +366,53 @@ export default function SettingsHeaderNavModules(props) {
</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>
</Col>
))}


Ładowanie…
Anuluj
Zapisz