From b79fdcee9775c1ed87c7ff84fac7e326b716eb05 Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Wed, 4 Mar 2020 18:22:25 +0800
Subject: [PATCH] modify(debug tag): change router to localstorage

---
 demo/documentation/landing/index.vue |    2 +-
 demo/entry.vue                       |   23 +-
 demo/header.vue                      |   28 +-
 demo/init.js                         |  106 +-
 demo/menuOptions.js                  | 2573 +++++++++-----------------
 demo/store.js                        |    7 +
 demo/utils/ComponentDemo.vue         |    6 +-
 7 files changed, 899 insertions(+), 1846 deletions(-)
 create mode 100644 demo/store.js

diff --git a/demo/documentation/landing/index.vue b/demo/documentation/landing/index.vue
index d95f70b33..808b6c657 100644
--- a/demo/documentation/landing/index.vue
+++ b/demo/documentation/landing/index.vue
@@ -94,7 +94,7 @@ export default {
   methods: {
     handleStartClick () {
       this.$router.push(
-        /^(\/[^/]+){3}/.exec(this.$route.path)[0] + '/doc/start'
+        /^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
       )
     },
     handleTitleMouseEnter () {
diff --git a/demo/entry.vue b/demo/entry.vue
index 3a7447f85..83568f625 100644
--- a/demo/entry.vue
+++ b/demo/entry.vue
@@ -6,6 +6,7 @@
           :lang="lang"
           :items="flattenedItems"
           :env="env"
+          :mode="mode"
           @lang-change="handleLangChange"
           @mode-change="handleModeChange"
         />
@@ -21,6 +22,7 @@
 import DocHeader from './header.vue'
 import menuOptions from './menuOptions'
 import { i18n } from './init'
+import { setState } from './store'
 
 export default {
   components: {
@@ -38,6 +40,12 @@ export default {
   beforeRouteUpdate (to, from, next) {
     this.$i18n.locale = to.params.lang
     next()
+    this.mode = localStorage.getItem('mode')
+  },
+  data () {
+    return {
+      mode: localStorage.getItem('mode') ? localStorage.getItem('mode') : 'debug'
+    }
   },
   computed: {
     env () {
@@ -74,14 +82,6 @@ export default {
       set (theme) {
         this.$router.push(changeThemeInPath(this.$route.fullPath, theme))
       }
-    },
-    mode: {
-      get () {
-        return this.$route.params.mode === 'debug' ? 'debug' : 'common'
-      },
-      set (mode) {
-        this.$router.push(changeModeInPath(this.$route.fullPath, mode))
-      }
     }
   },
   methods: {
@@ -90,6 +90,8 @@ export default {
     },
     handleModeChange (mode) {
       this.mode = mode
+      localStorage.setItem('mode', mode)
+      setState(mode)
     }
   }
 }
@@ -103,11 +105,6 @@ function changeThemeInPath (path, theme) {
   const themeReg = /(^\/[^/]+\/)([^/]+)/
   return path.replace(themeReg, '$1' + theme)
 }
-
-function changeModeInPath (path, mode) {
-  const modeReg = /(^\/[^/]+\/[^/]+\/)([^/]+)/
-  return path.replace(modeReg, '$1' + mode)
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/demo/header.vue b/demo/header.vue
index d65cded55..bbe2c058a 100644
--- a/demo/header.vue
+++ b/demo/header.vue
@@ -99,13 +99,16 @@ export default {
     env: {
       type: String,
       default: null
+    },
+    mode: {
+      type: String,
+      default: null
     }
   },
   data () {
     return {
       searchInputValue: '',
       version,
-      mode: 'debug',
       themeOptions: {
         dark: {
           label: 'Light',
@@ -175,18 +178,6 @@ export default {
         }
       ]
     }
-    // modeOptions () {
-    //   return [
-    //     {
-    //       label: this.$t('common'),
-    //       next: 'common'
-    //     },
-    //     {
-    //       label: this.$t('debug'),
-    //       next: 'debug'
-    //     }
-    //   ]
-    // }
   },
   methods: {
     handleLogoClick () {
@@ -195,7 +186,7 @@ export default {
         return
       }
       this.$router.push(
-        /^(\/[^/]+){3}/.exec(this.$route.path)[0]
+        /^(\/[^/]+){2}/.exec(this.$route.path)[0]
       )
     },
     handleSelect (value) {
@@ -204,14 +195,14 @@ export default {
     handleMenuSelect (value) {
       if (value === 'home') {
         this.$router.push(
-          /^(\/[^/]+){3}/.exec(this.$route.path)[0]
+          /^(\/[^/]+){2}/.exec(this.$route.path)[0]
         )
       } if (value === 'doc') {
-        if (/^(\/[^/]+){3}\/doc/.test(this.$route.path)) {
+        if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) {
 
         } else {
           this.$router.push(
-            /^(\/[^/]+){3}/.exec(this.$route.path)[0] + '/doc/start'
+            /^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
           )
         }
       }
@@ -221,8 +212,7 @@ export default {
     },
 
     handleModeChange () {
-      this.mode = this.modeOptions[this.mode].next
-      this.$emit('mode-change', this.mode)
+      this.$emit('mode-change', this.modeOptions[this.mode].next)
     },
     handleLanguageChange () {
       this.$emit('lang-change', this.langOptions[this.lang].next)
diff --git a/demo/init.js b/demo/init.js
index e5d222f5d..4bca5df70 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -234,78 +234,40 @@ const children = [
   },
   { path: '/n-select-debug', component: selectDebug }
 ]
-let routes = []
-if (env === 'development') {
-  routes = [
-    {
-      path: '/:lang/:theme/:mode/n-popover-debug',
-      component: popoverDebug
-    },
-    {
-      path: '/:lang/:theme/:mode/n-back-top-debug',
-      component: backTopDebug
-    },
-    {
-      path: '/:lang/:theme/:mode/n-cascader-debug',
-      component: cascaderDebug
-    },
-    {
-      path: '/:lang/:theme/:mode',
-      component: Entry,
-      children: [
-        {
-          path: '/:lang/:theme/:mode',
-          component: LandingPage,
-          name: 'home'
-        },
-        {
-          path: '/:lang/:theme/:mode/doc',
-          component: DocEntry,
-          children: withPrefix('/:lang/:theme/:mode/doc', children)
-        }
-      ]
-    },
-    {
-      path: '/*',
-      redirect: '/zh-CN/light/debug'
-    }
-  ]
-} else {
-  routes = [
-    {
-      path: '/:lang/:theme/n-popover-debug',
-      component: popoverDebug
-    },
-    {
-      path: '/n-back-top-debug',
-      component: backTopDebug
-    },
-    {
-      path: '/n-cascader-debug',
-      component: cascaderDebug
-    },
-    {
-      path: '/:lang/:theme',
-      component: Entry,
-      children: [
-        {
-          path: '/:lang/:theme',
-          component: LandingPage,
-          name: 'home'
-        },
-        {
-          path: '/:lang/:theme/doc',
-          component: DocEntry,
-          children: withPrefix('/:lang/:theme/doc', children)
-        }
-      ]
-    },
-    {
-      path: '/*',
-      redirect: '/zh-CN/light'
-    }
-  ]
-}
+const routes = [
+  {
+    path: '/:lang/:theme/n-popover-debug',
+    component: popoverDebug
+  },
+  {
+    path: '/n-back-top-debug',
+    component: backTopDebug
+  },
+  {
+    path: '/n-cascader-debug',
+    component: cascaderDebug
+  },
+  {
+    path: '/:lang/:theme',
+    component: Entry,
+    children: [
+      {
+        path: '/:lang/:theme',
+        component: LandingPage,
+        name: 'home'
+      },
+      {
+        path: '/:lang/:theme/doc',
+        component: DocEntry,
+        children: withPrefix('/:lang/:theme/doc', children)
+      }
+    ]
+  },
+  {
+    path: '/*',
+    redirect: '/zh-CN/light'
+  }
+]
 
 const router = new VueRouter({
   mode: 'history',
diff --git a/demo/menuOptions.js b/demo/menuOptions.js
index 7f6e32659..3614a6bcd 100644
--- a/demo/menuOptions.js
+++ b/demo/menuOptions.js
@@ -44,458 +44,457 @@ const appendDebugDemos = (item, mode) => {
 
 export default function (locale, instance) {
   if (locale === 'zh-CN') {
-    if (env === 'development') {
-      return [
-        {
-          name: 'Naive UI',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/intro'
-        },
-        {
-          name: 'Getting Started',
-          title: '起步',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/start'
-        },
-        // {
-        //   name: 'Develop Guidelines',
-        //   path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/dev-guildlines'
-        // },
-        {
-          name: 'Create Themed Component',
-          title: '创建适配主题的组件',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-theme'
-        },
-        appendCounts({
-          name: '配置组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Config Provider',
-              title: '配置提供者',
-              titleExtra: 'Config Provider',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-config-provider'
-            },
-            {
-              name: 'Config Consumer',
-              title: '配置消费者 ',
-              titleExtra: 'Config Consumer',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-config-consumer'
-            },
-            {
-              name: 'Element',
-              title: '元素',
-              titleExtra: 'Element',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-element'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '布局组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Layout',
-              title: '布局',
-              titleExtra: 'Layout',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-layout'
-            },
-            {
-              name: 'Grid',
-              title: '栅格',
-              titleExtra: 'Grid',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-grid'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '通用组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Avatar',
-              title: '头像',
-              titleExtra: 'Avatar',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-avatar'
-            },
-            {
-              name: 'Button',
-              title: '按钮',
-              titleExtra: 'Button',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-button'
-            },
-            {
-              name: 'Card',
-              title: '卡片',
-              titleExtra: 'Card',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-card'
-            },
-            {
-              name: 'Collapse',
-              title: '折叠面板',
-              titleExtra: 'Collapse',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-collapse'
-            },
-            {
-              name: 'Divider',
-              title: '分割线',
-              titleExtra: 'Divider',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-divider'
-            },
-            {
-              name: 'Dropdown',
-              title: '下拉菜单',
-              titleExtra: 'Dropdown',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-dropdown'
-            },
-            {
-              name: 'Gradient Text',
-              title: '渐变文字',
-              titleExtra: 'Gradient Text',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-gradient-text'
-            },
-            {
-              name: 'Icon',
-              title: '图标',
-              titleExtra: 'Icon',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-icon'
-            },
-            {
-              name: 'Tag',
-              title: '标签',
-              titleExtra: 'Tag',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tag'
-            },
-            {
-              name: 'Typography',
-              title: '排版',
-              titleExtra: 'Typography',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-typography'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '数据录入组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Auto Complete',
-              title: '自动填充',
-              titleExtra: 'Auto Complete',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-auto-complete'
-            },
-            {
-              name: 'Cascader',
-              title: '级联选择',
-              titleExtra: 'Cascader',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-cascader'
-            },
-            {
-              name: 'Checkbox',
-              title: '复选框',
-              titleExtra: 'Checkbox',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-checkbox'
-            },
-            {
-              name: 'Custom Input (in progress)',
-              title: '自定义输入',
-              titleExtra: 'Custom Input',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-custom-input'
-            },
-            {
-              name: 'Date Picker',
-              title: '日期选择器',
-              titleExtra: 'Date Picker',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-date-picker'
-            },
-            {
-              name: 'Form',
-              title: '表单',
-              titleExtra: 'Form',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-form'
-            },
-            {
-              name: 'Input',
-              title: '文本输入',
-              titleExtra: 'Input',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-input'
-            },
-            {
-              name: 'Input Number',
-              title: '数字输入',
-              titleExtra: 'Input Number',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-input-number'
-            },
-            {
-              name: 'Radio',
-              title: '单选',
-              titleExtra: 'Radio',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-radio'
-            },
-            {
-              name: 'Select',
-              title: '选择器',
-              titleExtra: 'Select',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-select'
-            },
-            {
-              name: 'Slider',
-              title: '滑动选择',
-              titleExtra: 'Slider',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-slider'
-            },
-            {
-              name: 'Switch',
-              title: '开关',
-              titleExtra: 'Switch',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-switch'
-            },
-            {
-              name: 'Time Picker',
-              title: '时间选择器',
-              titleExtra: 'Time Picker',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-time-picker'
-            },
-            {
-              name: 'Transfer',
-              title: '穿梭框',
-              titleExtra: 'Transfer',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-transfer'
-            },
-            {
-              name: 'Upload',
-              title: '上传',
-              titleExtra: 'Upload',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-upload'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '数据展示组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Code',
-              title: '代码',
-              titleExtra: 'Code',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-code'
-            },
-            {
-              name: 'Data Table',
-              title: '数据表格',
-              titleExtra: 'Data Table',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-data-table'
-            },
-            {
-              name: 'Descriptions',
-              title: '描述',
-              titleExtra: 'Descriptions',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-descriptions'
-            },
-            {
-              name: 'Empty',
-              title: '无内容',
-              titleExtra: 'Empty',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-empty'
-            },
-            {
-              name: 'List',
-              title: '列表',
-              titleExtra: 'List',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-list'
-            },
-            {
-              name: 'Log',
-              title: '日志',
-              titleExtra: 'Log',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-log'
-            },
-            {
-              name: 'Statistic',
-              title: '统计数据',
-              titleExtra: 'Statistic',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-statistic'
-            },
-            {
-              name: 'Table',
-              title: '表格',
-              titleExtra: 'Table',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-table'
-            },
-            {
-              name: 'Thing',
-              title: '东西',
-              titleExtra: 'Thing',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-thing'
-            },
-            {
-              name: 'Time',
-              title: '时间',
-              titleExtra: 'Time',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-time'
-            },
-            {
-              name: 'Timeline',
-              title: '时间线',
-              titleExtra: 'Timeline',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-timeline'
-            },
-            {
-              name: 'Tree',
-              title: '树',
-              titleExtra: 'Tree',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tree'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '导航组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Affix',
-              title: '固钉',
-              titleExtra: 'Affix',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-affix'
-            },
-            {
-              name: 'Anchor',
-              title: '侧边导航',
-              titleExtra: 'Anchor',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-anchor'
-            },
-            {
-              name: 'Back Top',
-              title: '回到顶部',
-              titleExtra: 'Back Top',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-back-top'
-            },
-            {
-              name: 'Breadcrumb',
-              title: '面包屑',
-              titleExtra: 'Breadcrumb',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-breadcrumb'
-            },
-            {
-              name: 'Loading Bar',
-              title: '加载条',
-              titleExtra: 'Loading Bar',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-loading-bar'
-            },
-            {
-              name: 'Menu',
-              title: '菜单',
-              titleExtra: 'Menu',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-menu'
-            },
-            {
-              name: 'Pagination',
-              title: '分页',
-              titleExtra: 'Pagination',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-pagination'
-            },
-            {
-              name: 'Steps',
-              title: '步骤',
-              titleExtra: 'Steps',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-steps'
-            },
-            {
-              name: 'Tabs',
-              title: '标签页',
-              titleExtra: 'Tabs',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tabs'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '反馈组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Alert',
-              title: '警告信息',
-              titleExtra: 'Alerts',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-alert'
-            },
-            {
-              name: 'Badge',
-              title: '标记',
-              titleExtra: 'Badge',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-badge'
-            },
-            {
-              name: 'Confirm',
-              title: '确认',
-              titleExtra: 'Confirm',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-confirm'
-            },
-            {
-              name: 'Drawer',
-              title: '抽屉',
-              titleExtra: 'Drawer',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-drawer'
-            },
-            {
-              name: 'Message',
-              title: '信息',
-              titleExtra: 'Message',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-message'
-            },
-            {
-              name: 'Modal',
-              title: '模态框',
-              titleExtra: 'Modal',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-modal'
-            },
-            {
-              name: 'Notification',
-              title: '通知',
-              titleExtra: 'Notification',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-notification'
-            },
-            {
-              name: 'Popover',
-              title: '弹出信息',
-              titleExtra: 'Popover',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popover'
-            },
-            {
-              name: 'Popconfirm',
-              title: '弹出确认',
-              titleExtra: 'Popconfirm',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popconfirm'
-            },
-            {
-              name: 'Popselect',
-              title: '弹出选择',
-              titleExtra: 'Popselect',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popselect'
-            },
-            {
-              name: 'Progress',
-              title: '进度',
-              titleExtra: 'Progress',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-progress'
-            },
-            {
-              name: 'Result',
-              title: '结果页',
-              titleExtra: 'Result',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-result'
-            },
-            {
-              name: 'Spin',
-              title: '加载',
-              titleExtra: 'Spin',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-spin'
-            },
-            {
-              name: 'Tooltip',
-              title: '弹出提示',
-              titleExtra: 'Tooltip',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tooltip'
-            }
-          ]
-        })
+    return [
+      {
+        name: 'Naive UI',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/intro'
+      },
+      {
+        name: 'Getting Started',
+        title: '起步',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/start'
+      },
+      // {
+      //   name: 'Develop Guidelines',
+      //   path: `/${instance.lang}/${instance.theme}/doc` + '/dev-guildlines'
+      // },
+      {
+        name: 'Create Themed Component',
+        title: '创建适配主题的组件',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/n-theme'
+      },
+      appendCounts({
+        name: '配置组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Config Provider',
+            title: '配置提供者',
+            titleExtra: 'Config Provider',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-provider'
+          },
+          {
+            name: 'Config Consumer',
+            title: '配置消费者 ',
+            titleExtra: 'Config Consumer',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-consumer'
+          },
+          {
+            name: 'Element',
+            title: '元素',
+            titleExtra: 'Element',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-element'
+          }
+        ]
+      }),
+      appendCounts({
+        name: '布局组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Layout',
+            title: '布局',
+            titleExtra: 'Layout',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-layout'
+          },
+          {
+            name: 'Grid',
+            title: '栅格',
+            titleExtra: 'Grid',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-grid'
+          }
+        ]
+      }),
+      appendCounts({
+        name: '通用组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Avatar',
+            title: '头像',
+            titleExtra: 'Avatar',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-avatar'
+          },
+          {
+            name: 'Button',
+            title: '按钮',
+            titleExtra: 'Button',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-button'
+          },
+          {
+            name: 'Card',
+            title: '卡片',
+            titleExtra: 'Card',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-card'
+          },
+          {
+            name: 'Collapse',
+            title: '折叠面板',
+            titleExtra: 'Collapse',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-collapse'
+          },
+          {
+            name: 'Divider',
+            title: '分割线',
+            titleExtra: 'Divider',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-divider'
+          },
+          {
+            name: 'Dropdown',
+            title: '下拉菜单',
+            titleExtra: 'Dropdown',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-dropdown'
+          },
+          {
+            name: 'Gradient Text',
+            title: '渐变文字',
+            titleExtra: 'Gradient Text',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-gradient-text'
+          },
+          {
+            name: 'Icon',
+            title: '图标',
+            titleExtra: 'Icon',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon'
+          },
+          {
+            name: 'Tag',
+            title: '标签',
+            titleExtra: 'Tag',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tag'
+          },
+          {
+            name: 'Typography',
+            title: '排版',
+            titleExtra: 'Typography',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-typography'
+          }
+        ]
+      }),
+      appendCounts({
+        name: '数据录入组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Auto Complete',
+            title: '自动填充',
+            titleExtra: 'Auto Complete',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-auto-complete'
+          },
+          {
+            name: 'Cascader',
+            title: '级联选择',
+            titleExtra: 'Cascader',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader'
+          },
+          {
+            name: 'Checkbox',
+            title: '复选框',
+            titleExtra: 'Checkbox',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-checkbox'
+          },
+          {
+            name: 'Custom Input (in progress)',
+            title: '自定义输入',
+            titleExtra: 'Custom Input',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-custom-input'
+          },
+          {
+            name: 'Date Picker',
+            title: '日期选择器',
+            titleExtra: 'Date Picker',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker'
+          },
+          {
+            name: 'Form',
+            title: '表单',
+            titleExtra: 'Form',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-form'
+          },
+          {
+            name: 'Input',
+            title: '文本输入',
+            titleExtra: 'Input',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-input'
+          },
+          {
+            name: 'Input Number',
+            title: '数字输入',
+            titleExtra: 'Input Number',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-input-number'
+          },
+          {
+            name: 'Radio',
+            title: '单选',
+            titleExtra: 'Radio',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-radio'
+          },
+          {
+            name: 'Select',
+            title: '选择器',
+            titleExtra: 'Select',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-select'
+          },
+          {
+            name: 'Slider',
+            title: '滑动选择',
+            titleExtra: 'Slider',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-slider'
+          },
+          {
+            name: 'Switch',
+            title: '开关',
+            titleExtra: 'Switch',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-switch'
+          },
+          {
+            name: 'Time Picker',
+            title: '时间选择器',
+            titleExtra: 'Time Picker',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-time-picker'
+          },
+          {
+            name: 'Transfer',
+            title: '穿梭框',
+            titleExtra: 'Transfer',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-transfer'
+          },
+          {
+            name: 'Upload',
+            title: '上传',
+            titleExtra: 'Upload',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-upload'
+          }
+        ]
+      }),
+      appendCounts({
+        name: '数据展示组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Code',
+            title: '代码',
+            titleExtra: 'Code',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-code'
+          },
+          {
+            name: 'Data Table',
+            title: '数据表格',
+            titleExtra: 'Data Table',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-data-table'
+          },
+          {
+            name: 'Descriptions',
+            title: '描述',
+            titleExtra: 'Descriptions',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-descriptions'
+          },
+          {
+            name: 'Empty',
+            title: '无内容',
+            titleExtra: 'Empty',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-empty'
+          },
+          {
+            name: 'List',
+            title: '列表',
+            titleExtra: 'List',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-list'
+          },
+          {
+            name: 'Log',
+            title: '日志',
+            titleExtra: 'Log',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-log'
+          },
+          {
+            name: 'Statistic',
+            title: '统计数据',
+            titleExtra: 'Statistic',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-statistic'
+          },
+          {
+            name: 'Table',
+            title: '表格',
+            titleExtra: 'Table',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-table'
+          },
+          {
+            name: 'Thing',
+            title: '东西',
+            titleExtra: 'Thing',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-thing'
+          },
+          {
+            name: 'Time',
+            title: '时间',
+            titleExtra: 'Time',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-time'
+          },
+          {
+            name: 'Timeline',
+            title: '时间线',
+            titleExtra: 'Timeline',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-timeline'
+          },
+          {
+            name: 'Tree',
+            title: '树',
+            titleExtra: 'Tree',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tree'
+          }
+        ]
+      }),
+      appendCounts({
+        name: '导航组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Affix',
+            title: '固钉',
+            titleExtra: 'Affix',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-affix'
+          },
+          {
+            name: 'Anchor',
+            title: '侧边导航',
+            titleExtra: 'Anchor',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-anchor'
+          },
+          {
+            name: 'Back Top',
+            title: '回到顶部',
+            titleExtra: 'Back Top',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top'
+          },
+          {
+            name: 'Breadcrumb',
+            title: '面包屑',
+            titleExtra: 'Breadcrumb',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-breadcrumb'
+          },
+          {
+            name: 'Loading Bar',
+            title: '加载条',
+            titleExtra: 'Loading Bar',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-loading-bar'
+          },
+          {
+            name: 'Menu',
+            title: '菜单',
+            titleExtra: 'Menu',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-menu'
+          },
+          {
+            name: 'Pagination',
+            title: '分页',
+            titleExtra: 'Pagination',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-pagination'
+          },
+          {
+            name: 'Steps',
+            title: '步骤',
+            titleExtra: 'Steps',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-steps'
+          },
+          {
+            name: 'Tabs',
+            title: '标签页',
+            titleExtra: 'Tabs',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tabs'
+          }
+        ]
+      }),
+      appendCounts({
+        name: '反馈组件',
+        group: true,
+        childItems: [
+          {
+            name: 'Alert',
+            title: '警告信息',
+            titleExtra: 'Alerts',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-alert'
+          },
+          {
+            name: 'Badge',
+            title: '标记',
+            titleExtra: 'Badge',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-badge'
+          },
+          {
+            name: 'Confirm',
+            title: '确认',
+            titleExtra: 'Confirm',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-confirm'
+          },
+          {
+            name: 'Drawer',
+            title: '抽屉',
+            titleExtra: 'Drawer',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-drawer'
+          },
+          {
+            name: 'Message',
+            title: '信息',
+            titleExtra: 'Message',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-message'
+          },
+          {
+            name: 'Modal',
+            title: '模态框',
+            titleExtra: 'Modal',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal'
+          },
+          {
+            name: 'Notification',
+            title: '通知',
+            titleExtra: 'Notification',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-notification'
+          },
+          {
+            name: 'Popover',
+            title: '弹出信息',
+            titleExtra: 'Popover',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
+          },
+          {
+            name: 'Popconfirm',
+            title: '弹出确认',
+            titleExtra: 'Popconfirm',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popconfirm'
+          },
+          {
+            name: 'Popselect',
+            title: '弹出选择',
+            titleExtra: 'Popselect',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popselect'
+          },
+          {
+            name: 'Progress',
+            title: '进度',
+            titleExtra: 'Progress',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-progress'
+          },
+          {
+            name: 'Result',
+            title: '结果页',
+            titleExtra: 'Result',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-result'
+          },
+          {
+            name: 'Spin',
+            title: '加载',
+            titleExtra: 'Spin',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-spin'
+          },
+          {
+            name: 'Tooltip',
+            title: '弹出提示',
+            titleExtra: 'Tooltip',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tooltip'
+          }
+        ]
+      })
       // {
       //   name: '废弃的',
       //   path: `/${instance.lang}/${instance.theme}/doc` + '/',
@@ -559,1295 +558,391 @@ export default function (locale, instance) {
       //     }
       //   ]
       // }
-      ]
-    } else {
-      return [
-        {
-          name: 'Naive UI',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/intro'
-        },
-        {
-          name: 'Getting Started',
-          title: '起步',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/start'
-        },
-        // {
-        //   name: 'Develop Guidelines',
-        //   path: `/${instance.lang}/${instance.theme}/doc` + '/dev-guildlines'
-        // },
-        {
-          name: 'Create Themed Component',
-          title: '创建适配主题的组件',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/n-theme'
-        },
-        appendCounts({
-          name: '配置组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Config Provider',
-              title: '配置提供者',
-              titleExtra: 'Config Provider',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-provider'
-            },
-            {
-              name: 'Config Consumer',
-              title: '配置消费者 ',
-              titleExtra: 'Config Consumer',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-consumer'
-            },
-            {
-              name: 'Element',
-              title: '元素',
-              titleExtra: 'Element',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-element'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '布局组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Layout',
-              title: '布局',
-              titleExtra: 'Layout',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-layout'
-            },
-            {
-              name: 'Grid',
-              title: '栅格',
-              titleExtra: 'Grid',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-grid'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '通用组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Avatar',
-              title: '头像',
-              titleExtra: 'Avatar',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-avatar'
-            },
-            {
-              name: 'Button',
-              title: '按钮',
-              titleExtra: 'Button',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-button'
-            },
-            {
-              name: 'Card',
-              title: '卡片',
-              titleExtra: 'Card',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-card'
-            },
-            {
-              name: 'Collapse',
-              title: '折叠面板',
-              titleExtra: 'Collapse',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-collapse'
-            },
-            {
-              name: 'Divider',
-              title: '分割线',
-              titleExtra: 'Divider',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-divider'
-            },
-            {
-              name: 'Dropdown',
-              title: '下拉菜单',
-              titleExtra: 'Dropdown',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-dropdown'
-            },
-            {
-              name: 'Gradient Text',
-              title: '渐变文字',
-              titleExtra: 'Gradient Text',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-gradient-text'
-            },
-            {
-              name: 'Icon',
-              title: '图标',
-              titleExtra: 'Icon',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon'
-            },
-            {
-              name: 'Tag',
-              title: '标签',
-              titleExtra: 'Tag',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tag'
-            },
-            {
-              name: 'Typography',
-              title: '排版',
-              titleExtra: 'Typography',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-typography'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '数据录入组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Auto Complete',
-              title: '自动填充',
-              titleExtra: 'Auto Complete',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-auto-complete'
-            },
-            {
-              name: 'Cascader',
-              title: '级联选择',
-              titleExtra: 'Cascader',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader'
-            },
-            {
-              name: 'Checkbox',
-              title: '复选框',
-              titleExtra: 'Checkbox',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-checkbox'
-            },
-            {
-              name: 'Custom Input (in progress)',
-              title: '自定义输入',
-              titleExtra: 'Custom Input',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-custom-input'
-            },
-            {
-              name: 'Date Picker',
-              title: '日期选择器',
-              titleExtra: 'Date Picker',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker'
-            },
-            {
-              name: 'Form',
-              title: '表单',
-              titleExtra: 'Form',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-form'
-            },
-            {
-              name: 'Input',
-              title: '文本输入',
-              titleExtra: 'Input',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-input'
-            },
-            {
-              name: 'Input Number',
-              title: '数字输入',
-              titleExtra: 'Input Number',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-input-number'
-            },
-            {
-              name: 'Radio',
-              title: '单选',
-              titleExtra: 'Radio',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-radio'
-            },
-            {
-              name: 'Select',
-              title: '选择器',
-              titleExtra: 'Select',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-select'
-            },
-            {
-              name: 'Slider',
-              title: '滑动选择',
-              titleExtra: 'Slider',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-slider'
-            },
-            {
-              name: 'Switch',
-              title: '开关',
-              titleExtra: 'Switch',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-switch'
-            },
-            {
-              name: 'Time Picker',
-              title: '时间选择器',
-              titleExtra: 'Time Picker',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-time-picker'
-            },
-            {
-              name: 'Transfer',
-              title: '穿梭框',
-              titleExtra: 'Transfer',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-transfer'
-            },
-            {
-              name: 'Upload',
-              title: '上传',
-              titleExtra: 'Upload',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-upload'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '数据展示组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Code',
-              title: '代码',
-              titleExtra: 'Code',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-code'
-            },
-            {
-              name: 'Data Table',
-              title: '数据表格',
-              titleExtra: 'Data Table',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-data-table'
-            },
-            {
-              name: 'Descriptions',
-              title: '描述',
-              titleExtra: 'Descriptions',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-descriptions'
-            },
-            {
-              name: 'Empty',
-              title: '无内容',
-              titleExtra: 'Empty',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-empty'
-            },
-            {
-              name: 'List',
-              title: '列表',
-              titleExtra: 'List',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-list'
-            },
-            {
-              name: 'Log',
-              title: '日志',
-              titleExtra: 'Log',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-log'
-            },
-            {
-              name: 'Statistic',
-              title: '统计数据',
-              titleExtra: 'Statistic',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-statistic'
-            },
-            {
-              name: 'Table',
-              title: '表格',
-              titleExtra: 'Table',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-table'
-            },
-            {
-              name: 'Thing',
-              title: '东西',
-              titleExtra: 'Thing',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-thing'
-            },
-            {
-              name: 'Time',
-              title: '时间',
-              titleExtra: 'Time',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-time'
-            },
-            {
-              name: 'Timeline',
-              title: '时间线',
-              titleExtra: 'Timeline',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-timeline'
-            },
-            {
-              name: 'Tree',
-              title: '树',
-              titleExtra: 'Tree',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tree'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '导航组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Affix',
-              title: '固钉',
-              titleExtra: 'Affix',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-affix'
-            },
-            {
-              name: 'Anchor',
-              title: '侧边导航',
-              titleExtra: 'Anchor',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-anchor'
-            },
-            {
-              name: 'Back Top',
-              title: '回到顶部',
-              titleExtra: 'Back Top',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top'
-            },
-            {
-              name: 'Breadcrumb',
-              title: '面包屑',
-              titleExtra: 'Breadcrumb',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-breadcrumb'
-            },
-            {
-              name: 'Loading Bar',
-              title: '加载条',
-              titleExtra: 'Loading Bar',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-loading-bar'
-            },
-            {
-              name: 'Menu',
-              title: '菜单',
-              titleExtra: 'Menu',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-menu'
-            },
-            {
-              name: 'Pagination',
-              title: '分页',
-              titleExtra: 'Pagination',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-pagination'
-            },
-            {
-              name: 'Steps',
-              title: '步骤',
-              titleExtra: 'Steps',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-steps'
-            },
-            {
-              name: 'Tabs',
-              title: '标签页',
-              titleExtra: 'Tabs',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tabs'
-            }
-          ]
-        }),
-        appendCounts({
-          name: '反馈组件',
-          group: true,
-          childItems: [
-            {
-              name: 'Alert',
-              title: '警告信息',
-              titleExtra: 'Alerts',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-alert'
-            },
-            {
-              name: 'Badge',
-              title: '标记',
-              titleExtra: 'Badge',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-badge'
-            },
-            {
-              name: 'Confirm',
-              title: '确认',
-              titleExtra: 'Confirm',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-confirm'
-            },
-            {
-              name: 'Drawer',
-              title: '抽屉',
-              titleExtra: 'Drawer',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-drawer'
-            },
-            {
-              name: 'Message',
-              title: '信息',
-              titleExtra: 'Message',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-message'
-            },
-            {
-              name: 'Modal',
-              title: '模态框',
-              titleExtra: 'Modal',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal'
-            },
-            {
-              name: 'Notification',
-              title: '通知',
-              titleExtra: 'Notification',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-notification'
-            },
-            {
-              name: 'Popover',
-              title: '弹出信息',
-              titleExtra: 'Popover',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
-            },
-            {
-              name: 'Popconfirm',
-              title: '弹出确认',
-              titleExtra: 'Popconfirm',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popconfirm'
-            },
-            {
-              name: 'Popselect',
-              title: '弹出选择',
-              titleExtra: 'Popselect',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popselect'
-            },
-            {
-              name: 'Progress',
-              title: '进度',
-              titleExtra: 'Progress',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-progress'
-            },
-            {
-              name: 'Result',
-              title: '结果页',
-              titleExtra: 'Result',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-result'
-            },
-            {
-              name: 'Spin',
-              title: '加载',
-              titleExtra: 'Spin',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-spin'
-            },
-            {
-              name: 'Tooltip',
-              title: '弹出提示',
-              titleExtra: 'Tooltip',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tooltip'
-            }
-          ]
-        })
-      // {
-      //   name: '废弃的',
-      //   path: `/${instance.lang}/${instance.theme}/doc` + '/',
-      //   childItems: [
-      //     {
-      //       name: '服务布局',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-nimbus-service-layout'
-      //     }
-      //   ]
-      // },
-      // {
-      //   name: 'Debug',
-      //   childItems: [
-      //     {
-      //       name: 'CancelMarkDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-base-suffix-debug'
-      //     },
-      //     {
-      //       name: 'PopoverDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover-debug'
-      //     },
-      //     {
-      //       name: 'RouterDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-router-debug'
-      //     },
-      //     {
-      //       name: 'ModalDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal-debug'
-      //     },
-      //     {
-      //       name: 'ScrollbarDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-scrollbar-debug'
-      //     },
-      //     {
-      //       name: 'ScrollbarDebug2',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-scrollbar-debug2'
-      //     },
-      //     {
-      //       name: 'DatePickerDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker-debug'
-      //     },
-      //     {
-      //       name: 'BackTopDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top-debug'
-      //     },
-      //     {
-      //       name: 'CascaderDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader-debug'
-      //     },
-      //     {
-      //       name: 'VerticalAlignDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-vertical-align-debug'
-      //     },
-      //     {
-      //       name: 'IconTransitionDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon-transition-debug'
-      //     },
-      //     {
-      //       name: 'SelectDebug',
-      //       path: `/${instance.lang}/${instance.theme}/doc` + '/n-select-debug'
-      //     }
-      //   ]
-      // }
-      ]
-    }
+    ]
   } else {
-    if (env === 'development') {
-      return [
-        {
-          name: 'Naive UI',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/intro'
-        },
-        {
-          name: 'Getting Started',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/start'
-        },
-        // {
-        //   name: 'Develop Guidelines',
-        //   path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/dev-guildlines'
-        // },
-        {
-          name: 'Create Themed Component',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-theme'
-        },
-        appendCounts({
-          name: 'Config Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Config Provider',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-config-provider'
-            },
-            {
-              name: 'Config Consumer',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-config-consumer'
-            },
-            {
-              name: 'Element',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-element'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Layout Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Layout',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-layout'
-            },
-            {
-              name: 'Grid',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-grid'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Common Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Avatar',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-avatar'
-            },
-            {
-              name: 'Button',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-button'
-            },
-            {
-              name: 'Card',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-card'
-            },
-            {
-              name: 'Collapse',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-collapse'
-            },
-            {
-              name: 'Divider',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-divider'
-            },
-            {
-              name: 'Dropdown',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-dropdown'
-            },
-            {
-              name: 'Gradient Text',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-gradient-text'
-            },
-            {
-              name: 'Icon',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-icon'
-            },
-            {
-              name: 'Tag',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tag'
-            },
-            {
-              name: 'Typography',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-typography'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Data Input Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Auto Complete',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-auto-complete'
-            },
-            {
-              name: 'Cascader',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-cascader'
-            },
-            {
-              name: 'Checkbox',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-checkbox'
-            },
-            {
-              name: 'Custom Input (in progress)',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-custom-input'
-            },
-            {
-              name: 'Date Picker',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-date-picker'
-            },
-            {
-              name: 'Form',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-form'
-            },
-            {
-              name: 'Input',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-input'
-            },
-            {
-              name: 'Input Number',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-input-number'
-            },
-            {
-              name: 'Radio',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-radio'
-            },
-            {
-              name: 'Select',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-select'
-            },
-            {
-              name: 'Slider',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-slider'
-            },
-            {
-              name: 'Switch',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-switch'
-            },
-            {
-              name: 'Time Picker',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-time-picker'
-            },
-            {
-              name: 'Transfer',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-transfer'
-            },
-            {
-              name: 'Upload',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-upload'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Data Display Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Code',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-code'
-            },
-            {
-              name: 'Data Table',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-data-table'
-            },
-            {
-              name: 'Descriptions',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-descriptions'
-            },
-            {
-              name: 'Empty',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-empty'
-            },
-            {
-              name: 'List',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-list'
-            },
-            {
-              name: 'Log',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-log'
-            },
-            {
-              name: 'Statistic',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-statistic'
-            },
-            {
-              name: 'Table',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-table'
-            },
-            {
-              name: 'Thing',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-thing'
-            },
-            {
-              name: 'Time',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-time'
-            },
-            {
-              name: 'Timeline',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-timeline'
-            },
-            {
-              name: 'Tree',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tree'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Navigation Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Affix',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-affix'
-            },
-            {
-              name: 'Anchor',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-anchor'
-            },
-            {
-              name: 'Back Top',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-back-top'
-            },
-            {
-              name: 'Breadcrumb',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-breadcrumb'
-            },
-            {
-              name: 'Loading Bar',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-loading-bar'
-            },
-            {
-              name: 'Menu',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-menu'
-            },
-            {
-              name: 'Pagination',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-pagination'
-            },
-            {
-              name: 'Steps',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-steps'
-            },
-            {
-              name: 'Tabs',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tabs'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Feedback Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Alert',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-alert'
-            },
-            {
-              name: 'Badge',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-badge'
-            },
-            {
-              name: 'Confirm',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-confirm'
-            },
-            {
-              name: 'Drawer',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-drawer'
-            },
-            {
-              name: 'Message',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-message'
-            },
-            {
-              name: 'Modal',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-modal'
-            },
-            {
-              name: 'Notification',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-notification'
-            },
-            {
-              name: 'Popover',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popover'
-            },
-            {
-              name: 'Popconfirm',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popconfirm'
-            },
-            {
-              name: 'Popselect',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popselect'
-            },
-            {
-              name: 'Progress',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-progress'
-            },
-            {
-              name: 'Result',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-result'
-            },
-            {
-              name: 'Spin',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-spin'
-            },
-            {
-              name: 'Tooltip',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-tooltip'
-            }
-          ]
-        }),
-        {
-          name: 'Deprecated',
-          path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/',
-          childItems: [
-            {
-              name: 'Nimbus Service Layout',
-              path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-nimbus-service-layout'
-            }
-          ]
-        },
-        ...appendDebugDemos(
+    return [
+      {
+        name: 'Naive UI',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/intro'
+      },
+      {
+        name: 'Getting Started',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/start'
+      },
+      // {
+      //   name: 'Develop Guidelines',
+      //   path: `/${instance.lang}/${instance.theme}/doc` + '/dev-guildlines'
+      // },
+      {
+        name: 'Create Themed Component',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/n-theme'
+      },
+      appendCounts({
+        name: 'Config Components',
+        group: true,
+        childItems: [
           {
-            name: 'Debug',
-            childItems: [
-              {
-                name: 'SuffixDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-base-suffix-debug'
-              },
-              {
-                name: 'PopoverDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-popover-debug'
-              },
-              {
-                name: 'RouterDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-router-debug'
-              },
-              {
-                name: 'ModalDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-modal-debug'
-              },
-              {
-                name: 'ScrollbarDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-scrollbar-debug'
-              },
-              {
-                name: 'ScrollbarDebug2',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-scrollbar-debug2'
-              },
-              {
-                name: 'DatePickerDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-date-picker-debug'
-              },
-              {
-                name: 'BackTopDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-back-top-debug'
-              },
-              {
-                name: 'CascaderDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-cascader-debug'
-              },
-              {
-                name: 'VerticalAlignDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-vertical-align-debug'
-              },
-              {
-                name: 'IconTransitionDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-icon-transition-debug'
-              },
-              {
-                name: 'SelectDebug',
-                path: `/${instance.lang}/${instance.theme}/${instance.mode}/doc` + '/n-select-debug'
-              }
-            ]
-          }, instance.mode)
-      ]
-    } else {
-      return [
-        {
-          name: 'Naive UI',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/intro'
-        },
-        {
-          name: 'Getting Started',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/start'
-        },
-        // {
-        //   name: 'Develop Guidelines',
-        //   path: `/${instance.lang}/${instance.theme}/doc` + '/dev-guildlines'
-        // },
-        {
-          name: 'Create Themed Component',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/n-theme'
-        },
-        appendCounts({
-          name: 'Config Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Config Provider',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-provider'
-            },
-            {
-              name: 'Config Consumer',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-consumer'
-            },
-            {
-              name: 'Element',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-element'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Layout Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Layout',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-layout'
-            },
-            {
-              name: 'Grid',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-grid'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Common Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Avatar',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-avatar'
-            },
-            {
-              name: 'Button',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-button'
-            },
-            {
-              name: 'Card',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-card'
-            },
-            {
-              name: 'Collapse',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-collapse'
-            },
-            {
-              name: 'Divider',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-divider'
-            },
-            {
-              name: 'Dropdown',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-dropdown'
-            },
-            {
-              name: 'Gradient Text',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-gradient-text'
-            },
-            {
-              name: 'Icon',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon'
-            },
-            {
-              name: 'Tag',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tag'
-            },
-            {
-              name: 'Typography',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-typography'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Data Input Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Auto Complete',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-auto-complete'
-            },
-            {
-              name: 'Cascader',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader'
-            },
-            {
-              name: 'Checkbox',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-checkbox'
-            },
-            {
-              name: 'Custom Input (in progress)',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-custom-input'
-            },
-            {
-              name: 'Date Picker',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker'
-            },
-            {
-              name: 'Form',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-form'
-            },
-            {
-              name: 'Input',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-input'
-            },
-            {
-              name: 'Input Number',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-input-number'
-            },
-            {
-              name: 'Radio',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-radio'
-            },
-            {
-              name: 'Select',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-select'
-            },
-            {
-              name: 'Slider',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-slider'
-            },
-            {
-              name: 'Switch',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-switch'
-            },
-            {
-              name: 'Time Picker',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-time-picker'
-            },
-            {
-              name: 'Transfer',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-transfer'
-            },
-            {
-              name: 'Upload',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-upload'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Data Display Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Code',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-code'
-            },
-            {
-              name: 'Data Table',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-data-table'
-            },
-            {
-              name: 'Descriptions',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-descriptions'
-            },
-            {
-              name: 'Empty',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-empty'
-            },
-            {
-              name: 'List',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-list'
-            },
-            {
-              name: 'Log',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-log'
-            },
-            {
-              name: 'Statistic',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-statistic'
-            },
-            {
-              name: 'Table',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-table'
-            },
-            {
-              name: 'Thing',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-thing'
-            },
-            {
-              name: 'Time',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-time'
-            },
-            {
-              name: 'Timeline',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-timeline'
-            },
-            {
-              name: 'Tree',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tree'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Navigation Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Affix',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-affix'
-            },
-            {
-              name: 'Anchor',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-anchor'
-            },
-            {
-              name: 'Back Top',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top'
-            },
-            {
-              name: 'Breadcrumb',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-breadcrumb'
-            },
-            {
-              name: 'Loading Bar',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-loading-bar'
-            },
-            {
-              name: 'Menu',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-menu'
-            },
-            {
-              name: 'Pagination',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-pagination'
-            },
-            {
-              name: 'Steps',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-steps'
-            },
-            {
-              name: 'Tabs',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tabs'
-            }
-          ]
-        }),
-        appendCounts({
-          name: 'Feedback Components',
-          group: true,
-          childItems: [
-            {
-              name: 'Alert',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-alert'
-            },
-            {
-              name: 'Badge',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-badge'
-            },
-            {
-              name: 'Confirm',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-confirm'
-            },
-            {
-              name: 'Drawer',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-drawer'
-            },
-            {
-              name: 'Message',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-message'
-            },
-            {
-              name: 'Modal',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal'
-            },
-            {
-              name: 'Notification',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-notification'
-            },
-            {
-              name: 'Popover',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
-            },
-            {
-              name: 'Popconfirm',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popconfirm'
-            },
-            {
-              name: 'Popselect',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popselect'
-            },
-            {
-              name: 'Progress',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-progress'
-            },
-            {
-              name: 'Result',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-result'
-            },
-            {
-              name: 'Spin',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-spin'
-            },
-            {
-              name: 'Tooltip',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-tooltip'
-            }
-          ]
-        }),
-        {
-          name: 'Deprecated',
-          path: `/${instance.lang}/${instance.theme}/doc` + '/',
-          childItems: [
-            {
-              name: 'Nimbus Service Layout',
-              path: `/${instance.lang}/${instance.theme}/doc` + '/n-nimbus-service-layout'
-            }
-          ]
-        },
-        ...appendDebugDemos(
+            name: 'Config Provider',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-provider'
+          },
           {
-            name: 'Debug',
-            childItems: [
-              {
-                name: 'SuffixDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-base-suffix-debug'
-              },
-              {
-                name: 'PopoverDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover-debug'
-              },
-              {
-                name: 'RouterDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-router-debug'
-              },
-              {
-                name: 'ModalDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal-debug'
-              },
-              {
-                name: 'ScrollbarDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-scrollbar-debug'
-              },
-              {
-                name: 'ScrollbarDebug2',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-scrollbar-debug2'
-              },
-              {
-                name: 'DatePickerDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker-debug'
-              },
-              {
-                name: 'BackTopDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top-debug'
-              },
-              {
-                name: 'CascaderDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader-debug'
-              },
-              {
-                name: 'VerticalAlignDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-vertical-align-debug'
-              },
-              {
-                name: 'IconTransitionDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon-transition-debug'
-              },
-              {
-                name: 'SelectDebug',
-                path: `/${instance.lang}/${instance.theme}/doc` + '/n-select-debug'
-              }
-            ]
-          }, instance.mode)
-      ]
-    }
+            name: 'Config Consumer',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-config-consumer'
+          },
+          {
+            name: 'Element',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-element'
+          }
+        ]
+      }),
+      appendCounts({
+        name: 'Layout Components',
+        group: true,
+        childItems: [
+          {
+            name: 'Layout',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-layout'
+          },
+          {
+            name: 'Grid',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-grid'
+          }
+        ]
+      }),
+      appendCounts({
+        name: 'Common Components',
+        group: true,
+        childItems: [
+          {
+            name: 'Avatar',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-avatar'
+          },
+          {
+            name: 'Button',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-button'
+          },
+          {
+            name: 'Card',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-card'
+          },
+          {
+            name: 'Collapse',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-collapse'
+          },
+          {
+            name: 'Divider',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-divider'
+          },
+          {
+            name: 'Dropdown',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-dropdown'
+          },
+          {
+            name: 'Gradient Text',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-gradient-text'
+          },
+          {
+            name: 'Icon',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon'
+          },
+          {
+            name: 'Tag',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tag'
+          },
+          {
+            name: 'Typography',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-typography'
+          }
+        ]
+      }),
+      appendCounts({
+        name: 'Data Input Components',
+        group: true,
+        childItems: [
+          {
+            name: 'Auto Complete',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-auto-complete'
+          },
+          {
+            name: 'Cascader',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader'
+          },
+          {
+            name: 'Checkbox',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-checkbox'
+          },
+          {
+            name: 'Custom Input (in progress)',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-custom-input'
+          },
+          {
+            name: 'Date Picker',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker'
+          },
+          {
+            name: 'Form',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-form'
+          },
+          {
+            name: 'Input',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-input'
+          },
+          {
+            name: 'Input Number',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-input-number'
+          },
+          {
+            name: 'Radio',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-radio'
+          },
+          {
+            name: 'Select',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-select'
+          },
+          {
+            name: 'Slider',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-slider'
+          },
+          {
+            name: 'Switch',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-switch'
+          },
+          {
+            name: 'Time Picker',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-time-picker'
+          },
+          {
+            name: 'Transfer',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-transfer'
+          },
+          {
+            name: 'Upload',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-upload'
+          }
+        ]
+      }),
+      appendCounts({
+        name: 'Data Display Components',
+        group: true,
+        childItems: [
+          {
+            name: 'Code',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-code'
+          },
+          {
+            name: 'Data Table',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-data-table'
+          },
+          {
+            name: 'Descriptions',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-descriptions'
+          },
+          {
+            name: 'Empty',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-empty'
+          },
+          {
+            name: 'List',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-list'
+          },
+          {
+            name: 'Log',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-log'
+          },
+          {
+            name: 'Statistic',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-statistic'
+          },
+          {
+            name: 'Table',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-table'
+          },
+          {
+            name: 'Thing',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-thing'
+          },
+          {
+            name: 'Time',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-time'
+          },
+          {
+            name: 'Timeline',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-timeline'
+          },
+          {
+            name: 'Tree',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tree'
+          }
+        ]
+      }),
+      appendCounts({
+        name: 'Navigation Components',
+        group: true,
+        childItems: [
+          {
+            name: 'Affix',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-affix'
+          },
+          {
+            name: 'Anchor',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-anchor'
+          },
+          {
+            name: 'Back Top',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top'
+          },
+          {
+            name: 'Breadcrumb',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-breadcrumb'
+          },
+          {
+            name: 'Loading Bar',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-loading-bar'
+          },
+          {
+            name: 'Menu',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-menu'
+          },
+          {
+            name: 'Pagination',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-pagination'
+          },
+          {
+            name: 'Steps',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-steps'
+          },
+          {
+            name: 'Tabs',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tabs'
+          }
+        ]
+      }),
+      appendCounts({
+        name: 'Feedback Components',
+        group: true,
+        childItems: [
+          {
+            name: 'Alert',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-alert'
+          },
+          {
+            name: 'Badge',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-badge'
+          },
+          {
+            name: 'Confirm',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-confirm'
+          },
+          {
+            name: 'Drawer',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-drawer'
+          },
+          {
+            name: 'Message',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-message'
+          },
+          {
+            name: 'Modal',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal'
+          },
+          {
+            name: 'Notification',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-notification'
+          },
+          {
+            name: 'Popover',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
+          },
+          {
+            name: 'Popconfirm',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popconfirm'
+          },
+          {
+            name: 'Popselect',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popselect'
+          },
+          {
+            name: 'Progress',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-progress'
+          },
+          {
+            name: 'Result',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-result'
+          },
+          {
+            name: 'Spin',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-spin'
+          },
+          {
+            name: 'Tooltip',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-tooltip'
+          }
+        ]
+      }),
+      {
+        name: 'Deprecated',
+        path: `/${instance.lang}/${instance.theme}/doc` + '/',
+        childItems: [
+          {
+            name: 'Nimbus Service Layout',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-nimbus-service-layout'
+          }
+        ]
+      },
+      ...appendDebugDemos(
+        {
+          name: 'Debug',
+          childItems: [
+            {
+              name: 'SuffixDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-base-suffix-debug'
+            },
+            {
+              name: 'PopoverDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover-debug'
+            },
+            {
+              name: 'RouterDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-router-debug'
+            },
+            {
+              name: 'ModalDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-modal-debug'
+            },
+            {
+              name: 'ScrollbarDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-scrollbar-debug'
+            },
+            {
+              name: 'ScrollbarDebug2',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-scrollbar-debug2'
+            },
+            {
+              name: 'DatePickerDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-date-picker-debug'
+            },
+            {
+              name: 'BackTopDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-back-top-debug'
+            },
+            {
+              name: 'CascaderDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-cascader-debug'
+            },
+            {
+              name: 'VerticalAlignDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-vertical-align-debug'
+            },
+            {
+              name: 'IconTransitionDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-icon-transition-debug'
+            },
+            {
+              name: 'SelectDebug',
+              path: `/${instance.lang}/${instance.theme}/doc` + '/n-select-debug'
+            }
+          ]
+        }, instance.mode)
+    ]
   }
 }
diff --git a/demo/store.js b/demo/store.js
new file mode 100644
index 000000000..4fc6ab796
--- /dev/null
+++ b/demo/store.js
@@ -0,0 +1,7 @@
+export const state = {
+  mode: localStorage.getItem('mode')
+}
+
+export function setState (mode) {
+  state.mode = mode
+}
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index a0cf8582a..0415df31c 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -57,6 +57,7 @@
 
 <script>
 import mdCode from '../../src/_icons/md-code'
+import { state } from '../store'
 
 export default {
   components: {
@@ -74,12 +75,13 @@ export default {
       controller: {},
       isShow: true,
       name: '',
-      isDebug: false
+      isDebug: false,
+      state: state
     }
   },
   computed: {
     mode () {
-      return this.$route.params.mode
+      return this.state.mode
     }
   },
   watch: {