微调效果

app/page.tsx

@@ -9,14 +9,3 @@ export default function Home() {
     </DashboardLayout>
   );
 }
-
-// import LiquidGlass from '@/plugins/liquid-glass'
-
-// export default function Home() {
-//   return (
-//     // <LiquidGlass />
-//     <div>
-//       <h1>Hello World</h1>
-//     </div>
-//   );
-// }

components/layout/top-bar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import '../pages/style/top-bar.css';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -24,15 +25,37 @@ export function TopBar({ collapsed, onToggleSidebar }: { collapsed: boolean; onT
   const { theme, setTheme } = useTheme();
   const router = useRouter();
 
+  const handleAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
+    const element = event.currentTarget;
+    element.classList.remove('on');
+  };
+
+  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
+    const element = event.currentTarget;
+    element.classList.add('on');
+  };
+
   return (
-    <div className="fixed right-0 top-0 left-0 h-16">
+    <div className="fixed right-0 top-0 left-0 h-16 header">
       <div className="h-full flex items-center justify-between pr-6 pl-2">
         <div className="flex items-center space-x-4">
           <Button className='button-NxtqWZ' variant="ghost" size="sm" onClick={onToggleSidebar}>
             <PanelsLeftBottom className="h-4 w-4" />
           </Button>
-          <div className={`flex items-center space-x-4 cursor-pointer`} onClick={() => router.push('/')}>
-            <h1 className="text-2xl font-bold bg-gradient-to-r from-primary to-white bg-clip-text text-transparent">Movie Flow</h1>
+          <div 
+            className={`flex items-center cursor-pointer space-x-4 link-logo roll event-on`} 
+            onClick={() => router.push('/')}
+            onMouseEnter={handleMouseEnter}
+            onAnimationEnd={handleAnimationEnd}
+          >
+            <span className="translate">
+              <span>
+                <h1 className="logo text-2xl font-bold bg-gradient-to-r from-primary to-white bg-clip-text text-transparent">Movie Flow</h1>
+              </span>
+              <span>
+                <h1 className="logo text-2xl font-bold bg-gradient-to-r from-primary to-white bg-clip-text text-transparent">Movie Flow</h1>
+              </span>
+            </span>
           </div>
         </div>
 

components/pages/home-page2.tsx

@@ -54,7 +54,7 @@ export function HomePage2() {
     <div className="min-h-screen bg-[var(--background)]" ref={containerRef}>
       <div className="min-h-[100%] flex relative">
         {/* 工具栏-列表形式切换 */}
-        <div className="absolute top-[1rem] right-6 w-[8rem] flex z-[100] justify-end">
+        <div className="absolute top-[1rem] right-6 w-[8rem] flex justify-end">
           <div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
             <button 
               className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
@@ -110,7 +110,7 @@ export function HomePage2() {
             {/* 玻璃按钮 */}
             <motion.div
               className="add-project-btn relative flex items-center gap-3 px-6 py-4 rounded-2xl 
-                bg-white/20 backdrop-blur-md border border-white/25 cursor-pointer
+                bg-white/20 backdrop-blur-md cursor-pointer
                 shadow-[0_8px_32px_rgba(0,0,0,0.2)] group-hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)]
                 transition-all duration-300"
               initial={false}

components/pages/style/top-bar.css

@@ -0,0 +1,55 @@
+
+.header {
+  pointer-events: none;
+  transition: color .2s;
+}
+@keyframes btnAnimation2 {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(0, 100%);
+  }
+}
+
+@media (pointer: fine) {
+  .roll.on .translate {
+    animation-name: btnAnimation2;
+    animation-play-state: running;
+    animation-iteration-count: 1;
+    animation-duration: .4s;
+    animation-timing-function: cubic-bezier(.16, .03, .08, 1.55);
+  }
+}
+
+.roll .translate>span:last-child {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+}
+
+.logo {
+  display: block;
+  height: 100%;
+  object-fit: contain;
+}
+
+.header-wrapper .logo,
+.roll2>span .logo,
+.roll3>span .logo {
+  height: 22px;
+}
+
+.roll .translate {
+  display: inline-block;
+}
+
+.header-wrapper,
+.header .link-logo {
+  pointer-events: initial;
+  overflow: hidden;
+}
+.header button {
+  pointer-events: initial;
+}

package.json

@@ -12,6 +12,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@formatjs/intl-localematcher": "^0.6.1",
     "@hookform/resolvers": "^3.9.0",
     "@next/swc-wasm-nodejs": "13.5.1",
     "@radix-ui/react-accordion": "^1.2.0",
@@ -60,6 +61,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.446.0",
     "motion": "^12.18.1",
+    "negotiator": "^1.0.0",
     "next": "13.5.1",
     "next-themes": "^0.3.0",
     "postcss": "8.4.30",