Design System 重构继续完成

src/app/(features)/alphabet/AlphabetCard.tsx

@@ -3,11 +3,11 @@
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Letter, SupportedAlphabets } from "@/lib/interfaces";
-import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/components/ui/buttons";
+import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/design-system/base/button";
 import { IMAGES } from "@/config/images";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { PageLayout } from "@/components/ui/PageLayout";
-import { Card } from "@/components/ui/Card";
+import { Card } from "@/design-system/base/card";
 
 interface AlphabetCardProps {
   alphabet: Letter[];
@@ -103,7 +103,7 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
       {/* 右上角返回按钮 - outside the white card */}
       <div className="flex justify-end mb-4">
         <IconClick
-          size={32}
+          size="lg"
           alt="close"
           src={IMAGES.close}
           onClick={onBack}
@@ -185,7 +185,7 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
         <div className="flex justify-between items-center">
           {/* 上一个按钮 */}
           <CircleButton onClick={goToPrevious} aria-label="上一个字母">
-            <ChevronLeft size={24} />
+            <ChevronLeft size={20} />
           </CircleButton>
 
           {/* 中间区域：随机按钮 */}
@@ -202,7 +202,7 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
 
           {/* 下一个按钮 */}
           <CircleButton onClick={goToNext} aria-label="下一个字母">
-            <ChevronRight size={24} />
+            <ChevronRight size={20} />
           </CircleButton>
         </div>
       </Card>

src/app/(features)/alphabet/MemoryCard.tsx

@@ -1,5 +1,5 @@
-import { LightButton } from "@/components/ui/buttons";
-import { IconClick } from "@/components/ui/buttons";
+import { LightButton } from "@/design-system/base/button";
+import { IconClick } from "@/design-system/base/button";
 import { IMAGES } from "@/config/images";
 import { Letter, SupportedAlphabets } from "@/lib/interfaces";
 import {
@@ -45,10 +45,10 @@ export function MemoryCard({
       className="w-full flex justify-center items-center"
       onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => e.preventDefault()}
     >
-      <div className="m-4 p-4 w-full md:w-[60dvw] flex-col rounded-2xl shadow border-gray-200 border flex justify-center items-center">
+      <div className="m-4 p-4 w-full md:w-[60dvw] flex-col rounded-lg shadow border-gray-200 border flex justify-center items-center">
         <div className="w-full flex justify-end items-center">
           <IconClick
-            size={32}
+            size="lg"
             alt="close"
             src={IMAGES.close}
             onClick={() => setChosenAlphabet(null)}
@@ -64,13 +64,13 @@ export function MemoryCard({
         </div>
         <div className="flex flex-row mt-32 items-center justify-center gap-2">
           <IconClick
-            size={48}
+            size="lg"
             alt="refresh"
             src={IMAGES.refresh}
             onClick={refresh}
           ></IconClick>
           <IconClick
-            size={48}
+            size="lg"
             alt="more"
             src={IMAGES.more_horiz}
             onClick={() => setMore(!more)}

src/app/(features)/alphabet/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { Letter, SupportedAlphabets } from "@/lib/interfaces";
 import { PageLayout } from "@/components/ui/PageLayout";
-import { LightButton } from "@/components/ui/buttons";
+import { LightButton } from "@/design-system/base/button";
 import { AlphabetCard } from "./AlphabetCard";
 
 export default function Alphabet() {