velt-notifications-best-practices
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseVelt Notifications Best Practices
Velt Notifications 最佳实践
Comprehensive implementation guide for Velt's notification system in React and Next.js applications. Contains 12 rules across 8 categories, prioritized by impact to guide automated code generation and integration patterns.
这是一份针对React和Next.js应用中Velt通知系统的全面实现指南。包含8个分类下的12条规则，按影响优先级排序，可指导自动化代码生成与集成模式。
When to Apply
适用场景
Reference these guidelines when:
- Adding in-app notifications to a React/Next.js application
- Setting up the VeltNotificationsTool and VeltNotificationsPanel
- Configuring notification tabs (For You, All, Documents, People)
- Accessing notification data via hooks or REST APIs
- Managing user notification preferences and channels
- Setting up email notifications with SendGrid
- Creating custom notifications via REST API
- Integrating with external services via webhooks
在以下场景中可参考本指南：
- 为React/Next.js应用添加应用内通知
- 设置VeltNotificationsTool和VeltNotificationsPanel
- 配置通知标签页（为你推荐、全部、文档、人员）
- 通过hooks或REST API访问通知数据
- 管理用户通知偏好与渠道
- 配置SendGrid邮件通知
- 通过REST API创建自定义通知
- 通过Webhook与外部服务集成
Rule Categories by Priority
按优先级划分的规则分类
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Core Setup | CRITICAL | |
| 2 | Panel Configuration | HIGH | |
| 3 | Data Access | HIGH | |
| 4 | Settings Management | MEDIUM-HIGH | |
| 5 | Notification Triggers | MEDIUM | |
| 6 | Delivery Channels | MEDIUM | |
| 7 | UI Customization | MEDIUM | |
| 8 | Debugging & Testing | LOW-MEDIUM | |
| 优先级 | 分类 | 影响程度 | 前缀 |
|---|---|---|---|
| 1 | 核心设置 | 关键 | |
| 2 | 面板配置 | 高 | |
| 3 | 数据访问 | 高 | |
| 4 | 设置管理 | 中高 | |
| 5 | 通知触发器 | 中 | |
| 6 | 交付渠道 | 中 | |
| 7 | UI定制 | 中 | |
| 8 | 调试与测试 | 中低 | |
Quick Reference
快速参考
1. Core Setup (CRITICAL)
1. 核心设置（关键）
- — Enable notifications and add VeltNotificationsTool
core-setup
- — 启用通知并添加VeltNotificationsTool
core-setup
2. Panel Configuration (HIGH)
2. 面板配置（高）
- — Configure notification panel tabs (forYou, all, documents, people)
panel-tabs - — Control panel open mode (popover vs sidebar)
panel-display
- — 配置通知面板标签页（forYou、all、documents、people）
panel-tabs - — 控制面板打开模式（弹出框 vs 侧边栏）
panel-display
3. Data Access (HIGH)
3. 数据访问（高）
- — Use React hooks to access notification data
data-hooks - — Use REST APIs for server-side notification management
data-rest-api
- — 使用React hooks访问通知数据
data-hooks - — 使用REST API进行服务端通知管理
data-rest-api
4. Settings Management (MEDIUM-HIGH)
4. 设置管理（中高）
- — Configure notification delivery channels
settings-channels
- — 配置通知交付渠道
settings-channels
5. Notification Triggers (MEDIUM)
5. 通知触发器（中）
- — Create custom notifications via REST API
triggers-custom
- — 通过REST API创建自定义通知
triggers-custom
6. Delivery Channels (MEDIUM)
6. 交付渠道（中）
- — Set up email notifications with SendGrid
delivery-email - — Integrate with external services via webhooks
delivery-webhooks
- — 设置SendGrid邮件通知
delivery-email - — 通过Webhook与外部服务集成
delivery-webhooks
7. UI Customization (MEDIUM)
7. UI定制（中）
- — Customize notification components with wireframes
ui-wireframes
- — 使用线框图定制通知组件
ui-wireframes
8. Debugging & Testing (LOW-MEDIUM)
8. 调试与测试（中低）
- — Common issues and solutions
debug-common-issues
- — 常见问题与解决方案
debug-common-issues
How to Use
使用方法
Read individual rule files for detailed explanations and code examples:
rules/shared/core/core-setup.md
rules/shared/panel/panel-tabs.mdEach rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Source pointers to official documentation
阅读单个规则文件获取详细说明与代码示例：
rules/shared/core/core-setup.md
rules/shared/panel/panel-tabs.md每个规则文件包含：
- 规则重要性的简要说明
- 错误代码示例及解释
- 正确代码示例及解释
- 官方文档的参考链接
Compiled Documents
编译文档
- — Compressed index of all rules with file paths (start here)
AGENTS.md - — Full verbose guide with all rules expanded inline
AGENTS.full.md
- — 包含所有规则及文件路径的压缩索引（从这里开始）
AGENTS.md - — 包含所有规则详细内容的完整指南
AGENTS.full.md