oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feat(ui): Add a dropdown menu item for the user avatar in the HeaderBar

Browse Source
This commit is contained in:
Apple\Apple
2025-05-18 21:54:10 +08:00
parent 16570909be
commit 9247661849
1 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/components/HeaderBar.js
View File

@@ -14,6 +14,10 @@ import {
IconChevronDown,
IconSun,
IconMoon,
IconExit,
IconUserSetting,
IconCreditCard,
IconKey,
} from '@douyinfe/semi-icons';
import {
Avatar,
@@ -210,8 +214,47 @@ const HeaderBar = () => {
position="bottomRight"
render={
<Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
<Dropdown.Item
onClick={() => {
navigate('/personal');
setMobileMenuOpen(false);
}}
className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
>
<div className="flex items-center gap-2">
<IconUserSetting size="small" className="text-gray-500 dark:text-gray-400" />
<span>{t('个人设置')}</span>
</div>
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
navigate('/token');
setMobileMenuOpen(false);
}}
className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
>
<div className="flex items-center gap-2">
<IconKey size="small" className="text-gray-500 dark:text-gray-400" />
<span>{t('API令牌')}</span>
</div>
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
navigate('/topup');
setMobileMenuOpen(false);
}}
className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
>
<div className="flex items-center gap-2">
<IconCreditCard size="small" className="text-gray-500 dark:text-gray-400" />
<span>{t('钱包')}</span>
</div>
</Dropdown.Item>
<Dropdown.Item onClick={logout} className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white">
{t('退出')}
<div className="flex items-center gap-2">
<IconExit size="small" className="text-gray-500 dark:text-gray-400" />
<span>{t('退出')}</span>
</div>
</Dropdown.Item>
</Dropdown.Menu>
}