feat: page material developer

extensions/iceworks-app/src/locales/en-US.json

@@ -30,5 +30,9 @@
   "extension.iceworksApp.showDepsQuickPick.quickPickItem.detail": "Install <%= label %>",
   "extension.iceworksApp.openEntryFile.ErrorMessage": "Cannot find entry",
   "extension.iceworksApp.extension.title": "Iceworks Settings",
-  "extension.iceworksApp.extension.emptyWorkplace": "Current workspace is empty, please open or create an application."
+  "extension.iceworksApp.extension.emptyWorkplace": "Current workspace is empty, please open or create an application.",
+  "extension.iceworksApp.views.pageViews.createPage": "Create Page",
+  "extension.iceworksApp.views.pageViews.createPageDetail": "Create page through page templates",
+  "extension.iceworksApp.views.pageViews.generatePage": "Generate Page",
+  "extension.iceworksApp.views.pageViews.generatePageDetail": "Generate page through assmebling component materials"
 }

extensions/iceworks-app/src/locales/zh-CN.json

@@ -30,5 +30,8 @@
   "extension.iceworksApp.showDepsQuickPick.quickPickItem.detail": "安装 <%= label %>",
   "extension.iceworksApp.openEntryFile.ErrorMessage": "没有找到入口",
   "extension.iceworksApp.extension.title": "设置 - Iceworks",
-  "extension.iceworksApp.extension.emptyWorkplace": "当前工作区为空，请打开应用或新建应用。"
+  "extension.iceworksApp.views.pageViews.createPage": "创建页面",
+  "extension.iceworksApp.views.pageViews.createPageDetail": "通过配置模板的方式创建页面",
+  "extension.iceworksApp.views.pageViews.generatePage": "生成页面",
+  "extension.iceworksApp.views.pageViews.generatePageDetail": "通过区块组装的方式生成页面"
 }

extensions/iceworks-app/src/views/pagesView.ts

@@ -4,6 +4,7 @@ import * as path from 'path';
 import { checkPathExists, registerCommand } from '@iceworks/common-service';
 import { pagesPath, projectPath } from '@iceworks/project-service';
 import openEntryFile from '../openEntryFile';
