style: v0.10.0的样式调整与优化

median-dxz · Jan 21, 2025 · 92d182d · 92d182d
1 parent 343b369
commit 92d182d
Show file tree

Hide file tree

Showing 44 changed files with 326 additions and 240 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -20,7 +20,7 @@
     "build": "tsc --build",
     "watch": "tsc --watch",
     "format": "prettier . --write",
-    "lint": "eslint . --fix",
+    "lint": "eslint .",
     "test": "vitest"
   },
   "files": [

diff --git a/packages/launcher/package.json b/packages/launcher/package.json
@@ -10,7 +10,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "format": "prettier . --write",
-    "lint": "eslint src/**.{ts,tsx} --fix"
+    "lint": "eslint src"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",

diff --git a/packages/launcher/src/components/DataLoading.tsx b/packages/launcher/src/components/DataLoading.tsx
@@ -1,21 +1,20 @@
-import { Box, CircularProgress, Typography, type BoxProps } from '@mui/material';
+import { Box, CircularProgress, styled, Typography, type BoxProps } from '@mui/material';
 
 type DataLoadingProps = BoxProps & {
     error?: string;
     loadingText?: string;
 };
 
-export const DataLoading = ({ sx, loadingText = '加载数据中', error }: DataLoadingProps) => (
-    <Box
-        sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100%',
-            ...sx
-        }}
-    >
+const StyledBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+` as typeof Box;
+
+export const DataLoading = ({ loadingText = '加载数据中', error, ...props }: DataLoadingProps) => (
+    <StyledBox {...props}>
         {!error ? (
             <>
                 <CircularProgress size="1.5rem" />
@@ -24,5 +23,5 @@ export const DataLoading = ({ sx, loadingText = '加载数据中', error }: Data
         ) : (
             <Typography>{error}</Typography>
         )}
-    </Box>
+    </StyledBox>
 );
diff --git a/...src/components/styled/HexagonalButton.tsx → ...uncher/src/components/HexagonalButton.tsx b/...src/components/styled/HexagonalButton.tsx → ...uncher/src/components/HexagonalButton.tsx
@@ -1,4 +1,3 @@
-import { theme } from '@/theme';
 import type { ButtonBaseProps } from '@mui/material';
 import { alpha, ButtonBase, styled } from '@mui/material';
 import { forwardRef, type ForwardedRef, type PropsWithChildren } from 'react';
@@ -34,8 +33,6 @@ const HexagonalButtonRoot = forwardRef(function HexagonalButtonRoot(
     );
 });
 
-const { palette, transitions } = theme;
-
 const StyledButtonRoot = styled(HexagonalButtonRoot)`
     overflow: overlay;
     clip-path: polygon(
@@ -46,7 +43,8 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)`
         50% 118%,
         calc(50% - 25% * 1.732 - 18%) calc(50% + 50% / 2)
     );
-    transition: ${transitions.create(['all'], { duration: transitions.duration.shortest })};
+    transition: ${({ theme: { transitions } }) =>
+        transitions.create(['all'], { duration: transitions.duration.shortest })};
 
     &:focus {
         outline: none;
@@ -67,19 +65,19 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)`
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        transition: ${transitions.create(['all'])};
+        transition: ${({ theme: { transitions } }) => transitions.create(['all'])};
     }
 
     & .bg {
-        stroke: ${palette.primary.main};
+        stroke: ${({ theme: { palette } }) => palette.primary.main};
         stroke-width: 3px;
         stroke-linecap: round;
         fill: transparent;
         animation: breathe 2s linear infinite;
     }
 
     &:hover .content {
-        filter: drop-shadow(0 0 4px ${alpha(palette.primary.main, 1)});
+        filter: drop-shadow(0 0 4px ${({ theme: { palette } }) => alpha(palette.primary.main, 1)});
     }
 
     @keyframes breathe {
@@ -92,7 +90,7 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)`
         50% {
             opacity: 0.85;
             transform: scale(1.02);
-            filter: drop-shadow(0 0 4px ${alpha(palette.background.default, 1)});
+            filter: drop-shadow(0 0 4px ${({ theme: { palette } }) => alpha(palette.background.default, 1)});
         }
     }
 `;

diff --git a/packages/launcher/src/components/IconButtonNoRipple.tsx b/packages/launcher/src/components/IconButtonNoRipple.tsx
@@ -1,16 +1,15 @@
 import { IconButton, styled, type IconButtonProps } from '@mui/material';
 
