button

2026-02-06 04:01:41 +08:00
parent 6c7095ffb3
commit 058ecf7e39
11 changed files with 127 additions and 112 deletions
--- a/src/app/(features)/alphabet/AlphabetCard.tsx
+++ b/src/app/(features)/alphabet/AlphabetCard.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Letter, SupportedAlphabets } from "@/lib/interfaces";
-import { IconClick } from "@/components/ui/buttons";
+import { IconClick, CircleToggleButton, CircleButton } from "@/components/ui/buttons";
 import { IMAGES } from "@/config/images";
 import { ChevronLeft, ChevronRight } from "lucide-react";

@@ -120,51 +120,35 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
            </span>
            {/* 显示选项切换按钮组 */}
            <div className="flex gap-2 flex-wrap">
-              <button
+              <CircleToggleButton
+                selected={showLetter}
                onClick={() => setShowLetter(!showLetter)}
-                className={`px-3 py-1 rounded-full text-sm transition-colors ${
-                  showLetter
-                    ? "bg-[#35786f] text-white"
-                    : "bg-gray-200 text-gray-600"
-                }`}
              >
                {t("letter")}
-              </button>
+              </CircleToggleButton>
              {/* IPA 音标显示切换 */}
-              <button
+              <CircleToggleButton
+                selected={showIPA}
                onClick={() => setShowIPA(!showIPA)}
-                className={`px-3 py-1 rounded-full text-sm transition-colors ${
-                  showIPA
-                    ? "bg-[#35786f] text-white"
-                    : "bg-gray-200 text-gray-600"
-                }`}
              >
                IPA
-              </button>
+              </CircleToggleButton>
              {/* 罗马音显示切换（仅日语显示） */}
              {hasRomanization && (
-                <button
+                <CircleToggleButton
+                  selected={showRoman}
                  onClick={() => setShowRoman(!showRoman)}
-                  className={`px-3 py-1 rounded-full text-sm transition-colors ${
-                    showRoman
-                      ? "bg-[#35786f] text-white"
-                      : "bg-gray-200 text-gray-600"
-                  }`}
                >
                  {t("roman")}
-                </button>
+                </CircleToggleButton>
              )}
              {/* 随机模式切换 */}
-              <button
+              <CircleToggleButton
+                selected={isRandomMode}
                onClick={() => setIsRandomMode(!isRandomMode)}
-                className={`px-3 py-1 rounded-full text-sm transition-colors ${
-                  isRandomMode
-                    ? "bg-[#35786f] text-white"
-                    : "bg-gray-200 text-gray-600"
-                }`}
              >
                {t("random")}
-              </button>
+              </CircleToggleButton>
            </div>
          </div>

@@ -199,13 +183,9 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
          {/* 底部导航控制区域 */}
          <div className="flex justify-between items-center">
            {/* 上一个按钮 */}
-            <button
-              onClick={goToPrevious}
-              className="p-3 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
-              aria-label="上一个字母"
-            >
+            <CircleButton onClick={goToPrevious} aria-label="上一个字母">
              <ChevronLeft size={24} />
-            </button>
+            </CircleButton>

            {/* 中间区域：随机按钮 */}
            <div className="flex gap-2 items-center">
@@ -220,13 +200,9 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
            </div>

            {/* 下一个按钮 */}
-            <button
-              onClick={goToNext}
-              className="p-3 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
-              aria-label="下一个字母"
-            >
+            <CircleButton onClick={goToNext} aria-label="下一个字母">
              <ChevronRight size={24} />
-            </button>
+            </CircleButton>
          </div>
        </div>

--- a/src/app/(features)/dictionary/SearchResult.client.tsx
+++ b/src/app/(features)/dictionary/SearchResult.client.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { Plus, RefreshCw } from "lucide-react";
+import { CircleButton, LightButton } from "@/components/ui/buttons";
 import { toast } from "sonner";
 import { actionCreatePair } from "@/modules/folder/folder-aciton";
 import { TSharedItem } from "@/shared/dictionary-type";
@@ -61,13 +62,13 @@ export function SaveButtonClient({ session, folders, searchResult, queryLang, de
    };

    return (
-        <button
+        <CircleButton
            onClick={handleSave}
-            className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-10 h-10 flex justify-center items-center shrink-0"
+            className="w-10 h-10 shrink-0"
            title="Save to folder"
        >
            <Plus />
-        </button>
+        </CircleButton>
    );
 }

