Noah 45ab54ba90 fix(ui): 修复新 UI 侧栏被顶出与平台设置页导航重复 (#1706)
* fix(ui): 去掉 html/body 的 overflow-x: hidden,恢复侧栏与页头吸顶

#1704 引入的 bg-global.css 给 html、body 加了 overflow-x: hidden,任何非 visible
的 overflow 都会把 body 变成滚动容器,侧栏(layout.module.scss .sider)和
PageHeader 的 position: sticky 于是相对 body 而不是视口定位——主内容一长,
整页滚动就把左侧导航和「保存」按钮一起顶出视口。

- 删除 html/body 的 overflow-x: hidden,并在两处样式注明这条约束
- 两个 position: fixed 的背景层改用 inset: 0 铺满视口,不再依赖 100vw,
  也不会撑出横向滚动条

问题 1 of #1705(侧边导航被顶出)。

* fix(ui): 空间配置「平台设置」只保留左侧平台列表一套导航

#1704 把平台设置改成「左列平台列表 + 右栏 Collapse」后,右栏的手风琴仍然
为每个平台渲染一条带平台名的折叠栏,与左列重复(#1705 第二点)。

- 新增 app/ui/plugins/PlatformPanel.tsx:各平台插件的外壳,传入 bare 时只
  输出字段,否则保持原来的 Collapse.Panel(配置覆写弹窗仍在用)
- 10 个平台插件把 Collapse.Panel 换成 PlatformPanel,并透传 bare
- dashboard 右栏不再用 Collapse,改为每个平台一个 <section hidden>:所有
  字段始终挂载,只切换 hidden,保证 PUT /v1/configuration 整表覆盖时其他
  平台的参数与凭据不会因为字段卸载而丢失
- 左列平台列表在页头下方吸顶(position: sticky),右栏面板很长时列表不再
  随内容滚出视口;PageHeader 把自身高度写入 --page-header-height 供其取用;
  Tabs 关闭 tabPaneMotion 并放开 .semi-tabs-pane 的 overflow,否则 pane 会
  成为 sticky 的滚动容器。移动端横排 chip 行保持随内容滚动
- 左列按钮补 aria-pressed,nav 补 aria-label

Fixes #1705

* feat(ui): 空间配置保存校验失败时自动定位到第一个出错字段

平台设置的字段全部挂载、只切换 hidden,未选中的 Tab / 平台面板里的校验
错误用户看不到,表现为点「保存」没有任何反应。

- Form 加 onSubmitFail:把 Semi 的嵌套 errors 拍平成字段路径,按 DOM 顺序
  找到第一个出错字段,切到它所在的 Tab(Tabs 改为受控)与平台面板,再
  scrollIntoView 并聚焦,同时 Toast 提示未通过的项数
- TabPane 内容加 data-tab、平台 section 加 data-platform,供定位使用;
  不改插件接口

Refs #1705

* refactor(ui): 改用应用壳布局解决侧栏被顶出,移除 sticky 补救与 tabPaneMotion 取舍

按 review 意见(#1706)不再靠 position: sticky 解决问题一,改成简单的应用壳:

- layout.module.scss:.app 改为 height: 100vh(100dvh)+ overflow: hidden 的 flex 容器,
  页面本身不滚动;.sider 是固定宽度的普通子元素(撑满壳高,去掉 sticky/top/100vh);
  .main 加 min-height: 0 + overflow: auto,成为唯一的滚动容器。侧栏、页脚服务灯
  自然留在视口内,PageHeader 原有的 position: sticky 相对 .main 吸顶,无需改动
- 去掉为让平台列表在 Tab 面板内 sticky 而加的补救:.platformNav 的 sticky /
  --page-header-height / max-height、PageHeader 的 ResizeObserver、Tabs 的
  tabPaneMotion={false} 以及 .semi-tabs-pane 的 overflow 覆盖,Tab 切换动画恢复。
  平台列表改回随内容滚动
- bg-global.css:文档不再滚动,html/body 不需要 overflow 规则,注释改为说明现状;
  两个 fixed 背景层保持 inset: 0

验证:tsc 0 错误、next build 通过;13 页 × 浅色 / 深色 / 折叠 / 移动端 390 / 平板 760,
主区滚到底后 document.scrollHeight == innerHeight(文档不滚)、aside top 0、页脚
bottom == innerHeight、header top 0、main 无横向溢出;Semi Select 下拉(主区预滚 1.2k px
及打开后继续滚动)、Popconfirm、配置覆写 Modal 及其内部 Select、Toast 位置全部正确;
切遍 10 个平台后保存 PUT 73/73 键(3 次);校验失败自动定位三场景通过(2 轮)。

Refs #1705

* refactor(ui): 平台设置去掉外层嵌套卡片,改两栏独立滚动布局

按 review 第二条意见(#1706):平台列表不用 sticky,也不随内容滚走——去掉包在
「平台列表 + 面板」外面的嵌套卡片,让两栏并排、各自独立滚动。

- dashboard/page.tsx:删掉 dc.content / rootConfigPanel / main / content 四层包裹和
  平台设置里的 framePlatformConfig 卡片与重复的「平台设置」标题;页面主体改为
  .page(占满页头以下的剩余高度)→ Form → Tabs,每个 Tab 面板在自己内部滚动,
  页面本身不滚,页头「保存」始终可见。去掉底部两个 Space 占位
- dashboard.module.scss:重写。删除 #1704 之前遗留的整段 .rootConfigPanel 嵌套规则
  (其中 frameInside / group / lineStory 等类早已无人引用);Form / Tabs /
  semi-tabs-content / semi-tabs-pane(含开启动画时的 motion-overlay)改为
  flex: 1 + min-height: 0 的列容器,把高度让给当前面板,并补回
  .semi-tabs-pane-inactive 的 display: none(本模块选择器特异性更高)
- 平台设置:.platformLayout 两栏,.platformNav 160px、align-self: flex-start、
  max-height: 100% + overflow-y: auto(矮视口时列表自己滚),.platformBody
  flex: 1 + overflow-y: auto。右栏再长列表也不动
- 全局设置 / 开发者选项一致处理:frameDownload / frameUpload / frameDeveloper 不再是
  带边框和 50px 内边距的卡片,改为分区标题 + 分隔线的普通分区,面板 .pane 自身滚动
- 移动端(≤680px):两栏改为上下堆叠,平台列表是横向滑动的标签行,固定在面板顶部
  不随字段滚走
- 自定义背景开启时给两个滚动面板垫一层 75% 的 bg-1 半透明底色,保证文字可读

验证:tsc 0 错误、next build 通过;空间配置页在 1440 / 760 / 390 × 浅 / 深 / 折叠 /
520px 矮视口下:文档与 <main> 均不滚动,页头与「保存」始终在视口内,右栏滚到底
(哔哩哔哩面板 1223px)时平台列表位置不变,矮视口下列表自身可滚;全局设置面板独立
滚动;切遍 10 个平台后保存 PUT 73/73 键(4 次);校验失败自动定位三场景通过(3 轮,
scrollIntoView 在嵌套滚动容器内正常);Select 下拉在面板预滚 1k px 及滚动中跟随触发器,
Popconfirm / Modal / Toast 位置正确;其余 12 页布局探针与上一提交一致。

Refs #1705

* fix(ui): 更新日志页内容不再覆盖导航顶栏

应用壳布局下页头真正吸顶后暴露出来的问题(review 第三条,#1706):更新日志页把
PageHeader 又包在一层 position: sticky; z-index: 1 的 Semi Layout.Header 里,
形成一个层级只有 1 的 stacking context,PageHeader 自己的 z-index: 10 只在这层
内部生效;而版本卡片流 .feed 又设了 position: relative; z-index: 1,DOM 顺序在
后,滚动时就画在页头之上。

- changelog/page.tsx:去掉外层 Header,与其它页一样直接渲染 PageHeader
- changelog.module.scss:删掉 .feed / .center 的 position: relative; z-index: 1

验证:10 个带页头的页面滚到底后对页头内 6 个点做 elementFromPoint 命中测试,
全部命中页头自身(修前 /changelog 有 4 个点命中版本卡片头);/history 播放器
Modal 居中且在最上层;/logviewer、/status 等无层叠。

Refs #1705
2026-09-22 04:20:48 +00:00
2025-07-16 03:43:05 +08:00
2023-12-08 23:37:40 +08:00
2023-12-31 23:56:40 +08:00
2024-01-17 22:15:17 +08:00
2024-01-27 07:46:15 +00:00
2019-07-28 17:54:29 +08:00
2024-12-31 16:45:21 +00:00
2024-12-31 16:45:21 +00:00
2021-01-20 02:54:06 +08:00

biliup

Python PyPI PyPI - Downloads License Telegram

GitHub Issues GitHub Stars GitHub Forks

🛠️ 功能

  • 提供 skill,让你的 Agent 成为 up 主: npx skills add biliup/biliup
  • 开箱即用,多种安装方式,提供可视化 WebUi 界面
  • 多主播录制/上传,24X7 无人值守运行,高自定义元信息
  • 录制同时抓取弹幕,输出 XML 弹幕文件
  • 作为自动化流程中的命令行工具封装使用
  • 边录边传 0 落盘

论坛:BBS

📺 支持平台

内置 19 个直播平台解析,未匹配的地址会交给通用适配器(依赖本机的 yt-dlp / Streamlink)尝试处理。

平台 站点 弹幕
哔哩哔哩 live.bilibili.com、b23.tv ✅
抖音 douyin.com ✅
斗鱼 douyu.com ✅
虎牙 huya.com ✅
快手 kuaishou.com、chenzhongtech.com
AcFun acfun.cn
网易 CC cc.163.com
映客 inke.cn
猫耳 FM missevan.com
KilaKila / 红豆 FM live.kilakila.cn、hongdoufm.com
YY yy.com
TTingLive ttinglive.com
Twitch twitch.tv(直播与录像) ✅
YouTube youtube.com、youtu.be ✅
TwitCasting twitcasting.tv ✅
niconico nicovideo.jp
AfreecaTV afreecatv.com
Bigo Live bigo.tv
Picarto picarto.tv
通用适配器 其他 http(s) 地址

📜 更新日志

Important

Disclaimer / 免责声明

  • 本项目仅供个人学习研究,不保证稳定性,不提供技术支持
  • 使用本项目产生的一切后果由用户自行承担
  • 禁止商业用途,请遵守版权及平台规定
  • This project is for personal learning and research purposes only
  • No stability guarantee or technical support provided
  • Users are solely responsible for any consequences of using this project
  • Commercial use is strictly prohibited
  • Please respect copyright and platform ToS

📜 使用文档

B 站命令行投稿工具,支持短信登录、账号密码登录、扫码登录、浏览器登录以及网页Cookie登录,并将登录后返回的 cookie 和 token 保存在 cookies.json 中,可用于其他项目。

  • 下载 Release: biliupR
  • 获取命令帮助 biliup --help
  • 登录信息文件可用 -u/--user-cookie 指定,便于多账号切换

文档地址:https://biliup.github.io/biliup-rs

Upload video to bilibili.

Usage: biliup [OPTIONS] <COMMAND>

Commands:
  login     登录B站并保存登录信息
  renew     手动验证并刷新登录信息
  upload    上传视频
  append    是否要对某稿件追加视频
  show      打印视频详情
  comments  查看视频评论
  reply     回复视频评论,默认只打印将要回复的内容
  dump-flv  输出flv元数据
  download  下载视频
  server    启动web服务,默认端口19159
  list      列出所有已上传的视频
  help      Print this message or the help of the given subcommand(s)

Options:
  -p, --proxy <PROXY>              配置代理
  -u, --user-cookie <USER_COOKIE>  登录信息文件 [default: cookies.json]
      --rust-log <RUST_LOG>        [default: tower_http=debug,info]
  -h, --help                       Print help
  -V, --version                    Print version

启动录制服务

启动web服务,默认端口19159

Usage: biliup server [OPTIONS]

Options:
  -b, --bind <BIND>            Specify bind address [default: 127.0.0.1]
  -p, --port <PORT>            Port to use [default: 19159]
      --auth                   开启登录密码认证
      --secure-session-cookie  为会话 Cookie 附加 Secure 属性。仅当通过 HTTPS 反向代理访问 Web UI 时开启; 直接通过 HTTP 远程访问时开启会导致浏览器丢弃登录态
  -c, --config <FILE>          使用 biliup 1.0.7 风格配置文件启动录制
  -h, --help                   Print help

Important

自 #1660 起,--bind 的默认值由 0.0.0.0 改为 127.0.0.1,即默认只监听本机,局域网/公网无法直接访问。 如需从其他设备访问,请加上 --bind 0.0.0.0 --auth,详见下方「🔓 远程访问」一节。Docker 镜像已内置该参数,不受影响。

单独下载一场直播/视频,无需启动服务:

biliup download <URL> -o "./video/%Y-%m-%dT%H_%M_%S{title}" --split-time 1h

--split-size 与 --split-time 可按体积或时长自动分段,-o 支持 {title} 占位符与 strftime 时间格式。

🚀 快速开始

Windows

Linux 或 macOS

  1. 安装 uv
  2. 安装:uv tool install biliup
  3. 启动:biliup server --auth
  4. 访问 WebUI:http://127.0.0.1:19159(默认只监听本机,远程访问见下方说明)

Termux

Note

默认下载器 stream-gears 由 Rust 实现,无需外部依赖。若配置 ffmpeg 下载器或使用后处理,需要本机安装 ffmpeg;YouTube、niconico 等平台与通用适配器则依赖 yt-dlp 或 streamlink。Docker 镜像已内置 ffmpeg。

🔓 远程访问(监听 0.0.0.0)

默认的 127.0.0.1 只允许本机访问。需要从其他设备访问时,显式指定 --bind 0.0.0.0 并开启 --auth:

biliup server --bind 0.0.0.0 --auth

首次打开 http://your-ip:19159 会引导设置管理员密码(用户名固定为 biliup),之后即可正常登录使用。

Note

绑定非回环地址时必须同时开启 --auth,否则会拒绝启动,避免无认证的 Web API 被暴露:

refusing to expose the unauthenticated Web API on 0.0.0.0:19159; use a loopback bind address or enable --auth

Warning

将 Web UI 暴露到公网存在风险,建议仅在可信局域网内使用,或置于反向代理之后。 首次访问即可设置管理员密码,请在启动后立即完成初始化,避免被他人抢先占用。 若通过 HTTPS 反向代理访问,请加上 --secure-session-cookie;直接以 HTTP 远程访问时不要加,否则浏览器会丢弃登录态(见 #1669)。

Docker

镜像已内置 --bind 0.0.0.0 --auth,开箱即用,无需额外配置:

docker compose up -d

打开 http://your-ip:19159 设置管理员密码即可。录播与配置默认持久化在容器的 /opt 卷中。

Important

若要自定义 command,必须带上 --bind 0.0.0.0。容器内若监听 127.0.0.1,宿主机的端口映射无法转发进容器,Web UI 将完全无法访问。

📤 边录边传(sync-downloader)

把 downloader 设为 sync-downloader 后,ffmpeg 会把直播流 remux 成 Matroska 写到 stdout,按 UPOS 分片一边录一边上传,每录满 file_size(默认 2.5 GB,向上对齐到 10 MiB)就作为一 P 追加到同一稿件。前提:

  • 本机 PATH 中有 ffmpeg;HLS 流(B 站 bili_protocol = "hls_fmp4")若装有 streamlink 会用它拉流再交给 ffmpeg,没有则由 ffmpeg 直拉。
  • 主播必须绑定上传模板,且模板对应的 cookies 文件可用;uploader = "Noop" 或没有模板时不会录制,日志会给出 边录边传需要先为主播设定上传模板。
  • 上传并发固定 3 线程,不受 threads、segment_time 控制。
downloader = "sync-downloader"
uploader = "bili_web"
file_size = 2621440000          # 每 P 大小,可按上传带宽调小
# sync_save_dir = "/data/sync"  # 可选:额外保留每 P 的本地副本

[streamers."某主播"]
url = ["https://live.bilibili.com/1234"]
title = "{streamer}%Y-%m-%d 直播录像"
tid = 171
user_cookie = "cookies.json"

行为说明:

  • 录制期间每 P 会同时写入系统临时目录($TMPDIR/biliup-sync/worker-<id>/)作为兜底;预传完整且校验一致时直接 complete,否则(直播提前结束、上传落后)按实际长度从临时文件重传。投稿确认后临时文件删除,设置了 sync_save_dir 的副本保留并交给 postprocessor。
  • 停止/暂停/编辑主播只会结束当前分段,已录内容仍会上传并投稿;上传或投稿失败时保留有内容的分段文件并在日志中打印路径,可手动补传。
  • B 站直链约 1 小时过期。分段结束后拉不到数据时会立刻交回监控循环重新解析直链,并在同一稿件上继续追加分 P。
  • 排查问题时留意 ERROR ... 下载流程出错 日志:会带上具体原因(cookies 文件路径、preupload 拒绝等),而不是静默退回落盘录制。

🧑‍💻开发

架构概览

Rust后端 + 精简 Python 包 + Next.js前端的混合架构。

graph TB
    subgraph "🌐 前端层"
        UI[Next.js Web界面<br/>React + TypeScript<br/>Semi UI组件库]
    end

    subgraph "⚡ Rust后端服务"
        CLI[命令行与 Web API<br/>biliup-cli<br/>REST API / WebUI / 配置导入]
        CORE[核心库<br/>biliup<br/>直播解析 / 下载 / 上传]
        DANMAKU[弹幕库<br/>danmaku<br/>多平台协议 / XML输出]
        GEARS[Python绑定<br/>stream-gears<br/>python -m biliup 入口]
    end

    subgraph "🐍 Python包"
        PYENTRY[最小入口<br/>biliup.__main__<br/>调用 stream_gears.main_loop]
        PYUPLOAD[投稿库<br/>bili_webup / bili_webup_sync<br/>供外部项目调用]
    end

    subgraph "🗄️ 数据层"
        DB[(SQLite数据库<br/>配置存储<br/>任务状态 & 日志)]
        FILES[文件系统<br/>视频分段 / 弹幕XML<br/>缓存与临时文件]
    end

    subgraph "🌍 外部服务"
        BILI[Bilibili API<br/>视频上传服务]
        STREAMS[直播平台<br/>B站/斗鱼/虎牙/抖音/Twitch等]
    end

    UI --> CLI
    CLI --> CORE
    CLI --> DANMAKU
    CLI --> DB
    CLI --> FILES
    CORE --> STREAMS
    CORE --> BILI
    DANMAKU --> STREAMS
    DANMAKU --> FILES
    GEARS --> CLI
    PYENTRY --> GEARS
    PYUPLOAD --> BILI

    style UI fill:#e1f5fe
    style CLI fill:#f3e5f5
    style CORE fill:#f3e5f5
    style DANMAKU fill:#f3e5f5
    style GEARS fill:#f3e5f5
    style PYENTRY fill:#e8f5e8
    style PYUPLOAD fill:#e8f5e8
    style DB fill:#fff3e0
    style FILES fill:#fff3e0
    style BILI fill:#ffebee
    style STREAMS fill:#ffebee

目录结构

路径 说明
crates/biliup 核心库:直播解析、下载器、B 站投稿与凭据管理
crates/biliup-cli 命令行与 Web 服务:REST API、WebUI 托管、录制调度
crates/danmaku 弹幕客户端:多平台协议解析与 XML 输出
crates/stream-gears PyO3 绑定,暴露给 python -m biliup
app、public Next.js WebUI 源码;npm run build 产物输出到 out/ 并由后端内嵌
biliup 精简 Python 包:最小入口与可供外部调用的投稿库
tauri-app 桌面端外壳(实验性)

frontend

  1. 确保 Node.js 版本 ≥ 18.17(Next.js 14 要求)
  2. 安装依赖:npm i
  3. 启动开发服务器:npm run dev
  4. 访问:http://localhost:3000

Python

  1. 安装依赖 maturin dev
  2. npm run build
  3. 启动 Biliup:python3 -m biliup

Rust-cli

  1. npm run build
  2. 构建 cargo build --release --bin biliup
  3. 开发启动 BiliupR:cargo run

Note

biliup-cli 通过 rust-embed 内嵌前端产物目录 out/,因此在 cargo build / cargo test 之前必须先执行 npm run build,否则编译会因 out/ 不存在而失败。

测试

cargo test -p biliup -p biliup-cli -p danmaku

🤝Credits

  • Thanks ykdl, youtube-dl, streamlink provides downloader.
  • Thanks THMonster/danmaku.

💴捐赠

爱发电 »

⭐Stars

Star History Chart

S
Description
自动直播录制、投稿、twitch、ytb频道搬运工具。命令行投稿(B站)和视频下载工具,提供多种登录方式,支持多p。边录边传0落盘
https://biliup.github.io/biliup/
Readme MIT
6.7 MiB
0 Stars 1 Watchers 0 Forks
Languages
Rust 75.6%
TypeScript 16.6%
Python 4.8%
SCSS 2%
JavaScript 0.4%
Other 0.5%