-const StyledIconButton = styled(IconButton)`
-    color: ${({ theme }) => theme.palette.text.primary};
-    transition: ${({ theme }) => theme.transitions.create(['color', 'transform'])};
+export const IconButtonNoRipple = styled(({ ...props }: Omit<IconButtonProps, 'disableRipple' | 'color'>) => (
+    <IconButton disableRipple size="small" {...props} />
+))`
+    color: ${({ theme: { palette } }) => palette.text.primary};
+    transition: ${({ theme: { transitions } }) =>
+        transitions.create(['color', 'transform'], { easing: 'cubic-bezier(0, 1, 0.32, 1.28)' })};
     &:hover {
-        color: ${({ theme }) => theme.palette.primary.main};
+        color: ${({ theme: { palette } }) => palette.primary.main};
     }
     &:active {
         transform: scale(0.9);
     }
-`;
-
-export function IconButtonNoRipple({ ...props }: Omit<IconButtonProps, 'disableRipple' | 'color'>) {
-    return <StyledIconButton disableRipple size="small" {...props} />;
-}
+` as typeof IconButton;
diff --git a/packages/launcher/src/components/LabeledProgress.tsx b/packages/launcher/src/components/LabeledProgress.tsx
@@ -1,5 +1,5 @@
 import type { LinearProgressProps, TypographyProps } from '@mui/material';
