factor:布局颜色重构

lib/main.dart

@@ -27,7 +27,7 @@ class MyApp extends StatelessWidget {
       home: HomePage(),
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
-        scaffoldBackgroundColor: Color(0xFFF5F5F5),
+        useMaterial3: true,
         fontFamily: 'CustomFont',
       ),
     );

lib/pages/blog_page.dart

@@ -84,7 +84,7 @@ class _BlogPageState extends State<BlogPage> {
       );
     }
 
-    return ListView.builder(
+    return ListView.separated(
       controller: _scrollController,
       itemCount: provider.blogList.length,
       itemBuilder: (context, index) {
@@ -94,6 +94,9 @@ class _BlogPageState extends State<BlogPage> {
           child: BlogCard(blog: blog),
         );
       },
+      separatorBuilder: (BuildContext context, int index) {
+        return SizedBox(height: 8);
+      },
     );
   }
 

lib/pages/category_list_page.dart

@@ -24,7 +24,7 @@ class _CategoryListPageState extends State<CategoryListPage> {
   }
 
   Widget _buildBlogList(BlogProvider provider) {
-    return ListView.builder(
+    return ListView.separated(
       itemCount: provider.blogList.length,
       itemBuilder: (context, index) {
         final blog = provider.blogList[index];
@@ -33,6 +33,9 @@ class _CategoryListPageState extends State<CategoryListPage> {
           child: buildBlogListItem(context, blog, index + 1),
         );
       },
+      separatorBuilder: (BuildContext context, int index) {
+        return SizedBox(height: 8);
+      },
     );
   }
 

lib/pages/category_page.dart

@@ -36,12 +36,15 @@ class _CategoryPageState extends State<CategoryPage> {
         SizedBox(height: 10),
         // 分类列表
         Expanded(
-          child: ListView.builder(
+          child: ListView.separated(
             itemCount: provider.categoryList.length,
             itemBuilder: (context, index) {
               final category = provider.categoryList[index];
               return buildCategoryCard(context, category);
             },
+            separatorBuilder: (BuildContext context, int index) {
+              return SizedBox(height: 8);
+            },
           ),
         ),
       ],

lib/pages/stats_page.dart

@@ -1,3 +1,4 @@
+import 'package:blog_app/utils/index.dart';
 import 'package:provider/provider.dart';
 import 'package:blog_app/provider/blog.dart';
 import 'package:blog_app/widget/blog.dart';
@@ -131,29 +132,35 @@ class StatsPageState extends State<StatsPage> {
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
       childAspectRatio: 2,
+      mainAxisSpacing: 8,
+      crossAxisSpacing: 8,
       children: [
         buildStatsCard(
+          icon: Icons.article,
           context: context,
           title: '博客数量',
-          count: provider.overviewStats.blogCount,
+          count: provider.overviewStats.blogCount.toString(),
           unit: '篇',
         ),
         buildStatsCard(
+          icon: Icons.folder,
           context: context,
           title: '分类数量',
-          count: provider.overviewStats.categoryCount,
+          count: provider.overviewStats.categoryCount.toString(),
           unit: '个',
         ),
         buildStatsCard(
+          icon: Icons.remove_red_eye,
           context: context,
           title: '访问量',
-          count: provider.overviewStats.visitCount,
+          count: formatChineseDecimal(provider.overviewStats.visitCount),
           unit: '次',
         ),
         buildStatsCard(
+          icon: Icons.text_fields,
           context: context,
           title: '总字数',
-          count: provider.overviewStats.wordCount,
+          count: formatChineseDecimal(provider.overviewStats.wordCount),
           unit: '字',
         ),
       ],
@@ -181,44 +188,32 @@ class StatsPageState extends State<StatsPage> {
             });
           },
         ),
-        const SizedBox(height: 6),
+        const SizedBox(height: 8),
         _buildBlogStatsGrid(provider),
-        const SizedBox(height: 6),
+        const SizedBox(height: 8),
         SizedBox(
           height: chartHeight,
-          child: buildCard(
+          child: BuildCard(child: _buildApprovedStats(provider)),
-            context: context,
-            child: _buildApprovedStats(provider),
-          ),
         ),
-        const SizedBox(height: 6),
+        const SizedBox(height: 8),
         SizedBox(
           height: chartHeight,
-          child: buildCard(context: context, child: _buildVisitStats(provider)),
+          child: BuildCard(child: _buildVisitStats(provider)),
         ),
-        const SizedBox(height: 6),
+        const SizedBox(height: 8),
         SizedBox(
           height: chartHeight,
-          child: buildCard(
+          child: BuildCard(child: _buildVisitRankStats(provider)),
-            context: context,
-            child: _buildVisitRankStats(provider),
-          ),
         ),
-        const SizedBox(height: 6),
+        const SizedBox(height: 8),
         SizedBox(
           height: chartHeight,
-          child: buildCard(
+          child: BuildCard(child: _buildCategoryStats(provider)),
-            context: context,
-            child: _buildCategoryStats(provider),
-          ),
         ),
