feat: app 端 ui 设计完成

This commit is contained in:
liqupan
2026-01-28 19:10:19 +08:00
commit a4e7898e94
149 changed files with 11302 additions and 0 deletions

View File

@@ -0,0 +1,315 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../widgets/tab_content_layout.dart';
enum DeviceState { disconnected, connecting, connected }
class ControlScreen extends StatefulWidget {
const ControlScreen({super.key});
@override
State<ControlScreen> createState() => _ControlScreenState();
}
class _ControlScreenState extends State<ControlScreen> {
DeviceState _deviceStatus = DeviceState.disconnected;
void _connectDevice() {
setState(() => _deviceStatus = DeviceState.connecting);
Future.delayed(const Duration(milliseconds: 1500), () {
if (mounted) setState(() => _deviceStatus = DeviceState.connected);
});
}
void _disconnectDevice() {
setState(() => _deviceStatus = DeviceState.disconnected);
}
@override
Widget build(BuildContext context) {
const double bottomNavHeight = 90;
return TabContentLayout(
child: SingleChildScrollView(
padding: EdgeInsets.fromLTRB(16, 8, 16, bottomNavHeight + 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Device Card
_DeviceCard(
status: _deviceStatus,
onConnect: _connectDevice,
onDisconnect: _disconnectDevice,
),
const SizedBox(height: 16),
// Mode Selection Title
Text(
'操控模式',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.white.withOpacity(0.4),
),
),
const SizedBox(height: 12),
// Free Control Button
_ModeButton(
title: '自由操控',
subtitle: '指尖滑动控制 • 实时反馈',
icon: LucideIcons.sliders,
iconColor: const Color(0xFFC084FC),
enabled: _deviceStatus == DeviceState.connected,
onTap: () => context.push('/control/free'),
),
const SizedBox(height: 12),
// Pattern Control Button
_ModeButton(
title: '波形模式',
subtitle: '6种预设震动韵律',
icon: LucideIcons.waves,
iconColor: const Color(0xFF60A5FA),
enabled: _deviceStatus == DeviceState.connected,
onTap: () => context.push('/control/pattern'),
),
],
),
),
);
}
}
// Device Card Widget
class _DeviceCard extends StatelessWidget {
final DeviceState status;
final VoidCallback onConnect;
final VoidCallback onDisconnect;
const _DeviceCard({
required this.status,
required this.onConnect,
required this.onDisconnect,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(24),
border: Border.all(color: Colors.white.withOpacity(0.2)),
),
child: Stack(
children: [
// Background Icon
Positioned(
right: -20,
top: -20,
child: Icon(
LucideIcons.bluetooth,
size: 100,
color: Colors.white.withOpacity(0.05),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Text(
'Link-X Pro',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
if (status == DeviceState.connected) ...[
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: const Color(0xFF34D399).withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFF34D399).withOpacity(0.3)),
),
child: const Text(
'ONLINE',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Color(0xFF34D399),
),
),
),
],
],
),
const SizedBox(height: 4),
Text(
status == DeviceState.disconnected
? '设备未连接'
: status == DeviceState.connecting
? '正在搜索信号...'
: 'ID: 884-X9-01',
style: TextStyle(
fontSize: 12,
fontFamily: 'monospace',
color: Colors.white.withOpacity(0.6),
),
),
],
),
// Connect Button
GestureDetector(
onTap: status == DeviceState.connected ? onDisconnect : onConnect,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: status == DeviceState.connected
? Colors.white.withOpacity(0.1)
: status == DeviceState.connecting
? Colors.white.withOpacity(0.2)
: Colors.white,
borderRadius: BorderRadius.circular(20),
border: status == DeviceState.connected
? Border.all(color: Colors.white.withOpacity(0.1))
: null,
),
child: Text(
status == DeviceState.connected
? '断开'
: status == DeviceState.connecting
? '连接中'
: '连接设备',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: status == DeviceState.connected
? Colors.white.withOpacity(0.7)
: const Color(0xFF2E1065),
),
),
),
),
],
),
// Battery Info
if (status == DeviceState.connected) ...[
const SizedBox(height: 16),
Row(
children: [
const Icon(LucideIcons.battery, size: 16, color: Color(0xFF34D399)),
const SizedBox(width: 8),
const Text(
'85%',
style: TextStyle(
fontSize: 14,
fontFamily: 'monospace',
color: Colors.white,
),
),
],
),
],
],
),
],
),
);
}
}
// Mode Button Widget
class _ModeButton extends StatelessWidget {
final String title;
final String subtitle;
final IconData icon;
final Color iconColor;
final bool enabled;
final VoidCallback onTap;
const _ModeButton({
required this.title,
required this.subtitle,
required this.icon,
required this.iconColor,
required this.enabled,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: enabled ? onTap : null,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 300),
opacity: enabled ? 1.0 : 0.5,
child: Container(
height: 120,
padding: const EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
color: Colors.white.withOpacity(enabled ? 0.1 : 0.05),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: Colors.white.withOpacity(enabled ? 0.2 : 0.05),
),
),
child: Row(
children: [
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: iconColor.withOpacity(0.2),
shape: BoxShape.circle,
),
child: Icon(icon, size: 28, color: iconColor),
),
const SizedBox(width: 20),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
Text(
subtitle,
style: TextStyle(
fontSize: 12,
color: Colors.white.withOpacity(0.5),
),
),
],
),
],
),
),
),
);
}
}

View File

