From 7a969ea40e0c4254ce5a5e572bba1019694641fd Mon Sep 17 00:00:00 2001
From: Richasy <Thansy@foxmail.com>
Date: Sun, 3 Apr 2022 16:26:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E7=9B=B4?=
 =?UTF-8?q?=E6=92=AD=E5=88=86=E5=8C=BA=20(#994)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 支持显示热门标签和全部标签

* 完成直播分区详情页

* 添加连接动画
---
 src/App/App.csproj                            |  21 +++
 .../Controls/App/CenterPopup/CenterPopup.xaml |   5 +-
 .../Controls/App/RootNavigationView.xaml.cs   |   3 +
 .../Common/HorizontalRepeaterView.xaml        |   2 +-
 src/App/Controls/Live/LiveAreaItem.xaml       |  33 ++++
 src/App/Controls/Live/LiveAreaItem.xaml.cs    |  62 +++++++
 src/App/Controls/Live/LiveAreaView.xaml       |  64 +++++++
 src/App/Controls/Live/LiveAreaView.xaml.cs    |  45 +++++
 src/App/Pages/LivePage.xaml                   |  32 +++-
 src/App/Pages/LivePage.xaml.cs                |  21 +++
 src/App/Pages/Overlay/LiveAreaDetailPage.xaml | 145 +++++++++++++++
 .../Pages/Overlay/LiveAreaDetailPage.xaml.cs  |  51 ++++++
 .../Resources/Strings/zh-CN/Resources.resw    |  12 ++
 .../Controller.Uwp/BiliController.Live.cs     |  38 ++++
 .../Controller.Uwp/BiliController.cs          |   5 +
 src/Lib/Lib.Interfaces/ILiveProvider.cs       |  17 ++
 src/Lib/Lib.Uwp/LiveProvider/LiveProvider.cs  |  38 ++++
 .../Args/LiveAreaRoomIterationEventArgs.cs    |  53 ++++++
 .../LiveFeedAdditionalDataChangedEventArgs.cs |   2 +-
 .../Models.App/Constants/ApiConstants.cs      |  10 ++
 .../Models.App/Constants/ServiceConstants.cs  |   5 +
 src/Models/Models.BiliBili/Live/LiveArea.cs   |  99 +++++++++++
 .../Live/LiveAreaDetailResponse.cs            |  75 ++++++++
 .../Models.BiliBili/Live/LiveAreaResponse.cs  |  20 +++
 ...{LiveFeedFollowRoom.cs => LiveFeedRoom.cs} |   4 +-
 .../Models.BiliBili/Live/LiveRoomBase.cs      |   6 -
 src/Models/Models.Enums/App/LanguageNames.cs  |   4 +
 src/Models/Models.Enums/App/PageIds.cs        |   5 +
 .../Common/VideoViewModel/VideoViewModel.cs   |   2 +-
 .../LiveAreaViewModel.Properties.cs           |  62 +++++++
 .../LiveAreaViewModel/LiveAreaViewModel.cs    | 165 ++++++++++++++++++
 .../LiveModuleViewModel.Properties.cs         |  41 ++++-
 .../LiveModuleViewModel.cs                    |  57 ++++++
 .../ViewModels.Uwp/ViewModels.Uwp.csproj      |   2 +
 34 files changed, 1187 insertions(+), 19 deletions(-)
 create mode 100644 src/App/Controls/Live/LiveAreaItem.xaml
 create mode 100644 src/App/Controls/Live/LiveAreaItem.xaml.cs
 create mode 100644 src/App/Controls/Live/LiveAreaView.xaml
 create mode 100644 src/App/Controls/Live/LiveAreaView.xaml.cs
 create mode 100644 src/App/Pages/Overlay/LiveAreaDetailPage.xaml
 create mode 100644 src/App/Pages/Overlay/LiveAreaDetailPage.xaml.cs
 create mode 100644 src/Models/Models.App/Args/LiveAreaRoomIterationEventArgs.cs
 create mode 100644 src/Models/Models.BiliBili/Live/LiveArea.cs
 create mode 100644 src/Models/Models.BiliBili/Live/LiveAreaDetailResponse.cs
 create mode 100644 src/Models/Models.BiliBili/Live/LiveAreaResponse.cs
 rename src/Models/Models.BiliBili/Live/{LiveFeedFollowRoom.cs => LiveFeedRoom.cs} (97%)
 create mode 100644 src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.Properties.cs
 create mode 100644 src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.cs

diff --git a/src/App/App.csproj b/src/App/App.csproj
index d7c6f179a..0269d5ed2 100644
--- a/src/App/App.csproj
+++ b/src/App/App.csproj
@@ -48,6 +48,12 @@
     <Compile Include="Controls\Common\VerticalRepeaterView\VerticalRepeaterView.Properties.cs" />
     <Compile Include="Controls\Common\VideoCard\VideoCard.cs" />
     <Compile Include="Controls\Common\VideoCard\VideoCard.Properties.cs" />
+    <Compile Include="Controls\Live\LiveAreaItem.xaml.cs">
+      <DependentUpon>LiveAreaItem.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Controls\Live\LiveAreaView.xaml.cs">
+      <DependentUpon>LiveAreaView.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\Player\PlayerTip\PlayerTip.cs" />
     <Compile Include="Controls\Player\Related\ViewLaterView.xaml.cs">
       <DependentUpon>ViewLaterView.xaml</DependentUpon>
@@ -334,6 +340,9 @@
     <Compile Include="Pages\Overlay\HistoryPage.xaml.cs">
       <DependentUpon>HistoryPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Pages\Overlay\LiveAreaDetailPage.xaml.cs">
+      <DependentUpon>LiveAreaDetailPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Pages\Overlay\MessagePage.xaml.cs">
       <DependentUpon>MessagePage.xaml</DependentUpon>
     </Compile>
@@ -572,6 +581,14 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Controls\Live\LiveAreaItem.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Controls\Live\LiveAreaView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\Player\PlayerTip\PlayerTip.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -940,6 +957,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Pages\Overlay\LiveAreaDetailPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Pages\Overlay\MessagePage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/App/Controls/App/CenterPopup/CenterPopup.xaml b/src/App/Controls/App/CenterPopup/CenterPopup.xaml
index 7eab62e3e..d649e2b40 100644
--- a/src/App/Controls/App/CenterPopup/CenterPopup.xaml
+++ b/src/App/Controls/App/CenterPopup/CenterPopup.xaml
@@ -2,6 +2,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:icons="using:Richasy.FluentIcon.Uwp"
+    xmlns:loc="using:Richasy.Bili.Locator.Uwp"
     xmlns:local="using:Richasy.Bili.App.Controls">
 
     <ResourceDictionary.ThemeDictionaries>
@@ -73,8 +74,10 @@
                                     TextTrimming="CharacterEllipsis" />
                                 <Button
                                     x:Name="CloseButton"
+                                    AutomationProperties.Name="{loc:LocaleLocator Name=Close}"
                                     Grid.Column="1"
-                                    VerticalAlignment="Center">
+                                    VerticalAlignment="Center"
+                                    ToolTipService.ToolTip="{loc:LocaleLocator Name=Close}">
                                     <icons:RegularFluentIcon FontSize="12" Symbol="Dismiss16" />
                                     <Button.KeyboardAccelerators>
                                         <KeyboardAccelerator Key="Escape" />
diff --git a/src/App/Controls/App/RootNavigationView.xaml.cs b/src/App/Controls/App/RootNavigationView.xaml.cs
index 6bb3fe151..67a4ef8ad 100644
--- a/src/App/Controls/App/RootNavigationView.xaml.cs
+++ b/src/App/Controls/App/RootNavigationView.xaml.cs
@@ -225,6 +225,9 @@ private void CheckOverlayContentNavigation(object param)
                 case PageIds.Message:
                     pageType = typeof(MessagePage);
                     break;
+                case PageIds.LiveAreaDetail:
+                    pageType = typeof(LiveAreaDetailPage);
+                    break;
                 default:
                     break;
             }
diff --git a/src/App/Controls/Common/HorizontalRepeaterView.xaml b/src/App/Controls/Common/HorizontalRepeaterView.xaml
index 2df356d50..3069d493b 100644
--- a/src/App/Controls/Common/HorizontalRepeaterView.xaml
+++ b/src/App/Controls/Common/HorizontalRepeaterView.xaml
@@ -47,7 +47,7 @@
             <ScrollViewer
                 x:Name="WideScrollViewer"
                 HorizontalScrollBarVisibility="Hidden"
