perf: ⚡ performance improve and a11n

lcandy2 · May 10, 2024 · d9efb5c · d9efb5c
1 parent a84fa98
commit d9efb5c
Show file tree

Hide file tree

Showing 20 changed files with 88 additions and 88 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -10,8 +10,8 @@ module.exports = {
     'plugin:@typescript-eslint/stylistic',
     'prettier',
   ],
-  rules: {
-    '@typescript-eslint/no-unused-vars': 'off',
-  },
+  // rules: {
+  //   '@typescript-eslint/no-unused-vars': 'off',
+  // },
   ignorePatterns: ['public', '.eslintrc.cjs'],
 };
diff --git a/src/app/(info)/about/page.tsx b/src/app/(info)/about/page.tsx
@@ -1,7 +1,4 @@
-import {
-  SubtitleComponent,
-  TitleComponent,
-} from '@/app/_libs/components/title';
+import { TitleComponent } from '@/app/_libs/components/title';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {

diff --git a/src/app/_libs/components/header/header.tsx b/src/app/_libs/components/header/header.tsx
@@ -38,8 +38,8 @@ export default function Header() {
             href="https://github.com/lcandy2/webvpn-converter"
             target="_blank"
           >
-            <MdTextButton className="h-12 w-12">
-              <GitHub />
+            <MdTextButton title="GitHub" className="h-12 w-12">
+              <GitHub titleAccess="GitHub" />
             </MdTextButton>
           </Link>
         </section>

diff --git a/src/app/_libs/components/home-status.tsx b/src/app/_libs/components/home-status.tsx
@@ -63,11 +63,11 @@ export default function HomeStatus() {
               onClick={handleEditButtonClicked}
               prefetch={true}
             >
-              <MdIconButton>
+              <MdIconButton title="编辑">
                 {editButtonClicked ? (
                   <CircularProgress color="inherit" size={20} />
                 ) : (
-                  <EditIcon />
+                  <EditIcon titleAccess="编辑" />
                 )}
               </MdIconButton>
             </Link>

diff --git a/src/app/_libs/components/init-select-school.tsx b/src/app/_libs/components/init-select-school.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { selectedSchoolAtom } from '@/app/_libs/atoms';
 import { useEffect, useState } from 'react';
 import Link from 'next/link';

diff --git a/src/app/_libs/components/url-converter/converted-url-input.tsx b/src/app/_libs/components/url-converter/converted-url-input.tsx
@@ -41,7 +41,7 @@ export default function ConvertedUrlInput({
     }
   }, [isDecryptMode, encryptedUrl, decryptedUrl, originalUrl]);
 
-  const { copy, reset, error, copied } = useCopy({
+  const { copy, error, copied } = useCopy({
     onCopyError: (message) => {
       enqueueSnackbar(message, {
         variant: 'error',
@@ -62,13 +62,16 @@ export default function ConvertedUrlInput({
   const InputAdornmentComponents = () => {
     return (
       <div className="flex flex-col sm:flex-row lg:flex-col gap-0">
-        <MdIconButton onClick={handleCopyButtonClick}>
+        <MdIconButton
+          title={error ? '复制失败' : copied ? '复制成功' : '复制'}
+          onClick={handleCopyButtonClick}
+        >
           {error ? (
-            <ErrorIcon color="error" />
+            <ErrorIcon color="error" titleAccess="复制失败" />
           ) : copied ? (
-            <DoneIcon color="success" />
+            <DoneIcon color="success" titleAccess="复制成功" />
           ) : (
-            <ContentCopyIcon />
+            <ContentCopyIcon titleAccess="复制" />
           )}
         </MdIconButton>
         <Link href={`//${inputValue}`} target="_blank">

diff --git a/src/app/_libs/components/url-converter/original-url-input.tsx b/src/app/_libs/components/url-converter/original-url-input.tsx
@@ -76,8 +76,8 @@ export default function OriginalUrlInput({
           spellCheck: false,
           endAdornment: (
             <InputAdornment position="end">
-              <MdIconButton onClick={handlePasteButtonClick}>
-                <ContentPasteIcon />
+              <MdIconButton title="粘贴" onClick={handlePasteButtonClick}>
+                <ContentPasteIcon titleAccess="粘贴" />
               </MdIconButton>
             </InputAdornment>
           ),

diff --git a/src/app/_libs/ui/button.tsx b/src/app/_libs/ui/button.tsx
@@ -6,7 +6,7 @@
 'use client';
 
 import { createComponent } from '@lit/react';
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { ComponentProps } from 'react';
 import { MdFilledButton as _MdFilledButton } from '@material/web/button/filled-button';
 import { MdOutlinedButton as _MdOutlinedButton } from '@material/web/button/outlined-button';
 import { MdTextButton as _MdTextButton } from '@material/web/button/text-button';

diff --git a/src/app/_libs/url-convert.ts b/src/app/_libs/url-convert.ts
@@ -161,7 +161,7 @@ export const encryptUrl = ({
    */
 
   const {
-    url: extractedUrl,
+    // url: extractedUrl,
     host,
     path,
     port,

diff --git a/src/app/bookmarklet/_lib/components/bookmarklet-client.tsx b/src/app/bookmarklet/_lib/components/bookmarklet-client.tsx
@@ -22,7 +22,6 @@ import { enqueueSnackbar, SnackbarProvider } from 'notistack';
 import ErrorIcon from '@mui/icons-material/Error';
 import DoneIcon from '@mui/icons-material/Done';
 import { MdIconButton } from '@/app/_libs/ui/icon-button';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import HomeStatus from '@/app/_libs/components/home-status';
 
 export default async function BookmarkletClient() {
@@ -43,7 +42,7 @@ export default async function BookmarkletClient() {
     [bookmarkletHref, hasMounted, selectedSchool, bookmarkletRaw],
   );
 
-  const { copy, reset, error, copied } = useCopy({
+  const { copy, error, copied } = useCopy({
     onCopyError: (message) => {
       enqueueSnackbar(message, {
         variant: 'error',

diff --git a/src/app/bookmarklet/page.tsx b/src/app/bookmarklet/page.tsx
@@ -1,4 +1,3 @@
-import InitSelectSchool from '@/app/_libs/components/init-select-school';
 import {
   SubtitleComponent,
   TitleComponent,

diff --git a/src/app/decrypt/page.tsx b/src/app/decrypt/page.tsx
@@ -1,4 +1,3 @@
-import InitSelectSchool from '@/app/_libs/components/init-select-school';
 import { TitleComponent } from '@/app/_libs/components/title';
 import UrlConverter from '@/app/_libs/components/url-converter/url-converter';
 import HomeStatus from '@/app/_libs/components/home-status';

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import Title from '@/app/_libs/components/title';
 import Link from 'next/link';
 import MdFab from '@/app/_libs/ui/floating-action-buttons';

diff --git a/src/app/middleware.ts b/src/app/middleware.ts
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,3 @@
-import InitSelectSchool from '@/app/_libs/components/init-select-school';
 import { TitleComponent } from '@/app/_libs/components/title';
 import UrlConverter from '@/app/_libs/components/url-converter/url-converter';
 import HomeStatus from '@/app/_libs/components/home-status';

diff --git a/src/app/settings/_libs/components/school-action.tsx b/src/app/settings/_libs/components/school-action.tsx
@@ -50,26 +50,28 @@ export default function SchoolAction({
   }, [setIsSchoolNotListed]);
 
   return (
-    <div className="flex flex-row flex-wrap">
-      {isSchoolSelected && (
-        <MdFab
-          label="确认"
-          className="w-[100%] sm:w-36 mb-6 sm:mr-8 sm:mb-0"
-          onClick={handleConfirmButtonClick}
-        >
-          <span slot="icon">
-            <DoneIcon />
-          </span>
-        </MdFab>
-      )}
-      {!isSchoolNotListed && mode === 'init' && (
-        <MdTextButton
-          className="w-[100%] sm:w-auto h-14 sm:h-auto min-w-36"
-          onClick={handleNotListedButtonClick}
-        >
-          {isSchoolSelected ? '自定义设置' : '列表上没有我的学校？'}
-        </MdTextButton>
-      )}
-    </div>
+    type && (
+      <div className="flex flex-row flex-wrap">
+        {isSchoolSelected && (
+          <MdFab
+            label="确认"
+            className="w-[100%] sm:w-36 mb-6 sm:mr-8 sm:mb-0"
+            onClick={handleConfirmButtonClick}
+          >
+            <span slot="icon">
+              <DoneIcon />
+            </span>
+          </MdFab>
+        )}
+        {!isSchoolNotListed && mode === 'init' && (
+          <MdTextButton
+            className="w-[100%] sm:w-auto h-14 sm:h-auto min-w-36"
+            onClick={handleNotListedButtonClick}
+          >
+            {isSchoolSelected ? '自定义设置' : '列表上没有我的学校？'}
+          </MdTextButton>
+        )}
+      </div>
+    )
   );
 }
diff --git a/src/app/settings/_libs/components/school-customization.tsx b/src/app/settings/_libs/components/school-customization.tsx
@@ -90,45 +90,47 @@ export default function SchoolCustomization({
 
   if (isSchoolNotListed || mode === 'settings') {
     return (
-      <>
-        <MdOutlinedCard className="p-6 flex flex-col gap-4">
-          <div className="flex flex-row justify-between">
-            <p className="text-title-l sm:text-2xl pb-4 order-first items-start">
-              自定义
-            </p>
-            {mode === 'init' && (
-              <MdIconButton
-                className="order-last self-start"
-                onClick={handleCloseButtonClick}
-              >
-                <CloseIcon />
-              </MdIconButton>
-            )}
-          </div>
-          <TextField
-            label="学校 Web VPN 网络地址"
-            value={host}
-            onChange={handleHostChange}
-          />
-          <div className="flex flex-row gap-4 flex-wrap">
-            <TextField
-              label="KEY"
-              className="flex-1"
-              value={key}
-              onChange={handleKeyChange}
-            />
+      type && (
+        <>
+          <MdOutlinedCard className="p-6 flex flex-col gap-4">
+            <div className="flex flex-row justify-between">
+              <p className="text-title-l sm:text-2xl pb-4 order-first items-start">
+                自定义
+              </p>
+              {mode === 'init' && (
+                <MdIconButton
+                  className="order-last self-start"
+                  onClick={handleCloseButtonClick}
+                >
+                  <CloseIcon />
+                </MdIconButton>
+              )}
+            </div>
             <TextField
-              label="IV"
-              className="flex-1"
-              value={iv}
-              onChange={handleIvChange}
+              label="学校 Web VPN 网络地址"
+              value={host}
+              onChange={handleHostChange}
             />
-          </div>
-          <p className="text-sm text-gray-500 font-normal">
-            注: KEY 或 IV 留空 将使用默认值 wrdvpnisthebest!
-          </p>
-        </MdOutlinedCard>
-      </>
+            <div className="flex flex-row gap-4 flex-wrap">
+              <TextField
+                label="KEY"
+                className="flex-1"
+                value={key}
+                onChange={handleKeyChange}
+              />
+              <TextField
+                label="IV"
+                className="flex-1"
+                value={iv}
+                onChange={handleIvChange}
+              />
+            </div>
+            <p className="text-sm text-gray-500 font-normal">
+              注: KEY 或 IV 留空 将使用默认值 wrdvpnisthebest!
+            </p>
+          </MdOutlinedCard>
+        </>
+      )
     );
   } else {
     return null;

diff --git a/src/app/settings/_libs/components/school-selector.tsx b/src/app/settings/_libs/components/school-selector.tsx
@@ -17,7 +17,7 @@ import { useAtom } from 'jotai';
 import { selectedSchoolAtom } from '@/app/_libs/atoms';
 import { School } from '@/app/_libs/types';
 
-export default async function SchoolSelector() {
+export default function SchoolSelector() {
   const schoolData = buildSchoolList(webvpnData);
   const [selectedSchool, setSelectedSchool] = useAtom(selectedSchoolAtom);
   const [hasMounted, setHasMounted] = useState(false);

diff --git a/src/app/settings/_libs/components/sync-localstorage-with-cookie.tsx b/src/app/settings/_libs/components/sync-localstorage-with-cookie.tsx
@@ -24,7 +24,7 @@ export function SyncLocalStorageWithCookie({
     } else {
       Cookies.remove('selectedSchool');
     }
-  }, [selectedSchool]);
+  }, [selectedSchool, withRedirect]);
 
   return <></>;
 }
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import Title, { TitleComponent } from '@/app/_libs/components/title';
+import { TitleComponent } from '@/app/_libs/components/title';
 import SettingsUI from './_libs/ui/settings-ui';
 import GoBackButton from './_libs/components/go-back-button';