41 | 
43 |
44 | ))}
45 |
76 |
77 |
83 | {scanSuccess &&
85 | );
86 | }
87 |
88 | export default QRScanner;
89 |
--------------------------------------------------------------------------------
/src/composables/authorization.ts:
--------------------------------------------------------------------------------
1 | import {useState, useEffect} from 'react';
2 |
3 | export const STORAGE_AUTHORIZE_KEY = 'token';
4 |
5 | export const useAuthorization = () => {
6 | const [currentToken, setCurrentToken] = useState(localStorage.getItem(STORAGE_AUTHORIZE_KEY));
7 |
8 | // 同步 localStorage 变更
9 | useEffect(() => {
10 | const handleStorageChange = (event: StorageEvent) => {
11 | if (event.key === STORAGE_AUTHORIZE_KEY) {
12 | setCurrentToken(localStorage.getItem(STORAGE_AUTHORIZE_KEY));
13 | }
14 | };
15 |
16 | window.addEventListener('storage', handleStorageChange);
17 | return () => {
18 | window.removeEventListener('storage', handleStorageChange);
19 | };
20 | }, []);
21 |
22 | const login = (token: string) => {
23 | localStorage.setItem(STORAGE_AUTHORIZE_KEY, token);
24 | setCurrentToken(token);
25 | };
26 |
27 | const logout = () => {
28 | localStorage.removeItem(STORAGE_AUTHORIZE_KEY);
29 | setCurrentToken(null);
30 | };
31 |
32 | const isLogin = () => {
33 | return !!currentToken;
34 | };
35 |
36 | return {
37 | token: currentToken,
38 | login,
39 | logout,
40 | isLogin
41 | };
42 | };
43 |
--------------------------------------------------------------------------------
/src/composables/language.ts:
--------------------------------------------------------------------------------
1 | import {setDefaultConfig} from 'antd-mobile';
2 | import enUS from 'antd-mobile/es/locales/en-US';
3 | import zhCN from 'antd-mobile/es/locales/zh-CN';
4 |
5 | function changeLanguage(language: string) {
6 | let locale;
7 | switch (language) {
8 | case 'zh_CN':
9 | locale = enUS;
10 | break;
11 | case 'en_US':
12 | locale = zhCN;
13 | break;
14 | default:
15 | locale = enUS; // 或者是你的默认语言
16 | }
17 |
18 | setDefaultConfig({locale: locale});
19 | }
20 |
21 | export default changeLanguage;
22 |
--------------------------------------------------------------------------------
/src/enum/http-enum.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description: request method
3 | */
4 | export enum RequestEnum {
5 | GET = 'GET',
6 | POST = 'POST',
7 | PUT = 'PUT',
8 | DELETE = 'DELETE',
9 | }
10 |
11 | /**
12 | * @description: contentType
13 | */
14 | export enum ContentTypeEnum {
15 | // json
16 | JSON = 'application/json;charset=UTF-8',
17 | // form-data qs
18 | FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
19 | // form-data upload
20 | FORM_DATA = 'multipart/form-data;charset=UTF-8',
21 | }
22 |
--------------------------------------------------------------------------------
/src/hooks/i18n.ts:
--------------------------------------------------------------------------------
1 | import zhCN from '@/locales/zh_CN.json'
2 | import enUS from '@/locales/en_US.json'
3 | import {useI18nStore} from '@/store/i18n';
4 |
5 | export default function useI18n() {
6 | const {lang} = useI18nStore();
7 | const locales = lang === 'en_US' ? enUS : zhCN;
8 |
9 | return (name: string) => {
10 | return locales[name as keyof typeof locales] || name;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/hooks/location.ts:
--------------------------------------------------------------------------------
1 | import {useState, useEffect} from 'react';
2 | import useI18n from "@/hooks/i18n";
3 |
4 | // 定义位置坐标的类型
5 | export interface Coordinates {
6 | lat: number;
7 | lng: number;
8 | }
9 |
10 | // 定义返回的位置状态的类型
11 | export interface LocationState {
12 | loaded: boolean;
13 | coordinates: Coordinates | null;
14 | }
15 |
16 | // 定义错误状态的类型
17 | export type ErrorState = string | null;
18 |
19 | export const useLocation = (): { location: LocationState; error: ErrorState } => {
20 | const t = useI18n();
21 |
22 | // 用于存储位置信息和加载状态的状态
23 | const [location, setLocation] = useState识别成功！
} {/* 显示识别成功的蒙层 */}
84 |
45 |
61 | );
62 | };
63 |
64 | export default MainLayout;
65 |
--------------------------------------------------------------------------------
/src/layout/main/index.less:
--------------------------------------------------------------------------------
1 | .main-layout {
2 | display: flex;
3 | flex-direction: column;
4 | height: 100vh;
5 |
6 | .layout-content {
7 | flex: 1 1 auto;
8 | overflow-y: auto;
9 | margin-bottom: 50px;
10 | }
11 |
12 | .layout-tab {
13 | flex: 0 0 auto;
14 | position: fixed;
15 | bottom: 0;
16 | width: 100%;
17 | z-index: 1000;
18 | background-color: #fff;
19 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/locales/en_US.json:
--------------------------------------------------------------------------------
1 | {
2 | "index.title": "Hello World!"
3 | }
--------------------------------------------------------------------------------
/src/locales/zh_CN.json:
--------------------------------------------------------------------------------
1 | {
2 | "index.title": "你好，世界！"
3 | }
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import {BrowserRouter} from 'react-router-dom';
4 | import App from '@/view/app/App.tsx'
5 | import './index.css'
6 |
7 | ReactDOM.createRoot(document.getElementById('root')!).render(
8 |
46 | {children}
47 |
48 |
49 |
50 |
51 | {tabs.map(item => (
52 |
59 |
60 |
15 |
50 | {t('index.title')}
16 | 21 | 26 |Font size 12px
31 | 32 |Font size 14px
37 | 38 |Font size 16px
43 | 44 |Font size 18px
49 |