From 8035eabb859d8adde4c972592ecf3a37253829cb Mon Sep 17 00:00:00 2001
From: NtskwK <natsukawa247@outlook.com>
Date: Thu, 26 Mar 2026 09:38:29 +0800
Subject: chore(docs): refactor Mermaid component and clean up imports in
 documentation pages

---
 packages/docs/app/components/mermaid.tsx |  2 +-
 packages/docs/app/docs/page.tsx          | 16 ++++++----------
 packages/docs/app/routes/home.tsx        | 10 +++++-----
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/docs/app/components/mermaid.tsx b/packages/docs/app/components/mermaid.tsx
index 2df47cc..85ab342 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -17,7 +17,7 @@ export function Mermaid({ chart }: { chart: string }) {
         nodes: [ref.current],
       });
     }
-  }, [chart]);
+  }, []);
 
   return (
     <div className="not-prose my-6">
diff --git a/packages/docs/app/docs/page.tsx b/packages/docs/app/docs/page.tsx
index 6ff6b4a..5bddb8d 100644
--- a/packages/docs/app/docs/page.tsx
+++ b/packages/docs/app/docs/page.tsx
@@ -3,12 +3,7 @@ import { useFumadocsLoader } from "fumadocs-core/source/client";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
-import {
-  DocsBody,
-  DocsDescription,
-  DocsPage,
-  DocsTitle,
-} from "fumadocs-ui/page";
+import { DocsBody, DocsPage } from "fumadocs-ui/page";
 import { Mermaid } from "@/components/mermaid";
 import { i18n } from "@/lib/i18n";
 import { baseOptions } from "@/lib/layout.shared";
@@ -19,8 +14,9 @@ export async function loader({ params }: Route.LoaderArgs) {
   // 从路由参数获取语言，如果没有则使用默认语言
   // URL 格式: /docs/manual/getting-started (默认语言 zh)
   // URL 格式: /en/docs/manual/getting-started (英语)
-  const lang =
-    params.lang && i18n.languages.includes(params.lang as any)
+  const lang: "zh" | "en" =
+    params.lang &&
+    i18n.languages.includes(params.lang as (typeof i18n)["languages"][number])
       ? (params.lang as "zh" | "en")
       : (i18n.defaultLanguage as "zh" | "en");
 
@@ -41,7 +37,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 }
 
 const clientLoader = browserCollections.docs.createClientLoader({
-  component({ toc, frontmatter, default: Mdx }) {
+  component({ toc, default: Mdx }) {
     return (
       <DocsPage toc={toc}>
         {/* 老王说不要这个 */}
@@ -67,7 +63,7 @@ const clientLoader = browserCollections.docs.createClientLoader({
   },
 });
 
-export default function Page({ loaderData, params }: Route.ComponentProps) {
+export default function Page({ loaderData }: Route.ComponentProps) {
   const { pageTree, lang } = useFumadocsLoader(loaderData);
 
   return (
diff --git a/packages/docs/app/routes/home.tsx b/packages/docs/app/routes/home.tsx
index fe561e4..26c0f52 100644
--- a/packages/docs/app/routes/home.tsx
+++ b/packages/docs/app/routes/home.tsx
@@ -110,7 +110,7 @@ const texts = {
   },
 };
 
-export function meta({ params }: Route.MetaArgs) {
+export function meta() {
   return [
     { title: "DropOut - Modern Minecraft Launcher" },
     {
@@ -172,9 +172,9 @@ export default function Home({ params }: Route.ComponentProps) {
 
         {/* Features Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
-          {t.features.items.map((item, i) => (
+          {t.features.items.map((item) => (
             <div
-              key={i}
+              key={item.title}
               className="p-6 rounded-lg border border-blue-600/20 bg-fd-card hover:border-blue-600/50 transition-colors"
             >
               <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
@@ -187,8 +187,8 @@ export default function Home({ params }: Route.ComponentProps) {
         <div className="text-center mb-16">
           <h2 className="text-3xl font-bold mb-6">{t.why.title}</h2>
           <div className="max-w-3xl mx-auto space-y-4 text-left">
-            {t.why.items.map((item, i) => (
-              <div key={i} className="p-4 rounded-lg bg-fd-muted/50">
+            {t.why.items.map((item) => (
+              <div key={item.q} className="p-4 rounded-lg bg-fd-muted/50">
                 <p className="text-fd-foreground">
                   <span className="font-semibold">{item.q}</span>
                   <br />
-- 
cgit v1.2.3-70-g09d2