From 83ade67bcdb83cbc21a6e840c66ed73e006c9aeb Mon Sep 17 00:00:00 2001 From: yuanyxh <15766118362@139.com> Date: Mon, 14 Oct 2024 16:27:56 +0800 Subject: [PATCH] chore: change small screen width 768 to 796 --- src/App.tsx | 11 ++++ src/coder/styles/Wrapper.module.less | 2 +- src/components/Dialog/Dialog.module.less | 2 +- src/enum/index.ts | 4 ++ .../components/styles/FilePanel.module.less | 2 +- src/store/useAppStore.ts | 12 ++++- src/viewer/Provider.tsx | 5 +- src/viewer/styles/Articles.module.less | 2 +- src/viewer/styles/Books.module.less | 2 +- src/viewer/styles/Examples.module.less | 2 +- src/viewer/styles/Index.module.less | 2 +- src/viewer/styles/Layout.module.less | 50 +++++++++++-------- src/viewer/styles/Provider.module.less | 4 +- tsconfig.json | 3 +- vite.config.ts | 4 ++ 15 files changed, 73 insertions(+), 34 deletions(-) create mode 100644 src/enum/index.ts diff --git a/src/App.tsx b/src/App.tsx index 7141d39..647ef41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import type { AppState } from '@/store'; import { useAppStore } from '@/store'; import { + addGlobalListener, assetsLoadHandler, getStorage, globalEvent, @@ -19,6 +20,7 @@ import { ServiceWorkerManager } from '@/utils'; +import { SMALL_SCREEN_WIDTH } from './enum'; import { resetProgressBar } from './routes'; import './App.less'; @@ -58,6 +60,7 @@ const App: React.FC = (props) => { const { settings: { colorScheme, enableServiceWorkerCache }, + setIsSmallScreen, setLanguage, setColorScheme, setFrontDesk @@ -106,6 +109,14 @@ const App: React.FC = (props) => { } ); + addGlobalListener( + 'resize', + () => { + setIsSmallScreen(window.innerWidth <= SMALL_SCREEN_WIDTH); + }, + { signal: abortController.signal } + ); + globalEvent.on('user_tips', ({ type, message: _message }) => messageApi[type](_message), { signal: abortController.signal }); diff --git a/src/coder/styles/Wrapper.module.less b/src/coder/styles/Wrapper.module.less index c3d7b24..4704c5b 100644 --- a/src/coder/styles/Wrapper.module.less +++ b/src/coder/styles/Wrapper.module.less @@ -64,7 +64,7 @@ box-shadow: 0 1px 6px 0 rgba(255 255 255 / 10%); } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .wrapper { flex-direction: column !important; } diff --git a/src/components/Dialog/Dialog.module.less b/src/components/Dialog/Dialog.module.less index cf4ef66..47ff223 100644 --- a/src/components/Dialog/Dialog.module.less +++ b/src/components/Dialog/Dialog.module.less @@ -72,7 +72,7 @@ animation-fill-mode: both; } -@media screen and (width <=768px) { +@media screen and (width <=796px) { .filePanel { width: 400px; height: 60vh; diff --git a/src/enum/index.ts b/src/enum/index.ts new file mode 100644 index 0000000..597a8b8 --- /dev/null +++ b/src/enum/index.ts @@ -0,0 +1,4 @@ +/** + * @description When window.innerWidth <= 796 it is considered a small screen + * */ +export const SMALL_SCREEN_WIDTH = 796; diff --git a/src/filehandle/components/styles/FilePanel.module.less b/src/filehandle/components/styles/FilePanel.module.less index 3c75b52..00936aa 100644 --- a/src/filehandle/components/styles/FilePanel.module.less +++ b/src/filehandle/components/styles/FilePanel.module.less @@ -55,7 +55,7 @@ animation-fill-mode: both; } -@media screen and (width <=768px) { +@media screen and (width <=796px) { .filePanel { width: 400px; height: 60vh; diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts index 4a70fe8..5450a07 100644 --- a/src/store/useAppStore.ts +++ b/src/store/useAppStore.ts @@ -2,6 +2,8 @@ import { create } from 'zustand'; import { getStorage, setStorage } from '@/utils'; +import { SMALL_SCREEN_WIDTH } from '@/enum'; + export interface AppState { settings: { language: string; @@ -12,6 +14,7 @@ export interface AppState { status: { /** web app is in frontdesk */ frontDesk: boolean; + isSmallScreen: boolean; }; } @@ -24,6 +27,7 @@ export interface AppActions { ): void; setEnableNotification(enableNotification: AppState['settings']['enableNotification']): void; setFrontDesk(frontDesk: AppState['status']['frontDesk']): void; + setIsSmallScreen(isSmallScreen: AppState['status']['isSmallScreen']): void; } /** @@ -39,7 +43,8 @@ const useAppStore = create((set) => ({ enableNotification: false }, status: { - frontDesk: true + frontDesk: true, + isSmallScreen: window.innerWidth <= SMALL_SCREEN_WIDTH } }), setLanguage(language) { @@ -106,7 +111,10 @@ const useAppStore = create((set) => ({ }); }, setFrontDesk(frontDesk) { - set((state) => ({ ...state, status: { frontDesk: frontDesk } })); + set((state) => ({ ...state, status: { ...state.status, frontDesk: frontDesk } })); + }, + setIsSmallScreen(isSmallScreen) { + set((state) => ({ ...state, status: { ...state.status, isSmallScreen: isSmallScreen } })); } })); diff --git a/src/viewer/Provider.tsx b/src/viewer/Provider.tsx index 3c8f2cf..98dd74f 100644 --- a/src/viewer/Provider.tsx +++ b/src/viewer/Provider.tsx @@ -10,6 +10,7 @@ import { copy, error, success } from '@/utils'; import { Icon, Image as InnerImage } from '@/components'; import styles from './styles/Provider.module.less'; +import { SMALL_SCREEN_WIDTH } from '@/enum'; import '@/assets/styles/prism-one-dark.css'; import type { MDXComponents } from 'mdx/types'; @@ -112,11 +113,11 @@ const calcArticleWrapperSize = () => { let containerWidth = 916; switch (true) { - case window.innerWidth <= 768: + case window.innerWidth <= SMALL_SCREEN_WIDTH: containerWidth = window.innerWidth - 40; break; case window.innerWidth <= 1366: - containerWidth = 768; + containerWidth = SMALL_SCREEN_WIDTH; break; default: break; diff --git a/src/viewer/styles/Articles.module.less b/src/viewer/styles/Articles.module.less index 2aab722..ffd8ea1 100644 --- a/src/viewer/styles/Articles.module.less +++ b/src/viewer/styles/Articles.module.less @@ -71,7 +71,7 @@ } } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .articles { padding: 30px; } diff --git a/src/viewer/styles/Books.module.less b/src/viewer/styles/Books.module.less index aba131d..b1aac4c 100644 --- a/src/viewer/styles/Books.module.less +++ b/src/viewer/styles/Books.module.less @@ -54,7 +54,7 @@ } } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .books { width: 100%; padding: 0 30px; diff --git a/src/viewer/styles/Examples.module.less b/src/viewer/styles/Examples.module.less index 5792799..2e72fa0 100644 --- a/src/viewer/styles/Examples.module.less +++ b/src/viewer/styles/Examples.module.less @@ -39,7 +39,7 @@ } } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .exampleItem { width: 90%; padding: 0 30px; diff --git a/src/viewer/styles/Index.module.less b/src/viewer/styles/Index.module.less index 0c79f11..e5df958 100644 --- a/src/viewer/styles/Index.module.less +++ b/src/viewer/styles/Index.module.less @@ -52,7 +52,7 @@ } } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .main { padding-inline: 15px; } diff --git a/src/viewer/styles/Layout.module.less b/src/viewer/styles/Layout.module.less index 49fd6a4..215512d 100644 --- a/src/viewer/styles/Layout.module.less +++ b/src/viewer/styles/Layout.module.less @@ -11,13 +11,13 @@ > a { flex-shrink: 0; - > .logo { + .logo { width: 40px; height: 39px; border-radius: var(--border-radius-base); } - > .title { + .title { display: inline; margin-left: 10px; font-size: 1.125rem; @@ -82,13 +82,13 @@ .headerStyle(); - > .drawer { + .drawer { display: none; .headerIconStyle(); } - > .topNavbar { + .topNavbar { display: flex; flex: 1; align-items: center; @@ -101,7 +101,7 @@ flex: 1; height: 100%; - > li { + li { flex-shrink: 0; .tabStyle(); @@ -121,13 +121,13 @@ display: none; } - > .searchWrap { + .searchWrap { width: 100%; } } } - > .sideContainer { + .sideContainer { position: fixed; top: 0; bottom: 0; @@ -144,17 +144,17 @@ transform: translateX(100%); } - > .sideHeader { + .sideHeader { box-shadow: @sideTabBorderBottom; .headerStyle(); - > .close { + .close { .headerIconStyle(); } } - > .sideNavbar { + .sideNavbar { width: 100%; height: calc(100% - var(--navbar-height)); overflow: auto; @@ -174,7 +174,7 @@ } } - > .mask { + .mask { position: fixed; inset: 0; z-index: var(--z-ignore); @@ -184,7 +184,7 @@ transition: opacity 0.2s ease; } - > .actions { + .actions { margin-left: 10px; .action { @@ -219,7 +219,7 @@ 0 1px 6px -1px rgb(255 255 255 / 2%), 0 2px 4px 0 rgb(255 255 255 / 2%); - > .actions { + .actions { .action { &.dark { display: none; @@ -233,30 +233,40 @@ } } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .header { - > .drawer { + > a { + display: none; + } + + .drawer { display: block; } - > .topNavbar { - > ul { + .topNavbar { + ul { display: none; } - > .searchWrap { + .searchWrap { display: none; } } - > .sideContainer { + .sideContainer { display: block; } - > .mask.active { + .mask.active { z-index: var(--z-useful); display: block; opacity: 1; } + + .actions { + .fullscreen { + display: none !important; + } + } } } diff --git a/src/viewer/styles/Provider.module.less b/src/viewer/styles/Provider.module.less index 59ba37a..df634a8 100644 --- a/src/viewer/styles/Provider.module.less +++ b/src/viewer/styles/Provider.module.less @@ -379,7 +379,7 @@ code { @media screen and (width <= 1366px) { .article { - max-width: 768px; + max-width: 796px; } } @@ -391,7 +391,7 @@ code { } } -@media screen and (width <= 768px) { +@media screen and (width <= 796px) { .article { width: 100%; padding: 0 20px; diff --git a/tsconfig.json b/tsconfig.json index 068353b..4632fc5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -33,7 +33,8 @@ "@/tools/*": ["src/tools/*"], "@/utils/*": ["src/utils/*"], "@/components/*": ["src/components/*"], - "@/filehandler/*": ["src/filehandle/*"] + "@/filehandler/*": ["src/filehandle/*"], + "@/enum/*": ["src/enum/*"] } }, "include": ["src", "types"], diff --git a/vite.config.ts b/vite.config.ts index 5d39d00..aec53db 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -238,6 +238,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { { find: /@\/filehandle\//, replacement: `${resolve('src/filehandle')}/` + }, + { + find: /@\/enum\//, + replacement: `${resolve('src/enum')}/` } ] },