滚动方向配置保存到本地存储

- 将滚动方向状态从RollClock提升到App组件统一管理
- 使用localStorage保存用户选择的滚动方向，键名为'clock-rollDirection'
- 默认值为向下滚动('down')
- 切换方向时自动保存到localStorage

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

src/App.tsx

@@ -77,6 +77,11 @@ function App() {
     const saved = localStorage.getItem('clock-is24Hour')
     return saved === null ? true : saved === 'true'
   })
+  const [rollDirection, setRollDirection] = useState<'down' | 'up'>(() => {
+    // 从 localStorage 读取，默认向下滚动 ('down')
+    const saved = localStorage.getItem('clock-rollDirection')
+    return saved === 'up' ? 'up' : 'down'
+  })
 
   // 切换格式时保存到 localStorage
   const toggleFormat = () => {
@@ -85,6 +90,13 @@ function App() {
     localStorage.setItem('clock-is24Hour', String(newValue))
   }
 
+  // 切换滚动方向时保存到 localStorage
+  const toggleRollDirection = () => {
+    const newValue = rollDirection === 'down' ? 'up' : 'down'
+    setRollDirection(newValue)
+    localStorage.setItem('clock-rollDirection', newValue)
+  }
+
   useEffect(() => {
     const timer = setInterval(() => {
       setTime(new Date())
@@ -135,7 +147,7 @@ function App() {
       case 'flip':
         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} is24Hour={is24Hour} onToggleFormat={toggleFormat} />
+        return <RollClock time={timeString} size={clockSize} dateInfo={dateInfo} period={period} is24Hour={is24Hour} onToggleFormat={toggleFormat} direction={rollDirection} onToggleDirection={toggleRollDirection} />
       case 'digital':
       default:
         return (

src/components/RollClock.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { RollDigit } from './RollDigit';
 import './RollClock.css';
 
@@ -14,12 +13,11 @@ interface RollClockProps {
   period?: string;
   is24Hour: boolean;
   onToggleFormat: () => void;
+  direction: 'down' | 'up';
+  onToggleDirection: () => void;
 }
 
-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');
-
+export function RollClock({ time, size, dateInfo, period, is24Hour, onToggleFormat, direction, onToggleDirection }: RollClockProps) {
   // Parse time - it's already in 12h format when period is provided
   const [hoursStr, minutes, seconds] = time.split(':');
   const displayHours = hoursStr;
@@ -28,11 +26,6 @@ export function RollClock({ time, size, dateInfo, period, is24Hour, onToggleForm
   const periodSize = size * 0.20;
   const dateSize = size * 0.20;
 
-  // Toggle direction
-  const toggleDirection = () => {
-    setDirection((prev) => (prev === 'down' ? 'up' : 'down'));
-  };
-
   return (
     <div className="roll-clock-outer">
       <div className="roll-clock-side-panel">
@@ -113,7 +106,7 @@ export function RollClock({ time, size, dateInfo, period, is24Hour, onToggleForm
             borderRadius: `${buttonSize / 2}px`,
             marginLeft: '8px',
           }}
-          onClick={toggleDirection}
+          onClick={onToggleDirection}
         >
           <span
             className="roll-clock-button-text"