feat: 完成 P1 全部功能 + 修复 proxy 导出 + 切换 MySQL 端口至 14013
## P1 功能(20 项) - 站内消息系统、家长仪表盘、学生考勤管理 - Excel 导入导出、用户批量导入、成绩导出 - 排课规则+自动排课+课表调整 - 成绩趋势+对比分析、密码安全策略、速率限制 - 数据变更日志、文件预览+存储策略、全文检索 - 依赖审计集成 CI、数据库定时备份、E2E 测试完善 - 通知偏好管理 ## 基础设施修复 - src/proxy.ts: 将 middleware 导出重命名为 proxy(Next.js 16 要求) - .env: MySQL 端口从 13002 切换至 14013 - scripts/create-db.ts: 新增数据库初始化脚本 ## 架构文档同步 - 004_architecture_impact_map.md 和 005_architecture_data.json 完整记录所有新增表、模块、路由、权限、依赖关系
This commit is contained in:
117
src/modules/messaging/components/message-list.tsx
Normal file
117
src/modules/messaging/components/message-list.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { Mail, MailOpen, Plus, Send, Inbox } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import { usePermission } from "@/shared/hooks/use-permission"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
|
||||
import type { Message, MessageType } from "../types"
|
||||
|
||||
type Tab = "inbox" | "sent"
|
||||
|
||||
export function MessageList({
|
||||
messages,
|
||||
currentUserId,
|
||||
initialType = "inbox",
|
||||
}: {
|
||||
messages: Message[]
|
||||
currentUserId: string
|
||||
initialType?: MessageType
|
||||
}) {
|
||||
const [tab, setTab] = useState<Tab>(initialType === "sent" ? "sent" : "inbox")
|
||||
const { hasPermission } = usePermission()
|
||||
const canSend = hasPermission(Permissions.MESSAGE_SEND)
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (tab === "inbox") return messages.filter((m) => m.receiverId === currentUserId)
|
||||
return messages.filter((m) => m.senderId === currentUserId)
|
||||
}, [messages, tab, currentUserId])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="inbox" className="gap-2">
|
||||
<Inbox className="h-4 w-4" />
|
||||
Inbox
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="sent" className="gap-2">
|
||||
<Send className="h-4 w-4" />
|
||||
Sent
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
{canSend ? (
|
||||
<Button asChild>
|
||||
<Link href="/messages/compose">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Compose
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState
|
||||
title={tab === "inbox" ? "Inbox is empty" : "No sent messages"}
|
||||
description={
|
||||
tab === "inbox"
|
||||
? "You have no incoming messages yet."
|
||||
: "You have not sent any messages yet."
|
||||
}
|
||||
icon={Mail}
|
||||
className="h-auto border-none shadow-none"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filtered.map((m) => {
|
||||
const isReceived = m.receiverId === currentUserId
|
||||
const counterpart = isReceived ? m.senderName : m.receiverName
|
||||
const unread = isReceived && !m.isRead
|
||||
return (
|
||||
<Link key={m.id} href={`/messages/${m.id}`} className="block">
|
||||
<Card className={`transition-colors hover:bg-accent/50 ${unread ? "border-primary/40" : ""}`}>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
{unread ? (
|
||||
<Mail className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<MailOpen className="text-muted-foreground h-4 w-4" />
|
||||
)}
|
||||
<span className={`text-sm font-medium ${unread ? "text-primary" : ""}`}>
|
||||
{m.subject ?? "(no subject)"}
|
||||
</span>
|
||||
{unread ? <Badge variant="default" className="text-xs">New</Badge> : null}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{isReceived ? "From" : "To"}: {counterpart ?? "Unknown"}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-muted-foreground shrink-0 text-xs">
|
||||
{formatDate(m.createdAt)}
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
|
||||
{m.content}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user