修正大部分的编译错误。

src/pages/CardsDetail.tsx

@@ -8,6 +8,7 @@ import { ColorDescription } from '../models';
 import { ColorCard } from '../page-components/cards-detail/ColorCard';
 import styles from './CardsDetail.module.css';
 
+type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
 type CardsDetailProps = {
   mainTag: string;
 };
@@ -20,7 +21,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
     }
     try {
       const embededCategories = colorFn.color_categories() as { label: string; value: string }[];
-      return embededCategories.filter((cate) => !isEqual(cate.get('value'), 'unknown'));
+      return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
     } catch (e) {
       console.error('[Fetch color categories]', e);
     }
@@ -31,7 +32,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
     const selectedValue = e.target.value;
     setCategory(selectedValue);
   };
-  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
+  const [mode, setMode] = useState<ColorModes>('hex');
   const colors = useMemo(() => {
     if (!colorFn) {
       return [];
@@ -69,8 +70,8 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
           onChange={handleSelectCategory}>
           <option value="null">All</option>
           {categories.map((cate, index) => (
-            <option key={`${cate.get('value')}-${index}`} value={cate.get('value')}>
-              {cate.get('label')}
+            <option key={`${cate.value}-${index}`} value={cate.value}>
+              {cate.label}
             </option>
           ))}
         </select>
@@ -85,7 +86,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
             { label: 'OKLCH', value: 'oklch' },
           ]}
           value={mode}
-          onChange={setMode}
+          onChange={(v) => setMode(v as ColorModes)}
         />
       </div>
       <ScrollArea enableY>