sidebar collapse

app/(app)/AppLayoutClient.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import React from 'react';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { ProtectedRoute, useAuth } from '@/lib/auth';
-import { LayoutDashboard, BarChart3, UserCircle } from 'lucide-react';
-
-export default function AppLayoutClient({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { signOut, user } = useAuth();
-  const pathname = usePathname();
-  
-  const navigationItems = [
-    { name: 'Dashboard', href: '/dashboard', icon: <LayoutDashboard className="h-5 w-5" /> },
-    { name: 'Analytics', href: '/analytics', icon: <BarChart3 className="h-5 w-5" /> },
-    { name: 'Account', href: '/account', icon: <UserCircle className="h-5 w-5" /> },
-  ];
-
-  const handleSignOut = async () => {
-    await signOut();
-  };
-
-  return (
-    <ProtectedRoute>
-      <div className="flex min-h-screen bg-gray-100">
-        {/* 侧边栏导航 */}
-        <div className="fixed inset-y-0 left-0 w-64 bg-white shadow-lg">
-          <div className="flex h-16 items-center px-6 border-b">
-            <Link href="/" className="text-lg font-medium text-gray-900">
-              ShortURL Analytics
-            </Link>
-          </div>
-          <nav className="mt-4 px-2">
-            {navigationItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={`flex items-center px-3 py-2 mt-2 rounded-md text-sm font-medium ${
-                  pathname === item.href || pathname?.startsWith(`${item.href}/`)
-                    ? 'bg-blue-100 text-blue-600'
-                    : 'text-gray-700 hover:bg-gray-100'
-                }`}
-              >
-                <span className="mr-3">{item.icon}</span>
-                {item.name}
-              </Link>
-            ))}
-          </nav>
-        </div>
-
-        {/* 主内容区域 */}
-        <div className="flex-1 ml-64">
-          {/* 顶部导航栏 */}
-          <header className="bg-white shadow-sm">
-            <div className="flex h-16 items-center justify-end px-6">
-              <div className="flex items-center">
-                <span className="text-sm font-medium text-gray-700 mr-4">
-                  {user?.email}
-                </span>
-                <button
-                  onClick={handleSignOut}
-                  className="px-3 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
-                >
-                  Sign Out
-                </button>
-              </div>
-            </div>
-          </header>
-
-          {/* 页面内容 */}
-          <main className="py-6">
-            {children}
-          </main>
-        </div>
-      </div>
-    </ProtectedRoute>
-  );
-} 

app/(app)/dashboard/page.tsx

@@ -8,6 +8,8 @@ import GeoAnalytics from '@/app/components/analytics/GeoAnalytics';
 import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
 import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
 import { TeamSelector } from '@/app/components/ui/TeamSelector';
+import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
+import { TagSelector } from '@/app/components/ui/TagSelector';
 
 // 事件类型定义
 interface Event {
@@ -102,6 +104,11 @@ export default function DashboardPage() {
   
   // 添加团队选择状态 - 使用数组支持多选
   const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
+  // 添加项目选择状态 - 使用数组支持多选
+  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
+  // 添加标签选择状态 - 使用数组支持多选
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+  
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [summary, setSummary] = useState<EventsSummary | null>(null);
@@ -133,6 +140,20 @@ export default function DashboardPage() {
           });
         }
         
+        // 添加项目ID参数 - 支持多个项目
+        if (selectedProjectIds.length > 0) {
+          selectedProjectIds.forEach(projectId => {
+            params.append('projectId', projectId);
+          });
+        }
+        
+        // 添加标签ID参数 - 支持多个标签
+        if (selectedTagIds.length > 0) {
+          selectedTagIds.forEach(tagId => {
+            params.append('tagId', tagId);
+          });
+        }
+
         // 并行获取所有数据
         const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
           fetch(`${baseUrl}/summary?${params.toString()}`),
