feat: app 端 ui 设计完成

2026-01-28 19:10:19 +08:00
commit a4e7898e94
149 changed files with 11302 additions and 0 deletions
--- a/wei_ai_app/lib/screens/profile/topup_screen.dart
+++ b/wei_ai_app/lib/screens/profile/topup_screen.dart
@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+
+class TopupScreen extends StatefulWidget {
+  const TopupScreen({super.key});
+
+  @override
+  State<TopupScreen> createState() => _TopupScreenState();
+}
+
+class _TopupScreenState extends State<TopupScreen> {
+  int _selectedPackage = 1;
+
+  final List<Map<String, dynamic>> _packages = [
+    {'points': 100, 'price': 6, 'bonus': 0},
+    {'points': 500, 'price': 28, 'bonus': 50},
+    {'points': 1000, 'price': 50, 'bonus': 150},
+    {'points': 3000, 'price': 128, 'bonus': 600},
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFF2E1065),
+      body: SafeArea(
+        child: Column(
+          children: [
+            _buildHeader(),
+            Expanded(
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _buildBalanceCard(),
+                    const SizedBox(height: 24),
+                    _buildSectionTitle('选择套餐'),
+                    const SizedBox(height: 12),
+                    ..._packages.asMap().entries.map((e) => _buildPackageCard(e.key, e.value)),
+                    const SizedBox(height: 24),
+                    _buildPayButton(),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHeader() {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(8, 8, 16, 16),
+      child: Row(
+        children: [
+          IconButton(
+            onPressed: () => Navigator.of(context).pop(),
+            icon: Icon(LucideIcons.chevronLeft, color: Colors.white.withOpacity(0.7)),
+          ),
+          const Text('立即充值', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildBalanceCard() {
+    return Container(
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(colors: [Color(0xFF7C3AED), Color(0xFF9333EA), Color(0xFFDB2777)]),
+        borderRadius: BorderRadius.circular(24),
+      ),
+      child: Row(
+        children: [
+          Icon(LucideIcons.zap, size: 32, color: Colors.white.withOpacity(0.9)),
+          const SizedBox(width: 16),
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text('当前余额', style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.8))),
+              const SizedBox(height: 4),
+              const Text('2,450', style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, fontFamily: 'monospace', color: Colors.white)),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSectionTitle(String title) {
+    return Text(
+      title,
+      style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2, color: Colors.white.withOpacity(0.4)),
+    );
+  }
+
+  Widget _buildPackageCard(int index, Map<String, dynamic> pkg) {
+    final isSelected = _selectedPackage == index;
+    return GestureDetector(
+      onTap: () => setState(() => _selectedPackage = index),
+      child: Container(
+        margin: const EdgeInsets.only(bottom: 12),
+        padding: const EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          color: isSelected ? Colors.white : Colors.white.withOpacity(0.05),
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(color: isSelected ? Colors.white : Colors.white.withOpacity(0.1), width: isSelected ? 2 : 1),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Row(
+              children: [
+                Icon(LucideIcons.zap, size: 20, color: isSelected ? const Color(0xFF9333EA) : const Color(0xFFC084FC)),
+                const SizedBox(width: 12),
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      '${pkg['points']} 积分',
+                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: isSelected ? const Color(0xFF2E1065) : Colors.white),
+                    ),
+                    if (pkg['bonus'] > 0)
+                      Text('+${pkg['bonus']} 赠送', style: TextStyle(fontSize: 12, color: isSelected ? const Color(0xFF9333EA) : const Color(0xFFC084FC))),
+                  ],
+                ),
+              ],
+            ),
+            Text('¥${pkg['price']}', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, fontFamily: 'monospace', color: isSelected ? const Color(0xFF2E1065) : Colors.white)),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildPayButton() {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(vertical: 18),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(colors: [Color(0xFFC084FC), Color(0xFFF472B6)]),
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: const Center(
+        child: Text('确认支付', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white)),
+      ),
+    );
+  }
+}