@@ -0,0 +1,205 @@
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lucide_icons/lucide_icons.dart';
class FreeControlScreen extends StatefulWidget {
const FreeControlScreen({super.key});
@override
State<FreeControlScreen> createState() => _FreeControlScreenState();
}
class _FreeControlScreenState extends State<FreeControlScreen> {
double _intensity = 0;
bool _isClimax = false;
void _handleInteraction(Offset localPosition, double height) {
final relativeY = 1 - (localPosition.dy / height).clamp(0.0, 1.0);
setState(() => _intensity = (relativeY * 100).roundToDouble());
}
void _handleClimax() {
if (_isClimax) return;
setState(() {
_isClimax = true;
_intensity = 100;
});
HapticFeedback.heavyImpact();
Future.delayed(const Duration(seconds: 3), () {
if (mounted) {
setState(() {
_isClimax = false;
_intensity = 20;
});
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF2E1065),
body: SafeArea(
child: Column(
children: [
// Header
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,
),
),
],
),
),
// Control Area
Expanded(
child: Center(
child: LayoutBuilder(
builder: (context, constraints) {
final controlHeight = constraints.maxHeight * 0.65;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onPanUpdate: (details) {
_handleInteraction(details.localPosition, controlHeight);
},
onTapDown: (details) {
_handleInteraction(details.localPosition, controlHeight);
},
child: Container(
width: 180,
height: controlHeight,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(32),
border: Border.all(color: Colors.white.withOpacity(0.2)),
),
child: Stack(
children: [
// Fill Level
Align(
alignment: Alignment.bottomCenter,
child: AnimatedContainer(
duration: const Duration(milliseconds: 50),
width: double.infinity,
height: controlHeight * (_intensity / 100),
decoration: BoxDecoration(
color: _isClimax
? Colors.red.withOpacity(0.5)
: const Color(0xFFC084FC).withOpacity(0.5),
borderRadius: BorderRadius.circular(32),
),
),
),
// Labels
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text(
'MAX',
style: TextStyle(
fontSize: 10,
fontFamily: 'monospace',
color: Colors.white.withOpacity(0.4),
),
),
),
Center(
child: Text(
_intensity.toInt().toString(),
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
fontFamily: 'monospace',
color: _isClimax ? Colors.red[200] : Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Text(
'OFF',
style: TextStyle(
fontSize: 10,
fontFamily: 'monospace',
color: Colors.white.withOpacity(0.4),
),
),
),
],
),
],
),
),
),
const SizedBox(height: 16),
Text(
'上下滑动触控板以控制强度',
style: TextStyle(
fontSize: 12,
fontFamily: 'monospace',
letterSpacing: 1,
color: Colors.white.withOpacity(0.6),
),
),
],
);
},
),
),
),
// Climax Button
Padding(
padding: const EdgeInsets.fromLTRB(24, 0, 24, 40),
child: GestureDetector(
onTap: _handleClimax,
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 18),
decoration: BoxDecoration(
color: _isClimax ? Colors.red : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: _isClimax ? Colors.red : Colors.red.withOpacity(0.5),
),
),
child: Center(
child: Text(
_isClimax ? 'MAX OUTPUT...' : '一键爆发',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: _isClimax ? Colors.white : Colors.red[300],
),
),
),
),
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,264 @@
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:fl_chart/fl_chart.dart';
class PatternControlScreen extends StatefulWidget {
const PatternControlScreen({super.key});
@override
State<PatternControlScreen> createState() => _PatternControlScreenState();
}
class _PatternControlScreenState extends State<PatternControlScreen> {
String? _activePattern;
double _globalIntensity = 50;
List<FlSpot> _waveData = List.generate(20, (i) => FlSpot(i.toDouble(), 10));
Timer? _waveTimer;
static const List<Map<String, dynamic>> _patterns = [
{'id': 'pulse', 'name': '脉冲跳动', 'icon': LucideIcons.activity, 'color': Color(0xFFC084FC)},
{'id': 'wave', 'name': '深海潮汐', 'icon': LucideIcons.waves, 'color': Color(0xFF60A5FA)},
{'id': 'climb', 'name': '登峰造极', 'icon': LucideIcons.rotateCw, 'color': Color(0xFF34D399)},
{'id': 'storm', 'name': '雷雨风暴', 'icon': LucideIcons.zap, 'color': Color(0xFFFBBF24)},
{'id': 'chaos', 'name': '随机漫步', 'icon': LucideIcons.sliders, 'color': Color(0xFFF472B6)},
{'id': 'sos', 'name': 'SOS', 'icon': LucideIcons.power, 'color': Color(0xFFF87171)},
];
@override
void initState() {
super.initState();
_startWaveAnimation();
}
void _startWaveAnimation() {
_waveTimer?.cancel();
_waveTimer = Timer.periodic(const Duration(milliseconds: 100), (_) {
if (!mounted) return;
setState(() {
final random = Random();
_waveData = [
..._waveData.sublist(1),
FlSpot(
19,
_activePattern != null
? random.nextDouble() * _globalIntensity + 20
: 10,
),
];
// Update x coordinates
for (int i = 0; i < _waveData.length; i++) {
_waveData[i] = FlSpot(i.toDouble(), _waveData[i].y);
}
});
});
}
@override
void dispose() {
_waveTimer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF2E1065),
body: SafeArea(
child: Column(
children: [
// Header
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,
),
),
],
),
),
// Wave Chart
Container(
height: 140,
margin: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(24),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: LineChart(
LineChartData(
gridData: const FlGridData(show: false),
titlesData: const FlTitlesData(show: false),
borderData: FlBorderData(show: false),
minX: 0,
maxX: 19,
minY: 0,
maxY: 100,
lineBarsData: [
LineChartBarData(
spots: _waveData,
isCurved: true,
curveSmoothness: 0.3,
color: const Color(0xFFE9D5FF),
barWidth: 3,
isStrokeCapRound: true,
dotData: const FlDotData(show: false),
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color(0xFFC084FC).withOpacity(0.6),
const Color(0xFFC084FC).withOpacity(0),
],
),
),
),
],
lineTouchData: const LineTouchData(enabled: false),
),
),
),
const SizedBox(height: 24),
// Intensity Slider
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'强度',
style: TextStyle(
fontSize: 12,
letterSpacing: 2,
color: Colors.white.withOpacity(0.6),
),
),
Text(
'${_globalIntensity.toInt()}%',
style: TextStyle(
fontSize: 12,
letterSpacing: 2,
color: Colors.white.withOpacity(0.6),
),
),
],
),
const SizedBox(height: 8),
SliderTheme(
data: SliderThemeData(
trackHeight: 8,
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10),
overlayShape: const RoundSliderOverlayShape(overlayRadius: 20),
activeTrackColor: const Color(0xFFC084FC),
inactiveTrackColor: Colors.white.withOpacity(0.2),
thumbColor: Colors.white,
),
child: Slider(
value: _globalIntensity,
min: 0,
max: 100,
onChanged: (value) => setState(() => _globalIntensity = value),
),
),
],
),
),
const SizedBox(height: 24),
// Pattern Grid
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: GridView.builder(
padding: const EdgeInsets.only(bottom: 24),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
childAspectRatio: 1.5,
),
itemCount: _patterns.length,
itemBuilder: (context, index) {
final pattern = _patterns[index];
final isActive = _activePattern == pattern['id'];
return GestureDetector(
onTap: () {
setState(() {
_activePattern = isActive ? null : pattern['id'] as String;
});
HapticFeedback.selectionClick();
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
decoration: BoxDecoration(
color: isActive ? Colors.white : Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isActive ? Colors.white : Colors.white.withOpacity(0.1),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: isActive
? const Color(0xFF2E1065).withOpacity(0.1)
: Colors.white.withOpacity(0.05),
shape: BoxShape.circle,
),
child: Icon(
pattern['icon'] as IconData,
size: 18,
color: isActive
? const Color(0xFF2E1065)
: pattern['color'] as Color,
),
),
const SizedBox(height: 8),
Text(
pattern['name'] as String,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: isActive ? const Color(0xFF2E1065) : Colors.white.withOpacity(0.6),
),
),
],
),
),
);
},
),
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,306 @@
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import '../../data/mock_data.dart';
import '../../models/character.dart';
import '../../widgets/tab_content_layout.dart';
class DiscoveryScreen extends StatefulWidget {
const DiscoveryScreen({super.key});
@override
State<DiscoveryScreen> createState() => _DiscoveryScreenState();
}
class _DiscoveryScreenState extends State<DiscoveryScreen> {
String _activeFilter = 'all';
final List<Map<String, String>> _filters = [
{'id': 'all', 'label': '全部'},
{'id': 'gentle', 'label': '温柔治愈'},
{'id': 'dom', 'label': '主导强势'},
{'id': 'wild', 'label': '反差/猎奇'},
{'id': 'voice', 'label': '语音陪聊'},
{'id': 'scenario', 'label': '场景扮演'},
{'id': 'exclusive', 'label': '会员限定'},
];
List<Character> get _filteredCharacters {
if (_activeFilter == 'all') return mockCharacters;
return mockCharacters.where((c) {
final tags = c.tags.join('');
if (_activeFilter == 'gentle') return tags.contains('治愈') || tags.contains('温顺') || tags.contains('医疗');
if (_activeFilter == 'dom') return tags.contains('强势') || tags.contains('调教') || tags.contains('指令');
if (_activeFilter == 'wild') return tags.contains('病娇') || tags.contains('神秘') || tags.contains('不稳定') || tags.contains('极乐');
if (_activeFilter == 'exclusive') return c.isLocked;
return false;
}).toList();
}
@override
Widget build(BuildContext context) {
const double bottomNavHeight = 90;
return TabContentLayout(
child: Column(
children: [
// 1. Sticky Filter Bar (simulated)
SizedBox(
height: 50,
child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16),
scrollDirection: Axis.horizontal,
itemCount: _filters.length,
separatorBuilder: (_, __) => const SizedBox(width: 12),
itemBuilder: (context, index) {
final filter = _filters[index];
final isActive = _activeFilter == filter['id'];
return Center(
child: GestureDetector(
onTap: () => setState(() => _activeFilter = filter['id']!),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: BoxDecoration(
color: isActive ? Colors.white : Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isActive ? Colors.white : Colors.white.withOpacity(0.1),
),
),
child: Text(
filter['label']!,
style: TextStyle(
fontSize: 14,
fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
color: isActive ? const Color(0xFF2E1065) : Colors.white.withOpacity(0.7),
),
),
),
),
);
},
),
),
// 2. Grid Layout
Expanded(
child: _filteredCharacters.isEmpty
? Center(child: Text('暂无匹配角色', style: TextStyle(color: Colors.white.withOpacity(0.5))))
: GridView.builder(
padding: const EdgeInsets.fromLTRB(16, 16, 16, bottomNavHeight + 20),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 4,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: _filteredCharacters.length,
itemBuilder: (context, index) {
final char = _filteredCharacters[index];
return _CharacterCard(
character: char,
onTap: () {
if (!char.isLocked) {
context.push('/interaction/${char.id}');
}
},
)
.animate()
.fadeIn(duration: 400.ms, delay: (index * 100).ms)
.scale(begin: const Offset(0.9, 0.9));
},
),
),
],
),
);
}
}
class _CharacterCard extends StatelessWidget {
final Character character;
final VoidCallback onTap;
const _CharacterCard({
required this.character,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 15,
offset: const Offset(0, 6),
),
BoxShadow(
color: const Color(0xFFA855F7).withOpacity(0.1),
blurRadius: 20,
offset: const Offset(0, 0),
),
],
),
child: Stack(
fit: StackFit.expand,
children: [
// Clipped content area - ensures all elements respect border radius
ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Stack(
fit: StackFit.expand,
children: [
// Background Image
Image.network(
character.avatar,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
color: Colors.black26,
child: const Center(child: CircularProgressIndicator(strokeWidth: 2)),
);
},
),
// Gradient Overlay
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.transparent,
Color(0xFF2E1065), // Deep purple at bottom
],
stops: [0.0, 0.5, 1.0],
),
),
),
// Top Left: Popularity/Compatibility Badge
if (!character.isLocked)
Positioned(
top: 12,
left: 12,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.4),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(LucideIcons.flame, size: 12, color: Color(0xFFF472B6)),
const SizedBox(width: 4),
Text(
'${character.compatibility}%',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
fontFamily: 'monospace',
color: Colors.white,
),
),
],
),
),
),
// Top Right: Lock Icon
if (character.isLocked)
Positioned(
top: 12,
right: 12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.4),
shape: BoxShape.circle,
border: Border.all(color: Colors.white.withOpacity(0.2)),
),
child: const Icon(LucideIcons.lock, size: 14, color: Colors.white70),
),
),
// Bottom Content
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
character.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [Shadow(color: Colors.black45, blurRadius: 2, offset: Offset(0, 1))],
),
),
const SizedBox(height: 4),
Wrap(
spacing: 4,
runSpacing: 4,
children: character.tags.take(2).map((tag) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.12),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.white.withOpacity(0.25),
width: 0.8,
),
),
child: Text(
tag,
style: const TextStyle(fontSize: 10, color: Colors.white),
),
);
}).toList(),
),
],
),
),
),
],
),
),
// Border Overlay - Outside ClipRRect to ensure full visibility
Positioned.fill(
child: IgnorePointer(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: Colors.white.withOpacity(0.15),
width: 1.2,
),
),
),
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,231 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import '../../models/character.dart';
import '../../models/message.dart';
import '../../data/mock_data.dart';
import 'voice_mode_overlay.dart';
class InteractionScreen extends StatefulWidget {
final String characterId;
const InteractionScreen({super.key, required this.characterId});
@override
State<InteractionScreen> createState() => _InteractionScreenState();
}
class _InteractionScreenState extends State<InteractionScreen> {
late Character _character;
final List<Message> _messages = List.from(mockMessages);
final TextEditingController _controller = TextEditingController();
bool _isVoiceMode = false;
@override
void initState() {
super.initState();
_character = mockCharacters.firstWhere(
(c) => c.id == widget.characterId,
orElse: () => mockCharacters.first,
);
}
void _sendMessage() {
if (_controller.text.trim().isEmpty) return;
final newUserMsg = Message(
id: DateTime.now().toString(),
text: _controller.text,
sender: MessageSender.user,
type: MessageType.text,
timestamp: DateTime.now()
);
setState(() {
_messages.add(newUserMsg);
_controller.clear();
});
// Mock AI Reply
Future.delayed(const Duration(seconds: 2), () {
if (!mounted) return;
final newAiMsg = Message(
id: DateTime.now().toString(),
text: '我收到了你的信号: "${newUserMsg.text}"。这让我感觉很好...',
sender: MessageSender.ai,
type: MessageType.text,
timestamp: DateTime.now()
);
setState(() {
_messages.add(newAiMsg);
});
});
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
flexibleSpace: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(color: Colors.black.withOpacity(0.5)),
),
),
leading: IconButton(
icon: const Icon(LucideIcons.arrowLeft, color: Colors.white),
onPressed: () => context.pop(),
),
title: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(_character.avatar),
radius: 16,
),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(_character.name, style: const TextStyle(fontSize: 16, color: Colors.white)),
Row(
children: [
Container(width: 6, height: 6, decoration: const BoxDecoration(color: Color(0xFF10B981), shape: BoxShape.circle)),
const SizedBox(width: 4),
Text('Online', style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.7))),
],
)
],
)
],
),
actions: [
IconButton(icon: const Icon(LucideIcons.moreVertical, color: Colors.white), onPressed: () {}),
],
),
body: Container(
decoration: const BoxDecoration(
color: Color(0xFF2E1065),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF2E1065), Color(0xFF0F172A)],
)
),
child: Column(
children: [
Expanded(
child: ListView.separated(
padding: const EdgeInsets.only(top: 120, bottom: 20, left: 16, right: 16),
itemCount: _messages.length,
separatorBuilder: (_, __) => const SizedBox(height: 16),
itemBuilder: (context, index) {
final msg = _messages[index];
final isMe = msg.sender == MessageSender.user;
return Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isMe ? const Color(0xFFA855F7) : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: isMe ? const Radius.circular(16) : const Radius.circular(2),
bottomRight: isMe ? const Radius.circular(2) : const Radius.circular(16),
),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Text(
msg.text,
style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.4),
),
),
);
},
),
),
// Input Area
ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom + 10,
top: 10,
left: 16,
right: 16
),
color: Colors.black.withOpacity(0.4),
child: Row(
children: [
GestureDetector(
onTap: () => setState(() => _isVoiceMode = true),
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.1),
border: Border.all(color: Colors.white.withOpacity(0.1))
),
child: const Icon(LucideIcons.phone, color: Colors.white, size: 20),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _controller,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white.withOpacity(0.05),
hintText: 'Type a message...',
hintStyle: TextStyle(color: Colors.white.withOpacity(0.3)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
),
),
const SizedBox(width: 8),
GestureDetector(
onTap: _sendMessage,
child: Container(
width: 44,
height: 44,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: [Color(0xFFA855F7), Color(0xFFEC4899)])
),
child: const Icon(LucideIcons.send, color: Colors.white, size: 20),
),
)
],
),
),
),
)
],
), // Column
), // Container
), // Scaffold
if (_isVoiceMode)
VoiceModeOverlay(
character: _character,
onClose: () => setState(() => _isVoiceMode = false),
),
],
);
}
}

