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>
59 lines
2.0 KiB
Dart
59 lines
2.0 KiB
Dart
// pangolin_logo.dart — 品牌标 / 字标 / App 图标(SVG)
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import '../pangolin_theme.dart';
|
|
|
|
const String _base = 'assets';
|
|
|
|
/// 仅标记(行走穿山甲)。深色主题自动用反白版。
|
|
class PangolinMark extends StatelessWidget {
|
|
const PangolinMark({super.key, this.size = 28, this.forceLight, this.forceDark});
|
|
final double size;
|
|
final bool? forceLight;
|
|
final bool? forceDark;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDark = forceDark ?? (forceLight == true ? false : Theme.of(context).brightness == Brightness.dark);
|
|
final asset = isDark ? '$_base/logo-mark-white.svg' : '$_base/logo-mark.svg';
|
|
return SvgPicture.asset(asset, width: size, height: size);
|
|
}
|
|
}
|
|
|
|
/// 横版字标锁版(浅背景)
|
|
class PangolinWordmark extends StatelessWidget {
|
|
const PangolinWordmark({super.key, this.height = 28});
|
|
final double height;
|
|
@override
|
|
Widget build(BuildContext context) => SvgPicture.asset('$_base/logo-wordmark.svg', height: height);
|
|
}
|
|
|
|
/// App 图标(clay 渐变圆角方 + 白色穿山甲)
|
|
class PangolinAppIcon extends StatelessWidget {
|
|
const PangolinAppIcon({super.key, this.size = 64});
|
|
final double size;
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ClipRRect(
|
|
borderRadius: BorderRadius.circular(size * 0.22),
|
|
child: SvgPicture.asset('$_base/app-icon.svg', width: size, height: size),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 顶栏品牌锁版:标记 + 「穿山甲 / Pangolin」
|
|
class PangolinBrandLockup extends StatelessWidget {
|
|
const PangolinBrandLockup({super.key, this.zh = true, this.markSize = 26});
|
|
final bool zh; final double markSize;
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final c = context.pangolin;
|
|
return Row(mainAxisSize: MainAxisSize.min, children: [
|
|
PangolinMark(size: markSize),
|
|
const SizedBox(width: 9),
|
|
Text(zh ? '穿山甲' : 'Pangolin',
|
|
style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
|
|
]);
|
|
}
|
|
}
|