feat: 完善导出设置与打印预览
This commit is contained in:
SkyJourney
@@ -1,15 +1,16 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const EXPORT_CONFIG_VERSION = 1;
|
||||
export const EXPORT_CONFIG_VERSION = 2;
|
||||
export const CSS_PIXELS_PER_INCH = 96;
|
||||
export const PDF_POINTS_PER_INCH = 72;
|
||||
export const MILLIMETERS_PER_INCH = 25.4;
|
||||
|
||||
export const supportedPaperFormats = [
|
||||
"A3",
|
||||
"A4",
|
||||
"A5",
|
||||
"Letter",
|
||||
"Legal",
|
||||
"Tabloid",
|
||||
"Custom"
|
||||
"Legal"
|
||||
] as const;
|
||||
|
||||
export const paperFormatLabels: Record<
|
||||
@@ -19,16 +20,52 @@ export const paperFormatLabels: Record<
|
||||
A3: "A3",
|
||||
A4: "A4",
|
||||
A5: "A5",
|
||||
Letter: "Letter",
|
||||
Legal: "Legal",
|
||||
Tabloid: "Tabloid",
|
||||
Custom: "自定义"
|
||||
Letter: "US-Letter",
|
||||
Legal: "US-Legal"
|
||||
};
|
||||
|
||||
export const paperDimensionsMm: Record<
|
||||
(typeof supportedPaperFormats)[number],
|
||||
{ width: number; height: number }
|
||||
> = {
|
||||
A3: { width: 297, height: 420 },
|
||||
A4: { width: 210, height: 297 },
|
||||
A5: { width: 148, height: 210 },
|
||||
Letter: { width: 216, height: 279 },
|
||||
Legal: { width: 216, height: 356 }
|
||||
};
|
||||
|
||||
const lengthSchema = z
|
||||
.string()
|
||||
.regex(/^\d+(?:\.\d+)?(?:mm|cm|in)$/, "长度必须包含 mm、cm 或 in 单位");
|
||||
|
||||
export function lengthToMillimeters(value: string) {
|
||||
const number = Number.parseFloat(value);
|
||||
if (value.endsWith("cm")) {
|
||||
return number * 10;
|
||||
}
|
||||
if (value.endsWith("in")) {
|
||||
return number * MILLIMETERS_PER_INCH;
|
||||
}
|
||||
return number;
|
||||
}
|
||||
|
||||
export function millimetersToCssPixels(value: number) {
|
||||
return (value * CSS_PIXELS_PER_INCH) / MILLIMETERS_PER_INCH;
|
||||
}
|
||||
|
||||
export function cssPixelsToMillimeters(value: number) {
|
||||
return (value * MILLIMETERS_PER_INCH) / CSS_PIXELS_PER_INCH;
|
||||
}
|
||||
|
||||
export function cssPixelsToPdfPoints(value: number) {
|
||||
return (value * PDF_POINTS_PER_INCH) / CSS_PIXELS_PER_INCH;
|
||||
}
|
||||
|
||||
export function millimetersToPdfPoints(value: number) {
|
||||
return (value * PDF_POINTS_PER_INCH) / MILLIMETERS_PER_INCH;
|
||||
}
|
||||
|
||||
const marginSchema = z.object({
|
||||
top: lengthSchema,
|
||||
right: lengthSchema,
|
||||
@@ -36,40 +73,22 @@ const marginSchema = z.object({
|
||||
left: lengthSchema
|
||||
});
|
||||
|
||||
const headerFooterSlotSchema = z.object({
|
||||
const headerSlotSchema = z.object({
|
||||
enabled: z.boolean(),
|
||||
content: z.string().max(500)
|
||||
});
|
||||
|
||||
const headerFooterSchema = z.object({
|
||||
const headerSchema = z.object({
|
||||
enabled: z.boolean(),
|
||||
height: lengthSchema,
|
||||
showDivider: z.boolean(),
|
||||
fontSize: lengthSchema,
|
||||
color: z.string(),
|
||||
left: headerFooterSlotSchema,
|
||||
center: headerFooterSlotSchema,
|
||||
right: headerFooterSlotSchema
|
||||
left: headerSlotSchema,
|
||||
center: headerSlotSchema,
|
||||
right: headerSlotSchema
|
||||
});
|
||||
|
||||
const paperSchema = z
|
||||
.object({
|
||||
format: z.enum(supportedPaperFormats),
|
||||
orientation: z.enum(["portrait", "landscape"]),
|
||||
width: lengthSchema.optional(),
|
||||
height: lengthSchema.optional(),
|
||||
margins: marginSchema
|
||||
})
|
||||
.superRefine((paper, context) => {
|
||||
if (paper.format === "Custom" && (!paper.width || !paper.height)) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
message: "自定义纸张必须同时指定宽度和高度",
|
||||
path: ["width"]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export const pageNumberFormatSchema = z.enum([
|
||||
"page",
|
||||
"page-total",
|
||||
@@ -78,21 +97,63 @@ export const pageNumberFormatSchema = z.enum([
|
||||
"custom"
|
||||
]);
|
||||
|
||||
const footerSchema = z.object({
|
||||
enabled: z.boolean(),
|
||||
height: lengthSchema,
|
||||
showDivider: z.boolean(),
|
||||
fontSize: lengthSchema,
|
||||
color: z.string(),
|
||||
alignment: z.enum(["left", "center", "right"]),
|
||||
format: pageNumberFormatSchema,
|
||||
template: z.string().max(500).optional(),
|
||||
startFrom: z.number().int().positive()
|
||||
});
|
||||
|
||||
const paperSchema = z
|
||||
.object({
|
||||
format: z.enum(supportedPaperFormats),
|
||||
orientation: z.enum(["portrait", "landscape"]),
|
||||
margins: marginSchema
|
||||
})
|
||||
.superRefine((paper, context) => {
|
||||
const sourceDimensions = paperDimensionsMm[paper.format];
|
||||
const dimensions =
|
||||
paper.orientation === "portrait"
|
||||
? sourceDimensions
|
||||
: {
|
||||
width: sourceDimensions.height,
|
||||
height: sourceDimensions.width
|
||||
};
|
||||
const horizontalMargins =
|
||||
lengthToMillimeters(paper.margins.left) +
|
||||
lengthToMillimeters(paper.margins.right);
|
||||
const verticalMargins =
|
||||
lengthToMillimeters(paper.margins.top) +
|
||||
lengthToMillimeters(paper.margins.bottom);
|
||||
|
||||
if (horizontalMargins >= dimensions.width) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
message: "左右页边距之和必须小于纸张宽度",
|
||||
path: ["margins", "right"]
|
||||
});
|
||||
}
|
||||
if (verticalMargins >= dimensions.height) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
message: "上下页边距之和必须小于纸张高度",
|
||||
path: ["margins", "bottom"]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export const exportConfigSchema = z.object({
|
||||
version: z.literal(EXPORT_CONFIG_VERSION),
|
||||
name: z.string().min(1).max(100),
|
||||
themeId: z.string().min(1),
|
||||
paper: paperSchema,
|
||||
header: headerFooterSchema,
|
||||
footer: headerFooterSchema,
|
||||
pageNumber: z.object({
|
||||
enabled: z.boolean(),
|
||||
position: z.enum(["header", "footer"]),
|
||||
alignment: z.enum(["left", "center", "right"]),
|
||||
format: pageNumberFormatSchema,
|
||||
template: z.string().max(500).optional(),
|
||||
startFrom: z.number().int().positive()
|
||||
}),
|
||||
header: headerSchema,
|
||||
footer: footerSchema,
|
||||
metadata: z.object({
|
||||
title: z.string().max(300),
|
||||
author: z.string().max(300),
|
||||
@@ -109,25 +170,37 @@ export const exportConfigSchema = z.object({
|
||||
|
||||
export type ExportConfig = z.infer<typeof exportConfigSchema>;
|
||||
export type PaperFormat = ExportConfig["paper"]["format"];
|
||||
export type HeaderFooterConfig = ExportConfig["header"];
|
||||
export type PaperOrientation = ExportConfig["paper"]["orientation"];
|
||||
export type HeaderConfig = ExportConfig["header"];
|
||||
export type FooterConfig = ExportConfig["footer"];
|
||||
|
||||
const disabledSlot = {
|
||||
export function getPaperDimensionsMm(
|
||||
format: PaperFormat,
|
||||
orientation: PaperOrientation
|
||||
) {
|
||||
const dimensions = paperDimensionsMm[format];
|
||||
return orientation === "portrait"
|
||||
? dimensions
|
||||
: { width: dimensions.height, height: dimensions.width };
|
||||
}
|
||||
|
||||
const disabledHeaderSlot = {
|
||||
enabled: false,
|
||||
content: ""
|
||||
} as const;
|
||||
|
||||
export const defaultExportConfig: ExportConfig = {
|
||||
version: EXPORT_CONFIG_VERSION,
|
||||
name: "默认 A4 技术文档",
|
||||
themeId: "typora-like",
|
||||
name: "默认 A4 文档",
|
||||
themeId: "typora-github",
|
||||
paper: {
|
||||
format: "A4",
|
||||
orientation: "portrait",
|
||||
margins: {
|
||||
top: "20mm",
|
||||
right: "18mm",
|
||||
bottom: "20mm",
|
||||
left: "18mm"
|
||||
top: "16mm",
|
||||
right: "16mm",
|
||||
bottom: "16mm",
|
||||
left: "16mm"
|
||||
}
|
||||
},
|
||||
header: {
|
||||
@@ -136,9 +209,9 @@ export const defaultExportConfig: ExportConfig = {
|
||||
showDivider: false,
|
||||
fontSize: "3mm",
|
||||
color: "#6b7280",
|
||||
left: disabledSlot,
|
||||
center: disabledSlot,
|
||||
right: disabledSlot
|
||||
left: disabledHeaderSlot,
|
||||
center: disabledHeaderSlot,
|
||||
right: disabledHeaderSlot
|
||||
},
|
||||
footer: {
|
||||
enabled: true,
|
||||
@@ -146,16 +219,6 @@ export const defaultExportConfig: ExportConfig = {
|
||||
showDivider: false,
|
||||
fontSize: "3mm",
|
||||
color: "#6b7280",
|
||||
left: disabledSlot,
|
||||
center: {
|
||||
enabled: true,
|
||||
content: "${page} / ${pages}"
|
||||
},
|
||||
right: disabledSlot
|
||||
},
|
||||
pageNumber: {
|
||||
enabled: true,
|
||||
position: "footer",
|
||||
alignment: "center",
|
||||
format: "page-total",
|
||||
startFrom: 1
|
||||
|
||||
Reference in New Issue
Block a user