修复翻页时钟偏移并优化时间显示布局

- 修复翻页时钟动画开始时的位置偏移问题
- 将AM/PM显示移至时间数字左上角
- 添加日期（年月日星期）显示在时间数字右上角
- 统一数码管、翻页、滚动三种时钟的显示样式
- 调整AM/PM和日期字体为数字大小的20%
- 修复翻页和滚动时钟AM/PM显示错误（上午下午颠倒）

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.css

@@ -52,8 +52,28 @@
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
-  gap: 4px;
-  margin-right: 4px;
+  margin-right: 8px;
+}
+
+.digital-clock-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.digital-clock-header {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.digital-clock-header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
 }
 
 .digital-clock-period {
@@ -64,6 +84,15 @@
   line-height: 1;
 }
 
+.digital-clock-date {
+  font-family: Arial, sans-serif;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  line-height: 1;
+  white-space: nowrap;
+}
+
 .format-toggle-side {
   padding: 4px 8px;
   font-size: 12px;
@@ -74,6 +103,7 @@
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
 .format-toggle-side:hover {

src/App.tsx

@@ -5,21 +5,32 @@ 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 }) {
+interface DateInfo {
+  dateString: string
+  weekday: string
+}
+
+function formatDate(date: Date): DateInfo {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+  const weekday = weekdays[date.getDay()]
+
+  return {
+    dateString: `${year}-${month}-${day}`,
+    weekday
+  }
+}
+
+function DigitalClock({ time, size, period, is24Hour, onToggleFormat, dateInfo }: { time: string; size: number; period?: string; is24Hour: boolean; onToggleFormat: () => void; dateInfo: DateInfo }) {
   const fontSize = Math.floor(size * 0.95)
-  const periodSize = Math.floor(size * 0.25)
+  const periodSize = Math.floor(size * 0.20)
+  const dateSize = Math.floor(size * 0.20)
 
   return (
     <div className="digital-clock-outer">
       <div className="digital-clock-side-panel">
-        {!is24Hour && period && (
-          <span
-            className="digital-clock-period"
-            style={{ fontSize: `${periodSize}px` }}
-          >
-            {period}
-          </span>
-        )}
         <button
           className="format-toggle-side"
           onClick={onToggleFormat}
@@ -27,11 +38,31 @@ function DigitalClock({ time, size, period, is24Hour, onToggleFormat }: { time:
           {is24Hour ? '24H' : '12H'}
         </button>
       </div>
-      <div
-        className="digital-clock"
-        style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
-      >
-        {time}
+      <div className="digital-clock-wrapper">
+        <div className="digital-clock-header">
+          <div className="digital-clock-header-left">
+            {!is24Hour && period && (
+              <span
+                className="digital-clock-period"
+                style={{ fontSize: `${periodSize}px` }}
+              >
+                {period}
+              </span>
+            )}
+          </div>
+          <span
+            className="digital-clock-date"
+            style={{ fontSize: `${dateSize}px` }}
+          >
+            {dateInfo.dateString} {dateInfo.weekday}
+          </span>
+        </div>
+        <div
+          className="digital-clock"
+          style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
+        >
+          {time}
+        </div>
       </div>
     </div>
   )
@@ -86,13 +117,14 @@ function App() {
   }
 
   const { timeString, period } = formatTime()
+  const dateInfo = formatDate(time)
 
   const renderClock = () => {
     switch (clockStyle) {
       case 'flip':
-        return <FlipClock time={timeString} size={clockSize} />
+        return <FlipClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} />
       case 'roll':
-        return <RollClock time={timeString} size={clockSize} />
+        return <RollClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} />
       case 'digital':
       default:
         return (
@@ -102,6 +134,7 @@ function App() {
             period={period}
             is24Hour={is24Hour}
             onToggleFormat={() => setIs24Hour(!is24Hour)}
+            dateInfo={dateInfo}
           />
         )
     }

src/components/FlipClock.css

@@ -10,8 +10,7 @@
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
-  gap: 4px;
-  margin-right: 4px;
+  margin-right: 8px;
 }
 
 .flip-clock-period {
@@ -32,6 +31,7 @@
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
 .flip-format-toggle:hover {
@@ -39,6 +39,34 @@
   background-color: rgba(255, 255, 255, 0.15);
 }
 
+.flip-clock-main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.flip-clock-header {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.flip-clock-header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.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-clock-container {
   display: flex;
   flex-direction: row;
@@ -46,6 +74,15 @@
   justify-content: center;
 }
 
+.flip-clock-date {
+  font-family: Arial, sans-serif;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  line-height: 1;
+  white-space: nowrap;
+}
+
 .flip-clock-digit-group {
   display: flex;
   flex-direction: row;

src/components/FlipClock.tsx

@@ -2,38 +2,31 @@ import { useState } from 'react';
 import { FlipDigit } from './FlipDigit';
 import './FlipClock.css';
 
+interface DateInfo {
+  dateString: string;
+  weekday: string;
+}
+
 interface FlipClockProps {
   time: string; // "HH:MM:SS" format
   size: number;
+  dateInfo: DateInfo;
+  period?: string;
 }
 
-export function FlipClock({ time, size }: FlipClockProps) {
+export function FlipClock({ time, size, dateInfo, period }: FlipClockProps) {
   const [is24Hour, setIs24Hour] = useState(true);
 
-  // Parse time and convert if needed
+  // Parse time - it's already in 12h format when period is provided
   const [hoursStr, minutes, seconds] = time.split(':');
-  let hours = parseInt(hoursStr, 10);
-  let period: string | undefined;
+  const displayHours = hoursStr;
 
-  if (!is24Hour) {
-    period = hours >= 12 ? 'PM' : 'AM';
-    hours = hours % 12 || 12;
-  }
-
-  const displayHours = String(hours).padStart(2, '0');
-  const periodSize = size * 0.25;
+  const periodSize = size * 0.20;
+  const dateSize = size * 0.20;
 
   return (
     <div className="flip-clock-outer">
       <div className="flip-clock-side-panel">
-        {!is24Hour && period && (
-          <span
-            className="flip-clock-period"
-            style={{ fontSize: `${periodSize}px` }}
-          >
-            {period}
-          </span>
-        )}
         <button
           className="flip-format-toggle"
           onClick={() => setIs24Hour(!is24Hour)}
@@ -41,43 +34,63 @@ export function FlipClock({ time, size }: FlipClockProps) {
           {is24Hour ? '24H' : '12H'}
         </button>
       </div>
-      <div className="flip-clock-container">
-        {/* Hours */}
-        <div className="flip-clock-digit-group">
-          <FlipDigit value={parseInt(displayHours[0], 10)} size={size} />
-          <FlipDigit value={parseInt(displayHours[1], 10)} size={size} />
+      <div className="flip-clock-main">
+        <div className="flip-clock-header">
+          <div className="flip-clock-header-left">
+            {period && (
+              <span
+                className="flip-clock-period"
+                style={{ fontSize: `${periodSize}px` }}
+              >
+                {period}
+              </span>
+            )}
+          </div>
+          <span
+            className="flip-clock-date"
+            style={{ fontSize: `${dateSize}px` }}
+          >
+            {dateInfo.dateString} {dateInfo.weekday}
+          </span>
         </div>
+        <div className="flip-clock-container">
+          {/* Hours */}
+          <div className="flip-clock-digit-group">
+            <FlipDigit value={parseInt(displayHours[0], 10)} size={size} />
+            <FlipDigit value={parseInt(displayHours[1], 10)} size={size} />
+          </div>
 
-        <span
-          className="flip-clock-separator"
-          style={{
-            fontSize: `${size * 0.5}px`,
-            marginTop: `${-size * 0.08}px`
-          }}
-        >
-          :
-        </span>
+          <span
+            className="flip-clock-separator"
+            style={{
+              fontSize: `${size * 0.5}px`,
+              marginTop: `${-size * 0.08}px`
+            }}
+          >
+            :
+          </span>
 
-        {/* Minutes */}
-        <div className="flip-clock-digit-group">
-          <FlipDigit value={parseInt(minutes[0], 10)} size={size} />
-          <FlipDigit value={parseInt(minutes[1], 10)} size={size} />
-        </div>
+          {/* Minutes */}
+          <div className="flip-clock-digit-group">
+            <FlipDigit value={parseInt(minutes[0], 10)} size={size} />
+            <FlipDigit value={parseInt(minutes[1], 10)} size={size} />
+          </div>
 
-        <span
-          className="flip-clock-separator"
-          style={{
-            fontSize: `${size * 0.5}px`,
-            marginTop: `${-size * 0.08}px`
-          }}
-        >
-          :
-        </span>
+          <span
+            className="flip-clock-separator"
+            style={{
+              fontSize: `${size * 0.5}px`,
+              marginTop: `${-size * 0.08}px`
+            }}
+          >
+            :
+          </span>
 
-        {/* Seconds */}
-        <div className="flip-clock-digit-group">
-          <FlipDigit value={parseInt(seconds[0], 10)} size={size} />
-          <FlipDigit value={parseInt(seconds[1], 10)} size={size} />
+          {/* Seconds */}
+          <div className="flip-clock-digit-group">
+            <FlipDigit value={parseInt(seconds[0], 10)} size={size} />
+            <FlipDigit value={parseInt(seconds[1], 10)} size={size} />
+          </div>
         </div>
       </div>
     </div>

src/components/FlipDigit.css

@@ -3,6 +3,7 @@
   border-radius: 4px;
   background-color: #1a1a1a;
   overflow: hidden;
+  perspective: 1000px;
 }
 
 .flip-digit-bg-top {

src/components/FlipDigit.tsx

@@ -33,11 +33,14 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
 
   // Finish animation
   const finishAnimation = () => {
-    setTopRotation(0);
-    setBottomRotation(-90);
-    setFlipBottomValue(null);
     setIsAnimating(false);
-    animating.current = false;
+
+    requestAnimationFrame(() => {
+      setTopRotation(0);
+      setBottomRotation(-90);
+      setFlipBottomValue(null);
+      animating.current = false;
+    });
   };
 
   // Start bottom animation after top completes
@@ -64,7 +67,6 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
   useEffect(() => {
     if (value !== bgTopValue && !animating.current) {
       animating.current = true;
-      setIsAnimating(true);
 
       // Save current value as flip top value
       setFlipTopValue(bgTopValue);
@@ -73,13 +75,23 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
       // Update bgTop immediately (revealed when top flips away)
       setBgTopValue(value);
 
-      // Reset rotation states
+      // First, ensure transition is disabled before resetting rotation
+      setIsAnimating(false);
+
+      // Reset rotation states instantly (without transition)
       setTopRotation(0);
       setBottomRotation(-90);
 
-      // Start top animation after a brief delay to ensure state is set
+      // Wait for browser to apply the reset (without transition)
       requestAnimationFrame(() => {
-        setTopRotation(90);
+        // Now enable transition for the actual animation
+        setIsAnimating(true);
+
+        // Wait one more frame to ensure transition is enabled
+        requestAnimationFrame(() => {
+          // Start top animation: flip from 0° to 90°
+          setTopRotation(90);
+        });
       });
 
       // After top animation completes, start bottom animation
@@ -111,12 +123,12 @@ export function FlipDigit({ value, size }: FlipDigitProps) {
 
   const topFlipStyle = {
     height: `${halfHeight}px`,
-    transform: `perspective(1000px) rotateX(${topRotation}deg)`,
+    transform: `rotateX(${topRotation}deg)`,
   };
 
   const bottomFlipStyle = {
     height: `${halfHeight}px`,
-    transform: `perspective(1000px) rotateX(${bottomRotation}deg)`,
+    transform: `rotateX(${bottomRotation}deg)`,
   };
 
   const centerLineStyle = {

src/components/RollClock.css

@@ -10,8 +10,7 @@
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
-  gap: 4px;
-  margin-right: 4px;
+  margin-right: 8px;
 }
 
 .roll-clock-period {
@@ -32,6 +31,7 @@
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
 .roll-format-toggle:hover {
@@ -45,6 +45,34 @@
   align-items: center;
 }
 
+.roll-clock-main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.roll-clock-header {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.roll-clock-header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.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-clock-container {
   display: flex;
   flex-direction: row;
@@ -52,6 +80,15 @@
   justify-content: center;
 }
 
+.roll-clock-date {
+  font-family: Arial, sans-serif;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  line-height: 1;
+  white-space: nowrap;
+}
+
 .roll-clock-digit-group {
   display: flex;
   flex-direction: row;

src/components/RollClock.tsx

@@ -2,29 +2,30 @@ import { useState } from 'react';
 import { RollDigit } from './RollDigit';
 import './RollClock.css';
 
+interface DateInfo {
+  dateString: string;
+  weekday: string;
+}
+
 interface RollClockProps {
   time: string; // "HH:MM:SS" format
   size: number;
+  dateInfo: DateInfo;
+  period?: string;
 }
 
-export function RollClock({ time, size }: RollClockProps) {
+export function RollClock({ time, size, dateInfo, period }: RollClockProps) {
   // Roll direction: 'down' = roll down, 'up' = roll up
   const [direction, setDirection] = useState<'down' | 'up'>('down');
   const [is24Hour, setIs24Hour] = useState(true);
 
-  // Parse time and convert if needed
+  // Parse time - it's already in 12h format when period is provided
   const [hoursStr, minutes, seconds] = time.split(':');
-  let hours = parseInt(hoursStr, 10);
-  let period: string | undefined;
+  const displayHours = hoursStr;
 
-  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;
+  const periodSize = size * 0.20;
+  const dateSize = size * 0.20;
 
   // Toggle direction
   const toggleDirection = () => {
@@ -34,14 +35,6 @@ export function RollClock({ time, size }: RollClockProps) {
   return (
     <div className="roll-clock-outer">
       <div className="roll-clock-side-panel">
-        {!is24Hour && period && (
-          <span
-            className="roll-clock-period"
-            style={{ fontSize: `${periodSize}px` }}
-          >
-            {period}
-          </span>
-        )}
         <button
           className="roll-format-toggle"
           onClick={() => setIs24Hour(!is24Hour)}
@@ -50,43 +43,63 @@ export function RollClock({ time, size }: RollClockProps) {
         </button>
       </div>
       <div className="roll-clock-wrapper">
-        <div className="roll-clock-container">
-          {/* Hours */}
-          <div className="roll-clock-digit-group">
-            <RollDigit value={parseInt(displayHours[0], 10)} size={size} direction={direction} />
-            <RollDigit value={parseInt(displayHours[1], 10)} size={size} direction={direction} />
+        <div className="roll-clock-main">
+          <div className="roll-clock-header">
+            <div className="roll-clock-header-left">
+              {!is24Hour && period && (
+                <span
+                  className="roll-clock-period"
+                  style={{ fontSize: `${periodSize}px` }}
+                >
+                  {period}
+                </span>
+              )}
+            </div>
+            <span
+              className="roll-clock-date"
+              style={{ fontSize: `${dateSize}px` }}
+            >
+              {dateInfo.dateString} {dateInfo.weekday}
+            </span>
           </div>
+          <div className="roll-clock-container">
+            {/* Hours */}
+            <div className="roll-clock-digit-group">
+              <RollDigit value={parseInt(displayHours[0], 10)} size={size} direction={direction} />
+              <RollDigit value={parseInt(displayHours[1], 10)} size={size} direction={direction} />
+            </div>
 
-          <span
-            className="roll-clock-separator"
-            style={{
-              fontSize: `${size * 0.5}px`,
-              marginTop: `${-size * 0.08}px`
-            }}
-          >
-            :
-          </span>
+            <span
+              className="roll-clock-separator"
+              style={{
+                fontSize: `${size * 0.5}px`,
+                marginTop: `${-size * 0.08}px`
+              }}
+            >
+              :
+            </span>
 
-          {/* Minutes */}
-          <div className="roll-clock-digit-group">
-            <RollDigit value={parseInt(minutes[0], 10)} size={size} direction={direction} />
-            <RollDigit value={parseInt(minutes[1], 10)} size={size} direction={direction} />
-          </div>
+            {/* Minutes */}
+            <div className="roll-clock-digit-group">
+              <RollDigit value={parseInt(minutes[0], 10)} size={size} direction={direction} />
+              <RollDigit value={parseInt(minutes[1], 10)} size={size} direction={direction} />
+            </div>
 
-          <span
-            className="roll-clock-separator"
-            style={{
-              fontSize: `${size * 0.5}px`,
-              marginTop: `${-size * 0.08}px`
-            }}
-          >
-            :
-          </span>
+            <span
+              className="roll-clock-separator"
+              style={{
+                fontSize: `${size * 0.5}px`,
+                marginTop: `${-size * 0.08}px`
+              }}
+            >
+              :
+            </span>
 
-          {/* Seconds */}
-          <div className="roll-clock-digit-group">
-            <RollDigit value={parseInt(seconds[0], 10)} size={size} direction={direction} />
-            <RollDigit value={parseInt(seconds[1], 10)} size={size} direction={direction} />
+            {/* Seconds */}
+            <div className="roll-clock-digit-group">
+              <RollDigit value={parseInt(seconds[0], 10)} size={size} direction={direction} />
+              <RollDigit value={parseInt(seconds[1], 10)} size={size} direction={direction} />
+            </div>
           </div>
         </div>