button

src/app/(features)/dictionary/SearchForm.tsx

@@ -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

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

@@ -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}
+          onChange={(value) => {
-          step={1}
+            if (videoRef.current && parsedSrtRef.current) {
+              videoRef.current.currentTime = parsedSrtRef.current[value]?.start || 0;
+              setProgress(value);
+            }
+          }}
           value={progress}
-        ></input>
+        />
         <span>{spanText}</span>
       </div>
     );

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

@@ -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
+    <RangeInput
-      type="range"
-      min={0}
-      max={max}
       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 || ''}`}
+      className={className}
-      style={{
-        background: `linear-gradient(to right, #374151 0%, #374151 ${(value / max) * 100}%, #e5e7eb ${(value / max) * 100}%, #e5e7eb 100%)`
-      }}
     />
   );
 }

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

@@ -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>
     </>
   );

src/app/folders/[folder_id]/InFolder.tsx

@@ -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={() => {

src/app/page.tsx

@@ -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>

src/components/ui/Input.tsx

@@ -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}
     />
   );
 }

src/components/ui/LocaleSelector.tsx

@@ -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)}
+        onChange={handleSelectChange}
-        className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#35786f]"
       >
         {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>

src/components/ui/RangeInput.tsx

@@ -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%)`
+      }}
+    />
+  );
+}

src/components/ui/Select.tsx

@@ -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>
+  );
+}

src/components/ui/Textarea.tsx

@@ -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}
+    />
+  );
+}

src/components/ui/buttons/index.tsx

@@ -1,33 +1,29 @@
-// 向后兼容的按钮组件包装器
+// 统一的按钮组件导出
-// 这些组件将新 Button 组件包装，以保持向后兼容
+// 基于 Button 组件的便捷包装器，提供语义化的按钮类型
 
 import { Button } from "../Button";
 
-// LightButton: 次要按钮，支持 selected 状态
+// ========== 基础按钮 ==========
-export const LightButton = (props: any) => <Button variant="secondary" {...props} />;
 
-// GreenButton: 主题色主要按钮
+// PrimaryButton: 主要操作按钮（主题色）
-export const GreenButton = (props: any) => <Button variant="primary" {...props} />;
+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: 透明导航按钮
+// IconClick: 图片图标按钮（支持 Next.js Image）
-export const GhostButton = (props: any) => {
-  const { className, children, ...rest } = props;
-  return (
-    <Button variant="ghost" className={className} {...rest}>
-      {children}
-    </Button>
-  );
-};
-
-// IconClick: 图片图标按钮
 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: 基础小按钮
+// CircleButton: 圆形图标按钮
-export const PlainButton = (props: any) => <Button variant="secondary" size="sm" {...props} />;
-
-// CircleButton: 圆形导航按钮
 export const CircleButton = (props: any) => {
   const { icon, className, ...rest } = props;
   return <Button variant="circle" leftIcon={icon} className={className} {...rest} />;
 };
 
-// DashedButton: 虚线边框按钮
+// CircleToggleButton: 带选中状态的圆形切换按钮
-export const DashedButton = (props: any) => <Button variant="dashed" {...props} />;
-
-// LinkButton: 链接样式按钮
-export const LinkButton = (props: any) => <Button variant="link" {...props} />;
-
-// CircleToggleButton: 圆形切换按钮（支持 selected 状态）
 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} />;

src/components/ui/index.ts

@@ -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';