mes-ai-server-api/application/index/view/user/diagrams.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;
        }

        .delete-btn:hover {
            color: #ff7875;
            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 active">
                    <a href="{:url('user/diagrams')}">我的模版</a>
                </li>
                <li class="menu-item">
                    <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="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 class="empty-subtext">快去发布您的第一个作品吧！</div>
                    </div>
                    {/empty}
                </div>
            </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() {
            // 移除所有active类
            document.querySelectorAll('.menu-item').forEach(menu => {
                menu.classList.remove('active');
            });

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

        // 媒体显示函数
        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 deleteDiagram(id) {
            showConfirmDialog('确定要删除该作品吗？', function() {
                // 发送Ajax请求到删除接口
                fetch('{:url("user/diagrams_del")}', {
                    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>