shen/qwerty-learner
1
0
Fork 0
mirror of https://github.com/RealKai42/qwerty-learner.git synced 2024-11-25 16:22:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: "add carousel"

Browse Source
This commit is contained in:
boy 2024-09-06 13:21:24 +08:00
parent 60483dfe74
commit 3233ca2633
8 changed files with 91 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -29,6 +29,7 @@
"dexie-export-import": "^4.0.7",
"dexie-react-hooks": "^1.1.3",
"echarts": "^5.4.2",
"embla-carousel-react": "^8.2.1",
"file-saver": "^2.0.5",
"howler": "^2.2.3",
"html-to-image": "^1.11.11",

BIN
src/assets/carousel/directory.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB

BIN
src/assets/carousel/hot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

BIN
src/assets/carousel/index.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 KiB

BIN
src/assets/carousel/interface.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 469 KiB

6
src/pages/Gallery-N/DictDetail/index.tsx
View File

@ -78,7 +78,7 @@ export default function DictDetail({ dictionary: dict }: { dictionary: Dictionar
<ToggleGroupItem
value={Tab.Chapters}
disabled={curTab === Tab.Chapters}
className={`${curTab === Tab.Chapters ? 'bg-primary text-primary-foreground' : ''} disabled:opacity-100`}
className={`${curTab === Tab.Chapters ? 'text-primary-foreground bg-primary' : ''} disabled:opacity-100`}
>
<MajesticonsPaperFoldTextLine className="mr-1.5 text-gray-500" />
章节选择
@ -88,7 +88,7 @@ export default function DictDetail({ dictionary: dict }: { dictionary: Dictionar
<ToggleGroupItem
value={Tab.Errors}
disabled={curTab === Tab.Errors}
className={`${curTab === Tab.Errors ? 'bg-primary text-primary-foreground' : ''} disabled:opacity-100`}
className={`${curTab === Tab.Errors ? 'text-primary-foreground bg-primary' : ''} disabled:opacity-100`}
>
<IcOutlineCollectionsBookmark className="mr-1.5 text-gray-500" />
查看错题
@ -96,7 +96,7 @@ export default function DictDetail({ dictionary: dict }: { dictionary: Dictionar
<ToggleGroupItem
value={Tab.Review}
disabled={curTab === Tab.Review}
className={`${curTab === Tab.Review ? 'bg-primary text-primary-foreground' : ''} disabled:opacity-100`}
className={`${curTab === Tab.Review ? 'text-primary-foreground bg-primary' : ''} disabled:opacity-100`}
>
<PajamasReviewList className="mr-1.5 text-gray-500" />
错题回顾

57
src/pages/Mobile/index.tsx
View File

@ -1,8 +1,42 @@
import Flow from './flow'
import directoryImg from '@/assets/carousel/directory.png'
import hotImg from '@/assets/carousel/hot.png'
import indexImg from '@/assets/carousel/index.png'
import logo from '@/assets/logo.svg'
import type React from 'react'
import { useEffect, useRef, useState } from 'react'
const MobilePage: React.FC = () => {
const [currentSlide, setCurrentSlide] = useState(0)
const totalSlides = 3 // 轮播图的总数量
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const timer = setInterval(() => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % totalSlides)
}, 3000)
return () => clearInterval(timer)
}, [])
useEffect(() => {
if (containerRef.current) {
const container = containerRef.current
const slideWidth = container.offsetWidth
if (currentSlide === 0) {
container.style.transition = 'none'
container.style.transform = `translateX(0)`
setTimeout(() => {
container.style.transition = 'transform 0.5s ease'
container.style.transform = `translateX(-${slideWidth}px)`
}, 50)
} else {
container.style.transform = `translateX(-${currentSlide * slideWidth}px)`
}
}
}, [currentSlide])
return (
<div className="flex h-screen w-screen flex-col">
<section className="flex items-center justify-center py-2 shadow-md">
@ -43,7 +77,28 @@ const MobilePage: React.FC = () => {
</div>
</section>
<section></section>
<section className="mt-10 px-10">
<div
style={{
boxShadow: '0px 0px 12px rgba(0,0,0,0.12), 0px 8px 15px -3px rgba(0,0,0,0.1)',
borderRadius: '8px',
overflow: 'hidden',
}}
>
<div
ref={containerRef}
style={{
display: 'flex',
transition: 'transform 0.5s ease',
}}
>
<img src={hotImg} alt="" style={{ width: '100%', flexShrink: 0 }} />
<img src={directoryImg} alt="" style={{ width: '100%', flexShrink: 0 }} />
<img src={indexImg} alt="" style={{ width: '100%', flexShrink: 0 }} />
<img src={hotImg} alt="" style={{ width: '100%', flexShrink: 0 }} />
</div>
</div>
</section>
</div>
)
}

32
yarn.lock
View File

@ -1550,6 +1550,11 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs@1.1.0":
version "1.1.0"
resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
"@radix-ui/react-context@1.0.0":
version "1.0.0"
resolved "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.0.0.tgz"
@ -1803,7 +1808,7 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs" "1.0.0"
"@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2":
"@radix-ui/react-slot@1.0.2":
version "1.0.2"
resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
@ -1811,6 +1816,13 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs" "1.0.1"
"@radix-ui/react-slot@^1.0.2":
version "1.1.0"
resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
dependencies:
"@radix-ui/react-compose-refs" "1.1.0"
"@radix-ui/react-tabs@^1.0.4":
version "1.0.4"
resolved "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"
@ -3206,6 +3218,24 @@ electron-to-chromium@^1.4.284:
resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.402.tgz"
integrity sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==
embla-carousel-react@^8.2.1:
version "8.2.1"
resolved "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.2.1.tgz#0202bd6b04f749cf9a56ad86f4549f75b7bb43bb"
integrity sha512-YKtARk101mp00Zb6UAFkkvK+5XRo92LAtO9xLFeDnQ/XU9DqFhKnRy1CedRRj0/RSk6MTFDx3MqOQue3gJj9DA==
dependencies:
embla-carousel "8.2.1"
embla-carousel-reactive-utils "8.2.1"
embla-carousel-reactive-utils@8.2.1:
version "8.2.1"
resolved "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.2.1.tgz#c62fdb6f77c6dcd68bcdaba62523acacb8e633fc"
integrity sha512-LXMVOOyv09ZKRxRQXYMX1FpVGcypsuxdcidNcNlBQUN2mK7hkmjVFQwwhfnnY39KMi88XYnYPBgMxfTe0vxSrA==
embla-carousel@8.2.1:
version "8.2.1"
resolved "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.2.1.tgz#d156be420f47d9f61f444eb789c9901cce43f7f8"
integrity sha512-9mTDtyMZJhFuuW5pixhTT4iLiJB1l3dH3IpXUKCsgLlRlHCiySf/wLKy5xIAzmxIsokcQ50xea8wi7BCt0+Rxg==
emoji-regex@^8.0.0:
version "8.0.0"
resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz"