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

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

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

packages/web/src/admin/PageHeader.tsx

@@ -0,0 +1,161 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  eyebrow: string;
+  title: string;
+  caption?: string;
+  action?: ReactNode;
+};
+
+export default function PageHeader({ eyebrow, title, caption, action }: Props) {
+  return (
+    <div className="mb-8 flex items-end justify-between gap-6 flex-wrap">
+      <div>
+        <div className="flex items-center gap-3 mb-2.5">
+          <span className="block w-8 h-px bg-[var(--gold)]" />
+          <span
+            className="text-[var(--gold)] text-[10px] tracking-[0.35em] uppercase"
+            style={{ fontFamily: "'Playfair Display', serif", fontWeight: 500 }}
+          >
+            {eyebrow}
+          </span>
+        </div>
+        <h1
+          className="text-[32px] text-[var(--text-primary)] leading-none"
+          style={{ fontFamily: "'Playfair Display', serif", fontWeight: 600, letterSpacing: "-0.01em" }}
+        >
+          {title}
+        </h1>
+        {caption && <p className="mt-2 text-[13px] text-[var(--text-muted)]">{caption}</p>}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  );
+}
+
+export function PrimaryButton({ onClick, children }: { onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white text-sm font-medium transition-all hover:brightness-110"
+      style={{
+        backgroundColor: "var(--terracotta)",
+        boxShadow: "0 6px 18px rgba(199,91,57,0.28)",
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+      {children}
+    </button>
+  );
+}
+
+export function StatusChip({
+  enabled,
+  onClick,
+}: {
+  enabled: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors"
+      style={
+        enabled
+          ? { backgroundColor: "rgba(45,106,79,0.1)", color: "var(--jade)" }
+          : { backgroundColor: "rgba(138,132,148,0.12)", color: "var(--text-muted)" }
+      }
+    >
+      <span
+        className="inline-block w-1.5 h-1.5 rounded-full"
+        style={{
+          backgroundColor: enabled ? "var(--jade)" : "var(--text-muted)",
+          boxShadow: enabled ? "0 0 6px rgba(45,106,79,0.5)" : "none",
+        }}
+      />
+      {enabled ? "启用" : "禁用"}
+    </button>
+  );
+}
+
+export function ActionButton({
+  title,
+  onClick,
+  variant = "default",
+  children,
+}: {
+  title: string;
+  onClick: () => void;
+  variant?: "default" | "danger";
+  children: ReactNode;
+}) {
+  const danger = variant === "danger";
+  return (
+    <button
+      title={title}
+      onClick={onClick}
+      className={`w-8 h-8 flex items-center justify-center rounded-full transition-all ${
+        danger
+          ? "text-[var(--text-muted)] hover:bg-[rgba(199,91,57,0.1)] hover:text-[var(--terracotta)]"
+          : "text-[var(--text-muted)] hover:bg-[rgba(212,165,116,0.12)] hover:text-[var(--text-primary)]"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function EmptyState({ message, action }: { message: string; action?: ReactNode }) {
+  return (
+    <div className="py-16 flex flex-col items-center gap-4 text-center">
+      <div className="relative">
+        <span className="absolute inset-0 rounded-full border border-dashed border-[var(--gold)]/30 animate-[rotate-slow_30s_linear_infinite]" />
+        <div className="w-16 h-16 rounded-full flex items-center justify-center bg-[var(--bg-paper)]">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="1.6">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v4M12 16h.01" />
+          </svg>
+        </div>
+      </div>
+      <p className="text-sm text-[var(--text-muted)]">{message}</p>
+      {action}
+    </div>
+  );
+}
+
+export function LoadingBlock() {
+  return (
+    <div className="py-20 flex justify-center">
+      <div className="w-8 h-8 border-2 border-[var(--gold)] border-t-transparent rounded-full animate-spin" />
+    </div>
+  );
+}
+
+/* ————— Row-action icons ————— */
+export const IconEdit = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+);
+export const IconCopy = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+  </svg>
+);
+export const IconQR = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="3" y="3" width="7" height="7" />
+    <rect x="14" y="3" width="7" height="7" />
+    <rect x="3" y="14" width="7" height="7" />
+    <path d="M14 14h3v3h-3zM17 17h4M17 21h4M21 14v3" />
+  </svg>
+);
+export const IconDelete = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6M10 11v6M14 11v6" />
+  </svg>
+);