用 Tailwind CSS 重构 ResultView 和 LiveClock 组件

pages/Timestamp/LiveClock.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, IconButton, Tooltip, Typography } from '@mui/material';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Clock } from 'lucide-react';
 import CopyButton from '@/components/CopyButton';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import type { UnitType } from '@/config/pageTheme';
@@ -38,29 +37,27 @@ const LiveClock = React.memo(({ unit, onUseNow }: LiveClockProps) => {
   }, [now, showMessage, t]);
 
   return (
-    <Box sx={timestampPageStyles.LIVE_CLOCK_CARD}>
-      <Typography variant="caption" sx={timestampPageStyles.LIVE_CLOCK_LABEL}>
+    <div className="flex items-center gap-3 px-4 py-2 mb-4 bg-blue-50 rounded-lg border border-blue-100">
+      <span className="text-blue-700 font-bold text-[0.65rem] uppercase tracking-wider whitespace-nowrap">
         {t('timestamp:currentTs')}
-      </Typography>
-      <Typography variant="subtitle2" sx={timestampPageStyles.LIVE_CLOCK_VALUE}>
+      </span>
+      <span className="flex-1 font-mono font-bold text-blue-700 text-sm tracking-tight leading-tight overflow-hidden text-ellipsis">
         {displayVal}
-      </Typography>
-      <Tooltip title={t('timestamp:useNowTooltip')}>
-        <IconButton
-          size="small"
-          onClick={handleUseNow}
-          sx={timestampPageStyles.LIVE_CLOCK_ICON_BUTTON}
-        >
-          <AccessTimeIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
+      </span>
+      <button
+        onClick={handleUseNow}
+        title={t('timestamp:useNowTooltip')}
+        className="p-1.5 rounded-md bg-white text-blue-700 shadow-sm hover:bg-blue-700 hover:text-white transition-colors"
+      >
+        <Clock className="w-4 h-4" />
+      </button>
       <CopyButton
         text={displayVal}
         tooltip={t('timestamp:copyTsTooltip')}
         size="small"
         color={timestampPageStyles.primaryColor}
       />
-    </Box>
+    </div>
   );
 });