liuhairui
/
mes-ai-server-api


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
							<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 搜索框样式 */
        .search-container {
            border: 1px solid #333;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .search-box {
            position: relative;
            max-width: 100%;
        }
        .search-box input {
            width: 100%;
            padding: 12px 40px 12px 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .search-box button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #666;
        }
       
        /* 模板区域样式 */
        .template-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        .template-header {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: 25px;
            flex-direction: column;
        }
        .filter-options {
            display: flex;
            margin-top: 15px;
            flex-direction: column;
            width: 100%;
        }
        .template-title {
            font-size: 18px;
            font-weight: bold;
        }
        .filter-group {
            display: flex;
            gap: 10px;
            flex-direction: row;
            align-items: center;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
            width: fit-content;
            margin-bottom: 10px;
        }
        .filter-group label {
            font-size: 14px;
            color: #333;
            font-weight: bold;
        }
        .filter-group span {
            font-size: 14px;
            color: #333;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.2s, color 0.2s;
        }
        .filter-group span:hover {
            background-color: #e9ecef;
        }
        .template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
        }
        .template-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: transform 0.2s;
        }
        .template-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .template-thumbnail {
            width: 100%;
            height: 120px;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
            overflow: hidden;
        }
        /* 图片和视频样式 */
        .template-thumbnail img,
        .template-thumbnail video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }
        /* 响应式图片 */
        img {
            max-width: 100%;
            height: auto;
        }
        .template-info {
            padding: 12px;
        }
        .template-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
        }
        .template-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px;
        }
        .template-tag {
            font-size: 12px;
            background-color: #e9ecef;
            color: #666;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .template-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
        }
        
        /* 放大模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            overflow: auto;
        }
        .modal-content {
            position: relative;
            margin: 5% auto;
            max-width: 90%;
            max-height: 90%;
        }
        .modal-content img,
        .modal-content video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .close-modal {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <section class="template-section">
        <!-- 搜索框 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" id="keywordInput" placeholder="搜索" value="{$keyword|default=''}">
                <input type="hidden" id="typeFilter" value="{$type|default=''}">
                <button id="searchBtn" type="button">查询</button>
            </div>
        </div>
        
        <div class="template-header">
            <h2 class="template-title">全部模板</h2>
            <div class="filter-options">
                 <div class="filter-group">
                    <label>风格:</label>
                    <span {if condition="empty($style)"}style="background-color: #e9ecef;"{/if}>全部</span>
                    <span>动漫</span>
                    <span>油画</span>
                    <span>风景</span>
                    <span>人像</span>
                </div>
                 <div class="filter-group">
                    <label>模版类型:</label>
                    <span id="typeAll" {if condition="empty($type)"}style="background-color: #e9ecef; color: #007bff;"{else}style="color: #333;"{/if} onclick="filterByType('')">全部</span>
                    <span id="typeImage" {if condition="$type eq '文生图'"}style="background-color: #e9ecef; color: #007bff;"{else}style="color: #333;"{/if} onclick="filterByType('文生图')">图片</span>
                    <span id="typeVideo" {if condition="$type eq '文生视频'"}style="background-color: #e9ecef; color: #007bff;"{else}style="color: #333;"{/if} onclick="filterByType('文生视频')">视频</span>
                </div>
            </div>
        </div>
        
        <div class="template-grid" id="templateGrid">
            <!-- 使用volist标签循环显示模板 -->
            {volist name="products" id="template"}
            <div class="template-card">
                <div class="template-thumbnail">
                    {if condition="$template.type eq '文生图'"}
                        <img src="{$template.template_image_url}" alt="{$template.template_name}" onclick="showMedia('{$template.template_image_url}', '{$template.type}')" onerror="this.src=''; this.alt='图片加载失败';">
                    {elseif condition="$template.type eq '文生视频'"}
                        <video src="{$template.template_image_url}" alt="{$template.template_name}" controls muted onclick="showMedia('{$template.template_image_url}', '{$template.type}')"></video>
                    {/if}
                </div>
                <div class="template-info">
                    <div class="template-name">{$template.template_name}</div>
                    <div class="template-meta">
                        <span>{if condition="$template.type eq '文生图'"}图片{else}视频{/if}</span>
                        <span>免费</span>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </section>
    
    <!-- 放大模态框 -->
    <div id="mediaModal" class="modal">
        <span class="close-modal" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div id="modalMediaContainer"></div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 初始化变量
        let currentKeyword = '{$keyword|default=\'\'}';
        let currentType = '{$type|default=\'\'}';
        
        // 搜索函数
        function searchTemplates() {
            // 获取当前的关键词和类型
            const keyword = $('#keywordInput').val().trim();
            const type = $('#typeFilter').val();
            
            // 如果参数没有变化，不发送请求
            if (keyword === currentKeyword && type === currentType) {
                return;
            }
            
            // 更新当前参数
            currentKeyword = keyword;
            currentType = type;
            
            // 发送AJAX请求
            $.ajax({
                url: '{:url("index/user/template")}',
                type: 'GET',
                data: {
                    keyword: keyword,
                    type: type
                },
                dataType: 'json',
                success: function(response) {
                    if (response.code === 0 && response.data) {
                        // 更新模板列表
                        updateTemplateGrid(response.data);
                    } else {
                        console.error('获取模板数据失败:', response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX请求失败:', error);
                }
            });
        }
        
        // 更新模板网格
        function updateTemplateGrid(templates) {
            const templateGrid = $('#templateGrid');
            templateGrid.empty(); // 清空现有内容
            
            // 如果没有模板，显示提示
            if (templates.length === 0) {
                templateGrid.append('<div style="grid-column: 1 / -1; text-align: center; padding: 50px; color: #666;">暂无匹配的模板</div>');
                return;
            }
            
            // 循环生成模板卡片
            $.each(templates, function(index, template) {
                let mediaElement;
                // 根据类型创建媒体元素
                if (template.type === '文生图') {
                    mediaElement = `<img src="${template.template_image_url}" alt="${template.template_name}" onclick="showMedia('${template.template_image_url}', '${template.type}')" onerror="this.src=''; this.alt='图片加载失败';">`;
                } else if (template.type === '文生视频') {
                    mediaElement = `<video src="${template.template_image_url}" alt="${template.template_name}" controls muted onclick="showMedia('${template.template_image_url}', '${template.type}')"></video>`;
                }
                
                // 创建模板卡片
                const templateCard = `
                    <div class="template-card">
                        <div class="template-thumbnail">
                            ${mediaElement}
                        </div>
                        <div class="template-info">
                            <div class="template-name">${template.template_name}</div>
                            <div class="template-meta">
                                <span>${template.type === '文生图' ? '图片' : '视频'}</span>
                                <span>免费</span>
                            </div>
                        </div>
                    </div>
                `;
                
                templateGrid.append(templateCard);
            });
        }
        
        // 类型筛选函数
        function filterByType(type) {
            // 更新类型筛选器的值
            $('#typeFilter').val(type);
            
            // 更新类型筛选按钮的样式
            $('#typeAll, #typeImage, #typeVideo').css({'background-color': '', 'color': '#333'});
            if (type === '') {
                $('#typeAll').css({'background-color': '#e9ecef', 'color': '#007bff'});
            } else if (type === '文生图') {
                $('#typeImage').css({'background-color': '#e9ecef', 'color': '#007bff'});
            } else if (type === '文生视频') {
                $('#typeVideo').css({'background-color': '#e9ecef', 'color': '#007bff'});
            }
            
            // 执行搜索
            searchTemplates();
        }
        
        // 搜索按钮点击事件
        $('#searchBtn').click(function() {
            searchTemplates();
        });
        
        // 搜索框回车事件
        $('#keywordInput').keypress(function(e) {
            if (e.key === 'Enter') {
                searchTemplates();
            }
        });
        
        // 搜索框输入事件（可选：实现实时搜索）
        let searchTimer;
        $('#keywordInput').on('input', function() {
            clearTimeout(searchTimer);
            // 延迟300ms执行搜索，避免频繁请求
            searchTimer = setTimeout(searchTemplates, 300);
        });
        
        // 显示媒体放大模态框
        function showMedia(url, type) {
            const modal = document.getElementById('mediaModal');
            const container = document.getElementById('modalMediaContainer');
            
            // 清空容器
            container.innerHTML = '';
            
            // 创建媒体元素
            if (type === '文生图') {
                const img = document.createElement('img');
                img.src = url;
                img.alt = '放大图片';
                container.appendChild(img);
            } else if (type === '文生视频') {
                const video = document.createElement('video');
                video.src = url;
                video.controls = true;
                container.appendChild(video);
            }
            
            // 显示模态框
            modal.style.display = 'block';
        }
        
        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('mediaModal');
            modal.style.display = 'none';
        }
        
        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('mediaModal');
            if (event.target === modal) {
                closeModal();
            }
        }
    </script>
</body>
</html>