(#29BEDC, #517AED)
![logo-primary]({useBaseUrl("/img/brand/logo-primary.png")}){kind=logo}
(#3193FF)
![logo-flat]({useBaseUrl("/img/brand/logo-flat.png")}){kind=logo}
(#FFF)
![logo-monocrhome]({useBaseUrl("/img/brand/logo-monochrome.png")}){kind=logo}
(#3193FF)
![logo-square]({useBaseUrl("/img/brand/logo-square.png")}){kind=logo}
+社区资源，补充材料 +
+ +## 主要资源 + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { StarOutlined, SearchOutlined, TeamOutlined, VerifiedOutlined } from "@ant-design/icons"; + ++关于方法论、团队、社区和开发历史的一般信息 +
+ +## Main + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { StarOutlined, TrophyOutlined, BulbOutlined, TeamOutlined } from "@ant-design/icons"; + +| 主题 | +Logo (Ctrl/Cmd + 点击下载) | +用法 | +
| primary (#29BEDC, #517AED) |
+ |
+ 在大多数情况下首选 | +
| flat (#3193FF) |
+ |
+ For one-color context | +
| monochrome (#FFF) |
+ |
+ For grayscale context | +
| square (#3193FF) |
+ |
+ For square boundaries | +
![banner-primary]({useBaseUrl("/img/brand/banner-primary.jpg")})
+![banner-monochrome]({useBaseUrl("/img/brand/banner-monochrome.jpg")})
+
+## Social Preview
+
+Work in progress...
+
+## Presentation template
+
+Work in progress...
+
+## See also
+
+- [Discussion (github)](https://github.com/feature-sliced/documentation/discussions/399)
+- [History of development with references (figma)](https://www.figma.com/file/RPphccpoeasVB0lMpZwPVR/FSD-Brand?node-id=0%3A1)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx b/i18n/zh/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx
new file mode 100644
index 000000000..2d999f1da
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx
@@ -0,0 +1,34 @@
+---
+# sidebar_position: 3
+unlisted: true
+---
+
+# 分解速查表
+
+在您决定如何分解 UI 时，将此作为快速参考。下面还提供了 PDF 版本，您可以打印出来放在枕头下。
+
+## 选择层
+
+[下载 PDF](/files/choosing-a-layer-en.pdf)
+
+
+
+## 示例
+
+### Tweet
+
+
+
+### GitHub
+
+
+
+## 另请参阅
+- [(Thread) features 和 entities 的一般逻辑](https://t.me/feature_sliced/4262)
+- [(Thread) 臃肿逻辑的分解](https://t.me/feature_sliced/4210)
+- [(Thread) 关于在分解过程中理解责任区域](https://t.me/feature_sliced/4088)
+- [(Thread) Product List widget 的分解](https://t.me/feature_sliced/3828)
+- [(Article) 逻辑分解的不同方法](https://www.pluralsight.com/guides/how-to-organize-your-react-+-redux-codebase)
+- [(Thread) 关于 features 和 entities 之间的区别](https://t.me/feature_sliced/3776)
+- [(Thread) 关于事物和实体之间的区别 (2)](https://t.me/feature_sliced/3248)
+- [(Thread) 关于分解标准的应用](https://t.me/feature_sliced/3833)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/get-started/faq.md b/i18n/zh/docusaurus-plugin-content-docs/current/get-started/faq.md
new file mode 100644
index 000000000..eb1e0e0ca
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/get-started/faq.md
@@ -0,0 +1,68 @@
+---
+sidebar_position: 20
+pagination_next: guides/index
+---
+
+# 常见问题
+
+:::info
+
+您可以在我们的 [Telegram 聊天][telegram]、[Discord 社区][discord] 和 [GitHub Discussions][github-discussions] 中提问。
+
+:::
+
+### 有工具包或代码检查器吗？
+
+有！我们有一个名为 [Steiger][ext-steiger] 的代码检查器来检查您项目的架构，以及通过 CLI 或 IDE 的[文件夹生成器][ext-tools]。
+
+### 在哪里存储页面的布局/模板？
+
+如果您需要纯标记布局，您可以将它们保存在 `shared/ui` 中。如果您需要在内部使用更高的 layers，有几个选项：
+
+- 也许您根本不需要布局？如果布局只有几行，在每个页面中复制代码而不是试图抽象它可能是合理的。
+- 如果您确实需要布局，您可以将它们作为单独的 widgets 或 pages，并在 App 中的路由配置中组合它们。嵌套路由是另一个选项。
+
+### feature 和 entity 之间有什么区别？
+
+_entity_ 是您的应用程序正在处理的现实生活概念。_feature_ 是为您的应用程序用户提供现实生活价值的交互，是人们想要对您的 entities 做的事情。
+
+有关更多信息和示例，请参阅 [slices][reference-entities] 的参考页面。
+
+### 我可以将 pages/features/entities 嵌入彼此吗？
+
+可以，但这种嵌入应该在更高的 layers 中发生。例如，在 widget 内部，您可以导入两个 features，然后将一个 feature 作为 props/children 插入到另一个 feature 中。
+
+您不能从一个 feature 导入另一个 feature，这被 [**layers 上的导入规则**][import-rule-layers] 禁止。
+
+### Atomic Design 怎么办？
+
+该方法论的当前版本不要求也不禁止将 Atomic Design 与 Feature-Sliced Design 一起使用。
+
+例如，Atomic Design [可以很好地应用](https://t.me/feature_sliced/1653)于模块的 `ui` segment。
+
+### 有关于 FSD 的有用资源/文章等吗？
+
+有！https://github.com/feature-sliced/awesome
+
+### 为什么我需要 Feature-Sliced Design？
+
+它帮助您和您的团队在主要价值组件方面快速概览项目。标准化架构有助于加快入职速度并解决关于代码结构的争议。请参阅[动机][motivation]页面了解更多关于为什么创建 FSD 的信息。
+
+### 新手开发者需要架构/方法论吗？
+
+更倾向于需要
+
+*通常，当您独自设计和开发项目时，一切都很顺利。但如果开发过程中有暂停，团队中添加了新的开发者 - 那么问题就会出现*
+
+### 如何处理授权上下文？
+
+在[这里](/docs/guides/examples/auth)有答案
+
+[ext-steiger]: https://github.com/feature-sliced/steiger
+[ext-tools]: https://github.com/feature-sliced/awesome?tab=readme-ov-file#tools
+[import-rule-layers]: /docs/reference/layers#import-rule-on-layers
+[reference-entities]: /docs/reference/layers#entities
+[motivation]: /docs/about/motivation
+[telegram]: https://t.me/feature_sliced
+[discord]: https://discord.gg/S8MzWTUsmp
+[github-discussions]: https://github.com/feature-sliced/documentation/discussions
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/get-started/index.mdx b/i18n/zh/docusaurus-plugin-content-docs/current/get-started/index.mdx
new file mode 100644
index 000000000..50a86a57d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/get-started/index.mdx
@@ -0,0 +1,38 @@
+---
+hide_table_of_contents: true
+pagination_prev: intro
+---
+
+import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx"
+import { RocketOutlined, PlaySquareOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+
+# 🚀 开始使用
+
++欢迎！本节将帮助您熟悉 Feature-Sliced Design 的应用和方法论的基础知识。您还将了解该方法论的主要优势以及创建它的原因。 +
+ +上图显示：三个支柱，从左到右分别标记为 "Layers"、"Slices" 和 "Segments"。
+"Layers" 支柱包含七个从上到下排列的部分，分别标记为 "app"、"processes"、"pages"、"widgets"、"features"、"entities" 和 "shared"。"processes" 部分被划掉了。"entities" 部分连接到第二个支柱 "Slices"，表示第二个支柱是 "entities" 的内容。
+"Slices" 支柱包含三个从上到下排列的部分，分别标记为 "user"、"post" 和 "comment"。"post" 部分以同样的方式连接到第三个支柱 "Segments"，表示它是 "post" 的内容。
+"Segments" 支柱包含三个从上到下排列的部分，分别标记为 "ui"、"model" 和 "api"。
+A place to share your knowledge.
+{article.description}
+ Read more... +A place to share your knowledge.
+A place to share your knowledge.
+Popular Tags
+ + +A place to share your knowledge.
+Popular Tags
+ + ++ Have an account? +
+ + {registerData?.error && ( ++ Need an account? +
+ + {signInData?.error && ( +Popular Tags
+ + +A place to share your knowledge.
+{article.description}
+ Read more... +{article.article.body}
++ Sign in + or + Sign up + to add comments on this article. +
+{comment.body}
++方法论应用的小型实用示例 +
+ +## Main + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { UserSwitchOutlined, LayoutOutlined, FontSizeOutlined } from "@ant-design/icons"; + ++关于使用 Feature-Sliced Design 的实用指南和示例。还描述了迁移指南和有害实践手册。当您试图实现特定功能或想要看看方法论在"实战"中的表现时，这是最有用的。 +
+ +## Main + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { ToolOutlined, ImportOutlined, BugOutlined, FunctionOutlined } from "@ant-design/icons"; + +My Custom App component
+Post id: {post.id}
+{post.body}
++Feature-Sliced Design 关键概念的详细描述。 +
+ +![A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out.]({useBaseUrl("/img/layers/folders-graphic-light.svg#light-mode-only")})
+![A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out.]({useBaseUrl("/img/layers/folders-graphic-dark.svg#dark-mode-only")})
+
+1. App
+2. Processes (deprecated)
+3. Pages
+4. Widgets
+5. Features
+6. Entities
+7. Shared
+
+您不必在项目中使用每一层 — 只有当您认为它们为您的项目带来价值时才添加它们。通常，大多数前端项目至少会有 Shared、Pages 和 App 层。
+
+在实践中，层是具有小写名称的文件夹（例如，`📁 shared`、`📁 pages`、`📁 app`）。_不建议_添加新层，因为它们的语义是标准化的。
+
+## 层上的导入规则
+
+层由 _slices_ 组成 — 高度内聚的模块组。slices 之间的依赖关系由**层上的导入规则**调节：
+
+> _slice 中的模块（文件）只能在其他 slices 位于严格较低的层时导入它们。_
+
+例如，文件夹 `📁 ~/features/aaa` 是一个名为"aaa"的 slice。其中的文件 `~/features/aaa/api/request.ts` 不能从 `📁 ~/features/bbb` 中的任何文件导入代码，但可以从 `📁 ~/entities` 和 `📁 ~/shared` 导入代码，以及从 `📁 ~/features/aaa` 导入任何同级代码，例如 `~/features/aaa/lib/cache.ts`。
+
+App 和 Shared 层是此规则的**例外** — 它们既是层又是 slice。Slices 按业务域划分代码，这两层是例外，因为 Shared 没有业务域，而 App 结合了所有业务域。
+
+在实践中，这意味着 App 和 Shared 层由 segments 组成，segments 可以自由地相互导入。
+
+## 层定义
+
+本节描述每一层的语义含义，以便直观地了解什么样的代码属于那里。
+
+### Shared
+
+这一层为应用程序的其余部分奠定了基础。这是与外部世界建立连接的地方，例如后端、第三方库、环境。这也是定义您自己的高度封装库的地方。
+
+这一层，像 App 层一样，_不包含 slices_。Slices 旨在将层划分为业务域，但业务域在 Shared 中不存在。这意味着 Shared 中的所有文件都可以相互引用和导入。
+
+Here are the segments that you can typically find in this layer:
+
+- `📁 api` — the API client and potentially also functions to make requests to specific backend endpoints.
+- `📁 ui` — the application's UI kit.
+ Components on this layer should not contain business logic, but it's okay for them to be business-themed. For example, you can put the company logo and page layout here. Components with UI logic are also allowed (for example, autocomplete or a search bar).
+- `📁 lib` — a collection of internal libraries.
+ This folder should not be treated as helpers or utilities ([read here why these folders often turn into a dump][ext-sova-utility-dump]). Instead, every library in this folder should have one area of focus, for example, dates, colors, text manipulation, etc. That area of focus should be documented in a README file. The developers in your team should know what can and cannot be added to these libraries.
+- `📁 config` — environment variables, global feature flags and other global configuration for your app.
+- `📁 routes` — route constants or patterns for matching routes.
+- `📁 i18n` — setup code for translations, global translation strings.
+
+You are free to add more segments, but make sure that the name of these segments describes the purpose of the content, not its essence. For example, `components`, `hooks`, and `types` are bad segment names because they aren't that helpful when you're looking for code.
+
+### Entities
+
+Slices on this layer represent concepts from the real world that the project is working with. Commonly, they are the terms that the business uses to describe the product. For example, a social network might work with business entities like User, Post, and Group.
+
+An entity slice might contain the data storage (`📁 model`), data validation schemas (`📁 model`), entity-related API request functions (`📁 api`), as well as the visual representation of this entity in the interface (`📁 ui`). The visual representation doesn't have to produce a complete UI block — it is primarily meant to reuse the same appearance across several pages in the app, and different business logic may be attached to it through props or slots.
+
+#### Entity relationships
+
+Entities in FSD are slices, and by default, slices cannot know about each other. In real life, however, entities often interact with each other, and sometimes one entity owns or contains other entities. Because of that, the business logic of these interactions is preferably kept in higher layers, like Features or Pages.
+
+When one entity's data object contains other data objects, usually it's a good idea to make the connection between the entities explicit and side-step the slice isolation by making a cross-reference API with the `@x` notation. The reason is that connected entities need to be refactored together, so it's best to make the connection impossible to miss.
+
+For example:
+
+```ts title="entities/artist/model/artist.ts"
+import type { Song } from "entities/song/@x/artist";
+
+export interface Artist {
+ name: string;
+ songs: Array![Three files importing each other in a circle]({useBaseUrl("/img/circular-import-light.svg#light-mode-only")})
+ ![Three files importing each other in a circle]({useBaseUrl("/img/circular-import-dark.svg#dark-mode-only")})
+ ![]({useBaseUrl("/img/coupling-cohesion-light.svg#light-mode-only")})
+ ![]({useBaseUrl("/img/coupling-cohesion-dark.svg#dark-mode-only")})
+