From 427275d12280d171211bbf5c75d32ddd76a30e77 Mon Sep 17 00:00:00 2001
From: Lightczx <1686188646@qq.com>
Date: Thu, 21 Sep 2023 17:30:42 +0800
Subject: [PATCH] ui/ux

---
 .../Resource/Localization/SH.Designer.cs      |   2 +-
 .../Snap.Hutao/Resource/Localization/SH.resx  |   2 +-
 src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj   |  14 +
 .../Snap.Hutao/View/Card/DailyNoteCard.xaml   | 116 ++---
 .../View/Card/GachaStatisticsCard.xaml        | 396 ++++++------------
 .../View/Card/Primitive/CardBlock.xaml        |  27 ++
 .../View/Card/Primitive/CardBlock.xaml.cs     |  19 +
 .../View/Card/Primitive/CardProgressBar.xaml  |  39 ++
 .../Card/Primitive/CardProgressBar.xaml.cs    |  24 ++
 .../Card/{ => Primitive}/CardReference.cs     |   2 +-
 .../ViewModel/Home/AnnouncementViewModel.cs   |   1 +
 11 files changed, 279 insertions(+), 363 deletions(-)
 create mode 100644 src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml
 create mode 100644 src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml.cs
 create mode 100644 src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml
 create mode 100644 src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml.cs
 rename src/Snap.Hutao/Snap.Hutao/View/Card/{ => Primitive}/CardReference.cs (89%)

diff --git a/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.Designer.cs b/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.Designer.cs
index 1a9ed364..24f10ab1 100644
--- a/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.Designer.cs
+++ b/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.Designer.cs
@@ -439,7 +439,7 @@ namespace Snap.Hutao.Resource.Localization {
         }
         
         /// <summary>
