vue-macros · sxzz · Mar 21, 2023 · Jan 29, 2023 · Jan 29, 2023 · Jan 29, 2023
diff --git a/docs/.vitepress/locales/common.ts b/docs/.vitepress/locales/common.ts
@@ -30,7 +30,7 @@ gtag('config', 'G-29NKGSL23C');`,
   ],
 ]
 
-export const sidebar = (lang: string): DefaultTheme.Sidebar => {
+export const sidebar = (lang: string): DefaultTheme.SidebarItem[] => {
   const urlPrefix = lang ? `/${lang}` : ''
   return [
     {

diff --git a/docs/.vitepress/locales/zh-cn.ts b/docs/.vitepress/locales/zh-cn.ts
@@ -12,6 +12,19 @@ export const nav: DefaultTheme.NavItem[] = [
 
 export const sidebar = common.sidebar('zh-CN')
 
+const sidebarTitle: string[] = ['指南', '宏', '特性']
+const sidebarItem: string[][] = [
+  ['入门', '打包器整合', 'Nuxt 整合', '配置'],
+  ['全部宏'],
+  [''],
+]
+sidebar.forEach((bar, i) => {
+  bar.text = sidebarTitle[i]
+  bar.items!.forEach((item, j) => {
+    if (sidebarItem[i][j]) item.text = sidebarItem[i][j]
+  })
+})
+
 export const themeConfig: DefaultTheme.Config = {
   ...common.themeConfig,
 

diff --git a/docs/zh-CN/features/better-define.md b/docs/zh-CN/features/better-define.md
@@ -1,19 +1,19 @@
 # betterDefine
 
-<small>Stability: <code class="!text-green-600">stable</code></small>
+<small>稳定性: <code class="!text-green-600">稳定</code></small>
 
-With enabling `betterDefine`, imported types are supported in `<script setup>` type-based-macros.
+通过开启 `betterDefine` ，支持在 `<script setup>` 中导入 TS 类型来定义 `props` 和 `emits`。
 
-[Related issue](https://github.com/vuejs/core/issues/4294)
+如果你对此功能有任何疑问，欢迎在 [issues](https://github.com/vuejs/core/issues/4294) 中发表评论。
 
-|  Features  |     Supported      |
+|    特性    |        支持        |
 | :--------: | :----------------: |
 |   Vue 3    | :white_check_mark: |
 |   Nuxt 3   | :white_check_mark: |
 |   Vue 2    | :white_check_mark: |
 | TypeScript | :white_check_mark: |
 
-## Basic Usage
+## 基本用法
 
 ::: code-group
 
@@ -36,29 +36,29 @@ export interface BaseProps {
 
 :::
 
-## ⚠️ Limitations
+## ⚠️ 限制
 
-### Complex types
+### 复杂类型
 
-Complex types are not supported in some key places. For example:
+在一些**关键的位置**不支持**复杂类型**。例如：
 
-#### What are Complex Types?
+#### 什么是复杂类型？
 
-- All utility types
-  - [Built-in types](https://www.typescriptlang.org/docs/handbook/utility-types.html)
-  - All types from `type-fest` package.
+- 所有工具类型
+  - [内置类型](https://www.typescriptlang.org/docs/handbook/utility-types.html)
+  - 来自 `type-fest` 包的所有类型。
   - ...
-- Index Signature
+- 索引签名
   ```ts
   interface Type {
     [key: string]: string
   }
   ```
-- Generics will be ignored directly
+- 泛型将会被直接忽略
 
-#### What are Key Places?
+#### 什么是**关键的位置**?
 
-- The names of props.
+- **props** 的名称
 
 ```ts
 // ✅
