Ghostfolio项目：扩展通知服务的提示功能实现

背景介绍

Ghostfolio是一款开源的财富管理工具，近期社区决定对其客户端中的通知服务进行功能扩展。当前系统已经具备基本的通知能力，但缺乏类似浏览器原生prompt()函数的交互式提示功能。这种功能在需要用户输入简单数据时非常有用，比如设置紧急资金金额等场景。

技术实现方案

核心组件设计

为了实现这个功能，我们需要创建一个新的对话框组件GfPromptDialogComponent，它继承自Angular Material的对话框体系。该组件将包含以下关键元素：

1. 标题区域：显示提示框的主题说明
2. 输入区域：使用mat-input组件接收用户输入
3. 操作按钮区：包含确认和取消按钮

参数配置

组件支持以下可配置参数：

• 确认按钮文本：默认为"OK"，可自定义如"Save"
• 默认值：输入框的初始值
• 取消按钮文本：默认为"CANCEL"
• 标题：必填参数，提示框的主标题
• 值标签：输入框的标签说明

服务层集成

在现有的NotificationService中新增prompt方法，该方法将：

1. 接收配置参数
2. 打开GfPromptDialogComponent对话框
3. 返回Promise以处理用户输入或取消操作

具体实现细节

对话框组件

GfPromptDialogComponent需要继承自基础的对话框组件，主要模板结构包括：

<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
  <mat-form-field>
    <mat-label>{{ data.valueLabel }}</mat-label>
    <input matInput [(ngModel)]="inputValue">
  </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]="null">{{ data.discardLabel }}</button>
  <button mat-button [mat-dialog-close]="inputValue" cdkFocusInitial>
    {{ data.confirmLabel }}
  </button>
</mat-dialog-actions>

服务方法

NotificationService中的prompt方法实现如下：

public prompt(config: {
  confirmLabel?: string;
  defaultValue?: string;
  discardLabel?: string;
  title: string;
  valueLabel?: string;
}): Promise<string | null> {
  return this.matDialog
    .open(GfPromptDialogComponent, {
      data: {
        confirmLabel: config.confirmLabel || this.translate.instant('OK'),
        defaultValue: config.defaultValue || '',
        discardLabel: config.discardLabel || this.translate.instant('CANCEL'),
        title: config.title,
        valueLabel: config.valueLabel
      },
      width: this.dialogWidth
    })
    .afterClosed()
    .toPromise();
}

应用场景示例

在PortfolioSummaryComponent中，可以使用新的prompt方法来替换原有的浏览器prompt：

const value = await this.notificationService.prompt({
  confirmLabel: 'Save',
  defaultValue: this.summary.emergencyFund?.total?.toString() ?? '0',
  title: 'Please enter the amount of your emergency fund.',
  valueLabel: 'Emergency fund'
});

技术优势

1. 统一风格：与现有Ghostfolio的UI风格保持一致
2. 国际化支持：内置翻译功能，支持多语言
3. 响应式设计：适配不同屏幕尺寸
4. 类型安全：完整的TypeScript类型定义
5. 可扩展性：易于添加更多配置选项

总结

通过在Ghostfolio中实现这个提示对话框功能，不仅提升了用户体验的一致性，还为开发者提供了更灵活的表单交互方式。这种实现方式遵循了Angular的最佳实践，同时保持了代码的可维护性和可扩展性。对于需要简单用户输入的场景，这将成为Ghostfolio应用中的一个重要交互组件。