refactor: reorganize directory structure into src/

Move all source code directories into src/ for cleaner project structure: - pages/, components/, utils/, config/, providers/, types/, lib/, assets/, entrypoints/ → src/ - Use WXT srcDir config to resolve @/ alias to src/ - Update tsconfig, vitest, eslint, tailwind configs - Remove scattered README.md files from subdirectories - Update documentation (AGENTS.md, CODING_STANDARDS.md, README.md) - Fix pre-existing lint error in RouterProvider.tsx Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-28 20:20:45 +08:00
parent 9903483f42
commit b79fe7dd49
166 changed files with 86 additions and 631 deletions
@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Clock } from 'lucide-react';
+import CopyButton from '@/components/CopyButton';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import type { UnitType } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils'; // 引入标准的 shadcn 工具函数
+
+interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
+  unit: UnitType;
+  onUseNow: (val: number) => void;
+}
+
+const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
+  const { t } = useI18n('timestamp');
+  const { showMessage } = useSnackbar();
+  const onUseNowRef = useRef(onUseNow);
+
+  // 1. 采用毫秒/秒的双态原子计数，避免无意义的重绘
+  const [currentDisplay, setCurrentDisplay] = useState(() => {
+    const initNow = Date.now();
+    return {
+      rawTime: initNow,
+      text: String(Math.floor(initNow / (unit === 'ms' ? 1 : 1000))),
+    };
+  });
+
+  // 始终保持外部回调指针最新
+  useEffect(() => {
+    onUseNowRef.current = onUseNow;
+  }, [onUseNow]);
+
+  // 2. 高频高灵敏度计时器 (200ms 刷新率)
+  useEffect(() => {
+    const tick = () => {
+      const rightNow = Date.now();
+      const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
+
+      // 性能核心：只有当生成的文本内容发生变化时，才触发 React 的 State 更新。
+      // 在“秒(s)”单位下，这可以让组件的渲染频率暴跌 90%，做到极度省电和高性能。
+      setCurrentDisplay((prev) => {
+        if (prev.text === nextText) return prev;
+        return { rawTime: rightNow, text: nextText };
+      });
+    };
+
+    // 200ms 的高速低延迟轮询，比 1000ms 更具响应灵敏度，且因为上面有过滤，完全不用担心引发性能损耗
+    const tickId = setInterval(tick, 200);
+    return () => clearInterval(tickId);
+  }, [unit]);
+
+  const handleUseNow = useCallback(() => {
+    // 捕获真实极其精准的绝对时间戳
+    onUseNowRef.current(currentDisplay.rawTime);
+    showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
+  }, [currentDisplay.rawTime, showMessage, t]);
+
+  return (
+    <div
+      className={cn(
+        // 3. 完美适配 shadcn 暗黑模式：
+        // 不再写死 bg-primary/10，改用更高级的 bg-secondary/50 和中性边框，
+        // 在任何主题色下都能表现得低调且极具质感。
+        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
+        className,
+      )}
+      {...props}
+    >
+      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
+        {t('timestamp:currentTs')}
+      </span>
+
+      {/* 4. tabular-nums 强制使用等宽数字布局，彻底消灭数字跳动时字符宽度不同带来的抖动颤噪感 */}
+      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
+        {currentDisplay.text}
+      </span>
+
+      {/* 5. 按钮重构成精巧的 shadcn 原子微动效风格 */}
+      <button
+        type="button"
+        onClick={handleUseNow}
+        title={t('timestamp:useNowTooltip')}
+        className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        <Clock className="w-3.5 h-3.5" />
+      </button>
+
+      <CopyButton
+        text={currentDisplay.text}
+        tooltip={t('timestamp:copyTsTooltip')}
+        className="h-7 w-7 rounded-md border"
+      />
+    </div>
+  );
+});
+
+LiveClock.displayName = 'LiveClock';
+
+export default LiveClock;
@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react';
+import dayjs from '@/utils/dayjs';
+import CopyButton from '@/components/CopyButton';
+import type { UnitType } from './constants';
+import { DATE_FORMAT } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils'; // shadcn 核心类名合并工具
+
+interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+  /** 无结果时是否渲染占位（桌面端右栏使用），默认 false */
+  showEmptyPlaceholder?: boolean;
+}
+
+const ResultView = React.memo(
+  ({
+    result,
+    mode,
+    unit,
+    zone,
+    showEmptyPlaceholder = false,
+    className,
+    ...props
+  }: ResultViewProps) => {
+    const { t } = useI18n('timestamp');
+
+    // 严谨计算时间衍生的附加时区/相对时间状态
+    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]);
+
+    // 1. 空状态骨架面板：优雅匹配 shadcn 的中性灰色居中占位
+    if (!result) {
+      if (!showEmptyPlaceholder) return null;
+      return (
+        <div
+          className={cn(
+            'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
+            className,
+          )}
+          {...props}
+        >
+          {t('timestamp:resultEmpty')}
+        </div>
+      );
+    }
+
+    return (
+      <div className={cn('flex flex-col w-full', className)} {...props}>
+        {/* 顶部小标签 */}
+        <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
+          {t('timestamp:resultLabel')}
+        </span>
+
+        {/*
+          2. 核心结果大卡片：
+          对齐 shadcn 官方卡片风格，使用 bg-card、border-border 构筑多层级阴影。
+          核心数值直接拉粗为 text-foreground (在黑夜模式下会自动转为大气的纯白，完美避开刺眼强光)
+        */}
+        <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
+          <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
+            {result}
+          </span>
+          <CopyButton
+            text={result}
+            tooltip={t('timestamp:copyResultTooltip')}
+            className="h-8 w-8 rounded-md shrink-0 border"
+          />
+        </div>
+
+        {/*
+          3. 衍生的附加参考数据区：
+          背景改为低饱和度的 bg-muted/40 隔离带。
+          内部数值降级为 text-muted-foreground，建立教科书般的完美“视觉权重层级”。
+        */}
+        <div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
+          {[
+            { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
+            { label: t('timestamp:iso8601'), value: extraInfo?.iso, isMono: true },
+            { label: t('timestamp:utcTime'), value: extraInfo?.utc, isMono: true },
+          ].map((item) => (
+            <div
+              key={item.label}
+              className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1.5 py-0.5 border-b border-border/30 last:border-0 pb-2 sm:pb-0 last:pb-0"
+            >
+              <span className="text-muted-foreground font-semibold text-xs shrink-0 select-none">
+                {item.label}
+              </span>
+              <div className="flex items-center justify-between sm:justify-end gap-2 min-w-0 w-full sm:w-auto">
+                <span
+                  className={cn(
+                    'text-xs text-foreground/90 font-medium break-all text-left sm:text-right tabular-nums',
+                    item.isMono && 'font-mono text-[11px]', // ISO/UTC 等机器时间使用精细化等宽代码体
+                  )}
+                >
+                  {item.value}
+                </span>
+                {item.value && (
+                  <CopyButton
+                    text={item.value}
+                    tooltip={t('timestamp:copyTooltip')}
+                    className="h-6 w-6 rounded-md border shrink-0 text-muted-foreground"
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+
+ResultView.displayName = 'ResultView';
+
+export default ResultView;
@@ -0,0 +1,6 @@
+export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+
+export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
+
+export type UnitType = 'ms' | 's';
+export type ZoneType = (typeof ZONES)[number];
@@ -0,0 +1,133 @@
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { ZONES } from './constants';
+import LiveClock from './LiveClock';
+import ResultView from './ResultView';
+import { useTimestampConverter } from './useTimestampConverter';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+// 1. 引入标准的 shadcn/ui 原子表单组件（代替原生的原生 Input 和 Select）
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export default function Index() {
+  const { t } = useI18n('timestamp');
+
+  // 2. 完美对接全新重构后的统一单源响应式 Hook
+  const {
+    mode,
+    input,
+    unit,
+    zone,
+    result,
+    error,
+    setMode,
+    setInput,
+    setUnit,
+    setZone,
+    handleUseNow,
+  } = useTimestampConverter();
+
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
+      <div className="max-w-7xl mx-auto p-4 sm:p-6 space-y-4">
+        {/* 动态参考信息时钟条 */}
+        <LiveClock unit={unit} onUseNow={handleUseNow} />
+
+        {/* 核心工作台网格：桌面端 md+ 左右等宽分栏；移动端单栏堆叠 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+          {/* 左栏：转换工作台 */}
+          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
+            <div className="flex flex-col gap-4">
+              {/* 模式选择切换组 */}
+              <SwitchButtonGroup
+                value={mode}
+                options={[
+                  { value: 'ts2dt', label: t('timestamp:tsToDate') },
+                  { value: 'dt2ts', label: t('timestamp:dateToTs') },
+                ]}
+                onChange={(newMode) => setMode(newMode as 'ts2dt' | 'dt2ts')}
+                size="small"
+              />
+
+              {/* 输入交互区 */}
+              <div className="flex flex-col gap-1.5">
+                {/*
+                  3. 替换为标准的 shadcn <Input /> 组件：
+                  享受原生高水准的 focus-visible 环形动画响应。
+                */}
+                <Input
+                  type="text"
+                  placeholder={
+                    mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
+                  }
+                  value={input}
+                  onChange={(e: { target: { value: string } }) => setInput(e.target.value)}
+                  className={cn(
+                    'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
+                    error && 'border-destructive focus-visible:ring-destructive',
+                  )}
+                />
+
+                {/* 错误自愈提示 */}
+                {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
+              </div>
+
+              {/* 核心配置群：单位切换 + 时区选择紧凑横排 */}
+              <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
+                {/* 时间精度单位选择 */}
+                <SwitchButtonGroup
+                  value={unit}
+                  options={[
+                    { value: 'ms', label: t('timestamp:unitMs') },
+                    { value: 's', label: t('timestamp:unitS') },
+                  ]}
+                  onChange={(v) => setUnit(v as 'ms' | 's')}
+                  size="small"
+                  className="sm:w-auto shrink-0" // 窄屏下全宽，宽屏下自适应收缩
+                />
+
+                {/*
+                  4. 降维打击：将原生 <select> 强行超进化为标准的 shadcn <Select>：
+                  全操作系统的样式绝对一致，完美融合暗黑模式，悬浮弹窗自带微距磨砂玻璃阻尼动效。
+                */}
+                <Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
+                  <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+                    <SelectValue placeholder="选择时区" />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-64 font-mono">
+                    {ZONES.map((z) => (
+                      <SelectItem
+                        key={z}
+                        value={z}
+                        className="text-xs font-semibold focus:bg-accent cursor-pointer"
+                      >
+                        {z}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/*
+              5. 彻底移除了原先丑陋的手动 convert 按钮！
+              在响应式 Hook 的加持下，此处留白或由排版自然撑开，界面视觉极其干净。
+            */}
+          </div>
+
+          {/* 右栏：结果实时流展示卡片 */}
+          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
+            <ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,124 @@
+import { useCallback, useMemo, useState } from 'react';
+import dayjs from '@/utils/dayjs';
+import type { UnitType, ZoneType } from './constants';
+import { DATE_FORMAT } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+
+export interface UseTimestampConverterReturn {
+  mode: 'ts2dt' | 'dt2ts';
+  input: string; // 统一为单一受控输入源
+  unit: UnitType;
+  zone: ZoneType;
+  result: string;
+  error: string;
+
+  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setInput: (value: string) => void;
+  setUnit: (unit: UnitType) => void;
+  setZone: (zone: ZoneType) => void;
+  handleUseNow: (now: number) => void;
+}
+
+function isTimestampLike(input: string): boolean {
+  const trimmed = input.trim();
+  return /^\d+$/.test(trimmed) && trimmed.length >= 10;
+}
+
+export function useTimestampConverter(): UseTimestampConverterReturn {
+  const { t } = useI18n('timestamp');
+  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
+  const [unit, setUnit] = useState<UnitType>('ms');
+  const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
+
+  // 1. 唯一受控源：不再区分 ts/dt，输入框在当前模式下展现的就是它的值
+  const [input, setInput] = useState(() => String(Date.now()));
+
+  // 2. 核心魔法：利用 useMemo 达成 0 延迟响应式转换 (Reactive Pipeline)
+  // 只要 input, mode, unit, zone 任何一个发生改变，结果和错误信息自动流出，废除 convert 按钮
+  const conversionPipeline = useMemo(() => {
+    const rawInput = input.trim();
+    if (!rawInput) return { result: '', error: '' };
+
+    if (mode === 'ts2dt') {
+      const num = Number(rawInput);
+      if (isNaN(num)) {
+        return { result: '', error: t('timestamp:errors.invalidNumber') };
+      }
+      const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
+      if (!d.isValid()) {
+        return { result: '', error: t('timestamp:errors.invalidTimestamp') };
+      }
+      return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
+    } else {
+      const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
+      if (!d.isValid()) {
+        return { result: '', error: t('timestamp:errors.invalidFormat') };
+      }
+      const ms = d.valueOf();
+      const outputTs = unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000));
+      return { result: outputTs, error: '' };
+    }
+  }, [input, mode, unit, zone, t]);
+
+  const { result, error } = conversionPipeline;
+
+  // 3. 处理右键菜单联动（直接修改唯一的 input，衍生转换自动触发）
+  const handleContextMenuData = useCallback((payload: string) => {
+    const trimmed = payload.trim();
+    if (isTimestampLike(trimmed)) {
+      setMode('ts2dt');
+      const detectedUnit: UnitType = trimmed.length >= 13 ? 'ms' : 's';
+      setUnit(detectedUnit);
+      setInput(trimmed);
+    } else {
+      const d = dayjs(trimmed);
+      if (d.isValid()) {
+        setMode('dt2ts');
+        setInput(d.format(DATE_FORMAT));
+      } else {
+        setMode('ts2dt');
+        setInput(trimmed);
+      }
+    }
+  }, []);
+
+  useContextMenuData({ featureKey: 'timestamp', onData: handleContextMenuData });
+
+  const handleUseNow = useCallback(
+    (now: number) => {
+      if (mode === 'ts2dt') {
+        setInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
+      } else {
+        setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
+      }
+    },
+    [mode, unit, zone],
+  );
+
+  // 4. 尊享级连贯交互：切换 Mode 时，自动把上一个模式计算出的结果喂进输入框
+  // 比如：输入时间戳 -> 得到日期 -> 切换模式 -> 日期直接进入输入框，方便用户进行微调反向转换
+  const handleSetMode = useCallback(
+    (newMode: 'ts2dt' | 'dt2ts') => {
+      setMode(newMode);
+      if (result && !error) {
+        setInput(result);
+      }
+    },
+    [result, error],
+  );
+
+  return {
+    mode,
+    input,
+    unit,
+    zone,
+    result,
+    error,
+    setMode: handleSetMode,
+    setInput,
+    setUnit,
+    setZone,
+    handleUseNow,
+  };
+}