.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-index-modal);
backdrop-filter: blur(5px);
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- 消息系统 -->
<div class="message-system" id="message-system"></div>
<!-- 加载系统 -->
<div class="loading-overlay" id="loading-overlay" style="display: none;">
<div class="loading-spinner"></div>
</div>
<div class="system-container">
<!-- 头部系统 -->
<header class="component" style="grid-column: 1 / -1;">
<div style="display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xl); align-items: center;">
<div>
<h1>🎵 超高级音乐编排系统</h1>
<p style="font-size: var(--font-size-sm); color: var(--color-secondary);">系统思维 × 过程思维 × 极限思维</p>
</div>
<div style="display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-lg); align-items: center;">
<div class="input-group">
<label class="input-label">🎶 BPM</label>
<input type="number" class="input-field" id="bpm" value="120" min="60" max="240">
</div>
<div class="input-group">
<label class="input-label">🎵 音调</label>
<input type="range" class="input-field" id="pitch" min="0.5" max="2.0" step="0.1" value="1.0">
</div>
<div class="input-group">
<label class="input-label">🔊 音量</label>
<input type="range" class="input-field" id="volume" min="0" max="1.0" step="0.1" value="0.7">
</div>
<div class="input-group">
<label class="input-label">💾 预设</label>
<select class="input-field" id="preset-select">
<option value="pop">流行歌曲</option>
<option value="rock">摇滚</option>
<option value="ballad">民谣</option>
<option value="electronic">电子音乐</option>
<option value="classical">古典</option>
<option value="jazz">爵士</option>
<option value="custom">自定义</option>
</select>
</div>
</div>
<div style="display: flex; gap: var(--space-sm);">
<button class="btn btn-success" id="save-preset">💾 保存</button>
<button class="btn btn-info" id="export-audio">📤 导出</button>
<button class="btn btn-outline" id="help-btn">❓ 帮助</button>
</div>
</div>
</header>
<!-- 导航系统 -->
<nav class="component sidebar">
<div class="component-header">
<h3>🎤 智能发音系统</h3>
</div>
<div class="card">
<h4 style="margin-bottom: var(--space-sm); color: var(--color-primary);">发音人库</h4>
<div class="grid grid-2">
<div class="card card-active" data-voice="female1">
<div style="display: flex; align-items: center; gap: var(--space-sm);">
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--font-size-xs);">👩</div>
<div>
<div style="font-weight: 600;">温柔女声</div>
<div style="font-size: var(--font-size-xs); color: var(--color-secondary);">适合抒情</div>
</div>
</div>
</div>
<div class="card" data-voice="female2">
<div style="display: flex; align-items: center; gap: var(--space-sm);">
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--font-size-xs);">💃</div>
<div>
<div style="font-weight: 600;">活泼女声</div>
<div style="font-size: var(--font-size-xs); color: var(--color-secondary);">适合流行</div>
</div>
</div>
</div>
<div class="card" data-voice="male1">
<div style="display: flex; align-items: center; gap: var(--space-sm);">
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-info); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--font-size-xs);">👨</div>
<div>
<div style="font-weight: 600;">沉稳男声</div>
<div style="font-size: var(--font-size-xs); color: var(--color-secondary);">适合民谣</div>
</div>
</div>
</div>
<div class="card" data-voice="male2">
<div style="display: flex; align-items: center; gap: var(--space-sm);">