Skip to content

S
sdream-ai-fe
Commit 33fb7132 by HoMeTown
Options

feat: 历史记录样式

parent f4ea264f
Showing with 144 additions and 12 deletions
src/assets/svg/search.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>蒙版</title>
<defs>
<rect id="path-1" x="0" y="0" width="16" height="16"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---历史对话" transform="translate(-132.000000, -186.000000)">
<g id="编组-2" transform="translate(80.000000, 152.000000)">
<g id="编组-5" transform="translate(32.000000, 24.000000)">
<g id="编组-4" transform="translate(20.000000, 8.000000)">
<g id="形状结合" transform="translate(0.000000, 2.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<path d="M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.45631335 13.5552792,9.80875661 12.7942356,10.9289319 C13.0285678,10.9959592 13.2489863,11.1222991 13.4333521,11.3066649 L15.5546724,13.4279853 C16.1404589,14.0137717 16.1404589,14.9635192 15.5546724,15.5493056 C14.968886,16.1350921 14.0191385,16.1350921 13.4333521,15.5493056 L11.3120317,13.4279853 C11.1279349,13.2438884 11.0016947,13.023844 10.9333111,12.7904467 C9.81282143,13.5539415 8.45850198,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z" fill="#5C5C5C" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/layouts/HistoryBar/HistoryBar.tsx 0 → 100644
export const HistoryBar: React.FC = () => {
return (
<div>123</div>
)
}
src/layouts/MainLayout/MainLayout.tsx
import type React from 'react'
import { motion } from 'framer-motion'
import { useToggle } from '@reactuses/core'
import { Button, Input } from '@nextui-org/react'
import { Navbar } from '../Navbar'
import styles from './MainLayout.module.less'
import SearchIcon from '@/assets/svg/search.svg?react'
interface MainLayoutProps {
children: React.ReactNode
......@@ -11,9 +13,100 @@ interface MainLayoutProps {
export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
const [isNavCollapsed, toggleNav] = useToggle(true)
const list = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.2,
staggerChildren: 0.1,
},
},
}
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
},
}
return (
<motion.main className={styles.layoutMain}>
<Navbar isCollapsed={isNavCollapsed} onToggle={toggleNav} />
<div className="w-90px h-full pl-[12px] flex items-center">
<Navbar isCollapsed={isNavCollapsed} onToggle={toggleNav} />
{isNavCollapsed && (
<div className="w-[252px] bg-[#F0FAFF] rounded-[20px] border-[1px] border-solid border-white ml-[12px]">
<div className="pt-[24px] px-[32px]">
<Input classNames={{ inputWrapper: ['bg-white', 'data-[hover=true]:bg-[#fff]', 'group-data-[focus=true]:bg-white', 'rounded-[24px]'] }} placeholder="搜索历史记录" startContent={<SearchIcon />} />
<motion.ul
initial="hidden"
animate="visible"
variants={list}
className="w-full flex flex-col gap-[6px]"
>
<motion.li variants={item} className="mt-[32px] text-[13px] text-[#B1C6D2]">今日</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
<motion.li variants={item} className="mt-[32px] text-[13px] text-[#B1C6D2]">今日</motion.li>
<motion.li variants={item} className="w-full">
<Button color="primary" variant="light" className="w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
</div>
</Button>
</motion.li>
</motion.ul>
</div>
<div className="w-full h-[48px] flex items-center justify-center">
管理对话记录
</div>
</div>
)}
</div>
<motion.div className={styles.layoutContent}>
{children}
</motion.div>
......
src/layouts/Navbar/Navbar.tsx
......@@ -23,13 +23,18 @@ const NAV_BAR_ITEMS = [
{ icon: Tools, label: '工具', key: 'tools' },
]
// onToggle isCollapsed
export const Navbar: React.FC<NavbarProps> = () => {
export const Navbar: React.FC<NavbarProps> = ({ onToggle }) => {
const handleClick = (type: string) => {
if (type === 'history') {
onToggle()
}
}
return (
<motion.nav className="w-0 sm:w-[90px] flex-shrink-0 flex flex-col items-center justify-center">
<motion.div className={`${styles.layoutNavBarAgent} sm:flex hidden w-[64px] bg-white gap-[28px]`}>
<motion.nav className="h-full flex-shrink-0 flex flex-col items-center justify-center">
<motion.div className={`${styles.layoutNavBarAgent} sm:flex hidden w-[64px] bg-white gap-[26px]`}>
{NAV_BAR_ITEMS.map((item) => {
return (
<NavBarItem icon={item.icon} label={item.label} key={item.key} />
<NavBarItem onClick={handleClick} icon={item.icon} label={item.label} key={item.key} type={item.key} />
)
})}
</motion.div>
......
src/layouts/Navbar/components/NavBarItem/NavBarItem.tsx
import React from 'react'
import { motion } from 'framer-motion'
import { Button } from '@nextui-org/react'
import { Button, Tooltip } from '@nextui-org/react'
import { NavBarDivider } from '../NavBarDivider'
import styles from './NavBarItem.module.less'
import Logo from '@/assets/svg/logo.svg?react'
interface NavBarItemProps {
onClick: (key: string) => void
icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> | string
label: string
type: string
}
export const NavBarItem: React.FC<NavBarItemProps> = ({ icon, label }) => {
export const NavBarItem: React.FC<NavBarItemProps> = ({ onClick, icon, label, type }) => {
if (label === '' && icon === '') {
return <NavBarDivider />
}
......@@ -23,11 +25,13 @@ export const NavBarItem: React.FC<NavBarItemProps> = ({ icon, label }) => {
return (
<motion.div className={`${styles.NavBarItem}`}>
<div className={`${styles.icon}`}>
<Button variant="light" isIconOnly aria-label="Like">
{React.createElement(icon)}
</Button>
<Tooltip color="foreground" content={label} placement="right">
<Button onClick={() => onClick(type)} variant="light" isIconOnly aria-label="Like">
{React.createElement(icon)}
</Button>
</Tooltip>
</div>
<div className={styles.label}>{label}</div>
{/* <div className={styles.label}>{label}</div> */}
</motion.div>
)
}
src/pages/Home/Home.tsx
......@@ -50,7 +50,7 @@ export const Home: React.FC = () => {
/>
</div>
<div className="box-border px-[0] mx-auto iptContainer w-full max-w-[1000px] flex-shrink-0 sm:px-0">
<div className="box-border px-[0] mx-auto iptContainer w-full max-w-[1000px] flex-shrink-0 sm:px-0 pb-[18px]">
<ChatEditor placeholders={placeholders} />
<div className="w-full text-center mt-[20px] text-[#3333334d] text-[12px]">
内容由AI模型生成，其准确性和完整性无法保证，仅供参考
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment