feat:增加加载中显示

lib/pages/timeline_page.dart

@@ -1,6 +1,7 @@
-import 'package:blog_app/apis/blog.dart';
-import 'package:blog_app/models/blog.dart';
+import 'package:provider/provider.dart';
+import 'package:blog_app/provider/blog.dart';
 import 'package:blog_app/widget/blog.dart';
+import 'package:blog_app/widget/common.dart';
 import 'package:blog_app/widget/year_selector.dart';
 import 'package:flutter/material.dart';
 import 'package:timelines_plus/timelines_plus.dart';
@@ -9,48 +10,27 @@ class TimelinePage extends StatefulWidget {
   const TimelinePage({super.key});
 
   @override
-  State<TimelinePage> createState() => _TimelinePageState();
+  State<TimelinePage> createState() => TimelinePageState();
 }
 
-class _TimelinePageState extends State<TimelinePage> {
-  late List<Blog> blogs = [];
-
+class TimelinePageState extends State<TimelinePage> {
   @override
   void initState() {
     super.initState();
-    _loadBlogList();
-  }
-
-  Future<void> _loadBlogList() async {
-    try {
-      final result = await queryBlogByConditionApi(
-        null,
-        null,
-        DateTime.now().year,
-      );
-      setState(() {
-        blogs = result;
-      });
-    } catch (e) {
-      throw Exception('获取博客列表失败: $e');
-    }
-  }
-
-  Future<void> refreshRecord(int year) async {
-    final result = await queryBlogByConditionApi(null, null, year);
-    setState(() {
-      blogs = result;
+    // 初始化加载数据
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context.read<BlogProvider>().refreshBlogByYear();
     });
   }
 
-  Widget _buildBlogList() {
+  Widget _buildBlogList(BlogProvider provider) {
     final colors = Theme.of(context).colorScheme;
 
     return Timeline.tileBuilder(
       theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
       padding: EdgeInsets.all(6),
       builder: TimelineTileBuilder.connected(
-        itemCount: blogs.length,
+        itemCount: provider.blogList.length,
         connectorBuilder:
             (context, index, type) =>
                 Connector.solidLine(thickness: 2, color: colors.primary),
@@ -58,14 +38,24 @@ class _TimelinePageState extends State<TimelinePage> {
           return Indicator.dot(size: 12.0, color: colors.primary);
         },
         contentsBuilder: (context, index) {
-          return buildBlogListItem(context, blogs[index], index + 1);
+          return buildBlogListItem(
+            context,
+            provider.blogList[index],
+            index + 1,
+          );
         },
       ),
     );
   }
 
-  @override
-  Widget build(BuildContext context) {
+  Widget _buildContent(BlogProvider provider) {
+    if (provider.error != null) {
+      return buildErrorInfo(
+        errorInfo: provider.error!,
+        onPressed: () => provider.refreshBlogByYear(),
+      );
+    }
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -73,12 +63,42 @@ class _TimelinePageState extends State<TimelinePage> {
           initialYear: DateTime.now().year,
           minYear: 2000,
           maxYear: 2100,
-          onYearChanged: (year) => refreshRecord(year),
+          onYearChanged: (year) {
+            setState(() {
+              provider.currentYear = year;
+              provider.refreshBlogByYear();
+            });
+          },
         ),
         const SizedBox(height: 8),
-        buildListTitle(blogs.length),
+        buildListTitle(provider.blogList.length),
         const SizedBox(height: 8),
-        Expanded(child: blogs.isEmpty ? buildEmpty() : _buildBlogList()),
+        Expanded(
+          child:
+              provider.blogList.isEmpty
+                  ? buildEmpty()
+                  : _buildBlogList(provider),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final blogProvider = context.watch<BlogProvider>();
+
+    return Column(
+      children: [
+        Expanded(
+          child: Stack(
+            children: [
+              if (blogProvider.isLoading)
+                buildLoadingIndicator()
+              else
+                _buildContent(blogProvider),
+            ],
+          ),
+        ),
       ],
     );
   }