@akairos/typeset-studio 0.2.5 → 0.2.7

package/src/core/engine.ts

@@ -4,6 +4,7 @@ import { paginateBlocks } from "./obstacle-flow";
 import { computeBlockStyles } from "./typography";
 import { resolveImagePlacement } from "./image-layout";
 import { validateTemplateAssets } from "./template";
+import { validateCanvasStyle } from "./canvas-style";
 import {
   FlowBlock,
   FlowImage,
@@ -86,6 +87,7 @@ export function runTypeset(params: {
     throw new RangeError("Invalid page constraints: maxPages must be 0 or at least minPages");
   }
   validateTemplateAssets(images);
+  validateCanvasStyle(config.canvasStyle);
   if (images.some((image) => !image.repeatEveryPage && image.pageIndex != null && (!Number.isInteger(image.pageIndex) || image.pageIndex < 1 || image.pageIndex > 50))) {
     throw new RangeError("Image pageIndex must be an integer between 1 and 50");
   }

package/src/core/geometry.ts

@@ -1,13 +1,14 @@
 import { AspectRatioType, CanvasSpec } from "./types";
 
 export const CANVAS_SPECS: Record<AspectRatioType, CanvasSpec> = {
+  // 保留旧标识兼容已保存模板；画布包含左侧大图与右侧方形小图。
   "wechat-cover-2.35": {
     id: "wechat-cover-2.35",
     name: "微信文章封面",
-    ratio: 2.35,
-    width: 2350,
+    ratio: 3.35,
+    width: 3350,
     height: 1000,
-    description: "微信公众号官方推荐大图封面 (2.35:1)，适合主标题视觉张力、副标题与装饰图层",
+    description: "微信文章封面原图 (3.35:1)：左侧 2.35:1 大图，右侧 1:1 小图",
     defaultSafeArea: { top: 120, right: 140, bottom: 120, left: 140 },
   },
   "longform-3-4": {

package/src/core/types.ts

@@ -152,6 +152,34 @@ export interface TypesetChromeConfig {
 
 export type TemplateSlot = "article_cover" | "newspic_cover" | "newspic_content";
 
+export type CanvasFill = { type: "solid"; color: string } |
+  { type: "linear"; angle: number; stops: Array<{ color: string; offset: number }> } |
+  { type: "radial"; position: { x: number; y: number }; stops: Array<{ color: string; offset: number }> };
+
+export interface CanvasPattern {
+  pattern: "none" | "lines" | "grid" | "dots" | "rings" | "burst" | "diagonal" | "waves" | "checker" | "grain";
+  color: string;
+  opacity: number;
+  size: number;
+}
+
+export interface CanvasBorder {
+  style: "none" | "solid" | "dashed" | "double" | "corners" | "gradient";
+  color: string;
+  endColor: string;
+  width: number;
+  inset: number;
+  radius: number;
+  opacity: number;
+}
+
+// 背景装饰独立于文字主题，封面和正文模板共用。
+export interface CanvasStyle {
+  fill?: CanvasFill;
+  pattern?: CanvasPattern;
+  border?: CanvasBorder;
+}
+
 export interface TypesetConfig {
   id?: string;
   name: string;
@@ -168,6 +196,7 @@ export interface TypesetConfig {
   chrome?: TypesetChromeConfig;
   images?: FlowImage[];
   coverTheme?: PipelineCoverTheme;
+  canvasStyle?: CanvasStyle;
 }
 
 export interface TypesetResult {
@@ -198,9 +227,7 @@ export interface PipelineCoverTheme {
   typography: { title: CoverFont; subtitle: CoverFont; footer: CoverFont };
   colors: { text: string; accent: string; muted: string };
   background: {
-    fill: { type: "solid"; color: string } |
-      { type: "linear"; angle: number; stops: Array<{ color: string; offset: number }> } |
-      { type: "radial"; position: { x: number; y: number }; stops: Array<{ color: string; offset: number }> };
+    fill: CanvasFill;
     image: CoverImage | null;
     overlay: { color: string; opacity: number } | null;
   };

package/src/index.ts

@@ -33,6 +33,10 @@ export type {
   AlgorithmParams,
   AspectRatioType,
   CanvasSpec,
+  CanvasStyle,
+  CanvasFill,
+  CanvasPattern,
+  CanvasBorder,
   ContentBlockKind,
   CoverFont,
   CoverImage,

package/src/server/index.ts

@@ -17,7 +17,7 @@ app.get("/api/health", (c) => {
   return c.json({
     status: "ok",
     name: "Typeset Studio Server",
-    version: "0.2.5",
+    version: "0.2.7",
     time: new Date().toISOString(),
   });
 });

package/src/server/routes/slots.test.ts

@@ -37,6 +37,8 @@ describe("Template Slots & Fallback Compatibility", () => {
     expect(data.ok).toBe(true);
     expect(data.slot).toBe("article_cover");
     expect(data.result.canvasSpec.id).toBe("wechat-cover-2.35");
+    expect(data.result.canvasSpec.width).toBe(3350);
+    expect(data.result.canvasSpec.height).toBe(1000);
   });
 
   it("renders wechat-newspic content route by auto-resolving newspic_content slot", async () => {
@@ -183,3 +185,25 @@ describe("Fixed asset rendering API", () => {
     }
   });
 });
+
+it("adds Canvas presets once, preserves edits and renders saved colors through the template API", async () => {
+  const { CANVAS_PRESETS } = await import("../../core/canvas-presets");
+  const list = await (await app.request("/api/templates", { headers: authHeaders })).json();
+  for (const preset of CANVAS_PRESETS) expect(list.templates.some((template: { id: string }) => template.id === preset.id)).toBe(true);
+  const preset = CANVAS_PRESETS[0];
+  try {
+    const custom = { ...preset, canvasStyle: { ...preset.canvasStyle, fill: { type: "solid", color: "#123456" } } };
+    expect((await app.request("/api/templates", { method: "POST", headers: authHeaders, body: JSON.stringify(custom) })).status).toBe(200);
+    const loaded = await (await app.request(`/api/templates/${preset.id}`, { headers: authHeaders })).json();
+    expect(loaded.template.canvasStyle.fill.color).toBe("#123456");
+    const rendered = await (await app.request("/api/render", { method: "POST", headers: authHeaders, body: JSON.stringify({ template: preset.id, markdown: "# 自定义背景", preserveTemplateStyle: true, config: { canvasStyle: { fill: { type: "solid", color: "#ffffff" } } } }) })).json();
+    expect(rendered.result.config.canvasStyle.fill.color).toBe("#123456");
+    const invalid = await app.request("/api/templates", { method: "POST", headers: authHeaders, body: JSON.stringify({ ...custom, canvasStyle: { pattern: { pattern: "grid", color: "#123456", opacity: 1, size: 0 } } }) });
+    expect(invalid.status).toBe(400);
+    await app.request(`/api/templates/${preset.id}`, { method: "DELETE", headers: authHeaders });
+    const again = await (await app.request("/api/templates", { headers: authHeaders })).json();
+    expect(again.templates.some((template: { id: string }) => template.id === preset.id)).toBe(false);
+  } finally {
+    await app.request("/api/templates", { method: "POST", headers: authHeaders, body: JSON.stringify(preset) });
+  }
+});

package/src/server/routes/templates.ts

@@ -5,6 +5,8 @@ import { getDefaultConfig } from "../../core/engine";
 import { TemplateSlot, TypesetConfig } from "../../core/types";
 import { resolveDataDir } from "../../core/data-dir";
 import { validateTemplateAssets } from "../../core/template";
+import { validateCanvasStyle } from "../../core/canvas-style";
+import { CANVAS_PRESETS } from "../../core/canvas-presets";
 
 export { resolveDataDir } from "../../core/data-dir";
 
@@ -23,13 +25,24 @@ function ensureTemplatesDir(): void {
     seedDefaultTemplates();
     try { writeFileSync(seedMarker, "1"); } catch { /* 只读安装目录保留读取能力。 */ }
   }
+  // 新预设仅补充一次，不覆盖已编辑模板，也不重新生成用户删除的预设。
+  const canvasMarker = join(TEMPLATES_DIR, ".canvas-presets-v1");
+  if (!existsSync(canvasMarker)) {
+    try {
+      for (const preset of CANVAS_PRESETS) {
+        const path = join(TEMPLATES_DIR, `${preset.id}.json`);
+        if (!existsSync(path)) writeFileSync(path, JSON.stringify(preset, null, 2), "utf-8");
+      }
+      writeFileSync(canvasMarker, "1");
+    } catch { /* 只读安装目录继续使用现有模板。 */ }
+  }
 }
 
 export const BUILTIN_PRESETS: TypesetConfig[] = [
     {
       ...getDefaultConfig("wechat-cover-2.35"),
       id: "tpl_wechat_cover_minimal",
-      name: "微信纯净大图封面 (2.35:1)",
+      name: "微信纯净大图封面 (3.35:1)",
       slot: "article_cover",
       algorithm: {
         ...getDefaultConfig("wechat-cover-2.35").algorithm,
@@ -84,7 +97,7 @@ export const BUILTIN_PRESETS: TypesetConfig[] = [
     {
       ...getDefaultConfig("wechat-cover-2.35"),
       id: "tpl_wechat_cover_editorial",
-      name: "微信杂志标封面 (2.35:1)",
+      name: "微信杂志标封面 (3.35:1)",
       slot: "article_cover",
       algorithm: {
         ...getDefaultConfig("wechat-cover-2.35").algorithm,
@@ -334,6 +347,7 @@ export const BUILTIN_PRESETS: TypesetConfig[] = [
         showFillRatio: false,
       },
     },
+    ...CANVAS_PRESETS,
   ];
 
 function seedDefaultTemplates(): void {
@@ -611,6 +625,7 @@ templatesRouter.post("/", async (c) => {
 
   try {
     validateTemplateAssets(body.images);
+    validateCanvasStyle(body.canvasStyle);
   } catch (error) {
     return c.json({ ok: false, error: error instanceof Error ? error.message : "无效的模板素材" }, 400);
   }

package/src/web/App.tsx

@@ -4,7 +4,8 @@ import { CanvasViewport } from "./components/CanvasViewport";
 import { EditorSidebar } from "./components/EditorSidebar";
 import { Header } from "./components/Header";
 import { ParamsInspector } from "./components/ParamsInspector";
-import { TemplateModal } from "./components/TemplateModal";
+import { TemplateDrawer } from "./components/TemplateDrawer";
+import { SaveTemplateModal } from "./components/SaveTemplateModal";
 import { useAuth } from "./hooks/useAuth";
 import { useTypeset } from "./hooks/useTypeset";
 
@@ -57,7 +58,9 @@ export const App: React.FC = () => {
   const [viewMode, setViewMode] = useState<"grid" | "stack">("grid");
   const [zoom, setZoom] = useState<number>(0.45);
   const [isAutoFit, setIsAutoFit] = useState<boolean>(true);
-  const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
+  const [isTemplateDrawerOpen, setIsTemplateDrawerOpen] = useState(false);
+  const [isSaveTemplateOpen, setIsSaveTemplateOpen] = useState(false);
+  const [templateRefreshKey, setTemplateRefreshKey] = useState(0);
   const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
   const [isExporting, setIsExporting] = useState(false);
   const viewportRef = useRef<HTMLDivElement>(null);
@@ -251,7 +254,10 @@ export const App: React.FC = () => {
         onZoomChange={handleZoomChange}
         onAutoFit={handleAutoFit}
         isAutoFit={isAutoFit}
-        onOpenTemplates={() => setIsTemplateModalOpen(true)}
+        onOpenTemplates={() => setIsTemplateDrawerOpen((open) => !open)}
+        isTemplateDrawerOpen={isTemplateDrawerOpen}
+        templateName={config.name}
+        onSaveTemplate={() => setIsSaveTemplateOpen(true)}
         onOpenAuth={() => setIsAuthModalOpen(true)}
         onExport={handleExport}
         isExporting={isExporting}
@@ -300,6 +306,10 @@ export const App: React.FC = () => {
           config={config}
           onUpdateAlgorithm={updateAlgorithm}
           onUpdateTheme={updateTheme}
+          onUpdateCanvasStyle={(canvasStyle) => setConfig((prev) => ({
+            ...prev, canvasStyle,
+            theme: { ...prev.theme, bgColor: canvasStyle.fill?.type === "solid" ? canvasStyle.fill.color : canvasStyle.fill?.stops[0].color || prev.theme.bgColor },
+          }))}
           onUpdateTypography={updateTypography}
           onUpdateSafeArea={updateSafeArea}
           onUpdateBranding={(footer, watermark) => {
@@ -319,17 +329,27 @@ export const App: React.FC = () => {
             }));
           }}
         />
+        <TemplateDrawer
+          isOpen={isTemplateDrawerOpen}
+          onClose={() => setIsTemplateDrawerOpen(false)}
+          refreshKey={templateRefreshKey}
+          onApplyTemplate={loadTemplate}
+          adminKey={adminKey}
+        />
       </div>
 
       {/* Modals */}
-      <TemplateModal
-        isOpen={isTemplateModalOpen}
-        onClose={() => setIsTemplateModalOpen(false)}
+      <SaveTemplateModal
+        isOpen={isSaveTemplateOpen}
+        onClose={() => setIsSaveTemplateOpen(false)}
         currentConfig={{
           ...config,
           images,
         }}
-        onApplyTemplate={loadTemplate}
+        onSaved={(template) => {
+          setConfig((prev) => ({ ...prev, id: template.id, name: template.name, slot: template.slot }));
+          setTemplateRefreshKey((key) => key + 1);
+        }}
         adminKey={adminKey}
       />
 

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;
@@ -20,7 +23,7 @@ interface HeaderProps {
 }
 
 const RATIO_ITEMS: Array<{ id: AspectRatioType; label: string; ratioTag: string }> = [
-  { id: "wechat-cover-2.35", label: "微信封面", ratioTag: "2.35:1" },
+  { id: "wechat-cover-2.35", label: "微信封面", ratioTag: "3.35:1" },
   { id: "longform-3-4", label: "通用长图文", ratioTag: "3:4" },
   { id: "wide-16-9", label: "通用宽屏", ratioTag: "16:9" },
   { id: "square-1-1", label: "通用正方形", ratioTag: "1:1" },
@@ -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.5</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.7</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">文章封面 (3.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>
+  );
+};