goddonebianu/learn-languages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

button

Browse Source
This commit is contained in:
goddonebianu
2026-02-06 04:13:50 +08:00
parent 058ecf7e39
commit 3635fbd256
13 changed files with 281 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/(features)/dictionary/SearchForm.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { LightButton } from "@/components/ui/buttons";
import { Input } from "@/components/ui/Input";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { useRouter } from "next/navigation";
@@ -47,12 +48,12 @@ export function SearchForm({ defaultQueryLang = "english", defaultDefinitionLang
{/* 搜索表单 */}
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2">
<input
<Input
type="text"
name="searchQuery"
defaultValue=""
placeholder={t("searchPlaceholder")}
className="flex-1 min-w-0 px-4 py-3 text-lg text-gray-800 focus:outline-none border-b-2 border-gray-600 bg-white/90 rounded"
variant="search"
required
/>
<LightButton

14
src/app/(features)/srt-player/VideoPlayer/VideoPanel.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useRef, forwardRef, useEffect, useCallback } from "react";
import { SubtitleDisplay } from "./SubtitleDisplay";
import { LightButton } from "@/components/ui/buttons";
import { RangeInput } from "@/components/ui/RangeInput";
import { getIndex, parseSrt, getNearistIndex } from "../subtitle";
import { useTranslations } from "next-intl";
@@ -196,15 +197,18 @@ const VideoPanel = forwardRef<HTMLVideoElement, VideoPanelProps>(
{t("autoPause", { enabled: autoPause ? "Yes" : "No" })}
</LightButton>
</div>
<input
<RangeInput
className="seekbar"
type="range"
min={0}
max={srtLength}
onChange={handleSeek}
step={1}
onChange={(value) => {
if (videoRef.current && parsedSrtRef.current) {
videoRef.current.currentTime = parsedSrtRef.current[value]?.start || 0;
setProgress(value);
}
}}
value={progress}
></input>
/>
<span>{spanText}</span>
</div>
);

19
src/app/(features)/srt-player/components/atoms/SeekBar.tsx
View File

@@ -2,25 +2,16 @@
import React from "react";
import { SeekBarProps } from "../../types/player";
import { RangeInput } from "@/components/ui/RangeInput";
export function SeekBar({ value, max, onChange, disabled, className }: SeekBarProps) {
const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = parseInt(event.target.value);
onChange(newValue);
}, [onChange]);
return (
<input
type="range"
min={0}
max={max}
<RangeInput
value={value}
onChange={handleChange}
max={max}
onChange={onChange}
disabled={disabled}
className={`w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
style={{
background: `linear-gradient(to right, #374151 0%, #374151 ${(value / max) * 100}%, #e5e7eb ${(value / max) * 100}%, #e5e7eb 100%)`
}}
className={className}
/>
);
}

6
src/app/(features)/translator/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { LightButton, GreenButton } from "@/components/ui/buttons";
import { LightButton, PrimaryButton } from "@/components/ui/buttons";
import { IconClick } from "@/components/ui/buttons";
import { IMAGES } from "@/config/images";
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
@@ -210,13 +210,13 @@ export default function TranslatorPage() {
{/* TranslateButton Component */}
<div className="w-screen flex justify-center items-center">
<GreenButton
<PrimaryButton
onClick={translate}
disabled={processing}
className="text-xl h-16 px-8"
>
{t("translate")}
</GreenButton>
</PrimaryButton>
</div>
</>
);

6
src/app/folders/[folder_id]/InFolder.tsx
View File