-                HorizontalScrollMode="Disabled"
+                HorizontalScrollMode="Enabled"
                 VerticalScrollBarVisibility="Hidden"
                 VerticalScrollMode="Disabled"
                 ViewChanged="OnWideScrollViewerChanged">
diff --git a/src/App/Controls/Live/LiveAreaItem.xaml b/src/App/Controls/Live/LiveAreaItem.xaml
new file mode 100644
index 000000000..d3cd68880
--- /dev/null
+++ b/src/App/Controls/Live/LiveAreaItem.xaml
@@ -0,0 +1,33 @@
+<UserControl
+    x:Class="Richasy.Bili.App.Controls.LiveAreaItem"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Richasy.Bili.App.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="300"
+    d:DesignWidth="400"
+    mc:Ignorable="d">
+
+    <local:CardPanel
+        x:Name="ContentContainer"
+        Click="OnAreaClick"
+        IsEnableHoverAnimation="False"
+        IsEnableShadow="False">
+        <StackPanel
+            Margin="4"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Spacing="12">
+            <local:CommonImageEx
+                Width="40"
+                HorizontalAlignment="Center"
+                ImageUrl="{x:Bind Cover, Mode=OneWay}" />
+            <TextBlock
+                HorizontalAlignment="Center"
+                Text="{x:Bind Title, Mode=OneWay}"
+                TextAlignment="Center"
+                TextWrapping="Wrap" />
+        </StackPanel>
+    </local:CardPanel>
+</UserControl>
diff --git a/src/App/Controls/Live/LiveAreaItem.xaml.cs b/src/App/Controls/Live/LiveAreaItem.xaml.cs
new file mode 100644
index 000000000..6c249ef00
--- /dev/null
+++ b/src/App/Controls/Live/LiveAreaItem.xaml.cs
@@ -0,0 +1,62 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media.Animation;
+
+namespace Richasy.Bili.App.Controls
+{
+    /// <summary>
+    /// 直播分区条目.
+    /// </summary>
+    public sealed partial class LiveAreaItem : UserControl
+    {
+        /// <summary>
+        /// <see cref="Cover"/> 的依赖属性.
+        /// </summary>
+        public static readonly DependencyProperty CoverProperty =
+            DependencyProperty.Register(nameof(Cover), typeof(string), typeof(LiveAreaItem), new PropertyMetadata(default));
+
+        /// <summary>
+        /// <see cref="Title"/> 的依赖属性.
+        /// </summary>
+        public static readonly DependencyProperty TitleProperty =
+            DependencyProperty.Register(nameof(Title), typeof(string), typeof(LiveAreaItem), new PropertyMetadata(default));
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LiveAreaItem"/> class.
+        /// </summary>
+        public LiveAreaItem() => InitializeComponent();
+
+        /// <summary>
+        /// 在条目被点击时发生.
+        /// </summary>
+        public event EventHandler ItemClick;
+
+        /// <summary>
+        /// 封面.
+        /// </summary>
+        public string Cover
+        {
+            get { return (string)GetValue(CoverProperty); }
+            set { SetValue(CoverProperty, value); }
+        }
+
+        /// <summary>
+        /// 标题.
+        /// </summary>
+        public string Title
+        {
+            get { return (string)GetValue(TitleProperty); }
+            set { SetValue(TitleProperty, value); }
+        }
+
+        private void OnAreaClick(object sender, RoutedEventArgs e)
+        {
+            var animationService = ConnectedAnimationService.GetForCurrentView();
+            animationService.PrepareToAnimate("LiveAreaAnimate", ContentContainer);
+            ItemClick?.Invoke(this, EventArgs.Empty);
+        }
+    }
+}
diff --git a/src/App/Controls/Live/LiveAreaView.xaml b/src/App/Controls/Live/LiveAreaView.xaml
new file mode 100644
index 000000000..ab534ca69
--- /dev/null
+++ b/src/App/Controls/Live/LiveAreaView.xaml
@@ -0,0 +1,64 @@
+<local:CenterPopup
+    x:Class="Richasy.Bili.App.Controls.LiveAreaView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:bilibili="using:Richasy.Bili.Models.BiliBili"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:loc="using:Richasy.Bili.Locator.Uwp"
+    xmlns:local="using:Richasy.Bili.App.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    Title="{loc:LocaleLocator Name=TotalTags}"
+    d:DesignHeight="300"
+    d:DesignWidth="400"
+    mc:Ignorable="d">
+
+    <Grid MinHeight="200">
+        <Grid Visibility="{x:Bind _viewModel.IsAreaError, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+            <muxc:NavigationView
+                IsBackButtonVisible="Collapsed"
+                IsPaneToggleButtonVisible="False"
+                IsSettingsVisible="False"
+                MenuItemsSource="{x:Bind _viewModel.LiveAreaGroupCollection}"
+                PaneDisplayMode="Top"
+                SelectedItem="{x:Bind _viewModel.SelectedAreaGroup, Mode=TwoWay}"
+                Visibility="{x:Bind _viewModel.IsLiveAreaRequesting, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+                <muxc:NavigationView.MenuItemTemplate>
+                    <DataTemplate x:DataType="bilibili:LiveAreaGroup">
+                        <muxc:NavigationViewItem Content="{x:Bind Name}" />
+                    </DataTemplate>
+                </muxc:NavigationView.MenuItemTemplate>
+                <ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
+                    <muxc:ItemsRepeater Margin="0,8,0,20" ItemsSource="{x:Bind _viewModel.DisplayAreaCollection}">
+                        <muxc:ItemsRepeater.Layout>
+                            <muxc:UniformGridLayout
+                                ItemsStretch="Fill"
+                                MinColumnSpacing="12"
+                                MinItemHeight="118"
+                                MinItemWidth="120"
+                                MinRowSpacing="12" />
+                        </muxc:ItemsRepeater.Layout>
+                        <muxc:ItemsRepeater.ItemTemplate>
+                            <DataTemplate x:DataType="bilibili:LiveArea">
+                                <local:LiveAreaItem
+                                    Title="{x:Bind Name}"
+                                    Cover="{x:Bind Cover}"
+                                    DataContext="{x:Bind}"
+                                    ItemClick="OnAreaClick" />
+                            </DataTemplate>
+                        </muxc:ItemsRepeater.ItemTemplate>
+                    </muxc:ItemsRepeater>
+                </ScrollViewer>
+            </muxc:NavigationView>
+        </Grid>
+
+        <muxc:ProgressRing Style="{StaticResource PageProgressRingStyle}" IsActive="{x:Bind _viewModel.IsLiveAreaRequesting, Mode=OneWay}" />
+
+        <local:ErrorPanel
+            x:Name="ErrorPanel"
+            ActionButtonClick="OnRefreshButtonClickAsync"
+            ActionContent="{loc:LocaleLocator Name=Refresh}"
+            Text="{loc:LocaleLocator Name=RequestLiveTagsFailed}"
+            Visibility="{x:Bind _viewModel.IsAreaError, Mode=OneWay}" />
+    </Grid>
+</local:CenterPopup>
diff --git a/src/App/Controls/Live/LiveAreaView.xaml.cs b/src/App/Controls/Live/LiveAreaView.xaml.cs
new file mode 100644
index 000000000..e657db223
--- /dev/null
+++ b/src/App/Controls/Live/LiveAreaView.xaml.cs
@@ -0,0 +1,45 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System.Threading.Tasks;
+using Richasy.Bili.Models.BiliBili;
+using Richasy.Bili.ViewModels.Uwp;
+using Windows.UI.Xaml;
+
+namespace Richasy.Bili.App.Controls
+{
+    /// <summary>
+    /// 直播分区视图.
+    /// </summary>
+    public sealed partial class LiveAreaView : CenterPopup
+    {
+        private readonly LiveModuleViewModel _viewModel = LiveModuleViewModel.Instance;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LiveAreaView"/> class.
+        /// </summary>
+        public LiveAreaView() => InitializeComponent();
+
+        /// <summary>
+        /// 显示视图.
+        /// </summary>
+        /// <returns><see cref="Task"/>.</returns>
+        public async Task ShowAsync()
+        {
+            Show();
+            if (_viewModel.LiveAreaGroupCollection.Count == 0)
+            {
+                await _viewModel.InitializeAreaIndexAsync();
+            }
+        }
+
+        private async void OnRefreshButtonClickAsync(object sender, RoutedEventArgs e)
+            => await _viewModel.InitializeAreaIndexAsync();
+
+        private void OnAreaClick(object sender, System.EventArgs e)
+        {
+            var data = (sender as FrameworkElement).DataContext as LiveArea;
+            AppViewModel.Instance.SetOverlayContentId(Models.Enums.PageIds.LiveAreaDetail, data);
+            Hide();
+        }
+    }
+}
diff --git a/src/App/Pages/LivePage.xaml b/src/App/Pages/LivePage.xaml
index 08c7d66f6..ea2e637ff 100644
--- a/src/App/Pages/LivePage.xaml
+++ b/src/App/Pages/LivePage.xaml
@@ -2,6 +2,7 @@
     x:Class="Richasy.Bili.App.Pages.LivePage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:bilibili="using:Richasy.Bili.Models.BiliBili"
     xmlns:controls="using:Richasy.Bili.App.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:icons="using:Richasy.FluentIcon.Uwp"
