feat: comprehensive UI/UX refactor for TimestampPage with performance optimizations

GEMINI.md

@@ -0,0 +1,72 @@
+# Testing Tools 项目指南
+
+本文件为 Gemini CLI 提供关于 **Testing Tools** 浏览器扩展项目的架构说明、开发规范和技术上下文。
+
+## 1. 项目概览
+
+- **名称**: Testing Tools
+- **核心框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
+- **前端技术栈**: React 19 (Functional Components + Hooks) + TypeScript
+- **UI 组件库**: Material UI (MUI) 7.x (深度定制 `sx` 属性)
+- **日期处理**: dayjs (配合 timezone 和 utc 插件)
+- **主要功能**: 提供时间戳转换、日期格式化等开发辅助工具。
+
+## 2. 项目结构
+
+```text
+├── .github/              # CI/CD 工作流
+├── .husky/               # Git Hooks (pre-commit linting)
+├── assets/               # 静态资源 (SVG 等)
+├── components/           # 复用 UI 组件
+├── entrypoints/          # 浏览器扩展入口点
+│   ├── background.ts     # 后台 Service Worker 逻辑
+│   ├── content.ts        # 内容脚本注入逻辑
+│   ├── popup/            # 扩展弹出层 (主要功能区)
+│   └── options/          # 扩展选项页面
+├── types/                # 全局 TypeScript 类型声明
+├── utils/                # 工具类 (存储、消息通信、日期处理封装)
+├── wxt.config.ts         # WXT 框架与 Manifest 配置
+└── package.json          # 依赖管理与脚本
+```
+
+## 3. 开发规范与风格约定
+
+### 3.1 UI 设计语言
+
+- **极简主义 (Minimalist)**: 参考 Vercel 和 Apple 的设计语言。
+- **MUI 定制**:
+  - 严禁使用 MUI 默认的粗犷边框和深重阴影。
+  - 必须通过 `sx` 属性进行深度样式定制，去除 `notchedOutline`。
+  - 偏好使用 `grey.50` 背景区分层级，使用 `borderRadius: 4` (大圆角)。
+  - 交互反馈：禁用波纹效果 (`disableRipple`)，移除默认阴影 (`disableElevation`)。
+- **布局**: 优先使用 `Stack` 和 `Box` 进行布局，确保自上而下的操作流顺畅。
+
+### 3.2 技术选型惯例
+
+- **日期转换**: 必须通过 `utils/dayjs.ts` 导出的实例进行，确保时区处理一致。
+- **状态管理**: 优先使用 React 原生 `useState` 和 `useMemo`。
+- **存储**: 使用 `utils/chromeStorage.ts` 封装的类型安全接口。
+- **通信**: 使用 `@webext-core/messaging` 进行 background 和 popup 之间的消息传递。
+
+## 4. 关键指令
+
+### 4.1 开发与调试
+
+- `npm run dev`: 启动 Chrome 扩展开发模式。
+- `npm run dev:firefox`: 启动 Firefox 扩展开发模式。
+
+### 4.2 构建与检查
+
+- `npm run build`: 构建生产版本。
+- `npm run compile`: TypeScript 类型检查。
+- `npm run lint`: ESLint 代码风格检查。
+
+## 5. 权限与清单 (Manifest)
+
+- **核心权限**: `storage`, `unlimitedStorage`, `clipboardWrite`, `scripting`, `tabs`, `debugger`, `cookies`。
+- **宿主权限**: `<all_urls>` (用于在所有页面注入 content 脚本)。
+- **构建细节**: 生产环境构建使用 `terser` 压缩，并强制 `ascii_only` 以确保字符兼容性。
+
+## 6. 维护者提示
+
+在修改 `TimestampPage.tsx` 等核心页面时，应保持**逻辑层**（基于 dayjs 的转换算法）与**渲染层**（JSX/MUI 样式）的严格分离。

entrypoints/popup/App.css