@@ -110,12 +111,12 @@ export function ReLookupButtonClient({ searchQuery, queryLang, definitionLang }:
    };

    return (
-        <button
+        <LightButton
            onClick={handleRelookup}
-            className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+            className="flex items-center gap-2 px-4 py-2 text-sm"
+            leftIcon={<RefreshCw className="w-4 h-4" />}
        >
-            <RefreshCw className="w-4 h-4" />
            Re-lookup
-        </button>
+        </LightButton>
    );
 }
--- a/src/app/(features)/memorize/Memorize.tsx
+++ b/src/app/(features)/memorize/Memorize.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { useState } from "react";
+import { LinkButton, CircleToggleButton, LightButton } from "@/components/ui/buttons";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
 import { getTTSUrl, TTS_SUPPORTED_LANGUAGES } from "@/lib/bigmodel/tts";
 import { useTranslations } from "next-intl";
@@ -117,12 +118,9 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8">
          {/* 进度指示器 */}
          <div className="flex justify-center mb-4">
-            <button
-              onClick={handleIndexClick}
-              className="text-sm text-gray-500 hover:text-gray-700 transition-colors"
-            >
+            <LinkButton onClick={handleIndexClick} className="text-sm">
              {index + 1} / {getTextPairs().length}
-            </button>
+            </LinkButton>
          </div>

          {/* 文本显示区域 */}
@@ -162,45 +160,36 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {

          {/* 底部按钮 */}
          <div className="flex flex-row gap-2 items-center justify-center flex-wrap">
-            <button
+            <LightButton
              onClick={handleNext}
-              className="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors text-sm"
+              className="px-4 py-2 rounded-full text-sm"
            >
              {show === "question" ? t("answer") : t("next")}
-            </button>
-            <button
+            </LightButton>
+            <LightButton
              onClick={handlePrevious}
-              className="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors text-sm"
+              className="px-4 py-2 rounded-full text-sm"
            >
              {t("previous")}
-            </button>
-            <button
+            </LightButton>
+            <CircleToggleButton
+              selected={reverse}
              onClick={toggleReverse}
-              className={`px-4 py-2 rounded-full transition-colors text-sm ${reverse
-                ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
-                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                }`}
            >
              {t("reverse")}
-            </button>
-            <button
+            </CircleToggleButton>
+            <CircleToggleButton
+              selected={dictation}
              onClick={toggleDictation}
-              className={`px-4 py-2 rounded-full transition-colors text-sm ${dictation
-                ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
-                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                }`}
            >
              {t("dictation")}
-            </button>
-            <button
+            </CircleToggleButton>
+            <CircleToggleButton
+              selected={disorder}
              onClick={toggleDisorder}
-              className={`px-4 py-2 rounded-full transition-colors text-sm ${disorder
-                ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
-                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                }`}
            >
              {t("disorder")}
-            </button>
+            </CircleToggleButton>
          </div>
        </div>
      </div>
--- a/src/app/(features)/srt-player/components/atoms/FileInput.tsx
+++ b/src/app/(features)/srt-player/components/atoms/FileInput.tsx
@@ -1,6 +1,7 @@
 "use client";

 import React, { useRef } from "react";
+import { Button } from "@/components/ui/Button";
 import { FileInputProps } from "../../types/controls";

 interface FileInputComponentProps extends FileInputProps {
@@ -33,13 +34,15 @@ export function FileInput({ accept, onFileSelect, disabled, className, children
        disabled={disabled}
        className="hidden"
      />
-      <button
+      <Button
        onClick={handleClick}
        disabled={disabled}
-        className={`px-2 py-1 rounded shadow font-bold hover:cursor-pointer hover:bg-gray-200 text-gray-800 bg-white ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
+        variant="secondary"
+        size="sm"
+        className={className}
      >
        {children}
-      </button>
+      </Button>
    </>
  );
 }
--- a/src/app/(features)/translator/page.tsx
+++ b/src/app/(features)/translator/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { LightButton } from "@/components/ui/buttons";
+import { LightButton, GreenButton } from "@/components/ui/buttons";
 import { IconClick } from "@/components/ui/buttons";
 import { IMAGES } from "@/config/images";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
@@ -210,12 +210,13 @@ export default function TranslatorPage() {

      {/* TranslateButton Component */}
      <div className="w-screen flex justify-center items-center">
-        <button
-          className={`duration-150 ease-in text-xl font-extrabold border rounded-4xl p-3 border-gray-200 h-16 ${processing ? "bg-gray-200" : "bg-white hover:bg-gray-200 hover:cursor-pointer"}`}
+        <GreenButton
          onClick={translate}
+          disabled={processing}
+          className="text-xl h-16 px-8"
        >
          {t("translate")}
-        </button>
+        </GreenButton>
      </div>
    </>
  );