@@ -47,6 +48,7 @@
                         <RowDefinition x:Name="Row1" Height="Auto" />
                         <RowDefinition x:Name="Row2" Height="Auto" />
                         <RowDefinition x:Name="Row3" Height="Auto" />
+                        <RowDefinition x:Name="Row4" Height="Auto" />
                     </Grid.RowDefinitions>
                     <Grid
                         x:Name="BannerContainer"
@@ -56,9 +58,35 @@
                         <controls:BannerView VerticalAlignment="Top" ItemsSource="{x:Bind ViewModel.BannerCollection}" />
                     </Grid>
 
+                    <Grid x:Name="PartitionContainer" Grid.Row="1">
+                        <controls:HorizontalRepeaterView
+                            x:Name="PartitionView"
+                            Header="{loc:LocaleLocator Name=HotTags}"
+                            HeaderVisibility="Visible"
+                            ItemsSource="{x:Bind ViewModel.HotTagCollection}">
+                            <controls:HorizontalRepeaterView.WideItemTemplate>
+                                <DataTemplate x:DataType="bilibili:LiveFeedHotArea">
+                                    <controls:LiveAreaItem
+                                        Title="{x:Bind Title}"
+                                        Width="120"
+                                        Height="116"
+                                        Cover="{x:Bind Cover}"
+                                        DataContext="{x:Bind}"
+                                        ItemClick="OnAreaItemClick" />
+                                </DataTemplate>
+                            </controls:HorizontalRepeaterView.WideItemTemplate>
+                            <controls:HorizontalRepeaterView.AdditionalContent>
+                                <Button
+                                    x:Name="SeeAllTagsButton"
+                                    Click="OnSeeAllTagsButtonClickAsync"
+                                    Content="{loc:LocaleLocator Name=SeeAll}" />
+                            </controls:HorizontalRepeaterView.AdditionalContent>
+                        </controls:HorizontalRepeaterView>
+                    </Grid>
+
                     <Grid
                         x:Name="InlineFollowContainer"
-                        Grid.Row="1"
+                        Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         Visibility="Collapsed">
                         <controls:FollowLiveView ItemOrientation="Vertical" Visibility="{x:Bind ViewModel.IsShowFollowList, Mode=OneWay}" />
@@ -66,7 +94,7 @@
 
                     <Grid
                         x:Name="FeedsContainer"
-                        Grid.Row="2"
+                        Grid.Row="3"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <controls:VerticalRepeaterView
diff --git a/src/App/Pages/LivePage.xaml.cs b/src/App/Pages/LivePage.xaml.cs
index 22b579c90..c0074e890 100644
--- a/src/App/Pages/LivePage.xaml.cs
+++ b/src/App/Pages/LivePage.xaml.cs
@@ -1,6 +1,8 @@
 // Copyright (c) Richasy. All rights reserved.
 
 using System;
+using Richasy.Bili.App.Controls;
+using Richasy.Bili.Models.BiliBili;
 using Richasy.Bili.ViewModels.Uwp;
 using Windows.UI.Xaml;
 
@@ -65,5 +67,24 @@ private void OnFollowListViewItemClick(object sender, EventArgs e)
         {
             StandardFollowFlyout.Hide();
         }
+
+        private async void OnSeeAllTagsButtonClickAsync(object sender, RoutedEventArgs e)
+            => await new LiveAreaView().ShowAsync();
+
+        private void OnAreaItemClick(object sender, EventArgs e)
+        {
+            if ((sender as FrameworkElement)?.DataContext is LiveFeedHotArea context)
+            {
+                var area = new LiveArea()
+                {
+                    Cover = context.Cover,
+                    Id = context.Id,
+                    ParentId = context.ParentAreaId,
+                    Name = context.Title,
+                };
+
+                AppViewModel.Instance.SetOverlayContentId(Models.Enums.PageIds.LiveAreaDetail, area);
+            }
+        }
     }
 }