View File

@@ -0,0 +1,263 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../models/character.dart';
class VoiceModeOverlay extends StatefulWidget {
final Character character;
final VoidCallback onClose;
const VoiceModeOverlay({
super.key,
required this.character,
required this.onClose,
});
@override
State<VoiceModeOverlay> createState() => _VoiceModeOverlayState();
}
class _VoiceModeOverlayState extends State<VoiceModeOverlay> with SingleTickerProviderStateMixin {
bool _isMicMuted = false;
bool _isSpeakerOn = true;
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(seconds: 2))
..repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Material(
type: MaterialType.transparency,
child: Container(
color: const Color(0xFF2E1065),
child: Stack(
children: [
// Background Image with Blur
Positioned.fill(
child: Image.network(
widget.character.avatar,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return Container(color: const Color(0xFF2E1065));
},
),
),
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
color: const Color(0xFF2E1065).withOpacity(0.8),
),
),
),
// Main Content
SafeArea(
child: Column(
children: [
// Header
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: widget.onClose,
icon: const Icon(LucideIcons.chevronLeft, color: Colors.white70),
style: IconButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0.1),
),
),
],
),
),
const Spacer(),
// Character Info & Status
Column(
children: [
Text(
widget.character.name,
style: const TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
_isMicMuted ? 'Mic Muted' : 'Listening...',
style: TextStyle(
color: Colors.white.withOpacity(0.6),
fontSize: 12,
letterSpacing: 2,
fontWeight: FontWeight.w500,
),
),
],
),
const SizedBox(height: 48),
// Avatar pulsing animation
SizedBox(
width: 200,
height: 200,
child: Stack(
alignment: Alignment.center,
children: [
if (!_isMicMuted)
AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
width: 200 * (0.8 + 0.2 * _controller.value),
height: 200 * (0.8 + 0.2 * _controller.value),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white.withOpacity(0.2 * (1 - _controller.value)),
width: 1,
),
),
);
},
),
Container(
width: 160,
height: 160,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white.withOpacity(0.3), width: 2),
boxShadow: [
BoxShadow(
color: const Color(0xFFC084FC).withOpacity(0.5),
blurRadius: 30,
spreadRadius: 0
)
],
image: DecorationImage(
image: NetworkImage(widget.character.avatar),
fit: BoxFit.cover,
),
),
),
],
),
),
const Spacer(),
// Waveform (Simulated)
SizedBox(
height: 32,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: List.generate(5, (index) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
width: 4,
height: _isMicMuted
? 4
: 10 + (20 * (index % 2 == 0 ? _controller.value : 1 - _controller.value)),
decoration: BoxDecoration(
color: Colors.white.withOpacity(_isMicMuted ? 0.2 : 0.8),
borderRadius: BorderRadius.circular(2),
),
);
}
),
);
}),
),
),
const SizedBox(height: 48),
// Bottom Controls
Padding(
padding: const EdgeInsets.symmetric(horizontal: 48.0, vertical: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Mic Toggle
IconButton(
onPressed: () => setState(() => _isMicMuted = !_isMicMuted),
icon: Icon(_isMicMuted ? LucideIcons.micOff : LucideIcons.mic),
iconSize: 24,
style: IconButton.styleFrom(
backgroundColor: _isMicMuted
? Colors.white
: Colors.white.withOpacity(0.1),
foregroundColor: _isMicMuted
? const Color(0xFF2E1065)
: Colors.white,
padding: const EdgeInsets.all(16),
minimumSize: const Size(64, 64),
),
),
// End Call
IconButton(
onPressed: widget.onClose,
icon: const Icon(LucideIcons.phoneOff),
iconSize: 32,
style: IconButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(20),
minimumSize: const Size(80, 80),
),
),
// Speaker Toggle
IconButton(
onPressed: () => setState(() => _isSpeakerOn = !_isSpeakerOn),
icon: Icon(
_isSpeakerOn ? LucideIcons.volume2 : LucideIcons.volumeX
),
iconSize: 24,
style: IconButton.styleFrom(
backgroundColor: _isSpeakerOn
? Colors.white.withOpacity(0.1)
: Colors.white.withOpacity(0.05),
foregroundColor: _isSpeakerOn
? Colors.white
: Colors.white.withOpacity(0.5),
padding: const EdgeInsets.all(16),
minimumSize: const Size(64, 64),
),
),
],
),
),
],
),
),
],
),
),
),
);
}
}

