From 94eee67c37060825d6c23797aafec86c33530e47 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Tue, 18 Mar 2025 21:06:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=BBTAB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 38 ----------------- src/App.test.tsx | 9 ---- src/App.tsx | 85 +++++++++++++++++++++++++++++++------- src/assets/tabIcon/icon_tab1_s.svg | 1 + src/assets/tabIcon/icon_tab1_u.svg | 1 + src/assets/tabIcon/icon_tab2_s.svg | 1 + src/assets/tabIcon/icon_tab2_u.svg | 1 + src/assets/tabIcon/icon_tab3_s.svg | 1 + src/assets/tabIcon/icon_tab3_u.svg | 1 + src/assets/tabIcon/icon_tab4_s.svg | 1 + src/assets/tabIcon/icon_tab4_u.svg | 1 + src/index.css | 16 +++++++ src/index.tsx | 47 ++++++++++++++++++++- src/logo.svg | 1 - src/pages/Bluetooth.tsx | 10 +++++ src/pages/Measure.tsx | 10 +++++ src/pages/MeasureSave.tsx | 14 +++++++ src/pages/Mine.tsx | 10 +++++ src/pages/Setting.tsx | 10 +++++ 19 files changed, 193 insertions(+), 65 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.test.tsx create mode 100644 src/assets/tabIcon/icon_tab1_s.svg create mode 100644 src/assets/tabIcon/icon_tab1_u.svg create mode 100644 src/assets/tabIcon/icon_tab2_s.svg create mode 100644 src/assets/tabIcon/icon_tab2_u.svg create mode 100644 src/assets/tabIcon/icon_tab3_s.svg create mode 100644 src/assets/tabIcon/icon_tab3_u.svg create mode 100644 src/assets/tabIcon/icon_tab4_s.svg create mode 100644 src/assets/tabIcon/icon_tab4_u.svg delete mode 100644 src/logo.svg create mode 100644 src/pages/Bluetooth.tsx create mode 100644 src/pages/Measure.tsx create mode 100644 src/pages/MeasureSave.tsx create mode 100644 src/pages/Mine.tsx create mode 100644 src/pages/Setting.tsx diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index a53698a..9143dbd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,77 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import { Outlet, useLocation, useNavigate } from 'react-router'; +import { NavBar, 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); + }; + + 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 ( + setRouteActive(value)}> + {tabs.map(item => ( + + active ? : + } + title={item.title} + /> + ))} + + ); +}; function App() { return (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+ +
+ +
+
+ +
+
); } diff --git a/src/assets/tabIcon/icon_tab1_s.svg b/src/assets/tabIcon/icon_tab1_s.svg new file mode 100644 index 0000000..a0c9862 --- /dev/null +++ b/src/assets/tabIcon/icon_tab1_s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab1_u.svg b/src/assets/tabIcon/icon_tab1_u.svg new file mode 100644 index 0000000..1c26714 --- /dev/null +++ b/src/assets/tabIcon/icon_tab1_u.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab2_s.svg b/src/assets/tabIcon/icon_tab2_s.svg new file mode 100644 index 0000000..ef186d2 --- /dev/null +++ b/src/assets/tabIcon/icon_tab2_s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab2_u.svg b/src/assets/tabIcon/icon_tab2_u.svg new file mode 100644 index 0000000..f454206 --- /dev/null +++ b/src/assets/tabIcon/icon_tab2_u.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab3_s.svg b/src/assets/tabIcon/icon_tab3_s.svg new file mode 100644 index 0000000..aeb3e01 --- /dev/null +++ b/src/assets/tabIcon/icon_tab3_s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab3_u.svg b/src/assets/tabIcon/icon_tab3_u.svg new file mode 100644 index 0000000..a927327 --- /dev/null +++ b/src/assets/tabIcon/icon_tab3_u.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab4_s.svg b/src/assets/tabIcon/icon_tab4_s.svg new file mode 100644 index 0000000..208f621 --- /dev/null +++ b/src/assets/tabIcon/icon_tab4_s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tabIcon/icon_tab4_u.svg b/src/assets/tabIcon/icon_tab4_u.svg new file mode 100644 index 0000000..390bcc2 --- /dev/null +++ b/src/assets/tabIcon/icon_tab4_u.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css index 17df0e7..915a28f 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,22 @@ @tailwind components; @tailwind utilities; +:root { + --primaryColor: #3e63cb; + --tabBarHeight: 50px; + --navBarHeight: 45px; +} + +@layer utilities { + .main-page-content { + height: calc(100vh - var(--navBarHeight)); + background-color: #f5f6fa; + } + .home-page-content { + height: calc(100vh - var(--tabBarHeight) - var(--navBarHeight)); + background-color: #f5f6fa; + } +} body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/src/index.tsx b/src/index.tsx index 032464f..14dd949 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,13 +3,57 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { + createHashRouter, + Navigate, + RouterProvider, +} from "react-router-dom"; +import Measure from './pages/Measure'; +import Setting from './pages/Setting'; +import Bluetooth from './pages/Bluetooth'; +import Mine from './pages/Mine'; +import MeasureSave from './pages/MeasureSave'; + +const router = createHashRouter([ + { + path: "/", + element: + }, + { + path: "/home", + element: , + children: [ + { + path: "measure", + element: + }, + { + path: "setting", + element: + }, + { + path: "bluetooth", + element: + }, + { + path: "mine", + element: + } + ] + }, + { + path: "/measure/save", + element: + } +]); + const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - + ); @@ -17,3 +61,4 @@ root.render( // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); + diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/pages/Bluetooth.tsx b/src/pages/Bluetooth.tsx new file mode 100644 index 0000000..13595ea --- /dev/null +++ b/src/pages/Bluetooth.tsx @@ -0,0 +1,10 @@ +import { NavBar } from 'antd-mobile'; + +export default function Bluetooth() { + return ( +
+ 蓝牙 +
Bluetooth
+
+ ); +} diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx new file mode 100644 index 0000000..82d1a59 --- /dev/null +++ b/src/pages/Measure.tsx @@ -0,0 +1,10 @@ +import { NavBar } from 'antd-mobile'; + +export default function Measure() { + return ( +
+ 测量 +
Measure
+
+ ); +} diff --git a/src/pages/MeasureSave.tsx b/src/pages/MeasureSave.tsx new file mode 100644 index 0000000..436baf7 --- /dev/null +++ b/src/pages/MeasureSave.tsx @@ -0,0 +1,14 @@ +import { NavBar } from "antd-mobile"; +import { useNavigate } from "react-router"; + +export default function MeasureSave() { + const navigate = useNavigate() + const back = () => navigate(-1); + + return ( +
+ 测量参数 +
MeasureSave
+
+ ); +} \ No newline at end of file diff --git a/src/pages/Mine.tsx b/src/pages/Mine.tsx new file mode 100644 index 0000000..9ce37cc --- /dev/null +++ b/src/pages/Mine.tsx @@ -0,0 +1,10 @@ +import { NavBar } from "antd-mobile"; + +export default function Mine() { + return ( +
+ 我的 +
Mine
+
+ ); +} \ No newline at end of file diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx new file mode 100644 index 0000000..2669b2c --- /dev/null +++ b/src/pages/Setting.tsx @@ -0,0 +1,10 @@ +import { NavBar } from "antd-mobile"; + +export default function Setting() { + return ( +
+ 设置 +
Setting
+
+ ); +} \ No newline at end of file