@@ -169,7 +190,7 @@ export default function DashboardPage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
 
   if (loading) {
     return (
@@ -191,13 +212,27 @@ export default function DashboardPage() {
     <div className="container mx-auto px-4 py-8">
       <div className="flex justify-between items-center mb-8">
         <h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
-        <div className="flex items-center space-x-4">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center">
           <TeamSelector
             value={selectedTeamIds}
             onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
             className="w-[250px]"
             multiple={true}
           />
+          <ProjectSelector
+            value={selectedProjectIds}
+            onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
+            teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
+          />
+          <TagSelector
+            value={selectedTagIds}
+            onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
+            teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
+          />
           <DateRangePicker
             value={dateRange}
             onChange={setDateRange}
@@ -235,6 +270,68 @@ export default function DashboardPage() {
         </div>
       )}
 
+      {/* 显示项目选择信息 */}
+      {selectedProjectIds.length > 0 && (
+        <div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
+          <span className="text-blue-700 font-medium mr-2">
+            {selectedProjectIds.length === 1 ? 'Project filter:' : 'Projects filter:'}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {selectedProjectIds.map(projectId => (
+              <span key={projectId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                {projectId}
+                <button
+                  onClick={() => setSelectedProjectIds(selectedProjectIds.filter(id => id !== projectId))}
+                  className="ml-1 text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {selectedProjectIds.length > 0 && (
+              <button
+                onClick={() => setSelectedProjectIds([])}
+                className="text-xs text-gray-500 hover:text-gray-700 underline"
+              >
+                Clear all
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 显示标签选择信息 */}
+      {selectedTagIds.length > 0 && (
+        <div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
+          <span className="text-blue-700 font-medium mr-2">
+            {selectedTagIds.length === 1 ? 'Tag filter:' : 'Tags filter:'}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {selectedTagIds.map(tagId => (
+              <span key={tagId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                {tagId}
+                <button
+                  onClick={() => setSelectedTagIds(selectedTagIds.filter(id => id !== tagId))}
+                  className="ml-1 text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {selectedTagIds.length > 0 && (
+              <button
+                onClick={() => setSelectedTagIds([])}
+                className="text-xs text-gray-500 hover:text-gray-700 underline"
+              >
+                Clear all
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 仪表板内容 */}
+      <>
         {summary && (
           <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
             <div className="bg-white rounded-lg shadow p-6">
@@ -380,6 +477,7 @@ export default function DashboardPage() {
             </div>
           )}
         </div>
+      </>
     </div>
   );
 } 

app/(app)/layout.tsx

@@ -1,13 +1,10 @@
 import '../globals.css';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Sidebar } from '@/app/components/Sidebar';
-import AppLayoutClient from './AppLayoutClient';
-
-const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'ShortURL Analytics',
-  description: 'Analytics dashboard for ShortURL service',
+  description: 'Analytics for your shortened URLs',
 };
 
 export default function AppLayout({
@@ -16,10 +13,16 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className={inter.className}>
+    <div className="flex h-screen bg-gray-50">
-      <AppLayoutClient>
+      {/* 侧边栏 */}
+      <Sidebar />
+      
+      {/* 主内容区域 */}
+      <div className="flex-1 flex flex-col overflow-auto">
+        <main className="flex-1 overflow-y-auto">
           {children}
-      </AppLayoutClient>
+        </main>
+      </div>
     </div>
   );
 } 

app/components/Sidebar.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { 
+  BarChartIcon, 
+  HomeIcon, 
+  PersonIcon, 
+  ChevronLeftIcon, 
+  ChevronRightIcon 
+} from '@radix-ui/react-icons';
+
+interface NavItemProps {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  isCollapsed: boolean;
+  isActive?: boolean;
+}
+
+const NavItem = ({ href, label, icon, isCollapsed, isActive }: NavItemProps) => {
+  return (
+    <Link 
+      href={href}
+      className={`flex items-center p-2 rounded-lg ${
+        isActive 
+          ? 'bg-blue-100 text-blue-700' 
+          : 'text-gray-700 hover:bg-gray-100'
+      } transition-all duration-200 group`}
+    >
+      <div className="w-6 h-6 flex items-center justify-center">{icon}</div>
+      {!isCollapsed && (
+        <span className={`ml-3 whitespace-nowrap transition-opacity duration-200 ${
+          isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
+        }`}>
+          {label}
+        </span>
+      )}
+      {isCollapsed && (
+        <span className="sr-only">{label}</span>
+      )}
+    </Link>
+  );
+};
+
+export function Sidebar() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const pathname = usePathname();
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const navigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: <HomeIcon className="w-5 h-5" /> },
+    { name: 'Analytics', href: '/analytics', icon: <BarChartIcon className="w-5 h-5" /> },
+    { name: 'Account', href: '/account', icon: <PersonIcon className="w-5 h-5" /> },
+  ];
+
+  return (
+    <div className={`flex flex-col h-full transition-all duration-300 ${
+      isCollapsed ? 'w-16' : 'w-64'
+    } bg-white border-r border-gray-200 relative`}>
+      {/* 顶部Logo和标题 */}
+      <div className="flex items-center p-4 border-b border-gray-200">
+        <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded">
+          <span className="font-bold">S</span>
+        </div>
+        {!isCollapsed && (
+          <span className="ml-3 font-medium text-gray-900 transition-opacity duration-200">
+            ShortURL Analytics
+          </span>
+        )}
+      </div>
+
+      {/* 导航菜单 */}
+      <div className="flex-grow p-4 overflow-y-auto">
+        <ul className="space-y-2">
+          {navigation.map((item) => (
+            <li key={item.name}>
+              <NavItem 
+                href={item.href}
+                label={item.name}
+                icon={item.icon}
+                isCollapsed={isCollapsed}
+                isActive={pathname?.startsWith(item.href)}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* 底部折叠按钮 */}
+      <div className="border-t border-gray-200 p-4">
+        <button 
+          onClick={toggleSidebar}
+          className="w-full flex items-center justify-center p-2 rounded-lg text-gray-500 hover:bg-gray-100"
+          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {isCollapsed ? (
+            <ChevronRightIcon className="w-5 h-5" />
+          ) : (
+            <ChevronLeftIcon className="w-5 h-5" />
+          )}
+          {!isCollapsed && <span className="ml-2">Collapse</span>}
+        </button>
+      </div>
+    </div>
+  );
+} 

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@clickhouse/client": "^1.11.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/themes": "^3.2.1",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@clickhouse/client':
         specifier: ^1.11.0
         version: 1.11.0
+      '@radix-ui/react-icons':
+        specifier: ^1.3.2
+        version: 1.3.2(react@19.0.0)
       '@radix-ui/react-popover':
         specifier: ^1.1.6
         version: 1.1.6(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -657,6 +660,11 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
+
   '@radix-ui/react-id@1.1.0':
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
@@ -3531,6 +3539,10 @@ snapshots:
       '@types/react': 19.0.12
       '@types/react-dom': 19.0.4(@types/react@19.0.12)
 
+  '@radix-ui/react-icons@1.3.2(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@radix-ui/react-id@1.1.0(@types/react@19.0.12)(react@19.0.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.0.12)(react@19.0.0)