-        const SizedBox(height: 6),
+        const SizedBox(height: 8),
         SizedBox(
           height: chartHeight,
-          child: buildCard(
+          child: BuildCard(child: _buildReadRankStats(provider)),
-            context: context,
-            child: _buildReadRankStats(provider),
-          ),
         ),
       ],
     );
@@ -233,8 +228,8 @@ class StatsPageState extends State<StatsPage> {
         if (blogProvider.isLoading)
           buildLoadingIndicator()
         else
-          SingleChildScrollView(child: _buildContent(blogProvider))
+          SingleChildScrollView(child: _buildContent(blogProvider)),
-      ]
+      ],
     );
   }
 }

lib/pages/timeline_page.dart

@@ -28,7 +28,7 @@ class TimelinePageState extends State<TimelinePage> {
 
     return Timeline.tileBuilder(
       theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
-      padding: EdgeInsets.all(6),
+      padding: EdgeInsets.all(0),
       builder: TimelineTileBuilder.connected(
         itemCount: provider.blogList.length,
         connectorBuilder:
@@ -39,9 +39,12 @@ class TimelinePageState extends State<TimelinePage> {
         },
         contentsBuilder: (context, index) {
           final blog = provider.blogList[index];
-          return InkWell(
+          return Padding(
-            onTap: () => navigatorToBlogDetail(context, blog.id),
+            padding: const EdgeInsets.symmetric(vertical: 4.0),
-            child: buildBlogListItem(context, blog, index + 1),
+            child: InkWell(
+              onTap: () => navigatorToBlogDetail(context, blog.id),
+              child: buildBlogListItem(context, blog, index + 1),
+            ),
           );
         },
       ),

lib/utils/index.dart

@@ -26,3 +26,28 @@ PageResult<T> convertPageResponse<T>(
     'Expected a Map for page response conversion, but got ${data.runtimeType}',
   );
 }
+
+/// 将数字格式化为中文单位（万/亿）
+String formatChineseDecimal(num number, {int decimalPlaces = 2}) {
+  if (number < 10000) {
+    return number.toString();
+  } else if (number < 100000000) {
+    // 万单位
+    double result = number / 10000.0;
+    return '${_formatDecimal(result, decimalPlaces)}万';
+  } else {
+    // 亿单位
+    double result = number / 100000000.0;
+    return '${_formatDecimal(result, decimalPlaces)}亿';
+  }
+}
+
+String _formatDecimal(double number, int decimalPlaces) {
+  // 去除末尾的0和小数点
+  String formatted = number.toStringAsFixed(decimalPlaces);
+  if (formatted.contains('.')) {
+    formatted = formatted.replaceAll(RegExp(r'0*$'), '');
+    formatted = formatted.replaceAll(RegExp(r'\.$'), '');
+  }
+  return formatted;
+}

lib/widget/blog.dart

@@ -53,7 +53,7 @@ class BlogCard extends StatelessWidget {
         alignment: WrapAlignment.center,
         children: [
           if (blog.isGreat)
-            _buildBlogLabelItem('精品', Icons.workspace_premium, Colors.amber),
+            _buildBlogLabelItem('精品', Icons.workspace_premium, Colors.deepOrange),
           if (blog.topValue > 1)
             _buildBlogLabelItem('置顶', Icons.push_pin, Colors.red),
           _buildBlogLabelItem(blog.category, Icons.folder, Colors.blue),
@@ -114,26 +114,20 @@ class BlogCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return buildCard(
+    final colors = Theme.of(context).colorScheme;
-      context: context,
+
-      child: Padding(
+    return BuildCard(
-        padding: EdgeInsets.all(12),
+      child: Column(
-        child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
-          children: [
+          _buildBlogTitle(context),
-            _buildBlogTitle(context),
+          SizedBox(height: 16),
-            SizedBox(height: 16),
+          _buildBlogLabel(),
-            _buildBlogLabel(),
+          SizedBox(height: 16),
-            SizedBox(height: 16),
+          Container(height: 1, width: 80, color: colors.primary),
-            Container(
+          SizedBox(height: 16),
-              height: 1,
+          _buildBlogSummary(),
-              width: 80,
+        ],
-              color: Theme.of(context).colorScheme.primary,
-            ),
-            SizedBox(height: 16),
-            _buildBlogSummary(),
-          ],
-        ),
       ),
     );
   }
@@ -164,8 +158,7 @@ Widget buildCategoryTitle(BuildContext context, int count) {
 Widget buildCategoryCard(BuildContext context, BlogCategory category) {
   final colors = Theme.of(context).colorScheme;
 
-  return buildCard(
+  return BuildCard(
-    context: context,
     child: ListTile(
       leading: Container(
         width: 50,
@@ -222,18 +215,12 @@ Widget buildListTitle(int count) {
 Widget buildBlogListItem(BuildContext context, Blog blog, int index) {
   final colors = Theme.of(context).colorScheme;
 
-  return buildCard(
+  return BuildCard(
-    context: context,
     child: Padding(
-      padding: EdgeInsets.all(10),
+      padding: EdgeInsets.all(0),
       child: Row(
         children: [
-          Text(
+          Text('$index.', style: TextStyle(fontWeight: FontWeight.w500)),
-            '$index.',
-            style: TextStyle(
-              fontWeight: FontWeight.w500
-            ),
-          ),
           SizedBox(width: 10),
           Text(
             formatDateString(blog.createTime),
@@ -260,48 +247,65 @@ Widget buildBlogListItem(BuildContext context, Blog blog, int index) {
 
 Widget buildStatsCard({
   required BuildContext context,
+  required IconData icon,
   required String title,
-  required int count,
+  required String count,
   required String unit,
 }) {
-  return buildCard(
+  final colors = Theme.of(context).colorScheme;
-    context: context,
+
-    child: Column(
+  return BuildCard(
-      mainAxisAlignment: MainAxisAlignment.center,
+    child: Row(
-      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        Text(
+        Container(
-          title,
+          padding: const EdgeInsets.all(12),
-          style: TextStyle(
+          decoration: BoxDecoration(
-            fontSize: 16,
+            color: colors.primary.withAlpha(50),
-            color: Colors.grey.shade600,
+            shape: BoxShape.circle,
-            fontWeight: FontWeight.w500,
           ),
+          child: Icon(icon, size: 26, color: colors.primary),
         ),
-        const SizedBox(height: 12),
+        SizedBox(width: 6),
-        Row(
+        Expanded(
-          mainAxisAlignment: MainAxisAlignment.center,
+          child: Column(
-          crossAxisAlignment: CrossAxisAlignment.end,
+            mainAxisAlignment: MainAxisAlignment.center,
-          children: [
+            crossAxisAlignment: CrossAxisAlignment.center,
-            Text(
+            children: [
-              count.toString(),
+              Text(
-              style: const TextStyle(
+                title,
-                fontSize: 28,
+                style: TextStyle(
-                fontWeight: FontWeight.bold,
+                  fontSize: 16,
-                color: Colors.black87,
+                  color: Colors.grey.shade600,
-                height: 1.0,
+                  fontWeight: FontWeight.w500,
+                ),
               ),
-            ),
+              const SizedBox(height: 6),
-            const SizedBox(width: 4),
+              Row(
-            Text(
+                mainAxisAlignment: MainAxisAlignment.center,
-              unit,
+                crossAxisAlignment: CrossAxisAlignment.end,
-              style: TextStyle(
+                children: [
-                fontSize: 14,
+                  Text(
-                color: Colors.grey.shade600,
+                    count,
-                fontWeight: FontWeight.w500,
+                    style: TextStyle(
+                      fontSize: 28,
+                      fontWeight: FontWeight.bold,
+                      color: colors.primary,
+                      height: 1.0,
+                    ),
+                  ),
+                  const SizedBox(width: 4),
+                  Text(
+                    unit,
+                    style: TextStyle(
+                      fontSize: 14,
+                      color: Colors.grey.shade600,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ],
               ),
-            ),
+            ],
-          ],
+          ),
         ),
       ],
     ),

lib/widget/common.dart

@@ -1,20 +1,23 @@
 import 'package:flutter/material.dart';
 
-Widget buildCard({required BuildContext context, required Widget child}) {
+class BuildCard extends StatelessWidget {
-  final colors = Theme.of(context).colorScheme;
+  final Widget? child;
-  return Card(
+
-    elevation: 0,
+  const BuildCard({super.key, this.child});
-    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+
-    child: Container(
+  @override
-      width: double.infinity,
+  Widget build(BuildContext context) {
+    final colors = Theme.of(context).colorScheme;
+
+    return Container(
       decoration: BoxDecoration(
-        color: colors.surface,
+        color: colors.surfaceContainer,
         borderRadius: BorderRadius.circular(12),
-        border: Border.all(color: colors.outline.withAlpha(50), width: 1),
       ),
-      child: Padding(padding: EdgeInsets.all(8), child: child),
+      padding: const EdgeInsets.all(16),
-    ),
+      child: child,
-  );
+    );
+  }
 }
 
 Widget circleIconButton({

lib/widget/search.dart

@@ -27,8 +27,7 @@ Widget buildSearchField({
 }
 
 Widget buildSearchResultItem(BuildContext context, BlogSearch blog) {
-  return buildCard(
+  return BuildCard(
-    context: context,
     child: ListTile(
       title: Text(
         blog.title,
@@ -56,11 +55,14 @@ Widget buildSearchResultList(
   BuildContext context,
   List<BlogSearch> searchResultList,
 ) {
-  return ListView.builder(
+  return ListView.separated(
     itemCount: searchResultList.length,
     itemBuilder: (context, index) {
       return buildSearchResultItem(context, searchResultList[index]);
     },
+    separatorBuilder: (BuildContext context, int index) {
+      return SizedBox(height: 8);
+    },
   );
 }