feat: add the Chinese i8n support on the setting table (#404)

* feat: Added i8n to the mcp table

* feat: Added i8n to the about table

web/messages/en.json

@@ -43,6 +43,15 @@
       "maxSearchResults": "Max search results",
       "maxSearchResultsDescription": "By default, each search step has 3 results."
     },
+    "mcp": {
+      "title": "MCP Servers",
+      "description": "The Model Context Protocol boosts DeerFlow by integrating external tools for tasks like private domain searches, web browsing, food ordering, and more. Click here to",
+      "learnMore": "learn more about MCP.",
+      "enableDisable": "Enable/disable server",
+      "deleteServer": "Delete server",
+      "disabled": "Disabled",
+      "new": "New"
+    },
     "about": {
       "title": "About"
     },

web/messages/zh.json

@@ -43,6 +43,15 @@
       "maxSearchResults": "最大搜索结果数",
       "maxSearchResultsDescription": "默认情况下，每个搜索步骤有 3 个结果。"
     },
+    "mcp": {
+      "title": "MCP 服务器",
+      "description": "模型上下文协议通过集成外部工具来增强 DeerFlow，用于私域搜索、网页浏览、订餐等任务。点击这里",
+      "learnMore": "了解更多关于 MCP 的信息。",
+      "enableDisable": "启用/禁用服务器",
+      "deleteServer": "删除服务器",
+      "disabled": "已禁用",
+      "new": "新增"
+    },
     "about": {
       "title": "关于"
     },

web/src/app/settings/tabs/about-tab.tsx

@@ -2,14 +2,21 @@
 // SPDX-License-Identifier: MIT
 
 import { BadgeInfo } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
 
 import { Markdown } from "~/components/deer-flow/markdown";
 
-import about from "./about.md";
+import aboutEn from "./about-en.md";
+import aboutZh from "./about-zh.md";
 import type { Tab } from "./types";
 
 export const AboutTab: Tab = () => {
-  return <Markdown>{about}</Markdown>;
+  const locale = useLocale();
+  const t = useTranslations("settings.about");
+
+  const aboutContent = locale === "zh" ? aboutZh : aboutEn;
+
+  return <Markdown>{aboutContent}</Markdown>;
 };
 AboutTab.icon = BadgeInfo;
 AboutTab.displayName = "About";

web/src/app/settings/tabs/about-zh.md

@@ -0,0 +1,45 @@
+# 🦌 [关于 DeerFlow](https://github.com/bytedance/deer-flow)
+
+> **源于开源，回馈开源**
+
+**DeerFlow**（**深度探索**和**高效研究**流程）是一个由社区驱动的 AI 自动化框架，受到开源社区卓越贡献的启发。我们的使命是将语言模型与专业工具无缝集成，用于网络搜索、爬取和 Python 代码执行等任务——同时回馈使这种创新成为可能的社区。
+
+---
+
+## 🌟 GitHub 仓库
+
+在 GitHub 上探索 DeerFlow：[github.com/bytedance/deer-flow](https://github.com/bytedance/deer-flow)
+
+---
+
+## 📜 软件许可证
+
+DeerFlow 作为开源项目，在 **MIT 许可证** 下分发。
+
+---
+
+## 🙌 致谢
+
+我们衷心感谢使 DeerFlow 成为现实的开源项目和贡献者。我们真正站在巨人的肩膀上。
+
+### 核心框架
+- **[LangChain](https://github.com/langchain-ai/langchain)**：支持我们 LLM 交互和链的卓越框架。
+- **[LangGraph](https://github.com/langchain-ai/langgraph)**：实现复杂的多智能体编排。
+- **[Next.js](https://nextjs.org/)**：构建 Web 应用程序的前沿框架。
+
+### UI 库
+- **[Shadcn](https://ui.shadcn.com/)**：支持我们 UI 的简约组件。
+- **[Zustand](https://zustand.docs.pmnd.rs/)**：令人惊叹的状态管理库。
+- **[Framer Motion](https://www.framer.com/motion/)**：出色的动画库。
+- **[React Markdown](https://www.npmjs.com/package/react-markdown)**：具有可定制性的卓越 markdown 渲染。
+- **[SToneX](https://github.com/stonexer)**：感谢他对逐字符视觉效果的宝贵贡献。
+
+这些杰出的项目构成了 DeerFlow 的骨干，体现了开源协作的变革力量。
+
+### 特别感谢
+最后，我们要向 `DeerFlow` 的核心作者表达衷心的感谢：
+
+- **[Daniel Walnut](https://github.com/hetaoBackend/)**
+- **[Henry Li](https://github.com/magiccube/)**
+
+没有他们的愿景、热情和奉献，`DeerFlow` 就不会有今天的成就。

web/src/app/settings/tabs/mcp-tab.tsx

@@ -3,6 +3,7 @@
 
 import { motion } from "framer-motion";
 import { Blocks, PencilRuler, Trash } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useCallback, useState } from "react";
 
 import { Tooltip } from "~/components/deer-flow/tooltip";
@@ -16,6 +17,7 @@ import { AddMCPServerDialog } from "../dialogs/add-mcp-server-dialog";
 import type { Tab } from "./types";
 
 export const MCPTab: Tab = ({ settings, onChange }) => {
+  const t = useTranslations("settings.mcp");
   const [servers, setServers] = useState<MCPServerMetadata[]>(
     settings.mcp.servers,
   );
@@ -70,19 +72,17 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
     <div className="flex flex-col gap-4">
       <header>
         <div className="flex items-center justify-between gap-2">
-          <h1 className="text-lg font-medium">MCP Servers</h1>
+          <h1 className="text-lg font-medium">{t("title")}</h1>
           <AddMCPServerDialog onAdd={handleAddServers} />
         </div>
         <div className="text-muted-foreground markdown text-sm">
-          The Model Context Protocol boosts DeerFlow by integrating external
-          tools for tasks like private domain searches, web browsing, food
-          ordering, and more. Click here to
+          {t("description")}
           <a
             className="ml-1"
             target="_blank"
             href="https://modelcontextprotocol.io/"
           >
-            learn more about MCP.
+            {t("learnMore")}
           </a>
         </div>
       </header>
@@ -101,7 +101,7 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
                 {...(isNew && newlyAdded && animationProps)}
               >
                 <div className="absolute top-3 right-2">
-                  <Tooltip title="Enable/disable server">
+                  <Tooltip title={t("enableDisable")}>
                     <div className="flex items-center gap-2">
                       <Switch
                         id="airplane-mode"
@@ -114,7 +114,7 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
                   </Tooltip>
                 </div>
                 <div className="absolute top-1 right-12 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                  <Tooltip title="Delete server">
+                  <Tooltip title={t("deleteServer")}>
                     <Button
                       variant="ghost"
                       size="icon"
@@ -139,7 +139,7 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
                     <div className="text-lg font-medium">{server.name}</div>
                     {!server.enabled && (
                       <div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
-                        Disabled
+                        {t("disabled")}
                       </div>
                     )}
                     <div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
@@ -147,7 +147,7 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
                     </div>
                     {isNew && (
                       <div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
-                        New
+                        {t("new")}
                       </div>
                     )}
                   </div>