已选 0
点标题可直接下载
`;
document.body.appendChild(
panel
);
bindDragAndMin(
panel
);
initStaticDropdowns();
mountOfficialLogo();
startLogoWatcher();
panel.addEventListener(
'input',
event => {
if (
!event.target.matches(
'.tm-search'
)
) {
return;
}
state.search =
event.target.value ||
'';
renderItems();
}
);
panel.addEventListener(
'change',
event => {
if (
event.target.matches(
'.tm-select-all'
)
) {
const visibleItems =
getVisibleItems();
if (
event.target.checked
) {
for (
const item
of visibleItems
) {
state.selectedKeys.add(
item.key
);
}
} else {
for (
const item
of visibleItems
) {
state.selectedKeys.delete(
item.key
);
}
}
renderItems();
return;
}
if (
event.target.matches(
'.tm-item-check'
)
) {
const key =
event.target
.dataset
.key;
if (
!key
) {
return;
}
if (
event.target.checked
) {
state.selectedKeys.add(
key
);
} else {
state.selectedKeys.delete(
key
);
}
updateSelectedCount();
}
}
);
panel.addEventListener(
'click',
async event => {
/*
* Shift + 点击选框：
* 与上一次点击的选框之间连续选中/取消选中。
*/
const itemCheck =
event.target.closest(
'.tm-item-check'
);
if (
itemCheck
) {
const key =
itemCheck.dataset.key;
if (
!key
) {
return;
}
if (
event.shiftKey &&
state.lastCheckedKey &&
state.lastCheckedKey !==
key
) {
event.preventDefault();
const wasSelected =
state.selectedKeys.has(
key
);
toggleRangeSelection(
state.lastCheckedKey,
key,
!wasSelected
);
state.lastCheckedKey =
key;
renderItems();
return;
}
state.lastCheckedKey =
key;
/*
* 普通点击仍走 change 事件处理。
*/
}
/*
* 自定义下拉框。
*/
const option =
event.target.closest(
'.tm-select-option'
);
if (
option
) {
const root =
option.closest(
'.tm-dropdown'
);
setDropdownValue(
root,
option
.dataset
.value,
option
.querySelector(
'.tm-option-text'
)
?.textContent
?.trim()
);
root.classList.remove(
'open'
);
return;
}
const trigger =
event.target.closest(
'.tm-select-trigger'
);
if (
trigger
) {
const root =
trigger.closest(
'.tm-dropdown'
);
const opening =
!root.classList.contains(
'open'
);
closeDropdowns(
root
);
root.classList.toggle(
'open',
opening
);
return;
}
/*
* Logo：
* 单击下载；
* 拖动以后不触发。
*/
const logo =
event.target.closest(
'.tm-logo-host'
);
if (
logo
) {
if (
panel.dataset.justDragged ===
'1'
) {
return;
}
await startQuickCurrent();
return;
}
/*
* 标题下载逻辑保持不变。
*/
const title =
event.target.closest(
'.tm-item-title'
);
if (
title
) {
await startSingle(
findItem(
title
.dataset
.key
)
);
return;
}
const button =
event.target.closest(
'button[data-action]'
);
if (
!button
) {
return;
}
try {
if (
button
.dataset
.action ===
'toggle-search'
) {
const wrap =
button.closest(
'.tm-search-wrap'
);
const input =
wrap
?.querySelector(
'.tm-search'
);
if (
!wrap ||
!input
) {
return;
}
const opened =
wrap.classList.toggle(
'open'
);
button.classList.toggle(
'active',
opened
);
if (
opened
) {
requestAnimationFrame(
() => {
input.focus();
input.select();
}
);
} else {
input.blur();
if (
input.value ||
state.search
) {
input.value =
'';
state.search =
'';
renderItems();
}
}
return;
}
if (
button
.dataset
.action ===
'download'
) {
await startSelected();
return;
}
if (
button
.dataset
.action ===
'download-audio'
) {
await startSelectedAudio();
return;
}
if (
button
.dataset
.action ===
'download-subtitle'
) {
await startSelectedSubtitles();
return;
}
if (
button
.dataset
.action ===
'load-list'
) {
const limitInput =
$(
`#${PANEL_ID} .tm-list-limit`
);
const startInput =
$(
`#${PANEL_ID} .tm-list-date-start`
);
const endInput =
$(
`#${PANEL_ID} .tm-list-date-end`
);
const autoScrollInput =
$(
`#${PANEL_ID} .tm-list-autoscroll-check`
);
await loadListItems({
maxCount:
limitInput
?.value ||
0,
dateStart:
startInput
?.value ||
'',
dateEnd:
endInput
?.value ||
'',
autoScroll:
autoScrollInput
?.checked ||
false,
fetchMore:
true,
});
setStatus(
`列表已刷新 · ${state.listLoadedCount} 个视频`,
'ok'
);
return;
}
} catch (err) {
console.error(
'[BiliDL]',
err
);
setStatus(
`失败：${
err
?.message ||
err
}`,
'error'
);
}
}
);
document.addEventListener(
'click',
event => {
if (
!event.target.closest(
`#${PANEL_ID} .tm-dropdown`
)
) {
closeDropdowns();
}
}
);
document.addEventListener(
'keydown',
event => {
if (
event.key ===
'Escape'
) {
closeDropdowns();
}
}
);
return panel;
}
/*
* =========================================================
* 初始化
* =========================================================
*/
async function initPage(
force = false
) {
if (
state.busy &&
!force
) {
return;
}
const seq =
++state.initSeq;
state.listMode =
isListPage();
createPanel();
mountOfficialLogo();
setStatus(
'正在快速解析合集 / 分P…'
);
setProgress(
0,
'解析中'
);
const result =
isListPage()
? await initListPage()
: await parseResourcesFast();
if (
seq !==
state.initSeq
) {
return;
}
updateListBatchUI();
const currentItem =
getCurrentItem() ||
state.items[0];
await probeFormats(
currentItem
);
const videoCount =
new Set(
state.items.map(
item =>
item.bvid
)
).size;
const description =
state.listMode
? `${state.listLoadedCount} / ${state.listTotal} 个视频`
: state.hasCollection
? `${videoCount} 个视频 · ${state.items.length} 个条目`
: state.items.length >
1
? `${state.items.length} 个分P`
: '单视频';
setStatus(
`解析完成 · ${description}`,
'ok'
);
setProgress(
0,
'等待'
);
renderItems();
return result;
}
/*
* =========================================================
* SPA
* =========================================================
*/
async function refreshForUrlChange() {
/*
* 如果此时正在下载，
* 等当前任务结束后再解析新页面。
*/
while (
state.busy
) {
await sleep(
300
);
}
await initPage();
}
function installSpaWatcher() {
const fire =
() =>
window.dispatchEvent(
new Event(
'tm-bili-urlchange'
)
);
for (
const name
of [
'pushState',
'replaceState',
]
) {
const original =
history[name];
history[name] =
function (
...args
) {
const result =
original.apply(
this,
args
);
fire();
return result;
};
}
window.addEventListener(
'popstate',
fire
);
window.addEventListener(
'tm-bili-urlchange',
() => {
setTimeout(
() => {
if (
location.href ===
state.href
) {
return;
}
state.href =
location.href;
refreshForUrlChange()
.catch(
err => {
setStatus(
`自动刷新失败：${
err
?.message ||
err
}`,
'error'
);
}
);
},
300
);
}
);
setInterval(
() => {
if (
location.href ===
state.href
) {
return;
}
state.href =
location.href;
refreshForUrlChange()
.catch(
err => {
setStatus(
`自动刷新失败：${
err
?.message ||
err
}`,
'error'
);
}
);
},
1000
);
}
/*
* =========================================================
* CSS
* =========================================================
*/
GM_addStyle(`
#${PANEL_ID} {
--bili-blue:
${BILI_BLUE};
--bili-blue-soft:
rgba(
0,
174,
236,
.09
);
--bili-blue-selected:
rgba(
0,
174,
236,
.13
);
--text:
#18191c;
--muted:
#9499a0;
--border:
#e3e5e7;
/*
* 所有可见控件统一圆角。
*/
--radius:
12px;
position:
fixed;
left:
calc(
50% +
10px
);
right:
auto;
top:
72px;
width:
430px;
max-height:
calc(
100vh -
92px
);
z-index:
2147483646;
box-sizing:
border-box;
/*
* 自定义下拉菜单需要溢出窗口。
*/
overflow:
visible;
color:
var(
--text
);
background:
rgba(
255,
255,
255,
.985
);
border:
1px solid
rgba(
0,
0,
0,
.07
);
border-radius:
var(
--radius
);
box-shadow:
0 12px 36px
rgba(
0,
0,
0,
.14
);
backdrop-filter:
blur(
18px
);
-webkit-backdrop-filter:
blur(
18px
);
font:
13px/1.45
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Microsoft YaHei",
sans-serif;
transition:
width .18s ease,
box-shadow .18s ease;
}
#${PANEL_ID} * {
box-sizing:
border-box;
}
#${PANEL_ID} button,
#${PANEL_ID} input {
font:
inherit;
}
/*
* =====================================================
* Header
* =====================================================
*/
#${PANEL_ID} .tm-head {
height:
76px;
padding:
0 13px
0 17px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
16px;
cursor:
grab;
user-select:
none;
background:
rgba(
255,
255,
255,
.985
);
border-radius:
var(
--radius
)
var(
--radius
)
0
0;
border-bottom:
1px solid
#f0f1f2;
}
#${PANEL_ID}
.tm-head.dragging {
cursor:
grabbing;
}
#${PANEL_ID} .tm-brand {
position:
relative;
width:
230px;
height:
76px;
flex:
0 0 230px;
}
#${PANEL_ID} .tm-brand-line {
position:
absolute;
left:
0;
top:
50%;
width:
100%;
height:
30px;
transform:
translateY(
-50%
);
display:
flex;
align-items:
center;
gap:
11px;
}
/*
* Logo：
* 不再有任何 hover / focus 蓝色高亮。
*/
#${PANEL_ID} .tm-logo-host {
width:
78px;
height:
30px;
flex:
0 0 78px;
display:
flex;
align-items:
center;
justify-content:
flex-start;
overflow:
hidden;
color:
var(
--bili-blue
);
cursor:
pointer;
background:
transparent !important;
border:
none;
border-radius:
0;
outline:
none !important;
box-shadow:
none !important;
transition:
opacity .15s ease;
}
#${PANEL_ID}
.tm-logo-host:hover,
#${PANEL_ID}
.tm-logo-host:focus,
#${PANEL_ID}
.tm-logo-host:focus-visible,
#${PANEL_ID}
.tm-logo-host:active {
background:
transparent !important;
outline:
none !important;
box-shadow:
none !important;
}
#${PANEL_ID}
.tm-head.dragging
.tm-logo-host {
cursor:
grabbing;
}
#${PANEL_ID}
.quick-busy
.tm-logo-host,
#${PANEL_ID}.quick-busy
.tm-logo-host {
opacity:
.48;
cursor:
wait;
}
#${PANEL_ID}
.tm-logo-host.is-svg
.tm-bili-official-svg {
display:
block !important;
width:
78px !important;
height:
30px !important;
max-width:
78px !important;
max-height:
30px !important;
margin:
0 !important;
padding:
0 !important;
flex:
none !important;
color:
var(
--bili-blue
) !important;
}
#${PANEL_ID}
.tm-logo-host.is-svg
.tm-bili-official-svg path,
#${PANEL_ID}
.tm-logo-host.is-svg
.tm-bili-official-svg use,
#${PANEL_ID}
.tm-logo-host.is-svg
.tm-bili-official-svg polygon {
fill:
var(
--bili-blue
) !important;
color:
var(
--bili-blue
) !important;
}
#${PANEL_ID} .tm-bili-fallback-logo {
display:
block;
width:
29px;
height:
29px;
object-fit:
contain;
}
#${PANEL_ID} .tm-brand-divider {
width:
1px;
height:
19px;
flex:
0 0 1px;
margin:
0 1px;
background:
var(
--border
);
}
#${PANEL_ID} .tm-brand-name {
flex:
0 0 auto;
color:
var(
--text
);
font-size:
18px;
line-height:
30px;
font-weight:
700;
letter-spacing:
-.25px;
white-space:
nowrap;
}
#${PANEL_ID} .tm-head-actions {
flex:
0 0 auto;
display:
flex;
align-items:
center;
}
#${PANEL_ID} .tm-icon-btn {
width:
36px;
height:
36px;
flex:
0 0 36px;
padding:
0;
display:
grid;
place-items:
center;
border:
1px solid
var(
--border
);
border-radius:
var(
--radius
);
color:
#61666d;
background:
#fff;
outline:
none;
font-size:
20px;
line-height:
1;
cursor:
pointer;
transition:
border-color .15s ease,
color .15s ease,
background .15s ease,
transform .1s ease;
}
#${PANEL_ID}
.tm-icon-btn:hover:not(:disabled) {
color:
var(
--bili-blue
);
border-color:
rgba(
0,
174,
236,
.44
);
background:
var(
--bili-blue-soft
);
}
#${PANEL_ID}
.tm-icon-btn:active:not(:disabled) {
transform:
scale(
.95
);
}
/*
* =====================================================
* 最小化
* =====================================================
*/
#${PANEL_ID}.minimized {
width:
150px;
box-shadow:
0 9px 30px
rgba(
0,
0,
0,
.13
);
}
#${PANEL_ID}.minimized .tm-body {
display:
none;
}
#${PANEL_ID}.minimized .tm-head {
height:
70px;
padding:
0 12px
0 14px;
gap:
5px;
border-radius:
var(
--radius
);
border-bottom-color:
transparent;
}
#${PANEL_ID}.minimized .tm-brand {
width:
78px;
height:
70px;
flex:
0 0 78px;
}
#${PANEL_ID}.minimized .tm-brand-line {
width:
78px;
}
#${PANEL_ID}.minimized .tm-brand-divider,
#${PANEL_ID}.minimized .tm-brand-name {
display:
none;
}
#${PANEL_ID}.minimized .tm-icon-btn {
width:
34px;
height:
34px;
flex-basis:
34px;
}
/*
* =====================================================
* Body
* =====================================================
*/
#${PANEL_ID} .tm-body {
padding:
12px 15px
14px;
display:
flex;
flex-direction:
column;
gap:
9px;
max-height:
calc(
100vh -
178px
);
background:
rgba(
255,
255,
255,
.985
);
border-radius:
0
0
var(
--radius
)
var(
--radius
);
}
#${PANEL_ID} .tm-row {
display:
grid;
grid-template-columns:
88px
1fr;
align-items:
center;
gap:
9px;
}
#${PANEL_ID} .tm-row label {
color:
#61666d;
font-size:
14px;
}
/*
* =====================================================
* 自定义下拉
* =====================================================
*/
#${PANEL_ID} .tm-dropdown {
position:
relative;
min-width:
0;
}
#${PANEL_ID} .tm-select-trigger {
width:
100%;
height:
42px;
padding:
0 13px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
12px;
border:
1px solid
var(
--border
);
border-radius:
var(
--radius
);
color:
var(
--text
);
background:
#fff;
outline:
none;
cursor:
pointer;
text-align:
left;
transition:
border-color .15s ease,
box-shadow .15s ease,
background .15s ease;
}
#${PANEL_ID}
.tm-select-trigger:hover:not(:disabled) {
border-color:
#c9ccd0;
}
#${PANEL_ID} .tm-select-label {
min-width:
0;
overflow:
hidden;
white-space:
nowrap;
text-overflow:
ellipsis;
}
/*
* 箭头永远固定朝下。
* 打开和关闭均不旋转、不移动。
*/
#${PANEL_ID} .tm-select-arrow {
width:
18px;
height:
18px;
flex:
0 0 18px;
display:
grid;
place-items:
center;
color:
#61666d;
transform:
none !important;
}
#${PANEL_ID} .tm-select-arrow svg {
width:
16px;
height:
16px;
display:
block;
fill:
none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
#${PANEL_ID}
.tm-dropdown.open
.tm-select-trigger {
border-color:
var(
--bili-blue
);
box-shadow:
0 0 0 3px
var(
--bili-blue-soft
);
}
#${PANEL_ID}
.tm-dropdown.open
.tm-select-arrow {
color:
#61666d;
transform:
none !important;
}
/*
* 菜单本体有内边距，
* 每个选项之间也有 6px 真正空隙。
*/
#${PANEL_ID} .tm-select-menu {
position:
absolute;
left:
0;
right:
0;
top:
calc(
100% +
7px
);
z-index:
60;
max-height:
255px;
padding:
7px;
display:
flex;
flex-direction:
column;
gap:
6px;
overflow-x:
hidden;
overflow-y:
auto;
opacity:
0;
visibility:
hidden;
transform:
translateY(
-4px
);
border:
1px solid
var(
--border
);
border-radius:
var(
--radius
);
background:
#fff;
box-shadow:
0 12px 30px
rgba(
0,
0,
0,
.15
);
transition:
opacity .12s ease,
transform .12s ease,
visibility .12s ease;
}
#${PANEL_ID}
.tm-dropdown.open
.tm-select-menu {
opacity:
1;
visibility:
visible;
transform:
translateY(
0
);
}
#${PANEL_ID} .tm-select-option {
width:
100%;
min-height:
40px;
flex:
0 0 auto;
padding:
0 12px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
10px;
border:
0;
border-radius:
var(
--radius
);
color:
var(
--text
);
background:
transparent;
outline:
none;
cursor:
pointer;
text-align:
left;
transition:
color .14s ease,
background-color .14s ease;
}
#${PANEL_ID}
.tm-select-option:hover:not(:disabled) {
color:
#008fc4;
background:
var(
--bili-blue-soft
);
}
#${PANEL_ID}
.tm-select-option.selected {
color:
#008fc4;
font-weight:
600;
background:
var(
--bili-blue-selected
);
}
#${PANEL_ID} .tm-option-text {
min-width:
0;
overflow:
hidden;
white-space:
nowrap;
text-overflow:
ellipsis;
}
#${PANEL_ID} .tm-option-check {
flex:
0 0 auto;
opacity:
0;
color:
var(
--bili-blue
);
font-size:
18px;
font-weight:
800;
}
#${PANEL_ID}
.tm-select-option.selected
.tm-option-check {
opacity:
1;
}
/*
* =====================================================
* 列表顶部
* =====================================================
*/
#${PANEL_ID} .tm-list-head {
min-height:
32px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
10px;
}
#${PANEL_ID} .tm-list-batch {
display:
none;
flex-direction:
column;
gap:
8px;
padding:
10px;
margin:
0 -4px 4px;
border-radius:
var(
--radius
);
background:
#f6f7f8;
}
#${PANEL_ID}.tm-list-mode
.tm-list-batch {
display:
flex;
}
#${PANEL_ID} .tm-list-batch-row {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
8px;
}
#${PANEL_ID} .tm-list-batch-title {
color:
var(
--text
);
font-weight:
600;
font-size:
13px;
}
#${PANEL_ID} .tm-list-batch-count {
color:
var(
--muted
);
font-size:
11px;
}
#${PANEL_ID} .tm-list-batch input {
min-width:
0;
height:
32px;
padding:
0 8px;
border:
1px solid
var(
--border
);
border-radius:
var(
--radius
);
color:
var(
--text
);
background:
#fff;
outline:
none;
font-size:
12px;
}
#${PANEL_ID} .tm-list-batch input:focus {
border-color:
var(
--bili-blue
);
box-shadow:
0 0 0 3px
var(
--bili-blue-soft
);
}
#${PANEL_ID} .tm-list-limit {
flex:
0 0 72px;
}
#${PANEL_ID} .tm-list-date-start,
#${PANEL_ID} .tm-list-date-end {
flex:
1 1 0;
min-width:
0;
}
#${PANEL_ID} .tm-list-autoscroll {
display:
inline-flex;
align-items:
center;
gap:
6px;
color:
#61666d;
font-size:
12px;
cursor:
pointer;
user-select:
none;
}
#${PANEL_ID} .tm-list-load-btn {
flex:
0 0 auto;
height:
32px;
padding:
0 12px;
border:
0;
border-radius:
var(
--radius
);
color:
#fff;
background:
var(
--bili-blue
);
font-weight:
600;
font-size:
12px;
cursor:
pointer;
transition:
filter .15s ease,
transform .1s ease;
}
#${PANEL_ID}
.tm-list-load-btn:hover:not(:disabled) {
filter:
brightness(
1.05
);
}
#${PANEL_ID}
.tm-list-load-btn:disabled {
opacity:
.55;
cursor:
not-allowed;
}
#${PANEL_ID} .tm-list-tools {
min-width:
0;
display:
flex;
align-items:
center;
justify-content:
flex-end;
gap:
7px;
}
#${PANEL_ID} .tm-search-wrap {
min-width:
0;
display:
flex;
align-items:
center;
justify-content:
flex-end;
gap:
7px;
}
#${PANEL_ID} .tm-search {
width:
0;
min-width:
0;
height:
36px;
padding:
0;
opacity:
0;
pointer-events:
none;
border:
1px solid
transparent;
border-radius:
var(
--radius
);
color:
var(
--text
);
background:
#fff;
outline:
none;
transition:
width .18s ease,
padding .18s ease,
opacity .12s ease,
border-color .12s ease,
box-shadow .15s ease;
}
#${PANEL_ID}
.tm-search-wrap.open
.tm-search {
width:
180px;
padding:
0 10px;
opacity:
1;
pointer-events:
auto;
border-color:
var(
--border
);
}
#${PANEL_ID} .tm-search:focus {
border-color:
var(
--bili-blue
);
box-shadow:
0 0 0 3px
var(
--bili-blue-soft
);
}
#${PANEL_ID} .tm-search-toggle {
width:
36px;
height:
36px;
flex:
0 0 36px;
padding:
0;
display:
grid;
place-items:
center;
border:
1px solid
var(
--border
);
border-radius:
var(
--radius
);
color:
#61666d;
background:
#fff;
outline:
none;
cursor:
pointer;
}
#${PANEL_ID}
.tm-search-toggle:hover:not(:disabled),
#${PANEL_ID}
.tm-search-toggle.active {
color:
var(
--bili-blue
);
border-color:
rgba(
0,
174,
236,
.44
);
background:
var(
--bili-blue-soft
);
}
#${PANEL_ID} .tm-search-toggle svg {
width:
17px;
height:
17px;
fill:
none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
}
#${PANEL_ID} .tm-select-all-wrap {
display:
inline-flex;
align-items:
center;
gap:
7px;
color:
#61666d;
font-weight:
500;
cursor:
pointer;
user-select:
none;
}
#${PANEL_ID} input[type="checkbox"] {
width:
18px;
height:
18px;
margin:
0;
accent-color:
var(
--bili-blue
);
cursor:
pointer;
}
#${PANEL_ID} .tm-items-hint {
color:
var(
--muted
);
font-size:
11px;
}
/*
* =====================================================
* 视频列表
* =====================================================
*/
#${PANEL_ID} .tm-items {
position:
relative;
min-height:
0;
max-height:
320px;
overflow:
auto;
border:
1px solid
var(
--border
);
border-radius:
var(
--radius
);
background:
#f7f8f9;
scroll-behavior:
auto;
}
#${PANEL_ID} .tm-items::-webkit-scrollbar,
#${PANEL_ID} .tm-select-menu::-webkit-scrollbar {
width:
6px;
}
#${PANEL_ID} .tm-items::-webkit-scrollbar-thumb,
#${PANEL_ID} .tm-select-menu::-webkit-scrollbar-thumb {
border-radius:
999px;
background:
#d3d6d9;
}
#${PANEL_ID} .tm-item {
min-height:
46px;
padding:
6px 10px;
display:
grid;
grid-template-columns:
20px
max-content
minmax(
0,
1fr
);
align-items:
center;
column-gap:
7px;
background:
transparent;
transition:
background-color .2s ease;
}
#${PANEL_ID}
.tm-item + .tm-item {
border-top:
1px solid
#e9eaec;
}
#${PANEL_ID}
.tm-item:hover {
background:
#fff;
}
#${PANEL_ID} .tm-item-index {
color:
var(
--muted
);
white-space:
nowrap;
font-variant-numeric:
tabular-nums;
transition:
color .2s ease;
}
#${PANEL_ID} .tm-item-title {
min-width:
0;
padding:
6px 7px;
overflow:
hidden;
white-space:
nowrap;
text-overflow:
ellipsis;
border-radius:
var(
--radius
);
color:
var(
--text
);
cursor:
pointer;
transition:
color .2s ease,
background-color .2s ease;
}
#${PANEL_ID}
.tm-item-title:hover,
#${PANEL_ID}
.tm-item.tm-current-flash
.tm-item-title {
color:
var(
--bili-blue
);
background:
var(
--bili-blue-soft
);
}
#${PANEL_ID}
.tm-item.tm-current-flash
.tm-item-index {
color:
var(
--bili-blue
);
}
#${PANEL_ID} .tm-empty {
padding:
20px;
color:
var(
--muted
);
text-align:
center;
}
#${PANEL_ID} .tm-summary {
display:
flex;
align-items:
center;
justify-content:
space-between;
color:
var(
--muted
);
font-size:
11px;
}
/*
* =====================================================
* 下载
* =====================================================
*/
#${PANEL_ID} .tm-download-actions,
#${PANEL_ID} .tm-subtitle-actions {
display:
grid;
grid-template-columns:
minmax(
0,
1fr
)
minmax(
0,
1fr
);
gap:
8px;
}
#${PANEL_ID} .tm-subtitle-actions {
grid-template-columns:
166px
minmax(
0,
1fr
);
}
#${PANEL_ID} .tm-download {
width:
100%;
min-height:
42px;
padding:
0 10px;
border:
0;
border-radius:
var(
--radius
);
color:
#fff;
background:
linear-gradient(
135deg,
#00aeec 0%,
#22bce9 100%
);
font-weight:
700;
cursor:
pointer;
box-shadow:
0 5px 15px
rgba(
0,
174,
236,
.18
);
transition:
filter .15s ease,
transform .1s ease,
box-shadow .15s ease;
}
#${PANEL_ID}
.tm-download:hover:not(:disabled) {
filter:
brightness(
1.055
);
box-shadow:
0 6px 18px
rgba(
0,
174,
236,
.26
);
}
#${PANEL_ID}
.tm-download:active:not(:disabled) {
transform:
scale(
.985
);
}
#${PANEL_ID} button:disabled,
#${PANEL_ID} input:disabled {
opacity:
.52;
cursor:
not-allowed;
}
/*
* =====================================================
* 状态 / 进度
* =====================================================
*/
#${PANEL_ID} .tm-status-card {
padding:
9px 10px
7px;
border-radius:
var(
--radius
);
background:
#f6f7f8;
}
#${PANEL_ID} .tm-status-line {
min-width:
0;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
8px;
}
#${PANEL_ID} .tm-status {
min-width:
0;
flex:
1 1 auto;
overflow:
hidden;
color:
#61666d;
white-space:
nowrap;
text-overflow:
ellipsis;
}
#${PANEL_ID}
.tm-status[data-type="ok"] {
color:
#008fc4;
}
#${PANEL_ID}
.tm-status[data-type="error"] {
color:
#d64242;
}
#${PANEL_ID} .tm-progress-text {
flex:
0 0 auto;
max-width:
150px;
overflow:
hidden;
color:
var(
--muted
);
font-size:
10.5px;
white-space:
nowrap;
text-overflow:
ellipsis;
text-align:
right;
}
#${PANEL_ID} .tm-progress-track {
height:
3px;
margin-top:
6px;
overflow:
hidden;
border-radius:
999px;
background:
var(
--border
);
}
#${PANEL_ID} .tm-progress-fill {
width:
0;
height:
100%;
border-radius:
999px;
background:
var(
--bili-blue
);
transition:
width .18s ease;
}
/*
* =====================================================
* Logo 下载提示
* =====================================================
*/
#${PANEL_ID}-quick-toast {
position:
fixed;
z-index:
2147483647;
max-width:
330px;
padding:
10px 13px;
opacity:
0;
visibility:
hidden;
transform:
translateY(
-5px
);
border:
1px solid
rgba(
0,
174,
236,
.22
);
border-radius:
12px;
color:
#0078a8;
background:
rgba(
255,
255,
255,
.985
);
box-shadow:
0 10px 28px
rgba(
0,
0,
0,
.16
);
font:
13px/1.45
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Microsoft YaHei",
sans-serif;
transition:
opacity .14s ease,
transform .14s ease,
visibility .14s ease;
pointer-events:
none;
}
#${PANEL_ID}-quick-toast.show {
opacity:
1;
visibility:
visible;
transform:
translateY(
0
);
}
#${PANEL_ID}-quick-toast[data-type="error"] {
color:
#d64242;
border-color:
rgba(
214,
66,
66,
.22
);
}
#${PANEL_ID}-quick-toast[data-type="ok"] {
color:
#008fc4;
}
#${PANEL_ID}-quick-toast[data-type="warn"] {
color:
#a66a00;
border-color:
rgba(
166,
106,
0,
.20
);
}
/* =====================================================
* 信息浮窗
* ===================================================== */
#${PANEL_ID}-author-popup {
position: fixed;
width: 400px;
height: 420px;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
z-index: 2147483647;
display: none;
padding: 24px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
color: #333;
border: 1px solid #e3e5e7;
}
#${PANEL_ID}-author-popup.show {
display: flex;
gap: 20px;
}
#${PANEL_ID}-author-popup .popup-qr {
width: 140px;
height: 140px;
flex-shrink: 0;
background: #f6f7f8;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-top: 140px;
}
#${PANEL_ID}-author-popup .popup-qr canvas {
width: 120px !important;
height: 120px !important;
}
#${PANEL_ID}-author-popup .popup-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
overflow: hidden;
}
#${PANEL_ID}-author-popup .popup-title {
font-size: 18px;
font-weight: bold;
color: #00AEEC;
margin-bottom: 4px;
}
#${PANEL_ID}-author-popup .popup-desc {
font-size: 13px;
line-height: 1.6;
color: #666;
}
#${PANEL_ID}-author-popup .popup-tutorial {
font-size: 13px;
color: #888;
border-top: 1px solid #eee;
padding-top: 12px;
margin-top: auto;
line-height: 1.6;
}
#${PANEL_ID}-author-popup .popup-tutorial strong {
color: #333;
}
@media (
max-width:
900px
) {
#${PANEL_ID} {
left:
8px;
right:
auto;
top:
62px;
width:
min(
430px,
calc(
100vw -
16px
)
);
}
#${PANEL_ID}.minimized {
width:
min(
150px,
calc(
100vw -
16px
)
);
}
}
`);
GM_addStyle(`
#${PANEL_ID}.tm-tampered {
border-color: #ff4d4f !important;
box-shadow: 0 0 0 1px #ff4d4f, 0 12px 36px rgba(255, 77, 79, 0.25) !important;
}
#${PANEL_ID}.tm-tampered .tm-brand-name {
color: #ff4d4f !important;
}
#${PANEL_ID}.tm-tampered .tm-brand-name::after {
content: '（非原版）';
color: #ff4d4f;
font-size: 12px;
font-weight: 400;
}
#${PANEL_ID}.tm-tampered .tm-download {
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%) !important;
box-shadow: 0 5px 15px rgba(255, 77, 79, 0.3) !important;
}
#${PANEL_ID}-tamper-card {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2147483647;
width: 340px;
max-width: calc(100vw - 32px);
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
padding: 24px 20px 20px;
text-align: center;
color: #1f1f1f;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
}
#${PANEL_ID}-tamper-card .tm-tamper-box {
position: relative;
}
#${PANEL_ID}-tamper-card .tm-tamper-close {
position: absolute;
top: -10px;
right: -6px;
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
background: #f2f3f5;
color: #666;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
#${PANEL_ID}-tamper-card .tm-tamper-close:hover {
background: #ffd6d6;
color: #ff4d4f;
}
#${PANEL_ID}-tamper-card .tm-tamper-title {
font-size: 18px;
font-weight: 700;
color: #ff4d4f;
margin-bottom: 10px;
}
#${PANEL_ID}-tamper-card .tm-tamper-desc {
font-size: 14px;
line-height: 1.6;
color: #444;
margin-bottom: 10px;
}
#${PANEL_ID}-tamper-card .tm-tamper-detail {
font-size: 12px;
color: #888;
margin-bottom: 14px;
word-break: break-all;
}
#${PANEL_ID}-tamper-card .tm-tamper-qr {
width: 150px;
height: 150px;
margin: 0 auto 10px;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
#${PANEL_ID}-tamper-card .tm-tamper-qr canvas {
display: block;
width: 150px !important;
height: 150px !important;
}
#${PANEL_ID}-tamper-card .tm-tamper-info {
font-size: 14px;
color: #666;
}
`);
downloadOne = protectEntry(
'downloadOne',
downloadOne
);
startSingle = protectEntry(
'startSingle',
startSingle
);
startQuickCurrent = protectEntry(
'startQuickCurrent',
startQuickCurrent
);
startSelected = protectEntry(
'startSelected',
startSelected
);
startSelectedAudio = protectEntry(
'startSelectedAudio',
startSelectedAudio
);
startSelectedSubtitles = protectEntry(
'startSelectedSubtitles',
startSelectedSubtitles
);
createPanel();
installSpaWatcher();
initPage()
.catch(
err => {
console.error(
'[BiliDL] init failed:',
err
);
setStatus(
`初始化失败：${
err
?.message ||
err
}`,
'error'
);
}
);
})();