docs: optimize material

docs/guide/basic/page.md

@@ -59,4 +59,4 @@ HomePage.pageConfig = {
 
 ## 页面埋点
 
-参考 [页面埋点](/docs/guider/advance/statistical.md)。
+参考 [页面埋点](/docs/guide/advance/statistical.md)。

docs/guide/basic/request.md

@@ -19,12 +19,7 @@ order: 4
  |   │   ├── models 
 +|   │   ├── services               // 定义页面级数据请求
 +|   │   |    └── repo.ts
- |   │   ├── components
- |   │   |    └── Todo
- |   |   │    |    ├── index.tsx
- |   |   │    |    ├── model.ts
-+|   |   │    |    └── service.ts   // 定义组件级数据请求
- |   │   └── index.tsx
+ |   │   └── components
  |   ├── About
  |   │   ├── services
  |   │   ├── components
@@ -488,7 +483,7 @@ const appConfig = {
 };
 ```
 
-结合[运行时配置](/docs/guide/basic/config)即可实现不同环境使用不同的 baseURL：
+结合[环境配置](/docs/guide/basic/config)即可实现不同环境使用不同的 baseURL：
 
 ```js
 // src/config.ts

docs/guide/basic/router.md

@@ -7,6 +7,8 @@ icejs 提供了 **配置式路由** 和 **约定式路由** 两种方案，默
 
 当项目中存在 `src/routes.[ts|js]` 文件时，则使用配置式路由，否则使用约定式路由。
 
+> 注意：路由文件格式请与 `src/app.[ts|js]` 保持一致，如应用入口为 `src/app.js`，那么路由文件应该为 `routes.js`，如果文件名格式不一致则会进入到约定式路由的逻辑中。
+
 ## 配置式路由
 
 路由按照标准协议进行配置，用来描述路由的结构关系，路由配置协议如下：

docs/guide/develop/plugin-list.md

@@ -28,7 +28,7 @@ $ npm i --save-dev build-plugin-modular-import
 ```json
 {
   "plugins": [
-    ["ice-plugin-modular-import", [{
+    ["build-plugin-modular-import", [{
       "libraryName": "lodash",
       "libraryDirectory": "",
       "camel2DashComponentName": false

docs/materials/about.md

@@ -11,19 +11,17 @@ order: 1
 
 物料分为组件（component）、区块（block）和项目（scaffold）三种类型：
 
-- 组件（component）：组件是组成页面的基本单元，通过对组件的拆分和抽象，我们能根据组件快速搭建页面；从业务维度去看，组件也可分为基础组件和业务组件两种：
-   - 基础组件：与业务无关的组件，基础组件保持统一的视觉规范，考虑高内聚低耦合的设计思想，例如 Button、Input 等，在 ICE 体系，官方维护 Fusion 基础组件；
-   - 业务组件：面向业务的组件，一般功能比较确定同时复杂度较高，例如用户选择器、内容面板等。
-- 区块（block）：区块可以理解为更复杂的组件，是由多种组件组合而成的，在一个页面中，一般会包含一个或多个区块，开发者可以快速把某个区块的代码添加到自身项目里，然后再做改动或二次加工；
-- 项目（scaffold）：项目的样板工程，包含了完成前端项目所有组成部份，包括布局、常用页面、工程配置等，用户只需完成新页面的业务开发即可，用于项目初始化。
+- 组件（component）：功能比较确定同时复杂度较高，例如用户选择器、地址选择器等，项目中只需要引入对应的 npm 包即可，项目不关心也无法修改组件内部的代码，只能通过组件定义的 props 控制。
+- 区块（block）：一般是一个 UI 模块，使用区块时会将区块代码拷贝到项目代码中，项目里可以对区块代码进行任何改动，因此区块后续的升级也不会对项目有任何影响，这是区块跟业务组件的最大区别。
+- 模板（scaffold）：即项目脚手架，用于项目初始化。
 
 基于以上三种不同粒度的物料，开发者可以快速开始前端项目开发。
 
 ![](https://img.alicdn.com/tfs/TB1jrKFXUD1gK0jSZFGXXbd3FXa-1990-1310.jpg)
 
 ## 物料开发工具
 
-我们通过 iceworks CLI 这个工具提供物料的开发与管理，其本身不耦合任何前端框架或工程体系，这意味着基于 iceworks CLI 可以开发 React/Vue/Angular 等各种前端体系的物料。iceworks 具有以下特性：
+我们通过 iceworks CLI 这个工具提供物料的开发与管理，其本身不耦合任何前端框架或工程体系，这意味着基于 iceworks CLI 可以开发 React/Vue/Angular 等各种前端体系的物料。iceworks CLI 具有以下特性：
 
 - 支持不同前端框架和工程的物料开发
 - 支持物料的初始化以及管理能力

docs/materials/get_start.md

@@ -69,4 +69,4 @@ $ iceworks generate
 
 接着我们可以通过 `iceworks sync` 方式将物料数据同步到物料中心，你也可以通过私有的服务托管，同步完成后我们会得到一个 url 可以访问到这些物料数据。
 
-接着在 iceworks IDE 中添加自定义物料填入 URL 即可在开发项目中使用这些物料。
+接着在 iceworks VS Code 插件中添加自定义物料填入 URL 即可在开发项目中使用这些物料。

docs/materials/guide/component.md

@@ -10,13 +10,18 @@ $ cd my-materials
 $ iceworks add component
 ```
 
-同时你也可以在单个仓库中开发业务组件，按照下面的方式初始化即可：
+有些场景下可能需要在单独仓库中开发业务组件，即一个仓库一个业务组件，可以按照下面这个方式：
 
 ```bash
-$ mkdir my-component && cd my-component
+# 新建组件文件夹
+$ mkdir my-component & cd my-component
+
+# 初始化
 $ iceworks init component
 ```
 
+> 如果是阿里内部的同学并且想接入 DEF 发布 npm 包，可以参考文档 [组件开发接入 DEF](https://yuque.alibaba-inc.com/ice/rdy99p/gbekwv)
+
 ## 组件开发调试
 
 ```bash
@@ -32,6 +37,7 @@ $ npm start -- --watch
 
 ```
 ├── demo                  # 组件 demo
+│      ├── simple.md
 │      └── usage.md
 ├── src                   # 组件源码
 │      ├── index.scss
@@ -127,17 +133,19 @@ order: 1
 
 ## 组件工程配置
 
-build-plugin-component 支持多个参数的配置。
+默认组件开发工程需要在 `build.json` 中引入 `build-plugin-component`：
 
-默认组件开发工程需要在 `build.json` 中引入 `build-plugin-component`:
 ```json
 {
   "plugins": [
-    "build-plugin-component"
+    ["build-plugin-component", {
+      // ...options
+    }]
   ]
 }
 ```
 
+插件支持的配置参数如下：
 
 ### basicComponents
 

docs/materials/guide/scaffold.md

@@ -0,0 +1,30 @@
+---
+title: 模板（脚手架）开发
+order: 4
+---
+
+推荐直接使用飞冰官方提供的模板，如果官方模板不能满足团队诉求，可以通过开发自定义的模板（即项目脚手架）。
+
+通过 `iceworks` 命令添加模板：
+
+```bash
+$ iceworks add scaffold
+```
+
+完成后，在 `scaffolds/` 目录下会生成脚手架文件结构。
+
+根据提示进入文件夹，安装依赖并开始开发：
+
+```bash
+$ cd scaffolds/SimpleScaffold
+$ npm install
+$ npm start
+```
+
+每个物料开发完成后，都需要先发布到 npm 才能使用，我们在当前路径执行 `npm publish` 发布 SimpleScaffold 脚手架：
+
+```bash
+npm publish
+```
+
+执行 publish 命令的时会自动执行 `npm run build` 和 `npm run screenshot`。build 命令完成区块的构建任务，而 screenshot 命令作用是生成脚手架截图，截图被用于 iceworks 展示。当然，你也可以手动截图图片作为截图，只需要截图以 `screenshot.png` 保存在当前目录即可。

docs/materials/guide/sync.md

@@ -40,3 +40,5 @@ order: 6
 ```javascript
 `https://unpkg.com/${packageName}@latest/build/materials.json`
 ```
+
+不管是将物料数据托管到 fusign.design 还是 unpkg，本质上都是通过 HTTP GET 请求获取物料数据，因此，除了以上方式，你也可以将物料数据的 JSON 文件放到你的 CDN 或某个后端接口上使用。

docs/materials/guide/usage.md

@@ -3,14 +3,16 @@ title: 使用物料
 order: 7
 ---
 
-物料数据托管同步之后，都会获得唯一的 URL 地址，此时只需将物料源地址配置到 iceworks 中即可使用。
+物料数据托管同步之后，都会获得唯一的 URL 地址，此时只需将物料源地址配置到 Iceworks 中即可使用。
 
-打开 iceworks，进入设置面板，在设置中新增自定义物料源，填写物料名称和物料源 URL，就可以在初始化项目或者添加页面时使用这份物料了。
+打开 VS Code，确定你已经安装了 [Iceworks 插件集合](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)，然后在 VS Code 中输入命令 Iceworks: Set 唤起设置面板：
 
-![](https://img.alicdn.com/tfs/TB1VY.ybwFY.1VjSZFqXXadbXXa-2790-1532.png)
+![](https://img.alicdn.com/tfs/TB1mnuDXCslXu8jSZFuXXXg7FXa-1082-685.png)
 
-关于 iceworks 使用，请查看 [iceworks 文档](https://ice.work/docs/iceworks/about)。
+点击「添加」按钮：
 
-> 不管是将物料数据托管到 fusign.design 还是 unpkg，本质上都是通过 HTTP GET 请求获取物料数据，因此，除了以上方式，你也可以将物料数据的 JSON 文件放到你的 CDN 或某个后端接口上使用。
+![](https://img.alicdn.com/tfs/TB1GosubCR26e4jSZFEXXbwuXXa-1039-743.png)
 
-iceworks 生成的物料数据是一份不包含物料源码的元数据，当用户在 iceworks 中添加物料 URL 后，iceworks 会向该 URL 请求物料数据，根据物料数据在页面中展示当前物料集合包含的组件、区块和项目。当用户选择使用物料时，iceworks 再通过 npm 下载源码。
+接着就可以在 Iceworks 里通过物料新建项目、拼装页面了。关于 Iceworks 更详细的使用，请查看 [Iceworks 文档](https://ice.work/docs/iceworks/about)。
+
+Iceworks 生成的物料数据是一份不包含物料源码的元数据，当用户在 Iceworks 中添加物料 URL 后，Iceworks 会向该 URL 请求物料数据，根据物料数据在页面中展示当前物料集合包含的组件、区块和项目。当用户选择使用物料时，Iceworks 再通过 npm 下载源码。

docs/materials/reference/custom.md

@@ -11,15 +11,15 @@ iceworks 初始化物料项目时可以选择一些内置的模板，同样也
 
 |        模板 npm 包名        | 是否内置|   说明   |   备注  |
 |----------------------------|-------|----------|--------|
+|@icedesign/ice-react-ts-material-template|是| React+TypeScript   |     |
 |@icedesign/ice-react-material-template|是|  React  |     |
 |@icedesign/ice-vue-material-template|是|  Vue  | 暂不支持业务组件    |
-|@icedesign/ice-react-ts-material-template|是| React+TypeScript   |     |
-|rax-template                             |是| 无线 | beta 阶段，不支持区块   |
+|@icedesign/rax-template                             |是| 无线跨端 |  |
 |@icedesign/material-chart-template|否| React+图表   | 仅支持业务组件开发    |
 
 对于没有内置的模板，可以通过 `iceworks init material @icedesign/material-chart-template` 的方式自定义模板名称。
 
-## 开发自定义模板
+## 开发自定义物料模板
 
 当以上这些物料模版不满足开发者需求时，可以开发自定义的物料模版。**但是我们非常不推荐开发者自定义模板**，因为这会带来非常严重的碎片化版本的问题，因此如果有此需求的话一定要跟飞冰团队沟通，一方面确认自定义的必要性，另一方面我们希望模板能统一维护与迭代，尽量将自定义模板贡献到官方模板列表里，我们非常欢迎社区共建。