feat: test 入门文档

src/config.ts

@@ -3,6 +3,39 @@ export const versions = [
   { name: '2.x', link: '/' },
   { name: '3.x', link: '/3x/' }
 ];
+
+export const docs = {
+  name: '指南',
+  packages: [
+    {
+      name: 'intro',
+      cName: '介绍',
+      show: true
+    },
+    {
+      name: 'start',
+      cName: '快速上手',
+      show: true
+    },
+    {
+      name: 'theme',
+      cName: '主题定制',
+      show: true
+    },
+    {
+      name: 'international',
+      cName: '国际化',
+      show: true
+    },
+    {
+      name: 'https://github.com/jdf2e/nutui/releases',
+      cName: '更新日志',
+      show: true,
+      isLink: true
+    }
+  ]
+};
+
 export const nav = [
   {
     name: '布局组件',

src/docs/international.md

@@ -0,0 +1,104 @@
+# 国际化
+
+NutUI 2.0 以上版本支持多语言。组件默认使用中文，支持加载其他语言包来实现多语言切换功能。除了组件本身的语言切换以外，用户还可以调用相关的语言转换方法来支持其他功能的国际化。具体使用方法如下：
+
+## 使用方法
+
+### 引用整个组件库
+
+```javascript
+import Vue from 'vue';
+import NutUI from '@nutui/nutui';
+
+import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+
+Vue.use(NutUI, {
+  locale: 'en-US',
+  lang: enUS
+});
+```
+
+### 按需引用组件
+
+通过 **[@nutui/babel-plugin-separate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 插件，我们可以根据项目需要引用 NutUI 的组件，最终只打包引用的组件，减少引入代码的体积。国际化功能同样支持按需引用的方式。
+
+```javascript
+import Vue from 'vue';
+import {locale} from '@nutui/nutui';
+
+import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+
+locale('en-US', enUS);
+```
+
+> 请注意：通过该插件进行按需引用组件时默认引用的是构建后的文件，此时并不支持国际化的功能。如需使用组件库的国际化功能，需要在 babel 的配置文件（如.babelrc）中将 **@nutui/babel-plugin-separate-import** 插件的 **sourceCode** 参数值设为 **true** 。这样插件将引用未经构建的源文件，同时引用的组件也不再具有 `install` 方法，请使用 `Vue.component` 对组件进行注册。
+
+```bash
+{
+  "plugins": [
+    ["@nutui/babel-plugin-separate-import", {
+      "sourceCode": true,
+      "style": "css"
+    }]
+  ]
+}
+```
+
+## 兼容 vue-i18n
+
+```javascript
+import VueI18n from 'vue-i18n';
+import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+
+Vue.use(VueI18n);
+
+Vue.locale = () => {};
+const i18n = new VueI18n({
+  locale: 'en-US',
+  messages: {
+    'en-US': enUS
+  }
+});
+
+
+const app = new Vue({
+  el: '#app',
+  i18n
+})
+
+```
+
+## 语言切换
+
+使用 **vue-i18n** 时，可以通过调用 **$t** 方法来对某个位置做国际化支持的语言切换。我们也可以调用 NutUI 内置的语言切换方法 **nutTranslate** 来实现相同功能，而且还支持非常灵活的模板化传参方式。我们可以通过 **mixin** 将该语言切换方法混入到每个组件的 **methods**，方便直接调用。
+
+```javascript
+import Vue from 'vue';
+import {i18n} from '@nutui/nutui';
+
+Vue.mixin({
+    methods: {
+        nutTranslate() {
+            return i18n.apply(this, arguments);
+        }
+    }
+});
+
+
+// 使用 nutTranslate
+// params 参数支持默认值、对象、数组、函数等格式
+<nut-cell :title="nutTranslate('demo.cell.title', params)" />
+```
+
+一般来说，要实现全面的国际化，我们还需要将用户自己的语言包与组件库的语言包进行合并。
+
+```javascript
+import Vue from 'vue';
+import {locale} from '@nutui/nutui';
+import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+import myEnUS from './path/to/lang/en-US';
+
+Object.assign(enUS, myEnUS);
+
+locale('en-US', enUS);
+```

src/docs/intro.md

@@ -0,0 +1,63 @@
+# NutUI
+
+NutUI是一套京东风格的移动端组件库，开发和服务于移动Web界面的企业级产品。
+
+<div style="margin:30px 0;">
+    <img src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" width="150" alt="NutUI">
+</div>
+
+<iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
+
+<iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="70px" height="20px"></iframe>
+
+<iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=fork&count=true" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
+
+## 特性
+
+* 50+ 高质量组件
+* 40+ 京东移动端项目正在使用
+* 基于京东APP 7.0 视觉规范
+* 支持按需加载
+* 详尽的文档和示例
+* 支持定制主题
+* 支持多语言（国际化）
+* 支持 TypeScript
+* 支持服务端渲染（Vue SSR）
+* 单元测试加持
+* 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
+
+## 示例
+
+![NutUI Demo](https://img14.360buyimg.com/uba/s260x260_jfs/t1/32118/11/559/2782/5c3d81ecEbda0c0f1/5f2b637d11817204.png)
+
+## 支持环境
+
+* Android 4.0+
+* iOS 8.0+
+* 支持服务端渲染
+
+## 构建版本
+
+* UMD版 **nutui.js**
+* UMD压缩版 **nutui.min.js**
+
+> AMD 环境、Webpack 等构建工具环境、服务端建议使用 UMD 版，非模块化环境（如通过 `<script>` 标签直接引用）建议使用 UMD 压缩版。
+
+最新稳定版：![npm](https://img.shields.io/npm/v/@nutui/nutui.svg)
+
+> 你还可以订阅： https://github.com/jdf2e/nutui/releases.atom 来获得稳定版发布的通知。
+
+## 链接
+* [Vue官方文档](http://cn.vuejs.org/)
+* [Webpack](http://webpack.github.io/)
+* [意见反馈](https://github.com/jdf2e/nutui/issues)
+* [更新日志](https://github.com/jdf2e/nutui/releases)
+* [案例征集](https://github.com/jdf2e/nutui/issues/16)
+* [模板工程命令行工具(Gaea CLI)](https://www.npmjs.com/package/gaea-cli)
+* 联系我们：nutui@jd.com
+* [加入我们](#/joinus)
+
+
+## 开源协议
+
+本项目基于 **MIT** 协议

src/docs/joinus.md

@@ -0,0 +1,29 @@
+## 招聘前端开发工程师
+
+### 岗位职责：
+* 负责京东PLUS会员、大客户、京东ME、人资行政类项目前端开发。
+* JS组件开发，包括 NutUI、 popui、 legao等通用类库、构建工具等开发。
+* 与设计师、后台工程师紧密工作，负责产出高质量的产品前端层。
+* 通过各种前端技术手段，提高用户体验并满足性能要求。
+* 充分理解项目需求和设计需求，具有一定钻研精神，能解决各种未知问题。有较强的沟通能力和抗压能力。
+
+
+### 岗位要求：
+* 计算机相关专业本科以上，4年以上前端开发经验，电商相关经验优先。
+* 精通各种Web前端技术，对符合Web标准的网站重构有丰富经验，有成功作品。
+* 掌握JS语言，ES6+，对JS框架( jQuery/Vue/ React)有实际项目经验。
+* 对CSS/JS性能优化、解决多浏览器兼容性问题有一定的经验。
+* 有基于Node的常见构建工具如Gulp、Rollup、 Webpack的实际项目经验。
+* 对用户体验、交互操作流程、及用户需求有一定了解。
+* 具备良好的服务意识、责任心及学习能力、优秀的团队沟通与协作能力。
+* 职级T5-T8，需要符合二五原则(各段平均工作年限需满2年)。
+
+
+### 职位诱惑：
+* 工作地点：北京亦庄京东集团总部。公司有免费班车，班车点基本覆盖全北京，距离不是距离
+* 公司福利：5层食堂、超大面积免费健身房(器械、跑步机、健身教练)、年假、带薪病假、大楼各种羊毛薅、各种内购内销、饮料零食…
+
+
+### 简历投递：
+
+yfzhoutao@jd.com

src/docs/start.md

@@ -0,0 +1,251 @@
+# 快速上手
+
+## 推荐工程
+
+我们提供一个命令行工具 [Gaea CLI](https://www.npmjs.com/package/gaea-cli) ，可用来快速生成一个已经内置了本组件库的基于 Webpack 的 Vue 项目工程。基于这个工程开发项目，可省去大量配置和调试环境的时间，也可略过下面组件库安装使用部分内容直接进入开发阶段。
+
+## 安装
+
+* 通过 NPM 或 YARN 安装（推荐）
+
+#### NPM
+```bash
+npm i @nutui/nutui -S
+```
+
+#### YARN
+```bash
+yarn add @nutui/nutui
+```
+> 如果你的网络环境不佳，不妨试试国内的npm镜像
+
+> 默认安装最新版，如需使用 1.x 版本，请指定版本号，如：  `npm i @nutui/nutui@1.3.2 -S`
+
+* 页面直接引用
+
+在页面中使用 script 和 link 标签直接引入文件，**NutUI** 将会自动注册。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
+
+当然你也可以通过 CDN 的方式引入， 可以在 **jsdelivr** 和 **unpkg** 等公共 CDN 上获取到 NutUI。我们推荐链接到一个你可以手动更新的指定版本号。
+
+```html 开发环境版本，包含了有帮助的命令行警告
+<!-- 开发环境版本，包含了有帮助的命令行警告 -->
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.css">
+<!-- 引入Vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<!-- 引入组件库 -->
+<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.js"></script>
+```
+或者
+```html
+<!-- 生产环境版本，优化了尺寸和速度 -->
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
+<!-- 引入Vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+<!-- 引入组件库 -->
+<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
+```
+
+CDN 引入示例
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
+</head>
+<body>
+    <div id="app">
+        <nut-button @click="showDialog">
+            Button
+        </nut-button>
+    </div>
+
+    <!-- 引入Vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+    <!-- 引入NutUI组件库 -->
+    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
+    <script>
+        new Vue({
+            el: '#app',
+            methods: {
+                showDialog() {
+                    this.$dialog({
+                        title: "确定删除此订单？",
+                        content: "删除后将从你的记录里消失，无法找回"
+                    });
+                }
+            }
+        });
+    </script>
+</body>
+</html>
+```
+
+CDN 按需加载引入示例
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div id="app">
+      <nut-button>cdn按需加载</nut-button>
+    </div>
+
+    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+    <!-- 引入样式 -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/packages/button/button.css"
+    />
+    <!-- 引入Vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <!-- 引入组件库 -->
+    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/packages/button/button.js"></script>
+    <script>
+      Vue.component(button.default.name, button.default);
+      new Vue({
+        el: "#app"
+      });
+    </script>
+  </body>
+</html>
+```
+
+> 在页面中直接引入，将无法使用 **主题定制** 等功能。我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐在页面中直接引入的用法
+
+* 通过 **Vue CLI** 图形化界面安装
+
+如果你的项目是使用 [Vue CLI](https://cli.vuejs.org/zh/) 脚手架搭建，那么你还可以通过 **Vue CLI** 提供的图形化界面安装 **NutUI** ：在图形化界面的 **依赖** 界面，点击右上角 **安装依赖** 按钮，搜索 **@nutui/nutui** 安装即可。
+
+## 加载示例
+
+```javascript
+import Vue from 'vue';
+import NutUI from '@nutui/nutui';
+import '@nutui/nutui/dist/nutui.css';
+
+NutUI.install(Vue);
+```
+
+> 注意：这种方式将会导入所有组件
+
+## 按需加载
+
+以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。
+
+### 1. 使用 webpack 插件 **[@nutui/babel-plugin-separate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** (推荐)
+
+首先安装 **@nutui/babel-plugin-separate-import** 插件
+
+```bash
+npm i @nutui/babel-plugin-separate-import -D
+```
+
+然后配置一下babel的配置文件
+
+``` bash
+{
+  "plugins": [
+    ["@nutui/babel-plugin-separate-import", {
+        "style": "scss"
+    }]
+  ]
+}
+```
+> style 选项值为 "css" 时加载组件对应的css文件，为 "scss" 时加载对应的scss文件。无style选项时，不自动加载样式文件。
+
+接下来，我们就可以在项目里只引入用到的组件了。默认情况下，样式也无需单独引入。插件会自动将代码转换为方式二的手动引入方式。
+
+```javascript
+import Vue from 'vue';
+import { Dialog,Picker } from '@nutui/nutui';
+
+Dialog.install(Vue);
+Picker.install(Vue);
+```
+如果需要按需加载 scss 文件（如需要自定义主题）时，除了需要把 style 选项值设为 **scss** 外，还需要修改 webpack 配置文件的 sass-loader 配置，如下所示：
+
+``` bash
+{
+    loader: 'sass-loader',
+    options: {
+        data: `@import "@nutui/nutui/dist/styles/index.scss"; `
+    }
+}
+```
+
+`vue.config.js` VueCLI3 配置方式 
+
+``` bash
+module.exports = {
+    css: {
+        loaderOptions: {
+            // 给 sass-loader 传递选项
+            scss: {
+                // @/ 是 src/ 的别名
+                // 注意：在 sass-loader v7 中，这个选项名是 "data"
+                prependData: ` 
+                @import "@/assets/custom_theme.scss";
+                @import "@nutui/nutui/dist/styles/index.scss";
+                `,
+            }
+        },
+    }
+}
+```
+
+> VueCLI 3 相关Demo 请查看 [NutUI Demo](https://github.com/jdf2e/nutui-demo)
+
+### 2. 手动引入
+
+```javascript
+import Vue from 'vue';
+import Button from '@nutui/nutui/dist/packages/button/button.js';  // 加载构建后的JS
+import '@nutui/nutui/dist/packages/button/button.css';  //加载构建后的CSS
+//主题定制等场景需要加载SCSS,而不是构建后的CSS
+//import '@nutui/nutui/dist/packages/button/button.scss'; 
+
+Button.install(Vue);
+```
+
+## 组件使用
+
+1.使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容字符串类型除外)，比如：
+```html
+<nut-switch :active="true" size="base"></nut-switch>
+```
+
+2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 [webpack](https://www.webpackjs.com/) 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、[postcss](https://github.com/postcss/postcss) 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等
+
+VueCLI3 配置示例 `vue.config.js`
+``` javascript
+const pxtorem = require('postcss-pxtorem');
+module.exports = {
+    css: {
+        loaderOptions: {
+          postcss: {
+            plugins: [
+              pxtorem({
+                rootValue: 37.5,
+                propList: ['*']
+              })
+            ]
+          }
+        }
+      }
+}
+```
+
+3.组件具体用法以文档为准
+
+4.组件使用过程中如有问题或建议，欢迎[反馈](https://github.com/jdf2e/nutui/issues)

src/docs/theme.md

@@ -0,0 +1,104 @@
+# 主题定制
+
+> 定制主题须使用 NutUI 2.0 以上版本
+
+NutUI 默认提供一套 UI 主题，同时允许在一定程度上定制新的主题，以满足业务的多样化视觉需求。
+
+![主题定制](http://img14.360buyimg.com/uba/jfs/t1/14893/39/4803/92712/5c3478afEc0458edb/54e06165a4445661.png)
+
+
+## 样式变量
+
+NutUI 的样式是基于 **[SCSS](https://sass-lang.com/)** 开发的，定义了一套默认样式变量，定制主题就是编辑这个变量列表。
+
+以下是一些与颜色相关基本样式变量，所有可用的变量请参考配置文件。
+
+```scss
+$primary-color: #F0250F;
+$normal-color: #848484;
+$link-color: $primary-color;
+$link-hover-color: mix($link-color , #000, 80%);
+$title-color: #2D2D2D;
+$text-color: #848484;
+$light-color: #F6F6F6;
+$dark-color: #DADADA;
+```
+
+
+## 定制主题
+
+### 第一步：新建自定义变量 SCSS 文件
+
+在本地项目中新建一个 **SCSS** 文件，包含上述变量，自定义变量值。
+
+### 第二步：修改本地项目 webpack 的配置文件
+
+修改 webpack 配置文件中 **sass-loader** 的配置。在 **options** 的 **data** 属性值中，先后 import 你自定义的 SCSS 文件（如 `custom.scss`）和 NutUI 的样式变量配置文件（路径为 **dist/styles/variable.scss**）。
+
+```javascript
+{
+    test: /\.(sa|sc)ss$/,
+    use: [
+        {
+            loader: 'sass-loader',
+            options: {
+                data: `@import "./asset/css/custom.scss"; @import "@nutui/nutui/dist/styles/index.scss"; `,
+            }
+        }
+    ]
+}
+```
+
+如果你的项目使用的是VueCLI 3以上版本 请修改 `vue.config.js` 进行配置
+
+``` bash
+module.exports = {
+    css: {
+        loaderOptions: {
+            // 给 sass-loader 传递选项
+            scss: {
+                // @/ 是 src/ 的别名
+                // 注意：在 sass-loader v7 中，这个选项名是 "data"
+                prependData: ` 
+                @import "@/assets/custom_theme.scss";
+                @import "@nutui/nutui/dist/styles/index.scss";
+                `,
+            }
+        },
+    }
+}
+```
+
+### 第三步：引用组件样式时引用 SCSS 文件
+
+在主题定制场景下，项目中引用组件时，需要引入 **SCSS** 文件，而不是 **CSS** 文件。分三种情况：
+
+1.引用完整组件库时，需要引入 **nutui.scss** 文件
+
+```javascript
+import NutUI from '@nutui/nutui';
+import '@nutui/nutui/dist/nutui.scss';
+```
+
+2.未使用插件，手动按需引用组件时，需手动引入组件对应的 SCSS 文件。
+
+```javascript
+import Button from '@nutui/nutui/dist/packages/button/button.js';
+import '@nutui/nutui/dist/packages/button/button.scss';
+```
+
+3.使用了插件 **[@nutui/babel-plugin-separate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 进行按需引用时，需修改babel的配置文件（如.babelrc），将 **style** 的设置为 **scss**。该插件将会自动引入指定组件对应的 SCSS 文件。
+
+```bash
+{
+  "plugins": [
+    ["@nutui/babel-plugin-separate-import", {
+        "libraryName": "@nutui/nutui",
+        "libraryDirectory": "dist/packages",
+        "style": "scss"
+    }]
+  ]
+}
+```
+
+> VueCLI 3 相关Demo 请查看 [NutUI Demo](https://github.com/jdf2e/nutui-demo)

src/packages/cell/index.vue

@@ -11,7 +11,7 @@
         </template>
       </view>
       <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
-      <nut-icon v-if="isLink || to" name="right"></nut-icon>
+      <nut-icon v-if="isLink || to" size="14px" color="#979797" name="right"></nut-icon>
     </slot>
   </view>
 </template>

src/packages/icon/demo.vue

@@ -2,20 +2,20 @@
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-icon name="wifi"></nut-icon>
-      <nut-icon name="mail"></nut-icon>
+      <nut-icon name="dongdong"></nut-icon>
+      <nut-icon name="dongdong"></nut-icon>
     </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
-      <nut-icon name="mail" color="#fa2c19"></nut-icon>
-      <nut-icon name="mail" color="#64b578"></nut-icon>
+      <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
+      <nut-icon name="dongdong" color="#64b578"></nut-icon>
     </nut-cell>
 
     <h2>图标大小</h2>
     <nut-cell>
-      <nut-icon name="mail"></nut-icon>
-      <nut-icon name="mail" size="24px"></nut-icon>
-      <nut-icon name="mail" size="16px"></nut-icon>
+      <nut-icon name="dongdong"></nut-icon>
+      <nut-icon name="dongdong" size="24px"></nut-icon>
+      <nut-icon name="dongdong" size="16px"></nut-icon>
     </nut-cell>
 
     <h2>基础图标</h2>

src/sites/assets/styles/md-style.scss

@@ -2,9 +2,10 @@
 
 .doc-content-document {
   position: relative;
-  width: 800px;
   background: #fff;
   padding-left: 58px;
+  padding-left: 58px;
+  padding-right: 400px;
   .card {
     margin-bottom: 24px;
     padding: 24px;
@@ -214,9 +215,9 @@
   }
 
   img {
-    width: 100%;
-    margin: 16px 0;
-    border-radius: $nutui-doc-border-radius;
+    // width: 100%;
+    // margin: 16px 0;
+    // border-radius: $nutui-doc-border-radius;
   }
 
   &--changelog,

src/sites/doc/components/Nav.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="doc-nav">
-    <ol class="introduce">
-      <li>指南</li>
-      <li>介绍</li>
-      <li>快速上手</li>
-      <li>主题定制</li>
-      <li>国际化</li>
-      <li>更新日志</li>
-      <li>资源</li>
+    <ol>
+      <li>
+        {{ docs.name }}
+      </li>
+      <ul>
+        <li :class="{ active: isActive(_package.name) }" v-for="_package in docs.packages" :key="_package">
+          <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link>
+          <a v-else :href="_package.name" target="_blank">{{ _package.cName }}</a>
+        </li>
+      </ul>
     </ol>
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
@@ -24,7 +26,7 @@
 <script lang="ts">
 import { defineComponent, reactive, computed } from 'vue';
 import { currentRoute } from '@/sites/assets/util/ref';
-import { nav } from '@/config';
+import { nav, docs } from '@/config';
 export default defineComponent({
   name: 'doc-nav',
   setup() {
@@ -36,6 +38,7 @@ export default defineComponent({
     return {
       isActive,
       nav: reactive(nav),
+      docs: reactive(docs),
       currentRoute
     };
   }

src/sites/doc/router.ts

@@ -13,6 +13,16 @@ files.keys().forEach(component => {
     name
   });
 });
+const docs = require.context('@/docs', true, /\.md$/);
+docs.keys().forEach(component => {
+  const componentEntity = docs(component).default;
+  const name = `${component.split('/')[1].replace('.md', '')}`;
+  pagesRouter.push({
+    path: name,
+    component: componentEntity,
+    name
+  });
+});
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',

src/sites/mobile/components/Index.vue

@@ -12,7 +12,8 @@
         <li>{{ _nav.name }}</li>
         <ul>
           <li v-for="_package in _nav.packages" :key="_package">
-            <router-link :to="_package.name.toLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }} </router-link>
+            <router-link :to="_package.name.toLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}</router-link>
+            <nut-icon size="14px" color="#979797" name="right"></nut-icon>
           </li>
         </ul>
       </ol>
@@ -83,6 +84,7 @@ export default defineComponent({
       }
       > ul {
         li {
+          display: flex;
           padding: 0 24px;
           width: 100%;
           height: 45px;

src/sites/mobile/router.ts

@@ -18,11 +18,11 @@ files.keys().forEach(component => {
   });
 });
 
-// routes.push({
-//   name: 'NotFound',
-//   path: '/:path(.*)+',
-//   redirect: () => '/',
-// });
+routes.push({
+  name: 'NotFound',
+  path: '/:path(.*)+',
+  redirect: () => '/'
+});
 
 const router = createRouter({
   history: createWebHashHistory(),