feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)

design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-11 23:57:57 +08:00
parent 3ae96ef229
commit a642bf16a2
85 changed files with 19946 additions and 0 deletions
@@ -0,0 +1,112 @@
+// plan_card.dart — 套餐卡(免费 / 专业渐变高亮 / 团队)
+// 对应 React UI Kit 的 PlanCard / PlansScreen。
+import 'package:flutter/material.dart';
+import '../pangolin_theme.dart';
+import 'pangolin_icons.dart';
+
+class PlanCard extends StatelessWidget {
+  const PlanCard({
+    super.key,
+    required this.name,
+    required this.price,
+    required this.period,
+    required this.features,
+    required this.ctaLabel,
+    this.featured = false,
+    this.isCurrent = false,
+    this.popularLabel,
+    this.onPressed,
+  });
+
+  final String name, price, period, ctaLabel;
+  final List<String> features;
+  final bool featured, isCurrent;
+  final String? popularLabel;
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final onCard = featured ? PangolinColors.white : c.fg1;
+    final subColor = featured ? PangolinColors.white.withOpacity(0.92) : c.fg2;
+
+    final card = Container(
+      padding: const EdgeInsets.fromLTRB(20, 22, 20, 20),
+      decoration: BoxDecoration(
+        gradient: featured
+            ? const LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [PangolinColors.clay600, PangolinColors.clay800])
+            : null,
+        color: featured ? null : c.surface,
+        border: featured ? null : Border.all(color: c.border),
+        borderRadius: BorderRadius.circular(PangolinRadius.xl),
+        boxShadow: featured ? PangolinShadow.md : PangolinShadow.sm,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(name, style: PangolinText.sm.copyWith(color: featured ? PangolinColors.white.withOpacity(0.85) : c.fg2, fontWeight: FontWeight.w600)),
+          const SizedBox(height: 6),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: TextBaseline.alphabetic,
+            children: [
+              Text(price, style: PangolinText.display.copyWith(color: onCard, fontSize: 30)),
+              Text(period, style: PangolinText.caption.copyWith(color: subColor, fontSize: 13)),
+            ],
+          ),
+          const SizedBox(height: 16),
+          ...features.map((f) => Padding(
+                padding: const EdgeInsets.only(bottom: 9),
+                child: Row(children: [
+                  Icon(PangolinIcons.check, size: 15, color: featured ? PangolinColors.white : c.success),
+                  const SizedBox(width: 9),
+                  Expanded(child: Text(f, style: PangolinText.sm.copyWith(color: subColor, fontSize: 13))),
+                ]),
+              )),
+          const SizedBox(height: 8),
+          SizedBox(
+            width: double.infinity,
+            child: Material(
+              color: featured ? PangolinColors.white : (isCurrent ? Colors.transparent : c.accent),
+              shape: StadiumBorder(side: isCurrent ? BorderSide(color: c.borderStrong, width: 1.5) : BorderSide.none),
+              clipBehavior: Clip.antiAlias,
+              child: InkWell(
+                onTap: isCurrent ? null : onPressed,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 12),
+                  child: Center(
+                    child: Text(ctaLabel,
+                        style: PangolinText.sm.copyWith(
+                          fontWeight: FontWeight.w700,
+                          fontSize: 14,
+                          color: featured ? PangolinColors.clay700 : (isCurrent ? c.fg2 : PangolinColors.white),
+                        )),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+
+    if (popularLabel == null) return card;
+    // 带「最受欢迎」浮标
+    return Stack(clipBehavior: Clip.none, children: [
+      card,
+      Positioned(
+        top: -10,
+        left: 0,
+        right: 0,
+        child: Center(
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 3),
+            decoration: BoxDecoration(color: PangolinColors.white, borderRadius: BorderRadius.circular(PangolinRadius.full), boxShadow: PangolinShadow.sm),
+            child: Text(popularLabel!, style: PangolinText.caption.copyWith(color: PangolinColors.clay700, fontWeight: FontWeight.w700, fontSize: 11)),
+          ),
+        ),
+      ),
+    ]);
+  }
+}