View File

@@ -0,0 +1,325 @@
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import '../../data/mock_data.dart';
import '../../models/scenario.dart';
import '../../widgets/tab_content_layout.dart';
class LibraryScreen extends StatefulWidget {
const LibraryScreen({super.key});
@override
State<LibraryScreen> createState() => _LibraryScreenState();
}
class _LibraryScreenState extends State<LibraryScreen> {
String _activeCategory = '全部';
final List<String> _categories = ['全部', '职场', '邻家', '科幻', 'ASMR'];
List<Scenario> get _filteredScenarios {
if (_activeCategory == '全部') return mockScenarios;
return mockScenarios.where((s) =>
s.category == _activeCategory || s.tags.contains(_activeCategory)
).toList();
}
Color _getIntensityColor(String intensity) {
switch (intensity) {
case 'Low':
return const Color(0xFF34D399); // Emerald
case 'Medium':
return const Color(0xFF60A5FA); // Blue
case 'High':
return const Color(0xFFFBBF24); // Amber
case 'Extreme':
return const Color(0xFFF472B6); // Pink
default:
return Colors.white.withOpacity(0.5);
}
}
@override
Widget build(BuildContext context) {
const double bottomNavHeight = 90;
return TabContentLayout(
child: Column(
children: [
// Filter Bar
SizedBox(
height: 50,
child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16),
scrollDirection: Axis.horizontal,
itemCount: _categories.length,
separatorBuilder: (_, __) => const SizedBox(width: 12),
itemBuilder: (context, index) {
final category = _categories[index];
final isActive = _activeCategory == category;
return Center(
child: GestureDetector(
onTap: () => setState(() => _activeCategory = category),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: BoxDecoration(
gradient: isActive
? const LinearGradient(
colors: [Color(0xFFC084FC), Color(0xFFF472B6)],
)
: null,
color: isActive ? null : Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isActive ? Colors.transparent : Colors.white.withOpacity(0.1),
),
boxShadow: isActive
? [
BoxShadow(
color: const Color(0xFFC084FC).withOpacity(0.4),
blurRadius: 15,
),
]
: null,
),
child: Text(
category,
style: TextStyle(
fontSize: 14,
fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
color: isActive ? Colors.white : Colors.white.withOpacity(0.7),
),
),
),
),
);
},
),
),
const SizedBox(height: 8),
// Scenario List
Expanded(
child: _filteredScenarios.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(LucideIcons.activity, size: 32, color: Colors.white.withOpacity(0.5)),
const SizedBox(height: 8),
Text(
'暂无相关剧本',
style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.5)),
),
],
),
)
: ListView.builder(
padding: EdgeInsets.fromLTRB(16, 8, 16, bottomNavHeight + 20),
itemCount: _filteredScenarios.length,
itemBuilder: (context, index) {
final scenario = _filteredScenarios[index];
return _ScenarioCard(
scenario: scenario,
intensityColor: _getIntensityColor(scenario.intensity),
onTap: () {
if (!scenario.isLocked) {
context.push('/player/${scenario.id}');
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('需要积分解锁此高级内容'),
backgroundColor: Color(0xFF4C1D95),
),
);
}
},
)
.animate()
.fadeIn(duration: 400.ms, delay: (index * 80).ms)
.slideX(begin: 0.05, end: 0);
},
),
),
],
),
);
}
}
class _ScenarioCard extends StatelessWidget {
final Scenario scenario;
final Color intensityColor;
final VoidCallback onTap;
const _ScenarioCard({
required this.scenario,
required this.intensityColor,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: const Color(0xFF4C1D95).withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
children: [
// Left: Thumbnail
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white.withOpacity(0.1)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
clipBehavior: Clip.antiAlias,
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
scenario.cover,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
color: Colors.black26,
child: const Center(
child: CircularProgressIndicator(strokeWidth: 2),
),
);
},
),
if (scenario.isLocked)
Container(
color: const Color(0xFF2E1065).withOpacity(0.6),
child: const Center(
child: Icon(LucideIcons.lock, size: 16, color: Colors.white70),
),
),
],
),
),
const SizedBox(width: 16),
// Center: Info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Category & Intensity
Row(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Text(
scenario.category,
style: TextStyle(
fontSize: 10,
fontFamily: 'monospace',
letterSpacing: 1,
color: Colors.white.withOpacity(0.9),
),
),
),
const SizedBox(width: 8),
Icon(LucideIcons.zap, size: 10, color: intensityColor),
const SizedBox(width: 2),
Text(
scenario.intensity,
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: intensityColor,
),
),
],
),
const SizedBox(height: 6),
// Title
Text(
scenario.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 6),
// Tags
Wrap(
spacing: 6,
children: scenario.tags.take(3).map((tag) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.white.withOpacity(0.05)),
),
child: Text(
'#$tag',
style: TextStyle(
fontSize: 10,
color: Colors.white.withOpacity(0.7),
),
),
);
}).toList(),
),
],
),
),
// Right: Play Button
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: scenario.isLocked
? Colors.white.withOpacity(0.05)
: const Color(0xFFC084FC).withOpacity(0.2),
),
child: Center(
child: Icon(
scenario.isLocked ? LucideIcons.lock : LucideIcons.play,
size: scenario.isLocked ? 16 : 18,
color: scenario.isLocked
? Colors.white.withOpacity(0.3)
: const Color(0xFFC084FC),
),
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,179 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../widgets/status_bar.dart';
import '../../providers/device_provider.dart';
import '../../widgets/glass_bottom_nav.dart';
class MainScreen extends ConsumerStatefulWidget {
final StatefulNavigationShell navigationShell;
const MainScreen({
super.key,
required this.navigationShell,
});
@override
ConsumerState<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends ConsumerState<MainScreen> {
void _goBranch(int index) {
widget.navigationShell.goBranch(
index,
initialLocation: index == widget.navigationShell.currentIndex,
);
}
Map<String, String> _getPageTitle(int index) {
switch (index) {
case 0:
return {'title': '专属推荐', 'subtitle': '基于偏好生成的私密匹配列表'};
case 1:
return {'title': '剧本馆', 'subtitle': '沉浸式感官体验库'};
case 2:
return {'title': '手动实验室', 'subtitle': '实时触觉反馈控制'};
case 3:
return {'title': '个人中心', 'subtitle': 'ID: 884-291-00X'};
default:
return {'title': 'Wei AI', 'subtitle': ''};
}
}
@override
Widget build(BuildContext context) {
final pageMeta = _getPageTitle(widget.navigationShell.currentIndex);
return Container(
decoration: const BoxDecoration(
color: Color(0xFF2E1065), // Fallback
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF2E1065), // #2e1065
Color(0xFF4C1D95), // #4c1d95
Color(0xFF831843), // #831843
],
stops: [0.0, 0.4, 1.0],
),
),
child: Stack(
children: [
// Radial Gradient 1 (Top Left)
Positioned(
top: -100,
left: -100,
child: Container(
width: 500, // Larger size for smoother gradient
height: 500,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
const Color(0xFFA855F7).withOpacity(0.4), // rgba(168, 85, 247, 0.4)
Colors.transparent,
],
),
),
),
),
// Radial Gradient 2 (Top Right)
Positioned(
top: -100,
right: -100,
child: Container(
width: 500,
height: 500,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
const Color(0xFFEC4899).withOpacity(0.3), // rgba(236, 72, 153, 0.3)
Colors.transparent,
],
),
),
),
),
// Scaffold
Scaffold(
backgroundColor: Colors.transparent,
extendBody: true, // Important for glass nav
extendBodyBehindAppBar: false, // Body starts below AppBar naturally
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
titleSpacing: 20,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
const Icon(LucideIcons.hexagon, size: 12, color: Colors.white70),
const SizedBox(width: 6),
Text(
'WEI AI',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.white.withOpacity(0.8),
),
),
],
),
const SizedBox(height: 4),
Text(
pageMeta['title']!,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [Shadow(color: Colors.black26, offset: Offset(0, 2), blurRadius: 4)]
)
),
],
),
centerTitle: false,
toolbarHeight: 90, // Increased toolbar height to accommodate subtitle
actions: [
Padding(
padding: const EdgeInsets.only(right: 20.0, top: 20), // Adjusted top padding to align with title
child: StatusBar(
status: ref.watch(deviceProvider),
onTap: () {
ref.read(deviceProvider.notifier).toggleConnection();
},
),
),
],
bottom: pageMeta['subtitle']!.isNotEmpty ? PreferredSize(
preferredSize: const Size.fromHeight(20),
child: Padding(
padding: const EdgeInsets.only(left: 20, bottom: 10),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
pageMeta['subtitle']!,
style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.6)),
),
),
),
) : null,
),
body: widget.navigationShell,
bottomNavigationBar: GlassBottomNav(
currentIndex: widget.navigationShell.currentIndex,
onTap: _goBranch,
),
),
],
),
);
}
}

