0.3.1.2

components/ui/back-button.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+interface BackButtonProps {
+  onClick: () => void
+  label?: string
+  className?: string
+}
+
+export function BackButton({ onClick, label = "返回", className = "" }: BackButtonProps) {
+  return (
+    <div className="py-4">
+      <Button 
+        variant="ghost" 
+        onClick={onClick}
+        className={`gap-2 pl-0 hover:bg-transparent hover:text-primary text-2xl font-bold ${className}`}
+      >
+        <ArrowLeft className="h-6 w-6" />
+        {label}
+      </Button>
+    </div>
+  )
+}

components/ui/chinese-card.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * 中国风卡片组件
+ * 提供多种传统中国设计风格变体
+ */
+
+type ChineseCardVariant = 'default' | 'scroll' | 'plaque' | 'portrait' | 'bamboo'
+
+interface ChineseCardProps extends React.ComponentProps<'div'> {
+  variant?: ChineseCardVariant
+  /** 是否显示角饰 */
+  cornerOrnament?: boolean
+  /** 是否显示顶部装饰条 */
+  headerDecoration?: boolean
+}
+
+function ChineseCard({ 
+  className, 
+  variant = 'default',
+  cornerOrnament = false,
+  headerDecoration = false,
+  children,
+  ...props 
+}: ChineseCardProps) {
+  return (
+    <div
+      data-slot="chinese-card"
+      data-variant={variant}
+      className={cn(
+        // 基础样式
+        'relative bg-card text-card-foreground flex flex-col',
+        // 变体样式
+        variant === 'default' && 'chinese-card-default',
+        variant === 'scroll' && 'chinese-card-scroll',
+        variant === 'plaque' && 'chinese-card-plaque',
+        variant === 'portrait' && 'chinese-card-portrait',
+        variant === 'bamboo' && 'chinese-card-bamboo',
+        // 角饰
+        cornerOrnament && 'chinese-card-corner-ornament',
+        className,
+      )}
+      {...props}
+    >
+      {/* 顶部装饰条 */}
+      {headerDecoration && (
+        <div className="chinese-card-header-decoration" />
+      )}
+      
+      {/* 角饰元素 */}
+      {cornerOrnament && (
+        <>
+          <span className="chinese-corner chinese-corner-tl" />
+          <span className="chinese-corner chinese-corner-tr" />
+          <span className="chinese-corner chinese-corner-bl" />
+          <span className="chinese-corner chinese-corner-br" />
+        </>
+      )}
+      
+      {children}
+    </div>
+  )
+}
+
+function ChineseCardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="chinese-card-header"
+      className={cn(
+        'flex flex-col gap-1.5 px-5 pt-5 pb-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ChineseCardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
+  return (
+    <h3
+      data-slot="chinese-card-title"
+      className={cn(
+        'font-serif text-lg font-semibold leading-tight tracking-wide',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ChineseCardDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="chinese-card-description"
+      className={cn(
+        'font-serif text-sm text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ChineseCardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="chinese-card-content"
+      className={cn('px-5 pb-5', className)}
+      {...props}
+    />
+  )
+}
+
+function ChineseCardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="chinese-card-footer"
+      className={cn(
+        'flex items-center px-5 pb-5 pt-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * 中国风分隔线
+ */
+function ChineseDivider({ 
+  className,
+  variant = 'wave',
+  ...props 
+}: React.ComponentProps<'div'> & { 
+  variant?: 'wave' | 'cloud' | 'meander' | 'simple'
+}) {
+  return (
+    <div
+      data-slot="chinese-divider"
+      className={cn(
+        'chinese-divider',
+        variant === 'wave' && 'chinese-divider-wave',
+        variant === 'cloud' && 'chinese-divider-cloud',
+        variant === 'meander' && 'chinese-divider-meander',
+        variant === 'simple' && 'chinese-divider-simple',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * 统计数字组件 - 用于展示大数字
+ */
+function ChineseStatNumber({ 
+  className,
+  children,
+  ...props 
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'text-3xl font-serif font-bold tracking-tight text-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+/**
+ * 统计标签组件
+ */
+function ChineseStatLabel({ 
+  className,
+  children,
+  ...props 
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'text-sm font-medium text-muted-foreground uppercase tracking-wider',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export {
+  ChineseCard,
+  ChineseCardHeader,
+  ChineseCardTitle,
+  ChineseCardDescription,
+  ChineseCardContent,
+  ChineseCardFooter,
+  ChineseDivider,
+  ChineseStatNumber,
+  ChineseStatLabel,
+  type ChineseCardVariant,
+}