alibaba · chenbin92 · May 5, 2019 · Apr 24, 2019 · Apr 25, 2019 · Apr 25, 2019
diff --git a/packages/iceworks-client/package.json b/packages/iceworks-client/package.json
@@ -6,10 +6,11 @@
     "@alifd/next": "^1.13.13",
     "@alifd/theme-2": "^0.0.22",
     "@alifd/theme-3": "^0.1.0",
+    "@icedesign/notification": "^1.0.5",
     "alife-logger": "^1.5.1",
     "classnames": "^2.2.6",
+    "cookies-js": "^1.2.3",
     "deepmerge": "^3.2.0",
-    "iceworks-events": "^0.1.0",
     "icestore": "^0.1.0",
     "lodash.map": "^4.6.0",
     "loglevel": "^1.6.1",

diff --git a/packages/iceworks-client/public/index.html b/packages/iceworks-client/public/index.html
@@ -10,5 +10,11 @@
 
   <body>
     <div id="iceworks"></div>
+    <script>
+      window.iceworksConfig = {
+        socketUrl: "//127.0.0.1:7001/",
+        apiUrl: "//127.0.0.1:7001/api/",
+      };
+    </script>
   </body>
 </html>
diff --git a/packages/iceworks-client/src/components/ConnectionBar/index.js b/packages/iceworks-client/src/components/ConnectionBar/index.js
diff --git a/packages/iceworks-client/src/components/ConnectionBar/index.module.scss b/packages/iceworks-client/src/components/ConnectionBar/index.module.scss
diff --git a/packages/iceworks-client/src/components/GlobalBar/index.js b/packages/iceworks-client/src/components/GlobalBar/index.js
@@ -1,8 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import stores from '@stores';
 import styles from './index.module.scss';
 
 const GlobalBar = () => {
-  return <div className={styles.globalBar}>Global Bar</div>;
+  const project = stores.useStore('project');
+
+  useEffect(() => {
+    project.refresh();
+  }, []);
+
+  return (
+    <div className={styles.globalBar}>
+      {project.dataSource.name}
+    </div>
+  );
 };
 
 export default GlobalBar;
diff --git a/packages/iceworks-client/src/components/XtermTerminal/index.js b/packages/iceworks-client/src/components/XtermTerminal/index.js
@@ -1,31 +1,39 @@
 import React, { useRef, useEffect } from 'react';
 // import PropTypes from 'prop-types';
 import { Terminal } from 'xterm';
-import { ICEWORKS_TASK_DEV_DATA } from 'iceworks-events';
-import { useSocket } from '@hooks/useSocket';
+import useSocket from '@hooks/useSocket';
 import * as fit from 'xterm/dist/addons/fit/fit';
 import * as webLinks from 'xterm/dist/addons/webLinks/webLinks';
+import stores from '@stores';
 import 'xterm/dist/xterm.css';
+import log from '@utils/logger';
 import styles from './index.module.scss';
 
