new-api/web/src/components/PersonalSetting.js

import React, {useContext, useEffect, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {
    API,
    copy,
    isRoot,
    showError,
    showInfo,
    showSuccess,
} from '../helpers';
import Turnstile from 'react-turnstile';
import {UserContext} from '../context/User';
import {onGitHubOAuthClicked, onLinuxDOOAuthClicked} from './utils';
import {
    Avatar,
    Banner,
    Button,
    Card,
    Descriptions,
    Image,
    Input,
    InputNumber,
    Layout,
    Modal,
    Space,
    Tag,
    Typography,
    Collapsible,
    Select,
    Radio,
    RadioGroup,
    AutoComplete,
} from '@douyinfe/semi-ui';
import {
    getQuotaPerUnit,
    renderQuota,
    renderQuotaWithPrompt,
    stringToColor,
} from '../helpers/render';
import TelegramLoginButton from 'react-telegram-login';
import { useTranslation } from 'react-i18next';

const PersonalSetting = () => {
    const [userState, userDispatch] = useContext(UserContext);
    let navigate = useNavigate();
    const { t } = useTranslation();

    const [inputs, setInputs] = useState({
        wechat_verification_code: '',
        email_verification_code: '',
        email: '',
        self_account_deletion_confirmation: '',
        set_new_password: '',
        set_new_password_confirmation: '',
    });
    const [status, setStatus] = useState({});
    const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
    const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
    const [showEmailBindModal, setShowEmailBindModal] = useState(false);
    const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
    const [turnstileEnabled, setTurnstileEnabled] = useState(false);
    const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
    const [turnstileToken, setTurnstileToken] = useState('');
    const [loading, setLoading] = useState(false);
    const [disableButton, setDisableButton] = useState(false);
    const [countdown, setCountdown] = useState(30);
    const [affLink, setAffLink] = useState('');
    const [systemToken, setSystemToken] = useState('');
    const [models, setModels] = useState([]);
    const [openTransfer, setOpenTransfer] = useState(false);
    const [transferAmount, setTransferAmount] = useState(0);
    const [isModelsExpanded, setIsModelsExpanded] = useState(() => {
        // Initialize from localStorage if available
        const savedState = localStorage.getItem('modelsExpanded');
        return savedState ? JSON.parse(savedState) : false;
    });
    const MODELS_DISPLAY_COUNT = 10;  // 默认显示的模型数量
    const [notificationSettings, setNotificationSettings] = useState({
        warningType: 'email',
        warningThreshold: 100000,
        webhookUrl: '',
        webhookSecret: '',
        notificationEmail: ''
    });
    const [showWebhookDocs, setShowWebhookDocs] = useState(false);

    useEffect(() => {
        let status = localStorage.getItem('status');
        if (status) {
            status = JSON.parse(status);
            setStatus(status);
            if (status.turnstile_check) {
                setTurnstileEnabled(true);
                setTurnstileSiteKey(status.turnstile_site_key);
            }
        }
        getUserData().then((res) => {
            console.log(userState);
        });
        loadModels().then();
        getAffLink().then();
        setTransferAmount(getQuotaPerUnit());
    }, []);

    useEffect(() => {
        let countdownInterval = null;
        if (disableButton && countdown > 0) {
            countdownInterval = setInterval(() => {
                setCountdown(countdown - 1);
            }, 1000);
        } else if (countdown === 0) {
            setDisableButton(false);
            setCountdown(30);
        }
        return () => clearInterval(countdownInterval); // Clean up on unmount
    }, [disableButton, countdown]);

    useEffect(() => {
        if (userState?.user?.setting) {
            const settings = JSON.parse(userState.user.setting);
            setNotificationSettings({
                warningType: settings.notify_type || 'email',
                warningThreshold: settings.quota_warning_threshold || 500000,
                webhookUrl: settings.webhook_url || '',
                webhookSecret: settings.webhook_secret || '',
                notificationEmail: settings.notification_email || ''
            });
        }
    }, [userState?.user?.setting]);

    // Save models expanded state to localStorage whenever it changes
    useEffect(() => {
        localStorage.setItem('modelsExpanded', JSON.stringify(isModelsExpanded));
    }, [isModelsExpanded]);

    const handleInputChange = (name, value) => {
        setInputs((inputs) => ({...inputs, [name]: value}));
    };

    const generateAccessToken = async () => {
        const res = await API.get('/api/user/token');
        const {success, message, data} = res.data;
        if (success) {
            setSystemToken(data);
            await copy(data);
            showSuccess(t('令牌已重置并已复制到剪贴板'));
        } else {
            showError(message);
        }
    };

    const getAffLink = async () => {
        const res = await API.get('/api/user/aff');
        const {success, message, data} = res.data;
        if (success) {
            let link = `${window.location.origin}/register?aff=${data}`;
            setAffLink(link);
        } else {
            showError(message);
        }
    };

    const getUserData = async () => {
        let res = await API.get(`/api/user/self`);
        const {success, message, data} = res.data;
        if (success) {
            userDispatch({type: 'login', payload: data});
        } else {
            showError(message);
        }
    };

    const loadModels = async () => {
        let res = await API.get(`/api/user/models`);
        const {success, message, data} = res.data;
        if (success) {
            if (data != null) {
                setModels(data);
            }
        } else {
            showError(message);
        }
    };

    const handleAffLinkClick = async (e) => {
        e.target.select();
        await copy(e.target.value);
        showSuccess(t('邀请链接已复制到剪切板'));
    };

    const handleSystemTokenClick = async (e) => {
        e.target.select();
        await copy(e.target.value);
        showSuccess(t('系统令牌已复制到剪切板'));
    };

    const deleteAccount = async () => {
        if (inputs.self_account_deletion_confirmation !== userState.user.username) {
            showError(t('请输入你的账户名以确认删除！'));
            return;
        }

        const res = await API.delete('/api/user/self');
        const {success, message} = res.data;

        if (success) {
            showSuccess(t('账户已删除！'));
            await API.get('/api/user/logout');
            userDispatch({type: 'logout'});
            localStorage.removeItem('user');
            navigate('/login');
        } else {
            showError(message);
        }
    };

    const bindWeChat = async () => {
        if (inputs.wechat_verification_code === '') return;
        const res = await API.get(
            `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`,
        );
        const {success, message} = res.data;
        if (success) {
            showSuccess(t('微信账户绑定成功！'));
            setShowWeChatBindModal(false);
        } else {
            showError(message);
        }
    };

    const changePassword = async () => {
        if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
            showError(t('两次输入的密码不一致！'));
            return;
        }
        const res = await API.put(`/api/user/self`, {
            password: inputs.set_new_password,
        });
        const {success, message} = res.data;
        if (success) {
            showSuccess(t('密码修改成功！'));
            setShowWeChatBindModal(false);
        } else {
            showError(message);
        }
        setShowChangePasswordModal(false);
    };

    const transfer = async () => {
        if (transferAmount < getQuotaPerUnit()) {
            showError(t('划转金额最低为') + ' ' + renderQuota(getQuotaPerUnit()));
            return;
        }
        const res = await API.post(`/api/user/aff_transfer`, {
            quota: transferAmount,
        });
        const {success, message} = res.data;
        if (success) {
            showSuccess(message);
            setOpenTransfer(false);
            getUserData().then();
        } else {
            showError(message);
        }
    };

    const sendVerificationCode = async () => {
        if (inputs.email === '') {
            showError(t('请输入邮箱！'));
            return;
        }
        setDisableButton(true);
        if (turnstileEnabled && turnstileToken === '') {
            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
            return;
        }
        setLoading(true);
        const res = await API.get(
            `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
        );
        const {success, message} = res.data;
        if (success) {
            showSuccess(t('验证码发送成功，请检查邮箱！'));
        } else {
            showError(message);
        }
        setLoading(false);
    };

    const bindEmail = async () => {
        if (inputs.email_verification_code === '') {
            showError(t('请输入邮箱验证码！'));
            return;
        }
        setLoading(true);
        const res = await API.get(
            `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`,
        );
        const {success, message} = res.data;
        if (success) {
            showSuccess(t('邮箱账户绑定成功！'));
            setShowEmailBindModal(false);
            userState.user.email = inputs.email;
        } else {
            showError(message);
        }
        setLoading(false);
    };

    const getUsername = () => {
        if (userState.user) {
            return userState.user.username;
        } else {
            return 'null';
        }
    };

    const handleCancel = () => {
        setOpenTransfer(false);
    };

    const copyText = async (text) => {
        if (await copy(text)) {
            showSuccess(t('已复制：') + text);
        } else {
            // setSearchKeyword(text);
            Modal.error({title: t('无法复制到剪贴板，请手动复制'), content: text});
        }
    };

    const handleNotificationSettingChange = (type, value) => {
        setNotificationSettings(prev => ({
            ...prev,
            [type]: value.target ? value.target.value : value  // 处理 Radio 事件对象
        }));
    };

    const saveNotificationSettings = async () => {
        try {
            const res = await API.put('/api/user/setting', {
                notify_type: notificationSettings.warningType,
                quota_warning_threshold: parseFloat(notificationSettings.warningThreshold),
                webhook_url: notificationSettings.webhookUrl,
                webhook_secret: notificationSettings.webhookSecret,
                notification_email: notificationSettings.notificationEmail
            });
            
            if (res.data.success) {
                showSuccess(t('通知设置已更新'));
                await getUserData();
            } else {
                showError(res.data.message);
            }
        } catch (error) {
            showError(t('更新通知设置失败'));
        }
    };

    return (

        <div>
            <Layout>
                <Layout.Content>
                    <Modal
                        title={t('请输入要划转的数量')}
                        visible={openTransfer}
                        onOk={transfer}
                        onCancel={handleCancel}
                        maskClosable={false}
                        size={'small'}
                        centered={true}
                    >
                        <div style={{marginTop: 20}}>
                            <Typography.Text>{t('可用额度')}{renderQuotaWithPrompt(userState?.user?.aff_quota)}</Typography.Text>
                            <Input
                                style={{marginTop: 5}}
                                value={userState?.user?.aff_quota}
                                disabled={true}
                            ></Input>
                        </div>
                        <div style={{marginTop: 20}}>
                            <Typography.Text>
                                {t('划转额度')}{renderQuotaWithPrompt(transferAmount)} {t('最低') + renderQuota(getQuotaPerUnit())}
                            </Typography.Text>
                            <div>
                                <InputNumber
                                    min={0}
                                    style={{marginTop: 5}}
                                    value={transferAmount}
                                    onChange={(value) => setTransferAmount(value)}
                                    disabled={false}
                                ></InputNumber>
                            </div>
                        </div>
                    </Modal>
                    <div style={{marginTop: 20}}>
                        <Card
                            title={
                                <Card.Meta
                                    avatar={
                                        <Avatar
                                            size='default'
                                            color={stringToColor(getUsername())}
                                            style={{marginRight: 4}}
                                        >
                                            {typeof getUsername() === 'string' &&
                                                getUsername().slice(0, 1)}
                                        </Avatar>
                                    }
                                    title={<Typography.Text>{getUsername()}</Typography.Text>}
                                    description={
                                        isRoot() ? (
                                            <Tag color='red'>{t('管理员')}</Tag>
                                        ) : (
                                            <Tag color='blue'>{t('普通用户')}</Tag>
                                        )
                                    }
                                ></Card.Meta>
                            }
                            headerExtraContent={
                                <>
                                    <Space vertical align='start'>
                                        <Tag color='green'>{'ID: ' + userState?.user?.id}</Tag>
                                        <Tag color='blue'>{userState?.user?.group}</Tag>
                                    </Space>
                                </>
                            }
                            footer={
                            <>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                    <Typography.Title heading={6}>{t('可用模型')}</Typography.Title>
                                </div>
                                <div style={{marginTop: 10}}>
                                    {models.length <= MODELS_DISPLAY_COUNT ? (
                                        <Space wrap>
                                            {models.map((model) => (
                                                <Tag
                                                    key={model}
                                                    color='cyan'
                                                    onClick={() => {
                                                        copyText(model);
                                                    }}
                                                >
                                                    {model}
                                                </Tag>
                                            ))}
                                        </Space>
                                    ) : (
                                        <>
                                            <Collapsible isOpen={isModelsExpanded}>
                                                <Space wrap>
                                                    {models.map((model) => (
                                                        <Tag
                                                            key={model}
                                                            color='cyan'
                                                            onClick={() => {
                                                                copyText(model);
                                                            }}
                                                        >
                                                            {model}
                                                        </Tag>
                                                    ))}
                                                    <Tag 
                                                        color='blue' 
                                                        type="light"
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => setIsModelsExpanded(false)}
                                                    >
                                                        {t('收起')}
                                                    </Tag>
                                                </Space>
                                            </Collapsible>
                                            {!isModelsExpanded && (
                                                <Space wrap>
                                                    {models.slice(0, MODELS_DISPLAY_COUNT).map((model) => (
                                                        <Tag
                                                            key={model}
                                                            color='cyan'
                                                            onClick={() => {
                                                                copyText(model);
                                                            }}
                                                        >
                                                            {model}
                                                        </Tag>
                                                    ))}
                                                    <Tag 
                                                        color='blue'
                                                        type="light"
                                                        style={{ cursor: 'pointer' }}
                                                        onClick={() => setIsModelsExpanded(true)}
                                                    >
                                                        {t('更多')} {models.length - MODELS_DISPLAY_COUNT} {t('个模型')}
                                                    </Tag>
                                                </Space>
                                            )}
                                        </>
                                    )}
                                </div>
                            </>

                            }
                        >
                            <Descriptions row>
                                <Descriptions.Item itemKey={t('当前余额')}>
                                    {renderQuota(userState?.user?.quota)}
                                </Descriptions.Item>
                                <Descriptions.Item itemKey={t('历史消耗')}>
                                    {renderQuota(userState?.user?.used_quota)}
                                </Descriptions.Item>
                                <Descriptions.Item itemKey={t('请求次数')}>
                                    {userState.user?.request_count}
                                </Descriptions.Item>
                            </Descriptions>
                        </Card>
                        <Card
                            style={{marginTop: 10}}
                            footer={
                                <div>
                                    <Typography.Text>{t('邀请链接')}</Typography.Text>
                                    <Input
                                        style={{marginTop: 10}}
                                        value={affLink}
                                        onClick={handleAffLinkClick}
                                        readOnly
                                    />
                                </div>
                            }
                        >
                            <Typography.Title heading={6}>{t('邀请信息')}</Typography.Title>
                            <div style={{marginTop: 10}}>
                                <Descriptions row>
                                    <Descriptions.Item itemKey={t('待使用收益')}>
                                        <span style={{color: 'rgba(var(--semi-red-5), 1)'}}>
                                            {renderQuota(userState?.user?.aff_quota)}
                                        </span>
                                        <Button
                                            type={'secondary'}
                                            onClick={() => setOpenTransfer(true)}
                                            size={'small'}
                                            style={{marginLeft: 10}}
                                        >
                                            {t('划转')}
                                        </Button>
                                    </Descriptions.Item>
                                    <Descriptions.Item itemKey={t('总收益')}>
                                        {renderQuota(userState?.user?.aff_history_quota)}
                                    </Descriptions.Item>
                                    <Descriptions.Item itemKey={t('邀请人数')}>
                                        {userState?.user?.aff_count}
                                    </Descriptions.Item>
                                </Descriptions>
                            </div>
                        </Card>
                        <Card style={{marginTop: 10}}>
                            <Typography.Title heading={6}>{t('个人信息')}</Typography.Title>
                            <div style={{marginTop: 20}}>
                                <Typography.Text strong>{t('邮箱')}</Typography.Text>
                                <div
                                    style={{display: 'flex', justifyContent: 'space-between'}}
                                >
                                    <div>
                                        <Input
                                            value={
                                                userState.user && userState.user.email !== ''
                                                    ? userState.user.email
                                                    : t('未绑定')
                                            }
                                            readonly={true}
                                        ></Input>
                                    </div>
                                    <div>
                                        <Button
                                            onClick={() => {
                                                setShowEmailBindModal(true);
                                            }}
                                        >
                                            {userState.user && userState.user.email !== ''
                                                ? t('修改绑定')
                                                : t('绑定邮箱')}
                                        </Button>
                                    </div>
                                </div>
                            </div>
                            <div style={{marginTop: 10}}>
                                <Typography.Text strong>{t('微信')}</Typography.Text>
                                <div style={{display: 'flex', justifyContent: 'space-between'}}>
                                    <div>
                                        <Input
                                            value={
                                                userState.user && userState.user.wechat_id !== ''
                                                    ? t('已绑定')
                                                    : t('未绑定')
                                            }
                                            readonly={true}
                                        ></Input>
                                    </div>
                                    <div>
                                        <Button
                                            disabled={!status.wechat_login}
                                            onClick={() => {
                                                setShowWeChatBindModal(true);
                                            }}
                                        >
                                            {userState.user && userState.user.wechat_id !== ''
                                                ? t('修改绑定')
                                                : status.wechat_login 
                                                    ? t('绑定') 
                                                    : t('未启用')}
                                        </Button>
                                    </div>
                                </div>
                            </div>
                            <div style={{marginTop: 10}}>
                                <Typography.Text strong>{t('GitHub')}</Typography.Text>
                                <div
                                    style={{display: 'flex', justifyContent: 'space-between'}}
                                >
                                    <div>
                                        <Input
                                            value={
                                                userState.user && userState.user.github_id !== ''
                                                    ? userState.user.github_id
                                                    : t('未绑定')
                                            }
                                            readonly={true}
                                        ></Input>
                                    </div>
                                    <div>
                                        <Button
                                            onClick={() => {
                                                onGitHubOAuthClicked(status.github_client_id);
                                            }}
                                            disabled={
                                                (userState.user && userState.user.github_id !== '') ||
                                                !status.github_oauth
                                            }
                                        >
                                            {status.github_oauth ? t('绑定') : t('未启用')}
                                        </Button>
                                    </div>
                                </div>
                            </div>
                            <div style={{marginTop: 10}}>
                                <Typography.Text strong>{t('Telegram')}</Typography.Text>
                                <div
                                    style={{display: 'flex', justifyContent: 'space-between'}}
                                >
                                    <div>
                                        <Input
                                            value={
                                                userState.user && userState.user.telegram_id !== ''
                                                    ? userState.user.telegram_id
                                                    : t('未绑定')
                                            }
                                            readonly={true}
                                        ></Input>
                                    </div>
                                    <div>
                                        {status.telegram_oauth ? (
                                            userState.user.telegram_id !== '' ? (
                                                <Button disabled={true}>{t('已绑定')}</Button>
                                            ) : (
                                                <TelegramLoginButton
                                                    dataAuthUrl='/api/oauth/telegram/bind'
                                                    botName={status.telegram_bot_name}
                                                />
                                            )
                                        ) : (
                                            <Button disabled={true}>{t('未启用')}</Button>
                                        )}
                                    </div>
                                </div>
                            </div>
                            <div style={{marginTop: 10}}>
                                <Typography.Text strong>{t('LinuxDO')}</Typography.Text>
                                <div
                                    style={{display: 'flex', justifyContent: 'space-between'}}
                                >
                                    <div>
                                        <Input
                                            value={
                                                userState.user && userState.user.linux_do_id !== ''
                                                    ? userState.user.linux_do_id
                                                    : t('未绑定')
                                            }
                                            readonly={true}
                                        ></Input>
                                    </div>
                                    <div>
                                        <Button
                                            onClick={() => {
                                                onLinuxDOOAuthClicked(status.linuxdo_client_id);
                                            }}
                                            disabled={
                                                (userState.user && userState.user.linux_do_id !== '') ||
                                                !status.linuxdo_oauth
                                            }
                                        >
                                            {status.linuxdo_oauth ? t('绑定') : t('未启用')}
                                        </Button>
                                    </div>
                                </div>
                            </div>
                            <div style={{marginTop: 10}}>
                                <Space>
                                    <Button onClick={generateAccessToken}>
                                        {t('生成系统访问令牌')}
                                    </Button>
                                    <Button
                                        onClick={() => {
                                            setShowChangePasswordModal(true);
                                        }}
                                    >
                                        {t('修改密码')}
                                    </Button>
                                    <Button
                                        type={'danger'}
                                        onClick={() => {
                                            setShowAccountDeleteModal(true);
                                        }}
                                    >
                                        {t('删除个人账户')}
                                    </Button>
                                </Space>

                                {systemToken && (
                                    <Input
                                        readOnly
                                        value={systemToken}
                                        onClick={handleSystemTokenClick}
                                        style={{marginTop: '10px'}}
                                    />
                                )}
                                <Modal
                                    onCancel={() => setShowWeChatBindModal(false)}
                                    visible={showWeChatBindModal}
                                    size={'small'}
                                >
                                    <Image src={status.wechat_qrcode}/>
                                    <div style={{textAlign: 'center'}}>
                                        <p>
                                            微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                                        </p>
                                    </div>
                                    <Input
                                        placeholder='验证码'
                                        name='wechat_verification_code'
                                        value={inputs.wechat_verification_code}
                                        onChange={(v) =>
                                            handleInputChange('wechat_verification_code', v)
                                        }
                                    />
                                    <Button color='' fluid size='large' onClick={bindWeChat}>
                                        {t('绑定')}
                                    </Button>
                                </Modal>
                            </div>
                        </Card>
                        <Card style={{marginTop: 10}}>
                            <Typography.Title heading={6}>{t('通知设置')}</Typography.Title>
                            <div style={{marginTop: 20}}>
                                <Typography.Text strong>{t('通知方式')}</Typography.Text>
                                <div style={{marginTop: 10}}>
                                    <RadioGroup
                                        value={notificationSettings.warningType}
                                        onChange={value => handleNotificationSettingChange('warningType', value)}
                                    >
                                        <Radio value="email">{t('邮件通知')}</Radio>
                                        <Radio value="webhook">{t('Webhook通知')}</Radio>
                                    </RadioGroup>
                                </div>
                            </div>
                            {notificationSettings.warningType === 'webhook' && (
                                <>
                                    <div style={{marginTop: 20}}>
                                        <Typography.Text strong>{t('Webhook地址')}</Typography.Text>
                                        <div style={{marginTop: 10}}>
                                            <Input
                                                value={notificationSettings.webhookUrl}
                                                onChange={val => handleNotificationSettingChange('webhookUrl', val)}
                                                placeholder={t('请输入Webhook地址，例如: https://example.com/webhook')}
                                            />
                                            <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
                                                {t('只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求')}
                                            </Typography.Text>
                                            <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
                                                <div style={{cursor: 'pointer'}} onClick={() => setShowWebhookDocs(!showWebhookDocs)}>
                                                    {t('Webhook请求结构')} {showWebhookDocs ? '▼' : '▶'}
                                                </div>
                                                <Collapsible isOpen={showWebhookDocs}>
                                                    <pre style={{marginTop: 4, background: 'var(--semi-color-fill-0)', padding: 8, borderRadius: 4}}>
{`{
    "type": "quota_exceed",      // 通知类型
    "title": "标题",             // 通知标题
    "content": "通知内容",       // 通知内容，支持 {{value}} 变量占位符
    "values": ["值1", "值2"],    // 按顺序替换content中的 {{value}} 占位符
    "timestamp": 1739950503      // 时间戳
}

示例：
{
    "type": "quota_exceed",
    "title": "额度预警通知",
    "content": "您的额度即将用尽，当前剩余额度为 {{value}}",
    "values": ["$0.99"],
    "timestamp": 1739950503
}`}
                                                    </pre>
                                                </Collapsible>
                                            </Typography.Text>
                                        </div>
                                    </div>
                                    <div style={{marginTop: 20}}>
                                        <Typography.Text strong>{t('接口凭证（可选）')}</Typography.Text>
                                        <div style={{marginTop: 10}}>
                                            <Input
                                                value={notificationSettings.webhookSecret}
                                                onChange={val => handleNotificationSettingChange('webhookSecret', val)}
                                                placeholder={t('请输入密钥')}
                                            />
                                            <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
                                                {t('密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性')}
                                            </Typography.Text>
                                            <Typography.Text type="secondary" style={{marginTop: 4, display: 'block'}}>
                                                {t('Authorization: Bearer your-secret-key')}
                                            </Typography.Text>
                                        </div>
                                    </div>
                                </>
                            )}
                            {notificationSettings.warningType === 'email' && (
                                <div style={{marginTop: 20}}>
                                    <Typography.Text strong>{t('通知邮箱')}</Typography.Text>
                                    <div style={{marginTop: 10}}>
                                        <Input
                                            value={notificationSettings.notificationEmail}
                                            onChange={val => handleNotificationSettingChange('notificationEmail', val)}
                                            placeholder={t('留空则使用账号绑定的邮箱')}
                                        />
                                        <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
                                            {t('设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱')}
                                        </Typography.Text>
                                    </div>
                                </div>
                            )}
                            <div style={{marginTop: 20}}>
                                <Typography.Text strong>{t('额度预警阈值')} {renderQuotaWithPrompt(notificationSettings.warningThreshold)}</Typography.Text>
                                <div style={{marginTop: 10}}>
                                    <AutoComplete
                                        value={notificationSettings.warningThreshold}
                                        onChange={val => handleNotificationSettingChange('warningThreshold', val)}
                                        style={{width: 200}}
                                        placeholder={t('请输入预警额度')}
                                        data={[
                                            { value: 100000, label: '0.2$' },
                                            { value: 500000, label: '1$' },
                                            { value: 1000000, label: '5$' },
                                            { value: 5000000, label: '10$' }
                                        ]}
                                    />
                                </div>
                                <Typography.Text type="secondary" style={{marginTop: 10, display: 'block'}}>
                                    {t('当剩余额度低于此数值时，系统将通过选择的方式发送通知')}
                                </Typography.Text>
                            </div>
                            <div style={{marginTop: 20}}>
                                <Button type="primary" onClick={saveNotificationSettings}>
                                    {t('保存设置')}
                                </Button>
                            </div>
                        </Card>
                        <Modal
                            onCancel={() => setShowEmailBindModal(false)}
                            onOk={bindEmail}
                            visible={showEmailBindModal}
                            size={'small'}
                            centered={true}
                            maskClosable={false}
                        >
                            <Typography.Title heading={6}>{t('绑定邮箱地址')}</Typography.Title>
                            <div
                                style={{
                                    marginTop: 20,
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                }}
                            >
                                <Input
                                    fluid
                                    placeholder='输入邮箱地址'
                                    onChange={(value) => handleInputChange('email', value)}
                                    name='email'
                                    type='email'
                                />
                                <Button
                                    onClick={sendVerificationCode}
                                    disabled={disableButton || loading}
                                >
                                    {disableButton ? `重新发送 (${countdown})` : '获取验证码'}
                                </Button>
                            </div>
                            <div style={{marginTop: 10}}>
                                <Input
                                    fluid
                                    placeholder='验证码'
                                    name='email_verification_code'
                                    value={inputs.email_verification_code}
                                    onChange={(value) =>
                                        handleInputChange('email_verification_code', value)
                                    }
                                />
                            </div>
                            {turnstileEnabled ? (
                                <Turnstile
                                    sitekey={turnstileSiteKey}
                                    onVerify={(token) => {
                                        setTurnstileToken(token);
                                    }}
                                />
                            ) : (
                                <></>
                            )}
                        </Modal>
                        <Modal
                            onCancel={() => setShowAccountDeleteModal(false)}
                            visible={showAccountDeleteModal}
                            size={'small'}
                            centered={true}
                            onOk={deleteAccount}
                        >
                            <div style={{marginTop: 20}}>
                                <Banner
                                    type='danger'
                                    description='您正在删除自己的帐户，将清空所有数据且不可恢复'
                                    closeIcon={null}
                                />
                            </div>
                            <div style={{marginTop: 20}}>
                                <Input
                                    placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
                                    name='self_account_deletion_confirmation'
                                    value={inputs.self_account_deletion_confirmation}
                                    onChange={(value) =>
                                        handleInputChange(
                                            'self_account_deletion_confirmation',
                                            value,
                                        )
                                    }
                                />
                                {turnstileEnabled ? (
                                    <Turnstile
                                        sitekey={turnstileSiteKey}
                                        onVerify={(token) => {
                                            setTurnstileToken(token);
                                        }}
                                    />
                                ) : (
                                    <></>
                                )}
                            </div>
                        </Modal>
                        <Modal
                            onCancel={() => setShowChangePasswordModal(false)}
                            visible={showChangePasswordModal}
                            size={'small'}
                            centered={true}
                            onOk={changePassword}
                        >
                            <div style={{marginTop: 20}}>
                                <Input
                                    name='set_new_password'
                                    placeholder={t('新密码')}
                                    value={inputs.set_new_password}
                                    onChange={(value) =>
                                        handleInputChange('set_new_password', value)
                                    }
                                />
                                <Input
                                    style={{marginTop: 20}}
                                    name='set_new_password_confirmation'
                                    placeholder={t('确认新密码')}
                                    value={inputs.set_new_password_confirmation}
                                    onChange={(value) =>
                                        handleInputChange('set_new_password_confirmation', value)
                                    }
                                />
                                {turnstileEnabled ? (
                                    <Turnstile
                                        sitekey={turnstileSiteKey}
                                        onVerify={(token) => {
                                            setTurnstileToken(token);
                                        }}
                                    />
                                ) : (
                                    <></>
                                )}
                            </div>
                        </Modal>
                    </div>
                </Layout.Content>
            </Layout>
        </div>
    );
};

export default PersonalSetting;