Develop (#55)

feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
2026-05-28 22:39:25 +08:00
parent d4c29a1bf4
commit 945780def8
200 changed files with 1557 additions and 4380 deletions
@@ -0,0 +1,109 @@
+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';
+
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export default function Index() {
+  const { t } = useI18n('timestamp');
+
+  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} />
+
+        <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">
+                <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"
+                />
+
+                <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>
+          </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>
+  );
+}