diff --git a/src/App/Pages/Overlay/LiveAreaDetailPage.xaml b/src/App/Pages/Overlay/LiveAreaDetailPage.xaml
new file mode 100644
index 000000000..ec72b71dc
--- /dev/null
+++ b/src/App/Pages/Overlay/LiveAreaDetailPage.xaml
@@ -0,0 +1,145 @@
+<pages:AppPage
+    x:Class="Richasy.Bili.App.Pages.Overlay.LiveAreaDetailPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:bilibili="using:Richasy.Bili.Models.BiliBili"
+    xmlns:controls="using:Richasy.Bili.App.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:enums="using:Richasy.Bili.Models.Enums"
+    xmlns:icons="using:Richasy.FluentIcon.Uwp"
+    xmlns:loc="using:Richasy.Bili.Locator.Uwp"
+    xmlns:local="using:Richasy.Bili.App.Pages.Overlay"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:pages="using:Richasy.Bili.App.Pages"
+    xmlns:uwp="using:Richasy.Bili.ViewModels.Uwp"
+    mc:Ignorable="d">
+
+    <Grid x:Name="RootContainer">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="Common">
+                <VisualState x:Name="WideState">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowThresholdWidth}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="NarrowState">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="VideoView.ItemOrientation" Value="Horizontal" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <StackPanel
+            x:Name="PartitionHeader"
+            HorizontalAlignment="Left"
+            Orientation="Horizontal"
+            Spacing="12">
+            <controls:CommonImageEx
+                x:Name="PartitionLogo"
+                Width="32"
+                ImageUrl="{x:Bind _viewModel.AreaImage, Mode=OneWay}" />
+            <TextBlock
+                x:Name="PartitionName"
+                Style="{StaticResource SubtitleTextBlockStyle}"
+                FontWeight="Bold"
+                Text="{x:Bind _viewModel.AreaName, Mode=OneWay}" />
+        </StackPanel>
+
+        <muxc:NavigationView
+            x:Name="DetailNavigationView"
+            Grid.Row="1"
+            IsBackButtonVisible="Collapsed"
+            IsPaneToggleButtonVisible="False"
+            IsSettingsVisible="False"
+            MenuItemsSource="{x:Bind _viewModel.TagCollection}"
+            PaneDisplayMode="Top"
+            SelectedItem="{x:Bind _viewModel.SelectedTag, Mode=TwoWay}"
+            Visibility="{x:Bind _viewModel.IsInitializeLoading, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+            <muxc:NavigationView.MenuItemTemplate>
+                <DataTemplate x:DataType="bilibili:LiveAreaDetailTag">
+                    <muxc:NavigationViewItem Content="{x:Bind Name}" />
+                </DataTemplate>
+            </muxc:NavigationView.MenuItemTemplate>
+            <muxc:NavigationView.Content>
+                <Grid>
+                    <ScrollViewer
+                        x:Name="ContentScrollViewer"
+                        Padding="{x:Bind CoreViewModel.PageRightPadding, Mode=OneWay}"
+                        HorizontalScrollMode="Disabled"
+                        VerticalScrollBarVisibility="Auto">
+                        <Grid
+                            x:Name="ContentGrid"
+                            Padding="0,4,0,0"
+                            Visibility="{x:Bind _viewModel.IsInitializeLoading, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+                            <controls:VerticalRepeaterView
+                                x:Name="VideoView"
+                                Margin="0,0,0,12"
+                                HeaderText="{loc:LocaleLocator Name=Live}"
+                                ItemsSource="{x:Bind _viewModel.LiveRoomCollection, Mode=OneWay}"
+                                MinWideItemHeight="208"
+                                MinWideItemWidth="200"
+                                RequestLoadMore="OnVideoViewRequestLoadMoreAsync">
+                                <controls:VerticalRepeaterView.AdditionalContent>
+                                    <StackPanel Orientation="Horizontal" Spacing="8">
+                                        <Button
+                                            x:Name="RefreshButton"
+                                            VerticalAlignment="Center"
+                                            Click="OnRefreshButtonClickAsync"
+                                            Visibility="{x:Bind _viewModel.IsError, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+                                            <controls:IconTextBlock
+                                                Spacing="8"
+                                                Symbol="ArrowSyncCircle16"
+                                                Text="{loc:LocaleLocator Name=Refresh}" />
+                                        </Button>
+                                        <Button
+                                            x:Name="SeeAllTagsButton"
+                                            Style="{StaticResource AccentButtonStyle}"
+                                            Click="OnTotalTagsButtonClickAsync"
+                                            Content="{loc:LocaleLocator Name=TotalTags}" />
+                                    </StackPanel>
+                                </controls:VerticalRepeaterView.AdditionalContent>
+                                <controls:VerticalRepeaterView.ItemTemplate>
+                                    <DataTemplate x:DataType="uwp:VideoViewModel">
+                                        <controls:VideoCard
+                                            IsShowAvatar="False"
+                                            IsShowDanmakuCount="False"
+                                            IsShowDuration="False"
+                                            IsShowLikeCount="False"
+                                            IsShowPlayCount="False"
+                                            IsShowReplayCount="False"
+                                            IsShowViewerCount="True"
+                                            ViewModel="{x:Bind}" />
+                                    </DataTemplate>
+                                </controls:VerticalRepeaterView.ItemTemplate>
+                            </controls:VerticalRepeaterView>
+                        </Grid>
+                    </ScrollViewer>
+                </Grid>
+            </muxc:NavigationView.Content>
+        </muxc:NavigationView>
+
+        <controls:OverlayLoadingPanel
+            Grid.Row="1"
+            IsBarActive="{x:Bind _viewModel.IsDeltaLoading, Mode=OneWay}"
+            IsRingActive="{x:Bind _viewModel.IsInitializeLoading, Mode=OneWay}" />
+        <controls:ErrorPanel
+            x:Name="ErrorPanel"
+            Grid.Row="1"
+            ActionButtonClick="OnRefreshButtonClickAsync"
+            ActionContent="{loc:LocaleLocator Name=Refresh}"
+            Text="{x:Bind _viewModel.ErrorText, Mode=OneWay}"
+            Visibility="{x:Bind _viewModel.IsError, Mode=OneWay}" />
+        <controls:ErrorPanel
+            Grid.Row="1"
+            Text="{loc:LocaleLocator Name=NoSpecificData}"
+            Visibility="{x:Bind _viewModel.IsEmpty, Mode=OneWay}" />
+    </Grid>
+</pages:AppPage>
diff --git a/src/App/Pages/Overlay/LiveAreaDetailPage.xaml.cs b/src/App/Pages/Overlay/LiveAreaDetailPage.xaml.cs
new file mode 100644
index 000000000..dea50caaa
--- /dev/null
+++ b/src/App/Pages/Overlay/LiveAreaDetailPage.xaml.cs
@@ -0,0 +1,51 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using Richasy.Bili.App.Controls;
+using Richasy.Bili.Models.BiliBili;
+using Richasy.Bili.ViewModels.Uwp.Live;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media.Animation;
+using Windows.UI.Xaml.Navigation;
+
+namespace Richasy.Bili.App.Pages.Overlay
+{
+    /// <summary>
+    /// 直播分区详情页.
+    /// </summary>
+    public sealed partial class LiveAreaDetailPage : AppPage
+    {
+        private readonly LiveAreaViewModel _viewModel = LiveAreaViewModel.Instance;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LiveAreaDetailPage"/> class.
+        /// </summary>
+        public LiveAreaDetailPage() => InitializeComponent();
+
+        /// <inheritdoc/>
+        protected override async void OnNavigatedTo(NavigationEventArgs e)
+        {
+            if (e.Parameter is LiveArea area)
+            {
+                _viewModel.SetLiveArea(area);
+                var animationService = ConnectedAnimationService.GetForCurrentView();
+                var animate = animationService.GetAnimation("LiveAreaAnimate");
+                if (animate != null)
+                {
+                    animate.TryStart(PartitionHeader);
+                }
+
+                await _viewModel.RequestDataAsync();
+            }
+        }
+
+        private async void OnTotalTagsButtonClickAsync(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+            => await new LiveAreaView().ShowAsync();
+
+        private async void OnRefreshButtonClickAsync(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+            => await _viewModel.InitializeRequestAsync();
+
+        private async void OnVideoViewRequestLoadMoreAsync(object sender, System.EventArgs e)
+            => await _viewModel.RequestDataAsync();
+    }
+}
diff --git a/src/App/Resources/Strings/zh-CN/Resources.resw b/src/App/Resources/Strings/zh-CN/Resources.resw
index 8f255223b..96ce9f0ea 100644
--- a/src/App/Resources/Strings/zh-CN/Resources.resw
+++ b/src/App/Resources/Strings/zh-CN/Resources.resw
@@ -299,6 +299,9 @@ BV号以 BV 开头，是一串英文数字混合的编号， 如 BV1JL4y1875w</v
   <data name="ClearViewLaterWarning" xml:space="preserve">
     <value>是否要清空稍后再看列表？</value>
   </data>
+  <data name="Close" xml:space="preserve">
+    <value>关闭</value>
+  </data>
   <data name="Coin" xml:space="preserve">
     <value>投币</value>
   </data>
@@ -622,6 +625,9 @@ BV号以 BV 开头，是一串英文数字混合的编号， 如 BV1JL4y1875w</v
   <data name="HotSearch" xml:space="preserve">
     <value>搜索热词</value>
   </data>
+  <data name="HotTags" xml:space="preserve">
+    <value>热门标签</value>
+  </data>
   <data name="Hours" xml:space="preserve">
     <value>小时</value>
   </data>
@@ -1103,6 +1109,9 @@ BV号以 BV 开头，是一串英文数字混合的编号， 如 BV1JL4y1875w</v
   <data name="RequestLivePlayInformationFailed" xml:space="preserve">
     <value>请求直播播放信息失败</value>
   </data>
+  <data name="RequestLiveTagsFailed" xml:space="preserve">
+    <value>请求直播标签失败</value>
+  </data>
   <data name="RequestMessageFailed" xml:space="preserve">
     <value>请求消息失败</value>
   </data>
@@ -1340,6 +1349,9 @@ BV号以 BV 开头，是一串英文数字混合的编号， 如 BV1JL4y1875w</v
   <data name="Total" xml:space="preserve">
     <value>全部</value>
   </data>
+  <data name="TotalTags" xml:space="preserve">
+    <value>全部标签</value>
+  </data>
   <data name="TotalUser" xml:space="preserve">
     <value>全部用户</value>
   </data>
diff --git a/src/Controller/Controller.Uwp/BiliController.Live.cs b/src/Controller/Controller.Uwp/BiliController.Live.cs
index 2d97eaba0..04d67415d 100644
--- a/src/Controller/Controller.Uwp/BiliController.Live.cs
+++ b/src/Controller/Controller.Uwp/BiliController.Live.cs
@@ -59,6 +59,44 @@ public async Task RequestLiveFeedsAsync(int pageNumber)
             }
         }
 
+        /// <summary>
+        /// 请求分区下直播源列表.
+        /// </summary>
+        /// <param name="area">直播分区.</param>
+        /// <param name="sortType">排序方式.</param>
+        /// <param name="pageNumber">页码.</param>
+        /// <returns><see cref="Task"/>.</returns>
+        public async Task RequestLiveAreaRoomsAsync(LiveArea area, string sortType = "", int pageNumber = 1)
+        {
+            try
+            {
+                ThrowWhenNetworkUnavaliable();
+                var id = area.Id;
+                if (area.Id == area.ParentId)
+                {
+                    id = 0;
+                }
+
+                var data = await _liveProvider.GetLiveAreaDetailAsync(id, area.ParentId, sortType, pageNumber);
+                LiveAreaRoomIteration?.Invoke(this, new LiveAreaRoomIterationEventArgs(data, pageNumber + 1, sortType));
+            }
+            catch (ServiceException ex)
+            {
+                _loggerModule.LogError(ex, pageNumber > 1);
+                if (pageNumber == 1)
+                {
+                    throw;
+                }
+            }
+        }
+
+        /// <summary>
+        /// 获取直播间分区索引.
+        /// </summary>
+        /// <returns><see cref="LiveAreaResponse"/>.</returns>
+        public Task<LiveAreaResponse> GetLiveAreaIndexAsync()
+            => _liveProvider.GetLiveAreaIndexAsync();
+
         /// <summary>
         /// 获取直播间详情.
         /// </summary>
