feat(client): 免费版连接倒计时 + 到点切断 + 灰按钮 + 看广告加时(#21 前端)

四端共享 Dart 实现,配合 #21 后端账户级卡控:

- me.dart: 加 quota_cap_min(当日总额度 = daily + 看广告 bonus,进度条分母)。
- quota_provider: total 取 quotaCapMin;isExhausted;markExhausted(倒计时归零本地置耗尽
  + 登录态拉 me 校准);watchAd() async 调 /ads/unlock(占位 ad_token=uuid)→ 刷新 me,返回 granted。
- connection_provider: 连接时锁定 _freeRemainingSec(会员 null 不倒计时);复用 elapsed 计时器
  每 tick 算 freeCountdown,归零 → _onFreeQuotaExhausted(主动切断不报节点异常 + markExhausted);
  倒计时用墙上时钟(后台漏跳回前台补上、准时切);连接遇后端 QUOTA_EXHAUSTED 兜底置耗尽。
- connect_button: enabled/onDisabledTap —— 额度耗尽 off 态灰化(锁图标),点击弹加时。
- quota_card: 三态(连接倒计时 mm:ss / 未连接剩余分钟 / 耗尽今日已用完);移动「看广告加时」、桌面「升级会员」。
- ad_reward_dialog(新): 移动端占位广告(播放中→3s→加时→奖励);桌面版硬 10 分钟提示去移动端/升级。
- l10n(zh/en): 倒计时/已用完/看广告加时/占位广告/桌面升级 双语。
- 测试: quota isExhausted/markExhausted;连接倒计时归零自动切断+置耗尽(注入时钟);
  额度卡三态 widget;/me 契约含 quota_cap_min;golden 更新(Linux 权威基线 quota_low/exhausted)。
- 文档: docs/free-quota-ad.html + 登记 docs/index.html。

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

client/lib/widgets/ad_reward_dialog.dart

@@ -0,0 +1,156 @@
+// ad_reward_dialog.dart — 免费额度耗尽后的「加时」入口(占位广告流程 + 桌面升级提示)
+//
+// 移动端:弹占位广告(「广告播放中…」→ 3s 假播放 → 调 /v1/ads/unlock 加时 → 显示奖励)。
+// 桌面端(Windows/macOS):免费版硬 10 分钟/天不可延,无广告——弹「去移动端看广告或升级」。
+// 接真广告 SDK(AdMob 激励视频)时,只需把 onWatch 换成「真播完再回调」即可,UI 不变。
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../l10n/app_text.dart';
+import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
+import '../state/quota_provider.dart';
+import 'pangolin_icons.dart';
+
+/// 展示加时流程。isDesktop=true 走升级提示(无广告),否则走占位广告加时。
+Future<void> showQuotaAdFlow(BuildContext context, WidgetRef ref, {required bool isDesktop}) async {
+  final t = ref.read(appTextProvider);
+  if (isDesktop) {
+    await showDialog<void>(context: context, builder: (_) => _DesktopUpgradeDialog(t: t));
+    return;
+  }
+  await showDialog<void>(
+    context: context,
+    barrierDismissible: false,
+    builder: (_) => _PlaceholderAdDialog(
+      t: t,
+      onWatch: () => ref.read(quotaProvider.notifier).watchAd(),
+    ),
+  );
+}
+
+/// 桌面版:免费硬 10 分钟不可延,提示去移动端加时或升级会员。
+class _DesktopUpgradeDialog extends StatelessWidget {
+  const _DesktopUpgradeDialog({required this.t});
+  final AppText t;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return AlertDialog(
+      backgroundColor: c.surface,
+      title: Text(t.quotaDesktopTitle,
+          style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+      content: Text(t.quotaDesktopBody, style: PangolinText.sm.copyWith(color: c.fg2)),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(),
+          child: Text(t.gotIt, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700)),
+        ),
+      ],
+    );
+  }
+}
+
+enum _AdPhase { playing, done, failed }
+
+/// 移动端占位激励广告:播放中 → 加时成功/失败。成功后短暂展示奖励再自动关闭。
+class _PlaceholderAdDialog extends StatefulWidget {
+  const _PlaceholderAdDialog({required this.t, required this.onWatch});
+  final AppText t;
+  final Future<int?> Function() onWatch;
+
+  @override
+  State<_PlaceholderAdDialog> createState() => _PlaceholderAdDialogState();
+}
+
+class _PlaceholderAdDialogState extends State<_PlaceholderAdDialog> {
+  _AdPhase _phase = _AdPhase.playing;
+  int _granted = 0;
+  Timer? _closeTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    _run();
+  }
+
+  Future<void> _run() async {
+    // 占位「播放」3s(接真 SDK 后由激励视频完成回调替代)。
+    await Future<void>.delayed(const Duration(seconds: 3));
+    if (!mounted) return;
+    final granted = await widget.onWatch();
+    if (!mounted) return;
+    setState(() {
+      if (granted != null && granted > 0) {
+        _phase = _AdPhase.done;
+        _granted = granted;
+      } else {
+        _phase = _AdPhase.failed;
+      }
+    });
+    if (_phase == _AdPhase.done) {
+      _closeTimer = Timer(const Duration(milliseconds: 1300), () {
+        if (mounted) Navigator.of(context).pop();
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _closeTimer?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final t = widget.t;
+
+    Widget body;
+    switch (_phase) {
+      case _AdPhase.playing:
+        body = Column(mainAxisSize: MainAxisSize.min, children: [
+          SizedBox(
+            width: 34,
+            height: 34,
+            child: CircularProgressIndicator(color: c.accent, strokeWidth: 3),
+          ),
+          const SizedBox(height: 16),
+          Text(t.adPlaying, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
+        ]);
+      case _AdPhase.done:
+        body = Column(mainAxisSize: MainAxisSize.min, children: [
+          Icon(PangolinIcons.checkCircle, size: 40, color: c.success),
+          const SizedBox(height: 14),
+          Text(t.adRewarded(_granted),
+              style: PangolinText.body.copyWith(color: c.success, fontWeight: FontWeight.w700)),
+        ]);
+      case _AdPhase.failed:
+        body = Column(mainAxisSize: MainAxisSize.min, children: [
+          Icon(PangolinIcons.alertTriangle, size: 36, color: c.danger),
+          const SizedBox(height: 14),
+          Text(t.adFailed, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
+          const SizedBox(height: 14),
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(),
+            child: Text(t.gotIt, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700)),
+          ),
+        ]);
+    }
+
+    return Dialog(
+      backgroundColor: c.surface,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(PangolinRadius.lg)),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 28),
+        child: AnimatedSize(
+          duration: PangolinMotion.base,
+          child: body,
+        ),
+      ),
+    );
+  }
+}