View File

@@ -0,0 +1,515 @@
import 'dart:async';
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:fl_chart/fl_chart.dart';
import '../../data/mock_data.dart';
import '../../models/scenario.dart';
class ScriptPlayerScreen extends StatefulWidget {
final String scenarioId;
const ScriptPlayerScreen({super.key, required this.scenarioId});
@override
State<ScriptPlayerScreen> createState() => _ScriptPlayerScreenState();
}
class _ScriptPlayerScreenState extends State<ScriptPlayerScreen>
with TickerProviderStateMixin {
bool _isPlaying = true;
double _progress = 0;
bool _isDragging = false;
bool _showAlert = false;
Timer? _timer;
late Scenario _scenario;
late List<FlSpot> _waveData;
@override
void initState() {
super.initState();
_scenario = mockScenarios.firstWhere(
(s) => s.id == widget.scenarioId,
orElse: () => mockScenarios.first,
);
_generateWaveData();
_startPlayback();
}
void _generateWaveData() {
// Generate 101 data points (0 to 100) for realistic wave
final random = Random(42); // Fixed seed for consistency
_waveData = List.generate(101, (i) {
double hz;
if (i < 20) {
// Warmup
hz = 10 + (i * 1.5) + (random.nextDouble() * 5);
} else if (i < 50) {
// Plateau/Tease
hz = 40 + sin(i * 0.5) * 10 + (random.nextDouble() * 10);
} else if (i < 85) {
// Build up to climax
hz = 70 + (i - 50) * 0.8 + (random.nextDouble() * 15);
} else {
// Cooldown
hz = 90 - ((i - 85) * 5) + (random.nextDouble() * 5);
}
return FlSpot(i.toDouble(), hz.clamp(0, 100));
});
}
void _startPlayback() {
_timer?.cancel();
_timer = Timer.periodic(const Duration(milliseconds: 50), (timer) {
if (!_isPlaying || _isDragging) return;
setState(() {
if (_progress >= 100) {
_isPlaying = false;
timer.cancel();
} else {
_progress += 0.1;
}
});
});
}
void _handleEmergencyStop() {
setState(() {
_isPlaying = false;
_showAlert = true;
});
Future.delayed(const Duration(milliseconds: 1500), () {
if (mounted) {
Navigator.of(context).pop();
}
});
}
int get _activeLineIndex {
for (int i = 0; i < dialogueScript.length; i++) {
final nextLine = i + 1 < dialogueScript.length ? dialogueScript[i + 1] : null;
if (_progress >= dialogueScript[i].time &&
(nextLine == null || _progress < nextLine.time)) {
return i;
}
}
return 0;
}
double get _currentHz {
final index = _progress.floor().clamp(0, 100);
return _waveData[index].y;
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onDoubleTap: _handleEmergencyStop,
child: Scaffold(
backgroundColor: const Color(0xFF2E1065),
body: Stack(
children: [
// Background Visual
Positioned.fill(
child: Opacity(
opacity: 0.4,
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
_scenario.cover,
fit: BoxFit.cover,
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(color: Colors.transparent),
),
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0x992E1065),
Color(0xCC2E1065),
Color(0xFF2E1065),
],
stops: [0.0, 0.5, 1.0],
),
),
),
],
),
),
),
// Emergency Overlay
if (_showAlert)
Positioned.fill(
child: Container(
color: const Color(0xF02E1065),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.alertTriangle,
size: 64,
color: const Color(0xFFF43F5E),
),
const SizedBox(height: 16),
const Text(
'EMERGENCY STOP',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Color(0xFFF43F5E),
letterSpacing: 4,
),
),
const SizedBox(height: 8),
const Text(
'系统已强制中断',
style: TextStyle(fontSize: 14, color: Colors.white70),
),
],
),
),
),
// Main Content
SafeArea(
child: Column(
children: [
// Header
_buildHeader(),
// Central Lyrics
Expanded(child: _buildLyrics()),
// Bottom Controls
_buildControls(),
],
),
),
],
),
),
);
}
Widget _buildHeader() {
return Padding(
padding: const EdgeInsets.fromLTRB(24, 16, 24, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_scenario.title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
Text(
'${_scenario.category} SCENARIO',
style: const TextStyle(
fontSize: 10,
letterSpacing: 1,
color: Color(0xFFC084FC),
),
),
],
),
GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.1),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: const Icon(LucideIcons.x, size: 20, color: Colors.white70),
),
),
],
),
);
}
Widget _buildLyrics() {
// 简单展示:只显示当前行附近的几行
return Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 上面 2 行
for (int i = _activeLineIndex - 2; i < _activeLineIndex; i++)
if (i >= 0)
_buildLyricLine(i, isActive: false, distance: _activeLineIndex - i),
// 当前行
_buildLyricLine(_activeLineIndex, isActive: true, distance: 0),
// 下面 2 行
for (int i = _activeLineIndex + 1; i <= _activeLineIndex + 2; i++)
if (i < dialogueScript.length)
_buildLyricLine(i, isActive: false, distance: i - _activeLineIndex),
],
),
),
);
}
Widget _buildLyricLine(int index, {required bool isActive, required int distance}) {
final opacity = isActive ? 1.0 : (distance > 1 ? 0.2 : 0.5);
final scale = isActive ? 1.0 : 0.9;
return AnimatedContainer(
duration: const Duration(milliseconds: 400),
height: isActive ? 80 : 56,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 400),
opacity: opacity,
child: Transform.scale(
scale: scale,
child: Center(
child: Text(
dialogueScript[index].text,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: isActive ? 20 : 16,
fontWeight: isActive ? FontWeight.bold : FontWeight.w400,
color: isActive ? Colors.white : const Color(0xFFCBD5E1),
shadows: isActive
? [
const Shadow(
color: Color(0x99C084FC),
blurRadius: 20,
),
]
: null,
),
),
),
),
),
);
}
Widget _buildControls() {
return Container(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 24),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
const Color(0xFF2E1065),
const Color(0xFF2E1065),
const Color(0xFF2E1065).withOpacity(0),
],
stops: const [0.0, 0.7, 1.0],
),
),
child: Column(
children: [
// Wave Chart
SizedBox(
height: 100,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: LineChart(
LineChartData(
gridData: const FlGridData(show: false),
titlesData: const FlTitlesData(show: false),
borderData: FlBorderData(show: false),
minX: 0,
maxX: 100,
minY: 0,
maxY: 100,
lineBarsData: [
LineChartBarData(
spots: _waveData,
isCurved: true,
curveSmoothness: 0.3,
gradient: const LinearGradient(
colors: [Color(0xFFC084FC), Color(0xFFF472B6)],
),
barWidth: 3,
isStrokeCapRound: true,
dotData: const FlDotData(show: false),
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color(0xFFC084FC).withOpacity(0.5),
const Color(0xFFC084FC).withOpacity(0),
],
),
),
),
],
lineTouchData: const LineTouchData(enabled: false),
extraLinesData: ExtraLinesData(
verticalLines: [
VerticalLine(
x: _progress,
color: Colors.white.withOpacity(0.3),
strokeWidth: 1,
dashArray: [4, 4],
),
],
),
),
),
),
),
const SizedBox(height: 16),
// Control Bar
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
// Play/Pause Button
GestureDetector(
onTap: () {
setState(() {
_isPlaying = !_isPlaying;
if (_isPlaying && _progress >= 100) {
_progress = 0;
}
});
},
child: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.3),
blurRadius: 20,
),
],
),
child: Icon(
_isPlaying ? LucideIcons.pause : LucideIcons.play,
size: 20,
color: const Color(0xFF2E1065),
),
),
),
const SizedBox(width: 20),
// Progress Info & Slider
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'DEVICE INTENSITY',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
letterSpacing: 1,
color: Color(0xFFCBD5E1),
),
),
const SizedBox(height: 2),
Text(
'伸缩频率: ${max(1, (_progress / 10).ceil())}',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
fontFamily: 'monospace',
color: Color(0xFFF472B6),
),
),
],
),
Text(
'${(_progress * 1.5).toStringAsFixed(0)}s / ${_scenario.duration}',
style: const TextStyle(
fontSize: 10,
fontFamily: 'monospace',
color: Color(0xFFCBD5E1),
),
),
],
),
const SizedBox(height: 8),
// Progress Slider
SliderTheme(
data: SliderThemeData(
trackHeight: 4,
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 8),
overlayShape: const RoundSliderOverlayShape(overlayRadius: 16),
activeTrackColor: const Color(0xFFF472B6),
inactiveTrackColor: Colors.white.withOpacity(0.2),
thumbColor: Colors.white,
),
child: Slider(
value: _progress.clamp(0, 100),
min: 0,
max: 100,
onChangeStart: (_) => _isDragging = true,
onChangeEnd: (_) => _isDragging = false,
onChanged: (value) {
setState(() {
_progress = value;
});
},
),
),
],
),
),
],
),
),
const SizedBox(height: 16),
// Emergency Stop Hint
Text(
'双击屏幕紧急停止',
style: TextStyle(
fontSize: 10,
letterSpacing: 2,
color: Colors.white.withOpacity(0.4),
),
),
],
),
);
}
}

