86 lines
3.5 KiB
TypeScript
86 lines
3.5 KiB
TypeScript
import { History } from 'lucide-react';
|
|
import type { PageType } from '../../components/Sidebar';
|
|
import type { ViewMode } from './GeneralQA.types';
|
|
|
|
/**
|
|
* 顶部栏 Props。
|
|
*
|
|
* `setViewMode` 和 `onNavigate` 由父组件传入，父组件会在生成中切换时做确认拦截；
|
|
* Header 本身不直接感知 loading，保持纯展示和事件转发。
|
|
*/
|
|
type Props = {
|
|
isDark: boolean; // 当前是否为暗黑主题，用于样式适配
|
|
viewMode: ViewMode; // 当前视图模式：'single' 单一模式 或 'compare' 对比模式
|
|
chatHeadTitle?: string;
|
|
chatDesign?: string;
|
|
compareShow?: boolean;
|
|
setViewMode: (mode: ViewMode) => void; // 设置视图模式回调函数
|
|
onNavigate: (page: PageType) => void; // 页面导航回调函数，用于跳转到其他页面（如历史记录）
|
|
};
|
|
|
|
/**
|
|
* 通用问答页面顶部栏。
|
|
*
|
|
* 该组件只负责页面标题、模式切换和历史记录入口，所有业务状态仍由父组件维护。
|
|
* 这样拆分后，顶部导航的样式和交互不会和中间问答流处理逻辑混在一起，后续如果要新增
|
|
* “保存模板”“导出记录”等入口，也可以只改这个文件。
|
|
*/
|
|
export default function GeneralQAHeader({ isDark, viewMode, chatHeadTitle = '通用问答', chatDesign = '支持单轮RAG、多轮RAG、深度检索及结果对比', compareShow = true, setViewMode, onNavigate }: Props): JSX.Element {
|
|
return (
|
|
<div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
|
|
<div className="flex items-center gap-4">
|
|
<h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{chatHeadTitle}
|
|
</h1>
|
|
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{chatDesign}
|
|
</span>
|
|
</div>
|
|
{
|
|
compareShow && <div className="flex items-center gap-2">
|
|
<div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
|
|
<button
|
|
onClick={() => setViewMode('single')}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'single'
|
|
? isDark
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-red-500 text-white'
|
|
: isDark
|
|
? 'text-slate-400 hover:text-white'
|
|
: 'text-gray-600 hover:text-red-600'
|
|
}`}
|
|
>
|
|
单一模式
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('compare')}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'compare'
|
|
? isDark
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-red-500 text-white'
|
|
: isDark
|
|
? 'text-slate-400 hover:text-white'
|
|
: 'text-gray-600 hover:text-red-600'
|
|
}`}
|
|
>
|
|
对比模式
|
|
</button>
|
|
</div>
|
|
|
|
{/* <button
|
|
onClick={() => onNavigate('qa-records')}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
isDark
|
|
? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
<History className="w-4 h-4" />
|
|
历史记录
|
|
</button> */}
|
|
</div>
|
|
}
|
|
</div>
|
|
);
|
|
}
|