如何在Foundry Slate的HTML widget中实现行选中/取消选中及标记功能？

完全可以实现你要的类似Quiver标签选择的交互效果，以下是具体的落地步骤：

核心逻辑 #

通过HTML结构+原生JS维护选中状态，搭配CSS实现颜色高亮和标签显示，点击整行即可切换选中/取消状态，和Quiver的交互逻辑对齐。

1. 构建基础行结构 #

给每行数据添加带唯一标识的容器，内置标签元素（默认隐藏），示例代码：

<div class="variable-row" data-id="var-001">
  <span>用户活跃度</span>
  <span class="top-tag" style="display:none;">Top Variable</span>
</div>
<div class="variable-row" data-id="var-002">
  <span>订单转化率</span>
  <span class="top-tag" style="display:none;">Top Variable</span>
</div>
<!-- 重复n行数据 -->

2. 添加样式实现视觉标记 #

用CSS定义选中行的高亮效果和标签样式，贴近Foundry默认设计风格：

.variable-row {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background-color 0.2s;
}
/* 选中行的高亮样式 */
.variable-row.selected {
  background-color: #e8f4fd;
}
/* Top标签样式 */
.top-tag {
  background-color: #2563eb;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

3. 编写JS处理选中交互 #

维护一个数组记录选中的行ID，点击行时切换状态并更新DOM：

// 初始化选中状态数组
let selectedVars = [];

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.variable-row').forEach(row => {
    row.addEventListener('click', function() {
      const varId = this.getAttribute('data-id');
      const tagElement = this.querySelector('.top-tag');

      if (selectedVars.includes(varId)) {
        // 取消选中：移除样式、隐藏标签、从数组删除ID
        this.classList.remove('selected');
        tagElement.style.display = 'none';
        selectedVars = selectedVars.filter(id => id !== varId);
      } else {
        // 选中：添加样式、显示标签、将ID加入数组
        this.classList.add('selected');
        tagElement.style.display = 'inline-block';
        selectedVars.push(varId);
      }
    });
  });
});

4. 可选：同步到Slate上下文 #

如果需要把选中的变量传递给Slate其他组件（比如下游分析工具），可以用Slate内置API同步状态：

// 在点击事件的最后添加这行代码
window.slate.setContext('selectedTopVariables', selectedVars);

替代方案（无需纯HTML） #

如果觉得纯HTML Widget不够灵活，也可以用Slate原生的表格组件实现：

• 给表格添加「行点击」交互，触发状态变量更新
• 配置条件格式：根据选中状态设置行背景色
• 添加计算列：当行被选中时显示「Top Variable」标签

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