docs: 간체 중국어 번역

.vitepress/ch.mts

@@ -0,0 +1,208 @@
+import { type DefaultTheme, defineConfig } from "vitepress";
+
+export const ch = defineConfig({
+  lang: "ch",
+  title: "Frontend Fundamentals",
+  description: "易于修改的前端代码指南",
+  lastUpdated: true,
+  themeConfig: {
+    logo: "/images/ff-symbol.svg",
+    nav: nav(),
+
+    editLink: {
+      pattern: "https://github.com/toss/frontend-fundamentals/edit/main/:path",
+      text: "在GitHub编辑此页"
+    },
+
+    outline: {
+      label: "页面内容"
+    },
+    docFooter: {
+      prev: "上一页",
+      next: "下一页"
+    },
+    lastUpdated: {
+      text: "最后更新"
+    },
+
+    sidebar: sidebar()
+  }
+});
+
+function nav(): DefaultTheme.NavItem[] {
+  return [{ text: "首页", link: "/ch" }];
+}
+
+function sidebar(): DefaultTheme.Sidebar {
+  return [
+    {
+      text: "好代码的标准",
+      items: [
+        {
+          text: "开始使用",
+          link: "/ch/code/start"
+        },
+        {
+          text: "易于修改的代码",
+          link: "/ch/code/"
+        },
+        {
+          text: "社区",
+          items: [
+            {
+              text: "介绍",
+              link: "/ch/code/community"
+            },
+            {
+              text: "⭐ 专题讨论",
+              link: "https://github.com/toss/frontend-fundamentals/discussions?discussions_q=is%3Aopen+label%3A%22%EC%84%B1%EC%A7%80+%E2%9B%B2%22"
+            },
+            {
+              text: "A vs B",
+              link: "https://github.com/toss/frontend-fundamentals/discussions/categories/a-vs-b?discussions_q=is%3Aopen+category%3A%22A+vs+B%22+sort%3Adate_created"
+            },
+            {
+              text: "公开论坛",
+              link: "https://github.com/toss/frontend-fundamentals/discussions/categories/open-forum?discussions_q=is%3Aopen+sort%3Adate_created+category%3A%22Open+Forum%22"
+            }
+          ],
+          collapsed: true
+        }
+      ]
+    },
+    {
+      text: "编写好代码的策略",
+      items: [
+        {
+          text: "1. 可读性",
+          items: [
+            {
+              text: "减少语境",
+              items: [
+                {
+                  text: "A. 分离不一起运行的代码",
+                  link: "/ch/code/examples/submit-button"
+                },
+                {
+                  text: "B. 抽象实现细节",
+                  link: "/ch/code/examples/login-start-page"
+                },
+                {
+                  text: "C. 根据逻辑类型拆分合并的函数",
+                  link: "/ch/code/examples/use-page-state-readability"
+                }
+              ],
+              collapsed: true
+            },
+            {
+              text: "命名",
+              items: [
+                {
+                  text: "A. 为复杂条件命名",
+                  link: "/ch/code/examples/condition-name"
+                },
+                {
+                  text: "B. 为魔数命名",
+                  link: "/ch/code/examples/magic-number-readability"
+                }
+              ],
+              collapsed: true
+            },
+            {
+              text: "使其从上到下顺利阅读",
+              items: [
+                {
+                  text: "A. 减少视点转移",
+                  link: "/ch/code/examples/user-policy"
+                },
+                {
+                  text: "B. 简化三元运算符",
+                  link: "/ch/code/examples/ternary-operator"
+                }
+              ],
+              collapsed: true
+            }
+          ]
+        },
+
+        {
+          text: "2. 可预测性",
+          items: [
+            {
+              text: "A. 避免命名重复",
+              link: "/ch/code/examples/http"
+            },
+            {
+              text: "B. 统一同类函数的返回类型",
+              link: "/ch/code/examples/use-user"
+            },
+            {
+              text: "C. 揭示隐藏的逻辑",
+              link: "/ch/code/examples/hidden-logic"
+            }
+          ]
+        },
+        {
+          text: "3. 内聚性",
+          items: [
+            {
+              text: "A. 需同时修改的文件位于同一目录下",
+              link: "/ch/code/examples/code-directory"
+            },
+            {
+              text: "B. 消除魔数",
+              link: "/ch/code/examples/magic-number-cohesion"
+            },
+            {
+              text: "C. 考虑表单的内聚性",
+              link: "/ch/code/examples/form-fields"
+            }
+          ]
+        },
+        {
+          text: "4. 耦合性",
+          items: [
+            {
+              text: "A. 单独管理责任",
+              link: "/ch/code/examples/use-page-state-coupling"
+            },
+            {
+              text: "B. 允许重复代码",
+              link: "/ch/code/examples/use-bottom-sheet"
+            },
+            {
+              text: "C. 消除 Props Drilling",
+              link: "/ch/code/examples/item-edit-modal"
+            }
+          ]
+        }
+      ]
+    }
+  ];
+}
+
+export const search: DefaultTheme.LocalSearchOptions["locales"] = {
+  ch: {
+    translations: {
+      button: {
+        buttonText: "搜索",
+        buttonAriaLabel: "搜索"
+      },
+      modal: {
+        backButtonTitle: "返回",
+        displayDetails: "更多",
+        footer: {
+          closeKeyAriaLabel: "关闭",
+          closeText: "关闭",
+          navigateDownKeyAriaLabel: "向下",
+          navigateText: "移动",
+          navigateUpKeyAriaLabel: "向上",
+          selectKeyAriaLabel: "选择",
+          selectText: "选择"
+        },
+        noResultsText: "没有搜索结果。",
+        resetButtonTitle: "全部清除"
+      }
+    }
+  }
+};

