wip(frontend): echart in step end style

ElaBosak233 · Jun 8, 2024 · 3ca68b4 · 3ca68b4
1 parent 9fee47c
commit 3ca68b4
Show file tree

Hide file tree

Showing 22 changed files with 117 additions and 124 deletions.
diff --git a/web/src/components/modals/ChallengeModal.tsx b/web/src/components/modals/ChallengeModal.tsx
@@ -10,9 +10,6 @@ import {
 	Flex,
 	TextInput,
 	Button,
-	useMantineColorScheme,
-	lighten,
-	darken,
 	Stack,
 	ActionIcon,
 	ModalProps,
@@ -36,8 +33,7 @@ import {
 } from "@/utils/notification";
 import { useForm } from "@mantine/form";
 import { useTeamStore } from "@/stores/team";
-import { useInterval } from "@mantine/hooks";
-import { set } from "zod";
+import { useClipboard, useInterval } from "@mantine/hooks";
 
 interface ChallengeModalProps extends ModalProps {
 	challenge?: Challenge;
@@ -49,7 +45,7 @@ interface ChallengeModalProps extends ModalProps {
 export default function ChallengeModal(props: ChallengeModalProps) {
 	const { challenge, gameID, setRefresh, mode, ...modalProps } = props;
 
-	const { colorScheme } = useMantineColorScheme();
+	const clipboard = useClipboard({ timeout: 500 });
 	const podApi = usePodApi();
 	const submissionApi = useSubmissionApi();
 	const authStore = useAuthStore();
@@ -339,7 +335,6 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 									position={"bottom"}
 								>
 									<ActionIcon
-										variant="transparent"
 										onClick={() => {
 											window.open(
 												`${import.meta.env.VITE_BASE_API}/media/challenges/${challenge?.id}/${challenge?.attachment?.name}`
@@ -363,25 +358,25 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 											key={nat?.id}
 											value={nat?.entry}
 											readOnly
-											color={challenge?.category?.color}
+											sx={{
+												input: {
+													"&:focus": {
+														borderColor:
+															challenge?.category
+																?.color,
+													},
+												},
+											}}
 											leftSectionWidth={135}
 											leftSection={
 												<Flex
 													w={"100%"}
 													px={10}
 													gap={10}
 												>
-													<MDIcon
-														c={
-															colorScheme ===
-															"light"
-																? "gray.5"
-																: "gray.3"
-														}
-													>
+													<MDIcon c={"gray"}>
 														lan
 													</MDIcon>
-
 													<Flex
 														align={"center"}
 														justify={
@@ -394,39 +389,56 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 														<Text>
 															{nat.src_port}
 														</Text>
-														<MDIcon
-															c={
-																colorScheme ===
-																"light"
-																	? "gray.5"
-																	: "gray.3"
-															}
-														>
+														<MDIcon c={"gray"}>
 															arrow_right_alt
 														</MDIcon>
 													</Flex>
 												</Flex>
 											}
+											rightSectionWidth={100}
 											rightSection={
-												<ActionIcon
-													variant="transparent"
-													onClick={() => {
-														window.open(
-															`http://${nat?.entry}`
-														);
-													}}
-												>
-													<MDIcon
-														c={
-															colorScheme ===
-															"light"
-																? "gray.5"
-																: "gray.3"
+												<Flex>
+													<Divider
+														mx={10}
+														orientation={"vertical"}
+													/>
+													<Tooltip
+														withArrow
+														label={
+															clipboard.copied
+																? "已复制"
+																: "复制到剪贴板"
 														}
 													>
-														open_in_new
-													</MDIcon>
-												</ActionIcon>
+														<ActionIcon
+															onClick={() =>
+																clipboard.copy(
+																	nat?.entry
+																)
+															}
+														>
+															<MDIcon c={"gray"}>
+																content_copy
+															</MDIcon>
+														</ActionIcon>
+													</Tooltip>
+													<Tooltip
+														withArrow
+														label={"在浏览器中打开"}
+													>
+														<ActionIcon
+															onClick={() => {
+																window.open(
+																	`http://${nat?.entry}`
+																);
+															}}
+														>
+															<MDIcon c={"gray"}>
+																open_in_new
+															</MDIcon>
+														</ActionIcon>
+													</Tooltip>
+												</Flex>
 											}
 										/>
 									))}

diff --git a/web/src/components/modals/GameTeamApplyModal.tsx b/web/src/components/modals/GameTeamApplyModal.tsx
@@ -13,7 +13,7 @@ import {
 	Text,
 } from "@mantine/core";
 import { useState, useEffect } from "react";
-import MDIcon from "../ui/MDIcon";
+import MDIcon from "@/components/ui/MDIcon";
 import { useGameApi } from "@/api/game";
 import { useParams } from "react-router-dom";
 import {
@@ -147,7 +147,6 @@ export default function GameTeamApplyModal(props: GameTeamApplyModalProps) {
 											</Text>
 										</Group>
 										<ActionIcon
-											variant="transparent"
 											onClick={() => {
 												createGameTeam(team);
 											}}

diff --git a/web/src/components/modals/TeamEditModal.tsx b/web/src/components/modals/TeamEditModal.tsx
@@ -317,7 +317,6 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 													readOnly
 													rightSection={
 														<ActionIcon
-															variant="transparent"
 															onClick={
 																updateTeamInviteToken
 															}
@@ -449,7 +448,6 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 																withArrow
 															>
 																<ActionIcon
-																	variant="transparent"
 																	color="grey"
 																	onClick={() => {
 																		openTransferCaptainModal(
@@ -467,7 +465,6 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 																withArrow
 															>
 																<ActionIcon
-																	variant="transparent"
 																	color="red"
 																	onClick={() => {
 																		openDeleteTeamUserModal(

diff --git a/web/src/components/modals/admin/ChallengeSelectModal.tsx b/web/src/components/modals/admin/ChallengeSelectModal.tsx
@@ -99,7 +99,6 @@ export default function ChallengeSelectModal(props: ChallengeSelectModalProps) {
 											</Text>
 										</Group>
 										<ActionIcon
-											variant="transparent"
 											onClick={() => {
 												setChallenge(challenge);
 												modalProps.onClose();

diff --git a/web/src/components/modals/admin/TeamEditModal.tsx b/web/src/components/modals/admin/TeamEditModal.tsx
@@ -301,7 +301,6 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 												readOnly
 												rightSection={
 													<ActionIcon
-														variant="transparent"
 														onClick={
 															updateTeamInviteToken
 														}
@@ -426,7 +425,6 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 															withArrow
 														>
 															<ActionIcon
-																variant="transparent"
 																color="grey"
 																onClick={() => {
 																	openTransferCaptainModal(
@@ -444,7 +442,6 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 															withArrow
 														>
 															<ActionIcon
-																variant="transparent"
 																color="red"
 																onClick={() => {
 																	openDeleteTeamUserModal(

diff --git a/web/src/components/navigations/Navbar.tsx b/web/src/components/navigations/Navbar.tsx
@@ -254,7 +254,6 @@ export default function Navbar() {
 			</Group>
 			<Flex w={"50%"} justify={"end"} align={"center"}>
 				<ActionIcon
-					variant="transparent"
 					aria-label="Settings"
 					c={"white"}
 					mx={10}

diff --git a/web/src/components/widgets/admin/ChallengeFlagAccordion.tsx b/web/src/components/widgets/admin/ChallengeFlagAccordion.tsx
@@ -127,10 +127,7 @@ export default function ChallengeFlagAccordion(
 				</Accordion.Control>
 				<Flex gap={10}>
 					<Tooltip label="删除 Flag" withArrow>
-						<ActionIcon
-							variant="transparent"
-							onClick={() => openDeleteFlagModal()}
-						>
+						<ActionIcon onClick={() => openDeleteFlagModal()}>
 							<MDIcon color="red">delete</MDIcon>
 						</ActionIcon>
 					</Tooltip>

diff --git a/web/src/pages/admin/challenges/[id]/flags.tsx b/web/src/pages/admin/challenges/[id]/flags.tsx
@@ -60,10 +60,7 @@ function Page() {
 							</Text>
 						</Group>
 						<Tooltip label="创建 Flag" withArrow>
-							<ActionIcon
-								variant="transparent"
-								onClick={() => createOpen()}
-							>
+							<ActionIcon onClick={() => createOpen()}>
 								<MDIcon>add</MDIcon>
 							</ActionIcon>
 						</Tooltip>

diff --git a/web/src/pages/admin/challenges/[id]/images.tsx b/web/src/pages/admin/challenges/[id]/images.tsx
@@ -133,7 +133,6 @@ function Page() {
 							</Group>
 							<Tooltip label="添加端口映射" withArrow>
 								<ActionIcon
-									variant="transparent"
 									onClick={() =>
 										setPorts([
 											...ports,
@@ -201,7 +200,7 @@ function Page() {
 										setPorts(newPorts);
 									}}
 								>
-									<ActionIcon variant="transparent">
+									<ActionIcon>
 										<MDIcon color={"red"}>delete</MDIcon>
 									</ActionIcon>
 								</Tooltip>
@@ -218,7 +217,6 @@ function Page() {
 							</Group>
 							<Tooltip label="添加环境变量" withArrow>
 								<ActionIcon
-									variant="transparent"
 									onClick={() => {
 										setEnvs([
 											...envs,
@@ -284,7 +282,7 @@ function Page() {
 										setEnvs(newEnvs);
 									}}
 								>
-									<ActionIcon variant="transparent">
+									<ActionIcon>
 										<MDIcon color={"red"}>delete</MDIcon>
 									</ActionIcon>
 								</Tooltip>

diff --git a/web/src/pages/admin/challenges/[id]/index.tsx b/web/src/pages/admin/challenges/[id]/index.tsx
@@ -238,7 +238,6 @@ function Page() {
 							/>
 							<Tooltip label="清除附件" withArrow>
 								<ActionIcon
-									variant="transparent"
 									my={7}
 									onClick={() => deleteAttachment()}
 								>

diff --git a/web/src/pages/admin/challenges/[id]/submissions.tsx b/web/src/pages/admin/challenges/[id]/submissions.tsx
@@ -266,7 +266,6 @@ function Page() {
 												label="删除提交记录"
 											>
 												<ActionIcon
-													variant="transparent"
 													onClick={() =>
 														openDeleteSubmissionModal(
 															submission

diff --git a/web/src/pages/admin/challenges/index.tsx b/web/src/pages/admin/challenges/index.tsx
@@ -154,7 +154,10 @@ export default function Page() {
 								flexGrow: 1,
 							}}
 						/>
-						<ActionIcon onClick={() => setSearch(searchInput)}>
+						<ActionIcon
+							variant={"filled"}
+							onClick={() => setSearch(searchInput)}
+						>
 							<MDIcon size={15} c={"white"}>
 								search
 							</MDIcon>
@@ -232,7 +235,6 @@ export default function Page() {
 										<Flex align={"center"}>
 											分类
 											<ActionIcon
-												variant="transparent"
 												onClick={() =>
 													navigate(
 														"/admin/categories"
@@ -245,10 +247,7 @@ export default function Page() {
 									</Table.Th>
 									<Table.Th>
 										<Flex justify={"center"}>
-											<ActionIcon
-												variant="transparent"
-												onClick={createOpen}
-											>
+											<ActionIcon onClick={createOpen}>
 												<MDIcon>add</MDIcon>
 											</ActionIcon>
 										</Flex>
@@ -331,7 +330,6 @@ export default function Page() {
 										<Table.Th>
 											<Group justify="center">
 												<ActionIcon
-													variant="transparent"
 													onClick={() =>
 														navigate(
 															`/admin/challenges/${challenge?.id}`
@@ -341,7 +339,6 @@ export default function Page() {
 													<MDIcon>edit</MDIcon>
 												</ActionIcon>
 												<ActionIcon
-													variant="transparent"
 													onClick={() =>
 														openDeleteChallengeModal(
 															challenge

diff --git a/web/src/pages/admin/games/[id]/challenges.tsx b/web/src/pages/admin/games/[id]/challenges.tsx
@@ -88,10 +88,7 @@ function Page() {
 							</Text>
 						</Group>
 						<Tooltip label="添加题目" withArrow>
-							<ActionIcon
-								variant="transparent"
-								onClick={() => createOpen()}
-							>
+							<ActionIcon onClick={() => createOpen()}>
 								<MDIcon>add</MDIcon>
 							</ActionIcon>
 						</Tooltip>

diff --git a/web/src/pages/admin/games/[id]/notices.tsx b/web/src/pages/admin/games/[id]/notices.tsx
@@ -150,10 +150,7 @@ function Page() {
 							</Text>
 						</Group>
 						<Tooltip label="添加公告" withArrow>
-							<ActionIcon
-								variant="transparent"
-								onClick={() => createOpen()}
-							>
+							<ActionIcon onClick={() => createOpen()}>
 								<MDIcon>add</MDIcon>
 							</ActionIcon>
 						</Tooltip>
@@ -194,7 +191,6 @@ function Page() {
 									<Table.Td>
 										<Tooltip label="删除公告" withArrow>
 											<ActionIcon
-												variant="transparent"
 												onClick={() =>
 													openDeleteNoticeModal(
 														notice

diff --git a/web/src/pages/admin/games/[id]/submissions.tsx b/web/src/pages/admin/games/[id]/submissions.tsx
@@ -262,7 +262,6 @@ function Page() {
 												label="删除提交记录"
 											>
 												<ActionIcon
-													variant="transparent"
 													onClick={() =>
 														openDeleteSubmissionModal(
 															submission