Method renderLyrics

js/ReadingSystem.js:398–423

* 渲染歌词列表

()

   * 渲染歌词列表
   */
  renderLyrics() {
    if (!this.dom.lyricsDisplay) return;

    if (this.dom.lyricsContainer) {
      this.dom.lyricsContainer.scrollTop = 0;
    }

    if (!this.state.currentLyrics.length) {
      setHTML(this.dom.lyricsDisplay, '<p class="placeholder">没有歌词数据</p>');
      return;
    }

    const html = this.state.currentLyrics
      .map(
        (lyric, index) =>
          `<div class="lyric-line" data-index="${index}" data-time="${lyric.time}" tabindex="0" role="button" aria-label="播放第 ${index + 1} 句">
            <div class="lyric-text">${lyric.english}</div>
            ${lyric.chinese ? `<div class="lyric-translation">${lyric.chinese}</div>` : ''}
          </div>`
      )
      .join('');

    setHTML(this.dom.lyricsDisplay, html);
    this.lyricLineEls = qsa('.lyric-line', this.dom.lyricsDisplay);
    this.state.currentLyricIndex = -1;
  }

  /**
   * 处理歌词行激活