diff --git a/web/src/components/PersonalSetting.js b/web/src/components/PersonalSetting.js index 0f52c319..4ecb4788 100644 --- a/web/src/components/PersonalSetting.js +++ b/web/src/components/PersonalSetting.js @@ -4,6 +4,7 @@ import { API, copy, isRoot, + isAdmin, showError, showInfo, showSuccess, @@ -20,7 +21,6 @@ import { Banner, Button, Card, - Descriptions, Image, Input, InputNumber, @@ -30,7 +30,6 @@ import { Tag, Typography, Collapsible, - Select, Radio, RadioGroup, AutoComplete, @@ -38,6 +37,23 @@ import { Tabs, TabPane, } from '@douyinfe/semi-ui'; +import { + IconMail, + IconLock, + IconShield, + IconUser, + IconSetting, + IconBell, + IconGithubLogo, + IconKey, + IconCreditCard, + IconLink, + IconDelete, + IconChevronDown, + IconChevronUp, +} from '@douyinfe/semi-icons'; +import { SiTelegram, SiWechat, SiLinux } from 'react-icons/si'; +import { Bell, Shield, Webhook, Globe, Settings, UserPlus, ShieldCheck } from 'lucide-react'; import { getQuotaPerUnit, renderQuota, @@ -82,7 +98,7 @@ const PersonalSetting = () => { const savedState = localStorage.getItem('modelsExpanded'); return savedState ? JSON.parse(savedState) : false; }); - const MODELS_DISPLAY_COUNT = 10; // 默认显示的模型数量 + const MODELS_DISPLAY_COUNT = 25; // 默认显示的模型数量 const [notificationSettings, setNotificationSettings] = useState({ warningType: 'email', warningThreshold: 100000, @@ -91,7 +107,7 @@ const PersonalSetting = () => { notificationEmail: '', acceptUnsetModelRatioModel: false, }); - const [showWebhookDocs, setShowWebhookDocs] = useState(false); + const [showWebhookDocs, setShowWebhookDocs] = useState(true); useEffect(() => { let status = localStorage.getItem('status'); @@ -295,7 +311,7 @@ const PersonalSetting = () => { } setDisableButton(true); if (turnstileEnabled && turnstileToken === '') { - showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); + showInfo(t('请稍后几秒重试，Turnstile 正在检查用户环境！')); return; } setLoading(true); @@ -339,6 +355,15 @@ const PersonalSetting = () => { } }; + const getAvatarText = () => { + const username = getUsername(); + if (username && username.length > 0) { + // 获取前两个字符，支持中文和英文 + return username.slice(0, 2).toUpperCase(); + } + return 'NA'; + }; + const handleCancel = () => { setOpenTransfer(false); }; @@ -385,11 +410,17 @@ const PersonalSetting = () => { }; return ( -
+
+ {/* 划转模态框 */} + + {t('请输入要划转的数量')} +
+ } visible={openTransfer} onOk={transfer} onCancel={handleCancel} @@ -397,795 +428,1174 @@ const PersonalSetting = () => { size={'small'} centered={true} > -
- - {t('可用额度')} - {renderQuotaWithPrompt(userState?.user?.aff_quota)} - - -
-
- - {t('划转额度')} - {renderQuotaWithPrompt(transferAmount)}{' '} - {t('最低') + renderQuota(getQuotaPerUnit())} - +
+ + {t('可用额度')} {renderQuotaWithPrompt(userState?.user?.aff_quota)} + + +
+
+ + {t('划转额度')} {renderQuotaWithPrompt(transferAmount)}{' '} + {t('最低') + renderQuota(getQuotaPerUnit())} + setTransferAmount(value)} disabled={false} - > + size="large" + className="!rounded-lg w-full" + />
-
- - {typeof getUsername() === 'string' && - getUsername().slice(0, 1)} - - } - title={{getUsername()}} - description={ - isRoot() ? ( - {t('管理员')} - ) : ( - {t('普通用户')} - ) - } - > - } - headerExtraContent={ - <> - - {'ID: ' + userState?.user?.id} - {userState?.user?.group} - - - } - footer={ - <> -
- - {t('可用模型')} - -
-
- {models.length <= MODELS_DISPLAY_COUNT ? ( - - {models.map((model) => ( - { - copyText(model); - }} - > - {model} - - ))} - - ) : ( - <> - - - {models.map((model) => ( - { - copyText(model); - }} - > - {model} - - ))} - setIsModelsExpanded(false)} - > - {t('收起')} - - - - {!isModelsExpanded && ( - - {models - .slice(0, MODELS_DISPLAY_COUNT) - .map((model) => ( - { - copyText(model); - }} - > - {model} - - ))} - setIsModelsExpanded(true)} - > - {t('更多')} {models.length - MODELS_DISPLAY_COUNT}{' '} - {t('个模型')} - - - )} - - )} -
- - } - > - - - {renderQuota(userState?.user?.quota)} - - - {renderQuota(userState?.user?.used_quota)} - - - {userState.user?.request_count} - - - - - {t('邀请链接')} - -
- } - > - {t('邀请信息')} -
- - - - {renderQuota(userState?.user?.aff_quota)} - - - - - {renderQuota(userState?.user?.aff_history_quota)} - - - {userState?.user?.aff_count} - - -
- - - {t('个人信息')} -
- {t('邮箱')} -
-
- -
-
- -
-
-
-
- {t('微信')} -
-
- -
-
- -
-
-
-
- {t('GitHub')} -
-
- -
-
- -
-
-
-
- {t('OIDC')} -
-
- -
-
- -
-
-
-
- {t('Telegram')} -
-
- -
-
- {status.telegram_oauth ? ( - userState.user.telegram_id !== '' ? ( - - ) : ( - - ) - ) : ( - - )} -
-
-
-
- {t('LinuxDO')} -
-
- -
-
- -
-
-
-
- - - - - - {systemToken && ( - - )} - setShowWeChatBindModal(false)} - visible={showWeChatBindModal} - size={'small'} +
+
+ {/* 主卡片容器 */} + + {/* 顶部用户信息区域 */} + - -
-

