diff --git a/src/api.js b/src/api.js index 4dcbb5a..375523f 100644 --- a/src/api.js +++ b/src/api.js @@ -47,6 +47,7 @@ export const getSiteInfo = () => api.get('/api/dist/site/info'); export const getSiteModels = () => api.get('/api/dist/site/models'); export const getSitePricing = () => api.get('/api/dist/site/pricing'); export const getSitePackages = () => api.get('/api/dist/site/packages'); +export const getSiteKeyGroups = () => api.get('/api/dist/site/key-groups'); // ===== Auth ===== export const register = (data) => api.post('/api/dist/user/register', data); diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index a38ecb9..f8217b0 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -119,6 +119,17 @@ "tokens.tokenEnabled": "Token enabled", "tokens.tokenDeleted": "Token deleted", "tokens.enterName": "Please enter a name", + "tokens.selectGroup": "Create API Key", + "tokens.selectGroupSubtitle": "Choose a model group and rate, click a card to create", + "tokens.defaultGroup": "All Providers (Default)", + "tokens.defaultGroupDesc": "No provider restriction, uses all available channels", + "tokens.otherGroups": "Other", + "tokens.groupCount": "groups", + "tokens.recommended": "Recommended", + "tokens.unavailable": "Unavailable", + "tokens.rmbPerUsd": "RMB / $1", + "tokens.myKeys": "My API Keys", + "tokens.selectedGroup": "Selected Group", "tokens.quickStart": "Quick Start", "tokens.quickStartComment": "# Use your API key with OpenAI-compatible endpoint", diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json index 364aa5e..e112515 100644 --- a/src/i18n/locales/zh.json +++ b/src/i18n/locales/zh.json @@ -119,6 +119,17 @@ "tokens.tokenEnabled": "令牌已启用", "tokens.tokenDeleted": "令牌已删除", "tokens.enterName": "请输入名称", + "tokens.selectGroup": "新建 API Key", + "tokens.selectGroupSubtitle": "选择模型与费率，点击卡片即可快速创建", + "tokens.defaultGroup": "全站调用（默认）", + "tokens.defaultGroupDesc": "不限制供应商，使用所有可用渠道", + "tokens.otherGroups": "其他", + "tokens.groupCount": "个分组", + "tokens.recommended": "推荐", + "tokens.unavailable": "暂不可用", + "tokens.rmbPerUsd": "块 / 1 美元", + "tokens.myKeys": "我的 API Keys", + "tokens.selectedGroup": "已选分组", "tokens.quickStart": "快速开始", "tokens.quickStartComment": "# 使用 OpenAI 兼容端点调用 API", diff --git a/src/pages/Tokens.jsx b/src/pages/Tokens.jsx index 283cbc2..9e11b9e 100644 --- a/src/pages/Tokens.jsx +++ b/src/pages/Tokens.jsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { getTokens, createToken, updateToken, deleteToken } from '../api'; +import { getTokens, createToken, updateToken, deleteToken, getSiteKeyGroups } from '../api'; import ConfigExporter from '../components/ConfigExporter'; import toast from 'react-hot-toast'; @@ -8,25 +8,58 @@ export default function Tokens() { const { t } = useTranslation(); const [tokens, setTokens] = useState([]); const [loading, setLoading] = useState(true); - const [showCreate, setShowCreate] = useState(false); - const [createName, setCreateName] = useState(''); - const [creating, setCreating] = useState(false); const [copiedId, setCopiedId] = useState(null); - // Newly created key — shown only once const [newKey, setNewKey] = useState(null); const [deleteConfirm, setDeleteConfirm] = useState(null); + // Key groups + const [keyGroups, setKeyGroups] = useState([]); + + // Create modal + const [showCreate, setShowCreate] = useState(false); + const [createName, setCreateName] = useState(''); + const [selectedGroupId, setSelectedGroupId] = useState(0); + const [creating, setCreating] = useState(false); + const load = useCallback(async () => { setLoading(true); try { - const res = await getTokens(); - if (res.data.success) setTokens(res.data.data || []); + const [tokensRes, groupsRes] = await Promise.all([ + getTokens(), + getSiteKeyGroups().catch(() => ({ data: { success: false } })), + ]); + if (tokensRes.data.success) setTokens(tokensRes.data.data || []); + if (groupsRes.data.success) setKeyGroups(groupsRes.data.data || []); } catch (e) { /* interceptor */ } setLoading(false); }, []); useEffect(() => { load(); }, [load]); + // Group by vendor_category + const groupedByVendor = useMemo(() => { + const map = {}; + keyGroups.forEach((g) => { + const cat = g.vendor_category || t('tokens.otherGroups'); + if (!map[cat]) map[cat] = []; + map[cat].push(g); + }); + return map; + }, [keyGroups, t]); + + const openCreateFromGroup = (group) => { + if (group.is_unavailable) return; + setSelectedGroupId(group.id); + setCreateName(group.name); + setShowCreate(true); + }; + + const openCreateDefault = () => { + setSelectedGroupId(0); + setCreateName(''); + setShowCreate(true); + }; + const handleCreate = async (e) => { e.preventDefault(); if (!createName.trim()) { @@ -35,15 +68,15 @@ export default function Tokens() { } setCreating(true); try { - const res = await createToken({ name: createName.trim() }); + const payload = { name: createName.trim() }; + if (selectedGroupId > 0) payload.key_group_id = selectedGroupId; + const res = await createToken(payload); if (res.data.success) { setCreateName(''); setShowCreate(false); - // Show the key — it's only visible at creation time! + setSelectedGroupId(0); const createdKey = res.data.data?.key; - if (createdKey) { - setNewKey(createdKey); - } + if (createdKey) setNewKey(createdKey); await load(); } } catch (e) { /* interceptor */ } @@ -92,6 +125,10 @@ export default function Tokens() { setTimeout(() => setCopiedId(null), 2000); }; + const parseTags = (tagsStr) => { + try { return JSON.parse(tagsStr || '[]'); } catch { return []; } + }; + if (loading) { return (
@@ -100,23 +137,81 @@ export default function Tokens() { ); } + const hasGroups = keyGroups.length > 0; + return (
-
-
-

{t('tokens.title')}

-

{t('tokens.subtitle')}

+ + {/* ========== Section 1: Create Key with Groups ========== */} +
+

+ {hasGroups ? t('tokens.selectGroup') : t('tokens.title')} +

+ {hasGroups && ( +

{t('tokens.selectGroupSubtitle')}

+ )} + + {/* Default (All Providers) Card */} +
+
- + + {/* Vendor Category Sections */} + {hasGroups && Object.entries(groupedByVendor).map(([vendor, groups]) => ( +
+
+

{vendor}

+ + {groups.length} {t('tokens.groupCount')} + +
+
+ {groups.map((group) => ( + + ))} +
+
+ ))}
- {/* Create Modal */} + {/* ========== Create Modal ========== */} {showCreate && ( -
setShowCreate(false)}> +
{ setShowCreate(false); setSelectedGroupId(0); }}>
e.stopPropagation()}>

