feat: updates

2025-12-16 13:17:46 +00:00 · 2022-06-08 11:48:22 +08:00 · 2022-06-08 11:48:22 +08:00 · d4d8dd817b
commit d4d8dd817b
parent 133881d287
22 changed files with 667 additions and 172 deletions
--- a/packages/web/components/New/ArtistRow.tsx
+++ b/packages/web/components/New/ArtistRow.tsx
@ -45,10 +45,10 @@ const ArtistRow = ({

      {/* Artists */}
      {artists && (
-        <div className='no-scrollbar -ml-2.5 flex w-screen overflow-x-scroll lg:ml-auto lg:grid lg:w-auto lg:grid-cols-5 lg:gap-10'>
+        <div className='no-scrollbar -ml-2.5 flex w-screen snap-x overflow-x-scroll lg:ml-auto lg:grid lg:w-auto lg:grid-cols-5 lg:gap-10'>
          {artists.map(artist => (
            <div
-              className='mr-5 first-of-type:ml-2.5 last-of-type:mr-2.5 lg:mr-0'
+              className='mr-5 snap-start first-of-type:ml-2.5 last-of-type:mr-2.5 lg:mr-0'
              key={artist.id}
            >
              <Artist artist={artist} key={artist.id} />
@ -65,8 +65,14 @@ const ArtistRow = ({
              className='mr-5 first-of-type:ml-2.5 last-of-type:mr-2.5 lg:mr-0'
              key={i}
            >
-              <div className='aspect-square w-full rounded-full bg-white dark:bg-neutral-800' />
-              <div className='mt-2.5 text-14 font-bold text-transparent'>
+              <div
+                className='aspect-square w-full rounded-full bg-white dark:bg-neutral-800'
+                style={{
+                  minHeight: '96px',
+                  minWidth: '96px',
+                }}
+              />
+              <div className='mt-2.5 text-12 font-medium text-transparent lg:text-16 lg:font-bold'>
                PLACE
              </div>
            </div>
--- a/packages/web/components/New/CoverWall.tsx
+++ b/packages/web/components/New/CoverWall.tsx
@ -21,8 +21,8 @@ const CoverWall = ({
      '2xl': 'md',
    },
    large: {
-      sm: 'sm',
-      md: 'sm',
+      sm: 'md',
+      md: 'md',
      lg: 'md',
      xl: 'md',
      '2xl': 'lg',
--- a/packages/web/components/New/Layout.tsx
+++ b/packages/web/components/New/Layout.tsx
@ -1,7 +1,7 @@
 import Main from '@/web/components/New/Main'
 import Player from '@/web/components/New/Player'
 import MenuBar from '@/web/components/New/MenuBar'
-import Topbar from '@/web/components/New/Topbar'
+import Topbar from '@/web/components/New/Topbar/TopbarDesktop'
 import { css, cx } from '@emotion/css'
 import { useMemo } from 'react'
 import { player } from '@/web/store'
--- a/packages/web/components/New/LayoutMobile.tsx
+++ b/packages/web/components/New/LayoutMobile.tsx
@ -5,6 +5,8 @@ import { player } from '@/web/store'
 import { useSnapshot } from 'valtio'
 import Router from '@/web/components/New/Router'
 import MenuBar from './MenuBar'
+import TopbarMobile from './Topbar/TopbarMobile'
+import { isIOS, isPWA, isSafari } from '@/web/utils/common'

 const LayoutMobile = () => {
  const playerSnapshot = useSnapshot(player)
@ -13,21 +15,36 @@ const LayoutMobile = () => {
  return (
    <div id='layout' className='select-none bg-white pb-32 pt-3 dark:bg-black'>
      <main className='min-h-screen overflow-y-auto overflow-x-hidden px-2.5 pb-16'>
+        <TopbarMobile />
        <Router />
      </main>
+      <div
+        className={cx(
+          'fixed bottom-0 left-0 right-0 pt-3 dark:bg-black',
+          css`
+            padding-bottom: calc(
+              ${isIOS && isSafari && isPWA
+                  ? '24px'
+                  : 'env(safe-area-inset-bottom)'} + 0.75rem
+            );
+          `
+        )}
+      >
        {showPlayer && (
          <div
            className={cx(
-            'fixed left-7 right-7',
+              'absolute left-7 right-7',
              css`
-              bottom: 72px;
+                top: calc(
+                  -100% - 6px + ${isIOS && isSafari && isPWA ? '24px' : 'env(safe-area-inset-bottom)'}
+                );
              `
            )}
          >
            <Player />
          </div>
        )}
-      <div className='fixed bottom-0 left-0 right-0 py-3 dark:bg-black'>
+
        <MenuBar />
      </div>
    </div>
--- a/packages/web/components/New/MenuBar.tsx
+++ b/packages/web/components/New/MenuBar.tsx
@ -79,8 +79,8 @@ const TabName = () => {

 const Tabs = () => {
  const navigate = useNavigate()
-  const location = useLocation()
  const controls = useAnimation()
+  const [active, setActive] = useState<string>(tabs[0].path)

  const animate = async (path: string) => {
    await controls.start((p: string) =>
@ -97,7 +97,10 @@ const Tabs = () => {
          animate={controls}
          transition={{ ease, duration: 0.18 }}
          onMouseDown={() => animate(tab.path)}
-          onClick={() => navigate(tab.path)}
+          onClick={() => {
+            setActive(tab.path)
+            navigate(tab.path)
+          }}
          custom={tab.path}
          variants={{
            scale: { scale: 0.8 },
@ -108,9 +111,9 @@ const Tabs = () => {
            name={tab.icon}
            className={cx(
              'app-region-no-drag h-10 w-10 transition-colors duration-500',
-              location.pathname === tab.path
+              active === tab.path
                ? 'text-brand-600  dark:text-brand-700'
-                : 'hover:text-black dark:hover:text-white'
+                : 'lg:hover:text-black lg:dark:hover:text-white'
            )}
          />
        </motion.div>
--- a/packages/web/components/New/PageTransition.tsx
+++ b/packages/web/components/New/PageTransition.tsx
@ -1,5 +1,6 @@
 import { motion } from 'framer-motion'
 import { ease } from '@/web/utils/const'
+import useIsMobile from '@/web/hooks/useIsMobile'

 const PageTransition = ({
  children,
@ -8,6 +9,11 @@ const PageTransition = ({
  children: React.ReactNode
  disableEnterAnimation?: boolean
 }) => {
+  const isMobile = useIsMobile()
+  if (isMobile) {
+    return <>{children}</>
+  }
+
  return (
    <motion.div
      initial={{ opacity: disableEnterAnimation ? 1 : 0 }}
--- a/packages/web/components/New/PlayerMobile.tsx
+++ b/packages/web/components/New/PlayerMobile.tsx
@ -6,26 +6,33 @@ import Icon from '@/web/components/Icon'
 import useCoverColor from '@/web/hooks/useCoverColor'
 import { resizeImage } from '@/web/utils/common'
 import { motion, PanInfo, useMotionValue } from 'framer-motion'
+import { useLockBodyScroll } from 'react-use'
+import { useState } from 'react'

 const PlayerMobile = () => {
  const playerSnapshot = useSnapshot(player)
  const bgColor = useCoverColor(playerSnapshot.track?.al?.picUrl ?? '')
+  const [locked, setLocked] = useState(false)
+
+  useLockBodyScroll(locked)

  const x = useMotionValue(0)
  const onDragEnd = (
    event: MouseEvent | TouchEvent | PointerEvent,
    info: PanInfo
  ) => {
+    console.log(JSON.stringify(info))
    const x = info.offset.x
    const offset = 100
-    if (x > offset) player.nextTrack()
-    if (x < -offset) player.prevTrack()
+    if (x > offset) player.prevTrack()
+    if (x < -offset) player.nextTrack()
+    setLocked(false)
  }

  return (
    <div
      className={cx(
-        'relative flex h-16 w-full items-center rounded-20 py-2.5 px-3',
+        'relative flex h-16 w-full items-center rounded-20 px-3',
        css`
          background-color: ${bgColor.to};
        `
@ -40,21 +47,32 @@ const PlayerMobile = () => {
        )}
      ></div>

+      <div className='h-full py-2.5'>
        <Image
          src={resizeImage(playerSnapshot.track?.al.picUrl || '', 'sm')}
          alt='Cover'
          className='z-10 aspect-square h-full rounded-lg'
        />
+      </div>

-      <div className='relative flex-grow overflow-hidden px-3'>
+      <div className='relative flex h-full flex-grow items-center overflow-hidden px-3'>
        <motion.div
          drag='x'
          style={{ x }}
          dragConstraints={{ left: 0, right: 0 }}
+          onDragStart={() => setLocked(true)}
          onDragEnd={onDragEnd}
-          className='line-clamp-1 text-14 font-bold text-white'
+          className=' flex h-full flex-grow items-center '
        >
+          <div className='flex-shrink-0'>
+            <div className='line-clamp-1 text-14 font-bold text-white'>
              {playerSnapshot.track?.name}
+            </div>
+            <div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
+              {playerSnapshot.track?.ar?.map(a => a.name).join(', ')}
+            </div>
+          </div>
+          <div className='h-full flex-grow'></div>
        </motion.div>

        <div
--- a/packages/web/components/New/Topbar.stories.tsx
+++ b/packages/web/components/New/Topbar.stories.tsx
@ -1,6 +1,6 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import Topbar from './Topbar'
+import Topbar from './Topbar/TopbarDesktop'

 export default {
  title: 'Components/Topbar',
--- a/packages/web/components/New/Topbar.tsx
+++ b/packages/web/components/New/Topbar.tsx
@ -1,125 +0,0 @@
-import { css, cx } from '@emotion/css'
-import { motion, useAnimation } from 'framer-motion'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { ease } from '@/web/utils/const'
-import Icon from '../Icon'
-import { resizeImage } from '@/web/utils/common'
-import useUser from '@/web/api/hooks/useUser'
-
-const NavigationButtons = () => {
-  const navigate = useNavigate()
-  const controlsBack = useAnimation()
-  const controlsForward = useAnimation()
-  const transition = { duration: 0.18, ease }
-
-  return (
-    <>
-      <button
-        onClick={() => navigate(-1)}
-        onMouseDown={async () => {
-          await controlsBack.start({ x: -5 })
-          await controlsBack.start({ x: 0 })
-        }}
-        className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'
-      >
-        <motion.div animate={controlsBack} transition={transition}>
-          <Icon name='back' className='h-7 w-7 text-neutral-500' />
-        </motion.div>
-      </button>
-      <button
-        onClick={async () => {
-          navigate(1)
-        }}
-        onMouseDown={async () => {
-          await controlsForward.start({ x: 5 })
-          await controlsForward.start({ x: 0 })
-        }}
-        className='app-region-no-drag ml-2.5 rounded-full bg-day-600 p-2.5 dark:bg-night-600'
-      >
-        <motion.div animate={controlsForward} transition={transition}>
-          <Icon name='forward' className='h-7 w-7 text-neutral-500' />
-        </motion.div>
-      </button>
-    </>
-  )
-}
-
-const Avatar = ({ className }: { className?: string }) => {
-  const navigate = useNavigate()
-  const { data: user } = useUser()
-
-  const avatarUrl = user?.profile?.avatarUrl
-    ? resizeImage(user?.profile?.avatarUrl ?? '', 'sm')
-    : ''
-
-  return (
-    <>
-      {avatarUrl ? (
-        <img
-          src={avatarUrl}
-          onClick={() => navigate('/login')}
-          className={cx(
-            'app-region-no-drag rounded-full',
-            className || 'h-12 w-12'
-          )}
-        />
-      ) : (
-        <div
-          onClick={() => navigate('/login')}
-          className={cx(
-            'rounded-full bg-day-600 p-2.5 dark:bg-night-600',
-            className || 'h-12 w-12'
-          )}
-        >
-          <Icon name='user' className='h-7 w-7 text-neutral-500' />
-        </div>
-      )}
-    </>
-  )
-}
-
-const Topbar = () => {
-  const location = useLocation()
-
-  return (
-    <div
-      className={cx(
-        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 pt-11 pb-10 pr-6 pl-10 ',
-        css`
-          left: 104px;
-        `,
-        !location.pathname.startsWith('/album/') &&
-          !location.pathname.startsWith('/playlist/') &&
-          'bg-gradient-to-b from-white dark:from-black'
-      )}
-    >
-      {/* Left Part */}
-      <div className='flex items-center'>
-        <NavigationButtons />
-
-        {/* Dividing line */}
-        <div className='mx-6 h-4 w-px bg-black/20 dark:bg-white/20'></div>
-
-        {/* Search Box */}
-        <div className='app-region-no-drag flex min-w-[284px] items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600'>
-          <Icon name='search' className='mr-2.5 h-7 w-7' />
-          <input
-            placeholder='Artist, songs and more'
-            className='bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200'
-          />
-        </div>
-      </div>
-
-      {/* Right Part */}
-      <div className='flex'>
-        <button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
-          <Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
-        </button>
-
-        <Avatar className='ml-3 h-12 w-12' />
-      </div>
-    </div>
-  )
-}
-
-export default Topbar
--- a/packages/web/components/New/Topbar/Avatar.tsx
+++ b/packages/web/components/New/Topbar/Avatar.tsx
@ -0,0 +1,41 @@
+import { css, cx } from '@emotion/css'
+import { useNavigate } from 'react-router-dom'
+import Icon from '../../Icon'
+import { resizeImage } from '@/web/utils/common'
+import useUser from '@/web/api/hooks/useUser'
+
+const Avatar = ({ className }: { className?: string }) => {
+  const navigate = useNavigate()
+  const { data: user } = useUser()
+
+  const avatarUrl = user?.profile?.avatarUrl
+    ? resizeImage(user?.profile?.avatarUrl ?? '', 'sm')
+    : ''
+
+  return (
+    <>
+      {avatarUrl ? (
+        <img
+          src={avatarUrl}
+          onClick={() => navigate('/login')}
+          className={cx(
+            'app-region-no-drag rounded-full',
+            className || 'h-12 w-12'
+          )}
+        />
+      ) : (
+        <div
+          onClick={() => navigate('/login')}
+          className={cx(
+            'rounded-full bg-day-600 p-2.5 dark:bg-night-600',
+            className || 'h-12 w-12'
+          )}
+        >
+          <Icon name='user' className='h-7 w-7 text-neutral-500' />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Avatar
--- a/packages/web/components/New/Topbar/NavigationButtons.tsx
+++ b/packages/web/components/New/Topbar/NavigationButtons.tsx
@ -0,0 +1,45 @@
+import { css, cx } from '@emotion/css'
+import { motion, useAnimation } from 'framer-motion'
+import { useNavigate } from 'react-router-dom'
+import { ease } from '@/web/utils/const'
+import Icon from '../../Icon'
+
+const NavigationButtons = () => {
+  const navigate = useNavigate()
+  const controlsBack = useAnimation()
+  const controlsForward = useAnimation()
+  const transition = { duration: 0.18, ease }
+
+  return (
+    <>
+      <button
+        onClick={() => navigate(-1)}
+        onMouseDown={async () => {
+          await controlsBack.start({ x: -5 })
+          await controlsBack.start({ x: 0 })
+        }}
+        className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'
+      >
+        <motion.div animate={controlsBack} transition={transition}>
+          <Icon name='back' className='h-7 w-7 text-neutral-500' />
+        </motion.div>
+      </button>
+      <button
+        onClick={async () => {
+          navigate(1)
+        }}
+        onMouseDown={async () => {
+          await controlsForward.start({ x: 5 })
+          await controlsForward.start({ x: 0 })
+        }}
+        className='app-region-no-drag ml-2.5 rounded-full bg-day-600 p-2.5 dark:bg-night-600'
+      >
+        <motion.div animate={controlsForward} transition={transition}>
+          <Icon name='forward' className='h-7 w-7 text-neutral-500' />
+        </motion.div>
+      </button>
+    </>
+  )
+}
+
+export default NavigationButtons
--- a/packages/web/components/New/Topbar/SearchBox.tsx
+++ b/packages/web/components/New/Topbar/SearchBox.tsx
@ -0,0 +1,16 @@
+import { css, cx } from '@emotion/css'
+import Icon from '../../Icon'
+
+const SearchBox = () => {
+  return (
+    <div className='app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600 lg:min-w-[284px]'>
+      <Icon name='search' className='mr-2.5 h-7 w-7' />
+      <input
+        placeholder='Artist, songs and more'
+        className='bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200'
+      />
+    </div>
+  )
+}
+
+export default SearchBox
--- a/packages/web/components/New/Topbar/SettingsButton.tsx
+++ b/packages/web/components/New/Topbar/SettingsButton.tsx
@ -0,0 +1,11 @@
+import Icon from '@/web/components/Icon'
+
+const SettingsButton = () => {
+  return (
+    <button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
+      <Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
+    </button>
+  )
+}
+
+export default SettingsButton
--- a/packages/web/components/New/Topbar/TopbarDesktop.tsx
+++ b/packages/web/components/New/Topbar/TopbarDesktop.tsx
@ -0,0 +1,42 @@
+import { css, cx } from '@emotion/css'
+import { useLocation } from 'react-router-dom'
+import Avatar from './Avatar'
+import SearchBox from './SearchBox'
+import SettingsButton from './SettingsButton'
+import NavigationButtons from './NavigationButtons'
+
+const TopbarDesktop = () => {
+  const location = useLocation()
+
+  return (
+    <div
+      className={cx(
+        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 pt-11 pb-10 pr-6 pl-10 ',
+        css`
+          left: 104px;
+        `,
+        !location.pathname.startsWith('/album/') &&
+          !location.pathname.startsWith('/playlist/') &&
+          'bg-gradient-to-b from-white dark:from-black'
+      )}
+    >
+      {/* Left Part */}
+      <div className='flex items-center'>
+        <NavigationButtons />
+
+        {/* Dividing line */}
+        <div className='mx-6 h-4 w-px bg-black/20 dark:bg-white/20'></div>
+
+        <SearchBox />
+      </div>
+
+      {/* Right Part */}
+      <div className='flex'>
+        <SettingsButton />
+        <Avatar className='ml-3 h-12 w-12' />
+      </div>
+    </div>
+  )
+}
+
+export default TopbarDesktop
--- a/packages/web/components/New/Topbar/TopbarMobile.tsx
+++ b/packages/web/components/New/Topbar/TopbarMobile.tsx
@ -0,0 +1,22 @@
+import Avatar from './Avatar'
+import SearchBox from './SearchBox'
+import SettingsButton from './SettingsButton'
+
+const TopbarMobile = () => {
+  return (
+    <div className='mb-5 mt-7 flex'>
+      <div className='flex-grow'>
+        <SearchBox />
+      </div>
+
+      <div className='ml-6 flex'>
+        <SettingsButton />
+        <div className='ml-3'>
+          <Avatar />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopbarMobile
--- a/packages/web/components/New/TrackList.tsx
+++ b/packages/web/components/New/TrackList.tsx
@ -41,7 +41,7 @@ const TrackList = ({
          <div className='mr-6'>{String(track.no).padStart(2, '0')}</div>
          <div className='flex flex-grow items-center'>
            {track.name}
-            {playingTrack?.id === track.id && playing && (
+            {playingTrack?.id === track.id && (
              <div className='ml-4'>
                <Wave playing={playing} />
              </div>
--- a/packages/web/package.json
+++ b/packages/web/package.json
@ -5,6 +5,7 @@
  "scripts": {
    "dev": "vite dev --host",
    "build": "vite build",
+    "preview": "vite build && vite preview --host",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest run --coverage",
@ -82,6 +83,7 @@
    "tailwindcss": "^3.0.24",
    "typescript": "*",
    "vite": "^2.9.6",
+    "vite-plugin-pwa": "^0.12.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vitest": "^0.12.10"
  }
--- a/packages/web/pages/New/Discover.tsx
+++ b/packages/web/pages/New/Discover.tsx
@ -44,22 +44,23 @@ const getAlbumsFromAPI = async () => {
    )
  )) as FetchPlaylistResponse[]

-  const ids: number[] = []
+  let ids: number[] = []
  playlists.forEach(playlist =>
    playlist?.playlist?.trackIds?.forEach(t => ids.push(t.id))
  )
  if (!ids.length) {
    return []
  }
+  ids = sampleSize(ids, 100)

  const tracks = await fetchTracksWithReactQuery({ ids })
-  if (!tracks.songs.length) {
+  if (!tracks?.songs?.length) {
    return []
  }

  // 从歌单中抽出歌曲
  const pickedIds: number[] = []
-  let albums: DiscoverAlbum[] = []
+  const albums: DiscoverAlbum[] = []
  tracks.songs.forEach(t => {
    if (pickedIds.includes(t.al.id)) return
    pickedIds.push(t.al.id)
@ -71,7 +72,6 @@ const getAlbumsFromAPI = async () => {
  })

  // 挑选出大图
-  albums = sampleSize(albums, 100)
  const largeCover = sampleSize([...Array(100).keys()], ~~(100 / 3))
  albums.map((album, index) => (album.large = largeCover.includes(index)))

--- a/packages/web/styles/global.css
+++ b/packages/web/styles/global.css
@ -129,8 +129,13 @@ a {

 * {
  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
 }

 .no-scrollbar::-webkit-scrollbar {
  display: none;
 }
+
+html {
+  background-color: black;
+}
--- a/packages/web/utils/common.ts
+++ b/packages/web/utils/common.ts
@ -158,3 +158,9 @@ export async function calcCoverColor(coverUrl: string) {
    return c.toHex()
  })
 }
+
+export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+export const isSafari = /Safari/.test(navigator.userAgent)
+export const isPWA =
+  (navigator as any).standalone ||
+  window.matchMedia('(display-mode: standalone)').matches
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@ -5,6 +5,7 @@ import path, { join } from 'path'
 import { defineConfig } from 'vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { visualizer } from 'rollup-plugin-visualizer'
+import { VitePWA } from 'vite-plugin-pwa'

 dotenv.config({ path: path.resolve(process.cwd(), '../../.env') })
 const IS_ELECTRON = process.env.IS_ELECTRON
@ -20,6 +21,36 @@ export default defineConfig({
  plugins: [
    react(),

+    /**
+     * @see https://vite-plugin-pwa.netlify.app/guide/generate.html
+     */
+    VitePWA({
+      manifest: {
+        name: 'YesPlayMusic',
+        short_name: 'YPM',
+        description: 'Description of your app',
+        theme_color: '#000',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+    }),
+
    /**
     * @see https://github.com/vbenjs/vite-plugin-svg-icons
     */
@ -54,7 +85,7 @@ export default defineConfig({
    strictPort: IS_ELECTRON ? true : false,
    proxy: {
      '/netease/': {
-        target: `http://127.0.0.1:${
+        target: `http://192.168.2.111:${
          process.env.ELECTRON_DEV_NETEASE_API_PORT || 3000
        }`,
        changeOrigin: true,
@ -68,6 +99,9 @@ export default defineConfig({
      },
    },
  },
+  preview: {
+    port: Number(process.env['ELECTRON_WEB_SERVER_PORT'] || 42710),
+  },
  test: {
    environment: 'jsdom',
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -162,6 +162,7 @@ importers:
      typescript: '*'
      valtio: ^1.6.1
      vite: ^2.9.6
+      vite-plugin-pwa: ^0.12.0
      vite-plugin-svg-icons: ^2.0.1
      vitest: ^0.12.10
    dependencies:
@ -225,6 +226,7 @@ importers:
      tailwindcss: 3.0.24
      typescript: 4.7.3
      vite: 2.9.9
+      vite-plugin-pwa: 0.12.0_vite@2.9.9
      vite-plugin-svg-icons: 2.0.1_vite@2.9.9
      vitest: 0.12.10_5y625lpcnancu4te4y3qqugezq

@ -247,6 +249,18 @@ packages:
      '@jridgewell/trace-mapping': 0.3.13
    dev: true

+  /@apideck/better-ajv-errors/0.3.4_ajv@8.11.0:
+    resolution: {integrity: sha512-Ic2d8ZT6HJiSikGVQvSklaFyw1OUv4g8sDOxa0PXSlbmN/3gL5IO1WYY9DOwTDqOFmjWoqG1yaaKnPDqYCE9KA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      ajv: '>=8'
+    dependencies:
+      ajv: 8.11.0
+      json-schema: 0.4.0
+      jsonpointer: 5.0.0
+      leven: 3.1.0
+    dev: true
+
  /@babel/code-frame/7.16.7:
    resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
    engines: {node: '>=6.9.0'}
@ -4513,6 +4527,60 @@ packages:
    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
    dev: true

+  /@rollup/plugin-babel/5.3.1_4kojsos35jimftt7mhjohcqk6y:
+    resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/babel__core': ^7.1.9
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      '@types/babel__core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.2
+      '@babel/helper-module-imports': 7.16.7
+      '@rollup/pluginutils': 3.1.0_rollup@2.72.1
+      rollup: 2.72.1
+    dev: true
+
+  /@rollup/plugin-node-resolve/11.2.1_rollup@2.72.1:
+    resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.72.1
+      '@types/resolve': 1.17.1
+      builtin-modules: 3.3.0
+      deepmerge: 4.2.2
+      is-module: 1.0.0
+      resolve: 1.22.0
+      rollup: 2.72.1
+    dev: true
+
+  /@rollup/plugin-replace/2.4.2_rollup@2.72.1:
+    resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.72.1
+      magic-string: 0.25.9
+      rollup: 2.72.1
+    dev: true
+
+  /@rollup/pluginutils/3.1.0_rollup@2.72.1:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.72.1
+    dev: true
+
  /@rollup/pluginutils/4.2.1:
    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
    engines: {node: '>= 8.0.0'}
@ -6295,6 +6363,15 @@ packages:
      resolve-from: 5.0.0
    dev: true

+  /@surma/rollup-plugin-off-main-thread/2.2.3:
+    resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
+    dependencies:
+      ejs: 3.1.7
+      json5: 2.2.1
+      magic-string: 0.25.9
+      string.prototype.matchall: 4.0.7
+    dev: true
+
  /@szmarczak/http-timer/1.1.2:
    resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
    engines: {node: '>=6'}
@ -6438,6 +6515,10 @@ packages:
      '@types/json-schema': 7.0.11
    dev: true

+  /@types/estree/0.0.39:
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+    dev: true
+
  /@types/estree/0.0.51:
    resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
    dev: true
@ -6671,6 +6752,12 @@ packages:
      csstype: 3.0.11
    dev: true

+  /@types/resolve/1.17.1:
+    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
+    dependencies:
+      '@types/node': 17.0.36
+    dev: true
+
  /@types/responselike/1.0.0:
    resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
    dependencies:
@ -6702,6 +6789,10 @@ packages:
    resolution: {integrity: sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==}
    dev: true

+  /@types/trusted-types/2.0.2:
+    resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
+    dev: true
+
  /@types/uglify-js/3.13.2:
    resolution: {integrity: sha512-/xFrPIo+4zOeNGtVMbf9rUm0N+i4pDf1ynExomqtokIJmVzR3962lJ1UE+MmexMkA0cmN9oTzg5Xcbwge0Ij2Q==}
    dependencies:
@ -7491,7 +7582,6 @@ packages:
      json-schema-traverse: 1.0.0
      require-from-string: 2.0.2
      uri-js: 4.4.1
-    dev: false

  /ansi-align/3.0.1:
    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
@ -8531,6 +8621,11 @@ packages:
      - supports-color
    dev: true

+  /builtin-modules/3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
  /builtin-status-codes/3.0.0:
    resolution: {integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==}
    dev: true
@ -9120,6 +9215,11 @@ packages:
    resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
    dev: true

+  /common-tags/1.8.2:
+    resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
+    engines: {node: '>=4.0.0'}
+    dev: true
+
  /commondir/1.0.1:
    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
    dev: true
@ -11232,6 +11332,10 @@ packages:
      - supports-color
    dev: true

+  /estree-walker/1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+    dev: true
+
  /estree-walker/2.0.2:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
    dev: true
@ -11974,6 +12078,10 @@ packages:
      has: 1.0.3
      has-symbols: 1.0.3

+  /get-own-enumerable-property-symbols/3.0.2:
+    resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
+    dev: true
+
  /get-package-type/0.1.0:
    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
    engines: {node: '>=8.0.0'}
@ -12675,6 +12783,10 @@ packages:
      postcss: 7.0.39
    dev: true

+  /idb/6.1.5:
+    resolution: {integrity: sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw==}
+    dev: true
+
  /ieee754/1.2.1:
    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}

@ -13037,6 +13149,10 @@ packages:
    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
    dev: true

+  /is-module/1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
  /is-negative-zero/2.0.2:
    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
    engines: {node: '>= 0.4'}
@ -13066,6 +13182,11 @@ packages:
    engines: {node: '>=0.12.0'}
    dev: true

+  /is-obj/1.0.1:
+    resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /is-obj/2.0.0:
    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
    engines: {node: '>=8'}
@ -13118,6 +13239,11 @@ packages:
      has-tostringtag: 1.0.0
    dev: true

+  /is-regexp/1.0.0:
+    resolution: {integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /is-set/2.0.2:
    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
    dev: true
@ -13517,12 +13643,15 @@ packages:

  /json-schema-traverse/1.0.0:
    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-    dev: false

  /json-schema-typed/7.0.3:
    resolution: {integrity: sha512-7DE8mpG+/fVw+dTpjbxnx47TaMnDfOI1jwft9g1VybltZCduyRQPJPvc+zzKY9WPHxhPWczyFuYa6I8Mw4iU5A==}
    dev: false

+  /json-schema/0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+    dev: true
+
  /json-stable-stringify-without-jsonify/1.0.1:
    resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=}
    dev: true
@ -13558,6 +13687,11 @@ packages:
      graceful-fs: 4.2.10
    dev: true

+  /jsonpointer/5.0.0:
+    resolution: {integrity: sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /jsx-ast-utils/3.3.0:
    resolution: {integrity: sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==}
    engines: {node: '>=4.0'}
@ -13649,6 +13783,11 @@ packages:
    resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
    dev: true

+  /leven/3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+    dev: true
+
  /levn/0.3.0:
    resolution: {integrity: sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=}
    engines: {node: '>= 0.8.0'}
@ -13862,6 +14001,12 @@ packages:
      readable-stream: 3.6.0
    dev: true

+  /magic-string/0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
  /magic-string/0.26.2:
    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
    engines: {node: '>=12'}
@ -15604,10 +15749,14 @@ packages:
    hasBin: true
    dev: true

+  /pretty-bytes/5.6.0:
+    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
+    engines: {node: '>=6'}
+    dev: true
+
  /pretty-bytes/6.0.0:
    resolution: {integrity: sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==}
    engines: {node: ^14.13.1 || >=16.0.0}
-    dev: false

  /pretty-error/2.1.2:
    resolution: {integrity: sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==}
@ -16456,7 +16605,6 @@ packages:
  /require-from-string/2.0.2:
    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
    engines: {node: '>=0.10.0'}
-    dev: false

  /require-main-filename/2.0.0:
    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
@ -16574,6 +16722,18 @@ packages:
    dev: true
    optional: true

+  /rollup-plugin-terser/7.0.2_rollup@2.72.1:
+    resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
+    peerDependencies:
+      rollup: ^2.0.0
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      jest-worker: 26.6.2
+      rollup: 2.72.1
+      serialize-javascript: 4.0.0
+      terser: 5.13.1
+    dev: true
+
  /rollup-plugin-visualizer/5.6.0:
    resolution: {integrity: sha512-CKcc8GTUZjC+LsMytU8ocRr/cGZIfMR7+mdy4YnlyetlmIl/dM8BMnOEpD4JPIGt+ZVW7Db9ZtSsbgyeBH3uTA==}
    engines: {node: '>=12'}
@ -17335,6 +17495,15 @@ packages:
    dependencies:
      safe-buffer: 5.2.1

+  /stringify-object/3.3.0:
+    resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==}
+    engines: {node: '>=4'}
+    dependencies:
+      get-own-enumerable-property-symbols: 3.0.2
+      is-obj: 1.0.1
+      is-regexp: 1.0.0
+    dev: true
+
  /strip-ansi/3.0.1:
    resolution: {integrity: sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=}
    engines: {node: '>=0.10.0'}
@ -17362,6 +17531,11 @@ packages:
    dev: true
    optional: true

+  /strip-comments/2.0.1:
+    resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==}
+    engines: {node: '>=10'}
+    dev: true
+
  /strip-eof/1.0.0:
    resolution: {integrity: sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=}
    engines: {node: '>=0.10.0'}
@ -17660,6 +17834,16 @@ packages:
      fs-extra: 10.1.0
    dev: true

+  /tempy/0.6.0:
+    resolution: {integrity: sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==}
+    engines: {node: '>=10'}
+    dependencies:
+      is-stream: 2.0.1
+      temp-dir: 2.0.0
+      type-fest: 0.16.0
+      unique-string: 2.0.0
+    dev: true
+
  /tempy/1.0.1:
    resolution: {integrity: sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==}
    engines: {node: '>=10'}
@ -18402,7 +18586,6 @@ packages:
    resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
    engines: {node: '>=4'}
    dev: true
-    optional: true

  /update-notifier/5.1.0:
    resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
@ -18632,6 +18815,23 @@ packages:
      vite: 2.9.9
    dev: true

+  /vite-plugin-pwa/0.12.0_vite@2.9.9:
+    resolution: {integrity: sha512-KYD+cnS5ExLF3T28NkfzBLZ53ehHlp+qMhHGFNh0zlVGpFHrJkL2v9wd4AMi7ZkBTffgeNatIFiv8rhCsMSxBQ==}
+    peerDependencies:
+      vite: ^2.0.0
+    dependencies:
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      pretty-bytes: 6.0.0
+      rollup: 2.72.1
+      vite: 2.9.9
+      workbox-build: 6.5.3
+      workbox-window: 6.5.3
+    transitivePeerDependencies:
+      - '@types/babel__core'
+      - supports-color
+    dev: true
+
  /vite-plugin-svg-icons/2.0.1_vite@2.9.9:
    resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
    peerDependencies:
@ -19041,6 +19241,152 @@ packages:
    resolution: {integrity: sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=}
    dev: true

+  /workbox-background-sync/6.5.3:
+    resolution: {integrity: sha512-0DD/V05FAcek6tWv9XYj2w5T/plxhDSpclIcAGjA/b7t/6PdaRkQ7ZgtAX6Q/L7kV7wZ8uYRJUoH11VjNipMZw==}
+    dependencies:
+      idb: 6.1.5
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-broadcast-update/6.5.3:
+    resolution: {integrity: sha512-4AwCIA5DiDrYhlN+Miv/fp5T3/whNmSL+KqhTwRBTZIL6pvTgE4lVuRzAt1JltmqyMcQ3SEfCdfxczuI4kwFQg==}
+    dependencies:
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-build/6.5.3:
+    resolution: {integrity: sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@apideck/better-ajv-errors': 0.3.4_ajv@8.11.0
+      '@babel/core': 7.18.2
+      '@babel/preset-env': 7.18.2_@babel+core@7.18.2
+      '@babel/runtime': 7.18.3
+      '@rollup/plugin-babel': 5.3.1_4kojsos35jimftt7mhjohcqk6y
+      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.72.1
+      '@rollup/plugin-replace': 2.4.2_rollup@2.72.1
+      '@surma/rollup-plugin-off-main-thread': 2.2.3
+      ajv: 8.11.0
+      common-tags: 1.8.2
+      fast-json-stable-stringify: 2.1.0
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      lodash: 4.17.21
+      pretty-bytes: 5.6.0
+      rollup: 2.72.1
+      rollup-plugin-terser: 7.0.2_rollup@2.72.1
+      source-map: 0.8.0-beta.0
+      stringify-object: 3.3.0
+      strip-comments: 2.0.1
+      tempy: 0.6.0
+      upath: 1.2.0
+      workbox-background-sync: 6.5.3
+      workbox-broadcast-update: 6.5.3
+      workbox-cacheable-response: 6.5.3
+      workbox-core: 6.5.3
+      workbox-expiration: 6.5.3
+      workbox-google-analytics: 6.5.3
+      workbox-navigation-preload: 6.5.3
+      workbox-precaching: 6.5.3
+      workbox-range-requests: 6.5.3
+      workbox-recipes: 6.5.3
+      workbox-routing: 6.5.3
+      workbox-strategies: 6.5.3
+      workbox-streams: 6.5.3
+      workbox-sw: 6.5.3
+      workbox-window: 6.5.3
+    transitivePeerDependencies:
+      - '@types/babel__core'
+      - supports-color
+    dev: true
+
+  /workbox-cacheable-response/6.5.3:
+    resolution: {integrity: sha512-6JE/Zm05hNasHzzAGKDkqqgYtZZL2H06ic2GxuRLStA4S/rHUfm2mnLFFXuHAaGR1XuuYyVCEey1M6H3PdZ7SQ==}
+    dependencies:
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-core/6.5.3:
+    resolution: {integrity: sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q==}
+    dev: true
+
+  /workbox-expiration/6.5.3:
+    resolution: {integrity: sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==}
+    dependencies:
+      idb: 6.1.5
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-google-analytics/6.5.3:
+    resolution: {integrity: sha512-3GLCHotz5umoRSb4aNQeTbILETcrTVEozSfLhHSBaegHs1PnqCmN0zbIy2TjTpph2AGXiNwDrWGF0AN+UgDNTw==}
+    dependencies:
+      workbox-background-sync: 6.5.3
+      workbox-core: 6.5.3
+      workbox-routing: 6.5.3
+      workbox-strategies: 6.5.3
+    dev: true
+
+  /workbox-navigation-preload/6.5.3:
+    resolution: {integrity: sha512-bK1gDFTc5iu6lH3UQ07QVo+0ovErhRNGvJJO/1ngknT0UQ702nmOUhoN9qE5mhuQSrnK+cqu7O7xeaJ+Rd9Tmg==}
+    dependencies:
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-precaching/6.5.3:
+    resolution: {integrity: sha512-sjNfgNLSsRX5zcc63H/ar/hCf+T19fRtTqvWh795gdpghWb5xsfEkecXEvZ8biEi1QD7X/ljtHphdaPvXDygMQ==}
+    dependencies:
+      workbox-core: 6.5.3
+      workbox-routing: 6.5.3
+      workbox-strategies: 6.5.3
+    dev: true
+
+  /workbox-range-requests/6.5.3:
+    resolution: {integrity: sha512-pGCP80Bpn/0Q0MQsfETSfmtXsQcu3M2QCJwSFuJ6cDp8s2XmbUXkzbuQhCUzKR86ZH2Vex/VUjb2UaZBGamijA==}
+    dependencies:
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-recipes/6.5.3:
+    resolution: {integrity: sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==}
+    dependencies:
+      workbox-cacheable-response: 6.5.3
+      workbox-core: 6.5.3
+      workbox-expiration: 6.5.3
+      workbox-precaching: 6.5.3
+      workbox-routing: 6.5.3
+      workbox-strategies: 6.5.3
+    dev: true
+
+  /workbox-routing/6.5.3:
+    resolution: {integrity: sha512-DFjxcuRAJjjt4T34RbMm3MCn+xnd36UT/2RfPRfa8VWJGItGJIn7tG+GwVTdHmvE54i/QmVTJepyAGWtoLPTmg==}
+    dependencies:
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-strategies/6.5.3:
+    resolution: {integrity: sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==}
+    dependencies:
+      workbox-core: 6.5.3
+    dev: true
+
+  /workbox-streams/6.5.3:
+    resolution: {integrity: sha512-vN4Qi8o+b7zj1FDVNZ+PlmAcy1sBoV7SC956uhqYvZ9Sg1fViSbOpydULOssVJ4tOyKRifH/eoi6h99d+sJ33w==}
+    dependencies:
+      workbox-core: 6.5.3
+      workbox-routing: 6.5.3
+    dev: true
+
+  /workbox-sw/6.5.3:
+    resolution: {integrity: sha512-BQBzm092w+NqdIEF2yhl32dERt9j9MDGUTa2Eaa+o3YKL4Qqw55W9yQC6f44FdAHdAJrJvp0t+HVrfh8AiGj8A==}
+    dev: true
+
+  /workbox-window/6.5.3:
+    resolution: {integrity: sha512-GnJbx1kcKXDtoJBVZs/P7ddP0Yt52NNy4nocjBpYPiRhMqTpJCNrSL+fGHZ/i/oP6p/vhE8II0sA6AZGKGnssw==}
+    dependencies:
+      '@types/trusted-types': 2.0.2
+      workbox-core: 6.5.3
+    dev: true
+
  /worker-farm/1.7.0:
    resolution: {integrity: sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==}
    dependencies: