vip 验证

component/options/custom.tsx

@@ -11,23 +11,7 @@ export default function Custom() {
     v === undefined ? false : v
   )
   const [cssCode, setCssCode] = useStorage("custom-cssCode")
-  const [closeLog] = useStorage("config-closeLog", true)
-
-  const [codes, setCodes] = useState([])
-
-  useEffect(() => {
-    getCodes()
-  }, [])
-
-  async function getCodes() {
-    sendToContentScript({ name: `custom-getCodes` })
-      .then((res) => {
-        res?.codes && setCodes(res?.codes)
-      })
-      .catch((err) => {
-        closeLog || console.log("getCodes", err)
-      })
-  }
+  const [codes] = useStorage("app-codes", [])
 
   function downloadCode(index) {
     sendToContentScript({ name: `custom-downloadCode`, body: { index } })

contents/custom.tsx

@@ -38,16 +38,19 @@ export const getStyle = () => {
 let isDownloadType = "markdown"
 let isReady = false
 let isSelect = false
+
 export default function CustomOverlay() {
   const [runCss] = useStorage<boolean>("custom-runCss")
   const [cssCode] = useStorage<string>("custom-cssCode")
   const [closeLog] = useStorage("config-closeLog", true)
-  const [codes, setCodes] = useState([])
+  const [codesDom, setCodesDom] = useState([])
+  const [codes, setCodes] = useStorage("app-codes", [])
   const [isCurrentDom, setIsCurrentDom] = useState<boolean>(false)
   const [messageApi, contextHolder] = message.useMessage()
 
   useEffect(() => {
     getSelection()
+    getCodes()
   }, [])
 
   useEffect(() => {
@@ -58,9 +61,6 @@ export default function CustomOverlay() {
     if (req.name == "custom-isShow") {
       res.send({ isShow: true })
     }
-    if (req.name == "custom-getCodes") {
-      res.send({ codes: getCodes() })
-    }
     if (req.name == "custom-scrollIntoViewCode") {
       scrollIntoViewCode(req.body)
     }
@@ -138,17 +138,17 @@ export default function CustomOverlay() {
         codesTxt.push(codeTxt)
       }
     })
-    setCodes(codes)
-    return codesTxt
+    setCodesDom(codes)
+    setCodes(codesTxt)
   }
 
   function scrollIntoViewCode(data) {
-    const code = codes[data.index]
+    const code = codesDom[data.index]
     code && code.scrollIntoView()
   }
 
   function downloadCode(data) {
-    let code = codes[data.index]
+    let code = codesDom[data.index]
     if (code && code.querySelector("code")) {
       code = code.querySelector("code")
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {

sidepanel/index.module.scss

@@ -13,6 +13,12 @@
                 width: 150px;
             }
         }
+        .valid {
+            color: red;
+        }
+        .contentTitle {
+            margin: 15px 0 10px 0;
+        }
         .item {
             display: flex;
             justify-content: space-between;

sidepanel/index.tsx

@@ -8,31 +8,22 @@ import {
   PushpinOutlined
 } from "@ant-design/icons"
 import { Button, Input, Space } from "antd"
+import dayjs from "dayjs"
 import qrcodeUrl from "raw:~/public/wx/qrcode_wx.jpg"
-import { useEffect, useState } from "react"
+import { useRef, useState } from "react"
 
 import { sendToContentScript } from "@plasmohq/messaging"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
+import { verifyTOTP } from "~utils/2FA"
+
 import styles from "./index.module.scss"
 
 function IndexSidePanel() {
-  const [codes, setCodes] = useState([])
-  const [closeLog] = useStorage("config-closeLog", true)
-
-  useEffect(() => {
-    getCodes()
-  }, [])
-
-  async function getCodes() {
-    sendToContentScript({ name: `custom-getCodes` })
-      .then((res) => {
-        res?.codes && setCodes(res?.codes)
-      })
-      .catch((err) => {
-        closeLog || console.log("getCodes", err)
-      })
-  }
+  const [codes] = useStorage("app-codes", [])
+  const [validTime, setValidTime] = useStorage("app-validTime", "1730390400")
+  const [isValid, setIsValid] = useState(false)
+  const inputRef = useRef(null)
 
   function pinCode(index) {
     sendToContentScript({ name: `custom-scrollIntoViewCode`, body: { index } })
@@ -42,7 +33,23 @@ function IndexSidePanel() {
     sendToContentScript({ name: `custom-downloadCode`, body: { index } })
   }
 
-  function handleSubmit() {}
+  function handleSubmit() {
+    let code = inputRef.current.input.value
+
+    if (verifyTOTP(process.env.PLASMO_PUBLIC_CODEBOX_SECRET1, code)) {
+      let time = dayjs().add(20, "day").unix()
+      setValidTime(String(time))
+      setIsValid(true)
+    } else if (verifyTOTP(process.env.PLASMO_PUBLIC_CODEBOX_SECRET2, code)) {
+      let time = dayjs().add(65, "day").unix()
+      setValidTime(String(time))
+      setIsValid(true)
+    } else if (process.env.PLASMO_PUBLIC_CODEBOX_SECRET3 == code) {
+      let time = dayjs().add(7, "day").unix()
+      setValidTime(String(time))
+      setIsValid(true)
+    }
+  }
 
   return (
     <ThemeProvider>
@@ -51,30 +58,52 @@ function IndexSidePanel() {
           <h1>微信公众号</h1>
           <p className="wechatDesc">关注公众号，了解更多功能</p>
           <img className="wechatImg" src={qrcodeUrl} alt="微信公众号" />
-          <Space.Compact style={{ width: "100%" }}>
-            <Input placeholder="输入激活码" prefix={<KeyOutlined />} />
-            <Button type="primary" onClick={handleSubmit}>
-              提交
-            </Button>
-          </Space.Compact>
+          {isValid ? (
+            <p className="valid">已验证</p>
+          ) : (
+            <Space.Compact style={{ width: "100%" }}>
+              <Input
+                placeholder="输入激活码"
+                ref={inputRef}
+                prefix={<KeyOutlined />}
+              />
+              <Button type="primary" onClick={handleSubmit}>
+                提交
+              </Button>
+            </Space.Compact>
+          )}
         </div>
-        {codes.map((code, index) => (
-          <div className="item code" onClick={() => pinCode(index)} key={index}>
-            <span className="codeTxt">
-              {index + 1}-{JSON.stringify(code)}
-            </span>
-            <PushpinOutlined
-              style={{ color: "#52c41a", fontSize: "16px", marginLeft: "10px" }}
-              className="download"
+        <div className="content">
+          <h1 className="contentTitle">导航</h1>
+          {codes.map((code, index) => (
+            <div
+              className="item code"
               onClick={() => pinCode(index)}
-            />
-            <DownloadOutlined
-              style={{ color: "#52c41a", fontSize: "16px", marginLeft: "10px" }}
-              className="download"
-              onClick={() => downloadCode(index)}
-            />
-          </div>
-        ))}
+              key={index}>
+              <span className="codeTxt">
+                {index + 1}-{JSON.stringify(code)}
+              </span>
+              <PushpinOutlined
+                style={{
+                  color: "#52c41a",
+                  fontSize: "16px",
+                  marginLeft: "10px"
+                }}
+                className="download"
+                onClick={() => pinCode(index)}
+              />
+              <DownloadOutlined
+                style={{
+                  color: "#52c41a",
+                  fontSize: "16px",
+                  marginLeft: "10px"
+                }}
+                className="download"
+                onClick={() => downloadCode(index)}
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </ThemeProvider>
   )