Merge pull request #879 from XiaoMi/feature/doc

docs: update index, quick-start etc content
XiaoMi · Jan 2, 2020 · e649d93 · e649d93
2 parents a3ff433 + 79e5aac
commit e649d93
Show file tree

Hide file tree

Showing 7 changed files with 28,078 additions and 38 deletions.
diff --git a/docs/zh-CN/components/i18n.mdx b/docs/zh-CN/components/i18n.mdx
@@ -1,6 +1,6 @@
 # 国际化
 
-支持的语言包详见下表，默认为 **zh-CN**
+HIUI 目前支持简体中文、英文两种语言，默认为 **zh-CN**
 
 ## 使用方法
 

diff --git a/docs/zh-CN/components/palette.mdx b/docs/zh-CN/components/palette.mdx
@@ -1,6 +1,6 @@
 # 配色主题
 
-支持的配色主题详见下表，默认为 **hiui-blue**
+HIUI 支持多种配色主题，默认为「品牌蓝」
 
 ## 使用方法
 

diff --git a/docs/zh-CN/components/quick-start.mdx b/docs/zh-CN/components/quick-start.mdx
@@ -1,28 +1,31 @@
 # 快速上手
 
-HIUI 是一套适用于前中后台的交互界面设计标准与前端解决方案，致力于提供给程序员更加简洁的开发体验。
+HIUI 是一套适用于中后台系统的设计规范及前端组件化解决方案。
 
 ## 使用脚手架安装（仅限小米集团用户）
 
