feat: live area page

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

lib/pages/live/controller.dart

@@ -3,6 +3,7 @@ import 'package:PiliPlus/http/live.dart';
 import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models/live/live_feed_index/card_data_list_item.dart';
 import 'package:PiliPlus/models/live/live_feed_index/card_list.dart';
+import 'package:PiliPlus/models/live/live_second_list/tag.dart';
 import 'package:PiliPlus/pages/common/common_list_controller.dart';
 import 'package:PiliPlus/utils/storage.dart';
 import 'package:get/get_rx/src/rx_types/rx_types.dart';
@@ -14,9 +15,16 @@ class LiveController extends CommonListController {
     queryData();
   }
 
+  // area
   int? areaId;
+  String? sortType;
   int? parentAreaId;
   final RxInt areaIndex = 0.obs;
+
+  // tag
+  final RxInt tagIndex = 0.obs;
+  List<LiveSecondTag>? newTags;
+
   final Rx<Pair<LiveCardList?, LiveCardList?>> topState =
       Pair<LiveCardList?, LiveCardList?>(first: null, second: null).obs;
   final RxBool isLogin = Accounts.main.isLogin.obs;
@@ -28,11 +36,19 @@ class LiveController extends CommonListController {
 
   @override
   bool customHandleResponse(bool isRefresh, Success response) {
-    if (isRefresh && areaIndex.value == 0) {
-      topState.value = Pair(
-        first: response.response.followItem,
-        second: response.response.areaItem,
-      );
+    if (isRefresh) {
+      if (areaIndex.value == 0) {
+        topState.value = Pair(
+          first: response.response.followItem,
+          second: response.response.areaItem,
+        );
+      } else {
+        newTags = response.response.newTags;
+        if (sortType != null) {
+          tagIndex.value =
+              newTags?.indexWhere((e) => e.sortType == sortType) ?? -1;
+        }
+      }
     }
     return false;
   }
@@ -45,6 +61,7 @@ class LiveController extends CommonListController {
         isLogin: isLogin.value,
         areaId: areaId,
         parentAreaId: parentAreaId,
+        sortType: sortType,
       );
     }
     return LiveHttp.liveFeedIndex(pn: currentPage, isLogin: isLogin.value);
@@ -72,6 +89,12 @@ class LiveController extends CommonListController {
         first: data.followItem,
         second: data.areaItem,
       );
+      areaIndex.value = (data.areaItem?.cardData?.areaEntranceV3?.list
+                  ?.indexWhere((e) =>
+                      e.areaV2Id == areaId &&
+                      e.areaV2ParentId == parentAreaId) ??
+              -2) +
+          1;
     }
   }
 
@@ -79,6 +102,9 @@ class LiveController extends CommonListController {
     if (index == areaIndex.value) {
       return;
     }
+    tagIndex.value = 0;
+    newTags = null;
+    sortType = null;
     areaIndex.value = index;
     areaId = cardLiveItem?.areaV2Id;
     parentAreaId = cardLiveItem?.areaV2ParentId;
@@ -87,4 +113,13 @@ class LiveController extends CommonListController {
     isEnd = false;
     queryData();
   }
+
+  void onSelectTag(int index, String? sortType) {
+    tagIndex.value = index;
+    this.sortType = sortType;
+
+    currentPage = 1;
+    isEnd = false;
+    queryData();
+  }
 }

lib/pages/live/view.dart

@@ -1,5 +1,6 @@
 import 'package:PiliPlus/common/constants.dart';
 import 'package:PiliPlus/common/skeleton/video_card_v.dart';
+import 'package:PiliPlus/common/widgets/button/icon_button.dart';
 import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
 import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
 import 'package:PiliPlus/common/widgets/pair.dart';
@@ -11,6 +12,7 @@ import 'package:PiliPlus/models/live/live_feed_index/card_list.dart';
 import 'package:PiliPlus/pages/common/common_page.dart';
 import 'package:PiliPlus/pages/live/controller.dart';
 import 'package:PiliPlus/pages/live/widgets/live_item_app.dart';
