Enhance task management with board view and improved UI components

- Implemented the first version of the board view for tasks, allowing users to visualize tasks by status.
- Updated the project plan to reflect the addition of the "筛选结果概览" module and the board view feature.
- Introduced keyboard shortcuts for focusing keyword search and improved URL management for view switching.
- Refactored the `TasksView` component to support both list and board views, enhancing user experience.
- Added new `TaskBoardCard` and `TasksBoard` components for better task organization and interaction.

Author: 赵汝波

PROJECT_PLAN.md

@@ -123,7 +123,7 @@
 - [x] `P1` 展示最近 7 天新增趋势
 - [x] `P1` 展示项目分布情况
 - [ ] `P2` 新增“筛选结果概览”模块
-- [ ] `P2` 评估是否增加看板视图
+- [x] `P2` 看板视图第一版：`/tasks?view=board`，按状态分列（只读，未做拖拽）
 
 ---
 
@@ -216,5 +216,6 @@
 - [x] Vitest：`date-query` 日历与区间（parse / normalize / filter）
 - [x] 任务优先级（`TaskPriority`）+ 截止日期（`dueDate`），列表/详情/新建/命令面板展示，URL `priority=` 筛选，排序 `due_asc` / `due_desc`
 - [x] `/tasks` 快捷键 `C`：打开新建任务 Sheet 并保留当前筛选参数
+- [x] `/tasks` 快捷键 `F`：聚焦关键词搜索；`Input` 改为 `forwardRef`
+- [x] 列表/看板切换写入 URL `view=`，命令面板「任务看板」入口
 - [x] Prisma 索引：`@@index([userId, dueDate])`
-

src/app/projects/[id]/page.tsx

@@ -1,92 +1,93 @@
-import { auth } from "@/auth";
-import { CreateTaskSheet } from "@/components/create-task-sheet";
-import { TasksView } from "@/components/tasks-view";
-import { can } from "@/lib/acl";
-import { prisma } from "@/lib/db";
-import type { TaskListItem } from "@/types/task";
-import { notFound, redirect } from "next/navigation";
+import { auth } from '@/auth'
+import { CreateTaskSheet } from '@/components/create-task-sheet'
+import { TasksView } from '@/components/tasks-view'
+import { can } from '@/lib/acl'
+import { prisma } from '@/lib/db'
+import type { TaskListItem } from '@/types/task'
+import { notFound, redirect } from 'next/navigation'
 
 interface ProjectDetailPageProps {
-  params: Promise<{ id: string }>;
+	params: Promise<{ id: string }>
 }
 
 export default async function ProjectDetailPage({
-  params,
+	params,
 }: ProjectDetailPageProps) {
-  const session = await auth();
-  if (!session?.user?.id) {
-    redirect("/login");
-  }
+	const session = await auth()
+	if (!session?.user?.id) {
+		redirect('/login')
+	}
 
-  const { id } = await params;
+	const { id } = await params
 
-  const project = await prisma.project.findUnique({
-    where: { id },
-  });
+	const project = await prisma.project.findUnique({
+		where: { id },
+	})
 
-  if (!project) {
-    notFound();
-  }
+	if (!project) {
+		notFound()
+	}
 
-  if (
-    !can(session.user.id, "read", {
-      type: "project",
-      ownerId: project.userId,
-    })
-  ) {
-    notFound();
-  }
+	if (
+		!can(session.user.id, 'read', {
+			type: 'project',
+			ownerId: project.userId,
+		})
+	) {
+		notFound()
+	}
 
-  const rows = await prisma.task.findMany({
-    where: { projectId: id, userId: session.user.id },
-    orderBy: { updatedAt: "desc" },
-    include: { project: { select: { id: true, name: true } } },
-  });
+	const rows = await prisma.task.findMany({
+		where: { projectId: id, userId: session.user.id },
+		orderBy: { updatedAt: 'desc' },
+		include: { project: { select: { id: true, name: true } } },
+	})
 
-  const tasks: TaskListItem[] = rows.map((t) => ({
-    id: t.id,
-    title: t.title,
-    description: t.description,
-    status: t.status,
-    priority: t.priority,
-    dueDate: t.dueDate?.toISOString() ?? null,
-    projectId: t.projectId,
-    project: t.project,
-  }));
+	const tasks: TaskListItem[] = rows.map(t => ({
+		id: t.id,
+		title: t.title,
+		description: t.description,
+		status: t.status,
+		priority: t.priority,
+		dueDate: t.dueDate?.toISOString() ?? null,
+		projectId: t.projectId,
+		project: t.project,
+	}))
 
-  return (
-    <main className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-12">
-      <section className="flex items-start justify-between gap-4">
-        <div>
-          <p className="font-mono text-xs uppercase tracking-wider text-zinc-400">
-            Project
-          </p>
-          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900">
-            {project.name}
-          </h1>
-          <p className="mt-2 text-sm text-zinc-500">
-            仅项目所有者可访问；任务列表同样按用户隔离。
-          </p>
-        </div>
-        <CreateTaskSheet
-          projects={[{ id: project.id, name: project.name }]}
-          defaultProjectId={project.id}
-        />
-      </section>
+	return (
+		<main className='mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-12'>
+			<section className='flex items-start justify-between gap-4'>
+				<div>
+					<p className='font-mono text-xs uppercase tracking-wider text-zinc-400'>
+						Project
+					</p>
+					<h1 className='mt-1 text-2xl font-semibold tracking-tight text-zinc-900'>
+						{project.name}
+					</h1>
+					<p className='mt-2 text-sm text-zinc-500'>
+						仅项目所有者可访问；任务列表同样按用户隔离。
+					</p>
+				</div>
+				<CreateTaskSheet
+					projects={[{ id: project.id, name: project.name }]}
+					defaultProjectId={project.id}
+				/>
+			</section>
 
-      <TasksView
-        tasks={tasks}
-        projects={[{ id: project.id, name: project.name }]}
-        currentQuery={{
-          keyword: "",
-          status: "all",
-          projectId: project.id,
-          sort: "updated_desc",
-          dateFrom: "",
-          dateTo: "",
-          priority: "all",
-        }}
-      />
-    </main>
-  );
+			<TasksView
+				tasks={tasks}
+				projects={[{ id: project.id, name: project.name }]}
+				currentQuery={{
+					keyword: '',
+					status: 'all',
+					projectId: project.id,
+					sort: 'updated_desc',
+					dateFrom: '',
+					dateTo: '',
+					priority: 'all',
+					view: 'list',
+				}}
+			/>
+		</main>
+	)
 }