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 { 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">
|
||||||
|
|||||||
@ -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={
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user