☰

蝶云科技抖音直播数据助手

为蝶云直播设计的浏览器助手。方便大家统计直播数据，快速复制数据，完成数据填报。

作者
ShenDoyle
日安装量
0
总安装量
0
评分
0 0 0
版本
0.9.8
创建于
2025-09-18
更新于
2025-09-19
大小
26.0 KB
许可证
暂无
适用于

插件名称： 蝶云科技抖音直播数据助手

核心定位

这是一款专为蝶云公司设计的，提升抖音直播数据到内部CRM系统录入效率而设计的浏览器增强工具。通过 “抓取 → 存储 → 跨页呈现 → 智能辅助填写” 的工作流，极大地简化了数据复核与手动输入的流程，旨在节省时间、降低出错率。

功能架构总览

脚本的功能可以分为三大模块，分别对应不同的工作场景：

  1. 全局快捷入口模块 (在所有 *.douyin.com 页面生效)
  2. 数据抓取与处理模块 (仅在抖音直播复盘页 .../anchor/review 生效)
  3. 数据显示与智能填报模块 (仅在CRM页生效)

这三大模块由一个可自由拖动、并能记忆位置的悬浮图标作为统一的交互入口。

一、全局快捷入口模块

1. 界面呈现

  • 在用户访问任何 douyin.com 的子域名时（例如主页、视频播放页、创作者中心等），屏幕上都会出现一个悬浮的、可拖动的抖音风格图标。

2. 核心逻辑

  • 在此模块下，图标的功能被设定为单一的快捷方式。
  • 用户行为：单击图标。
  • 脚本响应：调用 GM_openInTab 函数，在新标签页中打开抖音直播数据复盘中心 (https://anchor.douyin.com/anchor/review)。

3. 设计目的

  • 效率提升：为用户提供一个“一键直达”数据复盘页的入口，省去在抖音复杂后台中寻找链接的步骤。
  • 界面简洁：在此场景下，不提供任何数据面板功能，避免在浏览视频等不相关场景下造成干扰。

二、数据抓取与处理模块

1. 触发条件

2. 界面与交互

  • 图标功能转变：悬浮图标的功能从“快捷跳转”变为“打开/关闭数据面板”。
  • 数据面板：一个设计现代、风格类似Apple官网的半透明面板。面板包含：
    • 可拖动的标题栏：用户可以按住面板顶部在屏幕上自由移动。
    • 实时刷新按钮：手动强制与页面数据同步。
    • 关闭按钮。
    • 数据展示区：逐行清晰地列出所有抓取到的直播数据项及其数值。
    • 一键复制按钮：“复制单项”和“复制全部数据”。

3. 核心逻辑与技术实现

  • 数据抓取 (refreshData 函数)：
    • 当面板被打开或点击刷新按钮时，脚本会遍历一个预设的 dataPaths 数组。
    • 该数组包含了每项数据（如“直播主题”、“观看人数”等）在页面HTML中的精确 XPath 路径。
    • 通过 document.evaluate 函数，脚本能精准定位并提取每个XPath路径对应元素的文本内容。
  • 数据格式化：
    • 直播时长：通过 processDuration 函数，使用正则表达式分别匹配“小时”、“分钟”、“秒”的数字，然后通过 (小时*60 + 分钟 + 秒/60) 的公式计算，最终输出一个保留一位小数的分钟数值。
    • 流量来源：通过 processPercentage 函数，简单地移除字符串中的“%”符号。
  • 数据持久化存储：
    • 抓取并格式化完所有数据后，脚本会将这些数据构造成一个对象数组，并通过 GM_setValue 将其序列化为JSON字符串，存储在油猴脚本的本地存储中。这个存储是跨域的，为后续在CRM页面使用奠定了基础。
  • 自动更新 (MutationObserver)：
    • 脚本会监视数据复盘页面的一个核心内容区域（.content--224Y7）。
    • 当用户在页面上进行筛选、排序或切换不同直播场次时，该区域的DOM会发生变化。
    • MutationObserver 会捕获到这些变化，并通过一个防抖函数（debouncedRefresh）来调用 refreshData，从而实现数据面板内容的自动、实时更新，前提是面板处于打开状态。

三、数据显示与智能填报模块

1. 触发条件

2. 界面与交互

  • 悬浮图标：功能与复盘页一致，用于打开/关闭数据显示面板。面板内容直接从本地存储中读取上一次在抖音抓取的数据。
  • 智能填报开关：
    • 图标下方会额外出现一个苹果风格的滑动开关。
    • 此开关独立控制“智能提示”功能的开启与关闭，状态会被记忆。
  • 智能提示工具栏 (Tooltip)：
    • 当“智能填报”开启后，用户点击CRM页面的任意一个可识别的输入框，该工具栏会在输入框左侧优雅地弹出。
    • 它是一个可自由调整宽度并能记忆尺寸的浮动窗口。
    • 交互逻辑：
      • 单击即复制：点击工具栏内的任何数据项，其数值会被复制，并有视觉反馈。
      • 自动关闭：复制成功0.8秒后，工具栏自动消失，以实现流畅的“点击-粘贴-继续”工作流。
      • 手动关闭：点击页面其他位置或按 ESC 键可关闭。

3. 核心逻辑与技术实现

  • 字段识别 (identifyField 函数)：
    • 这是智能提示的核心。当用户聚焦到一个输入框 (focusin 事件触发)，此函数会启动。
    • 它通过分析输入框周围的DOM环境，特别是其父元素的 data-field 和 data-rowid 属性，来与预设的 fieldIdentifierMap (字段标识符映射表) 进行匹配。
    • 这个映射表将CRM系统前端的特定属性组合（如 FBCZXZB,1）翻译成人类可读的数据标签（如“直播时长”）。
  • 动态内容生成 (show 函数)：
    • 识别出字段后，工具栏会动态构建其内容。
    • 信息分层：
      1. 主要匹配：将识别出的字段对应的数据放在最顶部。
      2. 核心参考：“直播主题”和“直播日期”作为上下文，始终显示。
      3. 折叠内容：其余所有数据默认放在一个可折叠的区域内，避免信息过载。
    • 内容换行：通过CSS的 flex-wrap: wrap 属性，当工具栏被用户调窄时，内部的标签和数值会自动换行，保证内容完整性。
  • 定位逻辑：
    • 工具栏的位置是动态计算的。它获取当前激活输入框的屏幕坐标 (getBoundingClientRect)，然后通过计算，将自己的位置设定在输入框的左侧，并与其顶部对齐。