Enhance form recognition, optimize UI, and unify components (#19)

- **docs**: 完善组件注释、README 目录结构及 AGENTS.md 文档。 - **refactor**: - 提取通用 `PageHeader`、`Button`、`DashboardCard` 及 `ErrorBoundary` 组件。 - 重构消息通信机制，采用 `@webext-core/messaging` 实现类型安全。 - 将全局通知系统重构为 `SnackbarProvider` (后合并至 `GlobalSnackbar`)。 - 迁移样式系统至 MUI 主题，移除冗余 CSS。 - 优化路由配置，支持独立标签页模式及页面懒加载。 - 移除未使用文件、URL 工具及表单映射相关功能。 - **feat**: - 新增配置导出功能（JSON）及状态提示。 - 新增侧边栏状态变化通知机制。 - 新增文本统计及 JWT 解析工具。 - 优化二维码生成与解析逻辑，换用更轻量的 `qrious` 和 `qr-scanner`。 - 增强高亮器功能，支持闪烁效果及 Shadow DOM 穿透。 - **style**: 优化仪表盘响应式网格布局及 UI 细节。 - **fix**: 修复 `useStorageState` 依赖缺失及路由初始化性能问题。 - **test**: 更新单元测试以覆盖新增的工具函数及功能特性。
2026-05-03 17:06:32 +08:00
parent 8d36f21f1b
commit 57ea4d9858
80 changed files with 1909 additions and 15265 deletions
@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react';
+import { Typography, Box, Fade, Stack, alpha } from '@mui/material';
+import dayjs from '@/utils/dayjs';
+import CopyButton from '@/components/CopyButton';
+import { DATE_FORMAT, timestampPageStyles } from '@/config/pageTheme';
+import type { UnitType } from '@/config/pageTheme';
+import type { SnackbarOptions } from '@/components/GlobalSnackbar';
+
+interface ResultViewProps {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+  showMessage?: (message: string, options?: SnackbarOptions) => void;
+}
+
+const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: ResultViewProps) => {
+  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 (
+    <Fade in={!!result}>
+      <Box sx={{ mt: 3, pt: 2.5, borderTop: '1px solid', borderColor: 'grey.50' }}>
+        <Typography
+          variant="caption"
+          sx={{
+            color: 'text.secondary',
+            mb: 1.2,
+            display: 'block',
+            fontWeight: 800,
+            fontSize: '0.7rem',
+          }}
+        >
+          转换结果
+        </Typography>
+
+        <Box
+          sx={{
+            bgcolor: alpha(timestampPageStyles.primaryColor, 0.05),
+            p: 2,
+            borderRadius: 4,
+            position: 'relative',
+            mb: 2.5,
+            border: '1px solid',
+            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Typography
+            variant="body1"
+            sx={{
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              color: timestampPageStyles.primaryColor,
+              wordBreak: 'break-all',
+              pr: 4,
+              fontSize: '1rem',
+            }}
+          >
+            {result}
+          </Typography>
+          <CopyButton
+            text={result}
+            tooltip="复制结果"
+            size="small"
+            color={timestampPageStyles.primaryColor}
+            showMessage={showMessage}
+          />
+        </Box>
+
+        <Stack
+          spacing={1.2}
+          sx={{
+            bgcolor: alpha(timestampPageStyles.primaryColor, 0.05),
+            p: 2,
+            borderRadius: 4,
+            border: '1px solid',
+            borderColor: alpha(timestampPageStyles.primaryColor, 0.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.disabled', fontWeight: 700, fontSize: '0.65rem', pr: 4 }}
+              >
+                {item.label}
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    fontFamily: 'monospace',
+                    color: timestampPageStyles.primaryColor,
+                    fontWeight: 600,
+                    fontSize: '0.65rem',
+                  }}
+                >
+                  {item.value}
+                </Typography>
+                {item.value && (
+                  <CopyButton
+                    text={item.value}
+                    tooltip="复制"
+                    size="small"
+                    color={timestampPageStyles.primaryColor}
+                    showMessage={showMessage}
+                  />
+                )}
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </Fade>
+  );
+});
+
+ResultView.displayName = 'ResultView';
+
+export default ResultView;