From 8e633bb3afa5c6b1a446fea173a4766b69e4bf17 Mon Sep 17 00:00:00 2001
From: HQ-Lin <a154571896@gmail.com>
Date: Fri, 20 May 2022 14:20:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../button/{button_en.md => button.en-US.md}  |   0
 site/plugin-tdoc/demo.js                      |   4 +-
 site/plugin-tdoc/md-to-vue.js                 |   3 +-
 site/plugin-tdoc/transforms.js                |  39 +-
 site/site.config.mjs                          | 904 ++++++++++--------
 site/src/App.vue                              |  11 -
 site/src/components/page.vue                  |  12 +-
 site/src/components/reload-prompt.vue         |  94 --
 site/src/routes.js                            |  15 +-
 9 files changed, 537 insertions(+), 545 deletions(-)
 rename examples/button/{button_en.md => button.en-US.md} (100%)
 delete mode 100644 site/src/components/reload-prompt.vue

diff --git a/examples/button/button_en.md b/examples/button/button.en-US.md
similarity index 100%
rename from examples/button/button_en.md
rename to examples/button/button.en-US.md
diff --git a/site/plugin-tdoc/demo.js b/site/plugin-tdoc/demo.js
index 269aaf7df..476392424 100644
--- a/site/plugin-tdoc/demo.js
+++ b/site/plugin-tdoc/demo.js
@@ -4,11 +4,11 @@ import path from 'path';
 export default function renderDemo(md, container) {
   md.use(container, 'demo', {
     validate(params) {
-      return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+      return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?$/);
     },
     render(tokens, idx) {
       if (tokens[idx].nesting === 1) {
-        const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+        const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-\.]+)(\s+(.+?))?$/);
         const [, demoPath, componentName = ''] = match;
         const demoPathOnlyLetters = demoPath.replace(/[^a-zA-Z\d]/g, '');
         const demoName = path.basename(demoPath);
diff --git a/site/plugin-tdoc/md-to-vue.js b/site/plugin-tdoc/md-to-vue.js
index 6e6d18291..3d0d2cdae 100644
--- a/site/plugin-tdoc/md-to-vue.js
+++ b/site/plugin-tdoc/md-to-vue.js
@@ -145,7 +145,7 @@ function customRender({ source, file, md }) {
   };
 
   // md filename
-  const reg = file.match(/examples\/(\w+-?\w+)\/(\w+-?\w+)\.md/);
+  const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
   const componentName = reg && reg[1];
 
   // split md
@@ -164,7 +164,6 @@ function customRender({ source, file, md }) {
     designMd: '<td-doc-empty></td-doc-empty>',
   };
 
-
   // 渲染 live demo
   if (pageData.usage && pageData.isComponent) {
     const usageObj = compileUsage({
diff --git a/site/plugin-tdoc/transforms.js b/site/plugin-tdoc/transforms.js
index fa7ff8930..7c4c73d8c 100644
--- a/site/plugin-tdoc/transforms.js
+++ b/site/plugin-tdoc/transforms.js
@@ -10,31 +10,44 @@ let demoCodesImports = {};
 export default {
   before({ source, file }) {
     const resourceDir = path.dirname(file);
-    const reg = file.match(/examples\/(\w+-?\w+)\/(\w+-?\w+)\.md/);
-    const name = reg && reg[1];
+    const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+    const fileName = reg && reg[0];
+    const componentName = reg && reg[1];
+    const localeName = reg && reg[2];
     demoImports = {};
     demoCodesImports = {};
 
     // 统一换成 common 公共文档内容
-    if (name && source.includes(':: BASE_DOC ::')) {
-      const docPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${name}.md`);
-      if (fs.existsSync(docPath)) {
-        const baseDoc = fs.readFileSync(docPath, 'utf-8');
-        source = source.replace(':: BASE_DOC ::', baseDoc);
+    if (fileName && source.includes(':: BASE_DOC ::')) {
+      const localeDocPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${fileName}`);
+      const defaultDocPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${componentName}.md`);
+      let baseDoc = '';
+      if (fs.existsSync(localeDocPath)) {
+        // 优先载入语言版本
+        baseDoc = fs.readFileSync(localeDocPath, 'utf-8');
+      } else if (fs.existsSync(defaultDocPath)) {
+        // 回退中文默认版本
+        baseDoc = fs.readFileSync(defaultDocPath, 'utf-8');
       } else {
-        console.error(`未找到 ${docPath} 文件`);
+        console.error(`未找到 ${defaultDocPath} 文件`);
       }
+      source = source.replace(':: BASE_DOC ::', baseDoc);
     }
 
     // 替换成对应 demo 文件
     source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
-      const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`);
-      if (!fs.existsSync(demoPath)) {
-        console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 demos/${demoFileName}.vue 示例!`);
+      const defaultDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`);
+      const localeDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.${localeName}.vue`);
+      // localeDemo 优先级最高
+      if (fs.existsSync(localeDemoPath))
+        return `\n::: demo demos/${demoFileName}.${localeName} ${componentName}\n:::\n`;
+
+      if (!fs.existsSync(defaultDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 demos/${demoFileName}.vue 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }
 
-      return `\n::: demo demos/${demoFileName} ${name}\n:::\n`;
+      return `\n::: demo demos/${demoFileName} ${componentName}\n:::\n`;
     });
 
     source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
@@ -65,7 +78,7 @@ export default {
       demoDefsStr,
       demoCodesDefsStr,
       demoInstallStr,
-      demoCodeInstallStr
+      demoCodeInstallStr,
     });
 
     return sfc;
diff --git a/site/site.config.mjs b/site/site.config.mjs
index 991f081b5..028cbf336 100644
--- a/site/site.config.mjs
+++ b/site/site.config.mjs
@@ -1,411 +1,495 @@
 /* eslint-disable */
-export default {
-  docs: [
-    {
-      title: '开始',
-      type: 'doc', // 普通文档
-      children: [
-        {
-          title: '快速开始',
-          name: 'getting-started',
-          path: '/vue/getting-started',
-          component: () => import('@/site/docs/getting-started.md'),
-        },
-        {
-          title: '最佳实践',
-          name: 'quick-start',
-          path: '/vue/quick-start',
-          component: () => import('@/site/docs/starter.md'),
-        },
-        {
-          title: '更新日志',
-          name: 'changelog',
-          path: '/vue/changelog',
-          component: () => import('@/CHANGELOG.md'),
-        },
-        {
-          title: '组件概览',
-          name: 'overview',
-          path: '/vue/overview',
-          component: () => import('@common/docs/web/overview.md'),
-        },
-      ],
-    },
-    {
-      title: '全局配置',
-      name: 'configs',
-      children: [
-        {
-          title: '全局特性配置',
-          name: 'config',
-          path: '/vue/config',
-          component: () => import('@/examples/config-provider/config-provider.md'),
-        },
-        {
-          title: '自定义主题',
-          name: 'custom-theme',
-          path: '/vue/custom-theme',
-          component: () => import('@common/theme.md'),
-        },
-        {
-          title: '暗黑模式',
-          name: 'dark-mode',
-          path: '/vue/dark-mode',
-          component: () => import('@common/dark-mode.md'),
-        },
-      ],
-    },
-    {
-      title: '基础',
-      type: 'component', // 组件文档
-      children: [
-        {
-          title: 'Button 按钮',
-          name: 'button',
-          path: '/vue/components/button',
-          component: () => import('@/examples/button/button.md'),
-        },
-        {
-          title: 'Divider 分割线',
-          name: 'divider',
-          path: '/vue/components/divider',
-          component: () => import('@/examples/divider/divider.md'),
-        },
-        {
-          title: 'Icon 图标',
-          name: 'icon',
-          path: '/vue/components/icon',
-          component: () => import('@/examples/icon/icon.md'),
-        },
-      ],
-    },
-    {
-      title: '布局',
-      type: 'component',
-      children: [
-        {
-          title: 'Grid 栅格',
-          name: 'grid',
-          path: '/vue/components/grid',
-          component: () => import('@/examples/grid/grid.md'),
-        },
-        {
-          title: 'Layout 布局',
-          name: 'layout',
-          path: '/vue/components/layout',
-          component: () => import('@/examples/layout/layout.md'),
-        },
-      ],
-    },
-    {
-      title: '导航',
-      type: 'component',
-      children: [
-        {
-          title: 'Affix 固钉',
-          name: 'affix',
-          path: '/vue/components/affix',
-          component: () => import('@/examples/affix/affix.md'),
-        },
-        {
-          title: 'Anchor 锚点',
-          name: 'anchor',
-          path: '/vue/components/anchor',
-          component: () => import('@/examples/anchor/anchor.md'),
-        },
-        {
-          title: 'Breadcrumb 面包屑',
-          name: 'breadcrumb',
-          path: '/vue/components/breadcrumb',
-          component: () => import('@/examples/breadcrumb/breadcrumb.md'),
-        },
-        {
-          title: 'Dropdown 下拉菜单',
-          name: 'dropdown',
-          path: '/vue/components/dropdown',
-          component: () => import('@/examples/dropdown/dropdown.md'),
-        },
-        {
-          title: 'Menu 导航菜单',
-          name: 'menu',
-          path: '/vue/components/menu',
-          component: () => import('@/examples/menu/menu.md'),
-        },
-        {
-          title: 'Pagination 分页',
-          name: 'pagination',
-          path: '/vue/components/pagination',
-          component: () => import('@/examples/pagination/pagination.md'),
-        },
-        {
-          title: 'Steps 步骤条',
-          name: 'steps',
-          path: '/vue/components/steps',
-          component: () => import('@/examples/steps/steps.md'),
-        },
-        {
-          title: 'Tabs 选项卡',
-          name: 'tabs',
-          path: '/vue/components/tabs',
-          component: () => import('@/examples/tabs/tabs.md'),
-        },
-      ],
-    },
-    {
-      title: '输入',
-      type: 'component', // 组件文档
-      children: [
-        {
-          title: 'Cascader 级联组件',
-          name: 'cascader',
-          path: '/vue/components/cascader',
-          component: () => import('@/examples/cascader/cascader.md'),
-        },
-        {
-          title: 'Checkbox 多选框',
-          name: 'checkbox',
-          path: '/vue/components/checkbox',
-          component: () => import('@/examples/checkbox/checkbox.md'),
-        },
-        {
-          title: 'DatePicker 日期选择器',
-          name: 'date-picker',
-          path: '/vue/components/date-picker',
-          component: () => import('@/examples/date-picker/date-picker.md'),
-        },
-        {
-          title: 'Form 表单',
-          name: 'form',
-          path: '/vue/components/form',
-          component: () => import('@/examples/form/form.md'),
-        },
-        {
-          title: 'Input 输入框',
-          name: 'input',
-          path: '/vue/components/input',
-          component: () => import('@/examples/input/input.md'),
-        },
-        {
-          title: 'InputNumber 数字输入框',
-          name: 'input-number',
-          path: '/vue/components/input-number',
-          component: () => import('@/examples/input-number/input-number.md'),
-        },
-        {
-          title: 'TagInput 标签输入框',
-          name: 'tag-input',
-          docType: 'form',
-          path: '/vue/components/tag-input',
-          component: () => import('@/examples/tag-input/tag-input.md'),
-        },
-        {
-          title: 'Radio 单选框',
-          name: 'radio',
-          path: '/vue/components/radio',
-          component: () => import('@/examples/radio/radio.md'),
-        },
-        {
-          title: 'Select 选择器',
-          name: 'select',
-          path: '/vue/components/select',
-          component: () => import('@/examples/select/select.md'),
-        },
-        {
-          title: 'SelectInput 筛选器输入框',
-          name: 'select-input',
-          docType: 'form',
-          path: '/vue/components/select-input',
-          component: () => import('@/examples/select-input/select-input.md'),
-        },
-        {
-          title: 'Slider 滑块',
-          name: 'slider',
-          path: '/vue/components/slider',
-          component: () => import('@/examples/slider/slider.md'),
-        },
-        {
-          title: 'Switch 开关',
-          name: 'switch',
-          path: '/vue/components/switch',
-          component: () => import('@/examples/switch/switch.md'),
-        },
-        {
-          title: 'Textarea 多行文本框',
-          name: 'textarea',
-          path: '/vue/components/textarea',
-          component: () => import('@/examples/textarea/textarea.md'),
-        },
-        {
-          title: 'Transfer 穿梭框',
-          name: 'transfer',
-          path: '/vue/components/transfer',
-          component: () => import('@/examples/transfer/transfer.md'),
-        },
-        {
-          title: 'TimePicker 时间选择器',
-          name: 'time-picker',
-          path: '/vue/components/time-picker',
-          component: () => import('@/examples/time-picker/time-picker.md'),
-        },
-        {
-          title: 'TreeSelect 树选择',
-          name: 'tree-select',
-          path: '/vue/components/tree-select',
-          component: () => import('@/examples/tree-select/tree-select.md'),
-        },
-        {
-          title: 'Upload 上传',
-          name: 'upload',
-          path: '/vue/components/upload',
-          component: () => import('@/examples/upload/upload.md'),
-        },
-      ],
-    },
-    {
-      title: '数据展示',
-      type: 'component', // 组件文档
-      children: [
-        {
-          title: 'Avatar 头像',
-          name: 'avatar',
-          path: '/vue/components/avatar',
-          component: () => import('@/examples/avatar/avatar.md'),
-        },
-        {
-          title: 'Badge 徽标',
-          name: 'badge',
-          path: '/vue/components/badge',
-          component: () => import('@/examples/badge/badge.md'),
-        },
-        {
-          title: 'Calendar 日历',
-          name: 'calendar',
-          path: '/vue/components/calendar',
-          component: () => import('@/examples/calendar/calendar.md'),
-        },
-        {
-          title: 'Card 卡片',
-          name: 'card',
-          docType: 'data',
-          path: '/vue/components/card',
-          component: () => import('@/examples/card/card.md'),
-        },
-        {
-          title: 'Collapse 折叠面板',
-          name: 'collapse',
-          docType: 'data',
-          path: '/vue/components/collapse',
-          component: () => import('@/examples/collapse/collapse.md')
-        },
-        {
-          title: 'Comment 评论',
-          name: 'comment',
-          path: '/vue/components/comment',
-          component: () => import('@/examples/comment/comment.md'),
-        },
-        {
-          title: 'List 列表',
-          name: 'list',
-          path: '/vue/components/list',
-          component: () => import('@/examples/list/list.md'),
-        },
-        {
-          title: 'Loading 加载',
-          name: 'loading',
-          path: '/vue/components/loading',
-          component: () => import('@/examples/loading/loading.md'),
-        },
-        {
-          title: 'Progress 进度条',
-          name: 'progress',
-          path: '/vue/components/progress',
-          component: () => import('@/examples/progress/progress.md'),
-        },
-        {
-          title: 'Skeleton 骨架屏',
-          name: 'skeleton',
-          path: '/vue/components/skeleton',
-          component: () => import('@/examples/skeleton/skeleton.md'),
-        },
-        {
-          title: 'Swiper 轮播框',
-          name: 'swiper',
-          path: '/vue/components/swiper',
-          component: () => import('@/examples/swiper/swiper.md'),
-        },
-        {
-          title: 'Table 表格',
-          name: 'table',
-          path: '/vue/components/table',
-          component: () => import('@/examples/table/table.md'),
-        },
-        {
-          title: 'Tag 标签',
-          name: 'tag',
-          path: '/vue/components/tag',
-          component: () => import('@/examples/tag/tag.md'),
-        },
-        {
-          title: 'Tooltip 文字提示',
-          name: 'tooltip',
-          path: '/vue/components/tooltip',
-          component: () => import('@/examples/tooltip/tooltip.md'),
-        },
-        {
-          title: 'Tree 树',
-          name: 'tree',
-          path: '/vue/components/tree',
-          component: () => import('@/examples/tree/tree.md'),
-        },
-      ],
-    },
-    {
-      title: '消息提醒',
-      type: 'component', // 组件文档
-      children: [
-        {
-          title: 'Alert 警告提醒',
-          name: 'alert',
-          path: '/vue/components/alert',
-          component: () => import('@/examples/alert/alert.md'),
-        },
-        {
-          title: 'Dialog 对话框',
-          name: 'dialog',
-          path: '/vue/components/dialog',
-          component: () => import('@/examples/dialog/dialog.md'),
-        },
-        {
-          title: 'Drawer 抽屉',
-          name: 'drawer',
-          path: '/vue/components/drawer',
-          component: () => import('@/examples/drawer/drawer.md'),
-        },
-        {
-          title: 'Message 全局提示',
-          name: 'message',
-          path: '/vue/components/message',
-          component: () => import('@/examples/message/message.md'),
-        },
-        {
-          title: 'Notification 消息通知',
-          name: 'notification',
-          path: '/vue/components/notification',
-          component: () => import('@/examples/notification/notification.md'),
-        },
-        {
-          title: 'Popconfirm 气泡确认框',
-          name: 'popconfirm',
-          path: '/vue/components/popconfirm',
-          component: () => import('@/examples/popconfirm/popconfirm.md'),
-        },
-        {
-          title: 'Popup 弹出层',
-          name: 'popup',
-          path: '/vue/components/popup',
-          component: () => import('@/examples/popup/popup.md'),
-        },
-      ],
-    },
-  ],
-};
+const docs = [
+  {
+    title: '开始',
+    titleEn: 'Start',
+    type: 'doc', // 普通文档
+    children: [
+      {
+        title: '快速开始',
+        titleEn: 'Quick Start',
+        name: 'getting-started',
+        path: '/vue/getting-started',
+        component: () => import('@/site/docs/getting-started.md'),
+      },
+      {
+        title: '最佳实践',
+        titleEn: 'Best Practice',
+        name: 'quick-start',
+        path: '/vue/quick-start',
+        component: () => import('@/site/docs/starter.md'),
+      },
+      {
+        title: '更新日志',
+        titleEn: 'CHANGELOG',
+        name: 'changelog',
+        path: '/vue/changelog',
+        component: () => import('@/CHANGELOG.md'),
+      },
+      {
+        title: '组件概览',
+        titleEn: 'Component overview',
+        name: 'overview',
+        path: '/vue/overview',
+        component: () => import('@common/docs/web/overview.md'),
+      },
+    ],
+  },
+  {
+    title: '全局配置',
+    titleEn: 'Global Config',
+    type: 'doc',
+    children: [
+      {
+        title: '全局特性配置',
+        titleEn: 'Config',
+        name: 'config',
+        path: '/vue/config',
+        component: () => import('@/examples/config-provider/config-provider.md'),
+      },
+      {
+        title: '自定义主题',
+        titleEn: 'Custom theme',
+        name: 'custom-theme',
+        path: '/vue/custom-theme',
+        component: () => import('@common/theme.md'),
+      },
+      {
+        title: '暗黑模式',
+        titleEn: 'Dark Mode',
+        name: 'dark-mode',
+        path: '/vue/dark-mode',
+        component: () => import('@common/dark-mode.md'),
+      },
+    ],
+  },
+  {
+    title: '基础',
+    titleEn: 'Base',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'Button 按钮',
+        titleEn: 'Button',
+        name: 'button',
+        path: '/vue/components/button',
+        component: () => import('@/examples/button/button.md'),
+        componentEn: () => import('@/examples/button/button.en-US.md'),
+      },
+      {
+        title: 'Divider 分割线',
+        titleEn: 'Divider',
+        name: 'divider',
+        path: '/vue/components/divider',
+        component: () => import('@/examples/divider/divider.md'),
+      },
+      {
+        title: 'Icon 图标',
+        titleEn: 'Icon',
+        name: 'icon',
+        path: '/vue/components/icon',
+        component: () => import('@/examples/icon/icon.md'),
+      },
+    ],
+  },
+  {
+    title: '布局',
+    titleEn: 'Layout',
+    type: 'component',
+    children: [
+      {
+        title: 'Grid 栅格',
+        titleEn: 'Grid',
+        name: 'grid',
+        path: '/vue/components/grid',
+        component: () => import('@/examples/grid/grid.md'),
+      },
+      {
+        title: 'Layout 布局',
+        titleEn: 'Layout',
+        name: 'layout',
+        path: '/vue/components/layout',
+        component: () => import('@/examples/layout/layout.md'),
+      },
+    ],
+  },
+  {
+    title: '导航',
+    titleEn: 'Navigation',
+    type: 'component',
+    children: [
+      {
+        title: 'Affix 固钉',
+        titleEn: 'Affix',
+        name: 'affix',
+        path: '/vue/components/affix',
+        component: () => import('@/examples/affix/affix.md'),
+      },
+      {
+        title: 'Anchor 锚点',
+        titleEn: 'Anchor',
+        name: 'anchor',
+        path: '/vue/components/anchor',
+        component: () => import('@/examples/anchor/anchor.md'),
+      },
+      {
+        title: 'Breadcrumb 面包屑',
+        titleEn: 'Breadcrumb',
+        name: 'breadcrumb',
+        path: '/vue/components/breadcrumb',
+        component: () => import('@/examples/breadcrumb/breadcrumb.md'),
+      },
+      {
+        title: 'Dropdown 下拉菜单',
+        titleEn: 'Dropdown',
+        name: 'dropdown',
+        path: '/vue/components/dropdown',
+        component: () => import('@/examples/dropdown/dropdown.md'),
+      },
+      {
+        title: 'Menu 导航菜单',
+        titleEn: 'Menu',
+        name: 'menu',
+        path: '/vue/components/menu',
+        component: () => import('@/examples/menu/menu.md'),
+      },
+      {
+        title: 'Pagination 分页',
+        titleEn: 'Pagination',
+        name: 'pagination',
+        path: '/vue/components/pagination',
+        component: () => import('@/examples/pagination/pagination.md'),
+      },
+      {
+        title: 'Steps 步骤条',
+        titleEn: 'Steps',
+        name: 'steps',
+        path: '/vue/components/steps',
+        component: () => import('@/examples/steps/steps.md'),
+      },
+      {
+        title: 'Tabs 选项卡',
+        titleEn: 'Tabs',
+        name: 'tabs',
+        path: '/vue/components/tabs',
+        component: () => import('@/examples/tabs/tabs.md'),
+      },
+    ],
+  },
+  {
+    title: '输入',
+    titleEn: 'Input',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'Cascader 级联组件',
+        titleEn: 'Cascader',
+        name: 'cascader',
+        path: '/vue/components/cascader',
+        component: () => import('@/examples/cascader/cascader.md'),
+      },
+      {
+        title: 'Checkbox 多选框',
+        titleEn: 'Checkbox',
+        name: 'checkbox',
+        path: '/vue/components/checkbox',
+        component: () => import('@/examples/checkbox/checkbox.md'),
+      },
+      {
+        title: 'DatePicker 日期选择器',
+        titleEn: 'DatePicker',
+        name: 'date-picker',
+        path: '/vue/components/date-picker',
+        component: () => import('@/examples/date-picker/date-picker.md'),
+      },
+      {
+        title: 'Form 表单',
+        titleEn: 'Form',
+        name: 'form',
+        path: '/vue/components/form',
+        component: () => import('@/examples/form/form.md'),
+      },
+      {
+        title: 'Input 输入框',
+        titleEn: 'Input',
+        name: 'input',
+        path: '/vue/components/input',
+        component: () => import('@/examples/input/input.md'),
+      },
+      {
+        title: 'InputNumber 数字输入框',
+        titleEn: 'InputNumber',
+        name: 'input-number',
+        path: '/vue/components/input-number',
+        component: () => import('@/examples/input-number/input-number.md'),
+      },
+      {
+        title: 'TagInput 标签输入框',
+        titleEn: 'TagInput',
+        name: 'tag-input',
+        docType: 'form',
+        path: '/vue/components/tag-input',
+        component: () => import('@/examples/tag-input/tag-input.md'),
+      },
+      {
+        title: 'Radio 单选框',
+        titleEn: 'Radio',
+        name: 'radio',
+        path: '/vue/components/radio',
+        component: () => import('@/examples/radio/radio.md'),
+      },
+      {
+        title: 'Select 选择器',
+        titleEn: 'Select',
+        name: 'select',
+        path: '/vue/components/select',
+        component: () => import('@/examples/select/select.md'),
+      },
+      {
+        title: 'SelectInput 筛选器输入框',
+        titleEn: 'SelectInput',
+        name: 'select-input',
+        docType: 'form',
+        path: '/vue/components/select-input',
+        component: () => import('@/examples/select-input/select-input.md'),
+      },
+      {
+        title: 'Slider 滑块',
+        titleEn: 'Slider',
+        name: 'slider',
+        path: '/vue/components/slider',
+        component: () => import('@/examples/slider/slider.md'),
+      },
+      {
+        title: 'Switch 开关',
+        titleEn: 'Switch',
+        name: 'switch',
+        path: '/vue/components/switch',
+        component: () => import('@/examples/switch/switch.md'),
+      },
+      {
+        title: 'Textarea 多行文本框',
+        titleEn: 'Textarea',
+        name: 'textarea',
+        path: '/vue/components/textarea',
+        component: () => import('@/examples/textarea/textarea.md'),
+      },
+      {
+        title: 'Transfer 穿梭框',
+        titleEn: 'Transfer',
+        name: 'transfer',
+        path: '/vue/components/transfer',
+        component: () => import('@/examples/transfer/transfer.md'),
+      },
+      {
+        title: 'TimePicker 时间选择器',
+        titleEn: 'TimePicker',
+        name: 'time-picker',
+        path: '/vue/components/time-picker',
+        component: () => import('@/examples/time-picker/time-picker.md'),
+      },
+      {
+        title: 'TreeSelect 树选择',
+        titleEn: 'TreeSelect',
+        name: 'tree-select',
+        path: '/vue/components/tree-select',
+        component: () => import('@/examples/tree-select/tree-select.md'),
+      },
+      {
+        title: 'Upload 上传',
+        titleEn: 'Upload',
+        name: 'upload',
+        path: '/vue/components/upload',
+        component: () => import('@/examples/upload/upload.md'),
+      },
+    ],
+  },
+  {
+    title: '数据展示',
+    titleEn: 'Data Display',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'Avatar 头像',
+        titleEn: 'Avatar',
+        name: 'avatar',
+        path: '/vue/components/avatar',
+        component: () => import('@/examples/avatar/avatar.md'),
+      },
+      {
+        title: 'Badge 徽标',
+        titleEn: 'Badge',
+        name: 'badge',
+        path: '/vue/components/badge',
+        component: () => import('@/examples/badge/badge.md'),
+      },
+      {
+        title: 'Calendar 日历',
+        titleEn: 'Calendar',
+        name: 'calendar',
+        path: '/vue/components/calendar',
+        component: () => import('@/examples/calendar/calendar.md'),
+      },
+      {
+        title: 'Card 卡片',
+        titleEn: 'Card',
+        name: 'card',
+        docType: 'data',
+        path: '/vue/components/card',
+        component: () => import('@/examples/card/card.md'),
+      },
+      {
+        title: 'Collapse 折叠面板',
+        titleEn: 'Collapse',
+        name: 'collapse',
+        docType: 'data',
+        path: '/vue/components/collapse',
+        component: () => import('@/examples/collapse/collapse.md')
+      },
+      {
+        title: 'Comment 评论',
+        titleEn: 'Comment',
+        name: 'comment',
+        path: '/vue/components/comment',
+        component: () => import('@/examples/comment/comment.md'),
+      },
+      {
+        title: 'List 列表',
+        titleEn: 'List',
+        name: 'list',
+        path: '/vue/components/list',
+        component: () => import('@/examples/list/list.md'),
+      },
+      {
+        title: 'Loading 加载',
+        titleEn: 'Loading',
+        name: 'loading',
+        path: '/vue/components/loading',
+        component: () => import('@/examples/loading/loading.md'),
+      },
+      {
+        title: 'Progress 进度条',
+        titleEn: 'Progress',
+        name: 'progress',
+        path: '/vue/components/progress',
+        component: () => import('@/examples/progress/progress.md'),
+      },
+      {
+        title: 'Skeleton 骨架屏',
+        titleEn: 'Skeleton',
+        name: 'skeleton',
+        path: '/vue/components/skeleton',
+        component: () => import('@/examples/skeleton/skeleton.md'),
+      },
+      {
+        title: 'Swiper 轮播框',
+        titleEn: 'Swiper',
+        name: 'swiper',
+        path: '/vue/components/swiper',
+        component: () => import('@/examples/swiper/swiper.md'),
+      },
+      {
+        title: 'Table 表格',
+        titleEn: 'Table',
+        name: 'table',
+        path: '/vue/components/table',
+        component: () => import('@/examples/table/table.md'),
+      },
+      {
+        title: 'Tag 标签',
+        titleEn: 'Tag',
+        name: 'tag',
+        path: '/vue/components/tag',
+        component: () => import('@/examples/tag/tag.md'),
+      },
+      {
+        title: 'Tooltip 文字提示',
+        titleEn: 'Tooltip',
+        name: 'tooltip',
+        path: '/vue/components/tooltip',
+        component: () => import('@/examples/tooltip/tooltip.md'),
+      },
+      {
+        title: 'Tree 树',
+        titleEn: 'Tree',
+        name: 'tree',
+        path: '/vue/components/tree',
+        component: () => import('@/examples/tree/tree.md'),
+      },
+    ],
+  },
+  {
+    title: '消息提醒',
+    titleEn: 'Notifications',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'Alert 警告提醒',
+        titleEn: 'Alert',
+        name: 'alert',
+        path: '/vue/components/alert',
+        component: () => import('@/examples/alert/alert.md'),
+      },
+      {
+        title: 'Dialog 对话框',
+        titleEn: 'Dialog',
+        name: 'dialog',
+        path: '/vue/components/dialog',
+        component: () => import('@/examples/dialog/dialog.md'),
+      },
+      {
+        title: 'Drawer 抽屉',
+        titleEn: 'Drawer',
+        name: 'drawer',
+        path: '/vue/components/drawer',
+        component: () => import('@/examples/drawer/drawer.md'),
+      },
+      {
+        title: 'Message 全局提示',
+        titleEn: 'Message',
+        name: 'message',
+        path: '/vue/components/message',
+        component: () => import('@/examples/message/message.md'),
+      },
+      {
+        title: 'Notification 消息通知',
+        titleEn: 'Notification',
+        name: 'notification',
+        path: '/vue/components/notification',
+        component: () => import('@/examples/notification/notification.md'),
+      },
+      {
+        title: 'Popconfirm 气泡确认框',
+        titleEn: 'Popconfirm',
+        name: 'popconfirm',
+        path: '/vue/components/popconfirm',
+        component: () => import('@/examples/popconfirm/popconfirm.md'),
+      },
+      {
+        title: 'Popup 弹出层',
+        titleEn: 'Popup',
+        name: 'popup',
+        path: '/vue/components/popup',
+        component: () => import('@/examples/popup/popup.md'),
+      },
+    ],
+  },
+];
+
+const enDocs = docs.map(doc => {
+  return {
+    ...doc,
+    title: doc.titleEn,
+    children: doc?.children?.map(child => {
+      return {
+        title: child.titleEn,
+        name: `${child.name}-en`,
+        path: `${child.path}-en`,
+        meta: { lang: 'en' },
+        component: child.componentEn,
+      }
+    }),
+  };
+})
+
+export default { docs, enDocs };
diff --git a/site/src/App.vue b/site/src/App.vue
index 21051e36f..c8600cdd0 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -1,20 +1,9 @@
 <template>
   <div>
     <router-view />
-    <reload-prompt />
   </div>
 </template>
 
-<script>
-import ReloadPrompt from './components/reload-prompt.vue';
-
-export default {
-  components: {
-    ReloadPrompt,
-  },
-};
-</script>
-
 <style lang="less">
 div[slot='action'] {
   display: inline-flex;
diff --git a/site/src/components/page.vue b/site/src/components/page.vue
index 20c79509c..ea7373c42 100644
--- a/site/src/components/page.vue
+++ b/site/src/components/page.vue
@@ -19,7 +19,12 @@ import siteConfig from '../../site.config';
 import packageJson from '@/package.json';
 
 const currentVersion = packageJson.version.replace(/\./g, '_');
-const { docs: routerList } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
+const { docs, enDocs } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
+
+const docsMap = {
+  zh: docs,
+  en: enDocs,
+};
 
 const registryUrl = 'https://mirrors.tencent.com/npm/tdesign-vue';
 
@@ -37,11 +42,14 @@ export default {
       const { loaded } = this;
       return { visibility: loaded ? 'visible' : 'hidden' };
     },
+    lang() {
+      return this.$route?.meta?.lang || 'zh';
+    },
   },
 
   mounted() {
     this.$refs.tdHeader.framework = 'vue';
-    this.$refs.tdDocAside.routerList = routerList;
+    this.$refs.tdDocAside.routerList = docsMap[this.lang];
     this.$refs.tdDocAside.onchange = ({ detail }) => {
       if (this.$route.path === detail) return;
       this.loaded = false;
diff --git a/site/src/components/reload-prompt.vue b/site/src/components/reload-prompt.vue
deleted file mode 100644
index 311d7e4b4..000000000
--- a/site/src/components/reload-prompt.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="ReloadPrompt-container">
-    <div v-if="offlineReady || needRefresh" class="ReloadPrompt-toast">
-      <div class="ReloadPrompt-toast-message">
-        <span v-if="offlineReady">App ready to work offline</span>
-        <span v-else>New content available, click on reload button to update.</span>
-      </div>
-      <t-button v-if="needRefresh" size="small" :style="{ 'margin-right': '8px' }" @click="updateServiceWorker(true)">
-        Reload
-      </t-button>
-      <t-button theme="default" size="small" @click="close"> Close </t-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'reload-prompt',
-
-  data() {
-    return {
-      updateSW: undefined,
-      offlineReady: false,
-      needRefresh: false,
-    };
-  },
-
-  async mounted() {
-    // eslint-disable-next-line
-    const self = this;
-    try {
-      const { registerSW } = await import('virtual:pwa-register');
-      self.updateSW = registerSW({
-        immediate: true,
-        onOfflineReady() {
-          self.offlineReady = true;
-          self.onOfflineReadyFn();
-        },
-        onNeedRefresh() {
-          self.needRefresh = true;
-          self.onNeedRefreshFn();
-        },
-        onRegistered(swRegistration) {
-          swRegistration && self.handleSWManualUpdates(swRegistration);
-        },
-        onRegisterError(e) {
-          self.handleSWRegisterError(e);
-        },
-      });
-    } catch {
-      console.log('PWA disabled.');
-    }
-  },
-
-  methods: {
-    close() {
-      this.offlineReady = false;
-      this.needRefresh = false;
-    },
-    onOfflineReadyFn() {
-      console.log('onOfflineReady');
-    },
-    onNeedRefreshFn() {
-      console.log('onNeedRefresh');
-    },
-    updateServiceWorker() {
-      this.updateSW && this.updateSW(true);
-    },
-    handleSWManualUpdates() {},
-    handleSWRegisterError() {},
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ReloadPrompt-container {
-  position: fixed;
-  right: 24px;
-  bottom: 40px;
-  z-index: 400;
-}
-
-.ReloadPrompt-toast {
-  width: 240px;
-  padding: 12px;
-  border-radius: 3px;
-  box-shadow: var(--popup-box-shadow);
-  background-color: var(--bg-color-container);
-  color: var(--text-primary);
-}
-.ReloadPrompt-toast-message {
-  margin-bottom: 12px;
-}
-</style>
diff --git a/site/src/routes.js b/site/src/routes.js
index 38debbebc..14d336a97 100644
--- a/site/src/routes.js
+++ b/site/src/routes.js
@@ -1,7 +1,8 @@
 import config from '../site.config';
 import TdesignComponents from './components/page.vue';
 
-const { docs } = config;
+const { docs, enDocs } = config;
+console.log([...getDocsRoutes(docs), ...getDocsRoutes(enDocs)]);
 
 function getDocsRoutes(docs, type) {
   let docsRoutes = [];
@@ -9,16 +10,8 @@ function getDocsRoutes(docs, type) {
 
   docs.forEach((item) => {
     const docType = item.type || type;
+
     let { children } = item;
-    if (item.type === 'component') {
-      children = item.children.sort((a, b) => {
-        const nameA = a.name.toUpperCase();
-        const nameB = b.name.toUpperCase();
-        if (nameA < nameB) return -1;
-        if (nameA > nameB) return 1;
-        return 0;
-      });
-    }
     if (children) {
       docsRoutes = docsRoutes.concat(getDocsRoutes(children, docType));
     } else {
@@ -34,7 +27,7 @@ const routes = [
     path: '/vue',
     redirect: '/vue/overview',
     component: TdesignComponents,
-    children: getDocsRoutes(docs),
+    children: [...getDocsRoutes(docs), ...getDocsRoutes(enDocs)],
   },
   {
     path: '*',