如何用Google Apps Script为Google Spreadsheet工具创建首次运行交互式教程

我刚好做过类似的交互式引导功能，完全能满足你要的分步标注、点击切换的需求。下面是一套完整的可落地方案，直接复用就能快速搭建起来：

核心实现思路 #

通过HTML/CSS构建浮动标注框，结合Apps Script获取目标单元格的屏幕坐标来精准定位，再用JS逻辑控制步骤切换——点击当前标注框后自动关闭并弹出下一个步骤的提示，直到所有引导完成。

分步实现代码 #

1. 创建HTML提示面板（命名为TutorialSidebar.html） #

这个HTML负责渲染带箭头的标注框，样式可以根据你的表格风格调整：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .tooltip-container {
        position: absolute;
        background: #2c3e50;
        color: white;
        padding: 10px 15px;
        border-radius: 8px;
        font-size: 14px;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      }
      .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
      }
      .close-btn {
        margin-top: 8px;
        padding: 4px 8px;
        background: #3498db;
        border: none;
        border-radius: 4px;
        color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="tooltip" class="tooltip-container" style="display:none;">
      <div id="tooltip-text"></div>
      <button class="close-btn" onclick="nextStep()">知道了</button>
    </div>

    <script>
      let currentStep = 0;
      const steps = [
        {range: "A2", text: "在此输入姓氏"},
        {range: "B2", text: "从此菜单选择日期"},
        // 可以继续添加更多步骤
      ];

      // 初始化第一步
      window.onload = function() {
        showStep(currentStep);
      };

      // 显示指定步骤的提示框
      function showStep(stepIndex) {
        if (stepIndex >= steps.length) {
          google.script.host.close();
          return;
        }
        const step = steps[stepIndex];
        google.script.run.withSuccessHandler(pos => {
          const tooltip = document.getElementById('tooltip');
          const tooltipText = document.getElementById('tooltip-text');
          tooltipText.textContent = step.text;
          
          // 定位标注框到单元格右上方
          tooltip.style.left = pos.x + 10 + 'px';
          tooltip.style.top = pos.y - 50 + 'px';
          tooltip.style.display = 'block';

          // 添加指向单元格的箭头
          const arrow = document.createElement('div');
          arrow.className = 'tooltip-arrow';
          arrow.style.borderWidth = '8px 8px 8px 0';
          arrow.style.borderColor = 'transparent #2c3e50 transparent transparent';
          arrow.style.left = '-8px';
          arrow.style.top = '20px';
          tooltip.appendChild(arrow);
        }).getCellPosition(step.range);
      }

      // 切换到下一步
      function nextStep() {
        currentStep++;
        const tooltip = document.getElementById('tooltip');
        tooltip.style.display = 'none';
        // 清空箭头元素
        while (tooltip.children.length > 2) {
          tooltip.removeChild(tooltip.lastChild);
        }
        showStep(currentStep);
      }
    </script>
  </body>
</html>

2. 编写Apps Script逻辑（绑定到表格脚本） #

这段代码负责获取单元格的屏幕坐标，以及提供启动教程的入口：

// 添加自定义菜单，方便用户启动教程
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('工具教程')
    .addItem('开始引导', 'showTutorial')
    .addToUi();
}

// 显示教程侧边栏（实际是浮动标注，用侧边栏承载HTML）
function showTutorial() {
  const html = HtmlService.createHtmlOutputFromFile('TutorialSidebar')
    .setTitle('工具使用引导')
    .setWidth(200)
    .setHeight(100);
  SpreadsheetApp.getUi().showSidebar(html);
}

// 获取指定单元格的屏幕坐标
function getCellPosition(rangeA1) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange(rangeA1);
  // 通过获取单元格的边界位置计算屏幕坐标
  const cellBounds = range.getBoundingClientRect();
  return {
    x: cellBounds.left,
    y: cellBounds.top
  };
}

使用说明 #

1. 把上述HTML文件和GS代码分别添加到你的Google Sheets脚本项目中
2. 刷新表格后，顶部会出现「工具教程」菜单，点击「开始引导」就能启动交互式教程
3. 每点击一个标注框的「知道了」按钮，就会自动切换到下一个步骤的提示，直到所有引导完成

你可以根据实际需求修改steps数组里的单元格范围和提示文本，还能调整CSS样式来匹配你的工具视觉风格。

内容的提问来源于stack exchange，提问作者Hurston