wangjia
f97ae8186b
对照 design/ui_kits mobile+tablet 原型逐屏补齐 Flutter 客户端: - l10n 资源层(strings_zh/en,单显)+ Riverpod 状态层(连接状态机/免费额度/ 节点选择/语言/主题),UI 与数据解耦,mock 数据接 API 不动 UI。 - 连接键严格三态(off 虚线轨道环 / connecting 旋转弧 / on 满环+计时+光晕), 状态来自 connectionProvider,点击只派发事件——禁止乐观显示。 - 节点页置顶「智能选择」推荐卡(clay 渐变 zap + 推荐胶囊,默认选中); 免费额度卡(剩余分钟+进度条 ≤3 分钟切 warning + 看广告解锁变绿)。 - Tab 左右滑动切换(手势竞技场仲裁,子页滚动不误触发,200ms 方向感知滑入)。 - iPad/宽屏 ≥900 LayoutBuilder 切侧栏分栏(导航行高 ≥48,连接页双栏/节点双列网格), 复用同一批原子组件,不 fork 页面。 - 语义 token 零硬编码;文案全部走 l10n;套餐数字对齐 §7;无支付表单/emoji 国旗。 - CI 红线词扫描扩展到 client/lib;新增 Flutter analyze+test CI 任务。 - 测试:连接状态机/额度/节点单测、连接键三态与卡片组件测试、 golden(连接键三态/推荐卡/额度卡 × 明暗)。 Co-Authored-By: Claude Opus 4.8 <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),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 顶栏品牌锁版:标记 + 品牌名(文案由 l10n 传入,单显)
|
|
class PangolinBrandLockup extends StatelessWidget {
|
|
const PangolinBrandLockup({super.key, required this.brand, this.markSize = 26});
|
|
final String brand;
|
|
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(brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
|
|
]);
|
|
}
|
|
}
|