LiLongLong
/
outline-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

外层套一层AppTab

master
zhangjiming 4 months ago
parent
78faf191a8
commit
bdd3352646
5 changed files with 120 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 102
      src/App.tsx
  2. 77
      src/AppTab.tsx
  3. 7
      src/index.tsx
  4. 13
      src/pages/Measure.tsx
  5. 8
      src/setupProxy.js

102
src/App.tsx
View File

@ -1,81 +1,35 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router';
import { SafeArea, TabBar, Toast } from 'antd-mobile';
import { Outlet } from 'react-router';
import { Toast } from 'antd-mobile';
import icon_1_s from './assets/tabIcon/icon_tab1_s.svg';
import icon_1_u from './assets/tabIcon/icon_tab1_u.svg';
// import icon_2_s from './assets/tabIcon/icon_tab2_s.svg';
// import icon_2_u from './assets/tabIcon/icon_tab2_u.svg';
import icon_3_s from './assets/tabIcon/icon_tab3_s.svg';
import icon_3_u from './assets/tabIcon/icon_tab3_u.svg';
import icon_4_s from './assets/tabIcon/icon_tab4_s.svg';
import icon_4_u from './assets/tabIcon/icon_tab4_u.svg';
import Bridge, { bridgeOb, emitBridgeEvent } from './utils/bridge'; import Bridge, { bridgeOb, emitBridgeEvent } from './utils/bridge';
import { useAppDispatch, useAppSelector } from './utils/hooks'; import { useAppDispatch, useAppSelector } from './utils/hooks';
import { addNewPoint, updateTaskState } from './store/features/measureSlice'; import { addNewPoint, updateTaskState } from './store/features/measureSlice';
import { updateBleList, updateDevice, updateSyncProgress } from './store/features/contextSlice';
import {
refreshStationList,
updateBleList,
updateDevice,
updateSyncProgress,
} from './store/features/contextSlice';
import { createWebSocket, sharedWsUrl } from './services/socket'; import { createWebSocket, sharedWsUrl } from './services/socket';
import { fetchOrgTree, fetchRailTypes, syncBaseData, updateSyncBaseProgress } from './store/features/baseData';
const BottomBar = () => {
const navigate = useNavigate();
const location = useLocation();
const { pathname } = location;
const setRouteActive = (value: string) => {
navigate(value, { replace: true });
};
const tabs = [
{
key: '/home/measure',
title: '测量',
icon_s: icon_1_s,
icon_n: icon_1_u,
},
// {
// key: '/home/setting',
// title: '设置',
// icon_s: icon_2_s,
// icon_n: icon_2_u,
// },
{
key: '/home/bluetooth',
title: '蓝牙',
icon_s: icon_3_s,
icon_n: icon_3_u,
},
{
key: '/home/mine',
title: '我的',
icon_s: icon_4_s,
icon_n: icon_4_u,
},
];
return (
<TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
{tabs.map((item) => (
<TabBar.Item
key={item.key}
icon={(active: boolean) =>
active ? <img src={item.icon_s} alt="icon" /> : <img src={item.icon_n} alt="icon" />
}
title={item.title}
/>
))}
</TabBar>
);
};
import {
fetchOrgTree,
fetchRailTypes,
syncBaseData,
updateSyncBaseProgress,
} from './store/features/baseData';
function App() { function App() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const baseState = useAppSelector((state) => state.baseData); const baseState = useAppSelector((state) => state.baseData);
const contextState = useAppSelector((state) => state.context);
// 获取轨型数据
useEffect(() => { useEffect(() => {
if (baseState.railTypes.length === 0) { if (baseState.railTypes.length === 0) {
dispatch(fetchRailTypes()); dispatch(fetchRailTypes());
} }
},[baseState.railTypes.length, dispatch])
}, [baseState.railTypes.length, dispatch]);
// 监听推送消息，更新store // 监听推送消息，更新store
useEffect(() => { useEffect(() => {
@ -134,18 +88,22 @@ function App() {
}); });
}, [dispatch]); }, [dispatch]);
// 预获取车站信息
useEffect(() => {
if (contextState.currXMCode) {
dispatch(
refreshStationList({
tljCode: contextState.currOrgCode,
gwdCode: contextState.currGWDCode,
xmCode: contextState.currXMCode,
})
);
}
}, [contextState.currGWDCode, contextState.currOrgCode, contextState.currXMCode, dispatch]);
return ( return (
<> <>
<div className="App">
<SafeArea position="top" />
<div>
<Outlet /> <Outlet />
</div>
<div className="border-t border-[#ebebeb]">
<BottomBar />
</div>
<SafeArea position="bottom" />
</div>
{/* <Mask visible={baseState.syncingBaseData}> {/* <Mask visible={baseState.syncingBaseData}>
<div className="flex flex-col items-center gap-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"> <div className="flex flex-col items-center gap-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">

77
src/AppTab.tsx
View File

@ -0,0 +1,77 @@
import React from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router';
import { SafeArea, TabBar } from 'antd-mobile';
import icon_1_s from './assets/tabIcon/icon_tab1_s.svg';
import icon_1_u from './assets/tabIcon/icon_tab1_u.svg';
// import icon_2_s from './assets/tabIcon/icon_tab2_s.svg';
// import icon_2_u from './assets/tabIcon/icon_tab2_u.svg';
import icon_3_s from './assets/tabIcon/icon_tab3_s.svg';
import icon_3_u from './assets/tabIcon/icon_tab3_u.svg';
import icon_4_s from './assets/tabIcon/icon_tab4_s.svg';
import icon_4_u from './assets/tabIcon/icon_tab4_u.svg';
const BottomBar = () => {
const navigate = useNavigate();
const location = useLocation();
const { pathname } = location;
const setRouteActive = (value: string) => {
navigate(value, { replace: true });
};
const tabs = [
{
key: '/home/measure',
title: '测量',
icon_s: icon_1_s,
icon_n: icon_1_u,
},
// {
// key: '/home/setting',
// title: '设置',
// icon_s: icon_2_s,
// icon_n: icon_2_u,
// },
{
key: '/home/bluetooth',
title: '蓝牙',
icon_s: icon_3_s,
icon_n: icon_3_u,
},
{
key: '/home/mine',
title: '我的',
icon_s: icon_4_s,
icon_n: icon_4_u,
},
];
return (
<TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
{tabs.map((item) => (
<TabBar.Item
key={item.key}
icon={(active: boolean) =>
active ? <img src={item.icon_s} alt="icon" /> : <img src={item.icon_n} alt="icon" />
}
title={item.title}
/>
))}
</TabBar>
);
};
export default function AppTab() {
return (
<div className="App">
<SafeArea position="top" />
<div>
<Outlet />
</div>
<div className="border-t border-[#ebebeb]">
<BottomBar />
</div>
<SafeArea position="bottom" />
</div>
);
}

7
src/index.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import AppTab from './AppTab';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import { import {
createHashRouter, createHashRouter,
@ -16,7 +17,7 @@ import store from './store/index';
import Measure from './pages/Measure'; import Measure from './pages/Measure';
import Setting from './pages/Setting'; import Setting from './pages/Setting';
import Bluetooth from './pages/Bluetooth'; import Bluetooth from './pages/Bluetooth';
import Mine from './pages/Mine';
// import Mine from './pages/Mine';
import Mine2 from './pages/Mine2'; import Mine2 from './pages/Mine2';
import MeasureSave from './pages/MeasureSave'; import MeasureSave from './pages/MeasureSave';
import MeasureRecord from './pages/MeasureRecord'; import MeasureRecord from './pages/MeasureRecord';
@ -26,9 +27,9 @@ import UploadList from './pages/UploadList';
const router = createHashRouter( const router = createHashRouter(
createRoutesFromElements( createRoutesFromElements(
<Route path="/">
<Route path="/" element={<App />}>
<Route index element={<Navigate to="home/measure" replace />} /> <Route index element={<Navigate to="home/measure" replace />} />
<Route path="home" element={<App />}>
<Route path="home" element={<AppTab />}>
<Route path="measure" element={<Measure />}></Route> <Route path="measure" element={<Measure />}></Route>
{/* <Route path="setting" element={<Setting />}></Route> */} {/* <Route path="setting" element={<Setting />}></Route> */}
<Route path="bluetooth" element={<Bluetooth />}></Route> <Route path="bluetooth" element={<Bluetooth />}></Route>

13
src/pages/Measure.tsx
View File

@ -37,19 +37,6 @@ export default function Measure() {
} }
}, [baseState.railTypes]); }, [baseState.railTypes]);
// 预获取车站信息
useEffect(() => {
if (contextState.currXMCode) {
dispatch(
refreshStationList({
tljCode: contextState.currOrgCode,
gwdCode: contextState.currGWDCode,
xmCode: contextState.currXMCode,
})
);
}
},[contextState.currGWDCode, contextState.currOrgCode, contextState.currXMCode, dispatch]);
function drawRailBaseLine(points: string) { function drawRailBaseLine(points: string) {
const benchmarkShapes = JSON.parse(points) as BenchmarkShape[]; const benchmarkShapes = JSON.parse(points) as BenchmarkShape[];
if (canvasRef.current) { if (canvasRef.current) {

8
src/setupProxy.js
View File

@ -8,6 +8,14 @@ module.exports = function (app) {
// changeOrigin: true, // changeOrigin: true,
// }) // })
// ); // );
// app.use(
// '/api/basic',
// createProxyMiddleware({
// target: 'http://localhost:8080/api/basic',
// changeOrigin: true,
// pathFilter: ['/ktj', '/org', '/station'],
// })
// );
app.use( app.use(
'/api', '/api',
createProxyMiddleware({ createProxyMiddleware({

Write Preview
Loading…
Cancel
Save