refactor(components): 重构历史记录组件和 playground 布局- 更新 History 组件样式和动画效果

- 调整 Playground 布局结构
-优化 Sidebar 聊天记录样式

src/components/Common/Playground/History.tsx

@@ -31,12 +31,8 @@ export const PlaygroundHistory = () => {
 
   return (
     <Card
-      className={`flex flex-col [&>:nth-child(2)]:flex-1 [&>:nth-child(2)]:overflow-y-auto w-[300px] h-full pt-16 pb-5 transition-all duration-300 ease-in-out transform ${
-        show
-          ? 'opacity-100 translate-x-0'
-          : 'opacity-0 -translate-x-full absolute'
-      }`}
-      style={{ paddingTop: "4rem" }}
+      className={`flex flex-col [&>:nth-child(2)]:flex-1 [&>:nth-child(2)]:overflow-y-auto w-[300px] h-full pt-16 pb-5 transition-all duration-300 ease-in-out`}
+      style={{ paddingTop: "4rem", width: show ? "300px" : "0" }}
       title={
         <div className="flex items-center justify-between w-full">
           {t("sidebarTitle")}

src/components/Option/Playground/Playground.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useContext } from "react"
 
 import { Card } from "antd"
 
@@ -23,6 +23,7 @@ import { PlaygroundTeam } from "@/components/Common/Playground/Team.tsx"
 import { PlaygroundTokenStatistics } from "@/components/Common/Playground/TokenStatistics.tsx"
 import { PlaygroundHistory } from "@/components/Common/Playground/History.tsx"
 import { PlaygroundIodRelevant } from "@/components/Common/Playground/IodRelevant.tsx"
+import { HistoryContext } from "@/components/Layouts/Layout.tsx"
 
 
 export const Playground = () => {
@@ -140,13 +141,15 @@ export const Playground = () => {
     setRecentMessagesOnLoad()
   }, [])
 
+  const { show } = useContext(HistoryContext)
+
   return (
     <div
       ref={drop}
       className={`relative flex gap-3 h-full items-center ${
         dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800" : ""
       } bg-white dark:bg-[#171717]`}>
-        <PlaygroundHistory />
+      <PlaygroundHistory />
       <div className="relative h-full flex-1 prose-lg flex justify-center [&>*]:max-w-[848px]">
         <div
           ref={containerRef}
@@ -166,8 +169,10 @@ export const Playground = () => {
           <PlaygroundForm dropedFile={dropedFile} />
         </div>
       </div>
-      {messages.length &&  (
-        <div className="w-1/4 h-full grid grid-rows-[auto_530px_165px] pt-16 pr-5 pb-0 border-l border-gray-200" style={{"paddingTop": "4rem"}}>
+      {messages.length && (
+        <div
+          className="w-1/4 h-full grid grid-rows-[auto_530px_165px] pt-16 pr-5 pb-0 border-l border-gray-200"
+          style={{ paddingTop: "4rem" }}>
           <div className="w-full  overflow-y-auto border-gray-200 border-b p-3">
             <PlaygroundIodRelevant />
           </div>

src/components/Option/Sidebar.tsx

@@ -24,6 +24,7 @@ import {
   getLastUsedChatSystemPrompt,
   lastUsedChatModelEnabled
 } from "@/services/model-settings"
+import { useState } from "react"
 
 type Props = {
   onClose: () => void
@@ -169,7 +170,12 @@ export const Sidebar = ({
                 {group.items.map((chat, index) => (
                   <div
                     key={index}
-                    className="flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
+                    className={`
+                    flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out  border 
+                    hover:text-[#615ced] hover:bg-[#f3f2ff] dark:hover:bg-[#2d2d2d] dark:border-gray-800
+                    hover:[&_.more-vertical]:text-[#615ced]
+                    ${historyId === chat.id ? 'text-[#615ced] bg-[#f3f2ff] border-[#615ced]' : 'dark:text-gray-100 text-gray-800'}
+                    `}>
                     {chat?.message_source === "copilot" && (
                       <Tooltip title={t("common:sidebarChat")} placement="top">
                         <BotIcon className="size-3 text-green-500" />
@@ -265,7 +271,7 @@ export const Sidebar = ({
                         trigger={["click"]}
                         placement="bottomRight">
                         <button className="text-gray-500 dark:text-gray-400 opacity-80 hover:opacity-100">
-                          <MoreVertical className="w-4 h-4" />
+                          <MoreVertical className={`group-hover:text-[#615ced] w-4 h-4 more-vertical ${historyId === chat.id ? 'text-[#615ced]' : ''}`} />
                         </button>
                       </Dropdown>
                     </div>