feat: hint edit

GZCTF/ClientApp/src/components/HintList.tsx

@@ -0,0 +1,73 @@
+import { FC } from 'react'
+import {
+  ScrollArea,
+  Input,
+  Stack,
+  TextInput,
+  TextInputProps,
+  Button,
+  ActionIcon,
+} from '@mantine/core'
+import { mdiClose, mdiPlus } from '@mdi/js'
+import { Icon } from '@mdi/react'
+
+interface HintListProps extends TextInputProps {
+  hints: string[]
+  onChangeHint: (value: string[]) => void
+  disabled?: boolean
+  height?: number
+}
+
+export const HintList: FC<HintListProps> = (props) => {
+  const { hints, onChangeHint, disabled, height, ...rest } = props
+
+  const hintdict = hints.map((hint, key) => ({ hint, key }))
+
+  const handleChange = (key: number, value: string) => {
+    const newHints = [...hintdict]
+    newHints[key].hint = value
+    onChangeHint(newHints.map((h) => h.hint))
+  }
+
+  const handleAdd = () => {
+    const newHints = [...hintdict, { hint: '', key: hintdict.length }]
+    onChangeHint(newHints.map((h) => h.hint))
+  }
+
+  const handleDelete = (key: number) => {
+    const newHints = hintdict.filter((h) => h.key !== key)
+    onChangeHint(newHints.map((h) => h.hint))
+  }
+
+  return (
+    <Input.Wrapper {...rest}>
+      <ScrollArea offsetScrollbars scrollbarSize={4} style={{ height }}>
+        <Stack spacing="xs">
+          {hintdict.map((kv) => (
+            <TextInput
+              style={{ marginRight: 4 }}
+              value={kv.hint}
+              disabled={disabled}
+              key={kv.key}
+              onChange={(e) => handleChange(kv.key, e.target.value)}
+              rightSection={
+                <ActionIcon onClick={() => handleDelete(kv.key)}>
+                  <Icon path={mdiClose} size={1} />
+                </ActionIcon>
+              }
+            />
+          ))}
+          <Button
+            style={{ marginRight: 4 }}
+            leftIcon={<Icon path={mdiPlus} size={1} />}
+            onClick={handleAdd}
+          >
+            添加提示
+          </Button>
+        </Stack>
+      </ScrollArea>
+    </Input.Wrapper>
+  )
+}
+
+export default HintList

GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx

@@ -36,6 +36,7 @@ import {
   ChallengeTagLabelMap,
 } from '@Utils/ChallengeItem'
 import api, { ChallengeUpdateModel, ChallengeTag, ChallengeType } from '@Api'
+import HintList from '@Components/HintList'
 
 const GameChallengeEdit: FC = () => {
   const navigate = useNavigate()
@@ -260,8 +261,8 @@ const GameChallengeEdit: FC = () => {
               return { value: tag[1], ...data }
             })}
           />
-          <Stack spacing="sm">
-            <Textarea
+          </SimpleGrid>
+          <Textarea
               label={
                 <Group spacing="sm">
                   <Text size="sm">题目描述</Text>
@@ -274,26 +275,18 @@ const GameChallengeEdit: FC = () => {
               style={{ width: '100%' }}
               autosize
               disabled={disabled}
-              minRows={4}
-              maxRows={4}
+              minRows={3}
+              maxRows={3}
               onChange={(e) => setChallengeInfo({ ...challengeInfo, content: e.target.value })}
             />
-            <Textarea
-              label={
-                <Group spacing="sm">
-                  <Text size="sm">题目提示</Text>
-                  <Text size="xs" color="dimmed">
-                    请以分号 ; 分隔每个提示
-                  </Text>
-                </Group>
-              }
-              value={challengeInfo.hints ?? ''}
-              style={{ width: '100%' }}
-              autosize
+          <SimpleGrid cols={3}>
+          <Stack spacing="sm">
+            <HintList
+              label="题目提示"
+              hints={challengeInfo?.hints ?? []}
               disabled={disabled}
-              minRows={1}
-              maxRows={1}
-              // onChange={(e) => setChallengeInfo({ ...challengeInfo, hints: e.target.value })}
+              height={180}
+              onChangeHint={(hints) => setChallengeInfo({ ...challengeInfo, hints })}
             />
           </Stack>
           <Stack spacing="sm">