+import 'package:PiliPlus/pages/live_area/view.dart';
 import 'package:PiliPlus/pages/live_follow/view.dart';
 import 'package:PiliPlus/pages/search/widgets/search_text.dart';
 import 'package:PiliPlus/utils/grid.dart';
@@ -73,39 +75,60 @@ class _LivePageState extends CommonPageState<LivePage, LiveController>
           SliverToBoxAdapter(child: _buildFollowList(data.first!)),
         if (data.second?.cardData?.areaEntranceV3?.list?.isNotEmpty == true)
           SliverToBoxAdapter(
-            child: SelfSizedHorizontalList(
-              gapSize: 12,
-              padding: const EdgeInsets.only(bottom: 10),
-              childBuilder: (index) {
-                late final item =
-                    data.second!.cardData!.areaEntranceV3!.list![index - 1];
-                return Obx(
-                  () => SearchText(
-                    fontSize: 14,
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 8,
-                      vertical: 3,
-                    ),
-                    text: index == 0 ? '推荐' : '${item.title}',
-                    bgColor: index == controller.areaIndex.value
-                        ? Theme.of(context).colorScheme.secondaryContainer
-                        : Colors.transparent,
-                    textColor: index == controller.areaIndex.value
-                        ? Theme.of(context).colorScheme.onSecondaryContainer
-                        : null,
-                    onTap: (value) {
-                      controller.onSelectArea(
-                        index,
-                        index == 0 ? null : item,
+            child: Row(
+              children: [
+                Expanded(
+                  child: SelfSizedHorizontalList(
+                    gapSize: 12,
+                    padding:
+                        const EdgeInsets.only(top: 10, bottom: 10, right: 12),
+                    childBuilder: (index) {
+                      late final item = data
+                          .second!.cardData!.areaEntranceV3!.list![index - 1];
+                      return Obx(
+                        () => SearchText(
+                          fontSize: 14,
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 8,
+                            vertical: 3,
+                          ),
+                          text: index == 0 ? '推荐' : '${item.title}',
+                          bgColor: index == controller.areaIndex.value
+                              ? Theme.of(context).colorScheme.secondaryContainer
+                              : Colors.transparent,
+                          textColor: index == controller.areaIndex.value
+                              ? Theme.of(context)
+                                  .colorScheme
+                                  .onSecondaryContainer
+                              : null,
+                          onTap: (value) {
+                            controller.onSelectArea(
+                              index,
+                              index == 0 ? null : item,
+                            );
+                          },
+                        ),
                       );
                     },
+                    itemCount:
+                        data.second!.cardData!.areaEntranceV3!.list!.length + 1,
                   ),
-                );
-              },
-              itemCount:
-                  data.second!.cardData!.areaEntranceV3!.list!.length + 1,
+                ),
+                iconButton(
+                  size: 26,
+                  iconSize: 16,
+                  context: context,
+                  tooltip: '全部标签',
+                  icon: Icons.widgets,
+                  onPressed: () {
+                    Get.to(const LiveAreaPage());
+                  },
+                ),
+              ],
             ),
-          ),
+          )
+        else
+          const SliverToBoxAdapter(child: SizedBox(height: 10)),
       ],
     );
   }
@@ -128,29 +151,70 @@ class _LivePageState extends CommonPageState<LivePage, LiveController>
           ),
         ),
       Success() => loadingState.response?.isNotEmpty == true
