Method createRuleItem

src/settings/components/RegexRuleEditor.ts:76–131

* 创建单个规则项 * @param rule 规则对象 * @param index 规则索引

(rule: RegexRule, index: number)

   * @param index 规则索引
   */
  private createRuleItem(rule: RegexRule, index: number) {
    const ruleContainer = this.rulesContainer.createDiv({ cls: 'regex-rule-item' });
    
    // 名称输入框
    const nameInput = new TextComponent(ruleContainer);
    nameInput.setPlaceholder(t('Rule name'));
    nameInput.setValue(rule.name);
    nameInput.onChange(value => {
      rule.name = value;
      void this.saveRules();
    });
    
    // 正则表达式输入框
    const patternInput = new TextComponent(ruleContainer);
    patternInput.setPlaceholder(t('Regular expression with capture groups'));
    patternInput.setValue(rule.pattern);
    patternInput.onChange(value => {
      rule.pattern = value;
      void this.saveRules();
    });
    
    // 颜色文本输入框
    const colorContainer = ruleContainer.createDiv();
    const colorInput = new TextComponent(colorContainer);
    colorInput.setPlaceholder('#ffeb3b');
    colorInput.setValue(rule.color);
    colorInput.inputEl.addClass('color-input'); // 使用CSS类替代内联样式
    colorInput.onChange(value => {
      // 确保颜色值有效
      const colorValue = value.trim();
      if (colorValue && (colorValue.startsWith('#') || colorValue.startsWith('rgb') || colorValue.startsWith('rgba'))) {
        rule.color = colorValue;
        void this.saveRules();
      }
    });
    
    // 删除图标
    const deleteContainer = ruleContainer.createDiv({ cls: 'regex-rule-delete' });
    setIcon(deleteContainer, 'trash-2'); // 使用 Obsidian 的 trash-2 图标
    deleteContainer.setAttr('aria-label', t('Delete rule'));
    deleteContainer.addEventListener('click', () => {
      this.rules.splice(index, 1);
      void this.saveRules();
      this.display(); // 重新渲染整个列表
    });
    
    // 启用/禁用开关 - 直接添加到规则容器中，不使用额外的div
    const toggle = new ToggleComponent(ruleContainer);
    toggle.setValue(rule.enabled);
    toggle.onChange(value => {
      rule.enabled = value;
      void this.saveRules();
    });
    // 为开关添加类名，便于CSS选择器定位
    toggle.toggleEl.addClass('regex-rule-toggle');
  }
  
  /**