Skip to content

S
sdream-ai-fe
Commit 69b32b83 by HoMeTown
Options

feat: 历史记录样式

parent 33fb7132
Showing with 164 additions and 93 deletions
src/assets/svg/historyMenu.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(-162.000000, -920.000000)">
<g id="编组-2" transform="translate(80.000000, 152.000000)">
<g id="编组-13" transform="translate(8.000000, 751.000000)">
<g id="形状结合" transform="translate(74.000000, 17.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<path d="M2.5,11.5 C3.32842712,11.5 4,12.1715729 4,13 C4,13.8284271 3.32842712,14.5 2.5,14.5 C1.67157288,14.5 1,13.8284271 1,13 C1,12.1715729 1.67157288,11.5 2.5,11.5 Z M14,12 C14.5522847,12 15,12.4477153 15,13 C15,13.5522847 14.5522847,14 14,14 L7,14 C6.44771525,14 6,13.5522847 6,13 C6,12.4477153 6.44771525,12 7,12 L14,12 Z M2.5,6.5 C3.32842712,6.5 4,7.17157288 4,8 C4,8.82842712 3.32842712,9.5 2.5,9.5 C1.67157288,9.5 1,8.82842712 1,8 C1,7.17157288 1.67157288,6.5 2.5,6.5 Z M14,7 C14.5522847,7 15,7.44771525 15,8 C15,8.55228475 14.5522847,9 14,9 L7,9 C6.44771525,9 6,8.55228475 6,8 C6,7.44771525 6.44771525,7 7,7 L14,7 Z M2.5,1.5 C3.32842712,1.5 4,2.17157288 4,3 C4,3.82842712 3.32842712,4.5 2.5,4.5 C1.67157288,4.5 1,3.82842712 1,3 C1,2.17157288 1.67157288,1.5 2.5,1.5 Z M14,2 C14.5522847,2 15,2.44771525 15,3 C15,3.55228475 14.5522847,4 14,4 L7,4 C6.44771525,4 6,3.55228475 6,3 C6,2.44771525 6.44771525,2 7,2 L14,2 Z" fill="#82969C" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/layouts/HistoryBar/HistoryBar.tsx
export const HistoryBar: React.FC = () => {
import { AnimatePresence, motion } from 'framer-motion'
import { Button, Input } from '@nextui-org/react'
import { item, list, variants } from './motionAnimate'
import SearchIcon from '@/assets/svg/search.svg?react'
import HistoryMenuIcon from '@/assets/svg/historyMenu.svg?react'
interface HistoryBarProps {
isVisible: boolean
}
export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
return (
<div>123</div>
<AnimatePresence>
{isVisible && (
<motion.div
initial="hidden"
animate="visible"
exit="exit"
variants={variants}
className="w-[252px] rounded-[20px] sm:h-[80vh] sm:max-h-[800px] bg-[#F0FAFF] border-[1px] border-solid border-white ml-[12px]"
>
<div className="pt-[24px] flex flex-col h-full">
<div className="px-[32px] h-[40px]">
<Input classNames={{ inputWrapper: ['bg-white', 'data-[hover=true]:bg-[#fff]', 'group-data-[focus=true]:bg-white', 'rounded-[24px]'] }} placeholder="搜索历史记录" startContent={<SearchIcon />} />
</div>
<div className="px-[32px] flex-1 overflow-y-auto">
<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="text-[12px] border-t-solid border-t-[1px] border-t-[#82969C12] w-full h-[48px] flex items-center justify-center">
<Button className="w-full" color="primary" variant="light" startContent={<HistoryMenuIcon />}>
<span className="text-[#82969C]">管理对话记录</span>
</Button>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
)
}
src/layouts/HistoryBar/motionAnimate.ts 0 → 100644
export const list = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.1,
staggerChildren: 0.05,
},
},
}
export const item = {
hidden: { y: 5, opacity: 0 },
visible: {
y: 0,
opacity: 1,
},
}
export const variants = {
hidden: {
opacity: 0,
scale: 0,
x: '-50%', // 起始位置向左偏移
},
visible: {
opacity: 1,
scale: 1,
x: 0,
transition: {
type: 'spring',
stiffness: 260,
damping: 20,
},
},
exit: {
opacity: 0,
scale: 0,
x: '-50%',
transition: {
duration: 0.2,
ease: 'easeIn',
},
},
}
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 { HistoryBar } from '../HistoryBar/HistoryBar'
import styles from './MainLayout.module.less'
import SearchIcon from '@/assets/svg/search.svg?react'
interface MainLayoutProps {
children: React.ReactNode
......@@ -13,99 +12,11 @@ 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}>
<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>
)}
<HistoryBar isVisible={isNavCollapsed} />
</div>
<motion.div className={styles.layoutContent}>
{children}
......
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