@@ -28,14 +28,13 @@ body {
 }
 
 .app {
-  max-width: 800px;
+  width: 400px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: Arial, sans-serif;
-  width: 380px;
-  min-width: 320px;
   min-height: 100%;
+  margin: 0 auto;
   box-sizing: border-box;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  overflow-x: hidden;
 }
 
 @keyframes fadeIn {

entrypoints/popup/pages/TimestampPage.tsx

@@ -1,12 +1,10 @@
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import dayjs from '@/utils/dayjs';
 import {
   Button,
   TextField,
   Select,
   MenuItem,
-  FormControl,
-  InputLabel,
   Paper,
   Stack,
   Typography,
@@ -14,27 +12,223 @@ import {
   IconButton,
   Snackbar,
   Alert,
+  InputAdornment,
+  alpha,
+  Tooltip,
+  Theme,
 } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz'; 
+import CheckIcon from '@mui/icons-material/Check';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 
+// ================= 常量配置 =================
+const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
 const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
 
-export default function TimestampPage() {
+type UnitType = 'ms' | 's';
+type ZoneType = (typeof ZONES)[number];
+
+const INPUT_STYLE = {
+  '& .MuiOutlinedInput-root': {
+    bgcolor: 'grey.50',
+    borderRadius: 3,
+    transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+    '& fieldset': { border: 'none' },
+    '&:hover': { bgcolor: 'grey.100' },
+    '&.Mui-focused': {
+      bgcolor: '#fff',
+      boxShadow: (theme: Theme) => `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}, 0 4px 12px rgba(0,0,0,0.03)`,
+    },
+    '&.Mui-error': {
+      boxShadow: (theme: Theme) => `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
+    },
+  },
+  '& .MuiInputBase-input': { py: 1.5, fontFamily: 'monospace' },
+};
+
+// ================= 子组件：实时时钟 =================
+interface LiveClockProps {
+  unit: UnitType;
+  onCopy: (val: string) => void;
+  onUseNow: (val: number) => void;
+}
+
+const LiveClock = React.memo(({ 
+  unit, 
+  onCopy, 
+  onUseNow 
+}: LiveClockProps) => {
   const [now, setNow] = useState(() => Date.now());
-  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
-  const [tsInput, setTsInput] = useState(() => String(Date.now()));
-  const [dtInput, setDtInput] = useState(() => dayjs().format('YYYY/MM/DD HH:mm:ss'));
-  const [result, setResult] = useState('');
-  const [unit, setUnit] = useState<'ms' | 's'>('ms');
-  const [zone, setZone] = useState<(typeof ZONES)[number]>('Asia/Shanghai');
-  const [error, setError] = useState('');
-  const [snack, setSnack] = useState<{ open: boolean; msg: string }>({ open: false, msg: '' });
 
   useEffect(() => {
     const t = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(t);
   }, []);
 
+  const displayVal = useMemo(() => 
+    String(Math.floor(now / (unit === 'ms' ? 1 : 1000))), 
+  [now, unit]);
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 4 }}>
+      <Stack direction="row" spacing={1} alignItems="baseline">
+        <Typography variant="h4" sx={{ fontWeight: 300, letterSpacing: '-1px', color: 'text.primary', fontFamily: 'monospace' }}>
+          {displayVal}
+        </Typography>
+        <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase' }}>
+          {unit}
+        </Typography>
+      </Stack>
+      <Stack direction="row" spacing={0.5}>
+        <Tooltip title="填充到下方">
+          <IconButton 
+            aria-label="use current time"
+            size="small" 
+            onClick={() => onUseNow(now)} 
+            sx={{ color: 'primary.main', transition: 'all 0.2s', '&:hover': { bgcolor: alpha('#2563eb', 0.08) } }}
+          >
+            <AccessTimeIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="复制当前时间戳">
+          <IconButton 
+            aria-label="copy current timestamp"
+            size="small" 
+            onClick={() => onCopy(displayVal)} 
+            sx={{ color: 'grey.400', transition: 'all 0.2s', '&:hover': { color: 'primary.main', transform: 'scale(1.1)' } }}
+          >
+            <ContentCopyIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      </Stack>
+    </Box>
+  );
+});
+
+LiveClock.displayName = 'LiveClock';
+
+// ================= 子组件：多维度结果展示 =================
+interface ResultViewProps {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+  onCopy: (val: string) => void;
+}
+
+const ResultView = React.memo(({ 
+  result, 
+  mode, 
+  unit, 
+  zone, 
+  onCopy 
+}: ResultViewProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    onCopy(result);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [onCopy, result]);
+
+  const extraInfo = useMemo(() => {
+    if (!result) return null;
+    const d = mode === 'ts2dt' ? dayjs(result, DATE_FORMAT).tz(zone) : (unit === 'ms' ? dayjs(Number(result)) : dayjs.unix(Number(result)));
+    
+    return {
+      relative: d.fromNow(),
+      iso: d.toISOString(),
+      utc: d.utc().format(DATE_FORMAT) + ' UTC',
+    };
+  }, [result, mode, zone, unit]);
+
+  if (!result) return null;
+
+  return (
+    <Box sx={{ 
+      mt: 3, pt: 3, borderTop: '1px solid', borderColor: 'grey.50',
+      animation: 'fadeIn 0.3s ease-out',
+      '@keyframes fadeIn': { from: { opacity: 0, transform: 'translateY(10px)' }, to: { opacity: 1, transform: 'translateY(0)' } }
+    }}>
+      <Typography variant="caption" sx={{ color: 'text.disabled', mb: 1, display: 'block', ml: 1, fontWeight: 500 }}>
+        转换结果
+      </Typography>
+      <TextField
+        fullWidth
+        value={result}
+        slotProps={{
+          input: {
+            readOnly: true,
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton 
+                  aria-label="copy result"
+                  size="small" 
+                  onClick={handleCopy} 
+                  sx={{ 
+                    color: copied ? 'success.main' : 'primary.main',
+                    transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                    transform: copied ? 'scale(1.2)' : 'scale(1)',
+                  }}
+                >
+                  {copied ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          },
+        }}
+        sx={{
+          ...INPUT_STYLE,
+          mb: 2,
+          '& .MuiOutlinedInput-root': {
+            ...INPUT_STYLE['& .MuiOutlinedInput-root'],
+            bgcolor: alpha('#2563eb', 0.03),
+          },
+        }}
+      />
+      
+      {/* 辅助信息预览 */}
+      <Stack spacing={1} sx={{ px: 1 }}>
+        {[
+          { label: '相对时间', value: extraInfo?.relative },
+          { label: 'ISO 8601', value: extraInfo?.iso },
+          { label: 'UTC 时间', value: extraInfo?.utc },
+        ].map((item) => (
+          <Box key={item.label} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>{item.label}</Typography>
+            <Typography 
+              variant="caption" 
+              onClick={() => { if (item.value) onCopy(item.value); }}
+              sx={{ 
+                fontFamily: 'monospace', 
+                color: 'text.primary', 
+                cursor: 'pointer',
+                '&:hover': { color: 'primary.main', textDecoration: 'underline' }
+              }}
+            >
+              {item.value}
+            </Typography>
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+});
+
+ResultView.displayName = 'ResultView';
+
+// ================= 主页面组件 =================
+export default function TimestampPage() {
+  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
+  const [tsInput, setTsInput] = useState(() => String(Date.now()));
+  const [dtInput, setDtInput] = useState(() => dayjs().format(DATE_FORMAT));
+  const [unit, setUnit] = useState<UnitType>('ms');
+  const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
+  const [result, setResult] = useState('');
+  const [error, setError] = useState('');
+  const [snack, setSnack] = useState<{ open: boolean; msg: string }>({ open: false, msg: '' });
+
   const copy = useCallback(async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
@@ -44,169 +238,175 @@ export default function TimestampPage() {
     }
   }, []);
 
-  const convertTs2Dt = useCallback(() => {
+  const convert = useCallback(() => {
-    if (!tsInput) {
+    if (mode === 'ts2dt') {
-      setError('请输入时间戳');
+      const rawInput = tsInput.trim();
-      return;
+      if (!rawInput) return;
+      const num = Number(rawInput);
+      if (isNaN(num)) { setError('无效数字'); return; }
+      const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
+      if (!d.isValid()) { setError('无效时间戳'); return; }
+      setError('');
+      setResult(d.tz(zone).format(DATE_FORMAT));
+    } else {
+      const rawInput = dtInput.trim();
+      if (!rawInput) return;
+      const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
+      if (!d.isValid()) { setError('格式错误'); return; }
+      setError('');
+      const ms = d.valueOf();
+      setResult(unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000)));
     }
-    const num = Number(tsInput);
+  }, [mode, tsInput, dtInput, unit, zone]);
-    if (isNaN(num)) {
-      setError('无效数字');
-      return;
-    }
-    const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
-    if (!d.isValid()) {
-      setError('无效时间戳');
-      return;
-    }
-    setError('');
-    setResult(d.tz(zone).format('YYYY/MM/DD HH:mm:ss'));
-  }, [tsInput, unit, zone]);
 
-  const convertDt2Ts = useCallback(() => {
+  // 智能实时转换 (Debounce Effect)
-    if (!dtInput) {
+  useEffect(() => {
-      setError('请输入日期时间');
+    const timer = setTimeout(() => {
-      return;
+      convert();
+    }, 400);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [convert]);
+
+  const handleUseNow = useCallback((now: number) => {
+    if (mode === 'ts2dt') {
+      setTsInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
+    } else {
+      setDtInput(dayjs(now).tz(zone).format(DATE_FORMAT));
     }
-    const d = dayjs.tz(dtInput, 'YYYY/MM/DD HH:mm:ss', zone);
+  }, [mode, unit, zone]);
-    if (!d.isValid()) {
-      setError('无效格式 (YYYY/MM/DD HH:mm:ss)');
-      return;
-    }
-    setError('');
-    const ms = d.valueOf();
-    setResult(unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000)));
-  }, [dtInput, zone, unit]);
 
   return (
-    <Paper sx={{ p: 2, m: 1, borderRadius: 2 }}>
+    <Box sx={{ p: 1, width: '100%', bgcolor: 'transparent', boxSizing: 'border-box' }}>
-      <Box sx={{ textAlign: 'center', mb: 2 }}>
+      <Paper
-        <Typography variant="h5" component="span" sx={{ fontFamily: 'monospace', fontWeight: 'bold', color: 'primary.main' }}>
+        elevation={0}
-          {Math.floor(now / (unit === 'ms' ? 1 : 1000))}
+        sx={{
-        </Typography>
+          p: 2.5,
-        <Typography variant="body1" component="span" sx={{ ml: 1, color: 'text.secondary' }}>
+          borderRadius: 4,
-          {unit === 'ms' ? '毫秒' : '秒'}
+          border: '1px solid',
-        </Typography>
+          borderColor: 'grey.100',
-        <Box sx={{ mt: 1 }}>
+          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
-          <Button size="small" onClick={() => setUnit(unit === 'ms' ? 's' : 'ms')} sx={{ mr: 1 }}>
+          '&:hover': { boxShadow: '0 12px 40px rgba(0,0,0,0.06)', borderColor: 'grey.200' },
-            切换单位
+        }}
-          </Button>
+      >
-          <Button size="small" onClick={() => copy(String(Math.floor(now / (unit === 'ms' ? 1 : 1000))))}>
+        {/* 1. 实时时钟 */}
-            复制
+        <Box sx={{ position: 'relative' }}>
-          </Button>
+          <LiveClock unit={unit} onCopy={copy} onUseNow={handleUseNow} />
+          <Tooltip title="切换单位">
+            <IconButton 
+              aria-label="switch unit"
+              size="small" 
+              onClick={() => { setUnit((u) => (u === 'ms' ? 's' : 'ms')); }} 
+              sx={{ 
+                position: 'absolute', right: 80, top: 4, color: 'grey.400',
+                transition: 'transform 0.3s ease',
+                '&:hover': { transform: 'rotate(180deg)', color: 'primary.main' }
+              }}
+            >
+              <SwapHorizIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
         </Box>
-      </Box>
 
-      <Stack direction="row" spacing={1} sx={{ mb: 2, justifyContent: 'center' }}>
+        {/* 2. 模式切换 */}
+        <Box sx={{ position: 'relative', display: 'flex', p: 0.5, bgcolor: 'grey.100', borderRadius: 3.5, mb: 3, overflow: 'hidden' }}>
+          <Box
+            sx={{
+              position: 'absolute', height: 'calc(100% - 8px)', width: 'calc(50% - 4px)',
+              bgcolor: '#fff', borderRadius: 3, boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+              transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+              transform: mode === 'ts2dt' ? 'translateX(0)' : 'translateX(100%)',
+              top: 4, left: 4,
+            }}
+          />
+          {(['ts2dt', 'dt2ts'] as const).map((m) => (
+            <Button
+              key={m} fullWidth disableRipple
+              onClick={() => { setMode(m); setError(''); setResult(''); }}
+              sx={{
+                position: 'relative', zIndex: 1, borderRadius: 3, py: 1, textTransform: 'none',
+                fontSize: '0.875rem', fontWeight: 500, transition: 'color 0.2s',
+                color: mode === m ? 'text.primary' : 'text.disabled',
+                '&:hover': { bgcolor: 'transparent', color: mode === m ? 'text.primary' : 'text.secondary' },
+              }}
+            >
+              {m === 'ts2dt' ? '时间戳 → 日期' : '日期 → 时间戳'}
+            </Button>
+          ))}
+        </Box>
+
+        {/* 3. 输入与设置 */}
+        <Stack spacing={2} sx={{ mb: 3 }}>
+          <TextField
+            placeholder={mode === 'ts2dt' ? "输入时间戳..." : DATE_FORMAT}
+            value={mode === 'ts2dt' ? tsInput : dtInput}
+            onChange={(e) => {
+              const val = e.target.value;
+              if (mode === 'ts2dt') {
+                setTsInput(val);
+              } else {
+                setDtInput(val);
+              }
+              setError('');
+            }}
+            error={!!error}
+            helperText={error}
+            fullWidth
+            sx={INPUT_STYLE}
+          />
+
+          <Stack direction="row" spacing={2}>
+            <Select
+              fullWidth value={unit}
+              onChange={(e) => { setUnit(e.target.value as UnitType); }}
+              sx={{ ...INPUT_STYLE, flex: 1 }}
+              MenuProps={{ PaperProps: { sx: { borderRadius: 3, mt: 1, boxShadow: '0 10px 40px rgba(0,0,0,0.1)' } } }}
+            >
+              <MenuItem value="ms">毫秒 (ms)</MenuItem>
+              <MenuItem value="s">秒 (s)</MenuItem>
+            </Select>
+
+            <Select
+              fullWidth value={zone}
+              onChange={(e) => { setZone(e.target.value as ZoneType); }}
+              sx={{ ...INPUT_STYLE, flex: 1.5 }}
+              MenuProps={{ PaperProps: { sx: { borderRadius: 3, mt: 1, boxShadow: '0 10px 40px rgba(0,0,0,0.1)' } } }}
+            >
+              {ZONES.map((z) => (
+                <MenuItem key={z} value={z}>{z}</MenuItem>
+              ))}
+            </Select>
+          </Stack>
+        </Stack>
+
+        {/* 4. 转换操作 (作为手动确认) */}
         <Button
-          variant={mode === 'ts2dt' ? 'contained' : 'outlined'}
+          fullWidth variant="contained" disableElevation disableRipple
-          size="small"
+          onClick={convert}
-          onClick={() => {
+          sx={{
-            setMode('ts2dt');
+            py: 1.6, borderRadius: 3, fontSize: '1rem', fontWeight: 600, textTransform: 'none',
-            setError('');
+            bgcolor: 'primary.main', transition: 'all 0.2s',
-            setResult('');
+            '&:hover': { bgcolor: 'primary.dark', transform: 'translateY(-1px)' },
+            '&:active': { transform: 'translateY(0)' }
           }}
         >
-          时间戳 → 日期
+          立即转换
         </Button>
-        <Button
-          variant={mode === 'dt2ts' ? 'contained' : 'outlined'}
-          size="small"
-          onClick={() => {
-            setMode('dt2ts');
-            setError('');
-            setResult('');
-          }}
-        >
-          日期 → 时间戳
-        </Button>
-      </Stack>
 
-      <Stack spacing={2}>
+        {/* 5. 结果展示 */}
-        {mode === 'ts2dt' ? (
+        <ResultView result={result} mode={mode} unit={unit} zone={zone} onCopy={copy} />
-          <>
+      </Paper>
-            <TextField
-              label="时间戳"
-              value={tsInput}
-              onChange={(e) => {
-                setTsInput(e.target.value);
-                setError('');
-              }}
-              error={!!error}
-              helperText={error}
-              fullWidth
-              size="small"
-            />
-            <FormControl fullWidth size="small">
-              <InputLabel>单位</InputLabel>
-              <Select value={unit} label="单位" onChange={(e) => setUnit(e.target.value as 'ms' | 's')}>
-                <MenuItem value="ms">毫秒</MenuItem>
-                <MenuItem value="s">秒</MenuItem>
-              </Select>
-            </FormControl>
-            <Button variant="contained" onClick={convertTs2Dt} fullWidth>
-              转换
-            </Button>
-          </>
-        ) : (
-          <>
-            <TextField
-              label="日期时间"
-              value={dtInput}
-              onChange={(e) => {
-                setDtInput(e.target.value);
-                setError('');
-              }}
-              error={!!error}
-              helperText={error || '格式: YYYY/MM/DD HH:mm:ss'}
-              fullWidth
-              size="small"
-            />
-            <FormControl fullWidth size="small">
-              <InputLabel>单位</InputLabel>
-              <Select value={unit} label="单位" onChange={(e) => setUnit(e.target.value as 'ms' | 's')}>
-                <MenuItem value="ms">毫秒</MenuItem>
-                <MenuItem value="s">秒</MenuItem>
-              </Select>
-            </FormControl>
-            <Button variant="contained" onClick={convertDt2Ts} fullWidth>
-              转换
-            </Button>
-          </>
-        )}
 
-        <FormControl fullWidth size="small">
+      <Snackbar 
-          <InputLabel>时区</InputLabel>
+        open={snack.open} autoHideDuration={1500} 
-          <Select value={zone} label="时区" onChange={(e) => setZone(e.target.value as (typeof ZONES)[number])}>
+        onClose={() => { setSnack((s) => ({ ...s, open: false })); }}
-            {ZONES.map((z) => (
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-              <MenuItem key={z} value={z}>
+      >
-                {z}
+        <Alert severity="success" variant="filled" icon={false} sx={{ borderRadius: 2.5, bgcolor: 'grey.900' }}>
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-
-        <TextField
-          label="结果"
-          value={result}
-          fullWidth
-          size="small"
-          InputProps={{
-            readOnly: true,
-            endAdornment: result ? (
-              <IconButton size="small" onClick={() => copy(result)}>
-                <ContentCopyIcon fontSize="small" />
-              </IconButton>
-            ) : undefined,
-          }}
-        />
-      </Stack>
-
-      <Snackbar open={snack.open} autoHideDuration={1500} onClose={() => setSnack({ ...snack, open: false })}>
-        <Alert severity="success" variant="filled" sx={{ width: '100%' }}>
           {snack.msg}
         </Alert>
       </Snackbar>
-    </Paper>
+    </Box>
   );
 }

utils/dayjs.ts

@@ -1,8 +1,13 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/zh-cn';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+
+dayjs.locale('zh-cn');
 
 export default dayjs;