refactor(代码重复): 抽取共享工具函数与 UI 组件，消除多处重复实现

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/StorageCleaner/components/OptionItem.tsx

@@ -2,17 +2,9 @@ import React from 'react';
 import { formatBytes } from '@/utils/format';
 import { cn } from '@/lib/utils';
 import type { StorageSizeInfo } from '../useStorageCleaner';
+import { OPTION_LABELS } from '../constants';
 import { Checkbox } from '@/components/ui/checkbox';
 
-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   labelKey: string;
   checked: boolean;
@@ -30,7 +22,8 @@ export default function OptionItem({
 }: OptionItemProps) {
   const sizeValue = sizeInfo?.value;
   const isCount = sizeInfo?.displayType === 'count';
-  const label = OPTION_LABELS[labelKey] || labelKey;
+  const label =
+    labelKey in OPTION_LABELS ? OPTION_LABELS[labelKey as keyof typeof OPTION_LABELS] : labelKey;
 
   return (
     <div

src/pages/StorageCleaner/components/StorageCleanerConfirm.tsx

@@ -10,6 +10,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
+import { OPTION_LABELS } from '../constants';
 import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
@@ -19,15 +20,6 @@ export interface StorageCleanerConfirmProps {
   options: StorageCleanerOptions;
 }
 
-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 export function StorageCleanerConfirm({
   open,
   onClose,
@@ -36,7 +28,9 @@ export function StorageCleanerConfirm({
 }: StorageCleanerConfirmProps) {
   const selectedOptions = Object.entries(options)
     .filter(([_, value]) => value)
-    .map(([key, _]) => OPTION_LABELS[key] || key);
+    .map(([key]) =>
+      key in OPTION_LABELS ? OPTION_LABELS[key as keyof typeof OPTION_LABELS] : key,
+    );
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>

src/pages/StorageCleaner/constants.ts

@@ -0,0 +1,19 @@
+import type { StorageCleanerOptions } from '@/types/storage';
+
+export const CLEAN_OPTION_KEYS = [
+  'localStorage',
+  'sessionStorage',
+  'indexedDB',
+  'cookies',
+  'cacheStorage',
+  'serviceWorkers',
+] as const satisfies readonly (keyof StorageCleanerOptions)[];
+
+export const OPTION_LABELS: Record<(typeof CLEAN_OPTION_KEYS)[number], string> = {
+  localStorage: 'Local Storage',
+  sessionStorage: 'Session Storage',
+  indexedDB: '站点存储',
+  cookies: 'Cookies',
+  cacheStorage: 'Cache Storage',
+  serviceWorkers: 'Service Workers',
+};