Files
pangolin/client/lib/widgets/ad_reward_dialog.dart
wangjia b461a476a2 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>
2026-07-02 00:33:21 +08:00

157 lines
5.2 KiB
Dart

// 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,
),
),
);
}
}