feat: search trending page

Closes #684

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>

lib/http/api.dart

@@ -762,4 +762,6 @@ class Api {
       '${HttpString.liveBaseUrl}/xlive/web-ucenter/v2/emoticon/GetEmoticons';
 
   static const String pgcTimeline = '/pgc/web/timeline';
+
+  static const String searchTrending = '/x/v2/search/trending/ranking';
 }

lib/http/search.dart

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'package:PiliPlus/models/search/search_trending/trending_data.dart';
 import 'package:PiliPlus/utils/extension.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
@@ -207,4 +208,19 @@ class SearchHttp {
       return {'status': false, 'msg': res.data['message']};
     }
   }
+
+  static Future<LoadingState<TrendingData>> searchTrending(
+      {int limit = 30}) async {
+    final dynamic res = await Request().get(
+      Api.searchTrending,
+      queryParameters: {
+        'limit': limit,
+      },
+    );
+    if (res.data['code'] == 0) {
+      return LoadingState.success(TrendingData.fromJson(res.data['data']));
+    } else {
+      return LoadingState.error(res.data['message']);
+    }
+  }
 }

lib/models/search/search_trending/search_trending.dart

@@ -0,0 +1,28 @@
+import 'trending_data.dart';
+
+class SearchTrending {
+  int? code;
+  String? message;
+  int? ttl;
+  TrendingData? data;
+
+  SearchTrending({this.code, this.message, this.ttl, this.data});
+
+  factory SearchTrending.fromJson(Map<String, dynamic> json) {
+    return SearchTrending(
+      code: json['code'] as int?,
+      message: json['message'] as String?,
+      ttl: json['ttl'] as int?,
+      data: json['data'] == null
+          ? null
+          : TrendingData.fromJson(json['data'] as Map<String, dynamic>),
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+        'code': code,
+        'message': message,
+        'ttl': ttl,
+        'data': data?.toJson(),
+      };
+}

lib/models/search/search_trending/stat_datas.dart

@@ -0,0 +1,14 @@
+
+class StatDatas {
+	StatDatas();
+
+	factory StatDatas.fromJson(Map<String, dynamic> json) {
+		// TODO: implement fromJson
+		throw UnimplementedError('StatDatas.fromJson($json) is not implemented');
+	}
+
+	Map<String, dynamic> toJson() {
+		// TODO: implement toJson
+		throw UnimplementedError();
+	}
+}

lib/models/search/search_trending/top_list.dart

@@ -0,0 +1,95 @@
+import 'stat_datas.dart';
+
+class TopList {
+	int? hotId;
+	String? keyword;
+	String? showName;
+	int? score;
+	int? wordType;
+	int? gotoType;
+	String? gotoValue;
+	String? icon;
+	List<dynamic>? liveId;
+	int? callReason;
+	String? heatLayer;
+	int? pos;
+	int? id;
+	String? status;
+	String? nameType;
+	int? resourceId;
+	int? setGray;
+	List<dynamic>? cardValues;
+	int? heatScore;
+	StatDatas? statDatas;
+
+	TopList({
+		this.hotId, 
+		this.keyword, 
+		this.showName, 
+		this.score, 
+		this.wordType, 
+		this.gotoType, 
+		this.gotoValue, 
+		this.icon, 
+		this.liveId, 
+		this.callReason, 
+		this.heatLayer, 
+		this.pos, 
+		this.id, 
+		this.status, 
+		this.nameType, 
+		this.resourceId, 
+		this.setGray, 
+		this.cardValues, 
+		this.heatScore, 
+		this.statDatas, 
+	});
+
+	factory TopList.fromJson(Map<String, dynamic> json) => TopList(
+				hotId: json['hot_id'] as int?,
+				keyword: json['keyword'] as String?,
+				showName: json['show_name'] as String?,
+				score: json['score'] as int?,
+				wordType: json['word_type'] as int?,
+				gotoType: json['goto_type'] as int?,
+				gotoValue: json['goto_value'] as String?,
+				icon: json['icon'] as String?,
+				liveId: json['live_id'] as List<dynamic>?,
+				callReason: json['call_reason'] as int?,
+				heatLayer: json['heat_layer'] as String?,
+				pos: json['pos'] as int?,
+				id: json['id'] as int?,
+				status: json['status'] as String?,
+				nameType: json['name_type'] as String?,
+				resourceId: json['resource_id'] as int?,
+				setGray: json['set_gray'] as int?,
+				cardValues: json['card_values'] as List<dynamic>?,
+				heatScore: json['heat_score'] as int?,
+				statDatas: json['stat_datas'] == null
+						? null
+						: StatDatas.fromJson(json['stat_datas'] as Map<String, dynamic>),
+			);
+
+	Map<String, dynamic> toJson() => {
+				'hot_id': hotId,
+				'keyword': keyword,
+				'show_name': showName,
+				'score': score,
+				'word_type': wordType,
+				'goto_type': gotoType,
+				'goto_value': gotoValue,
+				'icon': icon,
+				'live_id': liveId,
+				'call_reason': callReason,
+				'heat_layer': heatLayer,
+				'pos': pos,
+				'id': id,
+				'status': status,
+				'name_type': nameType,
+				'resource_id': resourceId,
+				'set_gray': setGray,
+				'card_values': cardValues,
+				'heat_score': heatScore,
+				'stat_datas': statDatas?.toJson(),
+			};
+}

lib/models/search/search_trending/trending_data.dart

@@ -0,0 +1,28 @@
+import 'package:PiliPlus/models/search/search_trending/trending_list.dart';
+
+class TrendingData {
+  String? trackid;
+  List<TrendingList>? list;
+  List<TrendingList>? topList;
+  String? hotwordEggInfo;
+
+  TrendingData({this.trackid, this.list, this.topList, this.hotwordEggInfo});
+
+  factory TrendingData.fromJson(Map<String, dynamic> json) => TrendingData(
+        trackid: json['trackid'] as String?,
+        list: (json['list'] as List<dynamic>?)
+            ?.map((e) => TrendingList.fromJson(e as Map<String, dynamic>))
+            .toList(),
+        topList: (json['top_list'] as List<dynamic>?)
+            ?.map((e) => TrendingList.fromJson(e as Map<String, dynamic>))
+            .toList(),
+        hotwordEggInfo: json['hotword_egg_info'] as String?,
+      );
+
+  Map<String, dynamic> toJson() => {
+        'trackid': trackid,
+        'list': list?.map((e) => e.toJson()).toList(),
+        'top_list': topList?.map((e) => e.toJson()).toList(),
+        'hotword_egg_info': hotwordEggInfo,
+      };
+}

lib/models/search/search_trending/trending_list.dart

@@ -0,0 +1,47 @@
+class TrendingList {
+  int? position;
+  String? keyword;
+  String? showName;
+  int? wordType;
+  String? icon;
+  int? hotId;
+  String? isCommercial;
+  int? resourceId;
+  bool? showLiveIcon;
+
+  TrendingList({
+    this.position,
+    this.keyword,
+    this.showName,
+    this.wordType,
+    this.icon,
+    this.hotId,
+    this.isCommercial,
+    this.resourceId,
+    this.showLiveIcon,
+  });
+
+  factory TrendingList.fromJson(Map<String, dynamic> json) => TrendingList(
+        position: json['position'] as int?,
+        keyword: json['keyword'] as String?,
+        showName: json['show_name'] as String?,
+        wordType: json['word_type'] as int?,
+        icon: json['icon'] as String?,
+        hotId: json['hot_id'] as int?,
+        isCommercial: json['is_commercial'] as String?,
+        resourceId: json['resource_id'] as int?,
+        showLiveIcon: json['show_live_icon'] as bool?,
+      );
+
+  Map<String, dynamic> toJson() => {
+        'position': position,
+        'keyword': keyword,
+        'show_name': showName,
+        'word_type': wordType,
+        'icon': icon,
+        'hot_id': hotId,
+        'is_commercial': isCommercial,
+        'resource_id': resourceId,
+        'show_live_icon': showLiveIcon,
+      };
+}

lib/pages/search/view.dart

@@ -156,13 +156,7 @@ class _SearchPageState extends State<SearchPage> with RouteAware {
                 GestureDetector(
                   behavior: HitTestBehavior.opaque,
                   onTap: () {
-                    Get.toNamed(
+                    Get.toNamed('/searchTrending');
-                      '/webview',
-                      parameters: {
-                        'url':
-                            'https://www.bilibili.com/blackboard/activity-trending-topic.html?navhide=1&native.theme=1&night=${Get.isDarkMode ? 1 : 0}'
-                      },
-                    );
                   },
                   child: Padding(
                     padding:

lib/pages/search_result/view.dart

@@ -64,7 +64,7 @@ class _SearchResultPageState extends State<SearchResultPage>
         ),
         title: GestureDetector(
           onTap: () {
-            if (Get.previousRoute.startsWith('/search')) {
+            if (Get.previousRoute.startsWith('/search?')) {
               Get.back();
             } else {
               Get.offNamed(

lib/pages/search_trending/controller.dart

@@ -0,0 +1,27 @@
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/http/search.dart';
+import 'package:PiliPlus/models/search/search_trending/trending_data.dart';
+import 'package:PiliPlus/models/search/search_trending/trending_list.dart';
+import 'package:PiliPlus/pages/common/common_list_controller.dart';
+
+class SearchTrendingController
+    extends CommonListController<TrendingData, TrendingList> {
+  int topCount = 0;
+
+  @override
+  void onInit() {
+    super.onInit();
+    queryData();
+  }
+
+  @override
+  List<TrendingList>? getDataList(TrendingData response) {
+    List<TrendingList> topList = (response.topList ?? <TrendingList>[]);
+    topCount = topList.length;
+    return topList + (response.list ?? <TrendingList>[]);
+  }
+
+  @override
+  Future<LoadingState<TrendingData>> customGetData() =>
+      SearchHttp.searchTrending();
+}

lib/pages/search_trending/view.dart

@@ -0,0 +1,207 @@
+import 'package:PiliPlus/common/widgets/http_error.dart';
+import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/search/search_trending/trending_list.dart';
+import 'package:PiliPlus/pages/search_trending/controller.dart';
+import 'package:PiliPlus/utils/extension.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+
+class SearchTrendingPage extends StatefulWidget {
+  const SearchTrendingPage({super.key});
+
+  @override
+  State<SearchTrendingPage> createState() => _SearchTrendingPageState();
+}
+
+class _SearchTrendingPageState extends State<SearchTrendingPage> {
+  final _controller = Get.put(SearchTrendingController());
+
+  late double _offset;
+  final RxDouble _scrollRatio = 0.0.obs;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.scrollController.addListener(listener);
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _offset = Get.width * 528 / 1125 - 56 - Get.mediaQuery.padding.top;
+  }
+
+  @override
+  void dispose() {
+    _controller.scrollController.removeListener(listener);
+    super.dispose();
+  }
+
+  void listener() {
+    _scrollRatio.value = clampDouble(
+      _controller.scrollController.position.pixels / _offset,
+      0.0,
+      1.0,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      extendBody: true,
+      extendBodyBehindAppBar: true,
+      appBar: PreferredSize(
+        preferredSize: Size.fromHeight(56),
+        child: Obx(
+          () {
+            final half = _scrollRatio.value >= 0.5;
+            return AppBar(
+              title: Opacity(
+                opacity: _scrollRatio.value,
+                child: Text(
+                  'B站热搜',
+                  style: TextStyle(
+                    color: half ? null : Colors.white,
+                  ),
+                ),
+              ),
+              backgroundColor: Theme.of(context)
+                  .colorScheme
+                  .surface
+                  .withOpacity(_scrollRatio.value),
+              foregroundColor: half ? null : Colors.white,
+              systemOverlayStyle: half
+                  ? null
+                  : SystemUiOverlayStyle(
+                      statusBarBrightness: Brightness.dark,
+                      statusBarIconBrightness: Brightness.light,
+                    ),
+              bottom: _scrollRatio.value == 1
+                  ? PreferredSize(
+                      preferredSize: Size.fromHeight(1),
+                      child: Divider(
+                        height: 1,
+                        color: Theme.of(context)
+                            .colorScheme
+                            .outline
+                            .withOpacity(0.1),
+                      ),
+                    )
+                  : null,
+            );
+          },
+        ),
+      ),
+      body: refreshIndicator(
+        onRefresh: () async {
+          await _controller.onRefresh();
+        },
+        child: CustomScrollView(
+          controller: _controller.scrollController,
+          slivers: [
+            SliverToBoxAdapter(
+              child: CachedNetworkImage(
+                fit: BoxFit.fitWidth,
+                imageUrl:
+                    'https://activity.hdslb.com/blackboard/activity59158/img/hot_banner.fbb081df.png',
+              ),
+            ),
+            Obx(() => _buildBody(_controller.loadingState.value)),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildBody(LoadingState<List<TrendingList>?> loadingState) {
+    return switch (loadingState) {
+      Loading() => SliverToBoxAdapter(child: LinearProgressIndicator()),
+      Success() => loadingState.response?.isNotEmpty == true
+          ? SliverPadding(
+              padding: EdgeInsets.only(
+                  bottom: MediaQuery.paddingOf(context).bottom + 100),
+              sliver: SliverList.separated(
+                itemCount: loadingState.response!.length,
+                itemBuilder: (context, index) {
+                  final item = loadingState.response![index];
+                  return ListTile(
+                    dense: true,
+                    onTap: () {
+                      Get.toNamed(
+                        '/searchResult',
+                        parameters: {
+                          'keyword': item.keyword!,
+                        },
+                      );
+                    },
+                    leading: index < _controller.topCount
+                        ? Icon(
+                            size: 16,
+                            Icons.vertical_align_top_outlined,
+                            color: const Color(0xFFd1403e),
+                          )
+                        : Text(
+                            '${index + 1 - _controller.topCount}',
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              color: switch (index - _controller.topCount) {
+                                0 => const Color(0xFFfdad13),
+                                1 => const Color(0xFF8aace1),
+                                2 => const Color(0xFFdfa777),
+                                _ => Theme.of(context).colorScheme.outline,
+                              },
+                              fontSize: 16,
+                              fontStyle: FontStyle.italic,
+                            ),
+                          ),
+                    title: Row(
+                      children: [
+                        Flexible(
+                          child: Text(
+                            item.keyword!,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            strutStyle: StrutStyle(height: 1, leading: 0),
+                            style: TextStyle(height: 1, fontSize: 14),
+                          ),
+                        ),
+                        if (item.icon?.isNotEmpty == true) ...[
+                          const SizedBox(width: 4),
+                          CachedNetworkImage(
+                            imageUrl: item.icon!.http2https,
+                            height: 15,
+                          ),
+                        ] else if (item.showLiveIcon == true) ...[
+                          const SizedBox(width: 4),
+                          Image.asset(
+                            'assets/images/live/live_@28h.gif',
+                            width: 48,
+                            height: 15,
+                          ),
+                        ],
+                      ],
+                    ),
+                  );
+                },
+                separatorBuilder: (context, index) => Divider(
+                  height: 1,
+                  indent: 48,
+                  color: Theme.of(context).colorScheme.outline.withOpacity(0.1),
+                ),
+              ),
+            )
+          : HttpError(
+              callback: _controller.onReload,
+            ),
+      Error() => HttpError(
+          errMsg: loadingState.errMsg,
+          callback: _controller.onReload,
+        ),
+      _ => throw UnimplementedError(),
+    };
+  }
+}

lib/pages/webview/webview_page.dart

@@ -196,20 +196,6 @@ class _WebviewPageNewState extends State<WebviewPageNew> {
                 }
               },
             );
-            controller.addJavaScriptHandler(
-              handlerName: "onSearch",
-              callback: (args) {
-                dynamic title = args.firstOrNull;
-                if (title != null) {
-                  Get.toNamed(
-                    '/searchResult',
-                    parameters: {
-                      'keyword': title,
-                    },
-                  );
-                }
-              },
-            );
           },
           onProgressChanged: (controller, progress) {
             this.progress.value = progress / 100;
@@ -238,21 +224,6 @@ class _WebviewPageNewState extends State<WebviewPageNew> {
                   document.styleSheets[0].insertRule('#app__display-area > div.control-panel {display:none;}', 0);
                   ''',
               );
-            } else if (url.startsWith(
-                'https://www.bilibili.com/blackboard/activity-trending-topic.html')) {
-              controller.evaluateJavascript(source: '''
-    document.addEventListener("click", function(e) {
-        const parentElement = e.target.parentElement;
-        if (parentElement) {
-            const trendingTitleElement = parentElement.querySelector(".trending-title");
-            if (trendingTitleElement) {
-                const rankElement = trendingTitleElement.querySelector(".rank-index");
-                const title = rankElement ? trendingTitleElement.innerText.replace(rankElement.innerText, "").trim() : trendingTitleElement.innerText;
-                window.flutter_inappwebview.callHandler("onSearch", title);
-            }
-        }
-    });
-''');
             }
             // _webViewController?.evaluateJavascript(
             //   source: '''
@@ -263,11 +234,6 @@ class _WebviewPageNewState extends State<WebviewPageNew> {
           },
           onDownloadStartRequest: Platform.isAndroid
               ? (controller, request) {
-                  if (_url.startsWith(
-                      'https://www.bilibili.com/blackboard/activity-trending-topic.html')) {
-                    progress.value = 1;
-                    return;
-                  }
                   showDialog(
                       context: context,
                       builder: (context) {
@@ -340,9 +306,6 @@ class _WebviewPageNewState extends State<WebviewPageNew> {
               return NavigationActionPolicy.CANCEL;
             } else if (RegExp(r'^(?!(https?://))\S+://', caseSensitive: false)
                 .hasMatch(url)) {
-              if (url.startsWith('bilibili://browser')) {
-                return NavigationActionPolicy.CANCEL;
-              }
               if (context.mounted) {
                 SnackBar snackBar = SnackBar(
                   content: const Text('当前网页将要打开外部链接，是否打开'),

lib/router/app_pages.dart

@@ -1,6 +1,7 @@
 import 'package:PiliPlus/pages/fav/view.dart';
 import 'package:PiliPlus/pages/member/new/member_page.dart';
 import 'package:PiliPlus/pages/member/new/widget/edit_profile_page.dart';
+import 'package:PiliPlus/pages/search_trending/view.dart';
 import 'package:PiliPlus/pages/setting/navigation_bar_set.dart';
 import 'package:PiliPlus/pages/setting/search_page.dart';
 import 'package:PiliPlus/pages/setting/sponsor_block_page.dart';
@@ -178,6 +179,8 @@ class Routes {
         name: '/settingsSearch', page: () => const SettingsSearchPage()),
     CustomGetPage(
         name: '/webdavSetting', page: () => const WebDavSettingPage()),
+    CustomGetPage(
+        name: '/searchTrending', page: () => const SearchTrendingPage()),
   ];
 }