"use client";
|
|
import { useState, useEffect } from 'react';
|
|
export default function ChatRoomPage() {
|
const [apiKey, setApiKey] = useState<string>('');
|
const [originalApiKey, setOriginalApiKey] = useState<string>(''); // 存储从API获取的原始密钥
|
const [showApiKeyInput, setShowApiKeyInput] = useState(false);
|
const [showApiKey, setShowApiKey] = useState(false);
|
const [error, setError] = useState<string | null>(null);
|
const [showError, setShowError] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
const [isUpdating, setIsUpdating] = useState(false);
|
|
useEffect(() => {
|
// 获取存储的API Key
|
const storedApiKey = localStorage.getItem('api-key');
|
if (storedApiKey) {
|
setApiKey(storedApiKey);
|
}
|
}, []);
|
|
// 显示错误消息
|
const showErrorMessage = (message: string) => {
|
setError(message);
|
setShowError(true);
|
setTimeout(() => {
|
setShowError(false);
|
setTimeout(() => setError(null), 300);
|
}, 3000);
|
};
|
|
// 获取当前密钥
|
const fetchCurrentApiKey = async () => {
|
setIsLoading(true);
|
try {
|
const response = await fetch('http://121.43.139.99:8080/api/secret-key', {
|
method: 'GET',
|
headers: {
|
'Content-Type': 'application/json',
|
},
|
});
|
|
if (!response.ok) {
|
throw new Error(`获取密钥失败: HTTP ${response.status}`);
|
}
|
|
const result = await response.json();
|
console.log('API响应:', result);
|
|
// 按照接口文档格式解析响应
|
if (result.code === 200 && result.data && result.data.key) {
|
const keyValue = result.data.key;
|
setOriginalApiKey(keyValue);
|
setApiKey(keyValue);
|
console.log('成功获取API密钥:', keyValue);
|
return keyValue;
|
} else {
|
throw new Error(result.message || '获取密钥失败：响应格式不正确');
|
}
|
} catch (err) {
|
console.error('获取API密钥失败:', err);
|
const errorMessage = err instanceof Error ? err.message : '获取密钥时发生未知错误';
|
showErrorMessage(`密钥获取失败: ${errorMessage}`);
|
return null;
|
} finally {
|
setIsLoading(false);
|
}
|
};
|
|
// 更新密钥
|
const updateApiKey = async (newKey: string) => {
|
if (!newKey.trim()) {
|
showErrorMessage('密钥不能为空');
|
return false;
|
}
|
|
setIsUpdating(true);
|
try {
|
const response = await fetch(`http://121.43.139.99:8080/api/secret-key/update/${encodeURIComponent(newKey)}`, {
|
method: 'GET',
|
headers: {
|
'Content-Type': 'application/json',
|
},
|
});
|
|
if (!response.ok) {
|
throw new Error(`更新密钥失败: HTTP ${response.status}`);
|
}
|
|
const result = await response.json();
|
console.log('更新API响应:', result);
|
|
// 按照接口文档格式解析响应
|
if (result.code === 200 && result.data && result.data.key) {
|
const updatedKey = result.data.key;
|
setOriginalApiKey(updatedKey);
|
setApiKey(updatedKey);
|
localStorage.setItem('api-key', updatedKey);
|
console.log('成功更新API密钥:', updatedKey);
|
showErrorMessage('密钥更新成功！');
|
return true;
|
} else {
|
throw new Error(result.message || '更新密钥失败：响应格式不正确');
|
}
|
} catch (err) {
|
console.error('更新API密钥失败:', err);
|
const errorMessage = err instanceof Error ? err.message : '更新密钥时发生未知错误';
|
showErrorMessage(`密钥更新失败: ${errorMessage}`);
|
return false;
|
} finally {
|
setIsUpdating(false);
|
}
|
};
|
|
const handleApiKeySubmit = async () => {
|
if (apiKey.trim()) {
|
// 如果密钥有变化，则调用更新API
|
if (apiKey.trim() !== originalApiKey) {
|
const success = await updateApiKey(apiKey.trim());
|
if (success) {
|
setShowApiKeyInput(false);
|
setError(null);
|
}
|
} else {
|
// 密钥没有变化，直接关闭模态框
|
localStorage.setItem('api-key', apiKey);
|
setShowApiKeyInput(false);
|
setError(null);
|
}
|
}
|
};
|
|
// 添加函数来显示API Key设置模态框，同时从API获取当前密钥
|
const handleShowApiKeyModal = async () => {
|
setShowApiKeyInput(true);
|
// 从API获取当前密钥
|
await fetchCurrentApiKey();
|
};
|
|
return (
|
<div className="min-h-screen bg-gradient-to-b from-[#1E2B63] to-[#0A1033] flex items-center justify-center relative">
|
{/* 错误提示 */}
|
{error && (
|
<div
|
className={`fixed top-20 left-1/2 transform -translate-x-1/2
|
flex items-center gap-2 px-4 py-2 text-sm text-white
|
transition-all duration-400 ease-out z-[60]
|
${showError
|
? 'opacity-100 translate-y-0 scale-100'
|
: 'opacity-0 -translate-y-2 scale-95'
|
}
|
before:content-[''] before:absolute before:inset-0 before:bg-blue-500
|
before:rounded-lg before:opacity-90 before:-z-10
|
after:content-[''] after:absolute after:inset-0 after:bg-blue-500/50
|
after:blur-md after:rounded-lg after:-z-20`}
|
>
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
<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>
|
<span className="relative">{error}</span>
|
</div>
|
)}
|
|
{/* API Key Modal */}
|
{showApiKeyInput && (
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
<div className="bg-white rounded-2xl p-6 w-[450px] space-y-4 shadow-xl">
|
<div className="flex justify-between items-center">
|
<h2 className="text-xl font-semibold">管理 API Key</h2>
|
<button
|
onClick={() => setShowApiKeyInput(false)}
|
className="text-gray-400 hover:text-gray-600"
|
disabled={isLoading || isUpdating}
|
>
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
</svg>
|
</button>
|
</div>
|
|
{/* 当前密钥显示 */}
|
{originalApiKey && (
|
<div className="bg-gray-50 rounded-lg p-3">
|
<label className="text-sm font-medium text-gray-700 mb-1 block">当前密钥</label>
|
<div className="text-sm text-gray-600 font-mono break-all">
|
{showApiKey ? originalApiKey : '••••••••••••••••'}
|
</div>
|
</div>
|
)}
|
|
<div className="space-y-2">
|
<label className="text-sm font-medium text-gray-700">新密钥</label>
|
<div className="relative">
|
<input
|
type={showApiKey ? "text" : "password"}
|
value={apiKey}
|
onChange={(e) => setApiKey(e.target.value)}
|
placeholder={isLoading ? "正在获取当前密钥..." : "请输入新的 API Key"}
|
disabled={isLoading || isUpdating}
|
className="w-full px-4 py-2 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-100/50 text-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed"
|
/>
|
<button
|
type="button"
|
onClick={() => setShowApiKey(!showApiKey)}
|
disabled={isLoading || isUpdating}
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 disabled:cursor-not-allowed"
|
>
|
{showApiKey ? (
|
// 眼睛关闭图标
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
<path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clipRule="evenodd" />
|
<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
|
</svg>
|
) : (
|
// 眼睛图标
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
</svg>
|
)}
|
</button>
|
|
{/* 加载指示器 */}
|
{isLoading && (
|
<div className="absolute right-12 top-1/2 -translate-y-1/2">
|
<div className="w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"></div>
|
</div>
|
)}
|
</div>
|
|
{/* 提示信息 */}
|
<div className="text-xs text-gray-500">
|
{apiKey.trim() !== originalApiKey && apiKey.trim() !== '' ? (
|
<span className="text-orange-600">密钥已修改，点击确定将更新到服务器</span>
|
) : (
|
<span>修改密钥后将自动同步到服务器</span>
|
)}
|
</div>
|
</div>
|
|
<div className="flex justify-end gap-2">
|
<button
|
onClick={() => setShowApiKeyInput(false)}
|
disabled={isLoading || isUpdating}
|
className="px-4 py-2 text-gray-600 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
|
>
|
取消
|
</button>
|
<button
|
onClick={handleApiKeySubmit}
|
disabled={isLoading || isUpdating || !apiKey.trim()}
|
className="px-4 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 flex items-center gap-2"
|
>
|
{isUpdating && (
|
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
)}
|
{isUpdating ? '更新中...' : '确定'}
|
</button>
|
</div>
|
</div>
|
</div>
|
)}
|
|
{/* API Key 按钮 */}
|
<button
|
onClick={handleShowApiKeyModal}
|
className="fixed top-24 right-6 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/80 hover:bg-white shadow-sm border border-gray-100 transition-colors"
|
title="设置API Key"
|
>
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
|
</svg>
|
</button>
|
|
<div className="text-center space-y-6 p-8">
|
<h1 className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88] animate-pulse">
|
Coming Soon
|
</h1>
|
<p className="text-xl md:text-2xl text-gray-300">
|
敬请期待
|
</p>
|
|
{/* 简洁的装饰线 */}
|
<div className="flex justify-center mt-8">
|
<div className="w-24 h-1 rounded-full bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88] opacity-80"></div>
|
</div>
|
</div>
|
</div>
|
);
|
}
|
