feat(web): 增加动效插件并优化侧边栏动画

- 为 `web` 应用引入 `tailwindcss-animate`，并接入 Tailwind 配置。
- 调整 `sheet` 与 `sidebar` 的移动端遮罩、过渡时长和动画曲线，提升侧边栏展开收起体验。
- 精简移动端侧边栏无障碍标题，仅保留必要语义。

apps/web/package.json

@@ -57,6 +57,7 @@
     "autoprefixer": "10.4.20",
     "postcss": "8.5.15",
     "tailwindcss": "3.4.15",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "5.6.3",
     "vite": "8.0.16"
   }

apps/web/src/components/ui/sheet.tsx

@@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/35 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:duration-150 data-[state=open]:duration-200 sm:bg-black/45",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:ease-in data-[state=open]:ease-out",
   {
     variants: {
       side: {

apps/web/src/components/ui/sidebar.tsx

@@ -11,7 +11,6 @@ import { Separator } from "@/components/ui/separator"
 import {
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet"
@@ -211,8 +210,7 @@ const Sidebar = React.forwardRef<
             side={side}
           >
             <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+              <SheetTitle>导航</SheetTitle>
             </SheetHeader>
             <div className="flex h-full w-full flex-col">{children}</div>
           </SheetContent>

apps/web/tailwind.config.cjs

@@ -56,5 +56,5 @@ module.exports = {
   		}
   	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }