feat: Sprint 3 — benchmark + conversion funnel + invoice PDF

- 3.1: Add criterion benchmark for zclaw-growth TF-IDF retrieval
  (indexing throughput, query scoring latency, top-K retrieval)
- 3.2: Extend admin-v2 Usage page with recharts funnel chart
  (registration → trial → paid conversion) and daily trend bar chart
- 3.3: Add invoice PDF export via genpdf (Arial font, Windows)
  with GET /api/v1/billing/invoices/{id}/pdf handler

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

admin-v2/src/pages/Usage.tsx

@@ -1,18 +1,71 @@
 // ============================================================
-// 用量统计
+// 用量统计 + 转化漏斗
 // ============================================================
 
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Card, Col, Row, Select, Statistic } from 'antd'
-import { ThunderboltOutlined, ColumnWidthOutlined } from '@ant-design/icons'
+import { ThunderboltOutlined, ColumnWidthOutlined, UserOutlined, TeamOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+  FunnelChart, Funnel, LabelList,
+} from 'recharts'
 import { telemetryService } from '@/services/telemetry'
+import { statsService } from '@/services/stats'
 import { PageHeader } from '@/components/PageHeader'
 import { ErrorState } from '@/components/ErrorState'
 import type { DailyUsageStat, ModelUsageStat } from '@/types'
 
+// ─── Conversion Funnel Data ───
+
+interface FunnelStep {
+  name: string
+  value: number
+  fill: string
+}
+
+function buildFunnelData(
+  totalAccounts: number,
+  activeAccounts: number,
+  dailyData?: DailyUsageStat[],
+  modelData?: ModelUsageStat[],
+): FunnelStep[] {
+  const activeDevicesToday = dailyData?.length
+    ? dailyData.reduce((s, d) => s + d.unique_devices, 0)
+    : 0
+  const activeModels = modelData?.filter((m) => m.request_count > 0).length ?? 0
+
+  return [
+    { name: '注册用户', value: totalAccounts, fill: '#8c8c8c' },
+    { name: '活跃用户', value: activeAccounts, fill: '#863bff' },
+    { name: '今日使用', value: Math.max(activeDevicesToday, 0), fill: '#47bfff' },
+    { name: '使用多模型', value: activeModels, fill: '#10b981' },
+  ]
+}
+
+// ─── Daily Trend Bar Data ───
+
+interface DailyTrend {
+  day: string
+  requests: number
+  inputTokens: number
+  outputTokens: number
+}
+
+function buildDailyTrend(data?: DailyUsageStat[]): DailyTrend[] {
+  if (!data) return []
+  return data.map((d) => ({
+    day: d.day.slice(5), // MM-DD
+    requests: d.request_count,
+    inputTokens: Math.round(d.input_tokens / 1000), // K tokens
+    outputTokens: Math.round(d.output_tokens / 1000),
+  }))
+}
+
+// ─── Main Component ───
+
 export default function Usage() {
   const [days, setDays] = useState(30)
 
@@ -31,6 +84,11 @@ export default function Usage() {
     queryFn: ({ signal }) => telemetryService.modelStats({}, signal),
   })
 
+  const { data: dashboardStats } = useQuery({
+    queryKey: ['stats-dashboard'],
+    queryFn: ({ signal }) => statsService.dashboard(signal),
+  })
+
   if (dailyError) {
     return (
       <>
@@ -43,6 +101,12 @@ export default function Usage() {
   const totalRequests = dailyData?.reduce((s, d) => s + d.request_count, 0) ?? 0
   const totalTokens = dailyData?.reduce((s, d) => s + d.input_tokens + d.output_tokens, 0) ?? 0
 
+  const totalAccounts = dashboardStats?.total_accounts ?? 0
+  const activeAccounts = dashboardStats?.active_accounts ?? 0
+
+  const funnelData = buildFunnelData(totalAccounts, activeAccounts, dailyData, modelData)
+  const trendData = buildDailyTrend(dailyData)
+
   const dailyColumns: ProColumns<DailyUsageStat>[] = [
     { title: '日期', dataIndex: 'day', width: 120 },
     {
@@ -104,7 +168,7 @@ export default function Usage() {
     <div>
       <PageHeader
         title="用量统计"
-        description="查看模型使用情况和 Token 消耗"
+        description="查看模型使用情况、Token 消耗和用户转化"
         actions={
           <Select
             value={days}
@@ -121,7 +185,7 @@ export default function Usage() {
 
       {/* Summary Cards */}
       <Row gutter={[16, 16]} className="mb-6">
-        <Col xs={24} sm={12}>
+        <Col xs={24} sm={12} md={6}>
           <Card className="hover:shadow-md transition-shadow duration-200">
             <Statistic
               title={
@@ -135,7 +199,7 @@ export default function Usage() {
             />
           </Card>
         </Col>
-        <Col xs={24} sm={12}>
+        <Col xs={24} sm={12} md={6}>
           <Card className="hover:shadow-md transition-shadow duration-200">
             <Statistic
               title={
@@ -149,6 +213,100 @@ export default function Usage() {
             />
           </Card>
         </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card className="hover:shadow-md transition-shadow duration-200">
+            <Statistic
+              title={
+                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                  注册用户
+                </span>
+              }
+              value={totalAccounts}
+              prefix={<UserOutlined style={{ color: '#10b981' }} />}
+              valueStyle={{ fontWeight: 600, color: '#10b981' }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card className="hover:shadow-md transition-shadow duration-200">
+            <Statistic
+              title={
+                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                  活跃用户
+                </span>
+              }
+              value={activeAccounts}
+              prefix={<TeamOutlined style={{ color: '#f59e0b' }} />}
+              valueStyle={{ fontWeight: 600, color: '#f59e0b' }}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Conversion Funnel + Daily Trend */}
+      <Row gutter={[16, 16]} className="mb-6">
+        <Col xs={24} lg={10}>
+          <Card
+            title={
+              <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+                用户转化漏斗
+              </span>
+            }
+            size="small"
+          >
+            <ResponsiveContainer width="100%" height={260}>
+              <FunnelChart>
+                <Tooltip
+                  formatter={(value: number) => [value.toLocaleString(), '数量']}
+                />
+                <Funnel
+                  dataKey="value"
+                  data={funnelData}
+                  isAnimationActive
+                >
+                  <LabelList
+                    position="right"
+                    dataKey="name"
+                    fill="#555"
+                    stroke="none"
+                    fontSize={12}
+                  />
+                </Funnel>
+              </FunnelChart>
+            </ResponsiveContainer>
+          </Card>
+        </Col>
+        <Col xs={24} lg={14}>
+          <Card
+            title={
+              <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+                每日趋势
+              </span>
+            }
+            size="small"
+          >
+            <ResponsiveContainer width="100%" height={260}>
+              <BarChart data={trendData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+                <XAxis dataKey="day" tick={{ fontSize: 11 }} />
+                <YAxis tick={{ fontSize: 11 }} />
+                <Tooltip
+                  formatter={(value: number, name: string) => {
+                    const labels: Record<string, string> = {
+                      requests: '请求数',
+                      inputTokens: '输入 Token(K)',
+                      outputTokens: '输出 Token(K)',
+                    }
+                    return [value.toLocaleString(), labels[name] ?? name]
+                  }}
+                />
+                <Bar dataKey="requests" fill="#863bff" radius={[4, 4, 0, 0]} barSize={8} />
+                <Bar dataKey="inputTokens" fill="#47bfff" radius={[4, 4, 0, 0]} barSize={8} />
+                <Bar dataKey="outputTokens" fill="#10b981" radius={[4, 4, 0, 0]} barSize={8} />
+              </BarChart>
+            </ResponsiveContainer>
+          </Card>
+        </Col>
       </Row>
 
       {/* Daily Stats */}