pouh3m6eg
/
project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端页面更新，设计规格说明书更新

Browse Source
main
李豪威 4 months ago
parent 89179d7899
commit fbb99ecc85
5 changed files with 181 additions and 53 deletions
Show Stats Download Patch File Download Diff File

BIN
doc/软件设计规格说明书-李豪威.docx
View File

Binary file not shown.

67
src/daudio/src/main/resources/static/clipping-copy.html
Unescape View File

@ -1,18 +1,42 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeAudio - 复制</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<style>/* minimal layout copied from improved style */:root{--bg:#f4f7fb;--card:#fff;--primary:#2f80ed;--muted:#6b7280}*{box-sizing:border-box}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a} .topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(90deg,#fff,#f8fbff)} .layout{display:flex;gap:16px;padding:18px} .sidebar{width:260px;padding:18px} .main{flex:1} .card{background:#fff;padding:24px;border-radius:12px} .btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}</style>
<style>
:root{--bg:#f4f7fb;--card:#ffffff;--primary:#2f80ed;--muted:#6b7280;--radius:12px}
*{box-sizing:border-box}html,body{height:100%}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a;display:flex;flex-direction:column}
.topbar{height:64px;background:linear-gradient(90deg,#fff,#f8fbff);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 rgba(15,23,42,0.04);flex:0 0 64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--primary)}.brand i{font-size:20px}
.layout{display:flex;gap:16px;padding:18px;flex:1 1 auto;width:100%;margin:0}
.sidebar{width:260px;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06);height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column}
.nav-links{display:flex;flex-direction:column;justify-content:space-around;flex:1;padding:8px 0}
.nav-links a{display:block;padding:14px;border-radius:10px;color:#0f172a;text-decoration:none;margin:6px 0;font-weight:700;font-size:15px}
.nav-links a.active{background:var(--primary);color:#fff}
.nav-item{position:relative}
.nav-item .nav-sub{display:none;margin-left:6px}
.nav-item.open .nav-sub{display:block}
.nav-sub a{display:block;padding:10px 18px;border-radius:8px;margin:4px 0;color:#264d7a;font-weight:600;font-size:13px}
.main{flex:1;min-height:0}
.card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,0.06);height:100%;display:flex;flex-direction:column}
h2{margin:0 0 14px 0;font-size:22px}
.controls{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}
@media(max-width:880px){.layout{flex-direction:column;padding:16px}.sidebar{width:100%;height:auto}.nav-links{justify-content:flex-start}}
</style>
</head>
<body>
<div class="topbar"><div class="brand"><i class="fas fa-music"></i> DeAudio</div><div class="small">复制</div></div>
<div class="topbar">
<div class="brand"><i class="fas fa-music"></i><div>DeAudio</div></div>
<div class="small">复制</div>
</div>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
@ -26,25 +50,40 @@
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎，用户A</div>
<div style="margin-top:10px"><button class="btn ghost" style="width:100%" onclick="logout()">退出登录</button></div>
</div>
</aside>
<main class="main">
<div class="card">
<h2>复制（Copy）</h2>
<p>从已有音频中复制选定区间并插入到指定位置（模拟）。</p>
<label class="btn" for="fileIn">选择音频</label>
<input id="fileIn" type="file" accept="audio/*" style="display:none" />
<div id="name" style="margin-top:8px;color:#666"></div>
<div style="margin-top:12px"><audio id="player" controls style="width:100%"></audio></div>
<div style="margin-top:12px;display:flex;gap:8px"><input id="start" type="number" placeholder="开始 秒" step="0.1" /><input id="end" type="number" placeholder="结束 秒" step="0.1" /></div>
<div style="margin-top:10px"><input id="insertAt" type="number" placeholder="插入位置 秒" step="0.1" /></div>
<div style="margin-top:12px"><button id="doCopy" class="btn">执行复制（模拟）</button></div>
<div id="status" style="margin-top:10px;color:#666"></div>
<div style="margin-top:8px">请选择音频，设置复制区间和插入位置，复制选定片段并插入到指定时间点。</div>
<div style="margin-top:12px">
<label class="btn" for="fileIn">选择音频</label>
<input id="fileIn" type="file" accept="audio/*" style="display:none" />
<div id="name" style="margin-top:8px;color:var(--muted)"></div>
<div style="margin-top:12px"><audio id="player" controls style="width:100%"></audio></div>
<div style="margin-top:12px;display:flex;gap:8px">
<input id="start" type="number" placeholder="开始 秒" step="0.1" />
<input id="end" type="number" placeholder="结束 秒" step="0.1" />
</div>
<div style="margin-top:10px">
<input id="insertAt" type="number" placeholder="插入位置 秒" step="0.1" />
</div>
<div class="controls">
<button id="doCopy" class="btn">执行复制并下载（模拟）</button>
</div>
<div id="status" style="margin-top:10px;color:#666"></div>
</div>
</div>
</main>
</div>
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/site-common.js"></script>
<script src="js/clipping-common.js"></script>
<script src="js/clipping-copy.js"></script>
</body>
</html>
</html>

41
src/daudio/src/main/resources/static/clipping-cut.html
Unescape View File

@ -1,30 +1,42 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeAudio - 剪切</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<style>
/* 使用改进样式的最小集 */
:root{--bg:#f4f7fb;--card:#fff;--primary:#2f80ed;--muted:#6b7280;--radius:12px}
*{box-sizing:border-box}html,body{height:100%}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(90deg,#fff,#f8fbff)}
.layout{display:flex;gap:16px;padding:18px}
.sidebar{width:260px;padding:18px}
.nav-links a{display:block;padding:10px}
.main{flex:1}
.card{background:var(--card);padding:24px;border-radius:12px}
:root{--bg:#f4f7fb;--card:#ffffff;--primary:#2f80ed;--muted:#6b7280;--radius:12px}
*{box-sizing:border-box}html,body{height:100%}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a;display:flex;flex-direction:column}
.topbar{height:64px;background:linear-gradient(90deg,#fff,#f8fbff);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 rgba(15,23,42,0.04);flex:0 0 64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--primary)}.brand i{font-size:20px}
.layout{display:flex;gap:16px;padding:18px;flex:1 1 auto;width:100%;margin:0}
.sidebar{width:260px;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06);height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column}
.nav-links{display:flex;flex-direction:column;justify-content:space-around;flex:1;padding:8px 0}
.nav-links a{display:block;padding:14px;border-radius:10px;color:#0f172a;text-decoration:none;margin:6px 0;font-weight:700;font-size:15px}
.nav-links a.active{background:var(--primary);color:#fff}
.nav-item{position:relative}
.nav-item .nav-sub{display:none;margin-left:6px}
.nav-item.open .nav-sub{display:block}
.nav-sub a{display:block;padding:10px 18px;border-radius:8px;margin:4px 0;color:#264d7a;font-weight:600;font-size:13px}
.main{flex:1;min-height:0}
.card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,0.06);height:100%;display:flex;flex-direction:column}
h2{margin:0 0 14px 0;font-size:22px}
.controls{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}
@media(max-width:880px){.layout{flex-direction:column;padding:16px}.sidebar{width:100%;height:auto}.nav-links{justify-content:flex-start}}
</style>
</head>
<body>
<div class="topbar"><div class="brand"><i class="fas fa-music"></i> DeAudio</div><div class="small">剪切</div></div>
<div class="topbar">
<div class="brand"><i class="fas fa-music"></i><div>DeAudio</div></div>
<div class="small">剪切</div>
</div>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
@ -38,7 +50,12 @@
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎，用户A</div>
<div style="margin-top:10px"><button class="btn ghost" style="width:100%" onclick="logout()">退出登录</button></div>
</div>
</aside>
<main class="main">
<div class="card">
<h2>剪切（Cut）</h2>

66
src/daudio/src/main/resources/static/clipping-delete.html
Unescape View File

@ -1,23 +1,42 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeAudio - 删除</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<style>
:root{--bg:#f4f7fb;--card:#fff;--primary:#2f80ed}
body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg)}
.layout{display:flex;padding:18px}
.sidebar{width:260px;padding:18px}
.card{background:#fff;padding:24px;border-radius:12px}
:root{--bg:#f4f7fb;--card:#ffffff;--primary:#2f80ed;--muted:#6b7280;--radius:12px}
*{box-sizing:border-box}html,body{height:100%}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a;display:flex;flex-direction:column}
.topbar{height:64px;background:linear-gradient(90deg,#fff,#f8fbff);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 rgba(15,23,42,0.04);flex:0 0 64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--primary)}.brand i{font-size:20px}
.layout{display:flex;gap:16px;padding:18px;flex:1 1 auto;width:100%;margin:0}
.sidebar{width:260px;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06);height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column}
.nav-links{display:flex;flex-direction:column;justify-content:space-around;flex:1;padding:8px 0}
.nav-links a{display:block;padding:14px;border-radius:10px;color:#0f172a;text-decoration:none;margin:6px 0;font-weight:700;font-size:15px}
.nav-links a.active{background:var(--primary);color:#fff}
.nav-item{position:relative}
.nav-item .nav-sub{display:none;margin-left:6px}
.nav-item.open .nav-sub{display:block}
.nav-sub a{display:block;padding:10px 18px;border-radius:8px;margin:4px 0;color:#264d7a;font-weight:600;font-size:13px}
.main{flex:1;min-height:0}
.card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,0.06);height:100%;display:flex;flex-direction:column}
h2{margin:0 0 14px 0;font-size:22px}
.controls{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}
@media(max-width:880px){.layout{flex-direction:column;padding:16px}.sidebar{width:100%;height:auto}.nav-links{justify-content:flex-start}}
</style>
</head>
</head>
<body>
<div class="topbar">
<div class="brand"><i class="fas fa-music"></i><div>DeAudio</div></div>
<div class="small">删除</div>
</div>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
@ -31,24 +50,37 @@
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎，用户A</div>
<div style="margin-top:10px"><button class="btn ghost" style="width:100%" onclick="logout()">退出登录</button></div>
</div>
</aside>
<main class="main">
<div class="card">
<h2>删除（Delete）</h2>
<p>移除音频中指定区间并自动拼接剩余部分（模拟）。</p>
<label class="btn" for="fileIn">选择音频</label>
<input id="fileIn" type="file" accept="audio/*" style="display:none" />
<div id="name" style="margin-top:8px;color:#666"></div>
<div style="margin-top:12px"><audio id="player" controls style="width:100%"></audio></div>
<div style="margin-top:12px;display:flex;gap:8px"><input id="start" type="number" placeholder="开始 秒" step="0.1" /><input id="end" type="number" placeholder="结束 秒" step="0.1" /></div>
<div style="margin-top:12px"><button id="doDelete" class="btn">执行删除（模拟）</button></div>
<div id="status" style="margin-top:10px;color:#666"></div>
<div style="margin-top:8px">选择音频并设置需要删除的区间，系统将自动移除该片段并拼接剩余部分。</div>
<div style="margin-top:12px">
<label class="btn" for="fileIn">选择音频</label>
<input id="fileIn" type="file" accept="audio/*" style="display:none" />
<div id="name" style="margin-top:8px;color:var(--muted)"></div>
<div style="margin-top:12px"><audio id="player" controls style="width:100%"></audio></div>
<div style="margin-top:12px;display:flex;gap:8px">
<input id="start" type="number" placeholder="开始 秒" step="0.1" />
<input id="end" type="number" placeholder="结束 秒" step="0.1" />
</div>
<div class="controls">
<button id="doDelete" class="btn">执行删除并下载（模拟）</button>
</div>
<div id="status" style="margin-top:10px;color:#666"></div>
</div>
</div>
</main>
</div>
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/site-common.js"></script>
<script src="js/clipping-common.js"></script>
<script src="js/clipping-delete.js"></script>
</body>
</html>
</html>

60
src/daudio/src/main/resources/static/clipping-merge.html
Unescape View File

@ -1,16 +1,42 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeAudio - 合并</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>body{font-family:Inter,Arial;margin:0;background:#f4f7fb}.layout{display:flex;padding:18px}.sidebar{width:260px;padding:18px}.card{background:#fff;padding:24px;border-radius:12px}.btn{padding:10px 14px;border-radius:8px;border:none;background:#2f80ed;color:#fff}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<style>
:root{--bg:#f4f7fb;--card:#ffffff;--primary:#2f80ed;--muted:#6b7280;--radius:12px}
*{box-sizing:border-box}html,body{height:100%}body{font-family:'Inter',Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a;display:flex;flex-direction:column}
.topbar{height:64px;background:linear-gradient(90deg,#fff,#f8fbff);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 rgba(15,23,42,0.04);flex:0 0 64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--primary)}.brand i{font-size:20px}
.layout{display:flex;gap:16px;padding:18px;flex:1 1 auto;width:100%;margin:0}
.sidebar{width:260px;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06);height:calc(100vh - 64px);overflow:auto;display:flex;flex-direction:column}
.nav-links{display:flex;flex-direction:column;justify-content:space-around;flex:1;padding:8px 0}
.nav-links a{display:block;padding:14px;border-radius:10px;color:#0f172a;text-decoration:none;margin:6px 0;font-weight:700;font-size:15px}
.nav-links a.active{background:var(--primary);color:#fff}
.nav-item{position:relative}
.nav-item .nav-sub{display:none;margin-left:6px}
.nav-item.open .nav-sub{display:block}
.nav-sub a{display:block;padding:10px 18px;border-radius:8px;margin:4px 0;color:#264d7a;font-weight:600;font-size:13px}
.main{flex:1;min-height:0}
.card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,0.06);height:100%;display:flex;flex-direction:column}
h2{margin:0 0 14px 0;font-size:22px}
.controls{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}
@media(max-width:880px){.layout{flex-direction:column;padding:16px}.sidebar{width:100%;height:auto}.nav-links{justify-content:flex-start}}
</style>
</head>
<body>
<div class="topbar">
<div class="brand"><i class="fas fa-music"></i><div>DeAudio</div></div>
<div class="small">合并</div>
</div>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
@ -24,22 +50,36 @@
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎，用户A</div>
<div style="margin-top:10px"><button class="btn ghost" style="width:100%" onclick="logout()">退出登录</button></div>
</div>
</aside>
<main class="main">
<div class="card">
<h2>合并（Merge）</h2>
<p>选择多个音频片段并合并为一个（模拟）。</p>
<label class="btn" for="files">选择音频文件（多选）</label>
<input id="files" type="file" accept="audio/*" multiple style="display:none" />
<div id="list" style="margin-top:8px;color:#666"></div>
<div style="margin-top:12px"><button id="doMerge" class="btn">执行合并（模拟）</button></div>
<div id="status" style="margin-top:10px;color:#666"></div>
<div style="margin-top:8px">选择多个音频文件，按顺序合并为一个文件（支持添加多个音频）。</div>
<div style="margin-top:12px">
<label class="btn" for="fileIn1">选择音频文件1</label>
<input id="fileIn1" type="file" accept="audio/*" style="display:none" />
<label class="btn" for="fileIn2" style="margin-left:8px">选择音频文件2</label>
<input id="fileIn2" type="file" accept="audio/*" style="display:none" />
<div id="fileName1" style="margin-top:8px;color:var(--muted)"></div>
<div id="fileName2" style="margin-top:4px;color:var(--muted)"></div>
<div class="controls">
<button id="doMerge" class="btn">执行合并并下载（模拟）</button>
</div>
<div id="status" style="margin-top:10px;color:#666"></div>
<div style="margin-top:12px"><audio id="player" controls style="width:100%"></audio></div>
</div>
</div>
</main>
</div>
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/site-common.js"></script>
<script src="js/clipping-common.js"></script>
<script src="js/clipping-merge.js"></script>
</body>
</html>
</html>
Write Preview
Loading…
Cancel
Save