ranking page

lib/pages/download_page.dart

@@ -0,0 +1,15 @@
+import 'package:fluent_ui/fluent_ui.dart';
+
+class DownloadPage extends StatefulWidget {
+  const DownloadPage({super.key});
+
+  @override
+  State<DownloadPage> createState() => _DownloadPageState();
+}
+
+class _DownloadPageState extends State<DownloadPage> {
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/pages/explore_page.dart

@@ -1,12 +0,0 @@
-import 'package:flutter/widgets.dart';
-
-class ExplorePage extends StatelessWidget {
-  const ExplorePage({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const Center(
-      child: Text("Explore"),
-    );
-  }
-}

lib/pages/main_page.dart

@@ -8,8 +8,8 @@ import "package:pixes/components/md.dart";
 import "package:pixes/foundation/app.dart";
 import "package:pixes/network/network.dart";
 import "package:pixes/pages/bookmarks.dart";
-import "package:pixes/pages/explore_page.dart";
 import "package:pixes/pages/following_artworks.dart";
+import "package:pixes/pages/ranking.dart";
 import "package:pixes/pages/recommendation_page.dart";
 import "package:pixes/pages/login_page.dart";
 import "package:pixes/pages/search_page.dart";
@@ -20,6 +20,7 @@ import "package:pixes/utils/translation.dart";
 import "package:window_manager/window_manager.dart";
 
 import "../components/page_route.dart";
+import "download_page.dart";
 
 const _kAppBarHeight = 36.0;
 
@@ -33,7 +34,7 @@ class MainPage extends StatefulWidget {
 class _MainPageState extends State<MainPage> with WindowListener {
   final navigatorKey = GlobalKey<NavigatorState>();
 
-  int index = 2;
+  int index = 3;
 
   int windowButtonKey = 0;
 
@@ -100,8 +101,13 @@ class _MainPageState extends State<MainPage> with WindowListener {
                     title: Text('Search'.tl),
                     body: const SizedBox.shrink(),
                   ),
+                  PaneItem(
+                    icon: const Icon(MdIcons.download, size: 20,),
+                    title: Text('Download'.tl),
+                    body: const SizedBox.shrink(),
+                  ),
                   PaneItemSeparator(),
-                  PaneItemHeader(header: Text("Artwork".tl).paddingVertical(4).paddingLeft(8)),
+                  PaneItemHeader(header: Text("Artwork".tl).paddingBottom(4).paddingLeft(8)),
                   PaneItem(
                     icon: const Icon(MdIcons.explore_outlined, size: 20,),
                     title: Text('Explore'.tl),
@@ -117,10 +123,9 @@ class _MainPageState extends State<MainPage> with WindowListener {
                     title: Text('Following'.tl),
                     body: const SizedBox.shrink(),
                   ),
-                  PaneItemSeparator(),
                   PaneItem(
-                    icon: const Icon(MdIcons.explore_outlined, size: 20),
-                    title: Text('Explore'.tl),
+                    icon: const Icon(MdIcons.leaderboard_outlined, size: 20),
+                    title: Text('Ranking'.tl),
                     body: const SizedBox.shrink(),
                   ),
                 ],
@@ -140,13 +145,14 @@ class _MainPageState extends State<MainPage> with WindowListener {
         ));
   }
 
-  static final pageBuilders = [
+  static final pageBuilders = <Widget Function()>[
     () => UserInfoPage(appdata.account!.user.id),
     () => const SearchPage(),
+    () => const DownloadPage(),
     () => const RecommendationPage(),
     () => const BookMarkedArtworkPage(),
     () => const FollowingArtworksPage(),
-    () => const ExplorePage(),
+    () => const RankingPage(),
     () => const SettingsPage(),
   ];
 

lib/pages/ranking.dart

@@ -1,4 +1,11 @@
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+import 'package:pixes/foundation/app.dart';
+import 'package:pixes/utils/translation.dart';
+
+import '../components/illust_widget.dart';
+import '../components/loading.dart';
+import '../network/network.dart';
 
 class RankingPage extends StatefulWidget {
   const RankingPage({super.key});
@@ -8,8 +15,104 @@ class RankingPage extends StatefulWidget {
 }
 
 class _RankingPageState extends State<RankingPage> {
+  String type = "day";
+
+  /// mode: day, week, month, day_male, day_female, week_original, week_rookie, day_manga, week_manga, month_manga, day_r18_manga, day_r18
+  static const types = {
+    "day": "Daily",
+    "week": "Weekly",
+    "month": "Monthly",
+    "day_male": "For male",
+    "day_female": "For female",
+    "week_original": "Originals",
+    "week_rookie": "Rookies",
+    "day_manga": "Daily Manga",
+    "week_manga": "Weekly Manga",
+    "month_manga": "Monthly Manga",
+    "day_r18_manga": "R18",
+  };
+
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return ScaffoldPage(
+      padding: EdgeInsets.zero,
+      content: Column(
+        children: [
+          buildHeader(),
+          Expanded(
+            child: _OneRankingPage(type, key: Key(type),),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget buildHeader() {
+    return SizedBox(
+      child: Row(
+        children: [
+          Text("Ranking".tl, style: const TextStyle(
+              fontSize: 20, fontWeight: FontWeight.bold),),
+          const Spacer(),
+          DropDownButton(
+            title: Text(types[type]!),
+            items: types.entries.map((e) => MenuFlyoutItem(
+              text: Text(e.value.tl),
+              onPressed: () {
+                setState(() {
+                  type = e.key;
+                });
+              },
+            )).toList(),
+          )
+        ],
+      )
+    ).padding(const EdgeInsets.symmetric(vertical: 8, horizontal: 12));
   }
 }
+
+class _OneRankingPage extends StatefulWidget {
+  const _OneRankingPage(this.type, {super.key});
+
+  final String type;
+
+  @override
+  State<_OneRankingPage> createState() => _OneRankingPageState();
+}
+
+class _OneRankingPageState extends MultiPageLoadingState<_OneRankingPage, Illust> {
+  @override
+  Widget buildContent(BuildContext context, final List<Illust> data) {
+    return LayoutBuilder(builder: (context, constrains){
+      return MasonryGridView.builder(
+        gridDelegate: const SliverSimpleGridDelegateWithMaxCrossAxisExtent(
+          maxCrossAxisExtent: 240,
+        ),
+        itemCount: data.length,
+        itemBuilder: (context, index) {
+          if(index == data.length - 1){
+            nextPage();
+          }
+          return IllustWidget(data[index]);
+        },
+      );
+    });
+  }
+
+  String? nextUrl;
+
+  @override
+  Future<Res<List<Illust>>> loadData(page) async{
+    if(nextUrl == "end") {
+      return Res.error("No more data");
+    }
+    var res = await Network().getRanking(widget.type, nextUrl);
+    if(!res.error) {
+      nextUrl = res.subData;
+      nextUrl ??= "end";
+    }
+    return res;
+  }
+}
+
+