refactor:优化时间戳工具，优化CopyButton

entrypoints/popup/components/DatetimeToTimestamp.tsx

@@ -1,26 +1,19 @@
 import { useState, useCallback } from 'react';
 import dayjs from '@/utils/dayjs';
+import {
+  Button,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Paper,
+  Typography,
+  Stack,
+  Box,
+  SelectChangeEvent,
+} from '@mui/material';
 
-/**
- * 日期时间转时间戳组件
- *
- * 功能特性：
- * 1. 将日期时间字符串转换为时间戳
- * 2. 支持多种时区选择
- * 3. 支持毫秒和秒单位切换
- * 4. 提供输入验证和错误提示
- * 5. 实时单位转换
- *
- * @component
- * @example
- * ```jsx
- * <DatetimeToTimestamp />
- * ```
- *
- * @returns {JSX.Element} 日期时间转时间戳组件
- */
-
-// 常用时区列表
 const TIME_ZONE_LIST = [
   'America/New_York',
   'America/Chicago',
@@ -42,48 +35,32 @@ const TIME_ZONE_LIST = [
   'Pacific/Auckland',
 ];
 
-// 时间戳单位选项
 const TIMESTAMP_UNITS = [
-  { value: 'milliseconds', label: '毫秒(ms)' },
-  { value: 'seconds', label: '秒(s)' },
+  { value: 'milliseconds', label: '毫秒 (ms)' },
+  { value: 'seconds', label: '秒 (s)' },
 ];
 
 export function DatetimeToTimestamp() {
   const [dateValue, setDateValue] = useState(() => dayjs().format('YYYY/MM/DD HH:mm:ss'));
-
   const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
-
   const [result, setResult] = useState('');
-
   const [unit, setUnit] = useState('milliseconds');
-
   const [error, setError] = useState('');
 
   const performConversion = useCallback(
     (currentDate: string, zone: string, currentUnit: string) => {
-      try {
-        if (!currentDate) {
-          setError('请输入有效的日期时间');
-          return '';
-        }
-
-        const timestamp = dayjs.tz(currentDate, zone);
-
-        if (!timestamp.isValid()) {
-          setError('无效的日期时间格式');
-          return '';
-        }
-
-        setError('');
-
-        const ms = timestamp.valueOf();
-        return currentUnit === TIMESTAMP_UNITS[0].value
-          ? ms.toString()
-          : Math.floor(ms / 1000).toString();
-      } catch (err) {
-        console.error('转换错误:', err);
+      if (!currentDate) {
+        setError('请输入有效的日期时间');
         return '';
       }
+      const timestamp = dayjs.tz(currentDate, zone);
+      if (!timestamp.isValid()) {
+        setError('无效的日期时间格式');
+        return '';
+      }
+      setError('');
+      const ms = timestamp.valueOf();
+      return currentUnit === 'milliseconds' ? ms.toString() : Math.floor(ms / 1000).toString();
     },
     [],
   );
@@ -93,15 +70,10 @@ export function DatetimeToTimestamp() {
     setResult(newResult);
   }, [dateValue, selectedZone, unit, performConversion]);
 
-  /**
-   * 处理时间戳单位变化
-   */
   const handleUnitChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
+    (e: SelectChangeEvent<string>) => {
       const newUnit = e.target.value;
       setUnit(newUnit);
-
-      // 如果已有结果，重新计算
       if (result) {
         setResult(performConversion(dateValue, selectedZone, newUnit) || '');
       }
@@ -109,77 +81,79 @@ export function DatetimeToTimestamp() {
     [dateValue, selectedZone, result, performConversion],
   );
 
-  return (
-    <div className="datetime-converter">
-      <h2 className="converter-title">日期时间转时间戳</h2>
+  const handleZoneChange = useCallback((e: SelectChangeEvent<string>) => {
+    setSelectedZone(e.target.value);
+  }, []);
 
-      <div className="converter-form">
-        <div className="input-group">
-          <input
-            type="text"
-            placeholder="输入日期时间 (如: 2024-01-01 12:00:00)"
+  return (
+    <Paper elevation={3} sx={{ p: 2, my: 2, borderRadius: 2 }}>
+      <Typography variant="h6" component="h2" align="center" gutterBottom>
+        日期时间转时间戳
+      </Typography>
+      <Stack spacing={2} sx={{ mt: 2 }}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <TextField
+            label="输入日期时间"
             value={dateValue}
-            className="datetime-input"
             onChange={(e) => {
               setDateValue(e.target.value);
               if (error) setError('');
             }}
-            aria-label="输入要转换的日期时间"
-            title="支持格式: YYYY-MM-DD HH:mm:ss"
+            error={!!error}
+            helperText={error || '格式: YYYY/MM/DD HH:mm:ss'}
+            fullWidth
+            variant="outlined"
           />
-          <select
-            value={selectedZone}
-            className="timezone-select"
-            onChange={(e) => setSelectedZone(e.target.value)}
-            aria-label="选择时区"
-          >
-            {TIME_ZONE_LIST.map((zone) => (
-              <option key={zone} value={zone}>
-                {zone}
-              </option>
-            ))}
-          </select>
-        </div>
+          <FormControl fullWidth>
+            <InputLabel>时区</InputLabel>
+            <Select
+              value={selectedZone}
+              label="时区"
+              onChange={handleZoneChange}
+              MenuProps={{ disableScrollLock: true }}
+            >
+              {TIME_ZONE_LIST.map((zone) => (
+                <MenuItem key={zone} value={zone}>
+                  {zone}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Stack>
 
-        {error && (
-          <div className="error-message" role="alert">
-            ⚠️ {error}
-          </div>
-        )}
-
-        <div className="action-group">
-          <button
-            className="converter-btn action-btn"
-            onClick={handleConvert}
-            aria-label="转换日期时间为时间戳"
-          >
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Button variant="contained" size="medium" color="primary" onClick={handleConvert}>
             转换
-          </button>
-        </div>
+          </Button>
+        </Box>
 
-        <div className="result-group">
-          <input
-            type="text"
-            placeholder="转换结果"
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <TextField
+            label="转换结果"
             value={result}
-            className="result-input"
-            readOnly
-            aria-label="转换结果"
+            fullWidth
+            variant="outlined"
+            InputProps={{
+              readOnly: true,
+            }}
           />
-          <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>
-    </div>
+          <FormControl fullWidth>
+            <InputLabel>单位</InputLabel>
+            <Select
+              value={unit}
+              label="单位"
+              onChange={handleUnitChange}
+              MenuProps={{ disableScrollLock: true }}
+            >
+              {TIMESTAMP_UNITS.map(({ value, label }) => (
+                <MenuItem key={value} value={value}>
+                  {label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Stack>
+      </Stack>
+    </Paper>
   );
 }