mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-19 15:18:38 +00:00
6a87808612
- Ran: bun run eslint:fix && bun run lint:fix - Inserted AGPL license header via eslint-plugin-header - Enforced no-multiple-empty-lines and other lint rules - Formatted code using Prettier v3 (@so1ve/prettier-config) - No functional changes; formatting-only baseline across JS/JSX files
281 lines
9.2 KiB
JavaScript
281 lines
9.2 KiB
JavaScript
/*
|
||
Copyright (C) 2025 QuantumNous
|
||
|
||
This program is free software: you can redistribute it and/or modify
|
||
it under the terms of the GNU Affero General Public License as
|
||
published by the Free Software Foundation, either version 3 of the
|
||
License, or (at your option) any later version.
|
||
|
||
This program is distributed in the hope that it will be useful,
|
||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
GNU Affero General Public License for more details.
|
||
|
||
You should have received a copy of the GNU Affero General Public License
|
||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||
|
||
For commercial licensing, please contact support@quantumnous.com
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Card, Button, Typography, Tag } from '@douyinfe/semi-ui';
|
||
import { copy, showSuccess } from '../../../helpers';
|
||
|
||
/**
|
||
* 解析密钥数据，支持多种格式
|
||
* @param {string} keyData - 密钥数据
|
||
* @param {Function} t - 翻译函数
|
||
* @returns {Array} 解析后的密钥数组
|
||
*/
|
||
const parseChannelKeys = (keyData, t) => {
|
||
if (!keyData) return [];
|
||
|
||
const trimmed = keyData.trim();
|
||
|
||
// 检查是否是JSON数组格式（如Vertex AI）
|
||
if (trimmed.startsWith('[')) {
|
||
try {
|
||
const parsed = JSON.parse(trimmed);
|
||
if (Array.isArray(parsed)) {
|
||
return parsed.map((item, index) => ({
|
||
id: index,
|
||
content:
|
||
typeof item === 'string' ? item : JSON.stringify(item, null, 2),
|
||
type: typeof item === 'string' ? 'text' : 'json',
|
||
label: `${t('密钥')} ${index + 1}`,
|
||
}));
|
||
}
|
||
} catch (e) {
|
||
// 如果解析失败，按普通文本处理
|
||
console.warn('Failed to parse JSON keys:', e);
|
||
}
|
||
}
|
||
|
||
// 检查是否是多行密钥（按换行符分割）
|
||
const lines = trimmed.split('\n').filter((line) => line.trim());
|
||
if (lines.length > 1) {
|
||
return lines.map((line, index) => ({
|
||
id: index,
|
||
content: line.trim(),
|
||
type: 'text',
|
||
label: `${t('密钥')} ${index + 1}`,
|
||
}));
|
||
}
|
||
|
||
// 单个密钥
|
||
return [
|
||
{
|
||
id: 0,
|
||
content: trimmed,
|
||
type: trimmed.startsWith('{') ? 'json' : 'text',
|
||
label: t('密钥'),
|
||
},
|
||
];
|
||
};
|
||
|
||
/**
|
||
* 可复用的密钥显示组件
|
||
* @param {Object} props
|
||
* @param {string} props.keyData - 密钥数据
|
||
* @param {boolean} props.showSuccessIcon - 是否显示成功图标
|
||
* @param {string} props.successText - 成功文本
|
||
* @param {boolean} props.showWarning - 是否显示安全警告
|
||
* @param {string} props.warningText - 警告文本
|
||
*/
|
||
const ChannelKeyDisplay = ({
|
||
keyData,
|
||
showSuccessIcon = true,
|
||
successText,
|
||
showWarning = true,
|
||
warningText,
|
||
}) => {
|
||
const { t } = useTranslation();
|
||
|
||
const parsedKeys = parseChannelKeys(keyData, t);
|
||
const isMultipleKeys = parsedKeys.length > 1;
|
||
|
||
const handleCopyAll = () => {
|
||
copy(keyData);
|
||
showSuccess(t('所有密钥已复制到剪贴板'));
|
||
};
|
||
|
||
const handleCopyKey = (content) => {
|
||
copy(content);
|
||
showSuccess(t('密钥已复制到剪贴板'));
|
||
};
|
||
|
||
return (
|
||
<div className='space-y-4'>
|
||
{/* 成功状态 */}
|
||
{showSuccessIcon && (
|
||
<div className='flex items-center gap-2'>
|
||
<svg
|
||
className='w-5 h-5 text-green-600'
|
||
fill='currentColor'
|
||
viewBox='0 0 20 20'
|
||
>
|
||
<path
|
||
fillRule='evenodd'
|
||
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
|
||
clipRule='evenodd'
|
||
/>
|
||
</svg>
|
||
<Typography.Text strong className='text-green-700'>
|
||
{successText || t('验证成功')}
|
||
</Typography.Text>
|
||
</div>
|
||
)}
|
||
|
||
{/* 密钥内容 */}
|
||
<div className='space-y-3'>
|
||
<div className='flex items-center justify-between'>
|
||
<Typography.Text strong>
|
||
{isMultipleKeys ? t('渠道密钥列表') : t('渠道密钥')}
|
||
</Typography.Text>
|
||
{isMultipleKeys && (
|
||
<div className='flex items-center gap-2'>
|
||
<Typography.Text type='tertiary' size='small'>
|
||
{t('共 {{count}} 个密钥', { count: parsedKeys.length })}
|
||
</Typography.Text>
|
||
<Button
|
||
size='small'
|
||
type='primary'
|
||
theme='outline'
|
||
onClick={handleCopyAll}
|
||
>
|
||
{t('复制全部')}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className='space-y-3 max-h-80 overflow-auto'>
|
||
{parsedKeys.map((keyItem) => (
|
||
<Card
|
||
key={keyItem.id}
|
||
className='!rounded-lg !border !border-gray-200 dark:!border-gray-700'
|
||
>
|
||
<div className='space-y-2'>
|
||
<div className='flex items-center justify-between'>
|
||
<Typography.Text
|
||
strong
|
||
size='small'
|
||
className='text-gray-700 dark:text-gray-300'
|
||
>
|
||
{keyItem.label}
|
||
</Typography.Text>
|
||
<div className='flex items-center gap-2'>
|
||
{keyItem.type === 'json' && (
|
||
<Tag size='small' color='blue'>
|
||
{t('JSON')}
|
||
</Tag>
|
||
)}
|
||
<Button
|
||
size='small'
|
||
type='primary'
|
||
theme='outline'
|
||
icon={
|
||
<svg
|
||
className='w-3 h-3'
|
||
fill='currentColor'
|
||
viewBox='0 0 20 20'
|
||
>
|
||
<path d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' />
|
||
<path d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z' />
|
||
</svg>
|
||
}
|
||
onClick={() => handleCopyKey(keyItem.content)}
|
||
>
|
||
{t('复制')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='bg-gray-50 dark:bg-gray-800 rounded-lg p-3 max-h-40 overflow-auto'>
|
||
<Typography.Text
|
||
code
|
||
className='text-xs font-mono break-all whitespace-pre-wrap text-gray-800 dark:text-gray-200'
|
||
>
|
||
{keyItem.content}
|
||
</Typography.Text>
|
||
</div>
|
||
|
||
{keyItem.type === 'json' && (
|
||
<Typography.Text
|
||
type='tertiary'
|
||
size='small'
|
||
className='block'
|
||
>
|
||
{t('JSON格式密钥，请确保格式正确')}
|
||
</Typography.Text>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{isMultipleKeys && (
|
||
<div className='bg-blue-50 dark:bg-blue-900 rounded-lg p-3'>
|
||
<Typography.Text
|
||
type='tertiary'
|
||
size='small'
|
||
className='text-blue-700 dark:text-blue-300'
|
||
>
|
||
<svg
|
||
className='w-4 h-4 inline mr-1'
|
||
fill='currentColor'
|
||
viewBox='0 0 20 20'
|
||
>
|
||
<path
|
||
fillRule='evenodd'
|
||
d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'
|
||
clipRule='evenodd'
|
||
/>
|
||
</svg>
|
||
{t(
|
||
'检测到多个密钥，您可以单独复制每个密钥，或点击复制全部获取完整内容。',
|
||
)}
|
||
</Typography.Text>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 安全警告 */}
|
||
{showWarning && (
|
||
<div className='bg-yellow-50 dark:bg-yellow-900 rounded-lg p-4'>
|
||
<div className='flex items-start'>
|
||
<svg
|
||
className='w-5 h-5 text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3 flex-shrink-0'
|
||
fill='currentColor'
|
||
viewBox='0 0 20 20'
|
||
>
|
||
<path
|
||
fillRule='evenodd'
|
||
d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'
|
||
clipRule='evenodd'
|
||
/>
|
||
</svg>
|
||
<div>
|
||
<Typography.Text
|
||
strong
|
||
className='text-yellow-800 dark:text-yellow-200'
|
||
>
|
||
{t('安全提醒')}
|
||
</Typography.Text>
|
||
<Typography.Text className='block text-yellow-700 dark:text-yellow-300 text-sm mt-1'>
|
||
{warningText ||
|
||
t(
|
||
'请妥善保管密钥信息，不要泄露给他人。如有安全疑虑，请及时更换密钥。',
|
||
)}
|
||
</Typography.Text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ChannelKeyDisplay;
|