From 92476618490a6c208ba840a3cab0d66f660944e0 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 18 May 2025 21:54:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat(ui):=20Add=20a=20dropdown=20menu?=
 =?UTF-8?q?=20item=20for=20the=20user=20avatar=20in=20the=20HeaderBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/HeaderBar.js | 45 ++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index 0fcdc5d7..b2d54afe 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -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>
           }