-          ? SliverGrid(
-              gridDelegate: SliverGridDelegateWithExtentAndRatio(
-                mainAxisSpacing: StyleString.cardSpace,
-                crossAxisSpacing: StyleString.cardSpace,
-                maxCrossAxisExtent: Grid.smallCardWidth,
-                childAspectRatio: StyleString.aspectRatio,
-                mainAxisExtent: MediaQuery.textScalerOf(context).scale(90),
-              ),
-              delegate: SliverChildBuilderDelegate(
-                (context, index) {
-                  if (index == loadingState.response!.length - 1) {
-                    controller.onLoadMore();
-                  }
-                  final item = loadingState.response![index];
-                  if (item is LiveCardList) {
-                    return LiveCardVApp(
-                      item: item.cardData!.smallCardV1!,
-                    );
-                  }
-                  return LiveCardVApp(item: item);
-                },
-                childCount: loadingState.response!.length,
-              ),
+          ? SliverMainAxisGroup(
+              slivers: [
+                if (controller.newTags?.isNotEmpty == true)
+                  SliverToBoxAdapter(
+                    child: SelfSizedHorizontalList(
+                      gapSize: 12,
+                      padding: const EdgeInsets.only(bottom: 8),
+                      childBuilder: (index) {
+                        late final item = controller.newTags![index];
+                        return Obx(
+                          () => SearchText(
+                            fontSize: 13,
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: 8,
+                              vertical: 3,
+                            ),
+                            text: '${item.name}',
+                            bgColor: index == controller.tagIndex.value
+                                ? Theme.of(context)
+                                    .colorScheme
+                                    .secondaryContainer
+                                : Colors.transparent,
+                            textColor: index == controller.tagIndex.value
+                                ? Theme.of(context)
+                                    .colorScheme
+                                    .onSecondaryContainer
+                                : null,
+                            onTap: (value) {
+                              controller.onSelectTag(
+                                index,
+                                item.sortType,
+                              );
+                            },
+                          ),
+                        );
+                      },
+                      itemCount: controller.newTags!.length,
+                    ),
+                  ),
+                SliverGrid(
+                  gridDelegate: SliverGridDelegateWithExtentAndRatio(
+                    mainAxisSpacing: StyleString.cardSpace,
+                    crossAxisSpacing: StyleString.cardSpace,
+                    maxCrossAxisExtent: Grid.smallCardWidth,
+                    childAspectRatio: StyleString.aspectRatio,
+                    mainAxisExtent: MediaQuery.textScalerOf(context).scale(90),
+                  ),
+                  delegate: SliverChildBuilderDelegate(
+                    (context, index) {
+                      if (index == loadingState.response!.length - 1) {
+                        controller.onLoadMore();
+                      }
+                      final item = loadingState.response![index];
+                      if (item is LiveCardList) {
+                        return LiveCardVApp(
+                          item: item.cardData!.smallCardV1!,
+                        );
+                      }
+                      return LiveCardVApp(item: item);
+                    },
+                    childCount: loadingState.response!.length,
+                  ),
+                ),
+              ],
             )
           : HttpError(onReload: controller.onReload),
       Error() => HttpError(
@@ -216,7 +280,6 @@ class _LivePageState extends CommonPageState<LivePage, LiveController>
         ),
         if (item.cardData?.myIdolV1?.list?.isNotEmpty == true)
           _buildFollowBody(theme, item.cardData!.myIdolV1!.list!),
-        const SizedBox(height: 10),
       ],
     );
   }

lib/pages/live_area/controller.dart

