feat(FlipClock): add ShowYear parameter (#6224)

ArgoZhang · web-flow · commit 6f84d88f76fb · 2025-06-13T13:34:38.000+08:00
* feat: 增加 ShowYear 参数

* doc: 更新示例

* test: 更新单元测试

* refactor: 重构脚本

* doc: 更新示例

* refactor: 精简代码减少依赖项
diff --git a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor
@@ -5,26 +5,6 @@
 
 <h4>@((MarkupString)Localizer["FlipClocksDescription"].Value)</h4>
 
-<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Normal">
-    <FlipClock></FlipClock>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["ShowMonthText"]" Introduction="@Localizer["ShowMonthIntro"]" Name="ShowDay">
-    <FlipClock ShowMonth="true" ShowDay="true"></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>
-
-<DemoBlock Title="@Localizer["ShowSecondText"]" Introduction="@Localizer["ShowSecondIntro"]" Name="ShowSecond">
-    <FlipClock ShowSecond="false"></FlipClock>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["CountText"]" Introduction="@Localizer["CountIntro"]" Name="Count">
     <FlipClock ViewMode="FlipClockViewMode.Count"></FlipClock>
 </DemoBlock>
@@ -79,12 +59,50 @@
                         <Slider @bind-Value="CardGroupMarginValue" Max="28" Min="18"></Slider>
                     </BootstrapInputGroup>
                 </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <BootstrapInputGroup>
+                        <BootstrapInputGroupLabel DisplayText="@Localizer["ShowYear"]" Width="150"></BootstrapInputGroupLabel>
+                        <Switch @bind-Value="_showYear"></Switch>
+                    </BootstrapInputGroup>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <BootstrapInputGroup>
+                        <BootstrapInputGroupLabel DisplayText="@Localizer["ShowMonth"]" Width="150"></BootstrapInputGroupLabel>
+                        <Switch @bind-Value="_showMonth"></Switch>
+                    </BootstrapInputGroup>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <BootstrapInputGroup>
+                        <BootstrapInputGroupLabel DisplayText="@Localizer["ShowDay"]" Width="150"></BootstrapInputGroupLabel>
+                        <Switch @bind-Value="_showDay"></Switch>
+                    </BootstrapInputGroup>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <BootstrapInputGroup>
+                        <BootstrapInputGroupLabel DisplayText="@Localizer["ShowHour"]" Width="150"></BootstrapInputGroupLabel>
+                        <Switch @bind-Value="_showHour"></Switch>
+                    </BootstrapInputGroup>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <BootstrapInputGroup>
+                        <BootstrapInputGroupLabel DisplayText="@Localizer["ShowMinute"]" Width="150"></BootstrapInputGroupLabel>
+                        <Switch @bind-Value="_showMinute"></Switch>
+                    </BootstrapInputGroup>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                    <BootstrapInputGroup>
+                        <BootstrapInputGroupLabel DisplayText="@Localizer["ShowSecond"]" Width="150"></BootstrapInputGroupLabel>
+                        <Switch @bind-Value="_showSecond"></Switch>
+                    </BootstrapInputGroup>
+                </div>
             </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>
+               CardMargin="@CardMarginValueString" CardGroupMargin="@CardGroupMarginValueString"
+               ShowYear="_showYear" ShowMonth="_showMonth" ShowDay="_showDay"
+               ShowHour="_showHour" ShowMinute="_showMinute" ShowSecond="_showSecond"></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
@@ -36,6 +36,12 @@ public partial class FlipClocks
 
 
     private bool _isCompleted;
+    private bool _showYear = false;
+    private bool _showMonth = false;
+    private bool _showDay = false;
+    private bool _showHour = true;
+    private bool _showMinute = true;
+    private bool _showSecond = true;
 
     private Task OnCompletedAsync()
     {
@@ -50,6 +56,14 @@ private Task OnCompletedAsync()
     /// <returns></returns>
     private AttributeItem[] GetAttributes() =>
     [
+        new()
+        {
+            Name = nameof(FlipClock.ShowYear),
+            Description = Localizer["ShowYear_Description"],
+            Type = "boolean",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
         new()
         {
             Name = nameof(FlipClock.ShowMonth),
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6800,16 +6800,6 @@
   "BootstrapBlazor.Server.Components.Samples.FlipClocks": {
     "FlipClocksTitle": "FlipClock",
     "FlipClocksDescription": "Used for website timing or countdown",
-    "BaseUsageText": "Basic usage",
-    "BaseUsageIntro": "Synchronize display of current time",
-    "ShowMonthText": "Show Month",
-    "ShowMonthIntro": "Display month information by setting <code>ShowMonth=\"true\"</code>",
-    "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",
-    "ShowSecondIntro": "By setting <code>ShowSecond=\"false\"</code> to display hour and minute information",
     "CountText": "Counter",
     "CountIntro": "By setting <code>ViewMode=\"FlipClockViewMode.Count\"</code> to enable the timer function, the start time can be set using <code>StartValue</code>",
     "IsCountDownText": "CountDown",
@@ -6826,6 +6816,8 @@
     "ShowDay_Description": "Show day",
     "ShowHour_Description": "Show hour",
     "ShowMinute_Description": "Show minute",
+    "ShowMonth_Description": "Show month",
+    "ShowYear_Description": "Show year",
     "ViewMode_Description": "View mode",
     "StartValue_Description": "Start time",
     "OnCompletedAsync_Description": "Callback when timer completed",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -6800,16 +6800,6 @@
   "BootstrapBlazor.Server.Components.Samples.FlipClocks": {
     "FlipClocksTitle": "FlipClock 卡片翻转时钟",
     "FlipClocksDescription": "用于网站计时，或者倒计时使用",
-    "BaseUsageText": "基本功能",
-    "BaseUsageIntro": "同步显示当前时间",
-    "ShowDayText": "显示日",
-    "ShowDayIntro": "通过设置 <code>ShowDay=\"true\"</code> 显示日信息",
-    "ShowMonthText": "显示月",
-    "ShowMonthIntro": "通过设置 <code>ShowMonth=\"true\"</code> 显示月信息",
-    "ShowMinuteText": "不显示时、分",
-    "ShowMinuteIntro": "通过设置 <code>ShowHour=\"false\"</code> <code>ShowMinute=\"false\"</code> 不显示小时、分钟信息",
-    "ShowSecondText": "不显示秒",
-    "ShowSecondIntro": "通过设置 <code>ShowSecond=\"false\"</code> 不显示秒信息",
     "CountText": "计时器",
     "CountIntro": "通过设置 <code>ViewMode=\"FlipClockViewMode.Count\"</code> 开启计时功能，开始时间使用 <code>StartValue</code> 设置",
     "IsCountDownText": "倒计时",
@@ -6826,6 +6816,8 @@
     "ShowDay_Description": "是否显示日",
     "ShowHour_Description": "是否显示小时",
     "ShowMinute_Description": "是否显示分钟",
+    "ShowMonth_Description": "是否显示月",
+    "ShowYear_Description": "是否显示年",
     "ViewMode_Description": "显示模式",
     "StartValue_Description": "开始时间",
     "OnCompletedAsync_Description": "计时结束回调方法",
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor
@@ -1,8 +1,18 @@
 ﻿@namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true, AutoInvokeDispose = false)]
 
 <div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">
+    @if (ShowYear)
+    {
+        <div class="bb-flip-clock-list year">
+            @RenderItem(10)
+            @RenderItem(10)
+            @RenderItem(10)
+            @RenderItem(10)
+        </div>
+    }
+
     @if (ShowMonth)
     {
         <div class="bb-flip-clock-list month">
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>
+    /// 获得/设置 是否显示 Year 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowYear { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示 Month 默认 false
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
@@ -1,6 +1,4 @@
-﻿import Data from "../../modules/data.js"
-
-export function init(id, options) {
+﻿export function init(id, options) {
     options = {
         ...{
             viewMode: 'DateTime',
@@ -14,75 +12,77 @@ export function init(id, options) {
         return;
     }
 
-    const listMonth = el.querySelector('.bb-flip-clock-list.month');
-    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";
-
+    const lastValues = {};
     let counter = 0;
+    let totalMilliseconds = 0;
+    let countDown = false;
     const getDate = () => {
-        let totalMilliseconds = 0;
-        let now;
-
-        if (options.viewMode === "Count") {
-            counter += 1000;
-            totalMilliseconds = counter - options.startValue;
-        }
-        else if (countDown) {
-            counter += 1000;
-            totalMilliseconds = options.startValue - counter;
-            if (totalMilliseconds < 0) totalMilliseconds = 0;
-        }
-        else {
-            now = new Date();
+        const view = options.viewMode;
+        countDown = false;
+        if (view === "DateTime") {
+            const now = new Date();
             return {
+                years: now.getFullYear(),
                 months: now.getMonth() + 1,
                 days: now.getDate(),
                 hours: now.getHours(),
                 minutes: now.getMinutes(),
                 seconds: now.getSeconds()
             };
         }
+        else if (view === "Count") {
+            counter += 1000;
+            totalMilliseconds = counter - options.startValue;
+        }
+        else if (view === "CountDown") {
+            countDown = true;
+            counter += 1000;
+            totalMilliseconds = options.startValue - counter;
+            if (totalMilliseconds < 0) totalMilliseconds = 0;
+        }
 
         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 { months, days, hours, minutes, seconds };
-    }
+        const months = 0;
+        const years = 0;
+        return { years, months, days, hours, minutes, seconds };
+    };
+
+    const getConfig = () => [
+        { key: 'years', list: el.querySelector('.bb-flip-clock-list.year'), digits: 4 },
+        { key: 'months', list: el.querySelector('.bb-flip-clock-list.month'), digits: 2 },
+        { key: 'days', list: el.querySelector('.bb-flip-clock-list.day'), digits: 2 },
+        { key: 'hours', list: el.querySelector('.bb-flip-clock-list.hour'), digits: 2 },
+        { key: 'minutes', list: el.querySelector('.bb-flip-clock-list.minute'), digits: 2 },
+        { key: 'seconds', list: el.querySelector('.bb-flip-clock-list.second'), digits: 2 },
+    ];
+
+    const setDigits = (list, value, digits, countDown) => {
+        list.classList.remove('flip');
+        for (let i = 0; i < digits; i++) {
+            const place = digits - 1 - i;
+            const digit = Math.floor(value / 10 ** place) % 10;
+            setFlip(list.children[i], digit, countDown);
+        }
+        list.classList.add('flip');
+    };
 
-    let lastMonth;
-    let lastDay;
-    let lastHour;
-    let lastMinute;
-    let lastSecond;
     const go = () => {
-        const { months, days, hours, minutes, seconds } = getDate();
-
-        if (lastSecond !== seconds) {
-            lastSecond = seconds;
-            setTime(listSecond, seconds, countDown);
-        }
-        if (lastMinute !== minutes) {
-            lastMinute = minutes;
-            setTime(listMinute, minutes, countDown);
-        }
-        if (lastHour !== hours) {
-            lastHour = hours;
-            setTime(listHour, hours, countDown);
-        }
-        if (lastDay !== days) {
-            lastDay = days;
-            setTime(listDay, days, countDown);
-        }
-        if (lastMonth !== months) {
-            lastDay = days;
-            setTime(listMonth, months, countDown);
-        }
-        return { months, days, hours, minutes, seconds }
-    }
+        const d = getDate();
+        const unitConfig = getConfig();
+        unitConfig.forEach(({ key, list, digits }) => {
+            if (list === null) return;
+
+            const v = d[key];
+            if (lastValues[key] !== v) {
+                lastValues[key] = v;
+                setDigits(list, v, digits, countDown);
+            }
+        });
+        return d;
+    };
 
     let start = void 0
     let current;
@@ -105,28 +105,6 @@ export function init(id, options) {
     }
 
     requestAnimationFrame(flip);
-    Data.set(id, { el, options });
-}
-
-export function dispose(id) {
-    const clock = Data.get(id)
-    if (clock) {
-
-    }
-}
-
-const setTime = (list, time, countDown) => {
-    if (list) {
-        const leftIndex = Math.floor(time / 10);
-        const rightIndex = time % 10;
-        const leftFlip = list.children[0];
-        const rightFlip = list.children[1];
-
-        list.classList.remove('flip');
-        setFlip(leftFlip, leftIndex, countDown);
-        setFlip(rightFlip, rightIndex, countDown);
-        list.classList.add('flip');
-    }
 }
 
 const setFlip = (flip, index, countDown) => {
diff --git a/test/UnitTest/Components/FlipClockTest.cs b/test/UnitTest/Components/FlipClockTest.cs
@@ -72,6 +72,19 @@ public void ShowMonth_Ok()
         cut.Contains("bb-flip-clock-list month");
     }
 
+    [Fact]
+    public void ShowYear_Ok()
+    {
+        var cut = Context.RenderComponent<FlipClock>();
+        cut.DoesNotContain("bb-flip-clock-list year");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ShowYear, true);
+        });
+        cut.Contains("bb-flip-clock-list year");
+    }
+
     [Fact]
     public async Task ViewMode_Ok()
     {
