Update app.py

app.py

@@ -1,42 +1,53 @@
 import os
-import io
 import base64
 import tempfile
 import uuid
+import re
 from typing import Optional
 
 from fastapi import FastAPI, UploadFile, File, Form, HTTPException
-from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+from fastapi.responses import HTMLResponse, FileResponse
 from mutagen.mp3 import MP3
 from mutagen.id3 import (
-    ID3, TIT2, TPE1, TALB, TDRC, TRCK, TCON, COMM, APIC, TPE2, TCOM, TPOS
+    TIT2, TPE1, TALB, TDRC, TRCK, TCON, COMM, APIC,
+    TPE2, TCOM, TPOS, USLT, SYLT
 )
 
 app = FastAPI()
-
 TEMP_DIR = tempfile.mkdtemp()
 file_store = {}
 
 
+def safe_filename(name):
+    name = re.sub(r'[<>:"/\\|?*]', '_', name)
+    return name.strip('. ')
+
+
 def extract_cover(tags):
     if tags is None:
         return None
     for key in tags:
         if key.startswith("APIC"):
             apic = tags[key]
-            mime = apic.mime
             data = base64.b64encode(apic.data).decode("utf-8")
-            return {"mime": mime, "data": f"data:{mime};base64,{data}"}
+            return {"mime": apic.mime, "data": f"data:{apic.mime};base64,{data}"}
     return None
 
 
+def extract_lyrics(tags):
+    if tags is None:
+        return ""
+    for key in tags:
+        if key.startswith("USLT"):
+            return str(tags[key])
+    return ""
+
+
 def get_tag_text(tags, key, default=""):
     if tags is None:
         return default
     tag = tags.get(key)
-    if tag:
-        return str(tag)
-    return default
+    return str(tag) if tag else default
 
 
 @app.post("/api/upload")
@@ -56,10 +67,17 @@ async def upload_file(file: UploadFile = File(...)):
     try:
         audio = MP3(file_path)
         tags = audio.tags
+        comment = ""
+        if tags:
+            for key in tags:
+                if key.startswith("COMM"):
+                    comment = str(tags[key])
+                    break
 
-        info = {
+        return {
             "file_id": file_id,
             "filename": file.filename,
+            "filename_noext": os.path.splitext(file.filename)[0],
             "duration": round(audio.info.length, 2),
             "bitrate": audio.info.bitrate // 1000,
             "sample_rate": audio.info.sample_rate,
@@ -74,18 +92,11 @@ async def upload_file(file: UploadFile = File(...)):
                 "disc": get_tag_text(tags, "TPOS"),
                 "genre": get_tag_text(tags, "TCON"),
                 "composer": get_tag_text(tags, "TCOM"),
-                "comment": "",
+                "comment": comment,
+                "lyrics": extract_lyrics(tags),
             },
             "cover": extract_cover(tags),
         }
-
-        if tags:
-            for key in tags:
-                if key.startswith("COMM"):
-                    info["tags"]["comment"] = str(tags[key])
-                    break
-
-        return info
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"读取失败: {str(e)}")
 
