@akairos/typeset-studio 0.2.4 → 0.2.6

package/src/web/components/CanvasStyleInspector.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { BORDER_LABELS, DEFAULT_BORDER, DEFAULT_PATTERN, PATTERN_LABELS } from "../../core/canvas-style";
+import type { CanvasFill, CanvasStyle, TypesetConfig } from "../../core/types";
+
+interface Props {
+  config: TypesetConfig;
+  onChange: (style: CanvasStyle) => void;
+}
+
+const control = "w-full rounded border border-[#dfdfdf] dark:border-[#333333] bg-white dark:bg-[#141414] px-2 py-1 text-[11px]";
+
+// 装饰配置独立保存，切换背景不会改变字体和正文排版。
+export function CanvasStyleInspector({ config, onChange }: Props) {
+  const style = config.canvasStyle || {};
+  const fill = style.fill || config.coverTheme?.background.fill || { type: "solid", color: config.theme.bgColor };
+  const pattern = style.pattern || config.coverTheme?.decoration || DEFAULT_PATTERN;
+  const border = style.border || DEFAULT_BORDER;
+  const updateFill = (next: CanvasFill) => onChange({ ...style, fill: next });
+  const updatePattern = (partial: Partial<typeof pattern>) => onChange({ ...style, pattern: { ...pattern, ...partial } });
+  const updateBorder = (partial: Partial<typeof border>) => onChange({ ...style, border: { ...border, ...partial } });
+  const colorInput = (label: string, value: string, update: (value: string) => void) => (
+    <label className="flex items-center justify-between gap-2">
+      <span>{label}</span><span className="flex items-center gap-1.5 font-mono">
+        <span>{value}</span><input aria-label={label} type="color" value={value} onChange={(event) => update(event.target.value)} className="h-6 w-7 cursor-pointer bg-transparent" />
+      </span>
+    </label>
+  );
+  const slider = (label: string, value: number, min: number, max: number, update: (value: number) => void, step = 1) => (
+    <label className="flex flex-col gap-1">
+      <span className="flex justify-between"><span>{label}</span><span className="font-mono">{step < 1 ? `${Math.round(value * 100)}%` : value}</span></span>
+      <input aria-label={label} type="range" min={min} max={max} step={step} value={value} onChange={(event) => update(Number(event.target.value))} className="w-full accent-emerald-600" />
+    </label>
+  );
+  const switchFill = (type: CanvasFill["type"]) => {
+    const color = fill.type === "solid" ? fill.color : fill.stops[0].color;
+    const stops = fill.type === "solid" ? [{ color, offset: 0 }, { color: config.theme.accentColor, offset: 100 }] : fill.stops;
+    updateFill(type === "solid" ? { type, color } : type === "linear" ? { type, angle: 90, stops } : { type, position: { x: 50, y: 30 }, stops });
+  };
+
+  return (
+    <section className="border-b border-[#f0f0f0] dark:border-[#1c1c1c] p-3.5 text-xs">
+      <div className="mb-3 font-semibold text-[#171717] dark:text-white">背景、花纹与边框</div>
+      <div className="flex flex-col gap-3 text-[11px] text-[#666666] dark:text-[#aaaaaa]">
+        <label className="flex flex-col gap-1">背景类型
+          <select className={control} value={fill.type} onChange={(event) => switchFill(event.target.value as CanvasFill["type"])}>
+            <option value="solid">纯色</option><option value="linear">线性渐变</option><option value="radial">径向渐变</option>
+          </select>
+        </label>
+        {fill.type === "solid" ? colorInput("背景颜色", fill.color, (color) => updateFill({ type: "solid", color })) : <>
+          <div className="flex flex-col gap-2 rounded border border-[#eaeaea] dark:border-[#333333] p-2">
+            {fill.stops.map((stop, index) => <div key={index} className="flex flex-col gap-1.5">
+              <div className="flex items-center gap-2">
+                <label className="flex flex-1 items-center gap-1.5">
+                  <input aria-label={`渐变颜色 ${index + 1}`} type="color" value={stop.color} onChange={(event) => updateFill({ ...fill, stops: fill.stops.map((item, i) => i === index ? { ...item, color: event.target.value } : item) })} className="h-6 w-7 bg-transparent" />
+                  <span className="font-mono">{stop.color}</span>
+                </label>
+                <button type="button" disabled={fill.stops.length <= 2} onClick={() => updateFill({ ...fill, stops: fill.stops.filter((_, i) => i !== index) })} className="disabled:opacity-30" aria-label={`删除渐变颜色 ${index + 1}`}>移除</button>
+              </div>
+              {slider(`节点 ${index + 1} 位置`, stop.offset, 0, 100, (offset) => updateFill({ ...fill, stops: fill.stops.map((item, i) => i === index ? { ...item, offset } : item) }))}
+            </div>)}
+            <button type="button" disabled={fill.stops.length >= 8} onClick={() => updateFill({ ...fill, stops: [...fill.stops, { color: config.theme.accentColor, offset: 50 }] })} className="rounded border border-[#dfdfdf] dark:border-[#333333] py-1 disabled:opacity-30">添加颜色节点</button>
+          </div>
+          {fill.type === "linear" ? slider("渐变角度", fill.angle, 0, 360, (angle) => updateFill({ ...fill, angle })) : <>
+            {slider("渐变中心 X", fill.position.x, 0, 100, (x) => updateFill({ ...fill, position: { ...fill.position, x } }))}
+            {slider("渐变中心 Y", fill.position.y, 0, 100, (y) => updateFill({ ...fill, position: { ...fill.position, y } }))}
+          </>}
+        </>}
+        <label className="flex flex-col gap-1">几何花纹
+          <select className={control} value={pattern.pattern} onChange={(event) => updatePattern({ pattern: event.target.value as typeof pattern.pattern })}>
+            {Object.entries(PATTERN_LABELS).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+          </select>
+        </label>
+        {pattern.pattern !== "none" && <>
+          {colorInput("花纹颜色", pattern.color, (color) => updatePattern({ color }))}
+          {slider("花纹透明度", pattern.opacity, 0, 1, (opacity) => updatePattern({ opacity }), 0.01)}
+          {slider("花纹间距", pattern.size, 16, 240, (size) => updatePattern({ size }))}
+        </>}
+        <label className="flex flex-col gap-1">边框样式
+          <select className={control} value={border.style} onChange={(event) => updateBorder({ style: event.target.value as typeof border.style })}>
+            {Object.entries(BORDER_LABELS).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+          </select>
+        </label>
+        {border.style !== "none" && <>
+          {colorInput("边框颜色", border.color, (color) => updateBorder({ color }))}
+          {border.style === "gradient" && colorInput("边框渐变终色", border.endColor, (endColor) => updateBorder({ endColor }))}
+          {slider("边框粗细", border.width, 1, 24, (width) => updateBorder({ width }))}
+          {slider("边框内缩", border.inset, 0, 200, (inset) => updateBorder({ inset }))}
+          {border.style !== "corners" && slider("边框圆角", border.radius, 0, 200, (radius) => updateBorder({ radius }))}
+          {slider("边框透明度", border.opacity, 0, 1, (opacity) => updateBorder({ opacity }), 0.01)}
+        </>}
+        <p className="leading-relaxed text-[#888888]">配置随模板保存，作用于每页。背景图会覆盖底色与花纹；边框绘制在最上层。</p>
+      </div>
+    </section>
+  );
+}

package/src/web/components/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Download, FolderOpen, Key, Maximize2, Moon, RefreshCw, Sun, ZoomIn, ZoomOut } from "lucide-react";
+import { Download, FolderOpen, Key, Maximize2, Moon, RefreshCw, Save, Sun, ZoomIn, ZoomOut } from "lucide-react";
 import { AspectRatioType } from "../../core/types";
 
 interface HeaderProps {
@@ -10,6 +10,9 @@ interface HeaderProps {
   onAutoFit?: () => void;
   isAutoFit?: boolean;
   onOpenTemplates: () => void;
+  isTemplateDrawerOpen: boolean;
+  templateName?: string;
+  onSaveTemplate: () => void;
   onOpenAuth: () => void;
   onExport: () => void;
   isExporting: boolean;
@@ -34,6 +37,9 @@ export const Header: React.FC<HeaderProps> = ({
   onAutoFit,
   isAutoFit,
   onOpenTemplates,
+  isTemplateDrawerOpen,
+  templateName,
+  onSaveTemplate,
   onOpenAuth,
   onExport,
   isExporting,
@@ -45,17 +51,17 @@ export const Header: React.FC<HeaderProps> = ({
   return (
     <header className="h-14 border-b border-[#eaeaea] dark:border-[#222222] bg-white/80 dark:bg-[#000000]/80 backdrop-blur-md px-4 flex items-center justify-between select-none z-30 shrink-0 transition-colors">
       {/* Brand & Status */}
-      <div className="flex items-center gap-3">
+      <div className="flex min-w-0 items-center gap-3">
         <div className="flex items-center gap-2 font-semibold text-[#171717] dark:text-white tracking-tight text-sm">
           <span className="flex items-center justify-center w-6 h-6 rounded bg-black dark:bg-white text-white dark:text-black font-black text-xs shadow-sm">
             ▲
           </span>
-          <span>Typeset Studio</span>
+          <span className="hidden 2xl:inline">Typeset Studio</span>
         </div>
-        <span className="text-xs text-[#888888] dark:text-[#555555] font-mono hidden md:inline">v0.2.2</span>
-        <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-[#f5f5f5] dark:bg-[#111111] border border-[#e5e5e5] dark:border-[#222222] text-[11px] text-emerald-600 dark:text-[#00e676]">
-          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-[#00e676] animate-pulse" />
-          <span className="font-mono">Ready</span>
+        <span className="text-xs text-[#888888] dark:text-[#555555] font-mono hidden 2xl:inline">v0.2.6</span>
+        <div title={templateName || "未命名模板"} className="flex min-w-0 items-center gap-1.5 px-2 py-0.5 rounded-full bg-[#f5f5f5] dark:bg-[#111111] border border-[#e5e5e5] dark:border-[#222222] text-[11px] text-emerald-600 dark:text-[#00e676]">
+          <span className="w-1.5 h-1.5 shrink-0 rounded-full bg-emerald-500 dark:bg-[#00e676]" />
+          <span aria-live="polite" className="max-w-40 truncate">{templateName || "未命名模板"}</span>
         </div>
       </div>
 
@@ -73,7 +79,7 @@ export const Header: React.FC<HeaderProps> = ({
                   : "text-[#666666] dark:text-[#888888] hover:text-[#171717] dark:hover:text-[#cccccc] hover:bg-[#eaeaea] dark:hover:bg-[#141414]"
               }`}
             >
-              <span>{item.label}</span>
+              <span className="hidden xl:inline">{item.label}</span>
               <span
                 className={`text-[10px] font-mono px-1 py-0.2 rounded ${
                   isActive
@@ -146,15 +152,24 @@ export const Header: React.FC<HeaderProps> = ({
           )}
         </button>
 
-        {/* Templates Modal button */}
+        {/* 模板库开关 */}
         <button
           onClick={onOpenTemplates}
+          aria-expanded={isTemplateDrawerOpen}
           className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-[#eaeaea] dark:border-[#222222] bg-white dark:bg-[#0a0a0a] hover:bg-[#f5f5f5] dark:hover:bg-[#161616] text-xs text-[#333333] dark:text-[#cccccc] hover:text-black dark:hover:text-white transition-all btn-vercel"
         >
           <FolderOpen className="w-3.5 h-3.5 text-[#777777] dark:text-[#888888]" />
           <span>模板库</span>
         </button>
 
+        <button
+          onClick={onSaveTemplate}
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-[#eaeaea] dark:border-[#222222] bg-white dark:bg-[#0a0a0a] hover:bg-[#f5f5f5] dark:hover:bg-[#161616] text-xs text-[#333333] dark:text-[#cccccc] transition-all btn-vercel"
+        >
+          <Save className="w-3.5 h-3.5" />
+          <span>保存模板</span>
+        </button>
+
         {/* Export image button */}
         <button
           onClick={onExport}

package/src/web/components/ParamsInspector.tsx

@@ -18,6 +18,7 @@ import {
   TypesetConfig,
 } from "../../core/types";
 import { useLocalFonts } from "../hooks/useLocalFonts";
+import { CanvasStyleInspector } from "./CanvasStyleInspector";
 
 interface ParamsInspectorProps {
   config: TypesetConfig;
@@ -27,6 +28,7 @@ interface ParamsInspectorProps {
   onUpdateSafeArea: (partial: Partial<AlgorithmParams["safeArea"]>) => void;
   onUpdateBranding: (footer: string, watermark: string) => void;
   onUpdateChrome: (partial: Partial<TypesetChromeConfig>) => void;
+  onUpdateCanvasStyle: (style: NonNullable<TypesetConfig["canvasStyle"]>) => void;
 }
 
 const PRESET_FONT_OPTIONS = [
@@ -48,6 +50,7 @@ export const ParamsInspector: React.FC<ParamsInspectorProps> = ({
   onUpdateSafeArea,
   onUpdateBranding,
   onUpdateChrome,
+  onUpdateCanvasStyle,
 }) => {
   const { algorithm, theme, typography } = config;
   const { fonts: localFonts, loading: loadingFonts, refreshFonts } = useLocalFonts();
@@ -479,7 +482,7 @@ export const ParamsInspector: React.FC<ParamsInspectorProps> = ({
             <div className="flex items-center gap-1.5">
               <input
                 type="color"
-                value={theme.bgColor}
+                value={config.canvasStyle?.fill?.type === "solid" ? config.canvasStyle.fill.color : theme.bgColor}
                 onChange={(e) => onUpdateTheme({ bgColor: e.target.value })}
                 className="w-6 h-6 rounded cursor-pointer bg-transparent border-0"
               />
@@ -491,6 +494,8 @@ export const ParamsInspector: React.FC<ParamsInspectorProps> = ({
         </div>
       </div>
 
+      <CanvasStyleInspector config={config} onChange={onUpdateCanvasStyle} />
+
       {/* Section 6: Header, Footer & Chrome Decor */}
       <div className="p-3.5">
         <div className="flex items-center gap-2 text-xs font-semibold text-[#171717] dark:text-white mb-3">

package/src/web/components/SaveTemplateModal.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Save, X } from "lucide-react";
+import { validateTemplateAssets } from "../../core/template";
+import { TemplateSlot, TypesetConfig } from "../../core/types";
+
+interface SaveTemplateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentConfig: TypesetConfig;
+  onSaved: (template: TypesetConfig) => void;
+  adminKey: string;
+}
+
+export const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
+  isOpen, onClose, currentConfig, onSaved, adminKey,
+}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [templateName, setTemplateName] = useState("");
+  const [saveSlot, setSaveSlot] = useState<TemplateSlot | "none">("none");
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTemplateName(currentConfig.name || "我的自定义模板");
+      setSaveSlot(currentConfig.slot || (currentConfig.aspectRatio === "wechat-cover-2.35" ? "article_cover" : "newspic_content"));
+      setError(null);
+      dialogRef.current?.showModal();
+    } else {
+      dialogRef.current?.close();
+    }
+  }, [isOpen]);
+
+  // 始终另存为新模板，保留当前图片与排版，不覆盖来源模板。
+  const handleSave = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!templateName.trim() || isSaving) return;
+    setIsSaving(true);
+    setError(null);
+    try {
+      validateTemplateAssets(currentConfig.images);
+      const res = await fetch("/api/templates", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(adminKey ? { "x-admin-key": adminKey } : {}),
+        },
+        body: JSON.stringify({
+          ...currentConfig,
+          id: undefined,
+          name: templateName.trim(),
+          slot: saveSlot === "none" ? undefined : saveSlot,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.message || data.error || "保存模板失败");
+      onSaved(data.template);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "保存模板请求异常");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      aria-labelledby="save-template-title"
+      onCancel={(event) => {
+        event.preventDefault();
+        if (!isSaving) onClose();
+      }}
+      className="m-auto w-[calc(100%-2rem)] max-w-sm p-0 rounded-xl border border-[#eaeaea] dark:border-[#262626] bg-white dark:bg-[#0f0f0f] text-[#171717] dark:text-white shadow-2xl backdrop:bg-black/40"
+    >
+      <form onSubmit={handleSave}>
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-[#eaeaea] dark:border-[#222222]">
+          <h2 id="save-template-title" className="text-sm font-semibold">保存模板</h2>
+          <button type="button" onClick={onClose} disabled={isSaving} aria-label="关闭保存模板" className="p-1 rounded hover:bg-black/5 dark:hover:bg-white/10 disabled:opacity-50">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="p-5 flex flex-col gap-4">
+          <label className="flex flex-col gap-2 text-xs">
+            模板名称
+            <input autoFocus required value={templateName} onChange={(event) => setTemplateName(event.target.value)} placeholder="输入模板名称" className="bg-transparent border border-[#d4d4d4] dark:border-[#333333] rounded px-3 py-2 focus:outline-none focus:border-emerald-500" />
+          </label>
+          <label className="flex flex-col gap-2 text-xs">
+            保存到槽位
+            <select value={saveSlot} onChange={(event) => setSaveSlot(event.target.value as TemplateSlot | "none")} className="bg-white dark:bg-[#141414] border border-[#d4d4d4] dark:border-[#333333] rounded px-3 py-2">
+              <option value="article_cover">文章封面 (2.35:1)</option>
+              <option value="newspic_cover">贴图封面 (3:4)</option>
+              <option value="newspic_content">贴图内容 (3:4)</option>
+              <option value="none">通用模板</option>
+            </select>
+          </label>
+          {error && <p role="alert" className="text-xs text-red-500">{error}</p>}
+          <button type="submit" disabled={isSaving || !templateName.trim()} className="flex items-center justify-center gap-2 px-3 py-2 rounded bg-black text-white dark:bg-white dark:text-black text-xs font-semibold disabled:opacity-50">
+            <Save className="w-3.5 h-3.5" />
+            {isSaving ? "保存中..." : "保存模板"}
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+};

package/src/web/components/TemplateDrawer.tsx

@@ -0,0 +1,323 @@
+import React, { useEffect, useState } from "react";
+import { Check, Trash2, X, Sparkles, Star } from "lucide-react";
+import { TemplateSlot, TypesetConfig } from "../../core/types";
+
+interface TemplateDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  refreshKey: number;
+  onApplyTemplate: (tpl: TypesetConfig) => void;
+  adminKey: string;
+}
+
+interface SlotsResponse {
+  ok: boolean;
+  account: string;
+  message?: string;
+  error?: string;
+  slots: {
+    article_cover?: { id: string; template?: TypesetConfig };
+    newspic_cover?: { id: string; template?: TypesetConfig };
+    newspic_content?: { id: string; template?: TypesetConfig };
+  };
+}
+
+export const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
+  isOpen,
+  onClose,
+  refreshKey,
+  onApplyTemplate,
+  adminKey,
+}) => {
+  const [templates, setTemplates] = useState<TypesetConfig[]>([]);
+  const [slotsData, setSlotsData] = useState<SlotsResponse["slots"]>({});
+  const [account, setAccount] = useState<string>("default");
+  const [activeSlotFilter, setActiveSlotFilter] = useState<"all" | TemplateSlot>("all");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSlots = async (acc = account) => {
+    try {
+      const res = await fetch(`/api/templates/slots?account=${encodeURIComponent(acc)}`, { headers: { "x-admin-key": adminKey } });
+      const data: SlotsResponse = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.message || data.error || "获取槽位失败");
+      if (data.ok && data.slots) {
+        setSlotsData(data.slots);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "模板请求失败");
+    }
+  };
+
+  const handleSetSlotDefault = async (slot: TemplateSlot, templateId: string) => {
+    try {
+      const res = await fetch("/api/templates/slots", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(adminKey ? { "x-admin-key": adminKey } : {}),
+        },
+        body: JSON.stringify({ slot, templateId, account }),
+      });
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.message || data.error || "设置默认模板失败");
+      if (data.ok) {
+        await fetchSlots(account);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "模板请求失败");
+    }
+  };
+
+  const fetchTemplates = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/templates", {
+        headers: adminKey ? { "x-admin-key": adminKey } : {},
+      });
+      const data = await res.json();
+      if (res.ok && data.ok && Array.isArray(data.templates)) {
+        setTemplates(data.templates);
+      } else {
+        setError(data.message || "获取模板失败，请检查密钥");
+      }
+    } catch {
+      setError("连接后端服务失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchTemplates();
+      fetchSlots(account);
+    }
+  }, [isOpen, account, adminKey, refreshKey]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !document.querySelector("dialog[open]")) onClose();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  const handleDelete = async (id: string) => {
+    try {
+      const res = await fetch(`/api/templates/${encodeURIComponent(id)}`, {
+        method: "DELETE",
+        headers: adminKey ? { "x-admin-key": adminKey } : {},
+      });
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.message || data.error || "删除模板失败");
+      setTemplates((prev) => prev.filter((t) => t.id !== id));
+      await fetchSlots(account);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "模板请求失败");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const filteredTemplates = templates.filter((tpl) => {
+    if (activeSlotFilter === "all") return true;
+    return tpl.slot === activeSlotFilter;
+  });
+
+  return (
+    <aside aria-label="模板库" className="absolute inset-y-0 right-0 z-40 w-80 max-w-full bg-white dark:bg-[#0f0f0f] border-l border-[#eaeaea] dark:border-[#262626] flex flex-col shadow-xl overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-3.5 border-b border-[#eaeaea] dark:border-[#222222]">
+        <div className="flex items-center gap-2 font-semibold text-sm text-[#171717] dark:text-white">
+          <Sparkles className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />
+          <span>模板库</span>
+        </div>
+        <button
+          onClick={onClose}
+          aria-label="关闭模板库"
+          className="text-[#888888] hover:text-black dark:hover:text-white p-1 rounded-md hover:bg-[#f5f5f5] dark:hover:bg-[#1a1a1a]"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="p-3 flex-1 min-h-0 flex flex-col gap-4 overflow-y-auto">
+        {error && (
+          <div role="alert" className="text-xs text-red-500 bg-red-500/10 p-2 rounded border border-red-500/20">{error}</div>
+        )}
+
+        {/* Account and Slot Filters */}
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between text-xs">
+            <div className="flex items-center gap-1.5 font-medium text-[#666666] dark:text-[#888888]">
+              <span>槽位账号:</span>
+              <select
+                value={account}
+                onChange={(e) => setAccount(e.target.value)}
+                className="bg-white dark:bg-[#141414] border border-[#d4d4d4] dark:border-[#2a2a2a] rounded px-2 py-0.5 text-xs text-black dark:text-white focus:outline-none font-mono"
+              >
+                <option value="default">default (主账号)</option>
+                <option value="ancientone">ancientone</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Slot Category Tabs */}
+          <div className="flex flex-wrap items-center gap-1 text-xs">
+            <button
+              onClick={() => setActiveSlotFilter("all")}
+              className={`px-2.5 py-1 rounded text-xs transition-colors font-medium ${
+                activeSlotFilter === "all"
+                  ? "bg-black text-white dark:bg-white dark:text-black"
+                  : "text-[#666666] dark:text-[#888888] hover:bg-[#f5f5f5] dark:hover:bg-[#1c1c1c]"
+              }`}
+            >
+              全部
+            </button>
+            <button
+              onClick={() => setActiveSlotFilter("article_cover")}
+              className={`px-2.5 py-1 rounded text-xs transition-colors font-medium ${
+                activeSlotFilter === "article_cover"
+                  ? "bg-black text-white dark:bg-white dark:text-black"
+                  : "text-[#666666] dark:text-[#888888] hover:bg-[#f5f5f5] dark:hover:bg-[#1c1c1c]"
+              }`}
+            >
+              文章封面
+            </button>
+            <button
+              onClick={() => setActiveSlotFilter("newspic_cover")}
+              className={`px-2.5 py-1 rounded text-xs transition-colors font-medium ${
+                activeSlotFilter === "newspic_cover"
+                  ? "bg-black text-white dark:bg-white dark:text-black"
+                  : "text-[#666666] dark:text-[#888888] hover:bg-[#f5f5f5] dark:hover:bg-[#1c1c1c]"
+              }`}
+            >
+              贴图封面
+            </button>
+            <button
+              onClick={() => setActiveSlotFilter("newspic_content")}
+              className={`px-2.5 py-1 rounded text-xs transition-colors font-medium ${
+                activeSlotFilter === "newspic_content"
+                  ? "bg-black text-white dark:bg-white dark:text-black"
+                  : "text-[#666666] dark:text-[#888888] hover:bg-[#f5f5f5] dark:hover:bg-[#1c1c1c]"
+              }`}
+            >
+              贴图内容
+            </button>
+          </div>
+        </div>
+
+        {/* Template List */}
+        <div className="flex flex-col gap-2">
+          {isLoading ? (
+            <div className="text-center py-8 text-xs text-[#888888] dark:text-[#555555]">正在加载模板...</div>
+          ) : filteredTemplates.length === 0 ? (
+            <div className="text-center py-8 text-xs text-[#888888] dark:text-[#555555]">暂无匹配模板</div>
+          ) : (
+            filteredTemplates.map((tpl) => {
+              const isArticleCoverDefault = slotsData.article_cover?.id === tpl.id;
+              const isNewspicCoverDefault = slotsData.newspic_cover?.id === tpl.id;
+              const isNewspicContentDefault = slotsData.newspic_content?.id === tpl.id;
+
+              return (
+                <div
+                  key={tpl.id}
+                  className="flex flex-col justify-between p-3 rounded-lg bg-[#fafafa] dark:bg-[#141414] border border-[#eaeaea] dark:border-[#222222] hover:border-[#cccccc] dark:hover:border-[#333333] transition-all gap-2 group"
+                >
+                  <div className="flex items-center gap-3">
+                    <div
+                      className="w-5 h-5 rounded border border-[#d4d4d4] dark:border-[#333333] shrink-0"
+                      style={{ backgroundColor: tpl.theme.bgColor }}
+                    />
+                    <div>
+                      <div className="flex items-center gap-1.5 flex-wrap">
+                        <span className="text-xs font-semibold text-[#171717] dark:text-white">{tpl.name}</span>
+                        {tpl.slot && (
+                          <span className="text-[10px] px-1.5 py-0.2 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 font-medium">
+                            {tpl.slot === "article_cover"
+                              ? "文章封面"
+                              : tpl.slot === "newspic_cover"
+                              ? "贴图封面"
+                              : "贴图内容"}
+                          </span>
+                        )}
+                        {isArticleCoverDefault && (
+                          <span className="text-[10px] px-1.5 py-0.2 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 font-medium flex items-center gap-0.5">
+                            <Star className="w-2.5 h-2.5 fill-amber-500" /> 文章封面默认
+                          </span>
+                        )}
+                        {isNewspicCoverDefault && (
+                          <span className="text-[10px] px-1.5 py-0.2 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 font-medium flex items-center gap-0.5">
+                            <Star className="w-2.5 h-2.5 fill-amber-500" /> 贴图封面默认
+                          </span>
+                        )}
+                        {isNewspicContentDefault && (
+                          <span className="text-[10px] px-1.5 py-0.2 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 font-medium flex items-center gap-0.5">
+                            <Star className="w-2.5 h-2.5 fill-emerald-500" /> 贴图内容默认
+                          </span>
+                        )}
+                      </div>
+                      <div className="text-[10px] text-[#888888] dark:text-[#666666] font-mono mt-0.5">
+                        {tpl.aspectRatio} • 字号: {tpl.algorithm.baseFontSize}px
+                        {tpl.images && tpl.images.length > 0 && ` • 配图: ${tpl.images.length}个`}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-wrap items-center gap-2">
+                    {/* Set as slot default selector */}
+                    {tpl.id && (
+                      <select
+                        value=""
+                        onChange={(e) => {
+                          if (e.target.value) {
+                            handleSetSlotDefault(e.target.value as TemplateSlot, tpl.id!);
+                          }
+                        }}
+                        className="text-[11px] bg-white dark:bg-[#1a1a1a] border border-[#d4d4d4] dark:border-[#333333] text-[#666666] dark:text-[#aaaaaa] rounded px-2 py-1 focus:outline-none"
+                        title="为此账号设为某个槽位的默认模板"
+                      >
+                        <option value="">设为槽位默认...</option>
+                        <option value="article_cover">设为「文章封面默认」</option>
+                        <option value="newspic_cover">设为「贴图封面默认」</option>
+                        <option value="newspic_content">设为「贴图内容默认」</option>
+                      </select>
+                    )}
+
+                    <button
+                      onClick={() => {
+                        onApplyTemplate(tpl);
+                      }}
+                      className="flex items-center gap-1 px-2.5 py-1 bg-white dark:bg-[#1f1f1f] hover:bg-emerald-50 dark:hover:bg-emerald-500/20 text-[#333333] dark:text-[#cccccc] hover:text-emerald-700 dark:hover:text-emerald-400 border border-[#d4d4d4] dark:border-[#2a2a2a] hover:border-emerald-500/40 rounded text-xs transition-all font-medium"
+                    >
+                      <Check className="w-3 h-3" />
+                      <span>套用</span>
+                    </button>
+
+                    {tpl.id &&
+                      !tpl.id.startsWith("tpl_wechat_") &&
+                      !tpl.id.startsWith("tpl_longform_") &&
+                      !tpl.id.startsWith("tpl_square_") &&
+                      !tpl.id.startsWith("tpl_wide_") && (
+                        <button
+                          onClick={() => handleDelete(tpl.id!)}
+                          className="p-1 text-[#888888] dark:text-[#555555] hover:text-red-500 rounded hover:bg-[#f0f0f0] dark:hover:bg-[#1f1f1f]"
+                          title="删除自定义模板"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      )}
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+};