diff --git a/src/landppt/web/templates/global_master_templates.html b/src/landppt/web/templates/global_master_templates.html
new file mode 100644
index 0000000..89f5ae1
--- /dev/null
+++ b/src/landppt/web/templates/global_master_templates.html
@@ -0,0 +1,2252 @@
+{% extends "base.html" %}
+
+{% block title %}模板管理{% endblock %}
+
+{% block extra_css %}
+<style>
+/* 现代化全局模板管理页面 - 优化布局 */
+.templates-hero {
+    background: var(--glass-bg);
+    backdrop-filter: blur(30px);
+    border: 1px solid var(--glass-border);
+    color: var(--text-primary);
+    padding: var(--spacing-lg) var(--spacing-lg);
+    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg) calc(-1 * var(--spacing-lg));
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+}
+
+.templates-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 25% 25%, rgba(240, 147, 251, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 75% 75%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
+    animation: templatesFloat 20s ease-in-out infinite;
+}
+
+@keyframes templatesFloat {
+    0%, 100% { transform: scale(1) rotate(0deg); }
+    50% { transform: scale(1.02) rotate(1deg); }
+}
+
+.templates-hero h1 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: var(--spacing-sm);
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    position: relative;
+    z-index: 1;
+    letter-spacing: -0.02em;
+}
+
+.templates-hero p {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin: 0;
+    position: relative;
+    z-index: 1;
+    font-weight: 500;
+}
+
+.templates-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-lg);
+    box-shadow: var(--glass-shadow);
+}
+
+.templates-actions {
+    display: flex;
+    gap: var(--spacing-sm);
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+/* 现代化输入框和表单样式 - 白色背景优化 */
+.glass-input, input[type="text"], input[type="email"], input[type="password"],
+textarea, select {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: var(--border-radius-sm);
+    padding: 10px 14px;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.glass-input:focus, input[type="text"]:focus, input[type="email"]:focus,
+input[type="password"]:focus, textarea:focus, select:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    background: #ffffff;
+}
+
+.glass-input::placeholder, input::placeholder, textarea::placeholder {
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 400;
+}
+
+/* 表单标签样式 */
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+}
+
+/* 复选框样式 */
+input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    accent-color: #667eea;
+    cursor: pointer;
+}
+
+/* 表单组样式 - 优化间距 */
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    margin-bottom: 6px;
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+}
+
+/* 选择框特殊样式 */
+select {
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 12px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    padding-right: 40px;
+    appearance: none;
+}
+
+/* 搜索和过滤区域样式 - 优化紧凑布局 */
+.search-filter-container {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--glass-shadow);
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.search-input-wrapper {
+    flex: 1;
+    min-width: 220px;
+    position: relative;
+}
+
+.search-input {
+    padding: 10px 14px;
+    transition: all 0.3s ease;
+}
+
+.search-input:focus {
+    padding: 10px 14px;
+}
+
+.filter-wrapper {
+    min-width: 160px;
+}
+
+.filter-select {
+    min-width: 100%;
+    padding: 10px 14px;
+}
+
+.refresh-btn {
+    white-space: nowrap;
+    min-width: auto;
+    padding: 10px 16px;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="templates-hero">
+    <h1>模板管理</h1>
+    <p>管理和创建PPT模板</p>
+</div>
+
+<div style="max-width: 1400px; margin: 0 auto; padding: var(--spacing-md);">
+    <!-- Header Actions -->
+    <div class="templates-header">
+        <div>
+            <div style="display: flex; align-items: center; gap: 12px;">
+                <h2 style="color: var(--text-primary); margin: 0; font-size: 1.3rem; font-weight: 600;">模板管理</h2>
+                <a href="https://landppt-template.52yyds.top" target="_blank" style="color: #667eea; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s ease;">模板广场</a>
+            </div>
+            <p style="color: var(--text-secondary); margin: 4px 0 0 0; font-size: 0.95rem;">创建、编辑和管理您的PPT模板</p>
+        </div>
+        <div class="templates-actions">
+            <button id="createTemplateBtn" class="btn btn-primary">
+                ➕ 新建模板
+            </button>
+            <button id="generateWithAIBtn" class="btn btn-success">
+                🤖 AI生成模板
+            </button>
+            <input type="file" id="importTemplateInput" accept=".html,.json" style="display: none;">
+            <button id="importTemplateBtn" class="btn btn-secondary" onclick="document.getElementById('importTemplateInput').click()">
+                📥 导入模板
+            </button>
+        </div>
+    </div>
+
+    <!-- Filter and Search -->
+    <div class="search-filter-container">
+        <div class="search-input-wrapper">
+            <input type="text" id="searchInput" placeholder="搜索模板名称..." class="glass-input search-input">
+        </div>
+        <div class="filter-wrapper">
+            <select id="tagFilter" class="glass-input filter-select">
+                <option value="">所有标签</option>
+            </select>
+        </div>
+        <button id="refreshBtn" class="btn btn-info refresh-btn"><i class="fas fa-sync-alt"></i> 刷新</button>
+    </div>
+
+    <!-- Templates Grid -->
+    <div id="templatesGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--spacing-lg);">
+        <!-- Templates will be loaded here -->
+    </div>
+
+    <!-- Pagination -->
+    <div id="paginationContainer" style="margin-top: var(--spacing-lg);">
+        <div class="pagination-wrapper">
+            <div class="pagination-info">
+                <span id="paginationInfo">显示第 1-12 项，共 0 项</span>
+            </div>
+            <div class="pagination-controls">
+                <button id="prevPageBtn" class="btn btn-sm btn-secondary" disabled>
+                    <i class="fas fa-chevron-left"></i> 上一页
+                </button>
+                <div id="pageNumbers" class="page-numbers">
+                    <!-- Page numbers will be generated here -->
+                </div>
+                <button id="nextPageBtn" class="btn btn-sm btn-secondary" disabled>
+                    下一页 <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+            <div class="pagination-size">
+                <label for="pageSizeSelect">每页显示：</label>
+                <select id="pageSizeSelect" class="glass-input" style="width: auto; min-width: 80px;">
+                    <option value="6" selected>6</option>
+                    <option value="12">12</option>
+                    <option value="24">24</option>
+                    <option value="48">48</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading indicator -->
+    <div id="loadingIndicator" class="loading-container" style="display: none;">
+        <div class="loading-spinner"></div>
+        <p class="loading-text">加载中...</p>
+    </div>
+</div>
+
+<!-- Create/Edit Template Modal -->
+<div id="templateModal" class="modal" style="display: none;">
+    <div class="modal-content" style="max-width: 850px; width: 90%;">
+        <div class="modal-header">
+            <h2 id="modalTitle">新建模板</h2>
+            <button class="close" id="closeModal" type="button">&times;</button>
+        </div>
+        <div class="modal-body">
+            <form id="templateForm">
+                <div class="form-group">
+                    <label for="templateName">模板名称 *</label>
+                    <input type="text" id="templateName" name="template_name" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="templateDescription">描述</label>
+                    <textarea id="templateDescription" name="description" rows="3"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="templateTags">标签 (用逗号分隔)</label>
+                    <input type="text" id="templateTags" name="tags" placeholder="例如: 商务, 简约, 现代">
+                </div>
+
+                <div class="form-group">
+                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+                        <input type="checkbox" id="isDefault" name="is_default">
+                        设为默认模板
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label for="htmlTemplate">HTML模板代码 *</label>
+                    <textarea id="htmlTemplate" name="html_template" required rows="15" style="font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; font-size: 13px; line-height: 1.4;"></textarea>
+                </div>
+
+                <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
+                    <button type="button" id="previewTemplateBtn" class="btn btn-secondary">👁️ 预览</button>
+                    <button type="button" id="cancelBtn" class="btn btn-secondary">取消</button>
+                    <button type="submit" class="btn btn-primary">💾 保存</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- AI Generation Modal -->
+<div id="aiGenerationModal" class="modal" style="display: none;">
+    <div class="modal-content" style="max-width: 850px; width: 90%;">
+        <div class="modal-header">
+            <h2>AI生成模板</h2>
+            <button class="close" id="closeAIModal" type="button">&times;</button>
+        </div>
+        <div class="modal-body">
+            <!-- 表单区域 -->
+            <div id="aiFormContainer">
+                <form id="aiGenerationForm">
+                    <div class="form-group">
+                        <label for="aiPrompt">描述您想要的模板风格 *</label>
+                        <textarea id="aiPrompt" name="prompt" required rows="4" placeholder="例如: 创建一个现代简约风格的商务PPT模板，使用蓝色主色调，包含卡片式布局..."></textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="aiTemplateName">模板名称 *</label>
+                        <input type="text" id="aiTemplateName" name="template_name" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="aiTemplateDescription">描述</label>
+                        <textarea id="aiTemplateDescription" name="description" rows="2"></textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="aiTemplateTags">标签 (用逗号分隔)</label>
+                        <input type="text" id="aiTemplateTags" name="tags" placeholder="AI生成, 现代, 商务">
+                    </div>
+
+                    <!-- 图片上传区域 -->
+                    <div class="form-group">
+                        <label>参考图片 (可选)</label>
+                        <div class="image-upload-section">
+                            <!-- 生成模式选择 -->
+                            <div class="generation-mode-selector">
+                                <div class="mode-option">
+                                    <input type="radio" id="mode_text_only" name="generation_mode" value="text_only" checked>
+                                    <label for="mode_text_only">📝 纯文本生成</label>
+                                </div>
+                                <div class="mode-option">
+                                    <input type="radio" id="mode_reference_style" name="generation_mode" value="reference_style">
+                                    <label for="mode_reference_style">🎨 参考风格 (借鉴图片设计元素)</label>
+                                </div>
+                                <div class="mode-option">
+                                    <input type="radio" id="mode_exact_replica" name="generation_mode" value="exact_replica">
+                                    <label for="mode_exact_replica">🔄 1:1还原 (尽可能准确复制图片设计)</label>
+                                </div>
+                            </div>
+
+                            <!-- 图片上传区域 -->
+                            <div id="imageUploadArea" class="image-upload-area" style="display: none;">
+                                <div class="upload-dropzone" id="uploadDropzone">
+                                    <div class="upload-content">
+                                        <div class="upload-icon">📷</div>
+                                        <div class="upload-text">
+                                            <p><strong>拖拽图片到此处</strong> 或 <button type="button" class="upload-btn" id="selectImageBtn">选择文件</button></p>
+                                            <p class="upload-hint">支持 JPG、PNG、WebP 格式，最大 10MB</p>
+                                        </div>
+                                    </div>
+                                    <input type="file" id="imageFileInput" accept="image/jpeg,image/jpg,image/png,image/webp" style="display: none;">
+                                </div>
+
+                                <!-- 图片预览区域 -->
+                                <div id="imagePreviewContainer" class="image-preview-container" style="display: none;">
+                                    <div class="image-preview-header">
+                                        <h4>📷 上传的参考图片</h4>
+                                        <button type="button" class="remove-image-btn" id="removeImageBtn" title="移除图片">✕</button>
+                                    </div>
+                                    <div class="image-preview-content">
+                                        <img id="imagePreview" class="image-preview" alt="参考图片预览">
+                                        <div class="image-info">
+                                            <div class="image-filename" id="imageFilename"></div>
+                                            <div class="image-size" id="imageSize"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
+                        <button type="button" id="cancelAIBtn" class="btn btn-secondary">取消</button>
+                        <button type="submit" class="btn btn-success">🤖 生成</button>
+                    </div>
+                </form>
+            </div>
+
+            <!-- AI生成进度区域 -->
+            <div id="aiGenerationProgress" style="display: none;">
+                <div class="ai-generation-header">
+                    <h3 style="margin: 0; color: var(--text-primary); font-size: 1.3rem;">🤖 AI正在生成您的模板...</h3>
+                    <div class="generation-status">
+                        <div class="status-indicator">
+                            <div class="status-dot"></div>
+                            <span id="statusText">正在分析需求...</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="margin: 20px 0; text-align: center; color: #6c757d; font-size: 0.9rem;">
+                    <span>⏳ 预计需要 30-60 秒，请耐心等待...</span>
+                </div>
+
+                <div class="generation-actions" style="margin-top: 20px; text-align: center;">
+                    <button type="button" id="cancelGenerationBtn" class="btn btn-secondary">⏹️ 取消生成</button>
+                </div>
+            </div>
+
+            <!-- 生成完成区域 -->
+            <div id="aiGenerationComplete" style="display: none;">
+                <div class="completion-header">
+                    <h3 style="margin: 0; color: #28a745; font-size: 1.2rem;">✅ 模板生成完成！</h3>
+                </div>
+
+                <!-- 模板预览区域 -->
+                <div class="template-preview-section" style="margin: 20px 0;">
+                    <div class="preview-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                        <h4 style="margin: 0; color: #333;">模板预览</h4>
+                        <button type="button" id="fullPreviewBtn" class="btn btn-sm btn-outline-primary">🔍 全屏预览</button>
+                    </div>
+                    <div id="generatedTemplatePreview" style="border: 1px solid #ddd; border-radius: 8px; height: 300px; overflow: hidden; background: #f8f9fa;">
+                        <iframe id="generatedTemplateIframe" style="width: 100%; height: 100%; border: none; transform: scale(0.5); transform-origin: 0 0; width: 200%; height: 200%;"></iframe>
+                    </div>
+                </div>
+
+                <!-- LLM响应查看区域 -->
+                <div class="llm-response-section" style="margin: 20px 0;">
+                    <div class="response-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                        <h4 style="margin: 0; color: #333;">AI思考过程</h4>
+                        <button type="button" id="toggleLLMResponseBtn" class="btn btn-sm btn-outline-info">📋 查看完整响应</button>
+                    </div>
+                    <div id="llmResponseContainer" style="display: none;">
+                        <div class="response-content" style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 15px; max-height: 400px; overflow-y: auto;">
+                            <div class="response-tabs" style="margin-bottom: 15px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center;">
+                                <div>
+                                    <span style="color: #495057; font-weight: 600;">原始响应</span>
+                                </div>
+                                <div>
+                                    <button type="button" id="copyResponseBtn" class="btn btn-sm btn-outline-secondary" title="复制响应内容">📋 复制</button>
+                                </div>
+                            </div>
+                            <div id="rawResponse" class="response-tab-content">
+                                <pre style="background: #2d3748; color: #e2e8f0; padding: 15px; border-radius: 6px; font-size: 13px; line-height: 1.4; margin: 0; white-space: pre-wrap; word-wrap: break-word; position: relative;"><code id="rawResponseCode"></code></pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 继续对话调整区域 -->
+                <div class="template-adjustment-section" style="margin: 20px 0;">
+                    <h4 style="margin: 0 0 10px 0; color: #333;">继续调整模板</h4>
+                    <div class="adjustment-input-group" style="display: flex; gap: 10px;">
+                        <input type="text" id="adjustmentInput" class="form-control" placeholder="请描述您希望如何调整模板，例如：改变颜色、调整布局、修改字体等..." style="flex: 1;">
+                        <button type="button" id="adjustTemplateBtn" class="btn btn-primary">🔄 调整</button>
+                    </div>
+                    <div id="adjustmentProgress" style="display: none; margin-top: 10px;">
+                        <div class="progress" style="height: 4px;">
+                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
+                        </div>
+                        <small class="text-muted">正在调整模板...</small>
+                    </div>
+                </div>
+
+                <div class="completion-actions" style="margin-top: 20px; text-align: center; display: flex; gap: 10px; justify-content: center;">
+                    <button type="button" id="saveGeneratedTemplateBtn" class="btn btn-success">💾 保存模板</button>
+                    <button type="button" id="regenerateTemplateBtn" class="btn btn-warning">🔄 重新生成</button>
+                    <button type="button" id="closeCompletionBtn" class="btn btn-secondary">关闭</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Preview Modal -->
+<div id="previewModal" class="modal" style="display: none;">
+    <div class="modal-content" style="max-width: 95%; width: 95%;">
+        <div class="modal-header">
+            <h2>模板预览</h2>
+            <button class="close" id="closePreviewModal" type="button">&times;</button>
+        </div>
+        <div class="modal-body" style="text-align: center; padding: 16px;">
+            <iframe id="previewFrame" style="width: 1280px; height: 720px; border: 1px solid #ddd; transform: scale(0.8); transform-origin: top left; margin: 0 auto;"></iframe>
+        </div>
+    </div>
+</div>
+
+<style>
+/* 动画定义 */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* 加载指示器样式 */
+.loading-container {
+    text-align: center;
+    padding: 60px 40px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--border-radius-lg);
+    margin: 40px 0;
+}
+
+.loading-spinner {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    border: 4px solid rgba(102, 126, 234, 0.2);
+    border-top: 4px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+}
+
+.loading-text {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: 1rem;
+    font-weight: 500;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* 现代化模态框样式 - 优化背景和定位 */
+.modal {
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: modalFadeIn 0.3s ease-out;
+    padding: 20px;
+    box-sizing: border-box;
+    overflow-y: auto;
+}
+
+/* 预览模态框需要更高的z-index */
+#previewModal {
+    z-index: 1100;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+    }
+    to {
+        opacity: 1;
+        backdrop-filter: blur(8px);
+    }
+}
+
+.modal-content {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-lg);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    animation: modalSlideIn 0.3s ease-out;
+    overflow: hidden;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    position: relative;
+    margin: auto;
+    min-width: 320px;
+}
+
+@keyframes modalSlideIn {
+    from {
+        transform: translateY(-30px) scale(0.95);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    background: #ffffff;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.modal-header h2 {
+    margin: 0;
+    color: var(--text-primary);
+    font-size: 1.4rem;
+    font-weight: 700;
+}
+
+.close {
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all 0.3s ease;
+    padding: 6px;
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0.05);
+    border: none;
+}
+
+.close:hover {
+    color: var(--text-primary);
+    background: rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
+}
+
+.modal-body {
+    padding: 24px;
+    background: #ffffff;
+}
+
+.template-card {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-md);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    position: relative;
+}
+
+.template-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.template-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.template-card:hover::before {
+    transform: scaleX(1);
+}
+
+.template-preview {
+    width: 100%;
+    height: 200px;
+    background: #f8f9fa;
+    position: relative;
+    border-bottom: 1px solid #eee;
+    overflow: hidden;
+    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+    flex-shrink: 0;
+}
+
+.template-preview-iframe {
+    width: 1280px;
+    height: 720px;
+    border: none;
+    pointer-events: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.32);
+    transform-origin: center center;
+    border-radius: 4px;
+}
+
+.preview-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.preview-overlay:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.preview-overlay-text {
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.preview-overlay:hover .preview-overlay-text {
+    opacity: 1;
+}
+
+.template-info {
+    padding: 14px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.template-actions {
+    padding: 12px 14px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    background: #f8f9fa;
+    display: flex;
+    gap: 6px;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+/* 现代化标签和徽章样式 */
+.tag {
+    display: inline-block;
+    background: rgba(102, 126, 234, 0.1);
+    color: #667eea;
+    padding: 4px 12px;
+    border-radius: var(--border-radius-sm);
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-right: 6px;
+    margin-bottom: 6px;
+    border: 1px solid rgba(102, 126, 234, 0.2);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.tag:hover {
+    background: rgba(102, 126, 234, 0.15);
+    transform: translateY(-1px);
+}
+
+.default-badge {
+    background: var(--success-gradient);
+    color: white;
+    padding: 4px 12px;
+    border-radius: var(--border-radius-sm);
+    font-size: 0.7rem;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+/* 现代化按钮样式 - 优化间距和一致性 */
+.btn {
+    padding: 10px 18px;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    text-align: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    min-height: 38px;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn-primary {
+    background: var(--primary-gradient);
+    color: white;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+.btn-primary:hover {
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+    transform: translateY(-2px) scale(1.02);
+}
+
+.btn-success {
+    background: var(--success-gradient);
+    color: white;
+    box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);
+}
+.btn-success:hover {
+    box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4);
+    transform: translateY(-2px) scale(1.02);
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #6c757d, #5a6268);
+    color: white;
+    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
+}
+.btn-secondary:hover {
+    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
+    transform: translateY(-2px) scale(1.02);
+}
+
+.btn-danger {
+    background: var(--secondary-gradient);
+    color: white;
+    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
+}
+.btn-danger:hover {
+    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.4);
+    transform: translateY(-2px) scale(1.02);
+}
+
+.btn-warning {
+    background: var(--warning-gradient);
+    color: white;
+    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
+}
+.btn-warning:hover {
+    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
+    transform: translateY(-2px) scale(1.02);
+}
+
+.btn-info {
+    background: linear-gradient(135deg, #17a2b8, #138496);
+    color: white;
+    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
+}
+.btn-info:hover {
+    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.4);
+    transform: translateY(-2px) scale(1.02);
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 0.75rem;
+    border-radius: var(--border-radius-sm);
+    white-space: nowrap;
+    min-width: auto;
+    min-height: 32px;
+    gap: 4px;
+}
+
+/* AI生成进度样式 - 优化背景和可读性 */
+.ai-generation-header {
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 18px;
+    background: #ffffff;
+    border-radius: var(--border-radius-md);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.generation-status {
+    margin-top: 10px;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: 0.95rem;
+    color: var(--text-primary);
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    background: #667eea;
+    border-radius: 50%;
+    animation: statusPulse 2s ease-in-out infinite;
+}
+
+@keyframes statusPulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.2);
+        opacity: 0.7;
+    }
+}
+
+.ai-response-container {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-md);
+    padding: 18px;
+    margin: 18px 0;
+    max-height: 400px;
+    overflow-y: auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.response-header {
+    margin-bottom: 14px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.response-header h4 {
+    margin: 0;
+    color: var(--text-primary);
+    font-size: 1.05rem;
+    font-weight: 600;
+}
+
+.ai-response-stream {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.ai-response-stream .typing-cursor {
+    display: inline-block;
+    width: 2px;
+    height: 1.2em;
+    background: #667eea;
+    animation: blink 1s infinite;
+    margin-left: 2px;
+}
+
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+.completion-header {
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 18px;
+    background: #ffffff;
+    border-radius: var(--border-radius-md);
+    border: 1px solid rgba(40, 167, 69, 0.3);
+    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
+}
+
+/* 图片上传样式 */
+.image-upload-section {
+    margin-top: 10px;
+}
+
+.generation-mode-selector {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: var(--border-radius-md);
+    border: 1px solid #e9ecef;
+    margin-bottom: 15px;
+}
+
+.mode-option {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    border-radius: var(--border-radius-sm);
+    transition: background-color 0.2s ease;
+}
+
+.mode-option:last-child {
+    margin-bottom: 0;
+}
+
+.mode-option:hover {
+    background-color: rgba(102, 126, 234, 0.1);
+}
+
+.mode-option input[type="radio"] {
+    margin: 0 10px 0 0;
+    width: 16px;
+    height: 16px;
+}
+
+.mode-option label {
+    cursor: pointer;
+    font-size: 0.95rem;
+    margin: 0;
+    flex: 1;
+}
+
+.mode-option input[type="radio"]:checked + label {
+    color: #667eea;
+    font-weight: 600;
+}
+
+.image-upload-area {
+    margin-top: 15px;
+}
+
+.upload-dropzone {
+    border: 2px dashed #d1d5db;
+    border-radius: var(--border-radius-md);
+    padding: 40px 20px;
+    text-align: center;
+    background: #fafbfc;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.upload-dropzone:hover,
+.upload-dropzone.dragover {
+    border-color: #667eea;
+    background: rgba(102, 126, 234, 0.05);
+}
+
+.upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.upload-icon {
+    font-size: 3rem;
+    color: #9ca3af;
+}
+
+.upload-text p {
+    margin: 0;
+    color: var(--text-secondary);
+}
+
+.upload-text p:first-child {
+    font-size: 1.1rem;
+    color: var(--text-primary);
+}
+
+.upload-btn {
+    background: none;
+    border: none;
+    color: #667eea;
+    text-decoration: underline;
+    cursor: pointer;
+    font-size: inherit;
+    padding: 0;
+}
+
+.upload-btn:hover {
+    color: #5a67d8;
+}
+
+.upload-hint {
+    font-size: 0.9rem;
+    color: #6b7280;
+}
+
+.image-preview-container {
+    margin-top: 20px;
+    border: 1px solid #e5e7eb;
+    border-radius: var(--border-radius-md);
+    overflow: hidden;
+    background: white;
+}
+
+.image-preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.image-preview-header h4 {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--text-primary);
+}
+
+.remove-image-btn {
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: background-color 0.2s ease;
+}
+
+.remove-image-btn:hover {
+    background: #dc2626;
+}
+
+.image-preview-content {
+    padding: 16px;
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+.image-preview {
+    max-width: 200px;
+    max-height: 150px;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid #e5e7eb;
+    object-fit: cover;
+}
+
+.image-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.image-filename {
+    font-weight: 600;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+.image-size {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+/* LLM响应展示样式 */
+.llm-response-section {
+    border: 1px solid #e9ecef;
+    border-radius: var(--border-radius-md);
+    background: white;
+    overflow: hidden;
+}
+
+.response-header {
+    background: #f8f9fa;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.response-header h4 {
+    color: #495057;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.response-tabs {
+    display: flex;
+    background: #f8f9fa;
+    margin: -15px -15px 15px -15px;
+    padding: 0 15px;
+}
+
+.response-tab {
+    background: none;
+    border: none;
+    padding: 12px 16px;
+    margin-right: 10px;
+    border-bottom: 2px solid transparent;
+    color: #6c757d;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.response-tab:hover {
+    color: #495057;
+    background: rgba(0, 123, 255, 0.1);
+}
+
+.response-tab.active {
+    color: #007bff;
+    border-bottom-color: #007bff;
+    background: rgba(0, 123, 255, 0.1);
+}
+
+.response-tab-content {
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.formatted-response-content {
+    line-height: 1.6;
+    color: #333;
+}
+
+.formatted-response-content h1,
+.formatted-response-content h2,
+.formatted-response-content h3,
+.formatted-response-content h4 {
+    color: #2c3e50;
+    margin: 20px 0 10px 0;
+    font-weight: 600;
+}
+
+.formatted-response-content h1 { font-size: 1.4rem; }
+.formatted-response-content h2 { font-size: 1.2rem; }
+.formatted-response-content h3 { font-size: 1.1rem; }
+.formatted-response-content h4 { font-size: 1rem; }
+
+.formatted-response-content p {
+    margin: 10px 0;
+    line-height: 1.6;
+}
+
+.formatted-response-content ul,
+.formatted-response-content ol {
+    margin: 10px 0;
+    padding-left: 20px;
+}
+
+.formatted-response-content li {
+    margin: 5px 0;
+}
+
+.formatted-response-content code {
+    background: #f1f3f4;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: 0.9em;
+    color: #d73a49;
+}
+
+.formatted-response-content pre {
+    background: #2d3748;
+    color: #e2e8f0;
+    padding: 15px;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 15px 0;
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.formatted-response-content blockquote {
+    border-left: 4px solid #007bff;
+    margin: 15px 0;
+    padding: 10px 15px;
+    background: #f8f9fa;
+    color: #495057;
+    font-style: italic;
+}
+
+/* 响应式设计 - 优化移动端体验 */
+@media (max-width: 1200px) {
+    #templatesGrid {
+        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
+        gap: var(--spacing-md) !important;
+    }
+
+    .search-filter-container {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+
+    .search-input-wrapper, .filter-wrapper {
+        min-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .templates-hero {
+        padding: var(--spacing-md) var(--spacing-md);
+    }
+
+    .templates-hero h1 {
+        font-size: 1.5rem;
+    }
+
+    .templates-hero p {
+        font-size: 1rem;
+    }
+
+    .templates-header {
+        flex-direction: column;
+        gap: var(--spacing-md);
+        align-items: stretch;
+    }
+
+    .templates-actions {
+        flex-direction: column;
+        width: 100%;
+        gap: var(--spacing-sm);
+    }
+
+    .templates-actions .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    #templatesGrid {
+        grid-template-columns: 1fr !important;
+        gap: var(--spacing-md) !important;
+    }
+
+    .template-preview {
+        height: 180px !important;
+    }
+
+    .template-preview-iframe {
+        transform: translate(-50%, -50%) scale(0.26) !important;
+    }
+
+    .template-actions {
+        flex-direction: column !important;
+        gap: 6px !important;
+    }
+
+    .btn-sm {
+        width: 100% !important;
+        text-align: center !important;
+        justify-content: center !important;
+    }
+
+    .modal-content {
+        width: 95% !important;
+        margin: 10px;
+        max-height: calc(100vh - 20px) !important;
+    }
+
+    .modal-body {
+        padding: 16px;
+    }
+
+    .search-filter-container {
+        padding: var(--spacing-sm);
+    }
+
+    .modal {
+        align-items: flex-start !important;
+        padding: 10px !important;
+    }
+}
+
+/* 分页样式 */
+.pagination-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-md);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+}
+
+.pagination-info {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.page-numbers {
+    display: flex;
+    gap: 4px;
+}
+
+.page-number {
+    padding: 6px 12px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+    background: #ffffff;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.85rem;
+    font-weight: 500;
+    min-width: 36px;
+    text-align: center;
+}
+
+.page-number:hover {
+    background: #f8f9fa;
+    border-color: #667eea;
+}
+
+.page-number.active {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+}
+
+.page-number.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.pagination-size {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.pagination-size label {
+    margin: 0;
+    font-weight: 500;
+}
+
+.pagination-size select {
+    padding: 4px 8px;
+    font-size: 0.85rem;
+}
+
+/* 响应式分页 */
+@media (max-width: 768px) {
+    .pagination-wrapper {
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--spacing-sm);
+    }
+
+    .pagination-controls {
+        justify-content: center;
+    }
+
+    .pagination-info,
+    .pagination-size {
+        text-align: center;
+    }
+
+    .page-numbers {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+}
+</style>
+
+<script>
+// Global variables
+let templates = [];
+let editingTemplateId = null;
+let currentPage = 1;
+let pageSize = 6; // 默认每页显示6个，更容易看到分页效果
+let totalPages = 1;
+let totalCount = 0;
+let currentSearch = '';
+let currentTag = '';
+
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    loadTemplates(1);
+    setupEventListeners();
+});
+
+function setupEventListeners() {
+    // Modal controls
+    document.getElementById('createTemplateBtn').addEventListener('click', () => openTemplateModal());
+    document.getElementById('generateWithAIBtn').addEventListener('click', () => openAIGenerationModal());
+    document.getElementById('closeModal').addEventListener('click', () => closeTemplateModal());
+    document.getElementById('closeAIModal').addEventListener('click', () => closeAIGenerationModal());
+    document.getElementById('closePreviewModal').addEventListener('click', () => closePreviewModal());
+    document.getElementById('cancelBtn').addEventListener('click', () => closeTemplateModal());
+    document.getElementById('cancelAIBtn').addEventListener('click', () => closeAIGenerationModal());
+
+    // AI生成相关按钮
+    document.getElementById('cancelGenerationBtn').addEventListener('click', () => {
+        // 取消生成并返回表单
+        document.getElementById('aiGenerationProgress').style.display = 'none';
+        document.getElementById('aiFormContainer').style.display = 'block';
+    });
+
+    document.getElementById('closeCompletionBtn').addEventListener('click', () => {
+        closeAIGenerationModal();
+        loadTemplates(1); // 刷新模板列表，回到第一页
+    });
+
+    // 新的模板预览和保存相关按钮
+    document.getElementById('saveGeneratedTemplateBtn').addEventListener('click', saveGeneratedTemplate);
+    document.getElementById('adjustTemplateBtn').addEventListener('click', adjustTemplate);
+    document.getElementById('regenerateTemplateBtn').addEventListener('click', () => {
+        // 重新生成模板 - 返回到表单
+        document.getElementById('aiGenerationComplete').style.display = 'none';
+        document.getElementById('aiFormContainer').style.display = 'block';
+
+        // 清理临时数据
+        if (window.generatedTemplateData) {
+            delete window.generatedTemplateData;
+        }
+    });
+
+    document.getElementById('fullPreviewBtn').addEventListener('click', () => {
+        if (window.generatedTemplateData && window.generatedTemplateData.html_template) {
+            showPreview(window.generatedTemplateData.html_template);
+        } else {
+            alert('没有可预览的模板');
+        }
+    });
+
+    // 调整输入框的回车键支持
+    document.getElementById('adjustmentInput').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            adjustTemplate();
+        }
+    });
+
+    // LLM响应查看功能
+    document.getElementById('toggleLLMResponseBtn').addEventListener('click', toggleLLMResponse);
+
+    // 响应标签切换功能已移除，只保留原始响应
+
+    // 复制响应内容
+    document.getElementById('copyResponseBtn').addEventListener('click', copyLLMResponse);
+
+    // Form submissions
+    document.getElementById('templateForm').addEventListener('submit', handleTemplateSubmit);
+    document.getElementById('aiGenerationForm').addEventListener('submit', handleAIGeneration);
+
+    // Preview button
+    document.getElementById('previewTemplateBtn').addEventListener('click', previewTemplate);
+
+    // Import functionality
+    document.getElementById('importTemplateInput').addEventListener('change', handleTemplateImport);
+
+    // Filters
+    document.getElementById('searchInput').addEventListener('input', debounce(handleSearch, 500));
+    document.getElementById('tagFilter').addEventListener('change', handleTagFilter);
+    document.getElementById('refreshBtn').addEventListener('click', () => loadTemplates(1));
+
+    // Pagination
+    document.getElementById('prevPageBtn').addEventListener('click', () => loadTemplates(currentPage - 1));
+    document.getElementById('nextPageBtn').addEventListener('click', () => loadTemplates(currentPage + 1));
+    document.getElementById('pageSizeSelect').addEventListener('change', handlePageSizeChange);
+
+    // Close modals when clicking outside
+    window.addEventListener('click', function(event) {
+        if (event.target.classList.contains('modal')) {
+            event.target.style.display = 'none';
+        }
+    });
+
+    // 初始化图片上传功能
+    initImageUpload();
+}
+
+async function loadTemplates(page = 1) {
+    showLoading(true);
+    try {
+        // Build query parameters
+        const params = new URLSearchParams({
+            active_only: 'true',
+            page: page.toString(),
+            page_size: pageSize.toString()
+        });
+
+        if (currentSearch) {
+            params.append('search', currentSearch);
+        }
+
+        if (currentTag) {
+            params.append('tags', currentTag);
+        }
+
+        const response = await fetch(`/api/global-master-templates/?${params}`);
+
+        if (!response.ok) {
+            throw new Error('Failed to load templates');
+        }
+
+        const data = await response.json();
+        templates = data.templates;
+
+        // Update pagination info
+        currentPage = data.pagination.current_page;
+        totalPages = data.pagination.total_pages;
+        totalCount = data.pagination.total_count;
+
+
+
+        renderTemplates(templates);
+        updatePagination();
+        updateTagFilter();
+    } catch (error) {
+        console.error('Error loading templates:', error);
+        alert('加载模板失败: ' + error.message);
+    } finally {
+        showLoading(false);
+    }
+}
+
+function renderTemplates(templatesToRender) {
+    const grid = document.getElementById('templatesGrid');
+
+    if (templatesToRender.length === 0) {
+        grid.innerHTML = `
+            <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #666;">
+                <h3>暂无模板</h3>
+                <p>点击"新建模板"或"AI生成模板"来创建第一个模板</p>
+            </div>
+        `;
+        return;
+    }
+    
+    grid.innerHTML = templatesToRender.map((template, index) => `
+        <div class="template-card" data-template-id="${template.id}">
+            <div class="template-preview" id="preview-${template.id}">
+                <iframe
+                    class="template-preview-iframe"
+                    id="iframe-${template.id}"
+                    onload="adjustIframeContent(${template.id})"
+                ></iframe>
+                <div class="preview-overlay" onclick="previewTemplateById(${template.id})" title="点击查看完整预览">
+                    <div class="preview-overlay-text"><i class="fas fa-search-plus"></i> 点击放大预览</div>
+                </div>
+            </div>
+            <div class="template-info">
+                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
+                    <h4 style="margin: 0; color: #2c3e50; font-size: 16px;">${template.template_name}</h4>
+                    ${template.is_default ? '<span class="default-badge">默认</span>' : ''}
+                </div>
+                <p style="margin: 0 0 8px 0; color: #666; font-size: 14px; line-height: 1.4;">${template.description || '暂无描述'}</p>
+                <div style="margin-bottom: 8px;">
+                    ${template.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+                </div>
+                <div style="font-size: 12px; color: #999;">
+                    使用次数: ${template.usage_count} | 创建者: ${template.created_by}
+                </div>
+            </div>
+            <div class="template-actions">
+                <button class="btn btn-sm btn-primary" onclick="editTemplate(${template.id})">✏️ 编辑</button>
+                <button class="btn btn-sm btn-warning" onclick="duplicateTemplate(${template.id})">📋 复制</button>
+                <button class="btn btn-sm" style="background: #17a2b8; color: white;" onclick="exportTemplate(${template.id})">� 导出</button>
+                ${!template.is_default ?
+                    `<button class="btn btn-sm btn-success" onclick="setDefaultTemplate(${template.id})">⭐ 设为默认</button>` :
+                    ''
+                }
+                ${!template.is_default ?
+                    `<button class="btn btn-sm btn-danger" onclick="deleteTemplate(${template.id})">🗑️ 删除</button>` :
+                    ''
+                }
+            </div>
+        </div>
+    `).join('');
+
+    // Load template content into iframes after rendering
+    setTimeout(() => {
+        console.log('Starting to load template previews for', templatesToRender.length, 'templates');
+        templatesToRender.forEach(template => {
+            console.log('Loading preview for template:', template.id, template.template_name);
+            loadTemplatePreview(template.id);
+        });
+    }, 500);
+}
+
+async function loadTemplatePreview(templateId) {
+    try {
+        console.log('Loading preview for template', templateId);
+        const response = await fetch('/api/global-master-templates/' + templateId);
+        if (!response.ok) {
+            console.warn('Failed to load template', templateId, 'for preview');
+            showPreviewFallback(templateId);
+            return;
+        }
+
+        const template = await response.json();
+        const iframe = document.getElementById('iframe-' + templateId);
+
+        console.log('Template', templateId, 'loaded:', template.template_name);
+
+        if (iframe && template.html_template && template.html_template.trim()) {
+            console.log('Setting up iframe for template', templateId);
+
+            // 使用实际的模板HTML内容，但添加一些示例数据
+            let previewHtml = template.html_template;
+
+            // 替换模板变量为示例内容
+            previewHtml = previewHtml.replace(/\{\{\s*title\s*\}\}/g, template.template_name);
+            previewHtml = previewHtml.replace(/\{\{\s*content\s*\}\}/g, '这是模板预览内容');
+            previewHtml = previewHtml.replace(/\{\{\s*slide_number\s*\}\}/g, '1');
+            previewHtml = previewHtml.replace(/\{\{\s*total_slides\s*\}\}/g, '1');
+
+            // 确保HTML有基本结构
+            if (!previewHtml.includes('<!DOCTYPE') && !previewHtml.includes('<html')) {
+                previewHtml = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body { width: 1280px; height: 720px; margin: 0; padding: 0; overflow: hidden; }
+    </style>
+</head>
+<body>
+    ${previewHtml}
+</body>
+</html>`;
+            }
+
+            // Create a blob URL for the HTML content
+            const blob = new Blob([previewHtml], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+
+            // Set up load handlers
+            iframe.onload = function() {
+                console.log('Iframe loaded successfully for template', templateId);
+                setTimeout(function() {
+                    URL.revokeObjectURL(url);
+                }, 2000);
+            };
+
+            iframe.onerror = function() {
+                console.warn('Iframe failed to load for template', templateId);
+                showPreviewFallback(templateId);
+                URL.revokeObjectURL(url);
+            };
+
+            // Set the src to trigger loading
+            iframe.src = url;
+
+        } else {
+            console.warn('No HTML template content for template', templateId);
+            showPreviewFallback(templateId);
+        }
+    } catch (error) {
+        console.error('Error loading preview for template', templateId, ':', error);
+        showPreviewFallback(templateId);
+    }
+}
+
+function showPreviewFallback(templateId) {
+    const previewContainer = document.getElementById(`preview-${templateId}`);
+    if (previewContainer) {
+        previewContainer.innerHTML = `
+            <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 14px; flex-direction: column;">
+                <div style="font-size: 24px; margin-bottom: 8px;">📄</div>
+                <div>暂无预览</div>
+            </div>
+        `;
+    }
+}
+
+function adjustIframeContent(templateId) {
+    // This function can be used to adjust iframe content after loading if needed
+    // Currently just a placeholder for future enhancements
+}
+
+// 导出模板功能 - 在HTML中定义以便onclick可以访问
+async function exportTemplate(templateId) {
+    try {
+        const response = await fetch(`/api/global-master-templates/${templateId}`);
+        if (!response.ok) {
+            throw new Error('Failed to load template');
+        }
+
+        const template = await response.json();
+
+        // 准备导出数据
+        const exportData = {
+            template_name: template.template_name,
+            description: template.description,
+            html_template: template.html_template,
+            tags: template.tags,
+            is_default: false, // 导出时不保留默认状态
+            export_info: {
+                exported_at: new Date().toISOString(),
+                original_id: template.id,
+                original_created_at: template.created_at
+            }
+        };
+
+        // 创建下载链接
+        const dataStr = JSON.stringify(exportData, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(dataBlob);
+        link.download = `${template.template_name}_${new Date().toISOString().split('T')[0]}.json`;
+
+        // 触发下载
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // 清理URL
+        setTimeout(() => {
+            URL.revokeObjectURL(link.href);
+        }, 1000);
+
+        console.log('模板导出成功:', template.template_name);
+
+    } catch (error) {
+        console.error('Error exporting template:', error);
+        alert('导出模板失败: ' + error.message);
+    }
+}
+
+// 其他需要在HTML中定义的函数，以便onclick可以访问
+function editTemplate(templateId) {
+    openTemplateModal(templateId);
+}
+
+// AI生成模态框相关函数
+function openAIGenerationModal() {
+    const modal = document.getElementById('aiGenerationModal');
+    modal.style.display = 'block';
+
+    // 重置表单
+    document.getElementById('aiGenerationForm').reset();
+    document.getElementById('aiFormContainer').style.display = 'block';
+    document.getElementById('aiGenerationProgress').style.display = 'none';
+    document.getElementById('aiGenerationComplete').style.display = 'none';
+
+    // 清除上传的图片
+    if (typeof clearUploadedImage === 'function') {
+        clearUploadedImage();
+    }
+
+    // 重新初始化图片上传功能
+    setTimeout(() => {
+        if (typeof initImageUpload === 'function') {
+            initImageUpload();
+        }
+
+        // 确保初始状态正确
+        const imageUploadArea = document.getElementById('imageUploadArea');
+        const textOnlyRadio = document.querySelector('input[name="generation_mode"][value="text_only"]');
+        if (imageUploadArea && textOnlyRadio && textOnlyRadio.checked) {
+            imageUploadArea.style.display = 'none';
+        }
+    }, 200);
+}
+
+function closeAIGenerationModal() {
+    const modal = document.getElementById('aiGenerationModal');
+    modal.style.display = 'none';
+
+    // 清理数据
+    clearUploadedImage();
+    if (window.generatedTemplateData) {
+        delete window.generatedTemplateData;
+    }
+}
+
+// LLM响应查看功能
+function toggleLLMResponse() {
+    const container = document.getElementById('llmResponseContainer');
+    const btn = document.getElementById('toggleLLMResponseBtn');
+
+    if (container.style.display === 'none') {
+        container.style.display = 'block';
+        btn.textContent = '📋 隐藏响应';
+        btn.classList.remove('btn-outline-info');
+        btn.classList.add('btn-info');
+    } else {
+        container.style.display = 'none';
+        btn.textContent = '📋 查看完整响应';
+        btn.classList.remove('btn-info');
+        btn.classList.add('btn-outline-info');
+    }
+}
+
+// 标签切换功能已移除，只保留原始响应显示
+
+function copyLLMResponse() {
+    // 复制原始响应
+    const rawCode = document.getElementById('rawResponseCode');
+    const textToCopy = rawCode ? rawCode.textContent : '';
+
+    if (textToCopy && textToCopy !== '暂无AI响应数据（模板已保存）') {
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            // 临时改变按钮文本以显示成功
+            const btn = document.getElementById('copyResponseBtn');
+            const originalText = btn.textContent;
+            btn.textContent = '✅ 已复制';
+            btn.classList.remove('btn-outline-secondary');
+            btn.classList.add('btn-success');
+
+            setTimeout(() => {
+                btn.textContent = originalText;
+                btn.classList.remove('btn-success');
+                btn.classList.add('btn-outline-secondary');
+            }, 2000);
+        }).catch(err => {
+            console.error('复制失败:', err);
+            alert('复制失败，请手动选择文本复制');
+        });
+    } else {
+        alert('暂无可复制的响应内容');
+    }
+}
+
+// LLM响应处理函数已移至global_master_templates.js文件中
+
+async function duplicateTemplate(templateId) {
+    const newName = prompt('请输入新模板的名称:');
+    if (!newName || !newName.trim()) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/global-master-templates/${templateId}/duplicate?new_name=${encodeURIComponent(newName.trim())}`, {
+            method: 'POST'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to duplicate template');
+        }
+
+        loadTemplates(currentPage);
+        alert('模板复制成功！');
+    } catch (error) {
+        console.error('Error duplicating template:', error);
+        alert('复制模板失败: ' + error.message);
+    }
+}
+
+async function setDefaultTemplate(templateId) {
+    if (!confirm('确定要将此模板设为默认模板吗？')) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/global-master-templates/${templateId}/set-default`, {
+            method: 'POST'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to set default template');
+        }
+
+        loadTemplates(currentPage);
+        alert('默认模板设置成功！');
+    } catch (error) {
+        console.error('Error setting default template:', error);
+        alert('设置默认模板失败: ' + error.message);
+    }
+}
+
+async function deleteTemplate(templateId) {
+    if (!confirm('确定要删除此模板吗？此操作不可恢复。')) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/global-master-templates/${templateId}`, {
+            method: 'DELETE'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to delete template');
+        }
+
+        // 如果删除后当前页没有数据且不是第一页，则回到上一页
+        const shouldGoToPrevPage = templates.length === 1 && currentPage > 1;
+        loadTemplates(shouldGoToPrevPage ? currentPage - 1 : currentPage);
+        alert('模板删除成功！');
+    } catch (error) {
+        console.error('Error deleting template:', error);
+        alert('删除模板失败: ' + error.message);
+    }
+}
+
+async function previewTemplateById(templateId) {
+    try {
+        const response = await fetch(`/api/global-master-templates/${templateId}/preview`);
+        if (!response.ok) {
+            throw new Error('Failed to load template preview');
+        }
+
+        const data = await response.json();
+        showPreview(data.html_template);
+    } catch (error) {
+        console.error('Error loading template preview:', error);
+        alert('加载预览失败: ' + error.message);
+    }
+}
+
+function showPreview(htmlContent) {
+    const modal = document.getElementById('previewModal');
+    const frame = document.getElementById('previewFrame');
+
+    // Create blob URL for the HTML content
+    const blob = new Blob([htmlContent], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+
+    frame.src = url;
+    modal.style.display = 'flex';
+
+    // Clean up the blob URL after a delay
+    setTimeout(() => {
+        URL.revokeObjectURL(url);
+    }, 1000);
+}
+
+// Pagination functions
+function updatePagination() {
+    const paginationContainer = document.getElementById('paginationContainer');
+    const paginationInfo = document.getElementById('paginationInfo');
+    const prevBtn = document.getElementById('prevPageBtn');
+    const nextBtn = document.getElementById('nextPageBtn');
+    const pageNumbers = document.getElementById('pageNumbers');
+    // Always show pagination if there are templates
+    if (totalCount > 0) {
+        paginationContainer.style.display = 'block';
+    } else {
+        paginationContainer.style.display = 'none';
+        return;
+    }
+
+    // Update info
+    const startItem = totalCount > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+    const endItem = Math.min(currentPage * pageSize, totalCount);
+    paginationInfo.textContent = `显示第 ${startItem}-${endItem} 项，共 ${totalCount} 项`;
+
+    // Update buttons
+    prevBtn.disabled = currentPage <= 1;
+    nextBtn.disabled = currentPage >= totalPages;
+
+    // Generate page numbers (only if more than 1 page)
+    if (totalPages > 1) {
+        generatePageNumbers(pageNumbers);
+        pageNumbers.style.display = 'flex';
+    } else {
+        pageNumbers.style.display = 'none';
+    }
+}
+
+function generatePageNumbers(container) {
+    container.innerHTML = '';
+
+    const maxVisiblePages = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+    // Adjust start page if we're near the end
+    if (endPage - startPage + 1 < maxVisiblePages) {
+        startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+
+    // Add first page and ellipsis if needed
+    if (startPage > 1) {
+        addPageNumber(container, 1);
+        if (startPage > 2) {
+            addEllipsis(container);
+        }
+    }
+
+    // Add visible page numbers
+    for (let i = startPage; i <= endPage; i++) {
+        addPageNumber(container, i);
+    }
+
+    // Add ellipsis and last page if needed
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) {
+            addEllipsis(container);
+        }
+        addPageNumber(container, totalPages);
+    }
+}
+
+function addPageNumber(container, pageNum) {
+    const pageBtn = document.createElement('button');
+    pageBtn.className = `page-number ${pageNum === currentPage ? 'active' : ''}`;
+    pageBtn.textContent = pageNum;
+    pageBtn.onclick = () => loadTemplates(pageNum);
+    container.appendChild(pageBtn);
+}
+
+function addEllipsis(container) {
+    const ellipsis = document.createElement('span');
+    ellipsis.className = 'page-number disabled';
+    ellipsis.textContent = '...';
+    container.appendChild(ellipsis);
+}
+
+function handleSearch() {
+    currentSearch = document.getElementById('searchInput').value.trim();
+    loadTemplates(1); // Reset to first page when searching
+}
+
+function handleTagFilter() {
+    currentTag = document.getElementById('tagFilter').value;
+    loadTemplates(1); // Reset to first page when filtering
+}
+
+function handlePageSizeChange() {
+    pageSize = parseInt(document.getElementById('pageSizeSelect').value);
+    loadTemplates(1); // Reset to first page when changing page size
+}
+
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// 简单的代码高亮函数
+function highlightCode() {
+    const codeBlocks = document.querySelectorAll('pre code');
+    codeBlocks.forEach(block => {
+        const language = block.className.replace('language-', '');
+        if (language === 'html' || language === 'xml') {
+            highlightHTML(block);
+        } else if (language === 'css') {
+            highlightCSS(block);
+        } else if (language === 'javascript' || language === 'js') {
+            highlightJS(block);
+        }
+    });
+}
+
+function highlightHTML(block) {
+    let html = block.textContent;
+    // HTML标签
+    html = html.replace(/(&lt;\/?)([a-zA-Z][a-zA-Z0-9]*)(.*?)(&gt;)/g,
+        '$1<span style="color: #e06c75;">$2</span>$3$4');
+    // 属性名
+    html = html.replace(/(\s)([a-zA-Z-]+)(=)/g,
+        '$1<span style="color: #d19a66;">$2</span>$3');
+    // 属性值
+    html = html.replace(/(=)(".*?")/g,
+        '$1<span style="color: #98c379;">$2</span>');
+    block.innerHTML = html;
+}
+
+function highlightCSS(block) {
+    let css = block.textContent;
+    // 选择器
+    css = css.replace(/^([^{]+)(\{)/gm,
+        '<span style="color: #e06c75;">$1</span>$2');
+    // 属性名
+    css = css.replace(/(\s+)([a-zA-Z-]+)(:)/g,
+        '$1<span style="color: #d19a66;">$2</span>$3');
+    // 属性值
+    css = css.replace(/(:)([^;]+)(;)/g,
+        '$1<span style="color: #98c379;">$2</span>$3');
+    block.innerHTML = css;
+}
+
+function highlightJS(block) {
+    let js = block.textContent;
+    // 关键字
+    const keywords = ['function', 'var', 'let', 'const', 'if', 'else', 'for', 'while', 'return', 'class', 'extends'];
+    keywords.forEach(keyword => {
+        const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
+        js = js.replace(regex, '<span style="color: #c678dd;">$1</span>');
+    });
+    // 字符串
+    js = js.replace(/('.*?'|".*?")/g, '<span style="color: #98c379;">$1</span>');
+    // 注释
+    js = js.replace(/(\/\/.*$)/gm, '<span style="color: #5c6370;">$1</span>');
+    block.innerHTML = js;
+}
+</script>
+
+<script src="/static/js/global_master_templates.js"></script>
+{% endblock %}