docs: single-source-of-truth code examples extracted from the Example app

**Is your feature request related to a problem? Please describe.**
Code examples shown in the docs are manually maintained as raw JavaScript string literals in docs/src/data/extendedExamples/ (e.g. BottomNavigationBar.js). These are completely disconnected from the real, runnable code in example/src/Examples/. When the Example app is updated, the docs silently drift and there's no mechanism to catch the discrepancy.

**Describe the solution you'd like**
Introduce named region markers in the Example app source files using the standard VS Code folding convention:
```
// #region docs:bottom-nav-static

// #endregion docs:bottom-nav-static
```
At docs build time (inside the existing component-docs-plugin or docusaurus.config.js), a small extraction utility reads those markers and replaces the hand-written string literals in extendedExamples. The rendered output and the component remain unchanged, only the data source changes.

For guide pages (.mdx under docs/docs/guides/), an optional remark plugin could allow inline references:

```
tsx snippet="bottom-nav-static" file="../../example/src/Examples/BottomNavigationExample.tsx"
```

**Additional context**
The repo already has a custom Docusaurus plugin (docs/component-docs-plugin/index.js) that runs at build time and has access to the filesystem, making it the natural place to wire in snippet extraction with minimal new infrastructure.

从 docs/component-docs-plugin/index.js 和 docusaurus.config.js 开始，然后将 docs/src/data/extendedExamples/ 中手写的示例与 example/src/Examples/ 下的源文件进行比较。围绕提议的区域标记定义提取流程，并验证渲染后的输出和 组件保持不变；可选的 MDX remark references 属于单独的范围。

由索引模型根据 Issue 内容生成。