wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update overview ui

Browse Source
This commit is contained in:
Xin Wang
2026-02-11 14:46:06 +08:00
parent 24ec548924
commit 2ab4075fcd
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/pages/Dashboard.tsx
View File

@@ -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">