feat(app): add error/loading boundaries across all dashboard routes and new routes
- Add error.tsx and loading.tsx boundaries for admin, parent, student, teacher routes - Add admin announcements edit, audit-logs overview, curriculum-map, invitation-codes, permissions, questions, roles routes - Add admin elective detail and components, files, course-plans, users, scheduling boundaries - Add messages group-compose route - Add parent course-plans, elective, grades report-card, practice routes - Add student course-plans, elective detail, error-book dialogs, grades report-card, learning study-path, leave, schedule boundaries - Add teacher attendance report, classes boundaries, course-plans boundaries, elective, exams analytics/edit-rich/all/create/new, grades report-card, homework boundaries, leave, lesson-plans calendar - Add auth loading, onboarding loading, api cron
This commit is contained in:
@@ -1,11 +1,14 @@
|
||||
import { notFound } from "next/navigation"
|
||||
import type { Metadata } from "next"
|
||||
import type { JSX } from "react"
|
||||
import { Suspense } from "react"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
import { SectionErrorBoundary } from "@/shared/components/section-error-boundary"
|
||||
import { getMessageDetailPageData } from "@/modules/messaging/data-access"
|
||||
import { MessageDetail } from "@/modules/messaging/components/message-detail"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
@@ -14,6 +17,24 @@ export async function generateMetadata(): Promise<Metadata> {
|
||||
return { title: t("title.detail") }
|
||||
}
|
||||
|
||||
/**
|
||||
* P2-9: 消息详情骨架屏。
|
||||
*/
|
||||
function MessageDetailSkeleton(): JSX.Element {
|
||||
return (
|
||||
<div className="space-y-6" role="status" aria-label="Loading message">
|
||||
<Skeleton className="h-8 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-5/6" />
|
||||
<Skeleton className="h-4 w-4/5" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function MessageDetailPage({
|
||||
params,
|
||||
}: {
|
||||
@@ -27,7 +48,12 @@ export default async function MessageDetailPage({
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col p-8">
|
||||
<MessageDetail message={message} currentUserId={ctx.userId} />
|
||||
{/* P2-8 + P2-9: 详情区块 ErrorBoundary 包裹 */}
|
||||
<SectionErrorBoundary namespace="messages">
|
||||
<Suspense fallback={<MessageDetailSkeleton />}>
|
||||
<MessageDetail message={message} currentUserId={ctx.userId} />
|
||||
</Suspense>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,8 +3,10 @@ import type { JSX } from "react"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
import { getRecipients } from "@/modules/messaging/data-access"
|
||||
import { SectionErrorBoundary } from "@/shared/components/section-error-boundary"
|
||||
import { getRecipients, getMessageDrafts } from "@/modules/messaging/data-access"
|
||||
import { MessageCompose } from "@/modules/messaging/components/message-compose"
|
||||
import { MessageDraftList } from "@/modules/messaging/components/message-draft-list"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
@@ -25,7 +27,11 @@ export default async function ComposeMessagePage({
|
||||
const sp = await searchParams
|
||||
const t = await getTranslations("messages")
|
||||
|
||||
const recipients = await getRecipients(ctx.userId, ctx.dataScope)
|
||||
const [recipients, drafts] = await Promise.all([
|
||||
getRecipients(ctx.userId, ctx.dataScope),
|
||||
// P1-1: 获取草稿列表用于展示与恢复编辑
|
||||
getMessageDrafts(ctx.userId),
|
||||
])
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col p-8">
|
||||
@@ -34,12 +40,20 @@ export default async function ComposeMessagePage({
|
||||
<h2 className="text-2xl font-bold tracking-tight">{t("title.compose")}</h2>
|
||||
<p className="text-muted-foreground">{t("description.compose")}</p>
|
||||
</div>
|
||||
<MessageCompose
|
||||
recipients={recipients}
|
||||
parentMessageId={sp.parentId}
|
||||
defaultReceiverId={sp.receiverId}
|
||||
defaultSubject={sp.subject}
|
||||
/>
|
||||
{/* P2-8: 撰写表单区块独立 ErrorBoundary,失败不影响草稿列表 */}
|
||||
<SectionErrorBoundary namespace="messages">
|
||||
<MessageCompose
|
||||
recipients={recipients}
|
||||
parentMessageId={sp.parentId}
|
||||
defaultReceiverId={sp.receiverId}
|
||||
defaultSubject={sp.subject}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
{/* P2-8: 草稿列表区块独立 ErrorBoundary */}
|
||||
<SectionErrorBoundary namespace="messages">
|
||||
{/* P1-1: 草稿列表 - 允许用户查看、继续编辑、删除未发送的草稿 */}
|
||||
<MessageDraftList drafts={drafts} />
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
24
src/app/(dashboard)/messages/group-compose/error.tsx
Normal file
24
src/app/(dashboard)/messages/group-compose/error.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { AlertCircle } from "lucide-react"
|
||||
import { useTranslations } from "next-intl"
|
||||
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export default function GroupComposeMessageError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
const t = useTranslations("messages")
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
|
||||
<EmptyState
|
||||
icon={AlertCircle}
|
||||
title={t("error.loadFailed")}
|
||||
description={t("error.loadFailedDesc")}
|
||||
action={{
|
||||
label: t("error.retry"),
|
||||
onClick: () => reset(),
|
||||
}}
|
||||
className="border-none shadow-none h-auto"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/app/(dashboard)/messages/group-compose/loading.tsx
Normal file
40
src/app/(dashboard)/messages/group-compose/loading.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function GroupComposeLoading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col p-8">
|
||||
<div className="mx-auto w-full max-w-3xl space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
52
src/app/(dashboard)/messages/group-compose/page.tsx
Normal file
52
src/app/(dashboard)/messages/group-compose/page.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import type { Metadata } from "next"
|
||||
import type { JSX } from "react"
|
||||
import { notFound } from "next/navigation"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
import { SectionErrorBoundary } from "@/shared/components/section-error-boundary"
|
||||
import { getClassNamesByIds } from "@/modules/classes/data-access"
|
||||
|
||||
import { MessageGroupCompose } from "@/modules/messaging/components/message-group-compose"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations("messages")
|
||||
return {
|
||||
title: t("title.groupCompose"),
|
||||
description: t("description.groupCompose"),
|
||||
}
|
||||
}
|
||||
|
||||
export default async function GroupComposeMessagePage(): Promise<JSX.Element> {
|
||||
const ctx = await requirePermission(Permissions.MESSAGE_SEND)
|
||||
const t = await getTranslations("messages")
|
||||
|
||||
// P2-2: 群发仅限教师(class_taught DataScope);其他角色无权访问此页面
|
||||
if (ctx.dataScope.type !== "class_taught") {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const classIds = ctx.dataScope.classIds
|
||||
const classNameMap = await getClassNamesByIds(classIds)
|
||||
const classOptions = classIds.map((id) => ({
|
||||
id,
|
||||
name: classNameMap.get(id) ?? id,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col p-8">
|
||||
<div className="mx-auto w-full max-w-3xl space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">{t("title.groupCompose")}</h2>
|
||||
<p className="text-muted-foreground">{t("description.groupCompose")}</p>
|
||||
</div>
|
||||
<SectionErrorBoundary namespace="messages">
|
||||
<MessageGroupCompose classOptions={classOptions} />
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +1,16 @@
|
||||
import { Suspense } from "react"
|
||||
import type { JSX } from "react"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
import { getMessagesPageData } from "@/modules/messaging/data-access"
|
||||
import { MessageList } from "@/modules/messaging/components/message-list"
|
||||
import { SectionErrorBoundary } from "@/shared/components/section-error-boundary"
|
||||
import { getNotifications } from "@/modules/notifications/data-access"
|
||||
import { NotificationList } from "@/modules/notifications/components/notification-list"
|
||||
import { MessageListSection } from "@/modules/messaging/components/message-list-section"
|
||||
import { MessageListSkeleton } from "@/modules/messaging/components/message-list-skeleton"
|
||||
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
@@ -13,13 +19,40 @@ export async function generateMetadata() {
|
||||
return { title: t("title.list") }
|
||||
}
|
||||
|
||||
export default async function MessagesPage() {
|
||||
/**
|
||||
* P2-9: 通知列表区块骨架屏(Suspense fallback)。
|
||||
*/
|
||||
function NotificationListSkeleton(): JSX.Element {
|
||||
return (
|
||||
<div className="space-y-4" role="status" aria-label="Loading notifications">
|
||||
<Skeleton className="h-10 w-48" />
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Card key={i} aria-hidden="true">
|
||||
<CardHeader className="space-y-2 pb-3">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-1/2" />
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<Skeleton className="h-3 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* P2-9: 通知列表区块(Server Component,流式加载)。
|
||||
*/
|
||||
async function NotificationListSection({ userId }: { userId: string }): Promise<JSX.Element> {
|
||||
const result = await getNotifications(userId, { page: 1, pageSize: 20 })
|
||||
return <NotificationList notifications={result.items} />
|
||||
}
|
||||
|
||||
export default async function MessagesPage(): Promise<JSX.Element> {
|
||||
const t = await getTranslations("messages")
|
||||
const ctx = await requirePermission(Permissions.MESSAGE_READ)
|
||||
|
||||
const { messages: messagesResult, notifications: notificationsResult } =
|
||||
await getMessagesPageData(ctx.userId)
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div>
|
||||
@@ -29,9 +62,19 @@ export default async function MessagesPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<MessageList messages={messagesResult.items} currentUserId={ctx.userId} />
|
||||
{/* P2-8 + P2-9: 消息列表区块独立 Suspense + ErrorBoundary,局部失败不影响通知区块 */}
|
||||
<Suspense fallback={<MessageListSkeleton />}>
|
||||
<SectionErrorBoundary namespace="messages">
|
||||
<MessageListSection userId={ctx.userId} canGroupSend={ctx.dataScope.type === "class_taught"} />
|
||||
</SectionErrorBoundary>
|
||||
</Suspense>
|
||||
|
||||
<NotificationList notifications={notificationsResult.items} />
|
||||
{/* P2-8 + P2-9: 通知列表区块独立 Suspense + ErrorBoundary */}
|
||||
<Suspense fallback={<NotificationListSkeleton />}>
|
||||
<SectionErrorBoundary namespace="notifications">
|
||||
<NotificationListSection userId={ctx.userId} />
|
||||
</SectionErrorBoundary>
|
||||
</Suspense>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user