feat: writeup review

GZTimeWalker · Nov 11, 2022 · 34202be · 34202be
1 parent d59bc94
commit 34202be
Show file tree

Hide file tree

Showing 13 changed files with 233 additions and 50 deletions.
diff --git a/GZCTF/ClientApp/package.json b/GZCTF/ClientApp/package.json
@@ -23,6 +23,7 @@
     "@mdi/js": "^7.0.96",
     "@mdi/react": "^1.6.1",
     "@microsoft/signalr": "^7.0.0",
+    "@types/react-pdf": "^5.7.4",
     "dayjs": "^1.11.6",
     "echarts": "^5.4.0",
     "echarts-for-react": "^3.0.2",

diff --git a/GZCTF/ClientApp/pnpm-lock.yaml b/GZCTF/ClientApp/pnpm-lock.yaml
diff --git a/GZCTF/ClientApp/src/Api.ts b/GZCTF/ClientApp/src/Api.ts
@@ -548,7 +548,7 @@ export interface GameInfoModel {
    * Writeup 附加说明
    * @minLength 1
    */
-  wpnote: string
+  wpnote?: string
 }
 
 /**

diff --git a/GZCTF/ClientApp/src/components/admin/PDFViewer.tsx b/GZCTF/ClientApp/src/components/admin/PDFViewer.tsx
@@ -0,0 +1,74 @@
+import { FC, useState } from 'react'
+import { Document, Page, pdfjs } from 'react-pdf'
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
+import 'react-pdf/dist/esm/Page/TextLayer.css'
+import { createStyles, Paper, ScrollArea, Stack } from '@mantine/core'
+import { showErrorNotification } from '@Utils/ApiErrorHandler'
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`
+
+interface PDFViewerProps {
+  url?: string
+  height?: number | string
+}
+
+const useStyles = createStyles((theme, { height }: PDFViewerProps) => ({
+  layout: {
+    marginLeft: theme.spacing.md,
+    marginRight: theme.spacing.md,
+    borderRadius: theme.radius.md,
+
+    [theme.fn.largerThan(1100 + theme.spacing.md * 2)]: {
+      maxWidth: 900,
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+
+    '& canvas': {
+      minWidth: '100% !important',
+      maxWidth: '100% !important',
+      height: 'auto !important',
+      borderRadius: theme.radius.md,
+    },
+
+    '& .react-pdf__Page__textContent': {
+      display: 'none',
+    },
+  },
+
+  doc: {
+    maxHeight: height,
+  },
+
+  paper: {
+    marginBottom: theme.spacing.md,
+  },
+}))
+
+const PDFViewer: FC<PDFViewerProps> = (props) => {
+  const [numPages, setNumPages] = useState(0)
+  const { classes } = useStyles(props)
+
+  return (
+    <ScrollArea className={classes.layout} type="never">
+      <Document
+        file={props.url}
+        className={classes.doc}
+        onLoadSuccess={({ numPages }) => {
+          setNumPages(numPages)
+        }}
+        onLoadError={showErrorNotification}
+      >
+        <Stack>
+          {Array.from(new Array(numPages), (el, index) => (
+            <Paper className={classes.paper} key={`page_${index + 1}`}>
+              <Page width={900} pageNumber={index + 1} renderAnnotationLayer={false} />
+            </Paper>
+          ))}
+        </Stack>
+      </Document>
+    </ScrollArea>
+  )
+}
+
+export default PDFViewer
diff --git a/GZCTF/ClientApp/src/components/admin/TeamWriteupCard.tsx b/GZCTF/ClientApp/src/components/admin/TeamWriteupCard.tsx
@@ -0,0 +1,49 @@
+import dayjs from 'dayjs'
+import { FC } from 'react'
+import { ActionIcon, Avatar, Card, Group, PaperProps, Stack, Text } from '@mantine/core'
+import { mdiDownload } from '@mdi/js'
+import { Icon } from '@mdi/react'
+import { WriteupInfoModel } from '@Api'
+
+interface TeamWriteupCardProps extends PaperProps {
+  writeup: WriteupInfoModel
+  selected?: boolean
+  onClick: () => void
+}
+
+const TeamWriteupCard: FC<TeamWriteupCardProps> = ({ writeup, selected, ...props }) => {
+  return (
+    <Card
+      {...props}
+      p="sm"
+      shadow="sm"
+      sx={(theme) => ({
+        border: selected
+          ? `2px solid ${theme.colors.brand[theme.colorScheme === 'dark' ? 8 : 6]}`
+          : 'none',
+        cursor: 'pointer',
+      })}
+    >
+      <Group noWrap spacing={3} position="apart">
+        <Group noWrap position="apart">
+          <Avatar src={writeup.team?.avatar} size="md">
+            {writeup.team?.name?.slice(0, 1)}
+          </Avatar>
+          <Stack spacing={0}>
+            <Text lineClamp={1} weight={600}>
+              {writeup.team?.name}
+            </Text>
+            <Text lineClamp={1} size="xs" color="dimmed">
+              {dayjs(writeup.uploadTimeUTC).format('YYYY-MM-DD HH:mm')}
+            </Text>
+          </Stack>
+        </Group>
+        <ActionIcon onClick={() => window.open(writeup.url, '_blank')}>
+          <Icon path={mdiDownload} size={1} />
+        </ActionIcon>
+      </Group>
+    </Card>
+  )
+}
+
+export default TeamWriteupCard
diff --git a/GZCTF/ClientApp/src/pages/admin/games/Index.tsx b/GZCTF/ClientApp/src/pages/admin/games/Index.tsx
@@ -76,7 +76,7 @@ const Games: FC = () => {
           <Button leftIcon={<Icon path={mdiPlus} size={1} />} onClick={() => setCreateOpened(true)}>
             新建比赛
           </Button>
-          <Group position="right">
+          <Group style={{ width: 'calc(100% - 9rem)' }} position="right">
             <ActionIcon size="lg" disabled={page <= 1} onClick={() => setPage(page - 1)}>
               <Icon path={mdiArrowLeftBold} size={1} />
             </ActionIcon>

diff --git a/GZCTF/ClientApp/src/pages/admin/games/[id]/Notices.tsx b/GZCTF/ClientApp/src/pages/admin/games/[id]/Notices.tsx
@@ -63,7 +63,7 @@ const GameNoticeEdit: FC = () => {
             返回上级
           </Button>
 
-          <Group position="center">
+          <Group position="right">
             <Button
               leftIcon={<Icon path={mdiPlus} size={1} />}
               onClick={() => {

diff --git a/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx b/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx
@@ -292,7 +292,7 @@ const GameTeamReview: FC = () => {
           >
             返回上级
           </Button>
-          <Group style={{ width: 'calc(100% - 9rem)' }} position="apart">
+          <Group w="calc(100% - 9rem)" position="left">
             <Select
               placeholder="全部显示"
               clearable