dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

编辑界面优化

Browse Source
This commit is contained in:
DelLevin-Home
2026-05-22 12:15:43 +08:00
parent 8f51a06c56
commit 6b5488aff8
13 changed files with 1446 additions and 1538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

407
lib/pages/statistics_page.dart
View File

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
import '../models/data_models.dart';
import '../utils/user_prefs.dart';
/// 数据统计页面 - 多维度数据分析
class StatisticsPage extends StatefulWidget {
@@ -14,6 +15,10 @@ class StatisticsPage extends StatefulWidget {
class _StatisticsPageState extends State<StatisticsPage> {
int _selectedTab = 0;
bool get _showMovies => UserPrefs().showMovieTab;
bool get _showBooks => UserPrefs().showBookTab;
bool get _showNotes => UserPrefs().showNoteTab;
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -29,9 +34,7 @@ class _StatisticsPageState extends State<StatisticsPage> {
return Column(
children: [
// 标签切换栏
_buildTabBar(),
// 内容区域
Expanded(
child: _selectedTab == 0
? _buildOverviewTab(movies, books, notes)
@@ -44,25 +47,19 @@ class _StatisticsPageState extends State<StatisticsPage> {
);
}
/// 构建标签栏
Widget _buildTabBar() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
child: Row(
children: [
Expanded(
child: _buildTabItem('概览', 0),
),
Expanded(child: _buildTabItem('概览', 0)),
const SizedBox(width: 12),
Expanded(
child: _buildTabItem('趋势', 1),
),
Expanded(child: _buildTabItem('趋势', 1)),
],
),
);
}
/// 构建标签项
Widget _buildTabItem(String label, int index) {
final isSelected = _selectedTab == index;
return GestureDetector(
@@ -86,199 +83,182 @@ class _StatisticsPageState extends State<StatisticsPage> {
);
}
/// 概览标签页
Widget _buildOverviewTab(List<Movie> movies, List<Book> books, List<Note> notes) {
final totalMovies = movies.where((m) => !m.isDeleted).length;
final totalBooks = books.length;
final totalNotes = notes.length;
final watchedMovies = movies.where((m) => m.status == 'watched' && !m.isDeleted).length;
final watchingMovies = movies.where((m) => m.status == 'watching' && !m.isDeleted).length;
final wantToWatchMovies = movies.where((m) => m.status == 'want_to_watch' && !m.isDeleted).length;
final readBooks = books.where((b) => b.status == 'read').length;
final readingBooks = books.where((b) => b.status == 'reading').length;
final wantToReadBooks = books.where((b) => b.status == 'want_to_read').length;
final children = <Widget>[];
// 数据总览
children.add(_buildSectionTitle('数据总览'));
children.add(const SizedBox(height: 16));
children.add(_buildTotalOverview(totalMovies, totalBooks, totalNotes));
children.add(const SizedBox(height: 32));
// 影视状态分布
if (_showMovies) {
children.add(_buildSectionTitle('影视状态分布'));
children.add(const SizedBox(height: 16));
children.add(_buildStatusDistribution([
_StatusData('已看', watchedMovies, const Color(0xFF1A1A1A)),
_StatusData('在看', watchingMovies, const Color(0xFF666666)),
_StatusData('想看', wantToWatchMovies, const Color(0xFF999999)),
]));
children.add(const SizedBox(height: 32));
}
// 书籍状态分布
if (_showBooks) {
children.add(_buildSectionTitle('书籍状态分布'));
children.add(const SizedBox(height: 16));
children.add(_buildStatusDistribution([
_StatusData('已读', readBooks, const Color(0xFF1A1A1A)),
_StatusData('在读', readingBooks, const Color(0xFF666666)),
_StatusData('想读', wantToReadBooks, const Color(0xFF999999)),
]));
children.add(const SizedBox(height: 32));
}
// 最近活动
children.add(_buildSectionTitle('最近7天活动'));
children.add(const SizedBox(height: 16));
children.add(_buildRecentActivity(movies, books, notes));
return ListView(
padding: const EdgeInsets.all(24),
children: [
// 总数据卡片
_buildSectionTitle('数据总览'),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFF8F8F8),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Expanded(child: _buildStatItem('影视', totalMovies, Icons.movie_outlined)),
Expanded(child: _buildStatItem('书籍', totalBooks, Icons.menu_book_outlined)),
Expanded(child: _buildStatItem('笔记', totalNotes, Icons.note_outlined)),
],
),
),
const SizedBox(height: 32),
// 影视状态分布
_buildSectionTitle('影视状态分布'),
const SizedBox(height: 16),
_buildStatusDistribution([
_StatusData('已看', watchedMovies, const Color(0xFF1A1A1A)),
_StatusData('在看', watchingMovies, const Color(0xFF666666)),
_StatusData('想看', wantToWatchMovies, const Color(0xFF999999)),
]),
const SizedBox(height: 32),
// 书籍状态分布
_buildSectionTitle('书籍状态分布'),
const SizedBox(height: 16),
_buildStatusDistribution([
_StatusData('已读', readBooks, const Color(0xFF1A1A1A)),
_StatusData('在读', readingBooks, const Color(0xFF666666)),
_StatusData('想读', wantToReadBooks, const Color(0xFF999999)),
]),
const SizedBox(height: 32),
// 最近活动
_buildSectionTitle('最近7天活动'),
const SizedBox(height: 16),
_buildRecentActivity(movies, books, notes),
],
children: children,
);
}
Widget _buildTotalOverview(int totalMovies, int totalBooks, int totalNotes) {
final items = <Widget>[];
if (_showMovies) items.add(Expanded(child: _buildStatItem('影视', totalMovies, Icons.movie_outlined)));
if (_showBooks) items.add(Expanded(child: _buildStatItem('书籍', totalBooks, Icons.menu_book_outlined)));
if (_showNotes) items.add(Expanded(child: _buildStatItem('笔记', totalNotes, Icons.note_outlined)));
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFF8F8F8),
borderRadius: BorderRadius.circular(12),
),
child: Row(children: items),
);
}
/// 趋势标签页
Widget _buildTrendTab(List<Movie> movies, List<Book> books, List<Note> notes) {
final now = DateTime.now();
final thirtyDaysAgo = now.subtract(const Duration(days: 30));
// 生成最近30天的日期列表
final dates = List.generate(30, (index) {
return now.subtract(Duration(days: 29 - index));
});
// 计算每天的新增数量
final dates = List.generate(30, (index) => now.subtract(Duration(days: 29 - index)));
final movieTrend = dates.map((date) {
return movies.where((m) {
final created = m.createdAt;
return created.year == date.year &&
created.month == date.month &&
created.day == date.day &&
!m.isDeleted;
return created.year == date.year && created.month == date.month && created.day == date.day && !m.isDeleted;
}).length;
}).toList();
final bookTrend = dates.map((date) {
return books.where((b) {
final created = b.createdAt;
return created.year == date.year &&
created.month == date.month &&
created.day == date.day;
return created.year == date.year && created.month == date.month && created.day == date.day;
}).length;
}).toList();
final noteTrend = dates.map((date) {
return notes.where((n) {
final created = n.createdAt;
return created.year == date.year &&
created.month == date.month &&
created.day == date.day;
return created.year == date.year && created.month == date.month && created.day == date.day;
}).length;
}).toList();
// 计算总数
final totalMovies = movieTrend.reduce((a, b) => a + b);
final totalBooks = bookTrend.reduce((a, b) => a + b);
final totalNotes = noteTrend.reduce((a, b) => a + b);
final totalMovies = movieTrend.fold(0, (a, b) => a + b);
final totalBooks = bookTrend.fold(0, (a, b) => a + b);
final totalNotes = noteTrend.fold(0, (a, b) => a + b);
final children = <Widget>[];
children.add(_buildSectionTitle('近30天新增'));
children.add(const SizedBox(height: 16));
children.add(_buildTrendSummaryRow(totalMovies, totalBooks, totalNotes));
children.add(const SizedBox(height: 32));
children.add(_buildSectionTitle('数据趋势'));
children.add(const SizedBox(height: 16));
children.add(_buildTrendChart(movieTrend, bookTrend, noteTrend));
return ListView(
padding: const EdgeInsets.all(24),
children: [
// 30天统计摘要
_buildSectionTitle('近30天新增'),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFF8F8F8),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Expanded(child: _buildTrendSummary('影视', totalMovies)),
Expanded(child: _buildTrendSummary('书籍', totalBooks)),
Expanded(child: _buildTrendSummary('笔记', totalNotes)),
],
),
),
const SizedBox(height: 32),
// 趋势说明
_buildSectionTitle('数据趋势'),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
_buildTrendRow('影视', movieTrend, const Color(0xFF1A1A1A)),
const SizedBox(height: 16),
_buildTrendRow('书籍', bookTrend, const Color(0xFF666666)),
const SizedBox(height: 16),
_buildTrendRow('笔记', noteTrend, const Color(0xFF999999)),
],
),
),
],
children: children,
);
}
Widget _buildTrendSummaryRow(int totalMovies, int totalBooks, int totalNotes) {
final items = <Widget>[];
if (_showMovies) items.add(Expanded(child: _buildTrendSummary('影视', totalMovies)));
if (_showBooks) items.add(Expanded(child: _buildTrendSummary('书籍', totalBooks)));
if (_showNotes) items.add(Expanded(child: _buildTrendSummary('笔记', totalNotes)));
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFF8F8F8),
borderRadius: BorderRadius.circular(12),
),
child: Row(children: items),
);
}
Widget _buildTrendChart(List<int> movieTrend, List<int> bookTrend, List<int> noteTrend) {
final rows = <Widget>[];
if (_showMovies) {
rows.add(_buildTrendRow('影视', movieTrend, const Color(0xFF1A1A1A)));
}
if (_showBooks) {
if (rows.isNotEmpty) rows.add(const SizedBox(height: 16));
rows.add(_buildTrendRow('书籍', bookTrend, const Color(0xFF666666)));
}
if (_showNotes) {
if (rows.isNotEmpty) rows.add(const SizedBox(height: 16));
rows.add(_buildTrendRow('笔记', noteTrend, const Color(0xFF999999)));
}
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(12),
),
child: Column(children: rows),
);
}
/// 构建趋势摘要项
Widget _buildTrendSummary(String label, int count) {
return Column(
children: [
Text(
count.toString(),
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.w700,
color: Color(0xFF1A1A1A),
),
),
Text(count.toString(), style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w700, color: Color(0xFF1A1A1A))),
const SizedBox(height: 4),
Text(
label,
style: const TextStyle(
fontSize: 13,
color: Color(0xFF666666),
),
),
Text(label, style: const TextStyle(fontSize: 13, color: Color(0xFF666666))),
],
);
}
/// 构建趋势行
Widget _buildTrendRow(String label, List<int> data, Color color) {
final maxValue = data.isEmpty ? 1 : data.reduce((a, b) => a > b ? a : b);
final safeMax = maxValue == 0 ? 1 : maxValue;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: color,
),
),
Text(label, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: color)),
const SizedBox(height: 8),
SizedBox(
height: 40,
@@ -303,33 +283,21 @@ class _StatisticsPageState extends State<StatisticsPage> {
);
}
/// 构建统计项
Widget _buildStatItem(String title, int count, IconData icon) {
return Column(
children: [
Icon(icon, size: 24, color: const Color(0xFF666666)),
const SizedBox(height: 8),
Text(
count.toString(),
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.w700,
color: Color(0xFF1A1A1A),
),
),
Text(count.toString(), style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w700, color: Color(0xFF1A1A1A))),
const SizedBox(height: 4),
Text(
title,
style: const TextStyle(fontSize: 13, color: Color(0xFF666666)),
),
Text(title, style: const TextStyle(fontSize: 13, color: Color(0xFF666666))),
],
);
}
/// 构建状态分布
Widget _buildStatusDistribution(List<_StatusData> data) {
final total = data.fold(0, (sum, item) => sum + item.count);
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
@@ -344,38 +312,15 @@ class _StatisticsPageState extends State<StatisticsPage> {
child: Row(
children: [
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: item.color,
borderRadius: BorderRadius.circular(2),
),
width: 10, height: 10,
decoration: BoxDecoration(color: item.color, borderRadius: BorderRadius.circular(2)),
),
const SizedBox(width: 12),
Text(
item.label,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF1A1A1A),
),
),
Text(item.label, style: const TextStyle(fontSize: 14, color: Color(0xFF1A1A1A))),
const Spacer(),
Text(
'${item.count}',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
Text('${item.count}', style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A))),
const SizedBox(width: 8),
Text(
'($percentage%)',
style: const TextStyle(
fontSize: 13,
color: Color(0xFF999999),
),
),
Text('($percentage%)', style: const TextStyle(fontSize: 13, color: Color(0xFF999999))),
],
),
);
@@ -384,30 +329,34 @@ class _StatisticsPageState extends State<StatisticsPage> {
);
}
/// 构建最近活动
Widget _buildRecentActivity(List<Movie> movies, List<Book> books, List<Note> notes) {
final now = DateTime.now();
final sevenDaysAgo = now.subtract(const Duration(days: 7));
final recentMovies = movies.where((m) => m.createdAt.isAfter(sevenDaysAgo) && !m.isDeleted).length;
final recentBooks = books.where((b) => b.createdAt.isAfter(sevenDaysAgo)).length;
final recentNotes = notes.where((n) => n.createdAt.isAfter(sevenDaysAgo)).length;
final items = <Widget>[];
if (_showMovies) {
items.add(_buildActivityRow('新增影视', recentMovies, Icons.movie_outlined));
}
if (_showBooks) {
if (items.isNotEmpty) items.add(const Divider(height: 20, color: Color(0xFFE8E8E8)));
items.add(_buildActivityRow('新增书籍', recentBooks, Icons.menu_book_outlined));
}
if (_showNotes) {
if (items.isNotEmpty) items.add(const Divider(height: 20, color: Color(0xFFE8E8E8)));
items.add(_buildActivityRow('新增笔记', recentNotes, Icons.note_outlined));
}
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
_buildActivityRow('新增影视', recentMovies, Icons.movie_outlined),
const Divider(height: 20, color: Color(0xFFE8E8E8)),
_buildActivityRow('新增书籍', recentBooks, Icons.menu_book_outlined),
const Divider(height: 20, color: Color(0xFFE8E8E8)),
_buildActivityRow('新增笔记', recentNotes, Icons.note_outlined),
],
),
child: Column(children: items),
);
}
@@ -415,8 +364,7 @@ class _StatisticsPageState extends State<StatisticsPage> {
return Row(
children: [
Container(
width: 36,
height: 36,
width: 36, height: 36,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
@@ -425,30 +373,11 @@ class _StatisticsPageState extends State<StatisticsPage> {
child: Icon(icon, size: 18, color: const Color(0xFF666666)),
),
const SizedBox(width: 12),
Text(
label,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF1A1A1A),
),
),
Text(label, style: const TextStyle(fontSize: 14, color: Color(0xFF1A1A1A))),
const Spacer(),
Text(
'$count',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
Text('$count', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A))),
const SizedBox(width: 4),
const Text(
'个',
style: TextStyle(
fontSize: 13,
color: Color(0xFF999999),
),
),
const Text('个', style: TextStyle(fontSize: 13, color: Color(0xFF999999))),
],
);
}
@@ -457,34 +386,20 @@ class _StatisticsPageState extends State<StatisticsPage> {
return Row(
children: [
Container(
width: 4,
height: 16,
decoration: BoxDecoration(
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(2),
),
width: 4, height: 16,
decoration: BoxDecoration(color: const Color(0xFF1A1A1A), borderRadius: BorderRadius.circular(2)),
),
const SizedBox(width: 8),
Text(
title,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
Text(title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A))),
],
);
}
}
/// 状态数据
class _StatusData {
final String label;
final int count;
final Color color;
_StatusData(this.label, this.count, this.color);
}