@@ -0,0 +1,66 @@
+import 'package:PiliPlus/http/live.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/live/live_area_list/area_item.dart';
+import 'package:PiliPlus/models/live/live_area_list/area_list.dart';
+import 'package:PiliPlus/pages/common/common_list_controller.dart';
+import 'package:PiliPlus/utils/storage.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:get/get.dart';
+
+class LiveAreaController
+    extends CommonListController<List<AreaList>?, AreaList> {
+  final isLogin = Accounts.main.isLogin;
+
+  late final isEditing = false.obs;
+
+  @override
+  void onInit() {
+    super.onInit();
+    if (isLogin) {
+      queryFavTags();
+    }
+    queryData();
+  }
+
+  @override
+  Future<void> onRefresh() {
+    if (isLogin) {
+      queryFavTags();
+    }
+    return super.onRefresh();
+  }
+
+  Rx<LoadingState<List<AreaItem>>> favState =
+      LoadingState<List<AreaItem>>.loading().obs;
+
+  @override
+  Future<LoadingState<List<AreaList>?>> customGetData() =>
+      LiveHttp.liveAreaList(isLogin: isLogin);
+
+  Future<void> queryFavTags() async {
+    favState.value = await LiveHttp.getLiveFavTag(isLogin: isLogin);
+  }
+
+  Future<void> setFavTag() async {
+    if (favState.value is Success) {
+      final res = await LiveHttp.setLiveFavTag(
+          ids: favState.value.data.map((e) => e.id).toList());
+      if (res['status']) {
+        isEditing.value = !isEditing.value;
+        SmartDialog.showToast('设置成功');
+      } else {
+        SmartDialog.showToast(res['msg']);
+      }
+    } else {
+      isEditing.value = !isEditing.value;
+    }
+  }
+
+  void onEdit() {
+    if (isEditing.value) {
+      setFavTag();
+    } else {
+      isEditing.value = !isEditing.value;
+    }
+  }
+}

lib/pages/live_area/view.dart

