feat: compress avatar to webp

GZTimeWalker · May 6, 2023 · 7806dde · 7806dde
1 parent 5ec2796
commit 7806dde
Show file tree

Hide file tree

Showing 20 changed files with 162 additions and 58 deletions.
diff --git a/src/GZCTF/CTFServer.csproj b/src/GZCTF/CTFServer.csproj
@@ -60,6 +60,7 @@
     <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="7.0.0" />
     <PackageReference Include="Microsoft.Extensions.Options" Version="7.0.1" />
     <PackageReference Include="Portable.BouncyCastle" Version="1.9.0" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="3.0.1" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -143,7 +143,7 @@ const AppNavbar: FC = () => {
   const logout = () => {
     api.account.accountLogOut().then(() => {
       navigate('/')
-      mutate((key) => typeof key === 'string' && key.includes('game'), undefined, {
+      mutate((key) => typeof key === 'string' && key.includes('game/'), undefined, {
         revalidate: false,
       })
       showNotification({

diff --git a/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx b/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx
@@ -21,7 +21,7 @@ import {
   Tooltip,
 } from '@mantine/core'
 import { useClipboard, useDisclosure, useInputState } from '@mantine/hooks'
-import { showNotification, updateNotification } from '@mantine/notifications'
+import { notifications, showNotification, updateNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose, mdiDownload, mdiLightbulbOnOutline, mdiLoading } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
@@ -221,7 +221,7 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
       })
       .then((res) => {
         setSubmitId(res.data)
-
+        notifications.clean()
         showNotification({
           id: 'flag-submitted',
           color: 'orange',

diff --git a/src/GZCTF/ClientApp/src/components/TeamEditModal.tsx b/src/GZCTF/ClientApp/src/components/TeamEditModal.tsx
@@ -22,7 +22,7 @@ import {
 import { Dropzone } from '@mantine/dropzone'
 import { useClipboard } from '@mantine/hooks'
 import { useModals } from '@mantine/modals'
-import { showNotification } from '@mantine/notifications'
+import { showNotification, updateNotification, notifications } from '@mantine/notifications'
 import { mdiCheck, mdiClose, mdiRefresh, mdiStar } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
@@ -83,6 +83,8 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
   const [dropzoneOpened, setDropzoneOpened] = useState(false)
   const [avatarFile, setAvatarFile] = useState<File | null>(null)
   const [inviteCode, setInviteCode] = useState('')
+  const [disabled, setDisabled] = useState(false)
+  const { mutate: mutateTeams } = api.team.useTeamGetTeamsInfo()
 
   const theme = useMantineTheme()
   const clipboard = useClipboard()
@@ -114,7 +116,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             message: '队伍信息已更新',
             icon: <Icon path={mdiCheck} size={1} />,
           })
-          api.team.mutateTeamGetTeamsInfo()
+          mutateTeams((teams) => teams?.filter((x) => x.id !== teamInfo?.id))
           props.onClose()
         })
         .catch(showErrorNotification)
@@ -134,7 +136,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
           })
           setInviteCode('')
           setTeamInfo(null)
-          api.team.mutateTeamGetTeamsInfo()
+          mutateTeams((teams) => teams?.filter((x) => x.id !== teamInfo.id), { revalidate: false })
           props.onClose()
         })
         .catch(showErrorNotification)
@@ -154,8 +156,10 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             message: '队伍信息已更新',
             icon: <Icon path={mdiCheck} size={1} />,
           })
-          api.team.mutateTeamGetTeamsInfo()
           setTeamInfo(team.data)
+          mutateTeams((teams) => teams?.map((x) => (x.id === teamInfo.id ? team.data : x)), {
+            revalidate: false,
+          })
         })
         .catch(showErrorNotification)
     }
@@ -171,8 +175,10 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
           message: '队伍信息已更新',
           icon: <Icon path={mdiCheck} size={1} />,
         })
-        api.team.mutateTeamGetTeamsInfo()
         setTeamInfo(data.data)
+        mutateTeams((teams) => teams?.map((x) => (x.id === teamInfo?.id ? data.data : x)), {
+          revalidate: false,
+        })
       })
       .catch(showErrorNotification)
   }
