完善不可识别Scheme的警告页面。

src/models.ts

@@ -47,7 +47,7 @@ export function schemeType(
   const useShort = short ?? false;
   const foundType = find(SchemeTypeOptions, { value }) as SchemeTypeOption | undefined;
   if (isNil(foundType)) {
-    return null;
+    return 'CORRUPTED';
   }
   return useShort ? foundType.short : foundType.label;
 }

src/page-components/scheme/CorruptedScheme.module.css

@@ -0,0 +1,6 @@
+@layer pages {
+  .corrupted {
+    font-size: var(--font-size-xl);
+    color: var(--color-danger);
+  }
+}

src/page-components/scheme/CorruptedScheme.tsx

@@ -0,0 +1,8 @@
+import styles from './CorruptedScheme.module.css';
+export function CorruptedScheme() {
+  return (
+    <div className="center">
+      <div className={styles.corrupted}>Unrecognizable or corrupted scheme</div>
+    </div>
+  );
+}

src/page-components/scheme/UnknownScheme.tsx

@@ -1,3 +0,0 @@
-export function UnknownScheme() {
-  return <div>Unknown or currupted scheme</div>;
-}

src/pages/SchemeDetail.tsx

@@ -5,11 +5,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
 import { SchemeSign } from '../components/SchemeSign';
+import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme';
 import { M2Scheme } from '../page-components/scheme/M2Scheme';
 import { M3Scheme } from '../page-components/scheme/M3Scheme';
 import { QScheme } from '../page-components/scheme/QScheme';
 import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
-import { UnknownScheme } from '../page-components/scheme/UnknownScheme';
 import { useScheme, useUpdateScheme } from '../stores/schemes';
 import styles from './SchemeDetail.module.css';
 
@@ -48,7 +48,7 @@ export function SchemeDetail() {
       case 'material_3':
         return <M3Scheme />;
       default:
-        return <UnknownScheme />;
+        return <CorruptedScheme />;
     }
   }, [scheme]);