@@ -0,0 +1,372 @@
+import 'package:PiliPlus/common/widgets/button/icon_button.dart';
+import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
+import 'package:PiliPlus/common/widgets/keep_alive_wrapper.dart';
+import 'package:PiliPlus/common/widgets/loading_widget/loading_widget.dart';
+import 'package:PiliPlus/common/widgets/scroll_physics.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/live/live_area_list/area_item.dart';
+import 'package:PiliPlus/models/live/live_area_list/area_list.dart';
+import 'package:PiliPlus/pages/live_area/controller.dart';
+import 'package:PiliPlus/pages/live_area_detail/view.dart';
+import 'package:PiliPlus/pages/search/widgets/search_text.dart';
+import 'package:PiliPlus/utils/extension.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_sortable_wrap/sortable_wrap.dart';
+import 'package:get/get.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
+
+class LiveAreaPage extends StatefulWidget {
+  const LiveAreaPage({super.key});
+
+  @override
+  State<LiveAreaPage> createState() => _LiveAreaPageState();
+}
+
+class _LiveAreaPageState extends State<LiveAreaPage> {
+  final _controller = Get.put(LiveAreaController());
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('全部标签'),
+        actions: _controller.isLogin
+            ? [
+                TextButton(
+                  onPressed: _controller.onEdit,
+                  style: TextButton.styleFrom(
+                    visualDensity: VisualDensity.compact,
+                  ),
+                  child: Obx(
+                      () => Text(_controller.isEditing.value ? '完成' : '编辑')),
+                ),
+                const SizedBox(width: 16),
+              ]
+            : null,
+      ),
+      body: SafeArea(
+        top: false,
+        bottom: false,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (_controller.isLogin)
+              Obx(() => _buildFavWidget(theme, _controller.favState.value)),
+            Expanded(
+              child:
+                  Obx(() => _buildBody(theme, _controller.loadingState.value)),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildBody(
+      ThemeData theme, LoadingState<List<AreaList>?> loadingState) {
+    return switch (loadingState) {
+      Loading() => const SizedBox.shrink(),
+      Success() => loadingState.response?.isNotEmpty == true
+          ? DefaultTabController(
+              length: loadingState.response!.length,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  TabBar(
+                    isScrollable: true,
+                    tabAlignment: TabAlignment.start,
+                    tabs: loadingState.response!
+                        .map((e) => Tab(text: e.name))
+                        .toList(),
+                  ),
+                  Expanded(
+                    child: tabBarView(
+                        children: loadingState.response!
+                            .map(
+                              (e) => KeepAliveWrapper(
+                                builder: (context) {
+                                  if (e.areaList.isNullOrEmpty) {
+                                    return const SizedBox.shrink();
+                                  }
+                                  return GridView.builder(
+                                    padding: EdgeInsets.only(
+                                      top: 12,
+                                      bottom:
+                                          MediaQuery.paddingOf(context).bottom +
+                                              80,
+                                    ),
+                                    gridDelegate:
+                                        const SliverGridDelegateWithMaxCrossAxisExtent(
+                                      maxCrossAxisExtent: 100,
+                                      mainAxisSpacing: 10,
+                                      crossAxisSpacing: 10,
+                                      mainAxisExtent: 80,
+                                    ),
+                                    itemCount: e.areaList!.length,
+                                    itemBuilder: (context, index) {
+                                      final item = e.areaList![index];
+                                      return _tagItem(
+                                        theme: theme,
+                                        item: item,
+                                        onPressed: () {
+                                          // success
+                                          if (item.isFav == true) {
+                                            _controller.favState
+                                              ..value.data.remove(item)
+                                              ..refresh();
+                                            item.isFav = false;
+                                            (context as Element)
+                                                .markNeedsBuild();
+                                          } else {
+                                            // check
+                                            if (_controller.favState.value
+                                                is Success) {
+                                              _controller.favState
+                                                ..value.data.add(item)
+                                                ..refresh();
+                                              item.isFav = true;
+                                              (context as Element)
+                                                  .markNeedsBuild();
+                                            }
+                                          }
+                                        },
+                                      );
+                                    },
+                                  );
+                                },
+                              ),
+                            )
+                            .toList()),
+                  )
+                ],
+              ),
+            )
+          : scrollErrorWidget(onReload: _controller.onReload),
+      Error() => scrollErrorWidget(
+          errMsg: loadingState.errMsg,
+          onReload: _controller.onReload,
+        ),
+    };
+  }
+
+  Widget _buildFavWidget(
+      ThemeData theme, LoadingState<List<AreaItem>?> loadingState) {
+    if (loadingState is Success) {
+      final List<AreaItem>? list = loadingState.data;
+      return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text.rich(
+              TextSpan(
+                children: [
+                  const TextSpan(text: '我的常用标签  '),
+                  TextSpan(
+                    text: '点击进入标签',
+                    style: TextStyle(
+                      fontSize: 13,
+                      color: theme.colorScheme.outline,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 8),
+            if (list?.isNotEmpty == true) ...[
+              SortableWrap(
+                onSortStart: (index) {
+                  _controller.isEditing.value = true;
+                },
+                onSorted: (int oldIndex, int newIndex) {
+                  list.insert(newIndex, list.removeAt(oldIndex));
+                },
+                spacing: 12,
+                runSpacing: 8,
+                children: list!
+                    .map(
+                      (item) => _favTagItem(
+                        theme: theme,
+                        item: item,
+                        onPressed: () {
+                          list.remove(item);
+                          _controller.favState.refresh();
+
+                          // update isFav
+                          if (_controller.loadingState.value is Success) {
+                            List<AreaList>? areaList =
+                                _controller.loadingState.value.data;
+                            if (areaList?.isNotEmpty == true) {
+                              for (var i in areaList!) {
+                                if (i.areaList?.isNotEmpty == true) {
+                                  for (var j in i.areaList!) {
+                                    if (j == item) {
+                                      j.isFav = false;
+                                      _controller.loadingState.refresh();
+                                      break;
+                                    }
+                                  }
+                                }
+                              }
+                            }
+                          }
+                        },
+                      ),
+                    )
+                    .toList(),
+              ),
+              const SizedBox(height: 4),
+            ],
+          ],
+        ),
+      );
+    }
+
+    return const SizedBox.shrink();
+  }
+
+  Widget _tagItem({
+    required ThemeData theme,
+    required AreaItem item,
+    required VoidCallback onPressed,
+  }) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: () {
+        if (_controller.isEditing.value) {
+          onPressed();
+          return;
+        }
+
+        Get.to(
+          LiveAreaDetailPage(
+            areaId: item.id,
+            parentAreaId: item.parentId,
+            parentName: item.parentName ?? '',
+          ),
+        );
+      },
+      child: Stack(
+        alignment: Alignment.center,
+        clipBehavior: Clip.none,
+        children: [
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              NetworkImgLayer(
+                width: 45,
+                height: 45,
+                src: item.pic,
+                type: 'emote',
+              ),
+              const SizedBox(height: 4),
+              Text(
+                item.name!,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(fontSize: 12),
+              ),
+            ],
+          ),
+          Positioned(
+            top: 0,
+            right: 16,
+            child: Obx(() {
+              if (_controller.isEditing.value &&
+                  _controller.favState.value is Success) {
+                // init isFav
+                item.isFav ??= _controller.favState.value.data.contains(item);
+
+                return Builder(
+                  builder: (context) {
+                    return iconButton(
+                      size: 17,
+                      iconSize: 13,
+                      context: context,
+                      icon: item.isFav == true ? MdiIcons.check : MdiIcons.plus,
+                      bgColor: item.isFav == true
+                          ? theme.colorScheme.onInverseSurface
+                          : null,
+                      iconColor:
+                          item.isFav == true ? theme.colorScheme.outline : null,
+                      onPressed: onPressed,
+                    );
+                  },
+                );
+              }
+              return const SizedBox.shrink();
+            }),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _favTagItem({
+    required ThemeData theme,
+    required AreaItem item,
+    required VoidCallback onPressed,
+  }) {
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        DecoratedBox(
+          decoration: BoxDecoration(
+            border: Border.all(
+              color: theme.colorScheme.outline,
+            ),
+            borderRadius: const BorderRadius.all(Radius.circular(4)),
+            color: theme.colorScheme.surface,
+          ),
+          child: SearchText(
+            text: item.name!,
+            fontSize: 14,
+            bgColor: Colors.transparent,
+            padding: const EdgeInsets.symmetric(
+              horizontal: 12,
+              vertical: 4,
+            ),
+            onTap: (value) {
+              if (_controller.isEditing.value) {
+                onPressed();
+                return;
+              }
+
+              Get.to(
+                LiveAreaDetailPage(
+                  areaId: item.id,
+                  parentAreaId: item.parentId,
+                  parentName: item.parentName ?? '',
+                ),
+              );
+            },
+          ),
+        ),
+        Positioned(
+          right: -4,
+          top: -4,
+          child: Obx(() {
+            if (_controller.isEditing.value) {
+              final isDark = theme.brightness == Brightness.dark;
+              return iconButton(
+                size: 16,
+                iconSize: 12,
+                context: context,
+                icon: Icons.horizontal_rule,
+                bgColor: isDark
+                    ? theme.colorScheme.error
+                    : theme.colorScheme.errorContainer,
+                iconColor: isDark
+                    ? theme.colorScheme.onError
+                    : theme.colorScheme.onErrorContainer,
+                onPressed: onPressed,
+              );
+            }
+            return const SizedBox.shrink();
+          }),
+        )
+      ],
+    );
+  }
+}

