Initial project setup with Next.js accounts manager

- Set up Next.js project structure
- Added UI components and styling
- Configured package dependencies
- Added feature documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/accounts/account-filters.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search } from 'lucide-react';
+import { StatsOverview } from '@/lib/types';
+
+interface AccountFiltersProps {
+  filters: {
+    platform: string;
+    status: string[];
+    ownerId: string;
+    search: string;
+  };
+  stats: StatsOverview | null;
+  onFilterChange: (key: string, value: any) => void;
+}
+
+export function AccountFilters({ filters, stats, onFilterChange }: AccountFiltersProps) {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <div className="flex items-center space-x-2">
+        <Search className="h-4 w-4" />
+        <Input
+          placeholder="搜索账户..."
+          value={filters.search}
+          onChange={(e) => onFilterChange('search', e.target.value)}
+          className="w-[200px]"
+        />
+      </div>
+      
+      <Select 
+        value={filters.platform || 'all'} 
+        onValueChange={(value) => onFilterChange('platform', value === 'all' ? '' : value)}
+      >
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="选择平台" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">所有平台</SelectItem>
+          {stats && Object.keys(stats.platformSummary).map(platform => (
+            <SelectItem key={platform} value={platform}>{platform}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      
+      <Select 
+        value={filters.ownerId || 'all'} 
+        onValueChange={(value) => onFilterChange('ownerId', value === 'all' ? '' : value)}
+      >
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="选择所有者" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">所有所有者</SelectItem>
+          {stats && Object.keys(stats.ownerSummary).map(owner => (
+            <SelectItem key={owner} value={owner}>{owner}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      
+      <Select 
+        value={filters.status.length > 0 ? filters.status[0] : 'all'} 
+        onValueChange={(value) => onFilterChange('status', value === 'all' ? [] : [value])}
+      >
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="选择状态" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">所有状态</SelectItem>
+          <SelectItem value="available">可用</SelectItem>
+          <SelectItem value="locked">已锁定</SelectItem>
+          <SelectItem value="banned">已封禁</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}