feat: dyn topic

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
2025-12-06 09:13:48 +08:00 · 2025-05-07 17:27:07 +08:00
parent dd6ff101d1
commit 11a0f2faca
21 changed files with 635 additions and 207 deletions
--- a/lib/pages/dynamics/widgets/article_panel.dart
+++ b/lib/pages/dynamics/widgets/article_panel.dart
@@ -9,7 +9,7 @@ Widget articlePanel(
  String? source,
  DynamicItemModel item,
  BuildContext context,
-  callback, {
+  Function(List<String>, int)? callback, {
  floor = 1,
 }) {
  return Padding(
--- a/lib/pages/dynamics/widgets/content_panel.dart
+++ b/lib/pages/dynamics/widgets/content_panel.dart
@@ -3,6 +3,7 @@ import 'package:PiliPlus/common/widgets/image/image_view.dart';
 import 'package:PiliPlus/models/dynamics/result.dart';
 import 'package:PiliPlus/pages/dynamics/widgets/rich_node_panel.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';

 Widget content(
  ThemeData theme,
@@ -10,8 +11,9 @@ Widget content(
  BuildContext context,
  DynamicItemModel item,
  String? source,
-  Function(List<String>, int)? callback,
-) {
+  Function(List<String>, int)? callback, {
+  floor = 1,
+}) {
  InlineSpan picsNodes() {
    return WidgetSpan(
      child: LayoutBuilder(
@@ -35,16 +37,28 @@ Widget content(

  TextSpan? richNodes = richNode(theme, item, context);

-  return Container(
-    width: double.infinity,
-    padding: const EdgeInsets.fromLTRB(12, 0, 12, 6),
+  return Padding(
+    padding: floor == 1
+        ? const EdgeInsets.fromLTRB(12, 0, 12, 6)
+        : const EdgeInsets.only(bottom: 6),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (item.modules.moduleDynamic?.topic != null) ...[
-          Text(
-            '#${item.modules.moduleDynamic!.topic!.name}',
-            style: TextStyle(color: theme.colorScheme.primary),
+          GestureDetector(
+            onTap: () {
+              Get.toNamed(
+                '/dynTopic',
+                parameters: {
+                  'id': item.modules.moduleDynamic!.topic!.id!.toString(),
+                  'name': item.modules.moduleDynamic!.topic!.name!,
+                },
+              );
+            },
+            child: Text(
+              '#${item.modules.moduleDynamic!.topic!.name}',
+              style: TextStyle(color: theme.colorScheme.primary),
+            ),
          ),
        ],
        if (richNodes != null)
--- a/lib/pages/dynamics/widgets/forward_panel.dart
+++ b/lib/pages/dynamics/widgets/forward_panel.dart
@@ -59,8 +59,8 @@ Widget forWard(
  bool isSave,
  DynamicItemModel item,
  BuildContext context,
-  source,
-  callback, {
+  String? source,
+  Function(List<String>, int)? callback, {
  floor = 1,
 }) {
  switch (item.type) {
@@ -137,7 +137,8 @@ Widget forWard(
      );
    // 视频
    case 'DYNAMIC_TYPE_AV':
-      return videoSeasonWidget(theme, source, item, context, 'archive',
+      return videoSeasonWidget(
+          theme, isSave, source, item, context, 'archive', callback,
          floor: floor);
    // 文章
    case 'DYNAMIC_TYPE_ARTICLE':
@@ -204,7 +205,8 @@ Widget forWard(
      return livePanel(theme, source, item, context, floor: floor);
    // 合集
    case 'DYNAMIC_TYPE_UGC_SEASON':
-      return videoSeasonWidget(theme, source, item, context, 'ugcSeason');
+      return videoSeasonWidget(
+          theme, isSave, source, item, context, 'ugcSeason', callback);
    case 'DYNAMIC_TYPE_WORD':
      late TextSpan? richNodes = richNode(theme, item, context);
      return floor == 2
@@ -262,10 +264,12 @@ Widget forWard(
                      theme, item.modules.moduleDynamic!.major!.blocked!)
                  : const SizedBox.shrink();
    case 'DYNAMIC_TYPE_PGC':
-      return videoSeasonWidget(theme, source, item, context, 'pgc',
+      return videoSeasonWidget(
+          theme, isSave, source, item, context, 'pgc', callback,
          floor: floor);
    case 'DYNAMIC_TYPE_PGC_UNION':
-      return videoSeasonWidget(theme, source, item, context, 'pgc',
+      return videoSeasonWidget(
+          theme, isSave, source, item, context, 'pgc', callback,
          floor: floor);
    // 直播结束
    case 'DYNAMIC_TYPE_NONE':
--- a/lib/pages/dynamics/widgets/live_rcmd_panel.dart
+++ b/lib/pages/dynamics/widgets/live_rcmd_panel.dart
@@ -53,12 +53,23 @@ Widget liveRcmdPanel(
      ],
      const SizedBox(height: 4),
      if (item.modules.moduleDynamic?.topic != null) ...[
-        Padding(
-          padding:
-              const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
-          child: Text(
-            '#${item.modules.moduleDynamic!.topic!.name}',
-            style: authorStyle,
+        GestureDetector(
+          onTap: () {
+            Get.toNamed(
+              '/dynTopic',
+              parameters: {
+                'id': item.modules.moduleDynamic!.topic!.id!.toString(),
+                'name': item.modules.moduleDynamic!.topic!.name!,
+              },
+            );
+          },
+          child: Padding(
+            padding:
+                const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
+            child: Text(
+              '#${item.modules.moduleDynamic!.topic!.name}',
+              style: authorStyle,
+            ),
          ),
        ),
        const SizedBox(height: 6),
--- a/lib/pages/dynamics/widgets/rich_node_panel.dart
+++ b/lib/pages/dynamics/widgets/rich_node_panel.dart
@@ -1,15 +1,15 @@
 import 'package:PiliPlus/common/widgets/image/image_view.dart';
+import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
+import 'package:PiliPlus/http/search.dart';
 import 'package:PiliPlus/models/dynamics/result.dart';
 import 'package:PiliPlus/pages/dynamics/widgets/vote.dart';
+import 'package:PiliPlus/utils/app_scheme.dart';
 import 'package:PiliPlus/utils/page_utils.dart';
 import 'package:PiliPlus/utils/utils.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
-import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
-import 'package:PiliPlus/http/search.dart';
-import 'package:PiliPlus/utils/app_scheme.dart';

 // 富文本
 TextSpan? richNode(
@@ -45,38 +45,41 @@ TextSpan? richNode(
        switch (i.type) {
          case 'RICH_TEXT_NODE_TYPE_TEXT':
            spanChildren.add(
-              TextSpan(text: i.origText, style: const TextStyle(height: 1.65)),
+              TextSpan(
+                text: i.origText,
+                style: const TextStyle(height: 1.65),
+              ),
            );
            break;
          // @用户
          case 'RICH_TEXT_NODE_TYPE_AT':
            spanChildren.add(
-              WidgetSpan(
-                alignment: PlaceholderAlignment.middle,
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    GestureDetector(
-                      onTap: () => Get.toNamed('/member?mid=${i.rid}'),
-                      child: Text(
-                        ' ${i.text}',
-                        style: authorStyle,
-                      ),
-                    ),
-                  ],
-                ),
+              TextSpan(
+                text: ' ${i.text}',
+                style: authorStyle,
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () {
+                    Get.toNamed('/member?mid=${i.rid}');
+                  },
              ),
            );
            break;
          // 话题
          case 'RICH_TEXT_NODE_TYPE_TOPIC':
            spanChildren.add(
-              WidgetSpan(
-                alignment: PlaceholderAlignment.middle,
-                child: Text(
-                  '${i.origText}',
-                  style: authorStyle,
-                ),
+              TextSpan(
+                text: i.origText!,
+                style: authorStyle,
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () {
+                    Get.toNamed(
+                      '/searchResult',
+                      parameters: {
+                        'keyword':
+                            i.origText!.substring(1, i.origText!.length - 1),
+                      },
+                    );
+                  },
              ),
            );
            break;
@@ -94,10 +97,11 @@ TextSpan? richNode(
                ),
              )
              ..add(
-                WidgetSpan(
-                  alignment: PlaceholderAlignment.middle,
-                  child: GestureDetector(
-                    onTap: () {
+                TextSpan(
+                  text: i.text ?? '',
+                  style: authorStyle,
+                  recognizer: TapGestureRecognizer()
+                    ..onTap = () {
                      String? url = i.origText;
                      if (url == null) {
                        SmartDialog.showToast('未获取到链接');
@@ -105,11 +109,6 @@ TextSpan? richNode(
                      }
                      PiliScheme.routePushFromUrl(url);
                    },
-                    child: Text(
-                      i.text ?? '',
-                      style: authorStyle,
-                    ),
-                  ),
                ),
              );
            break;
@@ -158,10 +157,11 @@ TextSpan? richNode(
                ),
              )
              ..add(
-                WidgetSpan(
-                  alignment: PlaceholderAlignment.middle,
-                  child: GestureDetector(
-                    onTap: () {
+                TextSpan(
+                  text: '${i.origText} ',
+                  style: authorStyle,
+                  recognizer: TapGestureRecognizer()
+                    ..onTap = () {
                      Get.toNamed(
                        '/webview',
                        parameters: {
@@ -170,11 +170,6 @@ TextSpan? richNode(
                        },
                      );
                    },
-                    child: Text(
-                      '${i.origText} ',
-                      style: authorStyle,
-                    ),
-                  ),
                ),
              );
            break;
@@ -193,12 +188,9 @@ TextSpan? richNode(
                ),
              )
              ..add(
-                WidgetSpan(
-                  alignment: PlaceholderAlignment.middle,
-                  child: Text(
-                    '${i.text} ',
-                    style: authorStyle,
-                  ),
+                TextSpan(
+                  text: '${i.text} ',
+                  style: authorStyle,
                ),
              );
            break;
@@ -216,10 +208,11 @@ TextSpan? richNode(
                ),
              )
              ..add(
-                WidgetSpan(
-                  alignment: PlaceholderAlignment.middle,
-                  child: GestureDetector(
-                    onTap: () async {
+                TextSpan(
+                  text: '${i.text} ',
+                  style: authorStyle,
+                  recognizer: TapGestureRecognizer()
+                    ..onTap = () async {
                      try {
                        int cid = await SearchHttp.ab2c(bvid: i.rid);
                        PageUtils.toVideoPage(
@@ -232,11 +225,6 @@ TextSpan? richNode(
                        SmartDialog.showToast(err.toString());
                      }
                    },
-                    child: Text(
-                      '${i.text} ',
-                      style: authorStyle,
-                    ),
-                  ),
                ),
              );
            break;
--- a/lib/pages/dynamics/widgets/video_panel.dart
+++ b/lib/pages/dynamics/widgets/video_panel.dart
@@ -4,6 +4,7 @@ import 'package:PiliPlus/common/widgets/badge.dart';
 import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
 import 'package:PiliPlus/models/common/badge_type.dart';
 import 'package:PiliPlus/models/dynamics/result.dart';
+import 'package:PiliPlus/pages/dynamics/widgets/content_panel.dart';
 import 'package:PiliPlus/pages/dynamics/widgets/rich_node_panel.dart';
 import 'package:PiliPlus/utils/utils.dart';
 import 'package:flutter/material.dart';
@@ -11,10 +12,12 @@ import 'package:get/get.dart';

 Widget videoSeasonWidget(
  ThemeData theme,
+  bool isSave,
  String? source,
  DynamicItemModel item,
  BuildContext context,
-  String type, {
+  String type,
+  Function(List<String>, int)? callback, {
  floor = 1,
 }) {
  if (item.modules.moduleDynamic?.major?.type == 'MAJOR_TYPE_NONE') {
@@ -46,14 +49,14 @@ Widget videoSeasonWidget(
  // 1 投稿视频 铺满 borderRadius 0
  // 2 转发视频 铺满 borderRadius 6

-  DynamicArchiveModel? content = switch (type) {
+  DynamicArchiveModel? itemContent = switch (type) {
    'ugcSeason' => item.modules.moduleDynamic?.major?.ugcSeason,
    'archive' => item.modules.moduleDynamic?.major?.archive,
    'pgc' => item.modules.moduleDynamic?.major?.pgc,
    _ => null,
  };

-  if (content == null) {
+  if (itemContent == null) {
    return const SizedBox.shrink();
  }

@@ -69,16 +72,16 @@ Widget videoSeasonWidget(
            NetworkImgLayer(
              width: width,
              height: width / StyleString.aspectRatio,
-              src: content.cover,
+              src: itemContent.cover,
            ),
-            if (content.badge?['text'] != null)
+            if (itemContent.badge?['text'] != null)
              PBadge(
-                text: content.badge!['text'],
+                text: itemContent.badge!['text'],
                top: 8.0,
                right: 10.0,
                bottom: null,
                left: null,
-                type: content.badge!['text'] == '充电专属'
+                type: itemContent.badge!['text'] == '充电专属'
                    ? PBadgeType.error
                    : PBadgeType.primary,
              ),
@@ -113,17 +116,17 @@ Widget videoSeasonWidget(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
-                      if (content.durationText != null) ...[
+                      if (itemContent.durationText != null) ...[
                        Text(
-                          content.durationText!,
+                          itemContent.durationText!,
                          semanticsLabel:
-                              '时长${Utils.durationReadFormat(content.durationText!)}',
+                              '时长${Utils.durationReadFormat(itemContent.durationText!)}',
                        ),
                        const SizedBox(width: 6),
                      ],
-                      Text('${content.stat?.play}次围观'),
+                      Text('${itemContent.stat?.play}次围观'),
                      const SizedBox(width: 6),
-                      Text('${content.stat?.danmu}条弹幕'),
+                      Text('${itemContent.stat?.danmu}条弹幕'),
                      const Spacer(),
                      Image.asset(
                        'assets/images/play.png',
@@ -172,12 +175,13 @@ Widget videoSeasonWidget(
          ],
        ),
        const SizedBox(height: 6),
+        content(theme, isSave, context, item, source, null, floor: 2),
+        if (itemContent.desc != null && richNodes != null) ...[
+          Text.rich(richNodes),
+          const SizedBox(height: 6),
+        ],
      ],
-      if (floor == 2 && content.desc != null && richNodes != null) ...[
-        Text.rich(richNodes),
-        const SizedBox(height: 6),
-      ],
-      if (content.cover != null)
+      if (itemContent.cover != null)
        if (item.isForwarded == true)
          buildCover()
        else
@@ -187,13 +191,13 @@ Widget videoSeasonWidget(
            child: buildCover(),
          ),
      const SizedBox(height: 6),
-      if (content.title != null)
+      if (itemContent.title != null)
        Padding(
          padding: floor == 1
              ? const EdgeInsets.only(left: 12, right: 12)
              : EdgeInsets.zero,
          child: Text(
-            content.title!,
+            itemContent.title!,
            maxLines: source == 'detail' ? null : 1,
            style: const TextStyle(fontWeight: FontWeight.bold),
            overflow: source == 'detail' ? null : TextOverflow.ellipsis,
--- a/lib/pages/dynamics_tab/view.dart
+++ b/lib/pages/dynamics_tab/view.dart
@@ -24,6 +24,41 @@ class DynamicsTabPage extends CommonPage {

  @override
  State<DynamicsTabPage> createState() => _DynamicsTabPageState();
+
+  static Widget dynSkeleton(bool dynamicsWaterfallFlow) {
+    if (!dynamicsWaterfallFlow) {
+      return SliverCrossAxisGroup(
+        slivers: [
+          const SliverFillRemaining(),
+          SliverConstrainedCrossAxis(
+            maxExtent: Grid.smallCardWidth * 2,
+            sliver: SliverList.builder(
+              itemBuilder: (context, index) {
+                return const DynamicCardSkeleton();
+              },
+              itemCount: 10,
+            ),
+          ),
+          const SliverFillRemaining()
+        ],
+      );
+    }
+    return SliverGrid(
+      gridDelegate: SliverGridDelegateWithExtentAndRatio(
+        crossAxisSpacing: StyleString.cardSpace / 2,
+        mainAxisSpacing: StyleString.cardSpace / 2,
+        maxCrossAxisExtent: Grid.smallCardWidth * 2,
+        childAspectRatio: StyleString.aspectRatio,
+        mainAxisExtent: 50,
+      ),
+      delegate: SliverChildBuilderDelegate(
+        (context, index) {
+          return const DynamicCardSkeleton();
+        },
+        childCount: 10,
+      ),
+    );
+  }
 }

 class _DynamicsTabPageState
@@ -91,44 +126,9 @@ class _DynamicsTabPageState
    );
  }

-  Widget skeleton() {
-    if (!dynamicsWaterfallFlow) {
-      return SliverCrossAxisGroup(
-        slivers: [
-          const SliverFillRemaining(),
-          SliverConstrainedCrossAxis(
-            maxExtent: Grid.smallCardWidth * 2,
-            sliver: SliverList.builder(
-              itemBuilder: (context, index) {
-                return const DynamicCardSkeleton();
-              },
-              itemCount: 10,
-            ),
-          ),
-          const SliverFillRemaining()
-        ],
-      );
-    }
-    return SliverGrid(
-      gridDelegate: SliverGridDelegateWithExtentAndRatio(
-        crossAxisSpacing: StyleString.cardSpace / 2,
-        mainAxisSpacing: StyleString.cardSpace / 2,
-        maxCrossAxisExtent: Grid.smallCardWidth * 2,
-        childAspectRatio: StyleString.aspectRatio,
-        mainAxisExtent: 50,
-      ),
-      delegate: SliverChildBuilderDelegate(
-        (context, index) {
-          return const DynamicCardSkeleton();
-        },
-        childCount: 10,
-      ),
-    );
-  }
-
  Widget _buildBody(LoadingState<List<DynamicItemModel>?> loadingState) {
    return switch (loadingState) {
-      Loading() => skeleton(),
+      Loading() => DynamicsTabPage.dynSkeleton(dynamicsWaterfallFlow),
      Success() => loadingState.response?.isNotEmpty == true
          ? SliverPadding(
              padding: EdgeInsets.only(
--- a/lib/pages/dynamics_topic/controller.dart
+++ b/lib/pages/dynamics_topic/controller.dart
@@ -0,0 +1,72 @@
+import 'package:PiliPlus/http/dynamics.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/dynamics/dyn_topic_feed/item.dart';
+import 'package:PiliPlus/models/dynamics/dyn_topic_feed/topic_card_list.dart';
+import 'package:PiliPlus/models/dynamics/dyn_topic_feed/topic_sort_by_conf.dart';
+import 'package:PiliPlus/pages/common/common_list_controller.dart';
+import 'package:PiliPlus/utils/extension.dart';
+import 'package:get/get.dart';
+
+class DynTopicController
+    extends CommonListController<TopicCardList?, TopicCardItem> {
+  final topicId = Get.parameters['id']!;
+  final topicName = Get.parameters['name']!;
+
+  int sortBy = 0;
+  String offset = '';
+  Rx<TopicSortByConf?> topicSortByConf = Rx<TopicSortByConf?>(null);
+
+  // top
+  // Rx<LoadingState<TopDetails?>> topState =
+  //     LoadingState<TopDetails?>.loading().obs;
+
+  @override
+  void onInit() {
+    super.onInit();
+    // queryTop();
+    queryData();
+  }
+
+  // Future<void> queryTop() async {
+  //   topState.value = await DynamicsHttp.topicTop(topicId: topicId);
+  // }
+
+  @override
+  List<TopicCardItem>? getDataList(TopicCardList? response) {
+    offset = response?.offset ?? '';
+    topicSortByConf.value = response?.topicSortByConf;
+    sortBy = response?.topicSortByConf?.showSortBy ?? 0;
+    if (response?.hasMore == false) {
+      isEnd = true;
+    }
+    return response?.items;
+  }
+
+  @override
+  Future<void> onRefresh() {
+    offset = '';
+    return super.onRefresh();
+  }
+
+  @override
+  Future<void> onReload() {
+    // if (topState.value is! Success) {
+    //   queryTop();
+    // }
+    scrollController.jumpToTop();
+    return super.onReload();
+  }
+
+  @override
+  Future<LoadingState<TopicCardList?>> customGetData() =>
+      DynamicsHttp.topicFeed(
+        topicId: topicId,
+        offset: offset,
+        sortBy: sortBy,
+      );
+
+  void onSort(int sortBy) {
+    this.sortBy = sortBy;
+    onReload();
+  }
+}
--- a/lib/pages/dynamics_topic/view.dart
+++ b/lib/pages/dynamics_topic/view.dart
@@ -0,0 +1,140 @@
+import 'package:PiliPlus/common/constants.dart';
+import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
+import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/dynamics/dyn_topic_feed/item.dart';
+import 'package:PiliPlus/pages/dynamics/widgets/dynamic_panel.dart';
+import 'package:PiliPlus/pages/dynamics_tab/view.dart';
+import 'package:PiliPlus/pages/dynamics_topic/controller.dart';
+import 'package:PiliPlus/utils/grid.dart';
+import 'package:PiliPlus/utils/storage.dart';
+import 'package:PiliPlus/utils/utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:waterfall_flow/waterfall_flow.dart';
+
+class DynTopicPage extends StatefulWidget {
+  const DynTopicPage({super.key});
+
+  @override
+  State<DynTopicPage> createState() => _DynTopicPageState();
+}
+
+class _DynTopicPageState extends State<DynTopicPage> {
+  final DynTopicController _controller =
+      Get.put(DynTopicController(), tag: Utils.generateRandomString(8));
+  final dynamicsWaterfallFlow = GStorage.setting
+      .get(SettingBoxKey.dynamicsWaterfallFlow, defaultValue: true);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(_controller.topicName),
+        actions: [
+          Obx(() {
+            if (_controller.topicSortByConf.value?.allSortBy?.isNotEmpty ==
+                true) {
+              return Padding(
+                padding: const EdgeInsets.only(right: 16),
+                child: PopupMenuButton(
+                  initialValue: _controller.sortBy,
+                  itemBuilder: (context) {
+                    return _controller.topicSortByConf.value!.allSortBy!
+                        .map<PopupMenuItem>((e) {
+                      return PopupMenuItem(
+                        value: e.sortBy,
+                        child: Text(e.sortName!),
+                        onTap: () {
+                          _controller.onSort(e.sortBy!);
+                        },
+                      );
+                    }).toList();
+                  },
+                ),
+              );
+            }
+            return const SizedBox.shrink();
+          })
+        ],
+      ),
+      body: SafeArea(
+        top: false,
+        bottom: false,
+        child: refreshIndicator(
+          onRefresh: _controller.onRefresh,
+          child: CustomScrollView(
+            controller: _controller.scrollController,
+            slivers: [
+              Obx(() => _buildBody(_controller.loadingState.value)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildBody(LoadingState<List<TopicCardItem>?> loadingState) {
+    return switch (loadingState) {
+      Loading() => DynamicsTabPage.dynSkeleton(dynamicsWaterfallFlow),
+      Success() => loadingState.response?.isNotEmpty == true
+          ? SliverPadding(
+              padding: EdgeInsets.only(
+                bottom: MediaQuery.paddingOf(context).bottom + 80,
+              ),
+              sliver: dynamicsWaterfallFlow
+                  ? SliverWaterfallFlow.extent(
+                      maxCrossAxisExtent: Grid.smallCardWidth * 2,
+                      crossAxisSpacing: StyleString.cardSpace / 2,
+                      lastChildLayoutTypeBuilder: (index) {
+                        if (index == loadingState.response!.length - 1) {
+                          _controller.onLoadMore();
+                        }
+                        return index == loadingState.response!.length
+                            ? LastChildLayoutType.foot
+                            : LastChildLayoutType.none;
+                      },
+                      children: [
+                        for (var item in loadingState.response!)
+                          if (item.dynamicCardItem != null)
+                            DynamicPanel(item: item.dynamicCardItem!)
+                          else
+                            Text(item.topicType ?? 'err'),
+                      ],
+                    )
+                  : SliverCrossAxisGroup(
+                      slivers: [
+                        const SliverFillRemaining(),
+                        SliverConstrainedCrossAxis(
+                          maxExtent: Grid.smallCardWidth * 2,
+                          sliver: SliverList.builder(
+                            itemBuilder: (context, index) {
+                              if (index == loadingState.response!.length - 1) {
+                                _controller.onLoadMore();
+                              }
+                              final item = loadingState.response![index];
+                              if (item.topicType != null) {
+                                return DynamicPanel(
+                                  item: item.dynamicCardItem!,
+                                );
+                              } else {
+                                return Text(item.topicType ?? 'err');
+                              }
+                            },
+                            itemCount: loadingState.response!.length,
+                          ),
+                        ),
+                        const SliverFillRemaining(),
+                      ],
+                    ),
+            )
+          : HttpError(
+              onReload: _controller.onReload,
+            ),
+      Error() => HttpError(
+          errMsg: loadingState.errMsg,
+          onReload: _controller.onReload,
+        ),
+    };
+  }
+}
--- a/lib/pages/member_dynamics/view.dart
+++ b/lib/pages/member_dynamics/view.dart
@@ -1,10 +1,10 @@
 import 'package:PiliPlus/common/constants.dart';
-import 'package:PiliPlus/common/skeleton/dynamic_card.dart';
 import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
 import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
 import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models/dynamics/result.dart';
 import 'package:PiliPlus/pages/dynamics/widgets/dynamic_panel.dart';
+import 'package:PiliPlus/pages/dynamics_tab/view.dart';
 import 'package:PiliPlus/pages/member_dynamics/controller.dart';
 import 'package:PiliPlus/utils/grid.dart';
 import 'package:PiliPlus/utils/storage.dart';
@@ -65,44 +65,9 @@ class _MemberDynamicsPageState extends State<MemberDynamicsPage>
        ),
      );

-  Widget skeleton() {
-    if (!dynamicsWaterfallFlow) {
-      return SliverCrossAxisGroup(
-        slivers: [
-          const SliverFillRemaining(),
-          SliverConstrainedCrossAxis(
-            maxExtent: Grid.smallCardWidth * 2,
-            sliver: SliverList.builder(
-              itemBuilder: (context, index) {
-                return const DynamicCardSkeleton();
-              },
-              itemCount: 10,
-            ),
-          ),
-          const SliverFillRemaining()
-        ],
-      );
-    }
-    return SliverGrid(
-      gridDelegate: SliverGridDelegateWithExtentAndRatio(
-        crossAxisSpacing: StyleString.cardSpace / 2,
-        mainAxisSpacing: StyleString.cardSpace / 2,
-        maxCrossAxisExtent: Grid.smallCardWidth * 2,
-        childAspectRatio: StyleString.aspectRatio,
-        mainAxisExtent: 50,
-      ),
-      delegate: SliverChildBuilderDelegate(
-        (context, index) {
-          return const DynamicCardSkeleton();
-        },
-        childCount: 10,
-      ),
-    );
-  }
-
  Widget _buildContent(LoadingState<List<DynamicItemModel>?> loadingState) {
    return switch (loadingState) {
-      Loading() => skeleton(),
+      Loading() => DynamicsTabPage.dynSkeleton(dynamicsWaterfallFlow),
      Success() => loadingState.response?.isNotEmpty == true
          ? SliverPadding(
              padding: EdgeInsets.only(
--- a/lib/pages/member_search/child/view.dart
+++ b/lib/pages/member_search/child/view.dart
@@ -1,5 +1,4 @@
 import 'package:PiliPlus/common/constants.dart';
-import 'package:PiliPlus/common/skeleton/dynamic_card.dart';
 import 'package:PiliPlus/common/skeleton/video_card_h.dart';
 import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
 import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
@@ -7,6 +6,7 @@ import 'package:PiliPlus/common/widgets/video_card/video_card_h.dart';
 import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models/common/member/search_type.dart';
 import 'package:PiliPlus/pages/dynamics/widgets/dynamic_panel.dart';
+import 'package:PiliPlus/pages/dynamics_tab/view.dart';
 import 'package:PiliPlus/pages/member_search/child/controller.dart';
 import 'package:PiliPlus/utils/grid.dart';
 import 'package:PiliPlus/utils/storage.dart';
@@ -64,45 +64,11 @@ class _MemberSearchChildPageState extends State<MemberSearchChildPage>
            childCount: 10,
          ),
        ),
-      MemberSearchType.dynamic => dynSkeleton(),
+      MemberSearchType.dynamic =>
+        DynamicsTabPage.dynSkeleton(dynamicsWaterfallFlow),
    };
  }

-  Widget dynSkeleton() {
-    if (!dynamicsWaterfallFlow) {
-      return SliverCrossAxisGroup(
-        slivers: [
-          const SliverFillRemaining(),
-          SliverConstrainedCrossAxis(
-            maxExtent: Grid.smallCardWidth * 2,
-            sliver: SliverList.builder(
-              itemBuilder: (context, index) {
-                return const DynamicCardSkeleton();
-              },
-              itemCount: 10,
-            ),
-          ),
-          const SliverFillRemaining()
-        ],
-      );
-    }
-    return SliverGrid(
-      gridDelegate: SliverGridDelegateWithExtentAndRatio(
-        crossAxisSpacing: StyleString.cardSpace / 2,
-        mainAxisSpacing: StyleString.cardSpace / 2,
-        maxCrossAxisExtent: Grid.smallCardWidth * 2,
-        childAspectRatio: StyleString.aspectRatio,
-        mainAxisExtent: 50,
-      ),
-      delegate: SliverChildBuilderDelegate(
-        (context, index) {
-          return const DynamicCardSkeleton();
-        },
-        childCount: 10,
-      ),
-    );
-  }
-
  Widget _buildBody(LoadingState<List?> loadingState) {
    return switch (loadingState) {
      Loading() => _buildLoading,