@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>发送文件 - Dpz Transfer</title>
<link rel="stylesheet" href="https://dpangzi.com/library/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="~/styles/file-transfer.css" asp-append-version="true" />
</head>
<body class="transfer-page" data-transfer-mode="sender">
<header class="transfer-topbar">
<a class="transfer-topbar__brand" asp-controller="FileTransfer" asp-action="Send">
<i class="fa-solid fa-bolt" aria-hidden="true"></i>
文件传输助手
</a>
<nav class="transfer-topbar__nav" aria-label="传输模式">
<a class="transfer-topbar__link transfer-topbar__link--active" asp-controller="FileTransfer" asp-action="Send">
<i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
发送
</a>
<a class="transfer-topbar__link" asp-controller="FileTransfer" asp-action="Receive">
<i class="fa-solid fa-inbox" aria-hidden="true"></i>
接收
</a>
</nav>
</header>
<main class="transfer-shell">
<section class="transfer-panel transfer-panel--room" aria-labelledby="room-title">
<div class="transfer-panel__header">
<div>
<p class="transfer-panel__eyebrow">发送端</p>
<h1 class="transfer-panel__title" id="room-title">
<i class="fa-solid fa-qrcode" aria-hidden="true"></i>
创建传输房间
</h1>
</div>
<span class="transfer-status" data-status>连接中</span>
</div>
<div class="transfer-room">
<canvas class="transfer-room__qr" width="224" height="224" data-qr></canvas>
<div class="transfer-room__meta">
<span class="transfer-room__label">房间 Key</span>
<strong class="transfer-room__key" data-room-key>----</strong>
<div class="transfer-room__actions">
<button class="transfer-button" type="button" data-copy-key>
<i class="fa-regular fa-copy" aria-hidden="true"></i>
复制 Key
</button>
<button class="transfer-button transfer-button--ghost" type="button" data-copy-link>
<i class="fa-solid fa-link" aria-hidden="true"></i>
复制链接
</button>
</div>
<p class="transfer-room__hint" data-room-hint>等待接收端加入</p>
</div>
</div>
</section>
<section class="transfer-panel transfer-panel--file" aria-labelledby="file-title">
<div class="transfer-panel__header">
<div>
<p class="transfer-panel__eyebrow">文件</p>
<h2 class="transfer-panel__title" id="file-title">
<i class="fa-solid fa-folder-open" aria-hidden="true"></i>
选择并发送
</h2>
</div>
<button class="transfer-button transfer-button--danger" type="button" data-cancel disabled>
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
关闭
</button>
</div>
<label class="transfer-dropzone" data-dropzone>
<input class="transfer-dropzone__input" type="file" multiple data-file-input />
<i class="transfer-dropzone__icon fa-solid fa-cloud-arrow-up" aria-hidden="true"></i>
<span class="transfer-dropzone__title" data-file-title>拖入文件或点击选择</span>
<span class="transfer-dropzone__meta" data-file-meta>支持一次选择多个文件</span>
</label>
<div class="transfer-list" aria-live="polite">
<div class="transfer-list__header">
<span>发送记录</span>
<small data-sent-summary>0 个文件</small>
</div>
<div class="transfer-filter" data-sent-filter>
<button
class="transfer-filter__button transfer-filter__button--active"
type="button"
data-filter-value="all"
>
全部
</button>
<button class="transfer-filter__button" type="button" data-filter-value="active">
进行中
</button>
<button class="transfer-filter__button" type="button" data-filter-value="done">
已完成
</button>
<button class="transfer-filter__button" type="button" data-filter-value="blocked">
异常
</button>
</div>
<div class="transfer-list__items" data-sent-list></div>
</div>
<div class="transfer-progress" aria-live="polite">
<div class="transfer-progress__track">
<div class="transfer-progress__bar" data-progress-bar></div>
</div>
<div class="transfer-progress__meta">
<span data-progress-label>等待配对</span>
<span data-progress-value>0%</span>
</div>
</div>
<div class="transfer-actions">
<button class="transfer-button transfer-button--primary" type="button" data-send disabled>
<i class="fa-solid fa-list-check" aria-hidden="true"></i>
添加到清单
</button>
</div>
</section>
</main>
<script src="~/lib/signalr/signalr.min.js" asp-append-version="true"></script>
<script type="module" src="~/scripts/file-transfer/sender.js" asp-append-version="true"></script>
</body>
</html>
AI 正在分析代码…
评论加载中...