diff --git a/src/Controller/Controller.Uwp/BiliController.cs b/src/Controller/Controller.Uwp/BiliController.cs
index 20709f884..7c03e0f6e 100644
--- a/src/Controller/Controller.Uwp/BiliController.cs
+++ b/src/Controller/Controller.Uwp/BiliController.cs
@@ -134,6 +134,11 @@ internal BiliController()
         /// </summary>
         public event EventHandler<LiveFeedRoomIterationEventArgs> LiveFeedRoomIteration;
 
+        /// <summary>
+        /// 在分区视图中有新的直播源数据更改时发生.
+        /// </summary>
+        public event EventHandler<LiveAreaRoomIterationEventArgs> LiveAreaRoomIteration;
+
         /// <summary>
         /// 在专栏文章的附加数据发生改变时发生.
         /// </summary>
diff --git a/src/Lib/Lib.Interfaces/ILiveProvider.cs b/src/Lib/Lib.Interfaces/ILiveProvider.cs
index b2b08cb78..0a2759798 100644
--- a/src/Lib/Lib.Interfaces/ILiveProvider.cs
+++ b/src/Lib/Lib.Interfaces/ILiveProvider.cs
@@ -18,6 +18,12 @@ public interface ILiveProvider
         /// <returns><see cref="LiveFeedResponse"/>.</returns>
         Task<LiveFeedResponse> GetLiveFeedsAsync(int page);
 
+        /// <summary>
+        /// 获取直播间分区.
+        /// </summary>
+        /// <returns><see cref="LiveAreaResponse"/>.</returns>
+        Task<LiveAreaResponse> GetLiveAreaIndexAsync();
+
         /// <summary>
         /// 获取直播间详情.
         /// </summary>
@@ -50,5 +56,16 @@ public interface ILiveProvider
         /// <param name="location">弹幕位置.</param>
         /// <returns>是否发送成功.</returns>
         Task<bool> SendMessageAsync(int roomId, string message, string color, bool isStandardSize, DanmakuLocation location);
+
+        /// <summary>
+        /// 获取直播分区详情.
+        /// </summary>
+        /// <param name="areaId">分区Id.</param>
+        /// <param name="parentId">父分区Id.</param>
+        /// <param name="sortType">排序方式.</param>
+        /// <param name="pageNumber">页码.</param>
+        /// <param name="pageSize">每页容量.</param>
+        /// <returns><see cref="LiveAreaDetailResponse"/>.</returns>
+        Task<LiveAreaDetailResponse> GetLiveAreaDetailAsync(int areaId, int parentId, string sortType, int pageNumber, int pageSize = 40);
     }
 }
diff --git a/src/Lib/Lib.Uwp/LiveProvider/LiveProvider.cs b/src/Lib/Lib.Uwp/LiveProvider/LiveProvider.cs
index 0b825615b..e5a1d50bc 100644
--- a/src/Lib/Lib.Uwp/LiveProvider/LiveProvider.cs
+++ b/src/Lib/Lib.Uwp/LiveProvider/LiveProvider.cs
@@ -44,6 +44,44 @@ public async Task<bool> EnterLiveRoomAsync(int roomId)
             return data.IsSuccess();
         }
 
+        /// <inheritdoc/>
+        public async Task<LiveAreaDetailResponse> GetLiveAreaDetailAsync(int areaId, int parentId, string sortType, int pageNumber, int pageSize = 40)
+        {
+            var queryParameters = new Dictionary<string, string>
+            {
+                { Query.Page, pageNumber.ToString() },
+                { Query.PageSizeUnderline, pageSize.ToString() },
+                { Query.AreaId, areaId.ToString() },
+                { Query.ParentAreaId, parentId.ToString() },
+                { Query.Device, "phone" },
+            };
+
+            if (!string.IsNullOrEmpty(sortType))
+            {
+                queryParameters.Add(Query.SortType, sortType);
+            }
+
+            var request = await _httpProvider.GetRequestMessageAsync(HttpMethod.Get, Live.AreaDetail, queryParameters, RequestClientType.IOS);
+            var response = await _httpProvider.SendAsync(request);
+            var result = await _httpProvider.ParseAsync<ServerResponse<LiveAreaDetailResponse>>(response);
+
+            return result.Data;
+        }
+
+        /// <inheritdoc/>
+        public async Task<LiveAreaResponse> GetLiveAreaIndexAsync()
+        {
+            var queryParameters = new Dictionary<string, string>
+            {
+                { Query.Device, "phone" },
+            };
+            var request = await _httpProvider.GetRequestMessageAsync(HttpMethod.Get, Live.LiveArea, queryParameters, RequestClientType.IOS);
+            var response = await _httpProvider.SendAsync(request);
+            var result = await _httpProvider.ParseAsync<ServerResponse<LiveAreaResponse>>(response);
+
+            return result.Data;
+        }
+
         /// <inheritdoc/>
         public async Task<LiveFeedResponse> GetLiveFeedsAsync(int page)
         {
diff --git a/src/Models/Models.App/Args/LiveAreaRoomIterationEventArgs.cs b/src/Models/Models.App/Args/LiveAreaRoomIterationEventArgs.cs
new file mode 100644
index 000000000..93f236d62
--- /dev/null
+++ b/src/Models/Models.App/Args/LiveAreaRoomIterationEventArgs.cs
@@ -0,0 +1,53 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System.Collections.Generic;
+using Richasy.Bili.Models.BiliBili;
+
+namespace Richasy.Bili.Models.App.Args
+{
+    /// <summary>
+    /// 直播分区的直播间迭代事件参数.
+    /// </summary>
+    public class LiveAreaRoomIterationEventArgs
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LiveAreaRoomIterationEventArgs"/> class.
+        /// </summary>
+        /// <param name="response">响应结果.</param>
+        /// <param name="nextPage">下一页码.</param>
+        /// <param name="sortType">排序方式.</param>
+        public LiveAreaRoomIterationEventArgs(LiveAreaDetailResponse response, int nextPage, string sortType)
+        {
+            List = response.List;
+            Tags = response.Tags;
+            Count = response.Count;
+            NextPageNumber = nextPage;
+            SortType = sortType;
+        }
+
+        /// <summary>
+        /// 直播间列表.
+        /// </summary>
+        public List<LiveFeedRoom> List { get; internal set; }
+
+        /// <summary>
+        /// 子标签列表.
+        /// </summary>
+        public List<LiveAreaDetailTag> Tags { get; set; }
+
+        /// <summary>
+        /// 直播间总数.
+        /// </summary>
+        public int Count { get; set; }
+
+        /// <summary>
+        /// 下一页码.
+        /// </summary>
+        public int NextPageNumber { get; internal set; }
+
+        /// <summary>
+        /// 排序方式.
+        /// </summary>
+        public string SortType { get; set; }
+    }
+}
diff --git a/src/Models/Models.App/Args/LiveFeedAdditionalDataChangedEventArgs.cs b/src/Models/Models.App/Args/LiveFeedAdditionalDataChangedEventArgs.cs
index e789cfc42..eb2071e63 100644
--- a/src/Models/Models.App/Args/LiveFeedAdditionalDataChangedEventArgs.cs
+++ b/src/Models/Models.App/Args/LiveFeedAdditionalDataChangedEventArgs.cs
@@ -24,7 +24,7 @@ internal LiveFeedAdditionalDataChangedEventArgs()
         /// <summary>
         /// 关注用户列表.
         /// </summary>
-        public List<LiveFeedFollowRoom> FollowUserList { get; internal set; }
+        public List<LiveFeedRoom> FollowUserList { get; internal set; }
 
         /// <summary>
         /// 热门标签区域列表.
diff --git a/src/Models/Models.App/Constants/ApiConstants.cs b/src/Models/Models.App/Constants/ApiConstants.cs
index 670c37f05..8ff97b29e 100644
--- a/src/Models/Models.App/Constants/ApiConstants.cs
+++ b/src/Models/Models.App/Constants/ApiConstants.cs
@@ -293,6 +293,11 @@ public static class Live
             /// </summary>
             public const string LiveFeed = _liveBase + "/xlive/app-interface/v2/index/feed";
 
+            /// <summary>
+            /// 直播分区.
+            /// </summary>
+            public const string LiveArea = _liveBase + "/xlive/app-interface/v2/index/getAreaList";
+
             /// <summary>
             /// 直播间详情.
             /// </summary>
@@ -317,6 +322,11 @@ public static class Live
             /// 发送消息.
             /// </summary>
             public const string SendMessage = _liveBase + "/api/sendmsg";
+
+            /// <summary>
+            /// 分区详情.
+            /// </summary>
+            public const string AreaDetail = _liveBase + "/xlive/app-interface/v2/second/getList";
         }
 
         public static class Article
