goddonebianu/learn-languages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化文件夹列表 UI 样式和布局

Browse Source
This commit is contained in:
goddonebianu
2026-03-08 13:05:48 +08:00
parent ff57f5e0a5
commit ca33d4353f
2 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/folders/FoldersClient.tsx
View File

@@ -29,19 +29,19 @@ const FolderCard = ({ folder, refresh }: FolderProps) => {
return ( return (
<div <div
className="flex justify-between items-center group p-4 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors" className="flex justify-between items-center group py-4 px-5 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 cursor-pointer transition-colors"
onClick={() => { onClick={() => {
router.push(`/folders/${folder.id}`); router.push(`/folders/${folder.id}`);
}} }}
> >
<div className="flex items-center gap-3 flex-1"> <div className="flex items-center gap-4 flex-1">
<div className="shrink-0"> <div className="shrink-0 text-primary-500">
<Fd className="text-gray-600" size="md" /> <Fd size={24} />
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<h3 className="font-medium text-gray-900">{folder.name}</h3> <h3 className="font-semibold text-gray-900 truncate">{folder.name}</h3>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500 mt-0.5">
{t("folderInfo", { {t("folderInfo", {
id: folder.id, id: folder.id,
name: folder.name, name: folder.name,
@@ -51,7 +51,7 @@ const FolderCard = ({ folder, refresh }: FolderProps) => {
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-1 ml-4">
<CircleButton <CircleButton
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
@@ -69,7 +69,7 @@ const FolderCard = ({ folder, refresh }: FolderProps) => {
} }
}} }}
> >
<FolderPen size={16} /> <FolderPen size={18} />
</CircleButton> </CircleButton>
<CircleButton <CircleButton
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
@@ -89,9 +89,9 @@ const FolderCard = ({ folder, refresh }: FolderProps) => {
}} }}
className="text-gray-400 hover:text-red-500 hover:bg-red-50" className="text-gray-400 hover:text-red-500 hover:bg-red-50"
> >
<Trash2 size={16} /> <Trash2 size={18} />
</CircleButton> </CircleButton>
<ChevronRight size={18} className="text-gray-400" /> <ChevronRight size={20} className="text-gray-400 ml-1" />
</div> </div>
</div> </div>
); );
@@ -156,7 +156,7 @@ export function FoldersClient({ userId }: { userId: string; }) {
disabled={loading} disabled={loading}
className="w-full border-dashed" className="w-full border-dashed"
> >
<FolderPlus size={18} /> <FolderPlus size={20} />
<span>{loading ? t("creating") : t("newFolder")}</span> <span>{loading ? t("creating") : t("newFolder")}</span>
</LightButton> </LightButton>
@@ -167,23 +167,21 @@ export function FoldersClient({ userId }: { userId: string; }) {
// 空状态 // 空状态
<div className="text-center py-12 text-gray-400"> <div className="text-center py-12 text-gray-400">
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gray-100 flex items-center justify-center"> <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gray-100 flex items-center justify-center">
<FolderPlus size="md" className="text-gray-400" /> <FolderPlus size={24} className="text-gray-400" />
</div> </div>
<p className="text-sm">{t("noFoldersYet")}</p> <p className="text-sm">{t("noFoldersYet")}</p>
</div> </div>
) : ( ) : (
// 文件夹卡片列表 // 文件夹卡片列表
<div className="rounded-md border border-gray-200 overflow-hidden"> folders
{folders .toSorted((a, b) => a.id - b.id)
.toSorted((a, b) => a.id - b.id) .map((folder) => (
.map((folder) => ( <FolderCard
<FolderCard key={folder.id}
key={folder.id} folder={folder}
folder={folder} refresh={updateFolders}
refresh={updateFolders} />
/> ))
))}
</div>
)} )}
</CardList> </CardList>
</div> </div>

2
src/components/ui/CardList.tsx
View File

@@ -13,7 +13,7 @@ interface CardListProps {
export function CardList({ children, className = "" }: CardListProps) { export function CardList({ children, className = "" }: CardListProps) {
return ( return (
<div className={`max-h-96 overflow-y-auto rounded-lg border-2 border-gray-200 ${className}`}> <div className={`max-h-96 overflow-y-auto rounded-lg border-2 border-gray-200 ${className}`}>
<VStack gap={0}> <VStack gap={0} align="stretch">
{children} {children}
</VStack> </VStack>
</div> </div>