diff --git a/common/i18n.js b/common/i18n.js
index 19433f8..143ea28 100644
--- a/common/i18n.js
+++ b/common/i18n.js
@@ -1,5 +1,5 @@
 import { compact, find } from 'lodash'
-import nav from '../assets/data/nav.json'
+import nav from './nav'
 
 export const LOCALES = [
   {
diff --git a/common/nav.js b/common/nav.js
new file mode 100644
index 0000000..3510057
--- /dev/null
+++ b/common/nav.js
@@ -0,0 +1,15 @@
+import { entries, sortBy } from 'lodash'
+import nav from '../assets/data/nav.json'
+
+export default entries(nav).reduce(function (ret, [lang, items]) {
+  ret[lang] = items.map(function (item) {
+    if (!item.children) {
+      return item
+    }
+    return {
+      ...item,
+      children: sortBy(item.children, child => child.title)
+    }
+  })
+  return ret
+}, {})
diff --git a/layouts/default.vue b/layouts/default.vue
index b20dae0..0412227 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,7 +23,7 @@ import OneHeader from '../components/OneHeader'
 import OneMenu from '../components/OneMenu'
 import OneFooter from '../components/OneFooter'
 import OneBackToTop from '../components/OneBackToTop'
-import nav from '../assets/data/nav.json'
+import nav from '../common/nav'
 import i18n from '../common/i18n'
 import i18nMgr from 'veui/managers/i18n'
 
diff --git a/one/docs/components/dialog.md b/one/docs/components/dialog.md
index bbec21c..0adef56 100644
--- a/one/docs/components/dialog.md
+++ b/one/docs/components/dialog.md
@@ -2,6 +2,10 @@
 
 ## 示例
 
+### 尺寸与全屏
+
+[[ demo src="/demo/dialog/size.vue" ]]
+
 ### 模态与非模态
 
 [[ demo src="/demo/dialog/modal.vue" ]]
diff --git a/one/docs/demo/dialog/size.vue b/one/docs/demo/dialog/size.vue
new file mode 100644
index 0000000..6d25acc
--- /dev/null
+++ b/one/docs/demo/dialog/size.vue
@@ -0,0 +1,66 @@
+<template>
+<article>
+  <veui-button @click="openDialog('s')">
+    s
+  </veui-button>
+  <veui-button @click="openDialog('m')">
+    m
+  </veui-button>
+  <veui-button @click="openDialog('narrow')">
+    narrow
+  </veui-button>
+  <veui-button @click="openDialog('medium')">
+    medium
+  </veui-button>
+  <veui-button @click="openDialog('wide')">
+    wide
+  </veui-button>
+  <veui-button @click="openDialog('fullscreen')">
+    fullscreen
+  </veui-button>
+  <veui-button @click="openDialog('auto')">
+    auto
+  </veui-button>
+  <veui-dialog
+    title="System"
+    :ui="ui"
+    :open.sync="open"
+  >
+    <p>Current UI: "{{ ui }}"</p>
+    <p v-if="ui === 's' || ui === 'm'">
+      <veui-button>Button size: {{ ui }}</veui-button>
+      <veui-switch>{{ ui }}</veui-switch>
+    </p>
+  </veui-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button, Switch } from 'veui'
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    'veui-button': Button,
+    'veui-switch': Switch
+  },
+  data () {
+    return {
+      open: false,
+      ui: null
+    }
+  },
+  methods: {
+    openDialog (size) {
+      this.ui = size
+      this.open = true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 20px;
+}
+</style>