From 9dae4a363e1dd451dfde7127a3ab28b156e49c37 Mon Sep 17 00:00:00 2001
From: ysm <cleverysm@163.com>
Date: Fri, 27 Mar 2026 14:45:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=96=B9=E5=90=91=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E4=BF=9D=E5=AD=98=E5=88=B0=E6=9C=AC=E5=9C=B0=E5=AD=98?=
 =?UTF-8?q?=E5=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx                  | 14 +++++++++++++-
 src/components/RollClock.tsx | 15 ++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 061dfa3..15221fc 100644
--- a/src/App.tsx
+++ b/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 (
diff --git a/src/components/RollClock.tsx b/src/components/RollClock.tsx
index 825503c..ec16f23 100644
--- a/src/components/RollClock.tsx
+++ b/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"