From a403cd320b3a5709c5b7a5b9d08687282bb53e9e Mon Sep 17 00:00:00 2001
From: janrywang <zhili.wzl@alibaba-inc.com>
Date: Sun, 25 Jul 2021 23:34:08 +0800
Subject: [PATCH] docs(reactive): update translated docs

---
 packages/reactive/.umirc.js                   |  4 +-
 packages/reactive/docs/api/vue/observer.md    | 22 ++++-----
 .../reactive/docs/api/vue/observer.zh-CN.md   | 46 +++++++++++++++++++
 3 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 packages/reactive/docs/api/vue/observer.zh-CN.md

diff --git a/packages/reactive/.umirc.js b/packages/reactive/.umirc.js
index 396bc8bb0e3..a11014d95b8 100644
--- a/packages/reactive/.umirc.js
+++ b/packages/reactive/.umirc.js
@@ -246,7 +246,7 @@ export default {
         children: [
           {
             title: 'observer',
-            path: '/api/react/observer',
+            path: '/zh-CN/api/react/observer',
           },
         ],
       },
@@ -255,7 +255,7 @@ export default {
         children: [
           {
             title: 'observer',
-            path: '/api/vue/observer',
+            path: '/zh-CN/api/vue/observer',
           },
         ],
       },
diff --git a/packages/reactive/docs/api/vue/observer.md b/packages/reactive/docs/api/vue/observer.md
index d319ddb9844..98ba4753e22 100644
--- a/packages/reactive/docs/api/vue/observer.md
+++ b/packages/reactive/docs/api/vue/observer.md
@@ -1,10 +1,10 @@
 # observer
 
-## 描述
+## describe
 
-在 Vue 中，将组件渲染方法变成 Reaction，每次视图重新渲染就会收集依赖，依赖更新会自动重渲染。
+In Vue, the component rendering method is changed to Reaction, and dependencies are collected every time the view is re-rendered, and dependencies are updated automatically to re-render.
 
-## 用例
+## Example
 
 ```html
 <template>
@@ -12,15 +12,15 @@
     <div>
       <input
         :style="{
-          height: 28,
-          padding: '0 8px',
-          border: '2px solid #888',
-          borderRadius: 3,
-        }"
+           height: 28,
+           padding: '0 8px',
+           border: '2px solid #888',
+           borderRadius: 3,
+         }"
         :value="obs.value"
         @input="(e) => {
-          obs.value = e.target.value
-        }"
+           obs.value = e.target.value
+         }"
       />
     </div>
     <div>{{obs.value}}</div>
@@ -33,7 +33,7 @@
 
   export default observer({
     data() {
-      // 能与 vue 的响应系统共存
+      // can coexist with vue's response system
       const obs = observable({
         value: 'Hello world',
       })
diff --git a/packages/reactive/docs/api/vue/observer.zh-CN.md b/packages/reactive/docs/api/vue/observer.zh-CN.md
new file mode 100644
index 00000000000..d319ddb9844
--- /dev/null
+++ b/packages/reactive/docs/api/vue/observer.zh-CN.md
@@ -0,0 +1,46 @@
+# observer
+
+## 描述
+
+在 Vue 中，将组件渲染方法变成 Reaction，每次视图重新渲染就会收集依赖，依赖更新会自动重渲染。
+
+## 用例
+
+```html
+<template>
+  <div>
+    <div>
+      <input
+        :style="{
+          height: 28,
+          padding: '0 8px',
+          border: '2px solid #888',
+          borderRadius: 3,
+        }"
+        :value="obs.value"
+        @input="(e) => {
+          obs.value = e.target.value
+        }"
+      />
+    </div>
+    <div>{{obs.value}}</div>
+  </div>
+</template>
+
+<script>
+  import { observable } from '@formily/reactive'
+  import { observer } from '@formily/reactive-vue'
+
+  export default observer({
+    data() {
+      // 能与 vue 的响应系统共存
+      const obs = observable({
+        value: 'Hello world',
+      })
+      return {
+        obs,
+      }
+    },
+  })
+</script>
+```