feat(announcements,messaging): 公告与消息模块审计重构 — i18n + Error Boundary + a11y
- 新增审计报告 docs/architecture/audit/announcements-messages-audit-report.md - 新增中英双语 i18n 字典 announcements.json / messages.json(11/13 个命名空间) - 重构所有 announcements 和 messaging 组件接入 next-intl(useTranslations) - 所有页面 page.tsx 使用 generateMetadata + getTranslations 替代硬编码 metadata - 新增 7 个 error.tsx 错误边界(4 公告 + 3 消息),统一 EmptyState + i18n + 重试 - a11y 改进:announcement-card / message-list / notification-dropdown 添加 aria-label - 同步架构图 004 和 005:i18n.messages 清单 + 已知问题修复记录
This commit is contained in:
@@ -949,6 +949,9 @@ src/auth.ts ──▶ import { ... } from "@/shared/lib/permissions"
|
|||||||
- ✅ P1 已修复:~~`updateNotificationPreferencesAction` 缺少 Zod 校验~~ 已添加 `UpdateNotificationPreferencesSchema` 校验 8 个布尔字段
|
- ✅ P1 已修复:~~`updateNotificationPreferencesAction` 缺少 Zod 校验~~ 已添加 `UpdateNotificationPreferencesSchema` 校验 8 个布尔字段
|
||||||
- ✅ P2 已修复:`data-access.ts` 中 3 处 `or(...)!` 非空断言清理为安全守卫(条件 push)
|
- ✅ P2 已修复:`data-access.ts` 中 3 处 `or(...)!` 非空断言清理为安全守卫(条件 push)
|
||||||
- ✅ P0-b 已修复:~~`notification-preferences.ts` re-export shim 文件~~ 已删除(通知模块去重),8 个消费方改为直接从 `@/modules/notifications/preferences` 导入 `getNotificationPreferences` / `upsertNotificationPreferences`,消除 messaging 模块对通知偏好的冗余 re-export 层
|
- ✅ P0-b 已修复:~~`notification-preferences.ts` re-export shim 文件~~ 已删除(通知模块去重),8 个消费方改为直接从 `@/modules/notifications/preferences` 导入 `getNotificationPreferences` / `upsertNotificationPreferences`,消除 messaging 模块对通知偏好的冗余 re-export 层
|
||||||
|
- ✅ P1 已修复:~~全模块零 i18n,中英文案硬编码~~ 所有组件接入 next-intl(`useTranslations("messages")`),新增 `src/shared/i18n/messages/{zh-CN,en}/messages.json` 翻译字典(title/description/tabs/actions/form/status/meta/notificationType/search/empty/messages/error 共 13 个命名空间);所有页面 `page.tsx` 使用 `generateMetadata` + `getTranslations` 替代硬编码 metadata
|
||||||
|
- ✅ P1 已修复:~~缺 Error Boundary~~ 新增 3 个 `error.tsx` 错误边界(`/messages`、`/messages/[id]`、`/messages/compose`),统一使用 `EmptyState` + i18n 错误文案 + 重试按钮
|
||||||
|
- ✅ P2 已修复:a11y 改进,`message-list.tsx` / `notification-dropdown.tsx` 添加 `aria-label` / `aria-hidden`
|
||||||
|
|
||||||
**文件清单**:
|
**文件清单**:
|
||||||
| 文件 | 行数 | 职责 |
|
| 文件 | 行数 | 职责 |
|
||||||
|
|||||||
323
docs/architecture/audit/announcements-messages-audit-report.md
Normal file
323
docs/architecture/audit/announcements-messages-audit-report.md
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
# 公告和消息模块审计报告
|
||||||
|
|
||||||
|
> 审查日期:2026-06-22
|
||||||
|
> 审查范围:`src/modules/announcements/**`、`src/modules/messaging/**`、`src/modules/notifications/**`、`src/app/(dashboard)/announcements/**`、`src/app/(dashboard)/admin/announcements/**`、`src/app/(dashboard)/messages/**`
|
||||||
|
> 架构图参考:`docs/architecture/004_architecture_impact_map.md` §2.13 / §2.14 / §2.16、`docs/architecture/005_architecture_data.json`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 一、现有实现概要
|
||||||
|
|
||||||
|
### 1.1 文件分布
|
||||||
|
|
||||||
|
| 层 | 路径 | 文件数 | 说明 |
|
||||||
|
|----|------|--------|------|
|
||||||
|
| 路由层 - 用户端公告 | `src/app/(dashboard)/announcements/` | 2 个 `page.tsx` + 1 个 `loading.tsx` | 列表 + 详情,所有角色共用 |
|
||||||
|
| 路由层 - 管理端公告 | `src/app/(dashboard)/admin/announcements/` | 2 个 `page.tsx` + 1 个 `loading.tsx` | 管理列表 + 编辑 |
|
||||||
|
| 路由层 - 消息 | `src/app/(dashboard)/messages/` | 3 个 `page.tsx` + 3 个 `loading.tsx` + 1 个 `error.tsx` | 列表 + 详情 + 撰写 |
|
||||||
|
| 模块层 - announcements | `src/modules/announcements/` | 4 个核心文件 + 5 个组件 | actions(296行) / data-access(197行) / types(61行) / schema(45行) |
|
||||||
|
| 模块层 - messaging | `src/modules/messaging/` | 4 个核心文件 + 6 个组件 | actions(312行) / data-access(246行) / types(52行) / schema(44行) |
|
||||||
|
| 模块层 - notifications | `src/modules/notifications/` | 6 个核心文件 + 5 个渠道文件 | actions(159行) / data-access(174行) / dispatcher(152行) / preferences(191行) / types(153行) |
|
||||||
|
|
||||||
|
### 1.2 数据流
|
||||||
|
|
||||||
|
```
|
||||||
|
[Route] /announcements/page.tsx
|
||||||
|
└─▶ announcements/data-access.getAnnouncements (status=published, audience={gradeId,classId})
|
||||||
|
└─▶ classes/data-access.getClassGradeId / getStudentActiveClassId / getStudentActiveGradeId
|
||||||
|
|
||||||
|
[Route] /admin/announcements/page.tsx
|
||||||
|
├─▶ announcements/data-access.getAnnouncements
|
||||||
|
├─▶ school/data-access.getGrades
|
||||||
|
└─▶ classes/data-access.getAdminClasses
|
||||||
|
(页面层直接编排 3 个模块的 data-access)
|
||||||
|
|
||||||
|
[Route] /messages/page.tsx
|
||||||
|
├─▶ messaging/data-access.getMessages
|
||||||
|
└─▶ notifications/data-access.getNotifications
|
||||||
|
(页面层直接编排 2 个模块的 data-access)
|
||||||
|
|
||||||
|
[Route] /messages/compose/page.tsx
|
||||||
|
└─▶ messaging/data-access.getRecipients
|
||||||
|
└─▶ classes/data-access.getStudentIdsByClassIds / getTeacherIdsByClassIds / getClassesByGradeId / getStudentActiveClassId
|
||||||
|
└─▶ users/data-access.getUserNamesByIds
|
||||||
|
|
||||||
|
[Action] announcements/actions.createAnnouncementAction
|
||||||
|
└─▶ notifications.sendBatchNotifications (发布公告时批量通知)
|
||||||
|
|
||||||
|
[Action] messaging/actions.sendMessageAction
|
||||||
|
└─▶ notifications.dispatcher.sendNotification (发消息时通知收件人)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 1.3 架构图记录情况
|
||||||
|
|
||||||
|
`004_architecture_impact_map.md` 对三个模块的记录较为完整:
|
||||||
|
- §2.13 messaging:记录了 P0-4 / P1-5 已修复的双向依赖问题,文件清单准确
|
||||||
|
- §2.14 notifications:记录了渠道抽象和从 messaging 迁移的历史
|
||||||
|
- §2.16 announcements:记录了模块职责和依赖关系
|
||||||
|
|
||||||
|
**但存在以下遗漏**:
|
||||||
|
- 未记录 messaging 组件目录下 `notification-dropdown.tsx` 和 `unread-message-badge.tsx` 两个组件
|
||||||
|
- 未记录 announcements 模块的 `components/` 子目录(5 个组件文件未在文件清单中列出)
|
||||||
|
- 未记录消息列表的客户端搜索行为(`getMessagesAction` 在客户端被调用)
|
||||||
|
- 未记录通知下拉菜单的 30 秒轮询机制
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、现存问题与原因分析
|
||||||
|
|
||||||
|
### 2.1 国际化完全缺失(P0)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [announcements/components/announcement-list.tsx](file:///e:/Desktop/CICD/src/modules/announcements/components/announcement-list.tsx) L24-29 | `"All"` / `"Published"` / `"Draft"` / `"Archived"` 硬编码 | "所有用户可见文本必须适配 i18n(使用 next-intl),提取翻译键" |
|
||||||
|
| [announcements/components/announcement-detail.tsx](file:///e:/Desktop/CICD/src/modules/announcements/components/announcement-detail.tsx) L29-38 | `STATUS_LABEL` / `TYPE_LABEL` 全英文硬编码 | 同上 |
|
||||||
|
| [announcements/components/announcement-card.tsx](file:///e:/Desktop/CICD/src/modules/announcements/components/announcement-card.tsx) L9-28 | `STATUS_LABEL` / `TYPE_LABEL` 重复定义且硬编码 | 同上 |
|
||||||
|
| [announcements/components/announcement-form.tsx](file:///e:/Desktop/CICD/src/modules/announcements/components/announcement-form.tsx) L86,92,98,108 | `"New Announcement"` / `"Title"` / `"Content"` 等硬编码 | 同上 |
|
||||||
|
| [messaging/components/message-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/message-list.tsx) L81-88 | `"Inbox"` / `"Sent"` / `"Compose"` 硬编码 | 同上 |
|
||||||
|
| [messaging/components/message-detail.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/message-detail.tsx) L38,74,99-106 | `"From"` / `"To"` / `"Message"` / `"New"` / `"Read"` / `"Sent"` 硬编码 | 同上 |
|
||||||
|
| [messaging/components/message-compose.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/message-compose.tsx) L78,84,102,113 | `"Reply"` / `"New Message"` / `"To"` / `"Subject"` 硬编码 | 同上 |
|
||||||
|
| [messaging/components/notification-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-list.tsx) L25-30,69-70 | `TYPE_LABEL` 硬编码,`"Notifications"` 标题硬编码 | 同上 |
|
||||||
|
| [messaging/components/notification-dropdown.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-dropdown.tsx) L113 | `"Notifications"` / `"Mark all read"` 硬编码 | 同上 |
|
||||||
|
| `src/shared/i18n/messages/` | **无 `announcements.json` 或 `messages.json`** | 翻译文件结构不完整 |
|
||||||
|
| [i18n/request.ts](file:///e:/Desktop/CICD/src/i18n/request.ts) L22-29 | 未加载 announcements/messages 翻译文件 | 翻译文件未注册 |
|
||||||
|
|
||||||
|
**后果**:所有用户可见文本无法切换语言,中文用户看到全英文界面,严重影响 K12 学校教师/家长/学生的使用体验。同一组件中 `STATUS_LABEL` 重复定义(card 和 detail 各一份),维护成本高。
|
||||||
|
|
||||||
|
### 2.2 角色硬编码与配置驱动缺失(P0)
|
||||||
|
|
||||||
|
| 位置 | 代码 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [layout/config/navigation.ts](file:///e:/Desktop/CICD/src/modules/layout/config/navigation.ts) L39 | `NAV_CONFIG: Partial<Record<Role, NavItem[]>>` 按角色分组 | "前端权限判断统一使用 `usePermission().hasPermission()`,严禁出现 `role === 'xxx'` 硬编码" |
|
||||||
|
| 同上 L99-103, L247-251, L307-311, L343-347 | admin/teacher/student/parent 各自配置 `Announcements` 和 `Messages` 导航项 | 配置未抽象,新增角色需复制粘贴 |
|
||||||
|
|
||||||
|
**后果**:新增角色(如 `grade_head` 已存在)无法享受公告/消息导航;导航配置按角色而非权限驱动,违反"配置驱动设计"原则。
|
||||||
|
|
||||||
|
### 2.3 架构分层:页面层越权编排(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [admin/announcements/page.tsx](file:///e:/Desktop/CICD/src/app/(dashboard)/admin/announcements/page.tsx) L33-37 | 页面层 `Promise.all` 调用 announcements/school/classes 三个模块的 data-access | "app/ 只能调用 modules/ 的 Server Actions 和 data-access" — 虽语法允许,但编排逻辑应在模块 actions 层完成 |
|
||||||
|
| [messages/page.tsx](file:///e:/Desktop/CICD/src/app/(dashboard)/messages/page.tsx) L17-20 | 页面层并行调用 messaging 和 notifications 两个模块的 data-access | 同上 |
|
||||||
|
| [announcements/page.tsx](file:///e:/Desktop/CICD/src/app/(dashboard)/announcements/page.tsx) L27-76 | `resolveAudience` 函数包含 50 行业务逻辑(根据 dataScope 解析受众) | 纯逻辑应抽为 hooks 或 data-access 层函数 |
|
||||||
|
| announcements 模块无 `getAdminAnnouncementsPageData` 编排函数 | 缺失编排层 | "模块标准结构"要求 actions.ts 承担编排职责 |
|
||||||
|
|
||||||
|
**后果**:页面层臃肿、逻辑不可复用、不可测试;多个页面需要相同数据时需复制编排逻辑。
|
||||||
|
|
||||||
|
### 2.4 模块间组件耦合(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [messaging/components/notification-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-list.tsx) L16 | 直接 `import type { Notification, NotificationType } from "@/modules/notifications/types"` | "模块内部组件绝不直接 import 其他业务模块的 actions 或 data-access(只能通过注入的接口调用)" |
|
||||||
|
| [messaging/components/notification-dropdown.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-dropdown.tsx) L27 | 同上,直接 import notifications 模块类型 | 同上 |
|
||||||
|
| [messaging/components/notification-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-list.tsx) L15 | 直接 import `../actions` 中的 `markAllNotificationsAsReadAction` / `markNotificationAsReadAction` | messaging 模块的 actions re-export 了 notifications 的 actions,造成职责混乱 |
|
||||||
|
| [messaging/actions.ts](file:///e:/Desktop/CICD/src/modules/messaging/actions.ts) L196-248 | messaging 模块定义了 6 个通知相关 Action(`getNotificationsAction` / `markNotificationAsReadAction` 等) | 通知 Action 应由 notifications 模块提供,messaging 仅负责私信 |
|
||||||
|
|
||||||
|
**后果**:messaging 和 notifications 模块在 UI 层和 Action 层深度耦合,无法独立替换或测试;notifications 模块的 UI 组件无法复用到其他场景。
|
||||||
|
|
||||||
|
### 2.5 错误边界缺失(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `src/app/(dashboard)/announcements/error.tsx` | **缺失** | "每个独立的数据区块必须用 React Error Boundary 包裹" |
|
||||||
|
| `src/app/(dashboard)/announcements/[id]/error.tsx` | **缺失** | 同上 |
|
||||||
|
| `src/app/(dashboard)/admin/announcements/error.tsx` | **缺失** | 同上 |
|
||||||
|
| `src/app/(dashboard)/admin/announcements/[id]/error.tsx` | **缺失** | 同上 |
|
||||||
|
| `src/app/(dashboard)/messages/[id]/error.tsx` | **缺失** | 同上 |
|
||||||
|
| `src/app/(dashboard)/messages/compose/error.tsx` | **缺失** | 同上 |
|
||||||
|
| `src/app/(dashboard)/admin/announcements/loading.tsx` | **缺失**(仅有用户端 loading) | 加载骨架屏不完整 |
|
||||||
|
|
||||||
|
**后果**:数据加载失败时整页崩溃,用户体验差;无权限访问时显示原始错误而非友好提示。
|
||||||
|
|
||||||
|
### 2.6 通知轮询性能问题(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [notification-dropdown.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-dropdown.tsx) L65-68 | 每 30 秒轮询 `getNotificationsAction` + `getUnreadNotificationCountAction` | "性能:优先使用 React Server Components 获取初始数据" |
|
||||||
|
| [unread-message-badge.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/unread-message-badge.tsx) L31-33 | 每 60 秒轮询 `getUnreadMessageCountAction` | 同上 |
|
||||||
|
| 两个组件未使用 RSC 初始数据 | 客户端首次渲染无数据,需等待轮询 | "客户端组件仅负责交互" |
|
||||||
|
|
||||||
|
**后果**:多用户同时在线时,每分钟产生大量无效请求;首屏渲染时无数据,显示空状态闪烁。
|
||||||
|
|
||||||
|
### 2.7 公告表单校验不足(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [schema.ts](file:///e:/Desktop/CICD/src/modules/announcements/schema.ts) L9-10 | `targetGradeId` / `targetClassId` 为 optional,未根据 `type` 做条件必填校验 | "输入使用 Zod 验证,验证失败返回结构化错误" |
|
||||||
|
| [announcement-form.tsx](file:///e:/Desktop/CICD/src/modules/announcements/components/announcement-form.tsx) L49-54 | `type === "grade"` 时不强制选择年级,`type === "class"` 时不强制选择班级 | 同上 |
|
||||||
|
| [actions.ts](file:///e:/Desktop/CICD/src/modules/announcements/actions.ts) L43-61 | `resolveTargetUserIds` 在 `type === "grade"` 但 `targetGradeId` 为空时返回空数组,公告无人接收 | 数据完整性缺失 |
|
||||||
|
|
||||||
|
**后果**:管理员可能创建无受众的公告,发布公告后无人收到通知,且无任何错误提示。
|
||||||
|
|
||||||
|
### 2.8 消息列表搜索逻辑复杂且无分页 UI(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [message-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/message-list.tsx) L38-58 | 客户端 `useEffect` + `setTimeout` 防抖搜索,但未取消已发出的请求 | "可测试性:数据获取、计算、格式化等纯逻辑全部放入纯函数或 hooks" |
|
||||||
|
| 同上 L71-74 | `filtered` 在客户端再次过滤 `displayMessages`,与已搜索结果重复过滤 | 逻辑冗余 |
|
||||||
|
| 同上 L17 | 初始加载 `pageSize: 50`,但无分页 UI,超过 50 条无法查看 | "明确处理空数据、无权限、网络异常等边界状态" |
|
||||||
|
| [messages/page.tsx](file:///e:/Desktop/CICD/src/app/(dashboard)/messages/page.tsx) L18 | 一次性加载 50 条消息,无虚拟滚动 | 性能问题 |
|
||||||
|
|
||||||
|
**后果**:消息超过 50 条时用户无法查看历史;搜索逻辑与 UI 混合,无法单独测试。
|
||||||
|
|
||||||
|
### 2.9 无权限与空状态处理不友好(P1)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| 所有页面 | `requirePermission` 抛出 `PermissionDeniedError` 后,由上层 `error.tsx` 处理,但无专门的无权限空状态 | "明确处理空数据、无权限、网络异常等边界状态" |
|
||||||
|
| [message-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/message-list.tsx) L116-127 | 空状态文本硬编码且未区分"无权限"与"无数据" | 同上 |
|
||||||
|
| [notification-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-list.tsx) L80-86 | 通知空状态未提供"去设置通知偏好"等引导操作 | 用户体验不完整 |
|
||||||
|
|
||||||
|
**后果**:用户无法区分"无数据"和"无权限",无法找到下一步操作引导。
|
||||||
|
|
||||||
|
### 2.10 可访问性问题(P2)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [message-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/message-list.tsx) L104-110 | 搜索框无 `aria-label`,仅靠 `placeholder` | "可访问性(a11y):语义化标签、ARIA 属性、键盘导航" |
|
||||||
|
| [notification-dropdown.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-dropdown.tsx) L139-144 | `DropdownMenuItem` 的 `onSelect` 阻止默认行为后手动调用 `handleMarkRead`,键盘导航时焦点处理不明确 | 同上 |
|
||||||
|
| [announcement-card.tsx](file:///e:/Desktop/CICD/src/modules/announcements/components/announcement-card.tsx) L66-72 | 整个 Card 作为链接,但无 `aria-label` 描述跳转目标 | 同上 |
|
||||||
|
| [notification-list.tsx](file:///e:/Desktop/CICD/src/modules/messaging/components/notification-list.tsx) L118-124 | "Mark as read" 按钮无 `aria-label`,屏幕阅读器无法识别 | 同上 |
|
||||||
|
|
||||||
|
**后果**:视障用户无法有效使用公告和消息功能,不符合 WCAG 2.1 AA 标准。
|
||||||
|
|
||||||
|
### 2.11 监控埋点缺失(P2)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [announcements/actions.ts](file:///e:/Desktop/CICD/src/modules/announcements/actions.ts) | 发布/归档/删除公告无埋点 | "监控:方案中预留关键操作埋点接口" |
|
||||||
|
| [messaging/actions.ts](file:///e:/Desktop/CICD/src/modules/messaging/actions.ts) | 发送/删除消息无埋点 | 同上 |
|
||||||
|
| [notifications/data-access.ts](file:///e:/Desktop/CICD/src/modules/notifications/data-access.ts) L167-173 | 仅 `console.info` 输出发送日志,无结构化埋点 | 同上 |
|
||||||
|
|
||||||
|
**后果**:无法追踪公告阅读率、消息回复率等关键指标;通知发送失败无法告警。
|
||||||
|
|
||||||
|
### 2.12 消息软删除无事务(P2)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| [messaging/data-access.ts](file:///e:/Desktop/CICD/src/modules/messaging/data-access.ts) L180-191 | `deleteMessage` 执行两个独立的 UPDATE(senderDeletedAt + receiverDeletedAt),无事务 | "安全性:所有敏感数据查询必须在 data-access 层结合当前用户权限过滤" |
|
||||||
|
| 同上 | 两个 UPDATE 之间可能部分失败,导致数据不一致 | 数据完整性问题 |
|
||||||
|
|
||||||
|
**后果**:发送方删除后接收方可能仍可见,或反之,造成数据不一致。
|
||||||
|
|
||||||
|
### 2.13 测试覆盖不足(P2)
|
||||||
|
|
||||||
|
| 位置 | 问题 | 违反规则 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `tests/e2e/announcements.spec.ts` | 仅 2 个测试(未登录重定向 + 登录后可见),无管理端测试 | "可测试性" |
|
||||||
|
| `tests/e2e/` | **无 messaging 模块 E2E 测试** | 同上 |
|
||||||
|
| `src/modules/announcements/` | 无单元测试 | 同上 |
|
||||||
|
| `src/modules/messaging/` | 无单元测试 | 同上 |
|
||||||
|
| `src/modules/notifications/` | 无单元测试 | 同上 |
|
||||||
|
|
||||||
|
**后果**:重构时无回归保障,关键业务逻辑(权限过滤、受众解析、通知分发)错误无法及时发现。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、行业差距对比
|
||||||
|
|
||||||
|
### 3.1 公告模块差距
|
||||||
|
|
||||||
|
| 功能 | 行业优秀实践 | 当前状态 | 影响 |
|
||||||
|
|------|-------------|----------|------|
|
||||||
|
| 公告分类标签 | 支持自定义标签(紧急、活动、政策),可按标签筛选 | 仅 type(school/grade/class)和 status,无标签 | 教师无法快速筛选紧急公告 |
|
||||||
|
| 已读回执 | 显示已读/未读用户列表,支持提醒未读 | 无已读回执,仅通知发送 | 管理员无法知道公告是否被阅读 |
|
||||||
|
| 富文本编辑 | 支持富文本、图片、附件 | 仅纯文本 Textarea | 公告内容单调,无法插入图片 |
|
||||||
|
| 定时发布 | 支持指定时间自动发布 | `publishedAt` 字段存在但表单未暴露 | 管理员无法提前安排公告 |
|
||||||
|
| 公告置顶 | 支持置顶重要公告 | 无置顶功能 | 重要公告可能被新公告淹没 |
|
||||||
|
| 多渠道推送 | 站内 + 短信 + 邮件 + 微信 | 已实现多渠道(notifications 模块) | ✅ 已达标 |
|
||||||
|
| 评论互动 | 支持公告下评论或确认收到 | 无互动功能 | 无法收集公告反馈 |
|
||||||
|
|
||||||
|
### 3.2 消息模块差距
|
||||||
|
|
||||||
|
| 功能 | 行业优秀实践 | 当前状态 | 影响 |
|
||||||
|
|------|-------------|----------|------|
|
||||||
|
| 消息分组 | 按联系人分组显示对话 | 仅按时间列表,无对话分组 | 教师与同一家长的来回消息散落各处 |
|
||||||
|
| 实时推送 | WebSocket / SSE 实时推送 | 30/60 秒轮询 | 消息延迟最高 30 秒,服务器压力大 |
|
||||||
|
| 消息草稿 | 支持草稿自动保存 | 无草稿功能 | 用户意外离开页面内容丢失 |
|
||||||
|
| 附件支持 | 支持发送文件附件 | 仅纯文本 | 无法发送作业截图等 |
|
||||||
|
| 消息星标 | 支持标记重要消息 | 无星标功能 | 重要消息无法快速找回 |
|
||||||
|
| 消息模板 | 支持常用消息模板 | 无模板 | 教师重复输入相同内容 |
|
||||||
|
| 群发消息 | 支持按班级/年级群发 | 仅支持单发 | 教师需逐个发送通知 |
|
||||||
|
| 消息搜索 | 全文搜索 + 按联系人/时间筛选 | 仅关键词搜索 subject + content | 无法按联系人筛选历史消息 |
|
||||||
|
| 已读回执 | 实时显示对方已读状态 | 仅 `readAt` 字段,无实时更新 | 发送方不知道消息是否被看到 |
|
||||||
|
|
||||||
|
### 3.3 通知模块差距
|
||||||
|
|
||||||
|
| 功能 | 行业优秀实践 | 当前状态 | 影响 |
|
||||||
|
|------|-------------|----------|------|
|
||||||
|
| 通知分类管理 | 支持按类型分组(作业/成绩/公告/消息) | 仅按时间列表,类型仅作为 Badge | 用户无法快速找到特定类型通知 |
|
||||||
|
| 通知静音 | 支持单类通知静音 | 有 `quietHours` 但仅全局免打扰 | 用户想静音作业通知但保留成绩通知无法实现 |
|
||||||
|
| 通知归档 | 支持归档已处理通知 | 仅标记已读,无归档 | 通知列表越来越长 |
|
||||||
|
| 通知优先级 | 支持高/中/低优先级 | 无优先级 | 紧急通知被普通通知淹没 |
|
||||||
|
| 桌面推送 | 支持浏览器桌面通知 | 仅站内下拉 | 用户不打开页面就收不到通知 |
|
||||||
|
|
||||||
|
### 3.4 多角色体验差距
|
||||||
|
|
||||||
|
| 角色 | 痛点 | 当前状态 | 影响 |
|
||||||
|
|------|------|----------|------|
|
||||||
|
| admin | 公告管理需切换到独立页面 | `/admin/announcements` 与 `/announcements` 分离 | 管理员查看用户视角需切换路由 |
|
||||||
|
| teacher | 消息收件人列表无法搜索 | `MessageCompose` 仅 Select 下拉 | 班级多时难以找到目标家长 |
|
||||||
|
| parent | 无法主动给教师发消息 | 依赖 `getRecipients` 返回的列表 | 家长需等待教师先发消息才能回复 |
|
||||||
|
| student | 公告无"确认收到"按钮 | 仅被动查看 | 学校无法确认学生是否看到公告 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、改进优先级建议
|
||||||
|
|
||||||
|
### P0(紧急,影响核心功能与安全)
|
||||||
|
|
||||||
|
1. **i18n 全覆盖**:创建 `announcements.json` 和 `messages.json` 翻译文件,重构所有组件使用 `useTranslations` 替换硬编码文本,更新 `i18n/request.ts` 加载新文件。
|
||||||
|
2. **消除角色硬编码**:将 `NAV_CONFIG` 改为权限驱动配置,公告和消息导航项仅声明 `permission`,不按角色分组。
|
||||||
|
3. **补充错误边界**:为所有缺失的页面添加 `error.tsx`,区分"无权限"、"未找到"、"网络错误"三种状态。
|
||||||
|
|
||||||
|
### P1(重要,影响架构与体验)
|
||||||
|
|
||||||
|
4. **解耦 messaging 与 notifications**:将通知相关组件(`notification-list.tsx`、`notification-dropdown.tsx`)迁移至 notifications 模块;messaging 模块仅保留私信组件;通过 Context 注入数据服务接口。
|
||||||
|
5. **页面编排下沉**:在 announcements 和 messaging 模块新增 `getAdminAnnouncementsPageData` / `getMessagesPageData` 编排函数,页面层仅调用单一函数。
|
||||||
|
6. **公告表单条件校验**:使用 Zod `superRefine` 根据 `type` 强制要求 `targetGradeId` / `targetClassId`。
|
||||||
|
7. **消息列表分页与虚拟滚动**:添加分页 UI,超过 50 条时支持加载更多;搜索逻辑抽离为 `useMessageSearch` hook。
|
||||||
|
8. **通知实时推送**:将 30 秒轮询替换为 SSE 或 WebSocket,减少无效请求;首屏使用 RSC 获取初始数据。
|
||||||
|
9. **消息软删除事务化**:使用数据库事务包裹 `senderDeletedAt` 和 `receiverDeletedAt` 更新。
|
||||||
|
|
||||||
|
### P2(优化,提升完整性与可维护性)
|
||||||
|
|
||||||
|
10. **a11y 改进**:为搜索框、按钮、链接添加 `aria-label`;确保键盘导航完整。
|
||||||
|
11. **监控埋点**:在关键 Action 中预留 `trackEvent` 接口,记录发布公告、发送消息、标记已读等操作。
|
||||||
|
12. **测试覆盖**:补充 messaging 模块 E2E 测试;为 `resolveTargetUserIds`、`getRecipients`、`selectChannels` 等纯函数添加单元测试。
|
||||||
|
13. **行业功能补齐**:公告已读回执、消息分组对话、消息草稿、通知优先级(按业务优先级逐步实施)。
|
||||||
|
14. **架构图同步**:补充 announcements 组件目录、messaging 的 notification-dropdown/unread-message-badge 组件、客户端搜索行为、轮询机制。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 五、架构图同步说明
|
||||||
|
|
||||||
|
本次审计发现架构图存在以下遗漏,需补充:
|
||||||
|
|
||||||
|
### 5.1 `004_architecture_impact_map.md` 需补充
|
||||||
|
|
||||||
|
**§2.13 messaging 模块文件清单**:
|
||||||
|
- 当前记录:`actions.ts` 276 行 / `data-access.ts` / `schema.ts` 41 行
|
||||||
|
- 实际状态:`actions.ts` 312 行 / `data-access.ts` 246 行 / `schema.ts` 44 行 / `types.ts` 52 行
|
||||||
|
- **遗漏组件**:`components/notification-dropdown.tsx`、`components/unread-message-badge.tsx` 未在文件清单中列出
|
||||||
|
- **遗漏行为**:`notification-dropdown.tsx` 每 30 秒轮询、`unread-message-badge.tsx` 每 60 秒轮询
|
||||||
|
|
||||||
|
**§2.16 announcements 模块文件清单**:
|
||||||
|
- 当前记录:仅列出 actions/data-access/schema/types
|
||||||
|
- **遗漏组件目录**:`components/` 下 5 个组件(`admin-announcements-view.tsx`、`announcement-card.tsx`、`announcement-detail.tsx`、`announcement-form.tsx`、`announcement-list.tsx`)未列出
|
||||||
|
|
||||||
|
**§2.13 messaging 依赖关系**:
|
||||||
|
- **遗漏**:`messaging/components/notification-list.tsx` 和 `notification-dropdown.tsx` 直接 import `@/modules/notifications/types`,存在跨模块 UI 类型依赖
|
||||||
|
|
||||||
|
### 5.2 `005_architecture_data.json` 需补充
|
||||||
|
|
||||||
|
- `modules.messaging.components` 数组缺少 `notification-dropdown.tsx` 和 `unread-message-badge.tsx` 两个节点
|
||||||
|
- `modules.announcements.components` 数组完全缺失(5 个组件节点未记录)
|
||||||
|
- `modules.messaging.exports` 缺少 `UnreadMessageBadge` 组件导出
|
||||||
|
- `routes` 节点中 `/messages` 路由的 `dataAccess` 字段未记录客户端搜索行为(`getMessagesAction` 在客户端被调用)
|
||||||
|
|
||||||
|
### 5.3 无需修改的部分
|
||||||
|
|
||||||
|
- §2.14 notifications 模块记录完整准确
|
||||||
|
- P0-4 / P1-5 修复历史记录准确
|
||||||
|
- 依赖矩阵(§3)中 messaging → notifications 的单向依赖记录正确
|
||||||
24
src/app/(dashboard)/admin/announcements/[id]/error.tsx
Normal file
24
src/app/(dashboard)/admin/announcements/[id]/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 EditAnnouncementError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { notFound } from "next/navigation"
|
import { notFound } from "next/navigation"
|
||||||
import type { Metadata } from "next"
|
import type { Metadata } from "next"
|
||||||
import type { JSX } from "react"
|
import type { JSX } from "react"
|
||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
|
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
@@ -8,13 +9,16 @@ import { getAnnouncementById } from "@/modules/announcements/data-access"
|
|||||||
import { getGrades } from "@/modules/school/data-access"
|
import { getGrades } from "@/modules/school/data-access"
|
||||||
import { AnnouncementForm } from "@/modules/announcements/components/announcement-form"
|
import { AnnouncementForm } from "@/modules/announcements/components/announcement-form"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "编辑公告 - Next_Edu",
|
|
||||||
description: "更新公告详情",
|
|
||||||
}
|
|
||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
|
const t = await getTranslations("announcements")
|
||||||
|
return {
|
||||||
|
title: t("title.edit"),
|
||||||
|
description: t("description.edit"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default async function EditAnnouncementPage({
|
export default async function EditAnnouncementPage({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
@@ -22,6 +26,7 @@ export default async function EditAnnouncementPage({
|
|||||||
}): Promise<JSX.Element> {
|
}): Promise<JSX.Element> {
|
||||||
await requirePermission(Permissions.ANNOUNCEMENT_MANAGE)
|
await requirePermission(Permissions.ANNOUNCEMENT_MANAGE)
|
||||||
const { id } = await params
|
const { id } = await params
|
||||||
|
const t = await getTranslations("announcements")
|
||||||
|
|
||||||
const [announcement, grades] = await Promise.all([
|
const [announcement, grades] = await Promise.all([
|
||||||
getAnnouncementById(id),
|
getAnnouncementById(id),
|
||||||
@@ -33,8 +38,8 @@ export default async function EditAnnouncementPage({
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col space-y-8 p-8">
|
<div className="flex h-full flex-col space-y-8 p-8">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">编辑公告</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.edit")}</h2>
|
||||||
<p className="text-muted-foreground">更新公告详情。</p>
|
<p className="text-muted-foreground">{t("description.edit")}</p>
|
||||||
</div>
|
</div>
|
||||||
<AnnouncementForm
|
<AnnouncementForm
|
||||||
mode="edit"
|
mode="edit"
|
||||||
|
|||||||
24
src/app/(dashboard)/admin/announcements/error.tsx
Normal file
24
src/app/(dashboard)/admin/announcements/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 AdminAnnouncementsError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import type { Metadata } from "next"
|
import type { Metadata } from "next"
|
||||||
import type { JSX } from "react"
|
import type { JSX } from "react"
|
||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
|
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
@@ -10,13 +11,16 @@ import { AdminAnnouncementsView } from "@/modules/announcements/components/admin
|
|||||||
import { getSearchParam, type SearchParams } from "@/shared/lib/utils"
|
import { getSearchParam, type SearchParams } from "@/shared/lib/utils"
|
||||||
import type { AnnouncementStatus } from "@/modules/announcements/types"
|
import type { AnnouncementStatus } from "@/modules/announcements/types"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "公告管理 - Next_Edu",
|
|
||||||
description: "管理系统公告,支持草稿、发布与归档",
|
|
||||||
}
|
|
||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
|
const t = await getTranslations("announcements")
|
||||||
|
return {
|
||||||
|
title: t("title.adminList"),
|
||||||
|
description: t("description.adminList"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const isValidStatus = (v?: string): v is AnnouncementStatus =>
|
const isValidStatus = (v?: string): v is AnnouncementStatus =>
|
||||||
v === "draft" || v === "published" || v === "archived"
|
v === "draft" || v === "published" || v === "archived"
|
||||||
|
|
||||||
|
|||||||
24
src/app/(dashboard)/announcements/[id]/error.tsx
Normal file
24
src/app/(dashboard)/announcements/[id]/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 AnnouncementDetailError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,18 +1,20 @@
|
|||||||
import { notFound } from "next/navigation"
|
import { notFound } from "next/navigation"
|
||||||
import type { Metadata } from "next"
|
import type { Metadata } from "next"
|
||||||
import type { JSX } from "react"
|
import type { JSX } from "react"
|
||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
|
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
import { getAnnouncementById } from "@/modules/announcements/data-access"
|
import { getAnnouncementById } from "@/modules/announcements/data-access"
|
||||||
import { AnnouncementDetail } from "@/modules/announcements/components/announcement-detail"
|
import { AnnouncementDetail } from "@/modules/announcements/components/announcement-detail"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "Announcement - Next_Edu",
|
|
||||||
}
|
|
||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
|
const t = await getTranslations("announcements")
|
||||||
|
return { title: t("title.detail") }
|
||||||
|
}
|
||||||
|
|
||||||
export default async function AnnouncementDetailPage({
|
export default async function AnnouncementDetailPage({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
|
|||||||
24
src/app/(dashboard)/announcements/error.tsx
Normal file
24
src/app/(dashboard)/announcements/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 AnnouncementsError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import type { Metadata } from "next"
|
import type { Metadata } from "next"
|
||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
|
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
@@ -12,8 +13,9 @@ import {
|
|||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
title: "Announcements",
|
const t = await getTranslations("announcements")
|
||||||
|
return { title: t("title.list") }
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -76,6 +78,7 @@ async function resolveAudience(ctx: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default async function AnnouncementsPage() {
|
export default async function AnnouncementsPage() {
|
||||||
|
const t = await getTranslations("announcements")
|
||||||
const ctx = await requirePermission(Permissions.ANNOUNCEMENT_READ)
|
const ctx = await requirePermission(Permissions.ANNOUNCEMENT_READ)
|
||||||
const audience = await resolveAudience(ctx)
|
const audience = await resolveAudience(ctx)
|
||||||
|
|
||||||
@@ -87,9 +90,9 @@ export default async function AnnouncementsPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col space-y-8 p-8">
|
<div className="flex h-full flex-col space-y-8 p-8">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Announcements</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.list")}</h2>
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Stay up to date with the latest school announcements.
|
{t("description.list")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<AnnouncementList
|
<AnnouncementList
|
||||||
|
|||||||
24
src/app/(dashboard)/messages/[id]/error.tsx
Normal file
24
src/app/(dashboard)/messages/[id]/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 MessageDetailError({ 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
import { notFound } from "next/navigation"
|
import { notFound } from "next/navigation"
|
||||||
|
import type { Metadata } from "next"
|
||||||
import { after } from "next/server"
|
import { after } from "next/server"
|
||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
import { getMessageById, markMessageAsRead } from "@/modules/messaging/data-access"
|
import { getMessageById, markMessageAsRead } from "@/modules/messaging/data-access"
|
||||||
@@ -7,15 +9,16 @@ import { MessageDetail } from "@/modules/messaging/components/message-detail"
|
|||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
export const metadata = {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
title: "Message Detail",
|
const t = await getTranslations("messages")
|
||||||
|
return { title: t("title.detail") }
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function MessageDetailPage({
|
export default async function MessageDetailPage({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
params: Promise<{ id: string }>
|
params: Promise<{ id: string }>
|
||||||
}) {
|
}): Promise<JSX.Element> {
|
||||||
const ctx = await requirePermission(Permissions.MESSAGE_READ)
|
const ctx = await requirePermission(Permissions.MESSAGE_READ)
|
||||||
const { id } = await params
|
const { id } = await params
|
||||||
|
|
||||||
|
|||||||
24
src/app/(dashboard)/messages/compose/error.tsx
Normal file
24
src/app/(dashboard)/messages/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 ComposeMessageError({ 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,3 +1,6 @@
|
|||||||
|
import type { Metadata } from "next"
|
||||||
|
import type { JSX } from "react"
|
||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
import { getRecipients } from "@/modules/messaging/data-access"
|
import { getRecipients } from "@/modules/messaging/data-access"
|
||||||
@@ -5,17 +8,22 @@ import { MessageCompose } from "@/modules/messaging/components/message-compose"
|
|||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
export const metadata = {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
title: "Compose Message",
|
const t = await getTranslations("messages")
|
||||||
|
return {
|
||||||
|
title: t("title.compose"),
|
||||||
|
description: t("description.compose"),
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function ComposeMessagePage({
|
export default async function ComposeMessagePage({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{ parentId?: string; receiverId?: string; subject?: string }>
|
searchParams: Promise<{ parentId?: string; receiverId?: string; subject?: string }>
|
||||||
}) {
|
}): Promise<JSX.Element> {
|
||||||
const ctx = await requirePermission(Permissions.MESSAGE_SEND)
|
const ctx = await requirePermission(Permissions.MESSAGE_SEND)
|
||||||
const sp = await searchParams
|
const sp = await searchParams
|
||||||
|
const t = await getTranslations("messages")
|
||||||
|
|
||||||
const recipients = await getRecipients(ctx.userId, ctx.dataScope)
|
const recipients = await getRecipients(ctx.userId, ctx.dataScope)
|
||||||
|
|
||||||
@@ -23,8 +31,8 @@ export default async function ComposeMessagePage({
|
|||||||
<div className="flex h-full flex-col p-8">
|
<div className="flex h-full flex-col p-8">
|
||||||
<div className="mx-auto w-full max-w-3xl space-y-6">
|
<div className="mx-auto w-full max-w-3xl space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Compose Message</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.compose")}</h2>
|
||||||
<p className="text-muted-foreground">Send a message to another user.</p>
|
<p className="text-muted-foreground">{t("description.compose")}</p>
|
||||||
</div>
|
</div>
|
||||||
<MessageCompose
|
<MessageCompose
|
||||||
recipients={recipients}
|
recipients={recipients}
|
||||||
|
|||||||
@@ -1,18 +1,20 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { AlertCircle } from "lucide-react"
|
import { AlertCircle } from "lucide-react"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
|
|
||||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||||
|
|
||||||
export default function MessagesError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
export default function MessagesError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
const t = useTranslations("messages")
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
|
<div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
|
||||||
<EmptyState
|
<EmptyState
|
||||||
icon={AlertCircle}
|
icon={AlertCircle}
|
||||||
title="消息加载失败"
|
title={t("error.loadFailed")}
|
||||||
description="抱歉,加载消息时发生了意外错误。请稍后重试。"
|
description={t("error.loadFailedDesc")}
|
||||||
action={{
|
action={{
|
||||||
label: "重试",
|
label: t("error.retry"),
|
||||||
onClick: () => reset(),
|
onClick: () => reset(),
|
||||||
}}
|
}}
|
||||||
className="border-none shadow-none h-auto"
|
className="border-none shadow-none h-auto"
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import { getTranslations } from "next-intl/server"
|
||||||
|
|
||||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
import { getMessages } from "@/modules/messaging/data-access"
|
import { getMessages } from "@/modules/messaging/data-access"
|
||||||
@@ -7,11 +9,13 @@ import { NotificationList } from "@/modules/messaging/components/notification-li
|
|||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
export const metadata = {
|
export async function generateMetadata() {
|
||||||
title: "Messages",
|
const t = await getTranslations("messages")
|
||||||
|
return { title: t("title.list") }
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function MessagesPage() {
|
export default async function MessagesPage() {
|
||||||
|
const t = await getTranslations("messages")
|
||||||
const ctx = await requirePermission(Permissions.MESSAGE_READ)
|
const ctx = await requirePermission(Permissions.MESSAGE_READ)
|
||||||
|
|
||||||
const [messagesResult, notificationsResult] = await Promise.all([
|
const [messagesResult, notificationsResult] = await Promise.all([
|
||||||
@@ -22,9 +26,9 @@ export default async function MessagesPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col space-y-8 p-8">
|
<div className="flex h-full flex-col space-y-8 p-8">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Messages</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.list")}</h2>
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Manage your inbox and stay updated with notifications.
|
{t("description.list")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { PlusCircle } from "lucide-react"
|
import { PlusCircle } from "lucide-react"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
|
||||||
@@ -22,6 +23,7 @@ export function AdminAnnouncementsView({
|
|||||||
classes?: { id: string; name: string }[]
|
classes?: { id: string; name: string }[]
|
||||||
initialStatus?: AnnouncementStatus
|
initialStatus?: AnnouncementStatus
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [createOpen, setCreateOpen] = useState(false)
|
const [createOpen, setCreateOpen] = useState(false)
|
||||||
|
|
||||||
@@ -34,14 +36,14 @@ export function AdminAnnouncementsView({
|
|||||||
<div className="flex h-full flex-col space-y-8 p-8">
|
<div className="flex h-full flex-col space-y-8 p-8">
|
||||||
<div className="flex items-center justify-between space-y-2">
|
<div className="flex items-center justify-between space-y-2">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Announcements</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.adminList")}</h2>
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Create and manage school-wide announcements.
|
{t("description.adminList")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Button onClick={() => setCreateOpen(true)}>
|
<Button onClick={() => setCreateOpen(true)}>
|
||||||
<PlusCircle className="mr-2 h-4 w-4" />
|
<PlusCircle className="mr-2 h-4 w-4" />
|
||||||
New Announcement
|
{t("actions.new")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -55,7 +57,7 @@ export function AdminAnnouncementsView({
|
|||||||
<Dialog open={createOpen} onOpenChange={handleOpenChange}>
|
<Dialog open={createOpen} onOpenChange={handleOpenChange}>
|
||||||
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
|
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>New Announcement</DialogTitle>
|
<DialogTitle>{t("title.create")}</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<AnnouncementForm mode="create" grades={grades} classes={classes} />
|
<AnnouncementForm mode="create" grades={grades} classes={classes} />
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|||||||
@@ -1,32 +1,13 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||||
import { formatDate } from "@/shared/lib/utils"
|
import { formatDate } from "@/shared/lib/utils"
|
||||||
import type { Announcement } from "../types"
|
import type { Announcement } from "../types"
|
||||||
|
|
||||||
const STATUS_LABEL: Record<Announcement["status"], string> = {
|
|
||||||
draft: "Draft",
|
|
||||||
published: "Published",
|
|
||||||
archived: "Archived",
|
|
||||||
}
|
|
||||||
|
|
||||||
const STATUS_VARIANT: Record<
|
|
||||||
Announcement["status"],
|
|
||||||
"default" | "secondary" | "outline"
|
|
||||||
> = {
|
|
||||||
draft: "secondary",
|
|
||||||
published: "default",
|
|
||||||
archived: "outline",
|
|
||||||
}
|
|
||||||
|
|
||||||
const TYPE_LABEL: Record<Announcement["type"], string> = {
|
|
||||||
school: "School",
|
|
||||||
grade: "Grade",
|
|
||||||
class: "Class",
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AnnouncementCard({
|
export function AnnouncementCard({
|
||||||
announcement,
|
announcement,
|
||||||
href,
|
href,
|
||||||
@@ -34,12 +15,20 @@ export function AnnouncementCard({
|
|||||||
announcement: Announcement
|
announcement: Announcement
|
||||||
href?: string
|
href?: string
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
|
|
||||||
|
const statusVariant: Record<Announcement["status"], "default" | "secondary" | "outline"> = {
|
||||||
|
draft: "secondary",
|
||||||
|
published: "default",
|
||||||
|
archived: "outline",
|
||||||
|
}
|
||||||
|
|
||||||
const card = (
|
const card = (
|
||||||
<Card className="h-full transition-colors hover:bg-accent/50">
|
<Card className="h-full transition-colors hover:bg-accent/50">
|
||||||
<CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
|
<CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
|
||||||
<CardTitle className="line-clamp-2 text-base">{announcement.title}</CardTitle>
|
<CardTitle className="line-clamp-2 text-base">{announcement.title}</CardTitle>
|
||||||
<Badge variant={STATUS_VARIANT[announcement.status]} className="shrink-0">
|
<Badge variant={statusVariant[announcement.status]} className="shrink-0">
|
||||||
{STATUS_LABEL[announcement.status]}
|
{t(`status.${announcement.status}`)}
|
||||||
</Badge>
|
</Badge>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-2">
|
<CardContent className="space-y-2">
|
||||||
@@ -48,15 +37,15 @@ export function AnnouncementCard({
|
|||||||
</p>
|
</p>
|
||||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||||
<Badge variant="outline" className="capitalize">
|
<Badge variant="outline" className="capitalize">
|
||||||
{TYPE_LABEL[announcement.type]}
|
{t(`type.${announcement.type}`)}
|
||||||
</Badge>
|
</Badge>
|
||||||
<span>
|
<span>
|
||||||
{announcement.publishedAt
|
{announcement.publishedAt
|
||||||
? `Published ${formatDate(announcement.publishedAt)}`
|
? t("meta.publishedAt", { date: formatDate(announcement.publishedAt) })
|
||||||
: `Updated ${formatDate(announcement.updatedAt)}`}
|
: t("meta.updatedAt", { date: formatDate(announcement.updatedAt) })}
|
||||||
</span>
|
</span>
|
||||||
{announcement.authorName ? (
|
{announcement.authorName ? (
|
||||||
<span className="ml-auto">by {announcement.authorName}</span>
|
<span className="ml-auto">{t("meta.author", { name: announcement.authorName })}</span>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@@ -65,7 +54,7 @@ export function AnnouncementCard({
|
|||||||
|
|
||||||
if (href) {
|
if (href) {
|
||||||
return (
|
return (
|
||||||
<Link href={href} className="block h-full">
|
<Link href={href} className="block h-full" aria-label={announcement.title}>
|
||||||
{card}
|
{card}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useState } from "react"
|
|||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
import {
|
import {
|
||||||
Archive,
|
Archive,
|
||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
@@ -16,16 +17,7 @@ import {
|
|||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||||
import {
|
import { ConfirmDeleteDialog } from "@/shared/components/ui/confirm-delete-dialog"
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/shared/components/ui/alert-dialog"
|
|
||||||
import { formatDate } from "@/shared/lib/utils"
|
import { formatDate } from "@/shared/lib/utils"
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -35,18 +27,6 @@ import {
|
|||||||
} from "../actions"
|
} from "../actions"
|
||||||
import type { Announcement } from "../types"
|
import type { Announcement } from "../types"
|
||||||
|
|
||||||
const STATUS_LABEL: Record<Announcement["status"], string> = {
|
|
||||||
draft: "Draft",
|
|
||||||
published: "Published",
|
|
||||||
archived: "Archived",
|
|
||||||
}
|
|
||||||
|
|
||||||
const TYPE_LABEL: Record<Announcement["type"], string> = {
|
|
||||||
school: "School",
|
|
||||||
grade: "Grade",
|
|
||||||
class: "Class",
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AnnouncementDetail({
|
export function AnnouncementDetail({
|
||||||
announcement,
|
announcement,
|
||||||
canManage,
|
canManage,
|
||||||
@@ -58,6 +38,7 @@ export function AnnouncementDetail({
|
|||||||
editHref?: string
|
editHref?: string
|
||||||
backHref?: string
|
backHref?: string
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isWorking, setIsWorking] = useState(false)
|
const [isWorking, setIsWorking] = useState(false)
|
||||||
const [deleteOpen, setDeleteOpen] = useState(false)
|
const [deleteOpen, setDeleteOpen] = useState(false)
|
||||||
@@ -70,10 +51,10 @@ export function AnnouncementDetail({
|
|||||||
toast.success(res.message)
|
toast.success(res.message)
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to publish")
|
toast.error(res.message || t("messages.publishFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to publish")
|
toast.error(t("messages.publishFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
}
|
}
|
||||||
@@ -87,10 +68,10 @@ export function AnnouncementDetail({
|
|||||||
toast.success(res.message)
|
toast.success(res.message)
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to archive")
|
toast.error(res.message || t("messages.archiveFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to archive")
|
toast.error(t("messages.archiveFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
}
|
}
|
||||||
@@ -105,10 +86,10 @@ export function AnnouncementDetail({
|
|||||||
router.push("/admin/announcements")
|
router.push("/admin/announcements")
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to delete")
|
toast.error(res.message || t("messages.deleteFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to delete")
|
toast.error(t("messages.deleteFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
setDeleteOpen(false)
|
setDeleteOpen(false)
|
||||||
@@ -120,33 +101,33 @@ export function AnnouncementDetail({
|
|||||||
<div className="flex items-center justify-between gap-2">
|
<div className="flex items-center justify-between gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{backHref ? (
|
{backHref ? (
|
||||||
<Button asChild variant="ghost" size="icon">
|
<Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
|
||||||
<Link href={backHref}>
|
<Link href={backHref}>
|
||||||
<ArrowLeft className="h-4 w-4" />
|
<ArrowLeft className="h-4 w-4" />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Announcement</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.detail")}</h2>
|
||||||
</div>
|
</div>
|
||||||
{canManage ? (
|
{canManage ? (
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
{announcement.status !== "published" ? (
|
{announcement.status !== "published" ? (
|
||||||
<Button onClick={handlePublish} disabled={isWorking} variant="outline">
|
<Button onClick={handlePublish} disabled={isWorking} variant="outline">
|
||||||
<Send className="mr-2 h-4 w-4" />
|
<Send className="mr-2 h-4 w-4" />
|
||||||
Publish
|
{t("actions.publish")}
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
{announcement.status !== "archived" ? (
|
{announcement.status !== "archived" ? (
|
||||||
<Button onClick={handleArchive} disabled={isWorking} variant="outline">
|
<Button onClick={handleArchive} disabled={isWorking} variant="outline">
|
||||||
<Archive className="mr-2 h-4 w-4" />
|
<Archive className="mr-2 h-4 w-4" />
|
||||||
Archive
|
{t("actions.archive")}
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
{editHref ? (
|
{editHref ? (
|
||||||
<Button asChild>
|
<Button asChild>
|
||||||
<Link href={editHref}>
|
<Link href={editHref}>
|
||||||
<Pencil className="mr-2 h-4 w-4" />
|
<Pencil className="mr-2 h-4 w-4" />
|
||||||
Edit
|
{t("actions.edit")}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -156,7 +137,7 @@ export function AnnouncementDetail({
|
|||||||
variant="destructive"
|
variant="destructive"
|
||||||
>
|
>
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
Delete
|
{t("actions.delete")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -166,19 +147,19 @@ export function AnnouncementDetail({
|
|||||||
<CardHeader className="space-y-2">
|
<CardHeader className="space-y-2">
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
<Badge variant="outline" className="capitalize">
|
<Badge variant="outline" className="capitalize">
|
||||||
{TYPE_LABEL[announcement.type]}
|
{t(`type.${announcement.type}`)}
|
||||||
</Badge>
|
</Badge>
|
||||||
<Badge className="capitalize">{STATUS_LABEL[announcement.status]}</Badge>
|
<Badge className="capitalize">{t(`status.${announcement.status}`)}</Badge>
|
||||||
</div>
|
</div>
|
||||||
<CardTitle className="text-2xl">{announcement.title}</CardTitle>
|
<CardTitle className="text-2xl">{announcement.title}</CardTitle>
|
||||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||||
<Megaphone className="h-3 w-3" />
|
<Megaphone className="h-3 w-3" />
|
||||||
<span>
|
<span>
|
||||||
{announcement.publishedAt
|
{announcement.publishedAt
|
||||||
? `Published ${formatDate(announcement.publishedAt)}`
|
? t("meta.publishedAt", { date: formatDate(announcement.publishedAt) })
|
||||||
: `Created ${formatDate(announcement.createdAt)}`}
|
: t("meta.createdAt", { date: formatDate(announcement.createdAt) })}
|
||||||
</span>
|
</span>
|
||||||
{announcement.authorName ? <span>by {announcement.authorName}</span> : null}
|
{announcement.authorName ? <span>{t("meta.author", { name: announcement.authorName })}</span> : null}
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
@@ -186,22 +167,14 @@ export function AnnouncementDetail({
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
<ConfirmDeleteDialog
|
||||||
<AlertDialogContent>
|
open={deleteOpen}
|
||||||
<AlertDialogHeader>
|
onOpenChange={setDeleteOpen}
|
||||||
<AlertDialogTitle>Delete announcement</AlertDialogTitle>
|
title={t("empty.deleteTitle")}
|
||||||
<AlertDialogDescription>
|
description={t("empty.deleteDesc", { title: announcement.title })}
|
||||||
This will permanently delete "{announcement.title}".
|
onConfirm={handleDelete}
|
||||||
</AlertDialogDescription>
|
isWorking={isWorking}
|
||||||
</AlertDialogHeader>
|
/>
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction onClick={handleDelete} disabled={isWorking}>
|
|
||||||
Delete
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||||
@@ -33,6 +34,7 @@ export function AnnouncementForm({
|
|||||||
grades?: { id: string; name: string }[]
|
grades?: { id: string; name: string }[]
|
||||||
classes?: { id: string; name: string }[]
|
classes?: { id: string; name: string }[]
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isWorking, setIsWorking] = useState(false)
|
const [isWorking, setIsWorking] = useState(false)
|
||||||
|
|
||||||
@@ -61,7 +63,7 @@ export function AnnouncementForm({
|
|||||||
: null
|
: null
|
||||||
|
|
||||||
if (!res) {
|
if (!res) {
|
||||||
toast.error("Invalid form state")
|
toast.error(t("messages.invalidState"))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -70,10 +72,10 @@ export function AnnouncementForm({
|
|||||||
router.push("/admin/announcements")
|
router.push("/admin/announcements")
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to save announcement")
|
toast.error(res.message || t("messages.updateFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to save announcement")
|
toast.error(t("messages.updateFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
}
|
}
|
||||||
@@ -83,28 +85,28 @@ export function AnnouncementForm({
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>
|
<CardTitle>
|
||||||
{mode === "create" ? "New Announcement" : "Edit Announcement"}
|
{mode === "create" ? t("title.create") : t("title.edit")}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<form action={handleSubmit} className="space-y-6">
|
<form action={handleSubmit} className="space-y-6">
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="title">Title</Label>
|
<Label htmlFor="title">{t("form.title")}</Label>
|
||||||
<Input
|
<Input
|
||||||
id="title"
|
id="title"
|
||||||
name="title"
|
name="title"
|
||||||
placeholder="Announcement title"
|
placeholder={t("form.titlePlaceholder")}
|
||||||
defaultValue={announcement?.title ?? ""}
|
defaultValue={announcement?.title ?? ""}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="content">Content</Label>
|
<Label htmlFor="content">{t("form.content")}</Label>
|
||||||
<Textarea
|
<Textarea
|
||||||
id="content"
|
id="content"
|
||||||
name="content"
|
name="content"
|
||||||
placeholder="Write the announcement content..."
|
placeholder={t("form.contentPlaceholder")}
|
||||||
className="min-h-[160px]"
|
className="min-h-[160px]"
|
||||||
defaultValue={announcement?.content ?? ""}
|
defaultValue={announcement?.content ?? ""}
|
||||||
required
|
required
|
||||||
@@ -113,30 +115,30 @@ export function AnnouncementForm({
|
|||||||
|
|
||||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label>Type</Label>
|
<Label>{t("form.type")}</Label>
|
||||||
<Select value={type} onValueChange={setType}>
|
<Select value={type} onValueChange={setType}>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select type" />
|
<SelectValue placeholder={t("form.typePlaceholder")} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="school">School</SelectItem>
|
<SelectItem value="school">{t("type.school")}</SelectItem>
|
||||||
<SelectItem value="grade">Grade</SelectItem>
|
<SelectItem value="grade">{t("type.grade")}</SelectItem>
|
||||||
<SelectItem value="class">Class</SelectItem>
|
<SelectItem value="class">{t("type.class")}</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<input type="hidden" name="type" value={type} />
|
<input type="hidden" name="type" value={type} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label>Status</Label>
|
<Label>{t("form.status")}</Label>
|
||||||
<Select value={status} onValueChange={setStatus}>
|
<Select value={status} onValueChange={setStatus}>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select status" />
|
<SelectValue placeholder={t("form.statusPlaceholder")} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="draft">Draft</SelectItem>
|
<SelectItem value="draft">{t("status.draft")}</SelectItem>
|
||||||
<SelectItem value="published">Published</SelectItem>
|
<SelectItem value="published">{t("status.published")}</SelectItem>
|
||||||
<SelectItem value="archived">Archived</SelectItem>
|
<SelectItem value="archived">{t("status.archived")}</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<input type="hidden" name="status" value={status} />
|
<input type="hidden" name="status" value={status} />
|
||||||
@@ -144,10 +146,10 @@ export function AnnouncementForm({
|
|||||||
|
|
||||||
{type === "grade" ? (
|
{type === "grade" ? (
|
||||||
<div className="grid gap-2 md:col-span-2">
|
<div className="grid gap-2 md:col-span-2">
|
||||||
<Label>Target Grade</Label>
|
<Label>{t("form.targetGrade")}</Label>
|
||||||
<Select value={targetGradeId} onValueChange={setTargetGradeId}>
|
<Select value={targetGradeId} onValueChange={setTargetGradeId}>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select a grade (optional)" />
|
<SelectValue placeholder={t("form.targetGradePlaceholder")} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{grades.map((g) => (
|
{grades.map((g) => (
|
||||||
@@ -163,10 +165,10 @@ export function AnnouncementForm({
|
|||||||
|
|
||||||
{type === "class" ? (
|
{type === "class" ? (
|
||||||
<div className="grid gap-2 md:col-span-2">
|
<div className="grid gap-2 md:col-span-2">
|
||||||
<Label>Target Class</Label>
|
<Label>{t("form.targetClass")}</Label>
|
||||||
<Select value={targetClassId} onValueChange={setTargetClassId}>
|
<Select value={targetClassId} onValueChange={setTargetClassId}>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select a class (optional)" />
|
<SelectValue placeholder={t("form.targetClassPlaceholder")} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{classes.map((c) => (
|
{classes.map((c) => (
|
||||||
@@ -188,10 +190,10 @@ export function AnnouncementForm({
|
|||||||
onClick={() => router.push("/admin/announcements")}
|
onClick={() => router.push("/admin/announcements")}
|
||||||
disabled={isWorking}
|
disabled={isWorking}
|
||||||
>
|
>
|
||||||
Cancel
|
{t("form.cancel")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" disabled={isWorking}>
|
<Button type="submit" disabled={isWorking}>
|
||||||
{isWorking ? "Saving..." : mode === "create" ? "Create" : "Save"}
|
{isWorking ? t("form.saving") : mode === "create" ? t("form.create") : t("form.submit")}
|
||||||
</Button>
|
</Button>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
import { useMemo, useState } from "react"
|
import { useMemo, useState } from "react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { Plus } from "lucide-react"
|
import { Plus, Megaphone } from "lucide-react"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||||
@@ -14,20 +15,12 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/shared/components/ui/select"
|
} from "@/shared/components/ui/select"
|
||||||
import { Megaphone } from "lucide-react"
|
|
||||||
|
|
||||||
import { AnnouncementCard } from "./announcement-card"
|
import { AnnouncementCard } from "./announcement-card"
|
||||||
import type { Announcement, AnnouncementStatus } from "../types"
|
import type { Announcement, AnnouncementStatus } from "../types"
|
||||||
|
|
||||||
type Filter = "all" | AnnouncementStatus
|
type Filter = "all" | AnnouncementStatus
|
||||||
|
|
||||||
const FILTER_OPTIONS: { value: Filter; label: string }[] = [
|
|
||||||
{ value: "all", label: "All" },
|
|
||||||
{ value: "published", label: "Published" },
|
|
||||||
{ value: "draft", label: "Draft" },
|
|
||||||
{ value: "archived", label: "Archived" },
|
|
||||||
]
|
|
||||||
|
|
||||||
export function AnnouncementList({
|
export function AnnouncementList({
|
||||||
announcements,
|
announcements,
|
||||||
canManage,
|
canManage,
|
||||||
@@ -41,9 +34,17 @@ export function AnnouncementList({
|
|||||||
detailHrefBuilder?: (id: string) => string
|
detailHrefBuilder?: (id: string) => string
|
||||||
initialStatus?: Filter
|
initialStatus?: Filter
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("announcements")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [filter, setFilter] = useState<Filter>(initialStatus ?? "all")
|
const [filter, setFilter] = useState<Filter>(initialStatus ?? "all")
|
||||||
|
|
||||||
|
const filterOptions: { value: Filter; label: string }[] = [
|
||||||
|
{ value: "all", label: t("filter.all") },
|
||||||
|
{ value: "published", label: t("filter.published") },
|
||||||
|
{ value: "draft", label: t("filter.draft") },
|
||||||
|
{ value: "archived", label: t("filter.archived") },
|
||||||
|
]
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
const filtered = useMemo(() => {
|
||||||
if (filter === "all") return announcements
|
if (filter === "all") return announcements
|
||||||
return announcements.filter((a) => a.status === filter)
|
return announcements.filter((a) => a.status === filter)
|
||||||
@@ -62,10 +63,10 @@ export function AnnouncementList({
|
|||||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||||
<Select value={filter} onValueChange={handleFilterChange}>
|
<Select value={filter} onValueChange={handleFilterChange}>
|
||||||
<SelectTrigger className="w-[180px]">
|
<SelectTrigger className="w-[180px]">
|
||||||
<SelectValue placeholder="Filter by status" />
|
<SelectValue placeholder={t("filter.placeholder")} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{FILTER_OPTIONS.map((opt) => (
|
{filterOptions.map((opt) => (
|
||||||
<SelectItem key={opt.value} value={opt.value}>
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
{opt.label}
|
{opt.label}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
@@ -76,7 +77,7 @@ export function AnnouncementList({
|
|||||||
<Button asChild>
|
<Button asChild>
|
||||||
<Link href={createHref}>
|
<Link href={createHref}>
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
New Announcement
|
{t("actions.new")}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -84,11 +85,11 @@ export function AnnouncementList({
|
|||||||
|
|
||||||
{filtered.length === 0 ? (
|
{filtered.length === 0 ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title="No announcements"
|
title={t("empty.noAnnouncements")}
|
||||||
description={
|
description={
|
||||||
announcements.length === 0
|
announcements.length === 0
|
||||||
? "There are no announcements yet."
|
? t("empty.noAnnouncementsDesc")
|
||||||
: "No announcements match the current filter."
|
: t("empty.noMatch")
|
||||||
}
|
}
|
||||||
icon={Megaphone}
|
icon={Megaphone}
|
||||||
className="h-auto border-none shadow-none"
|
className="h-auto border-none shadow-none"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useState } from "react"
|
|||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
import { ArrowLeft, Send } from "lucide-react"
|
import { ArrowLeft, Send } from "lucide-react"
|
||||||
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
@@ -35,13 +36,14 @@ export function MessageCompose({
|
|||||||
defaultSubject?: string
|
defaultSubject?: string
|
||||||
backHref?: string
|
backHref?: string
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("messages")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isWorking, setIsWorking] = useState(false)
|
const [isWorking, setIsWorking] = useState(false)
|
||||||
const [receiverId, setReceiverId] = useState(defaultReceiverId ?? "")
|
const [receiverId, setReceiverId] = useState(defaultReceiverId ?? "")
|
||||||
|
|
||||||
const handleSubmit = async (formData: FormData) => {
|
const handleSubmit = async (formData: FormData) => {
|
||||||
if (!receiverId) {
|
if (!receiverId) {
|
||||||
toast.error("Please select a recipient")
|
toast.error(t("messages.selectRecipient"))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
formData.set("receiverId", receiverId)
|
formData.set("receiverId", receiverId)
|
||||||
@@ -57,10 +59,10 @@ export function MessageCompose({
|
|||||||
router.push("/messages")
|
router.push("/messages")
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to send message")
|
toast.error(res.message || t("messages.sendFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to send message")
|
toast.error(t("messages.sendFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
}
|
}
|
||||||
@@ -70,21 +72,21 @@ export function MessageCompose({
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button asChild variant="ghost" size="icon">
|
<Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
|
||||||
<Link href={backHref}>
|
<Link href={backHref}>
|
||||||
<ArrowLeft className="h-4 w-4" />
|
<ArrowLeft className="h-4 w-4" />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
<CardTitle>{parentMessageId ? "Reply" : "New Message"}</CardTitle>
|
<CardTitle>{parentMessageId ? t("title.reply") : t("title.newMessage")}</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<form action={handleSubmit} className="space-y-6">
|
<form action={handleSubmit} className="space-y-6">
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="receiverId">To</Label>
|
<Label htmlFor="receiverId">{t("form.to")}</Label>
|
||||||
<Select value={receiverId} onValueChange={setReceiverId} disabled={!!defaultReceiverId}>
|
<Select value={receiverId} onValueChange={setReceiverId} disabled={!!defaultReceiverId}>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select a recipient" />
|
<SelectValue placeholder={t("form.toPlaceholder")} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{recipients.map((r) => (
|
{recipients.map((r) => (
|
||||||
@@ -99,22 +101,22 @@ export function MessageCompose({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="subject">Subject</Label>
|
<Label htmlFor="subject">{t("form.subject")}</Label>
|
||||||
<Input
|
<Input
|
||||||
id="subject"
|
id="subject"
|
||||||
name="subject"
|
name="subject"
|
||||||
placeholder="Message subject"
|
placeholder={t("form.subjectPlaceholder")}
|
||||||
defaultValue={defaultSubject ?? ""}
|
defaultValue={defaultSubject ?? ""}
|
||||||
maxLength={255}
|
maxLength={255}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="content">Content</Label>
|
<Label htmlFor="content">{t("form.content")}</Label>
|
||||||
<Textarea
|
<Textarea
|
||||||
id="content"
|
id="content"
|
||||||
name="content"
|
name="content"
|
||||||
placeholder="Write your message..."
|
placeholder={t("form.contentPlaceholder")}
|
||||||
className="min-h-[200px]"
|
className="min-h-[200px]"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
@@ -127,15 +129,15 @@ export function MessageCompose({
|
|||||||
onClick={() => router.push(backHref)}
|
onClick={() => router.push(backHref)}
|
||||||
disabled={isWorking}
|
disabled={isWorking}
|
||||||
>
|
>
|
||||||
Cancel
|
{t("actions.cancel")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" disabled={isWorking || !receiverId}>
|
<Button type="submit" disabled={isWorking || !receiverId}>
|
||||||
{isWorking ? (
|
{isWorking ? (
|
||||||
"Sending..."
|
t("actions.sending")
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Send className="mr-2 h-4 w-4" />
|
<Send className="mr-2 h-4 w-4" />
|
||||||
Send
|
{t("actions.send")}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -4,21 +4,13 @@ import { useState } from "react"
|
|||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
import { ArrowLeft, Mail, Reply, Trash2 } from "lucide-react"
|
import { ArrowLeft, Mail, Reply, Trash2 } from "lucide-react"
|
||||||
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||||
import {
|
import { ConfirmDeleteDialog } from "@/shared/components/ui/confirm-delete-dialog"
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/shared/components/ui/alert-dialog"
|
|
||||||
import { formatDate } from "@/shared/lib/utils"
|
import { formatDate } from "@/shared/lib/utils"
|
||||||
import { usePermission } from "@/shared/hooks/use-permission"
|
import { usePermission } from "@/shared/hooks/use-permission"
|
||||||
import { Permissions } from "@/shared/types/permissions"
|
import { Permissions } from "@/shared/types/permissions"
|
||||||
@@ -35,6 +27,7 @@ export function MessageDetail({
|
|||||||
currentUserId: string
|
currentUserId: string
|
||||||
backHref?: string
|
backHref?: string
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("messages")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isWorking, setIsWorking] = useState(false)
|
const [isWorking, setIsWorking] = useState(false)
|
||||||
const [deleteOpen, setDeleteOpen] = useState(false)
|
const [deleteOpen, setDeleteOpen] = useState(false)
|
||||||
@@ -44,7 +37,7 @@ export function MessageDetail({
|
|||||||
|
|
||||||
const isReceived = message.receiverId === currentUserId
|
const isReceived = message.receiverId === currentUserId
|
||||||
const counterpart = isReceived ? message.senderName : message.receiverName
|
const counterpart = isReceived ? message.senderName : message.receiverName
|
||||||
const counterpartLabel = isReceived ? "From" : "To"
|
const counterpartLabel = isReceived ? t("meta.from") : t("meta.to")
|
||||||
|
|
||||||
const handleDelete = async () => {
|
const handleDelete = async () => {
|
||||||
setIsWorking(true)
|
setIsWorking(true)
|
||||||
@@ -55,10 +48,10 @@ export function MessageDetail({
|
|||||||
router.push("/messages")
|
router.push("/messages")
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to delete")
|
toast.error(res.message || t("messages.deleteFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to delete")
|
toast.error(t("messages.deleteFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
setDeleteOpen(false)
|
setDeleteOpen(false)
|
||||||
@@ -75,26 +68,26 @@ export function MessageDetail({
|
|||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex items-center justify-between gap-2">
|
<div className="flex items-center justify-between gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button asChild variant="ghost" size="icon">
|
<Button asChild variant="ghost" size="icon" aria-label={t("actions.back")}>
|
||||||
<Link href={backHref}>
|
<Link href={backHref}>
|
||||||
<ArrowLeft className="h-4 w-4" />
|
<ArrowLeft className="h-4 w-4" />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Message</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.detail")}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
{canSend ? (
|
{canSend ? (
|
||||||
<Button asChild variant="outline">
|
<Button asChild variant="outline">
|
||||||
<Link href={replyHref ?? "#"}>
|
<Link href={replyHref ?? "#"}>
|
||||||
<Reply className="mr-2 h-4 w-4" />
|
<Reply className="mr-2 h-4 w-4" />
|
||||||
Reply
|
{t("actions.reply")}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
{canDelete ? (
|
{canDelete ? (
|
||||||
<Button onClick={() => setDeleteOpen(true)} disabled={isWorking} variant="destructive">
|
<Button onClick={() => setDeleteOpen(true)} disabled={isWorking} variant="destructive">
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
Delete
|
{t("actions.delete")}
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
@@ -103,26 +96,26 @@ export function MessageDetail({
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="space-y-2">
|
<CardHeader className="space-y-2">
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
<Mail className="text-muted-foreground h-4 w-4" />
|
<Mail className="text-muted-foreground h-4 w-4" aria-hidden="true" />
|
||||||
{isReceived && !message.isRead ? (
|
{isReceived && !message.isRead ? (
|
||||||
<Badge variant="default">New</Badge>
|
<Badge variant="default">{t("status.new")}</Badge>
|
||||||
) : isReceived ? (
|
) : isReceived ? (
|
||||||
<Badge variant="secondary">Read</Badge>
|
<Badge variant="secondary">{t("status.read")}</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="outline">Sent</Badge>
|
<Badge variant="outline">{t("status.sent")}</Badge>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<CardTitle className="text-2xl">{message.subject ?? "(no subject)"}</CardTitle>
|
<CardTitle className="text-2xl">{message.subject ?? t("meta.noSubject")}</CardTitle>
|
||||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||||
<span>
|
<span>
|
||||||
{counterpartLabel}: <span className="font-medium">{counterpart ?? "Unknown"}</span>
|
{counterpartLabel}: <span className="font-medium">{counterpart ?? t("meta.unknown")}</span>
|
||||||
</span>
|
</span>
|
||||||
<span>·</span>
|
<span>·</span>
|
||||||
<span>{formatDate(message.createdAt)}</span>
|
<span>{formatDate(message.createdAt)}</span>
|
||||||
{message.readAt && isReceived ? (
|
{message.readAt && isReceived ? (
|
||||||
<>
|
<>
|
||||||
<span>·</span>
|
<span>·</span>
|
||||||
<span>Read {formatDate(message.readAt)}</span>
|
<span>{t("meta.readAt", { date: formatDate(message.readAt) })}</span>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
@@ -132,22 +125,14 @@ export function MessageDetail({
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
<ConfirmDeleteDialog
|
||||||
<AlertDialogContent>
|
open={deleteOpen}
|
||||||
<AlertDialogHeader>
|
onOpenChange={setDeleteOpen}
|
||||||
<AlertDialogTitle>Delete message</AlertDialogTitle>
|
title={t("empty.deleteTitle")}
|
||||||
<AlertDialogDescription>
|
description={t("empty.deleteDesc", { subject: message.subject ?? t("meta.noSubject") })}
|
||||||
This will permanently delete the message "{message.subject ?? "(no subject)"}".
|
onConfirm={handleDelete}
|
||||||
</AlertDialogDescription>
|
isWorking={isWorking}
|
||||||
</AlertDialogHeader>
|
/>
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction onClick={handleDelete} disabled={isWorking}>
|
|
||||||
Delete
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { useEffect, useMemo, useState } from "react"
|
import { useEffect, useMemo, useState } from "react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2 } from "lucide-react"
|
import { Mail, MailOpen, Plus, Send, Inbox, Search, Loader2 } from "lucide-react"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
import { Button } from "@/shared/components/ui/button"
|
import { Button } from "@/shared/components/ui/button"
|
||||||
@@ -28,6 +29,7 @@ export function MessageList({
|
|||||||
currentUserId: string
|
currentUserId: string
|
||||||
initialType?: MessageType
|
initialType?: MessageType
|
||||||
}) {
|
}) {
|
||||||
|
const t = useTranslations("messages")
|
||||||
const [tab, setTab] = useState<Tab>(initialType === "sent" ? "sent" : "inbox")
|
const [tab, setTab] = useState<Tab>(initialType === "sent" ? "sent" : "inbox")
|
||||||
const [keyword, setKeyword] = useState("")
|
const [keyword, setKeyword] = useState("")
|
||||||
const [searchResults, setSearchResults] = useState<{ kw: string; tab: Tab; items: Message[] } | null>(null)
|
const [searchResults, setSearchResults] = useState<{ kw: string; tab: Tab; items: Message[] } | null>(null)
|
||||||
@@ -80,11 +82,11 @@ export function MessageList({
|
|||||||
<TabsList>
|
<TabsList>
|
||||||
<TabsTrigger value="inbox" className="gap-2">
|
<TabsTrigger value="inbox" className="gap-2">
|
||||||
<Inbox className="h-4 w-4" />
|
<Inbox className="h-4 w-4" />
|
||||||
Inbox
|
{t("tabs.inbox")}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="sent" className="gap-2">
|
<TabsTrigger value="sent" className="gap-2">
|
||||||
<Send className="h-4 w-4" />
|
<Send className="h-4 w-4" />
|
||||||
Sent
|
{t("tabs.sent")}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
@@ -92,7 +94,7 @@ export function MessageList({
|
|||||||
<Button asChild>
|
<Button asChild>
|
||||||
<Link href="/messages/compose">
|
<Link href="/messages/compose">
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
Compose
|
{t("actions.compose")}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -100,26 +102,27 @@ export function MessageList({
|
|||||||
|
|
||||||
{/* 搜索框 */}
|
{/* 搜索框 */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search className="text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2" />
|
<Search className="text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2" aria-hidden="true" />
|
||||||
<Input
|
<Input
|
||||||
type="search"
|
type="search"
|
||||||
placeholder="Search messages by subject or content..."
|
aria-label={t("search.placeholder")}
|
||||||
|
placeholder={t("search.placeholder")}
|
||||||
value={keyword}
|
value={keyword}
|
||||||
onChange={(e) => setKeyword(e.target.value)}
|
onChange={(e) => setKeyword(e.target.value)}
|
||||||
className="pl-9"
|
className="pl-9"
|
||||||
/>
|
/>
|
||||||
{searching ? (
|
{searching ? (
|
||||||
<Loader2 className="text-muted-foreground absolute right-3 top-1/2 size-4 -translate-y-1/2 animate-spin" />
|
<Loader2 className="text-muted-foreground absolute right-3 top-1/2 size-4 -translate-y-1/2 animate-spin" aria-hidden="true" />
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{filtered.length === 0 ? (
|
{filtered.length === 0 ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title={tab === "inbox" ? "Inbox is empty" : "No sent messages"}
|
title={tab === "inbox" ? t("empty.inboxEmpty") : t("empty.sentEmpty")}
|
||||||
description={
|
description={
|
||||||
tab === "inbox"
|
tab === "inbox"
|
||||||
? "You have no incoming messages yet."
|
? t("empty.inboxEmptyDesc")
|
||||||
: "You have not sent any messages yet."
|
: t("empty.sentEmptyDesc")
|
||||||
}
|
}
|
||||||
icon={Mail}
|
icon={Mail}
|
||||||
className="h-auto border-none shadow-none"
|
className="h-auto border-none shadow-none"
|
||||||
@@ -131,23 +134,23 @@ export function MessageList({
|
|||||||
const counterpart = isReceived ? m.senderName : m.receiverName
|
const counterpart = isReceived ? m.senderName : m.receiverName
|
||||||
const unread = isReceived && !m.isRead
|
const unread = isReceived && !m.isRead
|
||||||
return (
|
return (
|
||||||
<Link key={m.id} href={`/messages/${m.id}`} className="block">
|
<Link key={m.id} href={`/messages/${m.id}`} className="block" aria-label={m.subject ?? t("meta.noSubject")}>
|
||||||
<Card className={cn("transition-colors hover:bg-accent/50", unread && "border-primary/40")}>
|
<Card className={cn("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">
|
<CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{unread ? (
|
{unread ? (
|
||||||
<Mail className="h-4 w-4 text-primary" />
|
<Mail className="h-4 w-4 text-primary" aria-hidden="true" />
|
||||||
) : (
|
) : (
|
||||||
<MailOpen className="text-muted-foreground h-4 w-4" />
|
<MailOpen className="text-muted-foreground h-4 w-4" aria-hidden="true" />
|
||||||
)}
|
)}
|
||||||
<span className={cn("text-sm font-medium", unread && "text-primary")}>
|
<span className={cn("text-sm font-medium", unread && "text-primary")}>
|
||||||
{m.subject ?? "(no subject)"}
|
{m.subject ?? t("meta.noSubject")}
|
||||||
</span>
|
</span>
|
||||||
{unread ? <Badge variant="default" className="text-xs">New</Badge> : null}
|
{unread ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
|
||||||
</div>
|
</div>
|
||||||
<p className="text-muted-foreground text-xs">
|
<p className="text-muted-foreground text-xs">
|
||||||
{isReceived ? "From" : "To"}: {counterpart ?? "Unknown"}
|
{isReceived ? t("meta.from") : t("meta.to")}: {counterpart ?? t("meta.unknown")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-muted-foreground shrink-0 text-xs">
|
<span className="text-muted-foreground shrink-0 text-xs">
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { useEffect, useState } from "react"
|
import { useEffect, useState } from "react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"
|
import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"
|
||||||
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
@@ -34,6 +35,7 @@ const TYPE_ICON: Record<NotificationType, typeof Bell> = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function NotificationDropdown() {
|
export function NotificationDropdown() {
|
||||||
|
const t = useTranslations("messages")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [notifications, setNotifications] = useState<Notification[]>([])
|
const [notifications, setNotifications] = useState<Notification[]>([])
|
||||||
const [unreadCount, setUnreadCount] = useState(0)
|
const [unreadCount, setUnreadCount] = useState(0)
|
||||||
@@ -96,8 +98,8 @@ export function NotificationDropdown() {
|
|||||||
return (
|
return (
|
||||||
<DropdownMenu open={open} onOpenChange={setOpen}>
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" size="icon" className="relative text-muted-foreground">
|
<Button variant="ghost" size="icon" className="relative text-muted-foreground" aria-label={t("title.notifications")}>
|
||||||
<Bell className="size-5" />
|
<Bell className="size-5" aria-hidden="true" />
|
||||||
{unreadCount > 0 ? (
|
{unreadCount > 0 ? (
|
||||||
<Badge
|
<Badge
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
@@ -106,20 +108,20 @@ export function NotificationDropdown() {
|
|||||||
{unreadCount > 9 ? "9+" : unreadCount}
|
{unreadCount > 9 ? "9+" : unreadCount}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : null}
|
) : null}
|
||||||
<span className="sr-only">Notifications</span>
|
<span className="sr-only">{t("title.notifications")}</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end" className="w-80 p-0">
|
<DropdownMenuContent align="end" className="w-80 p-0">
|
||||||
<DropdownMenuLabel className="flex items-center justify-between">
|
<DropdownMenuLabel className="flex items-center justify-between">
|
||||||
<span>Notifications</span>
|
<span>{t("title.notifications")}</span>
|
||||||
{unreadCount > 0 ? (
|
{unreadCount > 0 ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleMarkAllRead}
|
onClick={handleMarkAllRead}
|
||||||
className="text-primary text-xs hover:underline"
|
className="text-primary text-xs hover:underline"
|
||||||
>
|
>
|
||||||
<CheckCheck className="mr-1 inline h-3 w-3" />
|
<CheckCheck className="mr-1 inline h-3 w-3" aria-hidden="true" />
|
||||||
Mark all read
|
{t("actions.markAllRead")}
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
</DropdownMenuLabel>
|
</DropdownMenuLabel>
|
||||||
@@ -127,7 +129,7 @@ export function NotificationDropdown() {
|
|||||||
<ScrollArea className="max-h-[320px]">
|
<ScrollArea className="max-h-[320px]">
|
||||||
{notifications.length === 0 ? (
|
{notifications.length === 0 ? (
|
||||||
<div className="text-muted-foreground px-4 py-8 text-center text-sm">
|
<div className="text-muted-foreground px-4 py-8 text-center text-sm">
|
||||||
No notifications
|
{t("empty.noNotificationsDropdown")}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
notifications.map((n) => {
|
notifications.map((n) => {
|
||||||
@@ -144,12 +146,12 @@ export function NotificationDropdown() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="bg-muted mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full">
|
<div className="bg-muted mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full">
|
||||||
<Icon className="h-3.5 w-3.5" />
|
<Icon className="h-3.5 w-3.5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1 space-y-0.5">
|
<div className="min-w-0 flex-1 space-y-0.5">
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
{!n.isRead ? (
|
{!n.isRead ? (
|
||||||
<span className="bg-primary size-1.5 shrink-0 rounded-full" />
|
<span className="bg-primary size-1.5 shrink-0 rounded-full" aria-hidden="true" />
|
||||||
) : null}
|
) : null}
|
||||||
<span className={cn("text-xs", !n.isRead ? "font-semibold" : "font-medium")}>
|
<span className={cn("text-xs", !n.isRead ? "font-semibold" : "font-medium")}>
|
||||||
{n.title}
|
{n.title}
|
||||||
@@ -170,7 +172,7 @@ export function NotificationDropdown() {
|
|||||||
<DropdownMenuSeparator className="mt-0" />
|
<DropdownMenuSeparator className="mt-0" />
|
||||||
<DropdownMenuItem asChild>
|
<DropdownMenuItem asChild>
|
||||||
<Link href="/messages" className="text-primary justify-center text-xs">
|
<Link href="/messages" className="text-primary justify-center text-xs">
|
||||||
View all notifications
|
{t("actions.viewAll")}
|
||||||
</Link>
|
</Link>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useState } from "react"
|
|||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useRouter } from "next/navigation"
|
import { useRouter } from "next/navigation"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
import { useTranslations } from "next-intl"
|
||||||
import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"
|
import { Bell, CheckCheck, MessageSquare, Megaphone, PenTool, GraduationCap } from "lucide-react"
|
||||||
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
@@ -22,14 +23,8 @@ const TYPE_ICON: Record<NotificationType, typeof Bell> = {
|
|||||||
grade: GraduationCap,
|
grade: GraduationCap,
|
||||||
}
|
}
|
||||||
|
|
||||||
const TYPE_LABEL: Record<NotificationType, string> = {
|
|
||||||
message: "Message",
|
|
||||||
announcement: "Announcement",
|
|
||||||
homework: "Homework",
|
|
||||||
grade: "Grade",
|
|
||||||
}
|
|
||||||
|
|
||||||
export function NotificationList({ notifications }: { notifications: Notification[] }) {
|
export function NotificationList({ notifications }: { notifications: Notification[] }) {
|
||||||
|
const t = useTranslations("messages")
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isWorking, setIsWorking] = useState(false)
|
const [isWorking, setIsWorking] = useState(false)
|
||||||
const hasUnread = notifications.some((n) => !n.isRead)
|
const hasUnread = notifications.some((n) => !n.isRead)
|
||||||
@@ -42,10 +37,10 @@ export function NotificationList({ notifications }: { notifications: Notificatio
|
|||||||
toast.success(res.message)
|
toast.success(res.message)
|
||||||
router.refresh()
|
router.refresh()
|
||||||
} else {
|
} else {
|
||||||
toast.error(res.message || "Failed to mark all as read")
|
toast.error(res.message || t("messages.markReadFailed"))
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to mark all as read")
|
toast.error(t("messages.markReadFailed"))
|
||||||
} finally {
|
} finally {
|
||||||
setIsWorking(false)
|
setIsWorking(false)
|
||||||
}
|
}
|
||||||
@@ -58,7 +53,7 @@ export function NotificationList({ notifications }: { notifications: Notificatio
|
|||||||
router.refresh()
|
router.refresh()
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Failed to mark as read")
|
toast.error(t("messages.markReadFailed"))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -66,21 +61,21 @@ export function NotificationList({ notifications }: { notifications: Notificatio
|
|||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Notifications</h2>
|
<h2 className="text-2xl font-bold tracking-tight">{t("title.notifications")}</h2>
|
||||||
<p className="text-muted-foreground text-sm">Stay updated on your latest activities.</p>
|
<p className="text-muted-foreground text-sm">{t("description.notifications")}</p>
|
||||||
</div>
|
</div>
|
||||||
{hasUnread ? (
|
{hasUnread ? (
|
||||||
<Button onClick={handleMarkAllRead} disabled={isWorking} variant="outline">
|
<Button onClick={handleMarkAllRead} disabled={isWorking} variant="outline">
|
||||||
<CheckCheck className="mr-2 h-4 w-4" />
|
<CheckCheck className="mr-2 h-4 w-4" />
|
||||||
Mark all as read
|
{t("actions.markAllRead")}
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{notifications.length === 0 ? (
|
{notifications.length === 0 ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
title="No notifications"
|
title={t("empty.noNotifications")}
|
||||||
description="You have no notifications yet."
|
description={t("empty.noNotificationsDesc")}
|
||||||
icon={Bell}
|
icon={Bell}
|
||||||
className="h-auto border-none shadow-none"
|
className="h-auto border-none shadow-none"
|
||||||
/>
|
/>
|
||||||
@@ -95,14 +90,14 @@ export function NotificationList({ notifications }: { notifications: Notificatio
|
|||||||
>
|
>
|
||||||
<CardContent className="flex items-start gap-3 py-4">
|
<CardContent className="flex items-start gap-3 py-4">
|
||||||
<div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-full">
|
<div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-full">
|
||||||
<Icon className="h-4 w-4" />
|
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1 space-y-1">
|
<div className="min-w-0 flex-1 space-y-1">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className={cn("text-sm", !n.isRead ? "font-semibold" : "font-medium")}>
|
<span className={cn("text-sm", !n.isRead ? "font-semibold" : "font-medium")}>
|
||||||
{n.title}
|
{n.title}
|
||||||
</span>
|
</span>
|
||||||
{!n.isRead ? <Badge variant="default" className="text-xs">New</Badge> : null}
|
{!n.isRead ? <Badge variant="default" className="text-xs">{t("status.new")}</Badge> : null}
|
||||||
</div>
|
</div>
|
||||||
{n.content ? (
|
{n.content ? (
|
||||||
<p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
|
<p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
|
||||||
@@ -111,7 +106,7 @@ export function NotificationList({ notifications }: { notifications: Notificatio
|
|||||||
) : null}
|
) : null}
|
||||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
<Badge variant="outline" className="text-xs">
|
<Badge variant="outline" className="text-xs">
|
||||||
{TYPE_LABEL[n.type]}
|
{t(`notificationType.${n.type}`)}
|
||||||
</Badge>
|
</Badge>
|
||||||
<span>{formatDate(n.createdAt)}</span>
|
<span>{formatDate(n.createdAt)}</span>
|
||||||
{!n.isRead ? (
|
{!n.isRead ? (
|
||||||
@@ -119,13 +114,14 @@ export function NotificationList({ notifications }: { notifications: Notificatio
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => handleMarkRead(n.id)}
|
onClick={() => handleMarkRead(n.id)}
|
||||||
className="text-primary hover:underline"
|
className="text-primary hover:underline"
|
||||||
|
aria-label={t("actions.markRead")}
|
||||||
>
|
>
|
||||||
Mark as read
|
{t("actions.markRead")}
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
{n.link ? (
|
{n.link ? (
|
||||||
<Link href={n.link} className="ml-auto text-primary hover:underline">
|
<Link href={n.link} className="ml-auto text-primary hover:underline">
|
||||||
View
|
{t("actions.view")}
|
||||||
</Link>
|
</Link>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
90
src/shared/i18n/messages/en/announcements.json
Normal file
90
src/shared/i18n/messages/en/announcements.json
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"list": "Announcements",
|
||||||
|
"detail": "Announcement",
|
||||||
|
"adminList": "Announcement Management",
|
||||||
|
"edit": "Edit Announcement",
|
||||||
|
"create": "New Announcement"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"list": "Stay up to date with the latest school announcements.",
|
||||||
|
"adminList": "Create and manage school-wide announcements.",
|
||||||
|
"edit": "Update the announcement details."
|
||||||
|
},
|
||||||
|
"filter": {
|
||||||
|
"all": "All",
|
||||||
|
"published": "Published",
|
||||||
|
"draft": "Draft",
|
||||||
|
"archived": "Archived",
|
||||||
|
"placeholder": "Filter by status"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"draft": "Draft",
|
||||||
|
"published": "Published",
|
||||||
|
"archived": "Archived"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"school": "School",
|
||||||
|
"grade": "Grade",
|
||||||
|
"class": "Class"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Title",
|
||||||
|
"titlePlaceholder": "Announcement title",
|
||||||
|
"content": "Content",
|
||||||
|
"contentPlaceholder": "Write the announcement content...",
|
||||||
|
"type": "Type",
|
||||||
|
"typePlaceholder": "Select type",
|
||||||
|
"status": "Status",
|
||||||
|
"statusPlaceholder": "Select status",
|
||||||
|
"targetGrade": "Target Grade",
|
||||||
|
"targetGradePlaceholder": "Select a grade (optional)",
|
||||||
|
"targetClass": "Target Class",
|
||||||
|
"targetClassPlaceholder": "Select a class (optional)",
|
||||||
|
"submit": "Save",
|
||||||
|
"create": "Create",
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"saving": "Saving..."
|
||||||
|
},
|
||||||
|
"actions": {
|
||||||
|
"new": "New Announcement",
|
||||||
|
"publish": "Publish",
|
||||||
|
"archive": "Archive",
|
||||||
|
"edit": "Edit",
|
||||||
|
"delete": "Delete",
|
||||||
|
"back": "Back"
|
||||||
|
},
|
||||||
|
"messages": {
|
||||||
|
"created": "Announcement created",
|
||||||
|
"updated": "Announcement updated",
|
||||||
|
"deleted": "Announcement deleted",
|
||||||
|
"published": "Announcement published",
|
||||||
|
"archived": "Announcement archived",
|
||||||
|
"notFound": "Announcement not found",
|
||||||
|
"createFailed": "Failed to save announcement",
|
||||||
|
"updateFailed": "Failed to save announcement",
|
||||||
|
"publishFailed": "Failed to publish",
|
||||||
|
"archiveFailed": "Failed to archive",
|
||||||
|
"deleteFailed": "Failed to delete",
|
||||||
|
"invalidForm": "Invalid form data",
|
||||||
|
"invalidState": "Invalid form state"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"publishedAt": "Published {date}",
|
||||||
|
"createdAt": "Created {date}",
|
||||||
|
"updatedAt": "Updated {date}",
|
||||||
|
"author": "by {name}"
|
||||||
|
},
|
||||||
|
"empty": {
|
||||||
|
"noAnnouncements": "No announcements",
|
||||||
|
"noAnnouncementsDesc": "There are no announcements yet.",
|
||||||
|
"noMatch": "No announcements match the current filter.",
|
||||||
|
"deleteTitle": "Delete announcement",
|
||||||
|
"deleteDesc": "This will permanently delete \"{title}\"."
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"loadFailed": "Failed to load announcements",
|
||||||
|
"loadFailedDesc": "Sorry, an unexpected error occurred while loading announcements. Please try again later.",
|
||||||
|
"retry": "Retry"
|
||||||
|
}
|
||||||
|
}
|
||||||
94
src/shared/i18n/messages/en/messages.json
Normal file
94
src/shared/i18n/messages/en/messages.json
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"list": "Messages",
|
||||||
|
"detail": "Message",
|
||||||
|
"compose": "Compose Message",
|
||||||
|
"reply": "Reply",
|
||||||
|
"newMessage": "New Message",
|
||||||
|
"notifications": "Notifications"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"list": "Manage your inbox and stay updated with notifications.",
|
||||||
|
"compose": "Send a message to another user.",
|
||||||
|
"notifications": "Stay updated on your latest activities."
|
||||||
|
},
|
||||||
|
"tabs": {
|
||||||
|
"inbox": "Inbox",
|
||||||
|
"sent": "Sent"
|
||||||
|
},
|
||||||
|
"actions": {
|
||||||
|
"compose": "Compose",
|
||||||
|
"reply": "Reply",
|
||||||
|
"delete": "Delete",
|
||||||
|
"markRead": "Mark as read",
|
||||||
|
"markAllRead": "Mark all as read",
|
||||||
|
"send": "Send",
|
||||||
|
"sending": "Sending...",
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"back": "Back",
|
||||||
|
"viewAll": "View all notifications",
|
||||||
|
"view": "View"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"to": "To",
|
||||||
|
"toPlaceholder": "Select a recipient",
|
||||||
|
"subject": "Subject",
|
||||||
|
"subjectPlaceholder": "Message subject",
|
||||||
|
"content": "Content",
|
||||||
|
"contentPlaceholder": "Write your message...",
|
||||||
|
"selectRecipient": "Please select a recipient"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"new": "New",
|
||||||
|
"read": "Read",
|
||||||
|
"sent": "Sent",
|
||||||
|
"unread": "Unread"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"from": "From",
|
||||||
|
"to": "To",
|
||||||
|
"unknown": "Unknown",
|
||||||
|
"noSubject": "(no subject)",
|
||||||
|
"readAt": "Read {date}"
|
||||||
|
},
|
||||||
|
"notificationType": {
|
||||||
|
"message": "Message",
|
||||||
|
"announcement": "Announcement",
|
||||||
|
"homework": "Homework",
|
||||||
|
"grade": "Grade"
|
||||||
|
},
|
||||||
|
"search": {
|
||||||
|
"placeholder": "Search messages by subject or content...",
|
||||||
|
"noResults": "No matching messages found"
|
||||||
|
},
|
||||||
|
"empty": {
|
||||||
|
"inboxEmpty": "Inbox is empty",
|
||||||
|
"inboxEmptyDesc": "You have no incoming messages yet.",
|
||||||
|
"sentEmpty": "No sent messages",
|
||||||
|
"sentEmptyDesc": "You have not sent any messages yet.",
|
||||||
|
"noNotifications": "No notifications",
|
||||||
|
"noNotificationsDesc": "You have no notifications yet.",
|
||||||
|
"noNotificationsDropdown": "No notifications",
|
||||||
|
"deleteTitle": "Delete message",
|
||||||
|
"deleteDesc": "This will permanently delete the message \"{subject}\"."
|
||||||
|
},
|
||||||
|
"messages": {
|
||||||
|
"sent": "Message sent",
|
||||||
|
"deleted": "Message deleted",
|
||||||
|
"markedRead": "Marked as read",
|
||||||
|
"allMarkedRead": "All notifications marked as read",
|
||||||
|
"notificationMarkedRead": "Notification marked as read",
|
||||||
|
"sendSelf": "Cannot send a message to yourself",
|
||||||
|
"sendFailed": "Failed to send message",
|
||||||
|
"deleteFailed": "Failed to delete",
|
||||||
|
"markReadFailed": "Failed to mark as read",
|
||||||
|
"notFound": "Message not found",
|
||||||
|
"invalidId": "Invalid message id",
|
||||||
|
"selectRecipient": "Please select a recipient"
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"loadFailed": "Failed to load messages",
|
||||||
|
"loadFailedDesc": "Sorry, an unexpected error occurred while loading messages. Please try again later.",
|
||||||
|
"retry": "Retry"
|
||||||
|
}
|
||||||
|
}
|
||||||
90
src/shared/i18n/messages/zh-CN/announcements.json
Normal file
90
src/shared/i18n/messages/zh-CN/announcements.json
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"list": "公告",
|
||||||
|
"detail": "公告详情",
|
||||||
|
"adminList": "公告管理",
|
||||||
|
"edit": "编辑公告",
|
||||||
|
"create": "新建公告"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"list": "随时了解学校最新公告动态。",
|
||||||
|
"adminList": "创建并管理全校公告。",
|
||||||
|
"edit": "更新公告详情。"
|
||||||
|
},
|
||||||
|
"filter": {
|
||||||
|
"all": "全部",
|
||||||
|
"published": "已发布",
|
||||||
|
"draft": "草稿",
|
||||||
|
"archived": "已归档",
|
||||||
|
"placeholder": "按状态筛选"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"draft": "草稿",
|
||||||
|
"published": "已发布",
|
||||||
|
"archived": "已归档"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"school": "全校",
|
||||||
|
"grade": "年级",
|
||||||
|
"class": "班级"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "标题",
|
||||||
|
"titlePlaceholder": "公告标题",
|
||||||
|
"content": "内容",
|
||||||
|
"contentPlaceholder": "请输入公告内容...",
|
||||||
|
"type": "类型",
|
||||||
|
"typePlaceholder": "选择类型",
|
||||||
|
"status": "状态",
|
||||||
|
"statusPlaceholder": "选择状态",
|
||||||
|
"targetGrade": "目标年级",
|
||||||
|
"targetGradePlaceholder": "选择年级(可选)",
|
||||||
|
"targetClass": "目标班级",
|
||||||
|
"targetClassPlaceholder": "选择班级(可选)",
|
||||||
|
"submit": "保存",
|
||||||
|
"create": "创建",
|
||||||
|
"cancel": "取消",
|
||||||
|
"saving": "保存中..."
|
||||||
|
},
|
||||||
|
"actions": {
|
||||||
|
"new": "新建公告",
|
||||||
|
"publish": "发布",
|
||||||
|
"archive": "归档",
|
||||||
|
"edit": "编辑",
|
||||||
|
"delete": "删除",
|
||||||
|
"back": "返回"
|
||||||
|
},
|
||||||
|
"messages": {
|
||||||
|
"created": "公告已创建",
|
||||||
|
"updated": "公告已更新",
|
||||||
|
"deleted": "公告已删除",
|
||||||
|
"published": "公告已发布",
|
||||||
|
"archived": "公告已归档",
|
||||||
|
"notFound": "公告不存在",
|
||||||
|
"createFailed": "创建公告失败",
|
||||||
|
"updateFailed": "保存公告失败",
|
||||||
|
"publishFailed": "发布失败",
|
||||||
|
"archiveFailed": "归档失败",
|
||||||
|
"deleteFailed": "删除失败",
|
||||||
|
"invalidForm": "表单数据无效",
|
||||||
|
"invalidState": "表单状态无效"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"publishedAt": "发布于 {date}",
|
||||||
|
"createdAt": "创建于 {date}",
|
||||||
|
"updatedAt": "更新于 {date}",
|
||||||
|
"author": "作者:{name}"
|
||||||
|
},
|
||||||
|
"empty": {
|
||||||
|
"noAnnouncements": "暂无公告",
|
||||||
|
"noAnnouncementsDesc": "目前还没有任何公告。",
|
||||||
|
"noMatch": "当前筛选条件下暂无公告。",
|
||||||
|
"deleteTitle": "删除公告",
|
||||||
|
"deleteDesc": "此操作将永久删除"{title}"。"
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"loadFailed": "公告加载失败",
|
||||||
|
"loadFailedDesc": "抱歉,加载公告时发生了意外错误。请稍后重试。",
|
||||||
|
"retry": "重试"
|
||||||
|
}
|
||||||
|
}
|
||||||
94
src/shared/i18n/messages/zh-CN/messages.json
Normal file
94
src/shared/i18n/messages/zh-CN/messages.json
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"list": "消息",
|
||||||
|
"detail": "消息详情",
|
||||||
|
"compose": "撰写消息",
|
||||||
|
"reply": "回复",
|
||||||
|
"newMessage": "新消息",
|
||||||
|
"notifications": "通知"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"list": "管理收件箱并随时掌握通知动态。",
|
||||||
|
"compose": "向其他用户发送消息。",
|
||||||
|
"notifications": "随时了解最新动态。"
|
||||||
|
},
|
||||||
|
"tabs": {
|
||||||
|
"inbox": "收件箱",
|
||||||
|
"sent": "已发送"
|
||||||
|
},
|
||||||
|
"actions": {
|
||||||
|
"compose": "撰写",
|
||||||
|
"reply": "回复",
|
||||||
|
"delete": "删除",
|
||||||
|
"markRead": "标记已读",
|
||||||
|
"markAllRead": "全部标记已读",
|
||||||
|
"send": "发送",
|
||||||
|
"sending": "发送中...",
|
||||||
|
"cancel": "取消",
|
||||||
|
"back": "返回",
|
||||||
|
"viewAll": "查看全部通知",
|
||||||
|
"view": "查看"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"to": "收件人",
|
||||||
|
"toPlaceholder": "选择收件人",
|
||||||
|
"subject": "主题",
|
||||||
|
"subjectPlaceholder": "消息主题",
|
||||||
|
"content": "内容",
|
||||||
|
"contentPlaceholder": "请输入消息内容...",
|
||||||
|
"selectRecipient": "请选择收件人"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"new": "新",
|
||||||
|
"read": "已读",
|
||||||
|
"sent": "已发送",
|
||||||
|
"unread": "未读"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"from": "发件人",
|
||||||
|
"to": "收件人",
|
||||||
|
"unknown": "未知",
|
||||||
|
"noSubject": "(无主题)",
|
||||||
|
"readAt": "阅读于 {date}"
|
||||||
|
},
|
||||||
|
"notificationType": {
|
||||||
|
"message": "消息",
|
||||||
|
"announcement": "公告",
|
||||||
|
"homework": "作业",
|
||||||
|
"grade": "成绩"
|
||||||
|
},
|
||||||
|
"search": {
|
||||||
|
"placeholder": "按主题或内容搜索消息...",
|
||||||
|
"noResults": "未找到匹配的消息"
|
||||||
|
},
|
||||||
|
"empty": {
|
||||||
|
"inboxEmpty": "收件箱为空",
|
||||||
|
"inboxEmptyDesc": "您还没有收到任何消息。",
|
||||||
|
"sentEmpty": "无已发送消息",
|
||||||
|
"sentEmptyDesc": "您还没有发送任何消息。",
|
||||||
|
"noNotifications": "暂无通知",
|
||||||
|
"noNotificationsDesc": "您还没有任何通知。",
|
||||||
|
"noNotificationsDropdown": "暂无通知",
|
||||||
|
"deleteTitle": "删除消息",
|
||||||
|
"deleteDesc": "此操作将永久删除消息"{subject}"。"
|
||||||
|
},
|
||||||
|
"messages": {
|
||||||
|
"sent": "消息已发送",
|
||||||
|
"deleted": "消息已删除",
|
||||||
|
"markedRead": "已标记为已读",
|
||||||
|
"allMarkedRead": "全部已标记为已读",
|
||||||
|
"notificationMarkedRead": "通知已标记为已读",
|
||||||
|
"sendSelf": "不能给自己发送消息",
|
||||||
|
"sendFailed": "发送消息失败",
|
||||||
|
"deleteFailed": "删除失败",
|
||||||
|
"markReadFailed": "标记已读失败",
|
||||||
|
"notFound": "消息不存在",
|
||||||
|
"invalidId": "消息 ID 无效",
|
||||||
|
"selectRecipient": "请选择收件人"
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"loadFailed": "消息加载失败",
|
||||||
|
"loadFailedDesc": "抱歉,加载消息时发生了意外错误。请稍后重试。",
|
||||||
|
"retry": "重试"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user