用 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"
+      </span>
+      <button
         onClick={handleUseNow}
-          sx={timestampPageStyles.LIVE_CLOCK_ICON_BUTTON}
+        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"
       >
-          <AccessTimeIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
+        <Clock className="w-4 h-4" />
+      </button>
       <CopyButton
         text={displayVal}
         tooltip={t('timestamp:copyTsTooltip')}
         size="small"
         color={timestampPageStyles.primaryColor}
       />
-    </Box>
+    </div>
   );
 });
 

pages/Timestamp/ResultView.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { Box, Fade, Stack, Typography } from '@mui/material';
 import dayjs from '@/utils/dayjs';
 import CopyButton from '@/components/CopyButton';
 import type { UnitType } from '@/config/pageTheme';
@@ -38,46 +37,44 @@ const ResultView = React.memo(
     if (!result) {
       if (!showEmptyPlaceholder) return null;
       return (
-        <Box sx={timestampPageStyles.RESULT_EMPTY_PLACEHOLDER}>{t('timestamp:resultEmpty')}</Box>
+        <div className="flex-1 flex items-center justify-center text-gray-400 text-sm font-semibold py-12 text-center">
+          {t('timestamp:resultEmpty')}
+        </div>
       );
     }
 
     return (
-      <Fade in={!!result}>
-        <Box>
-          <Typography variant="caption" sx={timestampPageStyles.RESULT_LABEL}>
+      <div className="animate-in fade-in duration-300">
+        <span className="block text-gray-500 mb-3 text-xs font-bold">
           {t('timestamp:resultLabel')}
-          </Typography>
+        </span>
 
-          <Box sx={timestampPageStyles.RESULT_MAIN_BOX}>
-            <Typography variant="body1" sx={timestampPageStyles.RESULT_MAIN_TEXT}>
+        <div className="bg-blue-50 p-5 rounded-xl relative mb-4 border border-blue-200 flex justify-between items-center">
+          <span className="font-mono font-bold text-blue-700 break-all pr-4 text-xl tracking-tight leading-tight">
             {result}
-            </Typography>
+          </span>
           <CopyButton
             text={result}
             tooltip={t('timestamp:copyResultTooltip')}
             size="small"
             color={timestampPageStyles.primaryColor}
           />
-          </Box>
+        </div>
 
-          <Stack spacing={1.2} sx={timestampPageStyles.RESULT_EXTRA_STACK}>
+        <div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex flex-col gap-3">
           {[
             { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
             { label: t('timestamp:iso8601'), value: extraInfo?.iso },
             { label: t('timestamp:utcTime'), value: extraInfo?.utc },
           ].map((item) => (
-              <Box
-                key={item.label}
-                sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-              >
-                <Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_LABEL}>
+            <div key={item.label} className="flex justify-between items-center">
+              <span className="text-gray-400 font-bold text-xs pr-2 whitespace-nowrap">
                 {item.label}
-                </Typography>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
-                  <Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_VALUE}>
+              </span>
+              <div className="flex items-center gap-2 min-w-0">
+                <span className="font-mono text-blue-700 font-semibold text-xs break-all text-right">
                   {item.value}
-                  </Typography>
+                </span>
                 {item.value && (
                   <CopyButton
                     text={item.value}
@@ -86,12 +83,11 @@ const ResultView = React.memo(
                     color={timestampPageStyles.primaryColor}
                   />
                 )}
-                </Box>
-              </Box>
+              </div>
+            </div>
           ))}
-          </Stack>
-        </Box>
-      </Fade>
+        </div>
+      </div>
     );
   },
 );