登录验证功能完成。

example/package-lock.json

@@ -1,17 +1,20 @@
 {
-  "name": "@rongmz/react-stock-heatmap-example",
-  "version": "0.0.0",
+  "name": "heatmap",
+  "version": "1.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@rongmz/react-stock-heatmap-example",
-      "version": "0.0.0",
+      "name": "heatmap",
+      "version": "1.0.4",
       "dependencies": {
         "@rongmz/react-stock-heatmap": "file:..",
+        "axios": "^1.7.2",
         "react": "file:../node_modules/react",
         "react-dom": "file:../node_modules/react-dom",
-        "react-scripts": "file:../node_modules/react-scripts"
+        "react-hot-toast": "^2.4.1",
+        "react-scripts": "file:../node_modules/react-scripts",
+        "uuid": "^10.0.0"
       },
       "devDependencies": {
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
@@ -20,7 +23,6 @@
       }
     },
     "..": {
-      "name": "@rongmz/react-stock-heatmap",
       "version": "1.0.2",
       "license": "MIT",
       "dependencies": {
@@ -1416,8 +1418,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -1428,6 +1429,16 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1877,7 +1888,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -2045,6 +2055,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2138,7 +2154,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -2762,6 +2777,25 @@
         "minimatch": "^5.0.1"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -2782,7 +2816,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -3014,6 +3047,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmmirror.com/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -3671,7 +3712,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -3680,7 +3720,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -3939,6 +3978,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -3978,6 +4022,21 @@
       "resolved": "../node_modules/react-dom",
       "link": true
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-scripts": {
       "resolved": "../node_modules/react-scripts",
       "link": true
@@ -4611,6 +4670,18 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/verror": {
       "version": "1.10.1",
       "resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.1.tgz",

example/package.json

@@ -14,9 +14,12 @@
   },
   "dependencies": {
     "@rongmz/react-stock-heatmap": "file:..",
+    "axios": "^1.7.2",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
-    "react-scripts": "file:../node_modules/react-scripts"
+    "react-hot-toast": "^2.4.1",
+    "react-scripts": "file:../node_modules/react-scripts",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
@@ -44,7 +47,9 @@
       {
         "from": "build",
         "to": "./",
-        "filter": ["**/*"]
+        "filter": [
+          "**/*"
+        ]
       }
     ],
     "asar": true,

example/src/App.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import StockHeatmap from '@rongmz/react-stock-heatmap';
 import '@rongmz/react-stock-heatmap/example/src/index.css';
+import toast, { Toaster } from 'react-hot-toast';
+import { v4 as uuidv4 } from 'uuid';
+import axios from 'axios';
 
 function formatTimestamp(timestamp) {
   // 创建一个新的 Date 对象
@@ -75,7 +78,6 @@ function parseStockData(data) {
 }
 
 export default () => {
-
   const [isActivation, setIsActivation] = React.useState(false);
   const [activationCode, setActivationCode] = React.useState();
   const [loading, setLoading] = React.useState(true);
@@ -115,14 +117,62 @@ export default () => {
       console.error("WebSocket error observed:", event);
     };
   }, []);
-  // ------------ Load data -------------
 
-  const handleActivation = ()=>{
-    console.log(activationCode)
+  // ------------ Load data -------------
+  const checkStatus = async ()=>{
+    toast.remove();
+    const loginInfo = JSON.parse(window.localStorage.getItem("_HEATMAP_LOGIN_INFO") || "{}")
+    const params = {
+      "code": loginInfo.code,
+      "machine": loginInfo.machine
+    }
+    const response = await axios.post('http://139.159.224.218:38888/check_status',params)
+    if(response.data.code !== 200){
+      if(window.sessionStorage.getItem("_HEATMAP_IS_LOGIN") === "1") toast.error(response.data.msg)
+      window.sessionStorage.setItem("_HEATMAP_IS_LOGIN", "0")
+      setIsActivation(false)
+      return
+    }
     setIsActivation(true)
+    window.sessionStorage.setItem("_HEATMAP_IS_LOGIN", "1")
   }
+
+  const handleActivation = async ()=>{
+    toast.remove();
+    const params = {
+      "code": activationCode,
+      "machine": uuidv4()
+    }
+    const response = await axios.post('http://139.159.224.218:38888/login', params)
+    if(response.data.code === 200){
+      window.localStorage.setItem("_HEATMAP_LOGIN_INFO", JSON.stringify(params))
+      window.sessionStorage.setItem("_HEATMAP_IS_LOGIN", "1")
+      toast.success(response.data.msg)
+      setInterval(()=>{
+        checkStatus()
+      },5000)
+      setIsActivation(true)
+    }else{
+      toast.error(response.data.msg);
+    }
+  }
+
   // ---------- window update ------------
   React.useEffect(() => {
+    // 处理是否有登录信息
+    let loginInfo = window.localStorage.getItem("_HEATMAP_LOGIN_INFO");
+    if(loginInfo) {
+      toast.remove();
+      try {
+        const code = JSON.parse(loginInfo)?.code || ''
+        setActivationCode(code || '')
+      }catch (err){
+        window.localStorage.removeItem("_HEATMAP_LOGIN_INFO")
+        window.sessionStorage.setItem("_HEATMAP_IS_LOGIN", "0")
+        return
+      }
+    }
+
     const updateFn = () => {
       setWindowDim([
         window.innerWidth,
@@ -133,8 +183,8 @@ export default () => {
     window.addEventListener('resize', updateFn);
     return () => window.removeEventListener('resize', updateFn);
   }, []);
-  // ---------- window update ------------
 
+  // ---------- window update ------------
   return (
     <div className="wapper">
       <div className={isActivation ? "visibilityVisible" : "visibilityHidden"}>
@@ -196,19 +246,20 @@ export default () => {
         <div className="layoutContainer">
           <div className="activationBox">
             <div className="title">
-              软件激活
+              软件登录
             </div>
             <div className="iptWp">
-              <input placeholder="请输入激活码" onChange={(e)=>{
+              <input placeholder="请输入登录码" value={activationCode || ''} onChange={(e)=>{
                 setActivationCode(e.target.value)
               }} />
             </div>
             <div className="btnWp">
-              <div className="btn" onClick={handleActivation}>激 活</div>
+              <div className="btn" onClick={handleActivation}>登 录</div>
             </div>
           </div>
         </div>
       }
+      <Toaster className="toasterWp" />
     </div>
 
   )

example/src/index.css

@@ -138,7 +138,7 @@ code {
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
-  z-index: 100000;
+  z-index: 9999;
 }
 .layoutContainer .activationBox{
   box-sizing: border-box;
@@ -188,3 +188,6 @@ code {
 .visibilityVisible{
   visibility: visible;
 }
+.toasterWp{
+  z-index: 10000;
+}