@modern-js/main-doc 2.31.2 → 2.32.1

package/docs/zh/configure/app/dev/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "dev (开发调试)",
-  "position": 7
+  "label": "dev 开发",
+  "position": 1
 }

package/docs/zh/configure/app/experiments/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "experiments (实验性)",
-  "position": 15
+  "label": "experiments 实验性",
+  "position": 14
 }

package/docs/zh/configure/app/html/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "html (模板)",
-  "position": 2
+  "label": "html 模板",
+  "position": 3
 }

package/docs/zh/configure/app/output/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "output (构建产物)",
-  "position": 2
+  "label": "output 产物",
+  "position": 7
 }

package/docs/zh/configure/app/output/ssg.mdx

@@ -10,7 +10,7 @@ sidebar_label: ssg
 开启**自控式路由**或**约定式路由** SSG 功能的配置。
 
 :::info 客户端路由
-相关内容可以查看[路由](/guides/basic-features/routes)。
+相关内容可以查看[路由方案](/guides/basic-features/routes)。
 
 :::
 

package/docs/zh/configure/app/performance/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "performance (性能)",
+  "label": "performance 性能",
   "position": 13
 }

package/docs/zh/configure/app/plugins.mdx

@@ -1,9 +1,8 @@
 ---
-title: plugins (插件)
 sidebar_position: 9
 ---
 
-# plugins (插件)
+# plugins 插件
 
 - **类型：** `CliPlugin[]`
 - **默认值：** `[]`

package/docs/zh/configure/app/runtime/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "runtime (运行时)",
-  "position": 3
+  "label": "runtime 运行时",
+  "position": 12
 }

package/docs/zh/configure/app/security/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "security (安全)",
-  "position": 14
+  "label": "security 安全",
+  "position": 11
 }

package/docs/zh/configure/app/server/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "server (服务器)",
-  "position": 4
+  "label": "server 服务器",
+  "position": 6
 }

package/docs/zh/configure/app/source/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "source (源文件)",
-  "position": 1
+  "label": "source 源文件",
+  "position": 5
 }

package/docs/zh/configure/app/source/design-system.mdx

@@ -647,7 +647,7 @@ const designSystem = {
 </details>
 
 :::tip 提示
-更多关于 TailwindCSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
+更多关于 Tailwind CSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
 
 :::
 

package/docs/zh/configure/app/testing/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "testing (测试)",
-  "position": 8
+  "label": "testing 测试",
+  "position": 10
 }

package/docs/zh/configure/app/tools/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "tools (底层配置)",
-  "position": 12
+  "label": "tools 底层工具",
+  "position": 4
 }

package/docs/zh/configure/app/tools/tailwindcss.mdx

@@ -10,21 +10,14 @@ sidebar_label: tailwindcss
 ```js
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // 使用 source.designSystem 配置作为 Tailwind CSS Theme 配置
-  theme: source.designSystem,
 };
 ```
 