client/lib/widgets/connect_button.dart

@@ -24,11 +24,19 @@ class ConnectButton extends StatefulWidget {
     required this.secureLabel,
     this.elapsed = Duration.zero,
     this.size = 208,
+    this.enabled = true,
+    this.onDisabledTap,
   });
 
   final VpnPhase phase;
   final VoidCallback onTap;
 
+  /// 是否可点。免费额度耗尽时置 false → 灰化不可连,点击走 onDisabledTap。
+  final bool enabled;
+
+  /// 灰化态被点击的回调(如弹看广告加时/升级)。enabled=false 时生效。
+  final VoidCallback? onDisabledTap;
+
   /// off 态圆内文字(如「点击连接」/「CONNECT」)。
   final String offLabel;
 
@@ -55,18 +63,26 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
   Widget build(BuildContext context) {
     final c = context.pangolin;
     final s = widget.phase;
+    // 免费额度耗尽:off 态灰化不可连(锁图标 + 柔和阴影),点击走 onDisabledTap。
+    final disabled = !widget.enabled && s == VpnPhase.off;
 
-    final Color fill = switch (s) {
-      VpnPhase.off => c.bgSubtle,
-      VpnPhase.connecting => c.accent,
-      VpnPhase.on => c.success,
-    };
-    final Color fg = s == VpnPhase.off ? c.accent : PangolinColors.white;
-    final IconData icon = switch (s) {
-      VpnPhase.off => PangolinIcons.power,
-      VpnPhase.connecting => PangolinIcons.loader,
-      VpnPhase.on => PangolinIcons.shieldCheck,
-    };
+    final Color fill = disabled
+        ? c.bgSubtle
+        : switch (s) {
+            VpnPhase.off => c.bgSubtle,
+            VpnPhase.connecting => c.accent,
+            VpnPhase.on => c.success,
+          };
+    final Color fg = disabled
+        ? c.fg3
+        : (s == VpnPhase.off ? c.accent : PangolinColors.white);
+    final IconData icon = disabled
+        ? PangolinIcons.lock
+        : switch (s) {
+            VpnPhase.off => PangolinIcons.power,
+            VpnPhase.connecting => PangolinIcons.loader,
+            VpnPhase.on => PangolinIcons.shieldCheck,
+          };
 
     // off 用柔和阴影;connecting/on 增加同色光晕环(box-shadow,不动背景计算)。
     final List<BoxShadow> glow = s == VpnPhase.off
@@ -84,7 +100,7 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
       button: true,
       label: widget.offLabel,
       child: GestureDetector(
-        onTap: widget.onTap,
+        onTap: disabled ? widget.onDisabledTap : widget.onTap,
         child: AnimatedContainer(
           duration: PangolinMotion.slow,
           curve: PangolinMotion.easeOut,

client/lib/widgets/quota_card.dart

@@ -1,7 +1,10 @@
-// quota_card.dart — 免费版每日额度卡(纯展示)
+// quota_card.dart — 免费版每日额度卡
 //
-// 今日剩余分钟 + 进度条(≤3 分钟切 warning 色)+「看广告开始使用」;
-// 解锁后变绿「已解锁 · 今日可用」。状态由 quota_provider 注入,本地仅展示。
+// 三态展示(额度全账户共享):
+//   ① 连接中(countdown != null):显示剩余倒计时 mm:ss + 进度条随之收缩。
+//   ② 未连接·有余额:显示今日剩余分钟 + 进度条;移动端附「看广告加时」。
+//   ③ 未连接·已耗尽:显示「今日已用完」+ 移动端「看广告加时」/ 桌面「升级会员」。
+// 状态由 quota_provider(剩余)+ connection_provider(倒计时)注入,本地仅展示。
 import 'package:flutter/material.dart';
 
 import '../l10n/app_text.dart';
@@ -10,16 +13,55 @@ import '../state/quota_provider.dart';
 import 'pangolin_icons.dart';
 
 class QuotaCard extends StatelessWidget {
-  const QuotaCard({super.key, required this.quota, required this.t, required this.onWatchAd});
+  const QuotaCard({
+    super.key,
+    required this.quota,
+    required this.t,
+    required this.onWatchAd,
+    this.countdown,
+    this.isDesktop = false,
+  });
 
   final FreeQuotaState quota;
   final AppText t;
+
+  /// 额度耗尽时的加时入口(移动端占位广告 / 桌面升级提示)。
   final VoidCallback onWatchAd;
 
+  /// 连接期剩余倒计时;null = 未连接(展示今日剩余分钟)。
+  final Duration? countdown;
+
+  /// 桌面端(Windows/macOS):免费硬 10 分钟不可延,不显示看广告按钮。
+  final bool isDesktop;
+
+  static String _mmss(Duration d) {
+    final m = d.inMinutes.remainder(60).toString().padLeft(2, '0');
+    final s = d.inSeconds.remainder(60).toString().padLeft(2, '0');
+    return '$m:$s';
+  }
+
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final barColor = quota.isLow ? c.warning : c.accent;
+    final connected = countdown != null;
+    final exhausted = quota.isExhausted && !connected;
+
+    // 进度与主值:连接期用倒计时,未连接用剩余分钟。
+    final double progress;
+    final String label;
+    final String value;
+    if (connected) {
+      final totalSec = quota.totalMinutes * 60;
+      progress = totalSec == 0 ? 0 : (countdown!.inSeconds / totalSec).clamp(0.0, 1.0);
+      label = t.quotaLeftLabel;
+      value = _mmss(countdown!);
+    } else {
+      progress = quota.progress;
+      label = exhausted ? t.quotaUsedUp : t.quotaToday;
+      value = exhausted ? '' : '${quota.remainingMinutes} ${t.minutes}';
+    }
+    final low = connected ? countdown!.inMinutes < 3 : quota.isLow;
+    final barColor = exhausted ? c.danger : (low ? c.warning : c.accent);
 
     return Container(
       padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
@@ -33,13 +75,18 @@ class QuotaCard extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           Row(children: [
-            Icon(PangolinIcons.clock, size: 15, color: c.accent),
+            Icon(PangolinIcons.clock, size: 15, color: exhausted ? c.danger : c.accent),
             const SizedBox(width: 7),
-            Text(t.quotaToday,
-                style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 12)),
-            const SizedBox(width: 7),
-            Text('${quota.remainingMinutes} ${t.minutes}',
-                style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w600)),
+            Flexible(
+              child: Text(label,
+                  overflow: TextOverflow.ellipsis,
+                  style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 12)),
+            ),
+            if (value.isNotEmpty) ...[
+              const SizedBox(width: 7),
+              Text(value,
+                  style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w600)),
+            ],
             const Spacer(),
             Container(
               padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
@@ -49,7 +96,7 @@ class QuotaCard extends StatelessWidget {
             ),
           ]),
           const SizedBox(height: 9),
-          // 进度条:剩余比例;≤3 分钟切 warning 色(满宽轨道 + 比例填充)
+          // 进度条:剩余比例;≤3 分钟 warning、耗尽 danger(满宽轨道 + 比例填充)。
           ClipRRect(
             borderRadius: BorderRadius.circular(3),
             child: SizedBox(
@@ -58,7 +105,7 @@ class QuotaCard extends StatelessWidget {
                 Positioned.fill(child: ColoredBox(color: c.bgSubtle)),
                 FractionallySizedBox(
                   alignment: Alignment.centerLeft,
-                  widthFactor: quota.progress,
+                  widthFactor: progress,
                   child: AnimatedContainer(
                     duration: PangolinMotion.base,
                     curve: PangolinMotion.easeOut,
@@ -68,30 +115,25 @@ class QuotaCard extends StatelessWidget {
               ]),
             ),
           ),
-          const SizedBox(height: 11),
-          if (quota.adUnlocked)
-            SizedBox(
-              height: 38,
-              child: Center(
-                child: Row(mainAxisSize: MainAxisSize.min, children: [
-                  Icon(PangolinIcons.checkCircle, size: 16, color: c.success),
-                  const SizedBox(width: 7),
-                  Text(t.adUnlocked,
-                      style: PangolinText.sm.copyWith(color: c.success, fontWeight: FontWeight.w700, fontSize: 13)),
-                ]),
-              ),
-            )
-          else
-            _WatchAdButton(t: t, onTap: onWatchAd),
+          // 加时按钮:未连接时显示。移动端「看广告加时」;桌面仅耗尽时给「升级会员」。
+          if (!connected && (!isDesktop || exhausted)) ...[
+            const SizedBox(height: 11),
+            _ActionButton(
+              label: isDesktop ? t.upgrade : t.watchAdMore,
+              icon: isDesktop ? PangolinIcons.zap : PangolinIcons.playCircle,
+              onTap: onWatchAd,
+            ),
+          ],
         ],
       ),
     );
   }
 }
 
-class _WatchAdButton extends StatelessWidget {
-  const _WatchAdButton({required this.t, required this.onTap});
-  final AppText t;
+class _ActionButton extends StatelessWidget {
+  const _ActionButton({required this.label, required this.icon, required this.onTap});
+  final String label;
+  final IconData icon;
   final VoidCallback onTap;
 
   @override
@@ -107,9 +149,9 @@ class _WatchAdButton extends StatelessWidget {
           height: 38,
           child: Center(
             child: Row(mainAxisSize: MainAxisSize.min, children: [
-              Icon(PangolinIcons.playCircle, size: 16, color: c.accent),
+              Icon(icon, size: 16, color: c.accent),
               const SizedBox(width: 7),
-              Text(t.watchAd,
+              Text(label,
                   style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700, fontSize: 13)),
             ]),
           ),