@@ -7,7 +7,7 @@ import { AddTextPairModal } from "./AddTextPairModal";
import { TextPairCard } from "./TextPairCard";
import { useTranslations } from "next-intl";
import { PageLayout } from "@/components/ui/PageLayout";
import { GreenButton, IconButton, LinkButton } from "@/components/ui/buttons";
import { PrimaryButton, 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";
@@ -73,13 +73,13 @@ export function InFolder({ folderId, isReadOnly }: { folderId: number; isReadOnl
{/* 操作按钮区域 */}
<div className="flex items-center gap-2">
<GreenButton
<PrimaryButton
onClick={() => {
redirect(`/memorize?folder_id=${folderId}`);
}}
>
{t("memorize")}
</GreenButton>
</PrimaryButton>
{!isReadOnly && (
<IconButton
onClick={() => {

2
src/app/page.tsx
View File

@@ -13,7 +13,7 @@ function LinkArea({ href, name, description, color }: LinkAreaProps) {
<Link
href={href}
style={{ backgroundColor: color }}
className={`h-32 md:h-64 flex md:justify-center items-center`}
className={`hover:scale-105 transition-transform duration-200 h-32 md:h-64 flex md:justify-center items-center`}
>
<div className="text-white m-8">
<h1 className="md:text-4xl text-3xl">{name}</h1>

28
src/components/ui/Input.tsx
View File

@@ -1,3 +1,5 @@
export type InputVariant = "default" | "search" | "bordered" | "filled";
interface Props {
ref?: React.Ref<HTMLInputElement>;
placeholder?: string;
@@ -5,6 +7,11 @@ interface Props {
className?: string;
name?: string;
defaultValue?: string;
value?: string;
variant?: InputVariant;
required?: boolean;
disabled?: boolean;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export function Input({
@@ -14,15 +21,34 @@ export function Input({
className = "",
name = "",
defaultValue = "",
value,
variant = "default",
required = false,
disabled = false,
onChange,
}: Props) {
// Variant-specific classes
const variantStyles: Record<InputVariant, string> = {
default: "block focus:outline-none border-b-2 border-gray-600",
search: "flex-1 min-w-0 px-4 py-3 text-lg text-gray-800 focus:outline-none border-b-2 border-gray-600 bg-white/90 rounded",
bordered: "w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f]",
filled: "w-full px-3 py-2 bg-gray-100 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f]"
};
const variantClass = variantStyles[variant];
return (
<input
ref={ref}
placeholder={placeholder}
type={type}
className={`block focus:outline-none border-b-2 border-gray-600 ${className}`}
className={`${variantClass} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
name={name}
defaultValue={defaultValue}
value={value}
required={required}
disabled={disabled}
onChange={onChange}
/>
);
}

18
src/components/ui/LocaleSelector.tsx
View File

@@ -1,5 +1,7 @@
import { useTranslations } from "next-intl";
import { useState } from "react";
import { Input } from "@/components/ui/Input";
import { Select, Option } from "@/components/ui/Select";
const COMMON_LANGUAGES = [
{ label: "chinese", value: "chinese" },
@@ -47,24 +49,24 @@ export function LocaleSelector({ value, onChange }: LocaleSelectorProps) {
return (
<div>
<select
<Select
value={isCommonLanguage ? value : "other"}
onChange={(e) => handleSelectChange(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f]"
onChange={handleSelectChange}
>
{COMMON_LANGUAGES.map((lang) => (
<option key={lang.value} value={lang.value}>
<Option key={lang.value} value={lang.value}>
{t(`translator.${lang.label}`)}
</option>
</Option>
))}
</select>
</Select>
{showCustomInput && (
<input
<Input
type="text"
value={inputValue}
onChange={(e) => handleCustomInputChange(e.target.value)}
placeholder={t("folder_id.enterLanguageName")}
className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f] mt-2"
variant="bordered"
className="mt-2"
/>
)}
</div>

43
src/components/ui/RangeInput.tsx Normal file
View File

@@ -0,0 +1,43 @@
"use client";
import React from "react";
interface RangeInputProps {
value: number;
max: number;
onChange: (value: number) => void;
disabled?: boolean;
className?: string;
min?: number;
}
export function RangeInput({
value,
max,
onChange,
disabled = false,
className = "",
min = 0,
}: RangeInputProps) {
const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = parseInt(event.target.value);
onChange(newValue);
}, [onChange]);
const progressPercentage = ((value - min) / (max - min)) * 100;
return (
<input
type="range"
min={min}
max={max}
value={value}
onChange={handleChange}
disabled={disabled}
className={`w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
style={{
background: `linear-gradient(to right, #374151 0%, #374151 ${progressPercentage}%, #e5e7eb ${progressPercentage}%, #e5e7eb 100%)`
}}
/>
);
}

56
src/components/ui/Select.tsx Normal file
View File

@@ -0,0 +1,56 @@
export type SelectSize = "sm" | "md" | "lg";
interface Props {
value?: string;
onChange?: (value: string) => void;
children: React.ReactNode;
className?: string;
size?: SelectSize;
disabled?: boolean;
required?: boolean;
}
export function Select({
value,
onChange,
children,
className = "",
size = "md",
disabled = false,
required = false,
}: Props) {
// Size-specific classes
const sizeStyles: Record<SelectSize, string> = {
sm: "px-2 py-1 text-sm",
md: "px-3 py-2 text-base",
lg: "px-4 py-3 text-lg"
};
const sizeClass = sizeStyles[size];
return (
<select
value={value}
onChange={(e) => onChange?.(e.target.value)}
className={`w-full border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f] ${sizeClass} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
disabled={disabled}
required={required}
>
{children}
</select>
);
}
interface OptionProps {
value: string;
children: React.ReactNode;
disabled?: boolean;
}
export function Option({ value, children, disabled = false }: OptionProps) {
return (
<option value={value} disabled={disabled}>
{children}
</option>
);
}

50
src/components/ui/Textarea.tsx Normal file
View File

@@ -0,0 +1,50 @@
export type TextareaVariant = "default" | "bordered" | "filled";
interface Props {
value?: string;
defaultValue?: string;
onChange?: (value: string) => void;
placeholder?: string;
className?: string;
variant?: TextareaVariant;
disabled?: boolean;
required?: boolean;
rows?: number;
name?: string;
}
export function Textarea({
value,
defaultValue,
onChange,
placeholder = "",
className = "",
variant = "default",
disabled = false,
required = false,
rows = 3,
name = "",
}: Props) {
// Variant-specific classes
const variantStyles: Record<TextareaVariant, string> = {
default: "block focus:outline-none border-b-2 border-gray-600 resize-none",
bordered: "w-full border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f] resize-none",
filled: "w-full bg-gray-100 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f] resize-none"
};
const variantClass = variantStyles[variant];
return (
<textarea
value={value}
defaultValue={defaultValue}
onChange={(e) => onChange?.(e.target.value)}
placeholder={placeholder}
className={`${variantClass} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
disabled={disabled}
required={required}
rows={rows}
name={name}
/>
);
}

66
src/components/ui/buttons/index.tsx
View File

@@ -1,33 +1,29 @@
// 向后兼容的按钮组件包装器
// 这些组件将新 Button 组件包装，以保持向后兼容
// 统一的按钮组件导出
// 基于 Button 组件的便捷包装器，提供语义化的按钮类型
import { Button } from "../Button";
// LightButton: 次要按钮，支持 selected 状态
export const LightButton = (props: any) => <Button variant="secondary" {...props} />;
// ========== 基础按钮 ==========
// GreenButton: 主题色主要按钮
export const GreenButton = (props: any) => <Button variant="primary" {...props} />;
// PrimaryButton: 主要操作按钮（主题色）
export const PrimaryButton = (props: any) => <Button variant="primary" {...props} />;
// IconButton: SVG 图标按钮
// SecondaryButton: 次要按钮，支持 selected 状态
export const SecondaryButton = (props: any) => <Button variant="secondary" {...props} />;
// LightButton: 次要按钮的别名（向后兼容）
export const LightButton = SecondaryButton;
// ========== 图标按钮 ==========
// IconButton: SVG 图标按钮（方形背景）
export const IconButton = (props: any) => {
const { icon, ...rest } = props;
return <Button variant="icon" leftIcon={icon} {...rest} />;
};
// GhostButton: 透明导航按钮
export const GhostButton = (props: any) => {
const { className, children, ...rest } = props;
return (
<Button variant="ghost" className={className} {...rest}>
{children}
</Button>
);
};
// IconClick: 图片图标按钮
// IconClick: 图片图标按钮（支持 Next.js Image）
export const IconClick = (props: any) => {
// IconClick 使用 src/alt 属性，需要映射到 Button 的 iconSrc/iconAlt
const { src, alt, size, disableOnHoverBgChange, className, ...rest } = props;
let buttonSize: "sm" | "md" | "lg" = "md";
if (typeof size === "number") {
@@ -37,7 +33,6 @@ export const IconClick = (props: any) => {
buttonSize = (size === "sm" || size === "md" || size === "lg") ? size : "md";
}
// 如果禁用悬停背景变化，通过 className 覆盖
const hoverClass = disableOnHoverBgChange ? "hover:bg-black/30 hover:cursor-pointer border-0 bg-transparent shadow-none" : "";
return (
@@ -52,22 +47,13 @@ export const IconClick = (props: any) => {
);
};
// PlainButton: 基础小按钮
export const PlainButton = (props: any) => <Button variant="secondary" size="sm" {...props} />;
// CircleButton: 圆形导航按钮
// CircleButton: 圆形图标按钮
export const CircleButton = (props: any) => {
const { icon, className, ...rest } = props;
return <Button variant="circle" leftIcon={icon} className={className} {...rest} />;
};
// DashedButton: 虚线边框按钮
export const DashedButton = (props: any) => <Button variant="dashed" {...props} />;
// LinkButton: 链接样式按钮
export const LinkButton = (props: any) => <Button variant="link" {...props} />;
// CircleToggleButton: 圆形切换按钮（支持 selected 状态）
// CircleToggleButton: 带选中状态的圆形切换按钮
export const CircleToggleButton = (props: any) => {
const { selected, className, children, ...rest } = props;
const selectedClass = selected
@@ -83,3 +69,21 @@ export const CircleToggleButton = (props: any) => {
</Button>
);
};
// ========== 特殊样式按钮 ==========
// GhostButton: 透明导航按钮
export const GhostButton = (props: any) => {
const { className, children, ...rest } = props;
return (
<Button variant="ghost" className={className} {...rest}>
{children}
</Button>
);
};
// LinkButton: 链接样式按钮
export const LinkButton = (props: any) => <Button variant="link" {...props} />;
// DashedButton: 虚线边框按钮
export const DashedButton = (props: any) => <Button variant="dashed" {...props} />;

36
src/components/ui/index.ts Normal file
View File

@@ -0,0 +1,36 @@
// 统一的 UI 组件导出
// 可以从 '@/components/ui' 导入所有组件
// 表单组件
export { Input } from './Input';
export { Select, Option } from './Select';
export { Textarea } from './Textarea';
export { RangeInput } from './RangeInput';
export type { InputVariant } from './Input';
export type { SelectSize } from './Select';
export type { TextareaVariant } from './Textarea';
// 按钮组件
export { Button } from './Button';
export {
PrimaryButton,
SecondaryButton,
LightButton,
IconButton,
IconClick,
CircleButton,
CircleToggleButton,
GhostButton,
LinkButton,
DashedButton,
} from './buttons';
export type { ButtonVariant, ButtonSize, ButtonProps } from './Button';
// 布局组件
export { Container } from './Container';
export { PageLayout } from './PageLayout';
export { PageHeader } from './PageHeader';
export { CardList } from './CardList';
// 复合组件
export { LocaleSelector } from './LocaleSelector';