Skip to content

S
sdream-ai-fe
Commit af45edef by weiw
Options

fix:收藏页面增加返回功能

parent 9807cfe4
Showing with 89 additions and 40 deletions
src/layouts/Navbar/Navbar.tsx
...@@ -59,6 +59,18 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c ...@@ -59,6 +59,18 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c
} }
if (type === 'collect') { if (type === 'collect') {
// 从URL中提取会话ID并存储到 sessionStorage
const pathParts = location.pathname.split('/')
// 从路径中提取会话ID，获取 chat/ 后面的值
// 查找 'chat' 在路径中的位置，然后获取其后一项作为会话ID
const chatIndex = pathParts.indexOf('chat')
const conversationId = chatIndex !== -1 && pathParts.length > chatIndex + 1
? pathParts[chatIndex + 1]
: null
if (conversationId) {
sessionStorage.setItem('currentConversationId', conversationId)
}
navigate('/collect') navigate('/collect')
} }
......
src/pages/Collect/Collect.tsx
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Tooltip } from '@heroui/react' import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Tooltip } from '@heroui/react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useNavigate } from 'react-router-dom'
import { formatMarkdown } from '../Chat/components/ChatItem/markdownFormatter' import { formatMarkdown } from '../Chat/components/ChatItem/markdownFormatter'
import { ChatAnswerAttachment } from '../Chat/components/ChatItem/ChatAnswerAttchment' import { ChatAnswerAttachment } from '../Chat/components/ChatItem/ChatAnswerAttchment'
import styles from './Collect.module.less' import styles from './Collect.module.less'
...@@ -18,6 +19,8 @@ import ShineBorder from '@/components/ShineBorder' ...@@ -18,6 +19,8 @@ import ShineBorder from '@/components/ShineBorder'
import SdreamLoading from '@/components/SdreamLoading' import SdreamLoading from '@/components/SdreamLoading'
export const Collect: React.FC = () => { export const Collect: React.FC = () => {
const navigate = useNavigate()
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [collectList, setCollectList] = useState<any>([]) const [collectList, setCollectList] = useState<any>([])
...@@ -84,6 +87,12 @@ export const Collect: React.FC = () => { ...@@ -84,6 +87,12 @@ export const Collect: React.FC = () => {
setPageNum(pageNum + 1) setPageNum(pageNum + 1)
} }
// 添加返回上一页的函数
const handleGoBack = () => {
const conversationId = sessionStorage.getItem('currentConversationId') || ''
navigate(`/chat/${conversationId}`, { state: { fromCollect: true } })
}
useEffect(() => { useEffect(() => {
getCollectList() getCollectList()
}, [pageNum]) }, [pageNum])
...@@ -93,13 +102,26 @@ export const Collect: React.FC = () => { ...@@ -93,13 +102,26 @@ export const Collect: React.FC = () => {
{/* <ChatSlogan /> {/* <ChatSlogan />
<ChatMaskBar /> */} <ChatMaskBar /> */}
<div className="content h-full overflow-y-auto pt-[24px]"> <div className="content h-full overflow-y-auto pt-[24px]">
<motion.div <div onClick={handleGoBack} className="flex items-center cursor-pointer text-blue-500 hover:text-blue-700 transition-colors duration-200">
<svg
className={`${styles.collectScrollable} scrollbar-hide`} className="w-5 h-5 mr-1"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
> >
<path
d="M19 12H5M12 19L5 12L12 5"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="font-medium">返回</span>
</div>
<motion.div className={`${styles.collectScrollable} scrollbar-hide`}>
<div className={`${styles.inter}`}> <div className={`${styles.inter}`}>
{ {collectList.length !== 0 && (
collectList.length !== 0 && (
<motion.div <motion.div
initial={{ opacity: 0, y: -10 }} initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
...@@ -109,16 +131,16 @@ export const Collect: React.FC = () => { ...@@ -109,16 +131,16 @@ export const Collect: React.FC = () => {
}} }}
className="flex flex-col gap-[24px]" className="flex flex-col gap-[24px]"
> >
{ {collectList.map((item: any, index: number) => (
collectList.map((item: any, index: number) => (
<ShineBorder <ShineBorder
borderRadius={20} borderRadius={20}
className="text-[#27353C] w-full max-w-[912px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" className="text-[#27353C] w-full max-w-[912px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]"
key={`${item.collectionId}_${index}`} key={`${item.collectionId}_${index}`}
> >
<div className="flex mb-[20px]"> <div className="flex mb-[20px]">
<div className="mr-[20px]"><QIcon /></div> <div className="mr-[20px]">
<QIcon />
</div>
<div className="font-bold text-[16px]">{item.question}</div> <div className="font-bold text-[16px]">{item.question}</div>
</div> </div>
<div className="flex"> <div className="flex">
...@@ -126,54 +148,60 @@ export const Collect: React.FC = () => { ...@@ -126,54 +148,60 @@ export const Collect: React.FC = () => {
<AIcon /> <AIcon />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<MarkdownDetail> <MarkdownDetail>{formatMarkdown(item.answer || '')}</MarkdownDetail>
{formatMarkdown(item.answer || '')}
</MarkdownDetail>
{item.cardList && item.cardList?.length !== 0 && <ChatAnswerAttachment answer={item} />} {item.cardList && item.cardList?.length !== 0 && <ChatAnswerAttachment answer={item} />}
<div className="mt-[12px] flex gap-[4px] justify-between items-center"> <div className="mt-[12px] flex gap-[4px] justify-between items-center">
<div className="text-12px text-[#B2B8C1]"> <div className="text-12px text-[#B2B8C1]">{item.collectionTime}</div>
{item.collectionTime}
</div>
<div> <div>
<Tooltip color="foreground" content="复制" className="capitalize"> <Tooltip color="foreground" content="复制" className="capitalize">
<Button variant="light" isIconOnly aria-label="CopyIcon" onPress={() => handleCopy(item)}><CopyIcon /></Button> <Button
variant="light"
isIconOnly
aria-label="CopyIcon"
onPress={() => handleCopy(item)}
>
<CopyIcon />
</Button>
</Tooltip> </Tooltip>
<Tooltip color="foreground" content="删除" className="capitalize"> <Tooltip color="foreground" content="删除" className="capitalize">
<Button variant="light" isIconOnly aria-label="DeleteIcon" onPress={() => handleDelete(item)}><DeleteIcon /></Button> <Button
variant="light"
isIconOnly
aria-label="DeleteIcon"
onPress={() => handleDelete(item)}
>
<DeleteIcon />
</Button>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ShineBorder> </ShineBorder>
)) ))}
}
</motion.div> </motion.div>
) )}
} {collectList.length === 0 && !isLoading && (
{
collectList.length === 0 && !isLoading && (
<div className="flex w-full h-full items-center justify-center flex-col"> <div className="flex w-full h-full items-center justify-center flex-col">
<EmptyIcon /> <EmptyIcon />
<p className="text-[13px] text-[#27353C] mt-[16px]">暂无收藏记录</p> <p className="text-[13px] text-[#27353C] mt-[16px]">暂无收藏记录</p>
</div> </div>
) )}
} {isLoading && (
{isLoading && <div className="w-full flex justify-center items-center"><SdreamLoading /></div>} <div className="w-full flex justify-center items-center">
{ <SdreamLoading />
!isLoading && collectList.length < total && ( </div>
)}
{!isLoading && collectList.length < total && (
<div className="w-full max-w-[912px] mx-auto flex justify-center mt-[24px]"> <div className="w-full max-w-[912px] mx-auto flex justify-center mt-[24px]">
<Button onPress={handleLoadMore} color="primary" variant="light"> <Button onPress={handleLoadMore} color="primary" variant="light">
加载更多 加载更多
</Button> </Button>
</div> </div>
) )}
} {collectList.length === total && collectList.length !== 0 && (
{
collectList.length === total && collectList.length !== 0 && (
<div className="w-full mt-[24px] max-w-[912px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div> <div className="w-full mt-[24px] max-w-[912px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div>
) )}
}
</div> </div>
</motion.div> </motion.div>
</div> </div>
...@@ -188,9 +216,7 @@ export const Collect: React.FC = () => { ...@@ -188,9 +216,7 @@ export const Collect: React.FC = () => {
确认删除当前收藏内容吗？删除后，此条收藏的内容将不可恢复。 确认删除当前收藏内容吗？删除后，此条收藏的内容将不可恢复。
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button onPress={onClose}> <Button onPress={onClose}>再想想</Button>
再想想
</Button>
<Button color="primary" onPress={handleSureDel}> <Button color="primary" onPress={handleSureDel}>
确认 确认
</Button> </Button>
......
src/pages/Home/HomeNew.tsx
import type React from 'react' import type React from 'react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { Outlet } from 'react-router-dom' import { Outlet, useLocation } from 'react-router-dom'
import { useEffect } from 'react' import { useEffect } from 'react'
import styles from './Home.module.less' import styles from './Home.module.less'
import { QuestionList } from './components/QuestionList' import { QuestionList } from './components/QuestionList'
...@@ -38,8 +38,12 @@ function getAnimationProps(delay: number) { ...@@ -38,8 +38,12 @@ function getAnimationProps(delay: number) {
export const Home: React.FC = () => { export const Home: React.FC = () => {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const location = useLocation()
useEffect(() => { useEffect(() => {
// 在组件挂载时执行dispatch const fromCollect = location.state?.fromCollect
// 在组件挂载时执行dispatch，但只执行一次
if (!fromCollect) {
dispatch( dispatch(
createConversation({ createConversation({
conversationData: {}, conversationData: {},
...@@ -47,7 +51,14 @@ export const Home: React.FC = () => { ...@@ -47,7 +51,14 @@ export const Home: React.FC = () => {
shouldSendQuestion: '', shouldSendQuestion: '',
}), }),
) )
}, []) // 空依赖数组确保只在组件挂载时执行一次 }
// 清除状态以避免下次影响
if (location.state?.fromCollect) {
// 使用 replace 替换当前历史记录，清除 state
window.history.replaceState({}, document.title, window.location.pathname)
}
}, [])
// const location = useLocation() // const location = useLocation()
// 检查当前路径是否包含 "/chat/" // 检查当前路径是否包含 "/chat/"
......
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