pangolin/design/flutter/widgets/onboarding_screen.dart

// onboarding_screen.dart — 首次引导页雏形(3 屏)
// 对应 React UI Kit 的 Onboarding / DOnboarding。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
import 'pangolin_icons.dart';
import 'pangolin_button.dart';

class OnboardingStep {
  const OnboardingStep({required this.icon, required this.title, required this.body, required this.cta, this.tint, this.tintBg});
  final IconData icon;
  final String title, body, cta;
  final Color? tint, tintBg;
}

class OnboardingScreen extends StatefulWidget {
  const OnboardingScreen({super.key, required this.onDone, this.steps});
  final VoidCallback onDone;
  final List<OnboardingStep>? steps; // 不传则用默认中文 3 屏

  @override
  State<OnboardingScreen> createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  int _i = 0;
  final _pager = PageController();

  List<OnboardingStep> _defaults(PangolinScheme c) => [
        OnboardingStep(icon: PangolinIcons.globe, title: '一键连接全球', body: '80+ 节点,智能选择最快线路,稳定不掉线。', cta: '下一步'),
        OnboardingStep(icon: PangolinIcons.shield, title: '授权网络配置', body: '系统会请求添加一个网络配置,用于建立加密隧道。', cta: '允许并继续'),
        OnboardingStep(icon: PangolinIcons.shieldCheck, title: '安全 · 无日志', body: '端到端加密,我们不记录你的任何浏览数据。', cta: '开始使用',
            tint: c.success, tintBg: c.successSubtle),
      ];

  @override
  void dispose() { _pager.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    final c = context.pangolin;
    final steps = widget.steps ?? _defaults(c);
    final last = _i == steps.length - 1;

    return Scaffold(
      backgroundColor: c.bg,
      body: SafeArea(
        child: Column(children: [
          // skip
          Align(
            alignment: Alignment.centerRight,
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: TextButton(onPressed: widget.onDone, child: Text('跳过', style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
            ),
          ),
          Expanded(
            child: PageView.builder(
              controller: _pager,
              itemCount: steps.length,
              onPageChanged: (v) => setState(() => _i = v),
              itemBuilder: (_, idx) {
                final s = steps[idx];
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 32),
                  child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                    Container(
                      width: 120, height: 120,
                      decoration: BoxDecoration(color: s.tintBg ?? c.accentSubtle, shape: BoxShape.circle),
                      child: Icon(s.icon, size: 52, color: s.tint ?? c.accent),
                    ),
                    const SizedBox(height: 28),
                    Text(s.title, textAlign: TextAlign.center, style: PangolinText.h1.copyWith(color: c.fg1, fontSize: 26)),
                    const SizedBox(height: 12),
                    Text(s.body, textAlign: TextAlign.center, style: PangolinText.body.copyWith(color: c.fg2, height: 1.6)),
                  ]),
                );
              },
            ),
          ),
          // dots
          Row(mainAxisAlignment: MainAxisAlignment.center, children: List.generate(steps.length, (k) {
            final on = k == _i;
            return AnimatedContainer(
              duration: PangolinMotion.base, curve: PangolinMotion.easeOut,
              width: on ? 22 : 7, height: 7, margin: const EdgeInsets.symmetric(horizontal: 4),
              decoration: BoxDecoration(color: on ? c.accent : c.borderStrong, borderRadius: BorderRadius.circular(PangolinRadius.full)),
            );
          })),
          Padding(
            padding: const EdgeInsets.fromLTRB(28, 22, 28, 26),
            child: PangolinButton(
              label: steps[_i].cta, expand: true,
              onPressed: () {
                if (last) { widget.onDone(); }
                else { _pager.nextPage(duration: PangolinMotion.base, curve: PangolinMotion.easeOut); }
              },
            ),
          ),
        ]),
      ),
    );
  }
}