@@ -72,7 +72,7 @@ defineProps<{
 }>()
 ```
 
-- The names of events.
+- **events** 的名称
 
 ```ts
 interface Emits {

diff --git a/docs/zh-CN/features/export-props.md b/docs/zh-CN/features/export-props.md
@@ -1,19 +1,22 @@
 # exportProps
 
-<small py2>Stability: <code class="!text-red-600">experimental</code></small>
+<div py2 flex>
+  <small>稳定性: <code class="!text-red-600">实验性</code></small>
+  <WarnBadge>实验性功能，风险自负</WarnBadge>
+</div>
 
-[Svelte-like Declaring props](https://svelte.dev/docs#component-format-script-1-export-creates-a-component-prop) for Vue.
+在 Vue 中像 Svelte 那样声明 `props`，[Svelte 对应文档](https://svelte.dev/docs#component-format-script-1-export-creates-a-component-prop)。
 
-|   Features   |     Supported      |
+|     特性     |        支持        |
 | :----------: | :----------------: |
 |    Vue 3     | :white_check_mark: |
 |    Nuxt 3    |         ?          |
 |    Vue 2     |         ?          |
 | Volar Plugin | :white_check_mark: |
 
-## Usage
+## 用法
 
-Using export syntax to declare props.
+使用导出的语法来声明 `props`。
 
 ```vue
 <script setup lang="ts">

diff --git a/docs/zh-CN/features/hoist-static.md b/docs/zh-CN/features/hoist-static.md
@@ -1,18 +1,20 @@
 # hoistStatic
 
-<small>Stability: <code class="!text-green-600">stable</code></small>
+<small>稳定性: <code class="!text-green-600">稳定</code></small>
 
-With enabling `hoistStatic`, constants declared in macros of `<script setup>` can be referenced.
+<!-- 通过开启 `hoistStatic`, 你可以引用 `<script setup>` 宏中声明的常量。 -->
 
-If you support this feature, feel free to hit like :+1: or comment on the [Vue PR](https://github.com/vuejs/core/pull/5752). Thanks!
+通过开启 `hoistStatic`, 可以在宏内部引用 `<script setup>` 中的变量
 
-| Features |     Supported      |
-| :------: | :----------------: |
-|  Vue 3   | :white_check_mark: |
-|  Nuxt 3  | :white_check_mark: |
-|  Vue 2   | :white_check_mark: |
+如果你支持此功能，欢迎在 [Vue PR](https://github.com/vuejs/core/pull/5752) 中点赞 :+1: 或发表评论。
 
-## Basic Usage
+|  特性  |        支持        |
+| :----: | :----------------: |
+| Vue 3  | :white_check_mark: |
+| Nuxt 3 | :white_check_mark: |
+| Vue 2  | :white_check_mark: |
+
+## 基本用法
 
 ```vue
 <script setup lang="ts">
@@ -23,7 +25,7 @@ defineOptions({
 </script>
 ```
 
-::: details Compiled Code
+::: details 编译后代码
 
 ```vue
 <script lang="ts">
@@ -36,7 +38,7 @@ export default {
 
 :::
 
-## Magic Comments
+## 魔法注释
 
 ```vue
 <script setup lang="ts">
@@ -48,7 +50,7 @@ defineOptions({
 </script>
 ```
 
-::: details Compiled Code
+::: details 编译后代码
 
 ```vue
 <script lang="ts">

diff --git a/docs/zh-CN/features/named-template.md b/docs/zh-CN/features/named-template.md
@@ -1,26 +1,24 @@
 # namedTemplate
 
-
 <div py2 flex>
-  <small>Stability: <code class="!text-red-600">experimental</code></small>
-  <WarnBadge>Experimental, use at your risk</WarnBadge>
+  <small>稳定性: <code class="!text-red-600">实验性</code></small>
+  <WarnBadge>实验性功能，风险自负</WarnBadge>
 </div>
 
+通过开启 `namedTemplate` ，`<template>` 可以像变量一样被引用。
 
-With enabling `namedTemplate`, `<template>` can be referenced like a variable.
-
-Sometimes we need to reverse the order of the very simple components, and don't want to give the features of Vue template up and use JSX/TSX. Then this feature is much helpful.
+有时候我们需要把非常简单的组件颠倒顺序，但又不想放弃 Vue 模板的特性而使用 JSX/TSX。那么这个功能就非常有用了。
 
-If you support this feature, you can go to [the discussion](https://github.com/vuejs/core/discussions/6898) and hit like :+1: or comment.
+如果你支持此功能，欢迎在 [讨论](https://github.com/vuejs/core/discussions/6898) 中点赞 :+1: 或评论。
 
-|      Features      |     Supported      |
+|        特性        |        支持        |
 | :----------------: | :----------------: |
 |       Vue 3        | :white_check_mark: |
 |       Nuxt 3       |        :x:         |
 |       Vue 2        |        :x:         |
 | TypeScript / Volar |        :x:         |
 
-## Basic Usage
+## 基本用法
 
 ```vue {5-7,10-12,16-18}
 <script setup>
@@ -44,6 +42,6 @@ const pager = 'top'
 </template>
 ```
 
-## Known Usage
+## 已知的问题
 
-- TypeScript / Volar support is not yet completed.
+- TypeScript / Volar 支持尚未完成。
diff --git a/docs/zh-CN/features/reactivity-transform.md b/docs/zh-CN/features/reactivity-transform.md
@@ -1,19 +1,19 @@
 # Reactivity Transform
 
-<small>Stability: <code class="!text-green-600">stable</code></small>
+<small>稳定性: <code class="!text-green-600">稳定</code></small>
 
-|      Features      |     Supported      |
+|        特性        |        支持        |
 | :----------------: | :----------------: |
 |       Vue 3        | :white_check_mark: |
 |       Nuxt 3       | :white_check_mark: |
 |       Vue 2        | :white_check_mark: |
 | TypeScript / Volar | :white_check_mark: |
 
-## Installation Standalone Version
+## 安装独立版本
 
-if you need Reactivity Transform feature only, the standalone version is more appropriate for you.
+如果你只需要 `Reactivity Transform` 功能，独立版本更适合你。
 
-### Installation
+### 安装
 
 ::: code-group
 
@@ -70,7 +70,7 @@ module.exports = {
 
 :::
 
-### TypeScript Support
+### TypeScript 支持
 
 ```json
 // tsconfig.json
@@ -82,6 +82,6 @@ module.exports = {
 }
 ```
 
-## Usage
+## 用法
 
-Refer to [official docs](https://vuejs.org/guide/extras/reactivity-transform.html).
+参见 [官方文档](https://cn.vuejs.org/guide/extras/reactivity-transform.html).
diff --git a/docs/zh-CN/guide/bundler-integration.md b/docs/zh-CN/guide/bundler-integration.md
@@ -1,6 +1,6 @@
-# Bundler Integration
+# 打包器整合
 
-### Installation
+### 安装
 
 ::: code-group
 
@@ -96,7 +96,7 @@ module.exports = defineConfig({
 
 :::
 
-## TypeScript Support
+## TypeScript 支持
 
 ::: code-group
 
@@ -122,9 +122,9 @@ module.exports = defineConfig({
 
 :::
 
-## Volar Support
+## Volar 支持
 
-For detailed configuration, please refer to the description of the specific macro.
+有关宏的详细配置请参考每个宏的具体说明。
 
 ```bash
 npm i -D @vue-macros/volar
@@ -148,6 +148,6 @@ npm i -D @vue-macros/volar
 }
 ```
 
-:tada: Congratulations! You have successfully set up `unplugin-vue-macros`.
+:tada: 恭喜你! 目前你已经成功将 `unplugin-vue-macros` 设置完成。
 
-To learn more about the macros, please visit [All Macros](/macros/) :laughing:.
+如果你还想要了解有关宏的更多信息, 请访问 [全部宏](/zh-CN/macros/) :laughing:。
diff --git a/docs/zh-CN/guide/configurations.md b/docs/zh-CN/guide/configurations.md
@@ -1,8 +1,8 @@
-# Configurations
+# 配置
 
-## Plugin Options
+## 插件选项
 
-All features are enabled by default, you can disable them by setting the option to `false`.
+在 Vue Macros 中所有功能都将会被默认开启，你可以将选项设置为 `false` 来禁用它们。
 
 ```ts
 VueMacros({
@@ -37,4 +37,4 @@ VueMacros({
 })
 ```
 
-See the features page for options for each feature.
+有关每个宏的配置选项，请参考对应宏的页面。
diff --git a/docs/zh-CN/guide/getting-started.md b/docs/zh-CN/guide/getting-started.md
@@ -1,29 +1,29 @@
-# Getting Started
+# 入门
 
-Vue Macros is a library that implements proposals or ideas that have not been officially implemented by Vue. That means it will explore and extend more features and syntax sugar to Vue.
+Vue Macros 是一个库，用于实现尚未被 Vue 正式实现的提案或想法。这意味着它将探索并扩充更多宏和语法糖到 Vue。
 
-We assume you are already familiar with the basic usages of Vue before you continue.
+在继续之前，我们假设你已经熟悉 Vue 的基本用法。
 
-## Requirements
+## 要求
 
-- Vue >= 2.7 or Vue >= 3.0.
-  - Some features need Vue >= 3.2.25.
-- VSCode with [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension.
-  - ❌ WebStorm is not supported.
+- Vue >= 2.7 或 Vue >= 3.0
+  - 某些功能需要 Vue >= 3.2.25
+- VSCode 安装了 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 扩展
+  - ❌ 不支持 WebStorm
 
-## Demos
+## 示例
 
 - [Vite + Vue 3](https://github.com/sxzz/unplugin-vue-macros/tree/main/playground/vue3)
 - [Vite + Vue 2](https://github.com/sxzz/unplugin-vue-macros/tree/main/playground/vue2)
 - [Nuxt 3 + Vue 3](https://github.com/vue-macros/nuxt)
 - [Vue CLI + Vue 2](https://github.com/vue-macros/vue2-vue-cli)
 
-🌟 More demos are welcome!
+🌟 欢迎提供更多示例！
 
-## Nuxt Integration
+## Nuxt 整合
 
-If you're using [Nuxt 3](https://nuxt.com/), read the [Nuxt Integration](./nuxt-integration.md).
+如果你使用的是 [Nuxt 3](https://nuxt.com/)，请阅读 [Nuxt 整合](./nuxt-integration.md)。
 
-## Bundler Integrations
+## 打包器整合
 
-If you're using [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/), [esbuild](https://esbuild.github.io/), or [Webpack](https://webpack.js.org/), read the [Bundler Integration](./bundler-integration.md).
+如果你使用的是 [Vite](https://vitejs.dev/)，[Rollup](https://rollupjs.org/)，[esbuild](https://esbuild.github.io/)，或 [Webpack](https://webpack.js.org/) 这一类的打包器，请阅读 [打包器整合](./bundler-integration.md)。