diff --git a/src/components/home/enhanced-canvas-traffic-graph.tsx b/src/components/home/enhanced-canvas-traffic-graph.tsx index c4cc1a74c..ecabcee64 100644 --- a/src/components/home/enhanced-canvas-traffic-graph.tsx +++ b/src/components/home/enhanced-canvas-traffic-graph.tsx @@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next' import { useTrafficGraphDataEnhanced } from '@/hooks/use-traffic-monitor' import { useVerge } from '@/hooks/use-verge' -import { debugLog } from '@/utils/debug' import parseTraffic from '@/utils/parse-traffic' import { formatTrafficHourMinute, @@ -23,14 +22,7 @@ import { isSameTrafficData, } from '@/utils/traffic-sampler' -interface ITrafficItem { - up: number - down: number - timestamp?: number -} - export interface EnhancedCanvasTrafficGraphRef { - appendData: (data: ITrafficItem) => void toggleStyle: () => void } @@ -142,7 +134,6 @@ export const EnhancedCanvasTrafficGraph = memo( [], ) const debounceTimeoutRef = useRef(null) - const [currentFPS, setCurrentFPS] = useState(GRAPH_CONFIG.targetFPS) const colors = useMemo( () => ({ @@ -183,8 +174,6 @@ export const EnhancedCanvasTrafficGraph = memo( if (displayData.length === 0) { lastDataTimestampRef.current = 0 dataStaleRef.current = false - // eslint-disable-next-line @eslint-react/set-state-in-effect - setCurrentFPS(GRAPH_CONFIG.targetFPS) return } @@ -200,18 +189,11 @@ export const EnhancedCanvasTrafficGraph = memo( } }, [displayData]) - const handleFocusStateChange = useCallback( - (focused: boolean) => { - isWindowFocusedRef.current = focused + const handleFocusStateChange = useCallback((focused: boolean) => { + isWindowFocusedRef.current = focused - if (focused || !pause_render_traffic_stats_on_blur) { - setCurrentFPS(GRAPH_CONFIG.targetFPS) - } - - scheduleDrawGraphRef.current() - }, - [pause_render_traffic_stats_on_blur], - ) + scheduleDrawGraphRef.current() + }, []) useEffect(() => { if (typeof window === 'undefined' || typeof document === 'undefined') { @@ -684,19 +666,13 @@ export const EnhancedCanvasTrafficGraph = memo( ctx.beginPath() ctx.moveTo(getX(0), getY(0)) - if (chartStyle === 'bezier') { - for (let i = 1; i < data.length; i++) { - const currentX = getX(i) - const currentY = getY(i) - const nextIndex = Math.min(i + 1, lastIndex) - const controlX = (currentX + getX(nextIndex)) / 2 - const controlY = (currentY + getY(nextIndex)) / 2 - ctx.quadraticCurveTo(currentX, currentY, controlX, controlY) - } - } else { - for (let i = 1; i < data.length; i++) { - ctx.lineTo(getX(i), getY(i)) - } + for (let i = 1; i < data.length; i++) { + const currentX = getX(i) + const currentY = getY(i) + const nextIndex = Math.min(i + 1, lastIndex) + const controlX = (currentX + getX(nextIndex)) / 2 + const controlY = (currentY + getY(nextIndex)) / 2 + ctx.quadraticCurveTo(currentX, currentY, controlX, controlY) } ctx.lineTo(getX(lastIndex), height - padding.bottom) @@ -984,21 +960,7 @@ export const EnhancedCanvasTrafficGraph = memo( setChartStyle((prev) => (prev === 'bezier' ? 'line' : 'bezier')) }, []) - const appendData = useCallback((data: ITrafficItem) => { - debugLog( - '[EnhancedCanvasTrafficGraphV2] appendData called (using global data):', - data, - ) - }, []) - - useImperativeHandle( - ref, - () => ({ - appendData, - toggleStyle, - }), - [appendData, toggleStyle], - ) + useImperativeHandle(ref, () => ({ toggleStyle }), [toggleStyle]) const getTimeRangeText = useCallback(() => { return t('home.components.traffic.patterns.minutes', { @@ -1142,7 +1104,7 @@ export const EnhancedCanvasTrafficGraph = memo( {t('home.components.traffic.diagnostics', { points: displayData.length, compressed: samplerStats.compressedBufferSize, - fps: currentFPS, + fps: GRAPH_CONFIG.targetFPS, })} diff --git a/src/components/home/system-info-card.tsx b/src/components/home/system-info-card.tsx index d71aa039a..ee1593cc8 100644 --- a/src/components/home/system-info-card.tsx +++ b/src/components/home/system-info-card.tsx @@ -86,16 +86,11 @@ export const SystemInfoCard = () => { }, [verge, patchVerge]) const handleRunningModeClick = useCallback(async () => { - if (isSidecarMode || (isAdminMode && isSidecarMode)) { + if (isSidecarMode) { await installServiceAndRestartCore() await mutateSystemState() } - }, [ - isSidecarMode, - isAdminMode, - installServiceAndRestartCore, - mutateSystemState, - ]) + }, [isSidecarMode, installServiceAndRestartCore, mutateSystemState]) const onCheckUpdate = useLockFn(async () => { try { @@ -122,18 +117,16 @@ export const SystemInfoCard = () => { const runningModeStyle = useMemo( () => ({ - cursor: - isSidecarMode || (isAdminMode && isSidecarMode) ? 'pointer' : 'default', - textDecoration: - isSidecarMode || (isAdminMode && isSidecarMode) ? 'underline' : 'none', + cursor: isSidecarMode ? 'pointer' : 'default', + textDecoration: isSidecarMode ? 'underline' : 'none', display: 'flex', alignItems: 'center', gap: 0.5, '&:hover': { - opacity: isSidecarMode || (isAdminMode && isSidecarMode) ? 0.7 : 1, + opacity: isSidecarMode ? 0.7 : 1, }, }), - [isSidecarMode, isAdminMode], + [isSidecarMode], ) const getModeIcon = () => { diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx index 5a248e561..b7d50e5d6 100644 --- a/src/components/layout/layout-traffic.tsx +++ b/src/components/layout/layout-traffic.tsx @@ -130,7 +130,6 @@ export const LayoutTraffic = () => { cursor: 'auto', }} color={'disabled'} - onClick={async () => {}} > {inuse} diff --git a/src/components/layout/window-controller.tsx b/src/components/layout/window-controller.tsx index 1df4b5f65..d6797790e 100644 --- a/src/components/layout/window-controller.tsx +++ b/src/components/layout/window-controller.tsx @@ -1,11 +1,6 @@ import { Close, CropSquare, FilterNone, Minimize } from '@mui/icons-material' import { Box, IconButton } from '@mui/material' -import { - forwardRef, - type PointerEvent, - useCallback, - useImperativeHandle, -} from 'react' +import { type PointerEvent, useCallback } from 'react' import { useWindowControls } from '@/hooks/use-window' import getSystem from '@/utils/get-system' @@ -63,36 +58,9 @@ export const WindowResizeHandles = () => { ) } -export const WindowControls = forwardRef(function WindowControls(props, ref) { +export const WindowControls = () => { const OS = getSystem() - const { - currentWindow, - maximized, - minimize, - close, - toggleFullscreen, - toggleMaximize, - } = useWindowControls() - - useImperativeHandle( - ref, - () => ({ - currentWindow, - maximized, - minimize, - close, - toggleFullscreen, - toggleMaximize, - }), - [ - currentWindow, - maximized, - minimize, - close, - toggleFullscreen, - toggleMaximize, - ], - ) + const { maximized, minimize, close, toggleMaximize } = useWindowControls() // 通过前端对 tauri 窗口进行翻转全屏时会短暂地与系统图标重叠渲染。 // 这可能是上游缺陷,保险起见跨平台以窗口的最大化翻转为准。 @@ -186,4 +154,4 @@ export const WindowControls = forwardRef(function WindowControls(props, ref) { )} ) -}) +} diff --git a/src/hooks/use-icon-cache.ts b/src/hooks/use-icon-cache.ts index 49a93a7ce..85bd3358a 100644 --- a/src/hooks/use-icon-cache.ts +++ b/src/hooks/use-icon-cache.ts @@ -1,5 +1,4 @@ import { convertFileSrc } from '@tauri-apps/api/core' -import { useMemo } from 'react' import { downloadIconCache } from '@/services/cmds' import { useQuery } from '@/services/query-client' @@ -23,9 +22,8 @@ export const useIconCache = ({ const iconValue = icon?.trim() ?? '' const cacheKeyValue = cacheKey?.trim() ?? '' - const isEnabled = useMemo(() => { - return enabled && iconValue.startsWith('http') && cacheKeyValue !== '' - }, [enabled, iconValue, cacheKeyValue]) + const isEnabled = + enabled && iconValue.startsWith('http') && cacheKeyValue !== '' const { data } = useQuery({ queryKey: ['icon-cache', iconValue, cacheKeyValue], diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx index 59625514e..b7c6ec930 100644 --- a/src/pages/_layout.tsx +++ b/src/pages/_layout.tsx @@ -1,7 +1,7 @@ import { Paper, ThemeProvider } from '@mui/material' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' -import { useCallback, useEffect, useMemo, useRef } from 'react' +import { useCallback, useEffect, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { Outlet, useNavigate } from 'react-router' @@ -46,7 +46,6 @@ const Layout = () => { const { switchLanguage } = useI18n() const navigate = useNavigate() const themeReady = useMemo(() => Boolean(theme), [theme]) - const windowControlsRef = useRef(null) const { decorated } = useWindowDecorations() const customTitlebar = useMemo( @@ -57,7 +56,7 @@ const Layout = () => { className="the_titlebar-drag-region" data-tauri-drag-region="true" /> - + ) : null, [decorated], @@ -110,20 +109,6 @@ const Layout = () => { -
- { const { t } = useTranslation() const location = useLocation() const [url, setUrl] = useState('') - const [disabled, setDisabled] = useState(false) const [profileDndRevision, setProfileDndRevision] = useState(0) const [activatings, setActivatings] = useState([]) const [switchTarget, setSwitchTarget] = useState(null) @@ -257,7 +256,6 @@ const ProfilePage = () => { ) } } finally { - setDisabled(false) setLoading(false) } } @@ -824,7 +822,7 @@ const ProfilePage = () => { if (event.key !== 'Enter' || event.nativeEvent.isComposing) { return } - if (!url || disabled || loading) { + if (!url || loading) { return } event.preventDefault() @@ -857,7 +855,7 @@ const ProfilePage = () => { }} />