docs: add EN version site (Tencent#2521)

* docs: en version documentation

* docs: complete docs

* chore: update docs

package.json

@@ -177,7 +177,7 @@
     "rollup-plugin-vue": "^5.1.9",
     "tdesign-icons-view": "^0.1.5",
     "tdesign-publish-cli": "^0.0.12",
-    "tdesign-site-components": "^0.12.2",
+    "tdesign-site-components": "^0.13.0",
     "tdesign-theme-generator": "^1.0.0",
     "typescript": "~4.5.4",
     "unplugin-vue2-script-setup": "^0.10.2",

site/site.config.mjs

@@ -30,10 +30,11 @@ const docs = [
       },
       {
         title: '组件概览',
-        titleEn: 'Component overview',
+        titleEn: 'Overview',
         name: 'overview',
         path: '/vue/overview',
         component: () => import('@common/docs/web/overview.md'),
+        componentEn: () => import('@common/docs/web/overview.en-US.md'),
       },
     ],
   },
@@ -51,17 +52,19 @@ const docs = [
       },
       {
         title: '自定义主题',
-        titleEn: 'Custom theme',
+        titleEn: 'Theme Customization',
         name: 'custom-theme',
         path: '/vue/custom-theme',
         component: () => import('@common/theme.md'),
+        componentEn: () => import('@common/theme.en-US.md'),
       },
       {
         title: '暗黑模式',
         titleEn: 'Dark Mode',
         name: 'dark-mode',
         path: '/vue/dark-mode',
         component: () => import('@common/dark-mode.md'),
+        componentEn: () => import('@common/dark-mode.en-US.md'),
       },
     ],
   },
@@ -88,8 +91,8 @@ const docs = [
       },
       {
         title: 'Link 链接',
-        titleEn: 'Icon',
-        name: 'icon',
+        titleEn: 'Link',
+        name: 'link',
         path: '/vue/components/link',
         component: () => import('tdesign-vue/link/link.md'),
         componentEn: () => import('tdesign-vue/link/link.en-US.md'),
@@ -158,6 +161,7 @@ const docs = [
       },
       {
         title: 'BackTop 回到顶部',
+        titleEn: 'BackTop',
         name: 'back-top',
         path: '/vue/components/back-top',
         component: () => import('tdesign-vue/back-top/back-top.md'),
@@ -251,6 +255,7 @@ const docs = [
       },
       {
         title: 'ColorPicker 颜色选择器',
+        titleEn: 'ColorPicker',
         name: 'color-picker',
         path: '/vue/components/color-picker',
         component: () => import('tdesign-vue/color-picker/color-picker.md'),
@@ -556,6 +561,7 @@ const docs = [
       },
       {
         title: 'Rate 评分',
+        titleEn: 'Rate',
         name: 'rate',
         docType: 'data',
         path: '/vue/components/rate',
@@ -595,6 +601,7 @@ const docs = [
       },
       {
         title: 'Guide 引导',
+        titleEn: 'Guide',
         name: 'guide',
         path: '/vue/components/guide',
         component: () => import('tdesign-vue/guide/guide.md'),

site/src/main.js

@@ -25,6 +25,10 @@ import 'tdesign-icons-view';
 // 主题生成器挂件
 import 'tdesign-theme-generator';
 
+import { registerLocaleChange } from 'tdesign-site-components';
+
+registerLocaleChange();
+
 Vue.use(TDesign);
 Vue.use(VueRouter);
 

src/icon/icon.en-US.md

@@ -1,50 +1,59 @@
 :: BASE_DOC ::
 
-### 安装独立 Icon 包
+### Install tdesign-icons-vue
 
-图标相对其他基础组件较为独立，所以作为一个独立的 npm 包做发布管理。如果项目中直接使用，请安装`tdesign-icons-vue`。 同时 tdesign-vue 也内置了 icon,支持直接通过 t-icon 来使用
+Icons are published and managed as a separate npm package. If you want to use it directly in your project, please install `tdesign-icons-vue`. At the same time, `tdesign-vue` also includes icons and supports direct use through `t-icon`.
+### Full import
 
-### SVG 全量引入
-
-图标尺寸单位支持多种， 'small', 'medium', 'large', '35px', '3em' 等。
-图标颜色使用 CSS 控制，如：style="color: red"，或者 style="fill: red"。
-点击右侧导航「全部图标」即可查看组件库全部图标。
+The icon size supports multiple units, such as 'small', 'medium', 'large', '35px', '3em', etc. 
+The icon color is controlled by CSS, for example, using style="color: red" or style="fill: red". 
+Click on the 「All Icons」 navigation on the right to view all icons in the component library.
 
 {{ base }}
 
-### SVG 按需引入
+### Import on-demand
 
-图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。
+SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand.
 
 {{ single }}
 
-### SVG 高级用法
-
-可以传入 url 加入新的 SVG 图标。
+### Advanced usage of SVG
 
-引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。
+New svg icons can be added by passing in the URL. 
 
-组件会引入默认的 SVG 图标，如果希望禁止组件加载默认的 SVG 图标，将 `loadDefaultIcons` 置为 false 即可。
+The component will import default svg icons. If you want to disable the loading of default svg icons, set `loadDefaultIcons` to `false`.
 
 {{ enhanced }}
 
-### iconfont 图标
-
-使用 Iconfont 图标需要单独引入 Iconfont 图标组件
+### Iconfont
 
 {{ iconfont }}
 
-### iconfont 高级用法
+### Advanced usage of iconfont
 
-可以传入 url 加入新的 iconfont 图标。
+New iconfont icons can be added by passing in the URL. 
 
-引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。
+The component will import default iconfont icons. If you want to disable the loading of default iconfont icons, set `loadDefaultIcons` to `false`.
 
-组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 `loadDefaultIcons` 置为 false 即可。
 
 {{ iconfont-enhanced }}
 
-### 全部图标
+### Icon Selector
+
+If you need to select icons in your project, please use `Select` to implement an icon selector.
+
+{{ icon-select }}
+
+### FAQ
+
+#### How to get all the names of icons？
+
+You can get all the name of icon by import manifest from the bundle `import { manifest } from 'tdesign-icons-vue'`
+
+#### the usage of full import needs network. What if my project is in a no-network scenario?
+
+if your project is in a no-network scenario, please use on-demand loading of icons. For example,`<t-icon name="add" />` should be changed to `<AddIcon />`
+### All Icons
 
 <td-icons-view />