-对应 [TailwindCSS](https://tailwindcss.com/docs/configuration) 的配置。
+对应 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置。
 
 ### Function 类型
 
@@ -58,8 +51,8 @@ export default {
 };
 ```
 
-### 限制
+### 注意事项
 
-注意，该配置中不允许使用 `theme` 配置项，否则会构建失败。在 Modern.js 中，请使用 [source.designSystem](/configure/app/source/design-system) 作为 `Tailwind CSS Theme` 配置。
+注意，如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
 
-其他配置的使用方式和 Tailwind CSS 一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。

package/docs/zh/configure/app/usage.mdx

@@ -203,9 +203,7 @@ export default defineConfig({
 - 由于 `modern.config.local.ts` 仅在本地调试时使用，因此不建议将其提交到代码仓库中，请确保项目的 `.gitignore` 文件中包含 `modern.config.local.ts` 等文件。
 
 ```bash title=".gitingore"
-modern.config.local.ts
-modern.config.local.js
-modern.config.local.mjs
+modern.config.local.*
 ```
 
 ## 合并多份配置

package/docs/zh/guides/advanced-features/bff/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "BFF",
+  "label": "使用 BFF",
   "position": 2,
   "link": {
     "type": "doc",

package/docs/zh/guides/advanced-features/code-split.mdx

@@ -1,7 +1,7 @@
 ---
-title: 代码分割
-sidebar_position: 6
+sidebar_position: 3
 ---
+
 # 代码分割
 
 代码分割是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # 浏览器兼容性

package/docs/zh/guides/advanced-features/eslint.mdx

@@ -1,7 +1,7 @@
 ---
-title: ESLint 规则集
 sidebar_position: 8
 ---
+
 # ESLint 规则集
 
 {/* 参考 [实战教程 - 确认编程环境](../handbook/c03-ide/3.1-setting-up) 确保本地 IDE 环境正常。  */}

package/docs/zh/guides/advanced-features/low-level.mdx

@@ -1,7 +1,7 @@
 ---
-title: 配置底层工具
-sidebar_position: 11
+sidebar_position: 10
 ---
+
 # 配置底层工具
 
 ## 使用方式

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -1,5 +1,4 @@
 ---
-title: 使用 Rspack
 sidebar_position: 1
 ---
 

package/docs/zh/guides/advanced-features/ssg.mdx

@@ -1,9 +1,8 @@
 ---
-title: 静态站点生成（SSG）
-sidebar_position: 4
+sidebar_position: 5
 ---
 
-# 静态站点生成（SSG）
+# 静态站点生成
 
 SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。
 
@@ -55,7 +54,7 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 - `/user/profile`
 
 :::note
-如果还不了解约定式路由的规则，可以先查看[路由](/guides/basic-features/routes)。
+如果还不了解约定式路由的规则，可以先查看[路由方案](/guides/basic-features/routes)。
 
 :::
 

package/docs/zh/guides/advanced-features/ssr.mdx

@@ -1,9 +1,8 @@
 ---
-title: 服务端渲染（SSR）
-sidebar_position: 3
+sidebar_position: 4
 ---
 
-# 服务端渲染（SSR）
+# 服务端渲染
 
 在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
 

package/docs/zh/guides/advanced-features/testing.mdx

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 10
+sidebar_position: 11
 ---
 
-# 测试
+# 使用 Jest 测试
 
 Modern.js 默认集成了 [Jest](https://jestjs.io/) 的测试能力。
 

package/docs/zh/guides/advanced-features/using-storybook.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 12
 ---
 
 # 使用 Storybook

package/docs/zh/guides/advanced-features/web-server.mdx

@@ -1,7 +1,7 @@
 ---
-title: 自定义 Web Server
-sidebar_position: 3
+sidebar_position: 13
 ---
+
 # 自定义 Web Server
 
 Modern.js 作为以客户端为中心的开发框架，对服务端的定制能力较弱。而在有些开发场景下，需要定制特殊的服务端逻辑，例如用户鉴权、请求预处理、添加页面渲染骨架等。

package/docs/zh/guides/basic-features/alias.mdx

@@ -1,8 +1,8 @@
 ---
-title: 别名
-sidebar_position: 8
+sidebar_position: 3
 ---
-# 别名
+
+# 路径别名
 
 Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:
 

package/docs/zh/guides/basic-features/css.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# CSS 开发方案
+# 样式开发
 
 Modern.js 内置多种常用的 CSS 开发方案，包括 Less / Sass / Stylus 预处理器、PostCSS、CSS Modules、CSS-in-JS 和 Tailwind CSS。
 
@@ -65,7 +65,7 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 按照如下进行选择：
 
-```bash
+```text
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
@@ -103,6 +103,38 @@ const App = () => (
 
 :::
 
+### Tailwind CSS 自动补全
+
+Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+
+你可以参考以下步骤来启动自动补全功能：
+
+1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
+2. 在项目的根目录创建 `tailwind.config.ts` 文件，并写入你需要的 Tailwind CSS 配置。
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
+    './storybook/**/*',
+  ],
+};
+```
+
+3. 在 `modern.config.ts` 中通过 [tools.tailwindcss](/configure/app/tools/tailwindcss) 引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
+
+```ts title="modern.config.ts"
+import tailwindConfig from './tailwind.config';
+
+export default defineConfig({
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+});
+```
+
+
 ### Tailwind CSS 版本
 
 Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。
@@ -120,39 +152,3 @@ Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：
 - [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。
-
-### Theme 配置
-
-当需要自定义 Tailwind CSS 的 [theme](https://tailwindcss.com/docs/theme) 配置的时候，可以在配置 [`source.designSystem`](/configure/app/source/design-system) 中修改，例如，颜色主题中增加一个 `primary`：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    designSystem: {
-      extend: {
-        colors: {
-          primary: '#5c6ac4',
-        },
-      },
-    },
-  },
-});
-```
-
-当需要对 Tailwind CSS 做 [theme](https://tailwindcss.com/docs/theme) 以外的其他特殊配置时，可以在 [`tools.tailwindcss`](/configure/app/tools/tailwindcss) 中配置，例如设置 `variants`：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    tailwindcss: {
-      variants: {
-        extend: {
-          backgroundColor: ['active'],
-        },
-      },
-    },
-  },
-});
-```
-
-> 当你为项目配置 Tailwind CSS 的时候，[source.designSystem](/configure/app/source/design-system) 和 [tools.tailwindcss](/configure/app/tools/tailwindcss) 这两个配置的组合等价于单独配置了一个 `tailwindcss.config.js` 文件。其中 [source.designSystem](/configure/app/source/design-system) 等效于 Tailwind CSS 的 [theme](https://v2.tailwindcss.com/docs/configuration#theme) 配置。

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -1,6 +1,5 @@
 ---
-title: 数据获取
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # 数据获取

package/docs/zh/guides/basic-features/env-vars.mdx

@@ -1,7 +1,7 @@
 ---
-title: 环境变量
 sidebar_position: 7
 ---
+
 # 环境变量
 
 Modern.js 提供了对环境变量的支持，包含内置的环境变量和自定义的环境变量。

package/docs/zh/guides/basic-features/mock.mdx

@@ -1,7 +1,7 @@
 ---
-title: 数据模拟
-sidebar_position: 6
+sidebar_position: 5
 ---
+
 # 数据模拟
 
 Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。

package/docs/zh/guides/basic-features/proxy.mdx

@@ -1,8 +1,8 @@
 ---
-title: 代理
-sidebar_position: 5
+sidebar_position: 6
 ---
-# 代理
+
+# 网络代理
 
 ## 本地代理
 

package/docs/zh/guides/basic-features/routes.mdx

@@ -1,9 +1,8 @@
 ---
-title: 路由
 sidebar_position: 1
 ---
 
-# 路由
+# 路由方案
 
 Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
 

package/docs/zh/guides/concept/builder.mdx

@@ -16,7 +16,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 - 通用构建引擎：Modern.js Builder。
 - 底层打包工具：webpack 和 Rspack。
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## 构建文档
 

package/docs/zh/guides/concept/entries.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# 入口
+# 页面入口
 
 通过本章节，你可以了解到 Modern.js 中的入口约定，以及如何自定义入口。
 
@@ -114,7 +114,7 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 
 上述目录中，`layout.tsx` 中导出的组件会作为最外层的组件，`page.tsx` 中导出的组件会作为 `/` 路由的组件。
 
-详细内容可以参考[路由](/guides/basic-features/routes#约定式路由)。
+详细内容可以参考[路由方案](/guides/basic-features/routes#约定式路由)。
 
 #### 自控式路由
 
@@ -135,7 +135,7 @@ export default () => {
 };
 ```
 
-详细内容可以参考[路由](/guides/basic-features/routes#自控式路由)。
+详细内容可以参考[路由方案](/guides/basic-features/routes#自控式路由)。
 
 #### 自定义 Bootstrap
 

package/docs/zh/guides/get-started/upgrade.mdx

@@ -1,9 +1,8 @@
 ---
-title: 升级
 sidebar_position: 3
 ---
 
-# 升级
+# 版本升级
 
 ## 通过命令行升级
 

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.31.2",
+  "version": "2.32.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.31.2"
+    "@modern-js/builder-doc": "^2.32.1"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.31.2",
-    "@modern-js/doc-tools": "2.31.2",
-    "@modern-js/doc-plugin-auto-sidebar": "2.31.2"
+    "@modern-js/builder-doc": "2.32.1",
+    "@modern-js/doc-tools": "2.32.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.1"
   },
   "scripts": {
     "dev": "modern dev",

package/src/i18n/enUS.ts

@@ -18,7 +18,7 @@ export const EN_US = {
   feature4: 'Multi-Rendering Mode',
   featureDesc4: 'SSR, SSG, SPR, all out of the box for you.',
   feature5: 'CSS Solutions',
-  featureDesc5: 'CSS Modules, CSS-in-JS, TailwindCSS, take your pick.',
+  featureDesc5: 'CSS Modules, CSS-in-JS, Tailwind CSS, take your pick.',
   feature6: 'Easy to Configure',
   featureDesc6:
     'Launch with zero configuration, then everything is configurable.',

package/src/i18n/zhCN.ts

@@ -19,7 +19,7 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   feature4: '多渲染模式',
   featureDesc4: 'SSR、SSG、SPR 等多种渲染模式，通通开箱即用。',
   feature5: 'CSS 方案',
-  featureDesc5: 'CSS Modules、CSS-in-JS、TailwindCSS，任你挑选。',
+  featureDesc5: 'CSS Modules、CSS-in-JS、Tailwind CSS，任你挑选。',
   feature6: '易于配置',
   featureDesc6: '以零配置启动，然后一切皆可配置。',