style(界面): 优化设置页面和 API Key 配置提示
- 聊天页面添加 API Key 未配置提示卡片 - 移除设置页面的 CCH URL 配置项(使用默认值) - 简化保存配置逻辑
This commit is contained in:
parent
fd6c93cb30
commit
3b0683faf9
@ -2,7 +2,8 @@
|
||||
|
||||
import { useState, useRef, useEffect, use } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Share2, MoreHorizontal, Loader2, Square, Clock, ChevronDown, Pencil, Trash2, Check, X } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { Share2, MoreHorizontal, Loader2, Square, Clock, ChevronDown, Pencil, Trash2, Check, X, AlertTriangle, Settings } from 'lucide-react';
|
||||
import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
|
||||
import { ChatInput } from '@/components/features/ChatInput';
|
||||
import { MessageBubble } from '@/components/features/MessageBubble';
|
||||
@ -448,6 +449,30 @@ export default function ChatPage({ params }: PageProps) {
|
||||
{/* 消息列表区域 */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-[900px] mx-auto px-4 py-6">
|
||||
{/* API Key 未配置提示 */}
|
||||
{!settings?.cchApiKeyConfigured && (
|
||||
<div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-amber-500 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-sm font-medium text-amber-800 dark:text-amber-200 mb-1">
|
||||
请先配置 API Key
|
||||
</h3>
|
||||
<p className="text-sm text-amber-700 dark:text-amber-300 mb-3">
|
||||
您需要配置自己的 API Key 才能使用 AI 对话功能。请前往设置页面完成配置。
|
||||
</p>
|
||||
<Link
|
||||
href="/settings"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<Settings size={16} />
|
||||
前往设置
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<h2 className="text-xl font-medium text-[var(--color-text-primary)] mb-2">
|
||||
|
||||
@ -50,7 +50,6 @@ export default function SettingsPage() {
|
||||
const { tools, loading: toolsLoading } = useTools();
|
||||
|
||||
// CCH 配置状态
|
||||
const [cchUrl, setCchUrl] = useState('');
|
||||
const [cchApiKey, setCchApiKey] = useState('');
|
||||
const [showApiKey, setShowApiKey] = useState(false);
|
||||
const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
|
||||
@ -69,7 +68,6 @@ export default function SettingsPage() {
|
||||
// 当设置加载完成后,更新本地状态
|
||||
useEffect(() => {
|
||||
if (settings) {
|
||||
setCchUrl(settings.cchUrl || '');
|
||||
setSystemPrompt(settings.systemPrompt || '');
|
||||
setTemperature(settings.temperature || '0.7');
|
||||
}
|
||||
@ -79,11 +77,9 @@ export default function SettingsPage() {
|
||||
const handleSaveCchConfig = async () => {
|
||||
setSaveStatus('saving');
|
||||
try {
|
||||
const updates: Record<string, string> = { cchUrl };
|
||||
if (cchApiKey) {
|
||||
updates.cchApiKey = cchApiKey;
|
||||
await updateSettings({ cchApiKey });
|
||||
}
|
||||
await updateSettings(updates);
|
||||
setSaveStatus('saved');
|
||||
setCchApiKey(''); // 清除输入的 API Key
|
||||
setTimeout(() => setSaveStatus('idle'), 2000);
|
||||
@ -317,19 +313,6 @@ export default function SettingsPage() {
|
||||
title="CCH 服务配置"
|
||||
description="配置 Claude Code Hub 服务连接"
|
||||
>
|
||||
<SettingsItem
|
||||
label="CCH 服务地址"
|
||||
description="Claude Code Hub 服务的 URL"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input w-80"
|
||||
value={cchUrl}
|
||||
onChange={(e) => setCchUrl(e.target.value)}
|
||||
placeholder="http://localhost:13500"
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem
|
||||
label="API Key"
|
||||
description={
|
||||
|
||||
Loading…
Reference in New Issue
Block a user