lib/pages/live_area_detail/child/controller.dart

@@ -0,0 +1,38 @@
+import 'package:PiliPlus/http/live.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/live/live_feed_index/card_data_list_item.dart';
+import 'package:PiliPlus/models/live/live_second_list/data.dart';
+import 'package:PiliPlus/pages/common/common_list_controller.dart';
+import 'package:PiliPlus/utils/storage.dart';
+
+class LiveAreaChildController
+    extends CommonListController<LiveSecondData, CardLiveItem> {
+  LiveAreaChildController(this.areaId, this.parentAreaId);
+  final dynamic areaId;
+  final dynamic parentAreaId;
+
+  String? sortType;
+
+  final isLogin = Accounts.main.isLogin;
+
+  @override
+  void onInit() {
+    super.onInit();
+    queryData();
+  }
+
+  @override
+  List<CardLiveItem>? getDataList(LiveSecondData response) {
+    return response.cardList;
+  }
+
+  @override
+  Future<LoadingState<LiveSecondData>> customGetData() =>
+      LiveHttp.liveSecondList(
+        pn: currentPage,
+        isLogin: isLogin,
+        areaId: areaId,
+        parentAreaId: parentAreaId,
+        sortType: sortType,
+      );
+}

lib/pages/live_area_detail/child/view.dart

