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,70 @@
+import React from 'react';
+import { formatSize } from '@/utils/storageCleaner';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+// 引入官方的 Checkbox 原子组件
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  labelKey: string;
+  checked: boolean;
+  size?: number;
+  isCount?: boolean;
+  onChange: () => void;
+}
+
+export default function OptionItem({
+  labelKey,
+  checked,
+  size,
+  isCount = false,
+  onChange,
+  className,
+  ...props
+}: OptionItemProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      onClick={onChange}
+      className={cn(
+        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
+        checked
+          ? 'bg-primary/5 border-primary/30 shadow-sm'
+          : 'bg-transparent border-transparent hover:bg-muted/70',
+        className,
+      )}
+      {...props}
+    >
+      {/* 左侧数据区域 */}
+      <div className="flex-1 min-w-0 mr-4">
+        <span
+          className={cn(
+            'block text-xs font-semibold leading-tight truncate',
+            checked ? 'text-foreground font-bold' : 'text-foreground/80',
+          )}
+        >
+          {t(labelKey)}
+        </span>
+
+        {/* 底部容量大小或计数标识 */}
+        {size !== undefined && size > 0 ? (
+          <span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
+            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
+          </span>
+        ) : (
+          <span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
+            {t('storageCleaner:noData')}
+          </span>
+        )}
+      </div>
+
+      <Checkbox
+        checked={checked}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={onChange}
+        className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+      />
+    </div>
+  );
+}