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

Merge branch 'feat/custom-nav-link'

master
fengsilin 2 недель назад
Родитель
Сommit
4584a94620
2 измененных файлов: 139 добавлений и 0 удалений
  1. +14
    -0
      web/src/hooks/common/useNavigation.js
  2. +125
    -0
      web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx

+ 14
- 0
web/src/hooks/common/useNavigation.js Просмотреть файл

@@ -47,6 +47,13 @@ export const useNavigation = (t, headerNavModules) => {
itemKey: 'pricing',
to: '/pricing',
},
{
text: modules.customLink?.text || '',
itemKey: 'customLink',
to: modules.customLink?.url || '#',
isExternal: modules.customLink?.url?.startsWith('http'),
externalLink: modules.customLink?.url || '#',
},
];

// 根据配置过滤导航链接
@@ -57,6 +64,13 @@ export const useNavigation = (t, headerNavModules) => {
? modules.pricing.enabled
: modules.pricing;
}
if (link.itemKey === 'customLink') {
return (
modules.customLink?.enabled === true &&
modules.customLink?.text &&
modules.customLink?.url
);
}
return modules[link.itemKey] === true;
});
}, [t, headerNavModules]);


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

@@ -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('已重置为默认配置'));
@@ -95,6 +129,15 @@ export default function SettingsHeaderNavModules(props) {

// 保存配置
async function onSubmit() {
const customLinkText = (headerNavModules.customLink?.text || '').trim();
const customLinkUrl = (headerNavModules.customLink?.url || '').trim();
if (
headerNavModules.customLink?.enabled &&
(!customLinkText || !customLinkUrl)
) {
showError(t('启用自定义链接前请先填写完整的导航文案和跳转链接'));
return;
}
setLoading(true);
try {
const res = await API.put('/api/option/', {
@@ -142,6 +185,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 +206,11 @@ export default function SettingsHeaderNavModules(props) {
},
docs: true,
about: true,
customLink: {
enabled: false,
text: '',
url: '',
},
};
setHeaderNavModules(defaultModules);
}
@@ -188,6 +245,12 @@ export default function SettingsHeaderNavModules(props) {
title: t('关于'),
description: t('关于系统的详细信息'),
},
{
key: 'customLink',
title: t('自定义链接'),
description: t('自定义导航链接,可设置文案和跳转地址'),
hasSubConfig: true,
},
];

return (
@@ -247,6 +310,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 +375,66 @@ 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'
/>
<Text
type='tertiary'
size='small'
style={{
fontSize: '11px',
color: 'var(--semi-color-text-2)',
lineHeight: '1.4',
display: 'block',
marginTop: '4px',
}}
>
{t('未填写跳转链接时,自定义链接不会在前台显示')}
</Text>
</div>
</div>
)}
</Card>
</Col>
))}


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