Skip to content

Commit 724a4b2

Browse files
wkylinwkylin
committed
feat: fix mobile
1 parent b35e39d commit 724a4b2

27 files changed

Lines changed: 234 additions & 215 deletions

File tree

‎src/components/GlobalBreakpointListener.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { useEffect } from 'react'
2+
import { Grid } from 'antd'
3+
import { useStore } from '@/store'
4+
5+
const { useBreakpoint } = Grid
6+
7+
const GlobalBreakpointListener = () => {
8+
const setScreens = useStore((s) => s.setScreens)
9+
const setIsMobile = useStore((s) => s.setIsMobile)
10+
const screens = useBreakpoint()
11+
12+
useEffect(() => {
13+
// screens is an object like { xs: true, sm: true, md: false, ... }
14+
if (typeof setScreens === 'function') setScreens(screens)
15+
if (typeof setIsMobile === 'function') setIsMobile(!screens.md)
16+
17+
// add/remove global class on <html> to allow CSS class-based responsive rules
18+
try {
19+
const root = document.documentElement
20+
if (root) {
21+
if (!screens.md) {
22+
root.classList.add('is-mobile')
23+
root.classList.remove('is-desktop')
24+
} else {
25+
root.classList.add('is-desktop')
26+
root.classList.remove('is-mobile')
27+
}
28+
}
29+
} catch (err) {
30+
// ignore in non-browser environments
31+
}
32+
}, [screens, setScreens, setIsMobile])
33+
34+
return null
35+
}
36+
37+
export default GlobalBreakpointListener

‎src/components/stateless/DescBox/index.module.less‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,6 @@
1414
color: var(--desc-label-color);
1515
text-align: right;
1616
margin-right: 10px;
17-
18-
@media (width <= 768px) {
19-
flex: 0 0 60px;
20-
margin-right: 5px;
21-
}
2217
}
2318

2419
.descContent {
@@ -51,3 +46,9 @@
5146
}
5247
}
5348
}
49+
50+
/* Mobile adjustments */
51+
:global(.is-mobile) .descWrapper .descBox .descLabel {
52+
flex: 0 0 60px;
53+
margin-right: 5px;
54+
}

‎src/components/stateless/DottedStepper/index.jsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useState } from 'react'
22
import { motion } from 'motion/react'
33
import { CheckCircle, Circle } from 'lucide-react'
4-
import { Button, Card, Grid, theme } from 'antd'
4+
import { Button, Card, theme } from 'antd'
5+
import { useStore } from '@/store'
56
import { useProThemeContext } from '@/theme/hooks'
67
import clsx from 'clsx'
78
import PropTypes from 'prop-types'
89

910
const { useToken } = theme
10-
const { useBreakpoint } = Grid
1111

