Merge branch 'master' of http://192.168.1.3:3000/zhangjiming/Outline

src/App.tsx

@@ -7,13 +7,13 @@ import { default as AppHeader } from "./components/Header";
 import { default as AppFooter } from "./components/Footer";
 import SideMenu from "./components/SideMenu";
 import { createWebSocket, sharedWsUrl } from "./services/socket";
-import { useDispatch } from "react-redux";
 import { updateUser } from "./store/features/contextSlice";
+import { useAppDispatch } from "./utils/hooks";
 const { Header, Footer, Sider, Content } = Layout;
 
 function App() {
 	const navigate = useNavigate();
-	const dispatch = useDispatch();
+	const dispatch = useAppDispatch();
 
 	useEffect(() => {
 		//连接websocket

src/components/Header.tsx

@@ -10,6 +10,7 @@ import { useState } from "react";
 import { Dropdown, MenuProps, message, Button, Popover } from "antd";
 import { logout } from "../services/user/user";
 import "./bluetooth.scss";
+import { useAppSelector } from "../utils/hooks";
 export default function Header() {
 		//获取当前websocet的状态
 		let wsReadyState = localStorage.getItem('wsReadyState')
@@ -28,8 +29,7 @@ export default function Header() {
 			}
 		}
 
-	//@ts-ignore
-	const context = useSelector(store => store.context);
+	const context = useAppSelector(store => store.context);
 	const [messageApi, contextHolder] = message.useMessage();
 
 	const items: MenuProps["items"] = [

src/pages/measure/components/MeasureAction.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, CheckboxProps, Switch, RadioChangeEvent, message } from "antd";
+import { Button, Checkbox, CheckboxProps, Switch, message } from "antd";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router";
 import { analyzeMeasurement, saveMeasurement, startMeasurement } from "../../../services/measure/analysis";
@@ -7,23 +7,22 @@ import GridLayer from "./graph/GridLayer";
 import StandardLayer from "./graph/StandardLayer";
 import ResultLayer from "./graph/ResultLayer";
 import MarkLayer from "./graph/MarkLayer";
-import { useDispatch, useSelector } from "react-redux";
 import { switchMeasureAfterSave } from "../../../store/features/contextSlice";
 import { AnalyzeAngle } from "../../../services/measure/type";
 import { MeasureState, taskStatusDescMap } from "../../../services/wsTypes";
+import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
 
 const wsClient = createWebSocket(sharedWsUrl);
 
 export default function MeasureAction() {
-	const dispatch = useDispatch();
+	const dispatch = useAppDispatch();
 
 	const [showGrid, setShowGrid] = useState(true);
 	const [showStandard, setShowStandard] = useState(true);
 	const [showResult, setShowResult] = useState(true);
 	const [showMark, setShowMark] = useState(true);
 
-	// @ts-ignore
-	const afterSave = useSelector(store => store.context.newMeasureAfterSave);
+	const afterSave = useAppSelector(store => store.context.newMeasureAfterSave);
 
 	const navigate = useNavigate();
 

src/pages/measure/components/MeasureConfig.tsx

@@ -1,14 +1,14 @@
 import { Button, Form, Input, message } from "antd";
 import { useEffect } from "react";
-import { useSelector } from "react-redux";
 import { useNavigate } from "react-router";
 import { createMeasure } from "../../../services/measure/analysis";
+import { useAppSelector } from "../../../utils/hooks";
 
 export default function MeasureConfig() {
 	const navigate = useNavigate();
 	const [messageApi, contextHolder] = message.useMessage();
-	//@ts-ignore
-	const context = useSelector(store => store.context);
+
+	const context = useAppSelector(store => store.context);
 	const onFinish = (values: any) => {
 		console.log("Received values of form: ", values);
 		createMeasure({

src/pages/measure/components/MeasureDetail.tsx

@@ -1,6 +1,3 @@
-// 引入相关的hooks
-import { useSelector, useDispatch } from "react-redux";
-// 引入对应的方法
 import {getDetailList, delDetail} from '../../../services/measure/analysis'
 import { useState, useEffect } from 'react'
 import  {message, Button, type TableColumnsType, type TableProps, Modal, Table  } from 'antd';
@@ -10,11 +7,6 @@ import type { DetailTable } from "../../../services/measure/type";
 import { ExclamationCircleFilled } from '@ant-design/icons';
 
 export default function MeasureDetail() {
-	// 通过useSelector直接拿到store中定义的value
-    //@ts-ignore
-	const { value } = useSelector(store => store.counter);
-	// 通过useDispatch 派发事件
-	const dispatch = useDispatch();
 	const navigate = useNavigate();
 	function onToMeasure(){
 		navigate('/measure/config')

src/pages/measure/components/graph/ResultLayer.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import points from "../../../../utils/measure.json";
+import { useEffect, useRef } from "react";
 import { createWebSocket, sharedWsUrl } from "../../../../services/socket";
 
 const wsClient = createWebSocket(sharedWsUrl);
@@ -25,11 +24,11 @@ export default function ResultLayer(props: {
 	const yStepPx = (props.height - props.topPadding - props.bottomPadding) / props.rows;
 
 	const unitPx = xStepPx / 10;
-	const pointsPx = points.map(p => ({ x: p.x * unitPx, y: p.y * unitPx + 4 })); // 特意偏移
+	// const pointsPx = points.map(p => ({ x: p.x * unitPx, y: p.y * unitPx + 4 })); // 特意偏移
 
 	const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
-	const [rtPoints, setRtPoints] = useState<{ x: number; y: number }[]>([]);
+	// const [rtPoints, setRtPoints] = useState<{ x: number; y: number }[]>([]);
 
 	// const draw = useCallback(
 	// 	(ctx: CanvasRenderingContext2D) => {
@@ -94,7 +93,7 @@ export default function ResultLayer(props: {
 		});
 		wsClient.connect();
 		return () => subscription.unsubscribe();
-	}, [rtPoints, unitPx, xEndPx, xStartPx, yStartPx, yStepPx]);
+	}, [unitPx, xEndPx, xStartPx, yStartPx, yStepPx]);
 
 	return (
 		<div style={{visibility: props.visibility}}>

src/store/features/contextSlice.ts

@@ -1,32 +1,29 @@
 // counterSlice.ts 文件
 
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { ContextMessage } from "../../services/wsTypes";
 
 const initialState: ContextMessage["data"] = {
 	loginFlag: false,
 	loginUser: {},
-
 	newMeasureAfterSave: false,
 };
 
-// 创建一个 Slice
 export const contextSlice = createSlice({
 	name: "context",
 	initialState,
-	// 定义 reducers 并生成关联的操作
+
 	reducers: {
-		// 定义一个加的方法
-		updateUser: (state, { payload }) => {
-			state.loginFlag = payload.loginFlag;
-			state.loginUser = payload.loginUser;
+		updateUser: (state, action: PayloadAction<ContextMessage["data"]>) => {
+			state.loginFlag = action.payload.loginFlag;
+			state.loginUser = action.payload.loginUser;
 		},
-		switchMeasureAfterSave: (state, { payload }) => {
-			state.newMeasureAfterSave = payload;
+		switchMeasureAfterSave: (state, action: PayloadAction<boolean>) => {
+			state.newMeasureAfterSave = action.payload;
 		},
 	},
 });
-// 导出加减的方法
+
 export const { updateUser, switchMeasureAfterSave } = contextSlice.actions;
 
 // 默认导出

src/store/index.ts

@@ -14,3 +14,6 @@ const store = configureStore({
 });
 
 export default store;
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch

src/utils/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from '../store'
+
+// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector