跳转至

05 控制面板⚓︎

效果展示⚓︎

image-20240114154537926

实现代码⚓︎

app/(dashboard)/(routes)/dashboard/page.tsx
"use client";

import { useRouter } from "next/navigation";

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

import {
  Code,
  ImageIcon,
  MessageSquare,
  Music,
  VideoIcon,
  ArrowRight,
} from "lucide-react";

const tools = [
  {
    label: "进行对话",
    icon: MessageSquare,
    href: "/conversation",
    color: "text-violet-500",
    bgColor: "bg-violet-500/10",
  },
  {
    label: "生成图片",
    icon: ImageIcon,
    color: "text-pink-700",
    bgColor: "bg-pink-700/10",
    href: "/image",
  },
  {
    label: "生成视频",
    icon: VideoIcon,
    color: "text-orange-700",
    bgColor: "bg-orange-700/10",
    href: "/video",
  },
  {
    label: "生成音乐",
    icon: Music,
    href: "/music",
    color: "text-emerald-500",
    bgColor: "bg-emerald-500/10",
  },
  {
    label: "生成代码",
    icon: Code,
    color: "text-green-700",
    bgColor: "bg-green-700/10",
    href: "/code",
  },
];
export default function HomePage() {
  const router = useRouter();

  return (
    <div>
      <div className="mb-8 space-y-4">
        <h2 className="text-2xl md:text-4xl font-bold text-center">
          探索AI的力量
        </h2>
        <p className="font-light text-sm md:text-lg text-center text-slate-400">
          与最聪明的AI聊天-体验AI的力量
        </p>
      </div>
      <div className="px-4 md:px-20 lg:px-32 space-y-4">
        {tools.map((tool) => (
          <Card
            onClick={() => router.push(tool.href)}
            key={tool.href}
            className="p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer"
          >
            <div className="flex items-center gap-x-4">
              <div className={`p-2 w-fit rounded-md ${tool.bgColor}`}>
                <tool.icon className={`w-8 h-8 ${tool.color}`} />
              </div>
              <div className="font-semibold">{tool.label}</div>
            </div>
            <ArrowRight className="w-5 h-5" />
          </Card>
        ))}
      </div>
    </div>
  );
}

这段代码是一个在 Next.js 框架下使用的 React 组件，用于创建一个交互式的主页，其中包含一系列的工具卡片（Card）。下面是对代码的主要部分的解释：

  1. 导入模块和组件:
  2. 使用 use client 指示这是一个客户端组件。
  3. 从 next/navigation 导入 useRouter 钩子，用于处理路由跳转。

  4. 导入 Card 组件和一系列图标组件（如 Code, ImageIcon 等）。

  5. 工具数组 tools:

  6. 这个数组包含了各种工具的信息，例如标签（label）、图标（icon）、颜色（color）、背景颜色（bgColor）和路由链接（href）。这些信息将用于生成卡片。

  7. 组件 HomePage:

  8. 使用 useRouter 钩子获取路由实例。

  9. 返回一个包含标题、描述和一组卡片的 div 元素。每个卡片代表一个工具，点击时会跳转到对应的路由。

  10. 渲染工具卡片:

  11. 使用 map 函数遍历 tools 数组，为每个工具生成一个 Card 组件。
  12. 每个卡片上点击事件触发 router.push 方法，实现页面跳转。
  13. 卡片布局包括一个图标和一个标签，以及一个指向右侧的箭头图标。

这个组件展示了如何在 Next.js 应用中组合使用路由、组件和数组映射来创建动态的、交互式的用户界面。每个卡片上的点击事件触发页面跳转，提供了一个用户友好的导航体验。