feat: Footer 相关组件及页面移动端适配

1pone · 1pone · commit 11f0d4f4b208 · 2025-01-24T17:26:26.000+08:00
diff --git a/src/components/DonatingCard/components/StickerButton.tsx b/src/components/DonatingCard/components/StickerButton.tsx
@@ -24,12 +24,12 @@ export const StickerButton = ({ className }: { className?: string }) => {
         dark:!bg-gray-800 dark:text-gray-300 dark:shadow-lg dark:shadow-gray-700"
       >
         <div className="flex gap-2">
-          <img src={sticker1} alt="alipay" className=" h-44 rounded shadow-lg shadow-gray-300 dark:shadow-gray-700" />
-          <img src={sticker2} alt="alipay" className=" h-44 rounded shadow-lg shadow-gray-300 dark:shadow-gray-700" />
+          <img src={sticker1} alt="sticker1" className="h-36 rounded shadow-lg shadow-gray-300 dark:shadow-gray-700" />
+          <img src={sticker2} alt="sticker2" className="h-36 rounded shadow-lg shadow-gray-300 dark:shadow-gray-700" />
         </div>
-        <span className="mt-3 text-xs font-bold text-gray-500">
-          <IconInfo className="mb-[3px] mr-1 inline-block" />
-          此贴纸非商品，仅用于感谢您的捐赠，不可用于任何商业用途
+        <span className="mt-2 flex flex-col items-center justify-center text-xs font-bold text-gray-500 sm:flex-row">
+          <IconInfo className="mb-[3px] mr-1" />
+          <span>此贴纸非商品，仅用于感谢您的捐赠，不可用于任何商业用途</span>
         </span>
       </Tooltip>
     </>
diff --git a/src/components/DonatingCard/index.tsx b/src/components/DonatingCard/index.tsx
@@ -27,9 +27,9 @@ export const DonatingCard = ({ className, onAmountChange }: { className?: string
 
       <div className={`mt-3 flex w-full  flex-col  overflow-hidden px-11 transition-[height] duration-500 ${amount ? 'h-44' : 'h-0'}`}>
         {amount && (
-          <div className="flex w-full justify-between">
-            <img src={AmountImageMap[amount][0]} alt="alipay" className=" h-44" />
-            <img src={AmountImageMap[amount][1]} alt="weChat" className=" h-44" />
+          <div className="flex w-full justify-center gap-x-2">
+            <img src={AmountImageMap[amount][0]} alt="alipay" className="h-40" />
+            <img src={AmountImageMap[amount][1]} alt="weChat" className="h-40" />
           </div>
         )}
       </div>
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -118,7 +118,9 @@ const Footer: React.FC = () => {
         <br />
         <p className="text-sm text-gray-500  dark:text-gray-400">再次感谢您的支持和关注！</p>
         <br />
-        <img className="ml-1 w-2/6 " src="https://qwerty.kaiyi.cool/weChat-group.png" alt="weChat-group" />
+        <div className="flex justify-center">
+          <img className="ml-1 w-40 " src="https://qwerty.kaiyi.cool/weChat-group.png" alt="weChat-group" />
+        </div>
         <br />
       </InfoPanel>
 
@@ -142,108 +144,119 @@ const Footer: React.FC = () => {
           「Qwerty Learner」！
         </p>
         <br />
-        <img className="ml-1 w-5/12 " src={redBookCode} alt="redBook" />
-        <p className="text-sm text-gray-500 dark:text-gray-400">Tips: 从小红书“我”的左上角点击 三 找到 扫一扫</p>
+        <div className="flex flex-col items-center justify-center">
+          <img className="ml-1 w-40 " src={redBookCode} alt="redBook" />
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Tips: 从小红书“我”的左上角点击 三 找到 扫一扫</p>
+        </div>
         <br />
       </InfoPanel>
 
-      <footer className="mb-1 mt-4 flex w-full items-center justify-center gap-2.5 text-sm ease-in" onClick={(e) => e.currentTarget.blur()}>
-        <a href="https://github.com/Kaiyiwing/qwerty-learner" target="_blank" rel="noreferrer" aria-label="前往 GitHub 项目主页">
-          <IconGithub fontSize={15} className="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100" />
-        </a>
+      <footer
+        className="fixed bottom-4 flex w-full flex-col items-center justify-center gap-4 text-sm ease-in sm:flex-row"
+        onClick={(e) => e.currentTarget.blur()}
+      >
+        <div className="flex gap-3">
+          <a href="https://github.com/Kaiyiwing/qwerty-learner" target="_blank" rel="noreferrer" aria-label="前往 GitHub 项目主页">
+            <IconGithub fontSize={15} className="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100" />
+          </a>
 
-        <button
-          className="cursor-pointer"
-          type="button"
-          onClick={(e) => {
-            handleOpenInfoPanel('redBook')
-            e.currentTarget.blur()
-          }}
-          aria-label="加入我们的小红书社群"
-        >
-          <IconXiaoHongShu fontSize={14} className="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-500" />
-        </button>
-
-        <button
-          className="cursor-pointer focus:outline-none"
-          type="button"
-          onClick={(e) => {
-            handleOpenInfoPanel('community')
-            e.currentTarget.blur()
-          }}
-          aria-label="加入我们的微信用户群"
-        >
-          <IconWechat2 fontSize={16} className="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-500" />
-        </button>
-
-        <a href="https://twitter.com/real_kai42" target="_blank" title="x" rel="noreferrer">
-          <IconTwitter fontSize={16} className="text-gray-500 hover:text-[#1DA1F2] dark:text-gray-400 dark:hover:text-[#1DA1F2]" />
-        </a>
-        <button
-          className="cursor-pointer focus:outline-none "
-          type="button"
-          onClick={(e) => {
-            handleOpenInfoPanel('donate')
-            e.currentTarget.blur()
-          }}
-          aria-label="考虑捐赠我们"
-        >
-          <IconCoffee2 fontSize={16} className="text-gray-500 hover:text-amber-500 dark:text-gray-400 dark:hover:text-amber-500" />
-        </button>
-
-        <button
-          className="cursor-pointer focus:outline-none"
-          type="button"
-          onClick={(e) => {
-            handleOpenInfoPanel('vsc')
-            e.currentTarget.blur()
-          }}
-          aria-label="使用 Visual Studio Code 插件版 Qwerty Learner"
-        >
-          <IconVisualstudiocode fontSize={14} className="text-gray-500 hover:text-sky-500 dark:text-gray-400 dark:hover:text-sky-500" />
-        </button>
-
-        <a
-          href="mailto:me@kaiyi.cool"
-          target="_blank"
-          rel="noreferrer"
-          onClick={(e) => e.currentTarget.blur()}
-          aria-label="发送邮件到 me@kaiyi.cool"
-        >
-          <IconMail fontSize={16} className="text-gray-500 hover:text-indigo-400 dark:text-gray-400 dark:hover:text-indigo-400" />
-        </a>
-        <a rel="noreferrer" className="cursor-pointer focus:outline-none" onClick={() => navigate('/friend-links')} aria-label="查看友链">
-          <RiLinksLine fontSize={14} className="text-gray-500 hover:text-indigo-400 dark:text-gray-400 dark:hover:text-indigo-400" />
-        </a>
+          <button
+            className="cursor-pointer"
+            type="button"
+            onClick={(e) => {
+              handleOpenInfoPanel('redBook')
+              e.currentTarget.blur()
+            }}
+            aria-label="加入我们的小红书社群"
+          >
+            <IconXiaoHongShu fontSize={14} className="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-500" />
+          </button>
 
-        <Tooltip content="中国大陆镜像">
-          <a href="https://kaiyiwing.gitee.io/qwerty-learner" target="_self" title="前往中国大陆镜像">
-            <IconFlagChina fontSize={16} />
+          <button
+            className="cursor-pointer focus:outline-none"
+            type="button"
+            onClick={(e) => {
+              handleOpenInfoPanel('community')
+              e.currentTarget.blur()
+            }}
+            aria-label="加入我们的微信用户群"
+          >
+            <IconWechat2 fontSize={16} className="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-500" />
+          </button>
+
+          <a href="https://twitter.com/real_kai42" target="_blank" title="x" rel="noreferrer">
+            <IconTwitter fontSize={16} className="text-gray-500 hover:text-[#1DA1F2] dark:text-gray-400 dark:hover:text-[#1DA1F2]" />
           </a>
-        </Tooltip>
-
-        <button
-          className="cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-          type="button"
-          onClick={(e) => {
-            handleOpenInfoPanel('donate')
-            e.currentTarget.blur()
-          }}
-        >
-          @ Qwerty Learner
-        </button>
-
-        <a
-          className="cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-          href="https://beian.miit.gov.cn"
-          target="_blank"
-          rel="noreferrer"
-        >
-          鲁ICP备2022030649号
-        </a>
-        <span className="select-none rounded bg-slate-200 px-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-400">
-          Build <span className="select-all">{LATEST_COMMIT_HASH}</span>
-        </span>
+          <button
+            className="cursor-pointer focus:outline-none "
+            type="button"
+            onClick={(e) => {
+              handleOpenInfoPanel('donate')
+              e.currentTarget.blur()
+            }}
+            aria-label="考虑捐赠我们"
+          >
+            <IconCoffee2 fontSize={16} className="text-gray-500 hover:text-amber-500 dark:text-gray-400 dark:hover:text-amber-500" />
+          </button>
+
+          <button
+            className="cursor-pointer focus:outline-none"
+            type="button"
+            onClick={(e) => {
+              handleOpenInfoPanel('vsc')
+              e.currentTarget.blur()
+            }}
+            aria-label="使用 Visual Studio Code 插件版 Qwerty Learner"
+          >
+            <IconVisualstudiocode fontSize={14} className="text-gray-500 hover:text-sky-500 dark:text-gray-400 dark:hover:text-sky-500" />
+          </button>
+
+          <a
+            href="mailto:me@kaiyi.cool"
+            target="_blank"
+            rel="noreferrer"
+            onClick={(e) => e.currentTarget.blur()}
+            aria-label="发送邮件到 me@kaiyi.cool"
+          >
+            <IconMail fontSize={16} className="text-gray-500 hover:text-indigo-400 dark:text-gray-400 dark:hover:text-indigo-400" />
+          </a>
+          <a rel="noreferrer" className="cursor-pointer focus:outline-none" onClick={() => navigate('/friend-links')} aria-label="查看友链">
+            <RiLinksLine fontSize={14} className="text-gray-500 hover:text-indigo-400 dark:text-gray-400 dark:hover:text-indigo-400" />
+          </a>
+
+          <Tooltip content="中国大陆镜像">
+            <a href="https://kaiyiwing.gitee.io/qwerty-learner" target="_self" title="前往中国大陆镜像">
+              <IconFlagChina fontSize={16} />
+            </a>
+          </Tooltip>
+        </div>
+
+        <div className="flex flex-col items-center justify-center gap-x-2 gap-y-1 sm:flex-row">
+          <div className="flex items-center gap-x-2">
+            <button
+              className="cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              type="button"
+              onClick={(e) => {
+                handleOpenInfoPanel('donate')
+                e.currentTarget.blur()
+              }}
+            >
+              @ Qwerty Learner
+            </button>
+            <span className="select-none rounded bg-slate-200 px-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-400">
+              Build <span className="select-all">{LATEST_COMMIT_HASH}</span>
+            </span>
+          </div>
+
+          <a
+            className="cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            href="https://beian.miit.gov.cn"
+            target="_blank"
+            rel="noreferrer"
+          >
+            鲁ICP备2022030649号
+          </a>
+        </div>
       </footer>
     </>
   )
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,11 +1,5 @@
-import Footer from './Footer'
 import type React from 'react'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <main className="flex h-screen w-screen flex-col items-center overflow-hidden pb-4">
-      {children}
-      <Footer />
-    </main>
-  )
+  return <main className="flex h-screen w-screen flex-col items-center overflow-hidden pb-4">{children}</main>
 }
diff --git a/src/pages/FriendLinks/index.tsx b/src/pages/FriendLinks/index.tsx
@@ -3,8 +3,12 @@ import ezbdc from '@/assets/friendlinks/ezbdc.jpg'
 import kk from '@/assets/friendlinks/kk.jpg'
 import web_worker from '@/assets/friendlinks/web-worker.png'
 import type React from 'react'
+import { useNavigate } from 'react-router-dom'
+import IconX from '~icons/tabler/x'
 
 export const FriendLinks: React.FC = () => {
+  const navigate = useNavigate()
+
   const links = [
     {
       title: 'ez背单词',
@@ -27,11 +31,19 @@ export const FriendLinks: React.FC = () => {
     },
   ]
 
+  const onBack = () => {
+    navigate('/')
+  }
+
   return (
     <Layout>
+      <div className="fixed top-0 z-20 flex h-14 w-full flex-row-reverse items-center sm:h-16">
+        <IconX className="mx-4 h-7 w-7 cursor-pointer text-gray-400 sm:mx-6" onClick={onBack} />
+      </div>
+
       <div className="flex w-full flex-1 flex-col items-center px-4 pt-20">
         <div className="flex w-full max-w-md flex-grow flex-col items-center">
-          <div className="mt-5 text-center text-lg font-bold">友情链接</div>
+          <h1 className="mt-5 text-center text-lg font-bold dark:text-white">友情链接</h1>
           <div className="links flex w-full flex-col items-center gap-y-8 py-5">
             {links.map((link, index) => (
               <a
@@ -42,11 +54,11 @@ export const FriendLinks: React.FC = () => {
                 rel="noopener noreferrer"
                 className="linkItem flex w-full items-center overflow-hidden"
               >
-                <div className="mr-3 flex h-8 w-8 flex-shrink-0 items-center justify-center bg-gray-200">
+                <div className="mr-4 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded border bg-gray-200">
                   <img src={link.imgSrc} alt={link.title} className="h-full w-full object-cover" />
                 </div>
                 <div className="flex-1">
-                  <div className="pb-1 text-sm font-bold">{link.title}</div>
+                  <div className="pb-1 text-sm font-bold dark:text-white">{link.title}</div>
                   <div className="text-xs text-gray-500">{link.description}</div>
                 </div>
               </a>
diff --git a/src/pages/Typing/components/Speed/index.tsx b/src/pages/Typing/components/Speed/index.tsx
@@ -12,7 +12,7 @@ export default function Speed() {
   const inputNumber = state.chapterData.correctCount + state.chapterData.wrongCount
 
   return (
-    <div className="flex w-full justify-center px-8">
+    <div className="flex w-full justify-center px-8 pb-4">
       <div className="my-card flex w-80 rounded-xl bg-white p-4 opacity-50 transition-colors duration-300 dark:bg-gray-800 sm:w-85 lg:w-100">
         <InfoBox info={`${minutesString}:${secondsString}`} description="时间" />
         <InfoBox info={inputNumber + ''} description="输入数" />
diff --git a/src/pages/Typing/index.tsx b/src/pages/Typing/index.tsx
@@ -11,6 +11,7 @@ import { useConfetti } from './hooks/useConfetti'
 import { useWordList } from './hooks/useWordList'
 import { TypingContext, TypingStateActionType, initialState, typingReducer } from './store'
 import { DonateCard } from '@/components/DonateCard'
+import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import StarCard from '@/components/StarCard'
 import Tooltip from '@/components/Tooltip'
@@ -155,6 +156,7 @@ const App: React.FC = () => {
             <Speed />
           </div>
         </div>
+        <Footer />
       </Layout>
       <WordList />
     </TypingContext.Provider>
