DY 自动化示例（ais-douyin-simple）

基于 Vue 3 + Vite + TypeScript 的抖音（DY）自动化示例插件，运行在 AssistsX 中。本项目集成 assistsx-js，旨在为使用 assistsx-js 开发 Android 自动化的开发者提供可参考的项目结构、步骤编写方式与调试流程。

生态关系

flowchart LR
  subgraph dev [开发机]
    Vite["Vite dev :5173"]
    VSCode["VSCode WebView Debug"]
  end
  subgraph phone [Android 手机]
    AssistsX["AssistsX App"]
    DY["抖音 App"]
  end
  Vite -->|"局域网 HTTP"| AssistsX
  VSCode -->|"attach 调试"| AssistsX
  AssistsX -->|"无障碍自动化"| DY

Loading

组件	说明	链接
assistsx-js	Web 端自动化脚本库（节点查找、步骤器、浮窗、日志等）	GitHub
AssistsX	Android 运行平台，加载并执行 assistsx-js 插件	下载 · 源码
本项目	DY 自动化示例插件，演示完整开发与调试流程	当前仓库

assistsx-js 脚本必须在 AssistsX 中运行，无法脱离 AssistsX 单独在浏览器中完成自动化操作。

当前功能

目前实现 两项 独立示例（各功能拆分为独立步骤逻辑，便于单独运行与参考）：

功能	主页按钮	自动化流程概要
检查未读消息	检查未读消息	launch → mainPage → unread
获取未读消息列表	获取未读消息列表	launch → mainPage → openMessageTab → scrollTop → collect

点击主页按钮后，会通过 float.open 打开日志浮窗（src/views/LogPanel.vue），自动执行对应流程并在浮窗中实时展示日志。

更多示例正在陆续添加中。

环境要求

• Node.js 18 及以上
• Android 手机安装 AssistsX，并开启无障碍服务
• 手机已安装抖音（包名 com.ss.android.ugc.aweme）
• 开发机与手机处于同一局域网

快速开始

1. 项目目录下安装依赖

npm install

2. 启动开发服务器

npm run dev

终端会输出局域网地址，例如 http://192.168.x.x:5173。项目已在 vite.config.js 中配置 host: 0.0.0.0、port: 5173，允许手机通过局域网访问。

3. 在 AssistsX 中加载插件

1. 打开 AssistsX → 添加插件 → 选择「局域网加载」或扫描局域网插件
2. 选择本项目的 dev 地址（端口 5173）
3. AssistsX 会读取 public/config.json 作为插件元数据

插件配置示例（public/config.json）：

{
  "name": "DY自动化示例",
  "packageName": "com.dy.automation.example",
  "index": "index.html",
  "icon": "icon.png"
}

新建插件时请修改 name、packageName、icon 等字段；图标文件为 public/icon.png。

4. 运行示例

1. 在 AssistsX 中打开插件，进入主页
2. 点击「检查未读消息」或「获取未读消息列表」
3. 观察日志浮窗中的执行输出

开发模式：测试面板

开发环境（import.meta.env.DEV）下，主页会额外显示「测试面板」按钮，通过 float.open 打开 src/views/TestFloatPanel.vue 浮窗，便于单独调试各步骤，无需从主页完整走一遍流程。

VSCode 调试

项目已内置 WebView 调试配置（.vscode/launch.json、.vscode/tasks.json），可在 VSCode 中对 TypeScript / Vue 源码设置断点，附加到 AssistsX 内运行的 WebView。

前置条件

1. 安装推荐扩展：Android WebView Debug（mpotthoff.vscode-android-webview-debug，见 .vscode/extensions.json）
2. AssistsX 宿主需开启 WebView 调试（WebView.setWebContentsDebuggingEnabled(true)；开源版 AssistsX 通常已支持，若断点无法命中请确认此开关）
3. 手机已通过 AssistsX 加载插件页面（http://<本机局域网 IP>:5173）

调试步骤

1. 用 VSCode 打开本项目
2. 在 .ts / .vue 源码中设置断点（例如 src/steps/douyin-main.ts）
3. 按 F5，或选择运行配置 「Android WebView: Vite 5173 (auto dev server + attach)」
4. preLaunchTask ensure-vite-5173 会自动：释放 5173 端口 → 执行 npm run dev -- --host 0.0.0.0 --port 5173 → 等待 Vite 就绪
5. VSCode 附加到手机 WebView（urlFilter: http://*:5173/*）
6. 在 AssistsX 插件中触发自动化操作，断点应命中

常见问题

现象	排查建议
附加超时	确认手机页面 URL 与 urlFilter 匹配；检查 USB / 无线调试是否正常
断点灰色、无法命中	确认 source map 已生成；webRoot 应为 ${workspaceFolder}；确认 WebView 调试已开启
5173 端口被占用	launch task 在 macOS 下会先 kill 占用进程；其他系统可手动释放端口后重试

项目结构

ais-douyin-simple/
├── public/
│   ├── config.json          # AssistsX 插件配置
│   ├── icon.png             # 插件图标
│   ├── qq-group-qr.png      # 交流群二维码
│   └── wechat-ven-qr.png    # 作者微信二维码
├── src/
│   ├── steps/               # 自动化步骤（Step.run + step.next 链式调用）
│   │   ├── app-launch.ts    # 通用：启动 App、处理安全中心 / 双开弹窗
│   │   └── douyin-main.ts   # DY 主页、未读检查、列表收集逻辑
│   └── views/
│       ├── HomePage.vue     # 插件主页
│       ├── LogPanel.vue     # 日志浮窗 + 自动执行入口
│       └── TestFloatPanel.vue
├── .vscode/                 # F5 调试配置
├── assistsx-resolve.mjs     # 本地 assistsx-js 联调解析
└── vite.config.js           # 局域网 dev server + alias 配置

自动化逻辑集中在 src/steps/，通过 Step.run 与 step.next() 链式组织各步骤；LogPanel.vue 负责触发执行并展示日志。阅读示例时以该目录为准即可。

仓库中的 src/flow-steps/ 为实验性 StepFlow 框架代码，与当前示例无关，可忽略。

本地联调 assistsx-js（可选）

若需同时修改 assistsx-js 源码，本项目支持自动切换本地依赖（见 assistsx-resolve.mjs）：

方式	说明
默认	检测同级目录 ../assistsx-js/src/index.ts，存在则 dev 走本地源码
强制 npm	npm run dev:registry 或设置 ASSISTSX_USE_NPM=1
自定义路径	环境变量 ASSISTSX_JS_LOCAL=/path/to/assistsx-js

更多说明见 assistsx-js README。

npm 脚本

命令	说明
npm run dev	启动开发服务器（5173，允许局域网访问）
npm run dev:registry	强制使用 npm 版 assistsx-js 启动 dev
npm run build	生产构建
npm run preview	预览构建产物（4173 端口）
npm run typecheck	TypeScript 类型检查

交流与反馈

有问题欢迎交流：

交流群	作者微信

也可在以下仓库提交 Issue：

• assistsx-js Issues
• AssistsX Issues