View File

@@ -0,0 +1,134 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
class DeviceManagerScreen extends StatelessWidget {
const DeviceManagerScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF2E1065),
body: SafeArea(
child: Column(
children: [
_buildHeader(context),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildSectionTitle('已连接设备'),
const SizedBox(height: 12),
_buildDeviceCard(name: 'Link-X Pro', id: '884-X9-01', battery: 85, isConnected: true),
const SizedBox(height: 24),
_buildSectionTitle('历史设备'),
const SizedBox(height: 12),
_buildDeviceCard(name: 'Link-S Mini', id: '772-M3-02', battery: 0, isConnected: false),
const SizedBox(height: 24),
_buildAddDeviceButton(),
],
),
),
),
],
),
),
);
}
Widget _buildHeader(BuildContext context) {
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 _buildSectionTitle(String title) {
return Text(title, style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2, color: Colors.white.withOpacity(0.4)));
}
Widget _buildDeviceCard({required String name, required String id, required int battery, required bool isConnected}) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(LucideIcons.bluetooth, size: 24, color: isConnected ? const Color(0xFF34D399) : Colors.white.withOpacity(0.5)),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white)),
const SizedBox(height: 2),
Text('ID: $id', style: TextStyle(fontSize: 12, fontFamily: 'monospace', color: Colors.white.withOpacity(0.5))),
],
),
],
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: isConnected ? const Color(0xFF34D399).withOpacity(0.2) : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
isConnected ? '已连接' : '未连接',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: isConnected ? const Color(0xFF34D399) : Colors.white.withOpacity(0.5)),
),
),
],
),
if (isConnected) ...[
const SizedBox(height: 16),
Row(
children: [
Icon(LucideIcons.battery, size: 16, color: const Color(0xFF34D399)),
const SizedBox(width: 8),
Text('$battery%', style: const TextStyle(fontSize: 14, fontFamily: 'monospace', color: Colors.white)),
],
),
],
],
),
);
}
Widget _buildAddDeviceButton() {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.2)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(LucideIcons.plus, size: 20, color: Colors.white.withOpacity(0.7)),
const SizedBox(width: 8),
Text('添加新设备', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.white.withOpacity(0.7))),
],
),
);
}
}

View File

