TeamVastsea · chun-awa · Jan 18, 2025 · Oct 6, 2024 · Jan 18, 2025 · Jan 18, 2025
diff --git a/.gitignore b/.gitignore
@@ -132,3 +132,6 @@ dist
 
 .DS_Store
 .idea/
+
+yarn.lock
+pnpm-lock.yaml
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@vercel/analytics": "^1.3.1",
     "next": "14.2.21",
     "next-intl": "^3.14.1",
+    "nextjs-toploader": "^3.6.15",
     "postcss-custom-properties": "^13.3.12",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/src/app/[locale]/component/ColorSchemeToggle.tsx b/src/app/[locale]/component/ColorSchemeToggle.tsx
@@ -3,6 +3,7 @@
 import { ActionIcon, MantineColorScheme, useMantineColorScheme } from '@mantine/core';
 import { IconBrightness2, IconBrightnessAuto, IconMoonStars } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
+import classes from "./HeaderMenu.module.css";
 
 const schemes = [
     { scheme: 'auto', icon: <IconBrightnessAuto /> },
@@ -24,6 +25,14 @@ export function ColorSchemeToggle() {
     useEffect(() => { setColorScheme('auto'); }, []);
 
     return (
-        <ActionIcon onClick={selectNextColorScheme} size="lg" variant="default" radius="xl">{schemes[selected].icon}</ActionIcon>
+        <ActionIcon
+            onClick={selectNextColorScheme}
+            size="lg"
+            variant="default"
+            radius="xl"
+            className={classes.action}
+        >
+            {schemes[selected].icon}
+        </ActionIcon>
     );
 }
diff --git a/src/app/[locale]/component/CopyRightAlert.module.css b/src/app/[locale]/component/CopyRightAlert.module.css
@@ -0,0 +1,8 @@
+.container{
+    max-width: fit-content;
+    margin: auto;
+    margin-top: 30px;
+    height: auto;
+    padding: 0 30px;
+    word-break: break-word;
+}
diff --git a/src/app/[locale]/component/CopyRightAlert.tsx b/src/app/[locale]/component/CopyRightAlert.tsx
@@ -1,17 +1,13 @@
-import { IconInfoCircle } from '@tabler/icons-react';
-import { Alert } from '@mantine/core';
+import { IconInfoCircle } from "@tabler/icons-react";
+import { Alert } from "@mantine/core";
 import { useTranslations } from 'next-intl';
-import React from 'react';
+import React from "react";
+import classes from "./CopyRightAlert.module.css";
 
 export default function CopyRightAlert() {
     const t = useTranslations('Copyright');
     return (
-        <div style={{
-            maxWidth: '50%',
-            margin: 'auto',
-            marginTop: '30px',
-            height: 'auto',
-        }}>
+        <div className={classes.container}>
             <Alert variant="filled" color="#35a2f3" radius="lg" title={t('title')} icon={<IconInfoCircle />}>
                 {t('part1')}&nbsp;
                 <a style={{ color: 'yellow' }} href="https://github.com/LingmoOS" target="_blank" rel="noreferrer">
@@ -20,18 +16,12 @@ export default function CopyRightAlert() {
                 {t('part2')}
                 <br />
                 {t('part3')}(QQ:&nbsp;
-                <a
-                  style={{ color: 'yellow' }}
-                  href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2422586862"
-                  target="_blank"
-                  rel="noreferrer">
+                <a style={{ color: 'yellow' }} href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2422586862"
+                    target="_blank" rel="noreferrer">
                     2422586862
                 </a>&nbsp;Email:&nbsp;
-                <a
-                  style={{ color: 'yellow' }}
-                  href="mailto:[email protected]"
-                  target="_blank"
-                  rel="noreferrer">
+                <a style={{ color: 'yellow' }} href="mailto:[email protected]"
+                    target="_blank" rel="noreferrer">
                     [email protected]
                 </a>
                 )

diff --git a/src/app/[locale]/component/Footer.module.css b/src/app/[locale]/component/Footer.module.css
@@ -24,11 +24,13 @@
     }
 }
 
-
-
 .links {
     @media (max-width: 768px) {
         margin-top: var(--mantine-spacing-lg);
         margin-bottom: var(--mantine-spacing-sm);
     }
 }
+
+.social {
+    transition: .3s;
+}
diff --git a/src/app/[locale]/component/Footer.tsx b/src/app/[locale]/component/Footer.tsx
@@ -18,17 +18,17 @@ export function Footer() {
 
                 <Group gap="xs" justify="flex-end" wrap="nowrap">
                     <a href="https://space.bilibili.com/595380133/" target="_blank" rel="noreferrer">
-                        <ActionIcon size="lg" variant="default" radius="xl">
+                        <ActionIcon size="lg" variant="default" radius="xl" className={classes.social}>
                             <IconBrandBilibili style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
                         </ActionIcon>
                     </a>
                     <a href="https://github.com/LingmoOS" target="_blank" rel="noreferrer">
-                        <ActionIcon size="lg" variant="default" radius="xl">
+                        <ActionIcon size="lg" variant="default" radius="xl" className={classes.social}>
                             <IconBrandGithub style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
                         </ActionIcon>
                     </a>
                     <a href="https://qm.qq.com/q/l8QeupIEjS" target="_blank" rel="noreferrer">
-                        <ActionIcon size="lg" variant="default" radius="xl">
+                        <ActionIcon size="lg" variant="default" radius="xl" className={classes.social}>
                             <IconBrandQq style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
                         </ActionIcon>
                     </a>

diff --git a/src/app/[locale]/component/HeaderMenu.module.css b/src/app/[locale]/component/HeaderMenu.module.css
@@ -20,6 +20,7 @@
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
     font-size: var(--mantine-font-size-sm);
     font-weight: 500;
+    transition: .3s;
 
     &:hover {
         background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
@@ -29,3 +30,7 @@
 .linkLabel {
     margin-right: rem(5px);
 }
+
+.action {
+    transition: .3s;
+}
diff --git a/src/app/[locale]/component/HeaderMenu.tsx b/src/app/[locale]/component/HeaderMenu.tsx
@@ -7,45 +7,46 @@ import classes from './HeaderMenu.module.css';
 import LingmoLogos from '@/components/LingmoLogos/LingmoLogos';
 import { ColorSchemeToggle } from '@/src/app/[locale]/component/ColorSchemeToggle';
 import { LocaleToggle } from '@/src/app/[locale]/component/LocaleToggle';
-import { links } from '@/src/app/[locale]/component/Links';
+import { links } from '@/src/app/[locale]/component/Links'
+import Link from 'next/link';
 
 export function HeaderMenu(props: HeaderMenuProps) {
     const t = useTranslations('Headers');
     const items = links.map((link) => (
-            <a
-              key={link.label}
-              href={link.link}
-              className={classes.link}
-            >
-                {t(link.label)}
-            </a>
-        ));
+        <Link
+            key={link.label}
+            href={link.link}
+            className={classes.link}
+        >
+            {t(link.label)}
+        </Link>
+    ));
 
     return (
         <header className={classes.header}>
             <Container size="md">
                 <div className={classes.inner}>
-                    <a style={{ top: '50%', transform: 'translate(0, 10%)' }} href="/">
+                    <Link style={{ top: '50%', transform: 'translate(0, 10%)' }} href="/">
                         <LingmoLogos.TitleWIthIcon width={200} height={30} />
-                    </a>
+                    </Link>
 
                     <Group gap={5} visibleFrom="sm">
                         {items}
                     </Group>
 
                     <Group gap={10} visibleFrom="sm" justify="flex-end">
                         <a href="https://space.bilibili.com/595380133/" target="_blank" rel="noreferrer">
-                            <ActionIcon size="lg" variant="default" radius="xl">
+                            <ActionIcon size="lg" variant="default" radius="xl" className={classes.action}>
                                 <IconBrandBilibili style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
                             </ActionIcon>
                         </a>
                         <a href="https://github.com/LingmoOS" target="_blank" rel="noreferrer">
-                            <ActionIcon size="lg" variant="default" radius="xl">
+                            <ActionIcon size="lg" variant="default" radius="xl" className={classes.action}>
                                 <IconBrandGithub style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
                             </ActionIcon>
                         </a>
                         <a href="https://qm.qq.com/q/l8QeupIEjS" target="_blank" rel="noreferrer">
-                            <ActionIcon size="lg" variant="default" radius="xl">
+                            <ActionIcon size="lg" variant="default" radius="xl" className={classes.action}>
                                 <IconBrandQq style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
                             </ActionIcon>
                         </a>

diff --git a/src/app/[locale]/component/HeroText.module.css b/src/app/[locale]/component/HeroText.module.css
@@ -58,6 +58,7 @@
     height: rem(54px);
     padding-left: rem(38px);
     padding-right: rem(38px);
+    transition: .3s;
 
     @media (max-width: 768px) {
         height: rem(54px);

diff --git a/src/app/[locale]/component/HeroText.tsx b/src/app/[locale]/component/HeroText.tsx
@@ -3,14 +3,14 @@
 import { Button, Container, Group, Text } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
 import React from 'react';
-import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import classes from './HeroText.module.css';
 import { Dots } from '@/src/app/[locale]/component/Dots';
+import { useRouter } from "nextjs-toploader/app";
 
 export function HeroText() {
-    const router = useRouter();
     const t = useTranslations('Index');
+    const router=useRouter();
 
     const description = t('description').split('%');
 
@@ -39,23 +39,23 @@ export function HeroText() {
 
                 <Group className={classes.controls}>
                     <Button
-                      size="xl"
-                      className={classes.control}
-                      variant="gradient"
-                      gradient={{ from: 'indigo', to: 'grape' }}
-                      leftSection={<IconDownload />}
-                      onClick={() => router.push('/downloads')}
+                        size="xl"
+                        className={classes.control}
+                        variant="gradient"
+                        gradient={{ from: 'indigo', to: 'grape' }}
+                        leftSection={<IconDownload />}
+                        onClick={()=>router.push("/downloads")}
                     >
                         {t('getStarted')}
                     </Button>
 
                     <Button
-                      component="a"
-                      href="https://github.com/LingmoOS"
-                      size="xl"
-                      variant="default"
-                      className={classes.control}
-                      target="_blank"
+                        component="a"
+                        href="https://github.com/LingmoOS"
+                        size="xl"
+                        variant="default"
+                        className={classes.control}
+                        target="_blank"
                     >
                         GitHub
                     </Button>

diff --git a/src/app/[locale]/component/LocaleToggle.tsx b/src/app/[locale]/component/LocaleToggle.tsx
@@ -6,6 +6,7 @@ import { IconLanguage } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { createSharedPathnamesNavigation } from 'next-intl/navigation';
 import { LocalesList } from '@/src/locales';
+import classes from "./HeaderMenu.module.css";
 
 export function LocaleToggle() {
     const { setColorScheme } = useMantineColorScheme();
@@ -23,7 +24,14 @@ export function LocaleToggle() {
     return (
         <Menu>
             <Menu.Target>
-                <ActionIcon size="lg" variant="default" radius="xl"><IconLanguage size={20} /></ActionIcon>
+                <ActionIcon
+                    size="lg"
+                    variant="default"
+                    radius="xl"
+                    className={classes.action} 
+                >
+                    <IconLanguage size={20}/>
+                </ActionIcon>
             </Menu.Target>
 
             <Menu.Dropdown>

diff --git a/src/app/[locale]/downloads/component/LatestBanner.module.css b/src/app/[locale]/downloads/component/LatestBanner.module.css
@@ -24,3 +24,15 @@
     line-height: 1;
     margin-bottom: var(--mantine-spacing-md);
 }
+
+.download_button, .download_item {
+    transition: .3s;
+}
+
+.grid{
+    flex-wrap: wrap;
+}
+
+.download_container {
+    min-width: fit-content;
+}
diff --git a/src/app/[locale]/downloads/component/LatestBanner.tsx b/src/app/[locale]/downloads/component/LatestBanner.tsx
@@ -15,7 +15,7 @@ export function LatestBanner() {
 
                 <Space h={20} />
 
-                <Grid w="100%">
+                <Grid w="100%" className={classes.grid}>
                     <Grid.Col span={9}>
                         <Stack>
                             <Text size="lg" fw={700}>{t('requirements')}</Text>
@@ -37,7 +37,7 @@ export function LatestBanner() {
                         </Stack>
                     </Grid.Col>
 
-                    <Grid.Col span={3}>
+                    <Grid.Col span={3} className={classes.download_container}>
                         <Stack h="100%" justify="flex-end">
                             <Text size="xs">
                                 {t('version')}2.1<br />
@@ -46,13 +46,13 @@ export function LatestBanner() {
                             </Text>
                             <Menu>
                                 <Menu.Target>
-                                    <Button>{t('download')}</Button>
+                                    <Button className={classes.download_button}>{t('download')}</Button>
                                 </Menu.Target>
                                 <Menu.Dropdown>
-                                    <Menu.Item component="a" href="https://releases.lingmo.org.cn/releases/2.1" target="_blank">
+                                    <Menu.Item className={classes.download_item} component="a" href="https://releases.lingmo.org.cn/releases/2.1" target="_blank">
                                         {t('downloadOfficial')}
                                     </Menu.Item>
-                                    <Menu.Item component="a" href="https://sourceforge.net/projects/lingmo-os/files/release/iso/hydrogen/stable/" target="_blank">
+                                    <Menu.Item className={classes.download_item} component="a" href="https://sourceforge.net/projects/lingmo-os/files/release/iso/hydrogen/stable/" target="_blank">
                                         SourceForge
                                     </Menu.Item>
                                 </Menu.Dropdown>

diff --git a/src/app/[locale]/downloads/page.tsx b/src/app/[locale]/downloads/page.tsx
@@ -2,8 +2,8 @@
 
 import { Container, Group, Space, Stack, Text, Title } from '@mantine/core';
 import { useTranslations } from 'next-intl';
-import React from 'react';
 import { LatestBanner } from '@/src/app/[locale]/downloads/component/LatestBanner';
+import React from 'react';
 
 export default function DownloadsPage() {
     const t = useTranslations('Downloads');

diff --git a/src/app/[locale]/global.css b/src/app/[locale]/global.css
@@ -0,0 +1,3 @@
+::selection{
+    background-color: var(--mantine-color-gray-light-hover);
+}