统一三种时钟的12/24小时制配置并使用本地存储

- 将12/24小时制配置统一到App组件管理
- 使用localStorage保存用户选择，键名为'clock-is24Hour'
- 默认值为24小时制(true)
- 三种时钟样式共用同一配置，切换时保持一致
- FlipClock和RollClock接收统一props而非各自管理状态

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

src/App.tsx

@@ -72,7 +72,18 @@ function App() {
   const [time, setTime] = useState(new Date())
   const [clockStyle, setClockStyle] = useState<ClockStyle>('digital')
   const [clockSize, setClockSize] = useState(120)
-  const [is24Hour, setIs24Hour] = useState(true)
+  const [is24Hour, setIs24Hour] = useState(() => {
+    // 从 localStorage 读取，默认 24 小时制 (true)
+    const saved = localStorage.getItem('clock-is24Hour')
+    return saved === null ? true : saved === 'true'
+  })
+
+  // 切换格式时保存到 localStorage
+  const toggleFormat = () => {
+    const newValue = !is24Hour
+    setIs24Hour(newValue)
+    localStorage.setItem('clock-is24Hour', String(newValue))
+  }
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -122,9 +133,9 @@ function App() {
   const renderClock = () => {
     switch (clockStyle) {
       case 'flip':
-        return <FlipClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} />
+        return <FlipClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} is24Hour={is24Hour} onToggleFormat={toggleFormat} />
       case 'roll':
-        return <RollClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} />
+        return <RollClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} is24Hour={is24Hour} onToggleFormat={toggleFormat} />
       case 'digital':
       default:
         return (
@@ -133,7 +144,7 @@ function App() {
             size={clockSize}
             period={period}
             is24Hour={is24Hour}
-            onToggleFormat={() => setIs24Hour(!is24Hour)}
+            onToggleFormat={toggleFormat}
             dateInfo={dateInfo}
           />
         )

src/components/FlipClock.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { FlipDigit } from './FlipDigit';
 import './FlipClock.css';
 
@@ -12,11 +11,11 @@ interface FlipClockProps {
   size: number;
   dateInfo: DateInfo;
   period?: string;
+  is24Hour: boolean;
+  onToggleFormat: () => void;
 }
 
-export function FlipClock({ time, size, dateInfo, period }: FlipClockProps) {
-  const [is24Hour, setIs24Hour] = useState(true);
-
+export function FlipClock({ time, size, dateInfo, period, is24Hour, onToggleFormat }: FlipClockProps) {
   // Parse time - it's already in 12h format when period is provided
   const [hoursStr, minutes, seconds] = time.split(':');
   const displayHours = hoursStr;
@@ -29,7 +28,7 @@ export function FlipClock({ time, size, dateInfo, period }: FlipClockProps) {
       <div className="flip-clock-side-panel">
         <button
           className="flip-format-toggle"
-          onClick={() => setIs24Hour(!is24Hour)}
+          onClick={onToggleFormat}
         >
           {is24Hour ? '24H' : '12H'}
         </button>

src/components/RollClock.tsx

@@ -12,12 +12,13 @@ interface RollClockProps {
   size: number;
   dateInfo: DateInfo;
   period?: string;
+  is24Hour: boolean;
+  onToggleFormat: () => void;
 }
 
-export function RollClock({ time, size, dateInfo, period }: RollClockProps) {
+export function RollClock({ time, size, dateInfo, period, is24Hour, onToggleFormat }: RollClockProps) {
   // Roll direction: 'down' = roll down, 'up' = roll up
   const [direction, setDirection] = useState<'down' | 'up'>('down');
-  const [is24Hour, setIs24Hour] = useState(true);
 
   // Parse time - it's already in 12h format when period is provided
   const [hoursStr, minutes, seconds] = time.split(':');
@@ -37,7 +38,7 @@ export function RollClock({ time, size, dateInfo, period }: RollClockProps) {
       <div className="roll-clock-side-panel">
         <button
           className="roll-format-toggle"
-          onClick={() => setIs24Hour(!is24Hour)}
+          onClick={onToggleFormat}
         >
           {is24Hour ? '24H' : '12H'}
         </button>
@@ -46,7 +47,7 @@ export function RollClock({ time, size, dateInfo, period }: RollClockProps) {
         <div className="roll-clock-main">
           <div className="roll-clock-header">
             <div className="roll-clock-header-left">
-              {!is24Hour && period && (
+              {period && (
                 <span
                   className="roll-clock-period"
                   style={{ fontSize: `${periodSize}px` }}