{t('tokens.createApiKey')}

+ {selectedGroupId > 0 && (() => { + const g = keyGroups.find((x) => x.id === selectedGroupId); + return g ? ( +
+

{t('tokens.selectedGroup')}

+

{g.name}

+
+ ) : null; + })()}
@@ -131,7 +226,7 @@ export default function Tokens() { />
-
)} - {/* New Key Reveal Modal — shown only once after creation */} + {/* ========== New Key Reveal Modal ========== */} {newKey && (
@@ -173,7 +268,7 @@ export default function Tokens() {
)} - {/* Delete Confirmation Modal */} + {/* ========== Delete Confirmation Modal ========== */} {deleteConfirm && (
setDeleteConfirm(null)}>
e.stopPropagation()}> @@ -191,76 +286,78 @@ export default function Tokens() {
)} - {/* Token List */} - {tokens.length === 0 ? ( -
-
- - - -
-

{t('tokens.noKeys')}

- + {/* ========== Section 2: My API Keys ========== */} +
+
+

{t('tokens.myKeys')}

+ {!hasGroups && ( + + )}
- ) : ( -
- {tokens.map((token) => ( -
-
- {/* Status dot */} -
- {/* Info */} -
-

{token.name}

-
- - {/* Created time */} - - {token.created_time ? new Date(token.created_time * 1000).toLocaleDateString() : ''} - - - {/* Actions */} -
- - -
-
- - {/* Key row — always visible with copy button */} - {token.key && ( -
- - sk-{token.key} - - -
- )} + {tokens.length === 0 ? ( +
+
+ + +
- ))} -
- )} +

{t('tokens.noKeys')}

+ +
+ ) : ( +
+ {tokens.map((token) => ( +
+
+
+
+

{token.name}

+
+ + {token.created_time ? new Date(token.created_time * 1000).toLocaleDateString() : ''} + +
+ + +
+
+ {token.key && ( +
+ + sk-{token.key} + + +
+ )} +
+ ))} +
+ )} +
{/* Config File Generator */}
@@ -269,3 +366,73 @@ export default function Tokens() {
); } + +/* ========== Key Group Card ========== */ +function KeyGroupCard({ group, parseTags, onSelect, t }) { + const tags = parseTags(group.tags); + const isUnavailable = group.is_unavailable; + + return ( +
!isUnavailable && onSelect(group)} + > +
+
+ {/* Name + badges */} +
+ {group.name} + {group.is_recommended && ( + + {t('tokens.recommended')} + + )} + {isUnavailable && ( + + {t('tokens.unavailable')} + + )} +
+ + {/* Price + discount + tags */} +
+ {group.rmb_per_usd > 0 && ( + + {group.rmb_per_usd} {t('tokens.rmbPerUsd')} + + )} + {group.discount_label && ( + + {group.discount_label} + + )} + {tags.map((tag, i) => ( + + {tag} + + ))} +
+ + {/* Description */} + {group.description && ( +

{group.description}

+ )} +
+ + {/* Create arrow */} + {!isUnavailable && ( +
+ {t('tokens.create')} + + + +
+ )} +
+
+ ); +}