diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..af61745 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,19 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": false, + "quoteProps": "as-needed", + "jsxSingleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "arrowParens": "always", + "requirePragma": false, + "insertPragma": false, + "proseWrap": "preserve", + "htmlWhitespaceSensitivity": "ignore", + "endOfLine": "auto" +} + diff --git a/src/App.js b/src/App.js index ade4a5e..1b5526c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,4 @@ import {HashRouter as Router, Routes, Route} from 'react-router-dom'; -import ActionsPage from './pages/ActionsPage'; import TimestampPage from './pages/TimestampPage'; import './App.css'; @@ -9,7 +8,6 @@ function App() {
}/> - }/> }/>
diff --git a/src/pages/ActionsPage.js b/src/pages/ActionsPage.js deleted file mode 100644 index a55999c..0000000 --- a/src/pages/ActionsPage.js +++ /dev/null @@ -1,26 +0,0 @@ -import { Link } from 'react-router-dom'; - -const ActionsPage = () => { - return ( -
-

Actions Page

-

Perform user actions here (e.g., add, edit, delete).

- -
- - -
- - {/* Link back to UserListPage */} - - Back to User List - - - - Go to Timestamp - -
- ); -}; - -export default ActionsPage; diff --git a/src/pages/TimestampPage.js b/src/pages/TimestampPage.js index e46ef4c..a22310f 100644 --- a/src/pages/TimestampPage.js +++ b/src/pages/TimestampPage.js @@ -1,55 +1,48 @@ -import {useState, useEffect, useRef, useCallback, useMemo} from 'react'; +import {useState, useEffect} from 'react'; import CopyButton from "../components/CopyButton"; - -function formatDate(value) { - return (new Intl.DateTimeFormat('zh-CN', { - year: 'numeric', - month: 'numeric', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', - })).format(value); -} +import {formatDate} from "../utils/timeUtils"; const TimestampPage = () => { const [currentTimestamp, setCurrentTimestamp] = useState(Math.floor(Date.now())); const [showMilliseconds, setShowMilliseconds] = useState(true); const [isRunningTimestamp, setIsRunningTimestamp] = useState(true); - const intervalRef = useRef(null); const [timestampValue, setTimestampValue] = useState(Date.now()); const [dateValue, setDateValue] = useState(formatDate(Date.now())); const [timestampResult, setTimestampResult] = useState(''); const [dateResult, setDateResult] = useState(''); + // 定时更新时间戳 useEffect(() => { + let timerId = null; + if (isRunningTimestamp) { - intervalRef.current = setInterval(() => { + timerId = setInterval(() => { setCurrentTimestamp(Math.floor(Date.now())); }, 1000); } return () => { - if (intervalRef.current) { - clearInterval(intervalRef.current); + if (timerId) { + clearInterval(timerId); + timerId = null; } } }, [isRunningTimestamp]); - function handleChangeUnit() { - setShowMilliseconds(!showMilliseconds); + function toggleUnit() { + setShowMilliseconds(prev => !prev); } - const handleToggleTimestampRunning = useCallback(() => { - const newStatus = !isRunningTimestamp; - setIsRunningTimestamp(newStatus); - console.log(newStatus ? '开始时间戳' : '停止时间戳'); - }, [isRunningTimestamp]); - useMemo(() => ({ - backgroundColor: isRunningTimestamp ? 'red' : 'green' - }), [isRunningTimestamp]); + function toggleTimestamp() { + setIsRunningTimestamp((prev => !prev)); + } function handleConvertTimestampToDate() { + if (!timestampValue) { + setTimestampResult('请输入时间戳'); + return; + } + setTimestampResult(formatDate(new Date(Number(timestampValue)))); } @@ -71,17 +64,27 @@ const TimestampPage = () => { return (
-
+

当前时间戳

- {Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))} - {showMilliseconds ? '毫秒' : '秒'} + {Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))} + {showMilliseconds ? '毫秒' : '秒'}

- + -
@@ -89,32 +92,35 @@ const TimestampPage = () => {

时间戳转日期时间

-
-
- setTimestampValue(e.target.value)}/> - +
+
+ setTimestampValue(Number(e.target.value))}/> +
-
-
-
+
- +
diff --git a/src/utils/timeUtils.js b/src/utils/timeUtils.js new file mode 100644 index 0000000..ac78ed7 --- /dev/null +++ b/src/utils/timeUtils.js @@ -0,0 +1,11 @@ +export function formatDate(value) { + return (new Intl.DateTimeFormat('zh-CN', { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + })).format(value); +} +