refactor(StorageCleaner): 规范化页面组件目录结构

- 将子组件移至 components/ 子目录（OptionItem、AutoRefreshToggle、CleaningResult、StorageCleanerConfirm、StorageOptionsGrid、ErrorDisplay） - 创建 __tests__/ 目录结构 - 更新所有相关导入路径 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-10 20:56:38 +08:00
parent 016173a9c5
commit 9c5f5c8cfe
9 changed files with 39 additions and 8 deletions
@@ -0,0 +1,77 @@
+import React from 'react';
+import type { StorageCleanerOptions } from '@/types/storage';
+import type { StorageSizeInfo } from '../useStorageCleaner';
+import OptionItem from './OptionItem';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: StorageCleanerOptions;
+  sizes: Record<string, StorageSizeInfo>;
+  allSelected: boolean;
+  someSelected: boolean;
+  onOptionChange: (key: keyof StorageCleanerOptions) => void;
+  onSelectAll: (checked: boolean) => void;
+}
+
+export default function StorageOptionsGrid({
+  options,
+  sizes,
+  allSelected,
+  someSelected,
+  onOptionChange,
+  onSelectAll,
+  className,
+  ...props
+}: StorageOptionsGridProps) {
+  const { t } = useI18n('storageCleaner');
+
+  const optionKeys: (keyof StorageCleanerOptions)[] = [
+    'localStorage',
+    'sessionStorage',
+    'indexedDB',
+    'cookies',
+    'cacheStorage',
+    'serviceWorkers',
+  ];
+
+  const handleToggleAll = () => {
+    onSelectAll(!allSelected);
+  };
+
+  return (
+    <div className={cn('w-full overflow-hidden', className)} {...props}>
+      <div className="px-3.5 pt-3.5 pb-2">
+        <div className="grid grid-cols-2 gap-2 items-stretch">
+          {optionKeys.map((key) => (
+            <OptionItem
+              key={key}
+              labelKey={`storageCleaner:options.${key}`}
+              checked={options[key]}
+              sizeInfo={sizes[key]}
+              onChange={() => onOptionChange(key)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div
+        onClick={handleToggleAll}
+        className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
+      >
+        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
+          {t('storageCleaner:selectAll')}
+        </Label>
+
+        <Checkbox
+          checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+          onClick={(e) => e.stopPropagation()}
+          onCheckedChange={(checked) => onSelectAll(checked === true)}
+          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-muted-foreground/40"
+        />
+      </div>
+    </div>
+  );
+}