1212
const defaultSteps = [
1313
{ label: 'Introduction' },
@@ -31,8 +31,7 @@ const defaultSteps = [
3131

3232
const StepIndicator = ({ currentStep, steps }) => {
3333
const { themeSettings } = useProThemeContext()
34-
const screens = useBreakpoint()
35-
const isMobile = !screens.md
34+
const isMobile = useStore((s) => s.isMobile)
3635
const isDark = themeSettings.themeMode === 'dark'
3736

3837
// 增强蓝色对比度
@@ -203,8 +202,7 @@ StepContent.propTypes = {
203202
const NavigationButtons = ({ currentStep, totalSteps, handlePrev, handleNext }) => {
204203
const { themeSettings } = useProThemeContext()
205204
const { token } = useToken()
206-
const screens = useBreakpoint()
207-
const isMobile = !screens.md
205+
const isMobile = useStore((s) => s.isMobile)
208206
const isDark = themeSettings.themeMode === 'dark'
209207

210208
const primaryColor = isDark ? '#40a9ff' : '#0958d9'

‎src/components/stateless/NotificationDrawer/index.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useState } from 'react'
2-
import { Badge, Button, Space, Typography, theme, Drawer, Grid } from 'antd'
2+
import { Badge, Button, Space, Typography, theme, Drawer } from 'antd'
3+
import { useStore } from '@/store'
34
import { BellOutlined, CheckCircleOutlined, DeleteOutlined } from '@ant-design/icons'
45
import PropTypes from 'prop-types'
56
import useSafeNavigate from '@app-hooks/useSafeNavigate'
6-
const { useBreakpoint } = Grid
77
const initialNotifications = [
88
{
99
id: 1,
@@ -47,8 +47,7 @@ const NotificationDropdown = ({ iconColor, variant = 'inline', buttonStyle, ghos
4747
const unreadCount = notifications.filter((n) => !n.read).length
4848
const { redirectTo } = useSafeNavigate()
4949
const MAX_ITEMS = 50
50-
const screens = useBreakpoint()
51-
const isMobile = !screens.md
50+
const isMobile = useStore((s) => s.isMobile)
5251

5352
const [popVisible, setPopVisible] = useState(false)
5453

‎src/components/stateless/OneTimePasscode/index.module.less‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,11 @@
8989
pointer-events: none;
9090
}
9191

92-
/* smaller on mobile */
93-
@media (width <= 480px) {
94-
.input {
95-
width: 2.1rem;
96-
height: 2.1rem;
97-
font-size: 0.95rem;
98-
}
92+
/* Mobile styles applied via root class `.is-mobile` */
93+
:global(.is-mobile) .input {
94+
width: 2.1rem;
95+
height: 2.1rem;
96+
font-size: 0.95rem;
9997
}
10098

10199
/* small helper: center wrapper when used alone in story */

‎src/components/stateless/OrgChart/org-chart/index.module.less‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,8 @@
185185
align-items: flex-start;
186186
position: relative;
187187
width: max-content;
188-
margin: 0 auto;
189-
padding: 0 20px;
188+
padding: 0 4px;
189+
min-width: 80px;
190190
}
191191

192192
.childWrapper {
@@ -245,30 +245,28 @@
245245
}
246246
}
247247

248-
/* 响应式调整 */
249-
@media (width <= 768px) {
250-
.current-box,
251-
.child-box {
252-
padding: 0 8px;
253-
font-size: 12px;
254-
height: 24px;
255-
line-height: 24px;
256-
}
248+
/* Mobile styles applied via root class `.is-mobile` */
249+
:global(.is-mobile) .current-box,
250+
:global(.is-mobile) .child-box {
251+
padding: 0 8px;
252+
font-size: 12px;
253+
height: 24px;
254+
line-height: 24px;
255+
}
257256

258-
.rootBox {
259-
height: 28px;
260-
line-height: 28px;
261-
font-size: 14px;
262-
}
257+
:global(.is-mobile) .rootBox {
258+
height: 28px;
259+
line-height: 28px;
260+
font-size: 14px;
261+
}
263262

264-
.childWrapper {
265-
padding: 0 4px;
266-
min-width: 80px;
267-
}
263+
:global(.is-mobile) .childWrapper {
264+
padding: 0 4px;
265+
min-width: 80px;
266+
}
268267

269-
.expandIcon {
270-
width: 14px;
271-
height: 14px;
272-
font-size: 8px;
273-
}
268+
:global(.is-mobile) .expandIcon {
269+
width: 14px;
270+
height: 14px;
271+
font-size: 8px;
274272
}

‎src/components/stateless/ScrollableSections/index.module.less‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,10 @@
2222
gap: 1rem;
2323
}
2424

25-
@media (width >= 768px) {
26-
.nav ul {
27-
gap: 2rem;
28-
padding: 1.5rem 2rem;
29-
}
25+
/* Desktop styles applied via root class `.is-desktop` */
26+
.is-desktop .nav ul {
27+
gap: 2rem;
28+
padding: 1.5rem 2rem;
3029
}
3130

3231
.navItem {
@@ -48,11 +47,10 @@
4847
transform: translateY(-2px);
4948
}
5049

51-
@media (width >= 768px) {
52-
.navItem {
53-
font-size: 1.05rem;
54-
padding: 8px 25px;
55-
}
50+
/* Desktop styles applied via root class `.is-desktop` */
51+
.is-desktop .navItem {
52+
font-size: 1.05rem;
53+
padding: 8px 25px;
5654
}
5755

5856
.dark .navItem {
@@ -169,11 +167,10 @@
169167
border-radius: 2px;
170168
}
171169

172-
@media (width >= 768px) {
173-
.section .title {
174-
font-size: 3.5rem;
175-
margin-bottom: 3rem;
176-
}
170+
/* Desktop styles applied via root class `.is-desktop` */
171+
.is-desktop .section .title {
172+
font-size: 3.5rem;
173+
margin-bottom: 3rem;
177174
}
178175

179176
.dark .section .title {
@@ -190,11 +187,10 @@
190187
font-weight: 400;
191188
}
192189

193-
@media (width >= 768px) {
194-
.section .content {
195-
font-size: 1.25rem;
196-
line-height: 1.8;
197-
}
190+
/* Desktop styles applied via root class `.is-desktop` */
191+
.is-desktop .section .content {
192+
font-size: 1.25rem;
193+
line-height: 1.8;
198194
}
199195

200196
.dark .section .content {

‎src/components/stateless/StatisticCard/index.module.less‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,14 @@
7171
}
7272
}
7373

74-
@media (width <= 640px) {
75-
.statisticCard {
76-
grid-template-columns: 1fr;
77-
padding: 0.5rem;
78-
}
74+
/* Mobile styles applied via root class `.is-mobile` */
75+
:global(.is-mobile) .statisticCard {
76+
grid-template-columns: 1fr;
77+
padding: 0.5rem;
78+
}
7979

80-
.statisticCardItem {
81-
padding: 1.25rem;
82-
}
80+
:global(.is-mobile) .statisticCardItem {
81+
padding: 1.25rem;
8382
}
8483

8584
.statisticCard.dark {

‎src/components/stateless/TagCard/index.module.less‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -81,34 +81,24 @@
8181
font-size: 14px;
8282
}
8383

84-
@media (width <= 1200px) {
85-
.tagCardItem {
86-
width: calc(50% - 10px);
87-
flex: 1 1 calc(50% - 10px);
88-
}
84+
/* Mobile styles applied via root class `.is-mobile` */
85+
:global(.is-mobile) .tagCardItem {
86+
width: 100%;
87+
flex: 1 1 100%;
8988
}
9089

91-
@media (width <= 992px) {
92-
.tagCardItem {
93-
width: 100%;
94-
flex: 1 1 100%;
95-
}
90+
:global(.is-mobile) .tagCard {
91+
padding: 0 4px;
9692
}
9793

98-
@media (width <= 768px) {
99-
.tagCard {
100-
padding: 0 4px;
101-
}
102-
103-
.tagCardExtra {
104-
justify-content: flex-end;
105-
}
94+
:global(.is-mobile) .tagCardExtra {
95+
justify-content: flex-end;
96+
}
10697

107-
.tagCardList {
108-
gap: 12px;
109-
}
98+
:global(.is-mobile) .tagCardList {
99+
gap: 12px;
100+
}
110101

111-
.cardBody {
112-
max-height: none;
113-
}
102+
:global(.is-mobile) .cardBody {
103+
max-height: none;
114104
}

‎src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ErrorBoundary from '@/components/ErrorBoundary'
1010
import WatermarkProvider from '@/components/WatermarkProvider'
1111
import * as Sentry from '@sentry/react'
1212
import i18n from './i18n/i18n'
13+
import GlobalBreakpointListener from '@/components/GlobalBreakpointListener'
1314

1415
const patchDefinePropertyDescriptor = () => {
1516
try {
@@ -84,6 +85,7 @@ root.render(
8485
<StrictMode>
8586
<AntdApp>
8687
<I18nextProvider i18n={i18n}>
88+
<GlobalBreakpointListener />
8789
<ErrorBoundary>
8890
<Suspense fallback={<div>Loading...</div>}>
8991
<ProThemeProvider>

0 commit comments

Comments
 (0)