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,98 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
class GlassBottomNav extends StatelessWidget {
final int currentIndex;
final Function(int) onTap;
const GlassBottomNav({
super.key,
required this.currentIndex,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.2), // bg-black/20
border: Border(top: BorderSide(color: Colors.white.withOpacity(0.1))),
),
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom + 12,
top: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildNavItem(0, LucideIcons.compass, '发现'),
_buildNavItem(1, LucideIcons.playCircle, '剧本'),
_buildNavItem(2, LucideIcons.radio, '操控'),
_buildNavItem(3, LucideIcons.user, '我的'),
],
),
),
),
);
}
Widget _buildNavItem(int index, IconData icon, String label) {
bool isActive = currentIndex == index;
return GestureDetector(
onTap: () => onTap(index),
behavior: HitTestBehavior.opaque,
child: SizedBox(
width: 60,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
alignment: Alignment.center,
children: [
if (isActive)
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.1),
blurRadius: 10,
spreadRadius: 5,
)
]
),
),
AnimatedScale(
scale: isActive ? 1.1 : 1.0,
duration: const Duration(milliseconds: 300),
child: Icon(
icon,
size: 26,
color: isActive ? Colors.white : Colors.white.withOpacity(0.5),
shadows: isActive ? [const BoxShadow(color: Colors.white, blurRadius: 10)] : null,
),
),
],
),
const SizedBox(height: 4),
Text(
label,
style: TextStyle(
fontSize: 10,
color: isActive ? Colors.white : Colors.white.withOpacity(0.4),
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,82 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../models/device_status.dart';
import '../config/theme.dart';
class StatusBar extends StatelessWidget {
final DeviceStatus status;
final VoidCallback? onTap;
const StatusBar({
super.key,
required this.status,
this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
height: 32, // h-7 is ~28px, adjusted for touch target
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: const Color(0xFF1A1625).withOpacity(0.8),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
// Connection Status Icon
if (status.connected) ...[
// TODO: Add ping animation if needed using flutter_animate
const Icon(LucideIcons.bluetooth, size: 14, color: AppTheme.neonGreen),
] else ...[
Container(
width: 6,
height: 6,
decoration: const BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
),
],
const SizedBox(width: 8),
Container(width: 1, height: 10, color: Colors.white.withOpacity(0.1)),
const SizedBox(width: 8),
// Battery Status
if (status.connected) ...[
Text(
'${status.battery.floor()}%',
style: TextStyle(
fontFamily: 'monospace',
fontSize: 12,
fontWeight: FontWeight.bold,
color: status.battery < 20 ? Theme.of(context).colorScheme.error : Colors.white,
),
),
const SizedBox(width: 4),
Icon(
LucideIcons.zap,
size: 12,
color: status.battery < 20 ? Theme.of(context).colorScheme.error : AppTheme.neonPurple,
),
] else ...[
const Text(
'未连接',
style: TextStyle(fontSize: 10, color: Colors.grey),
),
],
],
),
),
),
),
);
}
}

View File

@@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
class TabContentLayout extends StatelessWidget {
final Widget child;
final bool applyTopPadding;
final bool applyBottomPadding;
const TabContentLayout({
super.key,
required this.child,
this.applyTopPadding = true,
this.applyBottomPadding = false, // Usually managed solely by the glass nav height inside the list, but let's see.
});
@override
Widget build(BuildContext context) {
// Since extendBodyBehindAppBar is true, we don't need extra padding
// The body naturally starts from top, but we just need minimal spacing
return Padding(
padding: EdgeInsets.only(
top: 0, // Content starts naturally below AppBar
// We don't necessarily pad bottom here if we want content to scroll behind bottom nav,
// but for fixed elements (like Discovery Filter bar), we might need structure.
),
child: child,
);
}
}