From f6432dc4c4b84acce620b6918fa986a10b057456 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Tue, 20 Jan 2026 00:06:01 +0800
Subject: [PATCH] Standardizes UI with CSS variables and refactors styles

Introduces CSS custom properties for unified colors, border, and radius,
simplifying style management and improving maintainability. Refactors
timestamp and datetime converter styles to use these variables for
consistency. Enhances visual feedback with hover effects and minor
typography adjustments. Updates a timer ref type annotation for clarity
and adds a container class for better structure.
---
 src/App.css                          | 59 +++++++++++++++++-----------
 src/components/TimestampExecution.js |  2 +-
 src/pages/TimestampPage.js           |  2 +-
 3 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/App.css b/src/App.css
index 019040d..78a8be4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,6 +11,20 @@ body {
     overflow: auto;
 }
 
+:root {
+    /* 统一圆角变量 */
+    --radius: 8px;
+    /* 统一背景颜色变量 */
+    --bg-color: #fafafa;
+    /* 统一文字颜色变量 */
+    --text-color: #333333;
+    /* 统一按钮颜色变量 */
+    --btn-bg: #e0e0e0;
+    /* 统一按钮文字颜色变量 */
+    --btn-text: #333333;
+    --border: 1px solid #e0e0e0;
+}
+
 .app {
     max-width: 800px;
     margin: 0 auto;
@@ -620,32 +634,25 @@ select {
 /* 时间戳组件样式 */
 .timestamp-container {
     padding: 20px;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border: var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-color);
     margin: 20px 0;
 }
 
-.timestamp-title {
-    color: #2c3e50;
-    font-size: 1.5rem;
-    margin-bottom: 20px;
-    text-align: center;
-    font-weight: 600;
+.timestamp-container:hover {
+    box-shadow: 4px 4px 12px 8px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
 }
 
+/* 时间戳显示区域 */
 .timestamp-display {
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 横向居中 */
     gap: 10px;
     margin-bottom: 25px;
-    padding: 15px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-    min-height: 80px;
+    border-radius: var(--radius);
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
@@ -653,8 +660,8 @@ select {
 
 .timestamp-value {
     font-size: 2.5rem;
-    font-weight: 700;
-    color: #3498db;
+    font-weight: 600;
+    color: var(--text-color);
     font-family: 'Courier New', monospace;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
     white-space: nowrap;
@@ -662,16 +669,15 @@ select {
 }
 
 .timestamp-unit {
-    font-size: 1.2rem;
-    color: #7f8c8d;
-    font-weight: 500;
+    font-size: 1rem;
+    color: var(--text-color);
+    font-weight: 400;
 }
 
 .timestamp-controls {
     display: flex;
     gap: 12px;
     justify-content: center;
-    margin-bottom: 20px;
     flex-wrap: wrap;
 }
 
@@ -842,13 +848,18 @@ select {
 /* 日期时间转换器样式 */
 .datetime-converter {
     padding: 20px;
-    border: 1px solid #e0e0e0;
+    border: var(--border);
     border-radius: 8px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background: var(--bg-color);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     margin: 20px 0;
 }
 
+.datetime-converter:hover {
+    box-shadow: 4px 4px 12px 8px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+}
+
 .converter-title {
     color: #2c3e50;
     font-size: 1.5rem;
@@ -877,7 +888,7 @@ select {
     border: 1px solid #ddd;
     border-radius: 8px;
     font-size: 0.95rem;
-    font-family: 'Courier New', monospace;
+    font-weight: 400;
     background: white;
     transition: border-color 0.2s ease;
     width: auto !important;
diff --git a/src/components/TimestampExecution.js b/src/components/TimestampExecution.js
index 3b8e26e..7018b78 100644
--- a/src/components/TimestampExecution.js
+++ b/src/components/TimestampExecution.js
@@ -29,7 +29,7 @@ export function TimestampExecution() {
   /** @type {[boolean, function]} 时间戳是否正在自动更新 */
   const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
   
-  /** @type {React.MutableRefObject<NodeJS.Timeout|null>} 定时器引用，用于清理 */
+  /** @type {React.RefObject<NodeJS.Timeout | null>} 定时器引用，用于清理 */
   const timerRef = useRef(null);
   
   /**
diff --git a/src/pages/TimestampPage.js b/src/pages/TimestampPage.js
index 5577dac..97eef1e 100644
--- a/src/pages/TimestampPage.js
+++ b/src/pages/TimestampPage.js
@@ -5,7 +5,7 @@ import {TimestampExecution} from "../components/TimestampExecution";
 
 const TimestampPage = () => {
   
-  return (<div>
+  return (<div className="timestamp-utils">
     <TimestampExecution/>
     <TimestampToDatetime/>
     <DatetimeToTimestamp/>