@@ -195,19 +201,35 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
 
   const onChangeAvatar = () => {
     if (avatarFile && teamInfo?.id) {
+      setDisabled(true)
+      notifications.clean()
+      showNotification({
+        id: 'upload-avatar',
+        color: 'orange',
+        message: '正在上传头像',
+        loading: true,
+        autoClose: false,
+      })
+
       api.team
         .teamAvatar(teamInfo?.id, {
           file: avatarFile,
         })
         .then((data) => {
-          showNotification({
+          updateNotification({
+            id: 'upload-avatar',
             color: 'teal',
             message: '头像已更新',
             icon: <Icon path={mdiCheck} size={1} />,
+            autoClose: true,
           })
-          setTeamInfo({ ...teamInfo, avatar: data.data })
-          api.team.mutateTeamGetTeamsInfo()
           setAvatarFile(null)
+          const newTeamInfo = { ...teamInfo, avatar: data.data }
+          setTeamInfo(newTeamInfo)
+          mutateTeams((teams) => teams?.map((x) => (x.id === teamInfo.id ? newTeamInfo : x)), {
+            revalidate: false,
+          })
+          setDisabled(false)
           setDropzoneOpened(false)
         })
         .catch((err) => {
@@ -228,7 +250,9 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             message: '队伍信息已更新',
             icon: <Icon path={mdiCheck} size={1} />,
           })
-          api.team.mutateTeamGetTeamsInfo()
+          mutateTeams((teams) => teams?.map((x) => (x.id === teamInfo.id ? teamInfo : x)), {
+            revalidate: false,
+          })
         })
         .catch(showErrorNotification)
     }
@@ -415,6 +439,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
           m="0 auto 20px auto"
           miw={220}
           mih={220}
+          disabled={disabled}
           maxSize={3 * 1024 * 1024}
           accept={ACCEPT_IMAGE_MIME_TYPE}
         >
@@ -433,7 +458,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             )}
           </Group>
         </Dropzone>
-        <Button fullWidth variant="outline" onClick={onChangeAvatar}>
+        <Button fullWidth variant="outline" disabled={disabled} onClick={onChangeAvatar}>
           更新头像
         </Button>
       </Modal>

