feat: 实现about页面

SSmJaE · Mar 31, 2023 · a25298f · a25298f
1 parent e468d42
commit a25298f
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 9 deletions.
diff --git a/src/api/welearn.ts b/src/api/welearn.ts
@@ -3,9 +3,10 @@
 
 import metadata from "@/metadata.json";
 import logger from "@utils/logger";
+import request from "@utils/polyfill/request";
 
+import { setValue } from "../utils/polyfill";
 import { backendErrorToString, perSession, requestErrorHandler } from "./decorators";
-import request from "@utils/polyfill/request";
 import { ICommonResponse } from "./types";
 
 interface IQuestionWithAnswer {
@@ -54,6 +55,8 @@ export class WELearnAPI {
             for (const message of returnJson.data) {
                 logger.info({ content: message });
             }
+
+            await setValue("VERSION_INFO", returnJson.data);
         }
     }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,8 @@
 import "@src/projects/welearn/initial";
+import "@icon-park/react/styles/index.css";
 
 import React from "react";
-import ReactDOM from "react-dom/client";
+import { createRoot } from "react-dom/client";
 
 import logger from "./utils/logger";
 import { initialUserSettings } from "./utils/setting";
@@ -37,7 +38,7 @@ function initialize() {
         return;
     }
 
-    ReactDOM.createRoot(
+    createRoot(
         (() => {
             const app = document.createElement("div");
             app.id = EXTENSION_ID;

diff --git a/src/projects/welearn/exam/initial.ts b/src/projects/welearn/exam/initial.ts
@@ -66,9 +66,9 @@ function notify() {
 
 if (location.href.includes(".sflep.com/test/")) {
     // iife不允许顶层await
-    // (async () => {
-    await watcher();
-    // })();
+    (async () => {
+        await watcher();
+    })();
 }
 
 if (location.href.includes(".sflep.com/student/course_info.aspx?")) {

diff --git a/src/utils/polyfill/index.ts b/src/utils/polyfill/index.ts
@@ -57,7 +57,7 @@ async function initializeGetValue() {
  * 调用GM_getValue或者chrome.storage
  *
  * 如果调用的是GM_getValue，返回JSON.parse后的结果 */
-export async function getValue(key: string, defaultValue?: any) {
+export async function getValue<T = any>(key: string, defaultValue?: any) {
     // 确保只初始化一次GM_getValue，并且在调用GM_getValue之前初始化
     if (!hasInitializeGetValue) {
         await initializeGetValue();
@@ -88,5 +88,5 @@ export async function getValue(key: string, defaultValue?: any) {
             returnValue = temp;
         }
     }
-    return returnValue;
+    return returnValue as T;
 }
diff --git a/src/views/Log/About/index.tsx b/src/views/Log/About/index.tsx
@@ -0,0 +1,110 @@
+import { memo, useEffect, useState } from "react";
+
+import metadata from "@/metadata.json";
+import logger from "@/src/utils/logger";
+import { getValue } from "@/src/utils/polyfill";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { GithubOne } from "@icon-park/react";
+
+import Button from "../../components/Button";
+import { InfoRecordContainer } from "../records/Info";
+
+const ScaleIt = styled.div({
+    "&:hover": {
+        transform: "scale(1.2)",
+        transition: "transform 500ms",
+        cursor: "pointer",
+    },
+});
+
+export const About = memo(function () {
+    const theme = useTheme();
+
+    const [versionInfo, setVersionInfo] = useState<string[]>([]);
+
+    useEffect(() => {
+        getValue<string[]>("VERSION_INFO", []).then((messages) => {
+            setVersionInfo(messages);
+
+            logger.debug("成功设置about页面的版本信息");
+        });
+    }, []);
+
+    return (
+        <div
+            style={{
+                // border: "2px solid black",
+                width: 380,
+                color: "black",
+                // height: 300,
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "space-around",
+                    alignItems: "center",
+                    width: "100%",
+                    margin: "8px 0px",
+                }}
+            >
+                <ScaleIt>
+                    <GithubOne theme="filled" size="24" fill={theme.colors.active} />
+                </ScaleIt>
+
+                <Button disabled>使用引导</Button>
+            </div>
+
+            <div>
+                版本 <span style={{ marginLeft: 24 }}>{metadata.projects.welearn.version}</span>
+            </div>
+
+            <div
+                style={{
+                    margin: "8px 0px",
+                }}
+            >
+                Made with ❤️ by
+                <ScaleIt
+                    style={{
+                        display: "inline-block",
+                        color: theme.colors.active,
+                        fontSize: 20,
+                        marginLeft: 8,
+                    }}
+                    onClick={() => {
+                        window.open("https://github.com/SSmJaE", "_blank");
+                    }}
+                >
+                    SSmJaE
+                </ScaleIt>
+            </div>
+
+            <div
+                style={{
+                    width: "100%",
+                    borderTop: "2px solid black",
+                    marginTop: 8,
+                }}
+            >
+                {versionInfo.length !== 0 &&
+                    versionInfo.map((message) => (
+                        <InfoRecordContainer
+                            style={{
+                                display: "block",
+                                marginBottom: 4,
+                            }}
+                            dangerouslySetInnerHTML={{
+                                __html: `${message}`,
+                            }}
+                        />
+                    ))}
+            </div>
+        </div>
+    );
+});
diff --git a/src/views/Log/records/Info.tsx b/src/views/Log/records/Info.tsx
@@ -8,7 +8,7 @@ import { animated } from "@react-spring/web";
 import { InlineTag, useSlideIn } from "../../components/InlineTag";
 import Button from "../../components/Button";
 
-const InfoRecordContainer = styled(animated.span)(
+export const InfoRecordContainer = styled(animated.span)(
     {
         lineHeight: "24px",
         position: "relative",
@@ -24,6 +24,8 @@ const InfoRecordContainer = styled(animated.span)(
         "a:hover": {
             // borderBottom: `${theme.colors.active} 2px solid`,
             pointer: "cursor",
+            // transform: "scale(1.1)",
+            // transition: "transform 500ms",
         },
     }),
 );

diff --git a/src/views/components/PopOver.tsx b/src/views/components/PopOver.tsx
@@ -21,6 +21,7 @@ export default function PopOver({
     offsetPixel = 8,
     backgroundColor = "rgba(104, 101, 101, 0.89)",
     delay = false,
+    border = false,
 }: {
     children: React.ReactNode;
     content: React.ReactNode;
@@ -29,6 +30,7 @@ export default function PopOver({
     offsetPixel?: number;
     backgroundColor?: string;
     delay?: boolean;
+    border?: boolean;
 }) {
     const theme = useTheme();
 
@@ -78,10 +80,12 @@ export default function PopOver({
                             top: y ?? 0,
                             left: x ?? 0,
                             backgroundColor,
+                            // display: "flex",
                             // backgroundColor: theme.colors.secondary,
                             // width: "max-content",
                             maxWidth: "400px",
                             color: "white",
+                            border: border ? "2px solid black" : undefined,
                             borderRadius: 4,
                             fontSize: 20,
                             padding: 8,