nanxun
fcf56bcbd3
将原来的三页跳转结构（控制台/工作台/文件页）重构为单页资源管理器： 左侧数据源盘符树、主区列表/网格双视图、右侧内嵌播放器与详情面板， 管理功能收进侧栏对话框。媒体引擎（media-core + media-sw）原样复用， 仅把 file.js 的播放器逻辑抽成参数驱动组件。默认路由指向 explorer。 - 新增 explorer.html/js 与 modules/explorer/ 六个组件模块 - 删除旧的 index/source/file 页面及其控制器 - styles.css 新增 explorer 布局与三档响应式断点
172 lines
8.4 KiB
HTML
172 lines
8.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>数据源资源管理器</title>
|
||
<link rel="stylesheet" href="/styles.css">
|
||
</head>
|
||
<body class="explorer-body">
|
||
<div class="explorer-app">
|
||
<!-- 顶栏 -->
|
||
<header class="explorer-topbar">
|
||
<button id="sidebarToggle" class="explorer-icon-btn explorer-hamburger" type="button" title="菜单" aria-label="切换侧栏">☰</button>
|
||
<div class="explorer-brand"><span class="explorer-logo">▤</span><span>数据源资源管理器</span></div>
|
||
<div class="explorer-search">
|
||
<span aria-hidden="true">🔎</span>
|
||
<input id="searchInput" type="search" placeholder="搜索当前目录…" aria-label="搜索当前目录">
|
||
</div>
|
||
<div class="explorer-auth">
|
||
<span id="authStatus" class="auth-status">正在读取登录状态...</span>
|
||
<button id="logoutButton" class="explorer-icon-btn" type="button" title="退出登录" aria-label="退出登录">⎋</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="feedback" class="feedback explorer-feedback" hidden></div>
|
||
|
||
<!-- 主分栏 -->
|
||
<div id="split" class="explorer-split with-detail">
|
||
<!-- 左侧栏 -->
|
||
<aside id="sidebarBackdrop" class="explorer-backdrop" hidden></aside>
|
||
<aside id="sidebar" class="explorer-sidebar" aria-label="数据源与管理">
|
||
<div class="explorer-side-label">数据源</div>
|
||
<div id="sourceTree" class="explorer-tree">正在读取数据源...</div>
|
||
|
||
<div class="explorer-side-divider"></div>
|
||
<div class="explorer-side-label">⚙ 管理</div>
|
||
<button class="explorer-manage-link" type="button" data-manage="sources">🗂 数据源总览</button>
|
||
<button class="explorer-manage-link" type="button" data-manage="upload">⬆ 上传任务库</button>
|
||
<button class="explorer-manage-link" type="button" data-manage="server-db">🗄 Server DB</button>
|
||
<button class="explorer-manage-link" type="button" data-manage="defaults">🌐 全局 WebDAV</button>
|
||
<button class="explorer-manage-link" type="button" data-manage="tls">🔒 HTTPS / TLS</button>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<section class="explorer-main">
|
||
<!-- 导航条 -->
|
||
<div class="explorer-navbar">
|
||
<div class="explorer-nav-arrows">
|
||
<button id="navUp" class="explorer-icon-btn" type="button" title="上一级">↑</button>
|
||
<button id="navRoot" class="explorer-icon-btn" type="button" title="根目录">⌂</button>
|
||
<button id="navRefresh" class="explorer-icon-btn" type="button" title="刷新">⟳</button>
|
||
</div>
|
||
<nav id="breadcrumb" class="explorer-crumbs" aria-label="路径">/</nav>
|
||
<div class="explorer-view-toggle" role="group" aria-label="视图切换">
|
||
<button id="viewGrid" type="button" title="网格视图" aria-label="网格视图">▦</button>
|
||
<button id="viewList" class="active" type="button" title="列表视图" aria-label="列表视图">▤</button>
|
||
</div>
|
||
<label class="explorer-sort">
|
||
排序
|
||
<select id="sortSelect" aria-label="排序方式">
|
||
<option value="name:asc">名称 ↑</option>
|
||
<option value="name:desc">名称 ↓</option>
|
||
<option value="size:asc">大小 ↑</option>
|
||
<option value="size:desc">大小 ↓</option>
|
||
<option value="type:asc">类型 ↑</option>
|
||
<option value="mtime:asc">时间 ↑</option>
|
||
<option value="mtime:desc">时间 ↓</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 选择操作条 -->
|
||
<div id="actionBar" class="explorer-action-bar" hidden>
|
||
<label class="explorer-select-all">
|
||
<input id="selectAllCheckbox" type="checkbox">
|
||
<span>全选</span>
|
||
</label>
|
||
<button id="batchDownloadButton" class="primary-button explorer-pill" type="button" disabled>↓ 下载</button>
|
||
<button id="clearSelectionButton" class="ghost-button explorer-pill" type="button">清除选择</button>
|
||
<div class="explorer-spacer"></div>
|
||
<span id="selectionCount" class="batch-count">已选 0 项</span>
|
||
</div>
|
||
|
||
<!-- 文件区 -->
|
||
<div id="fileArea" class="explorer-file-area">正在读取目录...</div>
|
||
|
||
<!-- 批量下载进度 -->
|
||
<div id="batchProgress" class="explorer-batch-progress" hidden>
|
||
<div id="batchProgressContent" class="summary-card">准备中...</div>
|
||
</div>
|
||
|
||
<!-- 状态栏 -->
|
||
<div class="explorer-statusbar">
|
||
<span id="statusItems">—</span>
|
||
<span id="statusSelected"></span>
|
||
<div class="explorer-spacer"></div>
|
||
<button id="toggleDetail" class="explorer-link-like" type="button">隐藏详情面板 ▸</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 右侧详情面板 -->
|
||
<aside id="detail" class="explorer-detail" aria-label="详情">
|
||
<div id="detailContent" class="explorer-detail-content">
|
||
<div class="empty-state-card">选中一个文件或数据源查看详情。</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右键菜单：文件 / 文件夹 -->
|
||
<div id="ctxFile" class="explorer-context-menu" hidden>
|
||
<button type="button" data-action="open">📂 打开</button>
|
||
<button type="button" data-action="preview">▶ 预览</button>
|
||
<button type="button" data-action="download">↓ 下载</button>
|
||
<hr>
|
||
<button type="button" data-action="details">ℹ 详情</button>
|
||
</div>
|
||
|
||
<!-- 右键菜单：数据源盘符 -->
|
||
<div id="ctxDrive" class="explorer-context-menu" hidden>
|
||
<button type="button" data-action="open">📂 打开</button>
|
||
<button type="button" data-action="refresh">⟳ 刷新</button>
|
||
<button type="button" data-action="props">⚙ 属性 / 增强配置</button>
|
||
<hr>
|
||
<button type="button" data-action="delete" class="danger">🗑 删除数据源</button>
|
||
</div>
|
||
|
||
<!-- 源属性对话框 -->
|
||
<div id="propsOverlay" class="explorer-overlay" hidden>
|
||
<div class="explorer-dialog" role="dialog" aria-modal="true" aria-labelledby="propsTitle">
|
||
<div id="propsBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管理对话框 -->
|
||
<div id="manageOverlay" class="explorer-overlay" hidden>
|
||
<div class="explorer-dialog explorer-dialog-wide" role="dialog" aria-modal="true">
|
||
<div id="manageBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量下载凭据弹窗 -->
|
||
<div id="credentialOverlay" class="explorer-overlay" hidden>
|
||
<div class="explorer-dialog" role="dialog" aria-modal="true">
|
||
<h3 class="serif">浏览器直连凭据</h3>
|
||
<p class="panel-copy">下载与预览需要在浏览器端直连 WebDAV 解密，请填写目标 URL 和备份口令。勾选"记住"会保存到浏览器 IndexedDB。</p>
|
||
<form id="credentialForm" class="secret-form">
|
||
<label><span>WebDAV Base URL</span><input id="credWebdavBaseUrl" name="webdavBaseUrl" type="url" placeholder="WebDAV 目标 URL"></label>
|
||
<label><span>认证方式</span>
|
||
<select id="credAuthMode" name="authMode">
|
||
<option value="basic">Basic</option>
|
||
<option value="anonymous">Anonymous</option>
|
||
</select>
|
||
</label>
|
||
<label><span>用户名</span><input id="credUsername" name="username" type="text"></label>
|
||
<label><span>密码</span><input id="credPassword" name="password" type="password"></label>
|
||
<label><span>备份口令</span><input id="credPassphrase" name="passphrase" type="password"></label>
|
||
<label class="checkbox-row"><input id="credRemember" name="rememberOnDevice" type="checkbox"><span>记住为当前 source 的浏览器本地覆盖</span></label>
|
||
<div class="form-actions">
|
||
<button class="primary-button" type="submit">确认</button>
|
||
<button id="credCancel" class="ghost-button" type="button">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<canvas id="thumbnailCaptureCanvas" hidden></canvas>
|
||
|
||
<script type="module" src="/explorer.js"></script>
|
||
</body>
|
||
</html>
|