button

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

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: 主题色主要按钮
-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} />;

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