从头开始创建一个自动产生文档/类型安全的现代API(15) 创建前端页面

现在我们开始创建前端页面。

利用 v0 快速输出前端页面

打开 v0 输入以下提示词：

帮忙编写一个网页，风格为现代偏科技，支持显示task list，task有name 和 done 两个属性，用户可以添加/修改/删除 task。
未完成的任务 最好显示为方框，完成后显示为打勾。
任务清单支持拖曳 调整 顺序。

通过几轮调整，页面基本符合要求。

修改页面

修改 app/page.tsx:

"use client"

import * as React from "react"
import { Check, GripVertical, Plus, Trash2, X } from "lucide-react"
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core"
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { 
  Sheet, 
  SheetContent, 
  SheetDescription, 
  SheetHeader, 
  SheetTitle, 
  SheetTrigger 
} from "@/components/ui/sheet"

interface Task {
  id: number
  name: string
  done: boolean
}

type TaskAction =
  | { type: "added"; name: string }
  | { type: "changed"; task: Task }
  | { type: "deleted"; id: number }
  | { type: "reordered"; tasks: Task[] }

function tasksReducer(tasks: Task[], action: TaskAction): Task[] {
  switch (action.type) {
    case "added": {
      return [
        ...tasks,
        {
          id: Date.now(),
          name: action.name,
          done: false,
        },
      ]
    }
    case "changed": {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task
        } else {
          return t
        }
      })
    }
    case "deleted": {
      return tasks.filter((t) => t.id !== action.id)
    }
    case "reordered": {
      return action.tasks
    }
    default: {
      throw Error("Unknown action")
    }
  }
}

interface SortableTaskItemProps {
  task: Task
  onToggle: (task: Task) => void
  onEdit: (task: Task | null) => void
  onUpdate: (task: Task, newName: string) => void
  onDelete: (id: number) => void
  editingTask: Task | null
}

function SortableTaskItem({ task, onToggle, onEdit, onUpdate, onDelete, editingTask }: SortableTaskItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`group flex items-center gap-2 rounded-lg border p-4 transition-colors hover:bg-muted ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      <Button variant="ghost" size="icon" className="cursor-grab touch-none" {...attributes} {...listeners}>
        <GripVertical className="h-4 w-4 text-muted-foreground" />
        <span className="sr-only">Reorder task</span>
      </Button>

      <Button variant="ghost" size="icon" onClick={() => onToggle(task)} className="flex items-center justify-center">
        <div
          className={`h-5 w-5 rounded-sm border ${
            task.done ? "bg-primary border-primary flex items-center justify-center" : "border-muted-foreground"
          }`}
        >
          {task.done && <Check className="h-3 w-3 text-primary-foreground" />}
        </div>
        <span className="sr-only">Mark task as {task.done ? "undone" : "done"}</span>
      </Button>

      {editingTask?.id === task.id ? (
        <Input
          value={editingTask.name}
          onChange={(e) => onEdit({ ...editingTask, name: e.target.value })}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              onUpdate(task, editingTask.name)
            } else if (e.key === "Escape") {
              onEdit(null as Task | null)
            }
          }}
          className="flex-1"
          autoFocus
        />
      ) : (
        <span
          onClick={() => onEdit(task)}
          className={`flex-1 cursor-pointer ${task.done ? "text-muted-foreground line-through" : ""}`}
        >
          {task.name}
        </span>
      )}

      <Sheet>
        <SheetTrigger asChild>
          <Button variant="ghost" size="icon" className="hidden group-hover:inline-flex hover:text-destructive">
            <Trash2 className="h-4 w-4" />
            <span className="sr-only">Delete task</span>
          </Button>
        </SheetTrigger>
        <SheetContent side="right">
          <SheetHeader>
            <SheetTitle>Delete Task</SheetTitle>
            <SheetDescription>
              Are you sure you want to delete this task? This action cannot be undone.
            </SheetDescription>
          </SheetHeader>
          <div className="mt-6 flex justify-end gap-3">
            <Button variant="outline">Cancel</Button>
            <Button variant="destructive" onClick={() => onDelete(task.id)}>
              Delete
            </Button>
          </div>
        </SheetContent>
      </Sheet>

      {editingTask?.id === task.id && (
        <Button variant="ghost" size="icon" onClick={() => onEdit(null)}>
          <X className="h-4 w-4" />
          <span className="sr-only">Cancel editing</span>
        </Button>
      )}
    </div>
  )
}

export default function TaskManager() {
  const [tasks, dispatch] = React.useReducer(tasksReducer, [])
  const [newTaskName, setNewTaskName] = React.useState("")
  const [editingTask, setEditingTask] = React.useState<Task | null>(null)

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  )

  function handleAddTask(e: React.FormEvent) {
    e.preventDefault()
    if (!newTaskName.trim()) return

    dispatch({
      type: "added",
      name: newTaskName.trim(),
    })
    setNewTaskName("")
  }

  function handleToggleTask(task: Task) {
    dispatch({
      type: "changed",
      task: { ...task, done: !task.done },
    })
  }

  function handleUpdateTask(task: Task, newName: string) {
    dispatch({
      type: "changed",
      task: { ...task, name: newName },
    })
    setEditingTask(null)
  }

  function handleDeleteTask(id: number) {
    dispatch({
      type: "deleted",
      id,
    })
  }

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event

    if (over && active.id !== over.id) {
      const oldIndex = tasks.findIndex((task) => task.id === active.id)
      const newIndex = tasks.findIndex((task) => task.id === over.id)

      dispatch({
        type: "reordered",
        tasks: arrayMove(tasks, oldIndex, newIndex),
      })
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted p-4 md:p-6 lg:p-8">
      <Card className="mx-auto max-w-2xl space-y-6 p-6">
        <div className="space-y-2">
          <h1 className="text-2xl font-bold tracking-tight">Task Manager</h1>
          <p className="text-sm text-muted-foreground">Manage your tasks efficiently with this modern interface.</p>
        </div>

        <form onSubmit={handleAddTask} className="flex gap-2">
          <Input
            placeholder="Add a new task..."
            value={newTaskName}
            onChange={(e) => setNewTaskName(e.target.value)}
            className="flex-1"
          />
          <Button type="submit" size="icon">
            <Plus className="h-4 w-4" />
            <span className="sr-only">Add task</span>
          </Button>
        </form>

        <div className="space-y-4">
          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
            <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
              {tasks.map((task) => (
                <SortableTaskItem
                  key={task.id}
                  task={task}
                  onToggle={handleToggleTask}
                  onEdit={setEditingTask}
                  onUpdate={handleUpdateTask}
                  onDelete={handleDeleteTask}
                  editingTask={editingTask}
                />
              ))}
            </SortableContext>
          </DndContext>

          {tasks.length === 0 && <div className="text-center text-muted-foreground">No tasks yet. Add one above!</div>}
        </div>
      </Card>
    </div>
  )
}

安装必要依赖包

文件添加后，有不少报错，需要安装依赖包：

bun add lucide-react
bunx shadcn@latest init
bunx shadcn@latest add button
bunx shadcn@latest add card
bunx shadcn@latest add input
bunx shadcn@latest add button
bunx shadcn@latest add sheet
bun add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

测试

安装成功后，运行 bun run dev,访问首页:

可以看到基本符合要求，但目前这个页面还没有和后端 API 连接，数据不能保存。相关工作我们将在下面章节完成。

---

作者：Bearalise
出处：从头开始创建一个自动产生文档/类型安全的现代API(15) 创建前端页面
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。