优化详情与移动关键页视觉 Wave3（05-27-pc-detail-mobile-visual-wave3）
这个提交包含在：
@@ -8,16 +8,9 @@ import { PageHeader } from "../components/common/PageHeader";
|
||||
import { TableSkeleton } from "../components/common/TableSkeleton";
|
||||
import { Pagination } from "../components/common/Pagination";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { PageScaffold } from "../components/patterns/PageScaffold";
|
||||
import { resolveNotificationTargetLink } from "../lib/notificationLinks";
|
||||
import { resolveErrorMessage } from "../lib/resolveErrorMessage";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../components/ui/table";
|
||||
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
@@ -86,10 +79,10 @@ export function NotificationsPage() {
|
||||
const notificationItems = listQuery.data?.items ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageScaffold>
|
||||
<PageHeader
|
||||
title="通知"
|
||||
subtitle="站内通知与待办提醒。"
|
||||
subtitle="事件、待办和业务直达入口。"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
@@ -108,7 +101,7 @@ export function NotificationsPage() {
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="card-std p-6 space-y-4">
|
||||
<div className="card-std space-y-4 p-4 md:p-5">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center">
|
||||
<Tabs
|
||||
@@ -121,7 +114,7 @@ export function NotificationsPage() {
|
||||
})
|
||||
}
|
||||
>
|
||||
<TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
|
||||
<TabsList className="ops-command-bar__tabs !w-full md:!w-auto">
|
||||
<TabsTrigger data-testid="notifications-filter-all" value="all">
|
||||
全部
|
||||
</TabsTrigger>
|
||||
@@ -153,8 +146,9 @@ export function NotificationsPage() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-zinc-600">
|
||||
未读 {listQuery.data?.unreadCount ?? 0} 条
|
||||
<div className="detail-evidence-card text-sm">
|
||||
<span className="font-semibold text-zinc-900">未读 {listQuery.data?.unreadCount ?? 0}</span>
|
||||
<span className="ml-2 text-zinc-500">/ 共 {listQuery.data?.total ?? 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -174,12 +168,12 @@ export function NotificationsPage() {
|
||||
|
||||
{!listQuery.isLoading && !listQuery.isError ? (
|
||||
<>
|
||||
<div className="space-y-3 md:hidden">
|
||||
<div className="notification-inbox md:hidden">
|
||||
{notificationItems.length ? (
|
||||
notificationItems.map((item) => {
|
||||
const targetLink = resolveNotificationTargetLink(item);
|
||||
return (
|
||||
<div data-testid="notification-mobile-card" key={item.id} className="rounded-lg border border-zinc-200 bg-white p-4">
|
||||
<div data-testid="notification-mobile-card" key={item.id} className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-semibold text-zinc-900">{item.title}</div>
|
||||
@@ -217,68 +211,56 @@ export function NotificationsPage() {
|
||||
<div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="hidden rounded-lg border border-zinc-200 md:block">
|
||||
<Table data-testid="notifications-table">
|
||||
<TableHeader>
|
||||
<tr>
|
||||
<TableHead>标题</TableHead>
|
||||
<TableHead>时间</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead className="w-40">操作</TableHead>
|
||||
</tr>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{notificationItems.length ? (
|
||||
notificationItems.map((item) => {
|
||||
const targetLink = resolveNotificationTargetLink(item);
|
||||
return (
|
||||
<TableRow data-testid="notification-row" key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||||
{item.body ? (
|
||||
<div className="mt-1 text-xs text-zinc-500">{item.body}</div>
|
||||
) : null}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-zinc-600">
|
||||
{item.createdAt.slice(0, 19).replace("T", " ")}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-zinc-600">
|
||||
{item.readAt ? "已读" : "未读"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{targetLink ? (
|
||||
<Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
|
||||
<Link to={targetLink}>查看</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
{!item.readAt ? (
|
||||
<Button
|
||||
data-testid="notification-mark-read"
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="secondary"
|
||||
disabled={markReadMutation.isPending}
|
||||
onClick={() => markReadMutation.mutate(item.id)}
|
||||
>
|
||||
标为已读
|
||||
</Button>
|
||||
) : null}
|
||||
<div className="notification-inbox hidden md:block" data-testid="notifications-table">
|
||||
{notificationItems.length ? (
|
||||
notificationItems.map((item) => {
|
||||
const targetLink = resolveNotificationTargetLink(item);
|
||||
return (
|
||||
<article
|
||||
data-testid="notification-row"
|
||||
key={item.id}
|
||||
className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}
|
||||
>
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="font-semibold text-zinc-900">{item.title}</div>
|
||||
<span className={item.readAt ? "badge-neutral" : "badge-warning"}>
|
||||
{item.readAt ? "已读" : "未读"}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell className="py-3 text-zinc-500" colSpan={4}>
|
||||
暂无通知
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{item.body ? <div className="mt-1 text-sm text-zinc-500">{item.body}</div> : null}
|
||||
<div className="notification-row-card__meta mt-2">
|
||||
{item.createdAt.slice(0, 19).replace("T", " ")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-wrap gap-2">
|
||||
{targetLink ? (
|
||||
<Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
|
||||
<Link to={targetLink}>查看</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
{!item.readAt ? (
|
||||
<Button
|
||||
data-testid="notification-mark-read"
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="secondary"
|
||||
disabled={markReadMutation.isPending}
|
||||
onClick={() => markReadMutation.mutate(item.id)}
|
||||
>
|
||||
标为已读
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
@@ -294,6 +276,6 @@ export function NotificationsPage() {
|
||||
testIdPrefix="notifications"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageScaffold>
|
||||
);
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户