= ({
- data,
- template,
-}) => {
- const { colorScheme } = template;
- const enabledSections = data.menuSections.filter(
- (section) => section.enabled
- );
- const sortedSections = [...enabledSections].sort((a, b) => a.order - b.order);
-
- const renderTimelineItem = (content: React.ReactNode, title: string) => (
-
-
-
-
- {title}
-
-
{content}
-
- {renderTimelineItem(
- ,
- sectionTitle
- )}
-
- );
- case "education":
- return (
-
- {renderTimelineItem(
- ,
- sectionTitle
- )}
-
- );
- case "skills":
- return (
-
- {renderTimelineItem(
- ,
- sectionTitle
- )}
-
- );
- case "projects":
- return (
-
- {renderTimelineItem(
-
,
- sectionTitle
- )}
-
- {renderTimelineItem(
- ,
- sectionTitle
- )}
-
- );
- }
- return null;
- }
- };
-
- return (
-
- {sortedSections.map((section) => (
-
- {renderSection(section.id)}
-
- ))}
-
+ {enabledSections.map((section) => (
+
{renderSection(section.id)}
+ ))}
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/classic/sections/EducationSection.tsx b/src/components/templates/classic/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/classic/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/classic/sections/ExperienceSection.tsx b/src/components/templates/classic/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/classic/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/classic/sections/ProjectSection.tsx b/src/components/templates/classic/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/classic/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/classic/sections/SectionTitle.tsx b/src/components/templates/classic/sections/SectionTitle.tsx
new file mode 100644
index 0000000..632ff42
--- /dev/null
+++ b/src/components/templates/classic/sections/SectionTitle.tsx
@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+
+ if (!showTitle) return null;
+
+ return (
+
+ {renderTitle}
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/classic/sections/SkillSection.tsx b/src/components/templates/classic/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/classic/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/components/templates/creative/config.ts b/src/components/templates/creative/config.ts
new file mode 100644
index 0000000..bbeffa4
--- /dev/null
+++ b/src/components/templates/creative/config.ts
@@ -0,0 +1,23 @@
+import { ResumeTemplate } from "@/types/template";
+
+export const creativeConfig: ResumeTemplate = {
+ id: "creative",
+ name: "创意模板",
+ description: "视觉错落设计，灵动活泼展现个性",
+ thumbnail: "creative",
+ layout: "creative",
+ colorScheme: {
+ primary: "#18181b",
+ secondary: "#64748b",
+ background: "#ffffff",
+ text: "#1e293b",
+ },
+ spacing: {
+ sectionGap: 24,
+ itemGap: 16,
+ contentPadding: 28,
+ },
+ basic: {
+ layout: "left",
+ },
+};
diff --git a/src/components/templates/creative/index.tsx b/src/components/templates/creative/index.tsx
new file mode 100644
index 0000000..7d0332b
--- /dev/null
+++ b/src/components/templates/creative/index.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { ResumeData } from "@/types/resume";
+import { ResumeTemplate } from "@/types/template";
+import BaseInfo from "./sections/BaseInfo";
+import GithubContribution from "@/components/shared/GithubContribution";
+import ExperienceSection from "./sections/ExperienceSection";
+import EducationSection from "./sections/EducationSection";
+import ProjectSection from "./sections/ProjectSection";
+import SkillSection from "./sections/SkillSection";
+import CustomSection from "./sections/CustomSection";
+
+interface CreativeTemplateProps {
+ data: ResumeData;
+ template: ResumeTemplate;
+}
+
+const CreativeTemplate: React.FC = ({ data, template }) => {
+ const { colorScheme } = template;
+ const enabledSections = data.menuSections.filter((s) => s.enabled).sort((a, b) => a.order - b.order);
+
+ const basicSection = enabledSections.find((s) => s.id === "basic");
+ const otherSections = enabledSections.filter((s) => s.id !== "basic");
+
+ const renderSection = (sectionId: string) => {
+ switch (sectionId) {
+ case "experience":
+ return ;
+ case "education":
+ return ;
+ case "skills":
+ return ;
+ case "projects":
+ return ;
+ default:
+ if (sectionId in data.customData) {
+ const title = data.menuSections.find((s) => s.id === sectionId)?.title || sectionId;
+ return ;
+ }
+ return null;
+ }
+ };
+
+ return (
+
+ {/* Top colored header block */}
+ {basicSection && (
+
+
+
+ {data.basic.githubContributionsVisible && (
+
+ )}
+
+
+ )}
+ {/* Content sections */}
+
+ {otherSections.map((section) => (
+
{renderSection(section.id)}
+ ))}
+
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/creative/sections/EducationSection.tsx b/src/components/templates/creative/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/creative/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/creative/sections/ExperienceSection.tsx b/src/components/templates/creative/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/creative/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/creative/sections/ProjectSection.tsx b/src/components/templates/creative/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/creative/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/creative/sections/SectionTitle.tsx b/src/components/templates/creative/sections/SectionTitle.tsx
new file mode 100644
index 0000000..e676d37
--- /dev/null
+++ b/src/components/templates/creative/sections/SectionTitle.tsx
@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+ if (!showTitle) return null;
+
+ return (
+
+ {renderTitle}
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/creative/sections/SkillSection.tsx b/src/components/templates/creative/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/creative/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/components/templates/elegant/config.ts b/src/components/templates/elegant/config.ts
new file mode 100644
index 0000000..7a8fe4d
--- /dev/null
+++ b/src/components/templates/elegant/config.ts
@@ -0,0 +1,23 @@
+import { ResumeTemplate } from "@/types/template";
+
+export const elegantConfig: ResumeTemplate = {
+ id: "elegant",
+ name: "优雅模板",
+ description: "居中标题单列设计，具有高级感的分隔线",
+ thumbnail: "elegant",
+ layout: "elegant",
+ colorScheme: {
+ primary: "#18181b",
+ secondary: "#71717a",
+ background: "#ffffff",
+ text: "#27272a",
+ },
+ spacing: {
+ sectionGap: 28,
+ itemGap: 18,
+ contentPadding: 32,
+ },
+ basic: {
+ layout: "center",
+ },
+};
diff --git a/src/components/templates/elegant/index.tsx b/src/components/templates/elegant/index.tsx
new file mode 100644
index 0000000..c27bcf5
--- /dev/null
+++ b/src/components/templates/elegant/index.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { ResumeData } from "@/types/resume";
+import { ResumeTemplate } from "@/types/template";
+import BaseInfo from "./sections/BaseInfo";
+import ExperienceSection from "./sections/ExperienceSection";
+import EducationSection from "./sections/EducationSection";
+import ProjectSection from "./sections/ProjectSection";
+import SkillSection from "./sections/SkillSection";
+import CustomSection from "./sections/CustomSection";
+
+interface ElegantTemplateProps {
+ data: ResumeData;
+ template: ResumeTemplate;
+}
+
+const ElegantTemplate: React.FC = ({ data, template }) => {
+ const { colorScheme } = template;
+ const enabledSections = data.menuSections.filter((s) => s.enabled).sort((a, b) => a.order - b.order);
+
+ const renderSection = (sectionId: string) => {
+ switch (sectionId) {
+ case "basic":
+ return ;
+ case "experience":
+ return ;
+ case "education":
+ return ;
+ case "skills":
+ return ;
+ case "projects":
+ return ;
+ default:
+ if (sectionId in data.customData) {
+ const title = data.menuSections.find((s) => s.id === sectionId)?.title || sectionId;
+ return ;
+ }
+ return null;
+ }
+ };
+
+ return (
+
+
+ {enabledSections.map((section) => (
+
{renderSection(section.id)}
+ ))}
+
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/elegant/sections/EducationSection.tsx b/src/components/templates/elegant/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/elegant/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/elegant/sections/ExperienceSection.tsx b/src/components/templates/elegant/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/elegant/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/elegant/sections/ProjectSection.tsx b/src/components/templates/elegant/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/elegant/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/elegant/sections/SectionTitle.tsx b/src/components/templates/elegant/sections/SectionTitle.tsx
new file mode 100644
index 0000000..6d9b51f
--- /dev/null
+++ b/src/components/templates/elegant/sections/SectionTitle.tsx
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+ if (!showTitle) return null;
+
+ return (
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/elegant/sections/SkillSection.tsx b/src/components/templates/elegant/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/elegant/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/components/templates/index.tsx b/src/components/templates/index.tsx
index 5acceed..494451a 100644
--- a/src/components/templates/index.tsx
+++ b/src/components/templates/index.tsx
@@ -1,14 +1,6 @@
import React from "react";
-import ClassicTemplate from "./ClassicTemplate";
-import ModernTemplate from "./ModernTemplate";
-import LeftRightTemplate from "./LeftRightTemplate";
-import TimelineTemplate from "./TimelineTemplate";
-import MinimalistTemplate from "./MinimalistTemplate";
-
-import ElegantTemplate from "./ElegantTemplate";
-import CreativeTemplate from "./CreativeTemplate";
-
import { TemplateProvider } from "./TemplateContext";
+import { getTemplateComponent } from "./registry";
import { ResumeData } from "@/types/resume";
import { ResumeTemplate } from "@/types/template";
@@ -19,32 +11,13 @@ interface TemplateProps {
const ResumeTemplateComponent: React.FC = ({
data,
- template
+ template,
}) => {
- const renderTemplate = () => {
- switch (template.layout) {
- case "modern":
- return ;
- case "left-right":
- return ;
- case "timeline":
- return ;
- case "minimalist":
- return ;
-
- case "elegant":
- return ;
- case "creative":
- return ;
-
- default:
- return ;
- }
- };
+ const TemplateComponent = getTemplateComponent(template.layout);
return (
- {renderTemplate()}
+
);
};
diff --git a/src/components/templates/left-right/config.ts b/src/components/templates/left-right/config.ts
new file mode 100644
index 0000000..1a451f5
--- /dev/null
+++ b/src/components/templates/left-right/config.ts
@@ -0,0 +1,23 @@
+import { ResumeTemplate } from "@/types/template";
+
+export const leftRightConfig: ResumeTemplate = {
+ id: "left-right",
+ name: "模块标题背景色",
+ description: "模块标题背景鲜明，突出美观特色",
+ thumbnail: "leftRight",
+ layout: "left-right",
+ colorScheme: {
+ primary: "#000000",
+ secondary: "#9ca3af",
+ background: "#ffffff",
+ text: "#212529",
+ },
+ spacing: {
+ sectionGap: 24,
+ itemGap: 16,
+ contentPadding: 32,
+ },
+ basic: {
+ layout: "left",
+ },
+};
diff --git a/src/components/templates/left-right/index.tsx b/src/components/templates/left-right/index.tsx
new file mode 100644
index 0000000..ab2529e
--- /dev/null
+++ b/src/components/templates/left-right/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { ResumeData } from "@/types/resume";
+import { ResumeTemplate } from "@/types/template";
+import BaseInfo from "./sections/BaseInfo";
+import ExperienceSection from "./sections/ExperienceSection";
+import EducationSection from "./sections/EducationSection";
+import ProjectSection from "./sections/ProjectSection";
+import SkillSection from "./sections/SkillSection";
+import CustomSection from "./sections/CustomSection";
+
+interface LeftRightTemplateProps {
+ data: ResumeData;
+ template: ResumeTemplate;
+}
+
+const LeftRightTemplate: React.FC = ({ data, template }) => {
+ const { colorScheme } = template;
+ const enabledSections = data.menuSections.filter((s) => s.enabled).sort((a, b) => a.order - b.order);
+
+ const renderSection = (sectionId: string) => {
+ switch (sectionId) {
+ case "basic":
+ return ;
+ case "experience":
+ return ;
+ case "education":
+ return ;
+ case "skills":
+ return ;
+ case "projects":
+ return ;
+ default:
+ if (sectionId in data.customData) {
+ const title = data.menuSections.find((s) => s.id === sectionId)?.title || sectionId;
+ return ;
+ }
+ return null;
+ }
+ };
+
+ return (
+
+ {enabledSections.map((section) => (
+
{renderSection(section.id)}
+ ))}
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/left-right/sections/EducationSection.tsx b/src/components/templates/left-right/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/left-right/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/left-right/sections/ExperienceSection.tsx b/src/components/templates/left-right/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/left-right/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/left-right/sections/ProjectSection.tsx b/src/components/templates/left-right/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/left-right/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/left-right/sections/SectionTitle.tsx b/src/components/templates/left-right/sections/SectionTitle.tsx
new file mode 100644
index 0000000..c171f0b
--- /dev/null
+++ b/src/components/templates/left-right/sections/SectionTitle.tsx
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+ if (!showTitle) return null;
+
+ return (
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/left-right/sections/SkillSection.tsx b/src/components/templates/left-right/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/left-right/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/components/templates/minimalist/config.ts b/src/components/templates/minimalist/config.ts
new file mode 100644
index 0000000..c025eee
--- /dev/null
+++ b/src/components/templates/minimalist/config.ts
@@ -0,0 +1,23 @@
+import { ResumeTemplate } from "@/types/template";
+
+export const minimalistConfig: ResumeTemplate = {
+ id: "minimalist",
+ name: "极简模板",
+ description: "大面积留白，干净纯粹的排版风格",
+ thumbnail: "minimalist",
+ layout: "minimalist",
+ colorScheme: {
+ primary: "#171717",
+ secondary: "#737373",
+ background: "#ffffff",
+ text: "#171717",
+ },
+ spacing: {
+ sectionGap: 32,
+ itemGap: 24,
+ contentPadding: 40,
+ },
+ basic: {
+ layout: "center",
+ },
+};
diff --git a/src/components/templates/minimalist/index.tsx b/src/components/templates/minimalist/index.tsx
new file mode 100644
index 0000000..9284fe5
--- /dev/null
+++ b/src/components/templates/minimalist/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { ResumeData } from "@/types/resume";
+import { ResumeTemplate } from "@/types/template";
+import BaseInfo from "./sections/BaseInfo";
+import ExperienceSection from "./sections/ExperienceSection";
+import EducationSection from "./sections/EducationSection";
+import ProjectSection from "./sections/ProjectSection";
+import SkillSection from "./sections/SkillSection";
+import CustomSection from "./sections/CustomSection";
+
+interface MinimalistTemplateProps {
+ data: ResumeData;
+ template: ResumeTemplate;
+}
+
+const MinimalistTemplate: React.FC = ({ data, template }) => {
+ const { colorScheme } = template;
+ const enabledSections = data.menuSections.filter((s) => s.enabled).sort((a, b) => a.order - b.order);
+
+ const renderSection = (sectionId: string) => {
+ switch (sectionId) {
+ case "basic":
+ return ;
+ case "experience":
+ return ;
+ case "education":
+ return ;
+ case "skills":
+ return ;
+ case "projects":
+ return ;
+ default:
+ if (sectionId in data.customData) {
+ const title = data.menuSections.find((s) => s.id === sectionId)?.title || sectionId;
+ return ;
+ }
+ return null;
+ }
+ };
+
+ return (
+
+ {enabledSections.map((section) => (
+
{renderSection(section.id)}
+ ))}
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/minimalist/sections/EducationSection.tsx b/src/components/templates/minimalist/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/minimalist/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/minimalist/sections/ExperienceSection.tsx b/src/components/templates/minimalist/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/minimalist/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/minimalist/sections/ProjectSection.tsx b/src/components/templates/minimalist/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/minimalist/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/minimalist/sections/SectionTitle.tsx b/src/components/templates/minimalist/sections/SectionTitle.tsx
new file mode 100644
index 0000000..6addecf
--- /dev/null
+++ b/src/components/templates/minimalist/sections/SectionTitle.tsx
@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+ if (!showTitle) return null;
+
+ return (
+
+ {renderTitle}
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/minimalist/sections/SkillSection.tsx b/src/components/templates/minimalist/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/minimalist/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/components/templates/modern/config.ts b/src/components/templates/modern/config.ts
new file mode 100644
index 0000000..42f349c
--- /dev/null
+++ b/src/components/templates/modern/config.ts
@@ -0,0 +1,23 @@
+import { ResumeTemplate } from "@/types/template";
+
+export const modernConfig: ResumeTemplate = {
+ id: "modern",
+ name: "两栏布局",
+ description: "经典两栏，突出个人特色",
+ thumbnail: "modern",
+ layout: "modern",
+ colorScheme: {
+ primary: "#000000",
+ secondary: "#6b7280",
+ background: "#ffffff",
+ text: "#212529",
+ },
+ spacing: {
+ sectionGap: 20,
+ itemGap: 20,
+ contentPadding: 1,
+ },
+ basic: {
+ layout: "center",
+ },
+};
diff --git a/src/components/templates/modern/index.tsx b/src/components/templates/modern/index.tsx
new file mode 100644
index 0000000..d4f4c7e
--- /dev/null
+++ b/src/components/templates/modern/index.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { ResumeData } from "@/types/resume";
+import { ResumeTemplate } from "@/types/template";
+import BaseInfo from "./sections/BaseInfo";
+import ExperienceSection from "./sections/ExperienceSection";
+import EducationSection from "./sections/EducationSection";
+import ProjectSection from "./sections/ProjectSection";
+import SkillSection from "./sections/SkillSection";
+import CustomSection from "./sections/CustomSection";
+
+interface ModernTemplateProps {
+ data: ResumeData;
+ template: ResumeTemplate;
+}
+
+const ModernTemplate: React.FC = ({ data, template }) => {
+ const { colorScheme } = template;
+ const enabledSections = data.menuSections.filter((s) => s.enabled).sort((a, b) => a.order - b.order);
+
+ const renderSection = (sectionId: string) => {
+ switch (sectionId) {
+ case "basic":
+ return ;
+ case "experience":
+ return ;
+ case "education":
+ return ;
+ case "skills":
+ return ;
+ case "projects":
+ return ;
+ default:
+ if (sectionId in data.customData) {
+ const title = data.menuSections.find((s) => s.id === sectionId)?.title || sectionId;
+ return ;
+ }
+ return null;
+ }
+ };
+
+ const basicSection = enabledSections.find((s) => s.id === "basic");
+ const otherSections = enabledSections.filter((s) => s.id !== "basic");
+
+ return (
+
+
+ {basicSection && renderSection(basicSection.id)}
+
+
+ {otherSections.map((section) => (
+
{renderSection(section.id)}
+ ))}
+
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/modern/sections/EducationSection.tsx b/src/components/templates/modern/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/modern/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/modern/sections/ExperienceSection.tsx b/src/components/templates/modern/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/modern/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/modern/sections/ProjectSection.tsx b/src/components/templates/modern/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/modern/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/modern/sections/SectionTitle.tsx b/src/components/templates/modern/sections/SectionTitle.tsx
new file mode 100644
index 0000000..154fd52
--- /dev/null
+++ b/src/components/templates/modern/sections/SectionTitle.tsx
@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+ if (!showTitle) return null;
+
+ return (
+
+ {renderTitle}
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/modern/sections/SkillSection.tsx b/src/components/templates/modern/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/modern/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/components/templates/registry.ts b/src/components/templates/registry.ts
new file mode 100644
index 0000000..c5526cd
--- /dev/null
+++ b/src/components/templates/registry.ts
@@ -0,0 +1,55 @@
+import React from "react";
+import { ResumeTemplate } from "@/types/template";
+
+// Import configs
+import { classicConfig } from "./classic/config";
+import { modernConfig } from "./modern/config";
+import { leftRightConfig } from "./left-right/config";
+import { timelineConfig } from "./timeline/config";
+import { minimalistConfig } from "./minimalist/config";
+import { elegantConfig } from "./elegant/config";
+import { creativeConfig } from "./creative/config";
+
+// Import components
+import ClassicTemplate from "./classic";
+import ModernTemplate from "./modern";
+import LeftRightTemplate from "./left-right";
+import TimelineTemplate from "./timeline";
+import MinimalistTemplate from "./minimalist";
+import ElegantTemplate from "./elegant";
+import CreativeTemplate from "./creative";
+
+export interface TemplateRegistryEntry {
+ config: ResumeTemplate;
+ Component: React.FC<{ data: any; template: ResumeTemplate }>;
+}
+
+/**
+ * Unified template registry.
+ * To add a new template, create a directory under `templates/` with config.ts + index.tsx,
+ * then add one line here. No other files need to change.
+ */
+export const TEMPLATE_REGISTRY: TemplateRegistryEntry[] = [
+ { config: classicConfig, Component: ClassicTemplate },
+ { config: modernConfig, Component: ModernTemplate },
+ { config: leftRightConfig, Component: LeftRightTemplate },
+ { config: timelineConfig, Component: TimelineTemplate },
+ { config: minimalistConfig, Component: MinimalistTemplate },
+ { config: elegantConfig, Component: ElegantTemplate },
+ { config: creativeConfig, Component: CreativeTemplate },
+];
+
+/** All template configs — drop-in replacement for the old DEFAULT_TEMPLATES */
+export const DEFAULT_TEMPLATES: ResumeTemplate[] = TEMPLATE_REGISTRY.map(
+ (entry) => entry.config
+);
+
+/** Look up a template component by layout id */
+export function getTemplateComponent(
+ layout: string
+): React.FC<{ data: any; template: ResumeTemplate }> {
+ return (
+ TEMPLATE_REGISTRY.find((entry) => entry.config.layout === layout)
+ ?.Component ?? ClassicTemplate
+ );
+}
diff --git a/src/components/templates/shared/SectionWrapper.tsx b/src/components/templates/shared/SectionWrapper.tsx
new file mode 100644
index 0000000..d587ab3
--- /dev/null
+++ b/src/components/templates/shared/SectionWrapper.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionWrapperProps {
+ sectionId: string;
+ children: React.ReactNode;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+/**
+ * Thin interaction wrapper for all section components.
+ * Provides hover highlight + click-to-select behavior.
+ */
+const SectionWrapper: React.FC = ({
+ sectionId,
+ children,
+ className = "",
+ style,
+}) => {
+ const { setActiveSection } = useResumeStore();
+
+ return (
+ setActiveSection(sectionId)}
+ >
+ {children}
+
+ );
+};
+
+export default SectionWrapper;
diff --git a/src/components/templates/timeline/config.ts b/src/components/templates/timeline/config.ts
new file mode 100644
index 0000000..364c9f2
--- /dev/null
+++ b/src/components/templates/timeline/config.ts
@@ -0,0 +1,23 @@
+import { ResumeTemplate } from "@/types/template";
+
+export const timelineConfig: ResumeTemplate = {
+ id: "timeline",
+ name: "时间线风格",
+ description: "时间线布局，突出经历的时间顺序",
+ thumbnail: "timeline",
+ layout: "timeline",
+ colorScheme: {
+ primary: "#18181b",
+ secondary: "#64748b",
+ background: "#ffffff",
+ text: "#212529",
+ },
+ spacing: {
+ sectionGap: 1,
+ itemGap: 12,
+ contentPadding: 24,
+ },
+ basic: {
+ layout: "right",
+ },
+};
diff --git a/src/components/templates/timeline/index.tsx b/src/components/templates/timeline/index.tsx
new file mode 100644
index 0000000..9716f19
--- /dev/null
+++ b/src/components/templates/timeline/index.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { ResumeData } from "@/types/resume";
+import { ResumeTemplate } from "@/types/template";
+import BaseInfo from "./sections/BaseInfo";
+import ExperienceSection from "./sections/ExperienceSection";
+import EducationSection from "./sections/EducationSection";
+import ProjectSection from "./sections/ProjectSection";
+import SkillSection from "./sections/SkillSection";
+import CustomSection from "./sections/CustomSection";
+
+interface TimelineTemplateProps {
+ data: ResumeData;
+ template: ResumeTemplate;
+}
+
+const TimelineTemplate: React.FC = ({ data, template }) => {
+ const { colorScheme } = template;
+ const enabledSections = data.menuSections.filter((s) => s.enabled).sort((a, b) => a.order - b.order);
+
+ const renderTimelineItem = (content: React.ReactNode, title: string) => (
+
+
+
+
+ {title}
+
+
{content}
+
+ {enabledSections.map((section) => {
+ if (section.id === "basic") {
+ return
{renderSection(section.id)}
;
+ }
+ const sectionTitle = data.menuSections.find((s) => s.id === section.id)?.title || section.id;
+ return (
+
+
+ {renderTimelineItem(renderSection(section.id), sectionTitle)}
+
+
+ );
+ })}
+
+
+
+
+ {PhotoComponent}
+
+ {nameField.visible !== false && basic[nameField.key] && (
+ {basic[nameField.key] as string}
+ )}
+ {titleField.visible !== false && basic[titleField.key] && (
+ {basic[titleField.key] as string}
+ )}
+
+
+
+ {allFields.map((item) => (
+
+ {useIconMode ? (
+
+ {getIcon(item.icon)}
+ {item.key === "email" ?
{item.value} :
{item.value}}
+
+ {!item.custom && {t(`basicPanel.basicFields.${item.key}`)}:}
+ {item.custom && {item.label}:}
+ {item.value}
+
+ )}
+
+ ))}
+
+
+
{item.title}
+
+ {centerSubtitle && (
+
+ {item.subtitle}
+
+ )}
+
+ {formatDateString(item.dateRange, locale)}
+
+
+ {!centerSubtitle && item.subtitle && (
+ {item.subtitle}
+ )}
+ {item.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CustomSection;
diff --git a/src/components/templates/timeline/sections/EducationSection.tsx b/src/components/templates/timeline/sections/EducationSection.tsx
new file mode 100644
index 0000000..d49d094
--- /dev/null
+++ b/src/components/templates/timeline/sections/EducationSection.tsx
@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Education, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { useLocale } from "@/i18n/compat/client";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+
+interface EducationSectionProps {
+ education?: Education[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const EducationSection = ({ education, globalSettings, showTitle = true }: EducationSectionProps) => {
+ const locale = useLocale();
+ const visibleEducation = education?.filter((edu) => edu.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleEducation?.map((edu) => (
+
+
+
+ {edu.school}
+
+ {centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+
+ {`${formatDateString(edu.startDate, locale)} - ${formatDateString(edu.endDate, locale)}`}
+
+
+ {!centerSubtitle && (
+
+ {[edu.major, edu.degree].filter(Boolean).join(" · ")}
+ {edu.gpa && ` · GPA ${edu.gpa}`}
+
+ )}
+ {edu.description && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default EducationSection;
diff --git a/src/components/templates/timeline/sections/ExperienceSection.tsx b/src/components/templates/timeline/sections/ExperienceSection.tsx
new file mode 100644
index 0000000..bb4d3ba
--- /dev/null
+++ b/src/components/templates/timeline/sections/ExperienceSection.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Experience, GlobalSettings } from "@/types/resume";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ExperienceSectionProps {
+ experiences?: Experience[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ExperienceSection: React.FC = ({ experiences, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleExperiences = experiences?.filter((exp) => exp.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+ {visibleExperiences?.map((exp) => (
+
+
+
+ {exp.company}
+
+ {centerSubtitle && (
+
+ {exp.position}
+
+ )}
+
+ {formatDateString(exp.date, locale)}
+
+
+ {exp.position && !centerSubtitle && (
+ {exp.position}
+ )}
+ {exp.details && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ExperienceSection;
diff --git a/src/components/templates/timeline/sections/ProjectSection.tsx b/src/components/templates/timeline/sections/ProjectSection.tsx
new file mode 100644
index 0000000..3607f72
--- /dev/null
+++ b/src/components/templates/timeline/sections/ProjectSection.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { Project, GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+import { formatDateString } from "@/lib/utils";
+import { useLocale } from "@/i18n/compat/client";
+
+interface ProjectSectionProps {
+ projects: Project[];
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const ProjectSection: React.FC = ({ projects, globalSettings, showTitle = true }) => {
+ const locale = useLocale();
+ const visibleProjects = projects?.filter((p) => p.visible);
+ const centerSubtitle = globalSettings?.centerSubtitle;
+ const flexLayout = globalSettings?.flexibleHeaderLayout;
+
+ return (
+
+
+
+
+ {visibleProjects.map((project) => (
+
+
+
+
{project.name}
+
+ {project.link && !centerSubtitle && (
+
+ {(() => { try { return new URL(project.link.startsWith("http") ? project.link : `https://${project.link}`).hostname.replace(/^www\./, ""); } catch { return project.link; } })()}
+
+ )}
+ {!project.link && !centerSubtitle && !flexLayout && }
+ {centerSubtitle && (
+
+ {project.role}
+
+ )}
+
+ {formatDateString(project.date, locale)}
+
+
+ {project.role && !centerSubtitle && (
+ {project.role}
+ )}
+ {project.link && centerSubtitle && (
+ {project.link}
+ )}
+ {project.description && (
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default ProjectSection;
diff --git a/src/components/templates/timeline/sections/SectionTitle.tsx b/src/components/templates/timeline/sections/SectionTitle.tsx
new file mode 100644
index 0000000..4827b1f
--- /dev/null
+++ b/src/components/templates/timeline/sections/SectionTitle.tsx
@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { GlobalSettings } from "@/types/resume";
+import { useTemplateContext } from "../../TemplateContext";
+import { useResumeStore } from "@/store/useResumeStore";
+
+interface SectionTitleProps {
+ globalSettings?: GlobalSettings;
+ type: string;
+ title?: string;
+ showTitle?: boolean;
+}
+
+const SectionTitle = ({ type, title, globalSettings, showTitle = true }: SectionTitleProps) => {
+ const { activeResume } = useResumeStore();
+ const templateContext = useTemplateContext();
+ const menuSections = templateContext?.menuSections ?? activeResume?.menuSections ?? [];
+
+ const renderTitle = useMemo(() => {
+ if (type === "custom") return title;
+ return menuSections.find((s) => s.id === type)?.title;
+ }, [menuSections, type, title]);
+
+ const themeColor = globalSettings?.themeColor;
+ if (!showTitle) return null;
+
+ // Timeline SectionTitle is rendered by the template wrapper (renderTimelineItem)
+ // This is a minimal fallback for basic section
+ return (
+
+ {renderTitle}
+
+ );
+};
+
+export default SectionTitle;
diff --git a/src/components/templates/timeline/sections/SkillSection.tsx b/src/components/templates/timeline/sections/SkillSection.tsx
new file mode 100644
index 0000000..6721caf
--- /dev/null
+++ b/src/components/templates/timeline/sections/SkillSection.tsx
@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+import SectionTitle from "./SectionTitle";
+import SectionWrapper from "../../shared/SectionWrapper";
+import { GlobalSettings } from "@/types/resume";
+import { normalizeRichTextContent } from "@/lib/richText";
+
+interface SkillSectionProps {
+ skill?: string;
+ globalSettings?: GlobalSettings;
+ showTitle?: boolean;
+}
+
+const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SkillSection;
diff --git a/src/config/index.ts b/src/config/index.ts
index 0cceeab..5f6d8b3 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,5 +1,7 @@
import { BasicFieldType } from "@/types/resume";
-import { ResumeTemplate } from "@/types/template";
+
+export { DEFAULT_TEMPLATES } from "@/components/templates/registry";
+
export const DEFAULT_FIELD_ORDER: BasicFieldType[] = [
{ id: "1", key: "name", label: "姓名", type: "text", visible: true },
@@ -17,157 +19,6 @@ export const DEFAULT_FIELD_ORDER: BasicFieldType[] = [
{ id: "7", key: "location", label: "所在地", type: "text", visible: true }
];
-export const DEFAULT_TEMPLATES: ResumeTemplate[] = [
- {
- id: "classic",
- name: "经典模板",
- description: "传统简约的简历布局，适合大多数求职场景",
- thumbnail: "classic",
- layout: "classic",
- colorScheme: {
- primary: "#000000",
- secondary: "#4b5563",
- background: "#ffffff",
- text: "#212529"
- },
- spacing: {
- sectionGap: 24,
- itemGap: 16,
- contentPadding: 32
- },
- basic: {
- layout: "center"
- }
- },
- {
- id: "modern",
- name: "两栏布局",
- description: "经典两栏，突出个人特色",
- thumbnail: "modern",
- layout: "modern",
- colorScheme: {
- primary: "#000000",
- secondary: "#6b7280",
- background: "#ffffff",
- text: "#212529"
- },
- spacing: {
- sectionGap: 20,
- itemGap: 20,
- contentPadding: 1
- },
- basic: {
- layout: "center"
- }
- },
- {
- id: "left-right",
- name: "模块标题背景色",
- description: "模块标题背景鲜明，突出美观特色",
- thumbnail: "leftRight",
- layout: "left-right",
- colorScheme: {
- primary: "#000000",
- secondary: "#9ca3af",
- background: "#ffffff",
- text: "#212529"
- },
- spacing: {
- sectionGap: 24,
- itemGap: 16,
- contentPadding: 32
- },
- basic: {
- layout: "left"
- }
- },
- {
- id: "timeline",
- name: "时间线风格",
- description: "时间线布局，突出经历的时间顺序",
- thumbnail: "timeline",
- layout: "timeline",
- colorScheme: {
- primary: "#18181b",
- secondary: "#64748b",
- background: "#ffffff",
- text: "#212529"
- },
- spacing: {
- sectionGap: 1,
- itemGap: 12,
- contentPadding: 24
- },
- basic: {
- layout: "right"
- }
- },
- {
- id: "minimalist",
- name: "极简模板",
- description: "大面积留白，干净纯粹的排版风格",
- thumbnail: "minimalist",
- layout: "minimalist",
- colorScheme: {
- primary: "#171717",
- secondary: "#737373",
- background: "#ffffff",
- text: "#171717"
- },
- spacing: {
- sectionGap: 32,
- itemGap: 24,
- contentPadding: 40
- },
- basic: {
- layout: "center"
- }
- },
-
- {
- id: "elegant",
- name: "优雅模板",
- description: "居中标题单列设计，具有高级感的分隔线",
- thumbnail: "elegant",
- layout: "elegant",
- colorScheme: {
- primary: "#18181b",
- secondary: "#71717a",
- background: "#ffffff",
- text: "#27272a"
- },
- spacing: {
- sectionGap: 28,
- itemGap: 18,
- contentPadding: 32
- },
- basic: {
- layout: "center"
- }
- },
- {
- id: "creative",
- name: "创意模板",
- description: "视觉错落设计，灵动活泼展现个性",
- thumbnail: "creative",
- layout: "creative",
- colorScheme: {
- primary: "#18181b",
- secondary: "#64748b",
- background: "#ffffff",
- text: "#1e293b"
- },
- spacing: {
- sectionGap: 24,
- itemGap: 16,
- contentPadding: 28
- },
- basic: {
- layout: "left"
- }
- }
-];
-
export const GITHUB_REPO_URL = "https://github.com/JOYCEQL/magic-resume";
export const PDF_EXPORT_CONFIG = {
diff --git a/src/config/templates.ts b/src/config/templates.ts
deleted file mode 100644
index 12623eb..0000000
--- a/src/config/templates.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { TemplateConfig } from "@/types/template";
-
-export const templateConfigs: Record = {
- default: {
- sectionTitle: {
- styles: {
- fontSize: 18,
- },
- },
- },
- classic: {
- sectionTitle: {
- className: "border-b pb-2",
- styles: {
- fontSize: 18,
- borderColor: "var(--theme-color)",
- },
- },
- },
- modern: {
- sectionTitle: {
- className: "font-semibold mb-2 uppercase tracking-wider",
- styles: {
- fontSize: 18,
- },
- },
- },
- "left-right": {
- sectionTitle: {
- className: "pl-1 flex items-center",
- styles: {
- fontSize: 18,
- backgroundColor: "var(--theme-color)",
- opacity: 0.1,
- color: "var(--theme-color)",
- borderLeftWidth: "3px",
- borderLeftStyle: "solid",
- borderLeftColor: "var(--theme-color)",
- },
- },
- },
- minimalist: {
- sectionTitle: {
- className: "mb-3 tracking-widest",
- styles: {
- fontSize: 16,
- },
- },
- },
-
- elegant: {
- sectionTitle: {
- className: "flex items-center justify-center w-full mb-4 relative",
- styles: {
- fontSize: 20,
- },
- },
- },
- creative: {
- sectionTitle: {
- className: "inline-block px-3 py-1 mb-3 rounded-md text-white shadow-sm",
- styles: {
- fontSize: 16,
- backgroundColor: "var(--theme-color)",
- },
- },
- },
-
-};
-
diff --git a/src/types/template.ts b/src/types/template.ts
index a02a6c3..a735bec 100644
--- a/src/types/template.ts
+++ b/src/types/template.ts
@@ -5,7 +5,7 @@ export interface ResumeTemplate {
name: string;
description: string;
thumbnail: string;
- layout: "classic" | "modern" | "left-right" | "timeline" | "minimalist" | "elegant" | "creative";
+ layout: string;
colorScheme: {
primary: string;
secondary: string;