Merge pull request #624 from yeqiling/feature-rank

feat:支持排行榜功能

lib/http/api.dart

@@ -499,4 +499,8 @@ class Api {
 
   /// 发送私信
   static const String sendMsg = '${HttpString.tUrl}/web_im/v1/web_im/send_msg';
+
+  /// 排行榜
+  static const String getRankApi = "/x/web-interface/ranking/v2";
+
 }

lib/http/video.dart

@@ -475,4 +475,27 @@ class VideoHttp {
       return {'status': false, 'data': []};
     }
   }
+
+  // 视频排行
+  static Future getRankVideoList(int rid) async {
+    try {
+      var rankApi = "${Api.getRankApi}?rid=$rid&type=all";
+      var res = await Request().get(rankApi);
+      if (res.data['code'] == 0) {
+        List<HotVideoItemModel> list = [];
+        List<int> blackMidsList =
+            setting.get(SettingBoxKey.blackMidsList, defaultValue: [-1]);
+        for (var i in res.data['data']['list']) {
+          if (!blackMidsList.contains(i['owner']['mid'])) {
+            list.add(HotVideoItemModel.fromJson(i));
+          }
+        }
+        return {'status': true, 'data': list};
+      } else {
+        return {'status': false, 'data': [], 'msg': res.data['message']};
+      }
+    } catch (err) {
+      return {'status': false, 'data': [], 'msg': err};
+    }
+  }
 }

lib/models/common/nav_bar_config.dart

@@ -16,6 +16,19 @@ List defaultNavigationBars = [
   },
   {
     'id': 1,
+    'icon': const Icon(
+      Icons.trending_up,
+      size: 21,
+    ),
+    'selectIcon': const Icon(
+      Icons.trending_up_outlined,
+      size: 21,
+    ),
+    'label': "排行榜",
+    'count': 0,
+  },
+  {
+    'id': 2,
     'icon': const Icon(
       Icons.motion_photos_on_outlined,
       size: 21,
@@ -28,7 +41,7 @@ List defaultNavigationBars = [
     'count': 0,
   },
   {
-    'id': 2,
+    'id': 3,
     'icon': const Icon(
       Icons.video_collection_outlined,
       size: 20,

lib/models/common/rank_type.dart

@@ -0,0 +1,240 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/pages/rank/zone/index.dart';
+
+enum RandType {
+  all,
+  creation,
+  animation,
+  music,
+  dance,
+  game,
+  knowledge,
+  technology,
+  sport,
+  car,
+  life,
+  food,
+  animal,
+  madness,
+  fashion,
+  entertainment,
+  film,
+  origin,
+  rookie
+}
+
+extension RankTypeDesc on RandType {
+  String get description => [
+        '全站',
+        '国创相关',
+        '动画',
+        '音乐',
+        '舞蹈',
+        '游戏',
+        '知识',
+        '科技',
+        '运动',
+        '汽车',
+        '生活',
+        '美食',
+        '动物圈',
+        '鬼畜',
+        '时尚',
+        '娱乐',
+        '影视'
+      ][index];
+
+  String get id => [
+        'all',
+        'creation',
+        'animation',
+        'music',
+        'dance',
+        'game',
+        'knowledge',
+        'technology',
+        'sport',
+        'car',
+        'life',
+        'food',
+        'animal',
+        'madness',
+        'fashion',
+        'entertainment',
+        'film'
+      ][index];
+}
+
+List tabsConfig = [
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '全站',
+    'type': RandType.all,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 0),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '国创相关',
+    'type': RandType.creation,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 168),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '动画',
+    'type': RandType.animation,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 1),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '音乐',
+    'type': RandType.music,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 3),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '舞蹈',
+    'type': RandType.dance,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 129),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '游戏',
+    'type': RandType.game,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 4),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '知识',
+    'type': RandType.knowledge,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 36),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '科技',
+    'type': RandType.technology,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 188),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '运动',
+    'type': RandType.sport,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 234),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '汽车',
+    'type': RandType.car,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 223),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '生活',
+    'type': RandType.life,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 160),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '美食',
+    'type': RandType.food,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 211),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '动物圈',
+    'type': RandType.animal,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 217),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '鬼畜',
+    'type': RandType.madness,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 119),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '时尚',
+    'type': RandType.fashion,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 155),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '娱乐',
+    'type': RandType.entertainment,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 5),
+  },
+  {
+    'icon': const Icon(
+      Icons.live_tv_outlined,
+      size: 15,
+    ),
+    'label': '影视',
+    'type': RandType.film,
+    'ctr': Get.put<ZoneController>,
+    'page': const ZonePage(rid: 181),
+  }
+];

lib/pages/main/controller.dart

@@ -9,6 +9,7 @@ import 'package:pilipala/http/common.dart';
 import 'package:pilipala/pages/dynamics/index.dart';
 import 'package:pilipala/pages/home/view.dart';
 import 'package:pilipala/pages/media/index.dart';
