feat: update ApkList to use tabbed view

Replaced card-based layout with tabbed interface for APK environments.
Now displays APKs grouped by dev/product/sandbox/other tabs with counts.

- Replaced ApkCard with ApkTable component
- Added tab navigation with active state styling
- Group APKs by environment using reduce
- Show count badges for each environment tab

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

app/download/ApkList.tsx

@@ -1,26 +1,33 @@
 'use client';
 
-// app/download/ApkList.tsx
+import { useState } from 'react';
 import useSWR from 'swr';
-import ApkCard from './ApkCard';
+import { formatVersion } from '@/lib/utils';
+import { type ApkEnvironment } from '@/lib/apk-parser';
+import ApkTable from './ApkTable';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
+interface Apk {
+  name: string;
+  environment: ApkEnvironment;
+  commit: string | null;
+  size: number;
+  modifiedAt: string;
+  downloadUrl: string;
+}
+
 interface ApkListProps {
   project: string;
   version: string;
   commitId: string;
 }
 
-interface Apk {
-  name: string;
-  commit: string | null;
-  size: number;
-  modifiedAt: string;
-  downloadUrl: string;
-}
+const TABS: ApkEnvironment[] = ['dev', 'product', 'sandbox', 'other'];
 
 export default function ApkList({ project, version, commitId }: ApkListProps) {
+  const [activeTab, setActiveTab] = useState<ApkEnvironment>('product');
+
   const { data: apks, isLoading, error } = useSWR<Apk[]>(
     `/api/apks?project=${project}&version=${version}&commit=${commitId}`,
     fetcher
@@ -44,24 +51,46 @@ export default function ApkList({ project, version, commitId }: ApkListProps) {
 
   if (!apks || apks.length === 0) {
     return (
-      <div className="text-center py-8 text-gray-500">
-        未找到匹配的 APK 文件
+      <div className="bg-white rounded-lg shadow-md p-12 text-center">
+        <p className="text-gray-500">未找到匹配的 APK 文件</p>
       </div>
     );
   }
 
+  // Group APKs by environment
+  const groupedApks = apks.reduce((acc, apk) => {
+    acc[apk.environment] = [...(acc[apk.environment] || []), apk];
+    return acc;
+  }, {} as Record<ApkEnvironment, Apk[]>);
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {apks.map((apk) => (
-        <ApkCard
-          key={apk.name}
-          name={apk.name}
-          commit={apk.commit}
-          size={apk.size}
-          modifiedAt={apk.modifiedAt}
-          downloadUrl={apk.downloadUrl}
-        />
-      ))}
+    <div>
+      {/* Tab Navigation */}
+      <div className="bg-white rounded-t-lg border-b border-gray-200">
+        <nav className="flex space-x-8 px-6" aria-label="Tabs">
+          {TABS.map((tab) => {
+            const count = groupedApks[tab]?.length || 0;
+            return (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === tab
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                {tab} ({count})
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      <div className="mt-4">
+        <ApkTable apks={groupedApks[activeTab] || []} />
+      </div>
     </div>
   );
 }