docs: README update

README.md

 English | [简体中文](./README.zh-CN.md)
 
 <h1 align="center">Ant Design Pro Layout</h1>
-
 ## Usage
 
 ```bash
@@ -13,6 +12,7 @@ yarn add @ant-design-vue/pro-layout
 ```jsx
 import ProLayout from '@ant-design-vue/pro-layout'
 
+// by jsx
 export default {
   name: 'BasicLayout',
   render () {
@@ -25,6 +25,87 @@ export default {
 }
 ```
 
+```vue
+<template>
+  <pro-layout
+    title="Ant Design Pro"
+    :menus="menus"
+    :collapsed="collapsed"
+    :theme="theme"
+    :layout="layout"
+    :contentWidth="contentWidth"
+    :auto-hide-header="autoHideHeader"
+    :mediaQuery="query"
+    :isMobile="isMobile"
+    :handleMediaQuery="handleMediaQuery"
+    :handleCollapse="handleCollapse"
+    :logo="logoRender"
+  >
+    <template v-slot:rightContentRender>
+      <div :class="['ant-pro-global-header-index-right', layout === 'topmenu' && `ant-pro-global-header-index-${theme}`]">
+        rightContentRender
+      </div>
+    </template>
+    <template v-slot:footerRender>
+      <div>footerRender</div>
+    </template>
+    <setting-drawer navTheme="dark" />
+    <router-view />
+  </pro-layout>
+</template>
+
+<script>
+
+// by template
+import ProLayout, { SettingDrawer } from '@ant-design-vue/pro-layout'
+import { asyncRouterMap } from '../config/router.config'
+
+// import svg file
+import LogoSvg from '../assets/logo.svg?inline'
+
+export default {
+  name: 'BasicLayout',
+  data () {
+    return {
+      menus: [],
+      collapsed: false,
+      autoHideHeader: false,
+      query: {},
+      layout: 'sidemenu',
+      contentWidth: true,
+      theme: 'dark',
+      isMobile: false
+    }
+  },
+  created () {
+    this.menus = asyncRouterMap.find(item => item.path === '/').children
+  },
+  methods: {
+    handleMediaQuery (query) {
+      this.query = query
+      if (this.isMobile && !query['screen-xs']) {
+        this.isMobile = false
+        return
+      }
+      if (!this.isMobile && query['screen-xs']) {
+        this.isMobile = true
+        this.collapsed = false
+      }
+    },
+    handleCollapse (collapsed) {
+      this.collapsed = collapsed
+    },
+    logoRender () {
+      return <LogoSvg />
+    }
+  },
+  components: {
+  	SettingDrawer
+  }
+}
+</script>
+```
+
 ## API
 
 ### ProLayout
@@ -34,13 +115,30 @@ export default {
 | title | layout in the upper left corner title | VNode \| String | `'Ant Design Pro'` |
 | logo | layout top left logo url | VNode \| render | - |
 | loading`*` | layout loading status | boolean | - |
-| menuHeaderRender | render logo and title | VNode \| (logo,title)=>VNode | - |
 | layout | layout menu mode, sidemenu: right navigation, topmenu: top navigation | 'sidemenu' \| 'topmenu' | `'sidemenu'` |
 | contentWidth | content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive | true \| false | `false` |
 | theme | Navigation menu theme | 'light' \| 'dark' | `'dark'` |
 | menus | Vue-router `routes` prop | Object | `[{}]` |
 | collapsed | control menu's collapse and expansion | boolean | true |
+| isMobile | is mobile | boolean | false |
 | handleCollapse | folding collapse event of menu | (collapsed: boolean) => void | - |
+| menuHeaderRender | render logo and title | VNode \| (logo,title)=>VNode | - |
 | headerRender | custom header render method | (props: BasicLayoutProps) => VNode | - |
 | rightContentRender | header right content render method | (props: HeaderViewProps) => VNode | - |
 | collapsedButtonRender | custom collapsed button method | (collapsed: boolean) => VNode | - |
+| footerRender | custom footer render method | (props: BasicLayoutProps) => VNode | - |
+| i18nRender | i18n | Function (key: string) => string | - |
+| handleMediaQuery | media matchs callback | (querys: []) => void | - |
+| mediaQuery            | media matchs                                                 | Array                              | -                  |
+
+
+
+
+### SettingDrawer
+
+| Property | Description | Type | Default Value |
+| ---- | ---- | ---- | ---- |
+| navTheme | Theme | `dark` `light` `realDark` | `light` |
+| layout | Sider Layout | `sidemenu` `topmenu` | `sidemenu` |
+| primaryColor | Primary color (*development only) | `#1890ff` |      |
+

README.zh-CN.md

-English | [简体中文](./README.zh-CN.md)
+[English](./README.md) | 简体中文
 
 <h1 align="center">Ant Design Pro Layout</h1>
-
 ## 使用
 
 ```bash
@@ -25,6 +24,84 @@ export default {
 }
 ```
 
+```vue
+<template>
+  <pro-layout
+    title="Ant Design Pro"
+    :menus="menus"
+    :collapsed="collapsed"
+    :theme="theme"
+    :layout="layout"
+    :contentWidth="contentWidth"
+    :auto-hide-header="autoHideHeader"
+    :mediaQuery="query"
+    :isMobile="isMobile"
+    :handleMediaQuery="handleMediaQuery"
+    :handleCollapse="handleCollapse"
+    :logo="logoRender"
+  >
+    <template v-slot:rightContentRender>
+      <div :class="['ant-pro-global-header-index-right', layout === 'topmenu' && `ant-pro-global-header-index-${theme}`]">
+        rightContentRender
+      </div>
+    </template>
+    <template v-slot:footerRender>
+      <div>footerRender</div>
+    </template>
+    <setting-drawer navTheme="dark" />
+    <router-view />
+  </pro-layout>
+</template>
+
+<script>
+import ProLayout, { SettingDrawer } from '@ant-design-vue/pro-layout'
+import { asyncRouterMap } from '../config/router.config'
+
+import LogoSvg from '../assets/logo.svg?inline'
+
+export default {
+  name: 'BasicLayout',
+  data () {
+    return {
+      menus: [],
+      collapsed: false,
+      autoHideHeader: false,
+      query: {},
+      layout: 'sidemenu',
+      contentWidth: true,
+      theme: 'dark',
+      isMobile: false
+    }
+  },
+  created () {
+    this.menus = asyncRouterMap.find(item => item.path === '/').children
+  },
+  methods: {
+    handleMediaQuery (query) {
+      this.query = query
+      if (this.isMobile && !query['screen-xs']) {
+        this.isMobile = false
+        return
+      }
+      if (!this.isMobile && query['screen-xs']) {
+        this.isMobile = true
+        this.collapsed = false
+      }
+    },
+    handleCollapse (collapsed) {
+      this.collapsed = collapsed
+    },
+    logoRender () {
+      return <LogoSvg />
+    }
+  },
+  components: {
+  	SettingDrawer
+  }
+}
+</script>
+```
+
 ## API
 
 ### ProLayout
@@ -40,7 +117,21 @@ export default {
 | theme | 导航的主题 | 'light' \| 'dark' | `'dark'` |
 | menus | Vue-router `routes` 属性 | Object | `[{}]` |
 | collapsed | 控制菜单的收起和展开 | boolean | true |
+| isMobile | 是否为手机模式 | boolean | false |
 | handleCollapse | 菜单的折叠收起事件	 | (collapsed: boolean) => void | - |
 | headerRender | 自定义头的 render 方法 | (props: BasicLayoutProps) => VNode | - |
 | rightContentRender | 自定义头右部的 render 方法 | (props: HeaderViewProps) => VNode | - |
-| collapsedButtonRender | 自定义 collapsed button 的方法 | (collapsed: boolean) => VNode | - |
+| collapsedButtonRender | 自定义 侧栏收缩按钮 的方法 | (collapsed: boolean) => VNode | - |
+| footerRender | 自定义 底部区域内容 | (props: BasicLayoutProps) => VNode | - |
+| i18nRender | 本地化渲染函数 (this.$t) | Function (key: string) => string | - |
+| handleMediaQuery | 媒体查询回调 | (querys: []) => void | - |
+| mediaQuery            | ProLayout 当前的媒体查询                        | Array                              | -                  |
+
+
+### SettingDrawer
+
+| Property | Description | Type | Default Value |
+| ---- | ---- | ---- | ---- |
+| navTheme | 主题 | `dark` `light` `realDark` | `light` |
+| layout | 布局模式 | `sidemenu` `topmenu` | `sidemenu` |
+| primaryColor | 主色调 (*仅开发环境生效) | `#1890ff` |      |

src/BasicLayout.jsx

@@ -70,6 +70,8 @@ const headerRender = (h, props) => {
   return <HeaderView { ...{ props } } />
 }
 
+const defaultI18nRender = (key) => key
+
 const BasicLayout = {
   name: 'BasicLayout',
   functional: true,
@@ -84,7 +86,7 @@ const BasicLayout = {
       mediaQuery,
       handleMediaQuery,
       handleCollapse,
-      i18nRender
+      i18nRender = defaultI18nRender
     } = props
 
     const footerRender = getComponentFromProp(content, 'footerRender')