DICMusic: 简易上传页面修改暂存工具

FormSave.user.js

// ==UserScript==
// @name         DICMusic: Form Auto-Save and Restore
// @namespace    https://github.com/abc1763613206
// @version      1.2
// @description  简易上传页面修改暂存工具
// @author       abc1763613206
// @match        *://dicmusic.com/upload.php
// @grant        none
// @downloadURL https://gist.github.com/abc1763613206/92cbbc284346cde66d1173becc823501/raw/FormSave.user.js
// @updateURL https://gist.github.com/abc1763613206/92cbbc284346cde66d1173becc823501/raw/FormSave.user.js
// ==/UserScript==

(function () {
    'use strict';

    function extractFromInput(input) {
        if (input.type === 'checkbox' || input.type === 'radio') {
            return input.checked;
        } else {
            return input.value;
        }
    }
    // 获取表单元素
    const form = document.querySelector('form.create_form');

    if (!form) {
        console.log('未找到表单元素');
        return;
    }

    // 创建保存、恢复和清空按钮
    const saveButton = document.createElement('button');
    saveButton.textContent = '保存表单';
    saveButton.style.margin = '10px';

    const restoreButton = document.createElement('button');
    restoreButton.textContent = '恢复表单';
    restoreButton.style.margin = '10px';

    const clearButton = document.createElement('button');
    clearButton.textContent = '清空数据';
    clearButton.style.margin = '10px';

    // 创建一个容器来容纳按钮，并居中显示
    const buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.justifyContent = 'center';
    buttonContainer.style.alignItems = 'center';
    buttonContainer.style.margin = '20px 0';

    // 将按钮添加到容器中
    buttonContainer.appendChild(saveButton);
    buttonContainer.appendChild(restoreButton);
    buttonContainer.appendChild(clearButton);

    // 将按钮容器添加到表单旁边
    form.parentNode.insertBefore(buttonContainer, form);

    // 保存表单内容到localStorage
    saveButton.addEventListener('click', () => {
        const formData = {};
        const inputs = form.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            if (input.type === 'file' || input.type === 'submit' || input.type === 'button') {
                return;
            }
            if (input.name.endsWith('[]')) {
                if (!formData[input.name]) {
                    formData[input.name] = [];
                }
                let single = { [input.id]: extractFromInput(input) };
                formData[input.name].push(single);
            }
            else {
                formData[input.name] = extractFromInput(input);
            }
            /*if (input.onchange) {
                formData[input.name + '_onchange'] = input.onchange.toString();
            }
            if (input.onblur) {
                formData[input.name + '_onblur'] = input.onblur.toString();
            }

            if (input.type === 'checkbox' || input.type === 'radio') {
                formData[input.name] = input.checked;
            } else {
                formData[input.name] = input.value;
            }*/
        });

        const timestamp = new Date().toISOString();
        localStorage.setItem(`formData_${timestamp}`, JSON.stringify(formData));
        alert('表单已保存！');
        alert('请注意，文件上传等部分并无法有效保存，下次恢复表单时需重新上传文件！');
    });

    restoreButton.addEventListener('click', () => {
        const savedData = {};
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key.startsWith('formData_')) {
                savedData[key] = JSON.parse(localStorage.getItem(key));
            }
        }

        if (Object.keys(savedData).length === 0) {
            alert('没有找到保存的表单数据！');
            return;
        }

        const restoreContainer = document.createElement('div');
        restoreContainer.style.display = 'flex';
        restoreContainer.style.flexDirection = 'column';
        restoreContainer.style.justifyContent = 'center';
        restoreContainer.style.alignItems = 'center';
        restoreContainer.style.position = 'fixed';
        restoreContainer.style.top = '50%';
        restoreContainer.style.left = '50%';
        restoreContainer.style.transform = 'translate(-50%, -50%)';
        restoreContainer.style.background = 'white';
        restoreContainer.style.padding = '20px';
        restoreContainer.style.border = '1px solid #ccc';
        restoreContainer.style.borderRadius = '5px';
        restoreContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
        restoreContainer.style.zIndex = '1000';
        restoreContainer.style.minWidth = '50%';

        const titleLabel = document.createElement('h2');
        titleLabel.textContent = '表单数据管理';
        titleLabel.style.textAlign = 'center';
        titleLabel.style.marginBottom = '20px';

        const dataTable = document.createElement('table');
        dataTable.style.borderCollapse = 'collapse';
        dataTable.style.width = '100%';

        const headerRow = dataTable.insertRow();
        const headerCell1 = headerRow.insertCell();
        headerCell1.textContent = '时间';
        const headerCell2 = headerRow.insertCell();
        headerCell2.textContent = '标题'; // 新增的标题列
        const headerCell3 = headerRow.insertCell();
        headerCell3.textContent = '操作';

        // 遍历所有保存的数据并添加到表格中
        for (const key in savedData) {
            const row = dataTable.insertRow();
            const timestamp = key.replace('formData_', ''); // 提取时间字符串
            const formData = savedData[key];

            // 将 ISO 时间字符串转换为 Date 对象
            const date = new Date(timestamp);

            // 时间单元格
            const timestampCell = row.insertCell();
            timestampCell.textContent = date.toLocaleString(); // 显示本地时间

            const titleCell = row.insertCell();
            titleCell.textContent = formData.title || ''; // 如果 title 不存在，默认为空字符串

            const actionCell = row.insertCell();
            const restoreButton = document.createElement('button');
            restoreButton.textContent = '恢复';
            restoreButton.style.marginRight = '10px';
            restoreButton.addEventListener('click', (e) => {
                e.stopPropagation();
                // 触发动态表单
                console.log(formData);
                console.log(formData.hasOwnProperty('extra_format[]'));
                console.log(formData['extra_format[]'].length);
                if (formData.hasOwnProperty('extra_format[]')) {
                    while (buttonCount > formData['extra_format[]'].length) {
                        removeRow();
                    }
                    while (buttonCount <= formData['extra_format[]'].length) {
                        createRow();
                    }
                }
                if (formData.hasOwnProperty('artists[]')) {
                    while (ArtistCount > formData['artists[]'].length) {
                        RemoveArtistField();
                    }
                    while (ArtistCount < formData['artists[]'].length) {
                        AddArtistField();
                    }
                }
                if (formData.hasOwnProperty('logfiles[]')) {
                    while (LogCount > formData['logfiles[]'].length) {
                        RemoveLogField();
                    }
                    while (LogCount <= formData['logfiles[]'].length) {
                        AddLogField();
                    }
                }
                const inputs = form.querySelectorAll('input, select, textarea');
                inputs.forEach(input => {
                    if (input.type === 'file' || input.type === 'submit' || input.type === 'button') {
                        return;
                    }
                    if (input.name.endsWith('[]')) {
                        const dataArray = formData[input.name] || [];
                        const matchingData = dataArray.find(item => item[input.id]);
                        if (matchingData) {
                            if (input.type === 'checkbox' || input.type === 'radio') {
                                input.checked = matchingData[input.id];
                            } else {
                                input.value = matchingData[input.id];
                            }
                        }
                    } else {
                        const value = formData[input.name];
                        if (input.type === 'checkbox' || input.type === 'radio') {
                            input.checked = value;
                        } else {
                            input.value = value || '';
                        }
                    }
                });
                // 触发onChange
                CheckYear();
                Format();
                Bitrate();
                AlterOriginal();
                const shouldDelete = confirm('表单已恢复，是否删除这条保存的数据？');
                if (shouldDelete) {
                    localStorage.removeItem(key);
                    alert('数据已删除！');
                }
                alert('请注意，表单中的文件上传部分并没有被恢复，请自行上传Log/种子等需要上传的文件！');
                document.body.removeChild(restoreContainer);
            });

            // 删除按钮
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.style.backgroundColor = 'red';
            deleteButton.style.color = 'white';
            deleteButton.style.marginRight = '10px';
            deleteButton.addEventListener('click', (e) => {
                e.stopPropagation();
                if (confirm('确认删除该表单数据？')) {
                    localStorage.removeItem(key);
                    document.body.removeChild(restoreContainer);
                    alert('数据已删除！');
                }
            });

            actionCell.appendChild(restoreButton);
            actionCell.appendChild(deleteButton);
        }

        // 添加表格到容器
        restoreContainer.appendChild(titleLabel);
        restoreContainer.appendChild(dataTable);

        // 添加关闭按钮
        const closeButton = document.createElement('button');
        closeButton.textContent = '关闭';
        closeButton.style.margin = '20px 0';
        closeButton.style.alignSelf = 'center';
        closeButton.addEventListener('click', () => {
            document.body.removeChild(restoreContainer);
        });

        restoreContainer.appendChild(closeButton);

        // 将居中容器添加到页面
        document.body.appendChild(restoreContainer);

        // 添加点击页面其他区域关闭弹框的事件
        restoreContainer.addEventListener('click', (event) => {
            if (event.target === restoreContainer) {
                document.body.removeChild(restoreContainer);
            }
        });
    });

    // 清空所有存储的数据
    clearButton.addEventListener('click', () => {
        if (confirm('确认清除所有保存的表单数据？')) {
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key.startsWith('formData_')) {
                    localStorage.removeItem(key);
                }
            }
            alert('所有表单数据已清除！');
        }
    });
})();