522 lines
16 KiB
JavaScript
522 lines
16 KiB
JavaScript
(function () {
|
||
"use strict";
|
||
|
||
const ROOT_ID = "__web_to_pixso_panel_root__";
|
||
const SETTINGS_KEY = "webToPixsoSettings";
|
||
const MIN_CAPTURE_WIDTH = 320;
|
||
const MAX_CAPTURE_WIDTH = 3840;
|
||
const DEFAULT_SETTINGS = {
|
||
useProxy: false,
|
||
concurrency: "8",
|
||
captureMode: "mixed",
|
||
captureWidth: null
|
||
};
|
||
|
||
function normalizeCaptureWidth(value, fallback = null) {
|
||
const number = Number.parseInt(String(value || "").replace(/\D+/g, ""), 10);
|
||
if (!Number.isFinite(number)) return fallback;
|
||
return Math.max(MIN_CAPTURE_WIDTH, Math.min(MAX_CAPTURE_WIDTH, number));
|
||
}
|
||
|
||
function normalizeSettings(value = {}) {
|
||
const concurrency = String(value.concurrency || DEFAULT_SETTINGS.concurrency);
|
||
return {
|
||
useProxy: Boolean(value.useProxy),
|
||
concurrency: ["4", "6", "8", "10", "12", "16", "20", "infinite"].includes(concurrency)
|
||
? concurrency
|
||
: DEFAULT_SETTINGS.concurrency,
|
||
captureMode: value.captureMode === "editable" ? "editable" : "mixed",
|
||
captureWidth: normalizeCaptureWidth(value.captureWidth, null)
|
||
};
|
||
}
|
||
|
||
function css() {
|
||
return `
|
||
:host {
|
||
all: initial;
|
||
color-scheme: light;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
}
|
||
.backdrop {
|
||
background: transparent;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
position: fixed;
|
||
z-index: 2147483647;
|
||
}
|
||
.panel {
|
||
background: #fff;
|
||
border: 1px solid rgba(10, 10, 18, 0.14);
|
||
border-radius: 22px;
|
||
box-shadow: 0 18px 46px rgba(10, 10, 18, 0.18);
|
||
box-sizing: border-box;
|
||
color: #1a1a2e;
|
||
overflow: hidden;
|
||
pointer-events: auto;
|
||
position: fixed;
|
||
right: 28px;
|
||
top: 24px;
|
||
width: 320px;
|
||
}
|
||
.header {
|
||
align-items: center;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 16px 20px 15px;
|
||
}
|
||
.logo-title {
|
||
align-items: center;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
.logo {
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 12px rgba(10, 10, 18, 0.12);
|
||
display: block;
|
||
height: 28px;
|
||
object-fit: cover;
|
||
width: 28px;
|
||
}
|
||
.title {
|
||
color: #1a1a2e;
|
||
font-size: 16px;
|
||
font-weight: 650;
|
||
line-height: 1;
|
||
}
|
||
.version-badge {
|
||
background: #f2f4ff;
|
||
border: 1px solid #dfe5ff;
|
||
border-radius: 999px;
|
||
color: #2450ff;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
padding: 3px 6px;
|
||
white-space: nowrap;
|
||
}
|
||
button, select, input {
|
||
font: inherit;
|
||
}
|
||
.close-btn {
|
||
align-items: center;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 12px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
display: flex;
|
||
font-size: 22px;
|
||
height: 28px;
|
||
justify-content: center;
|
||
line-height: 1;
|
||
transition: background 0.2s, color 0.2s;
|
||
width: 28px;
|
||
}
|
||
.close-btn:hover {
|
||
background: #f4f4f6;
|
||
color: #666;
|
||
}
|
||
.content {
|
||
padding: 20px;
|
||
}
|
||
.setting-row {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
.setting-label {
|
||
color: #1a1a2e;
|
||
font-size: 14px;
|
||
}
|
||
.setting-select {
|
||
appearance: none;
|
||
background: #fff;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||
background-position: right 10px center;
|
||
background-repeat: no-repeat;
|
||
border: 1px solid #e4e4e4;
|
||
border-radius: 12px;
|
||
color: #1a1a2e;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
min-width: 80px;
|
||
outline: none;
|
||
padding: 8px 30px 8px 13px;
|
||
}
|
||
.mode-select {
|
||
min-width: 116px;
|
||
}
|
||
.toggle-switch {
|
||
display: inline-block;
|
||
height: 26px;
|
||
position: relative;
|
||
width: 48px;
|
||
}
|
||
.toggle-switch input {
|
||
height: 0;
|
||
opacity: 0;
|
||
width: 0;
|
||
}
|
||
.toggle-slider {
|
||
background-color: #e4e4e4;
|
||
border-radius: 999px;
|
||
bottom: 0;
|
||
cursor: pointer;
|
||
left: 0;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
transition: 0.3s;
|
||
}
|
||
.toggle-slider::before {
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
bottom: 3px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||
content: "";
|
||
height: 20px;
|
||
left: 3px;
|
||
position: absolute;
|
||
transition: 0.3s;
|
||
width: 20px;
|
||
}
|
||
input:checked + .toggle-slider {
|
||
background-color: #1a1a2e;
|
||
}
|
||
input:checked + .toggle-slider::before {
|
||
transform: translateX(22px);
|
||
}
|
||
.width-input-wrap {
|
||
align-items: center;
|
||
background: #fff;
|
||
border: 1px solid #e4e4e4;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
height: 36px;
|
||
min-width: 116px;
|
||
padding: 0 10px 0 12px;
|
||
}
|
||
.width-input {
|
||
background: transparent;
|
||
border: 0;
|
||
color: #1a1a2e;
|
||
font-size: 14px;
|
||
min-width: 0;
|
||
outline: none;
|
||
text-align: right;
|
||
width: 68px;
|
||
}
|
||
.width-input.invalid {
|
||
color: #ef4444;
|
||
}
|
||
.width-unit {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
.description {
|
||
color: #999;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
margin-bottom: 20px;
|
||
}
|
||
.capture-btn,
|
||
.select-btn {
|
||
border: 0;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
padding: 14px 24px;
|
||
transition: background 0.2s, transform 0.2s;
|
||
width: 100%;
|
||
}
|
||
.capture-btn {
|
||
background: #1a1a2e;
|
||
color: #fff;
|
||
}
|
||
.capture-btn:hover {
|
||
background: #2d2d44;
|
||
transform: translateY(-1px);
|
||
}
|
||
.select-btn {
|
||
background: #f4f4f6;
|
||
color: #1a1a2e;
|
||
margin-top: 10px;
|
||
}
|
||
.select-btn:hover {
|
||
background: #ececf1;
|
||
transform: translateY(-1px);
|
||
}
|
||
.capture-btn:disabled,
|
||
.select-btn:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
transform: none;
|
||
}
|
||
.capture-btn.success {
|
||
background: #10b981;
|
||
}
|
||
.capture-btn.error {
|
||
background: #ef4444;
|
||
}
|
||
.status {
|
||
margin-top: 16px;
|
||
padding: 12px 0 0;
|
||
}
|
||
.progress-bar {
|
||
background: #f0f0f0;
|
||
border-radius: 999px;
|
||
height: 4px;
|
||
margin-bottom: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
background: linear-gradient(90deg, #00d2ff, #7c3aed);
|
||
border-radius: 999px;
|
||
height: 100%;
|
||
transition: width 0.3s ease;
|
||
width: 0;
|
||
}
|
||
.status-text {
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
.help-link {
|
||
align-items: center;
|
||
border: 1px solid #e6e8f2;
|
||
border-radius: 12px;
|
||
color: #2450ff;
|
||
display: flex;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
justify-content: center;
|
||
margin-top: 16px;
|
||
padding: 10px 12px;
|
||
text-decoration: none;
|
||
transition: background 0.18s, border-color 0.18s, color 0.18s;
|
||
width: 100%;
|
||
}
|
||
.help-link:hover {
|
||
background: #f6f8ff;
|
||
border-color: #dfe5ff;
|
||
}
|
||
.footer {
|
||
align-items: center;
|
||
background: #fff;
|
||
border-top: 1px solid #f0f0f0;
|
||
color: #666;
|
||
display: flex;
|
||
font-size: 12px;
|
||
gap: 8px;
|
||
justify-content: space-between;
|
||
padding: 12px 20px;
|
||
}
|
||
.support-email {
|
||
color: #888;
|
||
font-size: 10px;
|
||
line-height: 1.35;
|
||
min-width: 0;
|
||
text-align: right;
|
||
text-decoration: none;
|
||
}
|
||
.support-email:hover {
|
||
color: #2450ff;
|
||
}
|
||
`;
|
||
}
|
||
|
||
function panelHtml() {
|
||
return `
|
||
<div class="backdrop">
|
||
<main class="panel" role="dialog" aria-label="Web to Pixso">
|
||
<div class="header">
|
||
<div class="logo-title">
|
||
<img src="${chrome.runtime.getURL("logo/plugin-logo.png")}" alt="" class="logo">
|
||
<span class="title">Web to Pixso</span>
|
||
<span class="version-badge">v1.1.1</span>
|
||
</div>
|
||
<button class="close-btn" type="button" aria-label="关闭">×</button>
|
||
</div>
|
||
<div class="content">
|
||
<div class="setting-row">
|
||
<span class="setting-label">采集模式</span>
|
||
<select class="setting-select mode-select" data-field="captureMode">
|
||
<option value="mixed">混合高保真</option>
|
||
<option value="editable">可编辑优先</option>
|
||
</select>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">跨域图片代理模式</span>
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" data-field="useProxy">
|
||
<span class="toggle-slider"></span>
|
||
</label>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">页面采集宽度</span>
|
||
<label class="width-input-wrap">
|
||
<input class="width-input" data-field="captureWidth" type="text" inputmode="numeric" autocomplete="off">
|
||
<span class="width-unit">px</span>
|
||
</label>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">图片采集并发</span>
|
||
<select class="setting-select" data-field="concurrency">
|
||
<option value="4">4</option>
|
||
<option value="6">6</option>
|
||
<option value="8">8</option>
|
||
<option value="10">10</option>
|
||
<option value="12">12</option>
|
||
<option value="16">16</option>
|
||
<option value="20">20</option>
|
||
<option value="infinite">无限</option>
|
||
</select>
|
||
</div>
|
||
<p class="description">页面采集宽度默认使用当前窗口宽度，可输入 320-3840px 触发响应式布局后采集。</p>
|
||
<button class="capture-btn" type="button">开始采集</button>
|
||
<button class="select-btn" type="button">打开页面浮窗</button>
|
||
<div class="status" hidden>
|
||
<div class="progress-bar" aria-hidden="true"><div class="progress-fill"></div></div>
|
||
<span class="status-text">准备中...</span>
|
||
</div>
|
||
<a class="help-link" href="https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f" target="_blank" rel="noopener noreferrer">使用说明</a>
|
||
</div>
|
||
<div class="footer">
|
||
<span>by 大非</span>
|
||
<a class="support-email" href="mailto:270310136@qq.com">270310136@qq.com 给我发邮件哦，我光速改</a>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function getField(root, name) {
|
||
return root.shadowRoot.querySelector(`[data-field="${name}"]`);
|
||
}
|
||
|
||
function sanitizeWidth(input, clamp = false) {
|
||
const digits = input.value.replace(/\D+/g, "");
|
||
input.value = digits;
|
||
const raw = Number.parseInt(digits, 10);
|
||
const invalid = Boolean(digits) && Number.isFinite(raw) && (raw < MIN_CAPTURE_WIDTH || raw > MAX_CAPTURE_WIDTH);
|
||
input.classList.toggle("invalid", invalid);
|
||
const normalized = normalizeCaptureWidth(digits, null);
|
||
if (clamp && digits) {
|
||
input.value = String(normalized);
|
||
input.classList.remove("invalid");
|
||
}
|
||
return normalized;
|
||
}
|
||
|
||
async function getSettings() {
|
||
const result = await chrome.storage.local.get({ [SETTINGS_KEY]: DEFAULT_SETTINGS });
|
||
return normalizeSettings(result[SETTINGS_KEY]);
|
||
}
|
||
|
||
async function saveSettings(settings) {
|
||
await chrome.storage.local.set({ [SETTINGS_KEY]: normalizeSettings(settings) });
|
||
}
|
||
|
||
function readSettings(root, options = {}) {
|
||
const { clampWidth = false } = options;
|
||
return normalizeSettings({
|
||
captureMode: getField(root, "captureMode").value,
|
||
useProxy: getField(root, "useProxy").checked,
|
||
concurrency: getField(root, "concurrency").value,
|
||
captureWidth: sanitizeWidth(getField(root, "captureWidth"), clampWidth)
|
||
});
|
||
}
|
||
|
||
function setProgress(root, percent, text) {
|
||
const status = root.shadowRoot.querySelector(".status");
|
||
const fill = root.shadowRoot.querySelector(".progress-fill");
|
||
const statusText = root.shadowRoot.querySelector(".status-text");
|
||
status.hidden = false;
|
||
fill.style.width = `${Math.max(0, Math.min(100, percent))}%`;
|
||
statusText.textContent = text;
|
||
}
|
||
|
||
function setBusy(root, isBusy) {
|
||
const captureButton = root.shadowRoot.querySelector(".capture-btn");
|
||
const selectButton = root.shadowRoot.querySelector(".select-btn");
|
||
captureButton.disabled = isBusy;
|
||
selectButton.disabled = isBusy;
|
||
captureButton.classList.remove("success", "error");
|
||
captureButton.textContent = isBusy ? "采集中..." : "开始采集";
|
||
selectButton.textContent = isBusy ? "处理中..." : "打开页面浮窗";
|
||
}
|
||
|
||
function setResult(root, kind, text) {
|
||
const captureButton = root.shadowRoot.querySelector(".capture-btn");
|
||
captureButton.classList.remove("success", "error");
|
||
captureButton.classList.add(kind);
|
||
captureButton.textContent = text;
|
||
}
|
||
|
||
async function startCapture(root) {
|
||
setBusy(root, true);
|
||
setProgress(root, 12, "准备当前网页...");
|
||
const settings = readSettings(root, { clampWidth: true });
|
||
await saveSettings(settings);
|
||
try {
|
||
setProgress(root, 28, "注入采集脚本...");
|
||
const response = await chrome.runtime.sendMessage({
|
||
type: "PIXSO_CAPTURE_CURRENT_TAB",
|
||
options: settings
|
||
});
|
||
if (!response?.ok) throw new Error(response?.error || "采集失败");
|
||
const widthText = response.actualViewportWidth ? `已按 ${response.actualViewportWidth}px 采集` : "采集完成";
|
||
setProgress(root, 100, `${widthText}：${response.filename || ""}`);
|
||
setResult(root, "success", "采集完成");
|
||
setTimeout(() => root.remove(), 900);
|
||
} catch (error) {
|
||
setProgress(root, 0, error.message || String(error));
|
||
setResult(root, "error", "采集失败");
|
||
setTimeout(() => setBusy(root, false), 2600);
|
||
}
|
||
}
|
||
|
||
async function openToolbar(root) {
|
||
const settings = readSettings(root, { clampWidth: true });
|
||
await saveSettings(settings);
|
||
root.remove();
|
||
window.__webToPixsoShowCaptureToolbar?.(settings);
|
||
}
|
||
|
||
async function bind(root) {
|
||
const settings = await getSettings();
|
||
getField(root, "captureMode").value = settings.captureMode;
|
||
getField(root, "useProxy").checked = settings.useProxy;
|
||
getField(root, "concurrency").value = settings.concurrency;
|
||
getField(root, "captureWidth").value = String(settings.captureWidth || Math.round(window.innerWidth || document.documentElement.clientWidth || 1440));
|
||
|
||
for (const field of ["captureMode", "useProxy", "concurrency"]) {
|
||
getField(root, field).addEventListener("change", () => saveSettings(readSettings(root)));
|
||
}
|
||
getField(root, "captureWidth").addEventListener("input", event => {
|
||
sanitizeWidth(event.currentTarget);
|
||
saveSettings(readSettings(root, { clampWidth: false }));
|
||
});
|
||
getField(root, "captureWidth").addEventListener("blur", event => {
|
||
sanitizeWidth(event.currentTarget, true);
|
||
saveSettings(readSettings(root, { clampWidth: true }));
|
||
});
|
||
root.shadowRoot.querySelector(".close-btn").addEventListener("click", () => root.remove());
|
||
root.shadowRoot.querySelector(".capture-btn").addEventListener("click", () => startCapture(root));
|
||
root.shadowRoot.querySelector(".select-btn").addEventListener("click", () => openToolbar(root));
|
||
}
|
||
|
||
window.__webToPixsoShowPanel = async function showPanel() {
|
||
document.getElementById(ROOT_ID)?.remove();
|
||
const root = document.createElement("div");
|
||
root.id = ROOT_ID;
|
||
const shadow = root.attachShadow({ mode: "open" });
|
||
shadow.innerHTML = `<style>${css()}</style>${panelHtml()}`;
|
||
document.documentElement.appendChild(root);
|
||
await bind(root);
|
||
};
|
||
})();
|