refactor: 全面迁移 StorageCleaner 页面至 shadcn 样式并移除 GlobalSnackbar 依赖

pages/StorageCleaner/StorageCleanerConfirm.tsx

@@ -7,8 +7,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
   open: boolean;
@@ -31,50 +34,74 @@ export function StorageCleanerConfirm({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="sm:max-w-[400px] p-6">
-        <DialogHeader>
-          <DialogTitle className="text-center text-xl font-bold tracking-tight">
+      {/* 💡 终极修复秘诀：
+        - 移除原来的 sm:max-w-[360px]，改用 max-w-[calc(100%-32px)] 或者是 w-[88%]。
+        - 这样无论插件弹窗多窄，它的左右两侧都必然会被强制挤出至少 16px 的完美空白护边！
+        - 将 p-5 转换为明确的 p-6，增大弹窗内部的呼吸感。
+      */}
+      <DialogContent
+        className={cn(
+          'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
+          'animate-in fade-in-50 zoom-in-95 duration-200',
+        )}
+      >
+        {/* 头部标题区域 */}
+        <DialogHeader className="pt-1">
+          <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
             {t('storageCleaner:confirmTitle')}
           </DialogTitle>
         </DialogHeader>
 
-        <div className="text-center">
-          <DialogDescription className="mb-4 text-sm font-medium text-muted-foreground">
+        {/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
+        <div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
+          <DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
             {t('storageCleaner:confirmDesc')}
           </DialogDescription>
 
-          <div className="flex flex-wrap gap-2 justify-center mb-6">
+          {/* 待清理项目徽章群 */}
+          <div className="flex flex-wrap gap-1.5 justify-center mb-5 w-full">
             {selectedOptions.map((label) => (
-              <span
+              <Badge
                 key={label}
-                className="inline-flex items-center px-3 py-1.5 rounded-md text-xs font-bold text-amber-700 bg-amber-50 border border-amber-200"
+                variant="secondary"
+                className="px-2.5 py-0.5 text-[11px] font-semibold border border-border/40 select-none bg-muted/60"
               >
                 {label}
-              </span>
+              </Badge>
             ))}
           </div>
 
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-50 border border-dashed border-red-200">
-            <span className="text-xs font-bold text-red-600 flex items-center gap-1">
-              <span role="img" aria-label="warning">
-                ⚠️
-              </span>{' '}
+          {/* 风险警告横幅 */}
+          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px] animate-pulse [animation-duration:3s]">
+            <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
+            <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
               {t('storageCleaner:irreversible')}
             </span>
           </div>
         </div>
 
-        <DialogFooter className="flex flex-col gap-3 sm:flex-row sm:justify-end sm:gap-3 pt-4">
-          <Button variant="outline" onClick={onClose} className="w-full sm:w-auto">
-            {t('common:buttons.cancel')}
-          </Button>
+        {/* 底部操作按钮区：
+          💡 修复要点：
+          - 增加 pt-2 隔开上方危险条。
+          - 显式通过 w-full 配合 flex-col 铺满，在移动端/窄插件下垂直堆叠，最符合小屏直觉。
+        */}
+        <DialogFooter className="flex flex-col gap-2 w-full pt-2">
           <Button
-            variant="default"
+            variant="destructive"
+            size="sm"
             onClick={onConfirm}
-            className="w-full sm:w-auto bg-amber-500 hover:bg-amber-600 text-white"
+            className="w-full text-xs font-bold shadow-sm h-9"
           >
             {t('storageCleaner:confirmAction')}
           </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClose}
+            className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
+          >
+            {t('common:buttons.cancel')}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>