Develop (#5)

* feat: enhance StorageCleanerPage with accordion for storage options and immediate preference saving * feat: add reusable Button component and update StorageCleanerPage and TimestampPage to use it * feat: add StorageCleanerConfirm component for confirmation dialog in StorageCleanerPage * feat: implement fixed height and minimal scrollbar for Popup layout
2026-04-06 17:49:47 +08:00
parent 979b45a898
commit 2cd21973f3
8 changed files with 281 additions and 118 deletions
@@ -0,0 +1,32 @@
+import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';
+
+export type ButtonProps = MuiButtonProps;
+
+export function Button({ sx = [], ...props }: ButtonProps) {
+  return (
+    <MuiButton
+      disableElevation
+      disableRipple
+      {...props}
+      sx={[
+        {
+          py: 1.6,
+          borderRadius: 4,
+          fontSize: '1rem',
+          fontWeight: 600,
+          textTransform: 'none',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          '&:hover': {
+            transform: 'translateY(-1px)',
+          },
+          '&:active': {
+            transform: 'translateY(0)',
+          },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    />
+  );
+}
+
+export default Button;
@@ -0,0 +1,82 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Typography,
+  Box,
+} from '@mui/material';
+import type { StorageCleanerOptions } from '@/types/storage';
+import Button from '@/components/Button';
+
+export interface StorageCleanerConfirmProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  options: StorageCleanerOptions;
+}
+
+export function StorageCleanerConfirm({
+  open,
+  onClose,
+  onConfirm,
+  options,
+}: StorageCleanerConfirmProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullWidth
+      maxWidth="xs"
+      slotProps={{
+        paper: {
+          sx: {
+            borderRadius: 4,
+            backgroundImage: 'none',
+            boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
+          },
+        },
+      }}
+    >
+      <DialogTitle sx={{ textAlign: 'center', pb: 1, pt: 3, fontWeight: 700 }}>
+        确认清理
+      </DialogTitle>
+      <DialogContent sx={{ textAlign: 'center', pb: 2 }}>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          将清理以下存储类型：
+        </Typography>
+        <Box
+          sx={{
+            bgcolor: 'grey.50',
+            borderRadius: 3,
+            p: 2,
+            mb: 2,
+            display: 'inline-block',
+            textAlign: 'left',
+            minWidth: '60%',
+          }}
+        >
+          {options.localStorage && <Typography variant="body2">- localStorage</Typography>}
+          {options.sessionStorage && <Typography variant="body2">- sessionStorage</Typography>}
+          {options.indexedDB && <Typography variant="body2">- IndexedDB</Typography>}
+          {options.cookies && <Typography variant="body2">- Cookies</Typography>}
+          {options.cacheStorage && <Typography variant="body2">- Cache Storage</Typography>}
+          {options.serviceWorkers && <Typography variant="body2">- Service Workers</Typography>}
+        </Box>
+        <Typography variant="body2" color="text.secondary">
+          此操作不可撤销。
+        </Typography>
+      </DialogContent>
+      <DialogActions sx={{ p: 3, pt: 1, gap: 1 }}>
+        <Button variant="outlined" onClick={onClose} fullWidth>
+          取消
+        </Button>
+        <Button variant="contained" color="error" onClick={onConfirm} fullWidth>
+          确认清理
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default StorageCleanerConfirm;