diff --git a/src/Models/Models.App/Constants/ServiceConstants.cs b/src/Models/Models.App/Constants/ServiceConstants.cs
index 7fdc160be..aabf1ced3 100644
--- a/src/Models/Models.App/Constants/ServiceConstants.cs
+++ b/src/Models/Models.App/Constants/ServiceConstants.cs
@@ -147,6 +147,7 @@ public static class Query
             public const string CopyRight = "copyright";
             public const string IsFinish = "is_finish";
             public const string PageSizeFull = "pagesize";
+            public const string PageSizeUnderline = "page_size";
             public const string SeasonMonth = "season_month";
             public const string SeasonStatus = "season_status";
             public const string SeasonVersion = "season_version";
@@ -178,6 +179,10 @@ public static class Query
             public const string GeeValidate = "gee_validate";
             public const string GeeChallenge = "gee_challenge";
             public const string RecaptchaToken = "recaptcha_token";
+            public const string AreaId = "area_id";
+            public const string CateId = "cate_id";
+            public const string ParentAreaId = "parent_area_id";
+            public const string SortType = "sort_type";
         }
 
         public static class Sort
diff --git a/src/Models/Models.BiliBili/Live/LiveArea.cs b/src/Models/Models.BiliBili/Live/LiveArea.cs
new file mode 100644
index 000000000..085500954
--- /dev/null
+++ b/src/Models/Models.BiliBili/Live/LiveArea.cs
@@ -0,0 +1,99 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System.Collections.Generic;
+using Newtonsoft.Json;
+
+namespace Richasy.Bili.Models.BiliBili
+{
+    /// <summary>
+    /// 直播间分区.
+    /// </summary>
+    [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
+    public class LiveArea
+    {
+        /// <summary>
+        /// 分区Id.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "id", Required = Required.Default)]
+        public int Id { get; set; }
+
+        /// <summary>
+        /// 名称.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "name", Required = Required.Default)]
+        public string Name { get; set; }
+
+        /// <summary>
+        /// 标签地址.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "link", Required = Required.Default)]
+        public string Link { get; set; }
+
+        /// <summary>
+        /// 标志.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "pic", Required = Required.Default)]
+        public string Cover { get; set; }
+
+        /// <summary>
+        /// 父分区 Id.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "parent_id", Required = Required.Default)]
+        public int ParentId { get; set; }
+
+        /// <summary>
+        /// 父分区名.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "parent_name", Required = Required.Default)]
+        public string ParentName { get; set; }
+
+        /// <summary>
+        /// 分区类型.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "area_type", Required = Required.Default)]
+        public int AreaType { get; set; }
+
+        /// <summary>
+        /// 是否为新分区.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "is_new", Required = Required.Default)]
+        public bool IsNew { get; set; }
+    }
+
+    /// <summary>
+    /// 直播间分区组.
+    /// </summary>
+    [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
+    public class LiveAreaGroup
+    {
+        /// <summary>
+        /// 标识符.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "id", Required = Required.Default)]
+        public int Id { get; set; }
+
+        /// <summary>
+        /// 名称.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "name", Required = Required.Default)]
+        public string Name { get; set; }
+
+        /// <summary>
+        /// 父分区类型.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "parent_area_type", Required = Required.Default)]
+        public int ParentAreaType { get; set; }
+
+        /// <summary>
+        /// 分区列表.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "area_list", Required = Required.Default)]
+        public List<LiveArea> AreaList { get; set; }
+
+        /// <inheritdoc/>
+        public override bool Equals(object obj) => obj is LiveAreaGroup group && Id == group.Id;
+
+        /// <inheritdoc/>
+        public override int GetHashCode() => 2108858624 + Id.GetHashCode();
+    }
+}
diff --git a/src/Models/Models.BiliBili/Live/LiveAreaDetailResponse.cs b/src/Models/Models.BiliBili/Live/LiveAreaDetailResponse.cs
new file mode 100644
index 000000000..f45c7da5a
--- /dev/null
+++ b/src/Models/Models.BiliBili/Live/LiveAreaDetailResponse.cs
@@ -0,0 +1,75 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System.Collections.Generic;
+using Newtonsoft.Json;
+
+namespace Richasy.Bili.Models.BiliBili
+{
+    /// <summary>
+    /// 直播间分区详情响应结果.
+    /// </summary>
+    [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
+    public class LiveAreaDetailResponse
+    {
+        /// <summary>
+        /// 子标签.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "new_tags", Required = Required.Default)]
+        public List<LiveAreaDetailTag> Tags { get; set; }
+
+        /// <summary>
+        /// 总数.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "count", Required = Required.Default)]
+        public int Count { get; set; }
+
+        /// <summary>
+        /// 直播间列表.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "list", Required = Required.Default)]
+        public List<LiveFeedRoom> List { get; set; }
+    }
+
+    /// <summary>
+    /// 直播间详情的子标签.
+    /// </summary>
+    [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
+    public class LiveAreaDetailTag
+    {
+        /// <summary>
+        /// 标签Id.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "id", Required = Required.Default)]
+        public int Id { get; set; }
+
+        /// <summary>
+        /// 标签名.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "name", Required = Required.Default)]
+        public string Name { get; set; }
+
+        /// <summary>
+        /// 排序方式.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "sort_type", Required = Required.Default)]
+        public string SortType { get; set; }
+
+        /// <summary>
+        /// 类型.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "type", Required = Required.Default)]
+        public int Type { get; set; }
+
+        /// <summary>
+        /// 排序.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "sort", Required = Required.Default)]
+        public int Sort { get; set; }
+
+        /// <inheritdoc/>
+        public override bool Equals(object obj) => obj is LiveAreaDetailTag tag && Id == tag.Id;
+
+        /// <inheritdoc/>
+        public override int GetHashCode() => 2108858624 + Id.GetHashCode();
+    }
+}
diff --git a/src/Models/Models.BiliBili/Live/LiveAreaResponse.cs b/src/Models/Models.BiliBili/Live/LiveAreaResponse.cs
new file mode 100644
index 000000000..a1e1e762f
--- /dev/null
+++ b/src/Models/Models.BiliBili/Live/LiveAreaResponse.cs
@@ -0,0 +1,20 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System.Collections.Generic;
+using Newtonsoft.Json;
+
+namespace Richasy.Bili.Models.BiliBili
+{
+    /// <summary>
+    /// 直播分区响应结果.
+    /// </summary>
+    [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
+    public class LiveAreaResponse
+    {
+        /// <summary>
+        /// 列表.
+        /// </summary>
+        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "list", Required = Required.Default)]
+        public List<LiveAreaGroup> List { get; set; }
+    }
+}
diff --git a/src/Models/Models.BiliBili/Live/LiveFeedFollowRoom.cs b/src/Models/Models.BiliBili/Live/LiveFeedRoom.cs
similarity index 97%
rename from src/Models/Models.BiliBili/Live/LiveFeedFollowRoom.cs
rename to src/Models/Models.BiliBili/Live/LiveFeedRoom.cs
index cf01d074f..4c147a14d 100644
--- a/src/Models/Models.BiliBili/Live/LiveFeedFollowRoom.cs
+++ b/src/Models/Models.BiliBili/Live/LiveFeedRoom.cs
@@ -9,7 +9,7 @@ namespace Richasy.Bili.Models.BiliBili
     /// 直播源推荐中我关注的直播间.
     /// </summary>
     [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
-    public class LiveFeedFollowRoom : LiveRoomBase
+    public class LiveFeedRoom : LiveRoomBase
     {
         /// <summary>
         /// 直播间Id.
@@ -100,6 +100,6 @@ public class LiveFeedFollowUserList
         /// 列表数据.
         /// </summary>
         [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "list", Required = Required.Default)]
-        public List<LiveFeedFollowRoom> List { get; set; }
+        public List<LiveFeedRoom> List { get; set; }
     }
 }
diff --git a/src/Models/Models.BiliBili/Live/LiveRoomBase.cs b/src/Models/Models.BiliBili/Live/LiveRoomBase.cs
index ebb4f15a2..96ce9c293 100644
--- a/src/Models/Models.BiliBili/Live/LiveRoomBase.cs
+++ b/src/Models/Models.BiliBili/Live/LiveRoomBase.cs
@@ -65,12 +65,6 @@ public class LiveRoomBase
         [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "play_url_h265", Required = Required.Default)]
         public string H265PlayUrl { get; set; }
 
-        /// <summary>
-        /// 支持的清晰度列表.
-        /// </summary>
-        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, PropertyName = "accept_quality", Required = Required.Default)]
-        public List<int> AcceptQuality { get; set; }
-
         /// <summary>
         /// 当前清晰度.
         /// </summary>
