页面左侧是标题和内容,我用Typography组件实现了。现在想在页面右侧根据标题动态生成一个目录（是目录的样子就行），我点击目录的标题，左侧就会滚动到对应的位置

为了实现在页面右侧根据左侧标题动态生成目录并实现导航功能，你可以按照以下步骤操作：

1. **收集信息**: 首先，你需要获取左侧`Typography`组件中的所有标题信息。这通常涉及到遍历它们的实例，提取每个标题的文本和它在HTML结构中的位置。

const titles = document.querySelectorAll('.title');
titles.forEach((title, index) => {
  title.dataIndex = index; // 给每个标题添加一个数据属性，存储其索引
});

2. **构建目录**:
- 创建一个空的`ul`元素，用于存放生成的目录项。
- 使用JavaScript循环，将标题文字转换成列表项，并附带链接，链接指向对应的标题位置。

const directoryList = document.createElement('ul');

titles.forEach(title => {
  const li = document.createElement('li');
  li.textContent = `${title.innerText} <a href="#section${title.dataIndex}">跳转</a>`;
  li.querySelector('a').addEventListener('click', () => {
    window.scrollTo({
      top: title.offsetTop,
      behavior: 'smooth' // 使滚动平滑
    });
  });
  directoryList.appendChild(li);
});

// 将目录添加到右侧区域
rightSideContent.appendChild(directoryList);

3. **定位锚点**:
- 在`<Typography>`组件内，给每个标题添加一个唯一的ID，如`<h2 id="section0">...</h2>`。

4. **样式美化**:
- 根据需要对目录样式进行设计，使其看起来像一个目录。

记得确保以上代码在DOM加载完成后运行，可以放在`DOMContentLoaded`事件监听器中。