fix: icon

cdsctf · Nov 12, 2024 · 0f379f8 · 0f379f8
1 parent b295fe5
commit 0f379f8
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 119 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
         "@types/node": "^22.4.0",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@types/react-syntax-highlighter": "^15.5.13",
         "@types/react-transition-group": "^4.4.11",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "eslint": "^9.9.0",

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/src/components/core/Button/Button.tsx b/src/components/core/Button/Button.tsx
@@ -3,6 +3,7 @@ import useThemeColor from "@/hooks/useThemeColor";
 import styles from "./Button.module.scss";
 import Loading from "../../icons/Loading";
 import clsx from "clsx";
+import { Icon } from "../Icon";
 
 export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     width?: string;
@@ -13,7 +14,7 @@ export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     align?: "start" | "center" | "end";
     loading?: boolean;
     disabled?: boolean;
-    icon?: React.ReactNode;
+    icon?: React.ReactElement;
     style?: React.CSSProperties;
     children?: React.ReactNode;
 }
@@ -55,9 +56,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 {...rest}
             >
                 {(loading || icon) && (
-                    <div className={styles["icon"]}>
-                        {loading ? <Loading /> : icon}
-                    </div>
+                    <Icon
+                        className={styles["icon"]}
+                        icon={loading ? <Loading /> : icon}
+                    />
                 )}
                 <div className={styles["content"]}>{children}</div>
             </button>

diff --git a/src/components/core/Icon/Icon.module.scss b/src/components/core/Icon/Icon.module.scss
@@ -0,0 +1,4 @@
+.root {
+    width: fit-content;
+    height: 100%;
+}
diff --git a/src/components/core/Icon/Icon.tsx b/src/components/core/Icon/Icon.tsx
@@ -1,11 +1,17 @@
 import React, { ComponentProps, forwardRef } from "react";
+import styles from "./Icon.module.scss";
+import clsx from "clsx";
 
 export interface IconProps extends ComponentProps<"i"> {
-    icon: React.ReactElement;
+    icon?: React.ReactElement;
 }
 
 export const Icon = forwardRef<HTMLElement, IconProps>((props, ref) => {
-    const { icon } = props;
+    const { icon, className } = props;
 
-    return <i ref={ref}>{icon}</i>;
+    return (
+        <i ref={ref} className={clsx(styles["root"], className)}>
+            {icon}
+        </i>
+    );
 });
