Back to Details

ui-components

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Components

UI 组件

Quick Start

快速开始

When working with UI components:
  1. Use shadcn/ui components from 
    @/components/ui/
  2. Follow mobile-first approach
  3. Use Tailwind CSS for styling
  4. Maintain accessibility (WCAG 2.1 AA)
  5. Use design system colors and spacing
处理UI组件时需遵循以下规则：
  1. 从 
    @/components/ui/
    中引入shadcn/ui组件
  2. 遵循移动端优先的开发原则
  3. 使用Tailwind CSS完成样式开发
  4. 保证可访问性（符合WCAG 2.1 AA标准）
  5. 统一使用设计系统规定的颜色和间距规范

Key Files

核心文件

  • src/components/ui/
    - shadcn/ui components
  • tailwind.config.ts
    - Tailwind configuration
  • src/styles/
    - Global styles
  • src/components/
    - Custom components
  • src/components/ui/
    - shadcn/ui组件库存放路径
  • tailwind.config.ts
    - Tailwind配置文件
  • src/styles/
    - 全局样式文件路径
  • src/components/
    - 自定义组件存放路径

Common Patterns

常用模式

Using shadcn/ui Components

使用shadcn/ui组件

typescript
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

function ProductForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Nuevo Producto</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Nombre del producto" />
        <Button className="mt-4">Guardar</Button>
      </CardContent>
    </Card>
  );
}
typescript
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

function ProductForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Nuevo Producto</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Nombre del producto" />
        <Button className="mt-4">Guardar</Button>
      </CardContent>
    </Card>
  );
}

Mobile-First Responsive

移动端优先响应式开发

typescript
<div className="
  flex flex-col
  md:flex-row md:items-center
  gap-4
  p-4
  md:p-6
">
  <h1 className="text-2xl md:text-3xl lg:text-4xl">
    Título
  </h1>
</div>
typescript
<div className="
  flex flex-col
  md:flex-row md:items-center
  gap-4
  p-4
  md:p-6
">
  <h1 className="text-2xl md:text-3xl lg:text-4xl">
    Título
  </h1>
</div>

Button Styles

按钮样式规范

typescript
// Primary action (yellow)
<Button className="bg-yellow-400 text-2xl rounded-xl">
  Agregar al Carrito
</Button>

// Secondary
<Button variant="outline">
  Cancelar
</Button>

// Destructive
<Button variant="destructive">
  Eliminar
</Button>
typescript
// 主操作按钮（黄色）
<Button className="bg-yellow-400 text-2xl rounded-xl">
  Agregar al Carrito
</Button>

// 次要按钮
<Button variant="outline">
  Cancelar
</Button>

// 危险操作按钮
<Button variant="destructive">
  Eliminar
</Button>

Tenant Colors

租户自定义颜色

typescript
// Use CSS variables for tenant-specific colors
<div 
  className="bg-[var(--tenant-primary)]"
  style={{
    '--tenant-primary': tenant.primary_color || '#ea5a17',
  }}
>
  Content
</div>
typescript
// 使用CSS变量实现租户专属颜色配置
<div 
  className="bg-[var(--tenant-primary)]"
  style={{
    '--tenant-primary': tenant.primary_color || '#ea5a17',
  }}
>
  Content
</div>

Design System

设计系统规范

Colors

颜色规范

  • Primary: Blaze Orange (#ea5a17)
  • Secondary: Fun Green
  • Accent: Bright Sun
  • Use Tailwind color palette
  • 主色：烈焰橙 (#ea5a17)
  • 辅助色：趣味绿
  • 强调色：亮日黄
  • 优先使用Tailwind内置调色板

Spacing

间距规范

  • Use Tailwind spacing scale (4, 8, 12, 16, 24, 32, etc.)
  • Mobile: Smaller padding/margins
  • Desktop: Larger spacing
  • 使用Tailwind间距尺度（4、8、12、16、24、32等）
  • 移动端：使用更小的内边距/外边距
  • 桌面端：使用更大的间距

Typography

排版规范

  • Mobile: text-base (16px) default
  • Desktop: text-lg (18px) default
  • Headings: text-2xl, text-3xl, text-4xl
  • 移动端：默认使用text-base（16px）字号
  • 桌面端：默认使用text-lg（18px）字号
  • 标题：使用text-2xl、text-3xl、text-4xl等级别字号

Accessibility

可访问性规范

  • Use semantic HTML
  • Include ARIA labels when needed
  • Ensure keyboard navigation
  • Maintain color contrast ratios
  • Support screen readers
  • 使用语义化HTML标签
  • 必要场景添加ARIA标签
  • 确保支持键盘导航操作
  • 满足颜色对比度要求
  • 适配屏幕阅读器使用