diff --git a/src/GZCTF/ClientApp/src/components/admin/ChallengeCreateModal.tsx b/src/GZCTF/ClientApp/src/components/admin/ChallengeCreateModal.tsx
@@ -42,7 +42,7 @@ const ChallengeCreateModal: FC<ChallengeCreateModalProps> = (props) => {
         .then((data) => {
           showNotification({
             color: 'teal',
-            message: '添加比赛题目成功',
+            message: '比赛题目已添加',
             icon: <Icon path={mdiCheck} size={1} />,
           })
           onAddChallenge(data.data)

diff --git a/src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx b/src/GZCTF/ClientApp/src/components/admin/FlagCreateModal.tsx
@@ -37,7 +37,7 @@ const FlagCreateModal: FC<ModalProps> = (props) => {
       .then(() => {
         showNotification({
           color: 'teal',
-          message: 'flag 创建成功',
+          message: 'flag 已创建',
           icon: <Icon path={mdiCheck} size={1} />,
         })
         challenge &&

diff --git a/src/GZCTF/ClientApp/src/components/admin/GameCreateModal.tsx b/src/GZCTF/ClientApp/src/components/admin/GameCreateModal.tsx
@@ -44,7 +44,7 @@ const GameCreateModal: FC<GameCreateModalProps> = (props) => {
       .then((data) => {
         showNotification({
           color: 'teal',
-          message: '比赛创建成功',
+          message: '比赛已创建',
           icon: <Icon path={mdiCheck} size={1} />,
         })
         onAddGame(data.data)

diff --git a/src/GZCTF/ClientApp/src/components/admin/GameNoticeEditModal.tsx b/src/GZCTF/ClientApp/src/components/admin/GameNoticeEditModal.tsx
@@ -52,7 +52,7 @@ const GameNoticeEditModal: FC<GameNoticeEditModalProps> = (props) => {
         .then((data) => {
           showNotification({
             color: 'teal',
-            message: '通知修改成功',
+            message: '通知已修改',
             icon: <Icon path={mdiCheck} size={1} />,
           })
           mutateGameNotice(data.data)

diff --git a/src/GZCTF/ClientApp/src/pages/Index.tsx b/src/GZCTF/ClientApp/src/pages/Index.tsx
@@ -48,15 +48,11 @@ const useStyles = createStyles((theme) => ({
 
 const Home: FC = () => {
   const { data: posts, mutate } = api.info.useInfoGetLatestPosts({
-    refreshInterval: 0,
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
+    refreshInterval: 5 * 60 * 1000,
   })
 
   const { data: allGames } = api.game.useGameGamesAll({
-    refreshInterval: 0,
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
+    refreshInterval: 5 * 60 * 1000,
   })
 
   allGames?.sort((a, b) => new Date(a.end!).getTime() - new Date(b.end!).getTime())

diff --git a/src/GZCTF/ClientApp/src/pages/account/Profile.tsx b/src/GZCTF/ClientApp/src/pages/account/Profile.tsx
@@ -17,7 +17,7 @@ import {
   SimpleGrid,
 } from '@mantine/core'
 import { Dropzone } from '@mantine/dropzone'
-import { showNotification } from '@mantine/notifications'
+import { notifications, showNotification, updateNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import PasswordChangeModal from '@Components/PasswordChangeModal'
@@ -41,7 +41,7 @@ const Profile: FC = () => {
   })
   const [avatarFile, setAvatarFile] = useState<File | null>(null)
 
-  const [disabled] = useState(false)
+  const [disabled, setDisabled] = useState(false)
 
   const [mailEditOpened, setMailEditOpened] = useState(false)
   const [pwdChangeOpened, setPwdChangeOpened] = useState(false)
@@ -64,17 +64,30 @@ const Profile: FC = () => {
 
   const onChangeAvatar = () => {
     if (avatarFile) {
+      setDisabled(true)
+      notifications.clean()
+      showNotification({
+        id: 'upload-avatar',
+        color: 'orange',
+        message: '正在上传头像',
+        loading: true,
+        autoClose: false,
+      })
+
       api.account
         .accountAvatar({
           file: avatarFile,
         })
         .then(() => {
-          showNotification({
+          updateNotification({
+            id: 'upload-avatar',
             color: 'teal',
             message: '头像已更新',
             icon: <Icon path={mdiCheck} size={1} />,
+            autoClose: true,
           })
-          mutate({ ...user })
+          setDisabled(false)
+          mutate({ ...user }, { revalidate: false })
           setAvatarFile(null)
           setDropzoneOpened(false)
         })

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx
@@ -23,7 +23,7 @@ import { DatePickerInput, TimeInput } from '@mantine/dates'
 import { Dropzone } from '@mantine/dropzone'
 import { useClipboard, useInputState } from '@mantine/hooks'
 import { useModals } from '@mantine/modals'
-import { showNotification } from '@mantine/notifications'
+import { notifications, showNotification, updateNotification } from '@mantine/notifications'
 import {
   mdiKeyboardBackspace,
   mdiCheck,
@@ -90,14 +90,27 @@ const GameInfoEdit: FC = () => {
 
   const onUpdatePoster = (file: File | undefined) => {
     if (game && file) {
+      setDisabled(true)
+      notifications.clean()
+      showNotification({
+        id: 'upload-poster',
+        color: 'orange',
+        message: '正在上传海报',
+        loading: true,
+        autoClose: false,
+      })
+
       api.edit
         .editUpdateGamePoster(game.id!, { file })
         .then((res) => {
-          showNotification({
+          updateNotification({
+            id: 'upload-poster',
             color: 'teal',
-            message: '成功修改比赛海报',
+            message: '比赛海报已更新',
             icon: <Icon path={mdiCheck} size={1} />,
+            autoClose: true,
           })
+          setDisabled(false)
           mutate({ ...game, poster: res.data })
         })
         .catch(showErrorNotification)

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/Index.tsx
@@ -75,7 +75,7 @@ const GameChallengeEdit: FC = () => {
       .then(() => {
         showNotification({
           color: 'teal',
-          message: '题目状态更新成功',
+          message: '题目状态已更新',
           icon: <Icon path={mdiCheck} size={1} />,
         })
         mutate(

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/challenges/[chalId]/Index.tsx
@@ -53,6 +53,8 @@ const GameChallengeEdit: FC = () => {
     revalidateOnFocus: false,
   })
 
+  const { mutate: mutateChals } = api.edit.useEditGetGameChallenges(numId)
+
   const [challengeInfo, setChallengeInfo] = useState<ChallengeUpdateModel>({ ...challenge })
   const [disabled, setDisabled] = useState(false)
 
@@ -92,7 +94,9 @@ const GameChallengeEdit: FC = () => {
             })
           }
           mutate(data.data)
-          api.edit.mutateEditGetGameChallenges(numId)
+          mutateChals((chals) => chals?.map((chal) => (chal.id === numCId ? data.data : chal)), {
+            revalidate: false,
+          })
         })
         .catch(showErrorNotification)
         .finally(() => {
@@ -112,7 +116,7 @@ const GameChallengeEdit: FC = () => {
           message: '题目已删除',
           icon: <Icon path={mdiCheck} size={1} />,
         })
-        api.edit.mutateEditGetGameChallenges(numId)
+        mutateChals((chals) => chals?.filter((chal) => chal.id !== numCId), { revalidate: false })
         navigate(`/admin/games/${id}/challenges`)
       })
       .catch(showErrorNotification)

diff --git a/src/GZCTF/ClientApp/src/utils/useConfig.ts b/src/GZCTF/ClientApp/src/utils/useConfig.ts
@@ -91,10 +91,12 @@ export const localStorageProvider = () => {
   const cacheKey = 'gzctf-cache'
   const map = new Map(JSON.parse(LZString.decompress(localStorage.getItem(cacheKey) || '') || '[]'))
 
-  window.addEventListener('beforeunload', () => {
-    const appCache = LZString.compress(JSON.stringify(Array.from(map.entries())))
-    localStorage.setItem(cacheKey, appCache)
-  })
+  if (!import.meta.env.DEV) {
+    window.addEventListener('beforeunload', () => {
+      const appCache = LZString.compress(JSON.stringify(Array.from(map.entries())))
+      localStorage.setItem(cacheKey, appCache)
+    })
+  }
 
   return map as Cache
 }
diff --git a/src/GZCTF/Controllers/AccountController.cs b/src/GZCTF/Controllers/AccountController.cs
@@ -503,10 +503,10 @@ public async Task<IActionResult> Avatar(IFormFile file, CancellationToken token)
         if (user!.AvatarHash is not null)
             await fileService.DeleteFileByHash(user.AvatarHash, token);
 
-        var avatar = await fileService.CreateOrUpdateFile(file, "avatar", token);
+        var avatar = await fileService.CreateOrUpdateImage(file, "avatar", token);
 
         if (avatar is null)
-            return BadRequest(new RequestResponse("文件创建失败"));
+            return BadRequest(new RequestResponse("用户头像更新失败"));
 
         user.AvatarHash = avatar.Hash;
         var result = await userManager.UpdateAsync(user);

diff --git a/src/GZCTF/Controllers/EditController.cs b/src/GZCTF/Controllers/EditController.cs
@@ -266,7 +266,7 @@ public async Task<IActionResult> UpdateGamePoster([FromRoute] int id, IFormFile
         if (game is null)
             return NotFound(new RequestResponse("比赛未找到", 404));
 
-        var poster = await fileService.CreateOrUpdateFile(file, "poster", token);
+        var poster = await fileService.CreateOrUpdateImage(file, "poster", token, 0);
 
         if (poster is null)
             return BadRequest(new RequestResponse("文件创建失败"));

diff --git a/src/GZCTF/Controllers/TeamController.cs b/src/GZCTF/Controllers/TeamController.cs
@@ -486,10 +486,10 @@ public async Task<IActionResult> Avatar([FromRoute] int id, IFormFile file, Canc
         if (team.AvatarHash is not null)
             _ = await FileService.DeleteFileByHash(team.AvatarHash, token);
 
-        var avatar = await FileService.CreateOrUpdateFile(file, "avatar", token);
+        var avatar = await FileService.CreateOrUpdateImage(file, "avatar", token);
 
         if (avatar is null)
-            return BadRequest(new RequestResponse("未知错误"));
+            return BadRequest(new RequestResponse("队伍头像更新失败"));
 
         team.AvatarHash = avatar.Hash;
         await teamRepository.SaveAsync(token);