@@ -0,0 +1,103 @@
+import 'package:PiliPlus/common/constants.dart';
+import 'package:PiliPlus/common/skeleton/video_card_v.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/live/live_feed_index/card_data_list_item.dart';
+import 'package:PiliPlus/pages/live/widgets/live_item_app.dart';
+import 'package:PiliPlus/pages/live_area_detail/child/controller.dart';
+import 'package:PiliPlus/utils/grid.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class LiveAreaChildPage extends StatefulWidget {
+  const LiveAreaChildPage({
+    super.key,
+    required this.areaId,
+    required this.parentAreaId,
+  });
+
+  final dynamic areaId;
+  final dynamic parentAreaId;
+
+  @override
+  State<LiveAreaChildPage> createState() => _LiveAreaChildPageState();
+}
+
+class _LiveAreaChildPageState extends State<LiveAreaChildPage>
+    with AutomaticKeepAliveClientMixin {
+  late final _controller = Get.put(
+    LiveAreaChildController(widget.areaId, widget.parentAreaId),
+    tag: '${widget.areaId}${widget.parentAreaId}',
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return refreshIndicator(
+      onRefresh: _controller.onRefresh,
+      child: CustomScrollView(
+        slivers: [
+          SliverPadding(
+            padding: EdgeInsets.only(
+              left: StyleString.safeSpace,
+              right: StyleString.safeSpace,
+              top: StyleString.safeSpace,
+              bottom: MediaQuery.paddingOf(context).bottom + 80,
+            ),
+            sliver: Obx(() => _buildBody(_controller.loadingState.value)),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildBody(LoadingState<List<CardLiveItem>?> loadingState) {
+    return switch (loadingState) {
+      Loading() => SliverGrid(
+          gridDelegate: SliverGridDelegateWithExtentAndRatio(
+            mainAxisSpacing: StyleString.cardSpace,
+            crossAxisSpacing: StyleString.cardSpace,
+            maxCrossAxisExtent: Grid.smallCardWidth,
+            childAspectRatio: StyleString.aspectRatio,
+            mainAxisExtent: MediaQuery.textScalerOf(context).scale(90),
+          ),
+          delegate: SliverChildBuilderDelegate(
+            (context, index) {
+              return const VideoCardVSkeleton();
+            },
+            childCount: 10,
+          ),
+        ),
+      Success() => loadingState.response?.isNotEmpty == true
+          ? SliverGrid(
+              gridDelegate: SliverGridDelegateWithExtentAndRatio(
+                mainAxisSpacing: StyleString.cardSpace,
+                crossAxisSpacing: StyleString.cardSpace,
+                maxCrossAxisExtent: Grid.smallCardWidth,
+                childAspectRatio: StyleString.aspectRatio,
+                mainAxisExtent: MediaQuery.textScalerOf(context).scale(90),
+              ),
+              delegate: SliverChildBuilderDelegate(
+                (context, index) {
+                  if (index == loadingState.response!.length - 1) {
+                    _controller.onLoadMore();
+                  }
+                  return LiveCardVApp(item: loadingState.response![index]);
+                },
+                childCount: loadingState.response!.length,
+              ),
+            )
+          : HttpError(
+              onReload: _controller.onReload,
+            ),
+      Error() => HttpError(
+          errMsg: loadingState.errMsg,
+          onReload: _controller.onReload,
+        ),
+    };
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}

lib/pages/live_area_detail/controller.dart

@@ -0,0 +1,38 @@
+import 'dart:math';
+
+import 'package:PiliPlus/http/live.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/live/live_area_list/area_item.dart';
+import 'package:PiliPlus/pages/common/common_list_controller.dart';
+import 'package:PiliPlus/utils/storage.dart';
+
+class LiveAreaDatailController
+    extends CommonListController<List<AreaItem>?, AreaItem> {
+  LiveAreaDatailController(this.areaId, this.parentAreaId);
+  final dynamic areaId;
+  final dynamic parentAreaId;
+
+  late int initialIndex = 0;
+  final isLogin = Accounts.main.isLogin;
+
+  @override
+  void onInit() {
+    super.onInit();
+    queryData();
+  }
+
+  @override
+  List<AreaItem>? getDataList(List<AreaItem>? response) {
+    if (response?.isNotEmpty == true) {
+      initialIndex = max(0, response!.indexWhere((e) => e.id == areaId));
+    }
+    return response;
+  }
+
+  @override
+  Future<LoadingState<List<AreaItem>?>> customGetData() =>
+      LiveHttp.liveRoomAreaList(
+        isLogin: isLogin,
+        parentid: parentAreaId,
+      );
+}

lib/pages/live_area_detail/view.dart

@@ -0,0 +1,94 @@
+import 'package:PiliPlus/common/widgets/scroll_physics.dart';
+import 'package:PiliPlus/http/loading_state.dart';
+import 'package:PiliPlus/models/live/live_area_list/area_item.dart';
+import 'package:PiliPlus/pages/live_area_detail/child/view.dart';
+import 'package:PiliPlus/pages/live_area_detail/controller.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class LiveAreaDetailPage extends StatefulWidget {
+  const LiveAreaDetailPage({
+    super.key,
+    required this.areaId,
+    required this.parentAreaId,
+    required this.parentName,
+  });
+
+  final dynamic areaId;
+  final dynamic parentAreaId;
+  final String parentName;
+
+  @override
+  State<LiveAreaDetailPage> createState() => _LiveAreaDetailPageState();
+}
+
+class _LiveAreaDetailPageState extends State<LiveAreaDetailPage> {
+  late final _controller = Get.put(
+      LiveAreaDatailController(widget.areaId?.toString(), widget.parentAreaId));
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.parentName),
+        actions: [
+          IconButton(
+            onPressed: () {
+              // TODO: search
+            },
+            icon: const Icon(Icons.search),
+          ),
+          const SizedBox(width: 16),
+        ],
+      ),
+      body: SafeArea(
+        top: false,
+        bottom: false,
+        child: Obx(() => _buildBody(theme, _controller.loadingState.value)),
+      ),
+    );
+  }
+
+  Widget _buildBody(
+      ThemeData theme, LoadingState<List<AreaItem>?> loadingState) {
+    return switch (loadingState) {
+      Loading() => const SizedBox.shrink(),
+      Success() => loadingState.response?.isNotEmpty == true
+          ? DefaultTabController(
+              initialIndex: _controller.initialIndex,
+              length: loadingState.response!.length,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  TabBar(
+                    isScrollable: true,
+                    tabAlignment: TabAlignment.start,
+                    tabs: loadingState.response!
+                        .map((e) => Tab(text: e.name ?? ''))
+                        .toList(),
+                  ),
+                  Expanded(
+                    child: tabBarView(
+                      children: loadingState.response!
+                          .map((e) => LiveAreaChildPage(
+                                areaId: e.id,
+                                parentAreaId: e.parentId,
+                              ))
+                          .toList(),
+                    ),
+                  ),
+                ],
+              ),
+            )
+          : LiveAreaChildPage(
+              areaId: widget.areaId,
+              parentAreaId: widget.parentAreaId,
+            ),
+      Error() => LiveAreaChildPage(
+          areaId: widget.areaId,
+          parentAreaId: widget.parentAreaId,
+        ),
+    };
+  }
+}