-import { LinearProgress, Stack, Typography } from '@mui/material';
+import { LinearProgress, Stack, styled, Typography } from '@mui/material';
 
 type LabeledProgressProps = LinearProgressProps & {
     prompt?: string;
@@ -10,14 +10,17 @@ type LabeledProgressProps = LinearProgressProps & {
     typographyProps?: TypographyProps;
 };
 
+const FullWidthLinearProgress = styled(LinearProgress)`
+    width: 100%;
+`;
+
 export function LabeledLinearProgress({
     progress,
     total,
     prompt,
     overridePrompt,
     labelPosition: position,
     typographyProps,
-    sx,
     ...rest
 }: LabeledProgressProps) {
     let display = prompt ?? '';
@@ -29,7 +32,7 @@ export function LabeledLinearProgress({
         return (
             <Typography component={'div'} {...typographyProps}>
                 {overridePrompt ?? display}
-                <LinearProgress variant="determinate" value={(progress / total) * 100} sx={sx} {...rest} />
+                <LinearProgress variant="determinate" value={(progress / total) * 100} {...rest} />
             </Typography>
         );
     } else if (position === 'right') {
@@ -42,12 +45,7 @@ export function LabeledLinearProgress({
                 }}
                 spacing={0}
             >
-                <LinearProgress
-                    variant="determinate"
-                    value={(progress / total) * 100}
-                    sx={{ width: '100%', ...sx }}
-                    {...rest}
-                />
+                <FullWidthLinearProgress variant="determinate" value={(progress / total) * 100} {...rest} />
                 <Typography component={'span'} {...typographyProps}>
                     {overridePrompt ?? display}
                 </Typography>
@@ -67,12 +65,7 @@ export function LabeledLinearProgress({
                 <Typography component={'span'} {...typographyProps}>
                     {overridePrompt ?? display}
                 </Typography>
-                <LinearProgress
-                    variant="determinate"
-                    value={(progress / total) * 100}
-                    sx={{ width: '100%', ...sx }}
-                    {...rest}
-                />
+                <FullWidthLinearProgress variant="determinate" value={(progress / total) * 100} {...rest} />
             </Stack>
         );
     }

diff --git a/packages/launcher/src/components/LinerLoading.tsx b/packages/launcher/src/components/LinerLoading.tsx
@@ -1,15 +1,14 @@
-import { Box, LinearProgress, type BoxProps } from '@mui/material';
+import { Box, LinearProgress, styled, type BoxProps } from '@mui/material';
 
-export const LinerLoading = ({ sx }: BoxProps) => (
-    <Box
-        sx={{
-            ...sx,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'stretch',
-            flexDirection: 'column'
-        }}
-    >
+const StyledBox = styled(Box)`
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    flex-direction: column;
+` as typeof Box;
+
+export const LinerLoading = ({ ...props }: BoxProps) => (
+    <StyledBox {...props}>
         <LinearProgress />
-    </Box>
+    </StyledBox>
 );
diff --git a/packages/launcher/src/components/Paper.tsx b/packages/launcher/src/components/Paper.tsx
@@ -0,0 +1,6 @@
+import { alpha, Paper as MuiPaper, styled } from '@mui/material';
+
+export const Paper = styled(MuiPaper)`
+    background-color: ${({ theme: { palette } }) => alpha(palette.primary.main, 0.08)};
+    backdrop-filter: unset;
+` as typeof MuiPaper;
diff --git a/packages/launcher/src/components/PopupMenuButton.tsx b/packages/launcher/src/components/PopupMenuButton.tsx
@@ -84,7 +84,7 @@ export function PopupMenuButton<T>({
                 {children}
             </Button>
             {data && data.length > 0 && (
-                <Menu {...state} {...menuProps} sx={{ ...menuProps?.sx, maxHeight: '60vh' }}>
+                <Menu {...state} {...menuProps}>
                     {data.map((item, index) => (
                         <MenuItem
                             key={index}

diff --git a/...her/src/components/styled/QuickAccess.tsx → ...s/launcher/src/components/QuickAccess.tsx b/...her/src/components/styled/QuickAccess.tsx → ...s/launcher/src/components/QuickAccess.tsx
@@ -1,8 +1,5 @@
-import { theme } from '@/theme';
 import { SpeedDial as MuiSpeedDial, styled } from '@mui/material';
 
-const { palette } = theme;
-
 export const SeaQuickAccess = styled(MuiSpeedDial)`
     & .MuiSpeedDial-actions {
         margin: 0;
@@ -14,10 +11,10 @@ export const SeaQuickAccess = styled(MuiSpeedDial)`
         box-shadow: none;
         background: none;
         transition: all 0.2s ease-in-out !important;
-        color: ${palette.secondary.main};
-        filter: drop-shadow(0 0 4px ${palette.secondary.main});
+        color: ${({ theme: { palette } }) => palette.secondary.main};
+        filter: drop-shadow(0 0 4px ${({ theme: { palette } }) => palette.secondary.main});
         &:hover {
-            color: ${palette.primary.main};
+            color: ${({ theme: { palette } }) => palette.primary.main};
             background: none;
         }
         &:active {
@@ -31,9 +28,9 @@ export const SeaQuickAccess = styled(MuiSpeedDial)`
         top: 0;
         left: 0;
         width: 0;
-        border-top: 1px solid ${palette.primary.main};
-        box-shadow: 0 0 4px ${palette.primary.main};
-        transition: ${theme.transitions.create(['width'])};
+        border-top: 1px solid ${({ theme: { palette } }) => palette.primary.main};
+        box-shadow: 0 0 4px ${({ theme: { palette } }) => palette.primary.main};
+        transition: ${({ theme: { transitions } }) => transitions.create(['width'])};
     }
 
     &::before {
@@ -42,9 +39,9 @@ export const SeaQuickAccess = styled(MuiSpeedDial)`
         bottom: 0;
         right: 0;
         width: 0;
-        border-bottom: 1px solid ${palette.primary.main};
-        box-shadow: 0 0 4px ${palette.primary.main};
-        transition: ${theme.transitions.create(['width'])};
+        border-bottom: 1px solid ${({ theme: { palette } }) => palette.primary.main};
+        box-shadow: 0 0 4px ${({ theme: { palette } }) => palette.primary.main};
+        transition: ${({ theme: { transitions } }) => transitions.create(['width'])};
     }
 
     &:hover::before,

diff --git a/packages/launcher/src/components/Row.tsx b/packages/launcher/src/components/Row.tsx
@@ -0,0 +1,8 @@
+import { Stack, styled } from '@mui/material';
+
+export const Row = styled(Stack)`
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+` as typeof Stack;
diff --git a/packages/launcher/src/components/SEAConfigForm/CheckboxItem.tsx b/packages/launcher/src/components/SEAConfigForm/CheckboxItem.tsx
@@ -1,7 +1,7 @@
 import { Checkbox, FormControlLabel, FormHelperText } from '@mui/material';
 import { forwardRef } from 'react';
 import type { ControllerRenderProps } from 'react-hook-form';
-import { Row } from '../styled/Row';
+import { Row } from '../Row';
 
 export interface CheckboxItemProps {
     label: string;

diff --git a/...uncher/src/components/styled/TableRow.tsx → ...ages/launcher/src/components/TableRow.tsx b/...uncher/src/components/styled/TableRow.tsx → ...ages/launcher/src/components/TableRow.tsx
diff --git a/packages/launcher/src/components/styled/Row.tsx b/packages/launcher/src/components/styled/Row.tsx
diff --git a/packages/launcher/src/store.ts b/packages/launcher/src/store.ts
@@ -32,9 +32,11 @@ export const appStore = configureStore({
                     /taskScheduler\.queue\.[0-9]*\.error/,
                     /packetCapture\.packets/,
                     /api\/mod\.queries\.fetch/,
+                    /api\/mod\.queries\.indexList/,
                     /api\/game\.queries\.bagPets/,
                     /api\/game\.queries\.allPets/,
-                    /api\/mod.mutations\..*\.error/
+                    /api\/mod.mutations\..*\.error/,
+                    /mod\.deployments\.entities\..*\.state\.data/
                 ],
                 ignoreActions: true
             } satisfies SerializableStateInvariantMiddlewareOptions