From ec06bdc29fa18e741217185faf253d11918154ac Mon Sep 17 00:00:00 2001
From: ysm <cleverysm@163.com>
Date: Mon, 23 Mar 2026 21:44:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=97=B6=E9=92=9F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将样式选择器移到页面顶部
- 添加响应式时钟尺寸，根据浏览器宽度自适应
- 修复样式选择器与时钟数字的重叠问题
- 优化 CSS 布局结构

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md   |  6 ++++++
 src/App.css | 44 ++++++++++++++++++++++++++------------------
 src/App.tsx | 32 ++++++++++++++++++++++++++------
 3 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 3b5d09c..58c2241 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -5,6 +5,7 @@
 ## 项目概述
 
 一个精简的 React + TypeScript + Vite 入门项目。
+主要功能是在页面上显示数码风格的时钟。
 
 - **Node 版本**: v24.14.0（在 `.nvmrc` 中指定）
 - **包管理器**: npm
@@ -66,3 +67,8 @@ src/
 ## 构建输出
 
 生产构建输出到 `dist/` 目录（ESLint 会忽略该目录）。
+
+## 本地存储
+
+本地存储使用localStorage，用于保存用户设置。
+
diff --git a/src/App.css b/src/App.css
index 5c3d557..2946455 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,25 +9,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   min-height: 100vh;
-  gap: 40px;
-}
-
-.clock-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Digital clock style (default) */
-.digital-clock {
-  font-family: 'DSEG7', monospace;
-  font-size: 15vw;
-  font-weight: bold;
-  color: #fff;
-  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
-  letter-spacing: 0.1em;
+  padding-top: 40px;
+  box-sizing: border-box;
 }
 
 /* Style selector */
@@ -38,6 +22,30 @@
   padding: 8px;
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 12px;
+  z-index: 10;
+  flex-shrink: 0;
+  margin-bottom: 60px;
+}
+
+.clock-container {
+  display: flex;
+  justify-content: center;
+  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);
+  letter-spacing: 0.05em;
+  white-space: nowrap;
 }
 
 .style-button {
diff --git a/src/App.tsx b/src/App.tsx
index d0f9310..3c1b4be 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ function DigitalClock({ time }: { time: string }) {
 function App() {
   const [time, setTime] = useState(new Date())
   const [clockStyle, setClockStyle] = useState<ClockStyle>('digital')
+  const [clockSize, setClockSize] = useState(120)
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -24,14 +25,33 @@ function App() {
     return () => clearInterval(timer)
   }, [])
 
+  // Responsive clock size
+  useEffect(() => {
+    const updateSize = () => {
+      const width = window.innerWidth
+      if (width < 480) {
+        setClockSize(Math.floor(width / 8))
+      } else if (width < 768) {
+        setClockSize(Math.floor(width / 7))
+      } else if (width < 1024) {
+        setClockSize(100)
+      } else {
+        setClockSize(120)
+      }
+    }
+    updateSize()
+    window.addEventListener('resize', updateSize)
+    return () => window.removeEventListener('resize', updateSize)
+  }, [])
+
   const timeString = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}:${String(time.getSeconds()).padStart(2, '0')}`
 
   const renderClock = () => {
     switch (clockStyle) {
       case 'flip':
-        return <FlipClock time={timeString} size={120} />
+        return <FlipClock time={timeString} size={clockSize} />
       case 'roll':
-        return <RollClock time={timeString} size={120} />
+        return <RollClock time={timeString} size={clockSize} />
       case 'digital':
       default:
         return <DigitalClock time={timeString} />
@@ -40,10 +60,6 @@ function App() {
 
   return (
     <div className="app">
-      <div className="clock-container">
-        {renderClock()}
-      </div>
-
       <div className="style-selector">
         <button
           className={`style-button ${clockStyle === 'digital' ? 'active' : ''}`}
@@ -64,6 +80,10 @@ function App() {
           滚动
         </button>
       </div>
+
+      <div className="clock-container">
+        {renderClock()}
+      </div>
     </div>
   )
 }