feat: implement second page header in export
- Add multi-section support when secondPageHeader is enabled - Each page gets its own header row when content spans multiple pages - Only applies when days exceed estimated page capacity
This commit is contained in:
+114
-58
@@ -226,8 +226,9 @@ export default function RecipeTranslationPage() {
|
|||||||
const exportConfig = configResult.success ? configResult.data?.export : {
|
const exportConfig = configResult.success ? configResult.data?.export : {
|
||||||
untranslatedColor: "CC0000",
|
untranslatedColor: "CC0000",
|
||||||
orientation: "landscape",
|
orientation: "landscape",
|
||||||
|
secondPageHeader: false,
|
||||||
};
|
};
|
||||||
const { untranslatedColor, orientation } = exportConfig;
|
const { untranslatedColor, orientation, secondPageHeader } = exportConfig;
|
||||||
|
|
||||||
// 2. 收集所有需要翻译的内容(星期、餐食类型、菜品)
|
// 2. 收集所有需要翻译的内容(星期、餐食类型、菜品)
|
||||||
const allNames: string[] = [];
|
const allNames: string[] = [];
|
||||||
@@ -273,43 +274,8 @@ export default function RecipeTranslationPage() {
|
|||||||
// 3. 构建翻译映射函数
|
// 3. 构建翻译映射函数
|
||||||
const t = (zh: string): string => translations[zh] || "";
|
const t = (zh: string): string => translations[zh] || "";
|
||||||
|
|
||||||
// 4. 构建表格数据
|
// 4. 构建表格数据 - 生成所有数据行
|
||||||
const tableRows: TableRow[] = [];
|
const dayRows: TableRow[] = [];
|
||||||
|
|
||||||
// 表头行 - 星期列头 + 餐食类型都要上中下英
|
|
||||||
const headerCells: TableCell[] = [];
|
|
||||||
headerCells.push(
|
|
||||||
new TableCell({
|
|
||||||
children: [
|
|
||||||
new Paragraph({children: [new TextRun({text: "星期 / Week", bold: true})]}),
|
|
||||||
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
|
||||||
width: {size: 12, type: WidthType.PERCENTAGE},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
for (const mealType of MEAL_TYPES) {
|
|
||||||
const zhText = mealType.label;
|
|
||||||
const enText = t(zhText);
|
|
||||||
headerCells.push(
|
|
||||||
new TableCell({
|
|
||||||
children: [
|
|
||||||
new Paragraph({children: [new TextRun({text: enText || zhText, bold: true})]}),
|
|
||||||
enText ? new Paragraph({
|
|
||||||
children: [new TextRun({
|
|
||||||
text: zhText,
|
|
||||||
color: "666666",
|
|
||||||
size: 18
|
|
||||||
})]
|
|
||||||
}) : null,
|
|
||||||
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
|
||||||
width: {size: 17.6, type: WidthType.PERCENTAGE},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
tableRows.push(new TableRow({children: headerCells, tableHeader: true}));
|
|
||||||
|
|
||||||
// 数据行(使用实际数据中的星期)- 上中下英
|
|
||||||
for (const day of data.days) {
|
for (const day of data.days) {
|
||||||
const dayZh = day.name.zh || "";
|
const dayZh = day.name.zh || "";
|
||||||
const dayEn = t(dayZh) || translations[dayZh] || "";
|
const dayEn = t(dayZh) || translations[dayZh] || "";
|
||||||
@@ -370,17 +336,64 @@ export default function RecipeTranslationPage() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
tableRows.push(new TableRow({children: dayCells}));
|
dayRows.push(new TableRow({children: dayCells}));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. 创建文档 - 根据设置选择页面方向
|
// 5. 创建文档 - 根据设置选择页面方向和分页
|
||||||
const isLandscape = orientation === "landscape";
|
const isLandscape = orientation === "landscape";
|
||||||
const pageWidth = isLandscape ? 11906 : 16838;
|
const pageWidth = isLandscape ? 11906 : 16838;
|
||||||
const pageHeight = isLandscape ? 16838 : 11906;
|
const pageHeight = isLandscape ? 16838 : 11906;
|
||||||
|
|
||||||
const doc = new Document({
|
// 构建表头行
|
||||||
sections: [
|
const buildHeaderRow = (): TableRow => {
|
||||||
{
|
const headerCells: TableCell[] = [];
|
||||||
|
headerCells.push(
|
||||||
|
new TableCell({
|
||||||
|
children: [
|
||||||
|
new Paragraph({children: [new TextRun({text: "星期 / Week", bold: true})]}),
|
||||||
|
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
||||||
|
width: {size: 12, type: WidthType.PERCENTAGE},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
for (const mealType of MEAL_TYPES) {
|
||||||
|
const zhText = mealType.label;
|
||||||
|
const enText = t(zhText);
|
||||||
|
headerCells.push(
|
||||||
|
new TableCell({
|
||||||
|
children: [
|
||||||
|
new Paragraph({children: [new TextRun({text: enText || zhText, bold: true})]}),
|
||||||
|
enText ? new Paragraph({
|
||||||
|
children: [new TextRun({
|
||||||
|
text: zhText,
|
||||||
|
color: "666666",
|
||||||
|
size: 18
|
||||||
|
})]
|
||||||
|
}) : null,
|
||||||
|
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
||||||
|
width: {size: 17.6, type: WidthType.PERCENTAGE},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return new TableRow({children: headerCells, tableHeader: true});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 估算每页能放多少天(横向 A4 约 27cm 高度,减去标题和边距约 25cm,每行约 1cm)
|
||||||
|
const daysPerPage = 5;
|
||||||
|
|
||||||
|
// 构建 sections
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const sections: any[] = [];
|
||||||
|
|
||||||
|
if (secondPageHeader && dayRows.length > daysPerPage) {
|
||||||
|
// 分页模式:每页有表头
|
||||||
|
const pageCount = Math.ceil(dayRows.length / daysPerPage);
|
||||||
|
|
||||||
|
for (let page = 0; page < pageCount; page++) {
|
||||||
|
const startIdx = page * daysPerPage;
|
||||||
|
const endIdx = Math.min(startIdx + daysPerPage, dayRows.length);
|
||||||
|
const pageRows = dayRows.slice(startIdx, endIdx);
|
||||||
|
|
||||||
|
sections.push({
|
||||||
properties: {
|
properties: {
|
||||||
page: {
|
page: {
|
||||||
size: {
|
size: {
|
||||||
@@ -389,33 +402,76 @@ export default function RecipeTranslationPage() {
|
|||||||
height: pageHeight,
|
height: pageHeight,
|
||||||
},
|
},
|
||||||
margin: {
|
margin: {
|
||||||
top: 700, // 约1.27厘米
|
top: 700,
|
||||||
bottom: 700,
|
bottom: 700,
|
||||||
left: 900, // 约1.9厘米
|
left: 900,
|
||||||
right: 900,
|
right: 900,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
new Paragraph({
|
...(page === 0 ? [
|
||||||
children: [
|
new Paragraph({
|
||||||
new TextRun({
|
children: [
|
||||||
text: t(data.title?.zh || "食谱") || data.title?.zh || "食谱",
|
new TextRun({
|
||||||
bold: true,
|
text: t(data.title?.zh || "食谱") || data.title?.zh || "食谱",
|
||||||
size: 32,
|
bold: true,
|
||||||
}),
|
size: 32,
|
||||||
],
|
}),
|
||||||
alignment: AlignmentType.CENTER,
|
],
|
||||||
}),
|
alignment: AlignmentType.CENTER,
|
||||||
new Paragraph({children: []}),
|
}),
|
||||||
|
new Paragraph({children: []}),
|
||||||
|
] : []),
|
||||||
new Table({
|
new Table({
|
||||||
rows: tableRows,
|
rows: [buildHeaderRow(), ...pageRows],
|
||||||
width: {size: 100, type: WidthType.PERCENTAGE},
|
width: {size: 100, type: WidthType.PERCENTAGE},
|
||||||
layout: TableLayoutType.FIXED,
|
layout: TableLayoutType.FIXED,
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 普通模式:单表格无分页表头
|
||||||
|
sections.push({
|
||||||
|
properties: {
|
||||||
|
page: {
|
||||||
|
size: {
|
||||||
|
orientation: isLandscape ? PageOrientation.LANDSCAPE : PageOrientation.PORTRAIT,
|
||||||
|
width: pageWidth,
|
||||||
|
height: pageHeight,
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
top: 700,
|
||||||
|
bottom: 700,
|
||||||
|
left: 900,
|
||||||
|
right: 900,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
children: [
|
||||||
|
new Paragraph({
|
||||||
|
children: [
|
||||||
|
new TextRun({
|
||||||
|
text: t(data.title?.zh || "食谱") || data.title?.zh || "食谱",
|
||||||
|
bold: true,
|
||||||
|
size: 32,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
}),
|
||||||
|
new Paragraph({children: []}),
|
||||||
|
new Table({
|
||||||
|
rows: [buildHeaderRow(), ...dayRows],
|
||||||
|
width: {size: 100, type: WidthType.PERCENTAGE},
|
||||||
|
layout: TableLayoutType.FIXED,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const doc = new Document({
|
||||||
|
sections,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 6. 生成并下载
|
// 6. 生成并下载
|
||||||
|
|||||||
Reference in New Issue
Block a user