- 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） -

+ {/* 装饰性背景元素 */} +
+
+
+
- - handleInputChange('wechat_verification_code', v) - } - /> - - -
- - - - -
- {t('通知方式')} -
- - handleNotificationSettingChange('warningType', value) - } - > - {t('邮件通知')} - {t('Webhook通知')} - -
-
- {notificationSettings.warningType === 'webhook' && ( - <> -
- - {t('Webhook地址')} - -
- - handleNotificationSettingChange('webhookUrl', val) - } - placeholder={t( - '请输入Webhook地址，例如: https://example.com/webhook', - )} - /> - - {t( - '只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求', - )} - - -
- setShowWebhookDocs(!showWebhookDocs) - } - > - {t('Webhook请求结构')}{' '} - {showWebhookDocs ? '▼' : '▶'} -
- - 
+                    

+                      

+                        
+                          {getAvatarText()}
+                        
+                        

+                          

+                            {getUsername()}
+                          

+                          

+                            {isRoot() ? (
+                              
-                                {`{
-    "type": "quota_exceed",      // 通知类型
-    "title": "标题",             // 通知标题
-    "content": "通知内容",       // 通知内容，支持 {{value}} 变量占位符
-    "values": ["值1", "值2"],    // 按顺序替换content中的 {{value}} 占位符
-    "timestamp": 1739950503      // 时间戳
+                                {t('超级管理员')}
+                              
+                            ) : isAdmin() ? (
+                              
+                                {t('管理员')}
+                              
+                            ) : (
+                              
+                                {t('普通用户')}
+                              
+                            )}
+                            
+                              ID: {userState?.user?.id}
+                            
+                          

+                        

+                      

+                      

+                        
+                      

+                    

+
+                    

+                      

+                        {t('当前余额')}
+                      

+                      

+                        {renderQuota(userState?.user?.quota)}
+                      

+                    

+
+                    

+                      

+                        

+                          

+                            {t('历史消耗')}
+                          

+                          

+                            {renderQuota(userState?.user?.used_quota)}
+                          

+                        

+                        

+                          

+                            {t('请求次数')}
+                          

+                          

+                            {userState.user?.request_count || 0}
+                          

+                        

+                        

+                          

+                            {t('用户分组')}
+                          

+                          

+                            {userState?.user?.group || t('默认')}
+                          

+                        

+                      

+                    

+
+                    

+
+ + + {/* 主内容区域 - 使用Tabs组织不同功能模块 */} +
+ + {/* 模型与邀请Tab */} + + + {t('模型与邀请')} +
+ } + itemKey='models' + > +
+ {/* 可用模型部分 */} +
+
+
+ +
+
+ {t('可用模型')} +
{t('点击模型名称可复制')}
+
+
+ +
+ {models.length <= MODELS_DISPLAY_COUNT ? ( + + {models.map((model) => ( + copyText(model)} + className="cursor-pointer hover:opacity-80 transition-opacity !rounded-lg" + > + {model} + + ))} + + ) : ( + <> + + + {models.map((model) => ( + copyText(model)} + className="cursor-pointer hover:opacity-80 transition-opacity !rounded-lg" + > + {model} + + ))} + setIsModelsExpanded(false)} + icon={} + > + {t('收起')} + + + + {!isModelsExpanded && ( + + {models + .slice(0, MODELS_DISPLAY_COUNT) + .map((model) => ( + copyText(model)} + className="cursor-pointer hover:opacity-80 transition-opacity !rounded-lg" + > + {model} + + ))} + setIsModelsExpanded(true)} + icon={} + > + {t('更多')} {models.length - MODELS_DISPLAY_COUNT} {t('个模型')} + + + )} + + )} +
+
+ + {/* 邀请信息部分 */} +
+
+
+ +
+
+ {t('邀请信息')} +
{t('管理您的邀请链接和收益')}
+
+
+ +
+
+ +
{t('待使用收益')}
+
+ {renderQuota(userState?.user?.aff_quota)} +
+ + + +
{t('总收益')}
+
+ {renderQuota(userState?.user?.aff_history_quota)} +
+ + +
{t('邀请人数')}
+
+ {userState?.user?.aff_count || 0} +
+ +
+ +
+ {t('邀请链接')} + } + /> +
+
+
+
+ + + {/* 账户绑定Tab */} + + + {t('账户绑定')} +
+ } + itemKey='account' + > +
+
+ {/* 邮箱绑定 */} + +
+
+
+ +
+
+
{t('邮箱')}
+
+ {userState.user && userState.user.email !== '' + ? userState.user.email + : t('未绑定')} +
+
+
+ +
+ + + {/* 微信绑定 */} + +
+
+
+ +
+
+
{t('微信')}
+
+ {userState.user && userState.user.wechat_id !== '' + ? t('已绑定') + : t('未绑定')} +
+
+
+ +
+ + + {/* GitHub绑定 */} + +
+
+
+ +
+
+
{t('GitHub')}
+
+ {userState.user && userState.user.github_id !== '' + ? userState.user.github_id + : t('未绑定')} +
+
+
+ +
+ + + {/* OIDC绑定 */} + +
+
+
+ +
+
+
{t('OIDC')}
+
+ {userState.user && userState.user.oidc_id !== '' + ? userState.user.oidc_id + : t('未绑定')} +
+
+
+ +
+ + + {/* Telegram绑定 */} + +
+
+
+ +
+
+
{t('Telegram')}
+
+ {userState.user && userState.user.telegram_id !== '' + ? userState.user.telegram_id + : t('未绑定')} +
+
+
+
+ {status.telegram_oauth ? ( + userState.user.telegram_id !== '' ? ( + + ) : ( +
+ +
+ ) + ) : ( + + )} +
+
+ + + {/* LinuxDO绑定 */} + +
+
+
+ +
+
+
{t('LinuxDO')}
+
+ {userState.user && userState.user.linux_do_id !== '' + ? userState.user.linux_do_id + : t('未绑定')} +
+
+
+ +
+ +
+
+ + + {/* 安全设置Tab */} + + + {t('安全设置')} +
+ } + itemKey='security' + > +
+
+ + {/* 系统访问令牌 */} + +
+
+
+ +
+
+ + {t('系统访问令牌')} + + + {t('用于API调用的身份验证令牌，请妥善保管')} + + {systemToken && ( +
+ } + /> +
+ )} +
+
+ +
+ + + {/* 密码管理 */} + +
+
+
+ +
+
+ + {t('密码管理')} + + + {t('定期更改密码可以提高账户安全性')} + +
+
+ +
+ + + {/* 危险区域 */} + +
+
+
+ +
+
+ + {t('删除账户')} + + + {t('此操作不可逆，所有数据将被永久删除')} + +
+
+ +
+ + +
+
+ + + {/* 通知设置Tab */} + + + {t('通知设置')} +
+ } + itemKey='notification' + > +
+ + +
+ {/* 通知方式选择 */} +
+ {t('通知方式')} + + handleNotificationSettingChange('warningType', value) + } + type="pureCard" + > + +
+ +
+
{t('邮件通知')}
+
{t('通过邮件接收通知')}
+
+
+ + +
+ +
+
{t('Webhook通知')}
+
{t('通过HTTP请求接收通知')}
+
+
+ + +
+ + {/* Webhook设置 */} + {notificationSettings.warningType === 'webhook' && ( +
+
+ {t('Webhook地址')} + + handleNotificationSettingChange('webhookUrl', val) + } + placeholder={t('请输入Webhook地址，例如: https://example.com/webhook')} + size="large" + className="!rounded-lg" + prefix={} + /> +
+ {t('只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求')} +
+
+ +
+ {t('接口凭证（可选）')} + + handleNotificationSettingChange('webhookSecret', val) + } + placeholder={t('请输入密钥')} + size="large" + className="!rounded-lg" + prefix={} + /> +
+ {t('密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性')} +
+
+ +
+
setShowWebhookDocs(!showWebhookDocs)}> +
+ + + {t('Webhook请求结构')} + +
+ {showWebhookDocs ? : } +
+ + 
+                                        {`{
+  "type": "quota_exceed",      // 通知类型
+  "title": "标题",             // 通知标题
+  "content": "通知内容",       // 通知内容，支持 {{value}} 变量占位符
+  "values": ["值1", "值2"],    // 按顺序替换content中的 {{value}} 占位符
+  "timestamp": 1739950503      // 时间戳
 }
 
 示例：
 {
-    "type": "quota_exceed",
-    "title": "额度预警通知",
-    "content": "您的额度即将用尽，当前剩余额度为 {{value}}",
-    "values": ["$0.99"],
-    "timestamp": 1739950503
+  "type": "quota_exceed",
+  "title": "额度预警通知",
+  "content": "您的额度即将用尽，当前剩余额度为 {{value}}",
+  "values": ["$0.99"],
+  "timestamp": 1739950503
 }`}
-
- - + + +
+
+ )} + + {/* 邮件设置 */} + {notificationSettings.warningType === 'email' && ( +
+ {t('通知邮箱')} + + handleNotificationSettingChange('notificationEmail', val) + } + placeholder={t('留空则使用账号绑定的邮箱')} + size="large" + className="!rounded-lg" + prefix={} + /> +
+ {t('设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱')} +
+
+ )} + + {/* 预警阈值 */} +
+ + {t('额度预警阈值')} {renderQuotaWithPrompt(notificationSettings.warningThreshold)} + + + handleNotificationSettingChange('warningThreshold', val) + } + size="large" + className="!rounded-lg w-full max-w-xs" + placeholder={t('请输入预警额度')} + data={[ + { value: 100000, label: '0.2$' }, + { value: 500000, label: '1$' }, + { value: 1000000, label: '5$' }, + { value: 5000000, label: '10$' }, + ]} + prefix={} + /> +
+ {t('当剩余额度低于此数值时，系统将通过选择的方式发送通知')} +
+
+
+ + + +
+
+
+
+ +
+
+
+
+ + {t('接受未设置价格模型')} + +
+ {t('当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用')} +
+
+ + handleNotificationSettingChange( + 'acceptUnsetModelRatioModel', + e.target.checked, + ) + } + className="ml-4" + /> +
+
+
+
+
+ + + +
+
-
- - {t('接口凭证（可选）')} - -
- - handleNotificationSettingChange( - 'webhookSecret', - val, - ) - } - placeholder={t('请输入密钥')} - /> - - {t( - '密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性', - )} - - - {t('Authorization: Bearer your-secret-key')} - -
-
- - )} - {notificationSettings.warningType === 'email' && ( -
- {t('通知邮箱')} -
- - handleNotificationSettingChange( - 'notificationEmail', - val, - ) - } - placeholder={t('留空则使用账号绑定的邮箱')} - /> - - {t( - '设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱', - )} - -
-
- )} -
- - {t('额度预警阈值')}{' '} - {renderQuotaWithPrompt( - notificationSettings.warningThreshold, - )} - -
- - 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$' }, - ]} - /> -
- - {t( - '当剩余额度低于此数值时，系统将通过选择的方式发送通知', - )} - -
- - -
- - {t('接受未设置价格模型')} - -
- - handleNotificationSettingChange( - 'acceptUnsetModelRatioModel', - e.target.checked, - ) - } - > - {t('接受未设置价格模型')} - - - {t( - '当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用', - )} - -
-
- - -
- -
- - setShowEmailBindModal(false)} - onOk={bindEmail} - visible={showEmailBindModal} - size={'small'} - centered={true} - maskClosable={false} - > - - {t('绑定邮箱地址')} - -
- handleInputChange('email', value)} - name='email' - type='email' - /> - -
-
- - handleInputChange('email_verification_code', value) - } - /> -
- {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} - - setShowAccountDeleteModal(false)} - visible={showAccountDeleteModal} - size={'small'} - centered={true} - onOk={deleteAccount} - > -
- -
-
- - handleInputChange( - 'self_account_deletion_confirmation', - value, - ) - } - /> - {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} -
- - setShowChangePasswordModal(false)} - visible={showChangePasswordModal} - size={'small'} - centered={true} - onOk={changePassword} - > -
- - handleInputChange('original_password', value) - } - /> - - handleInputChange('set_new_password', value) - } - /> - - handleInputChange('set_new_password_confirmation', value) - } - /> - {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} -
- + + +
+ +
+ + {/* 邮箱绑定模态框 */} + + + {t('绑定邮箱地址')} + + } + visible={showEmailBindModal} + onCancel={() => setShowEmailBindModal(false)} + onOk={bindEmail} + size={'small'} + centered={true} + maskClosable={false} + className="modern-modal" + > +
+
+ handleInputChange('email', value)} + name='email' + type='email' + size="large" + className="!rounded-lg flex-1" + prefix={} + /> + +
+ + + handleInputChange('email_verification_code', value) + } + size="large" + className="!rounded-lg" + prefix={} + /> + + {turnstileEnabled && ( +
+ { + setTurnstileToken(token); + }} + /> +
+ )} +
+ + + {/* 微信绑定模态框 */} + + + {t('绑定微信账户')} + + } + visible={showWeChatBindModal} + onCancel={() => setShowWeChatBindModal(false)} + footer={null} + size={'small'} + centered={true} + className="modern-modal" + > +
+ +
+

{t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}

+
+ + handleInputChange('wechat_verification_code', v) + } + size="large" + className="!rounded-lg" + prefix={} + /> + +
+ + + {/* 账户删除模态框 */} + + + {t('删除账户确认')} + + } + visible={showAccountDeleteModal} + onCancel={() => setShowAccountDeleteModal(false)} + onOk={deleteAccount} + size={'small'} + centered={true} + className="modern-modal" + > +
+ + +
+ + {t('请输入您的用户名以确认删除')} + + + handleInputChange('self_account_deletion_confirmation', value) + } + size="large" + className="!rounded-lg" + prefix={} + /> +
+ + {turnstileEnabled && ( +
+ { + setTurnstileToken(token); + }} + /> +
+ )} +
+ + + {/* 修改密码模态框 */} + + + {t('修改密码')} + + } + visible={showChangePasswordModal} + onCancel={() => setShowChangePasswordModal(false)} + onOk={changePassword} + size={'small'} + centered={true} + className="modern-modal" + > +
+
+ {t('原密码')} + + handleInputChange('original_password', value) + } + size="large" + className="!rounded-lg" + prefix={} + /> +
+ +
+ {t('新密码')} + + handleInputChange('set_new_password', value) + } + size="large" + className="!rounded-lg" + prefix={} + /> +
+ +
+ {t('确认新密码')} + + handleInputChange('set_new_password_confirmation', value) + } + size="large" + className="!rounded-lg" + prefix={} + /> +
+ + {turnstileEnabled && ( +
+ { + setTurnstileToken(token); + }} + /> +
+ )} +
+ ); }; diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index 063a855e..d576b375 100644 --- a/web/src/i18n/locales/en.json +++ b/web/src/i18n/locales/en.json @@ -727,7 +727,7 @@ "小时": "Hour", "新密码": "New Password", "重置邮件发送成功，请检查邮箱！": "The reset email was sent successfully, please check your email!", - "请输入你的账户名以确认删除！": "Please enter your account name to confirm deletion!", + "输入你的账户名{{username}}以确认删除": "Enter your account name{{username}}to confirm deletion", "账户已删除！": "Account has been deleted!", "微信账户绑定成功！": "WeChat account bound successfully!", "两次输入的密码不一致！": "The passwords entered twice are inconsistent!", @@ -1455,5 +1455,30 @@ "尊敬的": "Dear", "请输入兑换码": "Please enter the redemption code", "在线充值功能未开启": "Online recharge function is not enabled", - "管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。": "The administrator has not enabled the online recharge function, please contact the administrator to enable it or recharge with a redemption code." + "管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。": "The administrator has not enabled the online recharge function, please contact the administrator to enable it or recharge with a redemption code.", + "点击模型名称可复制": "Click the model name to copy", + "管理您的邀请链接和收益": "Manage your invitation link and earnings", + "模型与邀请": "Model and Invitation", + "账户绑定": "Account Binding", + "安全设置": "Security Settings", + "系统访问令牌": "System Access Token", + "用于API调用的身份验证令牌，请妥善保管": "Authentication token for API calls, please keep it safe", + "密码管理": "Password Management", + "定期更改密码可以提高账户安全性": "Regularly changing your password can improve account security", + "删除账户": "Delete Account", + "此操作不可逆，所有数据将被永久删除": "This operation is irreversible, all data will be permanently deleted", + "生成令牌": "Generate Token", + "通过邮件接收通知": "Receive notifications via email", + "通过HTTP请求接收通知": "Receive notifications via HTTP request", + "价格设置": "Price Settings", + "重新生成": "Regenerate", + "绑定微信账户": "Bind WeChat Account", + "原密码": "Original Password", + "请输入原密码": "Please enter the original password", + "请输入新密码": "Please enter the new password", + "请再次输入新密码": "Please enter the new password again", + "删除账户确认": "Delete Account Confirmation", + "请输入您的用户名以确认删除": "Please enter your username to confirm deletion", + "接受未设置价格模型": "Accept models without price settings", + "当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用": "Accept calls even if the model has no price settings, use only when you trust the website, which may incur high costs" } \ No newline at end of file