mes-ai-server-api/application/index/view/user/recycle.html

<style>
    /* 主容器 - 左右布局 */
    .user-diagrams-container {
        display: flex;
        min-height: calc(100vh - 120px); /* 减去导航栏和页脚高度 */
    }

    /* 左侧菜单样式 */
    .sidebar {
        width: 200px;
        background-color: #fff;
        border-right: 1px solid #e8e8e8;
        flex-shrink: 0;
    }

    .menu {
        padding: 20px 0;
    }

    .menu-item {
        list-style: none;
    }

    .menu-item a {
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #000000;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .menu-item.active a {
        background-color: #f0f7ff;
        color: #1890ff;
        font-weight: 500;
    }

    .menu-item:hover a {
        background-color: #f5f5f5;
        color: #1890ff;
    }

    /* 右侧内容区域样式 */
    .diagrams-content {
        flex: 1;
        background-color: #fff;
        padding: 20px;
    }

    /* 标签页样式 */
    .tabs {
        margin-bottom: 20px;
    }

    .tab-item {
        display: inline-block;
        margin-right: 20px;
        padding: 10px 0;
        font-size: 16px;
        color: #1890ff;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .tab-item.active {
        font-weight: 500;
        border-bottom-color: #1890ff;
    }

    .tab-item:hover {
        color: #40a9ff;
    }

    /* 内容区域 */
    .tab-content {
        min-height: 400px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        padding: 20px;
    }

    /* 模板网格样式 */
    .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .template-card {
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .template-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .template-thumbnail {
        width: 100%;
        height: 160px;
        overflow: hidden;
        background-color: #f5f5f5;
        position: relative;
    }

    /* 审核状态标识样式 */
    .examine-status {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        z-index: 10;
    }

    .examine-status.passed {
        background-color: #52c41a;
    }

    .examine-status.failed {
        background-color: #ff4d4f;
    }

    .examine-status.pending {
        background-color: #faad14;
    }

    .template-thumbnail img,
    .template-thumbnail video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .template-card:hover .template-thumbnail img,
    .template-card:hover .template-thumbnail video {
        transform: scale(1.05);
    }

    .template-info {
        padding: 15px;
    }

    .template-name {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .template-meta {
        font-size: 14px;
        color: #666;
    }

    .template-meta span {
        margin-right: 15px;
    }

    /* 删除按钮样式 */
    .delete-btn {
        color: #ff4d4f;
        cursor: pointer;
        transition: color 0.3s ease;
        margin-left: 10px;
    }

    .delete-btn:hover {
        color: #ff7875;
        text-decoration: underline;
    }
    
    /* 恢复按钮样式 */
    .restore-btn {
        color: #52c41a;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .restore-btn:hover {
        color: #73d13d;
        text-decoration: underline;
    }

    /* 空提示样式 */
    .empty-tip {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        text-align: center;
        padding: 40px 20px;
        color: #999;
    }

    .empty-icon {
        font-size: 64px;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .empty-text {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 10px;
        color: #666;
    }

    .empty-subtext {
        font-size: 14px;
        color: #999;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .user-diagrams-container {
            flex-direction: column;
        }

        .sidebar {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #e8e8e8;
        }

        .menu {
            padding: 0;
        }

        .menu-item {
            display: inline-block;
        }

        .menu-item a {
            padding: 12px 15px;
        }
    }
</style>

<div class="user-diagrams-container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
        <ul class="menu">
            <li class="menu-item">
                <a href="{:url('user/diagrams')}">我的模版</a>
            </li>
            <li class="menu-item active">
                <a href="{:url('user/recycle')}">收回站</a>
            </li>
        </ul>
    </div>

    <!-- 右侧内容区域 -->
    <div class="diagrams-content">
        <!-- 标签页 -->
        <div class="tabs">
            <div class="tab-item active">回收站</div>
        </div>

        <!-- 内容区域 -->
        <div class="tab-content">
            <div class="template-grid" id="templateGrid">
                <!-- 使用volist标签循环显示模板 -->
                {volist name="products" id="template"}
                <div class="template-card">
                    <div class="template-thumbnail">
                        <!-- 审核状态标识 -->
                        <div class="examine-status {if condition="$template.toexamine eq '审核通过'"}passed{elseif condition="$template.toexamine eq '未通过'"}failed{else}pending{/if}">
                        {$template.toexamine}
                    </div>
                    {if condition="$template.type eq '文生图'"}
                    <a href="{:url('user/diagrams_list', ['id' => $template.id])}">
                        <img src="{$template.template_image_url}" alt="{$template.template_name}" onerror="this.src=''; this.alt='图片加载失败';">
                    </a>
                    {elseif condition="$template.type eq '文生视频'"}
                    <a href="{:url('user/diagrams_list', ['id' => $template.id])}">
                        <video src="{$template.template_image_url}" alt="{$template.template_name}" controls muted></video>
                    </a>
                    {/if}
                </div>
                <div class="template-info">
                    <div class="template-name">{$template.template_name}</div>
                    <div class="template-meta">
                        <span class="restore-btn" onclick="restoreDiagram({$template.id})">恢复</span>
                        <span class="delete-btn" onclick="deleteDiagram({$template.id})">彻底删除</span>
                    </div>
                </div>
            </div>
            {/volist}

            <!-- 作品为空时的提示 -->
            {empty name="products"}
            <div class="empty-tip">
                <div class="empty-icon">📄</div>
                <div class="empty-text">回收站空的</div>
            </div>
            {/empty}
        </div>
    </div>
</div>

<script>
    // 标签页切换事件
    document.querySelectorAll('.tab-item').forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有active类
            document.querySelectorAll('.tab-item').forEach(tab => {
                tab.classList.remove('active');
            });

            // 为当前点击的标签页添加active类
            this.classList.add('active');

            // 这里可以添加切换标签页内容的逻辑
            const tabText = this.textContent;
            console.log('切换到:', tabText);
        });
    });

    // 菜单点击切换事件
    document.querySelectorAll('.menu-item a').forEach(item => {
        item.addEventListener('click', function(e) {
            // 移除所有active类
            document.querySelectorAll('.menu-item').forEach(menu => {
                menu.classList.remove('active');
            });

            // 为当前点击的菜单项添加active类
            this.parentNode.classList.add('active');

            // 这里可以添加切换菜单内容的逻辑
            const menuText = this.textContent;
            console.log('切换到:', menuText);
        });
    });

    // 媒体显示函数
    function showMedia(url, type) {
        // 这里可以根据需要实现媒体预览功能
        // 例如：打开一个模态框显示大图或视频
        console.log('显示媒体:', url, '类型:', type);

        // 示例：创建一个简单的模态框
        const modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '0';
        modal.style.left = '0';
        modal.style.width = '100%';
        modal.style.height = '100%';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.display = 'flex';
        modal.style.justifyContent = 'center';
        modal.style.alignItems = 'center';
        modal.style.zIndex = '10000';

        if (type === '文生图') {
            const img = document.createElement('img');
            img.src = url;
            img.style.maxWidth = '90%';
            img.style.maxHeight = '90%';
            modal.appendChild(img);
        } else if (type === '文生视频') {
            const video = document.createElement('video');
            video.src = url;
            video.controls = true;
            video.style.maxWidth = '90%';
            video.style.maxHeight = '90%';
            modal.appendChild(video);
        }

        // 点击模态框关闭
        modal.addEventListener('click', function() {
            document.body.removeChild(modal);
        });

        document.body.appendChild(modal);
    }

    // 创建并显示自定义确认弹窗
    function showConfirmDialog(message, onConfirm, onCancel) {
        // 检查是否已存在弹窗，如果存在则移除
        let existingDialog = document.getElementById('customConfirmDialog');
        if (existingDialog) {
            existingDialog.remove();
        }

        // 创建弹窗容器
        const dialog = document.createElement('div');
        dialog.id = 'customConfirmDialog';
        dialog.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
            `;

        // 创建弹窗内容
        const dialogContent = document.createElement('div');
        dialogContent.style.cssText = `
                background-color: white;
                border-radius: 8px;
                padding: 24px;
                min-width: 300px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            `;

        // 创建消息文本
        const dialogMessage = document.createElement('div');
        dialogMessage.textContent = message;
        dialogMessage.style.cssText = `
                font-size: 16px;
                color: #333;
                margin-bottom: 24px;
                text-align: center;
            `;

        // 创建按钮容器
        const dialogButtons = document.createElement('div');
        dialogButtons.style.cssText = `
                display: flex;
                justify-content: center;
                gap: 16px;
            `;

        // 创建取消按钮
        const cancelBtn = document.createElement('button');
        cancelBtn.textContent = '取消';
        cancelBtn.style.cssText = `
                padding: 8px 16px;
                border: 1px solid #d9d9d9;
                background-color: white;
                color: #333;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.3s;
            `;
        cancelBtn.onmouseover = function() {
            this.style.borderColor = '#40a9ff';
            this.style.color = '#40a9ff';
        };
        cancelBtn.onmouseout = function() {
            this.style.borderColor = '#d9d9d9';
            this.style.color = '#333';
        };
        cancelBtn.onclick = function() {
            dialog.remove();
            if (onCancel) onCancel();
        };

        // 创建确认按钮
        const confirmBtn = document.createElement('button');
        confirmBtn.textContent = '确定';
        confirmBtn.style.cssText = `
                padding: 8px 16px;
                border: 1px solid #ff4d4f;
                background-color: #ff4d4f;
                color: white;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.3s;
            `;
        confirmBtn.onmouseover = function() {
            this.style.backgroundColor = '#ff7875';
            this.style.borderColor = '#ff7875';
        };
        confirmBtn.onmouseout = function() {
            this.style.backgroundColor = '#ff4d4f';
            this.style.borderColor = '#ff4d4f';
        };
        confirmBtn.onclick = function() {
            dialog.remove();
            if (onConfirm) onConfirm();
        };

        // 组装弹窗
        dialogButtons.appendChild(cancelBtn);
        dialogButtons.appendChild(confirmBtn);
        dialogContent.appendChild(dialogMessage);
        dialogContent.appendChild(dialogButtons);
        dialog.appendChild(dialogContent);

        // 添加到页面
        document.body.appendChild(dialog);

        // 点击弹窗外部关闭
        dialog.onclick = function(e) {
            if (e.target === dialog) {
                dialog.remove();
                if (onCancel) onCancel();
            }
        };
    }

    // 创建并显示自定义提示框
    function showAlert(message, type = 'info', duration = 3000) {
        // 检查是否已存在提示框容器，如果不存在则创建
        let alertElement = document.getElementById('customAlert');
        if (alertElement) {
            alertElement.remove();
        }

        // 创建提示框元素
        alertElement = document.createElement('div');
        alertElement.id = 'customAlert';

        // 设置不同类型的样式
        let backgroundColor;
        switch (type) {
            case 'success':
                backgroundColor = '#52c41a';
                break;
            case 'error':
                backgroundColor = '#ff4d4f';
                break;
            case 'warning':
                backgroundColor = '#faad14';
                break;
            default:
                backgroundColor = '#1890ff';
        }

        // 设置样式
        alertElement.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                padding: 12px 20px;
                background-color: ${backgroundColor};
                color: white;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                z-index: 10001;
                font-size: 14px;
                max-width: 80%;
                text-align: center;
            `;

        // 设置文本内容
        alertElement.textContent = message;

        // 添加到页面
        document.body.appendChild(alertElement);

        // 自动关闭
        setTimeout(() => {
            if (alertElement.parentNode) {
                alertElement.remove();
            }
        }, duration);
    }

    // 恢复作品函数
    function restoreDiagram(id) {
        showConfirmDialog('确定要恢复该作品吗？', function() {
            // 发送Ajax请求到恢复接口
            fetch('{:url("user/diagrams_restore")}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'id=' + id
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        // 恢复成功后显示提示并刷新页面
                        showAlert('恢复成功', 'success', 1500);
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    } else {
                        showAlert('恢复失败: ' + data.msg, 'error');
                    }
                })
                .catch(error => {
                    console.error('恢复请求失败:', error);
                    showAlert('恢复请求失败，请重试', 'error');
                });
        });
    }
    
    // 删除作品函数 - 彻底删除
    function deleteDiagram(id) {
        showConfirmDialog('确定要彻底删除该作品吗？删除后将无法恢复！', function() {
            // 发送Ajax请求到删除接口
            fetch('{:url("user/diagrams_delete")}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'id=' + id
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        // 删除成功后显示提示并刷新页面
                        showAlert('删除成功', 'success', 1500);
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    } else {
                        showAlert('删除失败: ' + data.msg, 'error');
                    }
                })
                .catch(error => {
                    console.error('删除请求失败:', error);
                    showAlert('删除请求失败，请重试', 'error');
                });
        });
    }
</script>