<?php
/**
 * 芋头CMS - 内容管理（综合内容管理界面）
 * 左侧：无限级栏目树（带内容数量）+ 右侧：AJAX内容列表
 */
if (isset($_GET['ajax']) && $_GET['ajax'] == 1) {
    while (ob_get_level() > 0) { ob_end_clean(); }
    header('Content-Type: application/json');

    $channels = $db->fetchAll("SELECT * FROM {$db->table('channel')} ORDER BY list_order ASC, id ASC");

    // 按模型类型统计每个栏目的内容数量
    $typeTables = [1 => 'article', 2 => 'product', 3 => 'page', 4 => 'image', 5 => 'download', 7 => 'video', 8 => 'guestbook', 9 => 'recruit'];
    $countMap = []; // channel_id => total count

    foreach ($typeTables as $type => $table) {
        try {
            $cols = $db->fetchAll("DESCRIBE {$db->table($table)}");
            $colNames = array_column($cols, 'Field');
            if (!in_array('channel_id', $colNames)) continue;

            $rows = $db->fetchAll("SELECT channel_id, COUNT(*) as cnt FROM {$db->table($table)} GROUP BY channel_id");
            foreach ($rows as $r) {
                $cid = intval($r['channel_id']);
                if (!isset($countMap[$cid])) $countMap[$cid] = 0;
                $countMap[$cid] += intval($r['cnt']);
            }
        } catch (Exception $e) {}
    }

    echo json_encode(['code' => 200, 'channels' => $channels, 'countMap' => $countMap]);
    exit;
}
?>

<div class="content-manage-layout">
    <!-- 左侧栏目树 -->
    <aside class="channel-sidebar">
        <div class="channel-sidebar-header">
            <span class="channel-sidebar-title">📂 栏目导航</span>
            <button class="btn btn-xs btn-primary" id="btnExpandAll" onclick="var els=document.querySelectorAll('.channel-tree-toggle');els.forEach(function(e){e.classList.remove('collapsed')});document.querySelectorAll('.channel-children').forEach(function(e){e.style.display='block'});document.querySelectorAll('.channel-node').forEach(function(e){e.style.display='block'});" title="展开全部栏目" style="margin-left:auto;">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
            </button>
        </div>
        <div class="channel-tree" id="channelTree">
            <div class="channel-loading"><i class="fa fa-spinner fa-spin"></i> 加载中...</div>
        </div>
    </aside>

    <!-- 右侧内容区 -->
    <main class="content-main">
        <!-- 顶部操作栏 -->
        <div class="content-topbar">
            <div class="topbar-left">
                <div class="channel-breadcrumb" id="channelBreadcrumb">
                    <span style="color:#94a3b8;font-size:13px;">全部内容</span>
                </div>
                <button class="btn btn-primary btn-add-content" id="btnAddContent" onclick="addContent()" style="display:none;">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
                    发布内容
                </button>
            </div>
            <div class="topbar-right">
                <form class="search-form" onsubmit="return false;">
                    <input type="text" class="search-input" id="searchInput" placeholder="搜索标题...">
                    <button type="button" class="btn btn-secondary" onclick="doSearch()">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                        搜索
                    </button>
                </form>
            </div>
        </div>

        <!-- 内容列表 -->
        <div class="content-list-wrapper" id="contentListWrapper">
            <table class="content-table">
                <thead>
                    <tr>
                        <th style="width:30px;" class="checkbox-cell"><input type="checkbox" id="checkAll"></th>
                        <th style="width:30px;text-align:center;">ID</th>
                        <th style="width:400px;">标题</th>
                        <th style="width:80px;text-align:center;">类型</th>
                        <th style="width:80px;">所属栏目</th>
                        <th style="width:70px;text-align:center;">状态</th>
                        <th style="width:130px;">发布时间</th>
                        <th style="width:100px;text-align:center;">操作</th>
                    </tr>
                </thead>
                <tbody id="contentTableBody">
                    <tr><td colspan="8" class="table-loading"><i class="fa fa-spinner fa-spin"></i> 加载中...</td></tr>
                </tbody>
            </table>
            <div class="content-pagination" id="contentPagination"></div>
        </div>
    </main>
