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);
+}
+