{% extends "base.html" %}

{% block title %}系统设置 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    /* 深色主题设置页 */
    .settings-page { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; min-height: calc(100vh - 190px); color: #1f2937; }
    .settings-page .tab-nav { display: flex; gap: 0; border-bottom: 1px solid #e5e7eb; overflow-x: auto; }
    .settings-page .tab-group-label {
        display: inline-flex; align-items: center; padding: 12px 14px 12px 6px;
        font-size: 12px; font-weight: 600; color: #9ca3af; white-space: nowrap;
        border-bottom: 2px solid transparent;
    }
    .settings-page .tab-btn {
        padding: 12px 24px; font-size: 15px; cursor: pointer; border: none;
        background: transparent; color: #6b7280; border-bottom: 2px solid transparent;
        transition: all 0.2s; flex: 0 0 auto; white-space: nowrap;
    }
    .settings-page .tab-btn:hover { color: #1f2937; }
    .settings-page .tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; }
    .settings-page .tab-content { display: none; padding: 24px 0; }
    .settings-page .tab-content.active { display: block; }
    .profile-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .password-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    @media (max-width: 720px) {
        .settings-page .tab-btn { padding: 12px 14px; }
        .profile-edit-grid, .password-edit-grid { grid-template-columns: 1fr; }
    }

    /* 面板 */
    .settings-panel {
        background: #ffffff; border-radius: 12px; padding: 24px;
        border: 1px solid #e5e7eb; margin-bottom: 20px;
    }
    .settings-panel-title {
        font-size: 18px; font-weight: 600; color: #111827;
        border-left: 3px solid #3b82f6; padding-left: 12px; margin-bottom: 20px;
    }

    /* 分类筛选 */
    .category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .category-tab {
        padding: 6px 16px; border-radius: 20px; font-size: 13px; cursor: pointer;
        background: transparent; color: #6b7280; border: 1px solid #e5e7eb; transition: all 0.2s;
    }
    .category-tab:hover { border-color: #3b82f6; color: #3b82f6; }
    .category-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    /* 表格 */
    .settings-table { width: 100%; border-collapse: collapse; }
    .settings-table th {
        text-align: left; padding: 12px 16px; font-size: 13px; color: #374151;
        border-bottom: 1px solid #e5e7eb; font-weight: 500;
    }
    .settings-table td {
        padding: 14px 16px; font-size: 14px; border-bottom: 1px solid #e5e7eb;
        vertical-align: middle;
    }
    .settings-table tr:hover td { background: rgba(56, 189, 248, 0.03); }

    /* 标签 */
    .tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
    .tag-system { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .tag-category { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
    .tag-success { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
    .tag-failed { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .tag-pending { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
    .tag-image { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
    .tag-video { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .tag-audio { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
    .tag-text { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }

    /* 按钮 */
    .btn-settings {
        padding: 8px 20px; border-radius: 8px; font-size: 14px; cursor: pointer;
        border: none; transition: all 0.2s; font-weight: 500;
    }
    .btn-primary-settings { background: #2563eb; color: #fff; }
    .btn-primary-settings:hover { background: #1d4ed8; }
    .btn-outline-settings {
        background: transparent; color: #6b7280; border: 1px solid #d1d5db;
    }
    .btn-outline-settings:hover { border-color: #6b7280; color: #1f2937; }
    .btn-danger-settings { background: #ef4444; color: #fff; }
    .btn-danger-settings:hover { background: #dc2626; }
    .btn-ghost { background: transparent; color: #6b7280; border: none; padding: 4px 8px; }
    .btn-ghost:hover { color: #1f2937; }

    /* 开关 */
    .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
        position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
        background: #d1d5db; border-radius: 26px; transition: 0.3s;
    }
    .toggle-slider:before {
        content: ""; position: absolute; height: 20px; width: 20px;
        left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s;
    }
    .toggle-switch input:checked + .toggle-slider { background: #2563eb; }
    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }

    /* 分页 */
    .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
    .pagination button {
        padding: 6px 12px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: transparent; color: #6b7280; cursor: pointer; font-size: 13px;
    }
    .pagination button.active { background: #2563eb; color: #fff; border-color: #2563eb; }
    .pagination button:hover:not(.active) { border-color: #2563eb; color: #3b82f6; }
    .pagination select {
        padding: 6px 8px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #ffffff; color: #1f2937; font-size: 13px;
    }

    /* 弹窗 */
    .modal-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
        z-index: 100; align-items: center; justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal-content {
        background: #ffffff; border-radius: 12px; padding: 28px; width: 90%;
        max-width: 640px; max-height: 85vh; overflow-y: auto; border: 1px solid #e5e7eb;
    }
    .modal-content h2 { color: #111827; font-size: 20px; margin-bottom: 20px; }
    .modal-content label { display: block; color: #6b7280; font-size: 13px; margin-bottom: 6px; margin-top: 14px; }
    .modal-content label .required { color: #ef4444; }
    .modal-content input, .modal-content select, .modal-content textarea {
        width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;
    }
    .modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus {
        border-color: #2563eb;
    }
    .modal-content textarea { font-family: monospace; min-height: 120px; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

    /* ===== UI 精修：统一设计语言 ===== */
    .settings-panel { border-radius: 14px; }
    .settings-page .tab-btn { border-radius: 10px 10px 0 0; font-weight: 500; }
    .settings-page .tab-btn:hover { color: #1f2937; background: rgba(59,130,246,0.05); }
    .modal-content { border-radius: 16px; }
    </style>
{% endblock %}

{% block content %}
<div class="settings-page">
    {% if current_user and current_user.role != 'admin' %}
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:12px 16px;margin-bottom:16px;">
        <div style="font-size:13px;color:#1e40af;">
            当前身份：{{ current_user.role }}。会员权限需要管理员审批。
        </div>
        <div style="display:flex;gap:10px;">
            <button class="btn-settings btn-outline-settings" onclick="applyUpgrade('member')">申请会员</button>
        </div>
    </div>
    {% endif %}
    <!-- Tab导航 -->
    <div class="tab-nav">
        <span class="tab-group-label">个人设置</span>
        <button class="tab-btn active" onclick="switchTab('profile', this)">用户个人信息</button>
        <button class="tab-btn" onclick="switchTab('llm', this)">大模型配置</button>
        <button class="tab-btn" onclick="switchTab('logs', this)">调用日志</button>
        <button class="tab-btn" onclick="switchTab('feishu', this)">飞书知识库</button>
        <button class="tab-btn" onclick="switchTab('general', this)">通用设置</button>
        {% if current_user and current_user.role == 'admin' %}
        <span class="tab-group-label" id="admin-settings-label">管理员设置</span>
        <button class="tab-btn" onclick="switchTab('users', this)">用户管理</button>
        <button class="tab-btn" onclick="switchTab('coze', this)">Coze工作流</button>
        <button class="tab-btn" onclick="switchTab('prompts', this)">提示词 Prompt</button>
        <button class="tab-btn" onclick="switchTab('sensitive', this)">敏感词管理</button>
        <button class="tab-btn" onclick="switchTab('aigc', this)">AIGC设置</button>
        {% endif %}
    </div>

    <!-- 用户个人信息 Tab -->
    <div id="tab-profile" class="tab-content active">
        <div class="settings-panel">
            <div class="settings-panel-title">用户个人信息</div>
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;">
                <div style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px;">
                    <div style="font-size:12px;color:#6b7280;">账号</div>
                    <div id="profile-username" style="font-weight:600;margin-top:4px;">-</div>
                </div>
                <div style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px;">
                    <div style="font-size:12px;color:#6b7280;">注册时间</div>
                    <div id="profile-created" style="font-weight:600;margin-top:4px;">-</div>
                </div>
                <div style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px;">
                    <div style="font-size:12px;color:#6b7280;">有效期</div>
                    <div id="profile-expires" style="font-weight:600;margin-top:4px;">长期</div>
                </div>
                <div style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px;">
                    <div style="font-size:12px;color:#6b7280;">账号角色</div>
                    <div id="profile-role" style="font-weight:600;margin-top:4px;">-</div>
                </div>
            </div>
            <div class="profile-edit-grid">
                <div>
                    <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">昵称</label>
                    <input id="profile-nickname" type="text" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;">
                </div>
                <div>
                    <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">邮箱</label>
                    <input id="profile-email" type="email" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;">
                </div>
            </div>
            <div style="margin-top:14px;">
                <button class="btn-settings btn-primary-settings" onclick="savePersonalProfile()">保存个人信息</button>
                <span id="profile-save-msg" style="font-size:12px;color:#10b981;margin-left:12px;"></span>
            </div>
        </div>
        <div class="settings-panel">
            <div class="settings-panel-title">修改密码</div>
            <div class="password-edit-grid">
                <input id="desktop-current-pass" type="password" placeholder="当前密码" style="padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;">
                <input id="desktop-new-pass" type="password" placeholder="新密码，至少6位" style="padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;">
                <input id="desktop-confirm-pass" type="password" placeholder="确认新密码" style="padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;">
            </div>
            <div style="margin-top:14px;">
                <button class="btn-settings btn-outline-settings" onclick="changePersonalPassword()">修改密码</button>
                <span id="password-change-msg" style="font-size:12px;color:#10b981;margin-left:12px;"></span>
            </div>
        </div>
    </div>

    <!-- 用户管理 Tab -->
    <div id="tab-users" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div>
                <div class="settings-panel-title" style="margin-bottom:8px;">用户管理</div>
                <div style="font-size:13px;color:#6b7280;">注册用户可自行注册；会员与管理员授权由管理员完成。</div>
            </div>
            <button class="btn-settings btn-outline-settings" onclick="loadUsers()">刷新</button>
        </div>
        <div class="settings-panel" style="padding:0;overflow:hidden;">
            <table class="settings-table">
                <thead>
                    <tr>
                        <th>用户</th>
                        <th>角色</th>
                        <th>待审批</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="user-list">
                    <tr><td colspan="6" style="text-align:center;color:#6b7280;padding:40px;">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 大模型配置 Tab -->
    <div id="tab-llm" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">大模型配置</div>
            <button class="btn-settings btn-primary-settings" onclick="openAddLLMModal()">+ 添加配置</button>
        </div>
        <div id="llm-subtabs" class="category-tabs" style="margin-bottom:20px;">
            <button class="category-tab active" onclick="switchLLMType('text', this)">语言大模型</button>
            <button class="category-tab" onclick="switchLLMType('image', this)">图片大模型</button>
            <button class="category-tab" onclick="switchLLMType('video', this)">视频大模型</button>
            <button class="category-tab" onclick="switchLLMType('audio', this)">语音大模型</button>
        </div>

        <!-- 大模型参考链接 -->
        <div class="settings-panel" style="margin-bottom:20px;">
            <div style="font-size:15px;font-weight:600;color:#111827;">
                <span style="margin-right:8px;">🔗</span>大模型参考链接
            </div>
            <div style="margin-top:12px;">
                <a href="https://my.feishu.cn/docx/HPY7dXkolovnS5x1lvFc4LlZnqg?from=from_copylink"
                   target="_blank" rel="noopener"
                   style="color:#2563eb;font-size:14px;text-decoration:underline;">
                    https://my.feishu.cn/docx/HPY7dXkolovnS5x1lvFc4LlZnqg?from=from_copylink
                </a>
            </div>
        </div>

        <div id="llm-list"></div>
    </div>

    <!-- 提示词 Prompt Tab（提示词模板 + Skill 提示词库统一管理） -->
    <div id="tab-prompts" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
            <div>
                <div class="settings-panel-title" style="margin-bottom:6px;">提示词 Prompt</div>
                <div style="font-size:13px;color:#6b7280;">提示词模板与 Skill 提示词库统一管理，按业务域分页；重复/低质量提示词可先标注，人工确认后再删除。</div>
            </div>
            <div style="display:flex;gap:12px;">
                <button class="btn-settings btn-outline-settings" onclick="loadPromptCenter()">刷新</button>
                <button class="btn-settings btn-primary-settings" onclick="openPromptCenterModal()">+ 新建提示词</button>
            </div>
        </div>
        <div id="prompt-domain-tabs" class="category-tabs"></div>
        <div class="settings-panel" style="margin:16px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;">
            <div>
                <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">分类</label>
                <select id="prompt-category-filter" onchange="loadPromptCenter()" class="category-tab" style="padding:8px 12px;">
                    <option value="">全部分类</option>
                </select>
            </div>
            <div style="flex:1;min-width:220px;">
                <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">搜索</label>
                <input type="text" id="prompt-search-input" placeholder="搜索名称/分类/说明"
                       onkeyup="promptSearchDebounce()"
                       style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#ffffff;color:#1f2937;font-size:13px;outline:none;">
            </div>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#1f2937;padding-bottom:8px;">
                <input type="checkbox" id="prompt-marked-only" onchange="loadPromptCenter()"> 只看已标注
            </label>
        </div>
        <div id="prompt-duplicates-panel" class="settings-panel" style="margin-bottom:16px;"></div>
        <div id="prompt-list" class="settings-panel" style="padding:0;overflow:hidden;"></div>
    </div>

    <!-- 提示词模板 Tab（保留兼容） -->
    <div id="tab-templates" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">提示词模板管理</div>
            <button class="btn-settings btn-primary-settings" onclick="openAddTemplateModal()">+ 新建模板</button>
        </div>
        <div id="template-category-tabs" class="category-tabs"></div>
        <div id="template-list"></div>
    </div>

    <!-- Skill提示词库 Tab -->
    <div id="tab-skills" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">Skill提示词库</div>
            <div style="display:flex;gap:12px;">
                <button class="btn-settings btn-outline-settings" onclick="exportSkills()">导出全部</button>
                <button class="btn-settings btn-primary-settings" onclick="openAddSkillModal()">+ 新增Skill</button>
            </div>
        </div>
        <!-- 筛选栏 -->
        <div class="settings-panel" style="margin-bottom:16px;">
            <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;">
                <div>
                    <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">分类</label>
                    <select id="skill-category-filter" onchange="loadSkills()" class="category-tab" style="padding:8px 12px;">
                        <option value="">全部分类</option>
                        <option value="ecommerce">电商</option>
                        <option value="comic_drama">漫剧</option>
                        <option value="ai_workshop">自媒体</option>
                        <option value="general">通用</option>
                    </select>
                </div>
                <div style="flex:1;min-width:200px;">
                    <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">搜索</label>
                    <input type="text" id="skill-search-input" placeholder="搜索Skill名称或标签"
                           onkeyup="skillSearchDebounce()"
                           style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#ffffff;color:#1f2937;font-size:13px;outline:none;">
                </div>
            </div>
        </div>
        <div id="skills-container" class="settings-panel" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;"></div>
    </div>

    <!-- 调用日志 Tab -->
    <div id="tab-logs" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">调用日志列表</div>
            <div style="display:flex;gap:12px;">
                <button class="btn-settings btn-outline-settings" onclick="loadCallLogStats();loadCallLogs();">刷新</button>
                <button class="btn-settings btn-danger-settings" onclick="clearCallLogs()">清空日志</button>
            </div>
        </div>
        <!-- 统计面板 -->
        <div class="settings-panel" style="margin-bottom:16px;">
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;">
                <div>
                    <div style="font-size:12px;color:#6b7280;">总调用</div>
                    <div id="log-stat-total" style="font-size:22px;font-weight:700;color:#3b82f6;margin-top:4px;">-</div>
                </div>
                <div>
                    <div style="font-size:12px;color:#6b7280;">成功率</div>
                    <div id="log-stat-rate" style="font-size:22px;font-weight:700;color:#10b981;margin-top:4px;">-</div>
                </div>
                <div>
                    <div style="font-size:12px;color:#6b7280;">今日调用</div>
                    <div id="log-stat-today" style="font-size:22px;font-weight:700;color:#111827;margin-top:4px;">-</div>
                </div>
                <div>
                    <div style="font-size:12px;color:#6b7280;">总耗时</div>
                    <div id="log-stat-duration" style="font-size:22px;font-weight:700;color:#111827;margin-top:4px;">-</div>
                </div>
                <div>
                    <div style="font-size:12px;color:#6b7280;">平均耗时</div>
                    <div id="log-stat-avg" style="font-size:22px;font-weight:700;color:#111827;margin-top:4px;">-</div>
                </div>
            </div>
            <div id="log-task-breakdown" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;border-top:1px solid #ffffff;padding-top:12px;"></div>
        </div>
        <div id="log-category-tabs" class="category-tabs"></div>
        <div id="log-list"></div>
        <div id="log-pagination" class="pagination"></div>
    </div>

    <!-- 飞书知识库 Tab -->
    <div id="tab-feishu" class="tab-content">
        <div style="max-width: 900px; margin: 0 auto;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
                <div class="settings-panel-title" style="margin-bottom:0;">飞书知识库配置</div>
                <span id="feishu-status-badge" class="tag tag-pending">未配置</span>
            </div>

            <!-- 群机器人中转方案说明 -->
            <div class="settings-panel" style="margin-bottom: 24px;">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
                    <span style="font-size:18px;">🤖</span>
                    <span style="font-size:16px;font-weight:600;color:#111827;">群机器人中转方案（推荐）</span>
                    <span class="tag tag-success">图形界面 · 无需写API</span>
                </div>
                <div style="background: linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(14, 165, 233, 0.04)); border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px;">
                    <div style="font-size:13px; color:#4b5563; line-height: 2;">
                        <div><span style="color:#3b82f6;font-weight:600;">①</span> 在飞书客户端新建一个<span style="color:#fbbf24;">普通群聊</span></div>
                        <div><span style="color:#3b82f6;font-weight:600;">②</span> 群设置 → 添加机器人 → 搜索自建应用 <code style="background:#f1f5f9;padding:1px 8px;border-radius:4px;color:#f87171;">mytools-video</code>，添加为群机器人（⚠️ 不要选自定义机器人）</div>
                        <div><span style="color:#3b82f6;font-weight:600;">③</span> 打开目标知识库 → 设置 → 成员设置 → 添加成员 → 搜索这个<span style="color:#fbbf24;">群聊</span>，把整个群加入知识库</div>
                        <div><span style="color:#3b82f6;font-weight:600;">④</span> 给群分配角色：<b style="color:#34d399;">管理员 / 可编辑 / 只读</b>（至少需要「只读」）</div>
                        <div><span style="color:#3b82f6;font-weight:600;">⑤</span> 群内的机器人 mytools-video 继承群的知识库权限，<code style="background:#f1f5f9;padding:1px 8px;border-radius:4px;color:#3b82f6;">tenant_access_token</code> 即可读写知识库</div>
                    </div>
                </div>
            </div>

            <!-- 权限清单 -->
            <div class="settings-panel" style="margin-bottom: 24px;">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
                    <span style="font-size:18px;">🔑</span>
                    <span style="font-size:16px;font-weight:600;color:#111827;">应用权限配置</span>
                    <span style="font-size:12px;color:#6b7280;">在 <a href="https://open.feishu.cn/app" target="_blank" style="color:#3b82f6;">飞书开放平台</a> → 权限管理中开通</span>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div style="display:flex;align-items:center;gap:12px;background:#f1f5f9;border-radius:8px;padding:14px 16px;border:1px solid #ffffff;">
                        <code style="background:#dbeafe;color:#3b82f6;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;">wiki:wiki:readonly</code>
                        <span style="font-size:13px;color:#6b7280;">知识库读取</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;background:#f1f5f9;border-radius:8px;padding:14px 16px;border:1px solid #ffffff;">
                        <code style="background:#dbeafe;color:#3b82f6;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;">wiki:wiki</code>
                        <span style="font-size:13px;color:#6b7280;">知识库写入</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;background:#f1f5f9;border-radius:8px;padding:14px 16px;border:1px solid #ffffff;">
                        <code style="background:#4a1d6a;color:#c084fc;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;">docx:document:readonly</code>
                        <span style="font-size:13px;color:#6b7280;">文档读取</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;background:#f1f5f9;border-radius:8px;padding:14px 16px;border:1px solid #ffffff;">
                        <code style="background:#4a1d6a;color:#c084fc;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;">docx:document</code>
                        <span style="font-size:13px;color:#6b7280;">文档写入</span>
                    </div>
                </div>
            </div>

            <!-- 飞书配置表单 -->
            <div class="settings-panel">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
                    <span style="font-size:18px;">⚙️</span>
                    <span style="font-size:16px;font-weight:600;color:#111827;">API 凭证配置</span>
                </div>

                <div style="display:grid;gap:16px;">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div>
                            <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">App ID</label>
                            <input type="text" id="feishu-app-id" placeholder="cli_xxxxxxxxxxxxxxxx" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;">
                        </div>
                        <div>
                            <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">App Secret</label>
                            <input type="password" id="feishu-app-secret" placeholder="请输入飞书应用 App Secret" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;">
                        </div>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div>
                            <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">API Base URL</label>
                            <input type="text" id="feishu-base-url" value="https://open.feishu.cn" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;">
                            <div style="font-size:12px;color:#6b7280;margin-top:4px;">国际版填 https://open.larksuite.com</div>
                        </div>
                        <div>
                            <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">企业飞书域名</label>
                            <input type="text" id="feishu-wiki-domain" placeholder="test-xxx.feishu.cn" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;">
                            <div style="font-size:12px;color:#6b7280;margin-top:4px;">用于生成文档回链 URL</div>
                        </div>
                    </div>
                    <div>
                        <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;">默认知识库 Wiki Token</label>
                        <input type="text" id="feishu-wiki-token" placeholder="从知识库设置页 URL 末尾复制" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;">
                        <div style="font-size:12px;color:#6b7280;margin-top:4px;">示例: https://xxx.feishu.cn/wiki/settings/<b style="color:#3b82f6;">7675256540135279585</b></div>
                    </div>
                </div>

                <div style="display:flex;gap:12px;margin-top:24px;">
                    <button class="btn-settings btn-outline-settings" onclick="testFeishuConnection()">🔗 测试连接</button>
                    <button class="btn-settings btn-primary-settings" onclick="saveFeishuConfig()">💾 保存配置</button>
                </div>
                <div id="feishu-test-result" style="font-size:12px;margin-top:10px;display:none;"></div>
            </div>
        </div>
    </div>

    <!-- 通用设置 Tab -->
    <div id="tab-general" class="tab-content">
        <div style="max-width: 900px; margin: 0 auto;">
            <h2 style="font-size: 20px; font-weight: 600; color: #111827; margin-bottom: 24px;">通用设置</h2>

            <!-- AI合规标识 -->
            <div style="padding: 20px 0; border-bottom: 1px dashed #e5e7eb;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div style="flex: 1;">
                        <div style="font-size: 15px; font-weight: 500; color: #111827; margin-bottom: 8px;">
                             AI 合规标识(规避即梦真人审核)
                        </div>
                        <div style="font-size: 13px; color: #6b7280; line-height: 1.6;">
                            给图打"此图由AI生成"红色半透明居中标识 + 每张人脸额外打小"AI"标。<br>
                            用途:即梦"涉嫌真人"审核会触发拦截,合规标识让审核器跳过该检测分支,降低被拒概率。<br>
                            仅对人物图(信息提取页角色图) / 视频额外参考图 / 串行尾帧 三类生效,场景/道具不动。<br>
                            已生成的旧图不会自动加,需要重新生成。
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 12px; margin-left: 20px;">
                        <span style="color: #6b7280; font-size: 14px;">关</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="compliance-toggle" onchange="toggleCompliance()">
                            <span class="toggle-slider"></span>
                        </label>
                        <span style="color: #6b7280; font-size: 14px;">开</span>
                    </div>
                </div>
            </div>

            <!-- 按说话人自动过滤音频 -->
            <div style="padding: 20px 0; border-bottom: 1px dashed #e5e7eb;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div style="flex: 1;">
                        <div style="font-size: 15px; font-weight: 500; color: #111827; margin-bottom: 8px;">
                             按说话人自动过滤音频(种菜模式)
                        </div>
                        <div style="font-size: 13px; color: #6b7280; line-height: 1.6;">
                            开启后,视频生成时会自动从分镜 prompt 抽出"说话人"(台词/内心OS/画外音 字段里的角色), 只给说话人配音频,非说话人音频自动屏蔽到分镜的 excluded_audios 里。<br>
                            适用:批量生成"种菜模式",不想每个分镜手动屏蔽。<br>
                            关闭:老行为,所有有 audio_file 的角色都带音频。<br>
                            用户手动设置的屏蔽不受影响。要恢复某角色音频可到分镜详情手动取消屏蔽。
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 12px; margin-left: 20px;">
                        <span style="color: #6b7280; font-size: 14px;">关</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="audio-filter-toggle" onchange="toggleAudioFilter()">
                            <span class="toggle-slider"></span>
                        </label>
                        <span style="color: #6b7280; font-size: 14px;">开</span>
                    </div>
                </div>
            </div>

            <!-- 串行批量失败提示音 -->
            <div style="padding: 20px 0; border-bottom: 1px dashed #e5e7eb;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div style="flex: 1;">
                        <div style="font-size: 15px; font-weight: 500; color: #111827; margin-bottom: 8px;">
                             串行批量失败提示音
                        </div>
                        <div style="font-size: 13px; color: #6b7280; line-height: 1.6;">
                            开启后,视频"批量生成"按顺序逐镜跑(非全局队列),任一镜失败立即播两声短促 beep 提示。<br>
                            适用:跑长批次自己去喝水/做别的,失败有声音提醒回来看。<br>
                            不影响全局队列模式,关掉后完全静默。
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 12px; margin-left: 20px;">
                        <span style="color: #6b7280; font-size: 14px;">关</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="failure-sound-toggle" onchange="toggleFailureSound()">
                            <span class="toggle-slider"></span>
                        </label>
                        <span style="color: #6b7280; font-size: 14px;">开</span>
                    </div>
                </div>
            </div>

            <!-- 媒体文件保存位置 -->
            <div style="padding: 20px 0; border-bottom: 1px dashed #e5e7eb;">
                <div style="font-size: 15px; font-weight: 500; color: #111827; margin-bottom: 8px;">
                     媒体文件保存位置
                </div>
                <div style="font-size: 13px; color: #6b7280; line-height: 1.6; margin-bottom: 16px;">
                    图片、视频、音频、字幕擦除产出的文件保存在哪里。默认在系统目录(C 盘),数据量大时可改到 D 盘等大盘。<br>
                    说明:数据库和日志始终保存在系统目录(不受这里影响),避免误删导致数据丢失。
                </div>
                <div style="background: #f1f5f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                        <div>
                            <div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">当前位置:</div>
                            <div style="color: #1f2937; font-size: 14px;" id="media-save-path">C:\Users\gaohch3\AppData\Roaming\小洋梦剧场\data</div>
                        </div>
                        <span class="tag tag-system">系统默认</span>
                    </div>
                    <div style="display: flex; gap: 16px; font-size: 12px; color: #6b7280;">
                        <span> 图片 0.0 B</span>
                        <span> 视频 0.0 B</span>
                        <span>🎵 音频 0.0 B</span>
                        <span>✕ 字幕擦除 0.0 B</span>
                    </div>
                </div>
                <div style="text-align: right; margin-bottom: 16px;">
                    <div style="font-size: 12px; color: #6b7280;">总占用</div>
                    <div style="font-size: 24px; font-weight: 700; color: #3b82f6;" id="storage-total">0.0 B</div>
                </div>
                <button class="btn-settings btn-primary-settings" onclick="changeSavePath()">修改保存位置</button>
            </div>

            <!-- 火山方舟私域素材库(企业版) -->
            <div style="padding: 20px 0;">
                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
                    <span style="font-size: 16px;">🔒</span>
                    <span style="font-size: 15px; font-weight: 500; color: #111827;">火山方舟私域素材库(企业版)</span>
                    <span class="tag tag-pending">未配置</span>
                </div>
                <div style="font-size: 13px; color: #6b7280; line-height: 1.6; margin-bottom: 16px;">
                    企业用户可将虚拟人像 / 场景 / 道具加白入库,规避 Seedance 2.0 Deepfake / 版权拦截。<br>
                    所需:火山引擎账号 + 高级创作权益包,AK/SK 在 <a href="#" style="color: #3b82f6;">火山控制台 - 访问密钥管理</a> 获取。<br>
                    安全:SK 用操作系统级密钥加密(Windows DPAPI / macOS Keychain),仅本地存储,**永不上传任何服务器**。
                </div>
                <div style="display: grid; gap: 16px;">
                    <div>
                        <label style="display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px;">Access Key (AK)</label>
                        <input type="text" id="volc-ak" placeholder="AKLT..." style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;">
                    </div>
                    <div>
                        <label style="display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px;">Secret Key (SK)</label>
                        <input type="password" id="volc-sk" placeholder="请输入火山 Secret Key" style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;">
                    </div>
                    <div>
                        <label style="display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px;">项目名称</label>
                        <input type="text" id="volc-project" value="default" style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;">
                        <div style="font-size: 12px; color: #6b7280; margin-top: 4px;">必须跟视频生成所用的 API Key 所属 Project 一致(默认 default)</div>
                    </div>
                    <div>
                        <label style="display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px;">企业 APIKey</label>
                        <input type="password" id="volc-apikey" placeholder="留空 = 走云端 APIKey;填了则覆盖云端" style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f1f5f9; color: #1f2937; font-size: 14px; outline: none;">
                        <div style="font-size: 12px; color: #6b7280; margin-top: 4px;">
                            可选 — 填了则视频生成走自己的火山账号(token 后付费,小麦服务器不经过)。留空则用小麦 AI 个人中心配置的 APIKey。SK 同样的 safeStorage 加密。
                        </div>
                    </div>
                </div>
                <div style="display: flex; gap: 12px; margin-top: 20px;">
                    <button class="btn-settings btn-outline-settings" onclick="testVolcConnection()"> 测试连接</button>
                    <button class="btn-settings btn-primary-settings" onclick="saveVolcConfig()">保存配置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Coze工作流 Tab -->
    <div id="tab-coze" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">Coze工作流管理</div>
            <button class="btn-settings btn-primary-settings" onclick="openAddCozeModal()">+ 添加工作流</button>
        </div>
        <div style="display:flex;gap:12px;margin-bottom:20px;">
            <select id="coze-module-filter" class="category-tab" style="padding:8px 12px;" onchange="onCozeModuleFilterChange()">
                <option value="">全部模块</option>
                <option value="comic_drama">漫剧</option>
                <option value="ecommerce">电商</option>
                <option value="self_media">口播</option>
                <option value="skill_library">Skill提示词库</option>
                <option value="knowledge_base">知识库</option>
            </select>
            <select id="coze-submodule-filter" class="category-tab" style="padding:8px 12px;" onchange="loadCozeWorkflows()">
                <option value="">全部子模块</option>
            </select>
        </div>
        <div id="coze-workflow-list"></div>
    </div>

    <!-- 敏感词管理 Tab -->
    <div id="tab-sensitive" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">敏感词管理</div>
            <div style="display:flex;gap:10px;">
                <button class="btn-settings btn-outline-settings" onclick="loadSensitiveWords()">刷新</button>
                <button class="btn-settings btn-primary-settings" onclick="openAddSensitiveModal()">+ 新增敏感词</button>
                <button class="btn-settings btn-outline-settings" onclick="openBatchImportModal()">批量导入</button>
                <button class="btn-settings btn-outline-settings" onclick="syncFromCloud()">从云端同步</button>
                <button class="btn-settings btn-outline-settings" onclick="seedDefaults()">初始化内置词</button>
            </div>
        </div>
        <!-- 筛选 -->
        <div class="settings-panel" style="margin-bottom:16px;">
            <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;">
                <div>
                    <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">分类</label>
                    <select id="sensitive-category-filter" onchange="loadSensitiveWords()" class="category-tab" style="padding:8px 12px;">
                        <option value="">全部分类</option>
                    </select>
                </div>
                <div style="flex:1;min-width:200px;">
                    <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:4px;">关键词搜索</label>
                    <input type="text" id="sensitive-keyword-input" placeholder="搜索敏感词或替换词"
                           onkeyup="if(event.key==='Enter')loadSensitiveWords()"
                           style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#ffffff;color:#1f2937;font-size:13px;outline:none;">
                </div>
            </div>
        </div>
        <div id="sensitive-word-list"></div>
        <!-- 扫描测试面板 -->
        <div class="settings-panel" style="margin-top:24px;">
            <div style="font-size:16px;font-weight:600;color:#111827;margin-bottom:16px;">扫描测试</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                <div>
                    <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:6px;">输入待扫描文本</label>
                    <textarea id="sensitive-scan-input" rows="6" placeholder="在此输入或粘贴文本，点击扫描测试..." style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;outline:none;font-family:monospace;resize:vertical;"></textarea>
                    <button class="btn-settings btn-primary-settings" style="margin-top:8px;" onclick="scanTest()">扫描测试</button>
                </div>
                <div>
                    <label style="display:block;font-size:12px;color:#6b7280;margin-bottom:6px;">扫描结果</label>
                    <div id="sensitive-scan-result" style="background:#f1f5f9;border-radius:8px;border:1px solid #e5e7eb;padding:12px;min-height:200px;max-height:400px;overflow:auto;font-size:13px;color:#6b7280;">
                        尚未扫描
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- AIGC设置 Tab -->
    <div id="tab-aigc" class="tab-content">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
            <div class="settings-panel-title" style="margin-bottom:0;">AIGC设置（降AIGC处理参数）</div>
            <div style="display:flex;gap:10px;">
                <button class="btn-settings btn-outline-settings" onclick="loadDeAigcConfig()">刷新</button>
                <button class="btn-settings btn-outline-settings" onclick="resetDeAigcConfig()">恢复默认</button>
                <button class="btn-settings btn-primary-settings" onclick="saveDeAigcConfig()">💾 保存配置</button>
            </div>
        </div>
        <div style="font-size:13px;color:#6b7280;line-height:1.8;margin-bottom:16px;">
            以下参数控制「降AIGC」工具的处理方法。每个方法可独立开关、调整触发概率与词库，
            保存后立即生效（写入 <code>storage/de_aigc_config.json</code>），无需修改代码。
            词库格式：<code>word_map</code> 每行 <code>原词=替换词</code>；<code>word_list_map</code> 每行 <code>原词=候选1|候选2</code>；
            <code>word_list</code> 每行一个词；<code>int</code> 为数字。
        </div>

        <!-- 检测验证链接 -->
        <div class="settings-panel" style="margin-bottom:16px;">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:16px;">
                <div style="flex:1;">
                    <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:8px;">🔗 AIGC检测验证链接</div>
                    <div style="font-size:13px;color:#6b7280;line-height:1.6;margin-bottom:10px;">
                        处理结果可通过第三方检测工具验证效果（默认腾讯AIGC检测）。会显示在降AIGC页面供一键跳转验证。
                    </div>
                    <input type="text" id="aigc-detect-url" placeholder="https://matrix.tencent.com/ai-detect/ai_gen_txt"
                           style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;outline:none;">
                </div>
                <button class="btn-settings btn-outline-settings" style="white-space:nowrap;margin-top:28px;" onclick="openAigcDetectUrl()">打开检测 ↗</button>
            </div>
        </div>

        <!-- 默认强度 -->
        <div class="settings-panel" style="margin-bottom:16px;">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div style="flex:1;">
                    <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:8px;">默认处理强度：<span id="aigc-intensity-label" style="color:#3b82f6;">80%</span></div>
                    <div style="font-size:13px;color:#6b7280;line-height:1.6;">页面未指定强度时使用的整体处理强度，同时放大幅度影响所有方法的触发概率。</div>
                </div>
                <div style="width:260px;margin-left:20px;">
                    <input type="range" id="aigc-intensity-slider" min="0" max="100" value="80"
                           oninput="document.getElementById('aigc-intensity-label').textContent = this.value + '%'"
                           style="width:100%;accent-color:#3b82f6;">
                </div>
            </div>
        </div>

        <!-- 处理方法列表 -->
        <div class="settings-panel">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
                <div style="font-size:16px;font-weight:600;color:#111827;">处理方法</div>
                <div style="font-size:12px;color:#6b7280;" id="aigc-method-count"></div>
            </div>
            <div id="aigc-methods" style="display:flex;flex-direction:column;gap:14px;"></div>
        </div>
    </div>
</div>
<div id="llm-modal" class="modal-overlay">
    <div class="modal-content">
        <h2 id="llm-modal-title">新建大模型配置</h2>
        <form id="llm-form">
            <input type="hidden" id="llm-config-id">
            <label><span class="required">*</span> 厂商预设</label>
            <div style="position:relative;">
                <div id="llm-provider-preset" onclick="toggleProviderDropdown()" style="width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;outline:none;" tabindex="0">
                    <span id="llm-provider-label" style="color:#6b7280;">请选择厂商(或自定义)</span>
                    <span style="color:#6b7280;">▼</span>
                </div>
                <div id="provider-list-dropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;max-height:300px;overflow-y:auto;z-index:200;margin-top:4px;box-shadow:0 8px 24px rgba(0,0,0,0.4);"></div>
            </div>
            <input type="hidden" id="llm-provider-id" value="">
            <label><span class="required">*</span> 配置名称</label>
            <input type="text" id="llm-name" required placeholder="如：DeepSeek官方直连">
            <label><span class="required">*</span> API 地址</label>
            <input type="text" id="llm-api-base-url" required placeholder="https://api.deepseek.com/v1">
            <label><span class="required">*</span> API Key</label>
            <input type="password" id="llm-api-key" placeholder="请输入 API Key">
            <p style="color:#6b7280;font-size:11px;margin-top:4px;">API Key 仅用于本地调用，不会上传到服务器</p>
            <label><span class="required">*</span> 模型名称</label>
            <input type="text" id="llm-model-name" required placeholder="如：deepseek-v4-flash 或 deepseek-v4-pro">
            <label>说明</label>
            <textarea id="llm-description" rows="2" placeholder="可选：配置说明"></textarea>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                    <label>温度</label>
                    <input type="number" id="llm-temperature" step="0.1" min="0" max="2" value="0.7">
                </div>
                <div>
                    <label>最大 Token</label>
                    <input type="number" id="llm-max-tokens" min="1" value="4096">
                </div>
                <div>
                    <label>上下文窗口</label>
                    <input type="number" id="llm-context-window" min="1" value="4096">
                </div>
                <div>
                    <label>请求超时（秒）</label>
                    <input type="number" id="llm-request-timeout" min="1" value="60">
                </div>
                <div>
                    <label>重试次数</label>
                    <input type="number" id="llm-retry-count" min="0" max="10" value="0">
                </div>
                <div>
                    <label>协议风格</label>
                    <select id="llm-api-style">
                        <option value="openai_chat">OpenAI Chat</option>
                        <option value="openai_images">OpenAI Images</option>
                        <option value="gemini_native">Gemini 原生</option>
                        <option value="wuyinkeji_chat">速创 API</option>
                        <option value="auto">自动</option>
                    </select>
                </div>
            </div>
            <div class="setting-row" style="border:none;margin-top:16px;">
                <span class="setting-row-label">设为默认</span>
                <label class="toggle-switch"><input type="checkbox" id="llm-is-default"><span class="toggle-slider"></span></label>
            </div>
            <div class="setting-row" style="border:none;">
                <span class="setting-row-label">本地模型</span>
                <label class="toggle-switch"><input type="checkbox" id="llm-is-local" onchange="onLocalModelToggle()"><span class="toggle-slider"></span></label>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn-settings btn-outline-settings" onclick="closeLLMModal()">取消</button>
                <button type="submit" class="btn-settings btn-primary-settings">确定</button>
            </div>
        </form>
    </div>
</div>

<!-- 模板弹窗 -->
<div id="template-modal" class="modal-overlay">
    <div class="modal-content">
        <h2 id="template-modal-title">新建模板</h2>
        <form id="template-form">
            <input type="hidden" id="template-id">
            <label><span class="required">*</span> 模板名称</label>
            <input type="text" id="template-name" required>
            <label><span class="required">*</span> 类别</label>
            <select id="template-category" required>
                <option value="剧本转换">剧本转换</option>
                <option value="剧本转剧本">剧本转剧本</option>
                <option value="人物提取">人物提取</option>
                <option value="场景提取">场景提取</option>
                <option value="道具提取">道具提取</option>
                <option value="分镜生成">分镜生成</option>
                <option value="分镜精修">分镜精修</option>
                <option value="风格提示词">风格提示词</option>
                <option value="宫格图提示词">宫格图提示词</option>
                <option value="剧本转小说">剧本转小说</option>
                <option value="小说大纲">小说大纲</option>
                <option value="小说章节创作">小说章节创作</option>
                <option value="章节后处理">章节后处理</option>
                <option value="小说洗稿">小说洗稿</option>
                <option value="剧本洗稿">剧本洗稿</option>
            </select>
            <label><span class="required">*</span> 模板内容</label>
            <textarea id="template-content" required rows="14" placeholder="支持Jinja2语法：{{variable_name}} 或 {variable_name}" style="font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.6;"></textarea>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                    <label>屏幕模式</label>
                    <select id="template-screen-mode">
                        <option value="">不限</option>
                        <option value="竖屏">竖屏</option>
                        <option value="横屏">横屏</option>
                    </select>
                </div>
                <div>
                    <label>适配模型</label>
                    <input type="text" id="template-adapted-model" placeholder="如：gpt-image-2/火山5.0">
                </div>
                <div>
                    <label>模型家族（分镜类）</label>
                    <select id="template-model-family">
                        <option value="">不限</option>
                        <option value="seedance_2_0">Seedance 2.0</option>
                        <option value="seedance_2_5">Seedance 2.5</option>
                    </select>
                </div>
                <div>
                    <label>标签（逗号分隔）</label>
                    <input type="text" id="template-tags" placeholder="如：短剧,女频">
                </div>
            </div>
            <label>描述</label>
            <textarea id="template-description" rows="2"></textarea>
            <label>变量列表 (JSON格式)</label>
            <input type="text" id="template-variables" placeholder='["product_name", "target_audience"]'>
            <div class="modal-actions">
                <button type="button" class="btn-settings btn-outline-settings" onclick="closeTemplateModal()">取消</button>
                <button type="submit" class="btn-settings btn-primary-settings">确定</button>
            </div>
        </form>
    </div>
</div>

<!-- 提示词 Prompt 编辑弹窗 -->
<div id="prompt-center-modal" class="modal-overlay">
    <div class="modal-content">
        <h2 id="prompt-center-modal-title">新建提示词</h2>
        <form id="prompt-center-form">
            <input type="hidden" id="prompt-center-source">
            <input type="hidden" id="prompt-center-id">
            <label><span class="required">*</span> 来源</label>
            <select id="prompt-center-source-select" onchange="togglePromptCenterSourceFields()">
                <option value="template">提示词模板（漫剧/小说流程自动调用）</option>
                <option value="skill">Skill 提示词库（手动/API调用）</option>
            </select>
            <label><span class="required">*</span> 名称</label>
            <input type="text" id="prompt-center-name" required>
            <label><span class="required">*</span> 分类标签</label>
            <input type="text" id="prompt-center-category" list="prompt-center-category-list" required placeholder="如：剧本转换 / 小说洗稿 / AI车间 / 通用">
            <datalist id="prompt-center-category-list"></datalist>
            <label><span class="required">*</span> 提示词内容</label>
            <textarea id="prompt-center-content" required rows="14" placeholder="支持Jinja2语法：{{variable_name}} 或 {variable_name}" style="font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.6;"></textarea>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                    <label>屏幕模式</label>
                    <select id="prompt-center-screen-mode">
                        <option value="">不限</option>
                        <option value="竖屏">竖屏</option>
                        <option value="横屏">横屏</option>
                    </select>
                </div>
                <div>
                    <label>适配模型</label>
                    <input type="text" id="prompt-center-adapted-model" placeholder="如：gpt-image-2/火山5.0">
                </div>
                <div>
                    <label>模型家族（分镜类）</label>
                    <select id="prompt-center-model-family">
                        <option value="">不限</option>
                        <option value="seedance_2_0">Seedance 2.0</option>
                        <option value="seedance_2_5">Seedance 2.5</option>
                    </select>
                </div>
                <div>
                    <label>标签（逗号分隔）</label>
                    <input type="text" id="prompt-center-tags" placeholder="如：短剧,女频">
                </div>
            </div>
            <label>描述</label>
            <textarea id="prompt-center-description" rows="2"></textarea>
            <label>变量列表（JSON 或逗号分隔）</label>
            <input type="text" id="prompt-center-variables" placeholder='如：novel_name,chapter_count 或 {"user_demand":"用户需求"}'>
            <label style="display:flex;align-items:center;gap:8px;margin-top:14px;">
                <input type="checkbox" id="prompt-center-active" checked> 启用
            </label>
            <div class="modal-actions">
                <button type="button" class="btn-settings btn-outline-settings" onclick="closePromptCenterModal()">取消</button>
                <button type="submit" class="btn-settings btn-primary-settings">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 修改保存路径弹窗 -->
<div id="path-modal" class="modal-overlay">
    <div class="modal-content" style="max-width:480px;">
        <h2>修改媒体文件保存位置</h2>
        <label><span class="required">*</span> 新路径</label>
        <input type="text" id="new-save-path" placeholder="如：D:\AIWorkstation">
        <p style="color:#6b7280;font-size:12px;margin-top:8px;">数据库和日志不受影响，仅改变媒体文件保存位置。</p>
        <div class="modal-actions">
            <button type="button" class="btn-settings btn-outline-settings" onclick="closePathModal()">取消</button>
            <button type="button" class="btn-settings btn-primary-settings" onclick="confirmSavePath()">确定</button>
        </div>
    </div>
</div>

<!-- Coze工作流弹窗 -->
<div id="coze-modal" class="modal-overlay">
    <div class="modal-content">
        <h2 id="coze-modal-title">添加Coze工作流</h2>
        <form id="coze-form">
            <input type="hidden" id="coze-workflow-id">
            <label><span class="required">*</span> 所属模块</label>
            <select id="coze-module" required onchange="onCozeModuleChange()">
                <option value="">请选择模块</option>
                <option value="comic_drama">漫剧</option>
                <option value="ecommerce">电商</option>
                <option value="self_media">口播</option>
                <option value="skill_library">Skill提示词库</option>
                <option value="knowledge_base">知识库</option>
            </select>
            <label>子模块</label>
            <select id="coze-submodule">
                <option value="">无</option>
            </select>
            <label><span class="required">*</span> 工作流名称</label>
            <input type="text" id="coze-name" required placeholder="如：小说创作工作流">
            <label><span class="required">*</span> Coze工作流链接</label>
            <input type="url" id="coze-url" required placeholder="https://www.coze.cn/workflow/...">
            <label>说明</label>
            <textarea id="coze-description" rows="2" placeholder="可选：工作流说明"></textarea>
            <div class="setting-row" style="border:none;margin-top:16px;">
                <span class="setting-row-label">启用</span>
                <label class="toggle-switch"><input type="checkbox" id="coze-is-active" checked><span class="toggle-slider"></span></label>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn-settings btn-outline-settings" onclick="closeCozeModal()">取消</button>
                <button type="submit" class="btn-settings btn-primary-settings">确定</button>
            </div>
        </form>
    </div>
</div>

<!-- Skill新增/编辑弹窗 -->
<div id="skill-modal" class="modal-overlay">
    <div class="modal-content">
        <h2 id="skill-modal-title">新增Skill</h2>
        <form id="skill-form">
            <input type="hidden" id="skill-id">
            <label><span class="required">*</span> Skill名称</label>
            <input type="text" id="skill-name" required>
            <label><span class="required">*</span> 分类</label>
            <select id="skill-category" required>
                <option value="ecommerce">电商</option>
                <option value="comic_drama">漫剧</option>
                <option value="self_media">自媒体</option>
                <option value="common">通用</option>
            </select>
            <label><span class="required">*</span> 提示词内容</label>
            <textarea id="skill-content" required rows="8" placeholder="支持Jinja2语法：{{variable_name}}"></textarea>
            <label>使用说明</label>
            <textarea id="skill-description" rows="2"></textarea>
            <label>标签（逗号分隔）</label>
            <input type="text" id="skill-tags" placeholder="如：文案,商品,营销">
            <div class="modal-actions">
                <button type="button" class="btn-settings btn-outline-settings" onclick="closeSkillModal()">取消</button>
                <button type="submit" class="btn-settings btn-primary-settings">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- Skill测试渲染弹窗 -->
<div id="skill-test-modal" class="modal-overlay">
    <div class="modal-content" style="max-width:780px;">
        <h2>测试渲染</h2>
        <label>模板内容</label>
        <div id="skill-test-template-content" class="prompt-output" style="background:#f1f5f9;color:#4b5563;padding:12px;border-radius:6px;font-family:monospace;font-size:13px;max-height:200px;overflow:auto;"></div>
        <label>变量（JSON格式）</label>
        <textarea id="skill-test-variables" rows="4" placeholder='{"variable_name": "value"}'></textarea>
        <div style="margin-top:12px;">
            <button type="button" class="btn-settings btn-primary-settings" onclick="testRender()">渲染测试</button>
            <button type="button" class="btn-settings btn-ghost" onclick="copyTestResult()">复制结果</button>
        </div>
        <label style="margin-top:16px;">渲染结果</label>
        <div id="skill-test-result" class="prompt-output" style="background:#f1f5f9;color:#4b5563;padding:12px;border-radius:6px;font-family:monospace;font-size:13px;min-height:120px;max-height:300px;overflow:auto;"></div>
        <div class="modal-actions">
            <button type="button" class="btn-settings btn-outline-settings" onclick="closeSkillTestModal()">关闭</button>
        </div>
    </div>
</div>

<!-- 敏感词新增/编辑弹窗 -->
<div id="sensitive-edit-modal" class="modal-overlay">
    <div class="modal-content">
        <h2 id="sensitive-edit-modal-title">新增敏感词</h2>
        <form id="sensitive-edit-form">
            <input type="hidden" id="sensitive-edit-id">
            <label><span class="required">*</span> 敏感词</label>
            <input type="text" id="sensitive-edit-word" required placeholder="如：枪口对准">
            <label>替换词</label>
            <input type="text" id="sensitive-edit-replacement" placeholder="如：枪口指向">
            <label>分类</label>
            <select id="sensitive-edit-category">
                <option value="violence">暴力</option>
                <option value="sexual">色情</option>
                <option value="politics">政治</option>
                <option value="gambling">赌博</option>
                <option value="drug">毒品</option>
                <option value="insult">侮辱</option>
                <option value="privacy">隐私</option>
                <option value="horror">恐怖</option>
                <option value="general">通用</option>
                <option value="custom">自定义</option>
            </select>
            <label>失败类型</label>
            <select id="sensitive-edit-failure-type">
                <option value="">无</option>
                <option value="text_failure">文本违规</option>
                <option value="image_failure">图片违规</option>
                <option value="video_failure">视频违规</option>
                <option value="audio_failure">音频违规</option>
            </select>
            <label>原因</label>
            <textarea id="sensitive-edit-reason" rows="2" placeholder="可选：命中原因说明"></textarea>
            <div class="modal-actions">
                <button type="button" class="btn-settings btn-outline-settings" onclick="closeSensitiveModal()">取消</button>
                <button type="submit" class="btn-settings btn-primary-settings">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 批量导入弹窗 -->
<div id="sensitive-batch-import-modal" class="modal-overlay">
    <div class="modal-content">
        <h2>批量导入敏感词</h2>
        <label>粘贴导入数据</label>
        <textarea id="sensitive-batch-text" rows="10" placeholder="每行一条，支持以下格式：&#10;敏感词&#10;敏感词|替换词&#10;敏感词|替换词|分类&#10;&#10;示例：&#10;枪口对准|枪口指向|violence&#10;血腥场面|激烈场面|violence"></textarea>
        <div style="display:flex;gap:12px;margin-top:12px;">
            <button class="btn-settings btn-outline-settings" onclick="parseBatchImport()">解析预览</button>
        </div>
        <div id="sensitive-batch-preview" style="margin-top:16px;display:none;">
            <label>解析预览</label>
            <div id="sensitive-batch-preview-content" style="background:#f1f5f9;border-radius:6px;padding:12px;font-size:13px;color:#1f2937;max-height:200px;overflow:auto;"></div>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn-settings btn-outline-settings" onclick="closeBatchImportModal()">取消</button>
            <button type="button" class="btn-settings btn-primary-settings" onclick="confirmBatchImport()">确认导入</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/settings.js?v=5"></script>
<script src="/static/js/users.js"></script>
<script src="/static/js/skill_library.js"></script>
<script src="/static/js/prompt_center.js"></script>
{% endblock %}