feat(footer): 新增友情链接 (#23)

- MAA
- MaaFramework
- 终末地一图流
- Mirror酱

## Summary by Sourcery

在主视觉区域新增“友情链接”入口和常量配置，用于展示外部合作伙伴站点。

New Features:
- 在主视觉区域新增友情链接下拉菜单，列出带有图标和外链的外部合作伙伴站点。

Enhancements:
- 优化主视觉布局，将镜像下载按钮与新的友情链接入口并排展示。
- 在常量中添加友情链接的集中配置，便于统一管理外部合作伙伴站点。

<details>
<summary>Original summary in English</summary>

## Summary by Sourcery

Add a friend links entry point and constants to display external partner
sites from the hero section.

New Features:
- Introduce a friend links dropdown in the hero area that lists external
partner sites with icons and outbound links.

Enhancements:
- Refine the hero layout to place the mirror download button alongside
the new friend links entry point.
- Add centralized configuration for friend links in constants for easier
management of external partner sites.

</details>

Author: Aliothmoon

app/components/Footer.tsx

@@ -2,7 +2,8 @@
 
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
-import { GITHUB_URLS, QQ_GROUPS } from "../constants";
+import Image from "next/image";
+import { FRIEND_LINKS, GITHUB_URLS, QQ_GROUPS } from "../constants";
 
 export default function Footer() {
   const { t } = useTranslation();
@@ -34,8 +35,8 @@ export default function Footer() {
         </motion.div>
       </div>
 
-      <div className="container mx-auto grid grid-cols-1 gap-12 px-6 md:grid-cols-4">
-        <div className="col-span-2">
+      <div className="container mx-auto grid grid-cols-1 gap-12 px-6 md:grid-cols-6">
+        <div className="col-span-1 md:col-span-2">
           <h3 className="font-heading mb-4 text-2xl text-black dark:text-white">
             MaaEnd
           </h3>
@@ -101,6 +102,34 @@ export default function Footer() {
             </li>
           </ul>
         </div>
+        <div className="col-span-1 md:col-span-2">
+          <h4 className="mb-4 font-mono text-black dark:text-white">
+            {t("footer.friendLinks")}
+          </h4>
+          <ul className="flex flex-wrap gap-x-4 gap-y-2 text-sm text-black/80 dark:text-white/70">
+            {FRIEND_LINKS.map((friend) => (
+              <li key={friend.id} className="w-40">
+                <a
+                  href={friend.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group flex items-center gap-2 transition-colors hover:text-[#c49102] dark:hover:text-[#FFE600]"
+                >
+                  <span className="rounded-sm border border-black/10 bg-white/90 p-1.5 dark:border-white/15 dark:bg-white/10">
+                    <Image
+                      src={friend.iconSrc}
+                      alt={friend.iconAlt}
+                      width={24}
+                      height={24}
+                      className="h-6 w-6 object-contain"
+                    />
+                  </span>
+                  <span className="min-w-0 truncate">{friend.name}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
 
       <div className="mt-20 text-center font-mono text-xs text-black/30 dark:text-white/20">

app/constants.ts

@@ -17,3 +17,57 @@ export const QQ_GROUPS = {
   DEV_GROUP: "1072587329",
   DEV_GROUP_LINK: "https://qm.qq.com/q/EyirQpBiW4",
 } as const;
+
+export interface FriendLink {
+  id: string;
+  name: string;
+  href: string;
+  iconSrc: string;
+  iconAlt: string;
+}
+
+// 友情链接：图标来自 public/friend
+export const FRIEND_LINKS: FriendLink[] = [
+  {
+    id: "MAA",
+    name: "MAA",
+    href: "https://maa.plus/",
+    iconSrc: "/friend/maa.png",
+    iconAlt: "MAA",
+  },
+  {
+    id: "MaaFramework",
+    name: "MaaFramework",
+    href: "https://maafw.com/",
+    iconSrc: "/friend/maa.png",
+    iconAlt: "MAA",
+  },
+  {
+    id: "ef-yituliu",
+    name: "终末地一图流",
+    href: "https://www.yituliu.cn/",
+    iconSrc: "/friend/ef-yituliu.png",
+    iconAlt: "终末地一图流",
+  },
+  {
+    id: "mirrorchyan",
+    name: "Mirror酱",
+    href: "https://mirrorchyan.com/zh/projects?rid=MaaEnd&os=windows&arch=x64&channel=stable",
+    iconSrc: "/friend/mirrorchyan.png",
+    iconAlt: "Mirror酱",
+  },
+  {
+    id: "endfield-terminal",
+    name: "终末地-协议终端",
+    href: "https://end.shallow.ink",
+    iconSrc: "https://end.shallow.ink/icon.svg",
+    iconAlt: "终末地-协议终端",
+  },
+  {
+    id: "zmd-map",
+    name: "终末地地图站",
+    href: "https://www.zmdmap.com/",
+    iconSrc: "https://assets.zmdmap.com/logo.png",
+    iconAlt: "终末地地图站",
+  },
+];

locales/en.json

@@ -92,6 +92,7 @@
     "userGroup": "User QQ Group",
     "devGroup": "Dev QQ Group",
     "project": "PROJECT",
+    "friendLinks": "Friendly Links",
     "github": "GitHub",
     "releases": "Releases",
     "issues": "Issues",

locales/zh.json

@@ -92,6 +92,7 @@
     "userGroup": "用户 QQ 群",
     "devGroup": "开发 QQ 群",
     "project": "PROJECT",
+    "friendLinks": "友情链接",
     "github": "源码",
     "releases": "发行版",
     "issues": "问题反馈",

next.config.ts

@@ -1,9 +1,19 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: 'export',
+  output: "export",
   images: {
     unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "end.shallow.ink",
+      },
+      {
+        protocol: "https",
+        hostname: "assets.zmdmap.com",
+      },
+    ],
   },
   trailingSlash: true,
 };