.vitepress/config.mts

@@ -6,6 +6,7 @@ import { shared } from "./shared.mts";
 import { en } from "./en.mts";
 import { ko } from "./ko.mts";
 import { ja } from "./ja.mts";
+import { ch } from "./ch.mjs";
 
 const require = createRequire(import.meta.url);
 
@@ -14,6 +15,7 @@ export default defineConfig({
   locales: {
     en: { label: "English", ...en },
     ja: { label: "日本語", ...ja },
+    ch: { label: "简体中文", ...ch },
     root: { label: "한국어", ...ko }
   },
   vite: {

.vitepress/shared.mts

@@ -1,6 +1,7 @@
 import { defineConfig, HeadConfig } from "vitepress";
 import { search as koSearch } from "./ko.mts";
 import { search as jaSearch } from "./ja.mts";
+import { search as chSearch } from "./ch.mts";
 
 export const shared = defineConfig({
   lastUpdated: true,
@@ -70,7 +71,8 @@ export const shared = defineConfig({
       options: {
         locales: {
           ...koSearch,
-          ...jaSearch
+          ...jaSearch,
+          ...chSearch
         }
       }
     },

ch/code/community.md

@@ -0,0 +1,32 @@
+---
+comments: false
+---
+
+# 社区
+
+`Frontend Fundamentals`(FF)与社区一起制定好代码的标准。
+
+目前由 Toss 前端分部维护。
+
+## 专题讨论
+
+查看社区中的精彩讨论。超出《Frontend Fundamentals》 文档中的内容，拓宽你对好代码的思考。
+
+- [专题讨论](https://github.com/toss/frontend-fundamentals/discussions?discussions_q=is%3Aopen+label%3A%22%EC%84%B1%EC%A7%80+%E2%9B%B2%22)
+
+## 探讨代码疑虑
+
+如果你有令人疑惑的代码，可以将其发布到 GitHub 论坛上。
+可以在社区中多角度审查你的代码，并与社区一起探讨好代码的标准。
+
+受到广泛共鸣的案例可直接上传到 Frontend Fundamentals 文档中。贡献方法将会稍后公布。
+
+- [在 GitHub 论坛上发帖](https://github.com/toss/frontend-fundamentals/discussions)
+
+## 为好代码标准添加意见
+
+如果对好代码的标准有意见，或者想提出新的观点，可以参与投票选出你认为更好的代码，并留下自己的意见。与社区沟通，共同构建更加丰富而深入的标准。
+
+这可以成为一个契机，帮助你确立判断两段代码之间哪一段更好的标准。
+
+- [查看 A vs B 上的代码](https://github.com/toss/frontend-fundamentals/discussions/categories/a-vs-b)

ch/code/examples/code-directory.md

@@ -0,0 +1,77 @@
+# 需同时修改的文件位于同一目录下
+
+<div style="margin-top: 16px">
+<Badge type="info" text="内聚性" />
+</div>
+
+在项目中编写代码时，通常会将 Hook、组件和工具函数等拆分到多个文件进行管理。为了更轻松地创建、查找和删除这些文件，设计一个合适的目录结构至关重要。
+
+将需要一起修改的源文件放在同一目录下，可以更直观地展现代码的依赖关系。这不仅可以防止随意引用不应被引用的文件，还能一次性删除相关文件。
+
+## 📝 代码示例
+
+以下代码是按照模块类型(如 Presentational 组件、Container 组件、Hook、常量等)分类的目录结构。
+
+```text
+└─ src
+   ├─ components
+   ├─ constants
+   ├─ containers
+   ├─ contexts
+   ├─ remotes
+   ├─ hooks
+   ├─ utils
+   └─ ...
+```
+
+## 👃 闻代码
+
+### 内聚性
+
+如果按照这种方式按类划分文件，就很难确定代码之间的引用关系。代码文件之间的依赖关系需要开发者在分析代码时自行掌握和处理。
+此外，如果某个组件、Hook 或工具函数不再使用而被删除，相关代码可能未被同时删除，从而留下未使用代码。
+
+项目的规模往往会逐步扩大，随着项目规模的增加（比如 2 倍、10 倍甚至 100 倍），代码之间的依赖关系也将变得更加复杂。一个目录可能包含 100 多个文件。
+
+## ✏️ 尝试改善
+
+以下是一个实例，展示了如何通过将需要一起修改的代码文件放在同一目录下，来优化项目结构。
+
+```text
+└─ src
+   │  // 整个项目中使用的代码
+   ├─ components
+   ├─ containers
+   ├─ hooks
+   ├─ utils
+   ├─ ...
+   │
+   └─ domains
+      │  // 只在 Domain1 中使用的代码
+      ├─ Domain1
+      │     ├─ components
+      │     ├─ containers
+      │     ├─ hooks
+      │     ├─ utils
+      │     └─ ...
+      │
+      │  // 只在 Domain2 中使用的代码
+      └─ Domain2
+            ├─ components
+            ├─ containers
+            ├─ hooks
+            ├─ utils
+            └─ ...
+```
+
+将一起修改的代码文件放在同一目录下，很容易理解代码之间的依赖关系。
+
+例如，假设一个域(`Domain1`)的子代码中引用另一个域(`Domain2`)的源代码，如下所示：
+
+```typescript
+import { useFoo } '../../../Domain2/hooks/useFoo'
+```
+
+如果遇到这样的 import 语句，就能很容易地意识到引用了错误的文件。
+
+此外，当删除与特定功能相关的代码时，只需删除整个目录即可一并清理所有相关代码，从而确保项目中不会遗留未使用的代码。