代码修改

2026-05-27 19:43:15 +08:00
1 parent 8f5af46ec2
commit 8f75e12871
@@ -0,0 +1,85 @@
+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>
+  );
+}