I'll start by getting design system recommendations and assets to inform the design.Let me get more specific assets for the music/guitar theme.Now I have enough context. Let me create this stunning independent film magazine-style sheet music reader.
```json{
"summary": "创建了一个独立电影制片厂档案杂志风格的曲谱阅读器页面。采用奶油色(#EBE6D9)背景搭配深炭色(#1A1A1A)字型与砖红侧栏(#B2422E)，非对称双栏布局(右75%主栏+左25%索引栏)。Bebas Neue超压缩标题与Cormorant Garamond经典衬线字体形成极端对比。包含全部曲谱(西餐厅菜单风格展示)和我的曲库(黑胶唱片卡片)两种视图，配备透明纹理纸张叠加层、双线分隔符、4px粗边框等独立电影杂志质感细节。右下角半透明复古吉他背景，大面积留白。搜索仅在全部曲谱主栏。固定页面无滚动。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>独立电影曲谱档案</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Ga…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n \n :root {\n --cream: #EBE6D9;\n --charcoal: #1A1A1A;\n --brick: #B2422E;\n --brick-dark: #8A3322;\n --brick-light: #D45A42;\n --warm-gray: #C4BBA8;\n --parchment: #F5F0E4;\n --ink: #2C2C2C;\n --gold: #C9A84C;\n }\n\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Cormorant Garamond', serif;\n background: var(--cream);\n color: var(--charcoal);\n }\n\n /* 纸张纹理叠加层 */\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n z-index: 9999;\n pointer-events: none;\n background-image: \n repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 2px,\n rgba(139, 119, 90, 0.03) 2px,\n rgba(139, 119, 90, 0.03) 4px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 3px,\n rgba(139, 119, 90, 0.02) 3px,\n rgba(139, 119, 90, 0.02) 6px\n ),\n url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E\");\n opacity: 0.6;\n }\n\n /* 复古吉他背景 - 右下角半透明 */\n .guitar-bg {\n position: fixed;\n bottom: -60px;\n right: -40px;\n width: 520px;\n height: 520px;\n z-index: 0;\n pointer-events: none;\n opacity: 0.12;\n background: radial-gradient(ellipse at 70% 80%, transparent 30%, var(--cream) 70%);\n }\n \n .guitar-bg svg {\n width: 100%;\n height: 100%;\n filter: sepia(0.6) contrast(0.7) brightness(0.9);\n }\n\n /* 主容器 */\n .app-container {\n position: relative;\n z-index: 1;\n width: 100vw;\n height: 100vh;\n display: flex;\n overflow: hidden;\n }\n\n /* ===== 左侧索引栏 ===== */\n .sidebar {\n width: 25%;\n min-width: 240px;\n max-width: 320px;\n height: 100vh;\n background: var(--brick);\n border-right: 4px solid var(--charcoal);\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n }\n\n /* 侧栏纹理 */\n .sidebar::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise2)' opacity='0.08'/%3E%3C/svg%3E\");\n pointer-events: none;\n z-index: 1;\n }\n\n .sidebar-header {\n padding: 28px 20px 16px;\n border-bottom: 2px solid rgba(255,255,255,0.15);\n position: relative;\n z-index: 2;\n }\n\n .sidebar-header .archive-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 11px;\n letter-spacing: 4px;\n color: rgba(255,255,255,0.5);\n text-transform: uppercase;\n margin-bottom: 4px;\n }\n\n .sidebar-header h1 {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 32px;\n line-height: 1;\n color: #fff;\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .sidebar-header .sub {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 13px;\n color: rgba(255,255,255,0.6);\n margin-top: 2px;\n letter-spacing: 0.5px;\n }\n\n /* 双线分隔符 */\n .double-line {\n height: 8px;\n margin: 0 20px;\n border-top: 1px solid rgba(255,255,255,0.2);\n border-bottom: 1px solid rgba(255,255,255,0.2);\n position: relative;\n z-index: 2;\n }\n\n .sidebar-nav {\n padding: 16px 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n z-index: 2;\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n border-radius: 2px;\n cursor: pointer;\n transition: all 0.2s ease;\n color: rgba(255,255,255,0.7);\n font-family: 'Cormorant Garamond', serif;\n font-size: 16px;\n font-weight: 500;\n letter-spacing: 0.3px;\n border-left: 3px solid transparent;\n }\n\n .nav-item i {\n width: 18px;\n font-size: 14px;\n text-align: center;\n color: rgba(255,255,255,0.4);\n }\n\n .nav-item:hover {\n background: rgba(255,255,255,0.08);\n color: #fff;\n }\n\n .nav-item.active {\n background: rgba(255,255,255,0.1);\n color: #fff;\n border-left-color: var(--gold);\n }\n\n .nav-item.active i {\n color: var(--gold);\n }\n\n .nav-divider {\n height: 1px;\n background: rgba(255,255,255,0.1);\n margin: 8px 0;\n }\n\n .sidebar-footer {\n padding: 16px 20px 24px;\n border-top: 2px solid rgba(255,255,255,0.1);\n position: relative;\n z-index: 2;\n }\n\n .sidebar-footer .film-badge {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 10px;\n letter-spacing: 3px;\n color: rgba(255,255,255,0.3);\n text-transform: uppercase;\n }\n\n .sidebar-footer .issue-num {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 13px;\n color: rgba(255,255,255,0.5);\n }\n\n /* ===== 右侧主栏 ===== */\n .main-content {\n flex: 1;\n height: 100vh;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n }\n\n /* 主栏顶部 */\n .main-header {\n padding: 20px 32px 14px;\n border-bottom: 4px solid var(--charcoal);\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n position: relative;\n z-index: 2;\n background: var(--cream);\n }\n\n .main-header .view-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 2px;\n color: var(--charcoal);\n text-transform: uppercase;\n line-height: 1;\n }\n\n .main-header .view-title span {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 16px;\n font-weight: 400;\n letter-spacing: 0;\n text-transform: none;\n color: var(--warm-gray);\n margin-left: 8px;\n }\n\n /* 搜索框 - 仅在全部曲谱视图 */\n .search-wrapper {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .search-box {\n display: flex;\n align-items: center;\n background: transparent;\n border: 1px solid var(--charcoal);\n padding: 6px 12px;\n transition: all 0.2s ease;\n }\n\n .search-box:focus-within {\n border-color: var(--brick);\n background: rgba(178, 66, 46, 0.04);\n }\n\n .search-box i {\n font-size: 12px;\n color: var(--warm-gray);\n margin-right: 8px;\n }\n\n .search-box input {\n border: none;\n background: transparent;\n outline: none;\n font-family: 'Cormorant Garamond', serif;\n font-size: 14px;\n color: var(--charcoal);\n width: 140px;\n }\n\n .search-box input::placeholder {\n color: var(--warm-gray);\n font-style: italic;\n }\n\n /* 视图切换按钮 */\n .view-toggle {\n display: flex;\n gap: 0;\n border: 1px solid var(--charcoal);\n }\n\n .view-toggle button {\n padding: 6px 14px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 12px;\n letter-spacing: 1px;\n background: transparent;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--warm-gray);\n }\n\n .view-toggle button.active {\n background: var(--charcoal);\n color: var(--cream);\n }\n\n .view-toggle button:not(.active):hover {\n color: var(--charcoal);\n }\n\n .view-toggle button:first-child {\n border-right: 1px solid var(--charcoal);\n }\n\n /* 主栏内容区域 */\n .main-body {\n flex: 1;\n overflow: hidden;\n position: relative;\n z-index: 2;\n background: var(--cream);\n }\n\n /* ===== 全部曲谱视图 (菜单风格) ===== */\n .sheet-view {\n display: block;\n height: 100%;\n overflow-y: auto;\n padding: 20px 32px 32px;\n scrollbar-width: thin;\n scrollbar-color: var(--charcoal) transparent;\n }\n\n .sheet-view::-webkit-scrollbar {\n width: 4px;\n }\n .sheet-view::-webkit-scrollbar-track {\n background: transparent;\n }\n .sheet-view::-webkit-scrollbar-thumb {\n background: var(--charcoal);\n }\n\n .sheet-view.hidden {\n display: none;\n }\n\n /* 菜单风格曲谱列表 */\n .menu-list {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n padding: 12px 0;\n border-bottom: 1px solid rgba(26, 26, 26, 0.08);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n }\n\n .menu-item:hover {\n padding-left: 8px;\n background: rgba(178, 66, 46, 0.03);\n }\n\n .menu-item:hover .menu-number {\n color: var(--brick);\n }\n\n .menu-number {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 14px;\n color: var(--warm-gray);\n width: 36px;\n flex-shrink: 0;\n letter-spacing: 1px;\n transition: color 0.2s;\n }\n\n .menu-info {\n flex: 1;\n min-width: 0;\n }\n\n .menu-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 20px;\n font-weight: 600;\n color: var(--charcoal);\n line-height: 1.2;\n letter-spacing: 0.3px;\n }\n\n .menu-composer {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 14px;\n color: var(--warm-gray);\n margin-top: 1px;\n }\n\n .menu-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-shrink: 0;\n margin-left: 16px;\n }\n\n .menu-key {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 11px;\n letter-spacing: 1px;\n color: var(--warm-gray);\n text-transform: uppercase;\n padding: 2px 8px;\n border: 1px solid rgba(26, 26, 26, 0.12);\n }\n\n .menu-duration {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 13px;\n color: var(--warm-gray);\n }\n\n .menu-play {\n width: 28px;\n height: 28px;\n border: 1px solid var(--charcoal);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n color: var(--charcoal);\n font-size: 11px;\n flex-shrink: 0;\n }\n\n .menu-item:hover .menu-play {\n background: var(--charcoal);\n color: var(--cream);\n }\n\n /* 双线分隔符（装饰） */\n .double-line-deco {\n height: 6px;\n margin: 4px 0 8px;\n border-top: 1px solid var(--charcoal);\n border-bottom: 1px solid var(--charcoal);\n opacity: 0.15;\n }\n\n /* ===== 我的曲库视图 (黑胶唱片卡片) ===== */\n .library-view {\n display: none;\n height: 100%;\n overflow-y: auto;\n padding: 20px 32px 32px;\n scrollbar-width: thin;\n scrollbar-color: var(--charcoal) transparent;\n }\n\n .library-view::-webkit-scrollbar {\n width: 4px;\n }\n .library-view::-webkit-scrollbar-track {\n background: transparent;\n }\n .library-view::-webkit-scrollbar-thumb {\n background: var(--charcoal);\n }\n\n .library-view.active {\n display: block;\n }\n\n .vinyl-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n gap: 20px;\n }\n\n .vinyl-card {\n background: var(--parchment);\n border: 4px solid var(--charcoal);\n padding: 16px 14px 14px;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n }\n\n .vinyl-card::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E\");\n pointer-events: none;\n }\n\n .vinyl-card:hover {\n transform: translateY(-4px);\n box-shadow: 8px 8px 0 var(--charcoal);\n }\n\n .vinyl-disc {\n width: 100%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 30%, #333, #0a0a0a 60%, #1a1a1a);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 12px;\n position: relative;\n overflow: hidden;\n }\n\n .vinyl-disc::before {\n content: '';\n position: absolute;\n width: 30%;\n height: 30%;\n border-radius: 50%;\n background: var(--brick);\n border: 2px solid rgba(255,255,255,0.1);\n }\n\n .vinyl-disc::after {\n content: '';\n position: absolute;\n width: 10%;\n height: 10%;\n border-radius: 50%;\n background: var(--cream);\n }\n\n .vinyl-label {\n position: absolute;\n width: 55%;\n height: 55%;\n border-radius: 50%;\n background: var(--brick);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: 1px solid rgba(255,255,255,0.15);\n }\n\n .vinyl-label .label-text {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 9px;\n letter-spacing: 1px;\n color: #fff;\n text-transform: uppercase;\n text-align: center;\n line-height: 1.2;\n padding: 0 4px;\n }\n\n .vinyl-label .label-sub {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 7px;\n color: rgba(255,255,255,0.6);\n margin-top: 2px;\n }\n\n .vinyl-info {\n text-align: center;\n }\n\n .vinyl-info h3 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 16px;\n font-weight: 600;\n color: var(--charcoal);\n line-height: 1.2;\n }\n\n .vinyl-info p {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 12px;\n color: var(--warm-gray);\n margin-top: 2px;\n }\n\n .vinyl-year {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 10px;\n letter-spacing: 1px;\n color: var(--brick);\n margin-top: 4px;\n }\n\n /* 空状态 */\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--warm-gray);\n text-align: center;\n padding: 40px;\n }\n\n .empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.3;\n }\n\n .empty-state h3 {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 24px;\n letter-spacing: 2px;\n color: var(--charcoal);\n margin-bottom: 8px;\n }\n\n .empty-state p {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 16px;\n max-width: 280px;\n }\n\n /* 响应式 */\n @media (max-width: 900px) {\n .sidebar {\n width: 30%;\n min-width: 180px;\n }\n .main-header {\n padding: 16px 20px 12px;\n }\n .main-header .view-title {\n font-size: 22px;\n }\n .sheet-view, .library-view {\n padding: 16px 20px 24px;\n }\n .menu-title {\n font-size: 17px;\n }\n .vinyl-grid {\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n gap: 14px;\n }\n .search-box input {\n width: 100px;\n }\n }\n\n @media (max-width: 640px) {\n .sidebar {\n display: none;\n }\n .main-content {\n width: 100%;\n }\n .main-header {\n padding: 14px 16px 10px;\n flex-wrap: wrap;\n gap: 8px;\n }\n .main-header .view-title {\n font-size: 20px;\n }\n .search-wrapper {\n order: 3;\n width: 100%;\n }\n .search-box {\n flex: 1;\n }\n .search-box input {\n width: 100%;\n }\n .sheet-view, .library-view {\n padding: 12px 16px 20px;\n }\n .vinyl-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n }\n .guitar-bg {\n width: 300px;\n height: 300px;\n bottom: -30px;\n right: -20px;\n opacity: 0.08;\n }\n }\n </style>\n</head>\n<body>\n\n <!-- 半透明复古吉他背景 -->\n <div class=\"guitar-bg\">\n <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n <g transform=\"translate(80, 60) rotate(-15)\">\n <!-- 吉他琴体 -->\n <ellipse cx=\"120\" cy=\"200\" rx=\"70\" ry=\"95\" fill=\"#2C2C2C\" stroke=\"#1A1A1A\" stroke-width=\"2\"/>\n <ellipse cx=\"120\" cy=\"140\" rx=\"45\" ry=\"55\" fill=\"#2C2C2C\" stroke=\"#1A1A1A\" stroke-width=\"2\"/>\n <!-- 音孔 -->\n <circle cx=\"120\" cy=\"180\" r=\"22\" fill=\"none\" stroke=\"#3A3A3A\" stroke-width=\"1.5\"/>\n <circle cx=\"120\" cy=\"180\" r=\"16\" fill=\"none\" stroke=\"#3A3A3A\" stroke-width=\"0.8\"/>\n <circle cx=\"120\" cy=\"180\" r=\"10\" fill=\"#1A1A1A\"/>\n <!-- 琴桥 -->\n <rect x=\"108\" y=\"230\" width=\"24\" height=\"4\" rx=\"1\" fill=\"#3A3A3A\"/>\n <!-- 琴颈 -->\n <rect x=\"116\" y=\"20\" width=\"8\" height=\"120\" fill=\"#2C2C2C\" stroke=\"#1A1A1A\" stroke-width=\"1.5\"/>\n <!-- 琴头 -->\n <rect x=\"113\" y=\"5\" width=\"14\" height=\"25\" rx=\"2\" fill=\"#2C2C2C\" stroke=\"#1A1A1A\" stroke-width=\"1.5\"/>\n <!-- 弦钮 -->\n <circle cx=\"111\" cy=\"12\" r=\"2\" fill=\"#4A4A4A\"/>\n <circle cx=\"129\" cy=\"12\" r=\"2\" fill=\"#4A4A4A\"/>\n <circle cx=\"111\" cy=\"20\" r=\"2\" fill=\"#4A4A4A\"/>\n <circle cx=\"129\" cy=\"20\" r=\"2\" fill=\"#4A4A4A\"/>\n <!-- 琴弦 -->\n <line x1=\"118\" y1=\"25\" x2=\"118\" y2=\"232\" stroke=\"#555\" stroke-width=\"0.5\"/>\n <line x1=\"120\" y1=\"25\" x2=\"120\" y2=\"232\" stroke=\"#555\" stroke-width=\"0.5\"/>\n <line x1=\"122\" y1=\"25\" x2=\"122\" y2=\"232\" stroke=\"#555\" stroke-width=\"0.5\"/>\n <!-- 品丝 -->\n <line x1=\"116\" y1=\"50\" x2=\"124\" y2=\"50\" stroke=\"#4A4A4A\" stroke-width=\"0.5\"/>\n <line x1=\"116\" y1=\"70\" x2=\"124\" y2=\"70\" stroke=\"#4A4A4A\" stroke-width=\"0.5\"/>\n <line x1=\"116\" y1=\"90\" x2=\"124\" y2=\"90\" stroke=\"#4A4A4A\" stroke-width=\"0.5\"/>\n <line x1=\"116\" y1=\"110\" x2=\"124\" y2=\"110\" stroke=\"#4A4A4A\" stroke-width=\"0.5\"/>\n <!-- 护板 -->\n <path d=\"M85 170 Q80 200 95 230\" fill=\"none\" stroke=\"#3A3A3A\" stroke-width=\"1\" opacity=\"0.5\"/>\n </g>\n <!-- 飘浮音符装饰 -->\n <g opacity=\"0.15\" fill=\"#1A1A1A\">\n <text x=\"280\" y=\"80\" font-family=\"serif\" font-size=\"28\" transform=\"rotate(10, 280, 80)\">♪</text>\n <text x=\"310\" y=\"130\" font-family=\"serif\" font-size=\"20\" transform=\"rotate(-8, 310, 130)\">♫</text>\n <text x=\"260\" y=\"160\" font-family=\"serif\" font-size=\"16\" transform=\"rotate(15, 260, 160)\">♩</text>\n <text x=\"330\" y=\"200\" font-family=\"serif\" font-size=\"22\" transform=\"rotate(-12, 330, 200)\">♪</text>\n </g>\n </svg>\n </div>\n\n <div class=\"app-container\">\n \n <!-- ===== 左侧索引栏 ===== -->\n <aside class=\"sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"archive-label\">独立电影档案</div>\n <h1>曲谱阅读器</h1>\n <div class=\"sub\">Independent Film · Score Archive</div>\n </div>\n \n <div class=\"double-line\"></div>\n \n <nav class=\"sidebar-nav\">\n <div class=\"nav-item active\" data-view=\"sheets\" onclick=\"switchView('sheets')\">\n <i class=\"fa-solid fa-music\"></i>\n <span>全部曲谱</span>\n </div>\n <div class=\"nav-item\" data-view=\"library\" onclick=\"switchView('library')\">\n <i class=\"fa-solid fa-record-vinyl\"></i>\n <span>我的曲库</span>\n </div>\n \n <div class=\"nav-divider\"></div>\n \n <div class=\"nav-item\">\n <i class=\"fa-regular fa-clock\"></i>\n <span>最近播放</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-regular fa-heart\"></i>\n <span>收藏曲目</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-regular fa-bookmark\"></i>\n <span>播放列表</span>\n </div>\n \n <div class=\"nav-divider\"></div>\n \n <div class=\"nav-item\">\n <i class=\"fa-regular fa-compass\"></i>\n <span>探索发现</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-regular fa-circle-question\"></i>\n <span>关于档案</span>\n </div>\n </nav>\n \n <div class=\"sidebar-footer\">\n <div class=\"film-badge\">独立电影配乐档案</div>\n <div class=\"issue-num\">Issue № 024 · 2025</div>\n </div>\n </aside>\n\n <!-- ===== 右侧主栏 ===== -->\n <main class=\"main-content\">\n \n <!-- 顶部栏 -->\n <header class=\"main-header\">\n <div class=\"view-title\" id=\"viewTitle