构建现代化的组件库：shadcn + Bun 带来的前端开发革命

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "erishen",
  "homepage": "https://erishen.github.io/shadcn-registry/",
  "items": [
    {
      "name": "data-table",
      "type": "registry:component",
      "title": "Data Table",
      "description": "A feature-rich data table with sorting, filtering, and pagination",
      "dependencies": ["button", "input"],
      "files": [
        {
          "path": "components/data-table.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "A versatile button component with multiple variants",
      "dependencies": ["@radix-ui/react-slot", "class-variance-authority"],
      "files": [
        {
          "path": "registry/new-york/ui/button.tsx",
          "type": "registry:ui"
        }
      ]
    }
  ]
}

'use client';

import { useState, useMemo } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

// 强类型定义
export interface Column<T> {
  key: keyof T;
  label: string;
  sortable?: boolean;
  filterable?: boolean;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
}

export interface DataTableProps<T extends Record<string, any>> {
  data: T[];
  columns: Column<T>[];
  pageSize?: number;
  onRowClick?: (row: T) => void;
}

// 性能优化：useMemo 缓存
const filteredData = useMemo(() => {
  return data.filter((row) => {
    return Object.entries(filters).every(([key, value]) => {
      if (!value) return true;
      const cellValue = String(row[key as keyof T]).toLowerCase();
      return cellValue.includes(value.toLowerCase());
    });
  });
}, [data, filters]);

const handleSort = (key: keyof T) => {
  if (sortKey === key) {
    if (sortDirection === 'asc') {
      setSortDirection('desc');
    } else if (sortDirection === 'desc') {
      setSortDirection(null);
      setSortKey(null);
    }
  } else {
    setSortKey(key);
    setSortDirection('asc');
  }
};

{
  key: 'status',
  label: '状态',
  render: (value) => (
    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
      value === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
    }`}>
      {value === 'active' ? '激活' : '禁用'}
    </span>
  ),
}

interface Product {
  id: number;
  name: string;
  description?: string;
  price: number;
  category?: string;
  created_at?: string;
  is_offer?: boolean;
}

const columns: Array<Column<Product>> = [
  {
    key: 'name',
    label: 'Product Name',
    sortable: true,
    filterable: true,
  },
  {
    key: 'price',
    label: 'Price (¥)',
    sortable: true,
    render: (value: string | number | boolean | undefined) => `¥${Number(value).toFixed(2)}`,
  },
  {
    key: 'is_offer',
    label: 'Offer',
    sortable: true,
    filterable: true,
    render: (value: string | number | boolean | undefined) => {
      const isOffer = Boolean(value);
      return isOffer ? (
        <span className="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
          特惠
        </span>
      ) : (
        <span className="text-slate-400">-</span>
      );
    },
  },
];

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest
      - run: bun install
      - run: bun run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

// 数据过滤优化
const filteredData = useMemo(() => {
  return data.filter((row) => {
    return Object.entries(filters).every(([key, value]) => {
      if (!value) return true;
      const cellValue = String(row[key as keyof T]).toLowerCase();
      return cellValue.includes(value.toLowerCase());
    });
  });
}, [data, filters]);

// 避免不必要的重新计算
const sortedData = useMemo(() => {
  if (!sortKey || !sortDirection) return filteredData;
  
  return [...filteredData].sort((a, b) => {
    const aVal = a[sortKey];
    const bVal = b[sortKey];
    
    if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
    if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
    return 0;
  });
}, [filteredData, sortKey, sortDirection]);

export function DataTable<T extends Record<string, any>>({
  data,
  columns,
  pageSize = 10,
  onRowClick,
}: DataTableProps<T>) {
  // 完整的类型安全保障
}

export interface Column<T> {
  key: keyof T;
  label: string;
  sortable?: boolean;
  filterable?: boolean;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
}

{loading && (
  <div className="flex justify-center items-center py-16">
    <div className="animate-spin rounded-full h-14 w-14 border-4 border-slate-200 border-t-blue-600"></div>
  </div>
)}

{error && (
  <div className="bg-red-50 border border-red-200 rounded p-6">
    <p className="text-red-800">加载失败: {error}</p>
    <button onClick={() => loadProducts()}>重试</button>
  </div>
)}