diff --git a/src/Models/Models.Enums/App/LanguageNames.cs b/src/Models/Models.Enums/App/LanguageNames.cs
index 67f8127ad..11b0c7928 100644
--- a/src/Models/Models.Enums/App/LanguageNames.cs
+++ b/src/Models/Models.Enums/App/LanguageNames.cs
@@ -446,6 +446,10 @@ public enum LanguageNames
         PlayNow,
         PlayNextVideo,
         PlayAll,
+        HotTags,
+        Close,
+        TotalTags,
+        RequestLiveTagsFailed,
 #pragma warning restore SA1602 // Enumeration items should be documented
     }
 }
diff --git a/src/Models/Models.Enums/App/PageIds.cs b/src/Models/Models.Enums/App/PageIds.cs
index 1f7bffb1c..af5115e39 100644
--- a/src/Models/Models.Enums/App/PageIds.cs
+++ b/src/Models/Models.Enums/App/PageIds.cs
@@ -136,5 +136,10 @@ public enum PageIds
         /// 时间线页面.
         /// </summary>
         TimeLine = 203,
+
+        /// <summary>
+        /// 直播分区详情页面.
+        /// </summary>
+        LiveAreaDetail = 204,
     }
 }
diff --git a/src/ViewModels/ViewModels.Uwp/Common/VideoViewModel/VideoViewModel.cs b/src/ViewModels/ViewModels.Uwp/Common/VideoViewModel/VideoViewModel.cs
index 4a3fa63a0..faeb04ef0 100644
--- a/src/ViewModels/ViewModels.Uwp/Common/VideoViewModel/VideoViewModel.cs
+++ b/src/ViewModels/ViewModels.Uwp/Common/VideoViewModel/VideoViewModel.cs
@@ -177,7 +177,7 @@ public VideoViewModel(Card card)
         /// Initializes a new instance of the <see cref="VideoViewModel"/> class.
         /// </summary>
         /// <param name="followRoom">关注的直播间.</param>
-        public VideoViewModel(LiveFeedFollowRoom followRoom)
+        public VideoViewModel(LiveFeedRoom followRoom)
             : this()
         {
             Title = followRoom.Title;
diff --git a/src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.Properties.cs b/src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.Properties.cs
new file mode 100644
index 000000000..570701dfc
--- /dev/null
+++ b/src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.Properties.cs
@@ -0,0 +1,62 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System;
+using System.Collections.ObjectModel;
+using ReactiveUI.Fody.Helpers;
+using Richasy.Bili.Models.BiliBili;
+using Richasy.Bili.Toolkit.Interfaces;
+
+namespace Richasy.Bili.ViewModels.Uwp.Live
+{
+    /// <summary>
+    /// 直播间分区视图模型.
+    /// </summary>
+    public sealed partial class LiveAreaViewModel
+    {
+        private readonly IResourceToolkit _resourceToolkit;
+
+        private LiveArea _area;
+        private int _currentPage;
+        private bool _isFirstSetTag = false;
+        private bool _isFinish = false;
+
+        /// <summary>
+        /// <see cref="LiveAreaViewModel"/>的单例.
+        /// </summary>
+        public static LiveAreaViewModel Instance { get; } = new Lazy<LiveAreaViewModel>(() => new LiveAreaViewModel()).Value;
+
+        /// <summary>
+        /// 子标签集合.
+        /// </summary>
+        public ObservableCollection<LiveAreaDetailTag> TagCollection { get; }
+
+        /// <summary>
+        /// 直播间集合.
+        /// </summary>
+        public ObservableCollection<VideoViewModel> LiveRoomCollection { get; }
+
+        /// <summary>
+        /// 选中的子标签.
+        /// </summary>
+        [Reactive]
+        public LiveAreaDetailTag SelectedTag { get; set; }
+
+        /// <summary>
+        /// 分区标志.
+        /// </summary>
+        [Reactive]
+        public string AreaImage { get; set; }
+
+        /// <summary>
+        /// 分区名.
+        /// </summary>
+        [Reactive]
+        public string AreaName { get; set; }
+
+        /// <summary>
+        /// 是否没有找到直播间.
+        /// </summary>
+        [Reactive]
+        public bool IsEmpty { get; set; }
+    }
+}
diff --git a/src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.cs b/src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.cs
new file mode 100644
index 000000000..b7bff4d54
--- /dev/null
+++ b/src/ViewModels/ViewModels.Uwp/Live/LiveAreaViewModel/LiveAreaViewModel.cs
@@ -0,0 +1,165 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reactive.Linq;
+using System.Threading.Tasks;
+using ReactiveUI;
+using Richasy.Bili.Locator.Uwp;
+using Richasy.Bili.Models.App.Args;
+using Richasy.Bili.Models.App.Other;
+using Richasy.Bili.Models.BiliBili;
+using Richasy.Bili.Models.Enums;
+
+namespace Richasy.Bili.ViewModels.Uwp.Live
+{
+    /// <summary>
+    /// 直播间分区视图模型.
+    /// </summary>
+    public sealed partial class LiveAreaViewModel : WebRequestViewModelBase, IDeltaRequestViewModel
+    {
+        internal LiveAreaViewModel()
+        {
+            _currentPage = 1;
+            ServiceLocator.Instance.LoadService(out _resourceToolkit);
+            TagCollection = new ObservableCollection<LiveAreaDetailTag>();
+            LiveRoomCollection = new ObservableCollection<VideoViewModel>();
+
+            Controller.LiveAreaRoomIteration += OnLiveAreaRoomIteration;
+
+            this.WhenAnyValue(x => x.SelectedTag)
+                .WhereNotNull()
+                .ObserveOn(RxApp.MainThreadScheduler)
+                .Subscribe(async x => await ChangeSelectedTagAsync());
+        }
+
+        /// <summary>
+        /// 设置直播分区.
+        /// </summary>
+        /// <param name="area">直播分区.</param>
+        public void SetLiveArea(LiveArea area)
+        {
+            _area = area;
+            AreaImage = _area.Cover;
+            AreaName = _area.Name;
+            _isFirstSetTag = true;
+            SelectedTag = null;
+            TagCollection.Clear();
+            IsRequested = false;
+        }
+
+        /// <inheritdoc/>
+        public async Task RequestDataAsync()
+        {
+            if (_area == null)
+            {
+                throw new ArgumentNullException("需要先设置直播分区");
+            }
+
+            if (!IsRequested)
+            {
+                await InitializeRequestAsync();
+            }
+            else
+            {
+                await DeltaRequestAsync();
+            }
+
+            IsRequested = _currentPage > 1;
+        }
+
+        /// <inheritdoc/>
+        public async Task InitializeRequestAsync()
+        {
+            if (!IsInitializeLoading && !IsDeltaLoading)
+            {
+                IsInitializeLoading = true;
+                _currentPage = 1;
+                IsEmpty = false;
+                IsError = false;
+                ErrorText = string.Empty;
+                LiveRoomCollection.Clear();
+                _isFinish = false;
+
+                try
+                {
+                    await Controller.RequestLiveAreaRoomsAsync(_area, SelectedTag?.SortType ?? string.Empty);
+                }
+                catch (ServiceException ex)
+                {
+                    IsError = true;
+                    ErrorText = $"{ResourceToolkit.GetLocaleString(LanguageNames.RequestLiveFailed)}\n{ex.Error?.Message ?? ex.Message}";
+                }
+                catch (InvalidOperationException invalidEx)
+                {
+                    IsError = true;
+                    ErrorText = invalidEx.Message;
+                }
+
+                IsInitializeLoading = false;
+            }
+
+            IsRequested = _currentPage > 1;
+        }
+
+        internal async Task DeltaRequestAsync()
+        {
+            if (!IsInitializeLoading && !IsDeltaLoading && !_isFinish)
+            {
+                IsDeltaLoading = true;
+                var sortType = SelectedTag?.SortType ?? string.Empty;
+                await Controller.RequestLiveAreaRoomsAsync(_area, sortType, _currentPage);
+                IsDeltaLoading = false;
+            }
+        }
+
+        private void OnLiveAreaRoomIteration(object sender, LiveAreaRoomIterationEventArgs e)
+        {
+            if (SelectedTag != null && SelectedTag.SortType != e.SortType)
+            {
+                return;
+            }
+
+            var list = e.List;
+            _currentPage = e.NextPageNumber;
+
+            if (e.Tags.Count == 0)
+            {
+                e.Tags.Add(new LiveAreaDetailTag
+                {
+                    SortType = string.Empty,
+                    Name = _resourceToolkit.GetLocaleString(LanguageNames.Total),
+                });
+            }
+
+            if (TagCollection.Count == 0)
+            {
+                e.Tags.ForEach(p => TagCollection.Add(p));
+                SelectedTag = TagCollection.FirstOrDefault();
+            }
+
+            foreach (var item in list)
+            {
+                if (!LiveRoomCollection.Any(p => p.VideoId == item.RoomId.ToString()))
+                {
+                    LiveRoomCollection.Add(new VideoViewModel(item));
+                }
+            }
+
+            _isFinish = LiveRoomCollection.Count >= e.Count;
+            IsEmpty = LiveRoomCollection.Count == 0;
+        }
+
+        private async Task ChangeSelectedTagAsync()
+        {
+            if (_isFirstSetTag)
+            {
+                _isFirstSetTag = false;
+                return;
+            }
+
+            await InitializeRequestAsync();
+        }
+    }
+}
diff --git a/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.Properties.cs b/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.Properties.cs
index e55ec05e9..92d4a4c35 100644
--- a/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.Properties.cs
+++ b/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.Properties.cs
@@ -3,6 +3,7 @@
 using System;
 using System.Collections.ObjectModel;
 using ReactiveUI.Fody.Helpers;
+using Richasy.Bili.Models.BiliBili;
 
 namespace Richasy.Bili.ViewModels.Uwp
 {
@@ -21,25 +22,55 @@ public partial class LiveModuleViewModel
         /// <summary>
         /// 横幅集合.
         /// </summary>
-        [Reactive]
-        public ObservableCollection<BannerViewModel> BannerCollection { get; set; }
+        public ObservableCollection<BannerViewModel> BannerCollection { get; }
 
         /// <summary>
         /// 关注的直播间集合.
         /// </summary>
-        [Reactive]
-        public ObservableCollection<VideoViewModel> FollowLiveRoomCollection { get; set; }
+        public ObservableCollection<VideoViewModel> FollowLiveRoomCollection { get; }
 
         /// <summary>
         /// 推荐的直播间集合.
         /// </summary>
+        public ObservableCollection<VideoViewModel> RecommendLiveRoomCollection { get; }
+
+        /// <summary>
+        /// 热门标签集合.
+        /// </summary>
+        public ObservableCollection<LiveFeedHotArea> HotTagCollection { get; }
+
+        /// <summary>
+        /// 直播分区组集合.
+        /// </summary>
+        public ObservableCollection<LiveAreaGroup> LiveAreaGroupCollection { get; }
+
+        /// <summary>
+        /// 显示的直播分区集合.
+        /// </summary>
+        public ObservableCollection<LiveArea> DisplayAreaCollection { get; }
+
+        /// <summary>
+        /// 选中的分区组.
+        /// </summary>
         [Reactive]
-        public ObservableCollection<VideoViewModel> RecommendLiveRoomCollection { get; set; }
+        public LiveAreaGroup SelectedAreaGroup { get; set; }
 
         /// <summary>
         /// 是否显示关注列表.
         /// </summary>
         [Reactive]
         public bool IsShowFollowList { get; set; }
+
+        /// <summary>
+        /// 直播间分区是否正在请求中.
+        /// </summary>
+        [Reactive]
+        public bool IsLiveAreaRequesting { get; set; }
+
+        /// <summary>
+        /// 分区请求失败.
+        /// </summary>
+        [Reactive]
+        public bool IsAreaError { get; set; }
     }
 }
