style(界面): 优化设置页面和 API Key 配置提示

- 聊天页面添加 API Key 未配置提示卡片
- 移除设置页面的 CCH URL 配置项(使用默认值)
- 简化保存配置逻辑
This commit is contained in:
gaoziman 2025-12-21 14:04:08 +08:00
parent fd6c93cb30
commit 3b0683faf9
2 changed files with 27 additions and 19 deletions

View File

@ -2,7 +2,8 @@
import { useState, useRef, useEffect, use } from 'react'; import { useState, useRef, useEffect, use } from 'react';
import { useRouter, useSearchParams } from 'next/navigation'; 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 { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
import { ChatInput } from '@/components/features/ChatInput'; import { ChatInput } from '@/components/features/ChatInput';
import { MessageBubble } from '@/components/features/MessageBubble'; 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="flex-1 overflow-y-auto">
<div className="max-w-[900px] mx-auto px-4 py-6"> <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 ? ( {messages.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-center"> <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"> <h2 className="text-xl font-medium text-[var(--color-text-primary)] mb-2">

View File

@ -50,7 +50,6 @@ export default function SettingsPage() {
const { tools, loading: toolsLoading } = useTools(); const { tools, loading: toolsLoading } = useTools();
// CCH 配置状态 // CCH 配置状态
const [cchUrl, setCchUrl] = useState('');
const [cchApiKey, setCchApiKey] = useState(''); const [cchApiKey, setCchApiKey] = useState('');
const [showApiKey, setShowApiKey] = useState(false); const [showApiKey, setShowApiKey] = useState(false);
const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle'); const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
@ -69,7 +68,6 @@ export default function SettingsPage() {
// 当设置加载完成后,更新本地状态 // 当设置加载完成后,更新本地状态
useEffect(() => { useEffect(() => {
if (settings) { if (settings) {
setCchUrl(settings.cchUrl || '');
setSystemPrompt(settings.systemPrompt || ''); setSystemPrompt(settings.systemPrompt || '');
setTemperature(settings.temperature || '0.7'); setTemperature(settings.temperature || '0.7');
} }
@ -79,11 +77,9 @@ export default function SettingsPage() {
const handleSaveCchConfig = async () => { const handleSaveCchConfig = async () => {
setSaveStatus('saving'); setSaveStatus('saving');
try { try {
const updates: Record<string, string> = { cchUrl };
if (cchApiKey) { if (cchApiKey) {
updates.cchApiKey = cchApiKey; await updateSettings({ cchApiKey });
} }
await updateSettings(updates);
setSaveStatus('saved'); setSaveStatus('saved');
setCchApiKey(''); // 清除输入的 API Key setCchApiKey(''); // 清除输入的 API Key
setTimeout(() => setSaveStatus('idle'), 2000); setTimeout(() => setSaveStatus('idle'), 2000);
@ -317,19 +313,6 @@ export default function SettingsPage() {
title="CCH 服务配置" title="CCH 服务配置"
description="配置 Claude Code Hub 服务连接" 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 <SettingsItem
label="API Key" label="API Key"
description={ description={