SenSu/static/web_panel/pages/files.html

<!-- File Manager Page -->
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css?v=0601">
<div class="fm-container">
    <!-- Top bar: editable path + actions -->
    <div class="fm-toolbar">
        <input class="fm-path-input" id="fm-path-input" type="text" spellcheck="false" title="输入路径后回车跳转">
        <div class="fm-actions">
            <label class="fm-toggle">
                <input type="checkbox" id="fm-hidden" onchange="FilesModule.refresh()">
                <span>显示隐藏</span>
            </label>
            <button class="btn btn-sm btn-outlined" onclick="FilesModule.createFile()">
                <svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4zM8 14h8v2H8v-2zm0-4h8v2H8v-2z"/></svg>
                新建文件
            </button>
            <button class="btn btn-sm btn-outlined" onclick="FilesModule.createDir()">
                <svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-2 4h-3v3h-2v-3h-3V8h3V5h2v3h3v2z"/></svg>
                新建文件夹
            </button>
            <button class="btn btn-sm btn-tonal" onclick="document.getElementById('fm-upload-input').click()">
                <svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
                上传
            </button>
            <input type="file" id="fm-upload-input" multiple style="display:none" onchange="FilesModule.upload(this.files)">
        </div>
    </div>

    <!-- Breadcrumb row (own line) -->
    <div class="fm-breadcrumb" id="fm-breadcrumb"></div>

    <!-- File list -->
    <div class="fm-list" id="fm-list">
        <div style="text-align:center;color:var(--text-dim);padding:40px">加载中...</div>
    </div>

    <!-- Editor overlay -->
    <div class="fm-editor-overlay" id="fm-editor" style="display:none">
        <div class="fm-editor-header">
            <span id="fm-editor-title">编辑文件</span>
            <div>
                <button class="btn btn-sm btn-tonal" onclick="FilesModule.saveFile()">💾 保存</button>
                <button class="btn btn-sm btn-outlined" onclick="FilesModule.closeEditor()">✕ 关闭</button>
            </div>
        </div>
        <textarea id="fm-editor-textarea" spellcheck="false"></textarea>
    </div>

    <!-- Delete confirm dialog -->
    <div class="fm-dialog-overlay" id="fm-dialog" style="display:none">
        <div class="fm-dialog">
            <p id="fm-dialog-msg">确认删除？</p>
            <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px">
                <button class="btn btn-sm btn-outlined" onclick="FilesModule.closeDialog()">取消</button>
                <button class="btn btn-sm btn-danger" id="fm-dialog-confirm" onclick="FilesModule.confirmDelete()">删除</button>
            </div>
        </div>
    </div>

    <!-- Context menu -->
    <div class="fm-context" id="fm-context" style="display:none">
        <div class="fm-context-item" onclick="FilesModule.ctxDownload()"><svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg> 下载</div>
        <div class="fm-context-item" onclick="FilesModule.ctxRename()"><svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg> 重命名</div>
        <div class="fm-context-item" onclick="FilesModule.ctxEdit()"><svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4zM8 14h8v2H8v-2zm0-4h8v2H8v-2z"/></svg> 编辑</div>
        <div class="fm-context-sep"></div>
        <div class="fm-context-item danger" onclick="FilesModule.ctxDelete()"><svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg> 删除</div>
    </div>
</div>

<script>
// Load files.js for standalone mode (iframe picker)
if(window.parent !== window && !window.FilesModule){
    // Sync theme from parent window
    try {
        var parentTheme = window.parent.document.documentElement.getAttribute('data-theme');
        if(parentTheme) document.documentElement.setAttribute('data-theme', parentTheme);
    } catch(e){}

    // Reset body/container for iframe — no topbar, no sidebar
    var fmStyle=document.createElement('style');
    fmStyle.textContent='html,body{height:100%;margin:0;overflow:hidden}.fm-container{height:100%;gap:8px}.fm-list{padding-bottom:0}';
    document.head.appendChild(fmStyle);

    // Derive paths from our own URL: /SenSu/static/pages/files.html → /SenSu
    var apiBase = location.pathname.replace(/\/static\/pages\/files\.html.*$/, '');
    var script = document.createElement('script');
    script.src = apiBase + '/static/pages/files.js?v=0603';
    script.onload = function(){
        if(!window.FilesModule) return;
        window.FilesModule._apiBase = apiBase;
        window.FilesModule.init();
    };
    script.onerror = function(){
        document.body.innerHTML = '<div style=\"color:red;padding:20px\">Failed to load files.js</div>';
    };
    document.head.appendChild(script);
}
</script>