fix docs

docs/.vitepress/config.ts

@@ -154,6 +154,7 @@ export default defineConfig({
       themeConfig: {
         nav: [
           { text: "指南", link: "/zh/guide/introduction" },
+          { text: "互动教程", link: "/zh/tutorial/" },
           { text: "标准组件", link: "/zh/std-comps/introduction" },
           { text: "演练场", link: "/zh/misc/playground" },
           { text: "组件库", link: "https://gallery.refina.vercel.app" },

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,5 +1,6 @@
 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,8 +1,10 @@
 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;
@@ -11,4 +13,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,10 +1,11 @@
 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,5 +1,6 @@
 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,7 +1,8 @@
 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,8 +1,10 @@
 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,6 +1,7 @@
 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,9 +1,11 @@
 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,9 +1,11 @@
 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,10 +1,12 @@
 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}!`);
-});
+});

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

@@ -1,27 +1,35 @@
 import { $app, model } from "refina";
 import Basics from "@refina/basic-components";
+
 let id = 0;
 let newTodo = model("");
-let todos = [{
-  id: id++,
-  text: "Learn HTML"
-}, {
-  id: id++,
-  text: "Learn JavaScript"
-}, {
-  id: id++,
-  text: "Learn Refina"
-}];
+let todos = [
+  {
+    id: id++,
+    text: "Learn HTML",
+  },
+  {
+    id: id++,
+    text: "Learn JavaScript",
+  },
+  {
+    id: id++,
+    text: "Learn Refina",
+  },
+];
+
 function remove(id: number) {
   todos = todos.filter(todo => todo.id !== id);
 }
+
 $app.use(Basics)(_ => {
   _.textInput(newTodo);
-  _.button("Add Todo") && todos.push({
-    id: id++,
-    text: newTodo.value
-  });
+  _.button("Add Todo") &&
+    todos.push({
+      id: id++,
+      text: newTodo.value,
+    });
 
-  // Finish the following code to render the list of todos.
+  // 完成以下渲染 todo 列表的代码
   // _.ul(todos, ...);
-});
+});

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

@@ -1,28 +1,38 @@
 import { $app, model } from "refina";
 import Basics from "@refina/basic-components";
+
 let id = 0;
 let newTodo = model("");
-let todos = [{
-  id: id++,
-  text: "Learn HTML"
-}, {
-  id: id++,
-  text: "Learn JavaScript"
-}, {
-  id: id++,
-  text: "Learn Refina"
-}];
+let todos = [
+  {
+    id: id++,
+    text: "Learn HTML",
+  },
+  {
+    id: id++,
+    text: "Learn JavaScript",
+  },
+  {
+    id: id++,
+    text: "Learn Refina",
+  },
+];
+
 function remove(id: number) {
   todos = todos.filter(todo => todo.id !== id);
 }
+
 $app.use(Basics)(_ => {
   _.textInput(newTodo);
-  _.button("Add Todo") && todos.push({
-    id: id++,
-    text: newTodo.value
-  });
-  _.ul(todos, "id", item => _.li(_ => {
-    _.span(item.text);
-    _.button("❌") && remove(item.id);
-  }));
-});
+  _.button("Add Todo") &&
+    todos.push({
+      id: id++,
+      text: newTodo.value,
+    });
+  _.ul(todos, "id", item =>
+    _.li(_ => {
+      _.span(item.text);
+      _.button("❌") && remove(item.id);
+    }),
+  );
+});

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

@@ -1,5 +1,6 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
+
 $app.use(Basics)(_ => {
   _.h1("Title");
   _.div(_ => {
@@ -22,4 +23,4 @@ $app.use(Basics)(_ => {
     _.p("Content 4");
     _.a("share", "#");
   });
-});
+});

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

@@ -1,10 +1,11 @@
 import { $app } from "refina";
 import Basics from "@refina/basic-components";
 import PartView from "./PartView";
+
 $app.use(Basics)(_ => {
   _.h1("Title");
   _(PartView)("Part 1", "Content 1");
   _(PartView)("Part 2", "Content 2");
   _(PartView)("Part 3", "Content 3");
   _(PartView)("Part 4", "Content 4");
-});
+});

docs/zh/tutorial/src/step-8/_hint/App/PartView.ts

@@ -1,5 +1,6 @@
 import { $view } from "refina";
+
 export default $view((_, title, content) => {
   _.h1(title);
   _.p(content);
-});
+});

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

@@ -9,4 +9,4 @@ Rewrite the following HTML using low-level rendering functions.
   </svg>
 */
 
-$app(_ => {});
+$app(_ => {});

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

@@ -11,21 +11,24 @@ Rewrite the following HTML using low-level rendering functions.
 
 $app(_ => {
   _.$css`position:fixed;`;
-  _._svgSvg({
-    id: "svg1",
-    width: 100,
-    height: 100
-  }, _ => {
-    _._svgPath({
-      d: "M 10 10 H 90 V 90 H 10 Z",
-      fill: "red"
-    });
-    _._svgCircle({
-      cx: 50,
-      cy: 50,
-      r: 40,
-      stroke: "blue",
-      fill: "none"
-    });
-  });
-});
+  _._svgSvg(
+    {
+      id: "svg1",
+      width: 100,
+      height: 100,
+    },
+    _ => {
+      _._svgPath({
+        d: "M 10 10 H 90 V 90 H 10 Z",
+        fill: "red",
+      });
+      _._svgCircle({
+        cx: 50,
+        cy: 50,
+        r: 40,
+        stroke: "blue",
+        fill: "none",
+      });
+    },
+  );
+});