docs(overlay): add international en-us

src/packages/__VUE/overlay/demo.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-button type="primary" @click="state.show = true">显示遮罩层</nut-button>
+      <nut-button type="primary" @click="state.show = true">{{ translate('btn1') }}</nut-button>
       <nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
     </nut-cell>
-    <h2>遮罩样式</h2>
+    <h2>{{ translate('style') }}</h2>
     <nut-cell>
-      <nut-button type="primary" @click="state.show3 = true">显示遮罩层</nut-button>
+      <nut-button type="primary" @click="state.show3 = true">{{ translate('btn1') }}</nut-button>
       <nut-overlay v-model:visible="state.show3" :z-index="2000" :overlay-style="state.overlayStyle"></nut-overlay>
     </nut-cell>
-    <h2>嵌套内容</h2>
+    <h2>{{ translate('content') }}</h2>
     <nut-cell>
-      <nut-button type="success" @click="state.show2 = true">嵌套内容</nut-button>
+      <nut-button type="success" @click="state.show2 = true">{{ translate('btn2') }}</nut-button>
       <nut-overlay v-model:visible="state.show2" :z-index="2000">
         <div class="wrapper">
-          <div class="content">这里是正文</div>
+          <div class="content">{{ translate('text') }}</div>
         </div>
       </nut-overlay>
     </nut-cell>
@@ -25,7 +25,26 @@
 <script lang="ts">
 import { reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('overlay');
+const { createDemo, translate } = createComponent('overlay');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    style: '遮罩样式',
+    content: '嵌套内容',
+    btn1: '显示遮罩层',
+    btn2: '嵌套内容',
+    text: '这里是正文'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    style: 'Mask style',
+    content: 'Nested content',
+    btn1: 'Show mask layer',
+    btn2: 'Nested content',
+    text: 'Here is the text'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -38,7 +57,8 @@ export default createDemo({
       }
     });
     return {
-      state
+      state,
+      translate
     };
   }
 });

src/packages/__VUE/overlay/doc.en-US.md

@@ -0,0 +1,143 @@
+# OverLay
+
+### Intro
+
+Create a mask layer, which is usually used to prevent users from doing other operations
+
+### Install
+
+
+```javascript
+import { createApp } from 'vue';
+// vue
+import { OverLay } from '@nutui/nutui';
+// taro
+import { OverLay } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(OverLay);
+```
+
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+<nut-button type="primary" @click="state.show = true">Show mask layer</nut-button>
+<nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        show: false,
+      });
+      return {
+        state
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Mask style
+
+:::demo
+
+```html
+<template>
+<nut-button type="primary" @click="state.show = true">Show mask layer</nut-button>
+<nut-overlay v-model:visible="state.show" :z-index="2000" :overlay-style="state.overlayStyle"></nut-overlay>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        show: false,
+        overlayStyle: {
+          backgroundColor: 'rgba(0, 0, 0, .2)'
+        }
+      });
+      return {
+        state
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Nested content
+
+:::demo
+
+```html
+<template>
+<nut-button type="success" @click="state.show2 = true">Nested content</nut-button>
+<nut-overlay v-model:visible="state.show2" :z-index="2000">
+  <div class="wrapper">
+    <div class="content">Here is the text</div>
+  </div>
+</nut-overlay>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        show2: false,
+      });
+      return {
+        state
+      };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  .content {
+    display: flex;
+    width: 150px;
+    height: 150px;
+    background: #fff;
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    color: red;
+  }
+}
+</style>
+```
+
+:::
+
+## API
+
+### Props
+
+| Attribute | Description | Type   | Default |
+| ---------------------- | ---------------- | -------------- | ------ |
+| v-model:visible                   | Whether the current component is displayed | Boolean        | `false`  |
+| z-index                | Mask level         | String, Number | `2000`   |
+| duration               | Animation duration, Unit second | String, Number | `0.3`    |
+| overlay-class          | Custom mask classname   | String         | -      |
+| overlay-style          | Custom mask styles   | CSSProperties  | -      |
+| lock-scroll            | Whether the background is locked(`MiniProgram not supported`)     | Boolean        | `false`  |
+| close-on-click-overlay | Click to close the mask | Boolean        | `true`   |
+
+### Events
+
+| Event | Description                  | Arguments   |
+| ------ | ---------- | ------------ |
+| click  | Triggered when clicked | event: Event |

src/packages/__VUE/overlay/doc.md

@@ -18,8 +18,6 @@ const app = createApp();
 app.use(OverLay);
 ```
 
-## 代码演示
-
 ### 基础用法
 
 :::demo