// ==UserScript==
// @name         ScriptCat 网页操作录制与批量自动化
// @namespace    scriptcat-web-action-recorder
// @version      3.0.0
// @description  支持网页操作录制、规则分组、快速检索、多选批量执行、变量和跨页面自动化。
// @author       AI
// @match        http://*/*
// @match        https://*/*
// @run-at       document-start
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// @grant        GM_openInTab
// @license AI生成任意使用
// ==/UserScript==

(function () {
    'use strict';

    /******************************************************************
     * 一、存储键和默认设置
     ******************************************************************/

    const STORAGE = {
        RULES: 'SC_RECORDER_RULES_V2',
        SETTINGS: 'SC_RECORDER_SETTINGS_V2',
        DRAFT: 'SC_RECORDER_DRAFT_V2',
        COUNTERS: 'SC_RECORDER_VARIABLE_COUNTERS_V2',

        // 3.0 新增
        TASK_STATE: 'SC_RECORDER_TASK_STATE_V3',
        EXEC_LOGS: 'SC_RECORDER_EXEC_LOGS',
        GROUPS: 'SC_RECORDER_GROUPS_V3',
        UI_STATE: 'SC_RECORDER_UI_STATE_V3',

        // 旧执行状态，用于升级清理
        OLD_RUN_STATE: 'SC_RECORDER_RUN_STATE_V2',
        OLD_BATCH_STATE: 'SC_RECORDER_BATCH_STATE_V2'
    };

    const DEFAULT_GROUP = '';

    const DEFAULT_SETTINGS = {
        recordingMode: 'simple',
        variablePrefix: '{',
        variableSuffix: '}',
        stepDelay: 450,
        elementTimeout: 15000,
        recordPasswords: false,
        showFloatingButton: true,
        scrollIntoView: true,
        ignoreQueryForPageCheck: true,
        fixedVariables: [],
        // 新增：规则名称设置
        ruleNameTemplate: '{title}',
        // 新增：文本框变量自动替换
        autoReplaceInputs: false,
        inputVariableNames: [''],
        // 新增：静默保存
        silentSave: false,
        // 新增：批量执行并发数
        batchConcurrency: 5,
        // 新增：屏蔽页面弹窗
        blockAlerts: true,
        // 新增：单步超时（毫秒）
        stepTimeout: 30000
    };

    const state = {
        initialized: false,
        recording: false,
        playing: false,
        paused: false,
        currentDraft: null,

        // 主控调度器（仅在主控页面有效）
        batchScheduler: null,

        // 批量子标签页防重定向循环保护
        _lastBatchRedirect: 0,
        // 子标签页心跳上报定时器
        _heartbeatTimer: null,

        recorderCleanups: [],
        scrollTimers: new Map(),
        pendingInputs: new Map(),
        pendingInputSequence: 0,

        managerHost: null,
        floatingHost: null,
        recordingIndicator: null,

        manager: {
            tab: 'rules',
            search: '',
            group: '__all__',
            selectedRuleIds: new Set(),
            viewMode: 'list'
        }
    };

    /******************************************************************
     * 二、存储兼容层
     ******************************************************************/

    function storeGet(key, defaultValue) {
        try {
            if (typeof GM_getValue === 'function') {
                return GM_getValue(key, defaultValue);
            }

            const value = localStorage.getItem(key);
            return value === null ? defaultValue : JSON.parse(value);
        } catch (error) {
            console.error('[网页录制器] 读取存储失败：', error);
            return defaultValue;
        }
    }

    function storeSet(key, value) {
        try {
            if (typeof GM_setValue === 'function') {
                GM_setValue(key, value);
            } else {
                localStorage.setItem(key, JSON.stringify(value));
            }
        } catch (error) {
            console.error('[网页录制器] 写入存储失败：', error);
        }
    }

    function storeDelete(key) {
        try {
            if (typeof GM_deleteValue === 'function') {
                GM_deleteValue(key);
            } else {
                localStorage.removeItem(key);
            }
        } catch (error) {
            console.error('[网页录制器] 删除存储失败：', error);
        }
    }

    let originalAlert = null;
    let originalConfirm = null;
    let originalPrompt = null;

    function blockPageDialogs() {
        const settings = getSettings();
        if (!settings.blockAlerts) {
            return;
        }
        if (!originalAlert) {
            originalAlert = window.alert;
            originalConfirm = window.confirm;
            originalPrompt = window.prompt;
        }
        window.alert = function() {
            console.log('[网页录制器] 拦截 alert:', arguments[0]);
            return undefined;
        };
        window.confirm = function() {
            console.log('[网页录制器] 拦截 confirm:', arguments[0]);
            return true;
        };
        window.prompt = function() {
            console.log('[网页录制器] 拦截 prompt:', arguments[0]);
            return arguments[1] || '';
        };
    }

    function restorePageDialogs() {
        if (originalAlert) {
            window.alert = originalAlert;
            window.confirm = originalConfirm;
            window.prompt = originalPrompt;
        }
    }

    function getSettings() {
        const saved = storeGet(STORAGE.SETTINGS, {}) || {};

        return {
            ...DEFAULT_SETTINGS,
            ...saved,
            recordingMode:
                saved.recordingMode === 'detailed'
                    ? 'detailed'
                    : 'simple',
            fixedVariables:
                Array.isArray(saved.fixedVariables)
                    ? saved.fixedVariables
                    : [],
            ruleNameTemplate:
                String(saved.ruleNameTemplate || DEFAULT_SETTINGS.ruleNameTemplate),
            autoReplaceInputs:
                Boolean(saved.autoReplaceInputs),
            inputVariableNames:
                Array.isArray(saved.inputVariableNames)
                    ? saved.inputVariableNames
                    : DEFAULT_SETTINGS.inputVariableNames,
            silentSave:
                Boolean(saved.silentSave),
            batchConcurrency:
                Math.max(1, Math.min(20, Number(saved.batchConcurrency) || 5)),
            blockAlerts:
                saved.blockAlerts !== false,
            stepTimeout:
                Math.max(5000, Number(saved.stepTimeout) || 30000)
        };
    }

    function saveSettings(settings) {
        storeSet(STORAGE.SETTINGS, {
            ...DEFAULT_SETTINGS,
            ...settings,
            recordingMode:
                settings.recordingMode === 'detailed'
                    ? 'detailed'
                    : 'simple',
            fixedVariables:
                Array.isArray(settings.fixedVariables)
                    ? settings.fixedVariables
                    : [],
            ruleNameTemplate:
                String(settings.ruleNameTemplate || '{title}'),
            autoReplaceInputs:
                Boolean(settings.autoReplaceInputs),
            inputVariableNames:
                Array.isArray(settings.inputVariableNames)
                    ? settings.inputVariableNames
                    : [''],
            silentSave:
                Boolean(settings.silentSave),
            batchConcurrency:
                Math.max(1, Math.min(20, Number(settings.batchConcurrency) || 5)),
            blockAlerts:
                settings.blockAlerts !== false,
            stepTimeout:
                Math.max(5000, Number(settings.stepTimeout) || 30000)
        });
    }

    function normalizeRule(rule) {
        if (!rule || typeof rule !== 'object') {
            return null;
        }

        return {
            ...rule,
            id: rule.id || createId(),
            name: String(rule.name || '未命名规则'),
            group: String(rule.group || DEFAULT_GROUP),
            urlPattern: String(rule.urlPattern || '*'),
            recordingMode:
                rule.recordingMode === 'detailed'
                    ? 'detailed'
                    : 'simple',
            steps: Array.isArray(rule.steps) ? rule.steps : [],
            createdAt: Number(rule.createdAt) || Date.now(),
            updatedAt: Number(rule.updatedAt) || Date.now()
        };
    }

    function getRules() {
        const rules = storeGet(STORAGE.RULES, []);
        if (!Array.isArray(rules)) {
            return [];
        }

        return rules
            .map(normalizeRule)
            .filter(Boolean);
    }

    function saveRules(rules) {
        storeSet(
            STORAGE.RULES,
            Array.isArray(rules)
                ? rules.map(normalizeRule).filter(Boolean)
                : []
        );
    }

    function extractRuleVariables(rule) {
        const settings = getSettings();
        const prefix = settings.variablePrefix || '{';
        const suffix = settings.variableSuffix || '}';
        const escapedPrefix = prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const escapedSuffix = suffix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const regex = new RegExp(
            escapedPrefix + '([A-Za-z0-9_\u4e00-\u9fa5]+)' + escapedSuffix,
            'g'
        );

        const found = new Set();
        const text = JSON.stringify(rule.steps || []);
        let match;

        while ((match = regex.exec(text)) !== null) {
            found.add(match[1]);
        }

        return Array.from(found).sort();
    }

    function getGroups() {
        const stored = storeGet(STORAGE.GROUPS, []);
        const names = new Set();

        if (Array.isArray(stored)) {
            for (const item of stored) {
                const name = String(
                    typeof item === 'string'
                        ? item
                        : item?.name || ''
                ).trim();

                if (name) {
                    names.add(name);
                }
            }
        }

        for (const rule of getRules()) {
            const group = String(rule.group || '').trim();
            if (group) {
                names.add(group);
            }
        }

        return Array.from(names).sort((a, b) =>
            a.localeCompare(b, 'zh-CN')
        );
    }

    function saveGroups(groups) {
        const normalized = Array.from(
            new Set(
                (groups || [])
                    .map(item => String(item || '').trim())
                    .filter(Boolean)
            )
        ).sort((a, b) => a.localeCompare(b, 'zh-CN'));

        storeSet(STORAGE.GROUPS, normalized);
    }

    function getTaskStorageKey() {
        // 子标签页使用独立存储键，避免 saveTaskState 覆盖心跳数据
        if (state.batchTaskId) {
            return BATCH_TASK_PREFIX + state.batchTaskId + '_exec';
        }
        return STORAGE.TASK_STATE;
    }

    function getTaskState() {
        const task = storeGet(getTaskStorageKey(), null);

        if (!task || typeof task !== 'object' || !task.active) {
            return null;
        }

        return task;
    }

    function saveTaskState(task) {
        storeSet(getTaskStorageKey(), {
            ...task,
            active: true,
            updatedAt: Date.now()
        });
    }

    function clearTaskState() {
        storeDelete(getTaskStorageKey());
    }

    /******************************************************************
     * 批量执行调度器 v2（主控页面）
     *
     * 架构：
     * - 主控页面（管理面板所在标签页）维护规则队列和固定大小槽位数组
     * - 通过心跳检测子标签页存活状态
     * - 每个子标签页只执行一条规则
     * - 分组名包含"验证码"的规则：执行完毕后保留标签页，只腾出槽位
     ******************************************************************/

    const BATCH_TASK_PREFIX = 'SC_RECORDER_BATCH_TASK_';
    const BATCH_DONE_PREFIX = 'SC_RECORDER_BATCH_DONE_';

    // 心跳轮询间隔（毫秒）
    const HEARTBEAT_POLL_INTERVAL = 2000;
    // 心跳超时阈值（毫秒）：超过此时间无心跳则判定为超时
    const HEARTBEAT_TIMEOUT = 30000;
    // 首次心跳等待时间（毫秒）：新派发任务后等待标签页加载并首次上报心跳
    const HEARTBEAT_INITIAL_WAIT = 15000;

    /**
     * 可中止信号对象，用于取消 waitForLocator 等轮询操作
     */
    function createCancelSignal() {
        let aborted = false;
        return {
            get aborted() { return aborted; },
            abort() { aborted = true; }
        };
    }

    /**
     * 创建主控调度器
     */
    function createBatchScheduler(ruleIds, overrideVariables) {
        const settings = getSettings();
        const concurrency = Math.max(1, Math.min(20, Number(settings.batchConcurrency) || 5));
        const rules = getRules();
        const ruleMap = new Map(rules.map(r => [r.id, r]));

        const scheduler = {
            id: createId(),
            queue: ruleIds.filter(id => ruleMap.has(id)),
            slots: new Array(concurrency).fill(null),
            ruleMap: ruleMap,
            overrideVariables: overrideVariables || {},
            total: 0,
            completed: 0,
            failed: 0,
            skipped: 0,
            captchaTabs: [],
            running: true,
            timerId: null
        };
        scheduler.total = scheduler.queue.length;

        return scheduler;
    }

    /**
     * 调度器轮询：基于心跳检测任务状态
     */
    function schedulerTick(scheduler) {
        if (!scheduler || !scheduler.running) return;

        const now = Date.now();

        // 1. 检查所有槽位的心跳状态
        for (let i = 0; i < scheduler.slots.length; i++) {
            const slot = scheduler.slots[i];
            if (!slot) continue;

            // 1a. 检查是否已完成（子标签页写入了完成记录）
            const done = storeGet(BATCH_DONE_PREFIX + slot.taskId, null);
            if (done) {
                const isCaptcha = Boolean(done.isCaptcha);
                if (done._skipped) {
                    scheduler.skipped++;
                    addLog(`已跳过：${slot.rule.name}`, 'warning', {taskId: slot.taskId, slot: i});
                } else if (done.success) {
                    scheduler.completed++;
                    addLog(`完成：${slot.rule.name}${isCaptcha ? '（验证码组，标签已保留）' : ''}`, 'success', {taskId: slot.taskId, slot: i});
                    // 验证码组完成：记录到 captchaTabs 供 UI 展示
                    if (isCaptcha) {
                        scheduler.captchaTabs.push({
                            taskId: slot.taskId,
                            rule: slot.rule,
                            slotIndex: i
                        });
                    }
                } else {
                    scheduler.failed++;
                    addLog(`失败：${slot.rule.name}`, 'error', {taskId: slot.taskId, slot: i});
                }
                storeDelete(BATCH_DONE_PREFIX + slot.taskId);
                storeDelete(BATCH_TASK_PREFIX + slot.taskId);
                scheduler.slots[i] = null;
                continue;
            }

            // 1b. 检查任务存储是否丢失
            const taskData = storeGet(BATCH_TASK_PREFIX + slot.taskId, null);
            if (!taskData) {
                scheduler.failed++;
                addLog(`任务丢失：${slot.rule.name}（槽位${i + 1}）`, 'error', {taskId: slot.taskId, slot: i});
                scheduler.slots[i] = null;
                continue;
            }

            // 1c. 检测跳过信号（主控设置 _skip: true）
            if (taskData._skip) {
                scheduler.skipped++;
                addLog(`已跳过：${slot.rule.name}`, 'warning', {taskId: slot.taskId, slot: i});
                storeDelete(BATCH_TASK_PREFIX + slot.taskId);
                storeDelete(BATCH_DONE_PREFIX + slot.taskId);
                scheduler.slots[i] = null;
                continue;
            }

            // 1d. 心跳超时检测
            const lastHeartbeat = taskData._heartbeat || taskData.createdAt || slot.dispatchedAt;
            const elapsed = now - lastHeartbeat;
            const timeSinceDispatch = now - slot.dispatchedAt;

            if (timeSinceDispatch > HEARTBEAT_INITIAL_WAIT && elapsed > HEARTBEAT_TIMEOUT) {
                scheduler.failed++;
                addLog(`心跳超时（${Math.round(elapsed / 1000)}s）：${slot.rule.name}（槽位${i + 1}）`, 'error', {taskId: slot.taskId, slot: i});
                storeDelete(BATCH_TASK_PREFIX + slot.taskId);
                storeDelete(BATCH_DONE_PREFIX + slot.taskId);
                scheduler.slots[i] = null;
                continue;
            }
        }

        // 2. 派发新任务到空闲槽位
        for (let i = 0; i < scheduler.slots.length; i++) {
            if (scheduler.slots[i] !== null) continue;
            if (scheduler.queue.length === 0) continue;

            const ruleId = scheduler.queue.shift();
            const rule = scheduler.ruleMap.get(ruleId);
            if (!rule) {
                scheduler.skipped++;
                continue;
            }

            const taskId = createId();
            const isCaptchaRule = rule.group && rule.group.includes('验证码');
            const batchTask = {
                taskId: taskId,
                ruleId: rule.id,
                stepIndex: 0,
                variableOverrides: scheduler.overrideVariables,
                currentVariables: null,
                active: true,
                _heartbeat: Date.now(),
                _captchaGroup: isCaptchaRule || false,
                createdAt: Date.now()
            };
            storeSet(BATCH_TASK_PREFIX + taskId, batchTask);

            const startUrl = getRuleStartUrl(rule);
            if (!startUrl) {
                storeDelete(BATCH_TASK_PREFIX + taskId);
                scheduler.skipped++;
                addLog(`跳过（无起始URL）：${rule.name}`, 'warning');
                continue;
            }

            scheduler.slots[i] = {
                taskId: taskId,
                rule: rule,
                dispatchedAt: Date.now()
            };

            const url = addTaskParamToUrl(startUrl, taskId);
            openNewTab(url, false);
            addLog(`派发 → 槽位${i + 1}：${rule.name}${isCaptchaRule ? '（验证码组）' : ''}`, 'info', {taskId, slot: i});
        }

        // 3. 检查是否全部完成
        const allSlotsEmpty = scheduler.slots.every(s => s === null);
        const queueEmpty = scheduler.queue.length === 0;

        if (allSlotsEmpty && queueEmpty) {
            scheduler.running = false;
            if (scheduler.timerId) {
                clearInterval(scheduler.timerId);
                scheduler.timerId = null;
            }

            if (scheduler.captchaTabs.length > 0) {
                addLog(`批量执行完成，已保留 ${scheduler.captchaTabs.length} 个验证码标签页。`, 'success');
            }

            const msg = `批量执行完成：成功 ${scheduler.completed}，失败 ${scheduler.failed}，跳过 ${scheduler.skipped}，共 ${scheduler.total} 条。`;
            showToast(msg, 'success', 8000);
            addLog(msg, 'success');

            if (state.managerHost) {
                renderManager();
            }
            return;
        }

        if (state.managerHost) {
            renderManager();
        }
    }

    function startBatchScheduler(scheduler) {
        scheduler.timerId = setInterval(
            () => schedulerTick(scheduler),
            HEARTBEAT_POLL_INTERVAL
        );
        schedulerTick(scheduler);
    }

    /**
     * 停止调度器：杀死全部心跳，保留验证码标签页
     */
    function stopBatchScheduler() {
        const scheduler = state.batchScheduler;
        if (!scheduler) return;

        scheduler.running = false;
        if (scheduler.timerId) {
            clearInterval(scheduler.timerId);
            scheduler.timerId = null;
        }

        for (let i = 0; i < scheduler.slots.length; i++) {
            const slot = scheduler.slots[i];
            if (slot) {
                storeDelete(BATCH_TASK_PREFIX + slot.taskId);
                storeDelete(BATCH_DONE_PREFIX + slot.taskId);
            }
        }

        const doneCount = scheduler.completed + scheduler.failed;
        const remaining = scheduler.queue.length + scheduler.slots.filter(s => s !== null).length;
        showToast(
            `批量任务已停止：已完成 ${doneCount}/${scheduler.total}，剩余 ${remaining} 条未执行。`,
            'warning',
            6000
        );
        addLog(`批量任务已停止：已完成 ${doneCount}/${scheduler.total}，剩余 ${remaining} 条未执行。`, 'warning');

        state.batchScheduler = null;
    }

    /**
     * 跳过指定槽位的任务：终止心跳并加入特殊信号，腾出槽位但不关闭标签页
     */
    function skipSlotTask(slotIndex) {
        const scheduler = state.batchScheduler;
        if (!scheduler) return;
        const slot = scheduler.slots[slotIndex];
        if (!slot) return;

        const taskData = storeGet(BATCH_TASK_PREFIX + slot.taskId, null);
        if (taskData) {
            taskData._skip = true;
            taskData._skipKeepTab = true;
            storeSet(BATCH_TASK_PREFIX + slot.taskId, taskData);
        }

        scheduler.captchaTabs.push({
            taskId: slot.taskId,
            rule: slot.rule,
            slotIndex: slotIndex
        });

        addLog(`手动跳过：${slot.rule.name}（槽位${slotIndex + 1}，标签页已保留）`, 'warning', {taskId: slot.taskId, slot: slotIndex});
    }

    function getSchedulerSummary() {
        const s = state.batchScheduler;
        if (!s) return null;
        return {
            running: s.running,
            total: s.total,
            completed: s.completed,
            failed: s.failed,
            skipped: s.skipped,
            inProgress: s.slots.filter(t => t !== null).length,
            queueRemaining: s.queue.length,
            concurrency: s.slots.length,
            slots: s.slots,
            captchaTabs: s.captchaTabs
        };
    }

    /******************************************************************
     * 三、基础工具
     ******************************************************************/

    function createId() {
        if (
            window.crypto &&
            typeof window.crypto.randomUUID === 'function'
        ) {
            return window.crypto.randomUUID();
        }

        return (
            Date.now().toString(36) +
            '-' +
            Math.random().toString(36).slice(2)
        );
    }

    function sleep(ms) {
        return new Promise(resolve =>
            setTimeout(resolve, Math.max(0, Number(ms) || 0))
        );
    }

    function clone(value) {
        return JSON.parse(JSON.stringify(value));
    }

    function escapeHtml(value) {
        return String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    function escapeRegExp(value) {
        return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function cssEscape(value) {
        if (
            window.CSS &&
            typeof window.CSS.escape === 'function'
        ) {
            return window.CSS.escape(String(value));
        }

        return String(value).replace(
            /(^-?\d)|[^a-zA-Z0-9_-]/g,
            '\\$&'
        );
    }

    function cssAttr(value) {
        return String(value)
            .replace(/\\/g, '\\\\')
            .replace(/"/g, '\\"')
            .replace(/\n/g, '\\A ');
    }

    function truncateText(value, length = 100) {
        const text = String(value || '')
            .replace(/\s+/g, ' ')
            .trim();

        return text.length > length
            ? text.slice(0, length) + '…'
            : text;
    }

    function currentUrl() {
        return location.href.split('#')[0];
    }

    function isErrorPage() {
        const url = location.href;
        const title = (document.title || '').toLowerCase();

        if (/^chrome-error:/.test(url)) return true;
        if (/^about:neterror/.test(url)) return true;
        if (/^about:blank$/.test(url)) return true;

        const errorPatterns = [
            '404', '403', '500', '502', '503', '504',
            'not found', 'page not found',
            '无法访问', '无法连接', '找不到', '网页无法打开',
            'err_connection', 'err_name', 'err_timed_out',
            'dns_probe', 'server error', 'bad gateway',
            'service unavailable', 'gateway timeout'
        ];
        if (errorPatterns.some(p => title.includes(p))) return true;

        try {
            const bodyText = (document.body?.innerText || '').trim();
            if (bodyText.length < 300 && bodyText.length > 0) {
                const lowerBody = bodyText.toLowerCase();
                if (lowerBody.includes('error') ||
                    lowerBody.includes('404') ||
                    lowerBody.includes('not found') ||
                    lowerBody.includes('无法访问')) {
                    return true;
                }
            }
        } catch (e) {}

        return false;
    }

    function defaultUrlPattern() {
        return location.origin + location.pathname + '*';
    }

    function wildcardToRegExp(pattern) {
        const source = String(pattern || '*')
            .replace(/[.+?^${}()|[\]\\]/g, '\\$&')
            .replace(/\*/g, '.*');

        return new RegExp('^' + source + '$', 'i');
    }

    function urlMatches(pattern, url) {
        try {
            return wildcardToRegExp(pattern).test(url);
        } catch (error) {
            return String(pattern) === String(url);
        }
    }

    function normalizePathname(pathname) {
        return String(pathname).replace(/\/+$/, '') || '/';
    }

    function urlsEquivalent(expectedUrl, actualUrl) {
        if (!expectedUrl) {
            return true;
        }

        const settings = getSettings();

        try {
            const expected = new URL(expectedUrl, location.href);
            const actual = new URL(actualUrl, location.href);
            const expPath = normalizePathname(expected.pathname);
            const actPath = normalizePathname(actual.pathname);

            if (settings.ignoreQueryForPageCheck) {
                return (
                    expected.origin === actual.origin &&
                    expPath === actPath
                );
            }

            // 比较查询参数时，始终忽略 sc-recorder-task 参数（批量任务注入的内部参数）
            const filterInternalParams = (searchParams) => {
                const filtered = new URLSearchParams(searchParams);
                filtered.delete('sc-recorder-task');
                return filtered.toString();
            };
            const expSearch = filterInternalParams(expected.search);
            const actSearch = filterInternalParams(actual.search);

            return (
                expected.origin === actual.origin &&
                expPath === actPath &&
                expSearch === actSearch
            );
        } catch (error) {
            const norm = (url) => String(url)
                .replace(/[?&]sc-recorder-task=[^&]+/, '')
                .replace(/\/+$/, '')
                .toLowerCase();
            return norm(expectedUrl) === norm(actualUrl);
        }
    }

    function getRuleStartUrl(rule) {
        if (rule?.startUrl) {
            return rule.startUrl;
        }

        const pattern = String(rule?.urlPattern || '');
        return pattern.replace(/\*/g, '');
    }

    /**
     * 子标签页：启动心跳上报定时器
     */
    function startHeartbeat(batchTaskId) {
        stopHeartbeat();
        state._heartbeatTimer = setInterval(() => {
            if (!batchTaskId) return;

            const taskData = storeGet(BATCH_TASK_PREFIX + batchTaskId, null);
            if (!taskData) {
                stopHeartbeat();
                return;
            }
            if (taskData._skip) {
                stopHeartbeat();
                state.playing = false;
                state.batchTaskId = null;
                restorePageDialogs();
                const keepTab = taskData._skipKeepTab;
                storeDelete(BATCH_TASK_PREFIX + batchTaskId);
                storeSet(BATCH_DONE_PREFIX + batchTaskId, {
                    success: false,
                    isCaptcha: false,
                    finishedAt: Date.now(),
                    _skipped: true
                });
                if (!keepTab) {
                    window.close();
                }
                return;
            }

            taskData._heartbeat = Date.now();
            storeSet(BATCH_TASK_PREFIX + batchTaskId, taskData);
        }, 3000);
    }

    /**
     * 子标签页：停止心跳上报
     */
    function stopHeartbeat() {
        if (state._heartbeatTimer) {
            clearInterval(state._heartbeatTimer);
            state._heartbeatTimer = null;
        }
    }

    /**
     * 子标签页：每步更新心跳
     */
    function touchBatchHeartbeat(batchTaskId) {
        if (!batchTaskId) return;
        try {
            const task = storeGet(BATCH_TASK_PREFIX + batchTaskId, null);
            if (task && !task._skip) {
                task._heartbeat = Date.now();
                storeSet(BATCH_TASK_PREFIX + batchTaskId, task);
            }
        } catch (e) {}
    }

    /**
     * 子标签页执行完毕后调用：写入完成记录
     */
    function writeBatchDone(taskId, success, isCaptcha) {
        storeSet(BATCH_DONE_PREFIX + taskId, {
            success: Boolean(success),
            isCaptcha: Boolean(isCaptcha),
            finishedAt: Date.now()
        });
    }

    /**
     * 将批量任务ID附加到URL，确保页面跳转后仍能恢复任务状态
     */
    function addTaskParamToUrl(url, taskId) {
        if (!taskId) return url;
        try {
            const u = new URL(url, location.href);
            u.searchParams.set('sc-recorder-task', taskId);
            return u.toString();
        } catch (e) {
            const sep = url.includes('?') ? '&' : '?';
            return url + sep + 'sc-recorder-task=' + encodeURIComponent(taskId);
        }
    }

    /**
     * 安全地打开新标签页，优先使用 GM_openInTab 避免被拦截
     */
    function openNewTab(url, active) {
        if (typeof GM_openInTab === 'function') {
            GM_openInTab(url, { active: Boolean(active), insert: true });
            return true;
        }
        try {
            const w = window.open(url, '_blank');
            if (!w || w.closed) {
                console.warn('[网页录制器] window.open 被浏览器拦截，请允许弹出窗口。');
                return false;
            }
            return true;
        } catch (e) {
            console.error('[网页录制器] 无法打开新标签页：', e);
            return false;
        }
    }

    function formatTime(timestamp) {
        if (!timestamp) {
            return '未知';
        }

        try {
            return new Date(timestamp).toLocaleString();
        } catch (error) {
            return '未知';
        }
    }

    const MAX_LOG_ENTRIES = 500;

    /******************************************************************
     * UI 工具：可拖拽 + 自动淡化
     ******************************************************************/

    function getUIPosition(key, defaultPos) {
        try {
            const raw = localStorage.getItem('SC_RECORDER_UI_POS_' + key);
            if (raw) {
                const pos = JSON.parse(raw);
                if (pos && typeof pos.x === 'number' && typeof pos.y === 'number') {
                    return pos;
                }
            }
        } catch (e) {}
        return defaultPos;
    }

    function saveUIPosition(key, x, y) {
        try {
            localStorage.setItem('SC_RECORDER_UI_POS_' + key, JSON.stringify({ x, y }));
        } catch (e) {}
    }

    /**
     * 让一个元素可拖拽
     * @param {HTMLElement} element - 要拖拽的元素
     * @param {string} posKey - 位置持久化key
     * @param {{x:number,y:number}} defaultPos - 默认位置
     * @param {HTMLElement} dragHandle - 拖拽手柄（可选，默认为元素本身）
     */
    function makeDraggable(element, posKey, defaultPos, dragHandle) {
        const handle = dragHandle || element;
        const pos = getUIPosition(posKey, defaultPos);
        element.style.left = pos.x + 'px';
        element.style.top = pos.y + 'px';
        element.style.right = 'auto';
        element.style.bottom = 'auto';

        let dragging = false;
        let startX = 0, startY = 0;
        let elemStartX = 0, elemStartY = 0;
        let moved = false;

        handle.style.cursor = 'move';
        handle.addEventListener('mousedown', e => {
            if (e.button !== 0) return;
            // 排除点击按钮的情况（如果是按钮内部点击不触发拖拽）
            if (e.target.tagName === 'BUTTON' && handle !== element) return;
            dragging = true;
            moved = false;
            startX = e.clientX;
            startY = e.clientY;
            elemStartX = parseFloat(element.style.left) || 0;
            elemStartY = parseFloat(element.style.top) || 0;
            e.preventDefault();
        });

        document.addEventListener('mousemove', e => {
            if (!dragging) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
                moved = true;
            }
            const maxX = window.innerWidth - element.offsetWidth;
            const maxY = window.innerHeight - element.offsetHeight;
            const newX = Math.max(0, Math.min(maxX, elemStartX + dx));
            const newY = Math.max(0, Math.min(maxY, elemStartY + dy));
            element.style.left = newX + 'px';
            element.style.top = newY + 'px';
        });

        document.addEventListener('mouseup', () => {
            if (dragging && moved) {
                saveUIPosition(posKey, parseFloat(element.style.left), parseFloat(element.style.top));
            }
            dragging = false;
        });

        // 返回一个判断是否正在拖拽的函数，供 click 事件使用
        return () => dragging && moved;
    }

    /**
     * 鼠标离开后自动淡化，鼠标进入后恢复
     */
    function setupAutoFade(element, delay = 2500) {
        let fadeTimer = null;

        function fadeOut() {
            element.style.transition = 'opacity 0.3s ease';
            element.style.opacity = '0.25';
        }

        function fadeIn() {
            if (fadeTimer) {
                clearTimeout(fadeTimer);
                fadeTimer = null;
            }
            element.style.transition = 'opacity 0.15s ease';
            element.style.opacity = '1';
        }

        element.addEventListener('mouseenter', fadeIn);
        element.addEventListener('mouseleave', () => {
            if (fadeTimer) clearTimeout(fadeTimer);
            fadeTimer = setTimeout(fadeOut, delay);
        });

        // 初始延迟淡化
        fadeTimer = setTimeout(fadeOut, delay);
    }

    function addLog(message, level, extra) {
        try {
            const logs = storeGet(STORAGE.EXEC_LOGS, []);
            logs.push({
                time: Date.now(),
                level: level || 'info',
                message: String(message),
                extra: extra || null
            });
            if (logs.length > MAX_LOG_ENTRIES) {
                logs.splice(0, logs.length - MAX_LOG_ENTRIES);
            }
            storeSet(STORAGE.EXEC_LOGS, logs);
        } catch (e) {}
    }

    function clearLogs() {
        storeSet(STORAGE.EXEC_LOGS, []);
    }

    function getLogs() {
        return storeGet(STORAGE.EXEC_LOGS, []);
    }

    function showToast(message, type = 'info', duration = 3500) {
        if (!document.documentElement) {
            return;
        }

        const colors = {
            info: '#2563eb',
            success: '#16a34a',
            warning: '#d97706',
            error: '#dc2626'
        };

        const toast = document.createElement('div');
        toast.dataset.scRecorderUi = 'true';
        toast.textContent = String(message);

        Object.assign(toast.style, {
            position: 'fixed',
            top: '18px',
            left: '50%',
            transform: 'translateX(-50%)',
            zIndex: '2147483647',
            maxWidth: '88vw',
            padding: '11px 17px',
            borderRadius: '9px',
            color: '#fff',
            background: colors[type] || colors.info,
            boxShadow: '0 6px 24px rgba(0,0,0,.3)',
            fontSize: '14px',
            lineHeight: '1.5',
            fontFamily: 'Arial, "Microsoft YaHei", sans-serif',
            whiteSpace: 'pre-wrap',
            pointerEvents: 'none'
        });

        document.documentElement.appendChild(toast);
        setTimeout(() => toast.remove(), duration);
    }

    function isRecorderUiEvent(event) {
        const path =
            typeof event.composedPath === 'function'
                ? event.composedPath()
                : [];

        return path.some(node => {
            return (
                node &&
                node.nodeType === 1 &&
                (
                    node.dataset?.scRecorderUi === 'true' ||
                    node.id === 'sc-web-recorder-manager-host' ||
                    node.id === 'sc-web-recorder-floating-host'
                )
            );
        });
    }

    function getEventElement(event) {
        const path =
            typeof event.composedPath === 'function'
                ? event.composedPath()
                : [];

        for (const node of path) {
            if (node && node.nodeType === 1) {
                return node;
            }
        }

        return event.target?.nodeType === 1
            ? event.target
            : null;
    }

    /******************************************************************
     * 四、变量系统
     ******************************************************************/

    function padNumber(value, length = 2) {
        return String(value).padStart(length, '0');
    }

    function formatDate(date, format) {
        const values = {
            YYYY: date.getFullYear(),
            YY: String(date.getFullYear()).slice(-2),
            MM: padNumber(date.getMonth() + 1),
            M: date.getMonth() + 1,
            DD: padNumber(date.getDate()),
            D: date.getDate(),
            HH: padNumber(date.getHours()),
            H: date.getHours(),
            mm: padNumber(date.getMinutes()),
            m: date.getMinutes(),
            ss: padNumber(date.getSeconds()),
            s: date.getSeconds(),
            SSS: padNumber(date.getMilliseconds(), 3)
        };

        return String(format).replace(
            /YYYY|SSS|YY|MM|DD|HH|mm|ss|M|D|H|m|s/g,
            token => values[token]
        );
    }

    function randomString(length) {
        const chars =
            'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789';

        let result = '';

        for (let i = 0; i < length; i++) {
            result += chars[
                Math.floor(Math.random() * chars.length)
            ];
        }

        return result;
    }

    function randomDigits(length) {
        let result = '';

        for (let i = 0; i < length; i++) {
            result += Math.floor(Math.random() * 10);
        }

        return result;
    }

    function createUuid() {
        if (
            window.crypto &&
            typeof window.crypto.randomUUID === 'function'
        ) {
            return window.crypto.randomUUID();
        }

        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
            .replace(/[xy]/g, char => {
                const random = Math.random() * 16 | 0;
                const value =
                    char === 'x'
                        ? random
                        : (random & 0x3 | 0x8);

                return value.toString(16);
            });
    }

    function getNextCounter(variableName, start = 1, step = 1) {
        const counters =
            storeGet(STORAGE.COUNTERS, {}) || {};

        const key = String(variableName || 'default');

        let current = Number(counters[key]);
        if (!Number.isFinite(current)) {
            current = Number(start);
        }
        if (!Number.isFinite(current)) {
            current = 1;
        }

        let increment = Number(step);
        if (!Number.isFinite(increment)) {
            increment = 1;
        }

        counters[key] = current + increment;
        storeSet(STORAGE.COUNTERS, counters);

        return current;
    }

    function resetVariableCounters() {
        storeDelete(STORAGE.COUNTERS);
        showToast('所有递增变量计数器已重置。', 'success');

        if (state.managerHost) {
            renderManager();
        }
    }

    function evaluateVariableRule(
        ruleValue,
        variableName,
        counterCache = new Map()
    ) {
        let value = String(ruleValue ?? '');
        const now = new Date();

        value = value.replace(
            /\$i\(\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/g,
            (match, start, step) => {
                const cacheKey =
                    `${variableName}:${start}:${step}`;

                if (!counterCache.has(cacheKey)) {
                    counterCache.set(
                        cacheKey,
                        getNextCounter(
                            variableName,
                            Number(start),
                            Number(step)
                        )
                    );
                }

                return String(counterCache.get(cacheKey));
            }
        );

        value = value.replace(/\$i\+\+/g, () => {
            const cacheKey = `${variableName}:default`;

            if (!counterCache.has(cacheKey)) {
                counterCache.set(
                    cacheKey,
                    getNextCounter(variableName, 1, 1)
                );
            }

            return String(counterCache.get(cacheKey));
        });

        value = value.replace(
            /\$datetime(?:\(([^)]*)\))?/g,
            (match, format) =>
                formatDate(
                    now,
                    format || 'YYYY-MM-DD HH:mm:ss'
                )
        );

        value = value.replace(
            /\$date(?:\(([^)]*)\))?/g,
            (match, format) =>
                formatDate(now, format || 'YYYY-MM-DD')
        );

        value = value.replace(
            /\$time(?:\(([^)]*)\))?/g,
            (match, format) =>
                formatDate(now, format || 'HH:mm:ss')
        );

        value = value.replace(
            /\$timestamp10\b/g,
            String(Math.floor(now.getTime() / 1000))
        );

        value = value.replace(
            /\$timestamp\b/g,
            String(now.getTime())
        );

        value = value.replace(
            /\$uuid\b/g,
            () => createUuid()
        );

        value = value.replace(
            /\$random\(\s*(\d+)\s*\)/g,
            (match, length) =>
                randomString(
                    Math.max(
                        1,
                        Math.min(1000, Number(length))
                    )
                )
        );

        value = value.replace(
            /\$digits\(\s*(\d+)\s*\)/g,
            (match, length) =>
                randomDigits(
                    Math.max(
                        1,
                        Math.min(1000, Number(length))
                    )
                )
        );

        value = value.replace(
            /\$number\(\s*(-?\d+)\s*,\s*(-?\d+)\s*\)/g,
            (match, minimum, maximum) => {
                let min = Number(minimum);
                let max = Number(maximum);

                if (min > max) {
                    [min, max] = [max, min];
                }

                return String(
                    Math.floor(
                        Math.random() * (max - min + 1)
                    ) + min
                );
            }
        );

        value = value.replace(
            /\$pick\(([^)]*)\)/g,
            (match, optionsText) => {
                const options = String(optionsText)
                    .split('|')
                    .map(item => item.trim())
                    .filter(Boolean);

                if (!options.length) {
                    return '';
                }

                return options[
                    Math.floor(Math.random() * options.length)
                ];
            }
        );

        return value;
    }

    function replaceVariables(value, variables) {
        if (typeof value !== 'string') {
            return value;
        }

        const settings = getSettings();
        let result = value;

        for (const [name, replacement] of Object.entries(
            variables || {}
        )) {
            const token =
                settings.variablePrefix +
                name +
                settings.variableSuffix;

            result = result.split(token).join(
                replacement === null ||
                replacement === undefined
                    ? ''
                    : String(replacement)
            );
        }

        return result;
    }

    function applyVariablesDeep(value, variables) {
        if (typeof value === 'string') {
            return replaceVariables(value, variables);
        }

        if (Array.isArray(value)) {
            return value.map(item =>
                applyVariablesDeep(item, variables)
            );
        }

        if (value && typeof value === 'object') {
            const output = {};

            for (const [key, item] of Object.entries(value)) {
                output[key] =
                    applyVariablesDeep(item, variables);
            }

            return output;
        }

        return value;
    }

    function resolveExecutionVariables(overrides = {}) {
        const settings = getSettings();
        const result = {};
        const counterCache = new Map();

        for (const item of settings.fixedVariables) {
            if (!item || item.enabled === false) {
                continue;
            }

            const name = String(item.name || '').trim();
            if (!name) {
                continue;
            }

            if (
                Object.prototype.hasOwnProperty.call(
                    overrides,
                    name
                )
            ) {
                continue;
            }

            result[name] = evaluateVariableRule(
                item.value,
                name,
                counterCache
            );
        }

        Object.assign(result, overrides || {});

        for (let i = 0; i < 5; i++) {
            let changed = false;

            for (const key of Object.keys(result)) {
                const oldValue = String(result[key] ?? '');
                const newValue =
                    replaceVariables(oldValue, result);

                if (newValue !== oldValue) {
                    result[key] = newValue;
                    changed = true;
                }
            }

            if (!changed) {
                break;
            }
        }

        return result;
    }

    /******************************************************************
     * 五、DOM 定位器
     ******************************************************************/

    function isUniqueSelector(root, selector) {
        try {
            return root.querySelectorAll(selector).length === 1;
        } catch (error) {
            return false;
        }
    }

    function buildSelector(element, root) {
        if (!element || element.nodeType !== 1) {
            return '';
        }

        if (element.id) {
            const selector = '#' + cssEscape(element.id);
            if (isUniqueSelector(root, selector)) {
                return selector;
            }
        }

        const tag = element.tagName.toLowerCase();

        const attributes = [
            'data-testid',
            'data-test',
            'data-qa',
            'data-cy',
            'data-id',
            'name',
            'aria-label',
            'title',
            'role',
            'placeholder',
            'value'
        ];

        for (const attribute of attributes) {
            const value = element.getAttribute(attribute);

            if (!value || value.length > 160) {
                continue;
            }

            const selector =
                `${tag}[${attribute}="${cssAttr(value)}"]`;

            if (isUniqueSelector(root, selector)) {
                return selector;
            }
        }

        const stableClasses =
            Array.from(element.classList || [])
                .filter(className =>
                    className.length <= 60 &&
                    !/\d{4,}/.test(className) &&
                    !/^[a-f0-9]{8,}$/i.test(className)
                )
                .slice(0, 3);

        if (stableClasses.length) {
            const selector =
                tag +
                stableClasses
                    .map(className =>
                        '.' + cssEscape(className)
                    )
                    .join('');

            if (isUniqueSelector(root, selector)) {
                return selector;
            }
        }

        const parts = [];
        let current = element;

        while (
            current &&
            current.nodeType === 1 &&
            current !== root &&
            parts.length < 10
        ) {
            let part = current.tagName.toLowerCase();

            if (current.id) {
                parts.unshift('#' + cssEscape(current.id));
                break;
            }

            const parent = current.parentElement;

            if (parent) {
                const sameTag =
                    Array.from(parent.children)
                        .filter(child =>
                            child.tagName === current.tagName
                        );

                if (sameTag.length > 1) {
                    part +=
                        `:nth-of-type(${
                            sameTag.indexOf(current) + 1
                        })`;
                }
            }

            parts.unshift(part);
            current = parent;
        }

        return parts.join(' > ');
    }

    function buildShadowPath(element) {
        const segments = [];
        let current = element;

        while (current && current.nodeType === 1) {
            const root = current.getRootNode();

            segments.unshift(
                buildSelector(current, root)
            );

            if (root instanceof ShadowRoot) {
                current = root.host;
            } else {
                break;
            }
        }

        return segments;
    }

    function buildFramePath(ownerDocument) {
        const path = [];
        let currentDocument = ownerDocument;

        while (
            currentDocument?.defaultView &&
            currentDocument.defaultView !== window
        ) {
            try {
                const frameElement =
                    currentDocument.defaultView.frameElement;

                if (!frameElement) {
                    break;
                }

                path.unshift(
                    buildSelector(
                        frameElement,
                        frameElement.ownerDocument
                    )
                );

                currentDocument =
                    frameElement.ownerDocument;
            } catch (error) {
                break;
            }
        }

        return path;
    }

    function createLocator(element) {
        if (!element || element.nodeType !== 1) {
            return null;
        }

        return {
            framePath: buildFramePath(element.ownerDocument),
            shadowPath: buildShadowPath(element),
            css: buildSelector(
                element,
                element.getRootNode()
            ),
            tag: element.tagName.toLowerCase(),
            text: truncateText(
                element.innerText ||
                element.textContent ||
                element.value ||
                ''
            ),
            attributes: {
                id: element.id || '',
                name: element.getAttribute('name') || '',
                type: element.getAttribute('type') || '',
                role: element.getAttribute('role') || '',
                ariaLabel:
                    element.getAttribute('aria-label') || ''
            }
        };
    }

    function resolveFrameDocument(framePath) {
        let currentDocument = document;

        for (const selector of framePath || []) {
            try {
                const frame =
                    currentDocument.querySelector(selector);

                if (!frame?.contentDocument) {
                    return null;
                }

                currentDocument = frame.contentDocument;
            } catch (error) {
                return null;
            }
        }

        return currentDocument;
    }

    function resolveShadowPath(rootDocument, path) {
        if (!path?.length) {
            return null;
        }

        let root = rootDocument;
        let element = null;

        for (let i = 0; i < path.length; i++) {
            try {
                element = root.querySelector(path[i]);
            } catch (error) {
                return null;
            }

            if (!element) {
                return null;
            }

            if (i < path.length - 1) {
                if (!element.shadowRoot) {
                    return null;
                }

                root = element.shadowRoot;
            }
        }

        return element;
    }

    function resolveByText(rootDocument, locator) {
        if (!locator?.tag || !locator.text) {
            return null;
        }

        let elements;

        try {
            elements = Array.from(
                rootDocument.querySelectorAll(locator.tag)
            );
        } catch (error) {
            return null;
        }

        const targetText = locator.text.trim();

        return (
            elements.find(element =>
                truncateText(
                    element.innerText ||
                    element.textContent ||
                    element.value ||
                    ''
                ) === targetText
            ) ||
            elements.find(element =>
                truncateText(
                    element.innerText ||
                    element.textContent ||
                    element.value ||
                    ''
                ).includes(targetText)
            ) ||
            null
        );
    }

    function resolveLocator(locator) {
        if (!locator) {
            return null;
        }

        const rootDocument =
            resolveFrameDocument(locator.framePath);

        if (!rootDocument) {
            return null;
        }

        const shadowElement =
            resolveShadowPath(
                rootDocument,
                locator.shadowPath
            );

        if (shadowElement) {
            return shadowElement;
        }

        if (locator.css) {
            try {
                const element =
                    rootDocument.querySelector(locator.css);

                if (element) {
                    return element;
                }
            } catch (error) {
                // 继续使用文本匹配
            }
        }

        return resolveByText(rootDocument, locator);
    }

    async function waitForLocator(locator, timeout, signal) {
        const startTime = Date.now();

        while (Date.now() - startTime <= timeout) {
            if (signal?.aborted) return null;

            const element = resolveLocator(locator);

            if (element?.isConnected) {
                return element;
            }

            await sleep(200);
        }

        return null;
    }

    /******************************************************************
     * 六、录制功能
     ******************************************************************/

    function addRecordedStep(step) {
        if (!state.recording || !state.currentDraft) {
            return;
        }

        step.id = createId();
        step.time = Date.now();
        step.pageUrl = currentUrl();

        const steps = state.currentDraft.steps;
        const last = steps[steps.length - 1];
        const mode = getSettings().recordingMode;

        if (
            mode === 'detailed' &&
            step.type === 'input' &&
            last?.type === 'input' &&
            JSON.stringify(last.locator) ===
                JSON.stringify(step.locator) &&
            step.time - last.time < 3000
        ) {
            last.value = step.value;
            last.time = step.time;
            last.pageUrl = step.pageUrl;
        } else if (
            step.type === 'scroll' &&
            last?.type === 'scroll' &&
            JSON.stringify(last.locator) ===
                JSON.stringify(step.locator) &&
            step.time - last.time < 1500
        ) {
            last.scrollTop = step.scrollTop;
            last.scrollLeft = step.scrollLeft;
            last.time = step.time;
        } else {
            steps.push(step);
        }

        state.currentDraft.updatedAt = Date.now();
        storeSet(STORAGE.DRAFT, state.currentDraft);
        updateRecordingIndicator();
    }

    function getPendingInputKey(locator) {
        return JSON.stringify(locator || {});
    }

    function queueSimpleInputStep(step) {
        if (!step?.locator) {
            return;
        }

        const key = getPendingInputKey(step.locator);
        const existing = state.pendingInputs.get(key);

        if (existing) {
            existing.step = step;
            existing.updatedAt = Date.now();
        } else {
            state.pendingInputSequence++;

            state.pendingInputs.set(key, {
                sequence: state.pendingInputSequence,
                updatedAt: Date.now(),
                step
            });
        }

        updateRecordingIndicator();
    }

    function flushPendingInputs() {
        if (!state.pendingInputs.size) {
            return;
        }

        const pending =
            Array.from(state.pendingInputs.values())
                .sort((a, b) =>
                    a.sequence - b.sequence
                );

        state.pendingInputs.clear();

        for (const item of pending) {
            addRecordedStep(item.step);
        }
    }

    function recordClick(event) {
        if (
            !state.recording ||
            isRecorderUiEvent(event)
        ) {
            return;
        }

        if (getSettings().recordingMode === 'simple') {
            flushPendingInputs();
        }

        const element = getEventElement(event);
        if (!element) {
            return;
        }

        const rect = element.getBoundingClientRect();

        addRecordedStep({
            type: 'click',
            locator: createLocator(element),
            button: event.button,
            xRatio: rect.width
                ? Math.max(
                    0,
                    Math.min(
                        1,
                        (event.clientX - rect.left) /
                            rect.width
                    )
                )
                : 0.5,
            yRatio: rect.height
                ? Math.max(
                    0,
                    Math.min(
                        1,
                        (event.clientY - rect.top) /
                            rect.height
                    )
                )
                : 0.5
        });
    }

    function recordDoubleClick(event) {
        if (
            !state.recording ||
            isRecorderUiEvent(event)
        ) {
            return;
        }

        if (getSettings().recordingMode === 'simple') {
            flushPendingInputs();
        }

        const element = getEventElement(event);
        if (!element) {
            return;
        }

        addRecordedStep({
            type: 'dblclick',
            locator: createLocator(element),
            xRatio: 0.5,
            yRatio: 0.5
        });
    }

    function buildInputStep(element) {
        const tag = element.tagName?.toLowerCase();
        const type =
            String(element.type || '').toLowerCase();

        const settings = getSettings();

        if (type === 'file') {
            showToast(
                '浏览器限制：文件上传内容不能被录制。',
                'warning'
            );
            return null;
        }

        if (
            type === 'password' &&
            !settings.recordPasswords
        ) {
            return null;
        }

        if (
            type === 'checkbox' ||
            type === 'radio'
        ) {
            return {
                type: 'check',
                locator: createLocator(element),
                checked: Boolean(element.checked)
            };
        }

        if (tag === 'select') {
            return {
                type: 'select',
                locator: createLocator(element),
                value: element.value,
                selectedIndex: element.selectedIndex
            };
        }

        if (element.isContentEditable) {
            return {
                type: 'input',
                locator: createLocator(element),
                value: element.innerHTML,
                contentEditable: true
            };
        }

        if ('value' in element) {
            return {
                type: 'input',
                locator: createLocator(element),
                value: element.value,
                inputType: type || tag
            };
        }

        return null;
    }

    function recordInput(event) {
        if (
            !state.recording ||
            isRecorderUiEvent(event)
        ) {
            return;
        }

        const element = getEventElement(event);
        if (!element) {
            return;
        }

        const step = buildInputStep(element);
        if (!step) {
            return;
        }

        if (getSettings().recordingMode === 'simple') {
            queueSimpleInputStep(step);
        } else {
            addRecordedStep(step);
        }
    }

    function recordSubmit(event) {
        if (
            !state.recording ||
            isRecorderUiEvent(event)
        ) {
            return;
        }

        if (getSettings().recordingMode === 'simple') {
            flushPendingInputs();
        }
    }

    function recordKeyDown(event) {
        if (
            !state.recording ||
            isRecorderUiEvent(event)
        ) {
            return;
        }

        if (
            event.altKey &&
            String(event.key).toLowerCase() === 'r'
        ) {
            return;
        }

        const supportedKeys = new Set([
            'Enter',
            'Tab',
            'Escape',
            'ArrowUp',
            'ArrowDown',
            'ArrowLeft',
            'ArrowRight',
            'Home',
            'End',
            'PageUp',
            'PageDown',
            'Delete',
            'Backspace'
        ]);

        if (
            !supportedKeys.has(event.key) &&
            !event.ctrlKey &&
            !event.metaKey &&
            !event.altKey
        ) {
            return;
        }

        if (getSettings().recordingMode === 'simple') {
            if (
                event.key === 'Backspace' ||
                event.key === 'Delete'
            ) {
                return;
            }

            flushPendingInputs();
        }

        const element = getEventElement(event);

        addRecordedStep({
            type: 'key',
            locator: element
                ? createLocator(element)
                : null,
            key: event.key,
            code: event.code,
            ctrlKey: event.ctrlKey,
            shiftKey: event.shiftKey,
            altKey: event.altKey,
            metaKey: event.metaKey
        });
    }

    function recordScroll(event) {
        if (
            !state.recording ||
            isRecorderUiEvent(event)
        ) {
            return;
        }

        let target = event.target;
        const targetDocument =
            target?.ownerDocument || document;

        if (
            target === targetDocument ||
            target === targetDocument.documentElement ||
            target === targetDocument.body
        ) {
            target =
                targetDocument.defaultView || window;
        }

        const isWindowTarget =
            target === window ||
            target === targetDocument.defaultView;

        const key = isWindowTarget
            ? `window:${targetDocument.URL}`
            : JSON.stringify(createLocator(target));

        clearTimeout(state.scrollTimers.get(key));

        const timer = setTimeout(() => {
            state.scrollTimers.delete(key);

            if (
                getSettings().recordingMode === 'simple'
            ) {
                flushPendingInputs();
            }

            if (isWindowTarget) {
                addRecordedStep({
                    type: 'scroll',
                    target: 'window',
                    locator: null,
                    scrollTop: target.scrollY || 0,
                    scrollLeft: target.scrollX || 0
                });
            } else if (target?.nodeType === 1) {
                addRecordedStep({
                    type: 'scroll',
                    target: 'element',
                    locator: createLocator(target),
                    scrollTop: target.scrollTop,
                    scrollLeft: target.scrollLeft
                });
            }
        }, 250);

        state.scrollTimers.set(key, timer);
    }

    function recordBeforeUnload() {
        if (
            state.recording &&
            getSettings().recordingMode === 'simple'
        ) {
            flushPendingInputs();
        }
    }

    function bindRecorderToDocument(targetDocument) {
        if (
            !targetDocument ||
            targetDocument.__scRecorderBound
        ) {
            return;
        }

        try {
            targetDocument.__scRecorderBound = true;

            const bindings = [
                ['click', recordClick, true],
                ['dblclick', recordDoubleClick, true],
                ['input', recordInput, true],
                ['change', recordInput, true],
                ['submit', recordSubmit, true],
                ['keydown', recordKeyDown, true],
                ['scroll', recordScroll, true]
            ];

            for (const [name, handler, options] of bindings) {
                targetDocument.addEventListener(
                    name,
                    handler,
                    options
                );

                state.recorderCleanups.push(() => {
                    targetDocument.removeEventListener(
                        name,
                        handler,
                        options
                    );

                    targetDocument.__scRecorderBound = false;
                });
            }

            targetDocument
                .querySelectorAll('iframe,frame')
                .forEach(frame => {
                    try {
                        if (frame.contentDocument) {
                            bindRecorderToDocument(
                                frame.contentDocument
                            );
                        }

                        const loadHandler = () => {
                            try {
                                bindRecorderToDocument(
                                    frame.contentDocument
                                );
                            } catch (error) {
                                // 跨域 iframe 无法访问
                            }
                        };

                        frame.addEventListener(
                            'load',
                            loadHandler
                        );

                        state.recorderCleanups.push(() => {
                            frame.removeEventListener(
                                'load',
                                loadHandler
                            );
                        });
                    } catch (error) {
                        // 跨域 iframe 无法访问
                    }
                });
        } catch (error) {
            console.warn(
                '[网页录制器] 绑定文档失败：',
                error
            );
        }
    }

    function scanFrames() {
        if (!state.recording) {
            return;
        }

        bindRecorderToDocument(document);

        document
            .querySelectorAll('iframe,frame')
            .forEach(frame => {
                try {
                    bindRecorderToDocument(
                        frame.contentDocument
                    );
                } catch (error) {
                    // 忽略跨域 iframe
                }
            });
    }

    function startRecording(resume = false) {
        if (state.recording) {
            showToast(
                '当前已经处于录制状态。',
                'warning'
            );
            return;
        }

        if (state.playing || getTaskState()) {
            showToast(
                '正在执行规则，不能同时录制。',
                'warning'
            );
            return;
        }

        state.pendingInputs.clear();
        state.pendingInputSequence = 0;

        if (resume) {
            const draft =
                storeGet(STORAGE.DRAFT, null);

            if (!draft?.active) {
                return;
            }

            state.currentDraft = draft;
        } else {
            state.currentDraft = {
                id: createId(),
                active: true,
                name: '',
                group: DEFAULT_GROUP,
                urlPattern: defaultUrlPattern(),
                startUrl: currentUrl(),
                recordingMode:
                    getSettings().recordingMode,
                createdAt: Date.now(),
                updatedAt: Date.now(),
                steps: []
            };

            storeSet(
                STORAGE.DRAFT,
                state.currentDraft
            );
        }

        state.recording = true;
        bindRecorderToDocument(document);

        const observer =
            new MutationObserver(scanFrames);

        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });

        state.recorderCleanups.push(
            () => observer.disconnect()
        );

        window.addEventListener(
            'beforeunload',
            recordBeforeUnload,
            true
        );

        state.recorderCleanups.push(() => {
            window.removeEventListener(
                'beforeunload',
                recordBeforeUnload,
                true
            );
        });

        updateRecordingIndicator();

        const modeName =
            getSettings().recordingMode === 'simple'
                ? '简洁录制'
                : '详细录制';

        showToast(
            resume
                ? `已在新页面继续录制，当前为${modeName}，按 Alt+R 停止。`
                : `开始${modeName}，按 Alt+R 停止并保存。`,
            'success',
            4500
        );
    }

    function generateRuleName(template) {
        const title = document.title || '未命名';
        const hostname = location.hostname || 'unknown';
        const now = new Date();
        const seq = (getRules().length + 1);
        const pad = n => String(n).padStart(2, '0');

        return (template || '{title}')
            .replace(/\{title\}/g, title)
            .replace(/\{url\}/g, hostname)
            .replace(/\{seq\}/g, String(seq))
            .replace(/\{date\}/g, `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}`)
            .replace(/\{time\}/g, `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`)
            .replace(/\{datetime\}/g, `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`)
            .replace(/\{timestamp\}/g, String(Date.now()));
    }

    function stopRecording() {
        if (
            !state.recording ||
            !state.currentDraft
        ) {
            showToast(
                '当前没有正在录制的规则。',
                'warning'
            );
            return;
        }

        if (getSettings().recordingMode === 'simple') {
            flushPendingInputs();
        }

        state.recording = false;

        for (
            const cleanup
            of state.recorderCleanups.splice(0)
        ) {
            try {
                cleanup();
            } catch (error) {
                // 忽略清理错误
            }
        }

        for (const timer of state.scrollTimers.values()) {
            clearTimeout(timer);
        }

        state.scrollTimers.clear();
        state.pendingInputs.clear();
        removeRecordingIndicator();

        const draft = state.currentDraft;
        draft.active = false;
        draft.updatedAt = Date.now();

        if (!draft.steps.length) {
            storeDelete(STORAGE.DRAFT);
            state.currentDraft = null;

            showToast(
                '未录制到任何操作，已取消保存。',
                'warning'
            );
            return;
        }

        const settings = getSettings();
        let name = draft.name || '';
        let pattern = draft.urlPattern || defaultUrlPattern();
        let group = draft.group || '';

        // 文本框变量自动替换
        if (settings.autoReplaceInputs) {
            const varNames = (settings.inputVariableNames || []).filter(Boolean);
            let varIndex = 0;
            const prefix = settings.variablePrefix || '{';
            const suffix = settings.variableSuffix || '}';

            for (const step of draft.steps) {
                if (step.type === 'input' && step.value && varIndex < varNames.length) {
                    step.value = prefix + varNames[varIndex] + suffix;
                    varIndex++;
                }
            }
        }

        if (settings.silentSave) {
            // 静默保存：自动生成名称
            const title = document.title || '未命名';
            const hostname = location.hostname || 'unknown';
            const now = new Date();
            const seq = (getRules().length + 1);
            const pad = n => String(n).padStart(2, '0');

            const template = settings.ruleNameTemplate || '{title}';
            name = template
                .replace(/\{title\}/g, title)
                .replace(/\{url\}/g, hostname)
                .replace(/\{seq\}/g, String(seq))
                .replace(/\{date\}/g, `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}`)
                .replace(/\{time\}/g, `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`)
                .replace(/\{datetime\}/g, `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`)
                .replace(/\{timestamp\}/g, String(Date.now()));
        } else {
            const defaultName = name || generateRuleName(settings.ruleNameTemplate);

            const promptName = window.prompt(
                '请输入规则名称：',
                defaultName
            );

            if (promptName === null) {
                storeDelete(STORAGE.DRAFT);
                state.currentDraft = null;
                return;
            }
            name = promptName.trim() || defaultName;

            const promptPattern = window.prompt(
                '请输入 URL 匹配规则，可以使用 * 通配符：',
                pattern
            );

            if (promptPattern === null) {
                storeDelete(STORAGE.DRAFT);
                state.currentDraft = null;
                return;
            }
            pattern = promptPattern.trim() || defaultUrlPattern();

            const groups = getGroups();
            const groupText = groups.length
                ? `已有分组：\n${groups.join('\n')}\n\n`
                : '';

            const promptGroup = window.prompt(
                groupText +
                '请输入规则分组，留空表示未分组：',
                group
            );

            if (promptGroup === null) {
                storeDelete(STORAGE.DRAFT);
                state.currentDraft = null;
                return;
            }
            group = promptGroup.trim();
        }

        draft.name = name;
        draft.group = group;
        draft.urlPattern = pattern;

        const rules = getRules();
        const index = rules.findIndex(
            rule => rule.id === draft.id
        );

        if (index >= 0) {
            rules[index] = draft;
        } else {
            rules.push(draft);
        }

        saveRules(rules);

        if (draft.group) {
            saveGroups([
                ...getGroups(),
                draft.group
            ]);
        }

        storeDelete(STORAGE.DRAFT);
        state.currentDraft = null;

        showToast(
            `规则“${draft.name}”已保存，共 ${draft.steps.length} 步。`,
            'success',
            5000
        );
    }

    function toggleRecording() {
        if (state.recording) {
            stopRecording();
        } else {
            startRecording(false);
        }
    }

    function updateRecordingIndicator() {
        if (
            !document.documentElement ||
            !state.recording
        ) {
            return;
        }

        if (!state.recordingIndicator) {
            const indicator =
                document.createElement('div');

            indicator.dataset.scRecorderUi = 'true';

            Object.assign(indicator.style, {
                position: 'fixed',
                zIndex: '2147483647',
                padding: '8px 12px',
                borderRadius: '999px',
                background: '#dc2626',
                color: '#fff',
                fontSize: '13px',
                fontWeight: 'bold',
                fontFamily:
                    'Arial, "Microsoft YaHei", sans-serif',
                boxShadow:
                    '0 4px 14px rgba(0,0,0,.25)',
                userSelect: 'none',
                cursor: 'move'
            });

            const isDragging = makeDraggable(
                indicator,
                'recordingIndicator',
                { x: window.innerWidth - 150, y: 14 }
            );

            indicator.onclick = event => {
                if (isDragging()) return;
                event.preventDefault();
                event.stopPropagation();
                stopRecording();
            };

            setupAutoFade(indicator, 2500);

            document.documentElement.appendChild(
                indicator
            );

            state.recordingIndicator = indicator;
        }

        const modeName =
            getSettings().recordingMode === 'simple'
                ? '简洁'
                : '详细';

        const pendingCount =
            state.pendingInputs.size;

        state.recordingIndicator.textContent =
            `● ${modeName}录制：` +
            `${state.currentDraft?.steps?.length || 0} 步` +
            (
                pendingCount
                    ? `，待保存输入 ${pendingCount}`
                    : ''
            );
    }

    function removeRecordingIndicator() {
        state.recordingIndicator?.remove();
        state.recordingIndicator = null;
    }

    /******************************************************************
     * 七、网页事件模拟
     ******************************************************************/

    function setNativeProperty(
        element,
        property,
        value
    ) {
        let prototype = Object.getPrototypeOf(element);

        while (prototype) {
            const descriptor =
                Object.getOwnPropertyDescriptor(
                    prototype,
                    property
                );

            if (descriptor?.set) {
                descriptor.set.call(element, value);
                return;
            }

            prototype =
                Object.getPrototypeOf(prototype);
        }

        element[property] = value;
    }

    function dispatchInputEvents(element, value) {
        try {
            const view =
                element.ownerDocument?.defaultView ||
                window;

            const InputEventConstructor =
                view.InputEvent || InputEvent;

            element.dispatchEvent(
                new InputEventConstructor(
                    'beforeinput',
                    {
                        bubbles: true,
                        composed: true,
                        cancelable: true,
                        inputType: 'insertText',
                        data: String(value ?? '')
                    }
                )
            );
        } catch (error) {
            // 某些浏览器不支持构造 InputEvent
        }

        element.dispatchEvent(
            new Event('input', {
                bubbles: true,
                composed: true
            })
        );

        element.dispatchEvent(
            new Event('change', {
                bubbles: true,
                composed: true
            })
        );

        element.dispatchEvent(
            new Event('blur', {
                bubbles: false,
                composed: true
            })
        );
    }

    function getMousePosition(element, step) {
        const rect = element.getBoundingClientRect();

        return {
            clientX:
                rect.left +
                rect.width *
                (
                    typeof step.xRatio === 'number'
                        ? step.xRatio
                        : 0.5
                ),
            clientY:
                rect.top +
                rect.height *
                (
                    typeof step.yRatio === 'number'
                        ? step.yRatio
                        : 0.5
                )
        };
    }

    function dispatchMouse(
        element,
        name,
        position,
        detail = 1
    ) {
        const view =
            element.ownerDocument?.defaultView ||
            window;

        const options = {
            bubbles: true,
            composed: true,
            cancelable: true,
            view,
            clientX: position.clientX,
            clientY: position.clientY,
            screenX: position.clientX,
            screenY: position.clientY,
            button: 0,
            buttons: name.includes('down') ? 1 : 0,
            detail
        };

        try {
            const PointerEventConstructor =
                view.PointerEvent;

            if (
                name.startsWith('pointer') &&
                typeof PointerEventConstructor === 'function'
            ) {
                element.dispatchEvent(
                    new PointerEventConstructor(
                        name,
                        {
                            ...options,
                            pointerId: 1,
                            pointerType: 'mouse',
                            isPrimary: true
                        }
                    )
                );
                return;
            }
        } catch (error) {
            // 回退到 MouseEvent
        }

        const MouseEventConstructor =
            view.MouseEvent || MouseEvent;

        element.dispatchEvent(
            new MouseEventConstructor(name, options)
        );
    }

    async function executeClick(element, step) {
        if (getSettings().scrollIntoView) {
            element.scrollIntoView({
                block: 'center',
                inline: 'center',
                behavior: 'auto'
            });

            await sleep(100);
        }

        try {
            element.focus({
                preventScroll: true
            });
        } catch (error) {
            try {
                element.focus();
            } catch (ignore) {
                // 元素不可聚焦
            }
        }

        const position =
            getMousePosition(element, step);

        dispatchMouse(
            element,
            'pointerover',
            position
        );

        dispatchMouse(
            element,
            'mouseover',
            position
        );

        dispatchMouse(
            element,
            'pointerdown',
            position
        );

        dispatchMouse(
            element,
            'mousedown',
            position
        );

        dispatchMouse(
            element,
            'pointerup',
            position
        );

        dispatchMouse(
            element,
            'mouseup',
            position
        );

        if (typeof element.click === 'function') {
            element.click();
        } else {
            dispatchMouse(
                element,
                'click',
                position
            );
        }
    }

    async function executeInput(element, step) {
        if (getSettings().scrollIntoView) {
            element.scrollIntoView({
                block: 'center',
                inline: 'center',
                behavior: 'auto'
            });
        }

        try {
            element.focus();
        } catch (error) {
            // 继续设置内容
        }

        if (
            step.contentEditable ||
            element.isContentEditable
        ) {
            element.innerHTML =
                String(step.value ?? '');

            dispatchInputEvents(
                element,
                step.value
            );

            return;
        }

        setNativeProperty(
            element,
            'value',
            String(step.value ?? '')
        );

        dispatchInputEvents(
            element,
            step.value
        );
    }

    async function executeCheck(element, step) {
        const desired = Boolean(step.checked);

        if (Boolean(element.checked) !== desired) {
            try {
                setNativeProperty(
                    element,
                    'checked',
                    desired
                );
            } catch (error) {
                element.checked = desired;
            }
        }

        element.dispatchEvent(
            new Event('input', {
                bubbles: true,
                composed: true
            })
        );

        element.dispatchEvent(
            new Event('change', {
                bubbles: true,
                composed: true
            })
        );
    }

    async function executeSelect(element, step) {
        const options =
            Array.from(element.options || []);

        const value =
            String(step.value ?? '');

        const valueExists =
            options.some(option =>
                option.value === value
            );

        if (valueExists) {
            setNativeProperty(
                element,
                'value',
                value
            );
        } else if (
            options[step.selectedIndex]
        ) {
            element.selectedIndex =
                step.selectedIndex;
        }

        element.dispatchEvent(
            new Event('input', {
                bubbles: true,
                composed: true
            })
        );

        element.dispatchEvent(
            new Event('change', {
                bubbles: true,
                composed: true
            })
        );
    }

    async function executeKey(element, step) {
        const target =
            element ||
            document.activeElement ||
            document.body;

        try {
            target.focus();
        } catch (error) {
            // 元素不可聚焦
        }

        const view =
            target.ownerDocument?.defaultView ||
            window;

        const KeyboardEventConstructor =
            view.KeyboardEvent || KeyboardEvent;

        const options = {
            key: step.key,
            code: step.code || '',
            ctrlKey: Boolean(step.ctrlKey),
            shiftKey: Boolean(step.shiftKey),
            altKey: Boolean(step.altKey),
            metaKey: Boolean(step.metaKey),
            bubbles: true,
            composed: true,
            cancelable: true
        };

        target.dispatchEvent(
            new KeyboardEventConstructor(
                'keydown',
                options
            )
        );

        target.dispatchEvent(
            new KeyboardEventConstructor(
                'keypress',
                options
            )
        );

        target.dispatchEvent(
            new KeyboardEventConstructor(
                'keyup',
                options
            )
        );

        if (
            step.key === 'Enter' &&
            target.form &&
            typeof target.form.requestSubmit === 'function'
        ) {
            await sleep(100);

            if (target.isConnected) {
                try {
                    target.form.requestSubmit();
                } catch (error) {
                    // 表单可能不允许提交
                }
            }
        }
    }

    async function executeStepWithTimeout(step, signal) {
        const settings = getSettings();
        const timeout = Math.max(5000, Number(settings.stepTimeout) || 30000);

        return new Promise((resolve, reject) => {
            let settled = false;

            const timer = setTimeout(() => {
                if (!settled) {
                    settled = true;
                    signal?.abort();
                    reject(new Error(`步骤执行超时 ${timeout / 1000} 秒`));
                }
            }, timeout);

            executeStepInternal(step, signal).then(
                result => {
                    if (!settled) {
                        settled = true;
                        clearTimeout(timer);
                        resolve(result);
                    }
                },
                err => {
                    if (!settled) {
                        settled = true;
                        clearTimeout(timer);
                        reject(err);
                    }
                }
            );
        });
    }

    async function executeStepInternal(step, signal) {
        const settings = getSettings();

        if (step.type === 'wait') {
            const duration = Number(step.duration) || settings.stepDelay;
            const steps = Math.ceil(duration / 200);
            for (let i = 0; i < steps; i++) {
                if (signal?.aborted) return;
                await sleep(Math.min(200, duration - i * 200));
            }
            return;
        }

        let element = null;

        if (step.locator) {
            element = await waitForLocator(
                step.locator,
                Number(settings.elementTimeout),
                signal
            );

            if (!element) {
                throw new Error(
                    `未找到元素：${
                        step.locator.css ||
                        step.locator.text ||
                        '未知元素'
                    }`
                );
            }
        }

        switch (step.type) {
            case 'click':
                await executeClick(element, step);
                break;

            case 'dblclick':
                await executeClick(element, step);
                await sleep(80);
                await executeClick(element, step);

                dispatchMouse(
                    element,
                    'dblclick',
                    getMousePosition(element, step),
                    2
                );
                break;

            case 'input':
                await executeInput(element, step);
                break;

            case 'check':
                await executeCheck(element, step);
                break;

            case 'select':
                await executeSelect(element, step);
                break;

            case 'key':
                await executeKey(element, step);
                break;

            case 'scroll':
                if (
                    step.target === 'window' ||
                    !step.locator
                ) {
                    window.scrollTo({
                        top: Number(step.scrollTop) || 0,
                        left: Number(step.scrollLeft) || 0,
                        behavior: 'auto'
                    });
                } else {
                    element.scrollTo({
                        top: Number(step.scrollTop) || 0,
                        left: Number(step.scrollLeft) || 0,
                        behavior: 'auto'
                    });
                }
                break;

            default:
                console.warn(
                    '[网页录制器] 未知步骤类型：',
                    step.type
                );
        }
    }

    let _stepSignal = null;

    async function executeStep(step) {
        _stepSignal = createCancelSignal();
        return executeStepWithTimeout(step, _stepSignal);
    }

    /******************************************************************
     * 八、统一任务系统
     *
     * mode:
     * single     单条规则
     * ruleBatch  多条规则依次执行
     * dataBatch  单条规则按多行 JSON 数据执行
     ******************************************************************/

    function createSingleTask(
        ruleId,
        overrideVariables = {}
    ) {
        return {
            active: true,
            mode: 'single',
            ruleIds: [ruleId],
            ruleIndex: 0,
            stepIndex: 0,
            variableOverrides: overrideVariables || {},
            currentVariables: null,
            createdAt: Date.now()
        };
    }

    function createDataBatchTask(ruleId, rows) {
        return {
            active: true,
            mode: 'dataBatch',
            ruleIds: [ruleId],
            ruleIndex: 0,
            rows,
            rowIndex: 0,
            stepIndex: 0,
            currentVariables: null,
            createdAt: Date.now()
        };
    }

    function getCurrentTaskRule(task) {
        const rules = getRules();

        if (task.mode === 'dataBatch') {
            return rules.find(
                rule => rule.id === task.ruleIds?.[0]
            );
        }

        const ruleId =
            task.ruleIds?.[task.ruleIndex || 0];

        return rules.find(rule => rule.id === ruleId);
    }

    function getCurrentTaskOverrides(task) {
        if (task.mode === 'dataBatch') {
            const row =
                task.rows?.[task.rowIndex || 0];

            return row && typeof row === 'object'
                ? row
                : {};
        }

        return task.variableOverrides || {};
    }

    function getCurrentTaskStartUrl(task, rule) {
        if (task.mode === 'dataBatch') {
            const row =
                task.rows?.[task.rowIndex || 0] || {};

            return row.__url || getRuleStartUrl(rule);
        }

        return getRuleStartUrl(rule);
    }

    function getTaskProgressText(task, rule) {
        if (state.batchTaskId) {
            return `批量任务：${rule.name}`;
        }

        if (task.mode === 'dataBatch') {
            return (
                `批量数据 ${
                    Number(task.rowIndex || 0) + 1
                }/${task.rows.length}：${rule.name}`
            );
        }

        return `执行规则：${rule.name}`;
    }

    function startTask(task) {
        if (state.recording) {
            showToast(
                '请先停止录制。',
                'warning'
            );
            return;
        }

        if (state.playing || getTaskState()) {
            showToast(
                '已有任务正在执行，请先停止当前任务。',
                'warning'
            );
            return;
        }

        saveTaskState(task);
        continueTask();
    }

    function executeRuleById(
        ruleId,
        overrideVariables = {}
    ) {
        const rule = getRules().find(
            item => item.id === ruleId
        );

        if (!rule) {
            showToast(
                '找不到指定规则。',
                'error'
            );
            return;
        }

        startTask(
            createSingleTask(
                ruleId,
                overrideVariables
            )
        );
    }

    function executeSelectedRules(
        ruleIds,
        overrideVariables = {}
    ) {
        const validIds = [];
        const rules = getRules();
        const ruleMap = new Map(
            rules.map(rule => [rule.id, rule])
        );

        for (const id of ruleIds || []) {
            if (ruleMap.has(id)) {
                validIds.push(id);
            }
        }

        if (!validIds.length) {
            showToast(
                '请至少选择一条有效规则。',
                'warning'
            );
            return;
        }

        // 创建主控调度器
        const scheduler = createBatchScheduler(validIds, overrideVariables);
        state.batchScheduler = scheduler;
        startBatchScheduler(scheduler);

        showToast(
            `批量任务已启动，共 ${validIds.length} 条规则，并发 ${scheduler.slots.length}。`,
            'success',
            4000
        );

        if (state.managerHost) {
            renderManager();
        }
    }

    function startDataBatch(ruleId, rows) {
        if (
            !Array.isArray(rows) ||
            !rows.length
        ) {
            showToast(
                '批量数据必须是非空 JSON 数组。',
                'error'
            );
            return;
        }

        const rule = getRules().find(
            item => item.id === ruleId
        );

        if (!rule) {
            showToast(
                '批量任务对应的规则不存在。',
                'error'
            );
            return;
        }

        startTask(
            createDataBatchTask(ruleId, rows)
        );
    }

    async function waitForExpectedPage(
        expectedUrl,
        timeout
    ) {
        const start = Date.now();

        while (Date.now() - start <= timeout) {
            if (
                urlsEquivalent(
                    expectedUrl,
                    currentUrl()
                )
            ) {
                return true;
            }

            await sleep(250);
        }

        return false;
    }

    async function runCurrentRule(
        task,
        rule,
        variables
    ) {
        let index = Number(task.stepIndex) || 0;
        const RULE_GLOBAL_TIMEOUT = 180000; // 3分钟全局超时
        const deadline = Date.now() + RULE_GLOBAL_TIMEOUT;

        showToast(
            `${getTaskProgressText(task, rule)}\n` +
            `从第 ${index + 1} 步开始，共 ${rule.steps.length} 步。`,
            'info',
            4500
        );

        addLog(
            `开始执行：${rule.name}（第 ${index + 1}/${rule.steps.length} 步）`,
            'info',
            {ruleId: rule.id}
        );

        while (index < rule.steps.length) {
            // 全局超时检查
            if (Date.now() > deadline) {
                throw new Error(`规则全局超时（超过 ${RULE_GLOBAL_TIMEOUT / 1000} 秒，共 ${rule.steps.length} 步中执行到第 ${index + 1} 步）`);
            }

            const rawStep = clone(rule.steps[index]);

            const step =
                applyVariablesDeep(
                    rawStep,
                    variables
                );

            if (
                step.pageUrl &&
                !urlsEquivalent(
                    step.pageUrl,
                    currentUrl()
                )
            ) {
                const arrived =
                    await waitForExpectedPage(
                        step.pageUrl,
                        getSettings().elementTimeout
                    );

                if (!arrived) {
                    showToast(
                        `第 ${index + 1} 步页面无法加载，跳过该步骤。`,
                        'warning',
                        4000
                    );
                    addLog(`步骤 ${index + 1} 跳过：页面未加载到 ${step.pageUrl}`, 'warning', {ruleId: rule.id, stepIndex: index + 1});
                    index++;
                    continue;
                }
            }

            task.stepIndex = index + 1;
            task.currentVariables = variables;
            saveTaskState(task);

            // 每步更新心跳
            touchBatchHeartbeat(state.batchTaskId);

            try {
                await executeStep(step);
            } catch (error) {
                task.stepIndex = index;
                task.currentVariables = variables;
                saveTaskState(task);
                throw error;
            }

            index++;

            addLog(
                `步骤 ${index}/${rule.steps.length} 完成：${step.type}${
                    step.locator
                        ? ` → ${step.locator.css || step.locator.text || ''}`
                        : ''
                }`,
                'debug',
                {ruleId: rule.id, stepIndex: index}
            );

            await sleep(
                Number(getSettings().stepDelay) || 0
            );
        }
    }

    async function completeCurrentTaskUnit(task, rule) {
        if (task.mode === 'single') {
            if (state.batchTaskId) {
                const originalRule = getCurrentTaskRule(task);
                const isCaptcha = originalRule?.group && originalRule.group.includes('验证码');

                stopHeartbeat();
                restorePageDialogs();

                writeBatchDone(state.batchTaskId, true, isCaptcha);
                storeDelete(BATCH_TASK_PREFIX + state.batchTaskId);
                state.batchTaskId = null;
                clearTaskState();
                state.playing = false;

                if (isCaptcha) {
                    showToast(`规则"${originalRule.name}"执行完成，标签已保留。`, 'success', 5000);
                    addLog(`验证码规则完成：${originalRule.name}（标签已保留）`, 'success');
                } else {
                    addLog(`规则完成：${originalRule.name}（标签将关闭）`, 'success');
                    await sleep(300);
                    window.close();
                }
                return;
            }

            clearTaskState();
            state.playing = false;

            showToast(
                `规则"${rule.name}"执行完成。`,
                'success',
                5000
            );

            return;
        }

        if (task.mode === 'dataBatch') {
            task.rowIndex =
                Number(task.rowIndex || 0) + 1;

            task.stepIndex = 0;
            task.currentVariables = null;

            if (task.rowIndex >= task.rows.length) {
                clearTaskState();
                state.playing = false;

                showToast(
                    `数据批量执行完成，共处理 ${task.rows.length} 条数据。`,
                    'success',
                    6000
                );

                return;
            }

            saveTaskState(task);
            state.playing = false;

            await sleep(800);
            continueTask();
        }
    }

    function togglePause() {
        state.paused = !state.paused;

        if (state.paused) {
            showToast('任务已暂停，点击继续按钮恢复执行。', 'warning', 4000);
        } else {
            showToast('任务已恢复。', 'success', 2000);
            continueTask();
        }

        updateFloatingButton();

        if (state.managerHost) {
            renderManager();
        }
    }

    async function continueTask() {
        if (state.playing) {
            return;
        }

        const task = getTaskState();

        if (!task) {
            return;
        }

        if (state.paused) {
            return;
        }

        if (state.recording) {
            showToast(
                '录制状态下不能执行任务。',
                'warning'
            );
            return;
        }

        const rule = getCurrentTaskRule(task);

        if (!rule) {
            clearTaskState();

            showToast(
                '任务中的规则不存在，任务已停止。',
                'error'
            );
            return;
        }

        if (!Array.isArray(rule.steps)) {
            clearTaskState();

            showToast(
                `规则“${rule.name}”的数据无效。`,
                'error'
            );
            return;
        }

        let variables = task.currentVariables;

        if (!variables) {
            variables =
                resolveExecutionVariables(
                    getCurrentTaskOverrides(task)
                );

            task.currentVariables = variables;
            saveTaskState(task);
        }

        const startUrl =
            getCurrentTaskStartUrl(task, rule);

        if (
            Number(task.stepIndex || 0) === 0 &&
            startUrl &&
            !urlsEquivalent(
                startUrl,
                currentUrl()
            )
        ) {
            const url = state.batchTaskId
                ? addTaskParamToUrl(startUrl, state.batchTaskId)
                : startUrl;

            // 防重定向循环保护：5秒内重复触发则终止
            const now = Date.now();
            if (state.batchTaskId && now - state._lastBatchRedirect < 5000) {
                addLog(`规则跳转循环保护触发：${rule.name}（${startUrl}）`, 'error');
                stopHeartbeat();
                writeBatchDone(state.batchTaskId, false, false);
                storeDelete(BATCH_TASK_PREFIX + state.batchTaskId);
                state.batchTaskId = null;
                state.playing = false;
                restorePageDialogs();
                await sleep(500);
                window.close();
                return;
            }
            state._lastBatchRedirect = now;
            location.href = url;
            return;
        }

        state.playing = true;
        blockPageDialogs();

        try {
            await runCurrentRule(
                task,
                rule,
                variables
            );

            await completeCurrentTaskUnit(
                task,
                rule
            );
        } catch (error) {
            restorePageDialogs();
            state.playing = false;

            console.error(
                '[网页录制器] 执行失败：',
                error
            );

            const failedStep = rule.steps?.[index];
            addLog(
                `规则失败：${rule.name}（${error.message || error}）`,
                'error',
                {
                    ruleId: rule.id,
                    ruleGroup: rule.group,
                    ruleUrl: rule.urlPattern,
                    stepIndex: index + 1,
                    stepTotal: rule.steps.length,
                    stepType: failedStep?.type,
                    stepLocator: failedStep?.locator,
                    pageUrl: currentUrl(),
                    error: error.message || String(error)
                }
            );

            showToast(
                `规则"${rule.name}"执行失败：${
                    error.message || error
                }\n延时 5 秒后跳过该规则，继续执行后续任务。`,
                'error',
                6000
            );

            // 延时 5 秒后跳过当前规则，继续后续任务
            await sleep(5000);

            if (task.mode === 'single') {
                if (state.batchTaskId) {
                    stopHeartbeat();
                    writeBatchDone(state.batchTaskId, false, false);
                    storeDelete(BATCH_TASK_PREFIX + state.batchTaskId);
                    state.batchTaskId = null;
                    state.playing = false;
                    restorePageDialogs();
                    await sleep(3000);
                    window.close();
                    return;
                }
                clearTaskState();
                return;
            }

            if (task.mode === 'dataBatch') {
                task.rowIndex =
                    Number(task.rowIndex || 0) + 1;
                task.stepIndex = 0;
                task.currentVariables = null;

                if (task.rowIndex >= task.rows.length) {
                    clearTaskState();
                    state.playing = false;
                    restorePageDialogs();
                    showToast(
                        `数据批量执行完成，共处理 ${task.rows.length} 条数据。`,
                        'success',
                        6000
                    );
                    return;
                }

                saveTaskState(task);
                await sleep(800);
                continueTask();
            }
        }
        restorePageDialogs();
    }

    function stopPlayback() {
        clearTaskState();
        stopBatchScheduler();
        storeDelete(STORAGE.OLD_RUN_STATE);
        storeDelete(STORAGE.OLD_BATCH_STATE);

        state.playing = false;
        state.paused = false;
        restorePageDialogs();

        showToast(
            '已停止当前规则和批量任务。',
            'warning'
        );

        if (state.managerHost) {
            renderManager();
        }
    }

    function executeMatchingRule() {
        const rules = getRules().filter(rule =>
            urlMatches(
                rule.urlPattern,
                currentUrl()
            )
        );

        if (!rules.length) {
            showToast(
                '当前 URL 没有匹配的规则。',
                'warning'
            );
            return;
        }

        if (rules.length === 1) {
            executeRuleById(rules[0].id);
            return;
        }

        state.manager.search = '';
        state.manager.group = '__matched__';
        state.manager.tab = 'rules';

        openManager();
    }

    /******************************************************************
     * 九、规则筛选、分组和批量操作
     ******************************************************************/

    function getRuleSearchText(rule) {
        const stepText =
            (rule.steps || [])
                .map(step => {
                    return [
                        step.type,
                        step.value,
                        step.pageUrl,
                        step.locator?.css,
                        step.locator?.text
                    ]
                        .filter(Boolean)
                        .join(' ');
                })
                .join(' ');

        return [
            rule.name,
            rule.group,
            rule.urlPattern,
            rule.startUrl,
            stepText
        ]
            .filter(Boolean)
            .join(' ')
            .toLowerCase();
    }

    function getFilteredRules() {
        const rules = getRules();
        const search =
            String(state.manager.search || '')
                .trim()
                .toLowerCase();

        return rules.filter(rule => {
            let groupMatched = true;

            if (state.manager.group === '__ungrouped__') {
                groupMatched = !rule.group;
            } else if (
                state.manager.group === '__matched__'
            ) {
                groupMatched = urlMatches(
                    rule.urlPattern,
                    currentUrl()
                );
            } else if (
                state.manager.group !== '__all__'
            ) {
                groupMatched =
                    rule.group === state.manager.group;
            }

            if (!groupMatched) {
                return false;
            }

            if (!search) {
                return true;
            }

            return getRuleSearchText(rule)
                .includes(search);
        });
    }

    function cleanupSelectedRules() {
        const validIds = new Set(
            getRules().map(rule => rule.id)
        );

        for (
            const id
            of Array.from(
                state.manager.selectedRuleIds
            )
        ) {
            if (!validIds.has(id)) {
                state.manager.selectedRuleIds.delete(id);
            }
        }
    }

    function createGroup() {
        const name = window.prompt(
            '请输入新分组名称：',
            ''
        );

        if (!name?.trim()) {
            return;
        }

        const normalized = name.trim();
        const groups = getGroups();

        if (groups.includes(normalized)) {
            showToast(
                '该分组已经存在。',
                'warning'
            );
            return;
        }

        saveGroups([...groups, normalized]);
        state.manager.group = normalized;
        renderManager();

        showToast(
            `分组“${normalized}”已创建。`,
            'success'
        );
    }

    function renameCurrentGroup() {
        const oldName = state.manager.group;

        if (
            !oldName ||
            oldName.startsWith('__')
        ) {
            showToast(
                '请先在左侧选择一个具体分组。',
                'warning'
            );
            return;
        }

        const newName = window.prompt(
            '请输入新的分组名称：',
            oldName
        );

        if (!newName?.trim()) {
            return;
        }

        const normalized = newName.trim();

        if (
            normalized !== oldName &&
            getGroups().includes(normalized)
        ) {
            showToast(
                '目标分组名称已经存在。',
                'error'
            );
            return;
        }

        const rules = getRules();

        for (const rule of rules) {
            if (rule.group === oldName) {
                rule.group = normalized;
                rule.updatedAt = Date.now();
            }
        }

        saveRules(rules);

        saveGroups(
            getGroups()
                .filter(name => name !== oldName)
                .concat(normalized)
        );

        state.manager.group = normalized;
        renderManager();

        showToast(
            `分组已重命名为“${normalized}”。`,
            'success'
        );
    }

    function deleteCurrentGroup() {
        const group = state.manager.group;

        if (
            !group ||
            group.startsWith('__')
        ) {
            showToast(
                '请先在左侧选择一个具体分组。',
                'warning'
            );
            return;
        }

        if (
            !window.confirm(
                `确定删除分组“${group}”吗？\n分组中的规则不会删除，将移动到“未分组”。`
            )
        ) {
            return;
        }

        const rules = getRules();

        for (const rule of rules) {
            if (rule.group === group) {
                rule.group = DEFAULT_GROUP;
                rule.updatedAt = Date.now();
            }
        }

        saveRules(rules);

        saveGroups(
            getGroups().filter(name => name !== group)
        );

        state.manager.group = '__all__';
        renderManager();

        showToast(
            `分组“${group}”已删除，原规则已移动到未分组。`,
            'success'
        );
    }

    function moveSelectedRules(group) {
        const selected =
            state.manager.selectedRuleIds;

        if (!selected.size) {
            showToast(
                '请先选择需要移动的规则。',
                'warning'
            );
            return;
        }

        const rules = getRules();
        let changed = 0;

        for (const rule of rules) {
            if (selected.has(rule.id)) {
                rule.group = group || DEFAULT_GROUP;
                rule.updatedAt = Date.now();
                changed++;
            }
        }

        saveRules(rules);

        if (group) {
            saveGroups([
                ...getGroups(),
                group
            ]);
        }

        renderManager();

        showToast(
            `已移动 ${changed} 条规则到“${
                group || '未分组'
            }”。`,
            'success'
        );
    }

    function deleteSelectedRules() {
        const selected =
            state.manager.selectedRuleIds;

        if (!selected.size) {
            showToast(
                '请先选择需要删除的规则。',
                'warning'
            );
            return;
        }

        if (
            !window.confirm(
                `确定删除选中的 ${selected.size} 条规则吗？此操作不可撤销。`
            )
        ) {
            return;
        }

        const rules = getRules();
        const nextRules = rules.filter(
            rule => !selected.has(rule.id)
        );

        saveRules(nextRules);
        selected.clear();
        renderManager();

        showToast(
            '选中的规则已删除。',
            'success'
        );
    }

    function copySelectedRules() {
        const selected =
            state.manager.selectedRuleIds;

        if (!selected.size) {
            showToast(
                '请先选择需要复制的规则。',
                'warning'
            );
            return;
        }

        const rules = getRules();
        const copiedRules = [];

        for (const rule of rules) {
            if (!selected.has(rule.id)) {
                continue;
            }

            const copied = clone(rule);
            copied.id = createId();
            copied.name += ' - 副本';
            copied.createdAt = Date.now();
            copied.updatedAt = Date.now();

            copiedRules.push(copied);
        }

        rules.push(...copiedRules);
        saveRules(rules);

        state.manager.selectedRuleIds =
            new Set(copiedRules.map(rule => rule.id));

        renderManager();

        showToast(
            `已复制 ${copiedRules.length} 条规则。`,
            'success'
        );
    }

    /******************************************************************
     * 十、管理界面
     ******************************************************************/

    const MANAGER_CSS = `
        :host {
            all: initial;
            font-family: Arial, "Microsoft YaHei", sans-serif;
            color: #1f2937;
        }

        * {
            box-sizing: border-box;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
        }

        .overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(15, 23, 42, .68);
        }

        .panel {
            width: min(1280px, 98vw);
            height: min(900px, 96vh);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
        }

        .header {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 18px;
            color: #fff;
            background:
                linear-gradient(135deg, #1d4ed8, #2563eb 55%, #3b82f6);
        }

        .header-title {
            min-width: 0;
        }

        .header-title h2 {
            margin: 0;
            font-size: 19px;
            line-height: 1.4;
        }

        .header-title p {
            margin: 3px 0 0;
            color: rgba(255,255,255,.8);
            font-size: 12px;
        }

        .header-actions,
        .toolbar,
        .actions,
        .tab-bar,
        .group-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
        }

        button {
            appearance: none;
            border: 1px solid #d1d5db;
            border-radius: 7px;
            padding: 7px 11px;
            background: #fff;
            color: #1f2937;
            cursor: pointer;
            font-size: 13px;
            line-height: 1.2;
            transition:
                background .15s,
                border-color .15s,
                opacity .15s,
                transform .15s;
        }

        button:hover {
            background: #f3f4f6;
            border-color: #9ca3af;
        }

        button:active {
            transform: translateY(1px);
        }

        button:disabled {
            opacity: .48;
            cursor: not-allowed;
        }

        button.primary {
            color: #fff;
            background: #2563eb;
            border-color: #2563eb;
        }

        button.primary:hover {
            background: #1d4ed8;
        }

        button.success {
            color: #fff;
            background: #16a34a;
            border-color: #16a34a;
        }

        button.success:hover {
            background: #15803d;
        }

        button.warning {
            color: #fff;
            background: #d97706;
            border-color: #d97706;
        }

        button.warning:hover {
            background: #b45309;
        }

        button.danger {
            color: #fff;
            background: #dc2626;
            border-color: #dc2626;
        }

        button.danger:hover {
            background: #b91c1c;
        }

        button.header-button {
            color: #fff;
            background: rgba(255,255,255,.14);
            border-color: rgba(255,255,255,.35);
        }

        button.header-button:hover {
            background: rgba(255,255,255,.24);
        }

        .tab-bar {
            flex: none;
            padding: 0 18px;
            border-bottom: 1px solid #e5e7eb;
            background: #f8fafc;
        }

        .tab-button {
            padding: 12px 4px 10px;
            margin-right: 18px;
            border: 0;
            border-radius: 0;
            color: #64748b;
            background: transparent;
            border-bottom: 3px solid transparent;
            font-weight: 600;
        }

        .tab-button:hover {
            color: #1d4ed8;
            background: transparent;
        }

        .tab-button.active {
            color: #1d4ed8;
            border-bottom-color: #2563eb;
        }

        .workspace {
            min-height: 0;
            flex: 1;
            display: flex;
        }

        .sidebar {
            flex: none;
            width: 220px;
            overflow: auto;
            padding: 14px 10px;
            border-right: 1px solid #e5e7eb;
            background: #f8fafc;
        }

        .sidebar-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 7px 10px;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .group-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .group-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 9px 10px;
            border: 0;
            border-radius: 8px;
            color: #334155;
            background: transparent;
            text-align: left;
        }

        .group-item:hover {
            color: #1d4ed8;
            background: #eaf2ff;
        }

        .group-item.active {
            color: #1d4ed8;
            background: #dbeafe;
            font-weight: 700;
        }

        .group-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .group-count {
            flex: none;
            min-width: 24px;
            padding: 2px 6px;
            border-radius: 999px;
            color: #64748b;
            background: rgba(148,163,184,.16);
            font-size: 11px;
            text-align: center;
        }

        .sidebar-footer {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid #e2e8f0;
        }

        .main {
            min-width: 0;
            min-height: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #fff;
        }

        .main-toolbar {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 16px;
            border-bottom: 1px solid #e5e7eb;
        }

        .search-wrap {
            position: relative;
            flex: 1;
            max-width: 470px;
        }

        .search-icon {
            position: absolute;
            top: 50%;
            left: 11px;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }

        .search-input {
            width: 100%;
            padding-left: 34px !important;
        }

        input[type="text"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 8px 9px;
            border: 1px solid #d1d5db;
            border-radius: 7px;
            outline: none;
            color: #111827;
            background: #fff;
            font-size: 13px;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,.12);
        }

        .selection-toolbar {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 16px;
            border-bottom: 1px solid #bfdbfe;
            background: #eff6ff;
        }

        .selection-summary {
            color: #1e40af;
            font-size: 13px;
            font-weight: 700;
        }

        .rules-content {
            min-height: 0;
            flex: 1;
            overflow: auto;
            padding: 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            font-size: 13px;
        }

        th,
        td {
            padding: 10px 9px;
            border-bottom: 1px solid #e5e7eb;
            text-align: left;
            vertical-align: middle;
        }

        th {
            position: sticky;
            top: 0;
            z-index: 2;
            color: #475569;
            background: #f8fafc;
            font-size: 12px;
            font-weight: 700;
        }

        tbody tr:hover {
            background: #f8fbff;
        }

        tbody tr.selected {
            background: #eff6ff;
        }

        .checkbox-column {
            width: 44px;
            text-align: center;
        }

        .steps-column {
            width: 78px;
        }

        .group-column {
            width: 150px;
        }

        .time-column {
            width: 150px;
        }

        .operation-column {
            width: 260px;
        }

        .mode-column {
            width: 90px;
        }

        .variables-column {
            width: 160px;
        }

        .variables-column .badge.var {
            display: inline-flex;
            margin: 1px 2px;
            color: #7c3aed;
            background: #f3e8ff;
            font-size: 11px;
        }

        .card-variables {
            margin: 8px 0 12px;
            padding: 8px 10px;
            border-radius: 6px;
            background: #faf5ff;
            font-size: 12px;
            line-height: 1.6;
        }

        .card-variables .badge.var {
            display: inline-flex;
            margin: 1px 2px;
            color: #7c3aed;
            background: #f3e8ff;
            font-size: 11px;
        }

        .input-var-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .input-var-row input {
            flex: 1;
        }

        .input-var-row button {
            flex: none;
            padding: 5px 9px;
            font-size: 12px;
        }

        .rule-title-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 5px;
        }

        .rule-name {
            color: #0f172a;
            font-size: 14px;
            font-weight: 700;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 7px;
            border-radius: 999px;
            color: #475569;
            background: #f1f5f9;
            font-size: 11px;
            line-height: 1.5;
        }

        .badge.match {
            color: #166534;
            background: #dcfce7;
        }

        .badge.group {
            color: #1e40af;
            background: #dbeafe;
        }

        .muted {
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
            word-break: break-all;
        }

        .rule-url {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .empty {
            margin: 24px;
            padding: 40px 20px;
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
            color: #64748b;
            background: #f8fafc;
            text-align: center;
        }

        .empty-title {
            margin-bottom: 7px;
            color: #334155;
            font-size: 16px;
            font-weight: 700;
        }

        .card-grid {
            display: grid;
            grid-template-columns:
                repeat(auto-fill, minmax(320px, 1fr));
            gap: 13px;
            padding: 15px;
        }

        .rule-card {
            position: relative;
            padding: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 11px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(15,23,42,.04);
        }

        .rule-card:hover {
            border-color: #93c5fd;
            box-shadow: 0 6px 20px rgba(37,99,235,.10);
        }

        .rule-card.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .card-head {
            display: flex;
            align-items: flex-start;
            gap: 9px;
        }

        .card-main {
            min-width: 0;
            flex: 1;
        }

        .card-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 12px 0;
            padding: 10px;
            border-radius: 8px;
            background: rgba(248,250,252,.9);
        }

        .meta-label {
            display: block;
            margin-bottom: 3px;
            color: #94a3b8;
            font-size: 11px;
        }

        .meta-value {
            color: #334155;
            font-size: 12px;
            font-weight: 600;
        }

        .content-page {
            min-height: 0;
            flex: 1;
            overflow: auto;
            padding: 18px 20px 30px;
        }

        .section {
            margin-bottom: 22px;
            padding: 17px;
            border: 1px solid #e2e8f0;
            border-radius: 11px;
            background: #fff;
        }

        .section-title {
            margin: 0 0 6px;
            color: #0f172a;
            font-size: 17px;
        }

        .section-description {
            margin: 0 0 15px;
            color: #64748b;
            font-size: 13px;
            line-height: 1.6;
        }

        .settings-grid {
            display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
        }

        .field label {
            display: block;
            margin-bottom: 6px;
            color: #374151;
            font-size: 13px;
            font-weight: 600;
        }

        .checkbox-line {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 36px;
            font-size: 13px;
        }

        .variable-table {
            width: 100%;
            table-layout: auto;
        }

        .variable-table th {
            position: static;
        }

        .help {
            margin-top: 14px;
            padding: 13px;
            border: 1px solid #dbeafe;
            border-radius: 9px;
            color: #334155;
            background: #eff6ff;
            font-family: Consolas, Monaco, monospace;
            font-size: 12px;
            white-space: pre-wrap;
            line-height: 1.7;
        }

        .notice {
            padding: 11px 13px;
            margin-bottom: 15px;
            border: 1px solid #fed7aa;
            border-radius: 8px;
            color: #9a3412;
            background: #fff7ed;
            font-size: 13px;
            line-height: 1.6;
        }

        .log-filter.active {
            font-weight: 700;
            border-bottom: 2px solid #2563eb;
        }
        .log-filter:hover {
            background: #eff6ff;
        }

        .task-status {
            padding: 11px 13px;
            margin-bottom: 15px;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            color: #1e40af;
            background: #eff6ff;
            font-size: 13px;
            line-height: 1.6;
        }

        .editor-mask {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
            background: rgba(15,23,42,.72);
        }

        .editor-panel {
            width: min(920px, 95vw);
            max-height: 91vh;
            display: flex;
            flex-direction: column;
            padding: 18px;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 20px 60px rgba(0,0,0,.38);
        }

        .editor-title {
            margin: 0 0 12px;
            color: #111827;
            font-size: 18px;
        }

        .editor-textarea {
            min-height: 420px;
            resize: vertical;
            font-family: Consolas, Monaco, monospace;
            line-height: 1.55;
        }

        .editor-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 12px;
        }

        @media (max-width: 900px) {
            .overlay {
                padding: 7px;
            }

            .panel {
                width: 100%;
                height: 98vh;
            }

            .header {
                align-items: flex-start;
                flex-direction: column;
            }

            .sidebar {
                width: 175px;
            }

            .operation-column {
                width: 230px;
            }

            .time-column {
                display: none;
            }
        }

        @media (max-width: 680px) {
            .workspace {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                max-height: 145px;
                border-right: 0;
                border-bottom: 1px solid #e5e7eb;
            }

            .group-list {
                flex-direction: row;
                overflow-x: auto;
            }

            .group-item {
                width: auto;
                flex: none;
            }

            .main-toolbar,
            .selection-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .search-wrap {
                max-width: none;
            }

            table,
            thead,
            tbody,
            tr,
            th,
            td {
                display: block;
                width: 100% !important;
            }

            thead {
                display: none;
            }

            tbody tr {
                position: relative;
                padding: 12px 42px 12px 12px;
                border-bottom: 1px solid #e2e8f0;
            }

            td {
                padding: 5px 0;
                border: 0;
            }

            td.checkbox-column {
                position: absolute;
                top: 13px;
                right: 10px;
                width: 28px !important;
            }

            .card-grid {
                grid-template-columns: 1fr;
            }

            .editor-mask {
                padding: 8px;
            }
        }
    `;

    function openManager() {
        if (!document.documentElement) {
            return;
        }

        if (state.managerHost) {
            renderManager();
            return;
        }

        const uiState =
            storeGet(STORAGE.UI_STATE, {}) || {};

        if (
            uiState.viewMode === 'card' ||
            uiState.viewMode === 'list'
        ) {
            state.manager.viewMode =
                uiState.viewMode;
        }

        const host = document.createElement('div');
        host.id = 'sc-web-recorder-manager-host';
        host.dataset.scRecorderUi = 'true';

        Object.assign(host.style, {
            position: 'fixed',
            inset: '0',
            zIndex: '2147483646'
        });

        const shadow =
            host.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
            <style>${MANAGER_CSS}</style>

            <div class="overlay">
                <div class="panel">
                    <div class="header">
                        <div class="header-title">
                            <h2>网页操作规则管理</h2>
                            <p>录制、分组、检索、多选和跨页面批量自动化</p>
                        </div>

                        <div class="header-actions">
                            <button
                                class="header-button"
                                data-action="start-record"
                            >
                                ● 开始录制
                            </button>

                            <button
                                class="header-button"
                                data-action="export"
                            >
                                导出
                            </button>

                            <button
                                class="header-button"
                                data-action="import"
                            >
                                导入
                            </button>

                            <button
                                class="header-button"
                                data-action="stop-all"
                            >
                                停止任务
                            </button>

                            <button
                                class="header-button"
                                data-action="close"
                            >
                                关闭
                            </button>
                        </div>
                    </div>

                    <div class="tab-bar">
                        <button
                            class="tab-button"
                            data-action="switch-tab"
                            data-tab="rules"
                        >
                            规则管理
                        </button>

                        <button
                            class="tab-button"
                            data-action="switch-tab"
                            data-tab="variables"
                        >
                            变量管理
                        </button>

                        <button
                            class="tab-button"
                            data-action="switch-tab"
                            data-tab="settings"
                        >
                            录制与执行设置
                        </button>

                        <button
                            class="tab-button"
                            data-action="switch-tab"
                            data-tab="logs"
                        >
                            日志
                        </button>
                    </div>

                    <div
                        id="manager-content"
                        class="workspace"
                    ></div>

                    <div id="editor-root"></div>
                </div>
            </div>
        `;

        shadow.addEventListener(
            'click',
            handleManagerClick
        );

        shadow.addEventListener(
            'change',
            handleManagerChange
        );

        shadow.addEventListener(
            'input',
            handleManagerInput
        );

        document.documentElement.appendChild(host);
        state.managerHost = host;

        renderManager();
    }

    function closeManager() {
        state.managerHost?.remove();
        state.managerHost = null;
    }

    function renderManager() {
        if (!state.managerHost) {
            return;
        }

        cleanupSelectedRules();

        const shadow =
            state.managerHost.shadowRoot;

        shadow
            .querySelectorAll('.tab-button')
            .forEach(button => {
                button.classList.toggle(
                    'active',
                    button.dataset.tab ===
                        state.manager.tab
                );
            });

        const content =
            shadow.getElementById(
                'manager-content'
            );

        if (state.manager.tab === 'variables') {
            content.className = 'content-page';
            content.innerHTML =
                renderVariablesPage();
            return;
        }

        if (state.manager.tab === 'settings') {
            content.className = 'content-page';
            content.innerHTML =
                renderSettingsPage();
            return;
        }

        if (state.manager.tab === 'logs') {
            content.className = 'content-page';
            content.innerHTML =
                renderLogsPage();
            return;
        }

        content.className = 'workspace';
        content.innerHTML =
            renderRulesPage();

        requestAnimationFrame(() => {
            const searchInput =
                shadow.getElementById('rule-search');

            if (searchInput) {
                searchInput.value =
                    state.manager.search;
            }
        });
    }

    function renderLogsPage() {
        const logs = getLogs();
        const activeFilter = state._logFilter || 'all';
        const logsFiltered = activeFilter === 'all'
            ? logs
            : logs.filter(l => l.level === activeFilter);
        const logsReversed = [...logsFiltered].reverse();

        let logHtml = '';
        if (logsReversed.length === 0) {
            logHtml = '<div style="padding:30px;text-align:center;color:#94a3b8;">暂无执行日志</div>';
        } else {
            const levelColors = {
                info: '#2563eb',
                success: '#16a34a',
                warning: '#d97706',
                error: '#dc2626',
                debug: '#64748b'
            };
            const levelLabels = {
                info: '信息',
                success: '成功',
                warning: '警告',
                error: '错误',
                debug: '调试'
            };

            logHtml = logsReversed.map((log, i) => {
                const time = new Date(log.time);
                const timeStr = [
                    String(time.getHours()).padStart(2, '0'),
                    String(time.getMinutes()).padStart(2, '0'),
                    String(time.getSeconds()).padStart(2, '0')
                ].join(':');
                const color = levelColors[log.level] || '#64748b';
                const label = levelLabels[log.level] || log.level;
                const extra = log.extra
                    ? ` <span style="color:#94a3b8;font-size:11px;">${escapeHtml(JSON.stringify(log.extra))}</span>`
                    : '';

                return `<div style="display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:12.5px;line-height:1.5;">
                    <span style="color:#94a3b8;flex:none;width:60px;font-family:monospace;">${timeStr}</span>
                    <span style="color:${color};flex:none;width:36px;font-weight:600;">${label}</span>
                    <span style="flex:1;word-break:break-all;">${escapeHtml(log.message)}${extra}</span>
                </div>`;
            }).join('');
        }

        return `
            <div style="padding:16px;">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                    <div style="font-size:13px;color:#64748b;">
                        共 ${logs.length} 条日志${logs.length >= MAX_LOG_ENTRIES ? '（已达上限，旧日志自动清理）' : ''}
                    </div>
                    <div class="toolbar" style="gap:6px;">
                        <button data-action="filter-logs" data-filter="all" class="log-filter active" style="font-size:11px;padding:4px 10px;">全部</button>
                        <button data-action="filter-logs" data-filter="error" class="log-filter" style="font-size:11px;padding:4px 10px;color:#dc2626;">错误</button>
                        <button data-action="filter-logs" data-filter="warning" class="log-filter" style="font-size:11px;padding:4px 10px;color:#d97706;">警告</button>
                        <button data-action="clear-logs" class="danger" style="font-size:11px;padding:4px 10px;">
                            清空
                        </button>
                    </div>
                </div>
                <div style="max-height:calc(100vh - 260px);overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;padding:4px 10px;background:#fff;">
                    ${logHtml}
                </div>
            </div>
        `;
    }

    function renderTaskStatus() {
        const task = getTaskState();
        const summary = getSchedulerSummary();

        if (summary) {
            let slotHtml = '';
            for (let i = 0; i < summary.concurrency; i++) {
                const slot = summary.slots[i];
                if (slot) {
                    const r = slot.rule;
                    const isCaptcha = r.group && r.group.includes('验证码');
                    const age = Math.round((Date.now() - slot.dispatchedAt) / 1000);
                    slotHtml += `<div style="display:flex;align-items:center;justify-content:space-between;padding:4px 10px;margin:2px 0;border-radius:4px;font-size:12px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;">
                        <span>槽位${i + 1}：${escapeHtml(r.name)}${isCaptcha ? ' [验证码]' : ''}</span>
                        <span style="color:#64748b;font-size:11px;">${age}s</span>
                        <button data-action="skip-slot" data-slot="${i}" class="danger" style="font-size:10px;padding:2px 8px;">跳过</button>
                    </div>`;
                } else {
                    slotHtml += `<div style="padding:4px 10px;margin:2px 0;border-radius:4px;font-size:12px;background:#f8fafc;color:#94a3b8;border:1px solid #e2e8f0;">槽位${i + 1}：空闲</div>`;
                }
            }

            const pct = summary.total > 0
                ? Math.round((summary.completed + summary.failed) / summary.total * 100)
                : 0;

            let captchaInfo = '';
            if (summary.captchaTabs.length > 0) {
                captchaInfo = `<div style="margin-top:6px;padding:6px 10px;background:#fef3c7;border-radius:4px;border:1px solid #fcd34d;font-size:11.5px;color:#92400e;">
                    已保留 ${summary.captchaTabs.length} 个验证码标签页：${summary.captchaTabs.map(t => escapeHtml(t.rule.name)).join('、')}
                </div>`;
            }

            return `
                <div class="task-status">
                    <div style="display:flex;align-items:center;justify-content:space-between;">
                        <div>
                            <strong>批量执行</strong>
                            ${summary.running ? '' : '<span style="color:#16a34a;font-weight:600;">（已完成）</span>'}
                        </div>
                        <div style="font-size:12px;color:#64748b;">
                            成功 <span style="color:#16a34a;">${summary.completed}</span> / 失败 <span style="color:#dc2626;">${summary.failed}</span> / 跳过 ${summary.skipped} / 共 ${summary.total}
                            ${summary.queueRemaining > 0 ? ` / 队列剩余 ${summary.queueRemaining}` : ''}
                        </div>
                    </div>
                    <div style="margin:6px 0;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;">
                        <div style="height:100%;width:${pct}%;background:linear-gradient(90deg,#2563eb,#16a34a);border-radius:4px;transition:width .4s;"></div>
                    </div>
                    <div style="margin-top:4px;">${slotHtml}</div>
                    ${captchaInfo}
                    ${summary.running ? `<div class="toolbar" style="margin-top:8px;"><button class="danger" data-action="stop-all">■ 停止批量任务</button></div>` : ''}
                </div>
            `;
        }

        if (!task) {
            return '';
        }

        const rule = getCurrentTaskRule(task);

        let progress = '';

        if (task.mode === 'dataBatch') {
            progress =
                `数据批量任务：${
                    Number(task.rowIndex || 0) + 1
                }/${task.rows?.length || 0}`;
        } else {
            progress = '单规则任务';
        }

        const pausedBadge = state.paused
            ? '<span style="color:#d97706;font-weight:700;">【已暂停】</span>'
            : '';

        return `
            <div class="task-status">
                ${pausedBadge}
                当前有任务正在执行或等待继续：
                ${escapeHtml(progress)}
                ${rule
                    ? `，当前规则“${escapeHtml(rule.name)}”`
                    : ''
                }，
                当前步骤 ${
                    Number(task.stepIndex || 0) + 1
                }。
                <div class="toolbar" style="margin-top:8px;">
                    <button
                        class="${state.paused ? 'success' : 'warning'}"
                        data-action="toggle-pause"
                    >
                        ${state.paused ? '▶ 继续' : '⏸ 暂停'}
                    </button>
                    <button
                        class="danger"
                        data-action="stop-all"
                    >
                        ■ 停止
                    </button>
                </div>
            </div>
        `;
    }

    function renderRulesPage() {
        const rules = getRules();
        const groups = getGroups();
        const filteredRules = getFilteredRules();
        const selected =
            state.manager.selectedRuleIds;
        const settings = getSettings();

        const groupCounts = new Map();

        for (const rule of rules) {
            const group = rule.group || DEFAULT_GROUP;

            groupCounts.set(
                group,
                (groupCounts.get(group) || 0) + 1
            );
        }

        const allVisibleSelected =
            filteredRules.length > 0 &&
            filteredRules.every(rule =>
                selected.has(rule.id)
            );

        const groupOptions = [
            `<option value="">未分组</option>`,
            ...groups.map(group => `
                <option value="${escapeHtml(group)}">
                    ${escapeHtml(group)}
                </option>
            `)
        ].join('');

        const prefix = settings.variablePrefix || '{';
        const suffix = settings.variableSuffix || '}';

        const rulesContent =
            state.manager.viewMode === 'card'
                ? renderRuleCards(filteredRules, prefix, suffix)
                : renderRuleTable(
                    filteredRules,
                    allVisibleSelected,
                    groupOptions,
                    prefix,
                    suffix
                );

        return `
            <aside class="sidebar">
                <div class="sidebar-title">
                    <span>规则分组</span>
                    <button
                        data-action="create-group"
                        title="新建分组"
                    >
                        ＋
                    </button>
                </div>

                <div class="group-list">
                    ${renderGroupItem(
                        '__all__',
                        '全部规则',
                        rules.length
                    )}

                    ${renderGroupItem(
                        '__matched__',
                        '当前页面匹配',
                        rules.filter(rule =>
                            urlMatches(
                                rule.urlPattern,
                                currentUrl()
                            )
                        ).length
                    )}

                    ${renderGroupItem(
                        '__ungrouped__',
                        '未分组',
                        groupCounts.get(DEFAULT_GROUP) || 0
                    )}

                    ${groups.map(group =>
                        renderGroupItem(
                            group,
                            group,
                            groupCounts.get(group) || 0
                        )
                    ).join('')}
                </div>

                <div class="sidebar-footer">
                    <div class="group-actions">
                        <button
                            data-action="rename-group"
                            ${state.manager.group.startsWith('__')
                                ? 'disabled'
                                : ''
                            }
                        >
                            重命名
                        </button>

                        <button
                            data-action="delete-group"
                            ${state.manager.group.startsWith('__')
                                ? 'disabled'
                                : ''
                            }
                        >
                            删除
                        </button>
                    </div>
                </div>
            </aside>

            <main class="main">
                <div class="main-toolbar">
                    <div class="search-wrap">
                        <span class="search-icon">⌕</span>
                        <input
                            id="rule-search"
                            class="search-input"
                            type="text"
                            placeholder="检索名称、URL、分组、步骤内容……"
                            value="${escapeHtml(state.manager.search)}"
                        >
                    </div>

                    <div class="toolbar">
                        <span class="muted search-count">
                            显示 ${filteredRules.length}/${rules.length} 条
                        </span>

                        <button
                            data-action="clear-search"
                            ${state.manager.search
                                ? ''
                                : 'disabled'
                            }
                        >
                            清空检索
                        </button>

                        <button
                            data-action="toggle-view"
                        >
                            ${
                                state.manager.viewMode === 'list'
                                    ? '卡片视图'
                                    : '列表视图'
                            }
                        </button>
                    </div>
                </div>

                ${renderTaskStatus()}

                <div class="selection-toolbar">
                    <div class="selection-summary">
                        已选择 ${selected.size} 条规则
                    </div>

                    <div class="toolbar">
                        <button
                            class="success"
                            data-action="run-selected"
                            ${selected.size
                                ? ''
                                : 'disabled'
                            }
                        >
                            ▶ 批量执行
                        </button>

                        <button
                            data-action="run-selected-with-variables"
                            ${selected.size
                                ? ''
                                : 'disabled'
                            }
                        >
                            带变量批量执行
                        </button>

                        <select
                            id="move-selected-group"
                            style="width:150px"
                            ${selected.size
                                ? ''
                                : 'disabled'
                            }
                        >
                            <option value="__placeholder__">
                                移动到分组……
                            </option>
                            ${groupOptions}
                        </select>

                        <button
                            data-action="copy-selected"
                            ${selected.size
                                ? ''
                                : 'disabled'
                            }
                        >
                            复制所选
                        </button>

                        <button
                            class="danger"
                            data-action="delete-selected"
                            ${selected.size
                                ? ''
                                : 'disabled'
                            }
                        >
                            删除所选
                        </button>

                        <button
                            data-action="clear-selected"
                            ${selected.size
                                ? ''
                                : 'disabled'
                            }
                        >
                            取消选择
                        </button>
                    </div>
                </div>

                <div class="rules-content rules-container">
                    ${rulesContent}
                </div>
            </main>
        `;
    }

    function renderGroupItem(value, name, count) {
        return `
            <button
                class="group-item ${
                    state.manager.group === value
                        ? 'active'
                        : ''
                }"
                data-action="select-group"
                data-group="${escapeHtml(value)}"
                title="${escapeHtml(name)}"
            >
                <span class="group-name">
                    ${escapeHtml(name)}
                </span>

                <span class="group-count">
                    ${count}
                </span>
            </button>
        `;
    }

    function renderRuleTable(
        rules,
        allVisibleSelected,
        groupOptions,
        prefix = '{',
        suffix = '}'
    ) {
        if (!rules.length) {
            return renderRulesEmpty();
        }

        return `
            <table>
                <thead>
                    <tr>
                        <th class="checkbox-column">
                            <input
                                id="select-all-visible"
                                type="checkbox"
                                ${allVisibleSelected
                                    ? 'checked'
                                    : ''
                                }
                                title="全选当前筛选结果"
                            >
                        </th>
                        <th>规则</th>
                        <th class="group-column">分组</th>
                        <th class="steps-column">步骤</th>
                        <th class="mode-column">录制模式</th>
                        <th class="variables-column">变量</th>
                        <th class="time-column">更新时间</th>
                        <th class="operation-column">操作</th>
                    </tr>
                </thead>

                <tbody>
                    ${rules.map(rule => {
                        const matching =
                            urlMatches(
                                rule.urlPattern,
                                currentUrl()
                            );

                        const checked =
                            state.manager.selectedRuleIds
                                .has(rule.id);

                        return `
                            <tr class="${
                                checked ? 'selected' : ''
                            }">
                                <td class="checkbox-column">
                                    <input
                                        class="rule-checkbox"
                                        type="checkbox"
                                        data-id="${escapeHtml(rule.id)}"
                                        ${checked ? 'checked' : ''}
                                    >
                                </td>

                                <td>
                                    <div class="rule-title-line">
                                        <span class="rule-name">
                                            ${escapeHtml(rule.name)}
                                        </span>

                                        <span class="badge">
                                            ${
                                                rule.recordingMode === 'detailed'
                                                    ? '详细录制'
                                                    : '简洁录制'
                                            }
                                        </span>

                                        ${matching
                                            ? `
                                                <span class="badge match">
                                                    当前页面匹配
                                                </span>
                                            `
                                            : ''
                                        }
                                    </div>

                                    <span
                                        class="muted rule-url"
                                        title="${escapeHtml(rule.urlPattern)}"
                                    >
                                        ${escapeHtml(rule.urlPattern)}
                                    </span>
                                </td>

                                <td>
                                    <select
                                        class="rule-group-select"
                                        data-id="${escapeHtml(rule.id)}"
                                    >
                                        ${buildSelectedGroupOptions(
                                            rule.group,
                                            groupOptions
                                        )}
                                    </select>
                                </td>

                                <td>
                                    <strong>
                                        ${rule.steps?.length || 0}
                                    </strong>
                                </td>

                                <td class="mode-column">
                                    <span class="badge">
                                        ${
                                            rule.recordingMode === 'detailed'
                                                ? '详细录制'
                                                : '简洁录制'
                                        }
                                    </span>
                                </td>

                                <td class="variables-column">
                                    ${(() => {
                                        const vars = extractRuleVariables(rule);
                                        return vars.length
                                            ? vars.map(v => `<span class="badge var">${escapeHtml(prefix + v + suffix)}</span>`).join(' ')
                                            : '<span class="muted">-</span>';
                                    })()}
                                </td>

                                <td class="time-column">
                                    <span class="muted">
                                        ${escapeHtml(
                                            formatTime(rule.updatedAt)
                                        )}
                                    </span>
                                </td>

                                <td>
                                    <div class="actions">
                                        <button
                                            class="primary"
                                            data-action="run"
                                            data-id="${escapeHtml(rule.id)}"
                                        >
                                            执行
                                        </button>

                                        <button
                                            data-action="data-batch"
                                            data-id="${escapeHtml(rule.id)}"
                                        >
                                            数据批量
                                        </button>

                                        <button
                                            data-action="edit"
                                            data-id="${escapeHtml(rule.id)}"
                                        >
                                            编辑
                                        </button>

                                        <button
                                            data-action="variable"
                                            data-id="${escapeHtml(rule.id)}"
                                        >
                                            变量化
                                        </button>

                                        <button
                                            data-action="copy"
                                            data-id="${escapeHtml(rule.id)}"
                                        >
                                            复制
                                        </button>

                                        <button
                                            class="danger"
                                            data-action="delete"
                                            data-id="${escapeHtml(rule.id)}"
                                        >
                                            删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        `;
                    }).join('')}
                </tbody>
            </table>
        `;
    }

    function buildSelectedGroupOptions(
        selectedGroup,
        optionsHtml
    ) {
        const wrapper = document.createElement('select');
        wrapper.innerHTML = optionsHtml;

        for (const option of wrapper.options) {
            option.selected =
                option.value === (selectedGroup || '');
        }

        return wrapper.innerHTML;
    }

    function renderRuleCards(rules, prefix = '{', suffix = '}') {
        if (!rules.length) {
            return renderRulesEmpty();
        }

        return `
            <div class="card-grid">
                ${rules.map(rule => {
                    const matching =
                        urlMatches(
                            rule.urlPattern,
                            currentUrl()
                        );

                    const checked =
                        state.manager.selectedRuleIds
                            .has(rule.id);

                    return `
                        <article class="rule-card ${
                            checked ? 'selected' : ''
                        }">
                            <div class="card-head">
                                <input
                                    class="rule-checkbox"
                                    type="checkbox"
                                    data-id="${escapeHtml(rule.id)}"
                                    ${checked ? 'checked' : ''}
                                >

                                <div class="card-main">
                                    <div class="rule-title-line">
                                        <span class="rule-name">
                                            ${escapeHtml(rule.name)}
                                        </span>

                                        ${matching
                                            ? `
                                                <span class="badge match">
                                                    当前页面匹配
                                                </span>
                                            `
                                            : ''
                                        }
                                    </div>

                                    <div
                                        class="muted rule-url"
                                        title="${escapeHtml(rule.urlPattern)}"
                                    >
                                        ${escapeHtml(rule.urlPattern)}
                                    </div>
                                </div>
                            </div>

                            <div class="card-meta">
                                <div>
                                    <span class="meta-label">分组</span>
                                    <span class="meta-value">
                                        ${escapeHtml(
                                            rule.group || '未分组'
                                        )}
                                    </span>
                                </div>

                                <div>
                                    <span class="meta-label">步骤</span>
                                    <span class="meta-value">
                                        ${rule.steps?.length || 0} 步
                                    </span>
                                </div>

                                <div>
                                    <span class="meta-label">录制模式</span>
                                    <span class="meta-value">
                                        ${
                                            rule.recordingMode === 'detailed'
                                                ? '详细录制'
                                                : '简洁录制'
                                        }
                                    </span>
                                </div>

                                <div>
                                    <span class="meta-label">更新时间</span>
                                    <span class="meta-value">
                                        ${escapeHtml(
                                            formatTime(rule.updatedAt)
                                        )}
                                    </span>
                                </div>
                            </div>

                            <div class="card-variables">
                                ${(() => {
                                    const vars = extractRuleVariables(rule);
                                    return vars.length
                                        ? vars.map(v => `<span class="badge var">${escapeHtml(prefix + v + suffix)}</span>`).join(' ')
                                        : '<span class="muted">未使用变量</span>';
                                })()}
                            </div>

                            <div class="actions">
                                <button
                                    class="primary"
                                    data-action="run"
                                    data-id="${escapeHtml(rule.id)}"
                                >
                                    执行
                                </button>

                                <button
                                    data-action="data-batch"
                                    data-id="${escapeHtml(rule.id)}"
                                >
                                    数据批量
                                </button>

                                <button
                                    data-action="edit"
                                    data-id="${escapeHtml(rule.id)}"
                                >
                                    编辑
                                </button>

                                <button
                                    data-action="variable"
                                    data-id="${escapeHtml(rule.id)}"
                                >
                                    变量化
                                </button>

                                <button
                                    data-action="copy"
                                    data-id="${escapeHtml(rule.id)}"
                                >
                                    复制
                                </button>

                                <button
                                    class="danger"
                                    data-action="delete"
                                    data-id="${escapeHtml(rule.id)}"
                                >
                                    删除
                                </button>
                            </div>
                        </article>
                    `;
                }).join('')}
            </div>
        `;
    }

    function renderRulesEmpty() {
        return `
            <div class="empty">
                <div class="empty-title">
                    没有找到符合条件的规则
                </div>

                <div>
                    可以更换分组、清空检索条件，或开始录制新规则。
                </div>

                <div class="toolbar" style="justify-content:center">
                    <button
                        data-action="clear-search"
                    >
                        清空检索
                    </button>

                    <button
                        class="primary"
                        data-action="start-record"
                    >
                        开始录制
                    </button>
                </div>
            </div>
        `;
    }

    function renderVariablesPage() {
        const settings = getSettings();
        const counters =
            storeGet(STORAGE.COUNTERS, {}) || {};

        const rows = settings.fixedVariables.length
            ? settings.fixedVariables.map((item, index) =>
                renderVariableRow(
                    item,
                    index,
                    counters
                )
            ).join('')
            : `
                <tr class="variable-empty-row">
                    <td colspan="5">
                        <div class="empty">
                            暂无固定变量，请点击“添加变量”。
                        </div>
                    </td>
                </tr>
            `;

        return `
            <div class="section">
                <h3 class="section-title">
                    固定变量与动态变量
                </h3>

                <p class="section-description">
                    执行规则时会先计算固定变量；数据批量中的同名字段具有更高优先级。
                </p>

                <table class="variable-table">
                    <thead>
                        <tr>
                            <th style="width:70px">启用</th>
                            <th style="width:180px">变量名</th>
                            <th>固定值或动态规则</th>
                            <th style="width:120px">下次递增值</th>
                            <th style="width:90px">操作</th>
                        </tr>
                    </thead>

                    <tbody id="variables-body">
                        ${rows}
                    </tbody>
                </table>

                <div class="toolbar">
                    <button
                        class="primary"
                        data-action="add-variable"
                    >
                        添加变量
                    </button>

                    <button
                        class="success"
                        data-action="save-variables"
                    >
                        保存变量
                    </button>

                    <button
                        data-action="test-variables"
                    >
                        预览变量
                    </button>

                    <button
                        class="warning"
                        data-action="reset-counters"
                    >
                        重置递增计数器
                    </button>
                </div>

                <div class="help">固定值：
