From 6bd05aa6f10680b8f0e9ece8af5c2dcd0578df01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 21 May 2026 23:23:13 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=20Tailwind=20CSS=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=20ResultView=20=E5=92=8C=20LiveClock=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/Timestamp/LiveClock.tsx  | 31 +++++------
 pages/Timestamp/ResultView.tsx | 94 ++++++++++++++++------------------
 2 files changed, 59 insertions(+), 66 deletions(-)

diff --git a/pages/Timestamp/LiveClock.tsx b/pages/Timestamp/LiveClock.tsx
index 38f4aff..c5cbb47 100644
--- a/pages/Timestamp/LiveClock.tsx
+++ b/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>
   );
 });
 
diff --git a/pages/Timestamp/ResultView.tsx b/pages/Timestamp/ResultView.tsx
index 9faa5b6..3065cde 100644
--- a/pages/Timestamp/ResultView.tsx
+++ b/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,60 +37,57 @@ 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}>
-            {t('timestamp:resultLabel')}
-          </Typography>
+      <div className="animate-in fade-in duration-300">
+        <span className="block text-gray-500 mb-3 text-xs font-bold">
+          {t('timestamp:resultLabel')}
+        </span>
 
-          <Box sx={timestampPageStyles.RESULT_MAIN_BOX}>
-            <Typography variant="body1" sx={timestampPageStyles.RESULT_MAIN_TEXT}>
-              {result}
-            </Typography>
-            <CopyButton
-              text={result}
-              tooltip={t('timestamp:copyResultTooltip')}
-              size="small"
-              color={timestampPageStyles.primaryColor}
-            />
-          </Box>
+        <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}
+          </span>
+          <CopyButton
+            text={result}
+            tooltip={t('timestamp:copyResultTooltip')}
+            size="small"
+            color={timestampPageStyles.primaryColor}
+          />
+        </div>
 
-          <Stack spacing={1.2} sx={timestampPageStyles.RESULT_EXTRA_STACK}>
-            {[
-              { 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}>
-                  {item.label}
-                </Typography>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
-                  <Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_VALUE}>
-                    {item.value}
-                  </Typography>
-                  {item.value && (
-                    <CopyButton
-                      text={item.value}
-                      tooltip={t('timestamp:copyTooltip')}
-                      size="small"
-                      color={timestampPageStyles.primaryColor}
-                    />
-                  )}
-                </Box>
-              </Box>
-            ))}
-          </Stack>
-        </Box>
-      </Fade>
+        <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) => (
+            <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}
+              </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}
+                </span>
+                {item.value && (
+                  <CopyButton
+                    text={item.value}
+                    tooltip={t('timestamp:copyTooltip')}
+                    size="small"
+                    color={timestampPageStyles.primaryColor}
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
     );
   },
 );