feat: custom scaffold (#802)

* fix: custom scaffold build error * fix: style * fix: style * chore: version * feat: add entry in iceworks-app * chore: changelog * fix: switch component default param Co-authored-by: luhc228 <luhengchang228@gmail.com>
apptools-lab · Mar 4, 2021 · 49a1f5d · 49a1f5d
1 parent 8d948d5
commit 49a1f5d
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 61 deletions.
diff --git a/extensions/iceworks-app/CHANGELOG.md b/extensions/iceworks-app/CHANGELOG.md
@@ -6,6 +6,7 @@
 - fix: preview frame mobile mode switch
 - feat: preview frame add page select
 - feat: auto open preview frame when `npm run start` in O2
+- feat: add custom-scaffold entry
 - chore: add icon for WebviewPanel
 
 ## 0.8.1

diff --git a/extensions/iceworks-app/src/quickPicks/options.ts b/extensions/iceworks-app/src/quickPicks/options.ts
@@ -15,6 +15,14 @@ export default [
       return vscode.extensions.getExtension('iceworks-team.iceworks-project-creator');
     },
   },
+  {
+    label: i18n.format('extension.iceworksApp.showEntriesQuickPick.customScaffold.label'),
+    detail: i18n.format('extension.iceworksApp.showEntriesQuickPick.customScaffold.detail'),
+    command: 'iceworks-project-creator.custom-scaffold.start',
+    async condition() {
+      return vscode.extensions.getExtension('iceworks-team.iceworks-project-creator');
+    },
+  },
   {
     label: i18n.format('extension.iceworksApp.showEntriesQuickPick.dashboard.label'),
     detail: i18n.format('extension.iceworksApp.showEntriesQuickPick.dashboard.detail'),

diff --git a/extensions/iceworks-project-creator/.vscodeignore b/extensions/iceworks-project-creator/.vscodeignore
@@ -1,9 +1,7 @@
 .vscode/**
 .vscode-test/**
 .gitignore
-**/tsconfig.json
 **/*.map
-**/*.ts
 web/**
 node_modules
 !node_modules/prettier

diff --git a/extensions/iceworks-project-creator/package.json b/extensions/iceworks-project-creator/package.json
@@ -20,6 +20,7 @@
   "icon": "assets/logo.png",
   "activationEvents": [
     "onCommand:iceworks-project-creator.create-project.start",
+    "onCommand:iceworks-project-creator.custom-scaffold.start",
     "onStartupFinished"
   ],
   "main": "./build/extension.js",
@@ -28,6 +29,10 @@
       {
         "command": "iceworks-project-creator.create-project.start",
         "title": "%iceworksProjectCreator.create-project.commands.start.title%"
+      },
+      {
+        "command": "iceworks-project-creator.custom-scaffold.start",
+        "title": "%iceworksProjectCreator.custom-scaffold.commands.start.title%"
       }
     ],
     "configuration": {
@@ -61,6 +66,7 @@
   "devDependencies": {
     "@types/node": "^13.11.0",
     "@types/vscode": "^1.41.0",
+    "copy-webpack-plugin": "^6.4.1",
     "ts-loader": "^7.0.5",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"

diff --git a/extensions/iceworks-project-creator/web/src/components/CustomSwitch/index.tsx b/extensions/iceworks-project-creator/web/src/components/CustomSwitch/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Switch } from '@alifd/next';
 
-const SwitchComponent = ({ checked, onChange }) => (
-  <Switch checked={checked} onChange={onChange} />
+const SwitchComponent = ({ checked, onChange, size }) => (
+  <Switch checked={checked} onChange={onChange} size={size || 'medium'} />
 );
 
 export default SwitchComponent;
diff --git a/.../iceworks-project-creator/web/src/pages/CreateProject/components/ScaffoldMarket/index.tsx b/.../iceworks-project-creator/web/src/pages/CreateProject/components/ScaffoldMarket/index.tsx
@@ -116,13 +116,13 @@ const ScaffoldMarket = ({
     }
   }
 
-  // async function onAddScaffoldCardClick() {
-  //   try {
-  //     await callService('common', 'executeCommand', 'iceworks-project-creator.custom-scaffold.start');
-  //   } catch (e) {
-  //     Notification.error({ content: e.message });
-  //   }
-  // }
+  async function onAddScaffoldCardClick() {
+    try {
+      await callService('common', 'executeCommand', 'iceworks-project-creator.custom-scaffold.start');
+    } catch (e) {
+      Notification.error({ content: e.message });
+    }
+  }
 
   useEffect(() => {
     initData();
@@ -210,7 +210,7 @@ const ScaffoldMarket = ({
                             />
                           );
                         })}
-                        {/* {selectedSource.name === 'PC Web' && <AddScaffoldCard onClick={onAddScaffoldCardClick} />} */}
+                        {selectedSource.name === 'PC Web' && <AddScaffoldCard onClick={onAddScaffoldCardClick} />}
                       </>
                     ) : (
                         <NotFound

diff --git a/...ks-project-creator/web/src/pages/CustomScaffold/components/LayoutConfig/index.module.scss b/...ks-project-creator/web/src/pages/CustomScaffold/components/LayoutConfig/index.module.scss
@@ -1,6 +1,6 @@
 .container {
   .list {
-    margin-bottom: 12px;
+    margin-bottom: 28px;
   }
 
   .btns {

diff --git a/...s/iceworks-project-creator/web/src/pages/CustomScaffold/components/LayoutConfig/index.tsx b/...s/iceworks-project-creator/web/src/pages/CustomScaffold/components/LayoutConfig/index.tsx
@@ -41,6 +41,7 @@ const LayoutConfig = ({ value, onChange: onScaffoldConfigChange }) => {
             key={item.name}
             extra={
               <CustomSwitch
+                size="small"
                 checked={layout[item.name]}
                 onChange={(checked: boolean) => handleChange(item.name, checked)}
               />
@@ -50,7 +51,7 @@ const LayoutConfig = ({ value, onChange: onScaffoldConfigChange }) => {
         )}
       />
       <HeaderTitle title={intl.formatMessage({ id: 'web.iceworksProjectCreator.customScaffold.layoutStyle.title' })} />
-      <Button.Group className={styles.btns}>
+      <Button.Group className={styles.btns} size="small">
         {
           layoutStyleDataSource.map(item => (
             <Button

diff --git a/...ks-project-creator/web/src/pages/CustomScaffold/components/ScaffoldForm/index.module.scss b/...ks-project-creator/web/src/pages/CustomScaffold/components/ScaffoldForm/index.module.scss
@@ -1,33 +1,52 @@
-.scaffoldScaffold {
+.scaffoldForm {
   position: relative;
-  width: 100%;
+  width: 100vw;
   height: calc(100vh - 160px);
 
   .content {
     height: calc(100vh - 220px);
+    display: flex;
+    flex-direction: row;
 
     .scaffoldTemplateIframe {
       height: 100%;
-      width: 96%;
+      margin-left: 30px;
+      margin-right: 40px;
+      flex: 1;
     }
 
-    .drawerBtn {
+    .configBtn {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
-      top: 40px;
-      right: -30px;
-      height: 48px;
-      width: 48px;
+      height: 40px;
+      width: 40px;
       cursor: pointer;
       background: $color-brand1-6;
+      top: 0;
+      right: 0;
+      border-radius: 4px 0 0 4px;
+    }
+
+    .closeConfigBtn {
+      top: calc(50% - 60px);
+      right: 300px;
+      height: 80px;
+      width: 16px;
+    }
+    .config {
+      width: 300px;
+      height: 100%;
+      background-color: #2b2b2b;
+      padding: 20px;
     }
   }
 
   .action {
     position: absolute;
     bottom: 0;
     right: 0;
+    padding: 0 30px;
   }
 }
diff --git a/...s/iceworks-project-creator/web/src/pages/CustomScaffold/components/ScaffoldForm/index.tsx b/...s/iceworks-project-creator/web/src/pages/CustomScaffold/components/ScaffoldForm/index.tsx
@@ -1,20 +1,17 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Drawer, Icon } from '@alifd/next';
+import classnames from 'classnames';
+import { Icon } from '@alifd/next';
 import LayoutConfig from '../LayoutConfig';
 import { Base64 } from 'js-base64';
 import styles from './index.module.scss';
 
 const Scaffoldform = ({ children, onChange, scaffoldValue }) => {
   const iframeRef = useRef(null);
 
-  const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
+  const [configVisible, setConfigVisible] = useState<boolean>(true);
 
-  const onDrawerOpen = () => {
-    setDrawerVisible(true);
-  };
-
-  const onDrawerClose = () => {
-    setDrawerVisible(false);
+  const onToggle = () => {
+    setConfigVisible(!configVisible);
   };
 
   const sendMessage = (content: string) => {
@@ -35,18 +32,17 @@ const Scaffoldform = ({ children, onChange, scaffoldValue }) => {
     sendMessage(JSON.stringify(scaffoldValue));
   }, [scaffoldValue]);
   return (
-    <div className={styles.scaffoldScaffold}>
+    <div className={styles.scaffoldForm}>
       <div className={styles.content}>
         <iframe ref={iframeRef} className={styles.scaffoldTemplateIframe} frameBorder="0" name="scaffoldTemplate" />
-        <div onClick={() => onDrawerOpen()} className={styles.drawerBtn}><Icon type="set" size="large" /></div>
-        <Drawer
-          visible={drawerVisible}
-          placement="right"
-          width={360}
-          onClose={onDrawerClose}
-        >
-          <LayoutConfig value={scaffoldValue} onChange={onChange} />
-        </Drawer>
+        <div onClick={() => onToggle()} className={classnames(styles.configBtn, { [styles.closeConfigBtn]: configVisible })}><Icon type={configVisible ? 'arrow-right' : 'set'} size="large" /></div>
+        {
+          configVisible && (
+          <div className={styles.config}>
+            <LayoutConfig value={scaffoldValue} onChange={onChange} />
+          </div>
+          )
+        }
       </div>
       <div className={styles.action}>{children}</div>
     </div>

diff --git a/extensions/iceworks-project-creator/web/src/pages/CustomScaffold/index.module.scss b/extensions/iceworks-project-creator/web/src/pages/CustomScaffold/index.module.scss
@@ -6,13 +6,14 @@
 
   :global {
     .next-card-content-container {
-      padding: 0 30px;
+      padding: 0 0 16px 0;
     }
   }
   .header {
     display: flex;
     justify-content: space-between;
     margin: 30px 0 50px;
+    padding: 0 30px;
 
     .title {
       font-size: 24px;
@@ -31,3 +32,8 @@
 .btn {
   margin-right: 10px;
 }
+
+.createProjectForm {
+  margin: 0 30px;
+  width: 100%;
+}
diff --git a/extensions/iceworks-project-creator/web/src/pages/CustomScaffold/index.tsx b/extensions/iceworks-project-creator/web/src/pages/CustomScaffold/index.tsx
@@ -83,7 +83,6 @@ const CustomScaffold = () => {
     setPrevBtnDisabled(true);
     const { projectPath, projectName, scaffold } = values;
     values.scaffold = scaffold;
-    console.log('CustomScaffold value.scaffold ===>', values.scaffold);
     try {
       const isPathExists = await callService('common', 'checkPathExists', projectPath, projectName);
       if (isPathExists) {
@@ -120,25 +119,27 @@ const CustomScaffold = () => {
         <FormattedMessage id="web.iceworksProjectCreator.CreateProject.nextStep" />
       </Button>
     </ScaffoldForm>,
-    <CreateProjectForm
-      value={value}
-      onOpenFolderDialog={onOpenFolderDialog}
-      onChange={onFormChange}
-      errorMsg={errorMsg}
-      loading={loading}
-    >
-      <Button onClick={goPrev} className={styles.btn} disabled={prevBtnDisabled}>
-        <FormattedMessage id="web.iceworksProjectCreator.CreateProject.previous" />
-      </Button>
-      <Form.Submit
-        type="primary"
-        onClick={(values, error) => onProjectDetailSubmit(values, error)}
-        validate
+    <div className={styles.createProjectForm}>
+      <CreateProjectForm
+        value={value}
+        onOpenFolderDialog={onOpenFolderDialog}
+        onChange={onFormChange}
+        errorMsg={errorMsg}
         loading={loading}
       >
-        <FormattedMessage id="web.iceworksProjectCreator.CreateProject.complete" />
-      </Form.Submit>
-    </CreateProjectForm>,
+        <Button onClick={goPrev} className={styles.btn} disabled={prevBtnDisabled}>
+          <FormattedMessage id="web.iceworksProjectCreator.CreateProject.previous" />
+        </Button>
+        <Form.Submit
+          type="primary"
+          onClick={(values, error) => onProjectDetailSubmit(values, error)}
+          validate
+          loading={loading}
+        >
+          <FormattedMessage id="web.iceworksProjectCreator.CreateProject.complete" />
+        </Form.Submit>
+      </CreateProjectForm>
+    </div>,
   ];
 
   useEffect(() => {

diff --git a/...ons/iceworks-project-creator/web/src/pages/ScaffoldTemplate/layouts/BasicLayout/index.tsx b/...ons/iceworks-project-creator/web/src/pages/ScaffoldTemplate/layouts/BasicLayout/index.tsx
@@ -95,7 +95,6 @@ export default function BasicLayout({
 
   useEffect(() => {
     window.addEventListener('message', handleMessageReceiver, true);
-
     return () => {
       window.removeEventListener('message', handleMessageReceiver, true);
     };

diff --git a/extensions/iceworks-project-creator/webpack.config.js b/extensions/iceworks-project-creator/webpack.config.js
@@ -1,12 +1,18 @@
 const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const tsConfigPath = path.join(__dirname, 'tsconfig.json');
+const outputPath = path.resolve(__dirname, 'build');
+const scaffoldGeneratorLibPath = path.join(require.resolve('ice-scaffold-generator'), '..');
 
 const config = {
   target: 'node',
   entry: './src/extension.ts',
+  node: {
+    __dirname: false,
+  },
   output: {
-    path: path.resolve(__dirname, 'build'),
+    path: outputPath,
     filename: 'extension.js',
     libraryTarget: 'commonjs2',
     devtoolModuleFilenameTemplate: '../[resource-path]',
@@ -35,6 +41,14 @@ const config = {
       },
     ],
   },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        { from: path.join(scaffoldGeneratorLibPath, 'scaffold'), to: path.join(outputPath, 'scaffold') },
+        { from: path.join(scaffoldGeneratorLibPath, 'template'), to: path.join(outputPath, 'template') },
+      ],
+    }),
+  ],
 };
 
 module.exports = (env, argv) => {