(null)
+ const scrollTimeout = useRef(0)
+ const clickStart = useRef(0)
+
+ const [currentContent, setCurrentContent] = useState(0)
+
+ useEffect(() => {
+ setTimeout(() => {
+ setNavbarHidden(true)
+ setPreventScroll(true)
+ })
+ }, [setNavbarHidden, setPreventScroll])
+
+ useLayoutEffect(() => {
+ const handleWindowResize = () => {
+ handleScrollToContent(currentContent)()
+ }
+ window.addEventListener('resize', handleWindowResize)
+ return () => window.removeEventListener('resize', handleWindowResize)
+ })
+
+ const handleScrollToContent = (index: number) => {
+ return () => {
+ setShowDropdownMenu(false)
+ if (!index) {
+ setNavbarHidden(true)
+ hideScrollbarRef.current?.scrollY(0)
+ } else {
+ hideScrollbarRef.current?.scrollY(
+ (fitFullScreenRef.current?.offsetHeight ?? 0) * index
+ )
+ setNavbarHidden(false)
+ }
+ }
+ }
+
+ const handleScrollUp = () => {
+ if (currentContent <= 0) {
+ return
+ }
+ handleScrollToContent(currentContent - 1)()
+ clearTimeout(scrollTimeout.current)
+ scrollTimeout.current = setTimeout(() => {
+ setCurrentContent(currentContent - 1)
+ }, 500)
+ }
+
+ const handleScrollDown = () => {
+ if (currentContent >= content.length - 1) {
+ return
+ }
+ handleScrollToContent(currentContent + 1)()
+ clearTimeout(scrollTimeout.current)
+ scrollTimeout.current = setTimeout(() => {
+ setCurrentContent(currentContent + 1)
+ }, 500)
+ }
+
+ const handleWheel = (event: React.WheelEvent) => {
+ if (event.altKey || event.ctrlKey || event.shiftKey || event.deltaY === 0) {
+ return
+ }
+
+ if (event.deltaY > 0) {
+ handleScrollDown()
+ } else {
+ handleScrollUp()
+ }
+ }
+
+ const handleTouchStart = (event: React.TouchEvent) => {
+ clickStart.current = event.touches[0].clientY
+ }
+
+ const handleTouchEnd = (event: React.TouchEvent) => {
+ const moveLength = clickStart.current - event.changedTouches[0].clientY
+ if (Math.abs(moveLength) < 100) {
+ return
+ }
+
+ if (moveLength > 0) {
+ handleScrollDown()
+ } else {
+ handleScrollUp()
+ }
+ }
+
+ const handleMouseDown = (event: React.MouseEvent) => {
+ clickStart.current = event.clientY
+ }
+
+ const handleMouseUp = (event: React.MouseEvent) => {
+ const moveLength = clickStart.current - event.clientY
+ if (Math.abs(moveLength) < 100) {
+ return
+ }
+
+ if (moveLength > 0) {
+ handleScrollDown()
+ } else {
+ handleScrollUp()
+ }
+ }
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'ArrowUp') {
+ handleScrollUp()
+ }
+ if (event.key === 'ArrowDown') {
+ handleScrollDown()
+ }
+ }
+
+ const handleIndicatorSwitch = (index: number) => {
+ setCurrentContent(index)
+ handleScrollToContent(index)()
+ }
+
+ const content = [
+ {
+ backgroundColor: '#FBFBFB',
+ ref: fitFullScreenRef,
+ children:
+ },
+ { children: },
+ { children: }
+ ]
+
+ return (
+ <>
+
+ {content.map((element, index) => {
+ return
+ })}
+
+
+
+
+
+
+ )
+}
+
+export default Home
diff --git a/src/constants/Common.constants.ts b/src/constants/Common.constants.ts
index e58a345..34b9302 100644
--- a/src/constants/Common.constants.ts
+++ b/src/constants/Common.constants.ts
@@ -1,4 +1,4 @@
-const PRODUCTION_NAME = 'Pinnacle OA'
+const PRODUCTION_NAME = 'FatWeb'
const TOKEN_NAME = 'JWT_TOKEN'
const COLOR_PRODUCTION = '#00D4FF'
const COLOR_BACKGROUND = '#F5F5F5'
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 2c3fac6..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,69 +0,0 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-text-size-adjust: 100%;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/src/main.tsx b/src/main.tsx
index 89528f3..e102176 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import '@/assets/css/base.css'
-import '@/assets/css/common.css'
import zh_CN from 'antd/locale/zh_CN'
+import '@/assets/css/base.scss'
+import '@/assets/css/common.scss'
+import App from './App.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
deleted file mode 100644
index 28044c9..0000000
--- a/src/pages/Home.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Home: React.FC = () => {
- return (
- <>
- FatWeb
-
- )
-}
-
-export default Home
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 40f71af..efa6ee9 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { login } from '@/utils/auth.ts'
import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts'
import { setToken } from '@/utils/common.ts'
-import '@/assets/css/login.css'
+import '@/assets/css/pages/login.scss'
const Login: React.FC = () => {
const [messageApi, contextHolder] = message.useMessage()
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
new file mode 100644
index 0000000..24bcc24
--- /dev/null
+++ b/src/pages/MainFramework.tsx
@@ -0,0 +1,181 @@
+import React from 'react'
+import '@/assets/css/pages/header.scss'
+import router from '@/router'
+import LoadingMask from '@/components/common/LoadingMask'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import Icon from '@ant-design/icons'
+import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
+
+export const MainFrameworkContext = createContext<{
+ navbarHiddenState: {
+ navbarHidden: boolean
+ setNavbarHidden: (newValue: boolean) => void
+ }
+ preventScrollState: {
+ preventScroll: boolean
+ setPreventScroll: (newValue: boolean) => void
+ }
+ showVerticalScrollbarState: {
+ showVerticalScrollbar: boolean
+ setShowVerticalScrollbar: (newValue: boolean) => void
+ }
+ showHorizontalScrollbarState: {
+ showHorizontalScrollbar: boolean
+ setShowHorizontalScrollbar: (newValue: boolean) => void
+ }
+ showDropdownMenuState: {
+ showDropdownMenu: boolean
+ setShowDropdownMenu: (newValue: boolean) => void
+ }
+ hideScrollbarRef: React.RefObject
+}>({
+ navbarHiddenState: {
+ navbarHidden: false,
+ setNavbarHidden: () => undefined
+ },
+ preventScrollState: {
+ preventScroll: false,
+ setPreventScroll: () => undefined
+ },
+ showVerticalScrollbarState: {
+ showVerticalScrollbar: false,
+ setShowVerticalScrollbar: () => undefined
+ },
+ showHorizontalScrollbarState: {
+ showHorizontalScrollbar: false,
+ setShowHorizontalScrollbar: () => undefined
+ },
+ showDropdownMenuState: {
+ showDropdownMenu: false,
+ setShowDropdownMenu: () => undefined
+ },
+ hideScrollbarRef: createRef()
+})
+
+const MainFramework: React.FC = () => {
+ const routeId = useMatches()[1].id
+ const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
+
+ const pathname = useLocation().pathname
+
+ const hideScrollbarRef = useRef(null)
+
+ const [navbarHidden, setNavbarHidden] = useState(true)
+ const [preventScroll, setPreventScroll] = useState(false)
+ const [showVerticalScrollbar, setShowVerticalScrollbar] = useState(false)
+ const [showHorizontalScrollbar, setShowHorizontalScrollbar] = useState(false)
+ const [showDropdownMenu, setShowDropdownMenu] = useState(false)
+
+ useEffect(() => {
+ setNavbarHidden(false)
+ }, [pathname])
+
+ const handleMenuDropdownButtonClick = () => {
+ setShowDropdownMenu(!showDropdownMenu)
+ }
+
+ return (
+ <>
+
+
+
+
+
+ FatWeb
+
+
+
+
+
+ {routeChildren?.map((route) => {
+ return (
+ -
+
+ isPending ? 'pending' : isActive ? 'active' : ''
+ }
+ >
+ {(route.handle as RouteHandle).name}
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+