From 2ab4075fcd04aaca1170e49ac237ec60e69f5e08 Mon Sep 17 00:00:00 2001
From: Xin Wang <wx44wx@XindeMac-mini.local>
Date: Wed, 11 Feb 2026 14:46:06 +0800
Subject: [PATCH] Update overview ui

---
 web/pages/Dashboard.tsx | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/pages/Dashboard.tsx b/web/pages/Dashboard.tsx
index 5ce4034..a6351ad 100644
--- a/web/pages/Dashboard.tsx
+++ b/web/pages/Dashboard.tsx
@@ -12,7 +12,9 @@ export const DashboardPage: React.FC = () => {
   const [timeRange, setTimeRange] = useState<'week' | 'month' | 'year'>('week');
   const [selectedAssistantId, setSelectedAssistantId] = useState<string>('all');
   const [assistants, setAssistants] = useState<Assistant[]>([]);
+  const [topRailHeight, setTopRailHeight] = useState(0);
   
+  const topRailRef = useRef<HTMLDivElement>(null);
   const workflowRef = useRef<HTMLDivElement>(null);
   const aboutRef = useRef<HTMLDivElement>(null);
 
@@ -32,13 +34,35 @@ export const DashboardPage: React.FC = () => {
     loadAssistants();
   }, []);
 
+  useEffect(() => {
+    const updateTopRailHeight = () => {
+      setTopRailHeight(topRailRef.current?.offsetHeight ?? 0);
+    };
+
+    updateTopRailHeight();
+
+    const observer = new ResizeObserver(() => {
+      updateTopRailHeight();
+    });
+
+    if (topRailRef.current) {
+      observer.observe(topRailRef.current);
+    }
+
+    window.addEventListener('resize', updateTopRailHeight);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateTopRailHeight);
+    };
+  }, []);
+
   const scrollToNext = (ref: React.RefObject<HTMLDivElement>) => {
     ref.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
   return (
     <div className="h-[calc(100vh-5rem)] overflow-y-auto snap-y snap-mandatory custom-scrollbar relative scroll-smooth bg-background">
-      <div className="sticky top-0 z-40 bg-gradient-to-b from-background via-background/95 to-transparent pb-3">
+      <div ref={topRailRef} className="sticky top-0 z-40 bg-gradient-to-b from-background via-background/95 to-transparent pb-3">
         <div className="mx-auto w-full max-w-[1600px] px-6 lg:px-12 pt-3">
           <div className="flex justify-end items-center gap-3 rounded-2xl border border-white/10 bg-background/75 px-3 py-2 backdrop-blur-xl shadow-[0_8px_30px_rgba(0,0,0,0.25)]">
             <Button variant="ghost" size="sm" className="h-8 px-4 text-xs font-medium border border-white/5 bg-white/5 hover:bg-white/10 hover:text-white transition-all text-white/60 rounded-full">
@@ -52,7 +76,10 @@ export const DashboardPage: React.FC = () => {
       </div>
 
       {/* SECTION 1: METRICS & CHARTS */}
-      <section className="min-h-full snap-start flex flex-col pt-0 pb-5 relative">
+      <section
+        className="min-h-full snap-start flex flex-col pb-4 relative"
+        style={{ paddingTop: `${topRailHeight + 8}px` }}
+      >
         <div className="w-full max-w-[1600px] mx-auto px-6 lg:px-12 flex-1 flex flex-col">
           {/* 2. Main Dashboard Container */}
           <div className="flex-1 bg-card/20 backdrop-blur-sm border border-white/5 rounded-[2rem] px-6 py-5 lg:px-7 lg:py-6 shadow-2xl flex flex-col gap-4 relative overflow-hidden group/dash">
@@ -188,7 +215,7 @@ export const DashboardPage: React.FC = () => {
         {/* Scroll Indicator */}
         <div 
           onClick={() => scrollToNext(workflowRef)}
-          className="absolute bottom-4 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 cursor-pointer group animate-bounce-slow opacity-35 hover:opacity-100 transition-all duration-500 hover:scale-110"
+          className="mt-3 mb-1 self-center flex flex-col items-center gap-2 cursor-pointer group animate-bounce-slow opacity-35 hover:opacity-100 transition-all duration-500 hover:scale-110"
         >
           <span className="text-[10px] font-bold text-primary tracking-[0.3em] uppercase group-hover:tracking-[0.5em] transition-all">核心流程</span>
           <div className="p-2 rounded-full bg-primary/10 border border-primary/20 backdrop-blur-sm group-hover:bg-primary group-hover:text-black transition-colors">