Skip to content

Commit 92d182d

Browse files
median-dxzmedian-dxz
committed
style: v0.10.0的样式调整与优化
1 parent 343b369 commit 92d182d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+326
-240
lines changed

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"build": "tsc --build",
2121
"watch": "tsc --watch",
2222
"format": "prettier . --write",
23-
"lint": "eslint . --fix",
23+
"lint": "eslint .",
2424
"test": "vitest"
2525
},
2626
"files": [

‎packages/launcher/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"build": "tsc && vite build",
1111
"preview": "vite preview",
1212
"format": "prettier . --write",
13-
"lint": "eslint src/**.{ts,tsx} --fix"
13+
"lint": "eslint src"
1414
},
1515
"dependencies": {
1616
"@emotion/css": "^11.13.5",

‎packages/launcher/src/components/DataLoading.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
1-
import { Box, CircularProgress, Typography, type BoxProps } from '@mui/material';
1+
import { Box, CircularProgress, styled, Typography, type BoxProps } from '@mui/material';
22

33
type DataLoadingProps = BoxProps & {
44
error?: string;
55
loadingText?: string;
66
};
77

8-
export const DataLoading = ({ sx, loadingText = '加载数据中', error }: DataLoadingProps) => (
9-
<Box
10-
sx={{
11-
display: 'flex',
12-
flexDirection: 'column',
13-
justifyContent: 'center',
14-
alignItems: 'center',
15-
height: '100%',
16-
...sx
17-
}}
18-
>
8+
const StyledBox = styled(Box)`
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100%;
14+
` as typeof Box;
15+
16+
export const DataLoading = ({ loadingText = '加载数据中', error, ...props }: DataLoadingProps) => (
17+
<StyledBox {...props}>
1918
{!error ? (
2019
<>
2120
<CircularProgress size="1.5rem" />
@@ -24,5 +23,5 @@ export const DataLoading = ({ sx, loadingText = '加载数据中', error }: Data
2423
) : (
2524
<Typography>{error}</Typography>
2625
)}
27-
</Box>
26+
</StyledBox>
2827
);

‎packages/launcher/src/components/styled/HexagonalButton.tsx renamed to ‎packages/launcher/src/components/HexagonalButton.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { theme } from '@/theme';
21
import type { ButtonBaseProps } from '@mui/material';
32
import { alpha, ButtonBase, styled } from '@mui/material';
43
import { forwardRef, type ForwardedRef, type PropsWithChildren } from 'react';
@@ -34,8 +33,6 @@ const HexagonalButtonRoot = forwardRef(function HexagonalButtonRoot(
3433
);
3534
});
3635

37-
const { palette, transitions } = theme;
38-
3936
const StyledButtonRoot = styled(HexagonalButtonRoot)`
4037
overflow: overlay;
4138
clip-path: polygon(
@@ -46,7 +43,8 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)`
4643
50% 118%,
4744
calc(50% - 25% * 1.732 - 18%) calc(50% + 50% / 2)
4845
);
49-
transition: ${transitions.create(['all'], { duration: transitions.duration.shortest })};
46+
transition: ${({ theme: { transitions } }) =>
47+
transitions.create(['all'], { duration: transitions.duration.shortest })};
5048
5149
&:focus {
5250
outline: none;
@@ -67,19 +65,19 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)`
6765
flex-direction: column;
6866
justify-content: center;
6967
align-items: center;
70-
transition: ${transitions.create(['all'])};
68+
transition: ${({ theme: { transitions } }) => transitions.create(['all'])};
7169
}
7270
7371
& .bg {
74-
stroke: ${palette.primary.main};
72+
stroke: ${({ theme: { palette } }) => palette.primary.main};
7573
stroke-width: 3px;
7674
stroke-linecap: round;
7775
fill: transparent;
7876
animation: breathe 2s linear infinite;
7977
}
8078
8179
&:hover .content {
82-
filter: drop-shadow(0 0 4px ${alpha(palette.primary.main, 1)});
80+
filter: drop-shadow(0 0 4px ${({ theme: { palette } }) => alpha(palette.primary.main, 1)});
8381
}
8482
8583
@keyframes breathe {
@@ -92,7 +90,7 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)`
9290
50% {
9391
opacity: 0.85;
9492
transform: scale(1.02);
95-
filter: drop-shadow(0 0 4px ${alpha(palette.background.default, 1)});
93+
filter: drop-shadow(0 0 4px ${({ theme: { palette } }) => alpha(palette.background.default, 1)});
9694
}
9795
}
9896
`;

‎packages/launcher/src/components/IconButtonNoRipple.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import { IconButton, styled, type IconButtonProps } from '@mui/material';
22

3-
const StyledIconButton = styled(IconButton)`
4-
color: ${({ theme }) => theme.palette.text.primary};
5-
transition: ${({ theme }) => theme.transitions.create(['color', 'transform'])};
3+
export const IconButtonNoRipple = styled(({ ...props }: Omit<IconButtonProps, 'disableRipple' | 'color'>) => (
4+
<IconButton disableRipple size="small" {...props} />
5+
))`
6+
color: ${({ theme: { palette } }) => palette.text.primary};
7+
transition: ${({ theme: { transitions } }) =>
8+
transitions.create(['color', 'transform'], { easing: 'cubic-bezier(0, 1, 0.32, 1.28)' })};
69
&:hover {
7-
color: ${({ theme }) => theme.palette.primary.main};
10+
color: ${({ theme: { palette } }) => palette.primary.main};
811
}
912
&:active {
1013
transform: scale(0.9);
1114
}
12-
`;
13-
14-
export function IconButtonNoRipple({ ...props }: Omit<IconButtonProps, 'disableRipple' | 'color'>) {
15-
return <StyledIconButton disableRipple size="small" {...props} />;
16-
}
15+
` as typeof IconButton;

‎packages/launcher/src/components/LabeledProgress.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { LinearProgressProps, TypographyProps } from '@mui/material';
2-
import { LinearProgress, Stack, Typography } from '@mui/material';
2+
import { LinearProgress, Stack, styled, Typography } from '@mui/material';
33

44
type LabeledProgressProps = LinearProgressProps & {
55
prompt?: string;
@@ -10,14 +10,17 @@ type LabeledProgressProps = LinearProgressProps & {
1010
typographyProps?: TypographyProps;
1111
};
1212

13+
const FullWidthLinearProgress = styled(LinearProgress)`
14+
width: 100%;
15+
`;
16+
1317
export function LabeledLinearProgress({
1418
progress,
1519
total,
1620
prompt,
1721
overridePrompt,
1822
labelPosition: position,
1923
typographyProps,
20-
sx,
2124
...rest
2225
}: LabeledProgressProps) {
2326
let display = prompt ?? '';
@@ -29,7 +32,7 @@ export function LabeledLinearProgress({
2932
return (
3033
<Typography component={'div'} {...typographyProps}>
3134
{overridePrompt ?? display}
32-
<LinearProgress variant="determinate" value={(progress / total) * 100} sx={sx} {...rest} />
35+
<LinearProgress variant="determinate" value={(progress / total) * 100} {...rest} />
3336
</Typography>
3437
);
3538
} else if (position === 'right') {
@@ -42,12 +45,7 @@ export function LabeledLinearProgress({
4245
}}
4346
spacing={0}
4447
>
45-
<LinearProgress
46-
variant="determinate"
47-
value={(progress / total) * 100}
48-
sx={{ width: '100%', ...sx }}
49-
{...rest}
50-
/>
48+
<FullWidthLinearProgress variant="determinate" value={(progress / total) * 100} {...rest} />
5149
<Typography component={'span'} {...typographyProps}>
5250
{overridePrompt ?? display}
5351
</Typography>
@@ -67,12 +65,7 @@ export function LabeledLinearProgress({
6765
<Typography component={'span'} {...typographyProps}>
6866
{overridePrompt ?? display}
6967
</Typography>
70-
<LinearProgress
71-
variant="determinate"
72-
value={(progress / total) * 100}
73-
sx={{ width: '100%', ...sx }}
74-
{...rest}
75-
/>
68+
<FullWidthLinearProgress variant="determinate" value={(progress / total) * 100} {...rest} />
7669
</Stack>
7770
);
7871
}

‎packages/launcher/src/components/LinerLoading.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { Box, LinearProgress, type BoxProps } from '@mui/material';
1+
import { Box, LinearProgress, styled, type BoxProps } from '@mui/material';
22

3-
export const LinerLoading = ({ sx }: BoxProps) => (
4-
<Box
5-
sx={{
6-
...sx,
7-
display: 'flex',
8-
justifyContent: 'center',
9-
alignItems: 'stretch',
10-
flexDirection: 'column'
11-
}}
12-
>
3+
const StyledBox = styled(Box)`
4+
display: flex;
5+
justify-content: center;
6+
align-items: stretch;
7+
flex-direction: column;
8+
` as typeof Box;
9+
10+
export const LinerLoading = ({ ...props }: BoxProps) => (
11+
<StyledBox {...props}>
1312
<LinearProgress />
14-
</Box>
13+
</StyledBox>
1514
);

‎packages/launcher/src/components/Paper.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { alpha, Paper as MuiPaper, styled } from '@mui/material';
2+
3+
export const Paper = styled(MuiPaper)`
4+
background-color: ${({ theme: { palette } }) => alpha(palette.primary.main, 0.08)};
5+
backdrop-filter: unset;
6+
` as typeof MuiPaper;

‎packages/launcher/src/components/PopupMenuButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export function PopupMenuButton<T>({
8484
{children}
8585
</Button>
8686
{data && data.length > 0 && (
87-
<Menu {...state} {...menuProps} sx={{ ...menuProps?.sx, maxHeight: '60vh' }}>
87+
<Menu {...state} {...menuProps}>
8888
{data.map((item, index) => (
8989
<MenuItem
9090
key={index}

‎packages/launcher/src/components/styled/QuickAccess.tsx renamed to ‎packages/launcher/src/components/QuickAccess.tsx

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import { theme } from '@/theme';
21
import { SpeedDial as MuiSpeedDial, styled } from '@mui/material';
32

4-
const { palette } = theme;
5-
63
export const SeaQuickAccess = styled(MuiSpeedDial)`
74
& .MuiSpeedDial-actions {
85
margin: 0;
@@ -14,10 +11,10 @@ export const SeaQuickAccess = styled(MuiSpeedDial)`
1411
box-shadow: none;
1512
background: none;
1613
transition: all 0.2s ease-in-out !important;
17-
color: ${palette.secondary.main};
18-
filter: drop-shadow(0 0 4px ${palette.secondary.main});
14+
color: ${({ theme: { palette } }) => palette.secondary.main};
15+
filter: drop-shadow(0 0 4px ${({ theme: { palette } }) => palette.secondary.main});
1916
&:hover {
20-
color: ${palette.primary.main};
17+
color: ${({ theme: { palette } }) => palette.primary.main};
2118
background: none;
2219
}
2320
&:active {
@@ -31,9 +28,9 @@ export const SeaQuickAccess = styled(MuiSpeedDial)`
3128
top: 0;
3229
left: 0;
3330
width: 0;
34-
border-top: 1px solid ${palette.primary.main};
35-
box-shadow: 0 0 4px ${palette.primary.main};
36-
transition: ${theme.transitions.create(['width'])};
31+
border-top: 1px solid ${({ theme: { palette } }) => palette.primary.main};
32+
box-shadow: 0 0 4px ${({ theme: { palette } }) => palette.primary.main};
33+
transition: ${({ theme: { transitions } }) => transitions.create(['width'])};
3734
}
3835
3936
&::before {
@@ -42,9 +39,9 @@ export const SeaQuickAccess = styled(MuiSpeedDial)`
4239
bottom: 0;
4340
right: 0;
4441
width: 0;
45-
border-bottom: 1px solid ${palette.primary.main};
46-
box-shadow: 0 0 4px ${palette.primary.main};
47-
transition: ${theme.transitions.create(['width'])};
42+
border-bottom: 1px solid ${({ theme: { palette } }) => palette.primary.main};
43+
box-shadow: 0 0 4px ${({ theme: { palette } }) => palette.primary.main};
44+
transition: ${({ theme: { transitions } }) => transitions.create(['width'])};
4845
}
4946
5047
&:hover::before,

0 commit comments

Comments
 (0)