From d2a9a94d3b6de01c05fd280bc1f48fde037a858d Mon Sep 17 00:00:00 2001 From: ysm Date: Tue, 24 Mar 2026 00:17:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E7=BF=BB=E9=A1=B5=E5=92=8C=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=97=B6=E9=92=9F=E7=8B=AC=E7=AB=8B=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?12/24=E5=B0=8F=E6=97=B6=E5=88=B6=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - FlipClock组件独立实现12/24H切换功能 - RollClock组件独立实现12/24H切换功能 - 分别使用独立的CSS样式（flip-format-toggle/roll-format-toggle） - 各组件状态独立，互不干扰 Co-Authored-By: Claude Sonnet 4.6 --- src/App.css | 26 +------ src/App.tsx | 1 - src/components/FlipClock.css | 41 ++++++++++ src/components/FlipClock.tsx | 98 ++++++++++++++++-------- src/components/RollClock.css | 41 ++++++++++ src/components/RollClock.tsx | 142 +++++++++++++++++++++-------------- 6 files changed, 234 insertions(+), 115 deletions(-) diff --git a/src/App.css b/src/App.css index e1a06ee..ff0431c 100644 --- a/src/App.css +++ b/src/App.css @@ -57,7 +57,7 @@ } .digital-clock-period { - font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; + font-family: Arial, sans-serif; font-weight: 600; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); @@ -81,24 +81,6 @@ background-color: rgba(255, 255, 255, 0.15); } -.format-toggle { - padding: 6px 12px; - font-size: 12px; - font-weight: 500; - color: #888; - background-color: rgba(255, 255, 255, 0.05); - border: none; - border-radius: 6px; - cursor: pointer; - transition: all 0.2s ease; - flex-shrink: 0; -} - -.format-toggle:hover { - color: #fff; - background-color: rgba(255, 255, 255, 0.15); -} - .clock-container { display: flex; justify-content: center; @@ -109,12 +91,6 @@ box-sizing: border-box; } -.digital-clock-wrapper { - position: relative; - display: inline-flex; - align-items: flex-start; -} - .digital-clock { font-family: 'DSEG7', monospace; font-weight: bold; diff --git a/src/App.tsx b/src/App.tsx index eaf53cb..a81899b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,6 @@ import './App.css' type ClockStyle = 'digital' | 'flip' | 'roll' function DigitalClock({ time, size, period, is24Hour, onToggleFormat }: { time: string; size: number; period?: string; is24Hour: boolean; onToggleFormat: () => void }) { - // Match visual height with flip/roll clocks const fontSize = Math.floor(size * 0.95) const periodSize = Math.floor(size * 0.25) diff --git a/src/components/FlipClock.css b/src/components/FlipClock.css index 67b0006..ddc5271 100644 --- a/src/components/FlipClock.css +++ b/src/components/FlipClock.css @@ -1,3 +1,44 @@ +.flip-clock-outer { + display: flex; + flex-direction: row; + align-items: center; + gap: 0; +} + +.flip-clock-side-panel { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + gap: 4px; + margin-right: 4px; +} + +.flip-clock-period { + font-family: Arial, sans-serif; + font-weight: 600; + color: #fff; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + line-height: 1; +} + +.flip-format-toggle { + padding: 4px 8px; + font-size: 12px; + font-weight: 500; + color: #888; + background-color: rgba(255, 255, 255, 0.05); + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; +} + +.flip-format-toggle:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); +} + .flip-clock-container { display: flex; flex-direction: row; diff --git a/src/components/FlipClock.tsx b/src/components/FlipClock.tsx index ac0a71e..b9a9ade 100644 --- a/src/components/FlipClock.tsx +++ b/src/components/FlipClock.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { FlipDigit } from './FlipDigit'; import './FlipClock.css'; @@ -7,46 +8,77 @@ interface FlipClockProps { } export function FlipClock({ time, size }: FlipClockProps) { - const [hours, minutes, seconds] = time.split(':'); + const [is24Hour, setIs24Hour] = useState(true); + + // Parse time and convert if needed + const [hoursStr, minutes, seconds] = time.split(':'); + let hours = parseInt(hoursStr, 10); + let period: string | undefined; + + if (!is24Hour) { + period = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12 || 12; + } + + const displayHours = String(hours).padStart(2, '0'); + const periodSize = size * 0.25; return ( -
- {/* Hours */} -
- - +
+
+ {!is24Hour && period && ( + + {period} + + )} +
+
+ {/* Hours */} +
+ + +
- - : - + + : + - {/* Minutes */} -
- - -
+ {/* Minutes */} +
+ + +
- - : - + + : + - {/* Seconds */} -
- - + {/* Seconds */} +
+ + +
); diff --git a/src/components/RollClock.css b/src/components/RollClock.css index 21d10d6..31ba25b 100644 --- a/src/components/RollClock.css +++ b/src/components/RollClock.css @@ -1,3 +1,44 @@ +.roll-clock-outer { + display: flex; + flex-direction: row; + align-items: center; + gap: 0; +} + +.roll-clock-side-panel { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + gap: 4px; + margin-right: 4px; +} + +.roll-clock-period { + font-family: Arial, sans-serif; + font-weight: 600; + color: #fff; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + line-height: 1; +} + +.roll-format-toggle { + padding: 4px 8px; + font-size: 12px; + font-weight: 500; + color: #888; + background-color: rgba(255, 255, 255, 0.05); + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; +} + +.roll-format-toggle:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); +} + .roll-clock-wrapper { display: flex; flex-direction: row; diff --git a/src/components/RollClock.tsx b/src/components/RollClock.tsx index a4fd889..855a38f 100644 --- a/src/components/RollClock.tsx +++ b/src/components/RollClock.tsx @@ -10,9 +10,21 @@ interface RollClockProps { export function RollClock({ time, size }: RollClockProps) { // Roll direction: 'down' = roll down, 'up' = roll up const [direction, setDirection] = useState<'down' | 'up'>('down'); + const [is24Hour, setIs24Hour] = useState(true); - const [hours, minutes, seconds] = time.split(':'); + // Parse time and convert if needed + const [hoursStr, minutes, seconds] = time.split(':'); + let hours = parseInt(hoursStr, 10); + let period: string | undefined; + + if (!is24Hour) { + period = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12 || 12; + } + + const displayHours = String(hours).padStart(2, '0'); const buttonSize = size * 0.25; + const periodSize = size * 0.25; // Toggle direction const toggleDirection = () => { @@ -20,65 +32,83 @@ export function RollClock({ time, size }: RollClockProps) { }; return ( -
-
- {/* Hours */} -
- - -
- - +
+ {!is24Hour && period && ( + + {period} + + )} +
+
+
+ {/* Hours */} +
+ + +
- {/* Direction toggle button */} -
+ + {/* Direction toggle button */} + + + {direction === 'down' ? '↓' : '↑'} + + +
); }