195 lines
7.8 KiB
HTML
195 lines
7.8 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="color-scheme" content="light dark" />
|
||
<title>Harmony Connector</title>
|
||
<link rel="stylesheet" href="./style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brand-mark" aria-hidden="true">↔</div>
|
||
<div>
|
||
<strong>Harmony<br />Connector</strong><span>让文件，自在往来</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-label">设备</div>
|
||
<div class="device-card">
|
||
<span class="device-icon" aria-hidden="true">▯</span>
|
||
<div>
|
||
<strong id="device-name">等待连接</strong
|
||
><span id="device-state">USB 文件传输</span>
|
||
</div>
|
||
<i id="device-dot"></i>
|
||
</div>
|
||
<button id="disconnect" class="subtle" hidden>断开连接</button>
|
||
<div class="section-label storage-label">存储位置</div>
|
||
<nav id="storages" aria-label="设备存储">
|
||
<p class="muted">连接后查看可用存储</p>
|
||
</nav>
|
||
<div class="sidebar-bottom">
|
||
<span class="small-badge">HarmonyOS 6</span>
|
||
<p>文件留在你的设备之间。<br />通过 USB 直接传输。</p>
|
||
<button id="guide-open" class="text-button">
|
||
连接与使用帮助 <span aria-hidden="true">↗</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
<main>
|
||
<header class="topbar">
|
||
<div>
|
||
<p class="eyebrow">YOUR FILES, CONNECTED</p>
|
||
<h1 id="page-title">连接你的鸿蒙设备</h1>
|
||
</div>
|
||
<button id="scan" class="secondary">扫描设备</button>
|
||
</header>
|
||
<div id="notice" class="notice" role="alert" hidden>
|
||
<span id="notice-text"></span
|
||
><button id="notice-close" aria-label="关闭提示">×</button>
|
||
</div>
|
||
<section id="welcome" class="welcome">
|
||
<div class="connection-art" aria-hidden="true">
|
||
<div class="mac">
|
||
<div><span>↗</span></div>
|
||
<i></i>
|
||
</div>
|
||
<div class="connection-line"><i></i><i></i><i></i></div>
|
||
<div class="phone"><span></span><b>↙</b><i></i></div>
|
||
</div>
|
||
<span class="small-badge">MAC ↔ HARMONY</span>
|
||
<h2>一根数据线，<br />连接两个世界。</h2>
|
||
<p class="intro">
|
||
照片、文档、灵感碎片。<br />在 Mac 与鸿蒙设备之间，轻松收发。
|
||
</p>
|
||
<ol class="steps">
|
||
<li><b>1</b>解锁手机并连接 USB 数据线</li>
|
||
<li><b>2</b>在手机上选择「传输文件」</li>
|
||
<li><b>3</b>扫描设备，开始浏览</li>
|
||
</ol>
|
||
<div id="device-picker" hidden>
|
||
<label for="device-select">选择设备</label>
|
||
<div class="device-picker-row">
|
||
<select id="device-select"></select
|
||
><button id="connect" class="primary">连接设备</button>
|
||
</div>
|
||
</div>
|
||
<p id="scan-status" class="muted" role="status">
|
||
无需开发者模式，也无需安装手机端应用。
|
||
</p>
|
||
</section>
|
||
<section id="browser" class="browser" hidden>
|
||
<div class="toolbar">
|
||
<nav id="breadcrumbs" aria-label="当前位置"></nav>
|
||
<div class="actions">
|
||
<button id="refresh" class="secondary" title="刷新当前文件夹">
|
||
刷新</button
|
||
><button id="mkdir" class="secondary">新建文件夹</button
|
||
><button id="upload" class="primary">↑ 发送文件</button>
|
||
</div>
|
||
</div>
|
||
<div class="list-heading">
|
||
<label class="search"
|
||
><span aria-hidden="true">⌕</span
|
||
><input
|
||
id="search"
|
||
type="search"
|
||
placeholder="筛选已加载的文件"
|
||
aria-label="筛选已加载的文件" /></label
|
||
><span id="file-count" class="muted"></span>
|
||
</div>
|
||
<div class="file-table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>名称</th>
|
||
<th>大小</th>
|
||
<th>修改时间</th>
|
||
<th><span class="sr-only">操作</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="files"></tbody>
|
||
</table>
|
||
<p id="empty" class="empty" hidden>
|
||
这个文件夹还是空的，发送第一个文件吧。
|
||
</p>
|
||
<button id="load-more" class="secondary load-more" hidden>
|
||
加载更多
|
||
</button>
|
||
</div>
|
||
<p class="browser-footnote">
|
||
接收保留原文件名，同名文件不会被覆盖。一次传输一个文件。
|
||
</p>
|
||
</section>
|
||
<section id="transfer" class="transfer" aria-label="文件传输" hidden>
|
||
<div class="transfer-top">
|
||
<div>
|
||
<strong id="transfer-title">正在传输</strong>
|
||
<p id="transfer-detail" role="status"></p>
|
||
</div>
|
||
<button id="cancel" class="secondary">取消传输</button>
|
||
</div>
|
||
<progress
|
||
id="progress"
|
||
max="100"
|
||
value="0"
|
||
aria-label="传输进度"
|
||
></progress>
|
||
</section>
|
||
<footer>
|
||
<span><i class="status-dot"></i> 本地直连</span
|
||
><span id="footer-status" role="status">准备就绪</span>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
<dialog id="guide">
|
||
<div class="dialog-header">
|
||
<h2>连接，开始传输</h2>
|
||
<button id="guide-close" aria-label="关闭帮助">×</button>
|
||
</div>
|
||
<p>适用于 HarmonyOS 6 开放的 USB 文件传输存储。</p>
|
||
<ol>
|
||
<li>使用支持数据传输的 USB 线连接 Mac 与手机，并保持手机解锁。</li>
|
||
<li>在手机 USB 选项中选择「传输文件」，按提示允许访问。</li>
|
||
<li>
|
||
点击「扫描设备」，选择手机并连接。打开文件夹后可发送文件，或点击文件旁的「接收」。
|
||
</li>
|
||
</ol>
|
||
<h3>没有发现设备？</h3>
|
||
<p>
|
||
重新插拔数据线，检查手机 USB
|
||
模式。退出可能占用手机的其他文件传输应用，再扫描一次。
|
||
</p>
|
||
<h3>照片与图库</h3>
|
||
<p>
|
||
HarmonyOS 6
|
||
的「传输文件」模式可导出图库内容；导入图库需「传输图片」模式。当前版本仅支持文件传输模式，向普通文件夹发送照片不等于导入图库。
|
||
</p>
|
||
<h3>取消与关闭</h3>
|
||
<p>
|
||
取消需要等待手机响应，随后请重新连接。手机可能保留未完成的上传文件；可在手机上检查并清理。请等待传输结束再关闭插件。拔线、强制退出或系统断电时，Mac
|
||
接收文件夹可能留下 .harmony-*.part 临时文件。
|
||
</p>
|
||
<p class="muted">
|
||
文件夹请先压缩后发送。不同机型开放的目录与访问权限以手机为准。
|
||
</p>
|
||
</dialog>
|
||
<dialog id="folder-dialog">
|
||
<form id="folder-form">
|
||
<h2>新建文件夹</h2>
|
||
<label for="folder-name">文件夹名称</label
|
||
><input id="folder-name" required maxlength="100" autocomplete="off" />
|
||
<p id="folder-error" class="field-error" role="alert"></p>
|
||
<div class="dialog-actions">
|
||
<button type="button" id="folder-cancel" class="secondary">
|
||
取消</button
|
||
><button type="submit" class="primary">创建</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
<script type="module" src="./app.js"></script>
|
||
</body>
|
||
</html>
|