feat: add Telegram notification settings UI

docs/TELEGRAM_NOTIFICATION.md

@@ -25,11 +25,13 @@ KT财务系统支持通过Telegram Bot向群组或个人发送账目记录通知
 ### 2. 获取Chat ID
 
 #### 获取个人Chat ID：
+
 1. 在Telegram中搜索 `@userinfobot`
 2. 发送任意消息
 3. Bot会返回你的Chat ID
 
 #### 获取群组Chat ID：
+
 1. 将你的Bot添加到群组
 2. 在群组中发送任意消息
 3. 访问：`https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates`
@@ -44,6 +46,7 @@ GET /api/telegram/notifications
 ```
 
 **响应示例**：
+
 ```json
 {
   "code": 0,
@@ -78,6 +81,7 @@ Content-Type: application/json
 ```
 
 **说明**：
+
 - `name`: 配置名称（必填）
 - `botToken`: Telegram Bot Token（必填）
 - `chatId`: 目标聊天ID（必填）
@@ -85,6 +89,7 @@ Content-Type: application/json
 - `isEnabled`: 是否启用（可选，默认：`true`）
 
 **响应示例**：
+
 ```json
 {
   "code": 0,
@@ -159,9 +164,11 @@ Content-Type: application/json
 ## 通知类型说明
 
 目前支持的通知类型：
+
 - `transaction`: 交易记录通知（新增、更新、删除账目）
 
 未来可扩展：
+
 - `budget`: 预算提醒
 - `report`: 财务报表
 - `reimbursement`: 报销审批
@@ -169,18 +176,23 @@ Content-Type: application/json
 ## 常见问题
 
 ### Q: Bot无法发送消息到群组？
+
 **A**: 请确保：
+
 1. Bot已被添加到群组
 2. Bot在群组中有发送消息的权限
 3. Chat ID正确（群组ID通常是负数）
 
 ### Q: 如何禁用某个配置的通知？
+
 **A**: 调用更新API，设置 `isEnabled: false`
 
 ### Q: 可以配置多个Bot吗？
+
 **A**: 可以！系统支持多个Bot配置，所有启用的配置都会收到通知。
 
 ### Q: 消息会包含敏感信息吗？
+
 **A**: 消息只包含账目的基本信息（类型、金额、分类等），不包含用户身份等敏感信息。建议使用私密群组。
 
 ## 技术实现
@@ -239,9 +251,27 @@ curl -X POST http://localhost:3000/api/finance/transactions \
   }'
 ```
 
-## 下一步
+## 前端配置界面
 
-等你提供Telegram Bot Token后，我们可以：
-1. 在前端添加通知配置管理界面
-2. 测试实际的消息发送
-3. 根据需要调整消息格式和内容
+Telegram 通知现已集成在 Web 端的系统设置页面：
+
+- 入口路径：`财务系统 → ⚙️ 系统设置 → Telegram 通知配置`
+- 列表内容：展示配置名称、Bot Token（掩码）、Chat ID、通知类型、启用状态以及最近更新时间
+- 支持操作：快速启用/禁用、编辑、发送测试通知、删除
+
+### 新增或编辑配置
+
+1. 点击「➕ 新增配置」或列表中的「编辑」按钮
+2. 填写/更新以下字段：
+   - **配置名称**：用于标识通知触达对象（例如“财务通知群”）
+   - **Bot Token**：来自 @BotFather 的完整 Token
+   - **Chat ID**：个人或群组的 ID（群组需将 Bot 加入并通过 `getUpdates` 获取）
+   - **启用状态**：控制是否参与通知投递
+3. 可直接在弹窗内点击「发送测试」，验证 Bot Token 与 Chat ID 是否有效
+4. 点击「创建配置」或「保存更新」提交，成功后自动刷新列表
+
+### 使用提示
+
+- 所有启用的配置会在新增账目时同步收到通知
+- 「测试」按钮会向对应的聊天发送标准测试消息，方便确认权限
+- 删除配置后即刻停止向该聊天推送消息