diff --git a/src/components/core/InputBase/InputBase.tsx b/src/components/core/InputBase/InputBase.tsx
@@ -41,7 +41,14 @@ export const InputBase = forwardRef<HTMLDivElement, InputBaseProps>(
         } as React.CSSProperties;
 
         return (
-            <div className={styles["root"]} style={variables} {...rest}>
+            <div
+                className={styles["root"]}
+                style={{
+                    ...variables,
+                    ...style,
+                }}
+                {...rest}
+            >
                 {(label || helperText) && (
                     <div className={styles["info"]}>
                         {label && (

diff --git a/src/components/core/TextInput/TextInput.tsx b/src/components/core/TextInput/TextInput.tsx
@@ -61,6 +61,7 @@ export function TextInput(props: TextInputProps) {
             errorText={errorText}
             label={label}
             className={clsx(styles["root"], className)}
+            style={style}
             {...rest}
         >
             {icon && <div className={styles["icon"]}>{icon}</div>}

diff --git a/src/components/modals/ChallengeModal/ChallengeModal.module.scss b/src/components/modals/ChallengeModal/ChallengeModal.module.scss
@@ -60,8 +60,13 @@ $icon-color: var(--challenge-modal-icon-color);
         align-items: center;
         gap: 8px;
 
+        .icon {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
         .title {
-            width: 100%;
+            width: 80%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -70,11 +75,6 @@ $icon-color: var(--challenge-modal-icon-color);
             font-size: 1rem;
             font-weight: 700;
         }
-
-        .icon {
-            width: 1.5rem;
-            height: 1.5rem;
-        }
     }
 
     .tabs {

diff --git a/src/components/modals/ChallengeModal/ChallengeModal.tsx b/src/components/modals/ChallengeModal/ChallengeModal.tsx
@@ -12,6 +12,7 @@ import SledgehammerBold from "~icons/solar/sledgehammer-bold";
 import Server2Bold from "~icons/solar/server-2-bold";
 import FolderWithFilesBold from "~icons/solar/folder-with-files-bold";
 import FlagBold from "~icons/solar/flag-bold";
+import { Icon } from "@/components/core/Icon";
 
 export interface ChallengeModalProps {
     challenge: Challenge;
@@ -68,7 +69,10 @@ export function ChallengeModal(props: ChallengeModalProps) {
             <div className={styles["container"]}>
                 <div className={styles["navbar"]}>
                     <div className={styles["info"]}>
-                        <div className={styles["icon"]}>{category?.icon}</div>
+                        <Icon
+                            icon={category?.icon}
+                            className={styles["icon"]}
+                        />
                         <div className={styles["title"]}>
                             {challenge?.title}
                         </div>
@@ -147,14 +151,16 @@ export function ChallengeModal(props: ChallengeModalProps) {
                     }}
                 >
                     <TextInput
-                        width={"100%"}
                         icon={<FlagBold />}
                         clearable
                         color={category?.color}
                         placeholder={placeholder}
                         value={flag}
                         variant={"solid"}
                         onChange={(value) => setFlag(value)}
+                        style={{
+                            flex: 1,
+                        }}
                     />
                     <Button
                         color={category?.color}

diff --git a/src/components/widgets/ChallengeCard/ChallengeCard.tsx b/src/components/widgets/ChallengeCard/ChallengeCard.tsx
@@ -86,7 +86,9 @@ export function ChallengeCard(props: ChallengeCard) {
                         {category?.name?.toUpperCase()}
                     </Badge>
                 </div>
-                <div className={styles["icon"]}>{category?.icon}</div>
+                <div className={styles["icon"]}>
+                    <Icon icon={category?.icon} />
+                </div>
                 <h1 className={styles["title"]}>{challenge.title}</h1>
                 <div className={styles["divider"]} />
                 <div className={styles["status"]}>

diff --git a/src/components/widgets/Navbar/Navbar.tsx b/src/components/widgets/Navbar/Navbar.tsx
@@ -11,6 +11,7 @@ import { CSSProperties, useRef, useState } from "react";
 import chroma from "chroma-js";
 import { Link, useLocation } from "react-router-dom";
 import { Avatar, Popover } from "@/components/core";
+import { Icon } from "@/components/core/Icon";
 
 export function Navbar() {
     const darkMode = useThemeStore.getState().darkMode;
@@ -74,7 +75,9 @@ export function Navbar() {
                             className={styles["link"]}
                             data-active={pathname === item?.href}
                         >
-                            <div className={styles["icon"]}>{item?.icon}</div>
+                            <div className={styles["icon"]}>
+                                <Icon icon={item?.icon} />
+                            </div>
                             <div className={styles["label"]}>{item?.label}</div>
                         </div>
                     </Link>

diff --git a/src/models/category.ts b/src/models/category.ts
@@ -4,5 +4,5 @@ export interface Category {
     id?: number;
     name?: string;
     color?: string;
-    icon?: React.ReactNode;
+    icon?: React.ReactElement;
 }
diff --git a/src/pages/page.tsx b/src/pages/page.tsx
@@ -30,9 +30,6 @@ export function Page() {
 
     const [loading, setLoading] = useState(false);
 
-    const dropdownMenuButtonRef = useRef<HTMLButtonElement>(null);
-    const [dropdownMenuOpen, setDropdownMenuOpen] = useState<boolean>(false);
-
     const [datetime, setDatetime] = useState<DateTime>(DateTime.now());
 
     const [isSolveds, setIsSolveds] = useState<boolean[]>(
@@ -115,29 +112,6 @@ ReactDOM.render(
                     123
                 </Button>
             </div>
-            <p>
-                在现代社会中，technology
-                已经成为生活中不可或缺的一部分。无论是使用 smartphones 还是
-                laptops，我们都能感受到 innovation 带来的便利。同时，
-                <span
-                    style={{
-                        fontStyle: "italic",
-                    }}
-                >
-                    communication
-                </span>
-                方式也因为 Internet 而发生了巨大的变化，人们可以通过
-                <span
-                    style={{
-                        fontWeight: 800,
-                    }}
-                >
-                    email
-                </span>
-                、social media
-                与世界各地的朋友保持联系。这种中英文的混合使用，不仅方便了表达，也让我们的生活充满了
-                globalization 的色彩。
-            </p>
             <TextInput
                 clearable
                 // passwd
@@ -425,15 +399,10 @@ ReactDOM.render(
 
             {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map(
                 (i) => (
-                    <div
-                        key={i}
-                        style={{
-                            paddingLeft: "64px",
-                        }}
-                    >
+                    <div key={i}>
                         <ChallengeModal
                             challenge={{
-                                title: "Hello CdsCTF",
+                                title: "Hello CdsCTFxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                                 category: i,
                                 description: "This is a description",
                             }}

diff --git a/src/utils/katex.ts b/src/utils/katex.ts
diff --git a/vite.config.ts b/vite.config.ts
@@ -28,7 +28,7 @@ export default defineConfig(({ mode }) => {
                 compiler: "jsx",
                 jsx: "react",
                 scale: 1.2,
-                defaultStyle: "width: fit-content; height: 100%;",
+                defaultStyle: "width: 100%; height: 100%;",
             }),
         ],
         resolve: {
@@ -58,15 +58,6 @@ export default defineConfig(({ mode }) => {
             },
         },
         build: {
-            rollupOptions: {
-                output: {
-                    manualChunks(id) {
-                        if (id.includes("node_modules")) {
-                            return id.split("node_modules/")[1].split("/")[0]; // 按库拆分
-                        }
-                    },
-                },
-            },
             cssCodeSplit: true,
         },
     };