diff --git a/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.cs b/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.cs
index 44efdb9b8..dff8bf2cc 100644
--- a/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.cs
+++ b/src/ViewModels/ViewModels.Uwp/Live/LiveModuleViewModel/LiveModuleViewModel.cs
@@ -3,9 +3,12 @@
 using System;
 using System.Collections.ObjectModel;
 using System.Linq;
+using System.Reactive.Linq;
 using System.Threading.Tasks;
+using ReactiveUI;
 using Richasy.Bili.Models.App.Args;
 using Richasy.Bili.Models.App.Other;
+using Richasy.Bili.Models.BiliBili;
 using Richasy.Bili.Models.Enums;
 
 namespace Richasy.Bili.ViewModels.Uwp
@@ -24,9 +27,17 @@ internal LiveModuleViewModel()
             BannerCollection = new ObservableCollection<BannerViewModel>();
             FollowLiveRoomCollection = new ObservableCollection<VideoViewModel>();
             RecommendLiveRoomCollection = new ObservableCollection<VideoViewModel>();
+            HotTagCollection = new ObservableCollection<LiveFeedHotArea>();
+            LiveAreaGroupCollection = new ObservableCollection<LiveAreaGroup>();
+            DisplayAreaCollection = new ObservableCollection<LiveArea>();
 
             Controller.LiveFeedRoomIteration += OnLiveFeedRoomIteration;
             Controller.LiveFeedAdditionalDataChanged += OnLiveFeedAdditionalDataChanged;
+
+            this.WhenAnyValue(x => x.SelectedAreaGroup)
+                .WhereNotNull()
+                .ObserveOn(RxApp.MainThreadScheduler)
+                .Subscribe(x => ChangeSelectedAreaGroup());
         }
 
         /// <summary>
@@ -85,6 +96,46 @@ public async Task InitializeRequestAsync()
             IsRequested = _currentPage > 1;
         }
 
+        /// <summary>
+        /// 初始化分区索引.
+        /// </summary>
+        /// <returns><see cref="Task"/>.</returns>
+        public async Task InitializeAreaIndexAsync()
+        {
+            IsLiveAreaRequesting = true;
+            IsError = false;
+
+            try
+            {
+                SelectedAreaGroup = null;
+                LiveAreaGroupCollection.Clear();
+                DisplayAreaCollection.Clear();
+                var response = await Controller.GetLiveAreaIndexAsync();
+                response.List.ForEach(p => LiveAreaGroupCollection.Add(p));
+                SelectedAreaGroup = LiveAreaGroupCollection.First();
+                SelectedAreaGroup.AreaList.ForEach(p => DisplayAreaCollection.Add(p));
+            }
+            catch (Exception)
+            {
+                IsAreaError = true;
+            }
+
+            IsLiveAreaRequesting = false;
+        }
+
+        /// <summary>
+        /// 改变选中的分区组.
+        /// </summary>
+        /// <param name="group">分区组.</param>
+        public void ChangeSelectedAreaGroup()
+        {
+            if (SelectedAreaGroup != null)
+            {
+                DisplayAreaCollection.Clear();
+                SelectedAreaGroup.AreaList.ForEach((p) => DisplayAreaCollection.Add(p));
+            }
+        }
+
         internal async Task DeltaRequestAsync()
         {
             if (!IsInitializeLoading && !IsDeltaLoading)
@@ -122,6 +173,12 @@ private void OnLiveFeedAdditionalDataChanged(object sender, LiveFeedAdditionalDa
                 e.FollowUserList.ForEach(p => FollowLiveRoomCollection.Add(new VideoViewModel(p)));
                 IsShowFollowList = FollowLiveRoomCollection.Count > 0;
             }
+
+            if (e.HotAreaList != null)
+            {
+                HotTagCollection.Clear();
+                e.HotAreaList.Where(p => p.Id != 0).ToList().ForEach(p => HotTagCollection.Add(p));
+            }
         }
     }
 }
diff --git a/src/ViewModels/ViewModels.Uwp/ViewModels.Uwp.csproj b/src/ViewModels/ViewModels.Uwp/ViewModels.Uwp.csproj
index 89c2b6d84..bc832beaa 100644
--- a/src/ViewModels/ViewModels.Uwp/ViewModels.Uwp.csproj
+++ b/src/ViewModels/ViewModels.Uwp/ViewModels.Uwp.csproj
@@ -12,6 +12,8 @@
     <Compile Include="Account\FavoriteAnimeViewModel.cs" />
     <Compile Include="Common\AppViewModel\AppViewModel.Command.cs" />
     <Compile Include="Common\CommandLineViewModel.cs" />
+    <Compile Include="Live\LiveAreaViewModel\LiveAreaViewModel.cs" />
+    <Compile Include="Live\LiveAreaViewModel\LiveAreaViewModel.Properties.cs" />
     <Compile Include="Toolbox\CoverDownloaderViewModel.cs" />
     <Compile Include="Toolbox\AvBvConverterViewModel.cs" />
     <Compile Include="Base\SelectableViewModelBase{T}.cs" />