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

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

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>