-我们为小米的同事提供了可以快速实现项目建立、集成代码质量检查的解决方案，请[访问内网查看相关的使用说明](http://hiui.fe.team/cli/)。
+我们为集团内部同事提供了可快速生成项目、集成代码质量检查等功能解决方案，请[访问内网查看相关的使用说明](http://hiui.fe.team/cli/)。
 
 ---
 
 ## 独立安装
 
-非小米集团用户我们推荐使用 [create-react-app](https://www.npmjs.com/package/create-react-app) React 官方脚手架进行快速项目搭建
+非小米集团用户我们推荐使用 React 官方脚手架 [create-react-app](https://www.npmjs.com/package/create-react-app) 进行快速项目搭建。
 
 ### 1. 新项目
 
-环境依赖
-
+环境依赖：
 - Node >= 8.10
 - Npm >= 5.2 或 Yarn >= 0.25
 
 下载并安装 Node（[下载地址](https://nodejs.org/zh-cn/download/) ）或通过各平台通过包管理器进行安装（[安装方式介绍](https://nodejs.org/zh-cn/download/package-manager/)）
 
 Node 安装完成后，npm 即可以使用。
 
+```bash
+node -v
+```
+
 #### 1.1 全局安装 create-react-app
 
 ```bash
@@ -46,7 +49,7 @@ npm start
 yarn start
 ```
 
-<img src='<BASE_URL>/static/img/docs/create-react-app.gif' />
+<img src='<BASE_URL>/static/img/docs/create-react-app.gif' style={{width: 600}} />
 
 完毕后，将会自动打开新的标签页 `localhost:3000`，至此 React 项目初始化完成
 
@@ -80,7 +83,7 @@ npm install @hi-ui/hiui --save
 ```diff
 // package.json
 "dependencies": {
-+   "@hi-ui/hiui": "^2.0.0-rc.2",
++   "@hi-ui/hiui": "^2.6.4",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-scripts": "2.1.5"
@@ -102,7 +105,7 @@ class App extends Component {
         <header className='App-header'>
           <img src={logo} className='App-logo' alt='logo' />
 
-          {/* 使用组件 */}
+          {/* 使用 HIUI 组件 */}
           <Button type='primary' size='large'>
             HIUI 按钮
           </Button>
@@ -133,4 +136,4 @@ export default App
 
 ### 2. 在现有项目中使用
 
-**同 1.3**
+从步骤 1.3 开始，后续相同。
diff --git a/docs/zh-CN/components/theme.mdx b/docs/zh-CN/components/theme.mdx
@@ -1,10 +1,8 @@
 # 主题
 
-目前有两款布局方式可用，分别是上下布局的 `Classic` 和左右布局的 `Genuine`
+目前 HIUI 提供了两种布局主题供大家使用，分别是上下结构的 `classic` 形态和左右结构的 `genuine`。
 
-**前往 [主题 Github](https://github.com/hiui-group/classic-theme/tree/develop) **
-
-## 使用
+## 安装与使用
 
 ```bash
 npm i @hi-ui/classic-theme@next --save
@@ -61,9 +59,9 @@ const routeConfig = [
 
 // 系统 logo 配置项
 const logoConfig = {
-  logoUrl: 'https://xiaomi.github.io/hiui/static/img/logo.png?241e0618fe55d933c280e38954edea05', // 点击 logo 跳转地址
+  logoUrl: 'https://xiaomi.github.io/hiui/static/img/logo.png?241e0618fe55d933c280e38954edea05', // logo 资源地址
   name: 'HIUI Theme', // logo 名称
-  url: 'https://xiaomi.github.io/hiui/#/' // logo 资源地址
+  url: 'https://xiaomi.github.io/hiui/#/' // 点击 logo 跳转地址
 }
 
 // 系统登录信息配置项
@@ -89,19 +87,19 @@ class App extends Component {
 export default App
 ```
 
-- 当 `type = 'classic' apperance={{color:'dark'}}` 时，为上下布局，顶部导航栏为深色
+- 当属性设置为 `type='classic' apperance={{color:'dark'}}` 时，呈上下布局，顶部导航栏为深色
 
 <p><img src="<BASE_URL>/static/img/themes/classic/classic-theme-demo.png" width="80%" /></p>
 
-- 当 `type = 'classic' apperance={{color:'light'}}` 时，为上下布局，顶部导航栏为浅色
+- 当属性设置为 `type='classic' apperance={{color:'light'}}` 时，呈上下布局，顶部导航栏为浅色
 
 <p><img src="<BASE_URL>/static/img/themes/classic/classic-theme-demo-light.png" width="80%" /></p>
 
-- 当 `type = 'genuine' apperance={{color:'dark'}}` 时，为左右布局，侧边导航栏为深色
+- 当属性设置为 `type='genuine' apperance={{color:'dark'}}` 时，呈左右布局，侧边导航栏为深色
 
 <p><img src="<BASE_URL>/static/img/themes/genuine/genuine-theme-demo.png" width="80%" /></p>
 
-- 当 `type = 'genuine' apperance={{color:'light'}}` 时，为左右布局，侧边导航栏为浅色
+- 当属性设置为 `type = 'genuine' apperance={{color:'light'}}` 时，呈左右布局，侧边导航栏为浅色
 
 <p><img src="<BASE_URL>/static/img/themes/genuine/genuine-theme-demo-light.png" width="80%" /></p>
 
@@ -111,8 +109,6 @@ export default App
 | ----------- | -------------------------- | --------------------------------- | --------------------------- |
 | type        | 主题类型                   | 'classic' \| 'genuine'            | 'classic'                   |
 | routes      | 路由配置项                 | Route[]                           | -                           |
-| logo        | 系统 logo                  | ReactNode                         | -                           |
-| login       | 系统登录配置项             | ReactNode                         | -                           |
 | historyType | 路由跳转类型               | 'hashHistory' \| 'browserHistory' | 'browserHistory'            |
 | header      | genuine 类型下的顶部功能栏 | ReactNode \| null                 | 不传时默认为主题自带 header |
 | apperance   | 主题外观配置项             | Apperance                         | {color:'dark'}              |

diff --git a/docs/zh-CN/components/upgrade-from-1x.mdx b/docs/zh-CN/components/upgrade-from-1x.mdx
@@ -1,6 +1,6 @@
 # 从 v1.x 升级至 v2.x
 
-HIUI 2.0.0 是一次大版本更新，在此次迭代中，我们主要对 HIUI 进行了如下升级：
+HIUI v2.0.0 是一次大版本更新，在此次迭代中，我们主要对 HIUI 进行了如下升级：
 
 - 对现有 HIUI 组件的 API 进行了统一的梳理和规范，新的 API 将会更加语义化、一致化，从而提升整体的易用性和开发体验。
 - 新增 Tag 、Message 组件
@@ -12,7 +12,7 @@ HIUI 2.0.0 是一次大版本更新，在此次迭代中，我们主要对 HIUI
 
 ## 从 1.4.x/1.5.x 升级至 2.0.0
 
-基于 1.4.x 和 1.5.x 版本开发的功能，可通过为下列组件批量增加 `legacy={true}` 标识来让其保持使用旧版 API，从而让项目无痛过渡到 2.x 版本（既使旧代码可以稳定运行，也可在新功能开发使用 2.x 的新特性）。
+基于 1.4.x 和 1.5.x 版本开发的功能，可通过为下列组件批量增加 `legacy={true}` 标识来让其保持使用旧版 API，从而让项目无痛过渡到 2.x 版本（即旧代码可以稳定运行，同时可在新功能开发使用 2.x 的新特性）。
 
 - `<Checkbox />`
 - `<Counter />`