新首页侧边栏按钮增加悬浮名称提示
This commit is contained in:
Your Name
parent
9cf1762f69
commit
12704ffd58
@ -38,6 +38,7 @@ import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-params-bar";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
|
||||
@ -1302,112 +1303,138 @@ export function LovartHome({
|
||||
</header>
|
||||
|
||||
<aside className="fixed left-6 top-1/2 z-30 hidden -translate-y-1/2 flex-col items-center gap-2 lg:flex">
|
||||
<button
|
||||
type="button"
|
||||
onClick={openNewCanvas}
|
||||
className="flex h-[52px] w-[52px] items-center justify-center rounded-full border border-black/10 bg-white shadow"
|
||||
title="新建项目"
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
|
||||
<Plus className="h-4 w-4" />
|
||||
</div>
|
||||
</button>
|
||||
<TooltipProvider delayDuration={120}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openNewCanvas}
|
||||
className="flex h-[52px] w-[52px] items-center justify-center rounded-full border border-black/10 bg-white shadow"
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
|
||||
<Plus className="h-4 w-4" />
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">新建项目</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<div className="flex w-[56px] flex-col items-center gap-1 rounded-[28px] border border-black/10 bg-white px-1.5 py-2.5 shadow">
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full bg-black/5"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
title="首页"
|
||||
>
|
||||
<Home className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={openAllProjectsInPage}
|
||||
title="项目列表"
|
||||
>
|
||||
<Folder className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={() => toast.info("个人主页模块后续开放")}
|
||||
title="个人主页"
|
||||
>
|
||||
<User className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={() => toast.info("帮助中心后续开放")}
|
||||
title="帮助中心"
|
||||
>
|
||||
<Info className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
{siteSettingsData?.tutorialEnabled ? (
|
||||
<HoverCard openDelay={80} closeDelay={100}>
|
||||
<HoverCardTrigger asChild>
|
||||
<div className="flex w-[56px] flex-col items-center gap-1 rounded-[28px] border border-black/10 bg-white px-1.5 py-2.5 shadow">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full bg-black/5"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
>
|
||||
<Home className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">首页</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
title="视频教程"
|
||||
onClick={openAllProjectsInPage}
|
||||
>
|
||||
<PlayCircle className="h-[18px] w-[18px]" />
|
||||
<Folder className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent side="right" align="start" className="w-[300px] rounded-2xl p-2">
|
||||
<div className="px-2 pb-1 pt-1 text-xs font-medium text-black/50">视频教程</div>
|
||||
<div className="max-h-[380px] space-y-1 overflow-y-auto">
|
||||
{tutorialVideos.length > 0 ? (
|
||||
tutorialVideos.map((video) => (
|
||||
<button
|
||||
key={video.id}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2.5 rounded-xl p-2 text-left hover:bg-black/[0.04]"
|
||||
onClick={() => handleOpenTutorial(video)}
|
||||
>
|
||||
<div className="h-10 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-black/[0.06]">
|
||||
{video.coverUrl ? (
|
||||
<img
|
||||
src={video.coverUrl}
|
||||
alt={video.title}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<PlayCircle className="h-4 w-4 text-black/45" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-[13px] font-medium text-black/85">
|
||||
{video.title}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">项目列表</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={() => toast.info("个人主页模块后续开放")}
|
||||
>
|
||||
<User className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">个人主页</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={() => toast.info("帮助中心后续开放")}
|
||||
>
|
||||
<Info className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">帮助中心</TooltipContent>
|
||||
</Tooltip>
|
||||
{siteSettingsData?.tutorialEnabled ? (
|
||||
<HoverCard openDelay={80} closeDelay={100}>
|
||||
<HoverCardTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
title="视频教程"
|
||||
>
|
||||
<PlayCircle className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent side="right" align="start" className="w-[300px] rounded-2xl p-2">
|
||||
<div className="px-2 pb-1 pt-1 text-xs font-medium text-black/50">视频教程</div>
|
||||
<div className="max-h-[380px] space-y-1 overflow-y-auto">
|
||||
{tutorialVideos.length > 0 ? (
|
||||
tutorialVideos.map((video) => (
|
||||
<button
|
||||
key={video.id}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2.5 rounded-xl p-2 text-left hover:bg-black/[0.04]"
|
||||
onClick={() => handleOpenTutorial(video)}
|
||||
>
|
||||
<div className="h-10 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-black/[0.06]">
|
||||
{video.coverUrl ? (
|
||||
<img
|
||||
src={video.coverUrl}
|
||||
alt={video.title}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<PlayCircle className="h-4 w-4 text-black/45" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{video.description ? (
|
||||
<div className="truncate text-[11px] text-black/45">
|
||||
{video.description}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-[13px] font-medium text-black/85">
|
||||
{video.title}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-2 py-3 text-[12px] text-black/45">暂无教程视频</div>
|
||||
)}
|
||||
</div>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={handleOpenImageEditor}
|
||||
title="图片编辑"
|
||||
>
|
||||
<Edit className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
{video.description ? (
|
||||
<div className="truncate text-[11px] text-black/45">
|
||||
{video.description}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-2 py-3 text-[12px] text-black/45">暂无教程视频</div>
|
||||
)}
|
||||
</div>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
) : null}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={handleOpenImageEditor}
|
||||
title="图片编辑"
|
||||
>
|
||||
<Edit className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">图片编辑</TooltipContent>
|
||||
</Tooltip>
|
||||
{siteSettingsData?.toolbox1Enabled !== false && toolbox1Links.length > 0 ? (
|
||||
<HoverCard openDelay={80} closeDelay={80}>
|
||||
<HoverCardTrigger asChild>
|
||||
@ -1470,17 +1497,23 @@ export function LovartHome({
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
) : null}
|
||||
{user?.type === "admin" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={() => router.push("/settings")}
|
||||
title="系统设置"
|
||||
>
|
||||
<Settings className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
{user?.type === "admin" ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5"
|
||||
onClick={() => router.push("/settings")}
|
||||
title="系统设置"
|
||||
>
|
||||
<Settings className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">系统设置</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</aside>
|
||||
|
||||
<main className="mx-auto max-w-[1240px] px-6 pb-20 pt-[84px]">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user