tanjingyu
/
data_nexus


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Nexus - 数据控制台</title>
    <meta name="description" content="Data Nexus 数据中台管理控制台">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet">
    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-base: #080c18;
            --bg-sidebar: #0c1222;
            --bg-surface: #111827;
            --bg-card: #151f32;
            --bg-card-head: rgba(0, 0, 0, 0.2);
            --bg-hover: rgba(255, 255, 255, 0.04);
            --bg-active: rgba(99, 179, 237, 0.08);
            --border: rgba(255, 255, 255, 0.06);
            --border-card: rgba(255, 255, 255, 0.08);
            --border-active: rgba(99, 179, 237, 0.35);
            --text-primary: #e2e8f0;
            --text-secondary: #8b9ab5;
            --text-muted: #556477;
            --accent: #63b3ed;
            --accent-light: #90cdf4;
            --accent-dim: rgba(99, 179, 237, 0.12);
            --green: #68d391;
            --green-dim: rgba(104, 211, 145, 0.12);
            --orange: #f6ad55;
            --orange-dim: rgba(246, 173, 85, 0.12);
            --purple: #b794f4;
            --radius: 8px;
            --sidebar-w: 280px;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg-base);
            color: var(--text-primary);
            height: 100vh;
            overflow: hidden;
            line-height: 1.5;
        }

        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.14);
        }

        /* Layout */
        .app {
            display: grid;
            grid-template-columns: var(--sidebar-w) 1fr;
            height: 100vh;
        }

        /* Sidebar */
        .sidebar {
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .sidebar-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px 20px 16px;
            flex-shrink: 0;
        }

        .sidebar-header svg {
            width: 26px;
            height: 26px;
            color: var(--accent);
            flex-shrink: 0;
        }

        .sidebar-header span {
            font-size: 16px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent-light), var(--purple));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sidebar-section {
            padding: 0 16px;
            flex-shrink: 0;
        }

        .sidebar-label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 12px 4px 8px;
        }

        .sidebar-divider {
            height: 1px;
            background: var(--border);
            margin: 8px 16px;
            flex-shrink: 0;
        }

        /* Project select */
        .select-wrap {
            position: relative;
        }

        .select-wrap::after {
            content: '';
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            border: 4px solid transparent;
            border-top: 5px solid var(--text-muted);
            pointer-events: none;
        }

        .project-select {
            width: 100%;
            padding: 9px 32px 9px 12px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 13px;
            cursor: pointer;
            appearance: none;
            outline: none;
            transition: border-color 0.2s;
        }

        .project-select:focus {
            border-color: var(--accent);
        }

        .project-select option {
            background: var(--bg-surface);
            color: var(--text-primary);
        }

        /* Stage tree */
        .stage-tree-wrap {
            flex: 1;
            overflow-y: auto;
            padding: 0 8px 16px;
        }

        .tree-branch-header {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 7px 10px;
            cursor: pointer;
            border-radius: 6px;
            transition: background 0.12s;
            user-select: none;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .tree-branch-header:hover {
            background: var(--bg-hover);
        }

        .tree-arrow {
            width: 16px;
            height: 16px;
            color: var(--text-muted);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .tree-arrow.open {
            transform: rotate(90deg);
        }

        .tree-children {
            display: none;
            padding-left: 8px;
            margin-left: 12px;
            border-left: 1px solid var(--border);
        }

        .tree-children.open {
            display: block;
        }

        .tree-leaf {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px 7px 12px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.12s;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .tree-leaf:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .tree-leaf.active {
            background: var(--bg-active);
            color: var(--accent);
            font-weight: 500;
        }

        .tree-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--text-muted);
            flex-shrink: 0;
        }

        .tree-leaf.active .tree-dot {
            background: var(--accent);
        }

        .tree-count {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.04);
            padding: 1px 6px;
            border-radius: 4px;
        }

        /* Content */
        .content {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        .content-header {
            flex-shrink: 0;
            padding: 18px 28px;
            border-bottom: 1px solid var(--border);
            background: rgba(12, 18, 34, 0.6);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 60px;
        }

        .stage-path {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
        }

        .stage-path .sep {
            color: var(--text-muted);
            font-size: 11px;
        }

        .stage-path .seg {
            color: var(--text-secondary);
        }

        .stage-path .seg:last-child {
            color: var(--text-primary);
            font-weight: 600;
        }

        .header-info {
            font-size: 12px;
            color: var(--text-muted);
        }

        .content-body {
            flex: 1;
            overflow-y: auto;
            padding: 24px 28px;
        }

        /* Welcome state */
        .state-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: var(--text-muted);
            padding: 40px;
        }

        .state-box svg {
            width: 56px;
            height: 56px;
            margin-bottom: 20px;
            opacity: 0.25;
        }

        .state-box h2 {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .state-box p {
            font-size: 13px;
        }

        /* Spinner */
        .spinner {
            width: 28px;
            height: 28px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            margin-bottom: 16px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Version card */
        .version-card {
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 16px;
            animation: fadeUp 0.35s ease forwards;
            opacity: 0;
        }

        .version-card:hover {
            border-color: rgba(255, 255, 255, 0.1);
        }

        .version-head {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-card-head);
            flex-wrap: wrap;
        }

        .v-author {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .v-time {
            margin-left: auto;
            font-size: 12px;
            color: var(--text-muted);
        }

        /* File row grid */
        .file-row {
            display: grid;
            grid-template-columns: 1fr 100px;
            gap: 16px;
            align-items: center;
            padding: 12px 20px;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s;
        }

        .file-row:last-child {
            border-bottom: none;
        }

        .file-row:hover {
            background: var(--bg-hover);
        }

        .file-name-col {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            /* allows text truncation */
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .f-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            color: var(--text-muted);
        }

        .f-name {
            font-size: 13px;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .f-size {
            font-size: 11px;
            color: var(--text-muted);
            margin-left: 6px;
        }

        .col-text {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .commit-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            font-weight: 500;
            color: var(--accent);
            background: var(--accent-dim);
            padding: 3px 10px;
            border-radius: 5px;
        }

        .commit-tag svg {
            width: 14px;
            height: 14px;
        }

        .btn-dl-wrap {
            display: flex;
            justify-content: flex-end;
        }

        .btn-dl {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 5px;
            border: none;
            background: var(--accent-dim);
            color: var(--accent);
            font-size: 12px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
            flex-shrink: 0;
        }

        .btn-dl:hover {
            background: rgba(99, 179, 237, 0.2);
        }

        .btn-dl svg {
            width: 13px;
            height: 13px;
        }

        /* File group (folder) */
        .fg-header {
            display: grid;
            grid-template-columns: 1fr 100px;
            gap: 16px;
            align-items: center;
            padding: 12px 20px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.1s;
            user-select: none;
        }

        .fg-header:hover {
            background: var(--bg-hover);
        }

        .fg-name-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .fg-header:hover {
            background: var(--bg-hover);
        }

        .fg-arrow {
            width: 14px;
            height: 14px;
            color: var(--text-muted);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .fg-arrow.open {
            transform: rotate(90deg);
        }

        .fg-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            color: var(--orange);
        }

        .fg-name {
            font-size: 13px;
            color: var(--text-primary);
            font-weight: 500;
        }

        .fg-count {
            font-size: 11px;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.04);
            padding: 1px 7px;
            border-radius: 4px;
            margin-left: 4px;
        }

        .fg-children {
            display: none;
            background: rgba(0, 0, 0, 0.1);
        }

        .fg-children.open {
            display: block;
        }

        /* Load more */
        .load-more {
            display: flex;
            justify-content: center;
            padding: 16px;
        }

        .load-more-btn {
            padding: 9px 28px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .load-more-btn:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            border-color: var(--border-active);
        }

        .load-more-btn:disabled {
            opacity: 0.4;
            cursor: default;
        }
    </style>
</head>

<body>
    <div class="app">
        <aside class="sidebar">
            <div class="sidebar-header">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path
                        d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
                    <line x1="12" y1="22.08" x2="12" y2="12" />
                </svg>
                <span>Data Nexus</span>
            </div>
            <div class="sidebar-divider"></div>
            <div class="stage-tree-wrap" id="stageTreeWrap"></div>
        </aside>
        <main class="content">
            <div class="content-header">
                <div class="stage-path" id="stagePath"><span class="seg" style="color:var(--text-muted)">选择左侧数据阶段</span>
                </div>
                <div class="header-info" id="headerInfo"></div>
            </div>
            <div class="content-body" id="contentBody">
                <div class="state-box">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path
                            d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
                        <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
                        <line x1="12" y1="22.08" x2="12" y2="12" />
                    </svg>
                    <h2>欢迎使用数据控制台</h2>
                    <p>从左侧选择数据阶段，查看文件版本历史</p>
                </div>
            </div>
        </main>
    </div>

    <script>
        // ============ Icons ============
        const IC = {
            commit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><line x1="1.05" y1="12" x2="7" y2="12"/><line x1="17.01" y1="12" x2="22.96" y2="12"/></svg>',
            file: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
            folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>',
            download: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
            chevron: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>',
        };

        // ============ State ============
        const PAGE_SIZE = 20;
        let S = {
            stages: [],       // raw stage data from /stages/all
            stageProjectMap: {}, // stage name -> project_id
            stage: null,
            versions: [],
            skip: 0,
            hasMore: true,
            loading: false,
        };

        const $ = id => document.getElementById(id);

        // ============ Utils ============
        function esc(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
        function fmtSize(b) {
            if (!b && b !== 0) return '-';
            const u = ['B', 'KB', 'MB', 'GB']; let i = 0, s = b;
            while (s >= 1024 && i < u.length - 1) { s /= 1024; i++; }
            return s.toFixed(i > 0 ? 1 : 0) + ' ' + u[i];
        }
        function fmtTime(iso) {
            if (!iso) return '';
            const d = new Date(iso), p = n => String(n).padStart(2, '0');
            return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
        }
        function relTime(iso) {
            if (!iso) return '';
            const m = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
            if (m < 1) return '刚刚'; if (m < 60) return m + ' 分钟前';
            const h = Math.floor(m / 60); if (h < 24) return h + ' 小时前';
            const d = Math.floor(h / 24); if (d < 30) return d + ' 天前';
            return fmtTime(iso);
        }
        async function api(url) { const r = await fetch(url); if (!r.ok) throw new Error(r.status); return r.json(); }

        // ============ Load All Stages ============
        async function loadAllStages() {
            $('stageTreeWrap').innerHTML = '<div style="padding:16px;text-align:center;"><div class="spinner" style="margin:0 auto 8px;"></div><span style="font-size:12px;color:var(--text-muted)">加载中...</span></div>';
            try {
                S.stages = await api('/stages/all');
                // Build stage -> project_id mapping
                S.stageProjectMap = {};
                S.stages.forEach(st => { S.stageProjectMap[st.name] = st.project_id; });
                renderStageTree();
            } catch (e) { $('stageTreeWrap').innerHTML = '<div style="padding:16px;color:#fc8181;font-size:13px;">加载失败</div>'; }
        }

        // ============ Stage Tree ============
        function buildTree(stages) {
            const root = [];
            for (const st of stages) {
                const parts = st.name.split('/');
                let cur = root;
                for (let i = 0; i < parts.length; i++) {
                    let node = cur.find(n => n.label === parts[i]);
                    if (!node) {
                        node = { label: parts[i], children: [] };
                        cur.push(node);
                    }
                    if (i === parts.length - 1) {
                        node.stage = st.name;
                        node.count = st.version_count;
                    }
                    cur = node.children;
                }
            }
            return root;
        }

        function renderStageTree() {
            const tree = buildTree(S.stages);
            $('stageTreeWrap').innerHTML = tree.length ? renderNodes(tree) : '<div style="padding:16px;font-size:13px;color:var(--text-muted)">暂无数据阶段</div>';
        }

        function renderNodes(nodes) {
            let h = '';
            for (const n of nodes) {
                if (n.stage && n.children.length === 0) {
                    // Leaf
                    h += `<div class="tree-leaf" data-stage="${esc(n.stage)}" onclick="selectStage(this, '${esc(n.stage)}')">
                <span class="tree-dot"></span>
                <span>${esc(n.label)}</span>
                <span class="tree-count">${n.count || ''}</span>
            </div>`;
                } else {
                    // Branch (may also be a stage itself)
                    const id = 'tb_' + Math.random().toString(36).substr(2, 6);
                    h += `<div>
                <div class="tree-branch-header" onclick="toggleBranch('${id}', this)">
                    <span class="tree-arrow" id="a_${id}">${IC.chevron}</span>
                    <span>${esc(n.label)}</span>
                </div>
                <div class="tree-children" id="${id}">${renderNodes(n.children)}</div>
            </div>`;
                }
            }
            return h;
        }

        function toggleBranch(id, el) {
            const ch = $(id), ar = $('a_' + id);
            if (ch) ch.classList.toggle('open');
            if (ar) ar.classList.toggle('open');
        }

        function selectStage(el, stageName) {
            // Highlight
            document.querySelectorAll('.tree-leaf.active').forEach(e => e.classList.remove('active'));
            el.classList.add('active');
            S.stage = stageName;
            S.versions = []; S.skip = 0; S.hasMore = true;
            updateHeader();
            loadVersions();
        }

        // ============ Header ============
        function updateHeader() {
            if (!S.stage) {
                $('stagePath').innerHTML = '<span class="seg" style="color:var(--text-muted)">选择左侧数据阶段</span>';
                $('headerInfo').textContent = '';
                return;
            }
            const parts = S.stage.split('/');
            $('stagePath').innerHTML = parts.map((p, i) =>
                `${i > 0 ? '<span class="sep">/</span>' : ''}<span class="seg">${esc(p)}</span>`
            ).join('');
        }

        // ============ Versions ============
        async function loadVersions(append) {
            if (S.loading) return;
            S.loading = true;
            if (!append) {
                $('contentBody').innerHTML = '<div class="state-box"><div class="spinner"></div><p>加载中...</p></div>';
            }
            try {
                const pid = S.stageProjectMap[S.stage];
                const data = await api(`/projects/${pid}/stage-files?stage=${encodeURIComponent(S.stage)}&skip=${S.skip}&limit=${PAGE_SIZE}`);
                if (!append) S.versions = [];
                S.versions.push(...data);
                S.hasMore = data.length >= PAGE_SIZE;
                S.skip += data.length;
                renderVersions();
                const stageInfo = S.stages.find(s => s.name === S.stage);
                $('headerInfo').textContent = stageInfo ? `共 ${stageInfo.version_count} 次提交` : '';
            } catch (e) {
                if (!append) $('contentBody').innerHTML = '<div class="state-box"><p style="color:#fc8181;">加载失败: ' + esc(e.message) + '</p></div>';
            }
            S.loading = false;
        }

        function renderVersions() {
            if (!S.versions.length) {
                $('contentBody').innerHTML = '<div class="state-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><h2>暂无数据</h2><p>该阶段还没有提交记录</p></div>';
                return;
            }
            let h = '';

            S.versions.forEach((v, i) => {
                const groups = groupFiles(v.files);
                h += `<div class="version-card" style="animation-delay:${Math.min(i, 10) * 0.05}s">
            <div class="version-head">
                <span class="commit-tag">${IC.commit} ${esc(v.commit_id.substring(0, 8))}</span>
                <span class="v-author">${v.author ? esc(v.author) : ''}</span>
                <span class="v-time" title="${fmtTime(v.created_at)}">${relTime(v.created_at)}</span>
            </div>
            <div class="version-files">${renderGroups(groups, v)}</div>
        </div>`;
            });
            if (S.hasMore) {
                h += '<div class="load-more"><button class="load-more-btn" onclick="loadMore()">加载更多</button></div>';
            }
            $('contentBody').innerHTML = h;
        }

        function loadMore() {
            const btn = document.querySelector('.load-more-btn');
            if (btn) { btn.disabled = true; btn.textContent = '加载中...'; }
            loadVersions(true);
        }

        // ============ File Grouping ============
        function groupFiles(files) {
            if (!files || !files.length) return [];

            const topLevelGroups = {};
            const rootFiles = [];

            files.forEach(f => {
                const parts = f.relative_path.split('/');
                if (parts.length === 1) {
                    rootFiles.push(f);
                } else {
                    const topDir = parts[0];
                    if (!topLevelGroups[topDir]) topLevelGroups[topDir] = [];
                    topLevelGroups[topDir].push(f);
                }
            });

            const result = [];
            Object.entries(topLevelGroups).forEach(([topDir, fls]) => {
                let commonParts = fls[0].relative_path.split('/').slice(0, -1);
                for (let i = 1; i < fls.length; i++) {
                    const parts = fls[i].relative_path.split('/').slice(0, -1);
                    let j = 0;
                    while (j < commonParts.length && j < parts.length && commonParts[j] === parts[j]) {
                        j++;
                    }
                    commonParts.length = j;
                }
                const groupName = commonParts.join('/');
                result.push({ type: 'folder', name: groupName, path: groupName, files: fls });
            });

            rootFiles.forEach(f => {
                result.push({ type: 'file', file: f });
            });

            result.sort((a, b) => {
                if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
                return (a.name || a.file.name).localeCompare(b.name || b.file.name);
            });
            return result;
        }

        function renderGroups(groups, version) {
            if (!groups.length) return '';
            let h = '';
            groups.forEach(g => {
                if (g.type === 'folder') {
                    const gid = 'fg_' + Math.random().toString(36).substr(2, 6);
                    h += `
            <div class="fg-header" onclick="toggleFG('${gid}')">
                <div class="fg-name-wrap">
                    <span class="fg-arrow" id="fa_${gid}">${IC.chevron}</span>
                    <span class="fg-icon">${IC.folder}</span>
                    <span class="fg-name">${esc(g.name)}/</span>
                    <span class="fg-count">${g.files.length} 个文件</span>
                </div>
                <div></div>
            </div>
            <div class="fg-children" id="${gid}">
                ${g.files.map(f => fileRow(f, version, true, g.path)).join('')}
            </div>`;
                } else {
                    h += fileRow(g.file, version, false, null);
                }
            });
            return h;
        }

        function fileRow(f, version, isChild, groupPath) {
            const padding = isChild ? 'padding-left: 44px;' : '';
            let displayName = f.name;
            if (groupPath && f.relative_path.startsWith(groupPath + '/')) {
                displayName = f.relative_path.substring(groupPath.length + 1);
            }
            return `
    <div class="file-row" style="${padding}">
        <div class="file-name-col" title="${esc(f.relative_path)}">
            <span class="f-icon">${IC.file}</span>
            <span class="f-name">${esc(displayName)}</span>
            <span class="f-size">${fmtSize(f.file_size)}</span>
        </div>
        <div class="btn-dl-wrap">
            <a class="btn-dl" href="/files/${f.id}/content" download="${esc(f.name)}" onclick="event.stopPropagation();">${IC.download}</a>
        </div>
    </div>`;
        }

        function toggleFG(id) {
            const ch = $(id), ar = $('fa_' + id);
            if (ch) ch.classList.toggle('open');
            if (ar) ar.classList.toggle('open');
        }

        // ============ UI Helpers ============
        function showWelcome() {
            $('stagePath').innerHTML = '<span class="seg" style="color:var(--text-muted)">选择左侧数据阶段</span>';
            $('headerInfo').textContent = '';
            $('contentBody').innerHTML = `<div class="state-box">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
        </svg>
        <h2>欢迎使用数据控制台</h2>
        <p>从左侧选择数据阶段，查看文件版本历史</p>
    </div>`;
        }

        // ============ Init ============
        loadAllStages();
    </script>
</body>

</html>