wip: update

src/App.tsx

@@ -2,9 +2,18 @@ import { useThemeStore } from "@/stores/theme";
 import { RouterProvider } from "react-router";
 import { useEffect } from "react";
 import { router } from "@/routers";
+import { useSharedStore } from "./stores/shared";
+import { get } from "./api/config";
 
 export default function App() {
     const themeStore = useThemeStore();
+    const sharedStore = useSharedStore();
+
+    function fetchConfigs() {
+        get().then((res) => {
+            sharedStore.setConfig(res.data);
+        });
+    }
 
     useEffect(() => {
         document.documentElement.setAttribute(
@@ -13,5 +22,9 @@ export default function App() {
         );
     }, [themeStore.darkMode]);
 
+    useEffect(() => {
+        fetchConfigs();
+    }, []);
+
     return <RouterProvider router={router} />;
 }

src/api/challenge.ts

@@ -3,6 +3,7 @@ import {
     ChallengeGetRequest,
     ChallengeStatus,
     ChallengeStatusRequest,
+    ChallengeUpdateRequest,
 } from "@/models/challenge";
 import { Response } from "@/types";
 import { alovaInstance } from "@/utils/alova";
@@ -22,3 +23,13 @@ export async function getStatus(request: ChallengeStatusRequest) {
         }
     );
 }
+
+export async function update(request: ChallengeUpdateRequest) {
+    return alovaInstance.Put<Response<Challenge>>(
+        `/challenges/${request?.id}`,
+        request,
+        {
+            cacheFor: 0,
+        }
+    );
+}

src/api/config.ts

@@ -0,0 +1,7 @@
+import { alovaInstance } from "@/utils/alova";
+import { Response } from "@/types";
+import { Config } from "@/models/config";
+
+export async function get() {
+    return alovaInstance.Get<Response<Config>>("/configs");
+}

src/components/core/InputBase/InputBase.module.scss

@@ -70,4 +70,10 @@ $border-color: var(--input-border-color);
     &:hover {
         filter: brightness(1.2);
     }
+
+    &:disabled,
+    &[data-disabled="true"] {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 }

src/components/core/InputBase/InputBase.tsx

@@ -10,6 +10,7 @@ export interface InputBaseProps extends ComponentProps<"div"> {
     color?: string;
     variant?: "outlined" | "solid";
     invalid?: boolean;
+    disabled?: boolean;
     label?: string;
     helperText?: string;
     errorText?: string;
@@ -24,6 +25,7 @@ export function InputBase(props: InputBaseProps) {
         height = "fit-content",
         color = "primary",
         invalid = false,
+        disabled = false,
         variant = "outlined",
         label = "",
         helperText = "",
@@ -68,6 +70,7 @@ export function InputBase(props: InputBaseProps) {
             <Box
                 className={clsx(styles["wrapper"], className)}
                 data-variant={variant}
+                data-disabled={disabled}
                 ref={ref}
             >
                 {children}

src/components/core/NumberInput/NumberInput.module.scss

@@ -0,0 +1,46 @@
+.root {
+    gap: 8px;
+
+    &[data-variant="solid"] {
+        background-color: var(--input-bg-color);
+
+        .icon {
+            color: #ffffff;
+        }
+
+        .input {
+            color: #ffffff;
+            caret-color: #ffffff;
+
+            &::placeholder {
+                color: #ffffff7d;
+            }
+        }
+    }
+
+    &[data-variant="outlined"] {
+        .icon {
+            color: light-dark(var(--input-border-color), #ffffff);
+        }
+    }
+
+    &:focus,
+    &:hover {
+        filter: brightness(1.2);
+    }
+}
+
+.input {
+    flex: 1;
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    caret-color: var(--input-border-color);
+    font-size: 16px;
+    line-height: 1.5;
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+}

src/components/core/NumberInput/NumberInput.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { InputBase, InputBaseProps } from "../InputBase";
+import styles from "./NumberInput.module.scss";
+
+export interface NumberInputProps extends Omit<InputBaseProps, "onChange"> {
+    invalid?: boolean;
+    value?: number;
+    label?: string;
+    icon?: React.ReactNode;
+    placeholder?: string;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    style?: React.CSSProperties;
+}
+
+export function NumberInput(props: NumberInputProps) {
+    const {
+        width,
+        color = "primary",
+        invalid = false,
+        variant = "outlined",
+        icon,
+        value = "",
+        onChange,
+        label = "",
+        placeholder = "",
+        helperText = "",
+        errorText = "",
+        min,
+        max,
+        style,
+        className,
+        ...rest
+    } = props;
+
+    return (
+        <InputBase
+            width={width}
+            color={color}
+            variant={variant}
+            invalid={invalid}
+            helperText={helperText}
+            errorText={errorText}
+            label={label}
+            className={clsx(styles["root"], className)}
+            style={style}
+            {...rest}
+        >
+            {icon && <div className={styles["icon"]}>{icon}</div>}
+            <input
+                className={styles["input"]}
+                value={value}
+                type={"number"}
+                placeholder={placeholder}
+                onChange={(e) => onChange?.(e.target.valueAsNumber)}
+                min={min}
+                max={max}
+            />
+        </InputBase>
+    );
+}

src/components/core/NumberInput/index.ts

@@ -0,0 +1 @@
+export { NumberInput, type NumberInputProps } from "./NumberInput";

src/components/core/Popover/Popover.module.scss

@@ -1,15 +1,8 @@
 .root {
-    position: relative;
-    width: fit-content;
-}
-
-.trigger {
-    display: inline-block;
-}
-
-.content {
     position: absolute;
-    z-index: 1;
+    z-index: 9999;
+    inset: 0px auto auto 0px;
+    margin: 0;
 
     &.enter {
         opacity: 0;