Files
duplicati_preview/public/source.html
T

146 lines
6.5 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>
<main class="shell">
<nav class="crumbs">
<a href="/">数据源控制台</a>
<span>/</span>
<span>数据源工作台</span>
</nav>
<section class="hero hero-compact">
<div>
<p class="eyebrow">Source Workbench</p>
<h1 id="pageTitle">数据源工作台</h1>
</div>
<p class="lead">
这里负责单个数据源的目录浏览、增强配置和预览图缓存管理。页面已经拆成菜单式工作台,避免所有功能都堆在一个长页面里。
</p>
</section>
<div class="auth-toolbar">
<span id="authStatus" class="auth-status">正在读取登录状态...</span>
<button id="logoutButton" class="ghost-button" type="button">退出登录</button>
</div>
<div id="feedback" class="feedback" hidden></div>
<section class="workspace-shell">
<aside class="workspace-nav" aria-label="数据源工作台菜单">
<a class="workspace-nav-link" href="#overview" data-view-link="overview">概况</a>
<a class="workspace-nav-link" href="#browse" data-view-link="browse">目录浏览</a>
<a class="workspace-nav-link" href="#enhance" data-view-link="enhance">增强配置</a>
<a class="workspace-nav-link" href="#thumbnails" data-view-link="thumbnails">预览图缓存</a>
</aside>
<div class="workspace-content">
<section class="workspace-panel" data-view-panel="overview">
<div class="panel">
<div class="panel-header">
<div>
<p class="section-label">Source</p>
<h2>源概况</h2>
</div>
</div>
<div id="sourceSummary" class="empty-state-card">正在读取数据源概况...</div>
</div>
</section>
<section class="workspace-panel" data-view-panel="browse" hidden>
<div class="panel">
<div class="panel-header">
<div>
<p class="section-label">Directory</p>
<h2>目录浏览</h2>
</div>
</div>
<div class="toolbar-cluster">
<div class="file-toolbar">
<button id="browseUpButton" class="ghost-button" type="button">上一级</button>
<button id="browseRootButton" class="ghost-button" type="button">根目录</button>
<button id="browseRefreshButton" class="ghost-button" type="button">刷新当前目录</button>
</div>
<div id="pathTrail" class="path-trail">/</div>
</div>
<div id="browseResult" class="browse-shell">正在读取目录...</div>
</div>
</section>
<section class="workspace-panel" data-view-panel="enhance" hidden>
<div class="panel">
<div class="panel-header">
<div>
<p class="section-label">Enhancement</p>
<h2>增强配置</h2>
</div>
</div>
<p class="panel-copy">
默认情况下,增强会优先使用全局 WebDAV 默认值,并尽量从 <code>Duplicati-server.sqlite</code> 自动推导当前任务的目标 URL。
这里只需要填写与全局不同的部分;全部留空并保存,会清掉当前 source 的覆盖设置。
</p>
<div id="webdavHint" class="summary-card">正在计算这个 source 的默认 WebDAV 目标...</div>
<form id="secretForm" class="secret-form">
<label>
<span>Source override: WebDAV Base URL</span>
<input id="webdavBaseUrl" name="webdavBaseUrl" type="url" placeholder="留空则自动使用全局默认或 Server DB 推导值">
</label>
<label>
<span>认证方式</span>
<select id="authMode" name="authMode">
<option value="">自动 / 继承</option>
<option value="basic">Basic</option>
<option value="anonymous">Anonymous</option>
</select>
</label>
<label>
<span>用户名</span>
<input id="username" name="username" type="text" placeholder="留空则继承全局默认">
</label>
<label>
<span>密码</span>
<input id="password" name="password" type="password" placeholder="留空则继承全局默认">
</label>
<label>
<span>备份口令</span>
<input id="passphrase" name="passphrase" type="password" placeholder="留空则继承全局默认">
</label>
<div class="form-actions">
<button id="saveSecretsButton" class="ghost-button" type="submit">保存覆盖</button>
<button id="runEnhancementButton" class="primary-button" type="button">按当前规则启动增强</button>
<button id="deleteSourceButton" class="ghost-button danger-button" type="button">删除这个 source</button>
</div>
</form>
</div>
</section>
<section class="workspace-panel" data-view-panel="thumbnails" hidden>
<div class="panel">
<div class="panel-header">
<div>
<p class="section-label">Preview Thumbnails</p>
<h2>预览图缓存</h2>
</div>
</div>
<p class="panel-copy">
这里展示当前 source 已缓存到后端的预览图数量。清空后,目录里的视频文件会退回占位图,后续再次成功预览时会自动重建。
</p>
<div id="sourceThumbnailSummary" class="summary-card">正在统计这个 source 的预览图缓存...</div>
<div class="form-actions">
<button id="clearSourceThumbnailsButton" class="ghost-button danger-button" type="button">清空当前 source 预览图</button>
</div>
</div>
</section>
</div>
</section>
</main>
<script type="module" src="/source.js"></script>
</body>
</html>