Method display

src/settings/components/RegexRuleEditor.ts:31–69

* 显示规则列表

()

   * 显示规则列表
   */
  private display() {
    this.rulesContainer.empty();
    
    // 添加警告提示和示例
    const warningEl = this.rulesContainer.createDiv({ cls: 'regex-rule-warning' });
    warningEl.setText(t('Use regex with caution. If there are capture groups (), the first capture group will be used as the highlight text; if there are no capture groups, the entire match will be used.'));
    
    // 显示现有规则
    if (this.rules.length === 0) {
      const emptyEl = this.rulesContainer.createDiv();
      emptyEl.setText(t('No custom regex rules. Click "+" to add a new rule.'));
    } else {
      this.rules.forEach((rule, index) => {
        this.createRuleItem(rule, index);
      });
    }
    
    // 添加新规则按钮
    const addButton = this.rulesContainer.createDiv({ cls: 'regex-rule-add' });
    
    // 添加加号图标和文本
    const textSpan = addButton.createSpan({ cls: 'regex-rule-add-text' });
    textSpan.setText(t('Add new rule'));
    
    // 添加点击事件
    addButton.addEventListener('click', () => {
      const newRule: RegexRule = {
        id: `rule-${Date.now()}`,
        name: '',
        pattern: '',
        color: '#ffeb3b', // 使用固定的默认黄色
        enabled: true
      };
      
      this.rules.push(newRule);
      void this.saveRules();
      this.display(); // 重新渲染整个列表
    });
  }
  
  /**
   * 创建单个规则项