Merge pull request #274 from ice-lab/release/0.2.0

Release 0.2.0

extensions/iceworks-app/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 0.2.1
+- feat: add quick entry in the editor title menu
+- fix: fail to set custom registry
+
 ## 0.2.0
 - feat: install dependencies automatically when node_modules  does not exist
 - feat: refresh dependencies list、pages list and components list automatically

extensions/iceworks-app/README.en.md

@@ -5,32 +5,90 @@ English | [简体中文](./README.md)
 
 # Iceworks Application Viewer
 
-It helps you preview your Universal Application, including the information of npm scripts, pages, components and node dependencies. It also supports quick installation or upgrade dependencies, adding new pages and components, and much more. 
+Preview and manage your application from a framework perspective, including npm scripts, pages, components and dependencies, friendly for React and [Rax](https://rax.js.org/).
 
 ## Usage
 
-### npm Scripts
+### Initialize panel 
 
-- Support viewing the executable npm scripts of your app
-- Support execute the npm scripts
+After you install the Iceworks-APP plugin, an `Iceworks` icon will be added to your activity bar. Click it to enter Iceworks panel.
 
-![script.gif](https://img.alicdn.com/tfs/TB1of.nHFT7gK0jSZFpXXaTkpXa-1272-786.gif)
+The initialization panel appears if your current workspace is empty or ** isn't React/Rax application **.
 
-###  Pages and Components
+![demo](https://user-images.githubusercontent.com/56879942/87553484-8e928980-c6e5-11ea-8183-a6ba7f4eae95.gif)
 
-- Support jumping to corresponding pages and components
-- Support adding pages and components(TODO)
+### Create a new project
 
-![pages&components.gif](https://img.alicdn.com/tfs/TB1tfArHHY1gK0jSZTEXXXDQVXa-1265-760.gif)
+When you open an empty folder, the initialization panel automatically invokes the create application process, which you can also invoke by clicking the Create Application button on the panel.
+
+![demo](https://user-images.githubusercontent.com/56879942/87407459-c4a41080-c5f4-11ea-882e-d198afc35413.png)
+
+#### Setting
+
+![demo](https://user-images.githubusercontent.com/56879942/87531798-d1903500-c6c4-11ea-9c6d-e19d6241c91a.gif)
+
+1. Click Settings to enter the Settings page
+2. Configure package management tools (default: npm)
+3. Configure default image source (default: Taobao image)
+4. Set up custom repositories (default: null)
+
+### Iceworks panel
+
+When your workspace is a React or Rax application, the Iceworks panel appears.
+
+#### View and execute npm Scripts
+
+![demo](https://user-images.githubusercontent.com/56879942/87393980-9f59d700-c5e1-11ea-9e07-0244926f54cc.gif)
+
+1. View executable script information in the left pane.
+2. Click the `Play` button to execute the script at terminal immediately.
+3. Click the `Stop` button to end the corresponding script executed at terminal.
+
+### Pages and Components
+
+#### Jump into corresponding pages and components
+
+![demo](https://user-images.githubusercontent.com/56879942/87393958-9963f600-c5e1-11ea-9c96-94fc10492577.gif)
+
+1. Click items in PAGES and COMPONENTS on the left panel.
+2. Jump into files of selected projects.
+
+#### Wake up create pages and generate components( [Create Pages](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-page-builder)｜[Generate Components](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-component-builder) )
+
+![demo](https://user-images.githubusercontent.com/56879942/87393958-9963f600-c5e1-11ea-9c96-94fc10492577.gif)
+
+1. Click `+` in PAGES header to jump into GENERATE PAGES  page.
+2. Click `+` in COMPONENTS header to jump into CREATE COMPONENT page.
 
 ### Node Dependencies
 
-- Support viewing the application dependency information
-- Support installing new dependencies and upgrading dependencies
-- Support installing and reinstalling dependencies
-- Support setting npm client and npm registry
+#### View the application dependency information and install new dependencies
+
+![demo](https://user-images.githubusercontent.com/56879942/87393973-9cf77d00-c5e1-11ea-8baa-96c8c41229cf.gif)
+
+1. View all  installed dependencies in the project in NODE DEPENDENCIES in the bottom of ICE panel.
+2. Click `⬆` button next to dependency item,  you can update  the dependency to the latest version.
+3. Click `Reinstall Dependencies` button on  NODE DEPENDENCIES header to reinstall all the dependencisce of the project.
+
+#### Install and reinstall dependencies
+
+![demo](https://user-images.githubusercontent.com/56879942/87393970-9bc65000-c5e1-11ea-9724-3bd47c4b21ed.gif)
+
+1. Click the `+` button on the NODE DEPENDENCIES header.
+2. Select Install product Dependency or Debug Devdependency on the command panel that appears.
+3. Type the npm package name and version information to be installed, such as' `typescript@latest`.
+4. The npm package will be installed automatically.
+   NOTE: If the package was installed, it will be reinstalled.
+
+## Iceworks command palette
+
+If you install [Iceworks suite] (https://marketplace.visualstudio.com/items?ItemName=iceWorks-team.iceWorks), you can activate other extensions in VS Code command palette.
+
+![demo](https://user-images.githubusercontent.com/56879942/87544740-8d5b5f80-c6d9-11ea-85ff-bc31501911e1.gif)
 
-![nodeDependencies.gif](https://img.alicdn.com/tfs/TB1SLgPXj39YK4jSZPcXXXrUFXa-1274-805.gif)
+1. Find Iceworks in the bottom right of VS Code.
+    > NOTE: if you do not find the Iceworks icon, Activate Extension the Iceworks plugin by following the action in 'Activate Extension'.
+2. Click the Iceworks plugin icon to enter the Iceworks command palette.
 
 ## More
 

extensions/iceworks-app/README.md

@@ -5,36 +5,94 @@
 
 # Iceworks 应用大纲树
 
-它可以帮助你预览你的前端应用，包括 npm 脚本，页面，组件和依赖信息。它还支持快速安装或升级依赖，添加新页面和组件等等。
+从框架视角预览和管理您应用的组织，包括 npm 脚本、页面、组件和依赖信息。对 React 和 [Rax](https://rax.js.org/) 应用友好。
 
-## 用法
+## 功能
 
-### npm 脚本信息
+### 侧边栏 - 初始化
 
-- 支持查看应用可执行的 npm 脚本
-- 支持快速执行 npm 脚本
+当您安装了插件之后，VS Code 的活动栏上会增加 Iceworks 图标，单击此图标进入应用大纲树插件。
 
-![script.gif](https://img.alicdn.com/tfs/TB1of.nHFT7gK0jSZFpXXaTkpXa-1272-786.gif)
+如您当前的**工作区为空**或**非 React/Rax 应用**，则会出现初始化侧边栏。
 
-###  页面和组件信息
+![使用示例](https://user-images.githubusercontent.com/56879942/87553484-8e928980-c6e5-11ea-8183-a6ba7f4eae95.gif)
 
-- 支持快速跳转至对应的页面和组件
-- 支持快速添加页面和组件 (TODO)
+#### 创建项目
 
-![pages&components.gif](https://img.alicdn.com/tfs/TB1tfArHHY1gK0jSZTEXXXDQVXa-1265-760.gif)
+当您打开一个空文件夹时，初始化侧边栏将自动唤起创建应用流程，您也可以通过点击侧边栏上的「创建应用」按钮来唤起该流程。
 
-### 应用依赖信息
+![使用示例](https://user-images.githubusercontent.com/56879942/87407459-c4a41080-c5f4-11ea-882e-d198afc35413.png)
 
-- 支持查看应用的依赖信息
-- 支持安装新依赖和升级依赖
-- 支持一键安装和重装依赖
-- 支持设置 npm 包管理工具和镜像地址
+#### 设置 
 
-![nodeDependencies.gif](https://img.alicdn.com/tfs/TB1SLgPXj39YK4jSZPcXXXrUFXa-1274-805.gif)
+![使用示例](https://user-images.githubusercontent.com/56879942/87531798-d1903500-c6c4-11ea-9c6d-e19d6241c91a.gif)
+
+1. 点击设置，进入设置页面
+2. 配置包管理工具（默认为 npm ）
+3. 配置默认镜像源（默认为淘宝网镜像）
+4. 选择自定义物料库 (无默认外部物料库)
+
+### 侧边栏 - 大纲树
+
+当您的工作区是一个 React 或 Rax 应用，则会出现大纲树侧边栏。
+
+#### 查看和执行应用的 npm 脚本
+
+![使用示例](https://user-images.githubusercontent.com/56879942/87393980-9f59d700-c5e1-11ea-9e07-0244926f54cc.gif)
+
+1. 在左侧的面板处查看可执行的脚本信息；
+2. 点击 `播放按钮` ，立即在终端执行脚本；
+3. 点击 `终止按钮` ，结束在终端执行的对应脚本。
+
+#### 页面和组件信息
+
+##### 快速跳转至对应页面和组件的源码
+
+![使用示例](https://user-images.githubusercontent.com/56879942/87393958-9963f600-c5e1-11ea-9c96-94fc10492577.gif)
+
+1. 点击左侧面板中页面列表和组件列表中的选项。
+2. 跳转到所选项目所在的源码文件
+
+##### 支持激活添加页面和组件功能 （使用方法参照 [生成页面](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-page-builder)｜[创建组件](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-component-builder) ）
+
+![使用示例](https://user-images.githubusercontent.com/56879942/87393953-949f4200-c5e1-11ea-896a-fd2d592050e0.gif)
+
+1. 点击页面列表标题栏的 `+` 进入生成页面界面；
+2. 点击组件列表标题栏的 `+` 进入创建组件界面。
+
+#### 应用依赖信息
+
+##### 查看依赖信息、升级依赖包或重装应用依赖
+
+![使用示例](https://user-images.githubusercontent.com/56879942/87393973-9cf77d00-c5e1-11ea-8baa-96c8c41229cf.gif)
+
+1. 在左下角依赖库中查看应用安装的所有依赖；
+2. 点击依赖项目旁边的 `⬆️` 按钮，即可更新到最新依赖；
+3. 点击依赖列表标题框上的 `重装依赖` 按钮，即可重装应用的所有依赖包。
+
+##### 一键安装或重装指定依赖
+
+![使用示例](https://user-images.githubusercontent.com/56879942/87393970-9bc65000-c5e1-11ea-9724-3bd47c4b21ed.gif)
+
+1. 点击依赖列表标题框上面的 `+` 按钮；
+2. 在出现的命令面板上选择安装为 Dependencies (生产环境的依赖)或 devDependencies (开发环境的依赖)；
+3. 输入需要安装的 npm 包及版本信息，例如 `typescript@latest` ；
+4. npm 包将会自动安装，如果这个包已经添加到了依赖中，那么将会重新安装。
+
+
+### 命令面板
+
+您可以通过点击窗口右下角状态栏上的「Iceworks」按钮激活 Iceworks 命令面板。
+
+![使用示例](https://user-images.githubusercontent.com/56879942/87544740-8d5b5f80-c6d9-11ea-85ff-bc31501911e1.gif)
+
+1. 找到 VS Code 右下角的 Iceworks 。
+    > 注意 : 如果没有 Iceworks 图标，请按照 `激活` 章节的内容来激活此按钮。
+2. 点击 Iceworks 按钮，打开命令面板。
 
 ## 更多
 
-访问 [Iceworks Pack](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks) 了解更多 Iceworks 相关功能。
+访问 [Iceworks 套件](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)获取更多功能。
 
 ## License