feat(components): 添加时间戳和日期时间转换功能

- 实现了时间戳实时显示组件，支持毫秒/秒单位切换和自动更新
- 添加了日期时间转时间戳转换器，支持多种时区选择和单位转换
- 实现了时间戳转日期时间转换器，支持毫秒/秒单位和时区转换
- 为App.css添加了响应式样式和时间戳组件相关样式
- 为时间戳和转换组件添加了错误处理和输入验证功能
- 实现在index.css中重置标题样式以保持一致性

src/App.css

@@ -3,8 +3,10 @@
     margin: 0 auto;
     padding: 20px;
     font-family: Arial, sans-serif;
-    width: 350px;
+    width: 100%;
+    min-width: 320px;
     height: 100vh;
+    box-sizing: border-box;
 }
 
 .nav {
@@ -132,3 +134,361 @@ select {
     box-sizing: border-box;
     font-size: 14px;
 }
+
+/* 时间戳组件样式 */
+.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);
+    margin: 20px 0;
+}
+
+.timestamp-title {
+    color: #2c3e50;
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    text-align: center;
+    font-weight: 600;
+}
+
+.timestamp-display {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 横向居中 */
+    gap: 10px;
+    margin-bottom: 25px;
+    padding: 15px;
+    background: white;
+    border-radius: 6px;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-height: 80px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
+.timestamp-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #3498db;
+    font-family: 'Courier New', monospace;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.timestamp-unit {
+    font-size: 1.2rem;
+    color: #7f8c8d;
+    font-weight: 500;
+}
+
+.timestamp-controls {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.timestamp-btn {
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border: none;
+    cursor: pointer;
+    font-size: 0.95rem;
+    min-width: 120px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+/* 确保 CopyButton 也使用相同的样式 */
+.timestamp-controls .action-btn,
+.timestamp-controls .stop-btn {
+    min-width: 120px;
+    height: 44px;
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.timestamp-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.timestamp-btn:active {
+    transform: translateY(0);
+}
+
+.timestamp-status {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 6px;
+    font-size: 0.9rem;
+    border: 1px solid #e0e0e0;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+}
+
+.status-indicator.running {
+    color: #27ae60;
+}
+
+.status-indicator.stopped {
+    color: #e74c3c;
+}
+
+.unit-indicator {
+    color: #7f8c8d;
+    font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+    .timestamp-container {
+        padding: 15px;
+    }
+
+    .timestamp-display {
+        padding: 12px;
+        min-height: 70px;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 横向居中 */
+    }
+
+    .timestamp-value {
+        font-size: 1.8rem;
+        line-height: 1.1;
+    }
+
+    .timestamp-unit {
+        font-size: 1rem;
+        flex-shrink: 0;
+    }
+
+    .timestamp-controls {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .timestamp-btn,
+    .timestamp-controls .action-btn,
+    .timestamp-controls .stop-btn {
+        width: 100%;
+        max-width: 200px;
+        min-width: auto;
+        height: 44px;
+    }
+
+    .timestamp-status {
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
+    }
+}
+
+/* 超小屏幕适配 */
+@media (max-width: 360px) {
+    .timestamp-value {
+        font-size: 1.5rem;
+    }
+
+    .timestamp-display {
+        padding: 10px;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 横向居中 */
+    }
+}
+
+/* 日期时间转换器样式 */
+.datetime-converter {
+    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);
+    margin: 20px 0;
+}
+
+.converter-title {
+    color: #2c3e50;
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    text-align: center;
+    font-weight: 600;
+}
+
+.converter-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.input-group,
+.result-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.datetime-input,
+.result-input {
+    flex: 1;
+    padding: 10px 14px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    font-family: 'Courier New', monospace;
+    background: white;
+    transition: border-color 0.2s ease;
+    width: auto !important;
+    margin-bottom: 0 !important;
+}
+
+.datetime-input:focus,
+.result-input:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.timezone-select,
+.unit-select {
+    padding: 10px 14px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    background: white;
+    min-width: 180px;
+    cursor: pointer;
+    transition: border-color 0.2s ease;
+    width: auto !important;
+    margin-bottom: 0 !important;
+}
+
+.timezone-select:focus,
+.unit-select:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.action-group {
+    display: flex;
+    justify-content: center;
+}
+
+.converter-btn {
+    padding: 10px 24px;
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 1rem;
+    min-width: 120px;
+}
+
+.error-message {
+    padding: 10px 14px;
+    background: #ffeaea;
+    border: 1px solid #ffcccc;
+    border-radius: 6px;
+    color: #d32f2f;
+    font-size: 0.9rem;
+    text-align: center;
+    animation: fadeIn 0.3s ease;
+}
+
+.result-info {
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+    font-size: 0.95rem;
+    text-align: center;
+}
+
+.result-label {
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.result-value {
+    font-family: 'Courier New', monospace;
+    font-weight: 700;
+    color: #3498db;
+    margin: 0 4px;
+}
+
+.result-unit {
+    color: #7f8c8d;
+    font-weight: 500;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .input-group,
+    .result-group {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .timezone-select,
+    .unit-select {
+        min-width: auto;
+        width: 100% !important;
+    }
+
+    .datetime-converter {
+        padding: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .converter-title {
+        font-size: 1.3rem;
+    }
+
+    .datetime-input,
+    .result-input,
+    .timezone-select,
+    .unit-select {
+        padding: 8px 12px;
+        font-size: 0.9rem;
+    }
+
+    .converter-btn {
+        padding: 10px 20px;
+        font-size: 0.95rem;
+    }
+}

src/components/DatetimeToTimestamp.js

@@ -1,63 +1,198 @@
 import {formatWithDate, formatWithZone, TimezoneOptions} from "../utils/timeUtils";
-import {useMemo, useState} from "react";
+import {useState, useCallback} from "react";
+
+/**
+ * 日期时间转时间戳组件
+ *
+ * 功能特性：
+ * 1. 将日期时间字符串转换为时间戳
+ * 2. 支持多种时区选择
+ * 3. 支持毫秒和秒单位切换
+ * 4. 提供输入验证和错误提示
+ * 5. 实时单位转换
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <DatetimeToTimestamp />
+ * ```
+ *
+ * @returns {JSX.Element} 日期时间转时间戳组件
+ */
+
+// 常用时区列表
+const TIME_ZONE_LIST = [
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Anchorage',
+  'America/Honolulu',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Berlin',
+  'Europe/Moscow',
+  'Asia/Tokyo',
+  'Asia/Shanghai',
+  'Asia/Hong_Kong',
+  'Asia/Singapore',
+  'Asia/Dubai',
+  'Asia/Kolkata',
+  'Australia/Sydney',
+  'Pacific/Auckland',
+];
+
+// 时间戳单位选项
+const TIMESTAMP_UNITS = [
+  {value: 'milliseconds', label: '毫秒(ms)'},
+  {value: 'seconds', label: '秒(s)'},
+];
 
 export function DatetimeToTimestamp() {
+  /** @type {[string, function]} 输入的日期时间字符串 */
   const [dateValue, setDateValue] = useState(() => formatWithZone(Date.now()));
+  
+  /** @type {[string, function]} 选择的时区 */
   const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
+  
+  /** @type {[string, function]} 转换结果 */
   const [result, setResult] = useState('');
+  
+  /** @type {[string, function]} 时间戳单位 ('milliseconds' | 'seconds') */
   const [unit, setUnit] = useState('milliseconds');
-  const timeZoneList = useMemo(() => ['America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'America/Anchorage', 'America/Honolulu', 'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Moscow', 'Asia/Tokyo', 'Asia/Shanghai', 'Asia/Hong_Kong', 'Asia/Singapore', 'Asia/Dubai', 'Asia/Kolkata', 'Australia/Sydney', 'Pacific/Auckland',], []);
   
-  const handleConvertDatetimeToTimestamp = () => {
+  /** @type {[string, function]} 错误信息 */
-    const timestamp = unit === 'milliseconds' ? formatWithDate(dateValue, selectedZone) : Math.floor(formatWithDate(dateValue, selectedZone) / 1000);
+  const [error, setError] = useState('');
-    setResult(timestamp);
-  };
   
-  return (<div>
+  /**
-    <h2>日期时间转时间戳</h2>
+   * 转换日期时间为时间戳
-    <div>
+   * @type {function(): void}
-      <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
+   */
-        <input
+  const handleConvertDatetimeToTimestamp = useCallback(() => {
-          type="text"
+    try {
-          placeholder="输入日期时间"
+      setError('');
-          value={dateValue}
+      const timestamp = formatWithDate(dateValue, selectedZone);
-          style={{minWidth: '200px'}}
-          onChange={(e) => setDateValue(e.target.value)}/>
-        <select
-          value={selectedZone}
-          onChange={(e) => setSelectedZone(e.target.value)}
-        >
-          <TimezoneOptions zones={timeZoneList}/>
-        </select>
-      </div>
       
-      <div style={{marginBottom: '20px'}}>
+      if (isNaN(timestamp)) {
-        <button
+        setError('无效的日期时间格式');
-          className={'action-btn'}
+        setResult('');
-          onClick={handleConvertDatetimeToTimestamp}
+        return;
-        >
+      }
-          转换
+      
-        </button>
+      const finalResult = unit === 'milliseconds'
-      </div>
+        ? timestamp
+        : Math.floor(timestamp / 1000);
+      
+      setResult(finalResult.toString());
+    } catch (err) {
+      setError('转换失败，请检查输入格式');
+      setResult('');
+    }
+  }, [dateValue, selectedZone, unit]);
+  
+  /**
+   * 处理日期时间输入变化
+   * @type {function(React.ChangeEvent<HTMLInputElement>): void}
+   */
+  const handleDateChange = useCallback((e) => {
+    setDateValue(e.target.value);
+    setError(''); // 清除错误信息
+  }, []);
+  
+  /**
+   * 处理时区选择变化
+   * @type {function(React.ChangeEvent<HTMLSelectElement>): void}
+   */
+  const handleZoneChange = useCallback((e) => {
+    setSelectedZone(e.target.value);
+  }, []);
+  
+  /**
+   * 处理时间戳单位变化
+   * @type {function(React.ChangeEvent<HTMLSelectElement>): void}
+   */
+  const handleUnitChange = useCallback((e) => {
+    const newUnit = e.target.value;
+    setUnit(newUnit);
+    
+    // 如果已有结果，重新计算
+    if (result) {
+      const currentResult = parseInt(result, 10);
+      if (!isNaN(currentResult)) {
+        const newResult = newUnit === 'milliseconds'
+          ? currentResult * 1000
+          : Math.floor(currentResult / 1000);
+        setResult(newResult.toString());
+      }
+    }
+  }, [result]);
+  
+  return (
+    <div className="datetime-converter">
+      <h2 className="converter-title">日期时间转时间戳</h2>
+      
+      <div className="converter-form">
+        <div className="input-group">
+          <input
+            type="text"
+            placeholder="输入日期时间 (如: 2024-01-01 12:00:00)"
+            value={dateValue}
+            className="datetime-input"
+            onChange={handleDateChange}
+            aria-label="输入要转换的日期时间"
+            title="支持格式: YYYY-MM-DD HH:mm:ss"
+          />
+          <select
+            value={selectedZone}
+            className="timezone-select"
+            onChange={handleZoneChange}
+            aria-label="选择时区"
+          >
+            <TimezoneOptions zones={TIME_ZONE_LIST}/>
+          </select>
+        </div>
+        
+        {error && (
+          <div className="error-message" role="alert">
+            ⚠️ {error}
+          </div>
+        )}
+        
+        <div className="action-group">
+          <button
+            className="converter-btn action-btn"
+            onClick={handleConvertDatetimeToTimestamp}
+            aria-label="转换日期时间为时间戳"
+          >
+            转换
+          </button>
+        </div>
+        
+        <div className="result-group">
+          <input
+            type="text"
+            placeholder="转换结果"
+            value={result}
+            className="result-input"
+            readOnly
+            aria-label="转换结果"
+          />
+          <select
+            value={unit}
+            className="unit-select"
+            onChange={handleUnitChange}
+            aria-label="选择时间戳单位"
+          >
+            {TIMESTAMP_UNITS.map(({value, label}) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
       
-      <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
-        <input
-          type="text"
-          placeholder="转换结果"
-          value={result}
-          style={{minWidth: '200px'}}
-          readOnly
-        />
-        <select
-          value={unit}
-          aria-label='选择时间戳单位'
-          onChange={(e) => setUnit(e.target.value)}
-        >
-          <option value="milliseconds">毫秒(ms)</option>
-          <option value="seconds">秒(s)</option>
-        </select>
       </div>
     </div>
-  </div>);
+  );
   
 }

src/components/TimestampExecution.js

@@ -1,45 +1,147 @@
-import {useEffect, useState} from "react";
+import {useEffect, useState, useRef, useCallback} from "react";
 import CopyButton from "./CopyButton";
 
+/**
+ * 时间戳显示和执行组件
+ *
+ * 功能特性：
+ * 1. 实时显示当前时间戳（毫秒/秒）
+ * 2. 支持毫秒和秒单位切换
+ * 3. 支持启动/停止时间戳自动更新
+ * 4. 提供复制时间戳功能
+ * 5. 响应式设计和良好的可访问性
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <TimestampExecution />
+ * ```
+ *
+ * @returns {JSX.Element} 时间戳组件
+ */
 export function TimestampExecution() {
-  const [currentTimestamp, setCurrentTimestamp] = useState(Math.floor(Date.now()));
+  /** @type {[number, function]} 当前时间戳（毫秒）和更新函数 */
-  const [showMilliseconds, setShowMilliseconds] = useState(true);
+  const [currentTimestamp, setCurrentTimestamp] = useState(() => Math.floor(Date.now()));
-  const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
-  // 定时更新时间戳
-  useEffect(() => {
-    const timerId = isRunningTimestamp ? setInterval(() => {
-      setCurrentTimestamp(Math.floor(Date.now()));
-    }, showMilliseconds ? 100 : 1000) : null;
   
-    return () => clearInterval(timerId);
+  /** @type {[boolean, function]} 是否显示毫秒（true=毫秒，false=秒） */
+  const [showMilliseconds, setShowMilliseconds] = useState(true);
+  
+  /** @type {[boolean, function]} 时间戳是否正在自动更新 */
+  const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
+  
+  /** @type {React.MutableRefObject<NodeJS.Timeout|null>} 定时器引用，用于清理 */
+  const timerRef = useRef(null);
+  
+  /**
+   * 计算显示的时间戳值
+   * @type {number}
+   */
+  const displayTimestamp = showMilliseconds
+    ? currentTimestamp
+    : Math.floor(currentTimestamp / 1000);
+  
+  /**
+   * 计算单位文本
+   * @type {string}
+   */
+  const unitText = showMilliseconds ? '毫秒' : '秒';
+  
+  /**
+   * 定时更新时间戳的副作用
+   * 根据 isRunningTimestamp 和 showMilliseconds 控制定时器的启停和间隔
+   */
+  useEffect(() => {
+    // 清除之前的定时器
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    
+    // 如果需要运行，创建新的定时器
+    if (isRunningTimestamp) {
+      const interval = showMilliseconds ? 100 : 1000;
+      timerRef.current = setInterval(() => {
+        setCurrentTimestamp(Math.floor(Date.now()));
+      }, interval);
+    }
+    
+    // 清理函数
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
   }, [isRunningTimestamp, showMilliseconds]);
   
-  const toggleUnit = () => setShowMilliseconds(prev => !prev);
+  /**
-  const toggleTimestamp = () => setIsRunningTimestamp(prev => !prev);
+   * 切换时间戳显示单位（毫秒/秒）
+   * @type {function(): void}
+   */
+  const toggleUnit = useCallback(() => {
+    setShowMilliseconds(prev => !prev);
+  }, []);
   
-  return (<div>
+  /**
-    <h2>当前时间戳</h2>
+   * 切换时间戳自动更新状态（启动/停止）
-    <p>
+   * @type {function(): void}
-      <span>{Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))}</span>
+   */
-      <span>{showMilliseconds ? '毫秒' : '秒'}</span>
+  const toggleTimestamp = useCallback(() => {
-    </p>
+    setIsRunningTimestamp(prev => !prev);
-    <div>
+  }, []);
-      <button type="button"
+  
-              className="action-btn"
+  /**
-              onClick={toggleUnit}
+   * 切换单位按钮的辅助文本
-              aria-label={showMilliseconds ? '切换为秒' : '切换为毫秒'}
+   * @type {string}
-      >
+   */
-        切换单位
+  const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示';
-      </button>
+  
-      <CopyButton text={currentTimestamp.toString()} buttonText='复制'></CopyButton>
+  /**
-      <button
+   * 启动/停止按钮的辅助文本
-        type="button" // 明确指定类型，防止在 Form 中意外触发提交
+   * @type {string}
-        className={`btn ${isRunningTimestamp ? 'stop-btn' : 'action-btn'}`}
+   */
-        onClick={toggleTimestamp}
+  const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新';
-        aria-label={isRunningTimestamp ? '停止时间戳更新' : '开始时间戳更新'}
+  
-      >
+  /**
-        {isRunningTimestamp ? '停止' : '开始'}
+   * 启动/停止按钮的显示文本
-      </button>
+   * @type {string}
+   */
+  const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
+  
+  return (
+    <div className="timestamp-container">
+      <div className="timestamp-display">
+        <span className="timestamp-value">{displayTimestamp}</span>
+        <span className="timestamp-unit">{unitText}</span>
+      </div>
+      
+      <div className="timestamp-controls">
+        <button
+          type="button"
+          className="timestamp-btn action-btn"
+          onClick={toggleUnit}
+          aria-label={unitButtonLabel}
+          title={unitButtonLabel}
+        >
+          切换单位
+        </button>
+        
+        <CopyButton
+          text={currentTimestamp.toString()}
+          buttonText="复制时间戳"
+          aria-label="复制当前时间戳到剪贴板"
+        />
+        
+        <button
+          type="button"
+          className={`timestamp-btn ${isRunningTimestamp ? 'stop-btn' : 'action-btn'}`}
+          onClick={toggleTimestamp}
+          aria-label={toggleButtonLabel}
+          title={toggleButtonLabel}
+        >
+          {toggleButtonText}
+        </button>
+      </div>
     </div>
-  </div>)
+  );
 }

src/components/TimestampToDatetime.js

@@ -1,66 +1,183 @@
-import {useMemo, useState} from "react";
+import {useState, useCallback} from "react";
 import {formatWithZone, TimezoneOptions} from "../utils/timeUtils";
 
+/**
+ * 时间戳转日期时间组件
+ *
+ * 功能特性：
+ * 1. 将时间戳转换为日期时间字符串
+ * 2. 支持多种时区选择
+ * 3. 支持毫秒和秒单位切换
+ * 4. 提供输入验证和错误提示
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <TimestampToDatetime />
+ * ```
+ *
+ * @returns {JSX.Element} 时间戳转日期时间组件
+ */
+
+// 常用时区列表
+const TIME_ZONE_LIST = [
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Anchorage',
+  'America/Honolulu',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Berlin',
+  'Europe/Moscow',
+  'Asia/Tokyo',
+  'Asia/Shanghai',
+  'Asia/Hong_Kong',
+  'Asia/Singapore',
+  'Asia/Dubai',
+  'Asia/Kolkata',
+  'Australia/Sydney',
+  'Pacific/Auckland',
+];
+
+// 时间戳单位选项
+const TIMESTAMP_UNITS = [
+  {value: 'milliseconds', label: '毫秒(ms)'},
+  {value: 'seconds', label: '秒(s)'},
+];
+
 export function TimestampToDatetime() {
+  /** @type {[string, function]} 输入的时间戳值 */
   const [timestampValue, setTimestampValue] = useState(Date.now());
+  
+  /** @type {[string, function]} 转换结果 */
   const [timestampResult, setTimestampResult] = useState('');
+  
+  /** @type {[string, function]} 时间戳单位 ('milliseconds' | 'seconds') */
   const [unit, setUnit] = useState('milliseconds');
+  
+  /** @type {[string, function]} 选择的时区 */
   const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
-  const timeZoneList = useMemo(() => ['America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'America/Anchorage', 'America/Honolulu', 'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Moscow', 'Asia/Tokyo', 'Asia/Shanghai', 'Asia/Hong_Kong', 'Asia/Singapore', 'Asia/Dubai', 'Asia/Kolkata', 'Australia/Sydney', 'Pacific/Auckland',], []);
   
-  function handleConvertTimestampToDate() {
+  /** @type {[string, function]} 错误信息 */
-    if (!timestampValue) {
+  const [error, setError] = useState('');
-      setTimestampResult('请输入时间戳');
+  
-      return;
+  /**
+   * 转换时间戳为日期时间
+   * @type {function(): void}
+   */
+  const handleConvertTimestampToDate = useCallback(() => {
+    try {
+      setError('');
+      
+      if (!timestampValue) {
+        setError('请输入时间戳');
+        setTimestampResult('');
+        return;
+      }
+      
+      const numericValue = Number(timestampValue);
+      if (isNaN(numericValue)) {
+        setError('无效的时间戳格式');
+        setTimestampResult('');
+        return;
+      }
+      
+      const result = formatWithZone(numericValue, selectedZone, unit);
+      setTimestampResult(result);
+    } catch (err) {
+      setError('转换失败，请检查输入格式');
+      setTimestampResult('');
     }
+  }, [timestampValue, selectedZone, unit]);
   
-    const result = formatWithZone(timestampValue, selectedZone, unit);
+  /**
-    setTimestampResult(result);
+   * 处理时间戳输入变化
-  }
+   * @type {function(React.ChangeEvent<HTMLInputElement>): void}
+   */
+  const handleInputChange = useCallback((e) => {
+    setTimestampValue(e.target.value);
+    setError(''); // 清除错误信息
+  }, []);
   
-  const handleInputChange = (e) => setTimestampValue(e.target.value);
+  /**
+   * 处理时区选择变化
+   * @type {function(React.ChangeEvent<HTMLSelectElement>): void}
+   */
+  const handleZoneChange = useCallback((e) => {
+    setSelectedZone(e.target.value);
+  }, []);
+  
+  /**
+   * 处理时间戳单位变化
+   * @type {function(React.ChangeEvent<HTMLSelectElement>): void}
+   */
+  const handleUnitChange = useCallback((e) => {
+    setUnit(e.target.value);
+  }, []);
   
   return (
-    <div>
+    <div className="datetime-converter">
-      <h2>时间戳转日期时间</h2>
+      <h2 className="converter-title">时间戳转日期时间</h2>
-      <div>
+      
-        <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
+      <div className="converter-form">
+        <div className="input-group">
           <input
             type="number"
-            placeholder="请输入时间戳"
+            placeholder="输入时间戳 (如: 1704067200000)"
             value={timestampValue}
+            className="datetime-input"
             onChange={handleInputChange}
-            style={{minWidth: '200px'}}
+            aria-label="输入要转换的时间戳"
+            title="支持毫秒或秒为单位的时间戳"
           />
           <select
             value={unit}
-            aria-label='选择时间戳单位'
+            className="unit-select"
-            onChange={(e) => setUnit(e.target.value)}
+            onChange={handleUnitChange}
+            aria-label="选择时间戳单位"
           >
-            <option value="milliseconds">毫秒(ms)</option>
+            {TIMESTAMP_UNITS.map(({value, label}) => (
-            <option value="seconds">秒(s)</option>
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
           </select>
         </div>
         
-        <div style={{marginBottom: '20px'}}>
+        {error && (
-          <button className={'action-btn'} onClick={handleConvertTimestampToDate}>
+          <div className="error-message" role="alert">
+            ⚠️ {error}
+          </div>
+        )}
+        
+        <div className="action-group">
+          <button
+            className="converter-btn action-btn"
+            onClick={handleConvertTimestampToDate}
+            aria-label="转换时间戳为日期时间"
+          >
             转换
           </button>
         </div>
         
-        <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
+        <div className="result-group">
           <input
             type="text"
             placeholder="转换结果"
             value={timestampResult}
+            className="result-input"
             readOnly
-            style={{minWidth: '200px'}}
+            aria-label="转换结果"
           />
           <select
             value={selectedZone}
-            onChange={(e) => setSelectedZone(e.target.value)}
+            className="timezone-select"
+            onChange={handleZoneChange}
+            aria-label="选择时区"
           >
-            <TimezoneOptions zones={timeZoneList}/>
+            <TimezoneOptions zones={TIME_ZONE_LIST}/>
           </select>
         </div>
       </div>

src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: inherit; /* 先全部重置为继承大小 */
+    font-weight: inherit;
+}