refactor(layout): 重构布局组件并添加视频播放功能

-重写 Header 组件，使用新的 OptionLayoutContext 替代 HistoryContext
- 新增 VideoPlayer 组件，用于播放视频
- 更新 Playground 组件，集成新的侧边栏和视频播放功能
- 重构 Layout 组件，支持新的选项布局
- 更新相关路由和导出导入逻辑，以支持上述更改

src/components/Common/Playground/IodRelevant.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { Avatar, Card } from "antd"
 import { AnimatePresence, motion } from "framer-motion" // 使用 CSS-in-JS 方式
 import styled, { keyframes } from "styled-components"
@@ -11,6 +11,7 @@ import { TechCompanyIcon } from "@/components/Icons/TechCompany.tsx"
 import { ResearchInstitutesIcon } from "@/components/Icons/ResearchInstitutes.tsx"
 import { NSDCIcon } from "@/components/Icons/NSDC.tsx"
 import { useIodPlaygroundContext } from "@/components/Option/Playground/PlaygroundIod.tsx"
+import { totalSearchResults } from "@/services/search.ts"
 
 const rotate = keyframes`
   0% {
@@ -230,6 +231,18 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
     return currentIodMessage && !iodLoading
   }, [currentIodMessage, iodLoading])
 
+  const [count, setCount] = useState<number>(0)
+
+  useEffect(() => {
+    totalSearchResults().then((res) => {
+      setCount(res)
+    })
+  }, [])
+
+  const getMinNum = (n1: number) => {
+    return Math.min(n1, count)
+  }
+
   const data = useMemo(() => {
     const loading = iodSearch && iodLoading
     const text = loading ? "正" : "已"
@@ -275,7 +288,7 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
               />
               个{" "}
             </span>
-            数据集，引用 3个 数据集作为参考
+            数据集，引用 {getMinNum(currentIodMessage?.data.total ?? 0)}个 数据集作为参考
           </p>
         ) : (
           ""
@@ -314,7 +327,7 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
               />
               个{" "}
             </span>
-            场景，引用 3个 场景作为参考
+            场景，引用 {getMinNum(currentIodMessage?.scenario.total ?? 0)}个 场景作为参考
           </p>
         ) : (
           ""
@@ -358,14 +371,14 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
               />
               个{" "}
             </span>
-            组织，引用 3个 组织作为参考
+            组织，引用 {getMinNum(currentIodMessage?.organization.total ?? 0)}个 组织作为参考
           </p>
         ) : (
           ""
         )
       }
     ]
-  }, [showSearchData, iodLoading])
+  }, [showSearchData, iodLoading, count])
 
   return (
     <Card

src/components/Option/Playground/PlaygroundIod.tsx

@@ -52,7 +52,8 @@ const PlaygroundIodProvider: React.FC<{ children: React.ReactNode }> = ({
     if (iodLoading || !messages.length) {
       return undefined
     }
-
+    console.log(messages)
+    console.log(currentMessageId)
     // 如果不存在currentMessageId默认返回最后一个message
     if (!currentMessageId) {
       const lastMessage = messages.at(-1)

src/components/Option/Sidebar.tsx

@@ -24,6 +24,7 @@ import {
   getLastUsedChatSystemPrompt,
   lastUsedChatModelEnabled
 } from "@/services/model-settings"
+import { useMessageOption } from "@/hooks/useMessageOption.tsx"
 
 type Props = {
   onClose: () => void
@@ -57,6 +58,8 @@ export const Sidebar = ({
   const client = useQueryClient()
   const navigate = useNavigate()
 
+  const { setCurrentMessageId } = useMessageOption()
+
   const { data: chatHistories, status } = useQuery({
     queryKey: ["fetchChatHistory"],
     queryFn: async () => {
@@ -146,6 +149,7 @@ export const Sidebar = ({
     const db = new PageAssitDatabase()
     const history = await db.getChatHistory(chat.id)
     setHistoryId(chat.id)
+    setCurrentMessageId()
     setHistory(formatToChatHistory(history))
     setMessages(formatToMessage(history))
     stopStreamingRequest()

src/components/Option/VideoPlayer/index.tsx

@@ -120,7 +120,7 @@ const VideoPlayer = () => {
 
       const containerHeight = container.offsetHeight
       const mouseY = e.clientY - container.getBoundingClientRect().top
-
+      console.log(mouseY > containerHeight - 150)
       // 如果鼠标在底部150px区域内
       if (mouseY > containerHeight - 150) {
         // 清除之前的隐藏定时器
@@ -321,7 +321,7 @@ const VideoPlayer = () => {
       onMouseLeave={handleMouseLeave}>
       <video
         ref={videoRef}
-        className="w-full h-full object-cover bg-black"
+        className="w-full h-full bg-black"
         onClick={togglePlayPause}
         playsInline
         preload="auto">
@@ -348,7 +348,7 @@ const VideoPlayer = () => {
 
       {/* 控制栏 - 使用与原始HTML相同的类名和行为 */}
       <div
-        className={`absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-4 transition-all duration-300 ease-in-out flex flex-col gap-2.5 ${showControls ? "bottom-0" : "-bottom-32"}`}>
+        className={`absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-4 transition-all duration-300 ease-in-out flex flex-col gap-2.5 ${showControls ? "bottom-0" : "-bottom-40"}`}>
         <div className="flex items-center justify-end gap-2 cursor-pointer" onClick={handleEnded}>
           {<img src={logo} alt="logo" className="w-8" />}
           <h2 className="text-xl font-bold text-white dark:text-zinc-300 mr-3">