cx-chat 0.0.2 → 0.0.4

package/src/views/base/settings/index.tsx

@@ -1,657 +0,0 @@
-import { changePasswordAPI, updateUserPersonalCenterAPI } from '@/api/system/user';
-import { uploadFileAPI } from '@/api/upload';
-import LanguageSwitcher from '@/components/common/language-switcher';
-import { countryCodes } from '@/constants/countryCodes';
-import { useAuth } from '@/contexts/AuthContext';
-import { useToast } from '@/contexts/ToastContext';
-import { useStickyHeader } from '@/hooks/useStickyHeader';
-import { useUserPreferences } from '@/hooks/useUserPreferences';
-import { request } from '@/http/axios';
-import { getStore, setStore } from '@/utils/storage';
-import { CxButton, CxForm, CxFormItem, CxInput, CxModal, CxSelect } from '@cx-ui';
-import { resolveAvatarUrl } from '@utils/url';
-import { validatePhoneNumber } from '@utils/validation';
-import { Form } from 'antd';
-import { Check, Loader2, Moon, Pencil, Settings as SettingsIcon, Sun, SwatchBook, Trash2, Upload, UserCog, UserLock, X } from 'lucide-react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-const SettingsPage: React.FC = () => {
-    const { user, refreshUser, logout } = useAuth();
-    const { t } = useTranslation();
-    const { saveTheme } = useUserPreferences();
-    // Global UI State
-    const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-        // const stored = localStorage.getItem('theme');
-        const stored = getStore('theme');
-        if (stored === 'dark' || stored === 'light') return stored;
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    });
-    const { showToast } = useToast();
-    const userName = user?.name || '';
-    const userAvatar = user?.avatar || '';
-    /** 当前用户手机号：兼容后端返回 phone 为 “+86 138xxx” 或仅号码，以及单独返回 areaCode 的场景。 */
-    const userPhoneRaw = (user as any)?.phone ?? '';
-    const userAreaCodeRaw =
-        (user as any)?.areaCode ??
-        (user as any)?.phoneAreaCode ??
-        (user as any)?.countryCode ??
-        '';
-
-    /** 将手机号来源拆成区号与号码，兼容历史 “+86 138xxxx” 格式。 */
-    const parseAreaCodeAndPhone = (rawAreaCode: unknown, rawPhone: unknown) => {
-        const areaFromField = rawAreaCode != null && rawAreaCode !== '' ? String(rawAreaCode).trim() : '';
-        const phoneFromField = rawPhone != null && rawPhone !== '' ? String(rawPhone).trim() : '';
-
-        if (areaFromField) {
-            return {
-                areaCode: areaFromField,
-                phone: phoneFromField,
-            };
-        }
-
-        if (!phoneFromField) {
-            return { areaCode: '+86', phone: '' };
-        }
-
-        const parts = phoneFromField.split(/\s+/).filter(Boolean);
-        if (parts.length > 1 && String(parts[0]).startsWith('+')) {
-            return { areaCode: String(parts[0]), phone: parts.slice(1).join(' ') };
-        }
-        return { areaCode: '+86', phone: phoneFromField };
-    };
-
-    const initialPhoneParts = parseAreaCodeAndPhone(userAreaCodeRaw, userPhoneRaw);
-
-    // Avatar State
-    const [isUploading, setIsUploading] = useState(false);
-    const [avatarUrl, setAvatarUrl] = useState(userAvatar);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-
-    // Display Name State
-    const [displayName, setDisplayName] = useState(userName);
-    const [isEditingName, setIsEditingName] = useState(false);
-    const [isSavingName, setIsSavingName] = useState(false);
-
-    // Phone Number State
-    const [isEditingPhone, setIsEditingPhone] = useState(false);
-    const [isSavingPhone, setIsSavingPhone] = useState(false);
-    const [isPhoneRevealed, setIsPhoneRevealed] = useState(false);
-    const [phoneNumber, setPhoneNumber] = useState(() => initialPhoneParts.phone);
-    const [countryCode, setCountryCode] = useState(() => initialPhoneParts.areaCode);
-
-    // Password State
-    const [isEditingPassword, setIsEditingPassword] = useState(false);
-    const [isSavingPassword, setIsSavingPassword] = useState(false);
-    const [passwordForm] = Form.useForm<{
-        oldPassword: string;
-        newPassword: string;
-        confirmPassword: string;
-    }>();
-
-
-    /** 监听主题变化：同步到 html class 与 localStorage（不在初始化时打接口）。 */
-    useEffect(() => {
-        if (theme === 'dark') {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
-        setStore('theme', theme);
-        // localStorage.setItem('theme', theme);
-    }, [theme, saveTheme]);
-
-    /** 切换明暗主题：立即更新 UI，并调用接口持久化到服务端。 */
-    const toggleTheme = () => {
-        const next = theme === 'light' ? 'dark' : 'light';
-        setTheme(next);
-        void saveTheme(next);
-    };
-
-    // --- Avatar Logic ---
-    /** 更新个人中心头像：调用 updateUserPersonalCenterAPI 写回头像字段，并刷新用户信息。 */
-    const updateAvatarByPersonalCenter = async (avatar: any) => {
-        const uid = user?.id;
-        if (uid === undefined || uid === null || String(uid) === '') {
-            showToast(t('base.settings.save_failed'), 'error');
-            return;
-        }
-        await updateUserPersonalCenterAPI({
-            id: uid,
-            avatar,
-            // 与昵称/手机号保存保持一致，避免后端覆盖其它字段
-            name: user?.name,
-            areaCode: countryCode,
-            phone: phoneNumber,
-            sex: user?.sex,
-            email: user?.email,
-        } as any);
-        await refreshUser();
-    }
-
-    /** 选择头像文件后上传（走 uploadImageApi），并在成功后刷新当前用户信息。 */
-    const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        if (file.size > 512 * 1024) {
-            showToast(t('base.settings.avatar_too_large'), 'error');
-            return;
-        }
-
-        try {
-            setIsUploading(true);
-            const response: any = await uploadFileAPI({ isPublic: true, file });
-            const address =
-                response?.data?.address ??
-                response?.address ??
-                response?.data?.data?.address ??
-                response?.data?.url ??
-                response?.url;
-
-            if (address) {
-                // 将上传得到的文件地址写回用户头像字段
-                setAvatarUrl(String(address));
-                await updateAvatarByPersonalCenter(address);
-                // showToast(t('base.settings.upload_success'), 'success');
-            } else {
-                // showToast(t('base.settings.upload_failed'), 'error');
-            }
-        } catch (error: any) {
-            console.error('Upload failed:', error);
-            const detail = error.response?.data?.detail;
-            const errMsg = typeof detail === 'string' ? detail : t('base.settings.upload_failed');
-            showToast(errMsg, 'error');
-        } finally {
-            setIsUploading(false);
-            if (fileInputRef.current) fileInputRef.current.value = '';
-        }
-    };
-
-    /** 移除头像：将头像字段置空并刷新当前用户信息。 */
-    const handleRemoveAvatar = async () => {
-        if (!avatarUrl) return;
-        setIsUploading(true);
-        try {
-            await updateAvatarByPersonalCenter(null);
-            setAvatarUrl('');
-            showToast(t('base.settings.save_success'), 'success');
-        } catch (error: any) {
-            console.error('Remove avatar failed:', error);
-            showToast(error.response?.data?.detail || t('base.settings.save_failed'), 'error');
-        } finally {
-            setIsUploading(false);
-        }
-    };
-
-    // --- Display Name Logic ---
-    /** 进入昵称编辑状态：将输入框值重置为当前用户昵称。 */
-    const startEditingName = () => {
-        setDisplayName(user?.name || '');
-        setIsEditingName(true);
-    };
-
-    /** 取消昵称编辑：恢复为当前用户昵称并退出编辑状态。 */
-    const cancelEditingName = () => {
-        setDisplayName(user?.name || '');
-        setIsEditingName(false);
-    };
-
-    /** 保存昵称：调用个人中心更新接口并在成功后刷新用户信息。 */
-    const saveName = async () => {
-        setIsSavingName(true);
-        try {
-            const uid = user?.id;
-            if (uid === undefined || uid === null || String(uid) === '') {
-                showToast(t('base.settings.save_failed'), 'error');
-                return;
-            }
-            await updateUserPersonalCenterAPI({
-                id: uid,
-                name: displayName,
-                areaCode: countryCode,
-                phone: phoneNumber,
-                sex:user?.sex,
-                email:user?.email,
-
-            });
-            showToast(t('base.settings.save_success'), 'success');
-            setIsEditingName(false);
-            await refreshUser();
-        } catch (error: any) {
-            console.log(error.response?.data?.detail || t('base.settings.save_failed'));
-        } finally {
-            setIsSavingName(false);
-        }
-    };
-
-    // --- Phone Number Logic ---
-    /** 显示/隐藏手机号明文：显示时调用 reveal 接口获取完整手机号。 */
-    // const handleRevealPhone = async () => {
-    //     if (isPhoneRevealed) {
-    //         setIsPhoneRevealed(false);
-    //         const parts = parseAreaCodeAndPhone(userAreaCodeRaw, userPhoneRaw);
-    //         setCountryCode(parts.areaCode);
-    //         setPhoneNumber(parts.phone);
-    //     } else {
-    //         try {
-    //             const response = await api.post('/users/me/phone/reveal', {}, { _forceEncryption: true } as any);
-    //             const fullPhone = response.data.phone;
-    //             const parts = parseAreaCodeAndPhone('', fullPhone);
-    //             setCountryCode(parts.areaCode);
-    //             setPhoneNumber(parts.phone);
-    //             setIsPhoneRevealed(true);
-    //         } catch (error: any) {
-    //             console.error('Failed to reveal phone', error);
-    //             showToast(t('base.settings.reveal_failed'), 'error');
-    //         }
-    //     }
-    // };
-
-    /** 开始编辑手机号：若当前是掩码，先尝试 reveal 以便编辑真实号码。 */
-    const startEditingPhone = async () => {
-        // If masked, try to reveal first so user edits the real number
-        if (!isPhoneRevealed && phoneNumber.includes('****')) {
-            try {
-                const response: any = await request({
-                    method: 'post',
-                    url: '/users/me/phone/reveal',
-                    data: {},
-                    _forceEncryption: true,
-                } as any);
-                const fullPhone = response?.phone ?? response?.data?.phone;
-                const parts = parseAreaCodeAndPhone('', fullPhone);
-                setCountryCode(parts.areaCode);
-                setPhoneNumber(parts.phone);
-                setIsPhoneRevealed(true);
-            } catch (e) {
-                // If reveal fails, user starts with masked or empty?
-                // Let's clear it to avoid submitting mask
-                setPhoneNumber('');
-            }
-        }
-        setIsEditingPhone(true);
-    };
-
-    /** 取消手机号编辑：退出编辑状态并恢复为用户当前手机号（掩码显示）。 */
-    const cancelEditingPhone = () => {
-        setIsEditingPhone(false);
-        setIsPhoneRevealed(false);
-        const parts = parseAreaCodeAndPhone(userAreaCodeRaw, userPhoneRaw);
-        setCountryCode(parts.areaCode);
-        setPhoneNumber(parts.phone);
-    };
-
-    /** 保存手机号：调用个人中心更新接口。 */
-    const savePhone = async () => {
-        if (!validatePhoneNumber(countryCode, phoneNumber)) {
-            showToast(t('base.settings.invalid_phone_number'), 'error');
-            return;
-        }
-
-        const uid = user?.id;
-        if (uid === undefined || uid === null || String(uid) === '') {
-            showToast(t('base.settings.save_failed'), 'error');
-            return;
-        }
-
-        setIsSavingPhone(true);
-        try {
-            await updateUserPersonalCenterAPI({
-                id: uid,
-                areaCode: countryCode,
-                phone: phoneNumber,
-                sex:user?.sex,
-                name:user?.name,
-                email:user?.email,
-            });
-            showToast(t('base.settings.save_success'), 'success');
-            setIsEditingPhone(false);
-            await refreshUser();
-        } catch (error: any) {
-            const msg =
-                (typeof error?.message === 'string' && error.message) ||
-                error?.response?.data?.detail ||
-                t('base.settings.save_failed');
-            console.log(msg);
-        } finally {
-            setIsSavingPhone(false);
-        }
-    };
-
-    // --- Password Logic ---
-    /** 开始修改密码：清空新密码输入并打开弹窗。 */
-    const startEditingPassword = () => {
-        passwordForm.setFieldsValue({
-            oldPassword: '',
-            newPassword: '',
-            confirmPassword: '',
-        });
-        setIsEditingPassword(true);
-    };
-
-    /** 取消修改密码：清空输入并关闭弹窗。 */
-    const cancelEditingPassword = () => {
-        passwordForm.resetFields();
-        setIsEditingPassword(false);
-    };
-
-    /** 保存新密码：校验表单后调用 changePasswordAPI，成功后强制退出登录。 */
-    const savePassword = async () => {
-        const values = await passwordForm.validateFields();
-        const oldPassword = String(values?.oldPassword || '');
-        const newPassword = String(values?.newPassword || '');
-        const confirmPassword = String(values?.confirmPassword || '');
-        if (newPassword !== confirmPassword) {
-            showToast(t('base.settings.password_mismatch'), 'error');
-            return;
-        }
-
-        setIsSavingPassword(true);
-        try {
-            const uid = user?.id;
-            if (uid === undefined || uid === null || String(uid) === '') {
-                showToast(t('base.settings.save_failed'), 'error');
-                return;
-            }
-
-            await changePasswordAPI({
-                id: uid,
-                oldPassword,
-                newPassword,
-                confirmPassword,
-            } as any);
-
-            showToast(t('base.settings.save_success'), 'success');
-            setIsEditingPassword(false);
-            passwordForm.resetFields();
-            await logout();
-        } catch (error: any) {
-            const detail = error?.response?.data?.detail ?? error?.message;
-            console.log(t(detail) === detail ? (detail || t('base.settings.save_failed')) : t(detail));
-        } finally {
-            setIsSavingPassword(false);
-        }
-    };
-
-
-    // Sticky Header
-    const titleRef = useStickyHeader(t('base.settings.title'));
-
-    return (
-        <div className="p-6 max-w-3xl mx-auto pb-20">
-            {/* Header */}
-            <div className="mb-8" ref={titleRef}>
-                <h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 flex items-center gap-3">
-                    <SettingsIcon className="text-blue-400" size={32} />
-                    {t('base.settings.title')}
-                </h1>
-                <p className="text-gray-400 mt-2">{t('base.settings.description')}</p>
-            </div>
-
-            {/* Profile Information Section */}
-            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6 transition-all hover:shadow-md">
-                <h2 className="text-lg font-semibold mb-6 text-gray-900 dark:text-white flex items-center gap-2">
-                    <UserCog size={20} className="text-gray-400" />
-                    {t('base.settings.profile')}
-                </h2>
-
-                <div className="space-y-6">
-                    {/* Avatar Field */}
-                    <div className="flex flex-col items-center sm:flex-row sm:items-start gap-6">
-                        <div className="relative group">
-                            <div
-                                className="w-24 h-24 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700 border-4 border-white dark:border-gray-800 shadow-lg cursor-pointer relative transition-transform group-hover:scale-105"
-                                onClick={() => !isUploading && fileInputRef.current?.click()}
-                            >
-                                {avatarUrl ? (
-                                    <img
-                                        src={resolveAvatarUrl(avatarUrl)}
-                                        alt="Avatar"
-                                        className="w-full h-full object-cover"
-                                        onError={(e) => {
-                                            const target = e.target as HTMLImageElement;
-                                            target.style.display = 'none';
-                                            if (target.nextElementSibling) {
-                                                (target.nextElementSibling as HTMLElement).style.display = 'flex';
-                                            }
-                                        }}
-                                    />
-                                ) : null}
-
-                                <div
-                                    className="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-4xl"
-                                    style={{ display: avatarUrl ? 'none' : 'flex' }}
-                                >
-                                    {(user?.name || t('common.user_display_fallback'))[0].toUpperCase()}
-                                </div>
-
-                                <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                                    <Upload size={24} className="text-white" />
-                                </div>
-                                {isUploading && (
-                                    <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-100">
-                                        <Loader2 size={24} className="text-white animate-spin" />
-                                    </div>
-                                )}
-                            </div>
-                            {avatarUrl && (
-                                <button
-                                    type="button"
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleRemoveAvatar();
-                                    }}
-                                    className="absolute -top-1 -right-1 p-1.5 bg-white dark:bg-gray-800 rounded-full shadow-md border border-gray-200 dark:border-gray-700 text-red-500 hover:text-red-600 hover:bg-gray-50 dark:hover:bg-gray-700 active:scale-90 active:bg-red-50 dark:active:bg-red-900/20 transition-all z-10"
-                                    title={t('base.settings.remove_avatar')}
-                                >
-                                    <Trash2 size={14} />
-                                </button>
-                            )}
-                        </div>
-                        <div className="flex-1 text-center sm:text-left pt-2">
-                            {isEditingName ? (
-                                <div className="flex items-center gap-2 mb-1 justify-center sm:justify-start">
-                                    <input
-                                        type="text"
-                                        value={displayName}
-                                        onChange={(e) => setDisplayName(e.target.value)}
-                                        className="w-48 px-2 py-1 bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none"
-                                        autoFocus
-                                    />
-                                    <button onClick={saveName} disabled={isSavingName} className="p-1.5 bg-blue-50/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/40 active:scale-90 active:bg-blue-200 dark:active:bg-blue-800/60 transition-all">
-                                        {isSavingName ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
-                                    </button>
-                                    <button onClick={cancelEditingName} disabled={isSavingName} className="p-1.5 bg-gray-100 dark:bg-gray-800 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 rounded-lg hover:bg-gray-200 active:scale-90 active:bg-gray-300 dark:active:bg-gray-600 transition-all">
-                                        <X size={14} />
-                                    </button>
-                                </div>
-                            ) : (
-                                <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-1 flex items-center justify-center sm:justify-start gap-2 group/name">
-                                    {user?.name || t('common.not_set')}
-                                    <button onClick={startEditingName} className="text-gray-400 hover:text-blue-500 active:scale-90 transition-all opacity-100 sm:opacity-0 sm:group-hover/name:opacity-100 p-1">
-                                        <Pencil size={14} />
-                                    </button>
-                                </h3>
-                            )}
-                            <p className="text-gray-500 dark:text-gray-400 text-sm mb-4">{user?.email}</p>
-                            <div className="inline-block relative">
-                                <input type="file" ref={fileInputRef} onChange={handleFileSelect} accept="image/*" className="hidden" />
-                                <button
-                                    onClick={() => fileInputRef.current?.click()}
-                                    className="text-sm text-blue-600 dark:text-blue-400 hover:underline font-medium active:scale-95 transition-transform"
-                                >
-                                    {t('base.settings.avatar_url_hint')}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-
-                </div>
-            </div>
-
-            {/* Account Security Section */}
-            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6 transition-all hover:shadow-md">
-                <h2 className="text-lg font-semibold mb-6 text-gray-900 dark:text-white flex items-center gap-2">
-                    <UserLock size={20} className="text-gray-400" />
-                    {t('base.settings.account_security')}
-                </h2>
-
-                <div className="space-y-8">
-                    {/* Phone Number Field */}
-                    <div>
-                        <div className="flex justify-between items-center mb-2">
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{t('base.settings.phone_number')}</label>
-                            {!isEditingPhone && (
-                                <button onClick={startEditingPhone} className="text-gray-400 hover:text-blue-500 active:scale-90 transition-all p-1">
-                                    <Pencil size={16} />
-                                </button>
-                            )}
-                        </div>
-
-                        {isEditingPhone ? (
-                            <div className="flex items-center gap-2">
-                                <div className="flex relative flex-1">
-                                    <div className="relative">
-                                        <CxSelect
-                                            value={countryCode}
-                                            onChange={(v) => setCountryCode(String(v))}
-                                            options={countryCodes.map((country) => ({
-                                                label: country.dial_code,
-                                                value: country.dial_code,
-                                            }))}
-                                            style={{ width: 96 }}
-                                        />
-                                    </div>
-                                    <CxInput
-                                        inputMode="tel"
-                                        value={phoneNumber}
-                                        onChange={(e) => setPhoneNumber(e.target.value)}
-                                        className="flex-1"
-                                        placeholder={t('base.settings.phone_placeholder')}
-                                    />
-                                </div>
-                                <button onClick={savePhone} disabled={isSavingPhone} className="p-2.5 bg-blue-50/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-100 dark:hover:bg-blue-900/40 active:scale-90 active:bg-blue-200 dark:active:bg-blue-800/60 transition-all">
-                                    {isSavingPhone ? <Loader2 size={18} className="animate-spin" /> : <Check size={18} />}
-                                </button>
-                                <button onClick={cancelEditingPhone} disabled={isSavingPhone} className="p-2.5 bg-gray-100 dark:bg-gray-800 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 rounded-xl hover:bg-gray-200 active:scale-90 active:bg-gray-300 dark:active:bg-gray-600 transition-all">
-                                    <X size={18} />
-                                </button>
-                            </div>
-                        ) : (
-                            <div className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900/30 rounded-xl text-gray-900 dark:text-white border border-transparent">
-                                <span>
-                                    {userPhoneRaw ?
-                                        (isPhoneRevealed ?
-                                            `${countryCode} ${phoneNumber}`
-                                            : userPhoneRaw
-                                        )
-                                        : t('common.not_set')}
-                                </span>
-                                {/* <button
-                                    type="button"
-                                    onClick={handleRevealPhone}
-                                    className="text-gray-400 hover:text-blue-500 active:scale-90 transition-all"
-                                    title={isPhoneRevealed ? "Hide" : "Reveal"}
-                                >
-                                    {isPhoneRevealed ? <EyeOff size={18} /> : <Eye size={18} />}
-                                </button> */}
-                            </div>
-                        )}
-                    </div>
-
-                    {/* Password Field */}
-                    <div className="pt-6 border-t border-gray-100 dark:border-gray-700/50">
-                        <div className="flex justify-between items-center">
-                            <div>
-                                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200">{t('base.settings.change_password')}</h3>
-                                <p className="text-sm text-gray-500 mt-1">{t('base.settings.change_password_desc')}</p>
-                            </div>
-                            <CxButton
-                                type="default"
-                                onClick={startEditingPassword}
-                                className="px-4 py-2 text-sm"
-                            >
-                                {t('base.settings.change_password')}
-                            </CxButton>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* Appearance Section */}
-            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6 transition-all hover:shadow-md">
-                <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center gap-2">
-                    <SwatchBook size={20} className="text-gray-400" />
-                    {t('base.settings.appearance')}
-                </h2>
-                <div className="space-y-4">
-                    <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
-                        <span className="text-gray-700 dark:text-gray-300 font-medium">{t('base.settings.theme')}</span>
-                        <button
-                            onClick={toggleTheme}
-                            className="p-2 rounded-lg bg-white dark:bg-gray-700 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 active:scale-90 active:bg-gray-100 dark:active:bg-gray-500 transition-all border border-gray-200 dark:border-gray-600"
-                        >
-                            {theme === 'light' ? <Sun size={20} className="text-yellow-500" /> : <Moon size={20} className="text-blue-400" />}
-                        </button>
-                    </div>
-                    <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
-                        <span className="text-gray-700 dark:text-gray-300 font-medium">{t('base.settings.language')}</span>
-                        <LanguageSwitcher />
-                    </div>
-                </div>
-            </div>
-
-            {/* Password Change Modal */}
-            <CxModal
-                title={t('base.settings.change_password')}
-                isOpen={isEditingPassword}
-                onClose={cancelEditingPassword}
-                opeType="default"
-                submitting={isSavingPassword}
-                onOk={savePassword}
-                modalConfig={{ width: 520 }}
-            >
-                <CxForm form={passwordForm} layout="vertical">
-                    <CxFormItem
-                        label={t('base.settings.current_password')}
-                        name="oldPassword"
-                        rules={[{ required: true, message: t('base.settings.current_password_placeholder') }]}
-                    >
-                        <CxInput
-                            type="password"
-                            className="w-full"
-                            placeholder={t('base.settings.current_password_placeholder')}
-                        />
-                    </CxFormItem>
-
-                    <CxFormItem
-                        label={t('base.settings.new_password')}
-                        name="newPassword"
-                        rules={[{ required: true, message: t('base.settings.password_required') }]}
-                    >
-                        <CxInput
-                            type="password"
-                            className="w-full"
-                            placeholder={t('base.settings.new_password_placeholder')}
-                        />
-                    </CxFormItem>
-
-                    <CxFormItem
-                        label={t('base.settings.confirm_password')}
-                        name="confirmPassword"
-                        rules={[{ required: true, message: t('base.settings.confirm_password_placeholder') }]}
-                    >
-                        <CxInput
-                            type="password"
-                            className="w-full"
-                            placeholder={t('base.settings.confirm_password_placeholder')}
-                        />
-                    </CxFormItem>
-                </CxForm>
-            </CxModal>
-        </div>
-    );
-};
-
-export default SettingsPage;