From 3ece5e2e96a83aabfb465378df2ac86d7681f0e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= Date: Fri, 13 Feb 2026 23:46:16 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20ESLint=20=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=8F=8A=E7=BB=84=E4=BB=B6=E5=BC=83=E7=94=A8=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E8=AD=A6=E5=91=8A=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 工程配置： - 更新 tsconfig.json include 规则，解决 eslint.config.ts 未被包含的问题。 2. 组件重构 (Material UI 适配)： - Navbar: 替换已弃用的 PaperProps 为 slotProps.paper。 - TimestampToDatetime / DatetimeToTimestamp: 替换已弃用的 InputProps 为 slotProps.input。 3. 类型与逻辑修复： - utils/recordUtils.tsx: 引入缺失依赖，忽略 UNSAFE_replayCanvas 等类型报错，修复构建问题。 - utils/messages.tsx: 完善事件参数类型定义。 4. 其他优化： - 统一 App.css 代码格式。 - 补充部分组件 (CopyButton, TimestampExecution) 的 React 导入和类型定义。 --- components/CopyButton.tsx | 2 +- components/DatetimeToTimestamp.tsx | 10 ++++++---- components/Navbar.tsx | 10 ++++++---- components/TimestampExecution.tsx | 29 ++++++----------------------- components/TimestampToDatetime.tsx | 12 +++++++----- entrypoints/popup/App.css | 1 - tsconfig.json | 5 +++-- utils/messages.tsx | 2 +- utils/recordUtils.tsx | 11 +++++++---- 9 files changed, 37 insertions(+), 45 deletions(-) diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx index fd196bf..1571093 100644 --- a/components/CopyButton.tsx +++ b/components/CopyButton.tsx @@ -1,4 +1,4 @@ -import { useState, useCallback, FC, ReactNode, useEffect } from 'react'; +import React, { useState, useCallback, FC, ReactNode, useEffect } from 'react'; import Button, { ButtonProps } from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import Alert, { AlertColor } from '@mui/material/Alert'; diff --git a/components/DatetimeToTimestamp.tsx b/components/DatetimeToTimestamp.tsx index 9bdc2f6..3ccd2f9 100644 --- a/components/DatetimeToTimestamp.tsx +++ b/components/DatetimeToTimestamp.tsx @@ -70,7 +70,7 @@ export function DatetimeToTimestamp() { }, [dateValue, selectedZone, unit, performConversion]); const handleUnitChange = useCallback( - (e: SelectChangeEvent) => { + (e: SelectChangeEvent) => { const newUnit = e.target.value; setUnit(newUnit); if (result) { @@ -80,7 +80,7 @@ export function DatetimeToTimestamp() { [dateValue, selectedZone, result, performConversion], ); - const handleZoneChange = useCallback((e: SelectChangeEvent) => { + const handleZoneChange = useCallback((e: SelectChangeEvent) => { setSelectedZone(e.target.value); }, []); @@ -129,8 +129,10 @@ export function DatetimeToTimestamp() { value={result} fullWidth variant="outlined" - InputProps={{ - readOnly: true, + slotProps={{ + input: { + readOnly: true, + }, }} /> diff --git a/components/Navbar.tsx b/components/Navbar.tsx index f306c3f..0b50059 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -88,10 +88,12 @@ function Navbar({ items = [] }: NavbarProps) { anchorEl={anchorEl} open={isMenuOpen} onClose={handleMenuClose} - PaperProps={{ - style: { - maxHeight: 48 * 4.5, - width: '20ch', + slotProps={{ + paper: { + style: { + maxHeight: 48 * 4.5, + width: '20ch', + }, }, }} > diff --git a/components/TimestampExecution.tsx b/components/TimestampExecution.tsx index 279562a..a912131 100644 --- a/components/TimestampExecution.tsx +++ b/components/TimestampExecution.tsx @@ -1,22 +1,12 @@ -import { useEffect, useState, useCallback } from 'react'; +import { useEffect, useState, useCallback, JSX } from 'react'; import CopyButton from './CopyButton'; import { Button, Paper, Typography, Stack, Box } from '@mui/material'; /** * 时间戳显示和执行组件 - * - * @component - * @example - * ```jsx - * - * ``` - * - * @returns {JSX.Element} 时间戳组件 */ -export function TimestampExecution() { - const [currentTimestamp, setCurrentTimestamp] = useState(() => - Math.floor(Date.now()), - ); +export function TimestampExecution(): JSX.Element { + const [currentTimestamp, setCurrentTimestamp] = useState(() => Math.floor(Date.now())); const [showMilliseconds, setShowMilliseconds] = useState(true); const [isRunningTimestamp, setIsRunningTimestamp] = useState(true); @@ -45,19 +35,12 @@ export function TimestampExecution() { setIsRunningTimestamp((prev) => !prev); }, []); - const unitButtonLabel = showMilliseconds - ? '切换为秒显示' - : '切换为毫秒显示'; - const toggleButtonLabel = isRunningTimestamp - ? '停止时间戳自动更新' - : '开始时间戳自动更新'; + const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示'; + const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新'; const toggleButtonText = isRunningTimestamp ? '停止' : '开始'; return ( - + ) => { + (e: SelectChangeEvent) => { const newZone = e.target.value; setSelectedZone(newZone); if (timestampResult) { @@ -96,7 +96,7 @@ export function TimestampToDatetime() { ); const handleUnitChange = useCallback( - (e: SelectChangeEvent) => { + (e: SelectChangeEvent) => { const newUnit = e.target.value; setUnit(newUnit); if (timestampResult) { @@ -150,8 +150,10 @@ export function TimestampToDatetime() { value={timestampResult} fullWidth variant="outlined" - InputProps={{ - readOnly: true, + slotProps={{ + input: { + readOnly: true, + }, }} /> diff --git a/entrypoints/popup/App.css b/entrypoints/popup/App.css index 4ac0fca..96d0316 100644 --- a/entrypoints/popup/App.css +++ b/entrypoints/popup/App.css @@ -147,7 +147,6 @@ body { .nav-collapse-content .nav-link { padding: 12px 20px; - border-bottom: 1px solid #f8f9fa; width: 100%; text-align: left; box-sizing: border-box; diff --git a/tsconfig.json b/tsconfig.json index 263e7b8..5231664 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -49,7 +49,8 @@ "hooks/**/*", ".wxt/types/**/*.ts", ".wxt/types/*.d.ts", - "components" + "components", + "eslint.config.ts" ], - "exclude": ["node_modules", ".wxt", "eslint.config.ts"] + "exclude": ["node_modules", ".wxt"] } diff --git a/utils/messages.tsx b/utils/messages.tsx index c1d8e06..c9f3b97 100644 --- a/utils/messages.tsx +++ b/utils/messages.tsx @@ -41,7 +41,7 @@ interface ProtocolMap { 'popup:ready': () => void; // --- Content 相关 --- - 'content:save-tracke-events': (event) => boolean; + 'content:save-tracke-events': (event: unknown) => boolean; 'content:start-recording': () => { ok: boolean; error?: string }; 'content:stop-recording': () => { ok: boolean }; 'content:check-status': () => boolean; diff --git a/utils/recordUtils.tsx b/utils/recordUtils.tsx index 18c7ba0..7f13962 100644 --- a/utils/recordUtils.tsx +++ b/utils/recordUtils.tsx @@ -21,7 +21,8 @@ export const downloadHtmlInBackground = (events: unknown[]) => { @@ -59,7 +62,7 @@ export const downloadHtmlInBackground = (events: unknown[]) => { url: reader.result as string, filename: `replay-${Date.now()}.html`, saveAs: true, - }); + }).then(r => console.log(r)); }; reader.readAsDataURL(blob); };