调整修改密码入口位置

This commit is contained in:
mtvpls
2026-05-09 09:25:17 +08:00
parent 624cb9b084
commit 2480b4d28b
2 changed files with 29 additions and 13 deletions
+24 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { Mail, Monitor, X } from 'lucide-react';
import { KeyRound, Mail, Monitor, X } from 'lucide-react';
import { createPortal } from 'react-dom';
interface PersonalCenterPanelProps {
@@ -13,8 +13,10 @@ interface PersonalCenterPanelProps {
avatarText: string;
roleBadgeClassName: string;
showDeviceManagement: boolean;
showChangePassword: boolean;
onOpenEmailSettings: () => void;
onOpenDeviceManagement: () => void;
onOpenChangePassword: () => void;
}
export function PersonalCenterPanel({
@@ -27,8 +29,10 @@ export function PersonalCenterPanel({
avatarText,
roleBadgeClassName,
showDeviceManagement,
showChangePassword,
onOpenEmailSettings,
onOpenDeviceManagement,
onOpenChangePassword,
}: PersonalCenterPanelProps) {
if (!isOpen || !mounted) return null;
@@ -114,6 +118,25 @@ export function PersonalCenterPanel({
</div>
</button>
)}
{showChangePassword && (
<button
onClick={onOpenChangePassword}
className='flex w-full items-center gap-3 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-4 text-left transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-750'
>
<div className='flex h-12 w-12 items-center justify-center rounded-xl bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-300'>
<KeyRound className='w-6 h-6' />
</div>
<div>
<div className='text-base font-semibold text-gray-900 dark:text-gray-100'>
</div>
<div className='mt-1 text-sm text-gray-500 dark:text-gray-400'>
</div>
</div>
</button>
)}
</div>
</div>
</div>
+5 -12
View File
@@ -15,7 +15,6 @@ import {
Gauge,
Globe,
Home,
KeyRound,
LogOut,
MessageSquare,
Monitor,
@@ -1615,17 +1614,6 @@ export const UserMenu: React.FC = () => {
</button>
)}
{/* 修改密码按钮 */}
{showChangePassword && (
<button
onClick={handleChangePassword}
className='w-full px-3 py-2 text-left flex items-center gap-2.5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-sm'
>
<KeyRound className='w-4 h-4 text-gray-500 dark:text-gray-400' />
<span className='font-medium'></span>
</button>
)}
{/* 订阅按钮 */}
{subscribeEnabled && (
<button
@@ -3749,6 +3737,7 @@ export const UserMenu: React.FC = () => {
avatarText={avatarText}
roleBadgeClassName={roleBadgeClassName}
showDeviceManagement={storageType !== 'localstorage'}
showChangePassword={showChangePassword}
onOpenEmailSettings={() => {
setIsProfileCenterOpen(false);
setIsEmailSettingsOpen(true);
@@ -3759,6 +3748,10 @@ export const UserMenu: React.FC = () => {
setIsDeviceManagementOpen(true);
loadDevices();
}}
onOpenChangePassword={() => {
setIsProfileCenterOpen(false);
handleChangePassword();
}}
/>
{/* 使用 Portal 将设置面板渲染到 document.body */}