fix zh docs translations (#5)

docs/zh/guide/apis/util-funcs.md

@@ -86,7 +86,7 @@ $app.use(Basics)(_ => {
 
 ## `_.embed` {#embed}
 
-在当前位置嵌入一个视图。
+将内容嵌入当前位置。
 
 ## `_.asyncEmbed`
 
@@ -95,7 +95,7 @@ $app.use(Basics)(_ => {
 **例子**
 
 ```ts
-_.asyncEmbed(() => import("./myView.ts"));
+_.asyncEmbed(() => import("./someContent.ts"));
 ```
 
 这将从 `./someContent.ts` 异步地加载内容。这对代码拆分有帮助。

docs/zh/guide/essentials/application.md

@@ -41,7 +41,7 @@ $app.use(Plugin1).use(Plugin2, param1, param2).use(Plugin3)(_ => {
 
 :::warning
 
-由于 TypeScript 的限制，如果仅导入插件却不安装它，其类型仍然在上下文对象中可见。 但是如果你使用这些实际上并没有安装的插件，会产生运行时错误。 但是如果你使用这些实际上并没有安装的插件，会产生运行时错误。
+由于 TypeScript 的限制，如果仅导入插件却不安装它，其类型仍然在上下文对象中可见。 但是如果你使用这些实际上并没有安装的插件，会产生运行时错误。
 
 :::
 

docs/zh/guide/essentials/component.md

@@ -9,8 +9,8 @@
 Refina 中有3种组件：
 
 - **输出型组件**：只负责渲染页面内容的组件。 如：`h1`, `p`...
-- **事件型组件**：会触发一个事件的组件。 如：`button`, `input`... 如：`button`, `input`...
-- **状态型组件**：含有一个状态的组件。 如：`checkbox`, `radio`... 如：`checkbox`, `radio`...
+- **事件型组件**：会触发一个事件的组件。 如：`button`, `input`...
+- **状态型组件**：含有一个状态的组件。 如：`checkbox`, `radio`...
 
 :::info
 
@@ -22,7 +22,7 @@ Refina 中有3种组件：
 
 ## 额外的 props {#extra-props}
 
-有时一个组件有很多可选的 props。这使得将这些 props 通过组件函数参数传入十分不便。 有时一个组件有很多可选的 props。这使得将这些 props 通过组件函数参数传入十分不便。 这时我们可以使用 [`_.$props` 指令](../apis/directives.md#props) 向下一个组件以按名称传入的方式添加多个额外的 prop。
+有时一个组件有很多可选的 props。这使得将这些 props 通过组件函数参数传入十分不便。 这时我们可以使用 [`_.$props` 指令](../apis/directives.md#props) 向下一个组件以按名称传入的方式添加多个额外的 prop。
 
 ```ts
 $app.use(MdUI)(_ => {
@@ -56,7 +56,7 @@ $app.use(MdUI)(_ => {
 
 主元素应当是组件的视觉核心。 向组件添加的类名与样式将被设置在主元素上。 组件的底层实现是一个上下文函数。 所以创建一个不属于上述种类的组件是完全可行的。
 
-组件可以通过调用 `this,$main()` 指令来设置下一个元素为主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。
+组件可以通过调用 `this,$main()` 指令来设置下一个元素为主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。
 
 :::info
 

docs/zh/guide/essentials/context.md

@@ -26,7 +26,7 @@ Refina 的很多 API 通过上下文对象提供。
 
 1. **文本节点**：即`_.t`。
 2. **底层元素**：原始的 DOM 元素，名称有 `_` 作为前缀，如 `_._div` 和 `_._svgPath`。
-3. **插件提供的组件函数**：比如由 `Basics` 插件提供的 `_.button` 、由 `MdUI` 插件提供的 `_.mdButton`。 它们的名称不含有 `_` 前缀。 **工具函数**：一些实用工具，并不渲染组件/元素。
+3. **插件提供的组件函数**：比如由 `Basics` 插件提供的 `_.button` 、由 `MdUI` 插件提供的 `_.mdButton`。 它们的名称不含有 `_` 前缀。 它们的名称不含有 `_` 前缀。
 
 ## 工具函数
 

docs/zh/guide/essentials/event.md

@@ -33,7 +33,7 @@ $app.use(Basics)(_ => {
 
 作为一个类 ImGUI 的框架，Refina 不需要一个”响应式系统“来监听状态的变化。
 
-因此你可以直接以最普通的方式定义状态，即使用 `let` 语句。 因此你可以直接以最普通的方式定义状态，即使用 `let` 语句。 即，不需要通过 `ref` 或 `reactive` 或 `useState` 来创建状态。
+因此你可以直接以最普通的方式定义状态，即使用 `let` 语句。 即，不需要通过 `ref` 或 `reactive` 或 `useState` 来创建状态。
 
 :::warning
 

docs/zh/guide/essentials/input.md

@@ -71,7 +71,7 @@ assert(getD(wrappedValue) === 1);
 
 :::info
 
-如果数据包裹由 `d` 函数创建，那么它的类型是 `PD<T>`, 因此你不需要使用 `getD` 函数。 你可以直接访问 `wrappedValue.value`. You can access `yourModel.value` directly.
+如果数据包裹由 `d` 函数创建，那么它的类型是 `PD<T>`, 因此你不需要使用 `getD` 函数。 你可以直接访问 `wrappedValue.value`. 你可以直接访问 `yourModel.value`.
 
 :::
 

docs/zh/guide/essentials/lowlevel.md

@@ -12,7 +12,7 @@ import LowlevelVue from "snippets/lowlevel.vue";
 
 :::info
 
-如果一个现有的组件已经满足你的需要，请使用它，因为底层渲染更冗长并容易写错。 函数签名
+如果一个现有的组件已经满足你的需要，请使用它，因为底层渲染更冗长并容易写错。
 
 :::
 

docs/zh/guide/essentials/view.md

@@ -19,11 +19,11 @@ export default $view(_ => {
 **app.ts**
 
 ```ts
-import myView from "./myView.ts";
+import MyView from "./MyView.ts";
 
 $app(_ => {
-  _.div(myView);
-  _.embed(myView);
+  _(MyView)();
+  _.div(MyView.$func);
 });
 ```
 
@@ -44,7 +44,7 @@ $app(_ => {
 
 ## 传入视图参数 {#passing-parameters}
 
-视图可以有参数。 你可以使用普通的语法定义视图参数： 你可以使用普通的语法定义视图参数：
+视图可以有参数。 你可以使用普通的语法定义视图参数：
 
 ```ts
 export default $view((_, name: string, id?: number) => {
@@ -58,8 +58,8 @@ export default $view((_, name: string, id?: number) => {
 然后可以这样向视图传递参数：
 
 ```ts
-_.embed(myView, "John", 123);
-_.embed(myView, "Mary");
+_(MyView)("John", 123);
+_(MyView)("Mary");
 ```
 
 ## 视图的状态
@@ -97,6 +97,6 @@ export default $view(_ => {
 
 如果你想复用**页面的片段**，可以使用 _视图_。
 
-如果你想复用**有状态的代码**，你需要使用*组件*。
+如果你想复用**有状态的代码**，你需要使用_组件_。
 
-如果你是\*\*UI 库（组件库）\*\*作者，你总是应当提供*组件*。
+如果你是\*\*UI 库（组件库）\*\*作者，你总是应当提供_组件_。

docs/zh/guide/introduction.md

@@ -27,15 +27,15 @@ import CounterVue from 'snippets/counter.vue'
 
 上面的例子展示了Refina的两个核心功能：
 
-- **声明式渲染**: 不需要像 JSX 或 Vue template 那样的 DSL，只需普通的 JavaScript/TypeScript 就可以编写应用。 因此所有 JavaScript 与 TypeScript 开发工具都可以在 Refina 开发中直接使用。 因此所有 JavaScript 与 TypeScript 开发工具都可以在 Refina 开发中直接使用。
+- **声明式渲染**: 不需要像 JSX 或 Vue template 那样的 DSL，只需普通的 JavaScript/TypeScript 就可以编写应用。 因此所有 JavaScript 与 TypeScript 开发工具都可以在 Refina 开发中直接使用。
 
-- **响应性**：Refina 采用类 ImGUI 的状态管理模式。 你只需要像 Svelte 那样以最普通的方式的定义状态。 当状态改变时，Refina 会自动地更新页面。 你只需要像 Svelte 那样以最普通的方式的定义状态。 当状态改变时，Refina 会自动地更新页面。
+- **响应性**：Refina 采用类 ImGUI 的状态管理模式。 你只需要像 Svelte 那样以最普通的方式的定义状态。 当状态改变时，Refina 会自动地更新页面。
 
 你可能已经有了些疑问——先别急。 请继续看下去，以宏观地了解 Refina 作为一个框架提供了什么。
 
 :::tip 预备知识
 
-文档接下来的内容会假设你对 HTML、CSS 和 JavaScript 已经基本熟悉。 如果你对前端开发完全陌生，最好不要直接从一个框架开始进行入门学习——最好是掌握了基础知识再回到这里。 文档接下来的内容会假设你对 HTML、CSS 和 JavaScript 已经基本熟悉。 如果你对前端开发完全陌生，最好不要直接从一个框架开始进行入门学习——最好是掌握了基础知识再回到这里。 如有需要，你可以通过这些 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)、[HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 和 [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps) 概述来检验你的知识水平。 如果之前有其他框架的经验会很有帮助，但也不是必须的。 如果之前有其他框架的经验会很有帮助，但也不是必须的。
+文档接下来的内容会假设你对 HTML、CSS 和 JavaScript 已经基本熟悉。 如果你对前端开发完全陌生，最好不要直接从一个框架开始进行入门学习——最好是掌握了基础知识再回到这里。 如有需要，你可以通过这些 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)、[HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 和 [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps) 概述来检验你的知识水平。 如果之前有其他框架的经验会很有帮助，但也不是必须的。
 
 :::
 

docs/zh/guide/quick-start.md

@@ -9,13 +9,13 @@
 
 在本节中，我们将介绍如何在本地搭建 Refina 应用。 在本节中，我们将介绍如何在本地搭建 Refina 应用。 创建的项目将使用基于 [Vite](https://vitejs.dev) 的构建设置。
 
-确保你安装了最新版本的 [Node.js](https://nodejs.org/)，并且你的当前工作目录正是打算创建项目的目录。 在命令行中运行以下命令 (不要带上 `>` 符号)： 在命令行中运行以下命令 (不要带上 `>` 符号)：
+确保你安装了最新版本的 [Node.js](https://nodejs.org/)，并且你的当前工作目录正是打算创建项目的目录。 在命令行中运行以下命令 (不要带上 `>` 符号)：
 
 ```sh
 > npm create refina@latest   # 推荐使用 pnpm
 ```
 
-这一指令将会安装并执行 [create-refina](https://github.com/refinajs/refina/tree/main/packages/creator)，它是 Refina 官方的项目脚手架工具。 你将会看到一些诸如组件库和 TailwindCSS 之类的可选功能提示： 你将会看到一些诸如组件库和 TailwindCSS 之类的可选功能提示：
+这一指令将会安装并执行 [create-refina](https://github.com/refinajs/refina/tree/main/packages/creator)，它是 Refina 官方的项目脚手架工具。 你将会看到一些诸如组件库和 TailwindCSS 之类的可选功能提示：
 
 ![Create Refina](/media/create-refina.png)
 
@@ -44,7 +44,7 @@
 
 你现在应该已经运行起来了你的第一个 Refinan 项目！
 
-现在打开 `src/app.ts` 文件，你可以看见应用的主体代码。 你可以编辑它，并在浏览器中实时查看更改。 你可以编辑它，并在浏览器中实时查看更改。
+现在打开 `src/app.ts` 文件，你可以看见应用的主体代码。 你可以编辑它，并在浏览器中实时查看更改。
 
 :::info
 

docs/zh/guide/why.md

@@ -4,7 +4,7 @@
 
 对于大部分前端页面，长什么样、要做什么，往往只需要三言两语就能说明白。 但是若要通过传统的前端框架实现它，往往需要写数百行代码。
 
-传统的前端框架，比如 Vue，配合组件库，比如 Vuetify，允许你编写出细节完善、视觉美观的应用。 但是即使是一些“大厂”，也没能总是产出那么高质量的应用，因为开发效率的原因。 这即是说，即使开发者有能力，往往也会由于没有时间而无法做出相当完美的应用。 结果就是，许多传统前端框架的能力几乎得不到发挥，而为拥有这些能力所作的一些设计反而在很多情况下称为了负担。 但是即使是一些“大厂”，也没能总是产出那么高质量的应用，因为开发效率的原因。 这即是说，即使开发者有能力，往往也会由于没有时间而无法做出相当完美的应用。 结果就是，许多传统前端框架的能力几乎得不到发挥，而为拥有这些能力所作的一些设计反而在很多情况下称为了负担。
+传统的前端框架，比如 Vue，配合组件库，比如 Vuetify，允许你编写出细节完善、视觉美观的应用。 但是即使是一些“大厂”，也没能总是产出那么高质量的应用，因为开发效率的原因。 这即是说，即使开发者有能力，往往也会由于没有时间而无法做出相当完美的应用。 结果就是，许多传统前端框架的能力几乎得不到发挥，而为拥有这些能力所作的一些设计反而在很多情况下称为了负担。
 
 除了传统前端框架，我们其实需要一个**首先关注开发效率**，其次是功能的完整性，再其次是运行时性能的前端框架。
 
@@ -28,7 +28,7 @@
 
 - **纯 TypeScript 构建页面**
 
-  无需像 JSX 或 Vue SFC 那样的 DSL。 渲染和逻辑使用同样的、普通的 TypeScript 语法。相关的工具链也都完全兼容。 渲染和逻辑使用同样的、普通的 TypeScript 语法。相关的工具链也都完全兼容。
+  无需像 JSX 或 Vue SFC 那样的 DSL。 渲染和逻辑使用同样的、普通的 TypeScript 语法。相关的工具链也都完全兼容。
 
 ## 效果
 

docs/zh/std-comps/introduction.md

@@ -2,7 +2,7 @@
 
 本章节描述了 Refina 定义的标准组件。
 
-Refina 的标准组件是常用的，且*有一定复杂度*的组件。 不能保证所有组件库都会包含所有这些标准组件。 但组件库应当尽可能地覆盖标准组件，并符合标准组件的接口。
+Refina 的标准组件是常用的，且_有一定复杂度_的组件。 不能保证所有组件库都会包含所有这些标准组件。 但组件库应当尽可能地覆盖标准组件，并符合标准组件的接口。
 
 :::warning
 
@@ -34,6 +34,6 @@ Refina 的标准组件是常用的，且*有一定复杂度*的组件。 不能
 
 以下组件库目前已经可用：
 
-[![@refina/basic-components](https://img.shields.io/npm/v/%40refina%2Fbasic-components?label=%40refina%2Fbasic-components&color=green)](https://www.npmjs.com/package/@refina/basic-components)
+[![@refina/basic-components](https://img.shields.io/npm/v/%40refina%2Fbasic-components?label=%40refina%2Fbasic-components\&color=green)](https://www.npmjs.com/package/@refina/basic-components)
 
-[![@refina/mdui](https://img.shields.io/npm/v/%40refina%2Fmdui?label=%40refina%2Fmdui&color=green)](https://www.npmjs.com/package/@refina/mdui)
+[![@refina/mdui](https://img.shields.io/npm/v/%40refina%2Fmdui?label=%40refina%2Fmdui\&color=green)](https://www.npmjs.com/package/@refina/mdui)

docs/zh/tutorial/TutorialRepl.vue

@@ -9,7 +9,7 @@ import {
   VTLink,
 } from "@vue/theme";
 import { computed, nextTick, ref, version } from "vue";
-import { onHashChange, resolveSFCExample } from "../../helpers/utils";
+import { onHashChange, resolveSFCExample } from "../helpers/utils";
 import { data } from "./tutorial.data";
 import { useData } from "vitepress";
 
@@ -123,10 +123,10 @@ updateExample();
       </div>
       <footer>
         <a v-if="prevStep" :href="`#${prevStep}`"
-          ><VTIconChevronLeft class="vt-link-icon" style="margin: 0" /> 上一步
-        </a>
-        <a class="next-step" v-if="nextStep" :href="`#${nextStep}`">
-          下一步 <VTIconChevronRight class="vt-link-icon"
+          ><VTIconChevronLeft class="vt-link-icon" style="margin: 0" /> 上一步 </a
+        >
+        <a class="next-step" v-if="nextStep" :href="`#${nextStep}`"
+          > 下一步 <VTIconChevronRight class="vt-link-icon"
         /></a>
       </footer>
     </article>

docs/zh/tutorial/index.md

@@ -9,7 +9,7 @@ returnToTop: false
 
 <script>
 import { defineAsyncComponent } from 'vue'
-import ReplLoading from '../../helpers/ReplLoading.vue'
+import ReplLoading from '../helpers/ReplLoading.vue'
 
 export default {
   components: {

docs/zh/tutorial/src/step-1/App/App.ts

@@ -1,6 +1,5 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 $app.use(Basics)(_ => {
   _.h1("👋 Hello, Refina!");
-});
+});

docs/zh/tutorial/src/step-10/App/App.ts

@@ -1,10 +1,8 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
 import JSConfetti from "js-confetti";
-
 const confetti = new JSConfetti();
 confetti.addConfetti();
-
 $app.use(Basics)(_ => {
   _.$css`
     all: unset;
@@ -13,4 +11,4 @@ $app.use(Basics)(_ => {
     text-align: center;
     margin: 3em 30%;`;
   _.button("🎉 Congratulations!") && confetti.addConfetti();
-});
+});

docs/zh/tutorial/src/step-2/App/App.ts

@@ -1,4 +1,4 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
 
-// 在此处编写应用
+// Build your app here

docs/zh/tutorial/src/step-2/_hint/App/App.ts

@@ -1,11 +1,10 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 $app.use(Basics)(_ => {
   _.h1("Hello, world!");
   _.p(_ => {
     _.t`This is a `;
     _.a("link", "https://refina.dev");
     _.t`.`;
   });
-});
+});

docs/zh/tutorial/src/step-3/App/App.ts

@@ -1,6 +1,5 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 $app.use(Basics)(_ => {
   _.h1("Make me styled!");
-});
+});

docs/zh/tutorial/src/step-3/_hint/App/App.ts

@@ -1,8 +1,7 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 $app.use(Basics)(_ => {
   _.$cls`my-class`;
   _.$css`color:red;font-size:2rem`;
   _.h1("Make me styled!");
-});
+});

docs/zh/tutorial/src/step-4/App/App.ts

@@ -1,10 +1,10 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
 
-// 在这里定义状态？
+// Should declare states here?
 
 $app.use(Basics)(_ => {
-  // 还是这里？
+  // Or here?
 
   _.p("Count is 0!");
-});
+});

docs/zh/tutorial/src/step-4/_hint/App/App.ts

@@ -1,10 +1,8 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 let count = 0;
-
 $app.use(Basics)(_ => {
-  // 不是在这里定义状态！
+  // Not here!
 
   _.p(`Count is ${count}!`);
-});
+});

docs/zh/tutorial/src/step-5/App/App.ts

@@ -1,7 +1,6 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 $app.use(Basics)(_ => {
   _.h1(`You have clicked the button 0 times.`);
   _.button("Click me!");
-});
+});

docs/zh/tutorial/src/step-5/_hint/App/App.ts

@@ -1,11 +1,9 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 let count = 0;
-
 $app.use(Basics)(_ => {
   _.h1(`You have clicked the button ${count} times.`);
   if (_.button("Click me!")) {
     count++;
   }
-});
+});

docs/zh/tutorial/src/step-6/App/App.ts

@@ -1,11 +1,9 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
-
 let name = "";
-
 $app.use(Basics)(_ => {
   if (_.textInput(name)) {
     name = _.$ev;
   }
   _.p(`Hello ${name}!`);
-});
+});

docs/zh/tutorial/src/step-6/_hint/App/App.ts

@@ -1,12 +1,10 @@
 import { $app, model } from "refina";
 import Basics from "@refina/basic-components";
-
 const name = model("");
-
 $app.use(Basics)(_ => {
   _.textInput(name);
   if (name.value.length > 0) {
     _.button("Clear") && (name.value = "");
   }
   _.p(`Hello ${name}!`);
-});
+});