百合会漫画阅读与下载
// ==UserScript==
// @name 百合会漫画
// @namespace https://bbs.yamibo.com/
// @version 0.9.1
// @description 百合会漫画阅读与下载
// @author mooth
// @match https://bbs.yamibo.com/forum-30*
// @match https://bbs.yamibo.com/forum.php?mod=forumdisplay&fid=30*
// @match https://bbs.yamibo.com/thread*
// @match https://bbs.yamibo.com/forum.php?mod=viewthread&tid*
// @icon https://www.google.com/s2/favicons?domain=yamibo.com
// @require https://update.greasyfork.org/scripts/471654/1225059/vue3js.js
// @require https://unpkg.com/fflate@0.8.2/umd/index.js
// @require https://unpkg.com/axios@1.7.2/dist/axios.min.js
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_xmlhttpRequest
// @grant GM_addElement
// @noframes
// ==/UserScript==
(function () {
GM_addElement('link', {
href: 'https://unpkg.com/element-plus/dist/index.css',
rel: 'stylesheet'
});
GM_addElement('script', {
src: 'https://unpkg.com/element-plus',
type: 'text/javascript',
id: "element"
});
const { createApp, computed, ref, reactive, onMounted, watch } = Vue;
// 公用方法 ---------------------------------------------------------------------------
const PubFun = {
// 创建碎片
Fragment: (id) => {
const f = document.createDocumentFragment();
f.appendChild(document.querySelector(id));
return f;
},
// 解析地址 html_str 返回页面中解析的地址数组
getUrls: (html) => {
try {
// 定义三个数组，分别存储三种不同目的的图片地址
let urlCandidates = [new Array(), new Array(), new Array()];
// 定义一个数组，用于存储最终解析出的图片地址
let urls = [];
// 使用正则表达式匹配三种不同格式的图片地址
if (html.match(/zoomfile="(.*?)"/g)) {
urlCandidates[2] = html.match(/zoomfile="(.*?)"/g);
}
if (html.match(/https:\/\/bbs\.yamibo\.com\/data.*?"/g)) {
urlCandidates[1] = html.match(/https:\/\/bbs\.yamibo\.com\/data.*?"/g);
}
if (html.match(/<img.*?class="zoom".*?file="(.*?)"/g)) {
urlCandidates[0] = html.match(/<img.*?class="zoom".*?file="(.*?)"/g);
}
// 将三个数组按照长度排序，优先处理匹配数量最多的情况
urlCandidates.sort((a, b) => b.length - a.length);
// 遍历三个数组，将匹配到的图片地址进行格式化后存储到 urls 数组中
urlCandidates.forEach(list => {
list.forEach(str => {
if (str.match("bbs.yamibo.com")) {
urls.push(str.match(/(https.*?)"/)[1]);
// "zoomfile=\"data/attachment/forum/202406/06/120022lu22z92dtq3hedq9.jpg\""
} else if (str.match(/zoomfile="(.*?)"/)) {
urls.push("https:\/\/bbs.yamibo.com/" + str.match(/zoomfile="(.*?)"/)[1]);
} else {
urls.push(
str.match(/<img.*?class="zoom".*?file="(.*?)"/)[1]
.replace("http", "https")
);
}
});
});
// 过滤不需要的图片 和错误匹配
urls = [...new Set(urls.filter(url => {
if (!url.endsWith('.gif') && !url.match('static')) {
return url
}
}))];
// 返回解析出的图片地址数组
return urls;
} catch (error) {
console.log("html地址解析", error);
}
},
// 获取图片生成本地地址 解决跨域 设置同源
cross: async (url) => {
return new Promise((resolve, reject) => {
try {
// 将 httpss 替换为 https
url = url.replace("httpss", "https");
// 定义一个变量，用于存储 blob URL
let blobUrl = "";
GM_xmlhttpRequest({
method: "get",
url: url,
responseType: "blob",
headers: {
Referer: "https://bbs.yamibo.com/forum.php?"
},
onload: (res) => {
try {
// 将响应数据转换为 blob URL
blobUrl = window.URL.createObjectURL(res.response);
} catch (error) {
reject(`PubFun.cross图片转本地地址 \n${url}\n ${error}`)
}
resolve(blobUrl);
},
onerror: () => {
console.error("无法链接到该页面");
reject("无法链接到该页面");
}
});
} catch (error) {
reject(`PubFun.cross\n${error}\n${url}`);
}
});
},
// 文件储存
saveAs: (data, name, type) => {
// 创建一个 a 标签
const link = document.createElement("a");
// 创建一个 blob URL
const url = window.URL.createObjectURL(data);
// 设置 a 标签的 href 属性为 blob URL
link.href = url;
// 设置 a 标签的 download 属性为文件名
link.download = name + "." + type;
// 模拟点击 a 标签，触发下载
link.click();
},
// fflate打包
fflate_zip: async (name, urlList, state) => {
let num = 0;
let file_b_list = {}
await new Promise(async resolve => {
for (let i = 0; i < urlList.length; i++) {
const url = urlList[i];
try {
const res = await axios.get(url, { responseType: 'blob' });
num++;
if (state) {
state.done = num;
state.allTasks = urlList.length;
}
const file_blob = res.data;
const file_type = file_blob.type.match(/\/(.*)/)?.[1];
const file = new Uint8Array(await file_blob.arrayBuffer());
file_b_list[`${i + 1}.${file_type}`] = file;
} catch (error) {
num++;
if (state) {
state.error++;
}
console.error("下载失败:", url, error);
}
// 完成
if(i === urlList.length-1){
resolve()
}
}
});
// 更新下载状态
if (state) { state.pack = 1; }
console.log(file_b_list);
fflate.zip(file_b_list, { level: 0 }, (err, content) => {
console.log(content);
// 生成 zip 包并下载
try {
PubFun.saveAs(new Blob([content], { type: "application/zip" }), name, "zip")
// 更新下载状态
if (state) {
state.pack = 2;
}
} catch (e) {
// 更新下载状态
if (state) {
state.pack = 3;
}
// 打印错误信息
console.error("打包失败:", e);
}
})
},
// 任务队列 a = new createTaskQueue(10), a.addTask(()=>fun())
createTaskQueue: (concurrency = 10) => {
const queue = [];
let running = 0;
const run = () => {
while (running < concurrency && queue.length > 0) {
const task = queue.shift();
running++;
task()
.then(() => {
running--;
run();
})
.catch(() => {
running--;
run();
});
}
};
const addTask = (task) => {
queue.push(task);
run();
};
return {
addTask
}
}
};
// 漫画列表组件 ---------------------------------------------------------------------------
class MangaListComponent {
static f = []
static columns = 2
constructor() {
// 初始化 列数
if (!GM_getValue("columns")) {
GM_setValue("columns", 2)
MangaListComponent.columns = 2
} else {
MangaListComponent.columns = GM_getValue("columns")
}
// 获取表格节点
MangaListComponent.f = PubFun.Fragment("#threadlisttableid")
// 模板样式
MangaListComponent.style = `
.columns_container{
display: flex;
gap: 10px;
align-items: center;
svg{
/* height: 40px; */
fill: burlywood;
cursor: pointer;
}
}
.columns_selected{
fill: #551201 !important;
}
.mt_manga_message_container{
display: grid;
}
.mt_manga_message {
display: flex;
height: 150px;
padding: 10px 0;
/* width: 50%; */
float: left;
overflow: auto;
}
.mt_manga_message::-webkit-scrollbar {
/* 整体*/
width: 5px;
}
.mt_manga_face {
height: 100%;
img{
height: 100%;
}
}
.mt_manga_info {
padding: 0 10px;
}
`
GM_addStyle(MangaListComponent.style)
// 模板
MangaListComponent.template = `
<div class="columns_container">
<svg @click="columns=1" :class="{'columns_selected':columns==1}" height="40px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1467" ><path d="M868.352 568.32q32.768 0 53.248 19.456t20.48 52.224l0 221.184q0 35.84-19.968 54.784t-52.736 18.944l-706.56 0q-33.792 0-56.832-22.528t-23.04-55.296l0-212.992q0-35.84 19.968-55.808t54.784-19.968l710.656 0zM868.352 90.112q32.768 0 53.248 18.944t20.48 52.736l0 220.16q0 35.84-19.968 54.784t-52.736 18.944l-706.56 0q-33.792 0-56.832-22.528t-23.04-55.296l0-211.968q0-35.84 19.968-55.808t54.784-19.968l710.656 0z" p-id="1468"></path></svg>
<svg @click="columns=2" :class="{'columns_selected':columns==2}" height="47px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1618" ><path d="M433.1 480 174.9 480c-25.9 0-46.9-21-46.9-46.9L128 174.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C480 459 459 480 433.1 480z" p-id="1619"></path><path d="M433.1 896 174.9 896c-25.9 0-46.9-21-46.9-46.9L128 590.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C480 875 459 896 433.1 896z" p-id="1620"></path><path d="M849.1 480 590.9 480c-25.9 0-46.9-21-46.9-46.9L544 174.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C896 459 875 480 849.1 480z" p-id="1621"></path><path d="M849.1 896 590.9 896c-25.9 0-46.9-21-46.9-46.9L544 590.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C896 875 875 896 849.1 896z" p-id="1622"></path></svg>
<svg @click="columns=3" :class="{'columns_selected':columns==3}" height="40px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1768" ><path d="M248.832 63.488q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-116.736 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l116.736 0zM572.416 63.488q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-118.784 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l118.784 0zM891.904 63.488q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-118.784 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l118.784 0zM248.832 385.024q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-116.736 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l116.736 0zM572.416 385.024q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-118.784 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l118.784 0zM891.904 385.024q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-118.784 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l118.784 0zM248.832 706.56q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-116.736 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l116.736 0zM572.416 706.56q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-118.784 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l118.784 0zM891.904 706.56q28.672 0 48.64 19.968t19.968 48.64l0 116.736q0 28.672-19.968 48.64t-48.64 19.968l-118.784 0q-28.672 0-48.64-19.968t-19.968-48.64l0-116.736q0-28.672 19.968-48.64t48.64-19.968l118.784 0z" p-id="1769"></path></svg>
</div>
<div class="mt_manga_message_container">
<div v-for="(item, index) in comicList" :key="item.id" class="mt_manga_message" >
<div class="mt_manga_face">
<img :src="item.face" class="face" alt="封面">
</div>
<div v-html="item.innerHTML" class="mt_manga_info"></div>
</div>
</div>
`
// 创建
createApp(
{
template: MangaListComponent.template,
setup() {
// 获取主题列表
const fragment = MangaListComponent.f;
// 定义主题链接
const url = "https://bbs.yamibo.com/forum.php?mod=viewthread&tid=";
// 列数
const columns = ref(MangaListComponent.columns)
// 定义漫画列表数据
const comicList = ref([]);
// 计算属性，为每个漫画项添加默认封面
const computedComicList = computed(() => comicList.value.map((item) => ({
...item,
face: item.face || "https://bbs.yamibo.com/data/attachment/forum/201504/01/110518de9s4qsd6qtzbn9m.jpg"
})));
////////////////////////////////////////////////////////////////////////////////////
// 获取漫画封面
const getComicCover = async (url_0, index) => {
return new Promise(async (resolve, reject) => {
let url = url_0
// 判断是否需要重定向
let res = await axios.get(url)
// 不需要，直接解析html
if (res.data.match('html')) {
console.log(`直接解析，${url}`);
// 解析HTML获取图片地址
const urls = PubFun.getUrls(res.data);
// 将解析到的第一个图片地址设置为封面
comicList.value[index].face = await PubFun.cross(urls[0]);
resolve()
return
}
// 需要重定向
try {
// 获取重定向地址
url = await get_redirect_url_eval(url_0)
// 通过iframe 获取重定向地址
if (url == url_0) {
url = await get_redirect_url_iframe(url_0)
}
} catch (error) {
// 通过iframe 获取重定向地址
url = await get_redirect_url_iframe(url_0)
}
// 发送请求获取对应漫画页面的HTML
try {
axios.get(url)
.then(async (res) => {
const data = res.data;
// 是否重新加载
if (!data.match('https')) {
console.log("二次加载封面");
getComicCover(url, index)
return
}
let urls = []
try {
// 解析HTML获取图片地址
urls = PubFun.getUrls(data);
// 将解析到的第一个图片地址设置为封面
comicList.value[index].face = await PubFun.cross(urls[0]);
resolve()
} catch (e) {
console.error({
"漫画页地址": url_0,
"地址重定向转换": url,
"封面地址": urls,
"请求响应": res,
e
});
resolve()
}
})
.catch((error) => {
// 打印错误信息
console.error(`请求失败${url_0}:\n ${error}`);
resolve()
});
} catch (error) {
resolve()
}
})
};
// 获取重定向地址 通过eval直接执行地址重定向代码
const get_redirect_url_eval = (url) => {
return new Promise((resolve, reject) => {
try {
// 定义自定义 window 对象
const myWindow = {
window: {
location: {
og: url,
href: url,
assign: (newUrl) => { myWindow.window.location.href = newUrl },
}
},
location: {
href: url,
assign: (newUrl) => { myWindow.location.href = newUrl },
replace: (newUrl) => { myWindow.location.href = newUrl }
},
};
// 定义eval上下文
function evalWithContext(code, context) {
return (function () {
// 通过参数解构来获取上下文中的变量和函数
const contextKeys = Object.keys(context);
const contextValues = contextKeys.map(key => context[key]);
// 创建一个新的函数，该函数的参数是上下文中的变量名，并在函数体中执行代码
const func = new Function(...contextKeys, code);
// 调用函数，并将上下文中的变量值作为参数传递给函数
return func(...contextValues);
})();
}
axios.get(url)
.then(response => {
// 获取跳转代码
const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/i;
const match = response.data.match(scriptRegex);
if (match && match[1]) {
const scriptContent = match[1];
// 执行跳转代码
evalWithContext(scriptContent, myWindow);
console.log(myWindow);
if (myWindow.location.href.match("https")) {
resolve(myWindow.location.href);
} else {
resolve("https://bbs.yamibo.com" + myWindow.location.href);
}
} else {
reject(url);
}
})
.catch(error => {
console.error('get_redirect_url_eval错误:', myWindow, error);
reject(url);
});
} catch (error) {
reject(url)
}
});
};
// 在eval失败后 通过iframe直接执行地址重定向代码
const get_redirect_url_iframe = (url) => {
return new Promise((resolve, reject) => {
// 创建一个 iframe 元素并设置其 src 属性
const iframe = document.createElement('iframe');
iframe.src = "";
// iframe.sandbox = "allow-same-origin allow-scripts"
iframe.style.display = "none"
document.body.appendChild(iframe)
iframe.onload = () => {
console.log("get_redirect_url_iframe", iframe.contentDocument.location.href);
resolve(iframe.contentDocument.location.href)
document.body.removeChild(iframe)
}
iframe.contentDocument.location.href = url
})
}
// 渐进式加载漫画封面
const progressiveLoad = () => {
// 10个10个加载
const queue = PubFun.createTaskQueue(10);
comicList.value.forEach((item, index) => {
queue.addTask(() => getComicCover(item.url, index))
})
};
///////////////////////////////////////////////////////////////////////////////
// 通过原始网页数据初始化漫画列表数据 获取对应漫画地址
const inti_manga_data = () => {
for (let i in fragment.children[0].children) {
const el = fragment.children[0].children[i];
if (typeof el === "object" && el.id && el.id.match("normalthread")) {
comicList.value.push({
id: el.id,
innerHTML: el.innerHTML,
children: el.children,
url: url + el.id.match("normalthread_(.*)")[1]
});
}
}
}
// 组件挂载后执行
onMounted(() => {
// 初始化漫画列表数据
inti_manga_data()
// 开始渐进式加载漫画封面
progressiveLoad();
});
///////////////////////////////////////////////////////////////////////////////
// 修改列数
watch(columns, (new_val, old_val) => {
const el = document.querySelector(".mt_manga_message_container")
el.style.gridTemplateColumns = `repeat(${new_val}, 1fr)`;
GM_setValue("columns", new_val)
})
onMounted(() => {
const el = document.querySelector(".mt_manga_message_container")
el.style.gridTemplateColumns = `repeat(${columns.value}, 1fr)`;
})
///////////////////////////////////////////////////////////////////////////////////////////
return {
comicList: computedComicList,
columns
};
}
}
)
.mount("#moderate")
}
};
// 漫画页面组件 ---------------------------------------------------------------------------
class MangaComponent {
constructor() {
console.log("漫画页面加载");
// 用于 与vue通信，是否加载漫画模式
MangaComponent.model_state = 1
// 百合会»论坛›江湖›貼圖區›中文百合漫画区›【提灯喵汉化组】[金子ある]平良深姐妹都“病”得不轻 1 ...
// 获取索要创建按钮的位置
MangaComponent.pt = document.querySelector("#pt")
// 创建 模式切换按钮
MangaComponent.mt_cut = document.createElement("div")
MangaComponent.mt_cut.id = "mt_cut"
MangaComponent.mt_cut.innerText = "[漫画模式]"
// 切换模式
MangaComponent.mt_cut.addEventListener("click", () => {
if (MangaComponent.model_state === 1) {
document.querySelector("#mt_old").style.display = "none"
document.querySelector("#mt_manga").style.display = "block"
MangaComponent.mt_cut.innerText = "[原始模式]"
MangaComponent.model_state = 2
} else {
document.querySelector("#mt_old").style.display = "block"
document.querySelector("#mt_manga").style.display = "none"
MangaComponent.mt_cut.innerText = "[漫画模式]"
MangaComponent.model_state = 1
}
})
// 添加
MangaComponent.pt.appendChild(MangaComponent.mt_cut)
// 定义自己el,用于存放两种模式
MangaComponent.my_el = document.createElement("div")
MangaComponent.my_el.id = "my_el"
// 在他的下方插入自己的el
MangaComponent.pt.parentNode.insertBefore(MangaComponent.my_el, MangaComponent.pt.nextSibling)
// html模板
MangaComponent.my_el.innerHTML = `
<div id="mt_old"></div>
<div id="mt_manga" style="display: none;">
<div >
<div v-if="urlsLoaded" id = "mt_manga_box" @dblclick="fullScreen = !fullScreen"
:class="{is_one_p:onePage , not_one_p:!onePage , is_r_to_l:rightToLeft, is_w_bg:whiteBg}">
<div id="mt_set" v-show="showSettings">
<div class="block">
<el-slider v-model="imageSize"></el-slider>
<el-checkbox v-model="rightToLeft">从右向左</el-checkbox>
<el-checkbox v-model="onePage">单开</el-checkbox>
<el-checkbox v-model="whiteBg">白底</el-checkbox>
<el-radio>
<span @click="download()">{{downloadInfo}}</span>
</el-radio>
</div>
</div>
<img :style="{'width':imageSize +'%'}"
:src="url" class="mt_manga_img" v-for="url in urlList"
@click="showSettings = !showSettings"
>
</div>
</div>
</div>
`
// 样式
MangaComponent.style = `
#mt_cut{
float: right;
font-weight: bold;
}
.mt_manga_img{
}
#mt_manga_box{
overflow: auto;
display: flex;
}
.is_one_p{
flex-direction: column;
flex-wrap: nowrap;
align-items: center
}
.not_one_p{
flex-wrap: wrap;
align-content: flex-start;
justify-content: center
}
.is_r_to_l{
flex-direction: row-reverse;
}
.is_w_bg{
background-color: white;
}
#mt_manga_box::-webkit-scrollbar{ /* 整体*/
width: 3px;
height: 10px
}
#mt_manga_box::-webkit-scrollbar-thumb{ /* 滑动条*/
background-color: rgb(208, 208, 208);
border-radius: 1px;
}
#mt_set{
width: 360px;
height: 70px;
background-color: rgb(235 179 82);
position: fixed;
border-radius: 5px;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
`
GM_addStyle(MangaComponent.style)
// 碎片 用户发布部分
MangaComponent.f = PubFun.Fragment("#ct")
document.querySelector("#mt_old").appendChild(MangaComponent.f)
// 初始化数据
// 解析页面中的图片地址
MangaComponent.urls = PubFun.getUrls(document.querySelector("#mt_old").innerHTML);
localStorage.getItem('size') ? null : localStorage.setItem('size', "100")
// 创建
createApp(
{
setup() {
// 定义模式状态，1为默认模式，2为漫画模式
const model_state = ref(MangaComponent.model);
// 定义图片地址列表
const urlList = MangaComponent.urls;
// 定义图片地址是否加载完成状态
const urlsLoaded = ref(true);
// 定义是否全屏状态
const fullScreen = ref(false);
// 定义是否显示设置面板状态
const showSettings = ref(false);
// 定义下载按钮文字
const downloadInfo = ref("下载");
// 定义下载状态
const downloadState = reactive({ done: 0, error: 0, allTasks: 0, pack: 0 });
// 定义图片大小
const imageSize = ref(localStorage.getItem('size') - 0);
// 定义是否从右向左阅读
const rightToLeft = ref(localStorage.getItem("rightToLeft") === "1");
// 定义是否单页显示
const onePage = ref(localStorage.getItem("onePage") === "1");
// 定义是否使用白色背景
const whiteBg = ref(localStorage.getItem("whiteBg") === "1");
// 下载漫画
const download = async () => {
// 如果打包状态为0，则开始打包下载
if (downloadState.pack === 0) {
// 获取漫画名称
const packName = document.getElementById("thread_subject").innerText;
// 调用下载方法
await PubFun.fflate_zip(packName, urlList, downloadState);
}
};
// 监听图片大小变化
watch(imageSize, (newSize) => {
localStorage.setItem("size", newSize);
});
// 监听阅读方向变化
watch(rightToLeft, (newValue) => {
localStorage.setItem("rightToLeft", newValue ? "1" : "0");
});
// 监听单页显示状态变化
watch(onePage, (newValue) => {
localStorage.setItem("onePage", newValue ? "1" : "0");
});
// 监听白色背景状态变化
watch(whiteBg, (newValue) => {
localStorage.setItem("whiteBg", newValue ? "1" : "0");
});
// 监听下载状态变化
watch(downloadState, () => {
// 更新下载按钮文字
downloadInfo.value = `${downloadState.done}/${downloadState.allTasks}`;
if (downloadState.pack === 1) {
downloadInfo.value = "开始打包，请等待...";
}
if (downloadState.pack === 2) {
downloadInfo.value = "完成";
}
}, { deep: true });
// 全屏
watch(fullScreen, (new_val) => {
const elem = document.documentElement;
// 全屏模式的函数
function full_screen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // 兼容 Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // 兼容 Chrome, Safari 和 Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // 兼容 IE/Edge
elem.msRequestFullscreen();
}
}
// 退出全屏模式的函数
function exit_fullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // 兼容 Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // 兼容 Chrome, Safari 和 Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // 兼容 IE/Edge
document.msExitFullscreen();
}
}
if (new_val) {
full_screen()
} else {
exit_fullscreen()
}
})
return {
model_state,
urlList,
urlsLoaded,
fullScreen,
showSettings,
downloadInfo,
downloadState,
imageSize,
rightToLeft,
onePage,
whiteBg,
download
};
}
})
.use(ElementPlus)
.mount("#mt_manga")
}
};
///////////////////////////////////////////////////////////////////////////////////
// 根据当前页面挂载组件
// 主题页面
if (window.location.href.match("https://bbs.yamibo.com/thread") || window.location.href.match(/forum.php\?mod=viewthread/)) {
// 依赖加载完成
document.querySelector("#element").onload = () => {
new MangaComponent()
}
}
// 主题列表页面
else if (window.location.href.match("https://bbs.yamibo.com/forum")) {
new MangaListComponent()
}
})();