docs: route query

zova-docs/guide/techniques/router/route-query.md

@@ -6,9 +6,15 @@ Zova enhances route `Query` and provides Typescript typing support
 
 In order to fully demonstrate how to define and use typed `Query`, here we create a new page component `user` in the module `demo-basic`:
 
-```bash
-$ zova :create:page user --module=demo-basic
-```
+::: tip
+Context Menu - [Module Path]: `Zova Create/Page`
+:::
+
+## Initialize code skeleton
+
+::: tip
+Context Menu - [Module Path/src/page/user]: `Zova Refactor/Add Page Query`
+:::
 
 ## Define Query
 
@@ -32,17 +38,13 @@ In `render.ts`, you can directly obtain Query and render its fields
 
 `src/suite/a-demo/modules/demo-basic/src/page/user/render.tsx`
 
-```typescript{5-10}
+```typescript{5-6}
 export class RenderUser {
  render() {
  return (
  <div>
- <div>
- name: {this.$query.name}, {typeof this.$query.name}
- </div>
- <div>
- age: {this.$query.age}, {typeof this.$query.age}
- </div>
+ <div>{this.$query.name}</div>
+ <div>{this.$query.age}</div>
  </div>
  );
  }
@@ -58,17 +60,13 @@ Next, we need to pass in the `Query` parameter when navigating the route
 
 Add a button directly to the page component `user`, listen to the click event, and use different `Query` parameter to navigate to the current page. In this way, we can see that `$query` is reactive
 
-```typescript{11-19}
+```typescript{9-11}
 export class RenderUser {
  render() {
  return (
  <div>
- <div>
- name: {this.$query.name}, {typeof this.$query.name}
- </div>
- <div>
- age: {this.$query.age}, {typeof this.$query.age}
- </div>
+ <div>{this.$query.name}</div>
+ <div>{this.$query.age}</div>
  <button
  onClick={() => {
  const age = (this.$query.age ?? 0) + 1;

zova-docs/zh/guide/techniques/router/route-query.md

@@ -6,9 +6,15 @@ Zova 对路由`Query`进行了强化，提供了 Typescript 类型化支持
 
 为了完整的演示如何定义和使用类型化的`Query`，这里我们在模块`demo-basic`中创建一个新的页面组件`user`：
 
-```bash
-$ zova :create:page user --module=demo-basic
-```
+::: tip
+右键菜单 - [模块路径]: `Zova Create/Page`
+:::
+
+## 初始化代码骨架
+
+::: tip
+右键菜单 - [模块路径/src/page/user]: `Zova Refactor/Add Page Query`
+:::
 
 ## 定义Query
 
@@ -32,17 +38,13 @@ export const QuerySchema = zz.object({
 
 `src/suite/a-demo/modules/demo-basic/src/page/user/render.tsx`
 
-```typescript{5-10}
+```typescript{5-6}
 export class RenderUser {
  render() {
  return (
  <div>
- <div>
- name: {this.$query.name}, {typeof this.$query.name}
- </div>
- <div>
- age: {this.$query.age}, {typeof this.$query.age}
- </div>
+ <div>{this.$query.name}</div>
+ <div>{this.$query.age}</div>
  </div>
  );
  }
@@ -58,17 +60,13 @@ export class RenderUser {
 
 直接在页面组件`user`中添加一个按钮，响应单击事件，并采用不同的`Query`参数导航至当前页面。这样，我们可以看到`$query`是响应式的
 
-```typescript{11-19}
+```typescript{9-11}
 export class RenderUser {
  render() {
  return (
  <div>
- <div>
- name: {this.$query.name}, {typeof this.$query.name}
- </div>
- <div>
- age: {this.$query.age}, {typeof this.$query.age}
- </div>
+ <div>{this.$query.name}</div>
+ <div>{this.$query.age}</div>
  <button
  onClick={() => {
  const age = (this.$query.age ?? 0) + 1;