@@ -0,0 +1,118 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
class HelpScreen extends StatelessWidget {
const HelpScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF2E1065),
body: SafeArea(
child: Column(
children: [
_buildHeader(context),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildSectionTitle('常见问题'),
const SizedBox(height: 12),
_buildFaqItem(question: '如何连接设备?', answer: '进入手动实验室页面,点击"连接设备"按钮,开启蓝牙后按照提示操作。'),
_buildFaqItem(question: '积分如何获取?', answer: '可通过充值购买或完成日常任务获得积分奖励。'),
_buildFaqItem(question: '如何升级会员?', answer: '在个人中心点击订阅管理,选择合适的会员方案进行升级。'),
const SizedBox(height: 24),
_buildSectionTitle('联系我们'),
const SizedBox(height: 12),
_buildContactItem(icon: LucideIcons.messageCircle, title: '在线客服', subtitle: '工作时间: 9:00-21:00'),
const SizedBox(height: 12),
_buildContactItem(icon: LucideIcons.mail, title: '邮箱反馈', subtitle: 'support@weiai.com'),
const SizedBox(height: 24),
_buildFeedbackButton(),
],
),
),
),
],
),
),
);
}
Widget _buildHeader(BuildContext context) {
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 _buildSectionTitle(String title) {
return Text(title, style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2, color: Colors.white.withOpacity(0.4)));
}
Widget _buildFaqItem({required String question, required String answer}) {
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(color: Colors.white.withOpacity(0.05), borderRadius: BorderRadius.circular(16), border: Border.all(color: Colors.white.withOpacity(0.1))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(LucideIcons.helpCircle, size: 16, color: const Color(0xFFC084FC)),
const SizedBox(width: 8),
Expanded(child: Text(question, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white))),
],
),
const SizedBox(height: 8),
Text(answer, style: TextStyle(fontSize: 13, color: Colors.white.withOpacity(0.6), height: 1.5)),
],
),
);
}
Widget _buildContactItem({required IconData icon, required String title, required String subtitle}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(color: Colors.white.withOpacity(0.05), borderRadius: BorderRadius.circular(16), border: Border.all(color: Colors.white.withOpacity(0.1))),
child: Row(
children: [
Container(padding: const EdgeInsets.all(10), decoration: BoxDecoration(color: Colors.white.withOpacity(0.05), borderRadius: BorderRadius.circular(12)), child: Icon(icon, size: 20, color: Colors.white.withOpacity(0.7))),
const SizedBox(width: 14),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Colors.white)),
const SizedBox(height: 2),
Text(subtitle, style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.5))),
],
),
],
),
);
}
Widget _buildFeedbackButton() {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(gradient: const LinearGradient(colors: [Color(0xFFC084FC), Color(0xFFF472B6)]), borderRadius: BorderRadius.circular(16)),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(LucideIcons.send, size: 18, color: Colors.white),
SizedBox(width: 8),
Text('提交反馈', style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold, color: Colors.white)),
],
),
);
}
}

View File

@@ -0,0 +1,119 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
class PrivacyScreen extends StatefulWidget {
const PrivacyScreen({super.key});
@override
State<PrivacyScreen> createState() => _PrivacyScreenState();
}
class _PrivacyScreenState extends State<PrivacyScreen> {
bool _dataEncryption = true;
bool _anonymousMode = false;
bool _shareAnalytics = true;
@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: [
_buildSecurityStatus(),
const SizedBox(height: 24),
_buildSectionTitle('隐私设置'),
const SizedBox(height: 12),
_buildSwitchTile(icon: LucideIcons.lock, title: '端到端加密', subtitle: '所有数据均已加密保护', value: _dataEncryption, onChanged: (v) => setState(() => _dataEncryption = v)),
const SizedBox(height: 12),
_buildSwitchTile(icon: LucideIcons.eyeOff, title: '匿名模式', subtitle: '隐藏个人信息和活动记录', value: _anonymousMode, onChanged: (v) => setState(() => _anonymousMode = v)),
const SizedBox(height: 12),
_buildSwitchTile(icon: LucideIcons.barChart2, title: '分享使用数据', subtitle: '帮助我们改进产品体验', value: _shareAnalytics, onChanged: (v) => setState(() => _shareAnalytics = v)),
],
),
),
),
],
),
),
);
}
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 _buildSecurityStatus() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFF34D399).withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: const Color(0xFF34D399).withOpacity(0.3)),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(color: const Color(0xFF34D399).withOpacity(0.2), shape: BoxShape.circle),
child: const Icon(LucideIcons.shieldCheck, size: 24, color: Color(0xFF34D399)),
),
const SizedBox(width: 16),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('账户安全', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Color(0xFF34D399))),
SizedBox(height: 4),
Text('您的账户处于安全状态', style: TextStyle(fontSize: 12, color: Colors.white70)),
],
),
),
],
),
);
}
Widget _buildSectionTitle(String title) {
return Text(title, style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2, color: Colors.white.withOpacity(0.4)));
}
Widget _buildSwitchTile({required IconData icon, required String title, required String subtitle, required bool value, required ValueChanged<bool> onChanged}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(color: Colors.white.withOpacity(0.05), borderRadius: BorderRadius.circular(16), border: Border.all(color: Colors.white.withOpacity(0.1))),
child: Row(
children: [
Container(padding: const EdgeInsets.all(10), decoration: BoxDecoration(color: Colors.white.withOpacity(0.05), borderRadius: BorderRadius.circular(12)), child: Icon(icon, size: 20, color: Colors.white.withOpacity(0.7))),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Colors.white)),
const SizedBox(height: 2),
Text(subtitle, style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.5))),
],
),
),
Switch(value: value, onChanged: onChanged, activeColor: const Color(0xFFC084FC)),
],
),
);
}
}

View File

@@ -0,0 +1,404 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../widgets/tab_content_layout.dart';
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
const double bottomNavHeight = 90;
return TabContentLayout(
child: SingleChildScrollView(
padding: EdgeInsets.fromLTRB(16, 8, 16, bottomNavHeight + 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// User Header
_buildUserHeader(context),
const SizedBox(height: 24),
// Stats Grid
_buildStatsGrid(),
const SizedBox(height: 20),
// Joy Points Card
_buildJoyPointsCard(context),
const SizedBox(height: 24),
// Menu List
_buildMenuSection(context),
const SizedBox(height: 24),
// Logout Button
_buildLogoutButton(),
const SizedBox(height: 16),
// Version
Center(
child: Text(
'Wei AI v2.5.0 (Neon Edition)',
style: TextStyle(
fontSize: 10,
fontFamily: 'monospace',
color: Colors.white.withOpacity(0.3),
),
),
),
],
),
),
);
}
Widget _buildUserHeader(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
// Avatar
Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: const LinearGradient(
colors: [Color(0xFFC084FC), Color(0xFFF472B6)],
),
),
child: Container(
width: 64,
height: 64,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white.withOpacity(0.2), width: 2),
image: const DecorationImage(
image: NetworkImage('https://api.dicebear.com/7.x/avataaars/png?seed=commander'),
fit: BoxFit.cover,
),
),
),
),
const SizedBox(width: 16),
// User Info
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Commander',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(LucideIcons.crown, size: 12, color: const Color(0xFFFBBF24)),
const SizedBox(width: 4),
const Text(
'LV.4 黑金会员',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 1,
),
),
],
),
),
],
),
],
),
// Settings Button
GestureDetector(
onTap: () => context.push('/profile/settings'),
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
shape: BoxShape.circle,
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Icon(LucideIcons.settings, size: 20, color: Colors.white.withOpacity(0.7)),
),
),
],
);
}
Widget _buildStatsGrid() {
final stats = [
{'label': '互动时长', 'val': '42', 'unit': 'h'},
{'label': '亲密指数', 'val': '85', 'unit': '%'},
{'label': '解锁剧本', 'val': '12', 'unit': ''},
];
return Row(
children: stats.map((stat) {
return Expanded(
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 4),
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
stat['val']!,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
fontFamily: 'monospace',
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 2),
child: Text(
stat['unit']!,
style: TextStyle(
fontSize: 10,
color: Colors.white.withOpacity(0.6),
),
),
),
],
),
const SizedBox(height: 4),
Text(
stat['label']!,
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
color: Colors.white.withOpacity(0.5),
),
),
],
),
),
);
}).toList(),
);
}
Widget _buildJoyPointsCard(BuildContext context) {
return GestureDetector(
onTap: () => context.push('/profile/topup'),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
gradient: const LinearGradient(
colors: [Color(0xFF7C3AED), Color(0xFF9333EA), Color(0xFFDB2777)],
),
boxShadow: [
BoxShadow(
color: const Color(0xFFC084FC).withOpacity(0.4),
blurRadius: 30,
offset: const Offset(0, 10),
),
],
),
child: Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Icon(LucideIcons.zap, size: 16, color: Colors.white.withOpacity(0.9)),
const SizedBox(width: 6),
Text(
'JOY POINTS',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.white.withOpacity(0.9),
),
),
],
),
const SizedBox(height: 4),
const Text(
'2,450',
style: TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
fontFamily: 'monospace',
color: Colors.white,
),
),
],
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
),
child: const Text(
'立即充值',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0xFF9333EA),
),
),
),
],
),
),
),
);
}
Widget _buildMenuSection(BuildContext context) {
final menuItems = [
{'id': 'device', 'icon': LucideIcons.bluetooth, 'label': '我的设备', 'sub': 'Link-X Pro', 'route': '/profile/device'},
{'id': 'sub', 'icon': LucideIcons.creditCard, 'label': '订阅管理', 'sub': '', 'route': '/profile/subscription'},
{'id': 'privacy', 'icon': LucideIcons.shield, 'label': '隐私安全', 'sub': '', 'route': '/profile/privacy'},
{'id': 'help', 'icon': LucideIcons.helpCircle, 'label': '帮助与反馈', 'sub': '', 'route': '/profile/help'},
];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 4, bottom: 8),
child: Text(
'GENERAL',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.white.withOpacity(0.4),
),
),
),
...menuItems.map((item) => _buildMenuItem(
context,
icon: item['icon'] as IconData,
label: item['label'] as String,
sub: item['sub'] as String,
route: item['route'] as String,
)),
],
);
}
Widget _buildMenuItem(BuildContext context, {
required IconData icon,
required String label,
required String sub,
required String route,
}) {
return GestureDetector(
onTap: () => context.push(route),
child: Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, size: 20, color: Colors.white.withOpacity(0.7)),
),
const SizedBox(width: 14),
Text(
label,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
],
),
Row(
children: [
if (sub.isNotEmpty)
Text(
sub,
style: TextStyle(
fontSize: 12,
color: Colors.white.withOpacity(0.5),
),
),
const SizedBox(width: 8),
Icon(LucideIcons.chevronRight, size: 18, color: Colors.white.withOpacity(0.3)),
],
),
],
),
),
);
}
Widget _buildLogoutButton() {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.red.withOpacity(0.3)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(LucideIcons.logOut, size: 18, color: Colors.red[400]),
const SizedBox(width: 8),
Text(
'退出登录',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.red[400],
),
),
],
),
);
}
}

