133 lines
6.7 KiB
HTML
133 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>文字稿上传</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 头部 -->
|
||
<header class="header">
|
||
<div class="header-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||
</svg>
|
||
</div>
|
||
<h1>文字稿上传</h1>
|
||
<p class="subtitle">上传腾讯会议文字稿，自动归档到对应目录</p>
|
||
</header>
|
||
|
||
<!-- 上传表单 -->
|
||
<form id="uploadForm" class="form">
|
||
<!-- 姓名输入 -->
|
||
<div class="form-group">
|
||
<label for="name">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="12" cy="7" r="4"/>
|
||
</svg>
|
||
上传者姓名
|
||
</label>
|
||
<input type="text" id="name" name="name" placeholder="请输入您的姓名" maxlength="20" autocomplete="off">
|
||
<span class="form-hint">2-20 个字符，支持中文、英文、数字和下划线</span>
|
||
</div>
|
||
|
||
<!-- 文件拖拽区 -->
|
||
<div class="form-group">
|
||
<label>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
<line x1="12" y1="18" x2="12" y2="12"/>
|
||
<line x1="9" y1="15" x2="15" y2="15"/>
|
||
</svg>
|
||
选择文件
|
||
</label>
|
||
<div id="dropzone" class="dropzone">
|
||
<input type="file" id="fileInput" multiple hidden>
|
||
<div class="dropzone-content">
|
||
<div class="dropzone-icon">
|
||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||
</svg>
|
||
</div>
|
||
<p class="dropzone-text">拖拽文件到此处，或 <span class="dropzone-link">点击选择</span></p>
|
||
<p class="dropzone-hint">支持 .txt .doc .docx .pdf .rtf .odt 等文字类文档<br>单文件 ≤ 20MB，单次最多 9 个文件</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文件列表 -->
|
||
<div id="fileList" class="file-list"></div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="form-actions">
|
||
<button type="submit" id="uploadBtn" class="btn btn-primary" disabled>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||
</svg>
|
||
开始上传
|
||
</button>
|
||
<button type="button" id="clearBtn" class="btn btn-secondary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="3 6 5 6 21 6"/>
|
||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
||
</svg>
|
||
清空列表
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- 上传结果 -->
|
||
<div id="resultPanel" class="result-panel"></div>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<p>文件上传后自动归档至 NAS 对应目录</p>
|
||
</footer>
|
||
|
||
<!-- 验证码弹窗 -->
|
||
<div id="captchaModal" class="modal-overlay">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>安全验证</h3>
|
||
<button type="button" id="modalClose" class="modal-close">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="modal-desc">请输入图中验证码以继续上传</p>
|
||
<div class="modal-captcha-row">
|
||
<img id="captchaImg" class="modal-captcha-img" src="/api/captcha" alt="验证码" title="点击刷新">
|
||
<button type="button" id="refreshCaptcha" class="btn-icon" title="换一张">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="23 4 23 10 17 10"/>
|
||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<input type="text" id="captchaInput" class="modal-captcha-input" placeholder="请输入验证码" maxlength="4" autocomplete="off">
|
||
<p id="captchaError" class="modal-error"></p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" id="modalCancel" class="btn btn-secondary">取消</button>
|
||
<button type="button" id="modalConfirm" class="btn btn-primary">确认上传</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html>
|