Design System 重构继续完成

src/components/ui/Button.tsx

@@ -1,180 +0,0 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-import Image from "next/image";
-
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "icon" | "circle" | "dashed" | "link";
-export type ButtonSize = "sm" | "md" | "lg";
-
-export interface ButtonProps {
-  // Content
-  children?: React.ReactNode;
-
-  // Behavior
-  onClick?: () => void;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-
-  // Styling
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  className?: string;
-  selected?: boolean;
-  style?: React.CSSProperties;
-
-  // Icons
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  iconSrc?: string; // For Next.js Image icons
-  iconAlt?: string;
-
-  // Navigation
-  href?: string;
-}
-
-export function Button({
-  variant = "secondary",
-  size = "md",
-  selected = false,
-  href,
-  iconSrc,
-  iconAlt,
-  leftIcon,
-  rightIcon,
-  children,
-  className = "",
-  style,
-  type = "button",
-  disabled = false,
-  ...props
-}: ButtonProps) {
-  // Base classes
-  const baseClasses = "inline-flex items-center justify-center gap-2 rounded font-bold shadow hover:cursor-pointer transition-colors";
-
-  // Variant-specific classes
-  const variantStyles: Record<ButtonVariant, string> = {
-    primary: `
-      text-white
-      hover:opacity-90
-    `,
-    secondary: `
-      text-black
-      hover:bg-gray-100
-    `,
-    ghost: `
-      hover:bg-black/30
-      p-2
-    `,
-    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
-    `
-  };
-
-  // Size-specific classes
-  const sizeStyles: Record<ButtonSize, string> = {
-    sm: "px-3 py-1 text-sm",
-    md: "px-4 py-2",
-    lg: "px-6 py-3 text-lg"
-  };
-
-  const variantClass = variantStyles[variant];
-  const sizeClass = sizeStyles[size];
-
-  // Selected state for secondary variant
-  const selectedClass = variant === "secondary" && selected ? "bg-gray-100" : "";
-
-  // Background color for primary variant
-  const backgroundColor = variant === "primary" ? '#35786f' : undefined;
-
-  // Combine all classes
-  const combinedClasses = `
-    ${baseClasses}
-    ${variantClass}
-    ${sizeClass}
-    ${selectedClass}
-    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-    ${className}
-  `.trim().replace(/\s+/g, " ");
-
-  // Icon rendering helper for SVG icons
-  const renderSvgIcon = (icon: React.ReactNode, position: "left" | "right") => {
-    if (!icon) return null;
-    return (
-      <span className={`flex items-center ${position === "left" ? "-ml-1 mr-2" : "-mr-1 ml-2"}`}>
-        {icon}
-      </span>
-    );
-  };
-
-  // Image icon rendering for Next.js Image
-  const renderImageIcon = () => {
-    if (!iconSrc) return null;
-    const sizeMap = { sm: 16, md: 20, lg: 24 };
-    const imgSize = sizeMap[size] || 20;
-
-    return (
-      <Image
-        src={iconSrc}
-        width={imgSize}
-        height={imgSize}
-        alt={iconAlt || "icon"}
-      />
-    );
-  };
-
-  // Content assembly
-  const content = (
-    <>
-      {renderImageIcon()}
-      {renderSvgIcon(leftIcon, "left")}
-      {children}
-      {renderSvgIcon(rightIcon, "right")}
-    </>
-  );
-
-  // If href is provided, render as Link
-  if (href) {
-    return (
-      <Link
-        href={href}
-        className={combinedClasses}
-        style={{ ...style, backgroundColor }}
-      >
-        {content}
-      </Link>
-    );
-  }
-
-  // Otherwise render as button
-  return (
-    <button
-      type={type}
-      disabled={disabled}
-      className={combinedClasses}
-      style={{ ...style, backgroundColor }}
-      {...props}
-    >
-      {content}
-    </button>
-  );
-}

src/components/ui/Card.tsx

@@ -1,73 +0,0 @@
-/**
- * Card - 可复用的卡片组件
- *
- * 提供应用统一的标准白色卡片样式：
- * - 白色背景
- * - 圆角 (rounded-2xl)
- * - 阴影 (shadow-xl)
- * - 可配置内边距
- * - 多种样式变体
- *
- * @example
- * ```tsx
- * // 默认卡片
- * <Card>
- *   <p>卡片内容</p>
- * </Card>
- *
- * // 带边框的卡片
- * <Card variant="bordered" padding="lg">
- *   <p>带边框的内容</p>
- * </Card>
- *
- * // 无内边距卡片
- * <Card padding="none">
- *   <img src="image.jpg" alt="完全填充的图片" />
- * </Card>
- * ```
- */
-export type CardVariant = "default" | "bordered" | "elevated";
-export type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
-
-export interface CardProps {
-  children: React.ReactNode;
-  /** 额外的 CSS 类名，用于自定义样式 */
-  className?: string;
-  /** 卡片样式变体 */
-  variant?: CardVariant;
-  /** 内边距大小 */
-  padding?: CardPadding;
-}
-
-// 变体样式映射
-const variantClasses: Record<CardVariant, string> = {
-  default: "bg-white shadow-xl",
-  bordered: "bg-white border-2 border-gray-200",
-  elevated: "bg-white shadow-2xl",
-};
-
-// 内边距映射
-const paddingClasses: Record<CardPadding, string> = {
-  none: "",
-  sm: "p-4",
-  md: "p-6",
-  lg: "p-8",
-  xl: "p-8 md:p-12",
-};
-
-export function Card({
-  children,
-  className = "",
-  variant = "default",
-  padding = "md",
-}: CardProps) {
-  const baseClasses = "rounded-2xl";
-  const variantClass = variantClasses[variant];
-  const paddingClass = paddingClasses[padding];
-
-  return (
-    <div className={`${baseClasses} ${variantClass} ${paddingClass} ${className}`}>
-      {children}
-    </div>
-  );
-}

src/components/ui/CardList.tsx

@@ -1,30 +1,21 @@
 /**
  * CardList - 可滚动的卡片列表容器
  *
- * 用于显示可滚动的列表内容，如文件夹列表、文本对列表等
- * - 最大高度 96 (24rem)
- * - 垂直滚动
- * - 圆角边框
- *
- * @example
- * ```tsx
- * <CardList>
- *   {items.map(item => (
- *     <div key={item.id}>{item.name}</div>
- *   ))}
- * </CardList>
- * ```
+ * 使用 Design System 重写的卡片列表组件
  */
+import { VStack } from "@/design-system/layout/stack";
+
 interface CardListProps {
   children: React.ReactNode;
-  /** 额外的 CSS 类名 */
   className?: string;
 }
 
 export function CardList({ children, className = "" }: CardListProps) {
   return (
-    <div className={`max-h-96 overflow-y-auto rounded-xl border border-gray-200 overflow-hidden ${className}`}>
-      {children}
+    <div className={`max-h-96 overflow-y-auto rounded-lg border-2 border-gray-200 ${className}`}>
+      <VStack gap={0}>
+        {children}
+      </VStack>
     </div>
   );
 }

src/components/ui/Container.tsx

@@ -1,14 +1,22 @@
+/**
+ * Container - 容器组件
+ *
+ * 使用 Design System 重写的容器组件
+ */
+import { Container as DSContainer } from "@/design-system/layout/container";
+import { Card } from "@/design-system/base/card";
+
 interface ContainerProps {
   children?: React.ReactNode;
   className?: string;
 }
 
-export function Container({ children, className }: ContainerProps) {
+export function Container({ children, className = "" }: ContainerProps) {
   return (
-    <div
-      className={`w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl ${className}`}
-    >
-      {children}
-    </div>
+    <DSContainer size="2xl" className={`mx-auto ${className}`}>
+      <Card variant="bordered" padding="md">
+        {children}
+      </Card>
+    </DSContainer>
   );
 }

src/components/ui/Input.tsx

@@ -1,54 +0,0 @@
-export type InputVariant = "default" | "search" | "bordered" | "filled";
-
-interface Props {
-  ref?: React.Ref<HTMLInputElement>;
-  placeholder?: string;
-  type?: string;
-  className?: string;
-  name?: string;
-  defaultValue?: string;
-  value?: string;
-  variant?: InputVariant;
-  required?: boolean;
-  disabled?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export function Input({
-  ref,
-  placeholder = "",
-  type = "text",
-  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={`${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,7 +1,13 @@
+/**
+ * LocaleSelector - 语言选择器组件
+ *
+ * 使用 Design System 重写的语言选择器组件
+ */
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import { Input } from "@/components/ui/Input";
-import { Select, Option } from "@/components/ui/Select";
+import { Input } from "@/design-system/base/input";
+import { Select } from "@/design-system/base/select";
+import { VStack } from "@/design-system/layout/stack";
 
 const COMMON_LANGUAGES = [
   { label: "chinese", value: "chinese" },
@@ -38,7 +44,8 @@ export function LocaleSelector({ value, onChange }: LocaleSelectorProps) {
   };
 
   // 当选择常见语言或"其他"时
-  const handleSelectChange = (selectedValue: string) => {
+  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
     if (selectedValue === "other") {
       setCustomInput("");
       onChange("other");
@@ -48,15 +55,15 @@ export function LocaleSelector({ value, onChange }: LocaleSelectorProps) {
   };
 
   return (
-    <div>
+    <VStack gap={2}>
       <Select
         value={isCommonLanguage ? value : "other"}
         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>
       {showCustomInput && (
@@ -66,9 +73,8 @@ export function LocaleSelector({ value, onChange }: LocaleSelectorProps) {
           onChange={(e) => handleCustomInputChange(e.target.value)}
           placeholder={t("folder_id.enterLanguageName")}
           variant="bordered"
-          className="mt-2"
         />
       )}
-    </div>
+    </VStack>
   );
 }

src/components/ui/PageHeader.tsx

@@ -1,29 +1,25 @@
 /**
  * PageHeader - 页面标题组件
  *
- * 用于 PageLayout 内的页面标题，支持主标题和可选的副标题
- *
- * @example
- * ```tsx
- * <PageHeader title="我的文件夹" subtitle="管理和组织你的学习内容" />
- * ```
+ * 使用 Design System 重写的页面标题组件
  */
+import { VStack } from "@/design-system/layout/stack";
+
 interface PageHeaderProps {
-  /** 页面主标题 */
   title: string;
-  /** 可选的副标题/描述 */
   subtitle?: string;
+  className?: string;
 }
 
-export function PageHeader({ title, subtitle }: PageHeaderProps) {
+export function PageHeader({ title, subtitle, className = "" }: PageHeaderProps) {
   return (
-    <div className="mb-6">
-      <h1 className="text-2xl md:text-3xl font-bold text-gray-800 mb-2">
+    <VStack gap={2} className={`mb-6 ${className}`}>
+      <h1 className="text-2xl md:text-3xl font-bold text-gray-800">
         {title}
       </h1>
       {subtitle && (
         <p className="text-sm text-gray-500">{subtitle}</p>
       )}
-    </div>
+    </VStack>
   );
 }

src/components/ui/PageLayout.tsx

@@ -1,61 +1,21 @@
 /**
- * PageLayout - 统一的页面布局组件
+ * PageLayout - 页面布局组件
  *
- * 提供应用统一的标准页面布局：
- * - 绿色背景 (#35786f)
- * - 最小高度 min-h-[calc(100vh-64px)]
- * - 支持多种布局变体
- *
- * @example
- * ```tsx
- * // 默认：居中白色卡片布局
- * <PageLayout>
- *   <PageHeader title="标题" subtitle="副标题" />
- *   <div>页面内容</div>
- * </PageLayout>
- *
- * // 全宽布局（无白色卡片）
- * <PageLayout variant="full-width" maxWidth="3xl">
- *   <div>页面内容</div>
- * </PageLayout>
- *
- * // 全屏布局（用于 translator 等）
- * <PageLayout variant="fullscreen">
- *   <div>全屏内容</div>
- * </PageLayout>
- * ```
+ * 使用 Design System 重写的页面布局组件
  */
-import { Card } from "./Card";
+import { Card } from "@/design-system/base/card";
+import { Container } from "@/design-system/layout/container";
 
 type PageLayoutVariant = "centered-card" | "full-width" | "fullscreen";
-type MaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-type AlignItems = "center" | "start" | "end";
 
 interface PageLayoutProps {
   children: React.ReactNode;
-  /** 额外的 CSS 类名，用于自定义布局行为 */
   className?: string;
-  /** 布局变体 */
   variant?: PageLayoutVariant;
-  /** 最大宽度（仅对 full-width 变体有效） */
-  maxWidth?: MaxWidth;
-  /** 内容垂直对齐方式（仅对 centered-card 变体有效） */
-  align?: AlignItems;
+  align?: "center" | "start" | "end";
 }
 
-// 最大宽度映射
-const maxWidthClasses: Record<MaxWidth, string> = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
-  "2xl": "max-w-2xl",
-  "3xl": "max-w-3xl",
-  full: "max-w-full",
-};
-
-// 对齐方式映射
-const alignClasses: Record<AlignItems, string> = {
+const alignClasses = {
   center: "items-center",
   start: "items-start",
   end: "items-end",
@@ -65,13 +25,12 @@ export function PageLayout({
   children,
   className = "",
   variant = "centered-card",
-  maxWidth = "2xl",
   align = "center",
 }: PageLayoutProps) {
-  // 默认变体：居中白色卡片布局
+  // 居中卡片布局
   if (variant === "centered-card") {
     return (
-      <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] flex ${alignClasses[align]} justify-center px-4 py-8 ${className}`}>
+      <div className={`min-h-[calc(100vh-64px)] bg-primary-500 flex ${alignClasses[align]} justify-center px-4 py-8 ${className}`}>
         <div className="w-full max-w-2xl">
           <Card padding="lg" className="p-6 md:p-8">
             {children}
@@ -81,21 +40,21 @@ export function PageLayout({
     );
   }
 
-  // 全宽布局：绿色背景，最大宽度容器，无白色卡片
+  // 全宽布局
   if (variant === "full-width") {
     return (
-      <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] px-4 py-8 ${className}`}>
-        <div className={`w-full ${maxWidthClasses[maxWidth]} mx-auto`}>
+      <div className={`min-h-[calc(100vh-64px)] bg-primary-500 px-4 py-8 ${className}`}>
+        <Container size="2xl">
           {children}
-        </div>
+        </Container>
       </div>
     );
   }
 
-  // 全屏布局：仅绿色背景，无其他限制
+  // 全屏布局
   if (variant === "fullscreen") {
     return (
-      <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] ${className}`}>
+      <div className={`min-h-[calc(100vh-64px)] bg-primary-500 ${className}`}>
         {children}
       </div>
     );

src/components/ui/RangeInput.tsx

@@ -34,7 +34,9 @@ export function RangeInput({
       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}`}
+      className={`w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500 ${
+        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

@@ -1,56 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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,89 +0,0 @@
-// 统一的按钮组件导出
-// 基于 Button 组件的便捷包装器，提供语义化的按钮类型
-
-import { Button } from "../Button";
-
-// ========== 基础按钮 ==========
-
-// PrimaryButton: 主要操作按钮（主题色）
-export const PrimaryButton = (props: any) => <Button variant="primary" {...props} />;
-
-// 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} />;
-};
-
-// IconClick: 图片图标按钮（支持 Next.js Image）
-export const IconClick = (props: any) => {
-  const { src, alt, size, disableOnHoverBgChange, className, ...rest } = props;
-  let buttonSize: "sm" | "md" | "lg" = "md";
-  if (typeof size === "number") {
-    if (size <= 20) buttonSize = "sm";
-    else if (size >= 32) buttonSize = "lg";
-  } else if (typeof size === "string") {
-    buttonSize = (size === "sm" || size === "md" || size === "lg") ? size : "md";
-  }
-
-  const hoverClass = disableOnHoverBgChange ? "hover:bg-black/30 hover:cursor-pointer border-0 bg-transparent shadow-none" : "";
-
-  return (
-    <Button
-      variant="icon"
-      iconSrc={src}
-      iconAlt={alt}
-      size={buttonSize}
-      className={`${hoverClass} ${className || ""}`}
-      {...rest}
-    />
-  );
-};
-
-// CircleButton: 圆形图标按钮
-export const CircleButton = (props: any) => {
-  const { icon, className, ...rest } = props;
-  return <Button variant="circle" leftIcon={icon} className={className} {...rest} />;
-};
-
-// CircleToggleButton: 带选中状态的圆形切换按钮
-export const CircleToggleButton = (props: any) => {
-  const { selected, className, children, ...rest } = props;
-  const selectedClass = selected
-    ? "bg-[#35786f] text-white"
-    : "bg-gray-200 text-gray-600 hover:bg-gray-300";
-  return (
-    <Button
-      variant="circle"
-      className={`rounded-full px-3 py-1 text-sm transition-colors ${selectedClass} ${className || ""}`}
-      {...rest}
-    >
-      {children}
-    </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

@@ -1,38 +1,37 @@
 // 统一的 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';
+// Design System 组件（向后兼容）
+export { Input, type InputVariant, type InputProps } from '@/design-system/base/input';
+export { Select, type SelectVariant, type SelectSize, type SelectProps } from '@/design-system/base/select';
+export { Textarea, type TextareaVariant, type TextareaProps } from '@/design-system/base/textarea';
+export { Card, type CardVariant, type CardPadding, type CardProps } from '@/design-system/base/card';
 export {
+  Button,
   PrimaryButton,
   SecondaryButton,
   LightButton,
+  SuccessButton,
+  WarningButton,
+  ErrorButton,
+  GhostButton,
+  GhostLightButton,
+  OutlineButton,
+  LinkButton,
   IconButton,
   IconClick,
   CircleButton,
   CircleToggleButton,
-  GhostButton,
-  LinkButton,
   DashedButton,
-} from './buttons';
-export type { ButtonVariant, ButtonSize, ButtonProps } from './Button';
+  type ButtonVariant,
+  type ButtonSize,
+  type ButtonProps
+} from '@/design-system/base/button';
 
-// 布局组件
+// 业务特定组件
+export { RangeInput } from './RangeInput';
 export { Container } from './Container';
 export { PageLayout } from './PageLayout';
 export { PageHeader } from './PageHeader';
 export { CardList } from './CardList';
-export { Card } from './Card';
-export type { CardProps, CardVariant, CardPadding } from './Card';
-
-// 复合组件
 export { LocaleSelector } from './LocaleSelector';