From 92d182d9f64d3c87e1fd158a85daca22b5ff4a11 Mon Sep 17 00:00:00 2001 From: median-dxz <33348142+median-dxz@users.noreply.github.com> Date: Tue, 21 Jan 2025 11:18:03 +0800 Subject: [PATCH] =?UTF-8?q?style:=20v0.10.0=E7=9A=84=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=8E=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/package.json | 2 +- packages/launcher/package.json | 2 +- .../launcher/src/components/DataLoading.tsx | 25 +- .../{styled => }/HexagonalButton.tsx | 14 +- .../src/components/IconButtonNoRipple.tsx | 17 +- .../src/components/LabeledProgress.tsx | 23 +- .../launcher/src/components/LinerLoading.tsx | 23 +- packages/launcher/src/components/Paper.tsx | 6 + .../src/components/PopupMenuButton.tsx | 2 +- .../components/{styled => }/QuickAccess.tsx | 21 +- packages/launcher/src/components/Row.tsx | 8 + .../components/SEAConfigForm/CheckboxItem.tsx | 2 +- .../src/components/{styled => }/TableRow.tsx | 0 .../launcher/src/components/styled/Row.tsx | 19 -- packages/launcher/src/store.ts | 4 +- packages/launcher/src/theme.ts | 19 +- .../AutomationView/CommonTaskView/index.tsx | 2 +- .../PetFragmentLevelView/AddOptionsForm.tsx | 2 +- .../PetFragmentLevelView/EditOptionsForm.tsx | 2 +- .../PetFragmentLevelView/PanelRow.tsx | 13 +- .../PetFragmentLevelView/index.tsx | 7 +- .../shared/BattleSelector.tsx | 2 +- .../TaskStateView/RunnerDetailDialog.tsx | 4 +- .../AutomationView/TaskStateView/Sidebar.tsx | 6 +- .../AutomationView/TaskStateView/index.tsx | 3 +- .../src/views/CommonValue/CommonValue.tsx | 2 +- .../GameControllerView/AnimationMode.tsx | 5 +- .../GameControllerView/AutoCureState.tsx | 5 +- .../views/GameControllerView/BattleFire.tsx | 5 +- .../GameControllerView/Inventory/index.tsx | 3 +- .../GameControllerView/PetBag/PanelRow.tsx | 14 +- .../GameControllerView/PetBag/ToolBar.tsx | 2 +- .../views/GameControllerView/PetBag/index.tsx | 2 +- .../src/views/GameControllerView/index.tsx | 6 +- .../src/views/InitializationView/index.tsx | 32 +-- .../src/views/Main/{styled => }/Tab.tsx | 0 packages/launcher/src/views/Main/TabView.tsx | 7 +- packages/launcher/src/views/Main/index.tsx | 4 +- .../src/views/ModView/InstallView/Header.tsx | 9 +- .../InstallView/InstallFromLocalForm.tsx | 5 - .../views/ModView/ManagementView/Header.tsx | 9 +- .../launcher/src/views/PackageCapture.tsx | 224 +++++++++++++----- packages/launcher/src/views/QuickAccess.tsx | 2 +- packages/server/package.json | 2 +- 44 files changed, 326 insertions(+), 240 deletions(-) rename packages/launcher/src/components/{styled => }/HexagonalButton.tsx (85%) create mode 100644 packages/launcher/src/components/Paper.tsx rename packages/launcher/src/components/{styled => }/QuickAccess.tsx (55%) create mode 100644 packages/launcher/src/components/Row.tsx rename packages/launcher/src/components/{styled => }/TableRow.tsx (100%) delete mode 100644 packages/launcher/src/components/styled/Row.tsx rename packages/launcher/src/views/Main/{styled => }/Tab.tsx (100%) diff --git a/packages/core/package.json b/packages/core/package.json index 3fd82c8..53be7a3 100644 --- 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 index e160d30..0133ea4 100644 --- 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 index d5ba810..6338693 100644 --- 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) => ( - +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) => ( + {!error ? ( <> @@ -24,5 +23,5 @@ export const DataLoading = ({ sx, loadingText = '加载数据中', error }: Data ) : ( {error} )} - + ); diff --git a/packages/launcher/src/components/styled/HexagonalButton.tsx b/packages/launcher/src/components/HexagonalButton.tsx similarity index 85% rename from packages/launcher/src/components/styled/HexagonalButton.tsx rename to packages/launcher/src/components/HexagonalButton.tsx index 0824d59..f8ec7c9 100644 --- a/packages/launcher/src/components/styled/HexagonalButton.tsx +++ b/packages/launcher/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,11 +65,11 @@ 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; @@ -79,7 +77,7 @@ const StyledButtonRoot = styled(HexagonalButtonRoot)` } &: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 index d6f9e5b..56ccd3b 100644 --- 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) => ( + +))` + 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) { - return ; -} +` as typeof IconButton; diff --git a/packages/launcher/src/components/LabeledProgress.tsx b/packages/launcher/src/components/LabeledProgress.tsx index ccad9c9..16945e8 100644 --- 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,6 +10,10 @@ type LabeledProgressProps = LinearProgressProps & { typographyProps?: TypographyProps; }; +const FullWidthLinearProgress = styled(LinearProgress)` + width: 100%; +`; + export function LabeledLinearProgress({ progress, total, @@ -17,7 +21,6 @@ export function LabeledLinearProgress({ overridePrompt, labelPosition: position, typographyProps, - sx, ...rest }: LabeledProgressProps) { let display = prompt ?? ''; @@ -29,7 +32,7 @@ export function LabeledLinearProgress({ return ( {overridePrompt ?? display} - + ); } else if (position === 'right') { @@ -42,12 +45,7 @@ export function LabeledLinearProgress({ }} spacing={0} > - + {overridePrompt ?? display} @@ -67,12 +65,7 @@ export function LabeledLinearProgress({ {overridePrompt ?? display} - + ); } diff --git a/packages/launcher/src/components/LinerLoading.tsx b/packages/launcher/src/components/LinerLoading.tsx index d423bf6..c606e5e 100644 --- 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) => ( - +const StyledBox = styled(Box)` + display: flex; + justify-content: center; + align-items: stretch; + flex-direction: column; +` as typeof Box; + +export const LinerLoading = ({ ...props }: BoxProps) => ( + - + ); diff --git a/packages/launcher/src/components/Paper.tsx b/packages/launcher/src/components/Paper.tsx new file mode 100644 index 0000000..d1ab857 --- /dev/null +++ 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 index 8b8e2b1..1702593 100644 --- a/packages/launcher/src/components/PopupMenuButton.tsx +++ b/packages/launcher/src/components/PopupMenuButton.tsx @@ -84,7 +84,7 @@ export function PopupMenuButton({ {children} {data && data.length > 0 && ( - + {data.map((item, index) => ( 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 new file mode 100644 index 0000000..39d694b --- /dev/null +++ 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 index 44ae4c9..be7cec7 100644 --- 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/packages/launcher/src/components/styled/TableRow.tsx b/packages/launcher/src/components/TableRow.tsx similarity index 100% rename from packages/launcher/src/components/styled/TableRow.tsx rename to packages/launcher/src/components/TableRow.tsx diff --git a/packages/launcher/src/components/styled/Row.tsx b/packages/launcher/src/components/styled/Row.tsx deleted file mode 100644 index 77f75d0..0000000 --- a/packages/launcher/src/components/styled/Row.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { StackProps } from '@mui/material'; -import { Stack } from '@mui/material'; - -export function Row({ children, sx, ...props }: StackProps) { - return ( - - {children} - - ); -} diff --git a/packages/launcher/src/store.ts b/packages/launcher/src/store.ts index 08662fd..72f9a89 100644 --- 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 diff --git a/packages/launcher/src/theme.ts b/packages/launcher/src/theme.ts index 7172777..2c05ad8 100644 --- a/packages/launcher/src/theme.ts +++ b/packages/launcher/src/theme.ts @@ -71,7 +71,7 @@ export const theme = createTheme({ }, background: { default: alpha('#fff', 0.24), - paper: alpha(colors.primary, 0.08) + paper: alpha(colors.secondary, 0.88) }, divider: alpha(colors.primary, 0.16), extendedBackground: { @@ -125,7 +125,7 @@ export const theme = createTheme({ styleOverrides: { tooltip: { backgroundColor: alpha(colors.primary, 0.6), - backdropFilter: 'blur(4px)' + backdropFilter: 'blur(8px)' } } }, @@ -141,31 +141,28 @@ export const theme = createTheme({ root: ({ theme: { boxShadow } }) => ({ boxShadow, display: 'flex', - flexDirection: 'column' + flexDirection: 'column', + backdropFilter: 'blur(8px)' }) } }, MuiMenu: { styleOverrides: { + root: { + maxHeight: '60vh' + }, list: { backgroundColor: alpha(colors.secondary, 0.88), overflowY: 'auto' } } }, - MuiPopover: { - styleOverrides: { - paper: { - backdropFilter: 'blur(8px)' - } - } - }, MuiDialog: { styleOverrides: { paper: { backgroundImage: 'none', backgroundColor: alpha(colors.popup, 0.88), - backdropFilter: 'blur(4px)' + backdropFilter: 'blur(8px)' } } }, diff --git a/packages/launcher/src/views/AutomationView/CommonTaskView/index.tsx b/packages/launcher/src/views/AutomationView/CommonTaskView/index.tsx index 54a737f..d238f24 100644 --- a/packages/launcher/src/views/AutomationView/CommonTaskView/index.tsx +++ b/packages/launcher/src/views/AutomationView/CommonTaskView/index.tsx @@ -16,7 +16,7 @@ import { IconButtonNoRipple } from '@/components/IconButtonNoRipple'; import { SEAConfigForm } from '@/components/SEAConfigForm'; import { PanelTable, type PanelColumn } from '@/components/SEAPanelTable'; import { PanelField } from '@/components/SEAPanelTable/PanelField'; -import { TableRow } from '@/components/styled/TableRow'; +import { TableRow } from '@/components/TableRow'; import { PET_FRAGMENT_LEVEL_ID } from '@/constants'; import { mod, ModStore, type ModExportsRef, type TaskInstance } from '@/features/mod'; import { taskScheduler } from '@/features/taskScheduler'; diff --git a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/AddOptionsForm.tsx b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/AddOptionsForm.tsx index 3ad2677..f6f3c17 100644 --- a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/AddOptionsForm.tsx +++ b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/AddOptionsForm.tsx @@ -1,5 +1,5 @@ import type { PetFragmentOptions } from '@/builtin/petFragment/types'; -import { Row } from '@/components/styled/Row'; +import { Row } from '@/components/Row'; import { Autocomplete, Button, diff --git a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/EditOptionsForm.tsx b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/EditOptionsForm.tsx index b25600e..2f24a20 100644 --- a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/EditOptionsForm.tsx +++ b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/EditOptionsForm.tsx @@ -1,5 +1,5 @@ import type { PetFragmentOptions } from '@/builtin/petFragment/types'; -import { Row } from '@/components/styled/Row'; +import { Row } from '@/components/Row'; import { Button, Checkbox, diff --git a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/PanelRow.tsx b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/PanelRow.tsx index 133a39a..9a4b0c8 100644 --- a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/PanelRow.tsx +++ b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/PanelRow.tsx @@ -8,6 +8,7 @@ import Refresh from '@mui/icons-material/RefreshRounded'; import Settings from '@mui/icons-material/Settings'; import { + alpha, Chip, CircularProgress, Menu, @@ -23,9 +24,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { LevelAction, type Pet, query, SEAPetStore, spet } from '@sea/core'; import { IconButtonNoRipple } from '@/components/IconButtonNoRipple'; +import { Row } from '@/components/Row'; import { PanelField } from '@/components/SEAPanelTable/PanelField'; -import { Row } from '@/components/styled/Row'; -import { TableRow } from '@/components/styled/TableRow'; +import { TableRow } from '@/components/TableRow'; import type { IPetFragmentRunner, PetFragmentOptions } from '@/builtin/petFragment/types'; import { launcher } from '@/features/launcher'; @@ -182,7 +183,13 @@ export const PanelRow = React.memo(function PanelRow({ horizontal: 'center' }} slotProps={{ - paper: { sx: { p: 2, fontSize: '1rem' } } + paper: { + sx: { + p: 2, + backgroundColor: ({ palette }) => alpha(palette.primary.main, 0.08), + fontSize: '1rem' + } + } }} > diff --git a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/index.tsx b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/index.tsx index 1c9a25f..ca6f2ac 100644 --- a/packages/launcher/src/views/AutomationView/PetFragmentLevelView/index.tsx +++ b/packages/launcher/src/views/AutomationView/PetFragmentLevelView/index.tsx @@ -1,12 +1,13 @@ import Add from '@mui/icons-material/AddRounded'; -import { Button, Toolbar } from '@mui/material'; +import { Button } from '@mui/material'; import type { Recipe } from '@sea/server'; import { toRaw } from '@vue/reactivity'; import { produce } from 'immer'; import { useCallback, useState } from 'react'; import { DataLoading } from '@/components/DataLoading'; +import { Row } from '@/components/Row'; import { PanelTable, type PanelColumn } from '@/components/SEAPanelTable'; import type { PetFragmentOptions } from '@/builtin/petFragment/types'; @@ -84,7 +85,7 @@ export function PetFragmentLevelView() { mutate }} > - + - + alpha(palette.background.paper, 0.12), + bgcolor: ({ palette }) => alpha(palette.background.paper, 0.36), borderRadius: 1, fontFamily: ({ fonts }) => fonts.property, fontSize: '1.25rem', @@ -98,7 +98,7 @@ export const RunnerDetailDialog = React.memo(function RunnerDetailDialog({ sx={{ width: 'fit-content', px: 4, - bgcolor: ({ palette }) => alpha(palette.background.paper, 0.24), + bgcolor: ({ palette }) => alpha(palette.background.paper, 0.36), borderRadius: 2 }} > diff --git a/packages/launcher/src/views/AutomationView/TaskStateView/Sidebar.tsx b/packages/launcher/src/views/AutomationView/TaskStateView/Sidebar.tsx index 36ab8bc..e516b08 100644 --- a/packages/launcher/src/views/AutomationView/TaskStateView/Sidebar.tsx +++ b/packages/launcher/src/views/AutomationView/TaskStateView/Sidebar.tsx @@ -2,10 +2,12 @@ import Pause from '@mui/icons-material/PauseRounded'; import PlayArrow from '@mui/icons-material/PlayArrowRounded'; import { LabeledLinearProgress } from '@/components/LabeledProgress'; -import { Row } from '@/components/styled/Row'; +import { Paper } from '@/components/Paper'; +import { Row } from '@/components/Row'; +import { Button, ButtonGroup, Chip, Stack, Typography } from '@mui/material'; + import { taskScheduler } from '@/features/taskScheduler'; import { useAppDispatch, useAppSelector } from '@/shared'; -import { Button, ButtonGroup, Chip, Paper, Stack, Typography } from '@mui/material'; const StatusTextMap = { idle: '就绪', diff --git a/packages/launcher/src/views/AutomationView/TaskStateView/index.tsx b/packages/launcher/src/views/AutomationView/TaskStateView/index.tsx index 575911e..45db8d1 100644 --- a/packages/launcher/src/views/AutomationView/TaskStateView/index.tsx +++ b/packages/launcher/src/views/AutomationView/TaskStateView/index.tsx @@ -9,7 +9,7 @@ export function TaskStateView() { const matchMd = useMediaQuery(theme.breakpoints.up('md')); return ( - + alpha(palette.primary.main, 0.08), + fontSize: '1rem' + } + } }} > diff --git a/packages/launcher/src/views/GameControllerView/PetBag/ToolBar.tsx b/packages/launcher/src/views/GameControllerView/PetBag/ToolBar.tsx index ec0ba07..dbd060d 100644 --- a/packages/launcher/src/views/GameControllerView/PetBag/ToolBar.tsx +++ b/packages/launcher/src/views/GameControllerView/PetBag/ToolBar.tsx @@ -1,6 +1,6 @@ import { IconButtonNoRipple as IconButton } from '@/components/IconButtonNoRipple'; import { PopupMenuButton } from '@/components/PopupMenuButton'; -import { Row } from '@/components/styled/Row'; +import { Row } from '@/components/Row'; import { Backpack } from '@/components/icons/Backpack'; import { HealthBroken } from '@/components/icons/HealthBroken'; diff --git a/packages/launcher/src/views/GameControllerView/PetBag/index.tsx b/packages/launcher/src/views/GameControllerView/PetBag/index.tsx index f463005..c574c2a 100644 --- a/packages/launcher/src/views/GameControllerView/PetBag/index.tsx +++ b/packages/launcher/src/views/GameControllerView/PetBag/index.tsx @@ -65,7 +65,7 @@ export function PetBag() { if (!pets) return ; return ( - + @@ -24,7 +22,7 @@ export function GameController() { sx={{ alignItems: 'stretch', justifyContent: 'center', - minWidth: '232px' + minWidth: '256px' }} > @@ -43,7 +41,7 @@ export function GameController() { - + diff --git a/packages/launcher/src/views/InitializationView/index.tsx b/packages/launcher/src/views/InitializationView/index.tsx index bca4cb2..e4619f7 100644 --- a/packages/launcher/src/views/InitializationView/index.tsx +++ b/packages/launcher/src/views/InitializationView/index.tsx @@ -1,5 +1,4 @@ -import { Box, Fade, type BoxProps } from '@mui/material'; -import { forwardRef } from 'react'; +import { Box, Fade, styled } from '@mui/material'; import { initializer } from '@/features/initializer'; import { useAppSelector } from '@/shared'; @@ -8,25 +7,16 @@ import { CoreLoadingScreen } from './CoreLoadingScreen'; import { ErrorScreen } from './ErrorScreen'; import { LoginLoadingScreen } from './LoginLoadingScreen'; -const Container = forwardRef(function Container({ sx, ...props }, ref) { - return ( - - ); -}); +const Container = styled(Box)` + position: relative; + display: flex; + z-index: 1; + width: 100vw; + height: 100vh; + flex-direction: column; + align-items: center; + justify-content: center; +` as typeof Box; export function InitializationView() { const status = useAppSelector(initializer.status); diff --git a/packages/launcher/src/views/Main/styled/Tab.tsx b/packages/launcher/src/views/Main/Tab.tsx similarity index 100% rename from packages/launcher/src/views/Main/styled/Tab.tsx rename to packages/launcher/src/views/Main/Tab.tsx diff --git a/packages/launcher/src/views/Main/TabView.tsx b/packages/launcher/src/views/Main/TabView.tsx index a7f6925..56c6651 100644 --- a/packages/launcher/src/views/Main/TabView.tsx +++ b/packages/launcher/src/views/Main/TabView.tsx @@ -1,11 +1,12 @@ -import { alpha, Box, Fade, Paper, Stack, Tabs, Typography, useTheme } from '@mui/material'; +import { Paper } from '@/components/Paper'; +import { alpha, Box, Fade, Stack, Tabs, Typography, useTheme } from '@mui/material'; import { seac } from '@sea/core'; import { forwardRef, type ReactElement } from 'react'; import { SwitchTransition } from 'react-transition-group'; import { VERSION } from '@/constants'; import { useTabRouter, type ViewNode } from '@/context/useTabRouter'; -import { StyledTab } from './styled/Tab'; +import { StyledTab } from './Tab'; import ArrowBack from '@mui/icons-material/ArrowBackRounded'; @@ -202,7 +203,7 @@ export function TabView() { id={`vertical-tabpanel-${currentTab}`} aria-labelledby={`vertical-tab-${currentTab}`} role="tabpanel" - sx={{ paddingLeft: '12px', overflowY: 'scroll', width: '100%' }} + sx={{ pl: 3, py: 3, overflowY: 'scroll', width: '100%' }} > {currentView} diff --git a/packages/launcher/src/views/Main/index.tsx b/packages/launcher/src/views/Main/index.tsx index e1d33f1..f8b37bb 100644 --- a/packages/launcher/src/views/Main/index.tsx +++ b/packages/launcher/src/views/Main/index.tsx @@ -2,7 +2,7 @@ import ElectricBolt from '@mui/icons-material/ElectricBolt'; import { Backdrop, alpha, type ButtonProps } from '@mui/material'; import type { PropsWithChildren } from 'react'; -import { HexagonalButton } from '@/components/styled/HexagonalButton'; +import { HexagonalButton } from '@/components/HexagonalButton'; import { TabRouterProvider } from '@/context/TabRouterProvider'; import { launcher } from '@/features/launcher'; import { useAppDispatch } from '@/shared'; @@ -33,7 +33,7 @@ const MainBackdrop = ({ open, children }: PropsWithChildren<{ open: boolean }>) theme.zIndex.appBar - 1 }} diff --git a/packages/launcher/src/views/ModView/InstallView/Header.tsx b/packages/launcher/src/views/ModView/InstallView/Header.tsx index 2f2fbbe..97a8d61 100644 --- a/packages/launcher/src/views/ModView/InstallView/Header.tsx +++ b/packages/launcher/src/views/ModView/InstallView/Header.tsx @@ -1,14 +1,17 @@ -import { alpha, Toolbar } from '@mui/material'; +import { Row } from '@/components/Row'; +import { alpha } from '@mui/material'; import { InstallFromLocalForm } from './InstallFromLocalForm'; export function Header() { return ( - `1px solid ${alpha(palette.divider, 0.12)}` }} + spacing={2} > - + ); } diff --git a/packages/launcher/src/views/ModView/InstallView/InstallFromLocalForm.tsx b/packages/launcher/src/views/ModView/InstallView/InstallFromLocalForm.tsx index 4ce5fd0..1da74a7 100644 --- a/packages/launcher/src/views/ModView/InstallView/InstallFromLocalForm.tsx +++ b/packages/launcher/src/views/ModView/InstallView/InstallFromLocalForm.tsx @@ -85,11 +85,6 @@ export function InstallFromLocalForm() { } }} PaperProps={{ - sx: { - backgroundImage: 'none', - bgcolor: ({ palette }) => palette.extendedBackground.popup, - backdropFilter: 'blur(4px)' - }, component: 'form', onSubmit: (event: React.FormEvent) => { event.preventDefault(); diff --git a/packages/launcher/src/views/ModView/ManagementView/Header.tsx b/packages/launcher/src/views/ModView/ManagementView/Header.tsx index 78cea85..f999a21 100644 --- a/packages/launcher/src/views/ModView/ManagementView/Header.tsx +++ b/packages/launcher/src/views/ModView/ManagementView/Header.tsx @@ -1,9 +1,10 @@ -import { Button, CircularProgress, Toolbar, alpha } from '@mui/material'; +import { Button, CircularProgress, alpha } from '@mui/material'; import { useState } from 'react'; import { delay } from '@sea/core'; import { getCompositeId } from '@sea/mod-resolver'; +import { Row } from '@/components/Row'; import { mod } from '@/features/mod'; import { modApi } from '@/services/mod'; import { useAppDispatch } from '@/shared'; @@ -16,10 +17,12 @@ export function Header() { const [refetch, { isFetching }] = modApi.endpoints.indexList.useLazyQuery(); return ( - `1px solid ${alpha(palette.divider, 0.12)}` }} + spacing={2} > - + ); } diff --git a/packages/launcher/src/views/PackageCapture.tsx b/packages/launcher/src/views/PackageCapture.tsx index f3fb289..2e2bdec 100644 --- a/packages/launcher/src/views/PackageCapture.tsx +++ b/packages/launcher/src/views/PackageCapture.tsx @@ -1,32 +1,136 @@ +import FileUpload from '@mui/icons-material/FileUploadRounded'; +import Replay from '@mui/icons-material/ReplayRounded'; + +import { Row } from '@/components/Row'; import { packetCapture, type PacketEvent } from '@/features/packetCapture'; import { useAppDispatch } from '@/shared'; -import { Button, Toolbar } from '@mui/material'; -import { DataGrid, type GridColDef } from '@mui/x-data-grid'; - -// dumpListener() { -// for (const [k, v] of this.listenerList.entries()) { -// if (v.length > 0) { -// console.log(`${k} : ${socketEncryptImpl.getCmdLabel(k)}`); -// console.table(v); -// } -// } -// } +import { alpha, Box, Button, Tooltip } from '@mui/material'; +import { + DataGrid, + GridActionsCellItem, + gridFilteredSortedRowEntriesSelector, + useGridApiRef, + type GridActionsCellItemProps, + type GridColDef, + type GridRowParams +} from '@mui/x-data-grid'; +import dayjs from 'dayjs'; +import { type ReactElement } from 'react'; const columns: Array> = [ - { field: 'time', headerName: '时间' }, - { field: 'type', headerName: '类型' }, - { field: 'cmd', headerName: '命令ID' }, - { field: 'label', headerName: '命令名' }, - { field: 'data', headerName: '操作' } + { + field: 'time', + headerName: '时间', + type: 'dateTime', + minWidth: 100, + valueGetter: (value: number) => new Date(value), + valueFormatter: (value: Date) => dayjs(value).format('HH:mm:ss') + }, + { + field: 'type', + type: 'singleSelect', + headerName: '类型', + minWidth: 100, + valueOptions: ['RemoveListener', 'AddListener', 'Received', 'Send'] + }, + { + field: 'cmd', + headerName: '命令ID', + // 存在性能问题 + // type: 'singleSelect', + // valueOptions: () => Object.values(CommandID), + minWidth: 100, + align: 'center', + headerAlign: 'center' + }, + { + field: 'label', + headerName: '命令名', + // type: 'singleSelect', + // valueOptions: () => Object.keys(CommandID), + width: 200, + minWidth: 200, + align: 'center', + headerAlign: 'center' + }, + { + field: 'value', + headerName: '值', + valueGetter: (value, row) => { + switch (row.type) { + case 'Send': + if (row.buffer) { + const r: Array = []; + row.buffer.forEach((v) => { + if (typeof v === 'number') { + r.push(v); + } else if (v instanceof Uint8Array) { + r.push(`Buffer(${v.length})`); + } + }); + return r; + } else { + return null; + } + case 'Received': + if (row.data instanceof Uint8Array) { + return `Buffer(${row.data.length})`; + } else { + return JSON.stringify(row.data ?? null); + } + } + } + }, + { + field: 'operation', + headerName: '操作', + type: 'actions', + width: 160, + resizable: false, + getActions: ({ row: pkg }: GridRowParams) => + [ + + } + onClick={() => { + console.log(pkg); + }} + /> + , + pkg.type === 'Send' && ( + + } + onClick={() => { + const data = pkg.buffer; + if (typeof data === 'undefined') { + SocketConnection.mainSocket.send(pkg.cmd, []); + } else if (Array.isArray(data)) { + SocketConnection.mainSocket.send( + pkg.cmd, + data.map((d) => (d instanceof Uint8Array ? new egret.ByteArray(d) : d)) + ); + } else { + SocketConnection.mainSocket.send(pkg.cmd, [new egret.ByteArray(data)]); + } + }} + /> + + ) + ].filter(Boolean) as Array> + } ]; export function PackageCapture() { + const apiRef = useGridApiRef(); const dispatch = useAppDispatch(); const { running, packets } = packetCapture.useSelectProps('running', 'packets'); return ( - <> - + + - + - - - ({ id: d.index, ...d }))} /> - + + alpha(palette.extendedBackground.emphasize, 1) + }, + '& .MuiDataGrid-row--borderBottom[role=row]': { + backgroundColor: 'unset' + }, + '& .MuiDataGrid-footerContainer': { + minHeight: '56px' + }, + '& .MuiDataGrid-menu.MuiPaper-root': { + backgroundColor: ({ palette }) => alpha(palette.secondary.main, 0.88), + backdropFilter: 'blur(8px)' + }, + '& .MuiDataGrid-overlay': { + background: 'none', + border: 'none' + } + }} + columns={columns} + rowBufferPx={300} + rows={packets.map((d) => ({ id: d.index, ...d }))} + /> + ); } - -// const PanelRow = memo(function PanelRow({ pkg }: { pkg: PacketEvent }) { -// return ( -// -// {dayjs(pkg.time).format('HH:mm:ss')} -// {pkg.type} -// {pkg.cmd} -// {pkg.label} -// -// -// {pkg.type === 'Send' && ( -// -// )} -// -// -// ); -// }); diff --git a/packages/launcher/src/views/QuickAccess.tsx b/packages/launcher/src/views/QuickAccess.tsx index f1c04f4..0c50765 100644 --- a/packages/launcher/src/views/QuickAccess.tsx +++ b/packages/launcher/src/views/QuickAccess.tsx @@ -5,7 +5,7 @@ import { shallowEqual } from 'react-redux'; import type { AnyFunction } from '@sea/core'; -import { SeaQuickAccess } from '@/components/styled/QuickAccess'; +import { SeaQuickAccess } from '@/components/QuickAccess'; import { mod, ModStore, type ModExportsRef } from '@/features/mod'; import { useAppSelector } from '@/shared'; diff --git a/packages/server/package.json b/packages/server/package.json index b6e406c..6b2c19c 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -14,7 +14,7 @@ "build": "esbuild ./src/index.ts --bundle --platform=node --target=node20.11.1 --outfile=./src/index.cjs --allow-overwrite --external:thread-stream", "executable": "pkg ./src/index.cjs -c package.json -o ./bin/server.exe", "watch:tsc": "tsc --watch", - "lint": "eslint . --fix", + "lint": "eslint .", "test": "vitest" }, "dependencies": {