调整时钟显示尺寸和布局

- 统一三种时钟样式的显示宽度为页面90%
- 增大翻页和滚动时钟的显示比例
- 优化响应式尺寸计算
- 调整页面布局使时钟占满宽度

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

src/App.css

@@ -8,8 +8,9 @@
 .app {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   min-height: 100vh;
+  width: 100%;
   padding-top: 40px;
   box-sizing: border-box;
 }
@@ -25,6 +26,7 @@
   z-index: 10;
   flex-shrink: 0;
   margin-bottom: 60px;
+  align-self: center;
 }
 
 .clock-container {
@@ -33,14 +35,12 @@
   align-items: center;
   flex: 1;
   width: 100%;
-  padding: 0 20px;
   box-sizing: border-box;
 }
 
 /* Digital clock style (default) */
 .digital-clock {
   font-family: 'DSEG7', monospace;
-  font-size: clamp(48px, 15vw, 180px);
   font-weight: bold;
   color: #fff;
   text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
@@ -72,10 +72,6 @@
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .digital-clock {
-    font-size: 12vw;
-  }
-
   .style-selector {
     gap: 8px;
   }

src/App.tsx

@@ -5,9 +5,20 @@ import './App.css'
 
 type ClockStyle = 'digital' | 'flip' | 'roll'
 
-function DigitalClock({ time }: { time: string }) {
+function DigitalClock({ time, size }: { time: string; size: number }) {
+  // Match width with flip/roll clocks
+  // Total flip/roll width ≈ 5.1 * (size / 1.6) because size is now scaled
+  // Actually size passed in is already the final size
+  // Flip: 6 * (size * 0.75) + 2 * (size * 0.3) = 4.5 * size + 0.6 * size = 5.1 * size
+  // Digital: 8 chars, each char ≈ fontSize * 0.6 wide in monospace = 4.8 * fontSize
+  // To match: 4.8 * fontSize = 5.1 * size => fontSize = size * 1.06
+  const fontSize = Math.floor(size * 1.06)
+
   return (
-    <div className="digital-clock">
+    <div
+      className="digital-clock"
+      style={{ fontSize: `${fontSize}px` }}
+    >
       {time}
     </div>
   )
@@ -25,19 +36,14 @@ function App() {
     return () => clearInterval(timer)
   }, [])
 
-  // Responsive clock size
+  // Responsive clock size - target 90% of page width
   useEffect(() => {
     const updateSize = () => {
       const width = window.innerWidth
-      if (width < 480) {
+      // Direct calculation: target 90% width
-        setClockSize(Math.floor(width / 8))
+      const baseSize = (width * 0.9) / 5.1
-      } else if (width < 768) {
+      const newSize = Math.floor(baseSize * 2.0) // Scale up more
-        setClockSize(Math.floor(width / 7))
+      setClockSize(Math.min(newSize, 320))
-      } else if (width < 1024) {
-        setClockSize(100)
-      } else {
-        setClockSize(120)
-      }
     }
     updateSize()
     window.addEventListener('resize', updateSize)
@@ -54,7 +60,7 @@ function App() {
         return <RollClock time={timeString} size={clockSize} />
       case 'digital':
       default:
-        return <DigitalClock time={timeString} />
+        return <DigitalClock time={timeString} size={clockSize} />
     }
   }
 

src/index.css

@@ -51,11 +51,9 @@
 }
 
 #root {
-  width: 1126px;
+  width: 100%;
-  max-width: 100%;
   margin: 0 auto;
   text-align: center;
-  border-inline: 1px solid var(--border);
   min-height: 100svh;
   display: flex;
   flex-direction: column;