-        ///   查找类似 刷新于 {0:yyyy.MM.dd HH:mm:ss} 的本地化字符串。
+        ///   查找类似 刷新于 {0:MM.dd HH:mm:ss} 的本地化字符串。
         /// </summary>
         internal static string ModelEntityDailyNoteRefreshTimeFormat {
             get {
diff --git a/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.resx b/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.resx
index 07efcd53..4b07556b 100644
--- a/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.resx
+++ b/src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.resx
@@ -244,7 +244,7 @@
     <value>尚未刷新</value>
   </data>
   <data name="ModelEntityDailyNoteRefreshTimeFormat" xml:space="preserve">
-    <value>刷新于 {0:yyyy.MM.dd HH:mm:ss}</value>
+    <value>刷新于 {0:MM.dd HH:mm:ss}</value>
   </data>
   <data name="ModelEntitySpiralAbyssScheduleFormat" xml:space="preserve">
     <value>第 {0} 期</value>
diff --git a/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj b/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj
index 4cc7287f..eb0fbe6e 100644
--- a/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj
+++ b/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj
@@ -107,9 +107,11 @@
     <None Remove="Resource\WelcomeView_Background.png" />
     <None Remove="stylecop.json" />
     <None Remove="View\Card\AchievementCard.xaml" />
+    <None Remove="View\Card\CardBlock.xaml" />
     <None Remove="View\Card\DailyNoteCard.xaml" />
     <None Remove="View\Card\GachaStatisticsCard.xaml" />
     <None Remove="View\Card\LaunchGameCard.xaml" />
+    <None Remove="View\Card\Primitive\CardProgressBar.xaml" />
     <None Remove="View\Control\BaseValueSlider.xaml" />
     <None Remove="View\Control\BottomTextControl.xaml" />
     <None Remove="View\Control\BottomTextSmallControl.xaml" />
@@ -304,6 +306,18 @@
     </EmbeddedResource>
   </ItemGroup>
 
+  <ItemGroup>
+    <Page Update="View\Card\Primitive\CardProgressBar.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+
+  <ItemGroup>
+    <Page Update="View\Card\CardBlock.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+
   <ItemGroup>
     <Page Update="Control\Loading.xaml">
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/DailyNoteCard.xaml b/src/Snap.Hutao/Snap.Hutao/View/Card/DailyNoteCard.xaml
index 3730da8f..f33bd6e7 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Card/DailyNoteCard.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/DailyNoteCard.xaml
@@ -6,11 +6,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:mxi="using:Microsoft.Xaml.Interactivity"
     xmlns:shcb="using:Snap.Hutao.Control.Behavior"
-    xmlns:shch="using:Snap.Hutao.Control.Helper"
-    xmlns:shci="using:Snap.Hutao.Control.Image"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
     xmlns:shme="using:Snap.Hutao.Model.Entity"
     xmlns:shvc="using:Snap.Hutao.View.Control"
+    xmlns:shvcp="using:Snap.Hutao.View.Card.Primitive"
     xmlns:shvd="using:Snap.Hutao.ViewModel.DailyNote"
     Padding="0"
     HorizontalAlignment="Stretch"
@@ -41,6 +40,7 @@
                     <RowDefinition Height="auto"/>
                     <RowDefinition/>
                 </Grid.RowDefinitions>
+
                 <TextBlock
                     Grid.Row="0"
                     HorizontalAlignment="Center"
@@ -54,29 +54,13 @@
                     Style="{StaticResource CaptionTextBlockStyle}"
                     Text="{Binding RefreshTimeFormatted}"/>
 
-                <Grid
+                <shvcp:CardBlock
                     Grid.Row="1"
                     Grid.Column="0"
-                    RowSpacing="6">
-
-                    <Grid Grid.Row="1" Style="{StaticResource BorderGridStyle}">
-                        <StackPanel VerticalAlignment="Center">
-                            <shci:CachedImage shch:FrameworkElementHelper.SquareLength="64" Source="{StaticResource UI_ItemIcon_210}"/>
-                            <TextBlock
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Style="{StaticResource CaptionTextBlockStyle}"
-                                Text="{Binding DailyNote.ResinFormatted}"/>
-                        </StackPanel>
-                        <InfoBadge
-                            Margin="8"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Top"
-                            shch:FrameworkElementHelper.SquareLength="8"
-                            Style="{ThemeResource AttentionDotInfoBadgeStyle}"
-                            Visibility="{Binding ResinNotifySuppressed, Converter={StaticResource BoolToVisibilityConverter}}"/>
-                    </Grid>
-                </Grid>
+                    IconSquareLength="64"
+                    ImageSource="{StaticResource UI_ItemIcon_210}"
+                    IsDotVisible="{Binding ResinNotifySuppressed}"
+                    Text="{Binding DailyNote.ResinFormatted}"/>
 
                 <Grid
                     Grid.Row="1"
@@ -86,43 +70,16 @@
                         <RowDefinition/>
                         <RowDefinition/>
                     </Grid.RowDefinitions>
-
-                    <Grid Grid.Row="0" Style="{StaticResource BorderGridStyle}">
-                        <StackPanel VerticalAlignment="Center">
-                            <shci:CachedImage shch:FrameworkElementHelper.SquareLength="32" Source="{StaticResource UI_ItemIcon_204}"/>
-                            <TextBlock
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Style="{StaticResource CaptionTextBlockStyle}"
-                                Text="{Binding DailyNote.HomeCoinFormatted}"/>
-                        </StackPanel>
-                        <InfoBadge
-                            Margin="8"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Top"
-                            shch:FrameworkElementHelper.SquareLength="8"
-                            Style="{ThemeResource AttentionDotInfoBadgeStyle}"
-                            Visibility="{Binding HomeCoinNotifySuppressed, Converter={StaticResource BoolToVisibilityConverter}}"/>
-                    </Grid>
-
-                    <Grid Grid.Row="1" Style="{StaticResource BorderGridStyle}">
-                        <StackPanel VerticalAlignment="Center">
-                            <shci:CachedImage shch:FrameworkElementHelper.SquareLength="32" Source="{StaticResource UI_MarkQuest_Events_Proce}"/>
-                            <TextBlock
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Style="{StaticResource CaptionTextBlockStyle}"
-                                Text="{Binding DailyNote.TaskFormatted}"/>
-                        </StackPanel>
-                        <InfoBadge
-                            Margin="8"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Top"
-                            shch:FrameworkElementHelper.SquareLength="8"
-                            Style="{ThemeResource AttentionDotInfoBadgeStyle}"
-                            Visibility="{Binding DailyTaskNotifySuppressed, Converter={StaticResource BoolToVisibilityConverter}}"/>
-                    </Grid>
-
+                    <shvcp:CardBlock
+                        Grid.Row="0"
+                        ImageSource="{StaticResource UI_ItemIcon_204}"
+                        IsDotVisible="{Binding HomeCoinNotifySuppressed}"
+                        Text="{Binding DailyNote.HomeCoinFormatted}"/>
+                    <shvcp:CardBlock
+                        Grid.Row="1"
+                        ImageSource="{StaticResource UI_MarkQuest_Events_Proce}"
+                        IsDotVisible="{Binding DailyTaskNotifySuppressed}"
+                        Text="{Binding DailyNote.TaskFormatted}"/>
                 </Grid>
                 <Grid
                     Grid.Row="1"
@@ -132,36 +89,15 @@
                         <RowDefinition/>
                         <RowDefinition/>
                     </Grid.RowDefinitions>
-
-                    <Grid Grid.Row="0" Style="{StaticResource BorderGridStyle}">
-                        <StackPanel VerticalAlignment="Center">
-                            <shci:CachedImage shch:FrameworkElementHelper.SquareLength="32" Source="{StaticResource UI_MarkTower}"/>
-                            <TextBlock
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Style="{StaticResource CaptionTextBlockStyle}"
-                                Text="{Binding DailyNote.ResinDiscountFormatted}"/>
-                        </StackPanel>
-                    </Grid>
-
-                    <Grid Grid.Row="1" Style="{StaticResource BorderGridStyle}">
-                        <StackPanel VerticalAlignment="Center">
-                            <shci:CachedImage shch:FrameworkElementHelper.SquareLength="32" Source="{StaticResource UI_ItemIcon_220021}"/>
-                            <TextBlock
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Style="{StaticResource CaptionTextBlockStyle}"
-                                Text="{Binding DailyNote.Transformer.RecoveryTime.TimeLeftFormatted}"/>
-                        </StackPanel>
-                        <InfoBadge
-                            Margin="8"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Top"
-                            shch:FrameworkElementHelper.SquareLength="8"
-                            Style="{ThemeResource AttentionDotInfoBadgeStyle}"
-                            Visibility="{Binding TransformerNotifySuppressed, Converter={StaticResource BoolToVisibilityConverter}}"/>
-                    </Grid>
-
+                    <shvcp:CardBlock
+                        Grid.Row="0"
+                        ImageSource="{StaticResource UI_MarkTower}"
+                        Text="{Binding DailyNote.ResinDiscountFormatted}"/>
+                    <shvcp:CardBlock
+                        Grid.Row="1"
+                        ImageSource="{StaticResource UI_ItemIcon_220021}"
+                        IsDotVisible="{Binding TransformerNotifySuppressed}"
+                        Text="{Binding DailyNote.Transformer.RecoveryTime.TimeLeftFormatted}"/>
                 </Grid>
             </Grid>
         </DataTemplate>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/GachaStatisticsCard.xaml b/src/Snap.Hutao/Snap.Hutao/View/Card/GachaStatisticsCard.xaml
index 0230239d..b77f3fc6 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Card/GachaStatisticsCard.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/GachaStatisticsCard.xaml
@@ -8,6 +8,7 @@
     xmlns:shcb="using:Snap.Hutao.Control.Behavior"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
     xmlns:shvc="using:Snap.Hutao.View.Control"
+    xmlns:shvcp="using:Snap.Hutao.View.Card.Primitive"
     xmlns:shvg="using:Snap.Hutao.ViewModel.GachaLog"
     Padding="0"
     HorizontalAlignment="Stretch"
@@ -21,282 +22,137 @@
     <mxi:Interaction.Behaviors>
         <shcb:InvokeCommandOnLoadedBehavior Command="{Binding OpenUICommand}"/>
     </mxi:Interaction.Behaviors>
-    <Grid>
-        <Grid.Resources>
-            <x:Double x:Key="GachaStatisticsCardPullProgressBarMinHeight">40</x:Double>
-            <Thickness x:Key="GachaStatisticsCardPullProgressHeaderTextMargin">6,0</Thickness>
-        </Grid.Resources>
 
+    <Button.Resources>
+        <DataTemplate x:Key="GachaStatisticsTemplate" x:DataType="shvg:GachaStatisticsSlim">
+            <Grid Margin="12" ColumnSpacing="6">
+                <Grid.RowDefinitions>
+                    <RowDefinition/>
+                    <RowDefinition Height="auto"/>
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition/>
+                    <ColumnDefinition/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+
+                <TextBlock
+                    Grid.Row="0"
+                    Grid.ColumnSpan="3"
+                    Text="{shcm:ResourceString Name=ViewCardGachaStatisticsTitle}"/>
+
+                <TextBlock
+                    Grid.Row="0"
+                    Grid.ColumnSpan="3"
+                    HorizontalAlignment="Right"
+                    Text="{Binding Uid}"/>
+
+                <StackPanel
+                    Grid.Row="1"
+                    Grid.Column="0"
+                    DataContext="{Binding AvatarWish}"
+                    Spacing="6">
+
+                    <TextBlock
+                        Margin="0,0,0,6"
+                        HorizontalAlignment="Center"
+                        Style="{StaticResource BaseTextBlockStyle}"
+                        Text="{Binding Name}"
+                        TextTrimming="CharacterEllipsis"
+                        TextWrapping="NoWrap"/>
+
+                    <shvcp:CardProgressBar
+                        Grid.Column="0"
+                        Description="{Binding LastOrangePull}"
+                        Header="{shcm:ResourceString Name=ViewControlStatisticsCardOrangeText}"
+                        Maximum="{Binding GuaranteeOrangeThreshold}"
+                        ProgressForeground="{StaticResource OrangeBrush}"
+                        TextForeground="{StaticResource OrangeBrush}"
+                        Value="{Binding LastOrangePull}"/>
+                    <shvcp:CardProgressBar
+                        Grid.Column="0"
+                        Description="{Binding LastPurplePull}"
+                        Header="{shcm:ResourceString Name=ViewControlStatisticsCardPurpleText}"
+                        Maximum="{Binding GuaranteePurpleThreshold}"
+                        ProgressForeground="{StaticResource PurpleBrush}"
+                        TextForeground="{StaticResource PurpleBrush}"
+                        Value="{Binding LastPurplePull}"/>
+                </StackPanel>
+
+                <StackPanel
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    DataContext="{Binding WeaponWish}"
+                    Spacing="6">
+
+                    <TextBlock
+                        Margin="0,0,0,6"
+                        HorizontalAlignment="Center"
+                        Style="{StaticResource BaseTextBlockStyle}"
+                        Text="{Binding Name}"
+                        TextTrimming="CharacterEllipsis"
+                        TextWrapping="NoWrap"/>
+
+                    <shvcp:CardProgressBar
+                        Grid.Column="0"
+                        Description="{Binding LastOrangePull}"
+                        Header="{shcm:ResourceString Name=ViewControlStatisticsCardOrangeText}"
+                        Maximum="{Binding GuaranteeOrangeThreshold}"
+                        ProgressForeground="{StaticResource OrangeBrush}"
+                        TextForeground="{StaticResource OrangeBrush}"
+                        Value="{Binding LastOrangePull}"/>
+                    <shvcp:CardProgressBar
+                        Grid.Column="0"
+                        Description="{Binding LastPurplePull}"
+                        Header="{shcm:ResourceString Name=ViewControlStatisticsCardPurpleText}"
+                        Maximum="{Binding GuaranteePurpleThreshold}"
+                        ProgressForeground="{StaticResource PurpleBrush}"
+                        TextForeground="{StaticResource PurpleBrush}"
+                        Value="{Binding LastPurplePull}"/>
+                </StackPanel>
+
+                <StackPanel
+                    Grid.Row="1"
+                    Grid.Column="2"
+                    DataContext="{Binding StandardWish}"
+                    Spacing="6">
+                    <TextBlock
+                        Margin="0,0,0,6"
+                        HorizontalAlignment="Center"
+                        Style="{StaticResource BaseTextBlockStyle}"
+                        Text="{Binding Name}"
+                        TextTrimming="CharacterEllipsis"
+                        TextWrapping="NoWrap"/>
+
+                    <shvcp:CardProgressBar
+                        Grid.Column="0"
+                        Description="{Binding LastOrangePull}"
+                        Header="{shcm:ResourceString Name=ViewControlStatisticsCardOrangeText}"
+                        Maximum="{Binding GuaranteeOrangeThreshold}"
+                        ProgressForeground="{StaticResource OrangeBrush}"
+                        TextForeground="{StaticResource OrangeBrush}"
+                        Value="{Binding LastOrangePull}"/>
+                    <shvcp:CardProgressBar
+                        Grid.Column="0"
+                        Description="{Binding LastPurplePull}"
+                        Header="{shcm:ResourceString Name=ViewControlStatisticsCardPurpleText}"
+                        Maximum="{Binding GuaranteePurpleThreshold}"
+                        ProgressForeground="{StaticResource PurpleBrush}"
+                        TextForeground="{StaticResource PurpleBrush}"
+                        Value="{Binding LastPurplePull}"/>
+                </StackPanel>
+            </Grid>
+        </DataTemplate>
+    </Button.Resources>
+
+    <Grid>
         <Grid Visibility="{Binding IsInitialized, Converter={StaticResource BoolToVisibilityConverter}}">
             <Grid Visibility="{Binding StatisticsList.Count, Converter={StaticResource Int32ToVisibilityConverter}}">
                 <FlipView
                     x:Name="RootFlipView"
                     Background="{x:Null}"
-                    ItemsSource="{Binding StatisticsList}">
-                    <FlipView.ItemTemplate>
-                        <DataTemplate>
-                            <Grid Margin="12" ColumnSpacing="6">
-                                <Grid.RowDefinitions>
-                                    <RowDefinition/>
-                                    <RowDefinition Height="auto"/>
-                                </Grid.RowDefinitions>
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition/>
-                                    <ColumnDefinition/>
-                                    <ColumnDefinition/>
-                                </Grid.ColumnDefinitions>
-
-                                <TextBlock
-                                    Grid.Row="0"
-                                    Grid.ColumnSpan="3"
-                                    Text="{shcm:ResourceString Name=ViewCardGachaStatisticsTitle}"/>
-
-                                <TextBlock
-                                    Grid.Row="0"
-                                    Grid.ColumnSpan="3"
-                                    HorizontalAlignment="Right"
-                                    Text="{Binding Uid}"/>
-
-                                <StackPanel
-                                    Grid.Row="1"
-                                    Grid.Column="0"
-                                    DataContext="{Binding AvatarWish}"
-                                    Spacing="6">
-
-                                    <TextBlock
-                                        Margin="0,0,0,6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource BaseTextBlockStyle}"
-                                        Text="{Binding Name}"
-                                        TextTrimming="CharacterEllipsis"
-                                        TextWrapping="NoWrap"/>
-
-                                    <Grid Grid.Column="0" Style="{StaticResource BorderGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition/>
-                                        </Grid.ColumnDefinitions>
-                                        <ProgressBar
-                                            Grid.ColumnSpan="2"
-                                            MinHeight="{StaticResource GachaStatisticsCardPullProgressBarMinHeight}"
-                                            Background="Transparent"
-                                            CornerRadius="{StaticResource CompatCornerRadius}"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Maximum="{Binding GuaranteeOrangeThreshold}"
-                                            Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
-                                            Style="{StaticResource DefaultProgressBarStyle}"
-                                            Value="{Binding LastOrangePull}"/>
-                                        <TextBlock
-                                            Grid.Column="0"
-                                            Margin="{StaticResource GachaStatisticsCardPullProgressHeaderTextMargin}"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewControlStatisticsCardOrangeText}"/>
-                                        <TextBlock
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{Binding LastOrangePull}"/>
-                                    </Grid>
-
-                                    <Grid Grid.Column="1" Style="{StaticResource BorderGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition/>
-                                        </Grid.ColumnDefinitions>
-                                        <ProgressBar
-                                            Grid.ColumnSpan="2"
-                                            MinHeight="{StaticResource GachaStatisticsCardPullProgressBarMinHeight}"
-                                            Background="Transparent"
-                                            CornerRadius="{StaticResource CompatCornerRadius}"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Maximum="{Binding GuaranteePurpleThreshold}"
-                                            Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
-                                            Style="{StaticResource DefaultProgressBarStyle}"
-                                            Value="{Binding LastPurplePull}"/>
-                                        <TextBlock
-                                            Grid.Column="0"
-                                            Margin="{StaticResource GachaStatisticsCardPullProgressHeaderTextMargin}"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewControlStatisticsCardPurpleText}"/>
-                                        <TextBlock
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{Binding LastPurplePull}"/>
-                                    </Grid>
-
-                                </StackPanel>
-
-                                <StackPanel
-                                    Grid.Row="1"
-                                    Grid.Column="1"
-                                    DataContext="{Binding WeaponWish}"
-                                    Spacing="6">
-
-                                    <TextBlock
-                                        Margin="0,0,0,6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource BaseTextBlockStyle}"
-                                        Text="{Binding Name}"
-                                        TextTrimming="CharacterEllipsis"
-                                        TextWrapping="NoWrap"/>
-
-                                    <Grid Grid.Column="0" Style="{StaticResource BorderGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition/>
-                                        </Grid.ColumnDefinitions>
-                                        <ProgressBar
-                                            Grid.ColumnSpan="2"
-                                            MinHeight="{StaticResource GachaStatisticsCardPullProgressBarMinHeight}"
-                                            Background="Transparent"
-                                            CornerRadius="{StaticResource CompatCornerRadius}"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Maximum="{Binding GuaranteeOrangeThreshold}"
-                                            Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
-                                            Style="{StaticResource DefaultProgressBarStyle}"
-                                            Value="{Binding LastOrangePull}"/>
-                                        <TextBlock
-                                            Grid.Column="0"
-                                            Margin="{StaticResource GachaStatisticsCardPullProgressHeaderTextMargin}"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewControlStatisticsCardOrangeText}"/>
-                                        <TextBlock
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{Binding LastOrangePull}"/>
-                                    </Grid>
-
-                                    <Grid Grid.Column="1" Style="{StaticResource BorderGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition/>
-                                        </Grid.ColumnDefinitions>
-                                        <ProgressBar
-                                            Grid.ColumnSpan="2"
-                                            MinHeight="{StaticResource GachaStatisticsCardPullProgressBarMinHeight}"
-                                            Background="Transparent"
-                                            CornerRadius="{StaticResource CompatCornerRadius}"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Maximum="{Binding GuaranteePurpleThreshold}"
-                                            Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
-                                            Style="{StaticResource DefaultProgressBarStyle}"
-                                            Value="{Binding LastPurplePull}"/>
-                                        <TextBlock
-                                            Grid.Column="0"
-                                            Margin="{StaticResource GachaStatisticsCardPullProgressHeaderTextMargin}"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewControlStatisticsCardPurpleText}"/>
-                                        <TextBlock
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{Binding LastPurplePull}"/>
-                                    </Grid>
-                                </StackPanel>
-
-                                <StackPanel
-                                    Grid.Row="1"
-                                    Grid.Column="2"
-                                    DataContext="{Binding StandardWish}"
-                                    Spacing="6">
-                                    <TextBlock
-                                        Margin="0,0,0,6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource BaseTextBlockStyle}"
-                                        Text="{Binding Name}"
-                                        TextTrimming="CharacterEllipsis"
-                                        TextWrapping="NoWrap"/>
-                                    <Grid Grid.Column="0" Style="{StaticResource BorderGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition/>
-                                        </Grid.ColumnDefinitions>
-                                        <ProgressBar
-                                            Grid.ColumnSpan="2"
-                                            MinHeight="{StaticResource GachaStatisticsCardPullProgressBarMinHeight}"
-                                            Background="Transparent"
-                                            CornerRadius="{StaticResource CompatCornerRadius}"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Maximum="{Binding GuaranteeOrangeThreshold}"
-                                            Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
-                                            Style="{StaticResource DefaultProgressBarStyle}"
-                                            Value="{Binding LastOrangePull}"/>
-                                        <TextBlock
-                                            Grid.Column="0"
-                                            Margin="{StaticResource GachaStatisticsCardPullProgressHeaderTextMargin}"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewControlStatisticsCardOrangeText}"/>
-                                        <TextBlock
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource OrangeBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{Binding LastOrangePull}"/>
-                                    </Grid>
-
-                                    <Grid Grid.Column="1" Style="{StaticResource BorderGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition/>
-                                        </Grid.ColumnDefinitions>
-                                        <ProgressBar
-                                            Grid.ColumnSpan="2"
-                                            MinHeight="{StaticResource GachaStatisticsCardPullProgressBarMinHeight}"
-                                            Background="Transparent"
-                                            CornerRadius="{StaticResource CompatCornerRadius}"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Maximum="{Binding GuaranteePurpleThreshold}"
-                                            Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
-                                            Style="{StaticResource DefaultProgressBarStyle}"
-                                            Value="{Binding LastPurplePull}"/>
-                                        <TextBlock
-                                            Grid.Column="0"
-                                            Margin="{StaticResource GachaStatisticsCardPullProgressHeaderTextMargin}"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewControlStatisticsCardPurpleText}"/>
-                                        <TextBlock
-                                            Grid.Column="1"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Foreground="{StaticResource PurpleBrush}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Text="{Binding LastPurplePull}"/>
-                                    </Grid>
-                                </StackPanel>
-
-                            </Grid>
-                        </DataTemplate>
-                    </FlipView.ItemTemplate>
-                </FlipView>
+                    ItemTemplate="{StaticResource GachaStatisticsTemplate}"
+                    ItemsSource="{Binding StatisticsList}"/>
 
                 <PipsPager
                     Height="16"
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml
new file mode 100644
index 00000000..33faaff1
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml
@@ -0,0 +1,27 @@
+<Grid
+    x:Class="Snap.Hutao.View.Card.Primitive.CardBlock"
+    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:shch="using:Snap.Hutao.Control.Helper"
+    xmlns:shci="using:Snap.Hutao.Control.Image"
+    Style="{StaticResource BorderGridStyle}"
+    mc:Ignorable="d">
+
+    <StackPanel VerticalAlignment="Center">
+        <shci:CachedImage shch:FrameworkElementHelper.SquareLength="{x:Bind IconSquareLength}" Source="{x:Bind ImageSource, Mode=OneWay}"/>
+        <TextBlock
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Style="{StaticResource CaptionTextBlockStyle}"
+            Text="{x:Bind Text, Mode=OneWay}"/>
+    </StackPanel>
+    <InfoBadge
+        Margin="8"
+        HorizontalAlignment="Right"
+        VerticalAlignment="Top"
+        shch:FrameworkElementHelper.SquareLength="8"
+        Style="{ThemeResource AttentionDotInfoBadgeStyle}"
+        Visibility="{x:Bind IsDotVisible, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"/>
+</Grid>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml.cs b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml.cs
new file mode 100644
index 00000000..631c3fdb
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardBlock.xaml.cs
@@ -0,0 +1,19 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Snap.Hutao.View.Card.Primitive;
+
+[DependencyProperty("Text", typeof(string))]
+[DependencyProperty("ImageSource", typeof(object))]
+[DependencyProperty("IsDotVisible", typeof(bool), false)]
+[DependencyProperty("IconSquareLength", typeof(double), 32D)]
+internal sealed partial class CardBlock : Grid
+{
+    public CardBlock()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml
new file mode 100644
index 00000000..9e3c30a6
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml
@@ -0,0 +1,39 @@
+<Grid
+    x:Class="Snap.Hutao.View.Card.Primitive.CardProgressBar"
+    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    MinHeight="40"
+    Style="{StaticResource BorderGridStyle}"
+    mc:Ignorable="d">
+
+    <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="auto"/>
+        <ColumnDefinition/>
+    </Grid.ColumnDefinitions>
+    <ProgressBar
+        Grid.ColumnSpan="2"
+        MinHeight="{x:Bind MinHeight, Mode=OneWay}"
+        Background="Transparent"
+        CornerRadius="{StaticResource CompatCornerRadius}"
+        Foreground="{x:Bind ProgressForeground, Mode=OneWay}"
+        Maximum="{x:Bind Maximum, Mode=OneWay}"
+        Opacity="{StaticResource LargeBackgroundProgressBarOpacity}"
+        Value="{x:Bind Value, Mode=OneWay}"/>
+    <TextBlock
+        Grid.Column="0"
+        Margin="6,0"
+        HorizontalAlignment="Center"
+        VerticalAlignment="Center"
+        Foreground="{x:Bind TextForeground, Mode=OneWay}"
+        Style="{StaticResource CaptionTextBlockStyle}"
+        Text="{x:Bind Header, Mode=OneWay}"/>
+    <TextBlock
+        Grid.Column="1"
+        HorizontalAlignment="Center"
+        VerticalAlignment="Center"
+        Foreground="{x:Bind TextForeground, Mode=OneWay}"
+        Style="{StaticResource CaptionTextBlockStyle}"
+        Text="{x:Bind Description, Mode=OneWay}"/>
+</Grid>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml.cs b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml.cs
new file mode 100644
index 00000000..f5af0651
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardProgressBar.xaml.cs
@@ -0,0 +1,24 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+
+namespace Snap.Hutao.View.Card.Primitive;
+
+[DependencyProperty("ProgressForeground", typeof(Brush))]
+[DependencyProperty("TextForeground", typeof(Brush))]
+[DependencyProperty("Maximum", typeof(double))]
+[DependencyProperty("Value", typeof(double))]
+[DependencyProperty("Header", typeof(string))]
+[DependencyProperty("Description", typeof(string))]
+internal sealed partial class CardProgressBar : Grid
+{
+    public CardProgressBar()
+    {
+        IAppResourceProvider appResourceProvider = Ioc.Default.GetRequiredService<IAppResourceProvider>();
+        TextForeground = appResourceProvider.GetResource<Brush>("TextFillColorPrimaryBrush");
+        InitializeComponent();
+    }
+}
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/CardReference.cs b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardReference.cs
similarity index 89%
rename from src/Snap.Hutao/Snap.Hutao/View/Card/CardReference.cs
rename to src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardReference.cs
index ab7f5f65..2fb443b2 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Card/CardReference.cs
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/CardReference.cs
@@ -3,7 +3,7 @@
 
 using Microsoft.UI.Xaml.Controls;
 
-namespace Snap.Hutao.View.Card;
+namespace Snap.Hutao.View.Card.Primitive;
 
 /// <summary>
 /// 保存对卡片的引用
diff --git a/src/Snap.Hutao/Snap.Hutao/ViewModel/Home/AnnouncementViewModel.cs b/src/Snap.Hutao/Snap.Hutao/ViewModel/Home/AnnouncementViewModel.cs
index 2f1cb605..6b5bcbd0 100644
--- a/src/Snap.Hutao/Snap.Hutao/ViewModel/Home/AnnouncementViewModel.cs
+++ b/src/Snap.Hutao/Snap.Hutao/ViewModel/Home/AnnouncementViewModel.cs
@@ -5,6 +5,7 @@ using Snap.Hutao.Core.Setting;
 using Snap.Hutao.Service.Abstraction;
 using Snap.Hutao.Service.Hutao;
 using Snap.Hutao.View.Card;
+using Snap.Hutao.View.Card.Primitive;
 using Snap.Hutao.Web.Hoyolab.Hk4e.Common.Announcement;
 using System.Collections.ObjectModel;