6fb71b01f0
- 新增 Drawer 组件用于创建可滑动的抽屉式界面 -优化 Playground 页面布局和样式，增加 logo 和 frosted glass 效果 - 添加统计卡片组件和动画效果，提升用户体验 - 新增数据项目图标组件
139 lines
8.5 KiB
TypeScript
139 lines
8.5 KiB
TypeScript
import React, { useContext, useMemo } from "react"
|
|
import { HistoryContext } from "@/components/Layouts/Layout.tsx"
|
|
import { PanelLeftIcon } from "lucide-react"
|
|
import { Button, Tooltip } from "antd"
|
|
import { PlusOutlined } from "@ant-design/icons"
|
|
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
|
|
import { useTranslation } from "react-i18next"
|
|
import { NavLink, useLocation } from "react-router-dom"
|
|
import logo from "@/assets/logo.png"
|
|
|
|
interface SettingIconProps {}
|
|
const SettingIcon: React.FC<SettingIconProps> = () => {
|
|
return (
|
|
<svg
|
|
// @ts-ignore
|
|
t="1755767517454"
|
|
className="icon"
|
|
viewBox="0 0 1084 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="10420"
|
|
width="20"
|
|
height="20">
|
|
<path
|
|
d="M1072.147851 406.226367c-6.331285-33.456782-26.762037-55.073399-52.047135-55.073399-0.323417 0-0.651455 0.003081-0.830105 0.009241l-4.655674 0c-73.124722 0-132.618162-59.491899-132.618162-132.618162 0-23.731152 11.447443-50.336101 11.546009-50.565574 13.104573-29.498767 3.023185-65.672257-23.427755-84.127081l-1.601687-1.127342-134.400039-74.661726-1.700252-0.745401c-8.753836-3.805547-18.334698-5.735272-28.479231-5.735272-20.789593 0-41.235746 8.344174-54.683758 22.306575-14.741683 15.216028-65.622973 58.649474-104.721083 58.649474-39.450789 0-90.633935-44.286652-105.438762-59.784516-13.518857-14.247316-34.128258-22.753199-55.127302-22.753199-9.945862 0-19.354234 1.861961-27.958682 5.531982l-1.746455 0.74078-139.141957 76.431283-1.643269 1.139662c-26.537186 18.437884-36.675557 54.579032-23.584845 84.062398 0.115506 0.264895 11.579891 26.725075 11.579891 50.634877 0 73.126262-59.491899 132.618162-132.618162 132.618162l-4.581749 0c-0.318797-0.00616-0.636055-0.01078-0.951772-0.01078-25.260456 0-45.672728 21.618157-52.002472 55.0811-0.462025 2.453354-11.313456 60.622322-11.313456 106.117939 0 45.494078 10.85143 103.659965 11.314996 106.119479 6.334365 33.458322 26.758957 55.076479 52.036353 55.076479 0.320337 0 0.651455-0.00616 0.842426-0.012321l4.655674 0c73.126262 0 132.618162 59.491899 132.618162 132.616622 0 23.760413-11.444363 50.333021-11.546009 50.565574-13.093793 29.474125-3.041666 65.646075 23.395414 84.151722l1.569346 1.093459 131.838879 73.726895 1.675611 0.7377c8.750757 3.84251 18.305437 5.790715 28.397607 5.790715 21.082208 0 41.676209-8.706094 55.0888-23.290689 18.724339-20.347588 69.527086-62.362616 107.04815-62.362616 40.625872 0 92.72537 47.100385 107.759669 63.583903 13.441852 14.831008 34.176001 23.689571 55.470741 23.695731l0.00616 0c9.895039 0 19.27877-1.883523 27.893999-5.598205l1.711034-0.73924 136.659342-75.531873 1.617088-1.128882c26.492523-18.456365 36.601633-54.600594 23.538642-84.016195-0.115506-0.267974-11.595291-27.082374-11.595291-50.67646 0-73.124722 59.49344-132.616622 132.618162-132.616622l4.517066-0.00154c0.300316 0.00616 0.599092 0.009241 0.899409 0.009241 25.331299-0.00154 45.785153-21.619697 52.107197-55.054918 0.112426-0.589852 11.325776-59.507301 11.325776-106.14104C1083.464388 466.640776 1072.609877 408.67356 1072.147851 406.226367zM377.486862 945.656142l-115.32764-64.487932c5.082277-13.052211 15.437801-43.51815 15.437801-75.017486 0-109.382917-84.176364-199.816642-192.587488-208.134635-2.647404-15.427021-8.873963-54.967133-8.873963-85.667166 0-30.65691 6.223479-70.232445 8.869343-85.671786 108.415744-8.311832 192.592108-98.745557 192.592108-208.134635 0-31.416171-10.300081-61.797405-15.371577-74.854236l122.721583-67.40331c0.003081 0 0.00462 0.00154 0.007701 0.00154 4.423121 4.518606 22.121764 22.080182 46.558275 39.493911 39.929754 28.46229 77.952885 42.894416 113.014434 42.894416 34.716571 0 72.437845-14.151831 112.115025-42.06431 24.282503-17.07953 41.896442-34.302288 46.308782-38.74543 0.009241-0.00154 0.018481-0.00462 0.026182-0.00616l118.301542 65.726159c-5.077657 13.055291-15.416239 43.499669-15.416239 74.958962 0 109.389077 84.174824 199.822802 192.590568 208.134635 2.645865 15.462442 8.872423 55.107281 8.872423 85.671786 0 30.687711-6.223479 70.241685-8.869343 85.673326C890.042174 606.334084 805.86427 696.767809 805.86427 806.158426c0 31.450053 10.317022 61.851309 15.393138 74.903519l-119.783103 66.198965c-5.168521-5.490399-22.603811-23.363073-46.740005-41.288109-40.701336-30.224145-79.662378-45.549521-115.800446-45.549521-35.79155 0-74.458435 15.038919-114.927219 44.694774C400.22004 922.554885 382.666163 940.255068 377.486862 945.656142zM731.271848 511.646647c0-105.803762-86.081448-191.88059-191.888289-191.88059-105.803762 0-191.88059 86.076827-191.88059 191.88059 0 105.803762 86.076827 191.882129 191.88059 191.882129C645.19194 703.528777 731.271848 617.450409 731.271848 511.646647zM539.383558 395.903184c63.825696 0 115.751164 51.922387 115.751164 115.743463 0 63.825696-51.925468 115.751164-115.751164 115.751164-63.821076 0-115.743463-51.925468-115.743463-115.751164C423.640095 447.824031 475.562482 395.903184 539.383558 395.903184z"
|
|
fill="#272636"
|
|
p-id="10421"></path>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
type Props = {
|
|
setOpenModelSettings: (open: boolean) => void
|
|
}
|
|
|
|
export const Header: React.FC<Props> = ({ setOpenModelSettings }) => {
|
|
const location = useLocation()
|
|
|
|
const { show, setShow } = useContext(HistoryContext)
|
|
|
|
const showLeft = useMemo<boolean>(() => {
|
|
console.log(location.pathname)
|
|
if (location.pathname.includes("/settings")) {
|
|
return true
|
|
}
|
|
return show
|
|
}, [location.pathname, show])
|
|
|
|
const { t } = useTranslation(["option", "common", "settings"])
|
|
|
|
const { clearChat } = useMessageOption()
|
|
return (
|
|
<div
|
|
className={`h-[60px] absolute inset-0 pl-5 z-10 flex items-center transition-all duration-300 ease-in-out ${show && !location.pathname.includes("/settings") ? "left-[300px]" : ""}`}>
|
|
{/*控制侧边栏显示隐藏与新建对话*/}
|
|
{!showLeft && (
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
className="text-gray-500 dark:text-gray-400"
|
|
onClick={() => {
|
|
setShow(!show)
|
|
}}>
|
|
<PanelLeftIcon className="w-6 h-6" />
|
|
</button>
|
|
<Button
|
|
color="cyan"
|
|
variant="filled"
|
|
shape="round"
|
|
style={{
|
|
color: "#0057ff",
|
|
background: "#0057ff0f",
|
|
border: "1px solid #0066ff26"
|
|
}}
|
|
onClick={clearChat}>
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex items-center">
|
|
<PlusOutlined
|
|
className="text-sm"
|
|
style={{ fontSize: "16px", fontWeight: 500 }}
|
|
/>
|
|
<span>{t("newChat")}</span>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{location.pathname.includes("/settings") && (
|
|
<h2 className="text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3">
|
|
<NavLink
|
|
to="/"
|
|
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
|
<span className="text-[#d30100]">数联网</span>科创智能体
|
|
</NavLink>
|
|
</h2>
|
|
)}
|
|
{/* 项目标题 */}
|
|
<div
|
|
className={`
|
|
absolute left-1/2 transform -translate-x-1/2
|
|
w-[600px] h-[60px] dark:bg-black
|
|
flex items-center justify-center
|
|
transition-[top] drop-shadow
|
|
${show ? "-top-[60px]" : "-top-[2px] delay-200"}
|
|
`}>
|
|
<svg
|
|
// @ts-ignore
|
|
t="1755653236428"
|
|
className="icon"
|
|
viewBox="0 0 8960 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="9634"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="100%"
|
|
height="55">
|
|
<path
|
|
d="M8960 0c-451.52 181.184-171.2 1024-992 1024H992C171.232 1024 451.392 181.184 0 0h8960z"
|
|
fill="#ffffff"
|
|
p-id="9635"></path>
|
|
</svg>
|
|
<h2 className="flex items-center gap-3 text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3 absolute left-1/2 transform -translate-x-1/2">
|
|
<img src={logo} alt="logo" className="w-8" />
|
|
<p><span className="text-[#d30100]">数联网</span>科创智能体</p>
|
|
</h2>
|
|
</div>
|
|
{/*设置框*/}
|
|
<div className="flex items-center ml-auto pr-5">
|
|
<Tooltip title={t("settings")}>
|
|
<NavLink
|
|
to="/settings"
|
|
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
|
<SettingIcon />
|
|
</NavLink>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|