Remove obsolete clipping homepage and tools shim

main
李豪威 6 months ago
parent aec6c98ae5
commit 89179d7899

@ -70,9 +70,17 @@
<aside class="sidebar card">
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="audio-processing.html" class="active">音频处理</a>
<a href="results-preview.html">结果预览</a>
<a href="clipping-download.html">剪辑下载</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html">剪切</a>
<a href="clipping-copy.html">复制</a>
<a href="clipping-delete.html">删除</a>
<a href="clipping-merge.html">合并</a>
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎用户A</div>
@ -153,6 +161,7 @@
<!-- 本地 jQuery已包含在 plugins 目录) -->
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/site-common.js"></script>
<script src="js/audio-processing.js"></script>
<script>
// 使改进版与原页面兼容:将样式类名 "hidden" 转换为 display:none 以配合旧脚本

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
</head>
<body>
<div class="topbar"><div class="brand"><i class="fas fa-music"></i> DeAudio</div><div class="small">复制</div></div>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html">剪切</a>
<a href="clipping-copy.html" class="active">复制</a>
<a href="clipping-delete.html">删除</a>
<a href="clipping-merge.html">合并</a>
</div>
</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>
</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>

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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}
.controls{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}
</style>
</head>
<body>
<div class="topbar"><div class="brand"><i class="fas fa-music"></i> DeAudio</div><div class="small">剪切</div></div>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html" class="active">剪切</a>
<a href="clipping-copy.html">复制</a>
<a href="clipping-delete.html">删除</a>
<a href="clipping-merge.html">合并</a>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="card">
<h2>剪切Cut</h2>
<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="doCut" 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-cut.js"></script>
</body>
</html>

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
: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}
.btn{padding:10px 14px;border-radius:8px;border:none;background:var(--primary);color:#fff}
</style>
</head>
<body>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html">剪切</a>
<a href="clipping-copy.html">复制</a>
<a href="clipping-delete.html" class="active">删除</a>
<a href="clipping-merge.html">合并</a>
</div>
</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>
</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>

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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:#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}
.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}
.audio-player{margin-bottom:1.5rem;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;background-color:#f8f9fa}.audio-player audio{width:100%}.waveform-container{width:100%;height:150px;background:#f8f9fa;margin:1rem 0;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;color:#666}
.time-inputs{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.time-inputs .time-group{display:flex;flex-direction:column;flex:1;min-width:120px}.time-inputs label{font-size:0.9rem;margin-bottom:0.25rem}.time-inputs input{padding:0.5rem;border:1px solid #ddd;border-radius:4px}
.editing-controls h3{margin-top:1rem;margin-bottom:0.5rem;color:#333}.editing-buttons{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.editing-buttons button{padding:0.5rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:8px}
.clip-controls{margin-top:1rem}.clip-controls button{padding:0.75rem 1.5rem;background:#28a745;color:#fff;border:none;border-radius:8px;margin-right:0.5rem}.download-btn{padding:0.75rem 1.5rem;background:#17a2b8;color:#fff;border:none;border-radius:8px;margin-top:1rem}.feedback{margin-top:1rem;padding:0.75rem;background:#e9ecef;border-radius:4px;color:#495057}
@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">
<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>
<a href="clipping-download.html" class="active">剪辑下载</a>
</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>剪辑下载</h2>
<div class="preview-section">
<div class="audio-player">
<audio controls>
<source src="demo-separated.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
</div>
<div class="waveform-container">波形图区域(可扩展为 Canvas 波形可视化)</div>
<div class="time-inputs">
<div class="time-group">
<label for="startTime">开始时间 (秒):</label>
<input type="number" id="startTime" min="0" step="0.1" placeholder="例如 10" />
</div>
<div class="time-group">
<label for="endTime">结束时间 (秒):</label>
<input type="number" id="endTime" min="0" step="0.1" placeholder="例如 20" />
</div>
</div>
<div class="editing-controls">
<h3>剪辑功能</h3>
<div class="editing-buttons">
<button class="clip-btn"><i class="fas fa-cut"></i> 剪切</button>
<button class="clip-btn"><i class="fas fa-copy"></i> 复制</button>
<button class="clip-btn"><i class="fas fa-trash"></i> 删除</button>
<button class="clip-btn"><i class="fas fa-compress"></i> 合并</button>
</div>
</div>
<div class="clip-controls">
<button class="clip-btn">执行剪辑</button>
<button class="download-btn">下载剪辑后的音频</button>
</div>
<div class="feedback">提示:输入时间范围,点击剪辑按钮可模拟剪辑操作,然后下载处理后的音频。</div>
</div>
</div>
</main>
</div>
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/clipping-download.js"></script>
</body>
</html>

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
</head>
<body>
<div class="layout">
<aside class="sidebar card">
<h4>导航</h4>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html">结果预览</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html">剪切</a>
<a href="clipping-copy.html">复制</a>
<a href="clipping-delete.html">删除</a>
<a href="clipping-merge.html" class="active">合并</a>
</div>
</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>
</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>

@ -0,0 +1,20 @@
// Shared helpers for clipping pages
$(function(){
function bindFileInput(selector, previewSelector, nameSelector){
const $file = $(selector);
const $preview = $(previewSelector);
const $name = $(nameSelector);
$file.on('change', function(){
const f = this.files && this.files[0];
if(!f){ $name.text(''); $preview.attr('src',''); return; }
$name.text(f.name);
const url = URL.createObjectURL(f);
if($preview.length) $preview.attr('src', url);
});
}
window.clippingCommon = {
bindFileInput: bindFileInput,
alertStatus: function(sel, msg){ $(sel).text(msg); }
};
});

@ -0,0 +1,12 @@
$(function(){
clippingCommon.bindFileInput('#fileIn', '#player', '#name');
$('#doCopy').on('click', function(){
const s = parseFloat($('#start').val());
const e = parseFloat($('#end').val());
const at = parseFloat($('#insertAt').val());
if(isNaN(s) || isNaN(e) || s>=e){ clippingCommon.alertStatus('#status','请填写正确的开始/结束时间'); return; }
if(isNaN(at)){ clippingCommon.alertStatus('#status','请填写插入位置'); return; }
clippingCommon.alertStatus('#status','正在模拟复制并插入...');
setTimeout(()=>clippingCommon.alertStatus('#status','复制(模拟)完成'),700);
});
});

@ -0,0 +1,15 @@
$(function(){
clippingCommon.bindFileInput('#fileIn', '#player', '#name');
$('#doCut').on('click', function(){
const start = parseFloat($('#start').val());
const end = parseFloat($('#end').val());
if(isNaN(start) || isNaN(end) || start>=end){
clippingCommon.alertStatus('#status','请填写有效的开始/结束时间start < end');
return;
}
clippingCommon.alertStatus('#status','正在模拟剪切并生成文件...');
setTimeout(()=>{
clippingCommon.alertStatus('#status','模拟完成:已生成剪切文件(假)');
},800);
});
});

@ -0,0 +1,10 @@
$(function(){
clippingCommon.bindFileInput('#fileIn', '#player', '#name');
$('#doDelete').on('click', function(){
const s = parseFloat($('#start').val());
const e = parseFloat($('#end').val());
if(isNaN(s) || isNaN(e) || s>=e){ clippingCommon.alertStatus('#status','请填写正确的开始/结束时间'); return; }
clippingCommon.alertStatus('#status','正在模拟删除...');
setTimeout(()=>clippingCommon.alertStatus('#status','删除(模拟)完成'),700);
});
});

@ -0,0 +1,8 @@
$(function(){
clippingCommon.bindFileInput('#fileIn', '#player', '#name');
$('#doMerge').on('click', function(){
const files = $('#extraFiles').val();
clippingCommon.alertStatus('#status','正在模拟合并...');
setTimeout(()=>clippingCommon.alertStatus('#status','合并(模拟)完成'),900);
});
});

@ -0,0 +1,32 @@
// Common site utilities
$(function(){
// Toggle nav submenus with slide animation
$('.nav-item > a').on('click', function(e){
const href = $(this).attr('href') || '';
// If the anchor is a hash (#) or empty, treat as toggle; otherwise allow normal navigation
if(href === '#' || href.trim() === ''){
e.preventDefault();
const $item = $(this).parent();
const $sub = $item.find('.nav-sub').first();
// close other open subs
$('.nav-sub').not($sub).stop(true,true).slideUp(180).parent().removeClass('open');
// toggle this one
$sub.stop(true,true).slideToggle(180);
$item.toggleClass('open');
$(this).attr('aria-expanded', $item.hasClass('open'));
}
});
// Auto-open clipping nav if on related per-operation pages
const path = window.location.pathname.split('/').pop();
const clippingPages = ['clipping-cut.html','clipping-copy.html','clipping-delete.html','clipping-merge.html'];
if(clippingPages.indexOf(path) !== -1){
const $navItem = $('.nav-item');
$navItem.addClass('open');
$navItem.find('.nav-sub').show();
// highlight active links
$('.nav-links a').removeClass('active');
$('.nav-links a[href="'+path+'"]').addClass('active');
$('.nav-sub a[href="'+path+'"]').addClass('active');
}
});

@ -53,7 +53,15 @@
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="results-preview.html" class="active">结果预览</a>
<a href="clipping-download.html">剪辑下载</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html">剪切</a>
<a href="clipping-copy.html">复制</a>
<a href="clipping-delete.html">删除</a>
<a href="clipping-merge.html">合并</a>
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎用户A</div>
@ -94,6 +102,7 @@
</div>
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/site-common.js"></script>
<script src="js/results-preview.js"></script>
</body>
</html>

@ -31,9 +31,17 @@
<aside class="sidebar card">
<h3 style="margin-top:0;margin-bottom:10px">导航</h3>
<div class="nav-links">
<a href="audio-processing.html">音频处理</a>
<a href="audio-processing.html" class="active">音频处理</a>
<a href="results-preview.html">结果预览</a>
<a href="clipping-download.html">剪辑下载</a>
<div class="nav-item">
<a href="#">剪辑 ▾</a>
<div class="nav-sub">
<a href="clipping-cut.html">剪切</a>
<a href="clipping-copy.html">复制</a>
<a href="clipping-delete.html">删除</a>
<a href="clipping-merge.html">合并</a>
</div>
</div>
</div>
<div style="margin-top:18px;border-top:1px dashed #eef6ff;padding-top:14px">
<div style="font-weight:700">欢迎用户A</div>
@ -95,6 +103,7 @@
</div>
<script src="plugins/jquery-3.7.1/jquery-3.7.1.js"></script>
<script src="js/site-common.js"></script>
<script src="js/user.js"></script>
<style>@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style>

Loading…
Cancel
Save