Skip to content

phsl / new-api

Go to a project
Commit 70a4b576 by t0ng7u
Options

✨ feat(homepage): enhance banner visuals & UX 

• Added read-only Base URL input that shows `status.server_address` (fallback `window.location.origin`) and copies value on click.
• Embedded `ScrollList` as input `suffix`; auto-cycles common endpoints every 3 s and allows manual selection.
• Introduced `API_ENDPOINTS` array in `web/src/constants/common.constant.js` for centralized endpoint management.
• Implemented custom CSS to hide ScrollList wheel indicators / scrollbars for a cleaner look.
• Created two blurred colour spheres behind the banner (`blur-ball-indigo`, `blur-ball-teal`) with light-/dark-mode opacity tweaks and lower vertical placement.
• Increased letter-spacing for Chinese heading via conditional `tracking-wide` / `md:tracking-wider` classes to improve readability.
• Misc: updated imports, helper functions, and responsive sizes to keep UI consistent across devices.
parent 6220b3ee
Showing with 1040 additions and 920 deletions
web/src/components/layout/PageLayout.js
......@@ -11,7 +11,7 @@ import { API, getLogo, getSystemName, showError, setStatusData } from '../../hel
import { UserContext } from '../../context/User/index.js';
import { StatusContext } from '../../context/Status/index.js';
import { useLocation } from 'react-router-dom';
const { Sider, Content, Header, Footer } = Layout;
const { Sider, Content, Header } = Layout;
const PageLayout = () => {
const [userState, userDispatch] = useContext(UserContext);
......@@ -94,8 +94,6 @@ const PageLayout = () => {
</Header>
<Layout
style={{
marginTop: '64px',
height: 'calc(100vh - 64px)',
overflow: styleState.isMobile ? 'visible' : 'auto',
display: 'flex',
flexDirection: 'column',
......
web/src/components/settings/PersonalSetting.js
......@@ -379,257 +379,268 @@ const PersonalSetting = () => {
};
return (
<div className="bg-gray-50">
<Layout>
<Layout.Content>
<div className="flex justify-center">
<div className="w-full">
{/* 主卡片容器 */}
<Card className="!rounded-2xl shadow-lg border-0">
{/* 顶部用户信息区域 */}
<Card
className="!rounded-2xl !border-0 !shadow-lg overflow-hidden"
style={{
background: theme === 'dark'
? 'linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%)'
: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)',
position: 'relative'
}}
bodyStyle={{ padding: 0 }}
>
{/* 装饰性背景元素 */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-slate-400 dark:bg-slate-500 opacity-5 rounded-full"></div>
<div className="absolute -bottom-16 -left-16 w-48 h-48 bg-slate-300 dark:bg-slate-400 opacity-8 rounded-full"></div>
<div className="absolute top-1/2 right-1/4 w-24 h-24 bg-slate-400 dark:bg-slate-500 opacity-6 rounded-full"></div>
<div className="bg-gray-50 mt-[64px]">
<div className="flex justify-center">
<div className="w-full">
{/* 主卡片容器 */}
<Card className="!rounded-2xl shadow-lg border-0">
{/* 顶部用户信息区域 */}
<Card
className="!rounded-2xl !border-0 !shadow-lg overflow-hidden"
style={{
background: theme === 'dark'
? 'linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%)'
: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)',
position: 'relative'
}}
bodyStyle={{ padding: 0 }}
>
{/* 装饰性背景元素 */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-slate-400 dark:bg-slate-500 opacity-5 rounded-full"></div>
<div className="absolute -bottom-16 -left-16 w-48 h-48 bg-slate-300 dark:bg-slate-400 opacity-8 rounded-full"></div>
<div className="absolute top-1/2 right-1/4 w-24 h-24 bg-slate-400 dark:bg-slate-500 opacity-6 rounded-full"></div>
</div>
<div className="relative p-4 sm:p-6 md:p-8 text-gray-600 dark:text-gray-300">
<div className="flex justify-between items-start mb-4 sm:mb-6">
<div className="flex items-center flex-1 min-w-0">
<Avatar
size='large'
className="mr-3 sm:mr-4 shadow-md flex-shrink-0 bg-slate-500 dark:bg-slate-400"
>
{getAvatarText()}
</Avatar>
<div className="flex-1 min-w-0">
<div className="text-base sm:text-lg font-semibold truncate text-gray-800 dark:text-gray-100">
{getUsername()}
</div>
<div className="mt-1 flex flex-wrap gap-1 sm:gap-2">
{isRoot() ? (
<Tag
size='small'
className="!rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
style={{ fontWeight: '500' }}
>
{t('超级管理员')}
</Tag>
) : isAdmin() ? (
<Tag
size='small'
className="!rounded-full bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
style={{ fontWeight: '500' }}
>
{t('管理员')}
</Tag>
) : (
<Tag
size='small'
className="!rounded-full bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-300"
style={{ fontWeight: '500' }}
>
{t('普通用户')}
</Tag>
)}
<Tag
size='small'
className="!rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300"
style={{ fontWeight: '500' }}
>
ID: {userState?.user?.id}
</Tag>
</div>
</div>
</div>
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center shadow-md flex-shrink-0 ml-2 bg-slate-400 dark:bg-slate-500">
<IconUser size="default" className="text-white" />
</div>
</div>
<div className="relative p-4 sm:p-6 md:p-8 text-gray-600 dark:text-gray-300">
<div className="flex justify-between items-start mb-4 sm:mb-6">
<div className="flex items-center flex-1 min-w-0">
<Avatar
size='large'
className="mr-3 sm:mr-4 shadow-md flex-shrink-0 bg-slate-500 dark:bg-slate-400"
>
{getAvatarText()}
</Avatar>
<div className="flex-1 min-w-0">
<div className="text-base sm:text-lg font-semibold truncate text-gray-800 dark:text-gray-100">
{getUsername()}
</div>
<div className="mt-1 flex flex-wrap gap-1 sm:gap-2">
{isRoot() ? (
<Tag
size='small'
className="!rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
style={{ fontWeight: '500' }}
>
{t('超级管理员')}
</Tag>
) : isAdmin() ? (
<Tag
size='small'
className="!rounded-full bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
style={{ fontWeight: '500' }}
>
{t('管理员')}
</Tag>
) : (
<Tag
size='small'
className="!rounded-full bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-300"
style={{ fontWeight: '500' }}
>
{t('普通用户')}
</Tag>
)}
<Tag
size='small'
className="!rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300"
style={{ fontWeight: '500' }}
>
ID: {userState?.user?.id}
</Tag>
</div>
</div>
<div className="mb-4 sm:mb-6">
<div className="text-xs sm:text-sm mb-1 sm:mb-2 text-gray-500 dark:text-gray-400">
{t('当前余额')}
</div>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-wide text-gray-900 dark:text-gray-100">
{renderQuota(userState?.user?.quota)}
</div>
</div>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-end">
<div className="grid grid-cols-3 gap-2 sm:flex sm:space-x-6 lg:space-x-8 mb-3 sm:mb-0">
<div className="text-center sm:text-left">
<div className="text-xs text-gray-400 dark:text-gray-500">
{t('历史消耗')}
</div>
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center shadow-md flex-shrink-0 ml-2 bg-slate-400 dark:bg-slate-500">
<IconUser size="default" className="text-white" />
<div className="text-xs sm:text-sm font-medium truncate text-gray-600 dark:text-gray-300">
{renderQuota(userState?.user?.used_quota)}
</div>
</div>
<div className="mb-4 sm:mb-6">
<div className="text-xs sm:text-sm mb-1 sm:mb-2 text-gray-500 dark:text-gray-400">
{t('当前余额')}
<div className="text-center sm:text-left">
<div className="text-xs text-gray-400 dark:text-gray-500">
{t('请求次数')}
</div>
<div className="text-xs sm:text-sm font-medium truncate text-gray-600 dark:text-gray-300">
{userState.user?.request_count || 0}
</div>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-wide text-gray-900 dark:text-gray-100">
{renderQuota(userState?.user?.quota)}
</div>
<div className="text-center sm:text-left">
<div className="text-xs text-gray-400 dark:text-gray-500">
{t('用户分组')}
</div>
<div className="text-xs sm:text-sm font-medium truncate text-gray-600 dark:text-gray-300">
{userState?.user?.group || t('默认')}
</div>
</div>
</div>
</div>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-end">
<div className="grid grid-cols-3 gap-2 sm:flex sm:space-x-6 lg:space-x-8 mb-3 sm:mb-0">
<div className="text-center sm:text-left">
<div className="text-xs text-gray-400 dark:text-gray-500">
{t('历史消耗')}
</div>
<div className="text-xs sm:text-sm font-medium truncate text-gray-600 dark:text-gray-300">
{renderQuota(userState?.user?.used_quota)}
</div>
</div>
<div className="text-center sm:text-left">
<div className="text-xs text-gray-400 dark:text-gray-500">
{t('请求次数')}
</div>
<div className="text-xs sm:text-sm font-medium truncate text-gray-600 dark:text-gray-300">
{userState.user?.request_count || 0}
</div>
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-slate-300 via-slate-400 to-slate-500 dark:from-slate-600 dark:via-slate-500 dark:to-slate-400 opacity-40"></div>
</div>
</Card>
{/* 主内容区域 - 使用Tabs组织不同功能模块 */}
<div className="p-4">
<Tabs type='line' defaultActiveKey='models' className="modern-tabs">
{/* 可用模型Tab */}
<TabPane
tab={
<div className="flex items-center">
<Settings size={16} className="mr-2" />
{t('可用模型')}
</div>
}
itemKey='models'
>
<div className="gap-6 py-4">
{/* 可用模型部分 */}
<div className="bg-gray-50 dark:bg-gray-800 rounded-xl">
<div className="flex items-center mb-4">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<Settings size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div className="text-center sm:text-left">
<div className="text-xs text-gray-400 dark:text-gray-500">
{t('用户分组')}
</div>
<div className="text-xs sm:text-sm font-medium truncate text-gray-600 dark:text-gray-300">
{userState?.user?.group || t('默认')}
</div>
<div>
<Typography.Title heading={6} className="mb-0">{t('模型列表')}</Typography.Title>
<div className="text-gray-500 text-sm">{t('点击模型名称可复制')}</div>
</div>
</div>
</div>
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-slate-300 via-slate-400 to-slate-500 dark:from-slate-600 dark:via-slate-500 dark:to-slate-400 opacity-40"></div>
</div>
</Card>
{/* 主内容区域 - 使用Tabs组织不同功能模块 */}
<div className="p-4">
<Tabs type='line' defaultActiveKey='models' className="modern-tabs">
{/* 可用模型Tab */}
<TabPane
tab={
<div className="flex items-center">
<Settings size={16} className="mr-2" />
{t('可用模型')}
</div>
}
itemKey='models'
>
<div className="gap-6 py-4">
{/* 可用模型部分 */}
<div className="bg-gray-50 dark:bg-gray-800 rounded-xl">
<div className="flex items-center mb-4">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<Settings size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div>
<Typography.Title heading={6} className="mb-0">{t('模型列表')}</Typography.Title>
<div className="text-gray-500 text-sm">{t('点击模型名称可复制')}</div>
{modelsLoading ? (
// 骨架屏加载状态 - 模拟实际加载后的布局
<div className="space-y-4">
{/* 模拟分类标签 */}
<div className="mb-4" style={{ borderBottom: '1px solid var(--semi-color-border)' }}>
<div className="flex overflow-x-auto py-2 gap-2">
{Array.from({ length: 8 }).map((_, index) => (
<Skeleton.Button key={`cat-${index}`} style={{
width: index === 0 ? 130 : 100 + Math.random() * 50,
height: 36,
borderRadius: 8
}} />
))}
</div>
</div>
{modelsLoading ? (
// 骨架屏加载状态 - 模拟实际加载后的布局
<div className="space-y-4">
{/* 模拟分类标签 */}
<div className="mb-4" style={{ borderBottom: '1px solid var(--semi-color-border)' }}>
<div className="flex overflow-x-auto py-2 gap-2">
{Array.from({ length: 8 }).map((_, index) => (
<Skeleton.Button key={`cat-${index}`} style={{
width: index === 0 ? 130 : 100 + Math.random() * 50,
height: 36,
borderRadius: 8
}} />
))}
</div>
</div>
{/* 模拟模型标签列表 */}
<div className="flex flex-wrap gap-2">
{Array.from({ length: 20 }).map((_, index) => (
<Skeleton.Button
key={`model-${index}`}
style={{
width: 100 + Math.random() * 100,
height: 32,
borderRadius: 16,
margin: '4px'
}}
/>
))}
</div>
</div>
) : models.length === 0 ? (
<div className="py-8">
<Empty
image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
description={t('没有可用模型')}
style={{ padding: '24px 0' }}
{/* 模拟模型标签列表 */}
<div className="flex flex-wrap gap-2">
{Array.from({ length: 20 }).map((_, index) => (
<Skeleton.Button
key={`model-${index}`}
style={{
width: 100 + Math.random() * 100,
height: 32,
borderRadius: 16,
margin: '4px'
}}
/>
</div>
) : (
<>
{/* 模型分类标签页 */}
<div className="mb-4">
<Tabs
type="card"
activeKey={activeModelCategory}
onChange={key => setActiveModelCategory(key)}
className="mt-2"
>
{Object.entries(getModelCategories(t)).map(([key, category]) => {
// 计算该分类下的模型数量
const modelCount = key === 'all'
? models.length
: models.filter(model => category.filter({ model_name: model })).length;
if (modelCount === 0 && key !== 'all') return null;
return (
<TabPane
tab={
<span className="flex items-center gap-2">
{category.icon && <span className="w-4 h-4">{category.icon}</span>}
{category.label}
<Tag
color={activeModelCategory === key ? 'red' : 'grey'}
size='small'
shape='circle'
>
{modelCount}
</Tag>
</span>
}
itemKey={key}
key={key}
/>
);
})}
</Tabs>
</div>
<div className="bg-white dark:bg-gray-700 rounded-lg p-3">
{(() => {
// 根据当前选中的分类过滤模型
const categories = getModelCategories(t);
const filteredModels = activeModelCategory === 'all'
? models
: models.filter(model => categories[activeModelCategory].filter({ model_name: model }));
// 如果过滤后没有模型，显示空状态
if (filteredModels.length === 0) {
return (
<Empty
image={<IllustrationNoContent style={{ width: 120, height: 120 }} />}
darkModeImage={<IllustrationNoContentDark style={{ width: 120, height: 120 }} />}
description={t('该分类下没有可用模型')}
style={{ padding: '16px 0' }}
/>
);
}
))}
</div>
</div>
) : models.length === 0 ? (
<div className="py-8">
<Empty
image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
description={t('没有可用模型')}
style={{ padding: '24px 0' }}
/>
</div>
) : (
<>
{/* 模型分类标签页 */}
<div className="mb-4">
<Tabs
type="card"
activeKey={activeModelCategory}
onChange={key => setActiveModelCategory(key)}
className="mt-2"
>
{Object.entries(getModelCategories(t)).map(([key, category]) => {
// 计算该分类下的模型数量
const modelCount = key === 'all'
? models.length
: models.filter(model => category.filter({ model_name: model })).length;
if (modelCount === 0 && key !== 'all') return null;
return (
<TabPane
tab={
<span className="flex items-center gap-2">
{category.icon && <span className="w-4 h-4">{category.icon}</span>}
{category.label}
<Tag
color={activeModelCategory === key ? 'red' : 'grey'}
size='small'
shape='circle'
>
{modelCount}
</Tag>
</span>
}
itemKey={key}
key={key}
/>
);
})}
</Tabs>
</div>
if (filteredModels.length <= MODELS_DISPLAY_COUNT) {
return (
<div className="bg-white dark:bg-gray-700 rounded-lg p-3">
{(() => {
// 根据当前选中的分类过滤模型
const categories = getModelCategories(t);
const filteredModels = activeModelCategory === 'all'
? models
: models.filter(model => categories[activeModelCategory].filter({ model_name: model }));
// 如果过滤后没有模型，显示空状态
if (filteredModels.length === 0) {
return (
<Empty
image={<IllustrationNoContent style={{ width: 120, height: 120 }} />}
darkModeImage={<IllustrationNoContentDark style={{ width: 120, height: 120 }} />}
description={t('该分类下没有可用模型')}
style={{ padding: '16px 0' }}
/>
);
}
if (filteredModels.length <= MODELS_DISPLAY_COUNT) {
return (
<Space wrap>
{filteredModels.map((model) => (
renderModelTag(model, {
size: 'large',
shape: 'circle',
onClick: () => copyText(model),
})
))}
</Space>
);
} else {
return (
<>
<Collapsible isOpen={isModelsExpanded}>
<Space wrap>
{filteredModels.map((model) => (
renderModelTag(model, {
......@@ -638,527 +649,513 @@ const PersonalSetting = () => {
onClick: () => copyText(model),
})
))}
<Tag
color='grey'
type='light'
className="cursor-pointer !rounded-lg"
onClick={() => setIsModelsExpanded(false)}
icon={<IconChevronUp />}
>
{t('收起')}
</Tag>
</Space>
);
} else {
return (
<>
<Collapsible isOpen={isModelsExpanded}>
<Space wrap>
{filteredModels.map((model) => (
renderModelTag(model, {
size: 'large',
shape: 'circle',
onClick: () => copyText(model),
})
))}
<Tag
color='grey'
type='light'
className="cursor-pointer !rounded-lg"
onClick={() => setIsModelsExpanded(false)}
icon={<IconChevronUp />}
>
{t('收起')}
</Tag>
</Space>
</Collapsible>
{!isModelsExpanded && (
<Space wrap>
{filteredModels
.slice(0, MODELS_DISPLAY_COUNT)
.map((model) => (
renderModelTag(model, {
size: 'large',
shape: 'circle',
onClick: () => copyText(model),
})
))}
<Tag
color='grey'
type='light'
className="cursor-pointer !rounded-lg"
onClick={() => setIsModelsExpanded(true)}
icon={<IconChevronDown />}
>
{t('更多')} {filteredModels.length - MODELS_DISPLAY_COUNT} {t('个模型')}
</Tag>
</Space>
)}
</>
);
}
})()}
</Collapsible>
{!isModelsExpanded && (
<Space wrap>
{filteredModels
.slice(0, MODELS_DISPLAY_COUNT)
.map((model) => (
renderModelTag(model, {
size: 'large',
shape: 'circle',
onClick: () => copyText(model),
})
))}
<Tag
color='grey'
type='light'
className="cursor-pointer !rounded-lg"
onClick={() => setIsModelsExpanded(true)}
icon={<IconChevronDown />}
>
{t('更多')} {filteredModels.length - MODELS_DISPLAY_COUNT} {t('个模型')}
</Tag>
</Space>
)}
</>
);
}
})()}
</div>
</>
)}
</div>
</div>
</TabPane>
{/* 账户绑定Tab */}
<TabPane
tab={
<div className="flex items-center">
<UserPlus size={16} className="mr-2" />
{t('账户绑定')}
</div>
}
itemKey='account'
>
<div className="py-4">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* 邮箱绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<IconMail size="default" className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('邮箱')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.email !== ''
? userState.user.email
: t('未绑定')}
</div>
</>
)}
</div>
</div>
</TabPane>
{/* 账户绑定Tab */}
<TabPane
tab={
<div className="flex items-center">
<UserPlus size={16} className="mr-2" />
{t('账户绑定')}
</div>
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => setShowEmailBindModal(true)}
className="!rounded-lg"
>
{userState.user && userState.user.email !== ''
? t('修改绑定')
: t('绑定')}
</Button>
</div>
}
itemKey='account'
>
<div className="py-4">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* 邮箱绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
</Card>
{/* 微信绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<SiWechat size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('微信')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.wechat_id !== ''
? t('已绑定')
: t('未绑定')}
</div>
</div>
</div>
<Button
type="primary"
theme="outline"
size="small"
disabled={!status.wechat_login}
onClick={() => setShowWeChatBindModal(true)}
className="!rounded-lg"
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<IconMail size="default" className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('邮箱')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.email !== ''
? userState.user.email
: t('未绑定')}
</div>
</div>
{userState.user && userState.user.wechat_id !== ''
? t('修改绑定')
: status.wechat_login
? t('绑定')
: t('未启用')}
</Button>
</div>
</Card>
{/* GitHub绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<IconGithubLogo size="default" className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('GitHub')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.github_id !== ''
? userState.user.github_id
: t('未绑定')}
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => setShowEmailBindModal(true)}
className="!rounded-lg"
>
{userState.user && userState.user.email !== ''
? t('修改绑定')
: t('绑定')}
</Button>
</div>
</Card>
{/* 微信绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
disabled={
(userState.user && userState.user.github_id !== '') ||
!status.github_oauth
}
className="!rounded-lg"
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<SiWechat size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('微信')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.wechat_id !== ''
? t('已绑定')
: t('未绑定')}
</div>
</div>
{status.github_oauth ? t('绑定') : t('未启用')}
</Button>
</div>
</Card>
{/* OIDC绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<IconShield size="default" className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('OIDC')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.oidc_id !== ''
? userState.user.oidc_id
: t('未绑定')}
</div>
<Button
type="primary"
theme="outline"
size="small"
disabled={!status.wechat_login}
onClick={() => setShowWeChatBindModal(true)}
className="!rounded-lg"
>
{userState.user && userState.user.wechat_id !== ''
? t('修改绑定')
: status.wechat_login
? t('绑定')
: t('未启用')}
</Button>
</div>
</Card>
{/* GitHub绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => onOIDCClicked(
status.oidc_authorization_endpoint,
status.oidc_client_id,
)}
disabled={
(userState.user && userState.user.oidc_id !== '') ||
!status.oidc_enabled
}
className="!rounded-lg"
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<IconGithubLogo size="default" className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('GitHub')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.github_id !== ''
? userState.user.github_id
: t('未绑定')}
</div>
</div>
{status.oidc_enabled ? t('绑定') : t('未启用')}
</Button>
</div>
</Card>
{/* Telegram绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<SiTelegram size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('Telegram')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.telegram_id !== ''
? userState.user.telegram_id
: t('未绑定')}
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
disabled={
(userState.user && userState.user.github_id !== '') ||
!status.github_oauth
}
className="!rounded-lg"
>
{status.github_oauth ? t('绑定') : t('未启用')}
</div>
</div>
<div className="flex-shrink-0">
{status.telegram_oauth ? (
userState.user.telegram_id !== '' ? (
<Button disabled={true} size="small" className="!rounded-lg">
{t('已绑定')}
</Button>
) : (
<div className="scale-75">
<TelegramLoginButton
dataAuthUrl='/api/oauth/telegram/bind'
botName={status.telegram_bot_name}
/>
</div>
)
) : (
<Button disabled={true} size="small" className="!rounded-lg">
{t('未启用')}
</Button>
)}
</div>
</div>
</Card>
{/* LinuxDO绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<SiLinux size={20} className="text-slate-600 dark:text-slate-300" />
</div>
</Card>
{/* OIDC绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('LinuxDO')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.linux_do_id !== ''
? userState.user.linux_do_id
: t('未绑定')}
</div>
</div>
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => onLinuxDOOAuthClicked(status.linuxdo_client_id)}
disabled={
(userState.user && userState.user.linux_do_id !== '') ||
!status.linuxdo_oauth
}
className="!rounded-lg"
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<IconShield size="default" className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('OIDC')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.oidc_id !== ''
? userState.user.oidc_id
: t('未绑定')}
</div>
</div>
{status.linuxdo_oauth ? t('绑定') : t('未启用')}
</Button>
</div>
</Card>
</div>
</div>
</TabPane>
{/* 安全设置Tab */}
<TabPane
tab={
<div className="flex items-center">
<ShieldCheck size={16} className="mr-2" />
{t('安全设置')}
</div>
}
itemKey='security'
>
<div className="py-4">
<div className="space-y-6">
<Space vertical className='w-full'>
{/* 系统访问令牌 */}
<Card
className="!rounded-xl w-full"
bodyStyle={{ padding: '20px' }}
shadows='hover'
>
<div className="flex flex-col sm:flex-row items-start sm:justify-between gap-4">
<div className="flex items-start w-full sm:w-auto">
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0">
<IconKey size="large" className="text-slate-600" />
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => onOIDCClicked(
status.oidc_authorization_endpoint,
status.oidc_client_id,
<div className="flex-1">
<Typography.Title heading={6} className="mb-1">
{t('系统访问令牌')}
</Typography.Title>
<Typography.Text type="tertiary" className="text-sm">
{t('用于API调用的身份验证令牌，请妥善保管')}
</Typography.Text>
{systemToken && (
<div className="mt-3">
<Input
readOnly
value={systemToken}
onClick={handleSystemTokenClick}
size="large"
className="!rounded-lg"
prefix={<IconKey />}
/>
</div>
)}
disabled={
(userState.user && userState.user.oidc_id !== '') ||
!status.oidc_enabled
}
className="!rounded-lg"
>
{status.oidc_enabled ? t('绑定') : t('未启用')}
</Button>
</div>
</div>
</Card>
<Button
type="primary"
theme="solid"
onClick={generateAccessToken}
className="!rounded-lg !bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto"
icon={<IconKey />}
>
{systemToken ? t('重新生成') : t('生成令牌')}
</Button>
</div>
</Card>
{/* Telegram绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<SiTelegram size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('Telegram')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.telegram_id !== ''
? userState.user.telegram_id
: t('未绑定')}
</div>
</div>
{/* 密码管理 */}
<Card
className="!rounded-xl w-full"
bodyStyle={{ padding: '20px' }}
shadows='hover'
>
<div className="flex flex-col sm:flex-row items-start sm:justify-between gap-4">
<div className="flex items-start w-full sm:w-auto">
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0">
<IconLock size="large" className="text-slate-600" />
</div>
<div className="flex-shrink-0">
{status.telegram_oauth ? (
userState.user.telegram_id !== '' ? (
<Button disabled={true} size="small" className="!rounded-lg">
{t('已绑定')}
</Button>
) : (
<div className="scale-75">
<TelegramLoginButton
dataAuthUrl='/api/oauth/telegram/bind'
botName={status.telegram_bot_name}
/>
</div>
)
) : (
<Button disabled={true} size="small" className="!rounded-lg">
{t('未启用')}
</Button>
)}
<div>
<Typography.Title heading={6} className="mb-1">
{t('密码管理')}
</Typography.Title>
<Typography.Text type="tertiary" className="text-sm">
{t('定期更改密码可以提高账户安全性')}
</Typography.Text>
</div>
</div>
</Card>
<Button
type="primary"
theme="solid"
onClick={() => setShowChangePasswordModal(true)}
className="!rounded-lg !bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto"
icon={<IconLock />}
>
{t('修改密码')}
</Button>
</div>
</Card>
{/* LinuxDO绑定 */}
<Card
className="!rounded-xl transition-shadow"
bodyStyle={{ padding: '16px' }}
shadows='hover'
>
<div className="flex items-center justify-between">
<div className="flex items-center flex-1">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3">
<SiLinux size={20} className="text-slate-600 dark:text-slate-300" />
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-gray-900">{t('LinuxDO')}</div>
<div className="text-sm text-gray-500 truncate">
{userState.user && userState.user.linux_do_id !== ''
? userState.user.linux_do_id
: t('未绑定')}
</div>
</div>
{/* 危险区域 */}
<Card
className="!rounded-xl border-red-200 w-full"
bodyStyle={{ padding: '20px' }}
shadows='hover'
>
<div className="flex flex-col sm:flex-row items-start sm:justify-between gap-4">
<div className="flex items-start w-full sm:w-auto">
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0">
<IconDelete size="large" className="text-slate-600" />
</div>
<div>
<Typography.Title heading={6} className="mb-1 text-slate-700">
{t('删除账户')}
</Typography.Title>
<Typography.Text type="tertiary" className="text-sm">
{t('此操作不可逆，所有数据将被永久删除')}
</Typography.Text>
</div>
<Button
type="primary"
theme="outline"
size="small"
onClick={() => onLinuxDOOAuthClicked(status.linuxdo_client_id)}
disabled={
(userState.user && userState.user.linux_do_id !== '') ||
!status.linuxdo_oauth
}
className="!rounded-lg"
>
{status.linuxdo_oauth ? t('绑定') : t('未启用')}
</Button>
</div>
</Card>
</div>
</div>
</TabPane>
{/* 安全设置Tab */}
<TabPane
tab={
<div className="flex items-center">
<ShieldCheck size={16} className="mr-2" />
{t('安全设置')}
</div>
}
itemKey='security'
>
<div className="py-4">
<Button
type="danger"
theme="solid"
onClick={() => setShowAccountDeleteModal(true)}
className="!rounded-lg w-full sm:w-auto !bg-slate-500 hover:!bg-slate-600"
icon={<IconDelete />}
>
{t('删除账户')}
</Button>
</div>
</Card>
</Space>
</div>
</div>
</TabPane>
{/* 通知设置Tab */}
<TabPane
tab={
<div className="flex items-center">
<Bell size={16} className="mr-2" />
{t('其他设置')}
</div>
}
itemKey='notification'
>
<div className="py-4">
<Tabs type='card' defaultActiveKey='notify' className="!rounded-lg">
<TabPane
tab={t('通知设置')}
itemKey='notify'
>
<div className="space-y-6">
<Space vertical className='w-full'>
{/* 系统访问令牌 */}
<Card
className="!rounded-xl w-full"
bodyStyle={{ padding: '20px' }}
shadows='hover'
{/* 通知方式选择 */}
<div className="bg-gray-50 rounded-xl">
<Typography.Text strong className="block mb-4 pt-4">{t('通知方式')}</Typography.Text>
<RadioGroup
value={notificationSettings.warningType}
onChange={(value) =>
handleNotificationSettingChange('warningType', value)
}
type="pureCard"
>
<div className="flex flex-col sm:flex-row items-start sm:justify-between gap-4">
<div className="flex items-start w-full sm:w-auto">
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0">
<IconKey size="large" className="text-slate-600" />
</div>
<div className="flex-1">
<Typography.Title heading={6} className="mb-1">
{t('系统访问令牌')}
</Typography.Title>
<Typography.Text type="tertiary" className="text-sm">
{t('用于API调用的身份验证令牌，请妥善保管')}
</Typography.Text>
{systemToken && (
<div className="mt-3">
<Input
readOnly
value={systemToken}
onClick={handleSystemTokenClick}
size="large"
className="!rounded-lg"
prefix={<IconKey />}
/>
</div>
)}
<Radio value='email' className="!p-4 !rounded-lg">
<div className="flex items-center">
<IconMail className="mr-2 text-slate-600" />
<div>
<div className="font-medium">{t('邮件通知')}</div>
<div className="text-sm text-gray-500">{t('通过邮件接收通知')}</div>
</div>
</div>
<Button
type="primary"
theme="solid"
onClick={generateAccessToken}
className="!rounded-lg !bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto"
icon={<IconKey />}
>
{systemToken ? t('重新生成') : t('生成令牌')}
</Button>
</div>
</Card>
{/* 密码管理 */}
<Card
className="!rounded-xl w-full"
bodyStyle={{ padding: '20px' }}
shadows='hover'
>
<div className="flex flex-col sm:flex-row items-start sm:justify-between gap-4">
<div className="flex items-start w-full sm:w-auto">
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0">
<IconLock size="large" className="text-slate-600" />
</div>
</Radio>
<Radio value='webhook' className="!p-4 !rounded-lg">
<div className="flex items-center">
<Webhook size={16} className="mr-2 text-slate-600" />
<div>
<Typography.Title heading={6} className="mb-1">
{t('密码管理')}
</Typography.Title>
<Typography.Text type="tertiary" className="text-sm">
{t('定期更改密码可以提高账户安全性')}
</Typography.Text>
<div className="font-medium">{t('Webhook通知')}</div>
<div className="text-sm text-gray-500">{t('通过HTTP请求接收通知')}</div>
</div>
</div>
<Button
type="primary"
theme="solid"
onClick={() => setShowChangePasswordModal(true)}
className="!rounded-lg !bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto"
icon={<IconLock />}
>
{t('修改密码')}
</Button>
</div>
</Card>
</Radio>
</RadioGroup>
</div>
{/* 危险区域 */}
<Card
className="!rounded-xl border-red-200 w-full"
bodyStyle={{ padding: '20px' }}
shadows='hover'
>
<div className="flex flex-col sm:flex-row items-start sm:justify-between gap-4">
<div className="flex items-start w-full sm:w-auto">
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0">
<IconDelete size="large" className="text-slate-600" />
</div>
<div>
<Typography.Title heading={6} className="mb-1 text-slate-700">
{t('删除账户')}
</Typography.Title>
<Typography.Text type="tertiary" className="text-sm">
{t('此操作不可逆，所有数据将被永久删除')}
</Typography.Text>
</div>
{/* Webhook设置 */}
{notificationSettings.warningType === 'webhook' && (
<div className="space-y-4">
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">{t('Webhook地址')}</Typography.Text>
<Input
value={notificationSettings.webhookUrl}
onChange={(val) =>
handleNotificationSettingChange('webhookUrl', val)
}
placeholder={t('请输入Webhook地址，例如: https://example.com/webhook')}
size="large"
className="!rounded-lg"
prefix={<Webhook size={16} className="m-2" />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求')}
</div>
<Button
type="danger"
theme="solid"
onClick={() => setShowAccountDeleteModal(true)}
className="!rounded-lg w-full sm:w-auto !bg-slate-500 hover:!bg-slate-600"
icon={<IconDelete />}
>
{t('删除账户')}
</Button>
</div>
</Card>
</Space>
</div>
</div>
</TabPane>
{/* 通知设置Tab */}
<TabPane
tab={
<div className="flex items-center">
<Bell size={16} className="mr-2" />
{t('其他设置')}
</div>
}
itemKey='notification'
>
<div className="py-4">
<Tabs type='card' defaultActiveKey='notify' className="!rounded-lg">
<TabPane
tab={t('通知设置')}
itemKey='notify'
>
<div className="space-y-6">
{/* 通知方式选择 */}
<div className="bg-gray-50 rounded-xl">
<Typography.Text strong className="block mb-4 pt-4">{t('通知方式')}</Typography.Text>
<RadioGroup
value={notificationSettings.warningType}
onChange={(value) =>
handleNotificationSettingChange('warningType', value)
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">{t('接口凭证（可选）')}</Typography.Text>
<Input
value={notificationSettings.webhookSecret}
onChange={(val) =>
handleNotificationSettingChange('webhookSecret', val)
}
type="pureCard"
>
<Radio value='email' className="!p-4 !rounded-lg">
<div className="flex items-center">
<IconMail className="mr-2 text-slate-600" />
<div>
<div className="font-medium">{t('邮件通知')}</div>
<div className="text-sm text-gray-500">{t('通过邮件接收通知')}</div>
</div>
</div>
</Radio>
<Radio value='webhook' className="!p-4 !rounded-lg">
<div className="flex items-center">
<Webhook size={16} className="mr-2 text-slate-600" />
<div>
<div className="font-medium">{t('Webhook通知')}</div>
<div className="text-sm text-gray-500">{t('通过HTTP请求接收通知')}</div>
</div>
</div>
</Radio>
</RadioGroup>
placeholder={t('请输入密钥')}
size="large"
className="!rounded-lg"
prefix={<IconKey />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性')}
</div>
</div>
{/* Webhook设置 */}
{notificationSettings.warningType === 'webhook' && (
<div className="space-y-4">
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">{t('Webhook地址')}</Typography.Text>
<Input
value={notificationSettings.webhookUrl}
onChange={(val) =>
handleNotificationSettingChange('webhookUrl', val)
}
placeholder={t('请输入Webhook地址，例如: https://example.com/webhook')}
size="large"
className="!rounded-lg"
prefix={<Webhook size={16} className="m-2" />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求')}
</div>
</div>
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">{t('接口凭证（可选）')}</Typography.Text>
<Input
value={notificationSettings.webhookSecret}
onChange={(val) =>
handleNotificationSettingChange('webhookSecret', val)
}
placeholder={t('请输入密钥')}
size="large"
className="!rounded-lg"
prefix={<IconKey />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性')}
</div>
<div className="bg-slate-50 rounded-xl">
<div className="flex items-center justify-between cursor-pointer" onClick={() => setShowWebhookDocs(!showWebhookDocs)}>
<div className="flex items-center">
<Globe size={16} className="mr-2 text-slate-600" />
<Typography.Text strong className="text-slate-700">
{t('Webhook请求结构')}
</Typography.Text>
</div>
<div className="bg-slate-50 rounded-xl">
<div className="flex items-center justify-between cursor-pointer" onClick={() => setShowWebhookDocs(!showWebhookDocs)}>
<div className="flex items-center">
<Globe size={16} className="mr-2 text-slate-600" />
<Typography.Text strong className="text-slate-700">
{t('Webhook请求结构')}
</Typography.Text>
</div>
{showWebhookDocs ? <IconChevronUp /> : <IconChevronDown />}
</div>
<Collapsible isOpen={showWebhookDocs}>
<pre className="mt-4 bg-gray-800 text-gray-100 rounded-lg text-sm overflow-x-auto">
{`{
{showWebhookDocs ? <IconChevronUp /> : <IconChevronDown />}
</div>
<Collapsible isOpen={showWebhookDocs}>
<pre className="mt-4 bg-gray-800 text-gray-100 rounded-lg text-sm overflow-x-auto">
{`{
"type": "quota_exceed", // 通知类型
"title": "标题", // 通知标题
"content": "通知内容", // 通知内容，支持 {{value}} 变量占位符
......@@ -1174,158 +1171,156 @@ const PersonalSetting = () => {
"values": ["$0.99"],
"timestamp": 1739950503
}`}
</pre>
</Collapsible>
</div>
</div>
)}
{/* 邮件设置 */}
{notificationSettings.warningType === 'email' && (
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">{t('通知邮箱')}</Typography.Text>
<Input
value={notificationSettings.notificationEmail}
onChange={(val) =>
handleNotificationSettingChange('notificationEmail', val)
}
placeholder={t('留空则使用账号绑定的邮箱')}
size="large"
className="!rounded-lg"
prefix={<IconMail />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱')}
</div>
</div>
)}
</pre>
</Collapsible>
</div>
</div>
)}
{/* 预警阈值 */}
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">
{t('额度预警阈值')} {renderQuotaWithPrompt(notificationSettings.warningThreshold)}
</Typography.Text>
<AutoComplete
value={notificationSettings.warningThreshold}
onChange={(val) =>
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={<IconBell />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('当剩余额度低于此数值时，系统将通过选择的方式发送通知')}
</div>
{/* 邮件设置 */}
{notificationSettings.warningType === 'email' && (
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">{t('通知邮箱')}</Typography.Text>
<Input
value={notificationSettings.notificationEmail}
onChange={(val) =>
handleNotificationSettingChange('notificationEmail', val)
}
placeholder={t('留空则使用账号绑定的邮箱')}
size="large"
className="!rounded-lg"
prefix={<IconMail />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱')}
</div>
</div>
</TabPane>
)}
<TabPane
tab={t('价格设置')}
itemKey='price'
>
<div className="py-4">
<div className="space-y-4">
{/* 接受未设置价格模型 */}
<div className="bg-white rounded-xl">
<div className="flex items-start">
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mt-1">
<Shield size={20} className="text-slate-600" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between">
<div>
<Typography.Text strong className="block mb-2">
{t('接受未设置价格模型')}
</Typography.Text>
<div className="text-gray-500 text-sm">
{t('当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用')}
</div>
</div>
<Checkbox
checked={notificationSettings.acceptUnsetModelRatioModel}
onChange={(e) =>
handleNotificationSettingChange(
'acceptUnsetModelRatioModel',
e.target.checked,
)
}
className="ml-4"
/>
{/* 预警阈值 */}
<div className="bg-white rounded-xl">
<Typography.Text strong className="block mb-3">
{t('额度预警阈值')} {renderQuotaWithPrompt(notificationSettings.warningThreshold)}
</Typography.Text>
<AutoComplete
value={notificationSettings.warningThreshold}
onChange={(val) =>
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={<IconBell />}
/>
<div className="text-gray-500 text-sm mt-2">
{t('当剩余额度低于此数值时，系统将通过选择的方式发送通知')}
</div>
</div>
</div>
</TabPane>
<TabPane
tab={t('价格设置')}
itemKey='price'
>
<div className="py-4">
<div className="space-y-4">
{/* 接受未设置价格模型 */}
<div className="bg-white rounded-xl">
<div className="flex items-start">
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mt-1">
<Shield size={20} className="text-slate-600" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between">
<div>
<Typography.Text strong className="block mb-2">
{t('接受未设置价格模型')}
</Typography.Text>
<div className="text-gray-500 text-sm">
{t('当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用')}
</div>
</div>
<Checkbox
checked={notificationSettings.acceptUnsetModelRatioModel}
onChange={(e) =>
handleNotificationSettingChange(
'acceptUnsetModelRatioModel',
e.target.checked,
)
}
className="ml-4"
/>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane
tab={t('IP记录')}
itemKey='ip'
>
<div className="py-4">
<div className="bg-white rounded-xl">
<div className="flex items-start">
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mt-1">
<ShieldCheck size={20} className="text-slate-600" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between">
<div>
<Typography.Text strong className="block mb-2">
{t('记录请求与错误日志 IP')}
</Typography.Text>
<div className="text-gray-500 text-sm">
{t('开启后，仅“消费”和“错误”日志将记录您的客户端 IP 地址')}
</div>
</div>
<Checkbox
checked={notificationSettings.recordIpLog}
onChange={(e) =>
handleNotificationSettingChange(
'recordIpLog',
e.target.checked,
)
}
className="ml-4"
/>
</div>
</div>
</TabPane>
<TabPane
tab={t('IP记录')}
itemKey='ip'
>
<div className="py-4">
<div className="bg-white rounded-xl">
<div className="flex items-start">
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mt-1">
<ShieldCheck size={20} className="text-slate-600" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between">
<div>
<Typography.Text strong className="block mb-2">
{t('记录请求与错误日志 IP')}
</Typography.Text>
<div className="text-gray-500 text-sm">
{t('开启后，仅“消费”和“错误”日志将记录您的客户端 IP 地址')}
</div>
</div>
<Checkbox
checked={notificationSettings.recordIpLog}
onChange={(e) =>
handleNotificationSettingChange(
'recordIpLog',
e.target.checked,
)
}
className="ml-4"
/>
</div>
</div>
</div>
</TabPane>
</Tabs>
<div className="mt-6 flex justify-end">
<Button
type='primary'
onClick={saveNotificationSettings}
size="large"
className="!rounded-lg !bg-slate-600 hover:!bg-slate-700"
icon={<IconSetting />}
>
{t('保存设置')}
</Button>
</div>
</div>
</div>
</TabPane>
</Tabs>
</div>
</Card>
</TabPane>
</Tabs>
<div className="mt-6 flex justify-end">
<Button
type='primary'
onClick={saveNotificationSettings}
size="large"
className="!rounded-lg !bg-slate-600 hover:!bg-slate-700"
icon={<IconSetting />}
>
{t('保存设置')}
</Button>
</div>
</div>
</TabPane>
</Tabs>
</div>
</div>
</Layout.Content>
</Layout>
</Card>
</div>
</div>
{/* 邮箱绑定模态框 */}
<Modal
......
web/src/components/table/ModelPricing.js
......@@ -523,10 +523,10 @@ const ModelPricing = () => {
<div className="bg-gray-50">
<Layout>
<Layout.Content>
<div className="flex justify-center p-4 sm:p-6 md:p-8">
<div className="flex justify-center">
<div className="w-full">
{/* 主卡片容器 */}
<Card className="!rounded-2xl shadow-lg border-0">
<Card bordered={false} className="!rounded-2xl shadow-lg border-0">
{/* 顶部状态卡片 */}
<Card
className="!rounded-2xl !border-0 !shadow-md overflow-hidden mb-6"
......
web/src/constants/common.constant.js
......@@ -2,4 +2,19 @@ export const ITEMS_PER_PAGE = 10; // this value must keep same as the one define
export const DEFAULT_ENDPOINT = '/api/ratio_config';
export const TABLE_COMPACT_MODES_KEY = 'table_compact_modes';
\ No newline at end of file
export const TABLE_COMPACT_MODES_KEY = 'table_compact_modes';
export const API_ENDPOINTS = [
'/v1/chat/completions',
'/v1/responses',
'/v1/messages',
'/v1beta/models',
'/v1/embeddings',
'/v1/rerank',
'/v1/images/generations',
'/v1/images/edits',
'/v1/images/variations',
'/v1/audio/speech',
'/v1/audio/transcriptions',
'/v1/audio/translations'
];
\ No newline at end of file
web/src/i18n/locales/en.json
......@@ -1422,8 +1422,8 @@
"初始化系统": "Initialize system",
"支持众多的大模型供应商": "Supporting various LLM providers",
"统一的大模型接口网关": "The Unified LLMs API Gateway",
"更好的价格，更好的稳定性，无需订阅": "Better price, better stability, no subscription required",
"开始使用": "Get Started",
"更好的价格，更好的稳定性，只需要将模型基址替换为：": "Better price, better stability, no subscription required, just replace the model BASE URL with: ",
"获取密钥": "Get Key",
"关于我们": "About Us",
"关于项目": "About Project",
"联系我们": "Contact Us",
......
web/src/index.css
......@@ -530,4 +530,66 @@ code {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ==================== ScrollList 定制样式 ==================== */
.semi-scrolllist,
.semi-scrolllist * {
-ms-overflow-style: none;
/* IE, Edge */
scrollbar-width: none;
/* Firefox */
background: transparent !important;
}
.semi-scrolllist::-webkit-scrollbar,
.semi-scrolllist *::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.semi-scrolllist-body {
padding: 1px !important;
}
.semi-scrolllist-list-outer {
padding-right: 0 !important;
}
/* ==================== Banner 背景模糊球 ==================== */
.blur-ball {
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: -1;
}
.blur-ball-indigo {
background: #6366f1;
/* indigo-500 */
top: 40px;
left: 50%;
transform: translateX(-50%);
opacity: 0.5;
}
.blur-ball-teal {
background: #14b8a6;
/* teal-400 */
top: 200px;
left: 30%;
opacity: 0.4;
}
/* 浅色主题下让模糊球更柔和 */
html:not(.dark) .blur-ball-indigo {
opacity: 0.25;
}
html:not(.dark) .blur-ball-teal {
opacity: 0.2;
}
\ No newline at end of file
web/src/index.js
......@@ -5,7 +5,6 @@ import '@douyinfe/semi-ui/dist/css/semi.css';
import { UserProvider } from './context/User';
import 'react-toastify/dist/ReactToastify.css';
import { StatusProvider } from './context/Status';
import { Layout } from '@douyinfe/semi-ui';
import { ThemeProvider } from './context/Theme';
import { StyleProvider } from './context/Style/index.js';
import PageLayout from './components/layout/PageLayout.js';
......@@ -15,7 +14,6 @@ import './index.css';
// initialization
const root = ReactDOM.createRoot(document.getElementById('root'));
const { Sider, Content, Header, Footer } = Layout;
root.render(
<React.StrictMode>
<StatusProvider>
......
web/src/pages/About/index.js
......@@ -105,7 +105,7 @@ const About = () => {
);
return (
<>
<div className="mt-[64px]">
{aboutLoaded && about === '' ? (
<div className="flex justify-center items-center h-screen p-8">
<Empty
......@@ -132,7 +132,7 @@ const About = () => {
)}
</>
)}
</>
</div>
);
};
......
web/src/pages/Channel/index.js
......@@ -3,9 +3,9 @@ import ChannelsTable from '../../components/table/ChannelsTable';
const File = () => {
return (
<>
<div className="mt-[64px]">
<ChannelsTable />
</>
</div>
);
};
......
web/src/pages/Chat/index.js
......@@ -37,12 +37,12 @@ const ChatPage = () => {
return !isLoading && iframeSrc ? (
<iframe
src={iframeSrc}
style={{ width: '100%', height: '100%', border: 'none' }}
style={{ width: '100%', height: 'calc(100vh - 64px)', border: 'none', marginTop: '64px' }}
title='Token Frame'
allow='camera;microphone'
/>
) : (
<div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
<div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000] mt-[64px]">
<div className="flex flex-col items-center">
<Spin
size="large"
......
web/src/pages/Chat2Link/index.js
......@@ -17,7 +17,7 @@ const chat2page = () => {
}
return (
<div>
<div className="mt-[64px]">
<h3>正在加载，请稍候...</h3>
</div>
);
......
web/src/pages/Detail/index.js
......@@ -984,7 +984,7 @@ const Detail = (props) => {
}, []);
return (
<div className="bg-gray-50 h-full">
<div className="bg-gray-50 h-full mt-[64px]">
<div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-semibold text-gray-800">{getGreeting}</h2>
<div className="flex gap-3">
......
web/src/pages/Home/index.js
import React, { useContext, useEffect, useState } from 'react';
import { Button, Typography, Tag } from '@douyinfe/semi-ui';
import { API, showError, isMobile } from '../../helpers';
import { Button, Typography, Tag, Input, ScrollList, ScrollItem } from '@douyinfe/semi-ui';
import { API, showError, isMobile, copy, showSuccess } from '../../helpers';
import { API_ENDPOINTS } from '../../constants/common.constant';
import { StatusContext } from '../../context/Status';
import { marked } from 'marked';
import { useTranslation } from 'react-i18next';
import { IconGithubLogo, IconPlay, IconFile } from '@douyinfe/semi-icons';
import { IconGithubLogo, IconPlay, IconFile, IconCopy } from '@douyinfe/semi-icons';
import { Link } from 'react-router-dom';
import NoticeModal from '../../components/layout/NoticeModal';
import { Moonshot, OpenAI, XAI, Zhipu, Volcengine, Cohere, Claude, Gemini, Suno, Minimax, Wenxin, Spark, Qingyan, DeepSeek, Qwen, Midjourney, Grok, AzureAI, Hunyuan, Xinference } from '@lobehub/icons';
......@@ -17,29 +18,12 @@ const Home = () => {
const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
const [homePageContent, setHomePageContent] = useState('');
const [noticeVisible, setNoticeVisible] = useState(false);
const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
const docsLink = statusState?.status?.docs_link || '';
useEffect(() => {
const checkNoticeAndShow = async () => {
const lastCloseDate = localStorage.getItem('notice_close_date');
const today = new Date().toDateString();
if (lastCloseDate !== today) {
try {
const res = await API.get('/api/notice');
const { success, data } = res.data;
if (success && data && data.trim() !== '') {
setNoticeVisible(true);
}
} catch (error) {
console.error('获取公告失败:', error);
}
}
};
checkNoticeAndShow();
}, []);
const serverAddress = statusState?.status?.server_address || window.location.origin;
const endpointItems = API_ENDPOINTS.map((e) => ({ value: e }));
const [endpointIndex, setEndpointIndex] = useState(0);
const isChinese = i18n.language.startsWith('zh');
const displayHomePageContent = async () => {
setHomePageContent(localStorage.getItem('home_page_content') || '');
......@@ -71,10 +55,44 @@ const Home = () => {
setHomePageContentLoaded(true);
};
const handleCopyBaseURL = async () => {
const ok = await copy(serverAddress);
if (ok) {
showSuccess(t('已复制到剪切板'));
}
};
useEffect(() => {
const checkNoticeAndShow = async () => {
const lastCloseDate = localStorage.getItem('notice_close_date');
const today = new Date().toDateString();
if (lastCloseDate !== today) {
try {
const res = await API.get('/api/notice');
const { success, data } = res.data;
if (success && data && data.trim() !== '') {
setNoticeVisible(true);
}
} catch (error) {
console.error('获取公告失败:', error);
}
}
};
checkNoticeAndShow();
}, []);
useEffect(() => {
displayHomePageContent().then();
}, []);
useEffect(() => {
const timer = setInterval(() => {
setEndpointIndex((prev) => (prev + 1) % endpointItems.length);
}, 3000);
return () => clearInterval(timer);
}, [endpointItems.length]);
return (
<div className="w-full overflow-x-hidden">
<NoticeModal
......@@ -86,30 +104,63 @@ const Home = () => {
<div className="w-full overflow-x-hidden">
{/* Banner 部分 */}
<div className="w-full border-b border-semi-color-border min-h-[500px] md:min-h-[600px] lg:min-h-[700px] relative overflow-x-hidden">
<div className="flex items-center justify-center h-full px-4 py-20 md:py-24 lg:py-32">
{/* 背景模糊晕染球*/}
<div className="blur-ball blur-ball-indigo" />
<div className="blur-ball blur-ball-teal" />
<div className="flex items-center justify-center h-full px-4 py-20 md:py-24 lg:py-32 mt-10">
{/* 居中内容区 */}
<div className="flex flex-col items-center justify-center text-center max-w-4xl mx-auto">
<div className="flex flex-col items-center justify-center mb-6 md:mb-8">
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-semi-color-text-0 leading-tight">
<h1 className={`text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-semi-color-text-0 leading-tight ${isChinese ? 'tracking-wide md:tracking-wider' : ''}`}>
{i18n.language === 'en' ? (
<>
The Unified<br />
LLMs API Gateway
<span className="shine-text">LLMs API Gateway</span>
</>
) : (
t('统一的大模型接口网关')
<>
统一的<br />
<span className="shine-text">大模型接口网关</span>
</>
)}
</h1>
<p className="text-lg md:text-xl lg:text-2xl text-semi-color-text-1 mt-4 md:mt-6">
{t('更好的价格，更好的稳定性，无需订阅')}
<p className="text-base md:text-lg lg:text-xl text-semi-color-text-1 mt-4 md:mt-6 max-w-xl">
{t('更好的价格，更好的稳定性，只需要将模型基址替换为：')}
</p>
{/* BASE URL 与端点选择 */}
<div className="flex flex-col md:flex-row items-center justify-center gap-4 w-full mt-4 md:mt-6 max-w-md">
<Input
readOnly
value={serverAddress}
className="flex-1 !rounded-full"
size={isMobile() ? 'default' : 'large'}
suffix={
<div className="flex items-center gap-2">
<ScrollList bodyHeight={32} style={{ border: 'unset', boxShadow: 'unset' }}>
<ScrollItem
mode="wheel"
cycled={true}
list={endpointItems}
selectedIndex={endpointIndex}
onSelect={({ index }) => setEndpointIndex(index)}
/>
</ScrollList>
<Button
type="primary"
onClick={handleCopyBaseURL}
icon={<IconCopy />}
/>
</div>
}
/>
</div>
</div>
{/* 操作按钮 */}
<div className="flex flex-row gap-4 justify-center items-center">
<Link to="/console">
<Button theme="solid" type="primary" size={isMobile() ? "default" : "large"} className="!rounded-3xl px-8 py-2" icon={<IconPlay />}>
{t('开始使用')}
{t('获取密钥')}
</Button>
</Link>
{isDemoSiteMode && statusState?.status?.version ? (
......
web/src/pages/Log/index.js
......@@ -2,9 +2,9 @@ import React from 'react';
import LogsTable from '../../components/table/LogsTable';
const Token = () => (
<>
<div className="mt-[64px]">
<LogsTable />
</>
</div>
);
export default Token;
web/src/pages/Midjourney/index.js
......@@ -2,9 +2,9 @@ import React from 'react';
import MjLogsTable from '../../components/table/MjLogsTable';
const Midjourney = () => (
<>
<div className="mt-[64px]">
<MjLogsTable />
</>
</div>
);
export default Midjourney;
web/src/pages/NotFound/index.js
......@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
const NotFound = () => {
const { t } = useTranslation();
return (
<div className="flex justify-center items-center h-screen p-8">
<div className="flex justify-center items-center h-screen p-8 mt-[64px]">
<Empty
image={<IllustrationNotFound style={{ width: 250, height: 250 }} />}
darkModeImage={<IllustrationNotFoundDark style={{ width: 250, height: 250 }} />}
......
web/src/pages/Playground/index.js
......@@ -363,7 +363,7 @@ const Playground = () => {
}, [setMessage, saveMessagesImmediately]);
return (
<div className="h-full bg-gray-50">
<div className="h-full bg-gray-50 mt-[64px]">
<Layout style={{ height: '100%', background: 'transparent' }} className="flex flex-col md:flex-row">
{(showSettings || !styleState.isMobile) && (
<Layout.Sider
......
web/src/pages/Pricing/index.js
......@@ -2,9 +2,9 @@ import React from 'react';
import ModelPricing from '../../components/table/ModelPricing.js';
const Pricing = () => (
<>
<div className="mt-[64px]">
<ModelPricing />
</>
</div>
);
export default Pricing;
web/src/pages/Redemption/index.js
......@@ -3,9 +3,9 @@ import RedemptionsTable from '../../components/table/RedemptionsTable';
const Redemption = () => {
return (
<>
<div className="mt-[64px]">
<RedemptionsTable />
</>
</div>
);
};
......
web/src/pages/Setting/index.js
......@@ -150,7 +150,7 @@ const Setting = () => {
}
}, [location.search]);
return (
<div>
<div className="mt-[64px]">
<Layout>
<Layout.Content>
<Tabs
......
web/src/pages/Setup/index.js
......@@ -133,7 +133,7 @@ const Setup = () => {
};
return (
<div className="bg-gray-50">
<div className="bg-gray-50 mt-[64px]">
<Layout>
<Layout.Content>
<div className="flex justify-center px-4 py-8">
......
web/src/pages/Task/index.js
......@@ -2,9 +2,9 @@ import React from 'react';
import TaskLogsTable from '../../components/table/TaskLogsTable.js';
const Task = () => (
<>
<div className="mt-[64px]">
<TaskLogsTable />
</>
</div>
);
export default Task;
web/src/pages/Token/index.js
......@@ -3,9 +3,9 @@ import TokensTable from '../../components/table/TokensTable';
const Token = () => {
return (
<>
<div className="mt-[64px]">
<TokensTable />
</>
</div>
);
};
......
web/src/pages/TopUp/index.js
......@@ -382,7 +382,7 @@ const TopUp = () => {
};
return (
<div className='mx-auto relative min-h-screen lg:min-h-0'>
<div className='mx-auto relative min-h-screen lg:min-h-0 mt-[64px]'>
{/* 划转模态框 */}
<Modal
title={
......
web/src/pages/User/index.js
......@@ -3,9 +3,9 @@ import UsersTable from '../../components/table/UsersTable';
const User = () => {
return (
<>
<div className="mt-[64px]">
<UsersTable />
</>
</div>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment