526e7f2f33
基于 design/flutter/ 起步包在 client/ 下建立 Flutter 工程:
- pubspec.yaml:flutter_svg / lucide_icons / google_fonts 依赖;
SVG 资产注册;字体由 google_fonts 运行时加载,无需本地 ttf
- lib/pangolin_theme.dart:完整设计令牌(色阶 / 间距 / 圆角 /
动效 / 文字阶),PangolinText 改用 GoogleFonts getter,
PangolinTheme.light / .dark 开箱即用
- lib/main.dart:runApp + 明暗主题 + 登录 → 引导 → 主框架 RootFlow
- lib/widgets/:全套组件雏形
pangolin_icons Lucide 图标映射
pangolin_button 胶囊按钮四态
country_code 国家码块 + 信号条
status_pill 色点胶囊
connect_button 核心连接键三态(off/connecting/on + 动画)
server_tile 服务器列表行
plan_card 套餐卡(专业版渐变高亮)
auth_screen 登录 / 注册(邮箱验证码 + 设密码)
onboarding_screen 首次引导 PageView(3 屏可滑动 + 进度点)
home_shell 底部 4 Tab(连接/节点/统计/账户 + 状态机)
account_screens 套餐选择 / 设备管理 / 兑换 / 联系我们
pangolin_logo PangolinMark / BrandLockup / AppIcon(SVG)
- assets/:logo-mark / logo-mark-white / logo-wordmark / app-icon(SVG)
- android/:Kotlin 主 Activity + Manifest + Gradle 配置
- ios/:Runner.xcodeproj + xcscheme + Podfile + AppDelegate + storyboard
运行方式(cd client/):
flutter pub get && flutter run
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
2.0 KiB
Dart
67 lines
2.0 KiB
Dart
// pangolin_button.dart — 胶囊按钮(primary / secondary / ghost / danger)
|
|
import 'package:flutter/material.dart';
|
|
import '../pangolin_theme.dart';
|
|
|
|
enum PangolinButtonVariant { primary, secondary, ghost, danger }
|
|
|
|
class PangolinButton extends StatelessWidget {
|
|
const PangolinButton({
|
|
super.key,
|
|
required this.label,
|
|
this.onPressed,
|
|
this.icon,
|
|
this.variant = PangolinButtonVariant.primary,
|
|
this.expand = false,
|
|
});
|
|
|
|
final String label;
|
|
final VoidCallback? onPressed;
|
|
final IconData? icon;
|
|
final PangolinButtonVariant variant;
|
|
final bool expand;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final c = context.pangolin;
|
|
final disabled = onPressed == null;
|
|
|
|
late final Color bg, fg;
|
|
Border? border;
|
|
switch (variant) {
|
|
case PangolinButtonVariant.primary:
|
|
bg = c.accent; fg = c.fgOnAccent; break;
|
|
case PangolinButtonVariant.secondary:
|
|
bg = c.surface; fg = c.fg1; border = Border.all(color: c.borderStrong, width: 1.5); break;
|
|
case PangolinButtonVariant.ghost:
|
|
bg = Colors.transparent; fg = c.accent; break;
|
|
case PangolinButtonVariant.danger:
|
|
bg = c.dangerSubtle; fg = c.danger; break;
|
|
}
|
|
|
|
final child = Row(
|
|
mainAxisSize: expand ? MainAxisSize.max : MainAxisSize.min,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
if (icon != null) ...[Icon(icon, size: 18, color: fg), const SizedBox(width: 8)],
|
|
Text(label, style: PangolinText.sm.copyWith(color: fg, fontWeight: FontWeight.w600, fontSize: 15)),
|
|
],
|
|
);
|
|
|
|
return Opacity(
|
|
opacity: disabled ? 0.45 : 1,
|
|
child: Material(
|
|
color: bg,
|
|
shape: StadiumBorder(side: border?.top ?? BorderSide.none),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: InkWell(
|
|
onTap: onPressed,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 13),
|
|
child: child,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|