激活码界面搞定了。

example/src/App.js

@@ -74,6 +74,8 @@ function parseStockData(data) {
 
 export default () => {
 
+  const [isActivation, setIsActivation] = React.useState(false);
+  const [activationCode, setActivationCode] = React.useState();
   const [loading, setLoading] = React.useState(true);
   const progressRef = React.useRef(null);
   /** @type {React.MutableRefObject<StockHeatmap>} */
@@ -113,6 +115,10 @@ export default () => {
   }, []);
   // ------------ Load data -------------
 
+  const handleActivation = ()=>{
+    console.log(activationCode)
+    setIsActivation(true)
+  }
   // ---------- window update ------------
   React.useEffect(() => {
     const updateFn = () => {
@@ -128,57 +134,78 @@ export default () => {
   // ---------- window update ------------
 
   return (
-    <React.Fragment>
+    <div className="wapper">
+      {isActivation && <React.Fragment>
+
+        {loading &&
+          <div className="loadingIndicator">
+            <div className="loadingSpinner">
+              <div className="loader">等待数据推送...</div>
+            </div>
+            <div ref={progressRef}> 等待数据推送 0%</div>
+          </div>
+        }
 
-      {loading &&
-        <div className="loadingIndicator">
-          <div className="loadingSpinner">
-            <div className="loader">等待数据推送...</div>
+        <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll}
+                      toggleAutoScroll={toggleAutoScroll} />
+
+        <div className="btnContainer">
+          <button onClick={() => {
+            if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60)
+          }}>1分钟视域
+          </button>
+          <button onClick={() => {
+            if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5)
+          }}>5分钟视域
+          </button>
+          <button onClick={() => {
+            if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10)
+          }}>10分钟视域
+          </button>
+          <button onClick={() => {
+            if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 15)
+          }}>15分钟视域
+          </button>
+          <button onClick={() => {
+            if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 30)
+          }}>30分钟视域
+          </button>
+          <button onClick={() => {
+            if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
+          }}>60分钟视域
+          </button>
+          {!autoScroll &&
+            <div className="playBtn" onClick={() => {
+              setAutoScroll(true)
+            }}> 继续
+            </div>
+          }
+          {/* <button onClick={() => { */}
+          {/*   const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00'); */}
+          {/*   let split = HHmmss.split(':'); */}
+          {/*   let position = (+split[0]-9)*3600 + (+split[1]*60) + (+split[2]); */}
+          {/*   if (heatmapRef.current !== null) heatmapRef.current.moveDataWindow(position); */}
+          {/*  }}>Set Position</button> */}
+        </div>
+      </React.Fragment>}
+      {!isActivation &&
+        <div className="layoutContainer">
+          <div className="activationBox">
+            <div className="title">
+              软件激活
+            </div>
+            <div className="iptWp">
+              <input placeholder="请输入激活码" onChange={(e)=>{
+                setActivationCode(e.target.value)
+              }} />
+            </div>
+            <div className="btnWp">
+              <div className="btn" onClick={handleActivation}>激 活</div>
+            </div>
           </div>
-          <div ref={progressRef}> 等待数据推送 0%</div>
         </div>
       }
+    </div>
 
-      <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll} toggleAutoScroll={toggleAutoScroll} />
-
-      <div className="btnContainer">
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60)
-        }}>1分钟视域
-        </button>
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5)
-        }}>5分钟视域
-        </button>
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10)
-        }}>10分钟视域
-        </button>
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 15)
-        }}>15分钟视域
-        </button>
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 30)
-        }}>30分钟视域
-        </button>
-        <button onClick={() => {
-          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
-        }}>60分钟视域
-        </button>
-        {!autoScroll &&
-          <div className="playBtn" onClick={() => {
-            setAutoScroll(true)
-          }}> 继续
-          </div>
-        }
-        {/* <button onClick={() => { */}
-        {/*   const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00'); */}
-        {/*   let split = HHmmss.split(':'); */}
-        {/*   let position = (+split[0]-9)*3600 + (+split[1]*60) + (+split[2]); */}
-        {/*   if (heatmapRef.current !== null) heatmapRef.current.moveDataWindow(position); */}
-        {/*  }}>Set Position</button> */}
-      </div>
-    </React.Fragment>
   )
 }

example/src/index.css

@@ -126,3 +126,59 @@ code {
   background: rgba(12, 116, 165, 0.8);
 
 }
+.wapper{
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.wapper .layoutContainer{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 100000;
+}
+.layoutContainer .activationBox{
+  box-sizing: border-box;
+  padding: 20px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  background-color: white;
+}
+.layoutContainer .activationBox .title{
+  font-size: 20px;
+}
+.layoutContainer .activationBox .iptWp{
+  padding: 20px 0;
+}
+.iptWp input{
+  width: 300px;
+  height: 30px;
+}
+
+.layoutContainer .activationBox .btnWp{
+  text-align: right;
+}
+.btnWp .btn{
+  cursor: pointer;
+  font-size: 14px;
+  padding: 8px 20px;
+  background-color: red;
+  display: inline-block;
+  background-color: #409eff;
+  color: white;
+  -webkit-user-select:none;/*webkit浏览器*/
+  -moz-user-select:none;/*火狐*/
+  -ms-user-select:none;/*IE10*/
+  user-select:none;
+}
+.btnWp .btn:hover{
+  background-color: #66b1ff;
+}
+.btnWp .btn:active{
+  background-color: #3a8ee6;
+}