+import i18n from '../i18n';
 
 export class PagesProvider implements vscode.TreeDataProvider<PageTreeItem> {
   private workspaceRoot: string;
@@ -85,13 +86,36 @@ class PageTreeItem extends vscode.TreeItem {
   contextValue = 'page';
 }
 
+const addPageQuickPickItems: any[] = [
+  {
+    label: i18n.format('extension.iceworksApp.views.pageViews.createPage'),
+    detail: i18n.format('extension.iceworksApp.views.pageViews.createPageDetail'),
+    command: 'iceworks-ui-builder.create-page',
+  },
+  {
+    label: i18n.format('extension.iceworksApp.views.pageViews.generatePage'),
+    detail: i18n.format('extension.iceworksApp.views.pageViews.generatePageDetail'),
+    command: 'iceworks-ui-builder.generate-page',
+  },
+];
+function showAddPageQuickPicks() {
+  const quickPick = vscode.window.createQuickPick();
+  quickPick.items = addPageQuickPickItems;
+  quickPick.onDidChangeSelection((change) => {
+    // @ts-ignore
+    vscode.commands.executeCommand(change[0].command);
+  });
+  quickPick.onDidHide(() => quickPick.dispose());
+  quickPick.show();
+}
+
 export function createPagesTreeView(context: vscode.ExtensionContext) {
   const pagesProvider = new PagesProvider(context, projectPath);
   const treeView = vscode.window.createTreeView('pages', { treeDataProvider: pagesProvider });
 
   registerCommand('iceworksApp.pages.add', () => {
     console.log('iceworksApp: activate iceworks-ui-builder.generate-page');
-    vscode.commands.executeCommand('iceworks-ui-builder.generate-page');
+    showAddPageQuickPicks();
   });
   registerCommand('iceworksApp.pages.refresh', () => pagesProvider.refresh());
   registerCommand('iceworksApp.pages.openFile', (pagePath) => openEntryFile(pagePath));

extensions/iceworks-ui-builder/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 0.1.8
 
+- feat: support create page
 - feat: support component-generator dark theme
 
 ## 0.1.7

extensions/iceworks-ui-builder/README.md

@@ -31,7 +31,7 @@ Through GUI, you can quickly assemble pages with materials.
 ### Activate
 
 1. Open vscode command palette  by `Ctrl+Shift+P` or `⇧⌘P` .
-2. In the command palette, type 'Iceworks: Generate page' and click on the selected item or press enter on the keyboard to evoke page-builder extension.
+2. In the command palette, type `Iceworks: Generate page` and click on the selected item or press enter on the keyboard to evoke page-builder extension.
 
 ### Usage
 
@@ -41,6 +41,28 @@ Through GUI, you can quickly assemble pages with materials.
 
 ![generate-page](https://img.alicdn.com/tfs/TB1ErOEjnM11u4jSZPxXXahcXXa-1440-900.gif)
 
+## Create Page
+
+Create the page by visual configuration
+
+### Activate
+
+![demo](https://user-images.githubusercontent.com/56879942/91519113-4a211d00-e924-11ea-8fbe-36170dedc765.gif)
+
+1. Open vscode command palette  by `Ctrl+Shift+P` or `⇧⌘P` .
+2. In the command palette, type `Iceworks: Create page` and click on the selected item or press enter on the keyboard to evoke page-builder extension.
+
+### Usage
+
+![demo](https://user-images.githubusercontent.com/56879942/91536884-03451e80-e948-11ea-98e6-6bf89b62e932.gif)
+
+1. Select a page template.
+2. Click `NEXT` to enter the configuration page.
+3. Configure page templates to generate a customized page.
+4. Click the `CREATE PAGE` button to add the page information.
+5. Enter the name of the page and route information.
+6. Click `OK` button to generate page code, which will be generated under 'SRC/Pages/' directory.
+
 ## Create Component
 
 Iceworks provides a huge amount of high quality materials for React and [Rax](https://rax.js.org/) apps. You can select materials to create components.

extensions/iceworks-ui-builder/README.zh-CN.md

@@ -41,6 +41,28 @@
 
 ![拼接区块组装页面](https://img.alicdn.com/tfs/TB1ErOEjnM11u4jSZPxXXahcXXa-1440-900.gif)
 
+## 通过模板配置生成页面
+
+使用页面模板，可视化配置的方式生成页面。
+
+### 激活
+
+![使用示例](https://user-images.githubusercontent.com/56879942/91519104-442b3c00-e924-11ea-93a3-e52bbc83f05d.gif)
+
+1. 通过 `⇧⌘P` 或 `Ctrl+Shift+P` 快捷键唤醒命令面板
+2. 在命令面板中输入 `Iceworks: 创建页面` ，点击选中的项目或按下键盘回车键，激活页面生成插件
+
+### 使用
+
+![使用示例](https://user-images.githubusercontent.com/56879942/91536902-08a26900-e948-11ea-9c80-41fe4387b48f.gif)
+
+1. 选择一个页面模板
+2. 点击 `下一步` ，进入配置页面
+3. 进行页面模板的配置，通过使用这些配置生成个性化页面
+4. 点击 `创建页面` 按钮，添加页面信息表单
+5. 填入页面的名称，路由信息
+6. 点击 `确认` 按钮，生成页面代码，页面代码将生成到 `src/pages/` 目录下。
+
 ## 下载远程物料到本地
 
 Iceworks 为 React 和 [Rax](https://rax.js.org/) 应用提供了海量的高质量物料，通过选择物料快速创建前端组件。

extensions/iceworks-ui-builder/package.json

@@ -22,7 +22,8 @@
   "activationEvents": [
     "onCommand:iceworks-ui-builder.generate-page",
     "onCommand:iceworks-ui-builder.create-component",
-    "onCommand:iceworks-ui-builder.generate-component"
+    "onCommand:iceworks-ui-builder.generate-component",
+    "onCommand:iceworks-ui-builder.create-page"
   ],
   "repository": {
     "type": "git",
@@ -42,6 +43,10 @@
       {
         "command": "iceworks-ui-builder.generate-page",
         "title": "%iceworksUIBuilder.commands.generatePage.title%"
+      },
+      {
+        "command": "iceworks-ui-builder.create-page",
+        "title": "%iceworksUIBuilder.commands.createPage.title%"
       }
     ],
     "configuration": {
@@ -107,6 +112,7 @@
     "compile": "tsc -p ./tsconfig.json"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.160",
     "@types/node": "^13.11.0",
     "@types/vscode": "^1.41.0",
     "ts-loader": "^7.0.5",

extensions/iceworks-ui-builder/package.nls.json

@@ -4,5 +4,6 @@
   "iceworksUIBuilder.configuration.properties.iceworks.materialSources.description": "Iceworks material sources, decide which materials to use.",
   "iceworksUIBuilder.commands.generateComponent.title": "Iceworks: Generate Component",
   "iceworksUIBuilder.commands.createComponent.title": "Iceworks: Create Component",
-  "iceworksUIBuilder.commands.generatePage.title": "Iceworks: Generate Page"
+  "iceworksUIBuilder.commands.generatePage.title": "Iceworks: Generate Page",
+  "iceworksUIBuilder.commands.createPage.title": "Iceworks: Create Page"
 }

extensions/iceworks-ui-builder/package.nls.zh-cn.json

@@ -4,5 +4,6 @@
   "iceworksUIBuilder.configuration.properties.iceworks.materialSources.description": "Iceworks 物料源，决定使用哪些物料。",
   "iceworksUIBuilder.commands.generateComponent.title": "Iceworks: 生成组件",
   "iceworksUIBuilder.commands.createComponent.title": "Iceworks: 创建组件",
-  "iceworksUIBuilder.commands.generatePage.title": "Iceworks: 生成页面"
+  "iceworksUIBuilder.commands.generatePage.title": "Iceworks: 生成页面",
+  "iceworksUIBuilder.commands.createPage.title": "Iceworks: 创建页面"
 }

extensions/iceworks-ui-builder/src/extension.ts

@@ -89,6 +89,24 @@ export function activate(context: vscode.ExtensionContext) {
       activePageGeneraterWebview();
     })
   );
+  function activePageCreatorWebview() {
+    const webviewPanel: vscode.WebviewPanel = window.createWebviewPanel(
+      'iceworks',
+      i18n.format('extension.iceworksPageCreator.extensnion.webViewTitle'),
+      ViewColumn.One,
+      {
+        enableScripts: true,
+        retainContextWhenHidden: true,
+      }
+    );
+    webviewPanel.webview.html = getHtmlForWebview(extensionPath, 'pagecreator', true);
+    connectService(webviewPanel, context, { services, recorder });
+  }
+  subscriptions.push(
+    registerCommand('iceworks-ui-builder.create-page', function () {
+      activePageCreatorWebview();
+    })
+  );
 }
 
 export function deactivate() {}

extensions/iceworks-ui-builder/src/locales/en-US.json

@@ -1,5 +1,6 @@
 {
   "extension.iceworksComponentGenerator.extension.webviewTitle": "Generate Component - Iceworks",
   "extension.iceworksComponentBuilder.extension.webviewTitle": "Create Component - Iceworks",
-  "extension.iceworksPageBuilder.extensnion.webViewTitle": "Generate Page - Iceworks"
+  "extension.iceworksPageBuilder.extensnion.webViewTitle": "Generate Page - Iceworks",
+  "extension.iceworksPageCreator.extensnion.webViewTitle": "Create Page - Iceworks"
 }

extensions/iceworks-ui-builder/src/locales/zh-CN.json

@@ -1,5 +1,6 @@
 {
   "extension.iceworksComponentGenerator.extension.webviewTitle": "生成组件 - Iceworks",
   "extension.iceworksComponentBuilder.extension.webviewTitle": "创建组件 - Iceworks",
-  "extension.iceworksPageBuilder.extensnion.webViewTitle": "生成页面 - Iceworks"
+  "extension.iceworksPageBuilder.extensnion.webViewTitle": "生成页面 - Iceworks",
+  "extension.iceworksPageCreator.extensnion.webViewTitle": "创建页面 - Iceworks"
 }

extensions/iceworks-ui-builder/web/mocks/material/getData.json

@@ -246,5 +246,127 @@
       "publishTime": "2019-11-07T09:05:00.572Z",
       "updateTime": "2020-04-08T05:28:38.818Z"
     }
+  ],
+  "pages": [
+    {
+      "name": "BasicPage",
+      "title": "BasicPage",
+      "category": "Basic",
+      "views": [
+        {
+          "title": "",
+          "props": {},
+          "screenshot": "build/views/block_view1.png",
+          "html": "build/views/block_view1.html"
+        }
+      ],
+      "screenshot": "https://unpkg.com/@alifd/fusion-advanced-detail/screenshot.png",
+      "description": "intro block",
+      "homepage": "https://unpkg.com/@alifd/fusion-advanced-detail@0.1.9/build/index.html",
+      "categories": ["Information"],
+      "repository": "https://github.com/alibaba-fusion/materials/tree/master/blocks/AdvancedDetail",
+      "source": {
+        "type": "npm",
+        "npm": "@alifd/fusion-advanced-detail",
+        "version": "0.1.9",
+        "registry": "https://registry.npmjs.org"
+      },
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "screenshots": ["https://unpkg.com/@alifd/fusion-advanced-detail/screenshot.png"],
+      "publishTime": "2019-11-28T11:30:32.213Z",
+      "updateTime": "2020-03-31T12:36:39.300Z"
+    },
+    {
+      "name": "AdvancePage",
+      "title": "AdvancePage",
+      "category": "Other",
+      "views": [
+        {
+          "title": "",
+          "props": {},
+          "screenshot": "build/views/block_view1.png",
+          "html": "build/views/block_view1.html"
+        }
+      ],
+      "screenshot": "https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png",
+      "description": "intro block",
+      "homepage": "https://unpkg.com/@alifd/fusion-basic-detail@0.1.7/build/index.html",
+      "categories": ["Information"],
+      "repository": "https://github.com/alibaba-fusion/materials/tree/master/blocks/BasicDetail",
+      "source": {
+        "type": "npm",
+        "npm": "@alifd/fusion-basic-detail",
+        "version": "0.1.7",
+        "registry": "https://registry.npmjs.org"
+      },
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "screenshots": ["https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png"],
+      "publishTime": "2019-11-28T11:38:31.720Z",
+      "updateTime": "2020-03-31T12:52:50.478Z"
+    },
+    {
+      "name": "BasicDetail",
+      "title": "BasicDetail",
+      "category": "Information",
+      "views": [
+        {
+          "title": "",
+          "props": {},
+          "screenshot": "build/views/block_view1.png",
+          "html": "build/views/block_view1.html"
+        }
+      ],
+      "screenshot": "https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png",
+      "description": "intro block",
+      "homepage": "https://unpkg.com/@alifd/fusion-basic-detail@0.1.7/build/index.html",
+      "categories": ["Information"],
+      "repository": "https://github.com/alibaba-fusion/materials/tree/master/blocks/BasicDetail",
+      "source": {
+        "type": "npm",
+        "npm": "@alifd/fusion-basic-detail",
+        "version": "0.1.7",
+        "registry": "https://registry.npmjs.org"
+      },
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "screenshots": ["https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png"],
+      "publishTime": "2019-11-28T11:38:31.720Z",
+      "updateTime": "2020-03-31T12:52:50.478Z"
+    },
+    {
+      "name": "BasicDetail",
+      "title": "BasicDetail",
+      "category": "Information",
+      "views": [
+        {
+          "title": "",
+          "props": {},
+          "screenshot": "build/views/block_view1.png",
+          "html": "build/views/block_view1.html"
+        }
+      ],
+      "screenshot": "https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png",
+      "description": "intro block",
+      "homepage": "https://unpkg.com/@alifd/fusion-basic-detail@0.1.7/build/index.html",
+      "categories": ["Information"],
+      "repository": "https://github.com/alibaba-fusion/materials/tree/master/blocks/BasicDetail",
+      "source": {
+        "type": "npm",
+        "npm": "@alifd/fusion-basic-detail",
+        "version": "0.1.7",
+        "registry": "https://registry.npmjs.org"
+      },
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "screenshots": ["https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png"],
+      "publishTime": "2019-11-28T11:38:31.720Z",
+      "updateTime": "2020-03-31T12:52:50.478Z"
+    }
   ]
 }

extensions/iceworks-ui-builder/web/mocks/page/checkRouteConfigPathExists.json

@@ -0,0 +1 @@
+{}

extensions/iceworks-ui-builder/web/mocks/page/createPage.json

@@ -0,0 +1 @@
+{}

extensions/iceworks-ui-builder/web/mocks/page/getAll.json

@@ -0,0 +1 @@
+{}