wip: update

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

Hide file tree

Showing 9 changed files with 95 additions and 93 deletions.
diff --git a/src/components/core/Avatar/Avatar.tsx b/src/components/core/Avatar/Avatar.tsx
@@ -2,6 +2,7 @@ import styles from "./Avatar.module.scss";
 import UserCircleBoldDuotone from "~icons/solar/user-circle-bold-duotone";
 import useThemeColor from "@/hooks/useThemeColor";
 import { ComponentProps, useState } from "react";
+import { Icon } from "../Icon";
 
 export interface AvatarProps extends ComponentProps<"img"> {
     src: string;
@@ -18,7 +19,7 @@ export function Avatar(props: AvatarProps) {
         alt = "",
         color = "primary",
         size = "3rem",
-        fallback = <UserCircleBoldDuotone />,
+        fallback = <Icon icon={<UserCircleBoldDuotone />} />,
         style,
         ...rest
     } = props;

diff --git a/src/components/core/DatetimeInput/DatetimeInput.tsx b/src/components/core/DatetimeInput/DatetimeInput.tsx
@@ -2,9 +2,10 @@ import { DateTime } from "luxon";
 import { InputBase, InputBaseProps } from "../InputBase";
 import styles from "./DatetimeInput.module.scss";
 import React, { useState, useRef, useEffect, forwardRef } from "react";
+import { Icon } from "../Icon";
 
 export interface DatetimeInputProps extends Omit<InputBaseProps, "onChange"> {
-    icon?: React.ReactNode;
+    icon?: React.ReactElement;
     value?: DateTime;
     onChange?: (value: DateTime) => void;
 }
@@ -51,7 +52,7 @@ export const DatetimeInput = forwardRef<HTMLInputElement, DatetimeInputProps>(
             // console.log("cursorPosition", cursorPosition);
             // console.log("e.target.value", e.target.value);
 
-            console.log(newValue, /^\d$/.test(newValue));
+            // console.log(newValue, /^\d$/.test(newValue));
 
             const segmentIndex = segments.findIndex(
                 (seg) =>
@@ -205,7 +206,11 @@ export const DatetimeInput = forwardRef<HTMLInputElement, DatetimeInputProps>(
                 ref={ref}
                 {...rest}
             >
-                {icon && <div className={styles["icon"]}>{icon}</div>}
+                {icon && (
+                    <div className={styles["icon"]}>
+                        <Icon icon={icon} />
+                    </div>
+                )}
                 <input
                     className={styles["input"]}
                     type="text"

diff --git a/src/components/core/DatetimePicker/DatetimePicker.tsx b/src/components/core/DatetimePicker/DatetimePicker.tsx
@@ -13,7 +13,7 @@ import clsx from "clsx";
 export interface DatetimePickerProps {
     value: DateTime;
     onChange: (value: DateTime) => void;
-    icon?: React.ReactNode;
+    icon?: React.ReactElement;
 }
 
 export function DatetimePicker(props: DatetimePickerProps) {

diff --git a/src/components/core/TextInput/TextInput.tsx b/src/components/core/TextInput/TextInput.tsx
@@ -6,6 +6,7 @@ import EyeCloseBold from "~icons/solar/eye-closed-bold";
 import styles from "./TextInput.module.scss";
 import { InputBase, InputBaseProps } from "../InputBase";
 import clsx from "clsx";
+import { Icon } from "../Icon";
 
 export interface TextInputProps extends Omit<InputBaseProps, "onChange"> {
     clearable?: boolean;
@@ -74,15 +75,19 @@ export function TextInput(props: TextInputProps) {
             />
             {clearable && (
                 <div className={styles["clear-button"]} onClick={handleClear}>
-                    <CloseCircleBold />
+                    <Icon icon={<CloseCircleBold />} />
                 </div>
             )}
             {password && (
                 <div
                     className={styles["toggle-button"]}
                     onClick={handleToggleVisibility}
                 >
-                    {isPasswordVisible ? <EyeBold /> : <EyeCloseBold />}
+                    <Icon
+                        icon={
+                            isPasswordVisible ? <EyeBold /> : <EyeCloseBold />
+                        }
+                    />
                 </div>
             )}
         </InputBase>

diff --git a/src/components/core/Textarea/Textarea.tsx b/src/components/core/Textarea/Textarea.tsx
@@ -1,19 +1,24 @@
+import { Icon } from "../Icon";
 import { InputBase, InputBaseProps } from "../InputBase";
 import styles from "./Textarea.module.scss";
 
 export interface TextareaProps extends Omit<InputBaseProps, "onChange"> {
     width?: string;
     value?: string;
     onChange?: (value: string) => void;
-    icon?: React.ReactNode;
+    icon?: React.ReactElement;
 }
 
 export function Textarea(props: TextareaProps) {
     const { width = "fit-content", value, onChange, icon, ...rest } = props;
 
     return (
         <InputBase className={styles["root"]} width={width}>
-            {icon && <div className={styles["icon"]}>{icon}</div>}
+            {icon && (
+                <div className={styles["icon"]}>
+                    <Icon icon={icon} />
+                </div>
+            )}
             <textarea
                 className={styles["textarea"]}
                 value={value}

diff --git a/src/components/core/Tooltip/Tooltip.module.scss b/src/components/core/Tooltip/Tooltip.module.scss
@@ -2,8 +2,8 @@ $offset: var(--tooltip-offset, 8px);
 
 .root {
     position: relative;
-    width: inherit;
-    height: inherit;
+    width: fit-content;
+    height: fit-content;
     display: inline-block;
 }
 

diff --git a/src/components/modals/ChallengeModal/ChallengeModal.module.scss b/src/components/modals/ChallengeModal/ChallengeModal.module.scss
@@ -55,14 +55,14 @@ $icon-color: var(--challenge-modal-icon-color);
     color: #ffffff;
 
     .info {
-        width: 30%;
+        width: 50%;
         display: flex;
         align-items: center;
         gap: 8px;
 
         .icon {
-            width: 1.5rem;
-            height: 1.5rem;
+            width: 1.75rem;
+            height: 1.75rem;
         }
 
         .title {
@@ -80,31 +80,21 @@ $icon-color: var(--challenge-modal-icon-color);
     .tabs {
         display: flex;
         gap: 8px;
+        height: 36px;
         align-items: center;
 
         .tab {
             display: flex;
             align-items: center;
             cursor: pointer;
             transition: all 150ms ease-in-out;
-            padding: 8px 14px;
             border-radius: 9999px;
+            padding: 2px;
             gap: 8px;
 
-            &[data-active="true"],
-            &:hover {
-                filter: brightness(1.2);
-                background-color: #1111113d;
-            }
-
             &:active {
                 transform: translateY(2px);
             }
-
-            span {
-                font-size: 0.8rem;
-                text-wrap: nowrap;
-            }
         }
     }
 }
@@ -118,7 +108,7 @@ $icon-color: var(--challenge-modal-icon-color);
 
     background-color: var(--bg-2-color);
     border-radius: 0 0 12px 12px;
-    border: 2.75px solid $border-color;
+    border: 2.75px dotted $border-color;
     border-top: none;
 
     .content {

diff --git a/src/components/modals/ChallengeModal/ChallengeModal.tsx b/src/components/modals/ChallengeModal/ChallengeModal.tsx
@@ -13,6 +13,7 @@ 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";
+import { Tooltip } from "@/components/core";
 
 export interface ChallengeModalProps {
     challenge: Challenge;
@@ -40,15 +41,23 @@ export function ChallengeModal(props: ChallengeModalProps) {
         "description" | "pod" | "attachment" | "feedback"
     >("description");
 
-    const tabIcons: Record<
-        "description" | "pod" | "attachment" | "feedback",
-        ReactNode
-    > = {
-        description: <Book2Bold />,
-        pod: <Server2Bold />,
-        attachment: <FolderWithFilesBold />,
-        feedback: <SledgehammerBold />,
-    };
+    const tabs: Array<Record<string, any>> = [
+        {
+            id: "description",
+            name: "描述",
+            icon: <Book2Bold />,
+        },
+        {
+            id: "pod",
+            name: "靶机",
+            icon: <Server2Bold />,
+        },
+        {
+            id: "feedback",
+            name: "反馈",
+            icon: <SledgehammerBold />,
+        },
+    ];
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -78,38 +87,28 @@ export function ChallengeModal(props: ChallengeModalProps) {
                         </div>
                     </div>
                     <div className={styles["tabs"]}>
-                        <button
-                            className={styles["tab"]}
-                            onClick={() => setActiveTab("description")}
-                            data-active={activeTab === "description"}
-                        >
-                            {tabIcons["description"]}
-                            <span>描述</span>
-                        </button>
-                        <button
-                            className={styles["tab"]}
-                            onClick={() => setActiveTab("pod")}
-                            data-active={activeTab === "pod"}
-                        >
-                            {tabIcons["pod"]}
-                            <span>容器</span>
-                        </button>
-                        <button
-                            className={styles["tab"]}
-                            onClick={() => setActiveTab("attachment")}
-                            data-active={activeTab === "attachment"}
-                        >
-                            {tabIcons["attachment"]}
-                            <span>附件</span>
-                        </button>
-                        <button
-                            className={styles["tab"]}
-                            onClick={() => setActiveTab("feedback")}
-                            data-active={activeTab === "feedback"}
-                        >
-                            {tabIcons["feedback"]}
-                            <span>反馈</span>
-                        </button>
+                        {tabs?.map((tab, index) => (
+                            <>
+                                <Tooltip content={tab.name} key={tab.id}>
+                                    <button
+                                        className={styles["tab"]}
+                                        onClick={() => setActiveTab(tab.id)}
+                                        data-active={activeTab === tab.id}
+                                    >
+                                        <Icon icon={tab.icon} />
+                                    </button>
+                                </Tooltip>
+                                {index !== tabs.length - 1 && (
+                                    <span
+                                        style={{
+                                            userSelect: "none",
+                                        }}
+                                    >
+                                        /
+                                    </span>
+                                )}
+                            </>
+                        ))}
                     </div>
                 </div>
                 <div className={styles["main"]}>
@@ -136,9 +135,6 @@ export function ChallengeModal(props: ChallengeModalProps) {
                                 </div>
                             </div>
                         )}
-                        {activeTab === "attachment" && (
-                            <div className={styles["attachment"]}></div>
-                        )}
                         {activeTab === "feedback" && (
                             <div className={styles["feedback"]}></div>
                         )}