From 058ecf7e39023f949441a96435b461191b91a5a6 Mon Sep 17 00:00:00 2001 From: goddonebianu Date: Fri, 6 Feb 2026 04:01:41 +0800 Subject: [PATCH] button --- src/app/(features)/alphabet/AlphabetCard.tsx | 58 ++++++------------- .../dictionary/SearchResult.client.tsx | 15 ++--- src/app/(features)/memorize/Memorize.tsx | 47 ++++++--------- .../srt-player/components/atoms/FileInput.tsx | 9 ++- src/app/(features)/translator/page.tsx | 9 +-- src/app/auth/AuthForm.tsx | 7 +-- src/app/folders/FoldersClient.tsx | 22 +++---- src/app/folders/[folder_id]/InFolder.tsx | 9 ++- src/app/folders/[folder_id]/TextPairCard.tsx | 13 +++-- src/components/ui/Button.tsx | 21 ++++++- src/components/ui/buttons/index.tsx | 29 ++++++++++ 11 files changed, 127 insertions(+), 112 deletions(-) diff --git a/src/app/(features)/alphabet/AlphabetCard.tsx b/src/app/(features)/alphabet/AlphabetCard.tsx index 963d8fd..a7fdb19 100644 --- 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 {/* 显示选项切换按钮组 */}
- + {/* IPA 音标显示切换 */} - + {/* 罗马音显示切换（仅日语显示） */} {hasRomanization && ( - + )} {/* 随机模式切换 */} - +
@@ -199,13 +183,9 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro {/* 底部导航控制区域 */}
{/* 上一个按钮 */} - + {/* 中间区域：随机按钮 */}
@@ -220,13 +200,9 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
{/* 下一个按钮 */} - +
diff --git a/src/app/(features)/dictionary/SearchResult.client.tsx b/src/app/(features)/dictionary/SearchResult.client.tsx index eb58fd5..08c7131 100644 --- 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 ( - + ); } @@ -110,12 +111,12 @@ export function ReLookupButtonClient({ searchQuery, queryLang, definitionLang }: }; return ( - + ); } diff --git a/src/app/(features)/memorize/Memorize.tsx b/src/app/(features)/memorize/Memorize.tsx index a97aa35..286f25c 100644 --- 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 = ({ textPairs }) => {
{/* 进度指示器 */}
- +
{/* 文本显示区域 */} @@ -162,45 +160,36 @@ const Memorize: React.FC = ({ textPairs }) => { {/* 底部按钮 */}
- - - - - +
diff --git a/src/app/(features)/srt-player/components/atoms/FileInput.tsx b/src/app/(features)/srt-player/components/atoms/FileInput.tsx index 191fcfc..079a7ae 100644 --- 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" /> - + ); } \ No newline at end of file diff --git a/src/app/(features)/translator/page.tsx b/src/app/(features)/translator/page.tsx index ceba474..c8d0ea4 100644 --- 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 */}
- +
); diff --git a/src/app/auth/AuthForm.tsx b/src/app/auth/AuthForm.tsx index fcb3f4b..209633d 100644 --- a/src/app/auth/AuthForm.tsx +++ b/src/app/auth/AuthForm.tsx @@ -4,7 +4,7 @@ import { useState, useActionState, startTransition } from "react"; import { useTranslations } from "next-intl"; import { Container } from "@/components/ui/Container"; import { Input } from "@/components/ui/Input"; -import { LightButton } from "@/components/ui/buttons"; +import { LightButton, LinkButton } from "@/components/ui/buttons"; import { authClient } from "@/lib/auth-client"; import { actionSignIn, actionSignUp, ActionOutputAuth } from "@/modules/auth/auth-action"; @@ -262,7 +262,7 @@ export function AuthForm({ redirectTo }: AuthFormProps) { {/* 模式切换链接 */}
- +
diff --git a/src/app/folders/FoldersClient.tsx b/src/app/folders/FoldersClient.tsx index 04a59db..e12c093 100644 --- a/src/app/folders/FoldersClient.tsx +++ b/src/app/folders/FoldersClient.tsx @@ -7,6 +7,7 @@ import { FolderPlus, Trash2, } from "lucide-react"; +import { CircleButton, DashedButton } from "@/components/ui/buttons"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { useTranslations } from "next-intl"; @@ -51,8 +52,8 @@ const FolderCard = ({ folder, refresh }: FolderProps) => {
- - +
@@ -135,7 +135,7 @@ export function FoldersClient({ userId }: { userId: string; }) { {/* 新建文件夹按钮 */} - + {/* 文件夹列表 */}
diff --git a/src/app/folders/[folder_id]/InFolder.tsx b/src/app/folders/[folder_id]/InFolder.tsx index cb045cf..818e1dc 100644 --- a/src/app/folders/[folder_id]/InFolder.tsx +++ b/src/app/folders/[folder_id]/InFolder.tsx @@ -7,8 +7,7 @@ import { AddTextPairModal } from "./AddTextPairModal"; import { TextPairCard } from "./TextPairCard"; import { useTranslations } from "next-intl"; import { PageLayout } from "@/components/ui/PageLayout"; -import { GreenButton } from "@/components/ui/buttons"; -import { IconButton } from "@/components/ui/buttons"; +import { GreenButton, IconButton, LinkButton } from "@/components/ui/buttons"; import { CardList } from "@/components/ui/CardList"; import { actionCreatePair, actionDeletePairById, actionGetPairsByFolderId } from "@/modules/folder/folder-aciton"; import { TSharedPair } from "@/shared/folder-type"; @@ -52,13 +51,13 @@ export function InFolder({ folderId, isReadOnly }: { folderId: number; isReadOnl {/* 顶部导航和标题栏 */}
{/* 返回按钮 */} - + {/* 页面标题和操作按钮 */}
diff --git a/src/app/folders/[folder_id]/TextPairCard.tsx b/src/app/folders/[folder_id]/TextPairCard.tsx index ea2cf77..355eb74 100644 --- a/src/app/folders/[folder_id]/TextPairCard.tsx +++ b/src/app/folders/[folder_id]/TextPairCard.tsx @@ -1,5 +1,6 @@ import { Edit, Trash2 } from "lucide-react"; import { useState } from "react"; +import { CircleButton } from "@/components/ui/buttons"; import { UpdateTextPairModal } from "./UpdateTextPairModal"; import { useTranslations } from "next-intl"; import { TSharedPair } from "@/shared/folder-type"; @@ -39,20 +40,20 @@ export function TextPairCard({
{!isReadOnly && ( <> - - + )}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 921a5c5..79d5ade 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -3,9 +3,8 @@ import React from "react"; import Link from "next/link"; import Image from "next/image"; -import { COLORS } from "@/lib/theme/colors"; -export type ButtonVariant = "primary" | "secondary" | "ghost" | "icon"; +export type ButtonVariant = "primary" | "secondary" | "ghost" | "icon" | "circle" | "dashed" | "link"; export type ButtonSize = "sm" | "md" | "lg"; export interface ButtonProps { @@ -70,6 +69,24 @@ export function Button({ icon: ` p-2 bg-gray-200 rounded-full hover:bg-gray-300 + `, + circle: ` + p-2 rounded-full + hover:bg-gray-200 + `, + dashed: ` + border-2 border-dashed border-gray-300 + text-gray-500 + hover:border-gray-400 + hover:text-gray-600 + bg-transparent + shadow-none + `, + link: ` + text-[#35786f] + hover:underline + p-0 + shadow-none ` }; diff --git a/src/components/ui/buttons/index.tsx b/src/components/ui/buttons/index.tsx index ad8e61c..6a3d60c 100644 --- a/src/components/ui/buttons/index.tsx +++ b/src/components/ui/buttons/index.tsx @@ -54,3 +54,32 @@ export const IconClick = (props: any) => { // PlainButton: 基础小按钮 export const PlainButton = (props: any) => + ); +};