@@ -93,6 +104,7 @@ async def upload_file(file: UploadFile = File(...)):
 @app.post("/api/save")
 async def save_tags(
     file_id: str = Form(...),
+    new_filename: str = Form(""),
     title: str = Form(""),
     artist: str = Form(""),
     album: str = Form(""),
@@ -103,6 +115,7 @@ async def save_tags(
     genre: str = Form(""),
     composer: str = Form(""),
     comment: str = Form(""),
+    lyrics: str = Form(""),
     cover: Optional[UploadFile] = File(None),
     remove_cover: str = Form("false"),
 ):
@@ -117,7 +130,6 @@ async def save_tags(
             audio.add_tags()
         except Exception:
             pass
-
         tags = audio.tags
 
         tag_map = {
@@ -131,7 +143,6 @@ async def save_tags(
             "TCON": (TCON, genre),
             "TCOM": (TCOM, composer),
         }
-
         for key, (cls, val) in tag_map.items():
             if val:
                 tags[key] = cls(encoding=3, text=val)
@@ -139,29 +150,37 @@ async def save_tags(
                 del tags[key]
 
         # Comment
-        keys_to_del = [k for k in tags if k.startswith("COMM")]
-        for k in keys_to_del:
+        for k in [k for k in tags if k.startswith("COMM")]:
             del tags[k]
         if comment:
             tags["COMM::eng"] = COMM(encoding=3, lang="eng", desc="", text=comment)
 
+        # Lyrics
+        for k in [k for k in tags if k.startswith("USLT")]:
+            del tags[k]
+        if lyrics:
+            tags["USLT::eng"] = USLT(encoding=3, lang="eng", desc="", text=lyrics)
+
         # Cover
         if remove_cover == "true":
-            keys_to_del = [k for k in tags if k.startswith("APIC")]
-            for k in keys_to_del:
+            for k in [k for k in tags if k.startswith("APIC")]:
                 del tags[k]
         elif cover:
             cover_data = await cover.read()
             mime = cover.content_type or "image/jpeg"
-            keys_to_del = [k for k in tags if k.startswith("APIC")]
-            for k in keys_to_del:
+            for k in [k for k in tags if k.startswith("APIC")]:
                 del tags[k]
-            tags["APIC:"] = APIC(
-                encoding=3, mime=mime, type=3, desc="Cover", data=cover_data
-            )
+            tags["APIC:"] = APIC(encoding=3, mime=mime, type=3, desc="Cover", data=cover_data)
 
         audio.save()
-        return {"success": True, "message": "保存成功"}
+
+        # Update filename
+        if new_filename:
+            clean = safe_filename(new_filename)
+            if clean:
+                file_store[file_id]["original_name"] = clean + ".mp3"
+
+        return {"success": True, "message": "保存成功", "filename": file_store[file_id]["original_name"]}
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"保存失败: {str(e)}")
 
@@ -170,9 +189,11 @@ async def save_tags(
 async def download_file(file_id: str):
     if file_id not in file_store:
         raise HTTPException(status_code=404, detail="文件不存在")
-    file_path = file_store[file_id]["path"]
-    original_name = file_store[file_id]["original_name"]
-    return FileResponse(file_path, media_type="audio/mpeg", filename=original_name)
+    return FileResponse(
+        file_store[file_id]["path"],
+        media_type="audio/mpeg",
+        filename=file_store[file_id]["original_name"],
+    )
 
 
 @app.delete("/api/file/{file_id}")
@@ -186,655 +207,396 @@ async def delete_file(file_id: str):
     return {"success": True}
 
 
-HTML_CONTENT = """
-<!DOCTYPE html>
+HTML = """<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MP3 Tag Editor</title>
 <style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #0f0f13;
-    color: #e0e0e0;
-    min-height: 100vh;
-  }
-
-  .header {
-    background: #1a1a24;
-    border-bottom: 1px solid #2a2a3a;
-    padding: 16px 24px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  .header h1 {
-    font-size: 20px;
-    font-weight: 700;
-    color: #63e2b7;
-  }
-  .header span { color: #888; font-size: 13px; }
-
-  .container {
-    max-width: 920px;
-    margin: 24px auto;
-    padding: 0 20px;
-  }
-
-  .card {
-    background: #1a1a24;
-    border: 1px solid #2a2a3a;
-    border-radius: 10px;
-    padding: 24px;
-    margin-bottom: 16px;
-  }
-  .card-title {
-    font-size: 15px;
-    font-weight: 600;
-    margin-bottom: 16px;
-    color: #ccc;
-  }
-
-  /* Upload */
-  .upload-zone {
-    border: 2px dashed #3a3a4a;
-    border-radius: 10px;
-    padding: 48px 24px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  .upload-zone:hover, .upload-zone.dragover {
-    border-color: #63e2b7;
-    background: rgba(99, 226, 183, 0.05);
-  }
-  .upload-zone svg { width: 48px; height: 48px; color: #555; margin-bottom: 12px; }
-  .upload-zone p { color: #aaa; margin-top: 8px; }
-  .upload-zone .main-text { font-size: 16px; color: #ccc; }
-
-  /* File Info Bar */
-  .file-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .file-bar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-  .file-name { font-weight: 600; color: #63e2b7; }
-  .tag-badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    background: #2a2a3a;
-    color: #aaa;
-  }
-  .tag-badge.info { background: #1a3a5c; color: #7ec8e3; }
-  .tag-badge.success { background: #1a3c2a; color: #63e2b7; }
-
-  .btn-close-file {
-    background: none;
-    border: none;
-    color: #e06c75;
-    cursor: pointer;
-    font-size: 13px;
-    padding: 4px 8px;
-    border-radius: 4px;
-  }
-  .btn-close-file:hover { background: rgba(224,108,117,0.1); }
-
-  /* Layout */
-  .editor-grid {
-    display: grid;
-    grid-template-columns: 240px 1fr;
-    gap: 16px;
-  }
-  @media (max-width: 700px) {
-    .editor-grid { grid-template-columns: 1fr; }
-  }
-
-  /* Cover */
-  .cover-box {
-    width: 100%;
-    aspect-ratio: 1;
-    border-radius: 8px;
-    overflow: hidden;
-    background: #12121a;
-    border: 1px dashed #2a2a3a;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-  .cover-box img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .cover-placeholder {
-    text-align: center;
-    color: #555;
-  }
-  .cover-placeholder svg { width: 48px; height: 48px; }
-
-  /* Form */
-  .form-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-  }
-  .form-grid .full { grid-column: 1 / -1; }
-
-  .form-group { display: flex; flex-direction: column; gap: 4px; }
-  .form-group label {
-    font-size: 12px;
-    color: #888;
-    font-weight: 500;
-  }
-  .form-group input,
-  .form-group textarea {
-    background: #12121a;
-    border: 1px solid #2a2a3a;
-    border-radius: 6px;
-    padding: 8px 12px;
-    color: #e0e0e0;
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.2s;
-    width: 100%;
-  }
-  .form-group input:focus,
-  .form-group textarea:focus {
-    border-color: #63e2b7;
-  }
-  .form-group textarea { resize: vertical; min-height: 68px; }
-
-  /* Buttons */
-  .btn {
-    padding: 8px 20px;
-    border-radius: 6px;
-    border: 1px solid transparent;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.2s;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
-  .btn-primary {
-    background: #63e2b7;
-    color: #0f0f13;
-    border-color: #63e2b7;
-  }
-  .btn-primary:hover:not(:disabled) { background: #7aebb0; }
-  .btn-success {
-    background: #2a6b4a;
-    color: #e0e0e0;
-    border-color: #3a8a5a;
-  }
-  .btn-success:hover:not(:disabled) { background: #3a8a5a; }
-  .btn-ghost {
-    background: transparent;
-    color: #aaa;
-    border-color: #3a3a4a;
-  }
-  .btn-ghost:hover:not(:disabled) { border-color: #63e2b7; color: #63e2b7; }
-  .btn-danger-ghost {
-    background: transparent;
-    color: #e06c75;
-    border-color: #5a2a2a;
-  }
-  .btn-danger-ghost:hover:not(:disabled) { background: rgba(224,108,117,0.1); }
-  .btn-block { width: 100%; justify-content: center; }
-
-  .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
-
-  .cover-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
-
-  /* Loading */
-  .loading {
-    text-align: center;
-    padding: 48px;
-    color: #888;
-  }
-  .spinner {
-    width: 32px; height: 32px;
-    border: 3px solid #2a2a3a;
-    border-top-color: #63e2b7;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin: 0 auto 12px;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
-
-  .footer {
-    text-align: center;
-    padding: 16px;
-    color: #555;
-    font-size: 12px;
-    border-top: 1px solid #1a1a24;
-    margin-top: 24px;
-  }
-
-  .toast {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 12px 20px;
-    border-radius: 8px;
-    font-size: 14px;
-    z-index: 9999;
-    animation: slideIn 0.3s ease;
-    max-width: 360px;
-  }
-  .toast.success { background: #1a3c2a; color: #63e2b7; border: 1px solid #2a5a3a; }
-  .toast.error { background: #3c1a1a; color: #e06c75; border: 1px solid #5a2a2a; }
-  .toast.info { background: #1a2a3c; color: #7ec8e3; border: 1px solid #2a3a5a; }
-  @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-
-  /* Modal */
-  .modal-overlay {
-    position: fixed; inset: 0;
-    background: rgba(0,0,0,0.7);
-    display: flex; align-items: center; justify-content: center;
-    z-index: 9998;
-  }
-  .modal-content {
-    background: #1a1a24;
-    border: 1px solid #2a2a3a;
-    border-radius: 12px;
-    padding: 20px;
-    max-width: 500px;
-    width: 90%;
-  }
-  .modal-content img { width: 100%; border-radius: 8px; }
-  .modal-header {
-    display: flex; justify-content: space-between; align-items: center;
-    margin-bottom: 16px;
-  }
-  .modal-header h3 { font-size: 16px; }
-
-  input[type="file"] { display: none; }
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f0f13;color:#e0e0e0;min-height:100vh}
+.header{background:#1a1a24;border-bottom:1px solid #2a2a3a;padding:14px 24px;display:flex;align-items:center;gap:12px}
+.header h1{font-size:20px;font-weight:700;color:#63e2b7}
+.header span{color:#888;font-size:13px}
+.container{max-width:960px;margin:20px auto;padding:0 16px}
+.card{background:#1a1a24;border:1px solid #2a2a3a;border-radius:10px;padding:20px;margin-bottom:14px}
+.card-title{font-size:14px;font-weight:600;margin-bottom:14px;color:#999;text-transform:uppercase;letter-spacing:.5px}
+
+.upload-zone{border:2px dashed #3a3a4a;border-radius:10px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s}
+.upload-zone:hover,.upload-zone.dragover{border-color:#63e2b7;background:rgba(99,226,183,.05)}
+.upload-zone svg{width:48px;height:48px;color:#555;margin-bottom:12px}
+.upload-zone .main-text{font-size:16px;color:#ccc}
+.upload-zone p{color:#888;margin-top:6px}
+
+.file-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
+.file-bar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.file-name{font-weight:600;color:#63e2b7}
+.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;background:#2a2a3a;color:#aaa}
+.badge.b{background:#1a3a5c;color:#7ec8e3}
+.badge.g{background:#1a3c2a;color:#63e2b7}
+
+.btn-text{background:none;border:none;color:#e06c75;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px}
+.btn-text:hover{background:rgba(224,108,117,.1)}
+
+.editor-grid{display:grid;grid-template-columns:220px 1fr;gap:14px}
+@media(max-width:700px){.editor-grid{grid-template-columns:1fr}}
+
+.cover-box{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#12121a;border:1px dashed #2a2a3a;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
+.cover-box img{width:100%;height:100%;object-fit:cover}
+.cover-ph{text-align:center;color:#444}
+.cover-ph svg{width:40px;height:40px}
+.cover-actions{display:flex;flex-direction:column;gap:6px;margin-top:10px}
+
+.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.form-grid .full{grid-column:1/-1}
+.fg{display:flex;flex-direction:column;gap:3px}
+.fg label{font-size:11px;color:#777;font-weight:500;text-transform:uppercase;letter-spacing:.3px}
+.fg input,.fg textarea,.fg select{background:#12121a;border:1px solid #2a2a3a;border-radius:6px;padding:8px 10px;color:#e0e0e0;font-size:13px;outline:none;transition:border-color .2s;width:100%;font-family:inherit}
+.fg input:focus,.fg textarea:focus{border-color:#63e2b7}
+.fg textarea{resize:vertical;min-height:60px;font-size:13px}
+.fg .lyrics-area{min-height:140px;font-family:'Courier New',monospace;font-size:12px;line-height:1.6}
+
+.btn{padding:7px 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:5px}
+.btn:disabled{opacity:.35;cursor:not-allowed}
+.btn-p{background:#63e2b7;color:#0f0f13;border-color:#63e2b7}
+.btn-p:hover:not(:disabled){background:#7aebb0}
+.btn-s{background:#2a6b4a;color:#e0e0e0;border-color:#3a8a5a}
+.btn-s:hover:not(:disabled){background:#3a8a5a}
+.btn-g{background:transparent;color:#aaa;border-color:#3a3a4a}
+.btn-g:hover:not(:disabled){border-color:#63e2b7;color:#63e2b7}
+.btn-d{background:transparent;color:#e06c75;border-color:#5a2a2a}
+.btn-d:hover:not(:disabled){background:rgba(224,108,117,.1)}
+.btn-block{width:100%;justify-content:center}
+
+.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
+
+.loading{text-align:center;padding:48px;color:#888}
+.spinner{width:32px;height:32px;border:3px solid #2a2a3a;border-top-color:#63e2b7;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+.footer{text-align:center;padding:16px;color:#444;font-size:11px;border-top:1px solid #1a1a24;margin-top:20px}
+
+.toast{position:fixed;top:16px;right:16px;padding:10px 18px;border-radius:8px;font-size:13px;z-index:9999;animation:slideIn .3s ease;max-width:340px}
+.toast.ok{background:#1a3c2a;color:#63e2b7;border:1px solid #2a5a3a}
+.toast.err{background:#3c1a1a;color:#e06c75;border:1px solid #5a2a2a}
+.toast.info{background:#1a2a3c;color:#7ec8e3;border:1px solid #2a3a5a}
+@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
+
+.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:9998}
+.modal-box{background:#1a1a24;border:1px solid #2a2a3a;border-radius:12px;padding:20px;max-width:500px;width:90%}
+.modal-box img{width:100%;border-radius:8px}
+.modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
+.modal-hd h3{font-size:15px;color:#ccc}
+
+input[type="file"]{display:none}
+
+.tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:1px solid #2a2a3a}
+.tab{padding:8px 18px;cursor:pointer;font-size:13px;color:#888;border-bottom:2px solid transparent;transition:all .2s;user-select:none}
+.tab:hover{color:#ccc}
+.tab.active{color:#63e2b7;border-bottom-color:#63e2b7}
+.tab-panel{display:none}
+.tab-panel.active{display:block}
+
+.filename-row{display:flex;gap:8px;align-items:flex-end}
+.filename-row .fg{flex:1}
+.filename-ext{color:#666;font-size:14px;padding:8px 0;white-space:nowrap}
 </style>
 </head>
 <body>
 
 <div class="header">
-  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#63e2b7" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#63e2b7" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
   <h1>MP3 Tag Editor</h1>
-  <span>在线编辑 MP3 元数据信息</span>
+  <span>在线编辑 MP3 标签 / 歌词 / 封面 / 文件名</span>
 </div>
 
-<div class="container" id="app">
+<div class="container">
 
   <!-- Upload -->
   <div class="card" id="uploadCard">
-    <div class="card-title">上传文件</div>
-    <div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()">
+    <div class="upload-zone" id="uploadZone" onclick="$('fileInput').click()">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 16V4m0 0L8 8m4-4l4 4"/><path d="M20 16v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2"/></svg>
       <p class="main-text">点击或拖拽 MP3 文件到此处</p>
-      <p>支持 .mp3 格式文件</p>
+      <p>支持 .mp3 格式</p>
     </div>
     <input type="file" id="fileInput" accept=".mp3">
   </div>
 
   <!-- Loading -->
-  <div class="card" id="loadingCard" style="display:none;">
-    <div class="loading">
-      <div class="spinner"></div>
-      <p>正在解析文件...</p>
-    </div>
+  <div class="card" id="loadingCard" style="display:none">
+    <div class="loading"><div class="spinner"></div><p>正在解析文件...</p></div>
   </div>
 
   <!-- Editor -->
-  <div id="editorSection" style="display:none;">
+  <div id="editor" style="display:none">
 
-    <!-- File bar -->
-    <div class="card" id="fileBarCard">
+    <div class="card">
       <div class="file-bar">
         <div class="file-bar-left">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#63e2b7" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-          <span class="file-name" id="fileName"></span>
-          <span class="tag-badge info" id="fileBitrate"></span>
-          <span class="tag-badge success" id="fileSampleRate"></span>
-          <span class="tag-badge" id="fileDuration"></span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#63e2b7" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+          <span class="file-name" id="dispName"></span>
+          <span class="badge b" id="dispBit"></span>
+          <span class="badge g" id="dispSR"></span>
+          <span class="badge" id="dispDur"></span>
+          <span class="badge" id="dispCh"></span>
         </div>
-        <button class="btn-close-file" onclick="resetFile()">✕ 关闭文件</button>
+        <button class="btn-text" onclick="resetFile()">✕ 关闭</button>
       </div>
     </div>
 
     <div class="editor-grid">
-      <!-- Left: Cover -->
+      <!-- Left -->
       <div>
         <div class="card">
-          <div class="card-title">封面图片</div>
-          <div class="cover-box" id="coverBox" onclick="showCoverPreview()">
-            <img id="coverImg" style="display:none;">
-            <div class="cover-placeholder" id="coverPlaceholder">
+          <div class="card-title">封面</div>
+          <div class="cover-box" id="coverBox" onclick="previewCover()">
+            <img id="coverImg" style="display:none">
+            <div class="cover-ph" id="coverPH">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
-              <p style="margin-top:8px;">无封面</p>
+              <p style="margin-top:6px;font-size:12px">无封面</p>
             </div>
           </div>
           <div class="cover-actions">
-            <button class="btn btn-ghost btn-block" onclick="document.getElementById('coverInput').click()">
-              🖼️ <span id="coverBtnText">添加封面</span>
-            </button>
-            <button class="btn btn-danger-ghost btn-block" id="removeCoverBtn" style="display:none;" onclick="removeCover()">
-              🗑️ 移除封面
-            </button>
+            <button class="btn btn-g btn-block" onclick="$('coverInput').click()"><span id="coverBtnT">添加封面</span></button>
+            <button class="btn btn-d btn-block" id="rmCoverBtn" style="display:none" onclick="removeCover()">移除封面</button>
           </div>
           <input type="file" id="coverInput" accept="image/*">
         </div>
       </div>
 
-      <!-- Right: Form -->
+      <!-- Right -->
       <div>
         <div class="card">
-          <div class="card-title">标签信息</div>
-          <div class="form-grid">
-            <div class="form-group full">
-              <label>标题</label>
-              <input type="text" id="tag_title" placeholder="歌曲标题">
-            </div>
-            <div class="form-group">
-              <label>艺术家</label>
-              <input type="text" id="tag_artist" placeholder="表演者">
-            </div>
-            <div class="form-group">
-              <label>专辑艺术家</label>
-              <input type="text" id="tag_album_artist" placeholder="专辑艺术家">
-            </div>
-            <div class="form-group">
-              <label>专辑</label>
-              <input type="text" id="tag_album" placeholder="专辑名称">
-            </div>
-            <div class="form-group">
-              <label>年份</label>
-              <input type="text" id="tag_year" placeholder="发行年份">
+          <!-- Tabs -->
+          <div class="tabs">
+            <div class="tab active" onclick="switchTab('basic',this)">基本信息</div>
+            <div class="tab" onclick="switchTab('lyrics',this)">歌词</div>
+            <div class="tab" onclick="switchTab('file',this)">文件名</div>
+          </div>
+
+          <!-- Tab: Basic -->
+          <div class="tab-panel active" id="panel_basic">
+            <div class="form-grid">
+              <div class="fg full"><label>标题 Title</label><input id="t_title" placeholder="歌曲标题"></div>
+              <div class="fg"><label>艺术家 Artist</label><input id="t_artist" placeholder="表演者"></div>
+              <div class="fg"><label>专辑艺术家</label><input id="t_album_artist" placeholder="Album Artist"></div>
+              <div class="fg"><label>专辑 Album</label><input id="t_album" placeholder="专辑名称"></div>
+              <div class="fg"><label>年份 Year</label><input id="t_year" placeholder="发行年份"></div>
+              <div class="fg"><label>音轨 Track</label><input id="t_track" placeholder="1 或 1/12"></div>
+              <div class="fg"><label>碟片 Disc</label><input id="t_disc" placeholder="1 或 1/2"></div>
+              <div class="fg"><label>流派 Genre</label><input id="t_genre" placeholder="流派" list="gl">
+                <datalist id="gl">
+                  <option value="Pop"><option value="Rock"><option value="Hip-Hop"><option value="R&B">
+                  <option value="Jazz"><option value="Blues"><option value="Classical"><option value="Country">
+                  <option value="Electronic"><option value="Dance"><option value="Folk"><option value="Indie">
+                  <option value="Metal"><option value="Punk"><option value="Soul"><option value="Alternative">
+                  <option value="Ambient"><option value="Funk"><option value="Latin"><option value="Soundtrack">
+                  <option value="J-Pop"><option value="K-Pop"><option value="C-Pop"><option value="Anime">
+                  <option value="Game"><option value="Instrumental"><option value="New Age"><option value="Reggae">
+                </datalist>
+              </div>
+              <div class="fg"><label>作曲 Composer</label><input id="t_composer" placeholder="作曲者"></div>
+              <div class="fg full"><label>注释 Comment</label><textarea id="t_comment" placeholder="注释信息"></textarea></div>
             </div>
-            <div class="form-group">
-              <label>音轨号</label>
-              <input type="text" id="tag_track" placeholder="如: 1 或 1/12">
+          </div>
+
+          <!-- Tab: Lyrics -->
+          <div class="tab-panel" id="panel_lyrics">
+            <div class="fg">
+              <label>歌词 Lyrics（支持 LRC 时间轴格式）</label>
+              <textarea id="t_lyrics" class="lyrics-area" placeholder="[00:00.00] 在此粘贴歌词...&#10;[00:05.20] 支持 LRC 格式&#10;&#10;也可以输入纯文本歌词"></textarea>
             </div>
-            <div class="form-group">
-              <label>碟片号</label>
-              <input type="text" id="tag_disc" placeholder="如: 1 或 1/2">
+            <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap">
+              <button class="btn btn-g" onclick="clearLyrics()">清空歌词</button>
+              <label class="btn btn-g" style="cursor:pointer">
+                导入 .lrc 文件
+                <input type="file" accept=".lrc,.txt" onchange="importLrc(event)" style="display:none">
+              </label>
+              <button class="btn btn-g" onclick="exportLrc()">导出 .lrc</button>
             </div>
-            <div class="form-group">
-              <label>流派</label>
-              <input type="text" id="tag_genre" placeholder="音乐流派" list="genreList">
-              <datalist id="genreList">
-                <option value="Pop"><option value="Rock"><option value="Hip-Hop">
-                <option value="R&B"><option value="Jazz"><option value="Blues">
-                <option value="Classical"><option value="Country"><option value="Electronic">
-                <option value="Dance"><option value="Folk"><option value="Indie">
-                <option value="Metal"><option value="Punk"><option value="Reggae">
-                <option value="Soul"><option value="Alternative"><option value="Ambient">
-                <option value="Funk"><option value="Latin"><option value="Soundtrack">
-                <option value="J-Pop"><option value="K-Pop"><option value="C-Pop">
-                <option value="Anime"><option value="Game"><option value="Instrumental">
-              </datalist>
+          </div>
+
+          <!-- Tab: Filename -->
+          <div class="tab-panel" id="panel_file">
+            <div class="fg" style="margin-bottom:12px">
+              <label>原始文件名</label>
+              <input id="origName" disabled style="opacity:.5">
             </div>
-            <div class="form-group">
-              <label>作曲</label>
-              <input type="text" id="tag_composer" placeholder="作曲者">
+            <div class="filename-row">
+              <div class="fg">
+                <label>新文件名（不含扩展名）</label>
+                <input id="t_filename" placeholder="输入新文件名">
+              </div>
+              <div class="filename-ext">.mp3</div>
             </div>
-            <div class="form-group full">
-              <label>注释</label>
-              <textarea id="tag_comment" placeholder="注释信息"></textarea>
+            <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
+              <button class="btn btn-g" onclick="autoFilename('ta')" title="艺术家 - 标题">套用: 艺术家 - 标题</button>
+              <button class="btn btn-g" onclick="autoFilename('tta')" title="音轨. 标题 - 艺术家">套用: 音轨. 标题</button>
+              <button class="btn btn-g" onclick="autoFilename('t')" title="标题">套用: 标题</button>
             </div>
           </div>
         </div>
 
         <div class="actions">
-          <button class="btn btn-ghost" id="resetBtn" onclick="resetTags()">🔄 重置</button>
-          <button class="btn btn-primary" id="saveBtn" onclick="saveTags()">💾 保存标签</button>
-          <button class="btn btn-success" id="downloadBtn" onclick="downloadFile()" disabled>📥 下载文件</button>
+          <button class="btn btn-g" id="resetBtn" onclick="resetTags()">🔄 重置</button>
+          <button class="btn btn-p" id="saveBtn" onclick="saveTags()">💾 保存</button>
+          <button class="btn btn-s" id="dlBtn" onclick="downloadFile()" disabled>📥 下载</button>
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<div class="footer">
-  MP3 Tag Editor · 基于 Mutagen 构建 · 文件仅在服务端临时存储
-</div>
+<div class="footer">MP3 Tag Editor · Mutagen + FastAPI · 文件仅临时存储于服务端内存</div>
 
 <!-- Cover Modal -->
-<div class="modal-overlay" id="coverModal" style="display:none;" onclick="closeCoverModal(event)">
-  <div class="modal-content" onclick="event.stopPropagation()">
-    <div class="modal-header">
-      <h3>封面预览</h3>
-      <button class="btn-close-file" onclick="document.getElementById('coverModal').style.display='none'">✕</button>
-    </div>
+<div class="modal-overlay" id="coverModal" style="display:none" onclick="if(event.target===this)this.style.display='none'">
+  <div class="modal-box" onclick="event.stopPropagation()">
+    <div class="modal-hd"><h3>封面预览</h3><button class="btn-text" onclick="$('coverModal').style.display='none'">✕</button></div>
     <img id="coverModalImg">
   </div>
 </div>
 
 <script>
-let fileInfo = null;
-let originalTags = {};
-let coverFileData = null;
-let removeCoverFlag = false;
-
-const $ = id => document.getElementById(id);
-const tagFields = ['title','artist','album','album_artist','year','track','disc','genre','composer','comment'];
-
-// Toast
-function showToast(msg, type='info') {
-  const t = document.createElement('div');
-  t.className = 'toast ' + type;
-  t.textContent = msg;
-  document.body.appendChild(t);
-  setTimeout(() => { t.style.opacity='0'; t.style.transition='opacity 0.3s'; setTimeout(()=>t.remove(),300); }, 3000);
+const $=id=>document.getElementById(id);
+const TAGS=['title','artist','album','album_artist','year','track','disc','genre','composer','comment'];
+let info=null, origTags={}, coverFile=null, rmCover=false;
+
+function toast(m,t='info'){const d=document.createElement('div');d.className='toast '+(t==='ok'?'ok':t==='err'?'err':'info');d.textContent=m;document.body.appendChild(d);setTimeout(()=>{d.style.opacity='0';d.style.transition='opacity .3s';setTimeout(()=>d.remove(),300)},3000)}
+
+// Tab switching
+function switchTab(name,el){
+  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
+  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
+  el.classList.add('active');
+  $('panel_'+name).classList.add('active');
 }
 
-// Upload zone drag & drop
-const uz = $('uploadZone');
-uz.addEventListener('dragover', e => { e.preventDefault(); uz.classList.add('dragover'); });
-uz.addEventListener('dragleave', () => uz.classList.remove('dragover'));
-uz.addEventListener('drop', e => {
-  e.preventDefault();
-  uz.classList.remove('dragover');
-  const files = e.dataTransfer.files;
-  if (files.length > 0 && files[0].name.toLowerCase().endsWith('.mp3')) {
-    uploadFile(files[0]);
-  } else {
-    showToast('请上传 .mp3 文件', 'error');
-  }
+// Upload
+const uz=$('uploadZone');
+uz.addEventListener('dragover',e=>{e.preventDefault();uz.classList.add('dragover')});
+uz.addEventListener('dragleave',()=>uz.classList.remove('dragover'));
+uz.addEventListener('drop',e=>{e.preventDefault();uz.classList.remove('dragover');const f=e.dataTransfer.files;if(f.length&&f[0].name.toLowerCase().endsWith('.mp3'))upload(f[0]);else toast('请上传 .mp3 文件','err')});
+$('fileInput').addEventListener('change',e=>{if(e.target.files.length)upload(e.target.files[0])});
+
+$('coverInput').addEventListener('change',e=>{
+  if(!e.target.files.length)return;
+  coverFile=e.target.files[0];rmCover=false;
+  const r=new FileReader();
+  r.onload=ev=>{$('coverImg').src=ev.target.result;$('coverImg').style.display='block';$('coverPH').style.display='none';$('rmCoverBtn').style.display='block';$('coverBtnT').textContent='更换封面'};
+  r.readAsDataURL(coverFile);
 });
 
-$('fileInput').addEventListener('change', e => {
-  if (e.target.files.length > 0) uploadFile(e.target.files[0]);
-});
+async function upload(file){
+  $('uploadCard').style.display='none';$('loadingCard').style.display='block';
+  const fd=new FormData();fd.append('file',file);
+  try{
+    const r=await fetch('/api/upload',{method:'POST',body:fd});
+    if(!r.ok){const e=await r.json();throw new Error(e.detail||'上传失败')}
+    info=await r.json();
+
+    TAGS.forEach(f=>{const el=$('t_'+f);if(el)el.value=info.tags[f]||''});
+    $('t_lyrics').value=info.tags.lyrics||'';
+    origTags={...info.tags};
+
+    $('dispName').textContent=info.filename;
+    $('dispBit').textContent=info.bitrate+' kbps';
+    $('dispSR').textContent=info.sample_rate+' Hz';
+    $('dispCh').textContent=info.channels+'ch';
+    const mm=Math.floor(info.duration/60),ss=Math.floor(info.duration%60);
+    $('dispDur').textContent=mm+':'+String(ss).padStart(2,'0');
+
+    $('origName').value=info.filename;
+    $('t_filename').value=info.filename_noext;
+
+    if(info.cover&&info.cover.data){$('coverImg').src=info.cover.data;$('coverImg').style.display='block';$('coverPH').style.display='none';$('rmCoverBtn').style.display='block';$('coverBtnT').textContent='更换封面'}
+    else{$('coverImg').style.display='none';$('coverPH').style.display='flex';$('rmCoverBtn').style.display='none';$('coverBtnT').textContent='添加封面'}
+
+    coverFile=null;rmCover=false;$('dlBtn').disabled=true;
+    $('loadingCard').style.display='none';$('editor').style.display='block';
+    toast('文件解析成功','ok');
+  }catch(e){$('loadingCard').style.display='none';$('uploadCard').style.display='block';toast(e.message,'err')}
+}
 
-$('coverInput').addEventListener('change', e => {
-  if (e.target.files.length > 0) {
-    const file = e.target.files[0];
-    coverFileData = file;
-    removeCoverFlag = false;
-    const reader = new FileReader();
-    reader.onload = ev => {
-      $('coverImg').src = ev.target.result;
-      $('coverImg').style.display = 'block';
-      $('coverPlaceholder').style.display = 'none';
-      $('removeCoverBtn').style.display = 'block';
-      $('coverBtnText').textContent = '更换封面';
-    };
-    reader.readAsDataURL(file);
-  }
-});
+function removeCover(){$('coverImg').style.display='none';$('coverPH').style.display='flex';$('rmCoverBtn').style.display='none';$('coverBtnT').textContent='添加封面';coverFile=null;rmCover=true}
 
-async function uploadFile(file) {
-  $('uploadCard').style.display = 'none';
-  $('loadingCard').style.display = 'block';
-
-  const fd = new FormData();
-  fd.append('file', file);
-
-  try {
-    const res = await fetch('/api/upload', { method: 'POST', body: fd });
-    if (!res.ok) {
-      const err = await res.json();
-      throw new Error(err.detail || '上传失败');
-    }
-    fileInfo = await res.json();
-
-    // Fill form
-    tagFields.forEach(f => {
-      const el = $('tag_' + f);
-      if (el) el.value = fileInfo.tags[f] || '';
-    });
-    originalTags = { ...fileInfo.tags };
-
-    // File info bar
-    $('fileName').textContent = fileInfo.filename;
-    $('fileBitrate').textContent = fileInfo.bitrate + ' kbps';
-    $('fileSampleRate').textContent = fileInfo.sample_rate + ' Hz';
-    const m = Math.floor(fileInfo.duration / 60);
-    const s = Math.floor(fileInfo.duration % 60);
-    $('fileDuration').textContent = m + ':' + String(s).padStart(2,'0');
-
-    // Cover
-    if (fileInfo.cover && fileInfo.cover.data) {
-      $('coverImg').src = fileInfo.cover.data;
-      $('coverImg').style.display = 'block';
-      $('coverPlaceholder').style.display = 'none';
-      $('removeCoverBtn').style.display = 'block';
-      $('coverBtnText').textContent = '更换封面';
-    } else {
-      $('coverImg').style.display = 'none';
-      $('coverPlaceholder').style.display = 'flex';
-      $('removeCoverBtn').style.display = 'none';
-      $('coverBtnText').textContent = '添加封面';
-    }
-
-    coverFileData = null;
-    removeCoverFlag = false;
-    $('downloadBtn').disabled = true;
-
-    $('loadingCard').style.display = 'none';
-    $('editorSection').style.display = 'block';
-    showToast('文件解析成功', 'success');
-
-  } catch (err) {
-    $('loadingCard').style.display = 'none';
-    $('uploadCard').style.display = 'block';
-    showToast(err.message, 'error');
-  }
+function resetTags(){
+  TAGS.forEach(f=>{const el=$('t_'+f);if(el)el.value=origTags[f]||''});
+  $('t_lyrics').value=origTags.lyrics||'';
+  $('t_filename').value=info.filename_noext;
+  if(info.cover&&info.cover.data){$('coverImg').src=info.cover.data;$('coverImg').style.display='block';$('coverPH').style.display='none';$('rmCoverBtn').style.display='block';$('coverBtnT').textContent='更换封面'}
+  else{$('coverImg').style.display='none';$('coverPH').style.display='flex';$('rmCoverBtn').style.display='none';$('coverBtnT').textContent='添加封面'}
+  coverFile=null;rmCover=false;toast('已重置','info');
 }
 
-function removeCover() {
-  $('coverImg').style.display = 'none';
-  $('coverPlaceholder').style.display = 'flex';
-  $('removeCoverBtn').style.display = 'none';
-  $('coverBtnText').textContent = '添加封面';
-  coverFileData = null;
-  removeCoverFlag = true;
+async function saveTags(){
+  if(!info)return;
+  $('saveBtn').disabled=true;$('saveBtn').textContent='⏳ 保存中...';
+  const fd=new FormData();
+  fd.append('file_id',info.file_id);
+  fd.append('new_filename',$('t_filename').value);
+  TAGS.forEach(f=>fd.append(f,$('t_'+f)?$('t_'+f).value:''));
+  fd.append('lyrics',$('t_lyrics').value);
+  fd.append('remove_cover',rmCover?'true':'false');
+  if(coverFile)fd.append('cover',coverFile);
+  try{
+    const r=await fetch('/api/save',{method:'POST',body:fd});
+    if(!r.ok){const e=await r.json();throw new Error(e.detail||'保存失败')}
+    const res=await r.json();
+    $('dlBtn').disabled=false;
+    if(res.filename){$('dispName').textContent=res.filename;info.original_name=res.filename}
+    toast('保存成功！可以下载了','ok');
+  }catch(e){toast(e.message,'err')}
+  finally{$('saveBtn').disabled=false;$('saveBtn').textContent='💾 保存'}
 }
 
-function resetTags() {
-  tagFields.forEach(f => {
-    const el = $('tag_' + f);
-    if (el) el.value = originalTags[f] || '';
-  });
-
-  // Restore cover
-  if (fileInfo.cover && fileInfo.cover.data) {
-    $('coverImg').src = fileInfo.cover.data;
-    $('coverImg').style.display = 'block';
-    $('coverPlaceholder').style.display = 'none';
-    $('removeCoverBtn').style.display = 'block';
-    $('coverBtnText').textContent = '更换封面';
-  } else {
-    $('coverImg').style.display = 'none';
-    $('coverPlaceholder').style.display = 'flex';
-    $('removeCoverBtn').style.display = 'none';
-    $('coverBtnText').textContent = '添加封面';
-  }
-  coverFileData = null;
-  removeCoverFlag = false;
-  showToast('已重置为原始标签', 'info');
-}
+function downloadFile(){if(!info)return;const a=document.createElement('a');a.href='/api/download/'+info.file_id;a.download=info.original_name||info.filename;a.click()}
 
-async function saveTags() {
-  if (!fileInfo) return;
-
-  $('saveBtn').disabled = true;
-  $('saveBtn').textContent = '⏳ 保存中...';
-
-  const fd = new FormData();
-  fd.append('file_id', fileInfo.file_id);
-
-  tagFields.forEach(f => {
-    const el = $('tag_' + f);
-    fd.append(f, el ? el.value : '');
-  });
-
-  fd.append('remove_cover', removeCoverFlag ? 'true' : 'false');
-  if (coverFileData) {
-    fd.append('cover', coverFileData);
-  }
-
-  try {
-    const res = await fetch('/api/save', { method: 'POST', body: fd });
-    if (!res.ok) {
-      const err = await res.json();
-      throw new Error(err.detail || '保存失败');
-    }
-    $('downloadBtn').disabled = false;
-    showToast('标签保存成功！可以下载文件了', 'success');
-  } catch (err) {
-    showToast(err.message, 'error');
-  } finally {
-    $('saveBtn').disabled = false;
-    $('saveBtn').textContent = '💾 保存标签';
-  }
+async function resetFile(){
+  if(info){try{await fetch('/api/file/'+info.file_id,{method:'DELETE'})}catch{}}
+  info=null;coverFile=null;rmCover=false;
+  $('editor').style.display='none';$('uploadCard').style.display='block';
+  $('fileInput').value='';$('coverInput').value='';
+  TAGS.forEach(f=>{const el=$('t_'+f);if(el)el.value=''});
+  $('t_lyrics').value='';$('t_filename').value='';
 }
 
-function downloadFile() {
-  if (!fileInfo) return;
-  const a = document.createElement('a');
-  a.href = '/api/download/' + fileInfo.file_id;
-  a.download = fileInfo.filename;
-  a.click();
-}
+function previewCover(){if($('coverImg').style.display!=='none'){$('coverModalImg').src=$('coverImg').src;$('coverModal').style.display='flex'}}
+
+// Lyrics helpers
+function clearLyrics(){$('t_lyrics').value='';toast('歌词已清空','info')}
 
-async function resetFile() {
-  if (fileInfo) {
-    try { await fetch('/api/file/' + fileInfo.file_id, { method: 'DELETE' }); } catch {}
-  }
-  fileInfo = null;
-  coverFileData = null;
-  removeCoverFlag = false;
-  $('editorSection').style.display = 'none';
-  $('uploadCard').style.display = 'block';
-  $('fileInput').value = '';
-  $('coverInput').value = '';
-  tagFields.forEach(f => { const el=$('tag_'+f); if(el) el.value=''; });
+function importLrc(e){
+  const file=e.target.files[0];if(!file)return;
+  const r=new FileReader();
+  r.onload=ev=>{$('t_lyrics').value=ev.target.result;toast('歌词已导入','ok')};
+  r.readAsText(file,'utf-8');
+  e.target.value='';
 }
 
-function showCoverPreview() {
-  if ($('coverImg').style.display !== 'none') {
-    $('coverModalImg').src = $('coverImg').src;
-    $('coverModal').style.display = 'flex';
-  }
+function exportLrc(){
+  const text=$('t_lyrics').value;if(!text.trim()){toast('没有歌词可导出','err');return}
+  const title=$('t_title').value||'lyrics';
+  const blob=new Blob([text],{type:'text/plain;charset=utf-8'});
+  const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=title+'.lrc';a.click();URL.revokeObjectURL(a.href);
 }
 
-function closeCoverModal(e) {
-  if (e.target === $('coverModal')) $('coverModal').style.display = 'none';
+// Auto filename
+function autoFilename(mode){
+  const t=$('t_title').value,a=$('t_artist').value,tr=$('t_track').value;
+  let name='';
+  if(mode==='ta')name=(a&&t)?a+' - '+t:(t||a||'');
+  else if(mode==='tta')name=(tr?tr.split('/')[0].padStart(2,'0')+'. ':'')+(t||'');
+  else if(mode==='t')name=t||'';
+  if(name)$('t_filename').value=name;
+  else toast('请先填写对应标签','err');
 }
 </script>
 </body>
-</html>
-"""
+</html>"""
 
 
 @app.get("/")
 async def index():
-    return HTMLResponse(content=HTML_CONTENT)
+    return HTMLResponse(content=HTML)