refactor: 统一扩展消息机制并优化组件结构

1、统一消息系统：将 background、content 和 popup 的通信方式从原生的 chrome.runtime 迁移至 @webext-core/messaging，修复了消息回调返回 undefined 的问题。 2、优化组件结构：将通用组件从 entrypoints/popup/components 迁移至根目录 components，并使用 MUI 重构了 Navbar。 3、同步更新：调整了录制工具 (useRecorder) 和各页面组件（RecordeReplayPage, TestPage等），以适配新的消息协议和组件路径。
2026-02-13 20:38:15 +08:00
parent 22985f4c18
commit 50034331bc
16 changed files with 252 additions and 271 deletions
@@ -0,0 +1,155 @@
+import { useState, useCallback } from 'react';
+import dayjs from '@/utils/dayjs';
+import {
+  Button,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Paper,
+  Stack,
+  Box,
+  SelectChangeEvent,
+} from '@mui/material';
+
+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() {
+  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) => {
+      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();
+    },
+    [],
+  );
+
+  const handleConvert = useCallback(() => {
+    const newResult = performConversion(dateValue, selectedZone, unit);
+    setResult(newResult);
+  }, [dateValue, selectedZone, unit, performConversion]);
+
+  const handleUnitChange = useCallback(
+    (e: SelectChangeEvent<string>) => {
+      const newUnit = e.target.value;
+      setUnit(newUnit);
+      if (result) {
+        setResult(performConversion(dateValue, selectedZone, newUnit) || '');
+      }
+    },
+    [dateValue, selectedZone, result, performConversion],
+  );
+
+  const handleZoneChange = useCallback((e: SelectChangeEvent<string>) => {
+    setSelectedZone(e.target.value);
+  }, []);
+
+  return (
+    <Paper elevation={3} sx={{ p: 2, my: 2, borderRadius: 2 }}>
+      <Stack spacing={2} sx={{ mt: 2 }}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <TextField
+            label="输入日期时间"
+            value={dateValue}
+            onChange={(e) => {
+              setDateValue(e.target.value);
+              if (error) setError('');
+            }}
+            error={!!error}
+            helperText={error || '格式: YYYY/MM/DD HH:mm:ss'}
+            fullWidth
+            variant="outlined"
+          />
+          <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>
+
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Button variant="contained" size="medium" color="primary" onClick={handleConvert}>
+            转换
+          </Button>
+        </Box>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <TextField
+            label="转换结果"
+            value={result}
+            fullWidth
+            variant="outlined"
+            InputProps={{
+              readOnly: true,
+            }}
+          />
+          <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>
+  );
+}