第七章：构建真实项目

创建一个简单的仪表板

1. 项目概述

在本节中，我们将使用Shadcn组件库构建一个现代、响应式的仪表板。该仪表板将包含以下核心功能模块：

  • 数据概览卡片（KPI展示）
  • 交互式图表区域
  • 最近活动列表
  • 响应式导航侧边栏

2. 初始化项目结构

# 使用Vite创建React+TypeScript项目
npm create vite@latest dashboard-app -- --template react-ts

# 安装Shadcn基础依赖
npx shadcn-ui@latest init

3. 构建仪表板布局

使用Shadcn的布局组件搭建基础框架：

import { LayoutDashboard } from "@/components/ui/layout"

export default function Dashboard() {
  return (
    <LayoutDashboard>
      <div className="grid grid-cols-4 gap-4">
        {/* KPI卡片区域 */}
        <KPICards />
        
        {/* 主图表区域 */}
        <div className="col-span-3">
          <AnalyticsChart />
        </div>
        
        {/* 活动列表 */}
        <RecentActivity />
      </div>
    </LayoutDashboard>
  )
}

4. 实现核心组件

4.1 KPI卡片组件

import { Card } from "@/components/ui/card"

function KPICard({ title, value, change }: KPICardProps) {
  return (
    <Card className="p-6">
      <h3 className="text-sm font-medium">{title}</h3>
      <p className="text-2xl font-bold">{value}</p>
      <Badge variant={change >= 0 ? "positive" : "negative"}>
        {change}%
      </Badge>
    </Card>
  )
}

4.2 图表集成

使用Shadcn与Chart.js集成：

import { LineChart } from "@/components/ui/charts"

function AnalyticsChart() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      data: [30, 45, 60, 80],
      borderColor: 'hsl(var(--primary))'
    }]
  }

  return <LineChart data={data} />
}

5. 添加交互功能

实现动态数据刷新和筛选：

const [timeRange, setTimeRange] = useState('7d')

function handleTimeChange(range: string) {
  setTimeRange(range)
  // 触发数据重新获取
  refetchData(range)
}

6. 响应式优化

使用Tailwind的响应式断点：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* 在不同屏幕尺寸下自动调整布局 */}
</div>

7. 完整实现示例

查看完整代码示例（链接占位符）

8. 项目扩展建议

  • 添加用户权限控制面板
  • 集成实时数据推送
  • 实现主题切换功能
  • 添加多语言支持

最佳实践提示：建议将每个仪表板模块拆分为独立组件，并通过状态管理工具（如Zustand）共享数据状态。


这个Markdown内容提供了从项目初始化到具体实现的完整流程，包含代码示例、架构建议和扩展方向，符合技术文档的专业性和实用性要求。
Last Updated::