feat: 声匣 —— 网易云 / QQ 音乐自托管下载服务
由 163-music-dl CLI 重构为 Web 服务： - 下载流水线、歌词与标签逻辑沿用旧版（node-id3 / ffmpeg） - 网易云（chksz 接口 + music.163.com 元数据）与 QQ 音乐（VIP Cookie）provider - QQ 扫码登录与 musickey 自动续期 - SQLite 持久化的下载队列，SSE 实时进度 - 曲库工具（M3U / ZIP / 回收站 / 补全标签）、历史统计与导出、访问密码 - Vite 8 + Vue 3 前端，浅色 / 深色 - Docker 部署配置（飞牛 NAS） Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jocay
@@ -0,0 +1,289 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font: 14px/1.6 var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
/* 纸张颗粒 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
opacity: var(--grain-opacity);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: 'tnum';
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.faint {
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font: 500 11px/1 var(--font-mono);
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
/* 描边小字徽章；.gold 用于 Hi-Res / 母带 */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 4px;
|
||||
font: 600 10px/1 var(--font-mono);
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--ink-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge.gold {
|
||||
border-color: color-mix(in oklab, var(--gold) 55%, transparent);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
border-color: var(--ink-3);
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: color-mix(in oklab, var(--accent) 88%, var(--ink));
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--line-strong);
|
||||
border: 3px solid var(--bg);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面通用骨架 */
|
||||
.page {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 40px 96px;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.page-head h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.page-head .row-between {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.count {
|
||||
font: 400 14px var(--font-mono);
|
||||
color: var(--ink-3);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn.ghost:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.btn.sm {
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.btn.danger:hover {
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
outline: none;
|
||||
transition: border-color var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--ink-3);
|
||||
}
|
||||
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.seg button {
|
||||
height: 26px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: none;
|
||||
font-size: 12.5px;
|
||||
color: var(--ink-2);
|
||||
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.seg button:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.seg button[aria-selected='true'] {
|
||||
background: var(--ink);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.state-msg {
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
height: 56px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: linear-gradient(90deg, transparent, var(--surface-2), transparent) 0 0 / 50% 100% no-repeat;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
background-position: -50% 0;
|
||||
}
|
||||
to {
|
||||
background-position: 150% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.page {
|
||||
padding: 20px 16px 120px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/* 声匣 · 设计 token —— 「唱片内页」：纸与墨，赤陶点睛，来源色只做细线 */
|
||||
:root {
|
||||
--bg: #f4f1ea;
|
||||
--surface: #fbf9f4;
|
||||
--surface-2: #efebe2;
|
||||
--line: #e3ded3;
|
||||
--line-strong: #cfc8ba;
|
||||
--ink: #1f1d1a;
|
||||
--ink-2: #6b655b;
|
||||
--ink-3: #a39c8f;
|
||||
--accent: #b5523b;
|
||||
--accent-ink: #fbf9f4;
|
||||
--accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
|
||||
--netease: #c4473a;
|
||||
--qq: #2f8f6b;
|
||||
--gold: #a8812c;
|
||||
--ok: #4f7a52;
|
||||
--danger: #b3412f;
|
||||
--shadow: 0 1px 0 rgba(31, 29, 26, 0.04), 0 8px 24px -12px rgba(31, 29, 26, 0.18);
|
||||
--grain-opacity: 0.035;
|
||||
|
||||
--font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
|
||||
--font-sans: 'Inter', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Cascadia Mono', 'SF Mono', ui-monospace, Consolas, monospace;
|
||||
|
||||
--radius: 10px;
|
||||
--radius-sm: 6px;
|
||||
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
--dur: 180ms;
|
||||
--sidebar-w: 216px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
--bg: #121315;
|
||||
--surface: #1a1b1e;
|
||||
--surface-2: #202125;
|
||||
--line: #2a2b2f;
|
||||
--line-strong: #3a3b40;
|
||||
--ink: #ece8df;
|
||||
--ink-2: #9a958b;
|
||||
--ink-3: #5e5a53;
|
||||
--accent: #e07a5f;
|
||||
--accent-ink: #121315;
|
||||
--netease: #e06456;
|
||||
--qq: #42a07d;
|
||||
--gold: #d9b45a;
|
||||
--ok: #7fae82;
|
||||
--danger: #e0715f;
|
||||
--shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
|
||||
--grain-opacity: 0.05;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--bg: #121315;
|
||||
--surface: #1a1b1e;
|
||||
--surface-2: #202125;
|
||||
--line: #2a2b2f;
|
||||
--line-strong: #3a3b40;
|
||||
--ink: #ece8df;
|
||||
--ink-2: #9a958b;
|
||||
--ink-3: #5e5a53;
|
||||
--accent: #e07a5f;
|
||||
--accent-ink: #121315;
|
||||
--netease: #e06456;
|
||||
--qq: #42a07d;
|
||||
--gold: #d9b45a;
|
||||
--ok: #7fae82;
|
||||
--danger: #e0715f;
|
||||
--shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
|
||||
--grain-opacity: 0.05;
|
||||
}
|
||||
Reference in New Issue
Block a user