+import 'package:pilipala/pages/rank/index.dart';
 import 'package:pilipala/utils/storage.dart';
 import 'package:pilipala/utils/utils.dart';
 import '../../models/common/dynamic_badge_mode.dart';
@@ -17,6 +18,7 @@ import '../../models/common/nav_bar_config.dart';
 class MainController extends GetxController {
   List<Widget> pages = <Widget>[
     const HomePage(),
+    const RankPage(),
     const DynamicsPage(),
     const MediaPage(),
   ];

lib/pages/main/view.dart

@@ -7,6 +7,7 @@ import 'package:pilipala/models/common/dynamic_badge_mode.dart';
 import 'package:pilipala/pages/dynamics/index.dart';
 import 'package:pilipala/pages/home/index.dart';
 import 'package:pilipala/pages/media/index.dart';
+import 'package:pilipala/pages/rank/index.dart';
 import 'package:pilipala/utils/event_bus.dart';
 import 'package:pilipala/utils/feed_back.dart';
 import 'package:pilipala/utils/storage.dart';
@@ -22,6 +23,7 @@ class MainApp extends StatefulWidget {
 class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
   final MainController _mainController = Get.put(MainController());
   final HomeController _homeController = Get.put(HomeController());
+  final RankController _rankController = Get.put(RankController());
   final DynamicsController _dynamicController = Get.put(DynamicsController());
   final MediaController _mediaController = Get.put(MediaController());
 
@@ -57,6 +59,21 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
       _homeController.flag = false;
     }
 
+    if (currentPage is RankPage) {
+      if (_rankController.flag) {
+        // 单击返回顶部 双击并刷新
+        if (DateTime.now().millisecondsSinceEpoch - _lastSelectTime! < 500) {
+          _rankController.onRefresh();
+        } else {
+          _rankController.animateToTop();
+        }
+        _lastSelectTime = DateTime.now().millisecondsSinceEpoch;
+      }
+      _rankController.flag = true;
+    } else {
+      _rankController.flag = false;
+    }
+
     if (currentPage is DynamicsPage) {
       if (_dynamicController.flag) {
         // 单击返回顶部 双击并刷新

lib/pages/rank/controller.dart

@@ -0,0 +1,70 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:hive/hive.dart';
+import 'package:pilipala/models/common/rank_type.dart';
+import 'package:pilipala/utils/storage.dart';
+
+class RankController extends GetxController with GetTickerProviderStateMixin {
+  bool flag = false;
+  late RxList tabs = [].obs;
+  RxInt initialIndex = 1.obs;
+  late TabController tabController;
+  late List tabsCtrList;
+  late List<Widget> tabsPageList;
+  Box setting = GStrorage.setting;
+  late final StreamController<bool> searchBarStream =
+      StreamController<bool>.broadcast();
+  late bool enableGradientBg;
+
+  @override
+  void onInit() {
+    super.onInit();
+    enableGradientBg =
+        setting.get(SettingBoxKey.enableGradientBg, defaultValue: true);
+    // 进行tabs配置
+    setTabConfig();
+  }
+
+  void onRefresh() {
+    int index = tabController.index;
+    var ctr = tabsCtrList[index];
+    ctr().onRefresh();
+  }
+
+  void animateToTop() {
+    int index = tabController.index;
+    var ctr = tabsCtrList[index];
+    ctr().animateToTop();
+  }
+
+  void setTabConfig() async {
+    tabs.value = tabsConfig;
+    initialIndex.value = 0;
+    tabsCtrList = tabs.map((e) => e['ctr']).toList();
+    tabsPageList = tabs.map<Widget>((e) => e['page']).toList();
+
+    tabController = TabController(
+      initialIndex: initialIndex.value,
+      length: tabs.length,
+      vsync: this,
+    );
+    // 监听 tabController 切换
+    if (enableGradientBg) {
+      tabController.animation!.addListener(() {
+        if (tabController.indexIsChanging) {
+          if (initialIndex.value != tabController.index) {
+            initialIndex.value = tabController.index;
+          }
+        } else {
+          final int temp = tabController.animation!.value.round();
+          if (initialIndex.value != temp) {
+            initialIndex.value = temp;
+            tabController.index = initialIndex.value;
+          }
+        }
+      });
+    }
+  }
+}

lib/pages/rank/index.dart

@@ -0,0 +1,4 @@
+library rank;
+
+export './controller.dart';
+export './view.dart';

lib/pages/rank/view.dart

@@ -0,0 +1,149 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/utils/feed_back.dart';
+import './controller.dart';
+
+class RankPage extends StatefulWidget {
+  const RankPage({Key? key}) : super(key: key);
+
+  @override
+  State<RankPage> createState() => _RankPageState();
+}
+
+class _RankPageState extends State<RankPage>
+    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
+  final RankController _rankController = Get.put(RankController());
+  List videoList = [];
+  late Stream<bool> stream;
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    stream = _rankController.searchBarStream.stream;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    Brightness currentBrightness = MediaQuery.of(context).platformBrightness;
+    // 设置状态栏图标的亮度
+    if (_rankController.enableGradientBg) {
+      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
+        statusBarIconBrightness: currentBrightness == Brightness.light
+            ? Brightness.dark
+            : Brightness.light,
+      ));
+    }
+    return Scaffold(
+      extendBody: true,
+      extendBodyBehindAppBar: false,
+      appBar: _rankController.enableGradientBg
+          ? null
+          : AppBar(toolbarHeight: 0, elevation: 0),
+      body: Stack(
+        children: [
+          // gradient background
+          if (_rankController.enableGradientBg) ...[
+            Align(
+              alignment: Alignment.topLeft,
+              child: Opacity(
+                opacity: 0.6,
+                child: Container(
+                  width: MediaQuery.of(context).size.width,
+                  height: MediaQuery.of(context).size.height,
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                        colors: [
+                          Theme.of(context)
+                              .colorScheme
+                              .primary
+                              .withOpacity(0.9),
+                          Theme.of(context)
+                              .colorScheme
+                              .primary
+                              .withOpacity(0.5),
+                          Theme.of(context).colorScheme.surface
+                        ],
+                        begin: Alignment.topLeft,
+                        end: Alignment.bottomRight,
+                        stops: const [0, 0.0034, 0.34]),
+                  ),
+                ),
+              ),
+            ),
+          ],
+          Column(
+            children: [
+              const CustomAppBar(),
+              if (_rankController.tabs.length > 1) ...[
+                const SizedBox(height: 4),
+                SizedBox(
+                  width: double.infinity,
+                  height: 42,
+                  child: Align(
+                    alignment: Alignment.center,
+                    child: TabBar(
+                      controller: _rankController.tabController,
+                      tabs: [
+                        for (var i in _rankController.tabs)
+                          Tab(text: i['label'])
+                      ],
+                      isScrollable: true,
+                      dividerColor: Colors.transparent,
+                      enableFeedback: true,
+                      splashBorderRadius: BorderRadius.circular(10),
+                      tabAlignment: TabAlignment.center,
+                      onTap: (value) {
+                        feedBack();
+                        if (_rankController.initialIndex.value == value) {
+                          _rankController.tabsCtrList[value]().animateToTop();
+                        }
+                        _rankController.initialIndex.value = value;
+                      },
+                    ),
+                  ),
+                ),
+              ] else ...[
+                const SizedBox(height: 6),
+              ],
+              Expanded(
+                child: TabBarView(
+                  controller: _rankController.tabController,
+                  children: _rankController.tabsPageList,
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final double height;
+
+  const CustomAppBar({
+    super.key,
+    this.height = kToolbarHeight,
+  });
+
+  @override
+  Size get preferredSize => Size.fromHeight(height);
+
+  @override
+  Widget build(BuildContext context) {
+    final double top = MediaQuery.of(context).padding.top;
+    return Container(
+      width: MediaQuery.of(context).size.width,
+      height: top,
+      color: Colors.transparent,
+    );
+  }
+}

lib/pages/rank/zone/controller.dart

@@ -0,0 +1,53 @@
+import 'package:get/get.dart';
+import 'package:flutter/material.dart';
+import 'package:pilipala/http/video.dart';
+import 'package:pilipala/models/model_hot_video_item.dart';
+
+class ZoneController extends GetxController {
+  final ScrollController scrollController = ScrollController();
+  RxList<HotVideoItemModel> videoList = <HotVideoItemModel>[].obs;
+  bool isLoadingMore = false;
+  bool flag = false;
+  OverlayEntry? popupDialog;
+  int zoneID = 0;
+
+  // 获取推荐
+  Future queryRankFeed(type, rid) async {
+    zoneID = rid;
+    var res = await VideoHttp.getRankVideoList(zoneID);
+    if (res['status']) {
+      if (type == 'init') {
+        videoList.value = res['data'];
+      } else if (type == 'onRefresh') {
+        videoList.clear();
+        videoList.addAll(res['data']);
+      } else if (type == 'onLoad') {
+        videoList.clear();
+        videoList.addAll(res['data']);
+      }
+    }
+    isLoadingMore = false;
+    return res;
+  }
+
+  // 下拉刷新
+  Future onRefresh() async {
+    queryRankFeed('onRefresh', zoneID);
+  }
+
+  // 上拉加载
+  Future onLoad() async {
+    queryRankFeed('onLoad', zoneID);
+  }
+
+  // 返回顶部并刷新
+  void animateToTop() async {
+    if (scrollController.offset >=
+        MediaQuery.of(Get.context!).size.height * 5) {
+      scrollController.jumpTo(0);
+    } else {
+      await scrollController.animateTo(0,
+          duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);
+    }
+  }
+}

lib/pages/rank/zone/index.dart

@@ -0,0 +1,4 @@
+library rank.zone;
+
+export './controller.dart';
+export './view.dart';

lib/pages/rank/zone/view.dart

@@ -0,0 +1,148 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/common/constants.dart';
+import 'package:pilipala/common/widgets/animated_dialog.dart';
+import 'package:pilipala/common/widgets/overlay_pop.dart';
+import 'package:pilipala/common/skeleton/video_card_h.dart';
+import 'package:pilipala/common/widgets/http_error.dart';
+import 'package:pilipala/common/widgets/video_card_h.dart';
+import 'package:pilipala/pages/home/index.dart';
+import 'package:pilipala/pages/main/index.dart';
+import 'package:pilipala/pages/rank/zone/index.dart';
+
+class ZonePage extends StatefulWidget {
+  const ZonePage({Key? key, required this.rid}) : super(key: key);
+
+  final int rid;
+
+  @override
+  State<ZonePage> createState() => _ZonePageState();
+}
+
+class _ZonePageState extends State<ZonePage> {
+  final ZoneController _zoneController = Get.put(ZoneController());
+  List videoList = [];
+  Future? _futureBuilderFuture;
+  late ScrollController scrollController;
+
+  @override
+  void initState() {
+    super.initState();
+    _futureBuilderFuture = _zoneController.queryRankFeed('init', widget.rid);
+    scrollController = _zoneController.scrollController;
+    StreamController<bool> mainStream =
+        Get.find<MainController>().bottomBarStream;
+    StreamController<bool> searchBarStream =
+        Get.find<HomeController>().searchBarStream;
+    scrollController.addListener(
+      () {
+        if (scrollController.position.pixels >=
+            scrollController.position.maxScrollExtent - 200) {
+          if (!_zoneController.isLoadingMore) {
+            _zoneController.isLoadingMore = true;
+            _zoneController.onLoad();
+          }
+        }
+
+        final ScrollDirection direction =
+            scrollController.position.userScrollDirection;
+        if (direction == ScrollDirection.forward) {
+          mainStream.add(true);
+          searchBarStream.add(true);
+        } else if (direction == ScrollDirection.reverse) {
+          mainStream.add(false);
+          searchBarStream.add(false);
+        }
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    scrollController.removeListener(() {});
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RefreshIndicator(
+      onRefresh: () async {
+        return await _zoneController.onRefresh();
+      },
+      child: CustomScrollView(
+        controller: _zoneController.scrollController,
+        slivers: [
+          SliverPadding(
+            // 单列布局 EdgeInsets.zero
+            padding:
+                const EdgeInsets.fromLTRB(0, StyleString.safeSpace - 5, 0, 0),
+            sliver: FutureBuilder(
+              future: _futureBuilderFuture,
+              builder: (context, snapshot) {
+                if (snapshot.connectionState == ConnectionState.done) {
+                  Map data = snapshot.data as Map;
+                  if (data['status']) {
+                    return Obx(
+                      () => SliverList(
+                        delegate: SliverChildBuilderDelegate((context, index) {
+                          return VideoCardH(
+                            videoItem: _zoneController.videoList[index],
+                            showPubdate: true,
+                            longPress: () {
+                              _zoneController.popupDialog = _createPopupDialog(
+                                  _zoneController.videoList[index]);
+                              Overlay.of(context)
+                                  .insert(_zoneController.popupDialog!);
+                            },
+                            longPressEnd: () {
+                              _zoneController.popupDialog?.remove();
+                            },
+                          );
+                        }, childCount: _zoneController.videoList.length),
+                      ),
+                    );
+                  } else {
+                    return HttpError(
+                      errMsg: data['msg'],
+                      fn: () {
+                        setState(() {
+                          _futureBuilderFuture =
+                              _zoneController.queryRankFeed('init', widget.rid);
+                        });
+                      },
+                    );
+                  }
+                } else {
+                  // 骨架屏
+                  return SliverList(
+                    delegate: SliverChildBuilderDelegate((context, index) {
+                      return const VideoCardHSkeleton();
+                    }, childCount: 10),
+                  );
+                }
+              },
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: SizedBox(
+              height: MediaQuery.of(context).padding.bottom + 10,
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  OverlayEntry _createPopupDialog(videoItem) {
+    return OverlayEntry(
+      builder: (context) => AnimatedDialog(
+        closeFn: _zoneController.popupDialog?.remove,
+        child: OverlayPop(
+            videoItem: videoItem, closeFn: _zoneController.popupDialog?.remove),
+      ),
+    );
+  }
+}