+const logger = log.getLogger('xterm');
+
 Terminal.applyAddon(fit);
 Terminal.applyAddon(webLinks);
 
 const XtermTerminal = () => {
   const xtermRef = useRef(null);
+  const project = stores.useStore('project');
 
   const term = new Terminal({
     cols: 100,
     rows: 30,
   });
 
   useEffect(() => {
+    logger.debug('xterm loaded.');
+
+    project.refresh();
+
     term.open(xtermRef.current);
     term.fit();
-    term.write('\x1B[1;3;31mIceworks CLI\x1B[0m $ ');
+    term.write(`\x1B[1;3;31m${project.dataSource.name}\x1B[0m $ `);
   }, []);
 
-  useSocket(ICEWORKS_TASK_DEV_DATA, (data) => {
+  useSocket('project.index.dev.data', (data) => {
     term.write(data);
   });
 

diff --git a/...s-client/src/hooks/useSocket/useSocket.js → ...es/iceworks-client/src/hooks/useSocket.js b/...s-client/src/hooks/useSocket/useSocket.js → ...es/iceworks-client/src/hooks/useSocket.js
@@ -1,11 +1,9 @@
 /* eslint consistent-return:0 */
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import logger from '@utils/logger';
-import Context from './Context';
-
-function useSocket(eventName, callback) {
-  const [socket] = useContext(Context);
+import socket from '@src/socket';
 
+export default function useSocket(eventName, callback) {
   useEffect(() => {
     if (eventName && callback) {
       logger.debug(`socket on ${eventName}.`);
@@ -20,5 +18,3 @@ function useSocket(eventName, callback) {
 
   return socket;
 }
-
-export default useSocket;
diff --git a/packages/iceworks-client/src/hooks/useSocket/Context.js b/packages/iceworks-client/src/hooks/useSocket/Context.js
diff --git a/packages/iceworks-client/src/hooks/useSocket/SocketProvider.js b/packages/iceworks-client/src/hooks/useSocket/SocketProvider.js
diff --git a/packages/iceworks-client/src/hooks/useSocket/index.js b/packages/iceworks-client/src/hooks/useSocket/index.js
diff --git a/packages/iceworks-client/src/index.js b/packages/iceworks-client/src/index.js
@@ -1,31 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import '@utils/logger';
 import '@alifd/next/reset.scss';
 
+import logger from '@utils/logger';
 import MainLayout from '@layouts/MainLayout/index';
 import LocaleProvider from '@components/Locale';
 import { ThemeProvider } from '@components/ThemeProvider';
-import { SocketProvider } from '@hooks/useSocket';
-import appConfig from './appConfig';
-
 import './global.scss';
 import './variables.scss';
 
-const URL = appConfig.socketUrl;
-
 const App = () => {
+  useEffect(() => {
+    logger.info('App loaded.');
+  }, []);
+
   return (
-    <SocketProvider url={URL}>
-      <LocaleProvider>
-        <ThemeProvider>
-          <Router>
-            <Route path="/" component={MainLayout} />
-          </Router>
-        </ThemeProvider>
-      </LocaleProvider>
-    </SocketProvider>
+    <LocaleProvider>
+      <ThemeProvider>
+        <Router>
+          <Route path="/" component={MainLayout} />
+        </Router>
+      </ThemeProvider>
+    </LocaleProvider>
   );
 };
 

diff --git a/packages/iceworks-client/src/layouts/MainLayout/index.js b/packages/iceworks-client/src/layouts/MainLayout/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import NavigationBar from '@components/NavigationBar';
 import RouteRender from '@components/RouteRender';
-import ConnectionBar from '@components/ConnectionBar';
 import GlobalBar from '@components/GlobalBar';
 import menuConfig from '@src/menuConfig';
 import routerConfig from '@src/routerConfig';
@@ -10,7 +9,6 @@ import styles from './index.module.scss';
 const MainLayout = () => {
   return (
     <div className={styles.container}>
-      <ConnectionBar />
 
       <div className={styles.content}>
         <NavigationBar menuData={menuConfig} />

diff --git a/packages/iceworks-client/src/pages/Dev/index.js b/packages/iceworks-client/src/pages/Dev/index.js
@@ -1,26 +1,38 @@
 import React from 'react';
 import { Button } from '@alifd/next';
-import {
-  ICEWORKS_TASK_DEV_OPEN,
-  ICEWORKS_TASK_DEV_DATA,
-} from 'iceworks-events';
 import Card from '@components/Card';
 import Icon from '@components/Icon';
 import Modal from '@components/Modal';
 import XtermTerminal from '@components/XtermTerminal';
 import useModal from '@hooks/useModal';
-import { useSocket } from '@hooks/useSocket';
-import logger from '@utils/logger';
+import stores from '@stores';
+import IceNotification from '@icedesign/notification';
 import styles from './index.module.scss';
 
 const Dev = () => {
+  const project = stores.useStore('project');
   const { on, toggleModal } = useModal();
-  const socket = useSocket(ICEWORKS_TASK_DEV_DATA, (data) => {
-    logger.debug(ICEWORKS_TASK_DEV_DATA, data);
-  });
 
-  const dev = () => {
-    socket.emit(ICEWORKS_TASK_DEV_OPEN, 'dev');
+  const devStart = async () => {
+    try {
+      await project.devStart();
+    } catch (error) {
+      IceNotification.error({
+        message: '启动调试服务失败',
+        description: error.message || '当前项目依赖未安装或依赖缺失，请重装依赖后重试。',
+      });
+    }
+  };
+
+  const devStop = async () => {
+    try {
+      await project.devStop();
+    } catch (error) {
+      IceNotification.error({
+        message: '终止调试服务失败',
+        description: error.message || '请重试。',
+      });
+    }
   };
 
   return (
@@ -33,10 +45,17 @@ const Dev = () => {
       <div className={styles.actionBar}>
         {/* Left Button Group */}
         <div className={styles.leftActionBar}>
-          <Button type="primary" className={styles.btn} onClick={dev}>
-            <Icon type="start" className={styles.icon} />
-            运行
-          </Button>
+          {
+            project.dataSource.devStatus !== 'working' ?
+              <Button type="primary" className={styles.btn} onClick={devStart}>
+                <Icon type="start" className={styles.icon} />
+                运行
+              </Button> :
+              <Button type="primary" className={styles.btn} onClick={devStop}>
+                <Icon type="stop" className={styles.icon} />
+                停止
+              </Button>
+          }
           <Button type="secondary" className={styles.btn} onClick={toggleModal}>
             <Icon type="settings" className={styles.icon} />
             设置

diff --git a/packages/iceworks-client/src/pages/Material/index.js b/packages/iceworks-client/src/pages/Material/index.js
@@ -4,15 +4,12 @@ import stores from '@stores';
 const Material = () => {
   const materials = stores.useStore('materials');
 
-  const handleClick = () => {
-  };
-
   useEffect(() => {
     materials.refresh();
   }, []);
 
   return (
-    <div onClick={handleClick}>
+    <div>
       <h2>Material</h2>
       <p>
         {materials.dataSource.map(({ name }) => {

diff --git a/packages/iceworks-client/src/pages/Project/components/Dependencies/index.js b/packages/iceworks-client/src/pages/Project/components/Dependencies/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import stores from '../../stores';
+
+const Page = () => {
+  const dependencies = stores.useStore('dependencies');
+  const { dataSource } = dependencies;
+
+  return (
+    <div>
+      <h3>Dependencies</h3>
+      <div>
+        <ul>
+          {dataSource.map(({ package: _package }) => {
+            return <li>{_package}</li>;
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Page;
diff --git a/packages/iceworks-client/src/pages/Project/components/Pages/index.js b/packages/iceworks-client/src/pages/Project/components/Pages/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import stores from '../../stores';
+
+const Page = () => {
+  const pages = stores.useStore('pages');
+  const { dataSource } = pages;
+
+  return (
+    <div>
+      <h3>Pages</h3>
+      <div>
+        <ul>
+          {dataSource.map(({ name }) => {
+            return <li>{name}</li>;
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Page;