View File

@@ -0,0 +1,231 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
class SettingsScreen extends StatefulWidget {
const SettingsScreen({super.key});
@override
State<SettingsScreen> createState() => _SettingsScreenState();
}
class _SettingsScreenState extends State<SettingsScreen> {
bool _notificationsEnabled = true;
bool _darkMode = true;
bool _hapticFeedback = true;
@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: [
_buildSectionTitle('通知'),
_buildSwitchTile(
icon: LucideIcons.bell,
title: '推送通知',
subtitle: '接收消息和活动提醒',
value: _notificationsEnabled,
onChanged: (v) => setState(() => _notificationsEnabled = v),
),
const SizedBox(height: 20),
_buildSectionTitle('显示'),
_buildSwitchTile(
icon: LucideIcons.moon,
title: '深色模式',
subtitle: '始终使用深色主题',
value: _darkMode,
onChanged: (v) => setState(() => _darkMode = v),
),
const SizedBox(height: 20),
_buildSectionTitle('体验'),
_buildSwitchTile(
icon: LucideIcons.smartphone,
title: '触觉反馈',
subtitle: '操作时产生震动反馈',
value: _hapticFeedback,
onChanged: (v) => setState(() => _hapticFeedback = v),
),
const SizedBox(height: 20),
_buildSectionTitle('存储'),
_buildActionTile(
icon: LucideIcons.trash2,
title: '清除缓存',
subtitle: '已使用 128 MB',
onTap: () {},
),
const SizedBox(height: 20),
_buildSectionTitle('关于'),
_buildInfoTile(
icon: LucideIcons.info,
title: '版本',
value: 'v2.5.0',
),
],
),
),
),
],
),
),
);
}
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 _buildSectionTitle(String title) {
return Padding(
padding: const EdgeInsets.only(left: 4, bottom: 12),
child: Text(
title,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.white.withOpacity(0.4),
),
),
);
}
Widget _buildSwitchTile({
required IconData icon,
required String title,
required String subtitle,
required bool value,
required ValueChanged<bool> onChanged,
}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, size: 20, color: Colors.white.withOpacity(0.7)),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Colors.white)),
const SizedBox(height: 2),
Text(subtitle, style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.5))),
],
),
),
Switch(
value: value,
onChanged: onChanged,
activeColor: const Color(0xFFC084FC),
),
],
),
);
}
Widget _buildActionTile({
required IconData icon,
required String title,
required String subtitle,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, size: 20, color: Colors.white.withOpacity(0.7)),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Colors.white)),
const SizedBox(height: 2),
Text(subtitle, style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.5))),
],
),
),
Icon(LucideIcons.chevronRight, size: 18, color: Colors.white.withOpacity(0.3)),
],
),
),
);
}
Widget _buildInfoTile({
required IconData icon,
required String title,
required String value,
}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, size: 20, color: Colors.white.withOpacity(0.7)),
),
const SizedBox(width: 14),
Expanded(child: Text(title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Colors.white))),
Text(value, style: TextStyle(fontSize: 14, fontFamily: 'monospace', color: Colors.white.withOpacity(0.5))),
],
),
);
}
}

View File

@@ -0,0 +1,120 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
class SubscriptionScreen extends StatelessWidget {
const SubscriptionScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF2E1065),
body: SafeArea(
child: Column(
children: [
_buildHeader(context),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildCurrentPlan(),
const SizedBox(height: 24),
_buildSectionTitle('升级方案'),
const SizedBox(height: 12),
_buildPlanCard(name: '月度会员', price: '¥29/月', features: ['无限互动时长', '优先匹配', '专属剧本'], isRecommended: false),
const SizedBox(height: 12),
_buildPlanCard(name: '年度会员', price: '¥199/年', features: ['月度会员全部权益', '额外赠送500积分', '新功能优先体验'], isRecommended: true),
],
),
),
),
],
),
),
);
}
Widget _buildHeader(BuildContext context) {
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 _buildCurrentPlan() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF7C3AED), Color(0xFF9333EA)]),
borderRadius: BorderRadius.circular(20),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(LucideIcons.crown, size: 20, color: const Color(0xFFFBBF24)),
const SizedBox(width: 8),
const Text('当前订阅', style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 1, color: Colors.white70)),
],
),
const SizedBox(height: 8),
const Text('黑金会员 LV.4', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white)),
const SizedBox(height: 8),
Text('有效期至 2025-12-31', style: TextStyle(fontSize: 12, color: Colors.white.withOpacity(0.7))),
],
),
);
}
Widget _buildSectionTitle(String title) {
return Text(title, style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2, color: Colors.white.withOpacity(0.4)));
}
Widget _buildPlanCard({required String name, required String price, required List<String> features, required bool isRecommended}) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: isRecommended ? const Color(0xFFC084FC) : Colors.white.withOpacity(0.1), width: isRecommended ? 2 : 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(name, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
if (isRecommended)
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(color: const Color(0xFFC084FC), borderRadius: BorderRadius.circular(8)),
child: const Text('推荐', style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold, color: Colors.white)),
),
],
),
const SizedBox(height: 4),
Text(price, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, fontFamily: 'monospace', color: Color(0xFFC084FC))),
const SizedBox(height: 12),
...features.map((f) => Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Row(
children: [
Icon(LucideIcons.check, size: 14, color: const Color(0xFF34D399)),
const SizedBox(width: 8),
Text(f, style: TextStyle(fontSize: 13, color: Colors.white.withOpacity(0.7))),
],
),
)),
],
),
);
}
}

View File

@@ -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)),
),
);
}
}