diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx index 8553106..6adf98c 100644 --- a/src/components/UserMenu.tsx +++ b/src/components/UserMenu.tsx @@ -113,6 +113,8 @@ export const UserMenu: React.FC = () => { // 邮件通知设置 const [userEmail, setUserEmail] = useState(''); const [emailNotifications, setEmailNotifications] = useState(false); + const [emailSettingsLoading, setEmailSettingsLoading] = useState(false); + const [emailSettingsSaving, setEmailSettingsSaving] = useState(false); // 折叠面板状态 const [isDoubanSectionOpen, setIsDoubanSectionOpen] = useState(true); @@ -396,14 +398,12 @@ export const UserMenu: React.FC = () => { if (savedSearchTraditionalToSimplified !== null) { setSearchTraditionalToSimplified(savedSearchTraditionalToSimplified === 'true'); } - - // 加载邮件通知设置 - loadEmailSettings(); } }, []); // 加载邮件通知设置 const loadEmailSettings = async () => { + setEmailSettingsLoading(true); try { const response = await fetch('/api/user/email-settings'); if (response.ok) { @@ -413,11 +413,14 @@ export const UserMenu: React.FC = () => { } } catch (error) { console.error('加载邮件设置失败:', error); + } finally { + setEmailSettingsLoading(false); } }; // 保存邮件通知设置 const handleSaveEmailSettings = async () => { + setEmailSettingsSaving(true); try { const response = await fetch('/api/user/email-settings', { method: 'POST', @@ -454,6 +457,8 @@ export const UserMenu: React.FC = () => { messageEl.className = 'text-xs text-center text-red-600 dark:text-red-400'; messageEl.classList.remove('hidden'); } + } finally { + setEmailSettingsSaving(false); } }; @@ -921,6 +926,8 @@ export const UserMenu: React.FC = () => { e.stopPropagation(); setIsOpen(false); setIsEmailSettingsOpen(true); + // 懒加载:打开面板时才请求邮件设置 + loadEmailSettings(); }} className='p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors' title='邮件通知设置' @@ -2132,52 +2139,81 @@ export const UserMenu: React.FC = () => { {/* 表单 */} -
-
- - setUserEmail(e.target.value)} - placeholder='输入您的邮箱地址' - className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500' - /> -
- -
-
-

- 接收收藏更新通知 -

-

- 当收藏的影片有更新时发送邮件通知 -

+ {emailSettingsLoading ? ( +
+ {/* 加载骨架屏 */} +
+
+
+
+
+
+
+
+
+
+
+ 加载中...
-
+ ) : ( +
+
+ + setUserEmail(e.target.value)} + placeholder='输入您的邮箱地址' + disabled={emailSettingsSaving} + className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed' + /> +
- +
+
+

+ 接收收藏更新通知 +

+

+ 当收藏的影片有更新时发送邮件通知 +

+
+ +
-

-
+ + +

+
+ )} {/* 提示信息 */}