fix: Optimized popups and the search page (#9297)

### What problem does this PR solve?

fix: Optimized popups and the search page #3221 
- Added a new PortalModal component
- Refactored the Modal component, adding show and hide methods to
support popups
- Updated the search page, adding a new query function and optimizing
the search card style
- Localized, added search-related translations

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2025-08-07 11:07:04 +08:00
committed by GitHub
parent 4fc9e42e74
commit 7c719f8365
11 changed files with 254 additions and 98 deletions

View File

@ -1,4 +1,5 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { MoreButton } from '@/components/more-button';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
@ -15,38 +16,40 @@ export function SearchCard({ data }: IProps) {
return (
<Card className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard">
<CardContent className="p-4">
<CardContent className="p-4 flex gap-2 items-start group">
<div className="flex justify-between mb-4">
{data.avatar ? (
<div
className="w-[70px] h-[70px] rounded-xl bg-cover"
style={{ backgroundImage: `url(${data.avatar})` }}
/>
) : (
<Avatar className="w-[70px] h-[70px]">
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)}
<RAGFlowAvatar
className="w-[70px] h-[70px]"
avatar={data.avatar}
name={data.title}
/>
</div>
<div className="flex flex-col gap-1">
<section className="flex justify-between">
<div className="text-[20px] font-bold size-7 leading-5">
{data.title}
</div>
<MoreButton></MoreButton>
</section>
<div>An app that does things An app that does things</div>
<section className="flex justify-between">
<div>
Search app
<p className="text-sm opacity-80">
{formatPureDate(data.update_time)}
</p>
</div>
<div className="space-x-2 invisible group-hover:visible">
<Button variant="icon" size="icon" onClick={navigateToSearch}>
<ChevronRight className="h-6 w-6" />
</Button>
<Button variant="icon" size="icon">
<Trash2 />
</Button>
</div>
</section>
</div>
<h3 className="text-xl font-bold mb-2">{data.title}</h3>
<p>An app that does things An app that does things</p>
<section className="flex justify-between pt-3">
<div>
Search app
<p className="text-sm opacity-80">
{formatPureDate(data.update_time)}
</p>
</div>
<div className="space-x-2">
<Button variant="icon" size="icon" onClick={navigateToSearch}>
<ChevronRight className="h-6 w-6" />
</Button>
<Button variant="icon" size="icon">
<Trash2 />
</Button>
</div>
</section>
</CardContent>
</Card>
);