From 2480b4d28bedefcfe98b22d272547ba9d3563983 Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Sat, 9 May 2026 09:25:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BF=AE=E6=94=B9=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E5=85=A5=E5=8F=A3=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PersonalCenterPanel.tsx | 25 ++++++++++++++++++++++++-
 src/components/UserMenu.tsx            | 17 +++++------------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/PersonalCenterPanel.tsx b/src/components/PersonalCenterPanel.tsx
index 70fe778..3c5af6e 100644
--- a/src/components/PersonalCenterPanel.tsx
+++ b/src/components/PersonalCenterPanel.tsx
@@ -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>
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
index ec5a33a..94d2934 100644
--- a/src/components/UserMenu.tsx
+++ b/src/components/UserMenu.tsx
@@ -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 */}