refactor: 重构管理后台为现代化编辑风 UI 并改用模态交互

- 参考收集端落地页的奶油纸质感 + 深海蓝侧栏 + Playfair Display + 金/陶/玉配色，重塑整体视觉
- 编辑、二维码从跳转路由改为模态弹窗，新增"复制链接"快捷操作
- 抽取 Modal / Toast / QRCodeModal / PageHeader / FormPrimitives 通用基建
- 合并三份 QRCode 页面为统一组件，精简路由配置

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/web/src/admin/MusicForm.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import Modal from "./Modal";
 import { adminFetch } from "./adminApi";
+import { useToast } from "./Toast";
+import { Field, ErrorRow, FormFooter, HintRow, fieldCls } from "./FormPrimitives";
 
 type Music = {
   id: string;
@@ -11,11 +13,16 @@ type Music = {
   enabled: boolean;
 };
 
-export default function MusicForm() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
+type Props = {
+  open: boolean;
+  id: string | null;
+  onClose: () => void;
+  onSaved: () => void;
+};
 
+export default function MusicForm({ open, id, onClose, onSaved }: Props) {
+  const toast = useToast();
+  const [currentId, setCurrentId] = useState<string | null>(null);
   const [title, setTitle] = useState("");
   const [subtitle, setSubtitle] = useState("");
   const [audioFile, setAudioFile] = useState("");
@@ -25,8 +32,17 @@ export default function MusicForm() {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState("");
 
+  const isEdit = !!currentId;
+
   useEffect(() => {
-    if (!id) return;
+    if (!open) return;
+    setCurrentId(id);
+    setError("");
+    if (!id) {
+      setTitle(""); setSubtitle(""); setAudioFile("");
+      setSortOrder(0); setEnabled(true);
+      return;
+    }
     adminFetch<Music[]>("/music").then((list) => {
       const item = list.find((m) => m.id === id);
       if (item) {
@@ -37,10 +53,10 @@ export default function MusicForm() {
         setEnabled(item.enabled);
       }
     });
-  }, [id]);
+  }, [open, id]);
 
   const handleUpload = async (file: File) => {
-    if (!id) {
+    if (!currentId) {
       setError("请先保存后再上传音频");
       return;
     }
@@ -49,11 +65,13 @@ export default function MusicForm() {
     try {
       const formData = new FormData();
       formData.append("audio", file);
-      const data = await adminFetch<{ path: string }>(`/music/${id}/upload`, {
+      const data = await adminFetch<{ path: string }>(`/music/${currentId}/upload`, {
         method: "POST",
         body: formData,
       });
       setAudioFile(data.path);
+      toast.show("音频已上传");
+      onSaved();
     } catch (e) {
       setError(e instanceof Error ? e.message : "上传失败");
     } finally {
@@ -63,10 +81,7 @@ export default function MusicForm() {
 
   const handleSave = async () => {
     setError("");
-    if (!title.trim()) {
-      setError("请输入标题");
-      return;
-    }
+    if (!title.trim()) return setError("请输入标题");
     setSaving(true);
     try {
       const payload = {
@@ -76,19 +91,22 @@ export default function MusicForm() {
         enabled,
       };
       if (isEdit) {
-        await adminFetch(`/music/${id}`, {
+        await adminFetch(`/music/${currentId}`, {
           method: "PUT",
           body: JSON.stringify(payload),
         });
+        toast.show("已保存");
+        onSaved();
+        onClose();
       } else {
         const music = await adminFetch<Music>("/music", {
           method: "POST",
           body: JSON.stringify(payload),
         });
-        navigate(`/admin/music/${music.id}/edit`, { replace: true });
-        return;
+        setCurrentId(music.id);
+        toast.show("已创建，现在可以上传音频");
+        onSaved();
       }
-      navigate("/admin/music");
     } catch (e) {
       setError(e instanceof Error ? e.message : "保存失败");
     } finally {
@@ -97,102 +115,88 @@ export default function MusicForm() {
   };
 
   return (
-    <div className="max-w-xl">
-      <h2 className="text-lg font-semibold text-gray-800 mb-4">
-        {isEdit ? "编辑音乐" : "添加音乐"}
-      </h2>
-
-      <div className="bg-white rounded-lg border border-gray-200 p-5 space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">标题</label>
+    <Modal
+      open={open}
+      onClose={onClose}
+      size="md"
+      eyebrow={isEdit ? "Edit Music" : "New Music"}
+      title={isEdit ? "编辑音乐" : "添加音乐"}
+      subtitle={isEdit ? "调整信息与上传音频" : "先保存基础信息，再上传音频文件"}
+    >
+      <div className="px-7 py-6 space-y-5">
+        <Field label="标题" required>
           <input
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             placeholder="如：朝天宫之歌"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm
-              focus:outline-none focus:ring-1 focus:ring-blue-500"
+            className={fieldCls}
           />
-        </div>
+        </Field>
 
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">副标题</label>
+        <Field label="副标题">
           <input
             value={subtitle}
             onChange={(e) => setSubtitle(e.target.value)}
             placeholder="选填，如：金陵千年韵"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm
-              focus:outline-none focus:ring-1 focus:ring-blue-500"
+            className={fieldCls}
           />
-        </div>
+        </Field>
 
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">排序</label>
+        <div className="grid grid-cols-[auto_1fr] gap-5 items-end">
+          <Field label="排序">
             <input
               type="number"
               value={sortOrder}
               onChange={(e) => setSortOrder(Number(e.target.value))}
-              className="w-24 px-3 py-2 border border-gray-300 rounded-md text-sm
-                focus:outline-none focus:ring-1 focus:ring-blue-500"
+              className={fieldCls + " w-28"}
             />
-          </div>
-          <div className="flex items-center pt-6">
-            <label className="flex items-center gap-2 text-sm text-gray-700">
-              <input
-                type="checkbox"
-                checked={enabled}
-                onChange={(e) => setEnabled(e.target.checked)}
-              />
-              启用
-            </label>
-          </div>
-        </div>
-
-        {isEdit && (
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              音频文件
-              <span className="text-xs text-gray-400 font-normal ml-2">
-                支持 MP3 / M4A / WAV，≤ 20 MB
-              </span>
-            </label>
-            {audioFile && (
-              <audio src={audioFile} controls preload="metadata" className="w-full mb-2" />
-            )}
+          </Field>
+          <label className="flex items-center gap-2.5 cursor-pointer select-none pb-2.5">
             <input
-              type="file"
-              accept="audio/*,.mp3,.m4a,.wav,.ogg"
-              onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
-              disabled={uploading}
-              className="text-xs text-gray-500"
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
+              className="w-4 h-4 accent-[var(--jade)]"
             />
-            {uploading && <p className="text-xs text-gray-500 mt-1">上传中…</p>}
-          </div>
-        )}
-
-        {!isEdit && (
-          <p className="text-xs text-gray-400">保存后可上传音频文件</p>
-        )}
-
-        {error && <p className="text-sm text-red-500">{error}</p>}
-
-        <div className="flex gap-3 pt-2">
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md
-              hover:bg-blue-700 disabled:opacity-50"
-          >
-            {saving ? "保存中..." : "保存"}
-          </button>
-          <button
-            onClick={() => navigate("/admin/music")}
-            className="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-md hover:bg-gray-50"
-          >
-            取消
-          </button>
+            <span className="text-sm text-[var(--text-secondary)]">启用（访客可访问）</span>
+          </label>
         </div>
+
+        {isEdit ? (
+          <Field label="音频文件" hint="MP3 / M4A / WAV，≤ 20 MB">
+            <div className="rounded-xl border border-[var(--border-muted)] bg-white p-4 space-y-3">
+              {audioFile ? (
+                <audio src={audioFile} controls preload="metadata" className="w-full" />
+              ) : (
+                <div className="text-xs text-[var(--text-muted)] py-4 text-center border border-dashed border-[var(--border-muted)] rounded-lg">
+                  尚未上传音频
+                </div>
+              )}
+              <label className="cursor-pointer inline-flex items-center gap-2 text-[13px] text-[var(--text-secondary)] hover:text-[var(--terracotta)] transition-colors">
+                <input
+                  type="file"
+                  accept="audio/*,.mp3,.m4a,.wav,.ogg"
+                  onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
+                  disabled={uploading}
+                  className="hidden"
+                />
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
+                </svg>
+                <span className="underline underline-offset-2 decoration-dotted">
+                  {uploading ? "上传中…" : audioFile ? "更换音频" : "选择音频文件"}
+                </span>
+              </label>
+            </div>
+          </Field>
+        ) : (
+          <HintRow text="保存基础信息后，即可上传音频文件" />
+        )}
+
+        {error && <ErrorRow text={error} />}
       </div>
-    </div>
+
+      <FormFooter onCancel={onClose} onSave={handleSave} saving={saving} primaryLabel={isEdit ? "保存" : "创建"} />
+    </Modal>
   );
 }