From b46534419b48eedfac766ea74886a4cb245297e6 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Fri, 24 Jan 2025 10:11:56 +0000
Subject: [PATCH] feat: add language switcher component and update layout

- Introduced a new LanguageSwitcher component to facilitate language switching in the application.
- Added an SVG icon for the language switcher button.
- Updated the Header component to adjust margin for better spacing.
- Modified the Navigation component's margin and top properties for improved layout.
- Adjusted the ThemeToggle button size for consistency with the new design.
---
 public/image/languageSwitcher.svg     |  1 +
 src/components/Header.astro           |  2 +-
 src/components/LanguageSwitcher.astro | 60 +++++++++++++++++++++++++++
 src/components/Navigation.astro       |  2 +-
 src/components/ThemeToggle.astro      |  2 +-
 src/layouts/Layout.astro              |  2 +
 6 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 public/image/languageSwitcher.svg
 create mode 100644 src/components/LanguageSwitcher.astro

diff --git a/public/image/languageSwitcher.svg b/public/image/languageSwitcher.svg
new file mode 100644
index 0000000..e93f63b
--- /dev/null
+++ b/public/image/languageSwitcher.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" data-name="图层_1" style="fill:#3d3d3d"/></svg>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index af0c4ce..0d330d5 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -14,7 +14,7 @@ const marginClass = {
 
 <header>
   <h1
-    class={`${marginClass} mt--1.6 text-12 c-primary font-bold font-title`}
+    class={`${marginClass} mt--3.2 text-12 c-primary font-bold font-title`}
     aria-label="Title Tag"
   >
     <a href="/">
diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
new file mode 100644
index 0000000..ffc6f0c
--- /dev/null
+++ b/src/components/LanguageSwitcher.astro
@@ -0,0 +1,60 @@
+---
+import themeConfig from '@/config'
+
+const langs = ['', ...themeConfig.global.moreLocale]
+---
+
+<script is:inline define:vars={{ langs }}>
+ const langSwitch = document.getElementById('language-switcher')
+
+ langSwitch?.addEventListener('click', () => {
+   const { pathname, search, hash } = window.location
+
+   // 获取当前语言和路径段
+   const segments = pathname.split('/').filter(Boolean)
+   const firstSegment = segments[0] || ''
+   const currentLang = langs.includes(firstSegment) ? firstSegment : ''
+
+   // 获取下一个语言
+   const currentIndex = langs.indexOf(currentLang)
+   const nextLang = langs[(currentIndex + 1) % langs.length]
+
+   // 构建新的 URL
+   let newPath
+   if (currentLang) {
+     // 如果当前有语言前缀，替换它
+     segments[0] = nextLang || segments[0]
+     newPath = nextLang ? `/${segments.join('/')}` : `/${segments.slice(1).join('/')}`
+   }
+ else {
+     // 如果当前没有语言前缀
+     newPath = nextLang ? `/${nextLang}${pathname}` : pathname
+   }
+
+   // 确保路径至少是 "/"
+   newPath = newPath || '/'
+
+   // 切换语言
+   window.location.href = `${newPath}${search}${hash}`
+ })
+</script>
+
+<button
+  id="language-switcher"
+  class="absolute right-25.6 top-19.4 z-999 aspect-square w-7 c-secondary active:scale-92"
+  aria-label="Language Switch Button"
+  title="Language Switch Button"
+>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-full w-full">
+    <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" fill="currentColor" />
+  </svg>
+</button>
+
+<style>
+  #language-switcher {
+    transition: transform 0.3s ease;
+  }
+  #language-switcher:hover {
+    transform: scale(1.1);
+  }
+</style>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 339183f..d44f019 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -51,7 +51,7 @@ const isTagActive = isTagPage(currentPath)
 const isAboutActive = isAboutPage(currentPath)
 ---
 
-<nav class="mb-18 mt-10 text-5.6 text-secondary font-semibold leading-11.4 font-navbar">
+<nav class="mb-19.4 mt-12 text-5.6 text-secondary font-semibold leading-13 font-navbar">
   <ul>
     <li>
       <a
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 5a8761e..f66cf16 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -46,7 +46,7 @@ window.addEventListener('pageshow', (event) => {
 <button
   aria-pressed="false"
   aria-label="Theme Toggle Button"
-  class="absolute right-9.6 top-21 z-999 aspect-square w-8 c-secondary active:scale-92"
+  class="absolute right-9.6 top-19.4 z-999 aspect-square w-7 c-secondary active:scale-92"
 >
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
     <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 47f9f48..0fe565f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
+import LanguageSwitcher from '@/components/LanguageSwitcher.astro'
 import Navigation from '@/components/Navigation.astro'
 import PhotoSwipe from '@/components/PhotoSwipe.astro'
 import Scrollbar from '@/components/Scrollbar.astro'
@@ -44,6 +45,7 @@ const fontStyle = `font-${themeConfig.global.font}`
 
     </div>
     <ThemeToggle />
+    <LanguageSwitcher />
     <Scrollbar />
     <PhotoSwipe />
   </body>