liqupan/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: app 端 ui 设计完成

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

315
wei_ai_app/lib/screens/control/control_screen.dart Normal file
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),
),
),
],
),
],
),
),
),
);
}
}

205
wei_ai_app/lib/screens/control/free_control_screen.dart Normal file
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],
),
),
),
),
),
),
],
),
),
);
}
}

264
wei_ai_app/lib/screens/control/pattern_control_screen.dart Normal file
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),
),
),
],
),
),
);
},
),
),
),
],
),
),
);
}
}