feat(FlipClock): add ShowDay parameter (#6218)

Mydashixiong · ArgoZhang · web-flow · commit 1c0abc46ab70 · 2025-06-13T11:22:33.000+08:00
* 修改FlipClock

增加ShowDay参数

* refactor: 代码格式化

* doc: 增加 ShowDay 示例

* refactor: 精简代码

* refactor: 增加 Day 逻辑

* feat: 增加容器 overflow 样式防止溢出

* doc: 增加 ShowDay 示例

* doc: 参数文档本地化

* test: 增加单元测试

* chore: bump version 9.7.4-beta03

Co-Authored-By: Mydashixiong &lt;136679228+Mydashixiong@users.noreply.github.com&gt;

---------

Co-authored-by: Argo Zhang &lt;argo@live.ca&gt;
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor
@@ -9,6 +9,10 @@
     <FlipClock></FlipClock>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["ShowDayText"]" Introduction="@Localizer["ShowDayIntro"]" Name="ShowDay">
+    <FlipClock ShowDay="true"></FlipClock>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["ShowMinuteText"]" Introduction="@Localizer["ShowMinuteIntro"]" Name="ShowMinute">
     <FlipClock ShowHour="false" ShowMinute="false"></FlipClock>
 </DemoBlock>
@@ -74,7 +78,9 @@
             </div>
         </GroupBox>
     </section>
-    <FlipClock BackgroundColor="radial-gradient(ellipse at center, #ac85f1 0%, #833bf8 100%)" Height="@HeightValueString" FontSize="@FontSizeValueString" CardHeight="@CardHeightValueString" CardWidth="@CardWidthValueString" CardMargin="@CardMarginValueString" CardGroupMargin="@CardGroupMarginValueString"></FlipClock>
+    <FlipClock BackgroundColor="radial-gradient(ellipse at center, #ac85f1 0%, #833bf8 100%)" Height="@HeightValueString"
+               FontSize="@FontSizeValueString" CardHeight="@CardHeightValueString" CardWidth="@CardWidthValueString"
+               CardMargin="@CardMarginValueString" CardGroupMargin="@CardGroupMarginValueString"></FlipClock>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs
@@ -48,132 +48,140 @@ private Task OnCompletedAsync()
     /// GetAttributes
     /// </summary>
     /// <returns></returns>
-    private static AttributeItem[] GetAttributes() =>
+    private AttributeItem[] GetAttributes() =>
     [
+        new()
+        {
+            Name = nameof(FlipClock.ShowDay),
+            Description = Localizer["ShowDay_Description"],
+            Type = "boolean",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
         new()
         {
             Name = nameof(FlipClock.ShowHour),
-            Description = "是否显示小时",
+            Description = Localizer["ShowHour_Description"],
             Type = "boolean",
             ValueList = "true|false",
             DefaultValue = "true"
         },
         new()
         {
             Name = nameof(FlipClock.ShowMinute),
-            Description = "是否显示分钟",
+            Description = Localizer["ShowMinute_Description"],
             Type = "boolean",
             ValueList = "true|false",
             DefaultValue = "true"
         },
         new()
         {
             Name = nameof(FlipClock.ViewMode),
-            Description = "是否显示分钟",
+            Description = Localizer["ViewMode_Description"],
             Type = "FlipClockViewMode",
             ValueList = "DateTime|Count|CountDown",
             DefaultValue = "DateTime"
         },
         new()
         {
             Name = nameof(FlipClock.StartValue),
-            Description = "开始时间",
+            Description = Localizer["StartValue_Description"],
             Type = "TimeSpan",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.OnCompletedAsync),
-            Description = "计时结束回调方法",
+            Description = Localizer["OnCompletedAsync_Description"],
             Type = "Func<Task>",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.Height),
-            Description = "组件高度",
+            Description = Localizer["Height_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.BackgroundColor),
-            Description = "组件背景色",
+            Description = Localizer["BackgroundColor_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.FontSize),
-            Description = "组件字体大小",
+            Description = Localizer["FontSize_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardWidth),
-            Description = "组件卡片宽度",
+            Description = Localizer["CardWidth_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardHeight),
-            Description = "组件卡片高度",
+            Description = Localizer["CardHeight_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardColor),
-            Description = "组件卡片字体颜色",
+            Description = Localizer["CardColor_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardBackgroundColor),
-            Description = "组件卡片背景颜色",
+            Description = Localizer["CardBackgroundColor_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardDividerHeight),
-            Description = "组件卡片分割线高度",
+            Description = Localizer["CardDividerHeight_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardDividerColor),
-            Description = "组件卡片分割线颜色",
+            Description = Localizer["CardDividerColor_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardMargin),
-            Description = "组件卡片间隔",
+            Description = Localizer["CardMargin_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new()
         {
             Name = nameof(FlipClock.CardGroupMargin),
-            Description = "组件卡片组间隔",
+            Description = Localizer["CardGroupMargin_Description"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6802,6 +6802,8 @@
     "FlipClocksDescription": "Used for website timing or countdown",
     "BaseUsageText": "Basic usage",
     "BaseUsageIntro": "Synchronize display of current time",
+    "ShowDayText": "Show Day",
+    "ShowDayIntro": "Display day information by setting <code>ShowDay=\"true\"</code>",
     "ShowMinuteText": "not display hours and minutes",
     "ShowMinuteIntro": "By setting <code>ShowHour=\"false\"</code> <code>ShowMinute=\"false\"</code> to not display hour and minute information",
     "ShowSecondText": "not display seconds",
@@ -6818,7 +6820,24 @@
     "CardHeight": "Card Height",
     "CardWidth": "Card Width",
     "CardMargin": "Card Margin",
-    "CardGroupMargin": "Card Group Margin"
+    "CardGroupMargin": "Card Group Margin",
+    "ShowDay_Description": "Show day",
+    "ShowHour_Description": "Show hour",
+    "ShowMinute_Description": "Show minute",
+    "ViewMode_Description": "View mode",
+    "StartValue_Description": "Start time",
+    "OnCompletedAsync_Description": "Callback when timer completed",
+    "Height_Description": "Height",
+    "BackgroundColor_Description": "Background color",
+    "FontSize_Description": "Font size",
+    "CardWidth_Description": "Card width",
+    "CardHeight_Description": "Card height",
+    "CardColor_Description": "Card font color",
+    "CardBackgroundColor_Description": "Card background color",
+    "CardDividerHeight_Description": "Card divider height",
+    "CardDividerColor_Description": "Card divider color",
+    "CardMargin_Description": "Card margin",
+    "CardGroupMargin_Description": "Card group margin"
   },
   "BootstrapBlazor.Server.Components.Samples.Icons.BootstrapIcons": {
     "Title": "Bootstrap Icons",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1178,7 +1178,7 @@
   },
   "BootstrapBlazor.Server.Components.Components.InstallContent": {
     "P5": "使用 BootstrapBlazor Project Template 扩展创建项目",
-    "InstallByTemplate":"您可以通过 <a href=\"template\">[传送门]</a> 下载安装扩展后，通过扩展创建项目, <code>强烈推荐</code>",
+    "InstallByTemplate": "您可以通过 <a href=\"template\">[传送门]</a> 下载安装扩展后，通过扩展创建项目, <code>强烈推荐</code>",
     "P9": "使用 Visual Studio 创建项目",
     "P10": "步骤一、创建项目",
     "P11": "打开 Visual Studio",
@@ -6802,6 +6802,8 @@
     "FlipClocksDescription": "用于网站计时，或者倒计时使用",
     "BaseUsageText": "基本功能",
     "BaseUsageIntro": "同步显示当前时间",
+    "ShowDayText": "显示日",
+    "ShowDayIntro": "通过设置 <code>ShowDay=\"true\"</code> 显示日信息",
     "ShowMinuteText": "不显示时、分",
     "ShowMinuteIntro": "通过设置 <code>ShowHour=\"false\"</code> <code>ShowMinute=\"false\"</code> 不显示小时、分钟信息",
     "ShowSecondText": "不显示秒",
@@ -6818,7 +6820,24 @@
     "CardHeight": "卡片高度",
     "CardWidth": "卡片宽度",
     "CardMargin": "卡片边距",
-    "CardGroupMargin": "卡片组边距"
+    "CardGroupMargin": "卡片组边距",
+    "ShowDay_Description": "是否显示日",
+    "ShowHour_Description": "是否显示小时",
+    "ShowMinute_Description": "是否显示分钟",
+    "ViewMode_Description": "显示模式",
+    "StartValue_Description": "开始时间",
+    "OnCompletedAsync_Description": "计时结束回调方法",
+    "Height_Description": "高度",
+    "BackgroundColor_Description": "背景色",
+    "FontSize_Description": "字体大小",
+    "CardWidth_Description": "卡片宽度",
+    "CardHeight_Description": "卡片高度",
+    "CardColor_Description": "卡片字体颜色",
+    "CardBackgroundColor_Description": "卡片背景颜色",
+    "CardDividerHeight_Description": "卡片分割线高度",
+    "CardDividerColor_Description": "卡片分割线颜色",
+    "CardMargin_Description": "卡片间隔",
+    "CardGroupMargin_Description": "卡片组间隔"
   },
   "BootstrapBlazor.Server.Components.Samples.Icons.BootstrapIcons": {
     "Title": "Bootstrap Icons",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.4-beta02</Version>
+    <Version>9.7.4-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor
@@ -3,6 +3,14 @@
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 <div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">
+    @if (ShowDay)
+    {
+        <div class="bb-flip-clock-list day">
+            @RenderItem(10)
+            @RenderItem(10)
+        </div>
+    }
+
     @if (ShowHour)
     {
         <div class="bb-flip-clock-list hour">
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
@@ -11,6 +11,12 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class FlipClock
 {
+    /// <summary>
+    /// 获得/设置 是否显示 Day 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowDay { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示 Hour 默认 true
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
@@ -14,33 +14,49 @@ export function init(id, options) {
         return;
     }
 
+    const listDay = el.querySelector('.bb-flip-clock-list.day');
     const listHour = el.querySelector('.bb-flip-clock-list.hour');
     const listMinute = el.querySelector('.bb-flip-clock-list.minute');
     const listSecond = el.querySelector('.bb-flip-clock-list.second');
     const countDown = options.viewMode === "CountDown";
 
     let counter = 0;
     const getDate = () => {
+        let totalMilliseconds = 0;
         let now;
+
         if (options.viewMode === "Count") {
             counter += 1000;
-            now = new Date(new Date().getTimezoneOffset() * 60 * 1000 - options.startValue + counter);
+            totalMilliseconds = counter - options.startValue;
         }
         else if (countDown) {
             counter += 1000;
-            now = new Date(new Date().getTimezoneOffset() * 60 * 1000 + options.startValue - counter);
+            totalMilliseconds = options.startValue - counter;
+            if (totalMilliseconds < 0) totalMilliseconds = 0;
         }
         else {
             now = new Date();
+            return {
+                days: now.getDate(),
+                hours: now.getHours(),
+                minutes: now.getMinutes(),
+                seconds: now.getSeconds()
+            };
         }
-        return { hours: now.getHours(), minutes: now.getMinutes(), seconds: now.getSeconds() };
+
+        const seconds = Math.floor(totalMilliseconds / 1000) % 60;
+        const minutes = Math.floor(totalMilliseconds / (1000 * 60)) % 60;
+        const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
+        const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
+        return { days, hours, minutes, seconds };
     }
 
+    let lastDay;
     let lastHour;
     let lastMinute;
     let lastSecond;
     const go = () => {
-        const { hours, minutes, seconds } = getDate();
+        const { days, hours, minutes, seconds } = getDate();
 
         if (lastSecond !== seconds) {
             lastSecond = seconds;
@@ -54,7 +70,11 @@ export function init(id, options) {
             lastHour = hours;
             setTime(listHour, hours, countDown);
         }
-        return { hours, minutes, seconds }
+        if (lastDay !== days) {
+            lastDay = days;
+            setTime(listDay, days, countDown);
+        }
+        return { days, hours, minutes, seconds }
     }
 
     let start = void 0
@@ -78,7 +98,6 @@ export function init(id, options) {
     }
 
     requestAnimationFrame(flip);
-
     Data.set(id, { el, options });
 }
 
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.scss b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.scss
@@ -1,4 +1,4 @@
-.bb-flip-clock {
+﻿.bb-flip-clock {
     --bb-flip-clock-height: #{$bb-flip-clock-height};
     --bb-flip-clock-bg: #{$bb-flip-clock-bg};
     --bb-flip-clock-font-size: #{$bb-flip-clock-font-size};
@@ -25,6 +25,7 @@
     position: relative;
     width: 100%;
     flex-shrink: 0;
+    overflow: auto;
 
     .bb-flip-clock-list {
         display: flex;
diff --git a/test/UnitTest/Components/FlipClockTest.cs b/test/UnitTest/Components/FlipClockTest.cs
