优化
This commit is contained in:
@@ -98,4 +98,23 @@ class LocalStorage {
|
||||
await removeToken();
|
||||
await removeUserInfo();
|
||||
}
|
||||
|
||||
// ==================== 引导页状态 ====================
|
||||
|
||||
static const String _onboardingKey = 'onboarding_completed';
|
||||
|
||||
/// 检查是否已完成引导页
|
||||
static bool get isOnboardingCompleted {
|
||||
return getBool(_onboardingKey) ?? false;
|
||||
}
|
||||
|
||||
/// 标记引导页已完成
|
||||
static Future<void> setOnboardingCompleted() async {
|
||||
await setBool(_onboardingKey, true);
|
||||
}
|
||||
|
||||
/// 重置引导页状态（用于测试）
|
||||
static Future<void> resetOnboarding() async {
|
||||
await prefs.remove(_onboardingKey);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ import 'providers/asset_provider.dart';
|
||||
import 'providers/theme_provider.dart';
|
||||
import 'ui/pages/auth/login_page.dart';
|
||||
import 'ui/pages/main/main_page.dart';
|
||||
import 'ui/pages/onboarding/onboarding_page.dart';
|
||||
|
||||
void main() async {
|
||||
// 确保 Flutter 绑定初始化
|
||||
@@ -117,14 +118,29 @@ class MyApp extends StatelessWidget {
|
||||
builder: (context, child) => ShadAppBuilder(child: child!),
|
||||
initialRoute: '/',
|
||||
routes: {
|
||||
'/': (context) => _buildHome(),
|
||||
'/': (context) => const RootPage(),
|
||||
'/login': (context) => const LoginPage(),
|
||||
'/main': (context) => const MainPage(),
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 根页面 - 决定显示引导页还是主页面
|
||||
class RootPage extends StatelessWidget {
|
||||
const RootPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// 检查是否需要显示引导页
|
||||
if (!LocalStorage.isOnboardingCompleted) {
|
||||
return OnboardingPage(
|
||||
onComplete: () {
|
||||
Navigator.of(context).pushReplacementNamed('/login');
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHome() {
|
||||
return Consumer<AuthProvider>(
|
||||
builder: (context, auth, _) {
|
||||
if (auth.isLoading) {
|
||||
|
||||
263
flutter_monisuo/lib/ui/pages/onboarding/onboarding_page.dart
Normal file
263
flutter_monisuo/lib/ui/pages/onboarding/onboarding_page.dart
Normal file
@@ -0,0 +1,263 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/storage/local_storage.dart';
|
||||
|
||||
/// 引导页数据模型
|
||||
class _OnboardingItem {
|
||||
final String title;
|
||||
final String description;
|
||||
final IconData icon;
|
||||
final List<Color> gradientColors;
|
||||
|
||||
const _OnboardingItem({
|
||||
required this.title,
|
||||
required this.description,
|
||||
required this.icon,
|
||||
required this.gradientColors,
|
||||
});
|
||||
}
|
||||
|
||||
/// 首次启动引导页
|
||||
class OnboardingPage extends StatefulWidget {
|
||||
final VoidCallback onComplete;
|
||||
|
||||
const OnboardingPage({super.key, required this.onComplete});
|
||||
|
||||
@override
|
||||
State<OnboardingPage> createState() => _OnboardingPageState();
|
||||
}
|
||||
|
||||
class _OnboardingPageState extends State<OnboardingPage> {
|
||||
final PageController _pageController = PageController();
|
||||
int _currentPage = 0;
|
||||
|
||||
final _items = const [
|
||||
_OnboardingItem(
|
||||
title: '实时行情',
|
||||
description: '全球市场行情实时更新，把握每一个投资机会',
|
||||
icon: LucideIcons.trendingUp,
|
||||
gradientColors: [Color(0xFF6366F1), Color(0xFF8B5CF6)],
|
||||
),
|
||||
_OnboardingItem(
|
||||
title: '模拟交易',
|
||||
description: '零风险体验真实交易，学习投资策略',
|
||||
icon: LucideIcons.arrowLeftRight,
|
||||
gradientColors: [Color(0xFF10B981), Color(0xFF059669)],
|
||||
),
|
||||
_OnboardingItem(
|
||||
title: '资产管理',
|
||||
description: '清晰的资产概览，轻松管理你的投资组合',
|
||||
icon: LucideIcons.wallet,
|
||||
gradientColors: [Color(0xFFF59E0B), Color(0xFFD97706)],
|
||||
),
|
||||
_OnboardingItem(
|
||||
title: '安全可靠',
|
||||
description: '数据加密存储，保护你的隐私安全',
|
||||
icon: LucideIcons.shieldCheck,
|
||||
gradientColors: [Color(0xFFEC4899), Color(0xFFBE185D)],
|
||||
),
|
||||
];
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pageController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _nextPage() {
|
||||
if (_currentPage < _items.length - 1) {
|
||||
_pageController.nextPage(
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
} else {
|
||||
_completeOnboarding();
|
||||
}
|
||||
}
|
||||
|
||||
void _skip() {
|
||||
_completeOnboarding();
|
||||
}
|
||||
|
||||
Future<void> _completeOnboarding() async {
|
||||
await LocalStorage.setBool('onboarding_completed', true);
|
||||
widget.onComplete();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: colorScheme.surface,
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// 顶部跳过按钮
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.lg,
|
||||
vertical: AppSpacing.md,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: _skip,
|
||||
child: Text(
|
||||
'跳过',
|
||||
style: TextStyle(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 页面内容
|
||||
Expanded(
|
||||
child: PageView.builder(
|
||||
controller: _pageController,
|
||||
onPageChanged: (index) {
|
||||
setState(() {
|
||||
_currentPage = index;
|
||||
});
|
||||
},
|
||||
itemCount: _items.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _buildPage(_items[index], isDark);
|
||||
},
|
||||
),
|
||||
),
|
||||
// 底部指示器和按钮
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.lg,
|
||||
AppSpacing.md,
|
||||
AppSpacing.lg,
|
||||
AppSpacing.xl,
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// 页面指示器
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: List.generate(
|
||||
_items.length,
|
||||
(index) => _buildIndicator(index, isDark),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
// 下一步/开始按钮
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
child: ElevatedButton(
|
||||
onPressed: _nextPage,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: Text(
|
||||
_currentPage == _items.length - 1 ? '开始使用' : '下一步',
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPage(_OnboardingItem item, bool isDark) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// 图标容器
|
||||
Container(
|
||||
width: 160,
|
||||
height: 160,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: item.gradientColors,
|
||||
),
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: item.gradientColors.first.withValues(alpha: 0.4),
|
||||
blurRadius: 40,
|
||||
offset: const Offset(0, 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
item.icon,
|
||||
size: 72,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xxl + AppSpacing.lg),
|
||||
// 标题
|
||||
Text(
|
||||
item.title,
|
||||
style: TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorScheme.onSurface,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
// 描述
|
||||
Text(
|
||||
item.description,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
height: 1.6,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIndicator(int index, bool isDark) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final isActive = index == _currentPage;
|
||||
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
|
||||
width: isActive ? 24 : 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: isActive ? colorScheme.primary : colorScheme.outlineVariant,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user