</div>

<style>
.content-manage-layout {
    display: flex;
    height: calc(100vh - 140px);
    gap: 16px;
}

/* 左侧栏目树 */
.channel-sidebar {
    width: 170px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.channel-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}
.channel-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}
.channel-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.channel-loading {
    text-align: center;
    padding: 30px;
    color: #94a3b8;
    font-size: 13px;
}
.channel-quick-add {
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #94a3b8;
    flex-shrink: 0;
    margin-left: auto;
}
.channel-tree-item:hover .channel-quick-add { display: inline-flex; }
.channel-quick-add:hover { background: #2563eb; color: #fff; }
.channel-tree-item {
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
    transition: all 0.15s;
    margin: 1px 6px;
    user-select: none;
}
.channel-tree-item:hover {
    background: #f1f5f9;
    color: #2563eb;
}
.channel-tree-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 500;
}
.channel-tree-item.root-item {
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.channel-tree-toggle {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 3px;
    cursor: pointer;
    color: #94a3b8;
    transition: transform 0.15s;
}
.channel-tree-toggle:hover { background: #e2e8f0; }
.channel-tree-toggle.collapsed { transform: rotate(-90deg); }
.channel-tree-item .ch-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.channel-count-badge {
    font-size: 10px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    min-width: 18px;
    text-align: center;
}
.channel-count-badge.has-content {
    background: #ecfdf5;
    color: #10b981;
}

/* 右侧内容区 */
.content-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.content-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    margin-bottom: 12px;
    min-height: 52px;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.channel-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}
.channel-breadcrumb .crumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.channel-breadcrumb .crumb-item a {
    color: #2563eb;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.channel-breadcrumb .crumb-item a:hover { background: #eff6ff; }
.channel-breadcrumb .crumb-sep { color: #cbd5e1; }

.search-form { display: flex; gap: 8px; align-items: center; }
.search-input {
    width: 200px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}
.search-input:focus { border-color: #2563eb; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.btn-secondary:hover { background: #e2e8f0; }
.btn-ghost { background: transparent; color: #ef4444; padding: 6px 10px; }
.btn-ghost:hover { background: #fef2f2; }
.btn-add-content { margin-left: 12px; }

/* 左侧栏目树 */
.content-list-wrapper {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.content-table {
    width: 100%;
    border-collapse: collapse;
    flex: 1;
    table-layout: fixed;
}
.content-table th,
.content-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    vertical-align: middle;
}
.content-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    position: sticky;
    top: 0;
    z-index: 1;
}
.content-table tr:hover td { background: #f8fafc; }
.table-loading {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
    font-size: 13px;
}
.id-cell {
    text-align: center;
    font-family: 'Courier New', monospace;
    color: #94a3b8;
    font-size: 11px;
    width: 30px;
    padding: 8px 4px !important;
}
.checkbox-cell {
    text-align: center;
    width: 30px;
    padding: 8px 4px !important;
}
.checkbox-cell input[type=checkbox] { cursor: pointer; }
.title-cell {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.title-cell a { color: #1e293b; text-decoration: none; }
.title-cell a:hover { color: #2563eb; }
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.type-1 { background: #ecfdf5; color: #10b981; }
.type-2 { background: #eff6ff; color: #2563eb; }
.type-3 { background: #fdf4ff; color: #a855f7; }
.type-4 { background: #fff7ed; color: #f97316; }
.type-5 { background: #f0fdf4; color: #22c55e; }
.type-7 { background: #fef9c3; color: #ca8a04; }
.type-8 { background: #f1f5f9; color: #64748b; }
.type-9 { background: #fff1f2; color: #e11d48; }
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.status-1 { background: #ecfdf5; color: #10b981; }
.status-0 { background: #fef2f2; color: #ef4444; }
.action-cell {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.action-cell button {
    width: 50px;
    height: 28px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.action-cell button:hover { background: #e2e8f0; color: #2563eb; }
.action-cell .btn-del { background: #fef2f2; color: #ef4444; }
.action-cell .btn-del:hover { background: #fee2e2; }
.btn-browse:hover { background: #eff6ff !important; color: #2563eb !important; }
.btn-edit:hover { background: #eff6ff !important; color: #2563eb !important; }
.content-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    width: 300px;
    margin: 0 auto;
}
.content-pagination a {
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s;
    min-width: 36px;
    text-align: center;
}
.content-pagination a:hover { background: #f1f5f9; }
.content-pagination a.active { background: #2563eb; color: #fff; border-color: #2563eb; }

@media (max-width: 768px) {
    .content-manage-layout {
        flex-direction: column;
        height: auto;
    }
    .channel-sidebar {
        width: 100%;
        max-height: 320px;
    }
    .content-main {
        width: 100%;
    }
    .content-topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    .topbar-left,
    .topbar-right,
    .search-form {
        width: 100%;
    }
    .topbar-left {
        flex-wrap: wrap;
        gap: 10px;
    }
    .search-form {
        flex-direction: column;
        align-items: stretch;
    }
    .search-input,
    .search-form .btn,
    .btn-add-content {
        width: 100%;
    }
    .btn-add-content {
        margin-left: 0;
    }
    .content-list-wrapper {
        overflow-x: auto;
        overflow-y: auto;
    }
    .content-table {
        min-width: 860px;
    }
    .content-pagination {
        width: auto;
        min-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .channel-sidebar-header,
    .content-topbar {
        padding: 10px;
    }
    .content-table th,
    .content-table td {
        padding: 9px 10px;
    }
}
</style>

<script>
var currentChannel = null;
var currentChannelName = '';
var currentChannelType = 0;
var currentPage = 1;
var currentSearch = '';
var allChannels = [];
var countMap = {};
var typeNames = {1:'文章',2:'产品',3:'单页',4:'图集',5:'下载',7:'视频',8:'留言',9:'招聘'};
var typeMap = {1:'article',2:'product',3:'page',4:'image',5:'download',7:'video',8:'guestbook',9:'recruit'};

function init() {
    window._expandAfterLoad = true;
    loadChannelTree();
    loadContentList();
}

// 加载栏目树
function loadChannelTree() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '?act=content&ajax=1', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            try {
                var res = JSON.parse(xhr.responseText);
                if (res.code === 200) {
                    allChannels = res.channels || [];
                    countMap = res.countMap || {};
                    renderChannelTree(allChannels);
                }
            } catch(e) {}
        }
    };
    xhr.send();
}

// 递归构建树形HTML
function buildTreeHtml(channels, parentId, depth) {
    var html = '';
    var children = channels.filter(function(c) { return parseInt(c.parent_id) === parentId; });
    if (children.length === 0) return html;

    children.forEach(function(c) {
        var subs = channels.filter(function(cc) { return parseInt(cc.parent_id) === parseInt(c.id); });
        var hasSubs = subs.length > 0;
        var totalCount = countMap[c.id] || 0;
        var countClass = totalCount > 0 ? 'has-content' : '';
        var toggleHtml = '';
        if (hasSubs) {
            toggleHtml = '<span class="channel-tree-toggle" onclick="event.stopPropagation();toggleNode(this, ' + c.id + ')">' +
                '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg></span>';
        } else {
            toggleHtml = '<span style="width:16px;display:inline-block;"></span>';
        }

        html += '<div class="channel-node" data-id="' + c.id + '">';
        html += '<div class="channel-tree-item" onclick="event.stopPropagation();selectChannel(' + c.id + ', \'' + escapeHtml(c.channel_name) + '\', ' + c.channel_type + ')" data-id="' + c.id + '">';
        html += toggleHtml;
        html += '<span class="ch-name">' + escapeHtml(c.channel_name) + '</span>';
        html += '<span class="channel-count-badge ' + countClass + '">' + (totalCount > 0 ? totalCount : '') + '</span>';
        html += '<span class="channel-quick-add" onclick="event.stopPropagation();quickAddContent(' + c.id + ', ' + c.channel_type + ')" title="添加内容">\n            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>\n        </span>';
        html += '</div>';

        if (hasSubs) {
            html += '<div class="channel-children" style="display:block;">';
            html += buildTreeHtml(channels, c.id, depth + 1);
            html += '</div>';
        }
        html += '</div>';
    });
    return html;
}

function escapeHtml(s) {
    s = s || '';
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function renderChannelTree(channels) {
    var totalCount = 0;
    for (var k in countMap) totalCount += countMap[k];

    var html = '';
    // 全部内容
    html += '<div class="channel-tree-item root-item" onclick="selectChannel(null)">';
    html += '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>';
    html += '<span class="ch-name">全部内容</span>';
    html += '<span class="channel-count-badge ' + (totalCount > 0 ? 'has-content' : '') + '">' + (totalCount > 0 ? totalCount : '') + '</span>';
    html += '</div>';

    // 无限级树形（只显示顶级和二级，减少层级感）
    html += buildTreeHtml(channels, 0, 0);

    document.getElementById('channelTree').innerHTML = html;
    if (window._expandAfterLoad) {
        window._expandAfterLoad = false;
        expandAllChannels();
    }
}

function toggleNode(el, id) {
    el.classList.toggle('collapsed');
    var node = document.querySelector('.channel-node[data-id="' + id + '"]');
    if (!node) return;
    var children = node.querySelector('.channel-children');
    if (children) {
        children.style.display = el.classList.contains('collapsed') ? 'none' : 'block';
    }
}

function selectChannel(id, name, type) {
    currentChannel = id;
    currentChannelName = name || '';
    currentChannelType = type || 0;
    currentPage = 1;


    // 高亮
    document.querySelectorAll('.channel-tree-item').forEach(function(el) {
        el.classList.remove('active');
    });
    var target = event.currentTarget;
    target.classList.add('active');


    // 更新面包屑
    updateBreadcrumb(id, name);

    // 显示/隐藏发布内容按钮
    updateAddButton();
    loadContentList();
}

function updateAddButton() {
    var btn = document.getElementById('btnAddContent');
    if (!btn) return;
    if (currentChannel && currentChannelType > 0) {
        btn.style.display = 'inline-flex';
    } else {
        btn.style.display = 'none';
    }
}

function addContent() {
    if (!currentChannel || !currentChannelType) return;
    var act = typeMap[currentChannelType] || 'article';
    location.href = '?act=' + act + '&action=add&channel_id=' + currentChannel;
}

function quickAddContent(channelId, channelType) {
    var act = typeMap[channelType] || 'article';
    location.href = '?act=' + act + '&action=add&channel_id=' + channelId;
}

function deleteItem(id, type) {
    if (!confirm('确定要删除吗？')) return;
    var act = typeMap[type] || 'article';
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '?act=' + act + '&action=delete', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        try {
            var d = JSON.parse(xhr.responseText);
            if (d.code == 200) {
                loadContentList();
            } else {
                alert(d.msg || '删除失败');
            }
        } catch(e) {
            loadContentList();
        }
    };
    xhr.send('id=' + id);
}

function updateBreadcrumb(id, name) {
    var bc = document.getElementById('channelBreadcrumb');
    if (!id) {
        bc.innerHTML = '<span style="color:#94a3b8;font-size:13px;">全部内容</span>';
        return;
    }
    // 构建路径：找到栏目所有父级
    var path = [{id: null, name: '全部内容'}, {id: id, name: name || ''}];
    // 找父级链
    if (id && currentChannelType) {
        // 简单显示当前栏目
        bc.innerHTML = '<span class="crumb-item"><a href="javascript:selectChannel(null)">全部内容</a></span>' +
            '<span class="crumb-sep">›</span>' +
            '<span class="crumb-item"><span style="color:#475569;font-weight:500;">' + escapeHtml(name || '') + '</span></span>';
    }
}

// 加载内容列表
function loadContentList() {
    var xhr = new XMLHttpRequest();
    var url = '?act=content_list&page=' + currentPage;
    if (currentChannel) url += '&channel_id=' + currentChannel;
    if (currentChannelType) url += '&type=' + currentChannelType;
    if (currentSearch) url += '&search=' + encodeURIComponent(currentSearch);

    xhr.open('GET', url, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('contentTableBody').innerHTML = xhr.responseText;
            setupCheckAll();
            bindRowActions();
        }
    };
    xhr.send();
}

function setupCheckAll() {
    var checkAll = document.getElementById('checkAll');
    if (checkAll) {
        checkAll.onclick = function() {
            document.querySelectorAll('.row-check').forEach(function(c) { c.checked = checkAll.checked; });
        };
    }
}

function bindRowActions() {
    // 绑定删除按钮事件
    document.querySelectorAll('.action-cell .btn-del').forEach(function(btn) {
        var onclick = btn.getAttribute('onclick');
        if (onclick) {
            var match = onclick.match(/deleteContent\s*\(\s*(\d+)\s*,\s*(\d+)\s*/);
            if (match) {
                btn.onclick = function() {
                    deleteContentByType(parseInt(match[1]), parseInt(match[2]));
                };
                btn.removeAttribute('onclick');
            }
        }
    });
}

function doSearch() {
    currentSearch = document.getElementById('searchInput').value.trim();
    currentPage = 1;
    loadContentList();
}

document.getElementById('searchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') doSearch();
});

function goToPage(page) {
    currentPage = page;
    loadContentList();
    document.querySelector('.content-list-wrapper').scrollTop = 0;
}

// 编辑内容
function editContent(id, type) {
    var act = typeMap[type] || 'article';
    location.href = '?act=' + act + '&action=edit&id=' + id;
}

function expandAllChannels() {
    console.log('expandAllChannels called, toggles:', document.querySelectorAll('.channel-tree-toggle').length, 'nodes:', document.querySelectorAll('.channel-node').length, 'children:', document.querySelectorAll('.channel-children').length);
    document.querySelectorAll('.channel-tree-toggle').forEach(function(el) {
        el.classList.remove('collapsed');
    });
    document.querySelectorAll('.channel-children').forEach(function(el) {
        el.style.display = 'block';
    });
    document.querySelectorAll('.channel-node').forEach(function(n) {
        n.style.display = 'block';
    });
}

function collapseAllChannels() {
    document.querySelectorAll('.channel-tree-toggle').forEach(function(el) {
        el.classList.add('collapsed');
    });
    document.querySelectorAll('.channel-children').forEach(function(el) {
        el.style.display = 'none';
    });
    document.querySelectorAll('.channel-node').forEach(function(n) {
        n.style.display = 'none';
    });
}

// 快速新增栏目弹窗
function openQuickAdd() {
    var html = '<div style="max-height:60vh;overflow-y:auto;">';
    html += '<p style="color:#64748b;font-size:13px;margin-bottom:16px;">新增栏目请到 <a href="?act=channel&action=add" target="_blank" style="color:#2563eb;">栏目管理</a> 页面进行配置。</p>';
    html += '</div>';
    var overlay = document.createElement('div');
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center;';
    overlay.innerHTML = '<div style="background:#fff;border-radius:12px;padding:24px;width:360px;max-width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.2);">' +
        '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">' +
        '<h3 style="margin:0;font-size:15px;font-weight:600;color:#1e293b;">新增栏目</h3>' +
        '<button onclick="this.closest(\'.modal\').remove()" style="background:none;border:none;cursor:pointer;color:#94a3b8;font-size:18px;padding:4px;">✕</button></div>' +
        html +
        '</div>';
    overlay.className = 'modal';
    document.body.appendChild(overlay);
    overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); });
}

init();
</script>