phone        13252208848

动态规则：
index        $i++
index        $i(100,1)
order        ORD-$date(YYYYMMDD)-$i(1000,1)
date         $date
time         $time(HHmmss)
datetime     $datetime(YYYY-MM-DD HH:mm:ss)
timestamp    $timestamp
timestamp10  $timestamp10
uuid         $uuid
random       $random(8)
code         $digits(6)
number       $number(100,999)
city         $pick(北京|上海|广州)

录制步骤中使用：
{phone}
{order}
{date}</div>
            </div>
        `;
    }

    function renderVariableRow(
        item = {},
        index = Date.now(),
        counters = {}
    ) {
        const name =
            String(item.name || '');

        const nextValue =
            Object.prototype.hasOwnProperty.call(
                counters,
                name
            )
                ? counters[name]
                : '-';

        return `
            <tr data-variable-row="${escapeHtml(index)}">
                <td>
                    <input
                        class="variable-enabled"
                        type="checkbox"
                        ${item.enabled === false
                            ? ''
                            : 'checked'
                        }
                    >
                </td>

                <td>
                    <input
                        class="variable-name"
                        type="text"
                        value="${escapeHtml(name)}"
                        placeholder="例如 phone"
                    >
                </td>

                <td>
                    <input
                        class="variable-value"
                        type="text"
                        value="${escapeHtml(item.value || '')}"
                        placeholder="固定值或 $date、$i++ 等动态规则"
                    >
                </td>

                <td>
                    <span class="muted">
                        ${escapeHtml(nextValue)}
                    </span>
                </td>

                <td>
                    <button
                        class="danger"
                        data-action="delete-variable"
                    >
                        删除
                    </button>
                </td>
            </tr>
        `;
    }

    function renderSettingsPage() {
        const settings = getSettings();

        return `
            <div class="notice">
                文件上传、验证码、跨域 iframe、关闭的 Shadow DOM，
                以及要求 event.isTrusted 的网站操作受浏览器安全限制，
                无法保证完全自动化。
            </div>

            <div class="section">
                <h3 class="section-title">
                    录制设置
                </h3>

                <p class="section-description">
                    简洁录制只保留输入框最终值；详细录制会记录更完整的输入、按键和滚动过程。
                </p>

                <div class="settings-grid">
                    <div class="field">
                        <label>录制模式</label>
                        <select id="setting-recording-mode">
                            <option
                                value="simple"
                                ${settings.recordingMode === 'simple'
                                    ? 'selected'
                                    : ''
                                }
                            >
                                简洁录制
                            </option>

                            <option
                                value="detailed"
                                ${settings.recordingMode === 'detailed'
                                    ? 'selected'
                                    : ''
                                }
                            >
                                详细录制
                            </option>
                        </select>
                    </div>

                    <div class="field">
                        <label>密码框</label>
                        <label class="checkbox-line">
                            <input
                                id="setting-password"
                                type="checkbox"
                                ${settings.recordPasswords
                                    ? 'checked'
                                    : ''
                                }
                            >
                            允许录制密码框明文
                        </label>
                    </div>

                    <div class="field">
                        <label>快捷按钮</label>
                        <label class="checkbox-line">
                            <input
                                id="setting-floating"
                                type="checkbox"
                                ${settings.showFloatingButton
                                    ? 'checked'
                                    : ''
                                }
                            >
                            显示右下角快捷按钮
                        </label>
                    </div>
                </div>
            </div>

            <div class="section">
                <h3 class="section-title">
                    规则命名与保存
                </h3>

                <p class="section-description">
                    设置录制结束后规则的命名方式与保存行为。
                </p>

                <div class="settings-grid">
                    <div class="field">
                        <label>规则名称模板</label>
                        <input
                            id="setting-rule-name-template"
                            type="text"
                            value="${escapeHtml(settings.ruleNameTemplate)}"
                            placeholder="例如：{title} 或 {title}_{seq}"
                        >
                        <div style="margin-top:6px;color:#64748b;font-size:12px;line-height:1.6;">
                            可用占位符：<br>
                            {title} — 页面标题<br>
                            {url} — 页面域名<br>
                            {seq} — 自增序号<br>
                            {date} — 日期(YYYYMMDD)<br>
                            {time} — 时间(HHmmss)<br>
                            {datetime} — 日期时间<br>
                            {timestamp} — 时间戳
                        </div>
                    </div>

                    <div class="field">
                        <label>静默保存</label>
                        <label class="checkbox-line">
                            <input
                                id="setting-silent-save"
                                type="checkbox"
                                ${settings.silentSave
                                    ? 'checked'
                                    : ''
                                }
                            >
                            录制结束后自动保存，不再弹出确认窗口
                        </label>
                    </div>
                </div>
            </div>

            <div class="section">
                <h3 class="section-title">
                    文本框变量自动替换
                </h3>

                <p class="section-description">
                    录制结束后，自动将文本框输入内容替换为变量占位符，方便复用。
                </p>

                <div class="settings-grid">
                    <div class="field" style="grid-column:1/-1;">
                        <label class="checkbox-line">
                            <input
                                id="setting-auto-replace"
                                type="checkbox"
                                ${settings.autoReplaceInputs
                                    ? 'checked'
                                    : ''
                                }
                            >
                            启用文本框变量自动替换
                        </label>
                    </div>
                </div>

                <div style="margin-top:10px;">
                    <label style="display:block;margin-bottom:6px;color:#374151;font-size:13px;font-weight:600;">
                        文本框变量名称（按录制顺序对应）
                    </label>

                    <div id="input-variable-names">
                        ${(settings.inputVariableNames || ['']).map((name, idx) => `
                            <div class="input-var-row" data-index="${idx}">
                                <input
                                    type="text"
                                    class="input-variable-name"
                                    value="${escapeHtml(name)}"
                                    placeholder="例如 phone"
                                >
                                <button
                                    type="button"
                                    class="danger"
                                    data-action="remove-input-var"
                                    ${(settings.inputVariableNames || ['']).length <= 1 ? 'disabled' : ''}
                                >
                                    删除
                                </button>
                            </div>
                        `).join('')}
                    </div>

                    <button
                        type="button"
                        data-action="add-input-var"
                        style="margin-top:6px;"
                    >
                        + 新增变量
                    </button>
                </div>
            </div>

            <div class="section">
                <h3 class="section-title">
                    执行设置
                </h3>

                <div class="settings-grid">
                    <div class="field">
                        <label>步骤间隔（毫秒）</label>
                        <input
                            id="setting-delay"
                            type="number"
                            min="0"
                            value="${escapeHtml(settings.stepDelay)}"
                        >
                    </div>

                    <div class="field">
                        <label>元素等待超时（毫秒）</label>
                        <input
                            id="setting-timeout"
                            type="number"
                            min="1000"
                            value="${escapeHtml(settings.elementTimeout)}"
                        >
                    </div>

                    <div class="field">
                        <label>单步执行超时（毫秒）</label>
                        <input
                            id="setting-step-timeout"
                            type="number"
                            min="5000"
                            value="${escapeHtml(settings.stepTimeout)}"
                        >
                    </div>

                    <div class="field">
                        <label>批量执行并发数</label>
                        <input
                            id="setting-batch-concurrency"
                            type="number"
                            min="1"
                            max="20"
                            value="${escapeHtml(settings.batchConcurrency)}"
                        >
                        <div style="margin-top:4px;color:#64748b;font-size:12px;">
                            同时打开的标签页数量，1表示单线程顺序执行
                        </div>
                    </div>

                    <div class="field">
                        <label>页面地址检查</label>
                        <label class="checkbox-line">
                            <input
                                id="setting-query"
                                type="checkbox"
                                ${settings.ignoreQueryForPageCheck
                                    ? 'checked'
                                    : ''
                                }
                            >
                            忽略 URL 查询参数
                        </label>
                    </div>

                    <div class="field">
                        <label>元素定位</label>
                        <label class="checkbox-line">
                            <input
                                id="setting-scroll"
                                type="checkbox"
                                ${settings.scrollIntoView
                                    ? 'checked'
                                    : ''
                                }
                            >
                            执行前滚动到目标元素
                        </label>
                    </div>

                    <div class="field">
                        <label>弹窗拦截</label>
                        <label class="checkbox-line">
                            <input
                                id="setting-block-alerts"
                                type="checkbox"
                                ${settings.blockAlerts
                                    ? 'checked'
                                    : ''
                                }
                            >
                            执行时屏蔽页面 alert/confirm/prompt
                        </label>
                    </div>
                </div>
            </div>

            <div class="section">
                <h3 class="section-title">
                    变量占位符
                </h3>

                <div class="settings-grid">
                    <div class="field">
                        <label>变量前缀</label>
                        <input
                            id="setting-prefix"
                            type="text"
                            value="${escapeHtml(settings.variablePrefix)}"
                        >
                    </div>

                    <div class="field">
                        <label>变量后缀</label>
                        <input
                            id="setting-suffix"
                            type="text"
                            value="${escapeHtml(settings.variableSuffix)}"
                        >
                    </div>
                </div>

                <div class="toolbar">
                    <button
                        class="success"
                        data-action="save-settings"
                    >
                        保存设置
                    </button>
                </div>
            </div>
        `;
    }

    function collectVariablesFromManager() {
        if (!state.managerHost) {
            return [];
        }

        const shadow =
            state.managerHost.shadowRoot;

        const variables = [];

        shadow
            .querySelectorAll('[data-variable-row]')
            .forEach(row => {
                const name =
                    row.querySelector('.variable-name')
                        ?.value.trim() || '';

                const value =
                    row.querySelector('.variable-value')
                        ?.value || '';

                const enabled =
                    Boolean(
                        row.querySelector('.variable-enabled')
                            ?.checked
                    );

                if (name) {
                    variables.push({
                        name,
                        value,
                        enabled
                    });
                }
            });

        return variables;
    }

    function saveVariablesFromManager(showMessage = true) {
        const variables =
            collectVariablesFromManager();

        const duplicatedNames =
            variables
                .map(item => item.name)
                .filter(
                    (name, index, array) =>
                        array.indexOf(name) !== index
                );

        if (duplicatedNames.length) {
            showToast(
                `变量名不能重复：${
                    [...new Set(duplicatedNames)]
                        .join(', ')
                }`,
                'error'
            );
            return false;
        }

        saveSettings({
            ...getSettings(),
            fixedVariables: variables
        });

        if (showMessage) {
            showToast(
                '变量设置已保存。',
                'success'
            );
        }

        return true;
    }

    function collectSettingsFromManager() {
        const shadow =
            state.managerHost.shadowRoot;

        const inputVarNames = [];
        shadow.querySelectorAll('.input-variable-name').forEach(input => {
            const val = input.value.trim();
            if (val) {
                inputVarNames.push(val);
            }
        });
        if (!inputVarNames.length) {
            inputVarNames.push('');
        }

        return {
            ...getSettings(),
            recordingMode:
                shadow.getElementById(
                    'setting-recording-mode'
                )?.value === 'detailed'
                    ? 'detailed'
                    : 'simple',
            variablePrefix:
                shadow.getElementById(
                    'setting-prefix'
                )?.value || '{',
            variableSuffix:
                shadow.getElementById(
                    'setting-suffix'
                )?.value || '}',
            stepDelay:
                Number(
                    shadow.getElementById(
                        'setting-delay'
                    )?.value
                ) || 0,
            elementTimeout:
                Number(
                    shadow.getElementById(
                        'setting-timeout'
                    )?.value
                ) || 15000,
            recordPasswords:
                Boolean(
                    shadow.getElementById(
                        'setting-password'
                    )?.checked
                ),
            showFloatingButton:
                Boolean(
                    shadow.getElementById(
                        'setting-floating'
                    )?.checked
                ),
            ignoreQueryForPageCheck:
                Boolean(
                    shadow.getElementById(
                        'setting-query'
                    )?.checked
                ),
            scrollIntoView:
                Boolean(
                    shadow.getElementById(
                        'setting-scroll'
                    )?.checked
                ),
            ruleNameTemplate:
                shadow.getElementById(
                    'setting-rule-name-template'
                )?.value || '{title}',
            autoReplaceInputs:
                Boolean(
                    shadow.getElementById(
                        'setting-auto-replace'
                    )?.checked
                ),
            inputVariableNames: inputVarNames,
            silentSave:
                Boolean(
                    shadow.getElementById(
                        'setting-silent-save'
                    )?.checked
                ),
            batchConcurrency:
                Math.max(1, Math.min(20,
                    Number(
                        shadow.getElementById(
                            'setting-batch-concurrency'
                        )?.value
                    ) || 5
                )),
            blockAlerts:
                Boolean(
                    shadow.getElementById(
                        'setting-block-alerts'
                    )?.checked
                ),
            stepTimeout:
                Math.max(5000,
                    Number(
                        shadow.getElementById(
                            'setting-step-timeout'
                        )?.value
                    ) || 30000
                )
        };
    }

    function saveSettingsFromManager() {
        const settings =
            collectSettingsFromManager();

        if (
            !settings.variablePrefix ||
            !settings.variableSuffix
        ) {
            showToast(
                '变量前缀和后缀不能为空。',
                'error'
            );
            return false;
        }

        saveSettings(settings);
        updateFloatingButton();

        showToast(
            '录制和执行设置已保存。',
            'success'
        );

        return true;
    }

    function handleManagerInput(event) {
        if (
            event.target.id === 'rule-search'
        ) {
            state.manager.search =
                event.target.value;

            // 防抖：避免每次 input 都重建 DOM 导致输入法重复字符
            clearTimeout(state._searchDebounce);
            state._searchDebounce = setTimeout(() => {
                // 直接更新规则列表区域，不重建整个管理面板
                const content =
                    state.managerHost?.shadowRoot
                        ?.getElementById('manager-content');

                if (content) {
                    const filteredRules = getFilteredRules();
                    const rules = getRules();
                    const groups = getGroups();
                    const selected = state.manager.selectedRuleIds;
                    const settings = getSettings();

                    const groupCounts = new Map();
                    for (const rule of rules) {
                        const group = rule.group || DEFAULT_GROUP;
                        groupCounts.set(
                            group,
                            (groupCounts.get(group) || 0) + 1
                        );
                    }

                    const prefix = settings.variablePrefix || '{';
                    const suffix = settings.variableSuffix || '}';

                    // 更新计数显示
                    const countEl = content.querySelector('.search-count');
                    if (countEl) {
                        countEl.textContent = `显示 ${filteredRules.length}/${rules.length} 条`;
                    }

                    // 更新规则列表
                    const rulesContainer = content.querySelector('.rules-container');
                    if (rulesContainer) {
                        const allVisibleSelected =
                            filteredRules.length > 0 &&
                            filteredRules.every(rule =>
                                selected.has(rule.id)
                            );

                        const groupOptions = [
                            `<option value="">未分组</option>`,
                            ...groups.map(group => `
                                <option value="${escapeHtml(group)}">
                                    ${escapeHtml(group)}
                                </option>
                            `)
                        ].join('');

                        rulesContainer.innerHTML = state.manager.viewMode === 'card'
                            ? renderRuleCards(filteredRules, prefix, suffix)
                            : renderRuleTable(filteredRules, allVisibleSelected, groupOptions, prefix, suffix);
                    }

                    // 更新空状态
                    updateEmptyState(content, filteredRules.length === 0);
                }
            }, 150);
        }
    }

    function updateEmptyState(container, isEmpty) {
        if (!container) return;
        let emptyEl = container.querySelector('.empty-state');
        if (isEmpty) {
            if (!emptyEl) {
                emptyEl = document.createElement('div');
                emptyEl.className = 'empty-state';
                emptyEl.innerHTML = `
                    <div class="empty-title">没有找到符合条件的规则</div>
                    <div>可以更换分组、清空检索条件，或开始录制新规则。</div>
                `;
                container.querySelector('.workspace')?.appendChild(emptyEl);
            }
        } else if (emptyEl) {
            emptyEl.remove();
        }
    }

    function handleManagerChange(event) {
        const target = event.target;

        if (
            target.id === 'select-all-visible'
        ) {
            const visibleRules =
                getFilteredRules();

            for (const rule of visibleRules) {
                if (target.checked) {
                    state.manager.selectedRuleIds
                        .add(rule.id);
                } else {
                    state.manager.selectedRuleIds
                        .delete(rule.id);
                }
            }

            renderManager();
            return;
        }

        if (
            target.classList.contains(
                'rule-checkbox'
            )
        ) {
            const id = target.dataset.id;

            if (target.checked) {
                state.manager.selectedRuleIds.add(id);
            } else {
                state.manager.selectedRuleIds.delete(id);
            }

            renderManager();
            return;
        }

        if (
            target.classList.contains(
                'rule-group-select'
            )
        ) {
            const id = target.dataset.id;
            const group = target.value;

            const rules = getRules();
            const rule = rules.find(
                item => item.id === id
            );

            if (rule) {
                rule.group = group;
                rule.updatedAt = Date.now();

                saveRules(rules);

                if (group) {
                    saveGroups([
                        ...getGroups(),
                        group
                    ]);
                }

                showToast(
                    `规则“${rule.name}”已移动到“${
                        group || '未分组'
                    }”。`,
                    'success'
                );

                renderManager();
            }

            return;
        }

        if (
            target.id === 'move-selected-group'
        ) {
            if (
                target.value !== '__placeholder__'
            ) {
                moveSelectedRules(target.value);
            }
        }
    }

    function handleManagerClick(event) {
        const button =
            event.target.closest(
                'button[data-action]'
            );

        if (!button) {
            return;
        }

        const action = button.dataset.action;
        const ruleId = button.dataset.id;

        switch (action) {
            case 'close':
                closeManager();
                break;

            case 'switch-tab':
                state.manager.tab =
                    button.dataset.tab || 'rules';
                renderManager();
                break;

            case 'start-record':
                closeManager();
                startRecording(false);
                break;

            case 'run':
                closeManager();
                executeRuleById(ruleId);
                break;

            case 'run-selected': {
                const ids = getFilteredRules()
                    .filter(rule =>
                        state.manager.selectedRuleIds
                            .has(rule.id)
                    )
                    .map(rule => rule.id);

                for (
                    const id
                    of state.manager.selectedRuleIds
                ) {
                    if (!ids.includes(id)) {
                        ids.push(id);
                    }
                }

                closeManager();
                executeSelectedRules(ids);
                break;
            }

            case 'run-selected-with-variables':
                openSelectedVariablesEditor();
                break;

            case 'data-batch':
                openBatchEditor(ruleId);
                break;

            case 'variable':
                makeInputVariable(ruleId);
                break;

            case 'edit':
                openRuleEditor(ruleId);
                break;

            case 'copy':
                copyRule(ruleId);
                break;

            case 'delete':
                deleteRule(ruleId);
                break;

            case 'copy-selected':
                copySelectedRules();
                break;

            case 'delete-selected':
                deleteSelectedRules();
                break;

            case 'clear-selected':
                state.manager.selectedRuleIds.clear();
                renderManager();
                break;

            case 'select-group':
                state.manager.group =
                    button.dataset.group || '__all__';
                renderManager();
                break;

            case 'create-group':
                createGroup();
                break;

            case 'rename-group':
                renameCurrentGroup();
                break;

            case 'delete-group':
                deleteCurrentGroup();
                break;

            case 'clear-search':
                state.manager.search = '';
                renderManager();
                break;

            case 'toggle-view':
                state.manager.viewMode =
                    state.manager.viewMode === 'list'
                        ? 'card'
                        : 'list';

                storeSet(STORAGE.UI_STATE, {
                    viewMode:
                        state.manager.viewMode
                });

                renderManager();
                break;

            case 'export':
                exportRules();
                break;

            case 'import':
                openImportEditor();
                break;

            case 'clear-logs':
                clearLogs();
                renderManager();
                showToast('日志已清空。', 'success', 2000);
                break;

            case 'filter-logs':
                state._logFilter = button.dataset?.filter || 'all';
                renderManager();
                break;

            case 'toggle-pause':
                togglePause();
                break;

            case 'skip-slot':
                const slotIdx = parseInt(button.dataset?.slot, 10);
                if (!isNaN(slotIdx)) {
                    skipSlotTask(slotIdx);
                    if (state.managerHost) {
                        renderManager();
                    }
                }
                break;

            case 'stop-all':
                stopPlayback();
                break;

            case 'add-variable':
                addVariableRow();
                break;

            case 'delete-variable':
                button.closest('tr')?.remove();
                break;

            case 'save-variables':
                if (
                    saveVariablesFromManager(true)
                ) {
                    renderManager();
                }
                break;

            case 'test-variables':
                previewVariables();
                break;

            case 'reset-counters':
                if (
                    window.confirm(
                        '确定重置所有递增变量计数器吗？'
                    )
                ) {
                    resetVariableCounters();
                }
                break;

            case 'add-input-var':
                if (state.manager.tab === 'settings') {
                    const container = state.managerHost.shadowRoot.getElementById('input-variable-names');
                    if (container) {
                        const idx = container.querySelectorAll('.input-var-row').length;
                        const row = document.createElement('div');
                        row.className = 'input-var-row';
                        row.dataset.index = idx;
                        row.innerHTML = `
                            <input type="text" class="input-variable-name" value="" placeholder="例如 phone">
                            <button type="button" class="danger" data-action="remove-input-var">删除</button>
                        `;
                        container.appendChild(row);
                        // 启用所有删除按钮
                        container.querySelectorAll('[data-action="remove-input-var"]').forEach(btn => btn.disabled = false);
                    }
                }
                break;

            case 'remove-input-var':
                if (state.manager.tab === 'settings') {
                    const row = event.target.closest('.input-var-row');
                    const container = state.managerHost.shadowRoot.getElementById('input-variable-names');
                    if (row && container && container.querySelectorAll('.input-var-row').length > 1) {
                        row.remove();
                        if (container.querySelectorAll('.input-var-row').length <= 1) {
                            container.querySelector('[data-action="remove-input-var"]').disabled = true;
                        }
                    }
                }
                break;

            case 'save-settings':
                saveSettingsFromManager();
                break;
        }
    }

    function addVariableRow() {
        if (!state.managerHost) {
            return;
        }

        const shadow =
            state.managerHost.shadowRoot;

        const body =
            shadow.getElementById(
                'variables-body'
            );

        if (!body) {
            return;
        }

        body
            .querySelector('.variable-empty-row')
            ?.remove();

        body.insertAdjacentHTML(
            'beforeend',
            renderVariableRow(
                {},
                createId(),
                storeGet(STORAGE.COUNTERS, {}) || {}
            )
        );

        body.lastElementChild
            ?.querySelector('.variable-name')
            ?.focus();
    }

    function previewVariables() {
        if (!saveVariablesFromManager(false)) {
            return;
        }

        const variables =
            resolveExecutionVariables();

        showTextEditor(
            '变量预览结果',
            JSON.stringify(
                variables,
                null,
                2
            ),
            '关闭',
            (text, close) => close(),
            true
        );
    }

    function showTextEditor(
        title,
        initialValue,
        saveLabel,
        onSave,
        readOnly = false
    ) {
        if (!state.managerHost) {
            return;
        }

        const shadow =
            state.managerHost.shadowRoot;

        const root =
            shadow.getElementById('editor-root');

        root.innerHTML = `
            <div class="editor-mask">
                <div class="editor-panel">
                    <h3 class="editor-title">
                        ${escapeHtml(title)}
                    </h3>

                    <textarea
                        id="editor-textarea"
                        class="editor-textarea"
                        ${readOnly ? 'readonly' : ''}
                    ></textarea>

                    <div class="editor-actions">
                        <button id="editor-cancel">
                            取消
                        </button>

                        <button
                            id="editor-save"
                            class="primary"
                        >
                            ${escapeHtml(saveLabel)}
                        </button>
                    </div>
                </div>
            </div>
        `;

        const textarea =
            shadow.getElementById(
                'editor-textarea'
            );

        textarea.value = initialValue;

        shadow.getElementById(
            'editor-cancel'
        ).onclick = () => {
            root.innerHTML = '';
        };

        shadow.getElementById(
            'editor-save'
        ).onclick = () => {
            onSave(
                textarea.value,
                () => {
                    root.innerHTML = '';
                    renderManager();
                }
            );
        };

        textarea.focus();
    }

    function openSelectedVariablesEditor() {
        const ids = [];

        for (
            const rule
            of getFilteredRules()
        ) {
            if (
                state.manager.selectedRuleIds
                    .has(rule.id)
            ) {
                ids.push(rule.id);
            }
        }

        for (
            const id
            of state.manager.selectedRuleIds
        ) {
            if (!ids.includes(id)) {
                ids.push(id);
            }
        }

        if (!ids.length) {
            showToast(
                '请先选择规则。',
                'warning'
            );
            return;
        }

        showTextEditor(
            `为 ${ids.length} 条规则设置批量执行变量`,
            JSON.stringify(
                {},
                null,
                2
            ),
            '开始批量执行',
            (text, close) => {
                try {
                    const variables =
                        JSON.parse(text || '{}');

                    if (
                        !variables ||
                        Array.isArray(variables) ||
                        typeof variables !== 'object'
                    ) {
                        throw new Error(
                            '变量必须是 JSON 对象。'
                        );
                    }

                    close();
                    closeManager();

                    executeSelectedRules(
                        ids,
                        variables
                    );
                } catch (error) {
                    showToast(
                        `变量 JSON 错误：${error.message}`,
                        'error'
                    );
                }
            }
        );
    }

    function openRuleEditor(ruleId) {
        const rule = getRules().find(
            item => item.id === ruleId
        );

        if (!rule) {
            return;
        }

        showTextEditor(
            `编辑规则：${rule.name}`,
            JSON.stringify(rule, null, 2),
            '保存规则',
            (text, close) => {
                try {
                    const updated =
                        JSON.parse(text);

                    if (
                        !updated.id ||
                        !Array.isArray(updated.steps)
                    ) {
                        throw new Error(
                            '规则必须包含 id 和 steps 数组。'
                        );
                    }

                    const rules = getRules();
                    const index =
                        rules.findIndex(
                            item => item.id === ruleId
                        );

                    if (index < 0) {
                        throw new Error(
                            '原规则不存在。'
                        );
                    }

                    updated.group =
                        String(updated.group || '');
                    updated.updatedAt = Date.now();

                    rules[index] =
                        normalizeRule(updated);

                    saveRules(rules);

                    if (updated.group) {
                        saveGroups([
                            ...getGroups(),
                            updated.group
                        ]);
                    }

                    showToast(
                        '规则已更新。',
                        'success'
                    );

                    close();
                } catch (error) {
                    showToast(
                        `保存失败：${error.message}`,
                        'error'
                    );
                }
            }
        );
    }

    function openBatchEditor(ruleId) {
        const rule = getRules().find(
            item => item.id === ruleId
        );

        if (!rule) {
            return;
        }

        const example = [
            {
                username: '张三',
                phone: '13800000000'
            },
            {
                username: '李四',
                phone: '13900000000',
                __url: rule.startUrl ||
                    getRuleStartUrl(rule)
            }
        ];

        showTextEditor(
            `数据批量执行：${rule.name}`,
            JSON.stringify(example, null, 2),
            '开始批量执行',
            (text, close) => {
                try {
                    const rows = JSON.parse(text);

                    if (
                        !Array.isArray(rows) ||
                        !rows.length
                    ) {
                        throw new Error(
                            '请输入非空 JSON 数组。'
                        );
                    }

                    if (
                        rows.some(row =>
                            !row ||
                            Array.isArray(row) ||
                            typeof row !== 'object'
                        )
                    ) {
                        throw new Error(
                            '数组中的每一项必须是 JSON 对象。'
                        );
                    }

                    close();
                    closeManager();
                    startDataBatch(ruleId, rows);
                } catch (error) {
                    showToast(
                        `批量数据错误：${error.message}`,
                        'error'
                    );
                }
            }
        );
    }

    function makeInputVariable(ruleId) {
        const rules = getRules();
        const rule = rules.find(
            item => item.id === ruleId
        );

        if (!rule) {
            return;
        }

        const inputSteps = rule.steps
            .map((step, index) => ({
                step,
                index
            }))
            .filter(item =>
                item.step.type === 'input' ||
                item.step.type === 'select'
            );

        if (!inputSteps.length) {
            showToast(
                '该规则没有可变量化的输入步骤。',
                'warning'
            );
            return;
        }

        const description = inputSteps
            .map(item =>
                `${item.index + 1}. ` +
                `${item.step.type}：` +
                `${String(
                    item.step.value ?? ''
                ).slice(0, 80)}`
            )
            .join('\n');

        const selected = window.prompt(
            '请输入需要变量化的步骤序号：\n\n' +
            description,
            String(inputSteps[0].index + 1)
        );

        if (selected === null) {
            return;
        }

        const step =
            rule.steps[Number(selected) - 1];

        if (
            !step ||
            !['input', 'select'].includes(step.type)
        ) {
            showToast(
                '步骤序号无效。',
                'error'
            );
            return;
        }

        const variableName = window.prompt(
            '请输入变量名称，例如 phone：',
            'phone'
        );

        if (!variableName?.trim()) {
            return;
        }

        const name = variableName.trim();
        const settings = getSettings();

        step.value =
            settings.variablePrefix +
            name +
            settings.variableSuffix;

        rule.updatedAt = Date.now();
        saveRules(rules);

        const configuredVariable =
            settings.fixedVariables.find(
                item =>
                    item.name === name &&
                    item.enabled !== false
            );

        if (configuredVariable) {
            showToast(
                `已设置为变量：${step.value}\n` +
                `执行时将使用变量 ${name} 的设置值。`,
                'success',
                5000
            );
        } else {
            showToast(
                `已设置为变量：${step.value}\n` +
                `请在变量管理中设置 ${name} 的值。`,
                'warning',
                5000
            );
        }

        renderManager();
    }

    function copyRule(ruleId) {
        const rules = getRules();
        const source = rules.find(
            item => item.id === ruleId
        );

        if (!source) {
            return;
        }

        const copied = clone(source);
        copied.id = createId();
        copied.name += ' - 副本';
        copied.createdAt = Date.now();
        copied.updatedAt = Date.now();

        rules.push(copied);
        saveRules(rules);

        showToast(
            '规则已复制。',
            'success'
        );

        renderManager();
    }

    function deleteRule(ruleId) {
        const rules = getRules();
        const rule = rules.find(
            item => item.id === ruleId
        );

        if (!rule) {
            return;
        }

        if (
            !window.confirm(
                `确定删除规则“${rule.name}”吗？`
            )
        ) {
            return;
        }

        saveRules(
            rules.filter(
                item => item.id !== ruleId
            )
        );

        state.manager.selectedRuleIds
            .delete(ruleId);

        showToast(
            '规则已删除。',
            'success'
        );

        renderManager();
    }

    function exportRules() {
        const data = {
            version: 3.0,
            exportedAt:
                new Date().toISOString(),
            settings: getSettings(),
            groups: getGroups(),
            counters:
                storeGet(STORAGE.COUNTERS, {}),
            rules: getRules()
        };

        const blob = new Blob(
            [
                JSON.stringify(
                    data,
                    null,
                    2
                )
            ],
            {
                type:
                    'application/json;charset=utf-8'
            }
        );

        const url =
            URL.createObjectURL(blob);

        const anchor =
            document.createElement('a');

        anchor.href = url;
        anchor.download =
            'scriptcat-web-rules-' +
            new Date()
                .toISOString()
                .replace(/[:.]/g, '-') +
            '.json';

        anchor.click();

        setTimeout(
            () => URL.revokeObjectURL(url),
            1000
        );
    }

    function openImportEditor() {
        showTextEditor(
            '导入规则 JSON',
            '',
            '导入',
            (text, close) => {
                try {
                    const data = JSON.parse(text);

                    const importedRules =
                        Array.isArray(data)
                            ? data
                            : data.rules;

                    if (!Array.isArray(importedRules)) {
                        throw new Error(
                            'JSON 中未找到 rules 数组。'
                        );
                    }

                    const map = new Map(
                        getRules().map(rule => [
                            rule.id,
                            rule
                        ])
                    );

                    let importedCount = 0;

                    for (const source of importedRules) {
                        if (
                            !source ||
                            !Array.isArray(source.steps)
                        ) {
                            continue;
                        }

                        const rule =
                            normalizeRule(source);

                        map.set(rule.id, rule);
                        importedCount++;
                    }

                    saveRules(
                        Array.from(map.values())
                    );

                    if (
                        data.settings &&
                        typeof data.settings === 'object'
                    ) {
                        saveSettings({
                            ...getSettings(),
                            ...data.settings
                        });
                    }

                    if (Array.isArray(data.groups)) {
                        saveGroups([
                            ...getGroups(),
                            ...data.groups
                        ]);
                    }

                    if (
                        data.counters &&
                        typeof data.counters === 'object'
                    ) {
                        storeSet(
                            STORAGE.COUNTERS,
                            data.counters
                        );
                    }

                    updateFloatingButton();

                    showToast(
                        `导入完成，共处理 ${importedCount} 条规则。`,
                        'success'
                    );

                    close();
                } catch (error) {
                    showToast(
                        `导入失败：${error.message}`,
                        'error'
                    );
                }
            }
        );
    }

    /******************************************************************
     * 十一、快捷按钮
     ******************************************************************/

    function updateFloatingButton() {
        const settings = getSettings();

        if (!settings.showFloatingButton) {
            state.floatingHost?.remove();
            state.floatingHost = null;
            return;
        }

        if (
            state.floatingHost ||
            !document.documentElement
        ) {
            return;
        }

        const host =
            document.createElement('div');

        host.id =
            'sc-web-recorder-floating-host';

        host.dataset.scRecorderUi = 'true';

        Object.assign(host.style, {
            position: 'fixed',
            zIndex: '2147483645'
        });

        const shadow =
            host.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
            <style>
                :host {
                    all: initial;
                    font-family:
                        Arial,
                        "Microsoft YaHei",
                        sans-serif;
                }

                .container {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                    padding: 7px;
                    border: 1px solid rgba(148,163,184,.35);
                    border-radius: 999px;
                    background: rgba(255,255,255,.96);
                    box-shadow: 0 8px 28px rgba(15,23,42,.23);
                    backdrop-filter: blur(8px);
                    transition: opacity 0.3s ease;
                }

                .drag-handle {
                    width: 6px;
                    height: 24px;
                    border-radius: 3px;
                    background: rgba(148,163,184,.4);
                    cursor: move;
                    flex: none;
                    margin-left: 2px;
                }

                .drag-handle:hover {
                    background: rgba(148,163,184,.7);
                }

                button {
                    width: 38px;
                    height: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    border: 0;
                    border-radius: 50%;
                    color: #334155;
                    background: #f1f5f9;
                    cursor: pointer;
                    font-size: 16px;
                    transition:
                        transform .15s,
                        background .15s;
                }

                button:hover {
                    transform: translateY(-1px);
                    background: #dbeafe;
                }

                #record {
                    color: #fff;
                    background: #dc2626;
                }

                #run {
                    color: #fff;
                    background: #16a34a;
                }

                #manage {
                    color: #fff;
                    background: #2563eb;
                }
            </style>

            <div class="container">
                <div class="drag-handle" title="拖拽移动"></div>
                <button
                    id="record"
                    title="开始或停止录制（Alt+R）"
                >
                    ●
                </button>

                <button
                    id="run"
                    title="执行当前页面匹配规则"
                >
                    ▶
                </button>

                <button
                    id="pause"
                    title="暂停或继续任务"
                >
                    ${state.paused ? '▶' : '⏸'}
                </button>

                <button
                    id="manage"
                    title="管理规则、分组和批量任务"
                >
                    ⚙
                </button>
            </div>
        `;

        shadow.getElementById(
            'record'
        ).onclick = toggleRecording;

        shadow.getElementById(
            'run'
        ).onclick = executeMatchingRule;

        const pauseBtn = shadow.getElementById('pause');
        if (pauseBtn) {
            pauseBtn.onclick = togglePause;
            pauseBtn.style.display = (getTaskState() && !state.recording) ? 'flex' : 'none';
        }

        shadow.getElementById(
            'manage'
        ).onclick = openManager;

        // 拖拽支持（通过 shadow DOM 内的拖拽手柄）
        const dragHandle = shadow.querySelector('.drag-handle');
        const container = shadow.querySelector('.container');
        if (dragHandle && container) {
            const isDragging = makeDraggable(
                host,
                'floatingHost',
                { x: window.innerWidth - 210, y: window.innerHeight - 70 }
            );
            // 重新绑定手柄事件（makeDraggable 默认操作 element，这里需要操作 handle）
            let dragging = false;
            let startX = 0, startY = 0, elemStartX = 0, elemStartY = 0, moved = false;

            dragHandle.addEventListener('mousedown', e => {
                if (e.button !== 0) return;
                dragging = true;
                moved = false;
                startX = e.clientX;
                startY = e.clientY;
                elemStartX = parseFloat(host.style.left) || 0;
                elemStartY = parseFloat(host.style.top) || 0;
                e.preventDefault();
                e.stopPropagation();
            });

            document.addEventListener('mousemove', e => {
                if (!dragging) return;
                const dx = e.clientX - startX;
                const dy = e.clientY - startY;
                if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
                const maxX = window.innerWidth - host.offsetWidth;
                const maxY = window.innerHeight - host.offsetHeight;
                host.style.left = Math.max(0, Math.min(maxX, elemStartX + dx)) + 'px';
                host.style.top = Math.max(0, Math.min(maxY, elemStartY + dy)) + 'px';
            });

            document.addEventListener('mouseup', () => {
                if (dragging && moved) {
                    saveUIPosition('floatingHost', parseFloat(host.style.left), parseFloat(host.style.top));
                }
                dragging = false;
            });

            // 阻止按钮点击在拖拽时触发
            shadow.querySelectorAll('button').forEach(btn => {
                const origClick = btn.onclick;
                btn.onclick = function(e) {
                    if (dragging && moved) {
                        e.preventDefault();
                        e.stopPropagation();
                        return;
                    }
                    if (origClick) origClick.call(this, e);
                };
            });
        }

        // 自动淡化
        let fadeTimer = null;
        const fadeOut = () => {
            container.style.opacity = '0.25';
        };
        const fadeIn = () => {
            if (fadeTimer) { clearTimeout(fadeTimer); fadeTimer = null; }
            container.style.opacity = '1';
        };
        host.addEventListener('mouseenter', fadeIn);
        host.addEventListener('mouseleave', () => {
            if (fadeTimer) clearTimeout(fadeTimer);
            fadeTimer = setTimeout(fadeOut, 2500);
        });
        fadeTimer = setTimeout(fadeOut, 2500);

        document.documentElement.appendChild(host);
        state.floatingHost = host;
    }

    /******************************************************************
     * 十二、菜单、快捷键和初始化
     ******************************************************************/

    function registerMenus() {
        if (
            typeof GM_registerMenuCommand !== 'function'
        ) {
            return;
        }

        GM_registerMenuCommand(
            '⏺ 开始/停止录制（Alt+R）',
            toggleRecording
        );

        GM_registerMenuCommand(
            '▶ 执行当前页面匹配规则',
            executeMatchingRule
        );

        GM_registerMenuCommand(
            '⚙ 管理规则、分组和批量任务',
            openManager
        );

        GM_registerMenuCommand(
            '■ 停止当前任务',
            stopPlayback
        );

        GM_registerMenuCommand(
            '↺ 重置递增变量计数器',
            resetVariableCounters
        );

        getRules()
            .slice(0, 12)
            .forEach(rule => {
                GM_registerMenuCommand(
                    `运行规则：${rule.name}`,
                    () =>
                        executeRuleById(rule.id)
                );
            });
    }

    function bindShortcut() {
        window.addEventListener(
            'keydown',
            event => {
                if (
                    event.altKey &&
                    !event.ctrlKey &&
                    !event.metaKey &&
                    String(event.key)
                        .toLowerCase() === 'r'
                ) {
                    event.preventDefault();
                    event.stopPropagation();
                    toggleRecording();
                }
            },
            true
        );
    }

    function migrateData() {
        const rules = getRules();
        let changed = false;

        for (const rule of rules) {
            if (
                typeof rule.group !== 'string'
            ) {
                rule.group = DEFAULT_GROUP;
                changed = true;
            }
        }

        if (changed) {
            saveRules(rules);
        }

        const groups = getGroups();
        saveGroups(groups);

        // 清理旧版执行状态，避免新旧任务系统冲突
        storeDelete(STORAGE.OLD_RUN_STATE);
        storeDelete(STORAGE.OLD_BATCH_STATE);
    }

    async function initialize() {
        if (state.initialized) {
            return;
        }

        state.initialized = true;

        migrateData();
        registerMenus();
        bindShortcut();
        updateFloatingButton();

        const draft =
            storeGet(STORAGE.DRAFT, null);

        if (draft?.active) {
            startRecording(true);
            return;
        }

        // 检查是否有来自批量执行的独立任务（优先）
        // 同时检测 hash 和 query 参数，因为页面 navigate 后会将参数转为 query
        // 子标签页：检测是否有来自主控调度的任务
        let batchTaskId = null;
        const hashMatch = location.hash.match(/sc-recorder-task=([^&]+)/);
        if (hashMatch) {
            batchTaskId = decodeURIComponent(hashMatch[1]);
        } else {
            const searchMatch = location.search.match(/[?&]sc-recorder-task=([^&]+)/);
            if (searchMatch) {
                batchTaskId = decodeURIComponent(searchMatch[1]);
            }
        }

        if (batchTaskId) {
            let batchTask = storeGet(BATCH_TASK_PREFIX + batchTaskId, null);
            if (!batchTask) {
                await sleep(2000);
                batchTask = storeGet(BATCH_TASK_PREFIX + batchTaskId, null);
            }

            // 检测主控是否已要求跳过
            if (batchTask && batchTask._skip) {
                const keepTab = batchTask._skipKeepTab;
                storeDelete(BATCH_TASK_PREFIX + batchTaskId);
                storeSet(BATCH_DONE_PREFIX + batchTaskId, {
                    success: false,
                    isCaptcha: false,
                    finishedAt: Date.now(),
                    _skipped: true
                });
                if (!keepTab) {
                    window.close();
                }
                return;
            }

            if (batchTask && batchTask.active) {
                if (isErrorPage()) {
                    writeBatchDone(batchTaskId, false, false);
                    storeDelete(BATCH_TASK_PREFIX + batchTaskId);
                    addLog(`页面加载失败：${location.href}（${document.title || '无标题'}）`, 'error');
                    await sleep(1000);
                    window.close();
                    return;
                }

                state.batchTaskId = batchTaskId;

                // 启动心跳上报
                startHeartbeat(batchTaskId);

                // 首次心跳立即上报
                const initTask = storeGet(BATCH_TASK_PREFIX + batchTaskId, null);
                if (initTask) {
                    initTask._heartbeat = Date.now();
                    storeSet(BATCH_TASK_PREFIX + batchTaskId, initTask);
                }

                // 构建单规则任务（使用独立存储键 _exec）
                const ruleId = batchTask.ruleId;
                if (!ruleId) {
                    writeBatchDone(batchTaskId, false, false);
                    storeDelete(BATCH_TASK_PREFIX + batchTaskId);
                    addLog(`任务数据异常（无 ruleId）：${batchTaskId}`, 'error');
                    await sleep(500);
                    window.close();
                    return;
                }

                const sharedTask = {
                    active: true,
                    mode: 'single',
                    ruleIds: [ruleId],
                    ruleIndex: 0,
                    stepIndex: batchTask.stepIndex || 0,
                    variableOverrides: batchTask.variableOverrides || {},
                    currentVariables: batchTask.currentVariables,
                    createdAt: batchTask.createdAt
                };
                saveTaskState(sharedTask);

                if (hashMatch) {
                    history.replaceState(null, '', location.pathname + location.search);
                }
                await sleep(500);
                continueTask();
                return;
            } else {
                window.close();
                return;
            }
        }

        const task = getTaskState();

        if (task?.active) {
            await sleep(500);
            continueTask();
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener(
            'DOMContentLoaded',
            initialize,
            { once: true }
        );
    } else {
        initialize();
    }
})();